:root{
  --bg:#140d2e; --bg2:#241152;
  --p1:#ff5d7a; --p2:#2fd6e0; --gold:#ffd23f; --grn:#5fe06b;
  --paper:#f6f1ff; --ink:#160c2c;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'VT323',monospace;
  background:var(--bg);
  color:var(--paper);
  overflow-x:hidden;min-height:100%;
  background-image:
    linear-gradient(rgba(120,60,200,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,60,200,.10) 1px,transparent 1px);
  background-size:42px 42px;
}
/* CRT scanlines */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.16) 2px 4px);
  mix-blend-mode:multiply;
}
.pix{font-family:'Press Start 2P',monospace;}
button{font-family:'Press Start 2P',monospace;cursor:pointer;}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;}

/* ---------------- MENU ---------------- */
#menu{max-width:1180px;margin:0 auto;padding:30px 18px 80px;}
.title{text-align:center;}
.title h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1.5rem,5.4vw,3rem);line-height:1.3;
  color:var(--gold);
  text-shadow:4px 4px 0 var(--p1),8px 8px 0 #00000066;
  letter-spacing:1px;
}
.title p{font-size:1.4rem;opacity:.8;margin-top:14px;}
.title .rules{font-size:1.1rem;opacity:.5;margin-top:2px;}

.seclabel{
  font-family:'Press Start 2P',monospace;font-size:.78rem;
  text-align:center;color:var(--p2);margin:30px 0 14px;
  text-shadow:2px 2px 0 #00000088;
}

/* setup row: game setup left, leaderboard right */
.setup-row{display:flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap;}

/* option pills */
.optrow{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;flex:1 1 auto;}
.optgroup{text-align:center;}
.optgroup .ol{font-family:'Press Start 2P';font-size:.6rem;opacity:.6;margin-bottom:8px;}
.toggle{display:flex;gap:0;border:3px solid #ffffff22;}
.toggle button{
  background:#ffffff10;color:var(--paper);border:none;
  font-size:.62rem;padding:11px 15px;transition:background .12s;
}
.toggle button.on{background:var(--gold);color:var(--ink);}
.toggle.disabled{opacity:.32;pointer-events:none;filter:saturate(.3);}

/* leaderboard */
.leaderboard{
  background:#100a2cdd;border:3px solid #ffffff22;border-radius:6px;
  padding:14px 18px;margin:0;flex:0 0 320px;
  font-family:'VT323',monospace;
}
.leaderboard h3{font-family:'Press Start 2P';font-size:.7rem;color:var(--gold);
  margin:0 0 10px;text-align:center;letter-spacing:1px;}
.lb-row{display:flex;justify-content:space-between;align-items:center;
  padding:5px 6px;font-size:1.15rem;color:var(--paper);}
.lb-row + .lb-row{border-top:1px dashed #ffffff14;}
.lb-rank{color:var(--gold);min-width:28px;}
.lb-name{flex:1;padding-left:8px;color:#fff;}
.lb-wins{color:#5fd0ff;}
.lb-empty{color:#ffffff66;text-align:center;font-size:1.1rem;padding:6px;}

/* in-game name save panel */
.save-panel{display:flex;gap:10px;justify-content:center;align-items:center;
  margin-top:14px;flex-wrap:wrap;}
.save-panel input{font-family:'Press Start 2P';font-size:.7rem;
  background:#0a0626;color:#fff;border:3px solid #ffd23f;
  padding:8px 12px;width:200px;text-transform:uppercase;}
.save-panel input:focus{outline:none;border-color:#5fd0ff;}
.save-panel button{font-size:.65rem;padding:8px 14px;}
.save-msg{font-size:.7rem;color:#5fd0ff;font-family:'Press Start 2P';margin-top:8px;}
.ballbtn{display:flex;align-items:center;gap:7px;}
.balldot{width:15px;height:15px;border-radius:50%;border:2px solid #ffffff55;}

/* courts */
.courts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.court-card{
  width:230px;background:#ffffff0c;border:3px solid #ffffff1a;padding:10px;
  transition:transform .12s;
}
.court-card:hover{transform:translate(-2px,-2px);}
.court-card.sel{border-color:var(--gold);box-shadow:6px 6px 0 #00000066,0 0 0 3px var(--gold) inset;}
.court-card canvas{width:100%;display:block;image-rendering:pixelated;}
.court-card .cn{font-family:'Press Start 2P';font-size:.6rem;margin-top:10px;color:var(--gold);}
.court-card .cd{font-size:1.12rem;opacity:.78;line-height:1.15;margin-top:6px;}

/* players */
.players{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;}
.pcol{flex:1;min-width:340px;max-width:540px;}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.ptag{font-family:'Press Start 2P';font-size:.68rem;padding:9px 13px;color:var(--ink);}
.pcol.one .ptag{background:var(--p1);}
.pcol.two .ptag{background:var(--p2);}
.keys{display:flex;gap:4px;}
.key{
  background:#ffffff14;border:2px solid #ffffff33;min-width:25px;height:25px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P';font-size:.5rem;padding:0 4px;
}
.char-card{
  display:flex;gap:11px;align-items:center;
  background:#ffffff0c;border:3px solid #ffffff14;padding:9px 11px;margin-bottom:10px;
  transition:transform .12s;
}
.char-card:hover{transform:translateX(3px);}
.pcol.one .char-card.sel{border-color:var(--p1);box-shadow:5px 5px 0 #00000066;}
.pcol.two .char-card.sel{border-color:var(--p2);box-shadow:5px 5px 0 #00000066;}
.char-card canvas{width:74px;height:92px;flex-shrink:0;image-rendering:pixelated;
  background:#00000033;}
.cc-info{flex:1;min-width:0;}
.cc-name{font-family:'Press Start 2P';font-size:.74rem;color:var(--gold);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.temper-tag{font-family:'Press Start 2P';font-size:.42rem;background:var(--p1);
  color:var(--ink);padding:3px 5px;}
.new-badge{font-family:'Press Start 2P';font-size:.42rem;background:var(--grn);
  color:var(--ink);padding:3px 5px;letter-spacing:.5px;
  animation:newBadgePulse 1.6s ease-in-out infinite;}
@keyframes newBadgePulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.cc-blurb{font-size:1.06rem;opacity:.74;line-height:1.1;margin:4px 0 6px;}
.stat{display:flex;align-items:center;gap:6px;margin:2px 0;}
.stat .sl{width:74px;font-family:'Press Start 2P';font-size:.38rem;opacity:.6;text-align:right;}
.stat .track{flex:1;height:9px;background:#ffffff14;display:flex;gap:1px;padding:1px;}
.stat .pip{flex:1;}

.pcol.locked{opacity:.5;pointer-events:none;}
.cpu-note{
  font-family:'Press Start 2P';font-size:.56rem;text-align:center;
  background:#ffffff10;border:3px dashed #ffffff33;padding:18px;color:var(--p2);
  line-height:1.7;
}

.start-wrap{text-align:center;margin-top:32px;}
#startBtn{
  font-size:1rem;color:var(--ink);
  background:var(--gold);border:none;padding:18px 40px;
  box-shadow:7px 7px 0 #00000088;transition:transform .1s,box-shadow .1s;
}
#startBtn:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #00000088;}
#startBtn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 #00000088;}
.menu-hint{margin-top:14px;font-size:1.15rem;opacity:.5;}

/* ---------------- LOBBY ---------------- */
.lobby-wrap{
  max-width:760px;margin:28px auto 0;
  background:#100a2cdd;border:3px solid var(--gold);
  padding:18px 22px;border-radius:6px;
}
.lobby-connect{display:flex;flex-direction:column;gap:10px;align-items:center;}
.lobby-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;}
.lobby-or{font-family:'Press Start 2P';font-size:.6rem;opacity:.5;}
.lobby-btn{
  font-family:'Press Start 2P';font-size:.65rem;background:#ffffff10;
  color:var(--paper);border:2px solid #ffffff33;padding:9px 14px;cursor:pointer;
  transition:background .12s;
}
.lobby-btn:hover{background:#ffffff20;}
.lobby-btn:disabled{opacity:.35;cursor:not-allowed;}
.lobby-btn.primary{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.lobby-btn.primary:hover{background:#ffe066;}
.lobby-btn.primary:disabled{background:#ffd23f55;}
.lobby-btn.small{font-size:.55rem;padding:6px 9px;}
.lobby-btn.big{font-size:.9rem;padding:14px 28px;margin-top:14px;width:100%;}
.lobby-btn.ghost{background:transparent;}
#lobbyJoinInput,#lobbyShare{
  font-family:'Press Start 2P';font-size:.6rem;
  background:#0a0626;color:#fff;border:2px solid #ffffff33;
  padding:9px 12px;width:220px;text-transform:uppercase;
}
#lobbyShare{width:280px;font-size:.5rem;text-transform:none;}
#lobbyJoinInput:focus,#lobbyShare:focus{outline:none;border-color:var(--gold);}
.lobby-hint{font-size:1.05rem;opacity:.55;text-align:center;margin-top:2px;}
.lobby-status{display:flex;flex-direction:column;gap:14px;align-items:center;}
.lobby-code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;}
.lobby-code-label{font-family:'Press Start 2P';font-size:.55rem;opacity:.6;}
.lobby-code{
  font-family:'Press Start 2P';font-size:.95rem;color:var(--gold);
  letter-spacing:1px;background:#0a0626;padding:8px 14px;border:2px solid var(--gold);
}
.lobby-faceoff{
  display:flex;align-items:center;gap:24px;justify-content:center;
  background:#0a062666;padding:14px 18px;border-radius:6px;width:100%;
  flex-wrap:wrap;
}
.lobby-side{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:120px;}
.lobby-side-title{font-family:'Press Start 2P';font-size:.7rem;color:var(--gold);}
.lobby-side-ready{font-family:'Press Start 2P';font-size:.6rem;}
.lobby-vs{font-family:'Press Start 2P';font-size:1.2rem;color:var(--paper);opacity:.45;}
#lobbyOppCanvas{background:#00000033;image-rendering:pixelated;}
.lobby-msg{font-family:'Press Start 2P';font-size:.6rem;text-align:center;min-height:1em;opacity:.85;}
@media (max-width:720px){
  .lobby-faceoff{flex-direction:column;}
  .lobby-vs{display:none;}
}

/* ---------------- GAME ---------------- */
#game{display:none;min-height:100vh;align-items:center;justify-content:center;padding:10px;}
#game.show{display:flex;}
.stage{position:relative;width:100%;max-width:1180px;}
#gc{
  width:100%;display:block;aspect-ratio:16/9;
  border:4px solid #00000088;box-shadow:0 0 0 4px #ffffff1a;
  touch-action:none;
}
.ovl{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:rgba(12,8,30,.9);padding:20px;
}
.ovl.show{display:flex;}
.ovl h2{font-family:'Press Start 2P';font-size:clamp(.9rem,3vw,1.6rem);
  color:var(--gold);line-height:1.5;text-shadow:3px 3px 0 var(--p1);}
.ovl p{font-size:1.4rem;opacity:.82;margin:14px 0 22px;}
.ovl button{font-size:.78rem;color:var(--ink);background:var(--gold);
  border:none;padding:15px 30px;box-shadow:5px 5px 0 #00000088;}
#ovlCanvas{margin-bottom:8px;image-rendering:pixelated;}
#rotate{
  position:absolute;inset:0;display:none;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;background:rgba(12,8,30,.96);
  font-family:'Press Start 2P';font-size:.7rem;text-align:center;line-height:1.8;
}
@media (orientation:portrait) and (max-width:900px){
  #game.show #rotate{display:flex;}
}
@media (max-width:720px){
  .pcol{min-width:100%;}
}
@media (max-width:900px){
  .setup-row{flex-direction:column;}
  .leaderboard{flex-basis:auto;width:100%;max-width:480px;margin:0 auto;}
}