:root {
  --bg: #07090b;
  --panel: rgba(14, 18, 22, 0.88);
  --line: rgba(255, 255, 255, 0.12);
  --text: #dfe6ea;
  --dim: #8a979f;
  --accent: #ff4b3a;
  --good: #5be37d;
  --warn: #ffc247;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }

#vignette, #hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
#vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(120, 0, 0, 0.75) 100%); }
#hurt { background: rgba(255, 0, 0, 0.45); transition: opacity 0.6s; }

.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(7, 9, 11, 0.55), rgba(7, 9, 11, 0.93));
  z-index: 10;
}
.screen h1 { margin: 0; font-size: clamp(36px, 7vw, 72px); letter-spacing: 0.25em; color: var(--accent); text-shadow: 0 0 24px rgba(255, 75, 58, 0.45); }
.screen h3 { margin: 0; font-weight: 400; color: var(--dim); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.panel label { display: flex; flex-direction: column; gap: 6px; color: var(--dim); font-size: 13px; }
.row { display: flex; gap: 8px; }
.or { text-align: center; color: var(--dim); font-size: 12px; }
input { background: #0b0f12; border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 10px 12px; font: inherit; width: 100%; }
#code { text-transform: uppercase; letter-spacing: 0.3em; text-align: center; }
button { background: #1b2329; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 10px 18px; font: inherit; cursor: pointer; }
button:hover { background: #26313a; }
button.primary { background: var(--accent); border-color: transparent; color: #fff; font-weight: 700; }
button.primary:hover { filter: brightness(1.15); }
button:disabled { opacity: 0.4; cursor: default; }
.msg { margin: 0; min-height: 1.2em; color: var(--warn); font-size: 13px; }
.sub { margin: 0; color: var(--dim); font-size: 12px; }
.rules { color: var(--dim); font-size: 13px; line-height: 1.6; list-style: none; padding: 0; margin: 4px 0 0; max-width: 460px; }
.bar { width: min(320px, 80vw); height: 6px; background: #1b2329; border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }
.codebox { text-align: center; color: var(--dim); font-size: 13px; }
.codebox b { display: block; font-size: 40px; letter-spacing: 0.3em; color: var(--text); margin-top: 4px; }
#lobby-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#lobby-players li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #0b0f12; border-radius: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

#end-stats { border-collapse: collapse; font-size: 14px; }
#end-stats th, #end-stats td { padding: 6px 14px; border-bottom: 1px solid var(--line); text-align: left; }
#end-stats th { color: var(--dim); font-weight: 400; }
#endscreen.win h1 { color: var(--good); text-shadow: 0 0 24px rgba(91, 227, 125, 0.4); }
#endscreen { background: rgba(7, 9, 11, 0.82); }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: 0 1px 4px #000; }
#topbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
#timer { font-size: 44px; font-weight: 700; letter-spacing: 0.08em; }
#timer.low { color: var(--accent); }
#objcount { color: var(--dim); font-size: 13px; }
#roster { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
#roster div { display: flex; align-items: center; gap: 8px; }
#roster .down { color: var(--accent); }
#roster .escaped { color: var(--good); }
#roster .dead { color: var(--dim); text-decoration: line-through; }
#toasts { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { background: rgba(0, 0, 0, 0.6); padding: 6px 14px; border-radius: 4px; font-size: 14px; animation: fade 4s forwards; }
.toast.bad { color: var(--accent); }
.toast.good { color: var(--good); }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
#prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.65); padding: 8px 16px; border-radius: 6px; font-size: 15px; }
#holdbar { position: absolute; left: 50%; top: calc(58% + 44px); width: 200px; height: 8px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.15); border-radius: 4px; overflow: hidden; }
#holdbar i { display: block; height: 100%; width: 0; background: var(--warn); }
#downed { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); text-align: center; }
#downed h2 { margin: 0; color: var(--accent); font-size: 40px; letter-spacing: 0.2em; }
#downed p { margin: 6px 0 0; }
#spectate { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); color: var(--dim); }
#stamina { position: absolute; left: 50%; bottom: 36px; width: 220px; height: 6px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
#stamina i { display: block; height: 100%; width: 100%; background: #c9d6dd; }
#minimapwrap { position: absolute; right: 14px; bottom: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.55); border-radius: 6px; padding: 4px; }
#minimap { width: 180px; height: 180px; display: block; }
#hints { position: absolute; left: 16px; bottom: 12px; color: var(--dim); font-size: 11px; }
#resume { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; font-size: 24px; background: rgba(0, 0, 0, 0.55); pointer-events: auto; }
#resume p { margin: 0 0 8px; letter-spacing: 0.3em; }
#compass { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--warn); }
#compass.exit { color: var(--good); }
#arrow { display: inline-block; font-size: 26px; transform-origin: 50% 50%; }
#timer.escape { color: var(--accent); animation: pulse 0.8s infinite alternate; }
@keyframes pulse { to { opacity: 0.55; } }
.nametag { position: absolute; }
#battery { position: absolute; left: 50%; bottom: 52px; width: 220px; height: 5px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
#battery i { display: block; height: 100%; width: 100%; background: #ffe27a; }
label.set { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); width: 260px; }
label.set input { padding: 0; }

.panel.wide { width: min(560px, 100%); max-height: 58vh; overflow-y: auto; font-size: 14px; line-height: 1.5; }
.panel h2 { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.2em; color: var(--accent); }
.panel p { margin: 0; }
.keys { border-collapse: collapse; width: 100%; font-size: 13px; }
.keys td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.keys td:first-child { color: var(--warn); white-space: nowrap; }
#how-monsters { margin: 0; padding-left: 18px; }
#how-monsters b { color: var(--text); }
select { background: #0b0f12; border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 8px; font: inherit; }
label.set.check { flex-direction: row; align-items: center; gap: 8px; }
label.set.check input { width: auto; }
#menu-main button, #menu-join button, #menu-settings button, #menu-how button { width: 100%; }
.row button { width: auto !important; }
.ping-label { position: absolute; }

#cross { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); pointer-events: none; z-index: 6; }
#fps { position: fixed; right: 12px; top: 8px; color: var(--dim); font-size: 12px; z-index: 20; pointer-events: none; }
#menu-settings { max-height: 70vh; overflow-y: auto; align-items: center; }
#lobby .panel { max-height: 86vh; overflow-y: auto; width: min(440px, 100%); }
#lobby select { width: 100%; }
#how-modes, #how-maps { margin: 0; padding-left: 18px; }
#how-modes b, #how-maps b { color: var(--text); }
#noise { position: absolute; left: 50%; bottom: 62px; width: 220px; height: 5px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
#noise i { display: block; height: 100%; width: 0; }
#miclabel { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.15em; color: var(--dim); }
#mgcanvas { position: absolute; left: 50%; top: 40%; width: 512px; height: 320px; transform: translate(-50%, -50%); pointer-events: none; image-rendering: auto; }
#item { position: absolute; left: 16px; bottom: 44px; max-width: 260px; background: rgba(0,0,0,0.55); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; }
#item span { color: var(--warn); font-size: 11px; }
#item small { color: var(--dim); font-size: 11px; }
#how-items { margin: 0; padding-left: 18px; }
#how-items b { color: var(--text); }
#hud > *:not(#resume):not(#mgcanvas) { zoom: var(--hud, 1); }
#menu-settings h2 { margin: 8px 0 0; font-size: 13px; letter-spacing: 0.2em; color: var(--accent); align-self: flex-start; }
#menu-settings select { width: 260px; }
button.mini { padding: 3px 8px; font-size: 11px; margin-left: 4px; }
#lobby-players li .pname { flex: 1; text-align: left; }
#pause-players { display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin-bottom: 8px; }
#pause-players .prow { display: flex; align-items: center; gap: 8px; justify-content: center; }
#shop { background: #0b0f12; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
#shop summary { cursor: pointer; color: var(--warn); }
.shoprow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.shoprow .si { flex: 1; text-align: left; }
.shoprow .si small { display: block; color: var(--dim); font-size: 11px; }
.shoprow.eq { background: rgba(255, 226, 122, 0.08); }
#bossbar { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: min(480px, 70vw); text-align: center; }
#bossname { font-size: 13px; letter-spacing: 0.15em; margin-bottom: 4px; color: var(--accent); }
#bossbar .bar { width: 100%; height: 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line); }
#bossbar .bar i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width 0.12s; }
#ammo { position: absolute; right: 16px; bottom: 210px; font-size: 22px; font-weight: 700; letter-spacing: 0.1em; text-shadow: 0 1px 4px #000; }
#ammo.reloading { color: var(--warn); }

.plist .prow { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; margin: 5px 0; border: 1px solid #2a2f36; border-radius: 6px; background: rgba(255,255,255,0.03); }
.plist .prow b { color: #ff6a5a; }
.plist .prow .meta { flex: 1; min-width: 0; }
.plist .prow .meta div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#locker-overlay { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(4,6,8,0.97) 0 26px, rgba(4,6,8,0) 26px 34px); box-shadow: inset 0 0 160px 60px rgba(0,0,0,0.85); }
#locker-overlay .lk-title { position: absolute; top: 9%; width: 100%; text-align: center; letter-spacing: 8px; font-size: 22px; color: #9aa7b0; text-shadow: 0 0 10px #000; }
#locker-overlay .lk-sub { position: absolute; bottom: 9%; width: 100%; text-align: center; font-size: 14px; color: #c7d0d6; text-shadow: 0 0 8px #000; }