:root {
  --panel: rgba(6, 28, 16, 0.72);
  --panel-edge: rgba(150, 230, 160, 0.22);
  --ink: #f2fff3;
  --muted: #a9cfb0;
  --leaf: #7ee08a;
  --sun: #ffd23f;
  --fire: #ff6a2b;
  --danger: #ff3b3b;
  --side-w: 17.5vw;
  --gap: 1.1vh;
  --card-h: 26vh;
  font-size: 1.55vh;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b1f12; color: var(--ink); font-family: 'Inter', system-ui, sans-serif; }
canvas#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

#haze { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.5s;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(120, 30, 10, 0.55) 100%); }
#haze.critical { animation: pulseHaze 1.6s ease-in-out infinite; }
@keyframes pulseHaze { 50% { filter: brightness(1.5); } }

#hud { position: fixed; inset: 0; pointer-events: none; }

/* ---------- side columns */
.side { position: absolute; top: var(--gap); bottom: var(--gap); width: var(--side-w); display: flex; flex-direction: column; gap: var(--gap); }
.side.left { left: var(--gap); }
.side.right { right: var(--gap); }
.card { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 1.6vh; backdrop-filter: blur(6px); box-shadow: 0 1vh 3vh rgba(0,0,0,.35); }
.list-head { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; color: var(--sun);
  background: linear-gradient(90deg, #b5121b 0 50%, #f4f4f4 50% 100%); background-size: 100% 0.35vh; background-repeat: no-repeat; background-position: bottom;
  padding: .4vh .6vh .8vh; text-shadow: 0 .2vh .6vh rgba(0,0,0,.7); white-space: nowrap; }
.list-head .leaf { filter: drop-shadow(0 0 .4vh rgba(126,224,138,.8)); }

.names { list-style: none; flex: 1; display: grid; grid-template-rows: repeat(20, 1fr); gap: .35vh; min-height: 0; }
.names li { display: flex; align-items: center; gap: .7vh; padding: 0 .9vh; border-radius: .9vh; min-height: 0;
  background: rgba(6, 28, 16, 0.55); border: 1px solid rgba(255,255,255,0.05); font-weight: 700; font-size: .95rem; overflow: hidden; transition: background .4s, transform .4s; }
.names li.empty { opacity: .25; font-weight: 500; font-style: italic; }
.names li .n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.names li .s { font-variant-numeric: tabular-nums; color: var(--sun); font-size: .85rem; }
.names li .ic { width: 1.6vh; text-align: center; font-size: .8rem; }
.names li.active { background: color-mix(in srgb, var(--c) 35%, rgba(6,28,16,.7)); border-color: var(--c); box-shadow: 0 0 1.2vh color-mix(in srgb, var(--c) 60%, transparent); }
.names li.new { animation: newName 1.6s cubic-bezier(.2,1.4,.4,1); }
@keyframes newName { 0% { transform: scale(.4) rotate(-4deg); background: var(--sun); color: #1b2a00; } 40% { transform: scale(1.08); } 100% { transform: none; } }
.names li.bump .s { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.5); color: #fff; } }

/* ---------- oxygen */
.o2-card { height: var(--card-h); display: flex; align-items: center; gap: 1.2vh; padding: 1.2vh 1.6vh; }
.o2-ring { height: 78%; aspect-ratio: 1; transform: rotate(-90deg); }
.o2-ring circle { fill: none; stroke-width: 11; }
.o2-ring .track { stroke: rgba(255,255,255,.1); }
.o2-ring .bar { stroke: var(--o2c, #59e07a); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 125; transition: stroke-dashoffset .6s, stroke .6s; filter: drop-shadow(0 0 4px var(--o2c, #59e07a)); }
.o2-text { flex: 1; min-width: 0; }
.o2-label { font-weight: 800; font-size: .85rem; color: var(--muted); letter-spacing: .08em; }
.o2-value { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 4.6rem; line-height: .95; color: var(--o2c, #59e07a); text-shadow: 0 0 2vh color-mix(in srgb, var(--o2c, #59e07a) 50%, transparent); }
.o2-value small { font-size: 2rem; }
.o2-status { display: inline-block; white-space: nowrap; margin-top: .4vh; padding: .2vh .9vh; border-radius: 1vh; font-weight: 800; font-size: .8rem; letter-spacing: .08em; background: var(--o2c, #59e07a); color: #08210f; }
.o2-card.crit { animation: critBlink 1s infinite; }
@keyframes critBlink { 50% { border-color: var(--danger); box-shadow: 0 0 3vh rgba(255,59,59,.6); } }

/* ---------- QR */
.qr-card { height: var(--card-h); display: flex; flex-direction: column; gap: .8vh; padding: 1.2vh; align-items: center; text-align: center; }
.qr { flex: 1; min-height: 0; aspect-ratio: 1; background: #fff; border-radius: 1vh; padding: .5vh; box-shadow: 0 0 0 .4vh var(--sun), 0 0 3vh rgba(255,210,63,.45); animation: qrGlow 2.4s ease-in-out infinite; }
.qr svg { width: 100%; height: 100%; display: block; }
@keyframes qrGlow { 50% { box-shadow: 0 0 0 .4vh var(--leaf), 0 0 4vh rgba(126,224,138,.6); } }
.qr-info { width: 100%; min-width: 0; }
.qr-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.05; color: var(--sun); white-space: nowrap; }
.qr-sub { font-size: .75rem; color: var(--muted); margin: .2vh 0; }
.qr-queue { font-size: .85rem; font-weight: 700; }
.qr-queue b { font-size: 1rem !important; }
.qr-queue b { color: var(--sun); font-size: 1.2rem; }
.qr-next { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- title */
.title-wrap { position: absolute; top: 1.2vh; left: 50%; transform: translateX(-50%); text-align: center; width: calc(100vw - 2 * var(--side-w) - 6vh); }
.title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 3.6rem; line-height: 1; letter-spacing: .03em; color: #fff;
  text-shadow: 0 .3vh 0 #0a3b18, 0 .6vh 2vh rgba(0,0,0,.6); }
.title span { color: #ff4040; text-shadow: 0 .3vh 0 #fff, 0 .6vh 0 #5b0a0a, 0 .8vh 2vh rgba(0,0,0,.6); }
.subtitle { font-weight: 700; font-size: .95rem; color: #e9ffe9; text-shadow: 0 .2vh .6vh #000; margin-top: .3vh; }
.stats { display: inline-flex; gap: .8vh; margin-top: 1vh; }
.stat { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 1.2vh; padding: .5vh 1.4vh; min-width: 10vh; }
.stat .k { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.stat b { font-family: 'Baloo 2', sans-serif; font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat.fire b { color: var(--fire); }

/* ---------- active players (bottom) */
.players { position: absolute; bottom: 1.2vh; left: 50%; transform: translateX(-50%); display: flex; gap: .9vh; width: calc(100vw - 2 * var(--side-w) - 6vh); justify-content: center; }
.pcard { flex: 1; max-width: 23vh; display: flex; align-items: center; gap: .8vh; padding: .7vh 1vh; border-radius: 1.4vh; background: var(--panel); border: 2px solid rgba(255,255,255,.08); transition: all .4s; }
.pcard.on { border-color: var(--c); box-shadow: 0 0 2vh color-mix(in srgb, var(--c) 45%, transparent); }
.pcard .timer { width: 4.6vh; height: 4.6vh; flex: none; position: relative; }
.pcard .timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pcard .timer circle { fill: none; stroke-width: 5; }
.pcard .timer .t-bg { stroke: rgba(255,255,255,.12); }
.pcard .timer .t-fg { stroke: var(--c, #fff); stroke-dasharray: 100.5; stroke-linecap: round; }
.pcard .timer span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.pcard .info { min-width: 0; flex: 1; }
.pcard .nm { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c, var(--muted)); }
.pcard .sc { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1; }
.pcard .sc small { font-size: .7rem; color: var(--muted); font-family: 'Inter'; }
.pcard.empty .nm { color: var(--muted); font-style: italic; font-weight: 600; }
.pcard.empty .sc { font-size: .8rem; color: var(--muted); font-family: 'Inter'; font-weight: 600; }
.pcard.ready .timer span { color: var(--sun); animation: bump 1s infinite; }

/* ---------- crosshairs */
#crosshairs { position: fixed; inset: 0; pointer-events: none; }
.crosshair { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s; --c: #fff; }
.crosshair.show { opacity: 1; }
.ch-ring { position: absolute; width: 6vh; height: 6vh; left: -3vh; top: -3vh; border-radius: 50%; border: .45vh dashed var(--c);
  box-shadow: 0 0 1.5vh var(--c), inset 0 0 1vh var(--c); animation: spin 6s linear infinite; transition: transform .2s; }
.crosshair.firing .ch-ring { animation-duration: .8s; }
.crosshair.locked .ch-ring { transform: scale(1.35); border-style: solid; }
.ch-dot { position: absolute; width: 1vh; height: 1vh; left: -.5vh; top: -.5vh; border-radius: 50%; background: var(--c); box-shadow: 0 0 1vh var(--c); }
.ch-name { position: absolute; top: 3.6vh; left: 0; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: .9rem; color: #fff;
  background: var(--c); color: #08210f; padding: .1vh .8vh; border-radius: .8vh; }
@keyframes spin { to { transform: rotate(360deg); } }
.crosshair.locked .ch-ring { animation: spinBig .8s linear infinite; }
@keyframes spinBig { from { transform: scale(1.35) rotate(0); } to { transform: scale(1.35) rotate(360deg); } }

/* ---------- popups & toasts */
#popups { position: fixed; inset: 0; pointer-events: none; }
.popup { position: absolute; transform: translate(-50%, -50%); font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--c, #fff);
  text-shadow: 0 .2vh 0 #000, 0 0 1vh rgba(0,0,0,.7); animation: popUp 1.3s ease-out forwards; white-space: nowrap; }
.popup.big { font-size: 2.6rem; color: #fff; }
.popup.big small { display: block; font-size: 1.1rem; color: var(--c); text-align: center; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }

#toasts { position: absolute; top: 15vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6vh; }
.toast { background: var(--panel); border: 1px solid var(--panel-edge); border-left: .6vh solid var(--c, var(--leaf)); padding: .6vh 1.6vh; border-radius: 1vh; font-weight: 700;
  animation: toast 4s ease forwards; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-1vh); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.alert { position: absolute; bottom: 10vh; left: 50%; transform: translateX(-50%); background: rgba(160, 15, 15, .85); border: 2px solid #ff8a8a; padding: .8vh 2vh; border-radius: 1.2vh;
  font-weight: 800; letter-spacing: .05em; opacity: 0; transition: opacity .5s; white-space: nowrap; }
.alert.show { opacity: 1; animation: critBlink 1s infinite; }

/* ---------- banner */
.banner { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; }
.banner-inner { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 5rem; text-align: center; line-height: 1; color: #fff; opacity: 0;
  text-shadow: 0 .4vh 0 #7a1f00, 0 0 4vh rgba(255,106,43,.8); }
.banner-inner small { display: block; font-size: 1.8rem; color: var(--sun); margin-top: 1vh; text-shadow: 0 .2vh .5vh #000; }
.banner.show .banner-inner { animation: banner 3s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(2.2); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }

/* ---------- victory */
.victory { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(10,60,25,.55), rgba(0,10,4,.85)); opacity: 0; pointer-events: none; transition: opacity .8s; }
.victory.show { opacity: 1; }
.v-card { text-align: center; padding: 4vh 6vh; border-radius: 3vh; background: rgba(6,28,16,.85); border: .3vh solid var(--leaf); box-shadow: 0 0 8vh rgba(126,224,138,.5); max-width: 70vw; transform: scale(.8); transition: transform .8s cubic-bezier(.2,1.4,.4,1); }
.victory.show .v-card { transform: none; }
.v-leaf { font-size: 4rem; animation: bump 2s infinite; }
.v-card h2 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 3.6rem; line-height: 1.05; margin: 1vh 0; }
.v-card h2 span { color: var(--leaf); text-shadow: 0 0 3vh rgba(126,224,138,.6); }
.v-id { color: var(--muted); font-size: 1.3rem; font-weight: 700; }
.v-score { margin: 2vh 0 1vh; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.v-score b { display: block; font-family: 'Baloo 2', sans-serif; font-size: 5rem; line-height: 1; color: var(--sun); letter-spacing: 0; }
.v-heroes { list-style: none; display: flex; flex-wrap: wrap; gap: 1vh; justify-content: center; margin: 1vh 0 2vh; }
.v-heroes li { background: rgba(255,255,255,.08); border-radius: 1vh; padding: .6vh 1.4vh; font-weight: 700; }
.v-heroes li b { color: var(--sun); margin-left: .6vh; }
.v-next { color: var(--muted); font-weight: 700; }

/* ---------- loader */
.loader { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #134a25, #04140a); z-index: 10; transition: opacity 1s; }
.loader.hide { opacity: 0; pointer-events: none; }
.ld-box { text-align: center; width: 60vh; }
.ld-bar { height: 1.4vh; background: rgba(255,255,255,.1); border-radius: 1vh; overflow: hidden; margin: 3vh 0 1.2vh; }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--leaf), var(--sun)); transition: width .2s; }
.ld-text { color: var(--muted); font-weight: 700; }
.ld-start { pointer-events: auto; margin-top: 3vh; font: 800 1.4rem 'Baloo 2', sans-serif; padding: 1.2vh 3vh; border: 0; border-radius: 1.4vh; background: var(--sun); color: #2a1a00; cursor: pointer;
  box-shadow: 0 .6vh 0 #a37a00; animation: bump 1.6s infinite; }