html, body { margin: 0; height: 100%; overflow: hidden; background: #f2b09a; font-family: "Courier New", monospace; user-select: none; }
canvas { display: block; margin: auto; }

#score { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 22px;
  background: rgba(40,10,30,.45); color: #fff; font-size: 22px; font-weight: bold; letter-spacing: 2px;
  border: 3px solid rgba(255,255,255,.7); pointer-events: none; z-index: 2; display: none; }

#room-info { position: fixed; top: 14px; right: 20px; padding: 6px 16px;
  background: rgba(0,0,0,.6); color: #ffd36a; font-size: 14px; font-weight: bold;
  border: 2px solid rgba(255,255,255,.4); z-index: 2; }

#damage-flash { position: fixed; inset: 0; pointer-events: none; z-index: 3; background: rgba(255,0,0,0); transition: background 0.1s; }
#hs-indicator {
  position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%);
  color: #ff3333; font-size: 26px; font-weight: 900; letter-spacing: 3px;
  text-shadow: 2px 2px 0 #000; pointer-events: none; z-index: 5; opacity: 0;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
#hs-indicator.show { opacity: 1; transform: translate(-50%, -65%) scale(1.15); }

#cross { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 2; display: none; }
#cross.style-cross { width: 22px; height: 22px; }
#cross.style-cross::before, #cross.style-cross::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 3px #000; }
#cross.style-cross::before { left: 10px; top: 0; width: 2px; height: 22px; }
#cross.style-cross::after { top: 10px; left: 0; height: 2px; width: 22px; }
#cross.style-dot { width: 5px; height: 5px; background: #ffffff; border: 1px solid #000000; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,0.8); }

.overlay-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: rgba(40,15,25,.88); color: #fff; text-align: center; z-index: 4; }
.overlay-screen h1 { font-size: 40px; margin: 0 0 6px; text-shadow: 3px 3px 0 #c0392b; letter-spacing: 2px; }
.overlay-screen h2 { font-size: 28px; margin: 0 0 10px; text-shadow: 2px 2px 0 #c0392b; letter-spacing: 2px; }
.overlay-screen p { margin: 4px; font-size: 14px; color: #eee; }

.menu-panel { background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.3); padding: 14px 20px; margin: 10px 0; border-radius: 4px; width: 90%; max-width: 480px; }

#hud { position: fixed; left: 22px; bottom: 18px; color: #fff; font-size: 16px; letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000; pointer-events: none; z-index: 2; display: none; }
#hud b { font-size: 32px; }

.menu-btn { margin: 6px; padding: 10px 24px; background: #c0392b; border: 2px solid #fff; color: #fff; font-family: inherit; font-weight: bold; font-size: 15px; cursor: pointer; transition: 0.2s; }
.menu-btn:hover { background: #e74c3c; transform: scale(1.02); }
.menu-btn.sec { background: #2a2a2e; }
.menu-btn.sec:hover { background: #444; }

input[type="text"], input[type="password"], input[type="email"] { padding: 8px 12px; background: #111; border: 2px solid #fff; color: #fff; font-family: inherit; font-size: 14px; margin: 6px 0; width: 85%; }

#cs-console { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 240px; background: rgba(15,15,15,0.95); border-bottom: 3px solid #c0392b; z-index: 100; flex-direction: column; padding: 10px; box-sizing: border-box; font-family: monospace; }
#cs-console-output { flex: 1; color: #2ecc71; font-size: 13px; overflow-y: auto; text-align: left; padding: 5px; }
#cs-console-input { width: 100%; background: #000; border: 1px solid #444; color: #fff; padding: 8px; font-family: monospace; font-size: 14px; outline: none; box-sizing: border-box; }

.modal-screen { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 50; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; }