@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0a0a0f;--panel:#111118;--border:#2a2a3a;
  --p0:#ff3c6e;--p1:#3cf0ff;--p2:#ffe03c;--p3:#3cff9a;
  --gold:#ffd700;--text:#e8e8f0;--muted:#555570;
}
body{background:var(--bg);color:var(--text);font-family:'Space Mono',monospace;min-height:100vh;display:flex;flex-direction:column;align-items:center;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:200;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);}

/* ═══════════════════ LOBBY ═══════════════════ */
#lobby{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:90;transition:opacity 0.4s;overflow-y:auto;padding:20px 0;}
#lobby.hidden{opacity:0;pointer-events:none;}
.logo{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,12vw,7rem);letter-spacing:0.12em;line-height:1;background:linear-gradient(90deg,var(--p0),var(--p1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.logo-sub{color:var(--muted);font-size:0.65rem;letter-spacing:0.3em;text-transform:uppercase;margin-top:-8px;text-align:center;}

.lcard{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:26px 34px;display:flex;flex-direction:column;gap:14px;width:min(440px,90vw);align-items:center;}
.lcard-wide{width:min(700px,94vw);padding:24px 28px;}
.lcard h2{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:0.15em;}
.lbl{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.room-display{background:#0d0d14;border:1px solid var(--border);border-radius:8px;padding:13px 18px;font-size:2rem;font-weight:700;letter-spacing:0.25em;text-align:center;width:100%;color:var(--p1);}
.inp{background:#0d0d14;border:1px solid var(--border);border-radius:8px;padding:11px 14px;font-size:1.4rem;font-weight:700;letter-spacing:0.3em;text-align:center;width:100%;color:var(--text);font-family:'Space Mono',monospace;text-transform:uppercase;outline:none;transition:border-color 0.2s;}
.inp-name{font-size:1.1rem;letter-spacing:0.15em;text-transform:none;}
.inp:focus{border-color:var(--p1);}
.lbtn{padding:11px 0;border:none;border-radius:8px;cursor:pointer;font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:0.15em;width:100%;transition:filter 0.15s,transform 0.1s;}
.lbtn:active{transform:scale(0.97);}
.lbtn:hover{filter:brightness(1.15);}
.lbtn-p1{background:var(--p0);color:#000;}
.lbtn-p2{background:var(--p1);color:#000;}
.lbtn-gray{background:var(--panel);color:var(--text);border:1px solid var(--border);}
.divider{width:100%;display:flex;align-items:center;gap:10px;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.divider span{color:var(--muted);font-size:0.65rem;letter-spacing:0.2em;}
.lstatus{font-size:0.72rem;color:var(--muted);letter-spacing:0.1em;text-align:center;min-height:16px;}
.lstatus.ok{color:#4dff91;}.lstatus.err{color:var(--p0);}
.copy-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:4px 12px;font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;font-family:'Space Mono',monospace;transition:all 0.15s;}
.copy-btn:hover{color:var(--text);border-color:var(--muted);}
.back-link{font-size:0.65rem;color:var(--muted);cursor:pointer;letter-spacing:0.15em;text-transform:uppercase;border:none;background:none;text-decoration:underline;}
.back-link:hover{color:var(--text);}

/* Waiting Room Layout */
.waiting-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;gap:16px;flex-wrap:wrap;}
.room-code-box{text-align:right;flex-shrink:0;}
.room-code-box .room-display{width:auto;min-width:160px;}
.waiting-body{display:flex;gap:24px;width:100%;flex-wrap:wrap;}
.waiting-col{flex:1;min-width:180px;display:flex;flex-direction:column;gap:10px;}

/* Player list in waiting room */
#waiting-players{display:flex;flex-direction:column;gap:6px;}
.wplayer{display:flex;align-items:center;gap:8px;padding:7px 11px;background:#0d0d14;border:1px solid var(--border);border-radius:7px;}
.wplayer-icon{font-size:1rem;width:24px;text-align:center;}
.wplayer-name{flex:1;font-size:0.8rem;font-weight:700;letter-spacing:0.08em;}
.wplayer-you{font-size:0.58rem;color:var(--p1);letter-spacing:0.1em;text-transform:uppercase;}

/* Game Options buttons */
.opt-row{display:flex;gap:6px;flex-wrap:wrap;}
.opt-btn{padding:7px 13px;background:#0d0d14;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-family:'Space Mono',monospace;font-size:0.68rem;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;}
.opt-btn:hover{border-color:var(--muted);color:var(--text);}
.opt-btn.opt-active{background:rgba(60,240,255,0.1);border-color:var(--p1);color:var(--p1);}
.opt-hint{font-size:0.58rem;color:var(--muted);letter-spacing:0.08em;line-height:1.5;}
.opt-readonly-text{font-size:0.75rem;color:var(--text);letter-spacing:0.08em;line-height:1.9;background:#0d0d14;border:1px solid var(--border);border-radius:8px;padding:11px 14px;}

/* ═══════════════════ MODE BADGE ═══════════════════ */
#mode-badge{position:fixed;top:12px;right:14px;z-index:150;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:0.6rem;letter-spacing:0.2em;color:var(--muted);display:none;align-items:center;gap:6px;}
#mode-badge .dot{width:6px;height:6px;border-radius:50%;background:#4dff91;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ═══════════════════ GAME UI ═══════════════════ */
#game-ui{width:100%;display:flex;flex-direction:column;align-items:center;}
header{width:100%;text-align:center;padding:14px 0 4px;}
header h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,4rem);letter-spacing:0.12em;background:linear-gradient(90deg,var(--p0),var(--p1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#round-info{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin:5px 0 9px;font-size:0.68rem;letter-spacing:0.12em;color:var(--muted);}
.s0{color:var(--p0)!important;}.s1{color:var(--p1)!important;}.s2{color:var(--p2)!important;}.s3{color:var(--p3)!important;}
#target-section{display:flex;flex-direction:column;align-items:center;margin-bottom:10px;}
#target-label{font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
#target-canvas{background:var(--panel);border:1.5px solid var(--border);border-radius:8px;display:block;}
#timer-text{text-align:center;font-size:0.6rem;color:var(--muted);letter-spacing:0.2em;margin:3px 0 2px;}
#timer-bar{width:100%;max-width:480px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
#timer-fill{height:100%;background:linear-gradient(90deg,var(--p0),var(--p1));transition:width 1s linear;width:100%;}

/* ═══════════════════ GAME AREA & LAYOUT ═══════════════════ */
#game-area{width:100%;max-width:1100px;padding:0 12px 20px;}
#game-area-inner{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* Per-player-count layout */
.game-layout-2 #game-area-inner{flex-wrap:nowrap;}
.game-layout-2 .my-zone,.game-layout-2 .opp-zone{flex:1;min-width:260px;max-width:480px;}

.game-layout-3 #game-area-inner{flex-wrap:nowrap;align-items:flex-start;}
.game-layout-3 .my-zone{flex:2;min-width:260px;max-width:480px;}
.game-layout-3 .opp-zones{flex:1;display:flex;flex-direction:column;gap:8px;min-width:180px;}

.game-layout-4 #game-area-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.game-layout-4 .opp-zones{display:contents;}

/* Player zones */
.player-zone{display:flex;flex-direction:column;gap:7px;}
.my-zone{}
.opp-zone{}

.player-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:7px;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.ph-0{background:rgba(255,60,110,0.12);border:1px solid var(--p0);color:var(--p0);}
.ph-1{background:rgba(60,240,255,0.12);border:1px solid var(--p1);color:var(--p1);}
.ph-2{background:rgba(255,224,60,0.12);border:1px solid var(--p2);color:var(--p2);}
.ph-3{background:rgba(60,255,154,0.12);border:1px solid var(--p3);color:var(--p3);}
.player-header .tag{font-size:0.56rem;color:var(--muted);font-weight:400;}

/* Canvas wrap */
.canvas-wrap{position:relative;border-radius:9px;overflow:hidden;border:2px solid var(--border);cursor:crosshair;transition:border-color 0.3s,box-shadow 0.3s;}
.canvas-wrap canvas{display:block;background:#0d0d14;width:100%;height:auto;}
.canvas-wrap.active-p0{border-color:var(--p0);box-shadow:0 0 16px rgba(255,60,110,0.25);}
.canvas-wrap.active-p1{border-color:var(--p1);box-shadow:0 0 16px rgba(60,240,255,0.25);}
.canvas-wrap.active-p2{border-color:var(--p2);box-shadow:0 0 16px rgba(255,224,60,0.25);}
.canvas-wrap.active-p3{border-color:var(--p3);box-shadow:0 0 16px rgba(60,255,154,0.25);}

/* Done overlay */
.done-overlay{position:absolute;inset:0;background:rgba(10,10,15,0.72);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:0.15em;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.done-overlay.show{opacity:1;}
.do0{color:var(--p0);}.do1{color:var(--p1);}.do2{color:var(--p2);}.do3{color:var(--p3);}

.ghost-label{position:absolute;top:7px;right:9px;font-size:0.56rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);background:rgba(10,10,15,0.75);padding:2px 7px;border-radius:4px;}

/* Live meter */
.live-meter{display:flex;align-items:center;gap:8px;padding:5px 9px;background:var(--panel);border:1px solid var(--border);border-radius:7px;}
.lm-label{font-size:0.56rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.lm-bar-wrap{flex:1;height:6px;background:#1a1a28;border-radius:3px;overflow:hidden;}
.lm-bar{height:100%;width:0%;border-radius:3px;transition:width 0.15s ease-out;}
.lm-pct{font-size:0.78rem;font-weight:700;min-width:32px;text-align:right;font-variant-numeric:tabular-nums;}

/* Controls */
.ctrl-row{display:flex;gap:6px;}
.gbtn{flex:1;padding:8px 0;border:none;border-radius:6px;cursor:pointer;font-family:'Space Mono',monospace;font-size:0.66rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;transition:all 0.15s;}
.gbtn:active{transform:scale(0.97);}
.gbtn-clr{background:var(--panel);color:var(--muted);border:1px solid var(--border);}
.gbtn-clr:hover{color:var(--text);border-color:var(--muted);}
.gbtn-p0{background:var(--p0);color:#000;}
.gbtn-p1{background:var(--p1);color:#000;}
.gbtn-p2{background:var(--p2);color:#000;}
.gbtn-p3{background:var(--p3);color:#000;}
.gbtn-p0:hover,.gbtn-p1:hover,.gbtn-p2:hover,.gbtn-p3:hover{filter:brightness(1.15);}
.gbtn-dis{opacity:0.3;pointer-events:none;}

/* Waiting overlay on opp canvas */
.waiting-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:rgba(10,10,15,0.88);font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);transition:opacity 0.3s;}
.waiting-msg.hidden{opacity:0;pointer-events:none;}
.spinner{width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--p1);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ═══════════════════ RESULT / FINAL ═══════════════════ */
#result-screen,#final-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.4s;overflow-y:auto;}
#result-screen{background:rgba(5,5,10,0.95);z-index:50;}
#final-screen{background:rgba(5,5,10,0.97);z-index:60;}
#result-screen.show,#final-screen.show{opacity:1;pointer-events:all;}

#result-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,8vw,5.5rem);letter-spacing:0.15em;line-height:1;}
.result-canvases{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.rthumb{display:flex;flex-direction:column;align-items:center;gap:6px;}
.rthumb canvas{border-radius:7px;border:1px solid var(--border);}
.rthumb-lbl{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.6;}
.rthumb-lbl .rthumb-pts{font-size:0.72rem;font-weight:700;}

#result-detail{color:var(--muted);font-size:0.7rem;letter-spacing:0.1em;text-align:center;line-height:1.9;}

#next-btn{padding:11px 40px;background:linear-gradient(90deg,var(--p0),var(--p1));color:#000;border:none;border-radius:8px;font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:0.15em;cursor:pointer;transition:filter 0.2s,transform 0.1s;}
#next-btn:hover{filter:brightness(1.15);}
#next-btn:active{transform:scale(0.97);}
#next-btn.gbtn-dis{opacity:0.4;pointer-events:none;}

#next-round-countdown{text-align:center;}
.next-round-wait-text{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.next-round-timer-wrap{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:0.1em;color:var(--p1);}
#next-round-timer{display:inline-block;min-width:1.2em;}

#final-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.5rem,5vw,3.2rem);letter-spacing:0.2em;color:var(--gold);}
#final-champion{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,9vw,7rem);letter-spacing:0.1em;line-height:1;}
#final-leaderboard{display:flex;flex-direction:column;gap:8px;min-width:260px;width:min(360px,90vw);}
.final-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:8px;background:var(--panel);border:1px solid var(--border);}
.final-rank{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;min-width:28px;}
.final-name{flex:1;font-size:0.82rem;font-weight:700;letter-spacing:0.08em;}
.final-score{font-size:0.88rem;font-weight:700;}

#restart-btn{margin-top:4px;padding:11px 40px;background:var(--panel);color:var(--gold);border:2px solid var(--gold);border-radius:8px;font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:0.15em;cursor:pointer;transition:all 0.2s;}
#restart-btn:hover{background:var(--gold);color:#000;}

.winner-p0,.winner-p1-c{color:var(--p0);}/* legacy */
.winner-p1{color:var(--p1);}
.winner-tie{color:var(--gold);}
.winner-c0{color:var(--p0);}
.winner-c1{color:var(--p1);}
.winner-c2{color:var(--p2);}
.winner-c3{color:var(--p3);}

/* ═══════════════════ CHAT ═══════════════════ */
#chat-toggle-btn{
  position:fixed;bottom:24px;right:22px;z-index:120;
  width:46px;height:46px;border-radius:50%;
  background:var(--panel);border:1px solid var(--border);
  font-size:1.2rem;cursor:pointer;
  align-items:center;justify-content:center;
  transition:border-color 0.15s,box-shadow 0.15s;
}
#chat-toggle-btn:hover{border-color:var(--p1);box-shadow:0 0 12px rgba(60,240,255,0.2);}
#chat-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--p0);color:#000;
  border-radius:50%;width:17px;height:17px;
  font-size:0.58rem;font-weight:700;
  align-items:center;justify-content:center;
  pointer-events:none;
}
#chat-panel{
  position:fixed;bottom:80px;right:22px;z-index:119;
  width:min(300px,calc(100vw - 32px));
  max-height:min(420px,60vh);
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;
  transform:translateY(12px) scale(0.96);
  opacity:0;pointer-events:none;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin:bottom right;
}
#chat-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all;}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:0.72rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}
.chat-header button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.9rem;line-height:1;transition:color 0.15s;}
.chat-header button:hover{color:var(--text);}
.chat-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.chat-msg{display:flex;flex-direction:column;gap:2px;max-width:90%;}
.chat-msg.chat-mine{align-self:flex-end;align-items:flex-end;}
.chat-msg.chat-theirs{align-self:flex-start;align-items:flex-start;}
.chat-sender{font-size:0.56rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.chat-text{font-size:0.75rem;letter-spacing:0.04em;padding:6px 10px;border-radius:8px;line-height:1.4;word-break:break-word;}
.chat-mine .chat-text{background:rgba(60,240,255,0.15);border:1px solid rgba(60,240,255,0.25);color:var(--p1);}
.chat-theirs .chat-text{background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text);}
.chat-system{font-size:0.6rem;color:var(--muted);text-align:center;letter-spacing:0.1em;font-style:italic;}
.chat-input-row{display:flex;gap:6px;padding:8px;border-top:1px solid var(--border);}
.chat-input-row input{flex:1;background:#0d0d14;border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);font-family:'Space Mono',monospace;font-size:0.75rem;outline:none;transition:border-color 0.15s;}
.chat-input-row input:focus{border-color:var(--p1);}
.chat-input-row button{background:var(--p1);color:#000;border:none;border-radius:6px;padding:7px 11px;font-weight:700;font-size:0.85rem;cursor:pointer;transition:filter 0.15s;}
.chat-input-row button:hover{filter:brightness(1.15);}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media(max-width:600px){
  .game-layout-2 #game-area-inner,.game-layout-3 #game-area-inner{flex-wrap:wrap;}
  .game-layout-3 .my-zone{flex:none;width:100%;}
  .game-layout-3 .opp-zones{flex:none;width:100%;flex-direction:row;}
  .game-layout-4 #game-area-inner{grid-template-columns:1fr 1fr;}
  .waiting-body{flex-direction:column;}
  .waiting-top{flex-direction:column;gap:8px;}
  .room-code-box{text-align:left;}
}

/* ═══════════════════ ROOM BROWSER ═══════════════════ */
#room-browser{display:flex;flex-direction:column;gap:6px;min-height:54px;margin-top:6px;}
.rb-empty{font-size:0.68rem;color:var(--muted);text-align:center;padding:14px 0;letter-spacing:0.1em;}
.rb-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0;font-size:0.65rem;color:var(--muted);letter-spacing:0.12em;}
.room-card{
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;
  background:#0d0d14;border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:border-color 0.15s,background 0.15s;
  width:100%;text-align:left;font-family:'Space Mono',monospace;
}
.room-card:hover{border-color:var(--p1);background:rgba(60,240,255,0.05);}
.room-card:active{transform:scale(0.98);}
.rc-code{font-size:1rem;font-weight:700;letter-spacing:0.22em;color:var(--p1);min-width:72px;}
.rc-host{flex:1;overflow:hidden;}
.rc-name{font-size:0.72rem;color:var(--text);letter-spacing:0.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc-sub{font-size:0.58rem;color:var(--muted);letter-spacing:0.08em;margin-top:2px;}
.rc-meta{text-align:right;white-space:nowrap;}
.rc-players{font-size:0.68rem;font-weight:700;color:var(--text);}
.rc-age{font-size:0.56rem;color:var(--muted);letter-spacing:0.06em;margin-top:2px;}
.lcard-join{width:min(480px,94vw);}

/* ═══════════════════ RECONNECT OVERLAY ═══════════════════ */
#reconnect-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(5,5,12,0.88);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.25s;
  backdrop-filter:blur(4px);
}
#reconnect-overlay.show{opacity:1;pointer-events:all;}
.rco-inner{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:36px 48px;
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  text-align:center;max-width:340px;
}
.rco-spinner{
  width:40px;height:40px;
  border:3px solid var(--border);
  border-top-color:var(--p1);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
.rco-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.15em;color:var(--p1);}
.rco-msg{font-size:0.7rem;color:var(--muted);letter-spacing:0.1em;line-height:1.6;}
.rco-attempts{font-size:0.62rem;color:var(--muted);letter-spacing:0.12em;min-height:16px;}

/* ═══════════════════ DISCONNECT BADGE (on opponent canvas) ═══════════════════ */
.dc-badge{
  position:absolute;inset:0;
  background:rgba(5,5,12,0.78);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  opacity:0;pointer-events:none;transition:opacity 0.3s;
  backdrop-filter:blur(2px);
}
.dc-badge.show{opacity:1;}
.dc-badge span{font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}
.dc-spinner{
  width:28px;height:28px;
  border:2px solid var(--border);
  border-top-color:var(--p0);
  border-radius:50%;
  animation:spin 0.9s linear infinite;
}

/* Player zone dimmed when disconnected */
.player-dc .player-header{opacity:0.45;}
.player-dc .live-meter{opacity:0.35;}

/* Disconnected player in waiting room */
.wplayer-dc{opacity:0.55;}
.wplayer-dc-tag{
  font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--p0);background:rgba(255,60,110,0.15);
  border:1px solid rgba(255,60,110,0.3);
  border-radius:4px;padding:1px 6px;
}

/* ═══════════════════ BRUSH TOOLBAR ═══════════════════ */
.brush-row{display:flex;align-items:center;gap:6px;padding:5px 9px;background:var(--panel);border:1px solid var(--border);border-radius:7px;}
.brush-lbl{font-size:0.54rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-right:2px;}
.brush-btn{display:flex;align-items:center;justify-content:center;width:30px;height:26px;border:1px solid var(--border);border-radius:5px;background:#0d0d14;cursor:pointer;transition:all 0.15s;padding:0;position:relative;}
.brush-btn:hover{border-color:var(--muted);}
.brush-btn.brush-active{border-color:var(--p1);background:rgba(60,240,255,0.1);}
.brush-btn svg{pointer-events:none;}
.brush-spacer{flex:1;}
.hint-btn{display:flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--border);border-radius:5px;background:#0d0d14;cursor:pointer;font-family:'Space Mono',monospace;font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);transition:all 0.15s;white-space:nowrap;}
.hint-btn:hover{border-color:var(--muted);color:var(--text);}
.hint-btn.hint-on{border-color:var(--p2);color:var(--p2);background:rgba(255,224,60,0.08);}
.hint-icon{font-size:0.9rem;line-height:1;}

/* ═══════════════════ HINT GHOST OVERLAY ═══════════════════ */
#hint-canvas{
  position:absolute;inset:0;width:100%!important;height:100%!important;
  pointer-events:none;opacity:0;transition:opacity 0.25s;border-radius:9px;
}
#hint-canvas.hint-visible{opacity:1;}

/* ═══════════════════ TIMER WARNING PULSE ═══════════════════ */
@keyframes timer-warn-p0{0%,100%{box-shadow:0 0 16px rgba(255,60,110,0.25);}50%{box-shadow:0 0 28px rgba(255,60,110,0.75),0 0 6px rgba(255,60,110,0.5) inset;}}
@keyframes timer-warn-p1{0%,100%{box-shadow:0 0 16px rgba(60,240,255,0.25);}50%{box-shadow:0 0 28px rgba(60,240,255,0.75),0 0 6px rgba(60,240,255,0.5) inset;}}
@keyframes timer-warn-p2{0%,100%{box-shadow:0 0 16px rgba(255,224,60,0.25);}50%{box-shadow:0 0 28px rgba(255,224,60,0.75),0 0 6px rgba(255,224,60,0.5) inset;}}
@keyframes timer-warn-p3{0%,100%{box-shadow:0 0 16px rgba(60,255,154,0.25);}50%{box-shadow:0 0 28px rgba(60,255,154,0.75),0 0 6px rgba(60,255,154,0.5) inset;}}
.canvas-wrap.active-p0.timer-warning{animation:timer-warn-p0 0.6s ease-in-out infinite;}
.canvas-wrap.active-p1.timer-warning{animation:timer-warn-p1 0.6s ease-in-out infinite;}
.canvas-wrap.active-p2.timer-warning{animation:timer-warn-p2 0.6s ease-in-out infinite;}
.canvas-wrap.active-p3.timer-warning{animation:timer-warn-p3 0.6s ease-in-out infinite;}

/* ═══════════════════ SOUND MUTE TOGGLE ═══════════════════ */
#sound-btn{
  position:fixed;top:12px;left:14px;z-index:150;
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  padding:4px 12px;font-size:0.6rem;letter-spacing:0.15em;color:var(--muted);
  display:none;align-items:center;gap:6px;cursor:pointer;transition:all 0.15s;
}
#sound-btn:hover{color:var(--text);border-color:var(--muted);}
#sound-btn.muted{color:var(--p0);border-color:var(--p0);}

/* ═══════════════════ CONFETTI ═══════════════════ */
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:55;}