*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Rajdhani',system-ui,sans-serif;color:#ece7d8;user-select:none;-webkit-user-select:none}
canvas#game{display:block;width:100%;height:100%}
button,input,select{font-family:inherit;color:inherit;font-size:inherit}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;display:none;text-shadow:0 1px 3px rgba(0,0,0,.9)}
#dmg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(160,0,0,0) 35%,rgba(170,0,0,.85) 100%);opacity:0}
#cross{position:absolute;left:50%;top:50%;--gap:9px}
#cross i{position:absolute;background:#fff;box-shadow:0 0 2px #000;opacity:.9}
#cross i:nth-child(1){width:2px;height:9px;left:-1px;top:calc(-9px - var(--gap))}
#cross i:nth-child(2){width:2px;height:9px;left:-1px;top:var(--gap)}
#cross i:nth-child(3){width:9px;height:2px;top:-1px;left:calc(-9px - var(--gap))}
#cross i:nth-child(4){width:9px;height:2px;top:-1px;left:var(--gap)}
#cross b{position:absolute;width:2px;height:2px;left:-1px;top:-1px;background:#fff}
#hit{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
#hit i{position:absolute;width:2px;height:11px;background:#fff;box-shadow:0 0 3px #000;left:-1px;top:-5px}
#hit i:nth-child(1){transform:translate(-9px,-9px) rotate(-45deg)}
#hit i:nth-child(2){transform:translate(9px,-9px) rotate(45deg)}
#hit i:nth-child(3){transform:translate(-9px,9px) rotate(45deg)}
#hit i:nth-child(4){transform:translate(9px,9px) rotate(-45deg)}
#hit.kill i{background:#ff3b2f}
#ind{position:absolute;left:50%;top:50%;width:0;height:0}
#ind div{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;border:6px solid transparent;border-top-color:rgba(255,40,30,.9);opacity:0;filter:blur(1px)}
#radar{position:absolute;left:22px;top:22px;width:180px;height:180px;border-radius:50%;border:2px solid rgba(190,220,170,.55);box-shadow:0 0 14px rgba(0,0,0,.7)}
#top{position:absolute;top:18px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
#wave{font-family:'Black Ops One',sans-serif;font-size:22px;letter-spacing:3px;color:#ffd24a}
#left{font-size:17px;font-weight:700;letter-spacing:1px;opacity:.9}
#right{position:absolute;top:18px;right:26px;text-align:right}
#score{font-family:'Black Ops One',sans-serif;font-size:34px;line-height:1}
#combo{font-size:20px;font-weight:700;color:#ffd24a;height:24px}
#feed{margin-top:8px;font-size:15px;font-weight:700;line-height:1.35}
#feed div{opacity:.95;animation:feed 4s forwards}
#feed .hs{color:#ff6a4a}
@keyframes feed{0%{opacity:0;transform:translateX(20px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#vital{position:absolute;left:26px;bottom:24px;width:270px}
#vital span{font-weight:700;font-size:15px;letter-spacing:2px}
#hpbar{height:13px;margin-top:4px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);transform:skewX(-14deg)}
#hpfill{height:100%;width:100%;background:linear-gradient(90deg,#c8e06a,#8fc44a);transition:width .12s}
#arms{position:absolute;right:26px;bottom:20px;text-align:right}
#wname{font-weight:700;font-size:17px;letter-spacing:2px;opacity:.9}
#ammo{font-family:'Black Ops One',sans-serif;font-size:54px;line-height:1}
#ammo small{font-size:24px;opacity:.75}
#ammo.low{color:#ff5a48}
#slots{font-size:14px;font-weight:700;letter-spacing:1px;opacity:.85;margin-top:2px}
#slots b{color:#ffd24a}
#nades{font-size:16px;font-weight:700;margin-top:2px;color:#b8d48a}
#big{position:absolute;left:0;right:0;top:24%;text-align:center;opacity:0;transition:opacity .35s}
#big h2{font-family:'Black Ops One',sans-serif;font-size:56px;letter-spacing:6px;color:#ffd24a}
#big p{font-size:22px;font-weight:700;letter-spacing:2px}
#hint{position:absolute;left:0;right:0;top:62%;text-align:center;font-size:19px;font-weight:700;letter-spacing:2px;color:#ffd24a;opacity:0}
#pops{position:absolute;left:50%;top:56%}
#pops div{position:absolute;white-space:nowrap;transform:translateX(-50%);font-weight:700;font-size:20px;color:#ffe9a0;animation:pop 1s forwards}
#pops .hs{color:#ff6a4a;font-size:23px}
@keyframes pop{0%{opacity:0;margin-top:10px}15%{opacity:1}100%{opacity:0;margin-top:-46px}}
#fps{position:absolute;left:24px;top:210px;font-size:14px;font-weight:700;opacity:.8;display:none}
#sbov{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,92vw);padding:18px 22px;background:rgba(10,12,8,.88);border:1px solid rgba(255,210,74,.35);display:none;text-shadow:none}
#clickhint{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);font-family:'Black Ops One',sans-serif;font-size:30px;letter-spacing:4px;color:#ffd24a;pointer-events:none}
#toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,30px);padding:11px 22px;background:#17180f;border:1px solid #ffd24a;font-weight:700;font-size:17px;opacity:0;transition:.25s;pointer-events:none;z-index:50;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Écrans ---------- */
.screen{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(40,44,30,.88),rgba(6,7,5,.97));overflow:auto;padding:4vh 20px;user-select:text;-webkit-user-select:text}
.screen.show{display:flex}
.panel{width:min(940px,100%);margin:auto;padding:28px 34px;border:1px solid rgba(255,210,74,.3);background:rgba(14,16,11,.84);box-shadow:0 20px 80px rgba(0,0,0,.7)}
.small .panel{width:min(520px,100%)}
h1{font-family:'Black Ops One',sans-serif;font-size:clamp(32px,6vw,56px);letter-spacing:5px;line-height:1;color:#ece7d8}
h1 span{color:#ffd24a}
h2{font-family:'Black Ops One',sans-serif;font-size:32px;letter-spacing:4px;color:#ffd24a;margin-bottom:14px}
h2 span{font-family:'Rajdhani',sans-serif;font-size:18px;letter-spacing:1px;color:#ece7d8;opacity:.7}
h3{font-size:14px;letter-spacing:4px;text-transform:uppercase;opacity:.6;margin:14px 0 7px}
h4{font-size:16px;letter-spacing:3px;margin-bottom:6px}
.tag{font-size:18px;font-weight:700;letter-spacing:1px;opacity:.75;margin:8px 0 18px}
.muted{opacity:.65;font-size:16px;margin:8px 0}
.err{color:#ff6a58;font-weight:700;min-height:22px;margin-top:8px}
.setup{padding:12px 14px;margin-bottom:14px;border:1px solid #ff6a58;background:rgba(255,90,70,.1);font-size:16px;line-height:1.4}
.setup code{background:rgba(255,255,255,.12);padding:1px 5px}
.sec{margin-bottom:10px}
.opts{display:flex;gap:9px;flex-wrap:wrap}
.opts button{flex:1 1 150px;padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);font-size:18px;font-weight:700;letter-spacing:1px;text-align:left;transition:.12s}
.opts.three button{flex:1 1 30%}
.opts button small{display:block;font-size:13px;font-weight:500;opacity:.65;letter-spacing:0}
.opts button:hover{background:rgba(255,255,255,.1)}
.opts button.on{background:rgba(255,210,74,.16);border-color:#ffd24a;color:#ffd24a}
.big{display:block;width:100%;margin-top:12px;padding:14px;border:0;background:#ffd24a;color:#17180f;font-family:'Black Ops One',sans-serif;font-size:24px;letter-spacing:5px;transition:.12s}
.big:hover:not(:disabled){background:#ffe07a;transform:translateY(-1px)}
.big.alt{background:#8fc4ff}
.big.alt:hover:not(:disabled){background:#b4d8ff}
.ghost{display:block;width:100%;margin-top:10px;padding:11px;background:transparent;border:1px solid rgba(255,255,255,.3);font-size:17px;font-weight:700;letter-spacing:3px}
.ghost:hover:not(:disabled){background:rgba(255,255,255,.08)}
.ghost.on{border-color:#ffd24a;color:#ffd24a}
.ghost.danger:hover{border-color:#ff6a58;color:#ff6a58}
.mini{padding:5px 12px;background:#ffd24a;color:#17180f;border:0;font-weight:700}
#best{margin-top:14px;font-size:14px;font-weight:700;letter-spacing:1px;color:#b8d48a;line-height:1.5}
input[type=text],input[type=email],input[type=password],select{width:100%;padding:11px 12px;margin-top:8px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);font-size:17px;font-weight:700;outline:none}
input:focus,select:focus{border-color:#ffd24a}
select option{background:#17180f}
.tabs{display:flex;gap:8px;margin-bottom:4px}
.tabs button{flex:1;padding:9px;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.2);font-weight:700;font-size:17px;letter-spacing:2px}
.tabs button.on{border-color:#ffd24a;color:#ffd24a}
#gwrap{display:flex;flex-direction:column;align-items:center;margin-bottom:6px}
.or{width:100%;text-align:center;margin:12px 0 6px;border-top:1px solid rgba(255,255,255,.2);line-height:0}
.or span{background:#12140e;padding:0 12px;font-weight:700;opacity:.7}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:26px}
@media(max-width:760px){.cols{grid-template-columns:1fr}.pausepanel{flex-direction:column}}
.optrow{display:flex;align-items:center;gap:12px;margin-top:8px;font-weight:700;font-size:16px}
.optrow span{flex:0 0 46%}
.optrow input[type=range]{flex:1;accent-color:#ffd24a}
.optrow output{flex:0 0 54px;text-align:right}
.optrow select,.optrow input[type=text]{margin-top:0;flex:1;padding:7px 9px}
.optrow.chk input{width:20px;height:20px;accent-color:#ffd24a}
.optpanel{max-height:62vh;overflow:auto;padding-right:6px}
.optpanel h3:first-child{margin-top:0}
.roomrow{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.roomrow div{flex:1;min-width:0}
.roomrow b{font-size:18px}
.roomrow small{display:block;opacity:.7;font-size:14px}
.roomrow span{font-weight:700;font-size:18px}
.roomrow button{padding:8px 14px;background:#ffd24a;color:#17180f;border:0;font-weight:700;letter-spacing:1px}
.teams{display:flex;gap:12px}
.team{flex:1;padding:10px 12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.team.blue h4,.sbteam.blue h4{color:#8fc4ff}
.team.red h4,.sbteam.red h4{color:#ff9a8f}
.team ul{list-style:none}
.team li{padding:5px 0;font-weight:700;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.team li.me{color:#ffd24a}
.team li.bot{opacity:.4;font-weight:500}
.team em{font-style:normal;font-size:13px;opacity:.7;margin-left:6px}
.rowsel{display:flex;gap:10px;margin-bottom:12px}
.tablewrap{max-height:52vh;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:16px}
th{text-align:left;font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.6;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.2)}
td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
tr.me td{color:#ffd24a}
table.ctrl td:first-child{width:42%;color:#ffd24a}
.sbteam{margin-bottom:12px}
.pausepanel{display:flex;gap:28px;width:min(900px,100%)}
#p-nav{flex:0 0 270px}
#p-body{flex:1;min-width:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}
.stats div{padding:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.stats b{display:block;font-family:'Black Ops One',sans-serif;font-size:26px;color:#ffd24a}
.stats span{font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.7}
#endtitle.bad{color:#ff5a48}

.link{display:block;margin-top:10px;text-align:center;color:#ffd24a;font-weight:700;font-size:15px}
.okmsg{color:#b8d48a;font-weight:700;margin-top:8px;line-height:1.35}
.okmsg:empty,.err:empty{display:none}
.setup .mini{display:block;margin-top:8px}
form h3{margin-top:4px}
form .muted{font-size:14px}