@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;
  --p1:#ff3c6e;--p2:#3cf0ff;--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:24px;z-index:90;transition:opacity 0.4s;}
#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(--p1),var(--p2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.logo-sub{color:var(--muted);font-size:0.7rem;letter-spacing:0.35em;text-transform:uppercase;margin-top:-8px;}
.lcard{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:26px 34px;display:flex;flex-direction:column;gap:14px;width:min(420px,90vw);align-items:center;}
.lcard h2{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:0.15em;}
.lbl{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.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(--p2);}
.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:focus{border-color:var(--p2);}
.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(--p1);color:#000;}
.lbtn-p2{background:var(--p2);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.75rem;color:var(--muted);letter-spacing:0.1em;text-align:center;min-height:18px;}
.lstatus.ok{color:#4dff91;}.lstatus.err{color:var(--p1);}
.copy-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:5px 12px;font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;font-family:'Space Mono',monospace;transition:all 0.15s;margin-top:-6px;}
.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);}

/* 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 */
#game-ui{width:100%;display:flex;flex-direction:column;align-items:center;}
header{width:100%;text-align:center;padding:18px 0 5px;}
header h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,6vw,4.5rem);letter-spacing:0.12em;line-height:1;background:linear-gradient(90deg,var(--p1),var(--p2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#round-info{display:flex;gap:20px;justify-content:center;align-items:center;margin:7px 0 11px;font-size:0.72rem;letter-spacing:0.12em;color:var(--muted);}
#round-info span{color:var(--text);font-weight:700;}
.s1{color:var(--p1)!important;}.s2{color:var(--p2)!important;}
#target-section{display:flex;flex-direction:column;align-items:center;margin-bottom:11px;}
#target-label{font-size:0.62rem;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.62rem;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(--p1),var(--p2));transition:width 1s linear;width:100%;}
#game-area{display:flex;gap:14px;padding:0 14px 20px;width:100%;max-width:1050px;justify-content:center;flex-wrap:wrap;}
.player-zone{flex:1;min-width:290px;max-width:480px;display:flex;flex-direction:column;gap:8px;}
.player-header{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:8px;font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.p1h{background:rgba(255,60,110,0.12);border:1px solid var(--p1);color:var(--p1);}
.p2h{background:rgba(60,240,255,0.12);border:1px solid var(--p2);color:var(--p2);}
.player-header .tag{font-size:0.58rem;color:var(--muted);font-weight:400;}
.canvas-wrap{position:relative;border-radius:10px;overflow:hidden;border:2px solid var(--border);cursor:crosshair;transition:border-color 0.3s,box-shadow 0.3s;}
.canvas-wrap.ap1{border-color:var(--p1);box-shadow:0 0 18px rgba(255,60,110,0.25);}
.canvas-wrap.ap2{border-color:var(--p2);box-shadow:0 0 18px rgba(60,240,255,0.25);}
.canvas-wrap canvas{display:block;background:#0d0d14;width:100%;height:auto;}
.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;}
.do1{color:var(--p1);}.do2{color:var(--p2);}
.ghost-label{position:absolute;top:7px;right:9px;font-size:0.58rem;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{display:flex;align-items:center;gap:9px;padding:5px 10px;background:var(--panel);border:1px solid var(--border);border-radius:8px;}
.lm-label{font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.lm-bar-wrap{flex:1;height:7px;background:#1a1a28;border-radius:4px;overflow:hidden;}
.lm-bar{height:100%;width:0%;border-radius:4px;transition:width 0.15s ease-out;}
.lm-pct{font-size:0.82rem;font-weight:700;min-width:34px;text-align:right;font-variant-numeric:tabular-nums;}
.ctrl-row{display:flex;gap:7px;}
.gbtn{flex:1;padding:9px 0;border:none;border-radius:6px;cursor:pointer;font-family:'Space Mono',monospace;font-size:0.68rem;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-p1{background:var(--p1);color:#000;}
.gbtn-p2{background:var(--p2);color:#000;}
.gbtn-p1:hover,.gbtn-p2:hover{filter:brightness(1.15);}
.gbtn-dis{opacity:0.3;pointer-events:none;}
.waiting-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:rgba(10,10,15,0.88);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);transition:opacity 0.3s;}
.waiting-msg.hidden{opacity:0;pointer-events:none;}
.spinner{width:26px;height:26px;border:2px solid var(--border);border-top-color:var(--p2);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:20px;opacity:0;pointer-events:none;transition:opacity 0.4s;}
#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.8rem,9vw,6rem);letter-spacing:0.15em;line-height:1;}
#result-scores{display:flex;gap:32px;font-size:1rem;font-weight:700;}
.rs1{color:var(--p1);}.rs2{color:var(--p2);}
#result-detail{color:var(--muted);font-size:0.72rem;letter-spacing:0.1em;text-align:center;line-height:1.9;}
.result-canvases{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.rthumb{display:flex;flex-direction:column;align-items:center;gap:5px;}
.rthumb canvas{border-radius:7px;border:1px solid var(--border);}
.rthumb-lbl{font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}
#next-btn{padding:12px 42px;background:linear-gradient(90deg,var(--p1),var(--p2));color:#000;border:none;border-radius:8px;font-family:'Bebas Neue',sans-serif;font-size:1.35rem;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-round-countdown{margin-top:8px;text-align:center;}
.next-round-wait-text{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.next-round-timer-wrap{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:0.1em;color:var(--p2);}
#next-round-timer{display:inline-block;min-width:1.2em;font-size:2.4rem;}
#final-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.8rem,6vw,4rem);letter-spacing:0.2em;color:var(--gold);}
#final-champion{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,11vw,8rem);letter-spacing:0.1em;line-height:1;}
#final-breakdown{display:flex;gap:32px;font-size:0.88rem;font-weight:700;}
#restart-btn{margin-top:6px;padding:12px 42px;background:var(--panel);color:var(--gold);border:2px solid var(--gold);border-radius:8px;font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:0.15em;cursor:pointer;transition:all 0.2s;}
#restart-btn:hover{background:var(--gold);color:#000;}
.winner-p1{color:var(--p1);}.winner-p2{color:var(--p2);}.winner-tie{color:var(--gold);}