*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;}
button{font:inherit;}
#brand{inset:auto;left:max(16px,env(safe-area-inset-left,0px));top:calc(14px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:8px;
  font-family:var(--label);color:var(--paper);text-shadow:0 1px 8px rgba(20,8,40,.5);transition:opacity .4s;}
#brand img{border-radius:8px;box-shadow:0 2px 10px rgba(10,4,24,.4);}
#brand span{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.14em;}
#brand em{font-style:normal;font-size:9px;letter-spacing:.38em;color:var(--paper-dim);}
.playing #brand{opacity:0;}
#loader{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:18px;background:radial-gradient(circle at 50% 40%,#3a1f5c,#140c24 70%);
  color:#fbf3ea;font-family:"Jost",system-ui,sans-serif;transition:opacity .6s ease;}
#loader img{border-radius:36px;box-shadow:0 18px 60px rgba(255,140,90,.25);}
#loader .bar{width:200px;height:3px;border-radius:2px;background:rgba(251,243,234,.15);overflow:hidden;}
#loader .bar i{display:block;height:100%;width:40%;background:#ffb27a;animation:ld 1.1s ease-in-out infinite;}
@keyframes ld{0%{transform:translateX(-100%);}100%{transform:translateX(260%);}}
#loader p{margin:0;font-size:11px;letter-spacing:.4em;color:rgba(251,243,234,.7);}
#loader.done{opacity:0;pointer-events:none;}

/* Layout: one full-bleed WebGL stage, film overlays on top, a quiet shot rail bottom-right. Single dusk look by design. */
:root{
  --ink:#140c24;
  --paper:#fbf3ea;
  --paper-dim:rgba(251,243,234,.62);
  --ember:#ffb27a;
  --chip:rgba(20,12,36,.42);
  --chip-line:rgba(251,243,234,.22);
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --serif:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
  --label:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important;}
html,body{height:100%;}
body{background:var(--ink);color:var(--paper);overflow:hidden;}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--ink);}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;}
.layer{position:absolute;inset:0;pointer-events:none;}
#grain{display:none;opacity:.13;mix-blend-mode:overlay;background-size:180px 180px;}
#vignette{display:none;background:radial-gradient(120% 95% at 50% 48%,transparent 52%,rgba(16,6,30,.55) 100%);}
#dip{background:#0b0614;opacity:0;}
#flare{opacity:0;}
#flare .core{position:absolute;width:34vmin;height:34vmin;margin:-17vmin 0 0 -17vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,215,.45) 0,rgba(255,190,130,.16) 18%,rgba(255,150,110,.04) 45%,transparent 70%);}
#flare .streak{position:absolute;width:160vw;height:2px;margin:-1px 0 0 -80vw;
  background:linear-gradient(90deg,transparent,rgba(255,210,170,.15) 25%,rgba(255,236,214,.85) 50%,rgba(255,210,170,.15) 75%,transparent);}
#flare .ghost{position:absolute;width:7vmin;height:7vmin;margin:-3.5vmin 0 0 -3.5vmin;border-radius:50%;
  border:1px solid rgba(255,230,210,.25);background:radial-gradient(circle,rgba(255,220,200,.12),transparent 70%);}

#title{position:absolute;left:50%;top:13%;transform:translateX(-50%);text-align:center;line-height:.86;
  text-shadow:0 2px 18px rgba(20,8,40,.45);}
#title span{display:block;opacity:0;transition:opacity 1.1s ease;}
#title .w1,#title .w3{font-family:var(--display);font-weight:700;font-size:clamp(28px,5.2vw,64px);letter-spacing:.01em;}
#title .w2{font-family:var(--display);font-weight:500;font-size:clamp(17px,2.9vw,36px);letter-spacing:.02em;line-height:.82;}
#title span.on{opacity:1;}
#cap{position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  font-family:var(--label);font-weight:500;font-size:clamp(9px,1.05vw,13px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--paper-dim);white-space:nowrap;opacity:0;}
#cap b{font-weight:500;color:var(--paper);}
#cap .map{display:block;font-size:.82em;letter-spacing:.55em;color:var(--paper-dim);opacity:.8;margin-bottom:.7em;}
.notext #title,.notext #cap{display:none;}

#ui{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 32px);
  opacity:.35;transition:opacity .4s ease;}
#ui:hover,#ui:focus-within,.idle-off #ui{opacity:1;}
#ui button{font-family:var(--label);font-size:11px;letter-spacing:.14em;color:var(--paper);background:var(--chip);
  border:1px solid var(--chip-line);border-radius:999px;height:28px;min-width:28px;padding:0 10px;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#ui button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper);}
#ui button:focus-visible{outline:2px solid var(--ember);outline-offset:2px;}
#ui .sep{width:1px;height:16px;background:var(--chip-line);margin:0 4px;}
#err{position:absolute;inset:auto 16px 50% 16px;text-align:center;font-family:var(--serif);font-size:20px;display:none;}
#hud{--enemy:#ffcf5a;--hurt:#ff6a5a;}
#reticle{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:1.5px solid rgba(251,243,234,.8);
  border-radius:50%;box-shadow:0 0 0 1px rgba(20,12,36,.25);transition:transform .1s ease,border-color .1s ease;}
#reticle::before,#reticle::after{content:"";position:absolute;background:rgba(251,243,234,.85);}
#reticle::before{left:50%;top:-10px;width:1.5px;height:7px;margin-left:-.75px;box-shadow:0 57px 0 rgba(251,243,234,.85);}
#reticle::after{top:50%;left:-10px;height:1.5px;width:7px;margin-top:-.75px;box-shadow:57px 0 0 rgba(251,243,234,.85);}
#reticle i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--paper);}
#reticle.hit{border-color:var(--enemy);transform:scale(.84);}
#reticle.kill{border-color:var(--hurt);transform:scale(1.25);}
#steer{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1.5px solid var(--paper);background:rgba(251,243,234,.25);box-shadow:0 0 0 1px rgba(20,12,36,.3);}
#steerline{position:absolute;left:50%;top:50%;height:1px;background:linear-gradient(90deg,rgba(251,243,234,0),rgba(251,243,234,.45));transform-origin:0 50%;}
#deadzone{position:absolute;left:50%;top:50%;border:1px dashed rgba(251,243,234,.18);border-radius:50%;}
.playing #c{cursor:none;}
#stats{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:calc(16px + env(safe-area-inset-top,0px));
  display:grid;gap:6px;font-family:var(--label);}
#stats .lbl{font-size:10px;letter-spacing:.32em;color:var(--paper-dim);}
#score{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;font-variant-numeric:tabular-nums;}
#hpbar{width:170px;height:6px;background:rgba(251,243,234,.16);border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,12,36,.3);}
#hpbar span{display:block;height:100%;width:100%;background:var(--paper);transition:width .15s ease,background .2s;}
#hpbar.low span{background:var(--hurt);}
#hpnum{font-size:11px;letter-spacing:.2em;font-variant-numeric:tabular-nums;}
#hurt{background:radial-gradient(130% 100% at 50% 50%,transparent 45%,rgba(214,46,58,.6) 100%);opacity:0;}
.mk{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border:1.5px solid var(--enemy);}
.mk.edge{width:0;height:0;border:none;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid var(--enemy);margin:-7px 0 0 -7px;}
.ebar{position:absolute;width:44px;height:4px;margin:-26px 0 0 -22px;background:rgba(20,12,36,.55);border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,207,90,.35);}
.ebar span{display:block;height:100%;background:var(--enemy);transition:width .12s ease;}
#hint{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));top:auto;right:auto;
  font-family:var(--label);font-size:10.5px;letter-spacing:.16em;color:var(--paper-dim);line-height:1.9;max-width:min(380px,58vw);
  text-shadow:0 1px 8px rgba(20,8,40,.5);}
#hint b{color:var(--paper);font-weight:500;}
#radarwrap{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(16px + env(safe-area-inset-top,0px));display:grid;justify-items:center;gap:6px;}
#radar{width:168px;height:168px;border-radius:50%;box-shadow:0 0 0 1px rgba(20,12,36,.4),0 6px 24px rgba(10,4,24,.35);}
#radarwrap span{font-family:var(--label);font-size:9.5px;letter-spacing:.3em;color:var(--paper-dim);}
#lockbox{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid var(--hurt);transform:rotate(45deg);animation:lockpulse 1s ease-in-out infinite;}
@keyframes lockpulse{50%{transform:rotate(45deg) scale(.82);}}
#lead{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--hurt);background:rgba(255,106,90,.25);}
#lockinfo{position:absolute;transform:translate(32px,-34px);font-family:var(--label);font-size:10px;letter-spacing:.2em;color:var(--hurt);white-space:nowrap;text-shadow:0 1px 6px rgba(10,4,24,.6);}
#toast{position:absolute;left:50%;top:24%;transform:translate(-50%,6px);font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.38em;
  color:var(--paper);opacity:0;transition:opacity .25s ease,transform .25s ease;white-space:nowrap;text-shadow:0 1px 10px rgba(10,4,24,.6);}
#toast.on{opacity:1;transform:translate(-50%,0);}
#countdown{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;font-family:var(--label);}
#countdown span{font-size:11px;letter-spacing:.4em;color:var(--paper-dim);}
#countdown b{font-family:var(--display);font-weight:700;font-size:64px;line-height:1;font-variant-numeric:tabular-nums;}
#skills{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto;}
.sk{position:relative;overflow:hidden;width:96px;height:54px;border-radius:10px;background:var(--chip);border:1px solid var(--chip-line);color:var(--paper);
  font-family:var(--label);display:grid;place-content:center;gap:3px;text-align:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.sk .key{position:relative;font-size:12px;font-weight:500;letter-spacing:.12em;}
.sk .nm{position:relative;font-size:8.5px;letter-spacing:.14em;color:var(--paper-dim);}
.sk .t{position:absolute;right:6px;top:4px;font-size:10px;font-variant-numeric:tabular-nums;}
.sk .cd{position:absolute;left:0;right:0;top:0;height:0;background:rgba(10,4,24,.62);}
.sk.ready{border-color:rgba(251,243,234,.5);}
.sk.active{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember),0 0 18px rgba(255,178,122,.35);}
.sk.active .cd{background:rgba(255,178,122,.18);}
.sk.ult{border-color:rgba(255,210,63,.55);}
.sk.passive{cursor:default;width:84px;}
.sk.passive .key{font-size:9px;letter-spacing:.2em;color:var(--paper-dim);}
.sk:focus-visible{outline:2px solid var(--ember);outline-offset:2px;}
.mk.ally{border-color:#7fd4ff;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;}
.ebar.ally{box-shadow:0 0 0 1px rgba(127,212,255,.4);}
.ebar.ally span{background:#7fd4ff;}
.playing #cap{bottom:auto;top:calc(18px + env(safe-area-inset-top,0px));}
.playing #ui{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 64px);}
#kds{position:absolute;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;gap:6px;pointer-events:none;}
#kds div{display:grid;justify-items:center;min-width:64px;padding:5px 10px 4px;background:rgba(18,12,32,.62);border:1px solid rgba(251,243,234,.2);border-radius:8px;}
#kds div:nth-child(1){border-color:rgba(255,178,122,.6);} #kds div:nth-child(3){border-color:rgba(109,255,154,.5);}
#kds b{font-family:var(--display);font-size:22px;line-height:1;font-variant-numeric:tabular-nums;}
#kds span{font-family:var(--label);font-size:9px;letter-spacing:.28em;color:var(--paper-dim);}
.playing #cap{top:calc(70px + env(safe-area-inset-top,0px));}
#ammo{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;overflow:visible;transform:rotate(-90deg);}
#ammo circle{fill:none;stroke-width:3.6;stroke-linecap:round;}
#reticle::before,#reticle::after{display:none;}
#ammo .bg{stroke:rgba(251,243,234,.18);}
#ammo .fg{stroke:#fbf3ea;transition:stroke .15s;}
#ammo.low .fg{stroke:#ff4d4d;animation:warnblink .3s steps(2,start) infinite;}
#ammo.rel .fg{stroke:#ff9a6a;}
#ammoN{position:absolute;left:50%;top:calc(50% + 40px);transform:translateX(-50%);font-family:var(--label);font-size:10px;letter-spacing:.14em;color:var(--paper-dim);font-variant-numeric:tabular-nums;}
#ammo.low~#ammoN{color:#ff6a5a;}
#armorbar{width:170px;height:4px;background:rgba(143,220,255,.12);border-radius:2px;overflow:hidden;}
#armorbar span{display:block;height:100%;width:0;background:#8fdcff;box-shadow:0 0 6px #8fdcff;transition:width .15s;}
#buffs{display:flex;flex-wrap:wrap;gap:4px;max-width:240px;}
#buffs i{font-style:normal;font-size:9px;letter-spacing:.14em;padding:2px 6px;border-radius:4px;background:rgba(18,12,32,.6);border:1px solid currentColor;}
.b-sh{color:#8fdcff;}.b-dmg{color:#ff7a5a;}.b-spd{color:#ffd23f;}.b-st{color:#7fffe0;}.b-bar{color:#ffb27a;}
#classPick{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:14px;padding:16px;background:rgba(12,8,24,.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--label);color:var(--paper);overflow:auto;}
#classPick h2{margin:0;font-family:var(--display);font-size:28px;letter-spacing:.12em;}
#classPick p{margin:0;font-size:11px;letter-spacing:.14em;color:var(--paper-dim);}
#classPick .cards{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
#classPick .card{width:min(250px,86vw);display:grid;gap:8px;text-align:left;padding:16px;border-radius:14px;cursor:pointer;color:var(--paper);
  background:rgba(18,12,34,.62);border:1px solid rgba(251,243,234,.25);font-family:var(--label);transition:transform .15s,border-color .15s;}
#classPick .card:hover,#classPick .card:focus-visible{transform:translateY(-3px);border-color:#ffb27a;outline:none;}
#classPick .cn{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.04em;}
#classPick .cr{font-size:11px;letter-spacing:.12em;color:#ffb27a;}
#classPick .st{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;font-size:9px;letter-spacing:.16em;color:var(--paper-dim);}
#classPick .st i{font-style:normal;}
#classPick .st b{height:6px;border-radius:3px;background:linear-gradient(90deg,#fbf3ea calc(var(--v)*20%),rgba(251,243,234,.14) 0);}
#classPick .sk2{font-size:11px;line-height:1.45;color:var(--paper);}
#classPick .sk2 em{font-style:normal;display:inline-grid;place-content:center;width:18px;height:18px;margin-right:6px;border-radius:4px;background:#fbf3ea;color:#140c24;font-weight:500;font-size:10px;}
#settings{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 44px);z-index:5;
  width:min(300px,calc(100vw - 32px));padding:16px 18px 14px;display:grid;gap:6px;background:rgba(18,12,32,.88);border:1px solid rgba(251,243,234,.22);border-radius:12px;
  font-family:var(--label);color:var(--paper);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(8,4,20,.5);}
.playing #settings{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 108px);}
#settings h2{margin:0 0 6px;font-size:12px;letter-spacing:.4em;font-weight:500;}
#settings label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:var(--paper-dim);}
#settings output{color:var(--paper);font-variant-numeric:tabular-nums;}
#settings input[type=range]{width:100%;accent-color:#ffb27a;margin:0 0 6px;}
#settings .maps.q3{grid-template-columns:1fr 1fr 1fr;}
#settings .maps{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;}
#settings .maps button{font-family:var(--label);font-size:9.5px;letter-spacing:.12em;color:var(--paper);background:rgba(251,243,234,.06);border:1px solid var(--chip-line);border-radius:8px;height:30px;cursor:pointer;}
#settings .maps button[aria-pressed="true"]{background:var(--paper);color:var(--ink);}
#settings .row{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
#settings .row button{font-family:var(--label);font-size:10.5px;letter-spacing:.16em;color:var(--paper);background:transparent;border:1px solid var(--chip-line);border-radius:999px;height:28px;padding:0 12px;cursor:pointer;}
#warn{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(226px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 8px;background:rgba(40,14,10,.7);border:1.5px solid #ffd23f;border-radius:8px;animation:warnblink .5s steps(2,start) infinite;}
#warn svg{width:30px;height:27px;}
#warn .wt{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.24em;color:#ffd23f;}
@keyframes warnblink{to{opacity:.35;}}
.gmk{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #ff6a5a;border-radius:3px;box-shadow:0 0 6px rgba(255,106,90,.5);}
.thr{position:absolute;width:0;height:0;margin:-10px 0 0 -11px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:19px solid #ffd23f;
  filter:drop-shadow(0 0 4px rgba(255,210,63,.7));animation:warnblink .4s steps(2,start) infinite;}
.thr.edge{transform:scale(1.25);}
.thr span{position:absolute;left:-3px;top:5px;font:700 12px var(--label);color:#1a1020;}
@media (max-width:760px){#warn{top:calc(176px + env(safe-area-inset-top,0px));}.playing #hint{display:none;} #radar{width:120px;height:120px;} .sk{width:78px;height:48px;} .sk .nm{font-size:7.5px;}
  .playing #cap{top:calc(120px + env(safe-area-inset-top,0px));} #stats .lbl{font-size:9px;}}
@media (max-width:560px){#hint{font-size:9.5px;letter-spacing:.1em;max-width:52vw;} #hpbar{width:130px;}}
@media (max-width:560px){#ui .shot{min-width:26px;padding:0 6px;} #cap{letter-spacing:.28em;}}
/* ---- team score bar ---- */
#teamBar{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;align-items:center;gap:10px;pointer-events:none;font-family:var(--label);}
#teamBar .tb{display:flex;align-items:baseline;gap:8px;padding:5px 12px 4px;border-radius:8px;background:rgba(18,12,32,.66);border:1px solid rgba(251,243,234,.18);min-width:92px;}
#teamBar .tb b{font-family:var(--display);font-size:26px;line-height:1;font-variant-numeric:tabular-nums;}
#teamBar .tb span{font-size:9px;letter-spacing:.3em;color:var(--paper-dim);}
#teamBar .blue{justify-content:flex-start;border-color:rgba(110,180,255,.7);} #teamBar .blue b{color:#8cc8ff;}
#teamBar .red{justify-content:flex-end;border-color:rgba(255,110,96,.7);} #teamBar .red b{color:#ff8a7a;}
#teamBar[data-mine="0"] .blue,#teamBar[data-mine="1"] .red{box-shadow:0 0 0 1px rgba(251,243,234,.55) inset;}
#teamBar[data-mine="0"] .blue span::after,#teamBar[data-mine="1"] .red span::after{content:" · BẠN";}
.tbmid{display:grid;justify-items:center;gap:3px;width:min(300px,34vw);}
.tbtrack{position:relative;width:100%;height:6px;border-radius:3px;background:rgba(251,243,234,.14);overflow:hidden;}
.tbtrack i{position:absolute;top:0;bottom:0;transition:width .3s ease;}
#tbB{left:0;background:#5aa8ff;} #tbR{right:0;background:#ff6a5a;}
.tbtrack::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(251,243,234,.5);}
#tbGoal{font-size:8.5px;letter-spacing:.24em;color:var(--paper-dim);white-space:nowrap;}
#myKda{font-size:11px;letter-spacing:.18em;color:var(--paper);font-variant-numeric:tabular-nums;}
#myKda::before{content:"BẠN  ";color:var(--paper-dim);font-size:8.5px;letter-spacing:.24em;}
/* ---- kill feed ---- */
#feed{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:calc(112px + env(safe-area-inset-top,0px));display:grid;gap:4px;justify-items:start;pointer-events:none;font-family:var(--label);font-size:11.5px;}
#feed div{display:flex;align-items:center;gap:7px;padding:4px 10px;border-radius:6px;background:rgba(18,12,32,.62);transition:opacity .5s;}
#feed div.out{opacity:0;}
#feed b{font-weight:500;} #feed .t0{color:#8cc8ff;} #feed .t1{color:#ff8a7a;} #feed .me{text-decoration:underline;text-underline-offset:3px;}
#feed span{color:var(--paper-dim);font-size:10px;} #feed i{font-style:normal;color:var(--paper-dim);} #feed em{font-style:normal;color:#6dff9a;font-size:10px;letter-spacing:.1em;}
/* ---- shared panel look ---- */
.panel,#board,#endScreen,#pmenu{font-family:var(--label);color:var(--paper);}
.panel button,#endScreen button,#pmenu button,#home button{font-family:var(--label);cursor:pointer;color:var(--paper);background:rgba(251,243,234,.06);border:1px solid var(--chip-line);border-radius:999px;height:34px;padding:0 16px;font-size:11px;letter-spacing:.18em;}
.panel button:hover,#endScreen button:hover,#pmenu button:hover{border-color:var(--ember);}
button.pri{background:var(--ember)!important;color:var(--ink)!important;border-color:var(--ember)!important;font-weight:500;}
.panel button:disabled{opacity:.4;cursor:default;}
.panel input,.panel select{font-family:var(--label);font-size:13px;color:var(--paper);background:rgba(10,6,20,.55);border:1px solid var(--chip-line);border-radius:8px;height:36px;padding:0 10px;min-width:0;}
.panel select option{background:#1d1430;}
.panel input:focus,.panel select:focus{outline:none;border-color:var(--ember);}
button:focus-visible{outline:2px solid var(--ember);outline-offset:2px;}
.menu #hint,.menu #ui,.menu #brand{display:none;}
#ui{display:none;}
.playing #ui{display:flex;}
/* ---- home ---- */
#home{position:absolute;inset:0;z-index:7;display:grid;align-content:center;justify-items:center;gap:22px;padding:24px 16px;
  background:radial-gradient(90% 70% at 50% 55%,rgba(16,8,32,.05),rgba(12,6,26,.45));}
#home .mode{background:rgba(18,12,34,.55)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#home .logo{display:grid;justify-items:center;gap:6px;text-align:center;}
#home .logo img{width:92px;height:92px;border-radius:24px;box-shadow:0 14px 50px rgba(255,140,90,.28);}
#home h1{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(46px,9vw,96px);letter-spacing:.08em;line-height:.9;text-shadow:0 4px 40px rgba(20,8,40,.6);}
#home .tag{margin:0;font-size:11px;letter-spacing:.42em;color:var(--paper-dim);}
#home .who{display:grid;gap:6px;justify-items:center;}
#home .who label{font-size:9.5px;letter-spacing:.32em;color:var(--paper-dim);}
#home .who input{width:min(260px,80vw);height:38px;text-align:center;font-family:var(--label);font-size:15px;letter-spacing:.06em;color:var(--paper);background:rgba(10,6,20,.55);border:1px solid var(--chip-line);border-radius:999px;}
#home .who input:focus{outline:none;border-color:var(--ember);}
#home .modes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
#home .mode{width:min(250px,86vw);height:auto;display:grid;justify-items:start;gap:6px;text-align:left;padding:18px 20px;border-radius:16px;letter-spacing:normal;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(251,243,234,.28);transition:transform .15s,border-color .15s;}
#home .mode:hover,#home .mode:focus-visible{transform:translateY(-3px);border-color:var(--ember);outline:none;}
#home .mode svg{width:30px;height:30px;color:var(--ember);}
#home .mode b{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.03em;}
#home .mode span{font-size:11.5px;line-height:1.45;color:var(--paper-dim);}
#home .sub{display:flex;gap:10px;}
#home .sub button{height:30px;font-size:10px;}
/* ---- lobby & room ---- */
.panel{position:absolute;inset:0;z-index:7;display:grid;grid-template-rows:auto auto 1fr;gap:14px;padding:max(18px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));
  width:min(940px,100%);margin:0 auto;background:none;}
.panel::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,8,30,.55),rgba(14,8,30,.12) 30%,rgba(14,8,30,.12) 70%,rgba(14,8,30,.5));}
.panel header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.panel h2{margin:0;font-family:var(--display);font-size:26px;letter-spacing:.06em;font-weight:700;}
.panel header .ghost{height:30px;font-size:10px;}
#lbStatus{margin-left:auto;font-size:10.5px;letter-spacing:.14em;color:var(--paper-dim);} #lbStatus.ok{color:#6dff9a;} #lbStatus.bad{color:#ff8a7a;}
.tools{display:flex;gap:8px;flex-wrap:wrap;}
.tools input{flex:1 1 220px;} .tools select{flex:0 1 190px;}
#lbList{display:grid;gap:8px;align-content:start;overflow:auto;padding-right:2px;}
#lbList .empty{margin:30px auto;padding:14px 20px;border-radius:12px;background:rgba(18,12,34,.6);text-align:center;font-size:13px;color:var(--paper);}
.rm{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1.2fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(18,12,34,.62);border:1px solid rgba(251,243,234,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.rm .rn{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rm .rn svg{width:14px;height:14px;flex:none;color:var(--ember);}
.rm small{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--paper-dim);}
.rm .rn small{display:inline;margin-left:4px;}
.rm .rmap{font-size:11px;letter-spacing:.16em;color:var(--paper-dim);}
.rm .rp{font-size:12px;}
.rm .rs{font-size:9.5px;letter-spacing:.2em;padding:4px 8px;border-radius:999px;border:1px solid rgba(109,255,154,.45);color:#6dff9a;}
.rm .rs.pl{border-color:rgba(255,178,122,.5);color:var(--ember);}
.rm button{height:30px;}
@media (max-width:700px){.rm{grid-template-columns:1fr auto;}.rm .rmap,.rm .rp{grid-column:1;}.rm .rs{grid-row:1;grid-column:2;}.rm button{grid-column:2;grid-row:2 / span 2;}}
.modal{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:rgba(8,4,18,.6);padding:16px;}
.modal .box{width:min(380px,100%);display:grid;gap:10px;padding:20px;border-radius:14px;background:#1d1430;border:1px solid rgba(251,243,234,.22);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal h3{margin:0 0 4px;font-family:var(--display);font-size:20px;letter-spacing:.04em;}
.modal label{display:grid;gap:5px;font-size:9.5px;letter-spacing:.24em;color:var(--paper-dim);}
.modal .err{min-height:16px;margin:0;font-size:11.5px;color:#ff8a7a;}
.modal .row{display:flex;justify-content:flex-end;gap:8px;}
.modal .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#room{grid-template-rows:auto 1fr auto;}
#rmInfo{font-size:11px;letter-spacing:.12em;color:var(--paper-dim);} #rmInfo b{color:var(--paper);font-weight:500;}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0;overflow:auto;}
.team{display:grid;align-content:start;gap:8px;padding:14px;border-radius:14px;background:rgba(18,12,34,.6);border:1px solid rgba(251,243,234,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.team.blue{border-top:3px solid #5aa8ff;} .team.red{border-top:3px solid #ff6a5a;}
.team h3{margin:0;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.3em;font-weight:500;}
.team.blue h3{color:#8cc8ff;} .team.red h3{color:#ff8a7a;}
.team ol{list-style:none;margin:0;padding:0;display:grid;gap:5px;}
.team li{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;background:rgba(10,6,20,.45);font-size:13px;}
.team li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.team li.free{background:none;border:1px dashed rgba(251,243,234,.16);} .team li.free span{color:rgba(251,243,234,.35);font-size:11px;letter-spacing:.14em;}
.team li.me{box-shadow:0 0 0 1px var(--ember) inset;}
.team li em{font-style:normal;font-size:8.5px;letter-spacing:.18em;padding:2px 6px;border-radius:4px;background:rgba(255,178,122,.18);color:var(--ember);}
.team li em.bot{background:rgba(251,243,234,.1);color:var(--paper-dim);} .team li em.you{background:var(--paper);color:var(--ink);}
.team li button{height:24px;width:24px;padding:0;border-radius:6px;font-size:11px;letter-spacing:0;}
.team .addbot{justify-self:start;height:28px;font-size:10px;}
#room footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#rmMsg{flex:1;font-size:11.5px;color:var(--paper-dim);}
@media (max-width:640px){.teams{grid-template-columns:1fr;}}
/* ---- Tab board & results ---- */
#board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:min(820px,calc(100% - 32px));padding:18px;border-radius:14px;
  background:rgba(14,9,28,.9);border:1px solid rgba(251,243,234,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.bhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px;letter-spacing:.24em;}
.bhead b{font-family:var(--display);font-size:28px;letter-spacing:0;vertical-align:-4px;}
.bhead em{font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--paper-dim);text-align:center;}
.t0{color:#8cc8ff;} .t1{color:#ff8a7a;}
.bcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.bcols table{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--paper);}
.bcols th{font-weight:400;font-size:8.5px;letter-spacing:.2em;text-align:right;padding:0 6px 6px;color:var(--paper-dim);}
.bcols th:first-child,.bcols td:first-child{text-align:left;}
.bcols td{padding:6px;text-align:right;font-variant-numeric:tabular-nums;border-top:1px solid rgba(251,243,234,.08);}
.bcols .t0 table{border-top:2px solid #5aa8ff;} .bcols .t1 table{border-top:2px solid #ff6a5a;}
.bcols tr.me td{background:rgba(255,178,122,.14);}
.bcols small{font-size:8px;letter-spacing:.14em;color:var(--paper-dim);margin-left:4px;}
@media (max-width:640px){.bcols{grid-template-columns:1fr;}}
#endScreen{position:absolute;inset:0;z-index:8;display:grid;align-content:center;justify-items:center;gap:12px;padding:20px 16px;overflow:auto;background:radial-gradient(80% 70% at 50% 50%,rgba(12,7,26,.5),rgba(12,7,26,.15));}
#endScreen .bcols>div{padding:10px 12px;border-radius:12px;background:rgba(18,12,34,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#endScreen h2,#endScreen .esc,#endScreen .ek,#endScreen .mvp{text-shadow:0 2px 18px rgba(10,4,24,.8);}
#endScreen .ek{margin:0;font-size:10px;letter-spacing:.42em;color:var(--paper-dim);}
#endScreen h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(44px,8vw,84px);letter-spacing:.06em;line-height:1;}
#endScreen.win h2{color:#ffd28a;text-shadow:0 0 40px rgba(255,178,122,.45);} #endScreen.lose h2{color:#c8b8d8;}
#endScreen .esc{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.3em;}
#endScreen .esc b{font-family:var(--display);font-size:40px;letter-spacing:0;vertical-align:-8px;}
#endScreen .esc i{color:var(--paper-dim);font-style:normal;}
#endScreen .mvp{margin:0;font-size:12px;letter-spacing:.1em;color:var(--paper-dim);} #endScreen .mvp b{color:var(--ember);font-weight:500;}
#endScreen .bcols{width:min(820px,100%);}
#endScreen .erow{display:flex;gap:10px;margin-top:6px;}
#pmenu{position:absolute;inset:0;z-index:8;display:grid;place-content:center;justify-items:center;gap:10px;background:rgba(10,6,22,.35);}
#pmenu button:not(.pri){background:rgba(18,12,34,.7)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#pmenu h2{margin:0 0 6px;font-family:var(--display);font-size:30px;letter-spacing:.1em;}
#pmenu button{width:240px;height:40px;}
#pmenu p{margin:6px 0 0;font-size:10.5px;letter-spacing:.14em;color:var(--paper-dim);}
.menu #settings{z-index:9;bottom:auto;top:50%;right:50%;transform:translate(50%,-50%);}
#settings{max-height:calc(100% - 32px);overflow:auto;}
#pmenu:not([hidden]) ~ #settings{bottom:auto;top:50%;right:50%;transform:translate(50%,-50%);}
#pmenu:not([hidden]) ~ #settings,#settings.front{z-index:9;}