*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060820;
  --bg-2:#0a0c28;
  --surface:#0f1232;
  --surface-2:#171a42;
  --border:#262a5c;
  --border-dim:#1a1d48;
  --text:#e8eaf6;
  --text-dim:#9398bd;
  --text-dimmer:#5a5e85;
  --accent:#ff8a3d;
  --cool:#4ea3ff;
  --warm:#ffd24d;
  --success:#62e5a3;
  --danger:#ff5577;
  --glow:#d4ff39;
  --magenta:#ff5fb8;
  --purple:#c87aff;
  --font-display:'Orbitron',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse at top left,rgba(255,138,61,0.08),transparent 55%),
    radial-gradient(ellipse at bottom right,rgba(78,163,255,0.07),transparent 55%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#app{min-height:100vh;display:flex;flex-direction:column}

/* Frame chrome */
.frame{
  flex:1;
  display:flex;
  flex-direction:column;
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:20px 16px 32px;
}
.bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:12px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border-dim);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
}
.bar .brand-mark{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  font-weight:500;
}
.bar .brand-mark::before{
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.bar .net{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-dim);
}
.bar .net .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--success);
  box-shadow:0 0 8px var(--success);
}
.bar .net.offline .dot{background:var(--text-dimmer);box-shadow:none}

/* Menu */
.menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 0 24px;
  text-align:center;
}
.brand{
  font-family:var(--font-display);
  font-size:96px;
  line-height:0.82;
  letter-spacing:6px;
  color:var(--accent);
  text-shadow:0 0 32px rgba(255,138,61,0.4),0 0 4px rgba(255,138,61,0.2);
  margin-bottom:14px;
  user-select:none;
}
.brand .dot{color:var(--cool)}
.brand .row2{display:block;color:var(--text);text-shadow:0 0 24px rgba(232,234,246,0.18)}
.tagline{
  font-size:12px;
  letter-spacing:6px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-bottom:48px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.tagline span{position:relative}
.tagline span:not(:last-child)::after{
  content:'//';
  margin-left:14px;
  color:var(--text-dimmer);
}

.btns{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:360px;
}
.btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:15px 22px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  transition:all 0.15s ease;
  width:100%;
  outline:none;
}
.btn::before{
  content:'>';
  color:var(--text-dim);
  font-weight:700;
  transition:transform 0.15s,color 0.15s;
}
.btn:hover{
  border-color:var(--glow);
  color:var(--glow);
  background:rgba(212,255,57,0.04);
  box-shadow:0 0 0 1px var(--glow),0 0 28px rgba(212,255,57,0.15);
}
.btn:hover::before{color:var(--glow);transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#1a0c00;
  font-weight:700;
}
.btn.primary::before{color:#1a0c00}
.btn.primary:hover{
  background:var(--glow);
  border-color:var(--glow);
  color:#0f1a00;
  box-shadow:0 0 0 1px var(--glow),0 0 36px rgba(212,255,57,0.42);
}
.btn.primary:hover::before{color:#0f1a00}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{
  background:rgba(255,85,119,0.08);
  border-color:var(--danger);
  color:var(--danger);
  box-shadow:0 0 0 1px var(--danger),0 0 24px rgba(255,85,119,0.25);
}
.btn .meta{margin-left:auto;color:var(--text-dimmer);font-size:11px;letter-spacing:1px}
.btn:hover .meta{color:inherit;opacity:0.7}

.footer-note{
  margin-top:32px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dimmer);
  text-align:center;
  max-width:480px;
}

/* Connecting / waiting screens */
.lobby{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 16px 24px;
  text-align:center;
}
.lobby-title{
  font-family:var(--font-display);
  font-size:56px;
  color:var(--cool);
  letter-spacing:4px;
  margin-bottom:8px;
  text-shadow:0 0 24px rgba(78,163,255,0.3);
}
.lobby-sub{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:36px;
}
.pulse-box{
  width:64px;
  height:64px;
  border:1px solid var(--cool);
  position:relative;
  margin-bottom:32px;
  animation:pulse-rot 2s linear infinite;
}
.pulse-box::before,.pulse-box::after{
  content:'';
  position:absolute;
  background:var(--cool);
  box-shadow:0 0 12px var(--cool);
}
.pulse-box::before{top:-3px;left:-3px;width:5px;height:5px}
.pulse-box::after{bottom:-3px;right:-3px;width:5px;height:5px}
@keyframes pulse-rot{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}
.lobby-status{
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:6px;
  min-height:18px;
}
.lobby-detail{
  font-size:11px;
  letter-spacing:1px;
  color:var(--text-dim);
  margin-bottom:32px;
  min-height:16px;
  font-family:var(--font-body);
}
.link-box{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  width:100%;
  max-width:520px;
  margin-bottom:24px;
}
.link-box .label{
  font-size:10px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--text-dim);
  padding:0 2px 6px;
}
.link-row{
  display:flex;
  border:1px solid var(--border);
  background:var(--surface);
}
.link-row input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:13px 14px;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--text);
  letter-spacing:0.5px;
  min-width:0;
}
.link-row button{
  background:transparent;
  border:none;
  border-left:1px solid var(--border);
  color:var(--accent);
  padding:0 16px;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.15s;
  white-space:nowrap;
  font-weight:500;
}
.link-row button:hover{background:rgba(255,138,61,0.1);color:var(--glow)}
.qr-tip{
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--text-dimmer);
  margin-bottom:24px;
  text-transform:uppercase;
}
.code-input-wrap{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:420px;
  gap:10px;
}
.code-input{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:14px 16px;
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:1px;
  outline:none;
  width:100%;
  text-align:center;
}
.code-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* Game layout */
.gameframe{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
  padding:14px;
  border:1px solid rgba(78,163,255,.18);
  background:linear-gradient(180deg,rgba(15,18,50,.78),rgba(6,8,32,.46));
  box-shadow:0 22px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.matchstrip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px 18px;
  flex-wrap:wrap;
  padding:12px 14px;
  background:linear-gradient(90deg,rgba(255,138,61,.12),rgba(78,163,255,.10));
  border:1px solid rgba(78,163,255,.25);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
}
.matchstrip span b{color:var(--text);font-weight:700;font-family:var(--font-body)}
.matchstrip .mid b{color:var(--cool)}
.matchstrip .seed b{color:var(--accent)}
.matchstrip .stake b{color:var(--warm)}
.matchstrip .stake.practice b{color:var(--text-dim)}
.turn-banner{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(212,255,57,.28);
  background:rgba(212,255,57,.055);
  color:var(--glow);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.turn-banner b{font-family:var(--font-display);font-size:30px;letter-spacing:3px;line-height:1;color:#fff}
.turn-banner.extra{border-color:rgba(98,229,163,.55);background:linear-gradient(90deg,rgba(98,229,163,.14),rgba(212,255,57,.10));color:var(--success);box-shadow:0 0 30px rgba(98,229,163,.12)}
.turn-banner .turn-help{font-size:10px;color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase}
.turn-banner.extra .turn-help{color:#b8ffd9}
.boards{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
}
.board{
  display:flex;
  flex-direction:column;
  flex:1 1 360px;
  max-width:460px;
  min-width:280px;
  opacity:.84;
  filter:saturate(.9);
  transition:opacity .16s ease, filter .16s ease, transform .16s ease;
}
.board.active-turn{opacity:1;filter:saturate(1.15);transform:translateY(-2px)}
.player-card{
  background:linear-gradient(180deg,rgba(23,26,66,.98),rgba(10,12,40,.98));
  border:1px solid rgba(78,163,255,.22);
  border-bottom:none;
  padding:12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 12px;
  align-items:center;
  font-size:11px;
  letter-spacing:1px;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}
.player-card.you{border-top:3px solid var(--cool)}
.player-card.opp{border-top:3px solid var(--magenta)}
.pc-name{display:flex;align-items:center;gap:8px;min-width:0}
.pc-name .tag{
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:4px 7px;
  font-size:9px;
}
.pc-name.you .tag{background:var(--cool);color:#001028;box-shadow:0 0 16px rgba(78,163,255,.35)}
.pc-name.opp .tag{background:rgba(255,95,184,.16);color:#ffd4ec;border:1px solid rgba(255,95,184,.35)}
.pc-name .addr{color:var(--text-dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-score{grid-column:1 / -1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}
.pc-score .score-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dimmer);padding-bottom:8px}
.pc-score b{font-family:var(--font-display);font-size:62px;line-height:.82;color:#fff;text-shadow:0 0 22px rgba(212,255,57,.22);font-weight:400}
.player-card.you .pc-score b{color:var(--glow)}
.player-card.opp .pc-score b{color:#ffd4ec}
.pc-stats{display:flex;gap:8px;align-items:center;justify-content:flex-end;color:var(--text-dim);font-size:10px;flex-wrap:wrap}
.pc-stats span{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);padding:5px 7px;text-transform:uppercase;letter-spacing:1.2px}
.pc-stats b{color:var(--text);font-weight:700}
.pc-stats .mult{color:var(--warm);font-weight:700;letter-spacing:1px;border-color:rgba(255,210,77,.30)}
.pc-stats .ico{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:4px;vertical-align:middle}
.pc-stats .ico.o{background:var(--accent)}
.pc-stats .ico.b{background:var(--text);border:1px solid var(--text-dim)}
canvas.board-canvas{
  display:block;
  background:#06081c;
  border:1px solid rgba(78,163,255,.22);
  border-top:none;
  width:100%;
  height:auto;
  touch-action:none;
  cursor:crosshair;
  box-shadow:0 18px 42px rgba(0,0,0,.33);
}
canvas.board-canvas.opp{cursor:default}
.controls{display:flex;justify-content:center;gap:10px;margin-top:2px}
.controls .btn{width:auto;min-width:140px;padding:12px 18px;font-size:11px}
@media (max-width:620px){.pc-score b{font-size:52px}.turn-banner{align-items:flex-start;flex-direction:column}.gameframe{padding:10px}}

/* Result */
.result{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:48px 16px;
  text-align:center;
}
.result-headline{
  font-family:var(--font-display);
  font-size:90px;
  letter-spacing:8px;
  line-height:0.9;
  margin-bottom:8px;
}
.result-headline.won{color:var(--success);text-shadow:0 0 40px rgba(98,229,163,0.5)}
.result-headline.lost{color:var(--danger);text-shadow:0 0 32px rgba(255,85,119,0.4)}
.result-headline.draw{color:var(--warm);text-shadow:0 0 24px rgba(255,210,77,0.4)}
.result-sub{
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:32px;
}
.result-scores{display:flex;gap:48px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}
.result-scores>div{display:flex;flex-direction:column;align-items:center}
.result-scores b{font-family:var(--font-display);font-size:54px;color:var(--text);line-height:1}
.result-scores span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);margin-top:6px}
.result-detail{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:4px 0;
}
.result-detail.tx{font-size:10px;letter-spacing:0.5px;text-transform:none;color:var(--text-dimmer)}
.result-detail .dot{width:4px;height:4px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success)}

/* Error overlay */
.error-banner{
  background:rgba(255,85,119,0.08);
  border:1px solid var(--danger);
  color:var(--danger);
  padding:10px 14px;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.error-banner::before{
  content:'!';
  display:inline-block;
  width:18px;height:18px;
  background:var(--danger);
  color:var(--bg);
  font-weight:700;
  text-align:center;
  line-height:18px;
}

/* Responsive */
@media (max-width:520px){
  .brand{font-size:64px;letter-spacing:4px}
  .lobby-title{font-size:42px}
  .result-headline{font-size:60px;letter-spacing:5px}
  .result-scores{gap:24px}
  .result-scores b{font-size:42px}
  .tagline{letter-spacing:3px;font-size:10px}
  .matchstrip{font-size:9px;letter-spacing:1px}
}

/* v1.3 smooth rebuild polish: 50% faster than v1.2 */
.build-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(212,255,57,.35);
  background:rgba(212,255,57,.07);
  color:var(--glow);
  border-radius:999px;
  padding:6px 10px;
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.build-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success)}
.pc-stats span:first-of-type b, .pc-stats > span:nth-child(2) b{
  font-family:var(--font-display);
  font-size:30px;
  line-height:.8;
  letter-spacing:1px;
  color:#fff;
  text-shadow:0 0 14px rgba(78,163,255,.30);
}
.player-card{padding:12px 14px}
canvas.board-canvas{border-radius:0 0 18px 18px}
.version-toast{
  position:fixed;left:50%;top:14px;transform:translateX(-50%);
  z-index:9999;padding:10px 14px;border-radius:999px;
  background:rgba(6,8,32,.92);border:1px solid rgba(212,255,57,.45);
  color:var(--glow);font-size:11px;letter-spacing:1.7px;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  pointer-events:none;animation:toastfade 3.2s ease forwards;
}
@keyframes toastfade{0%,75%{opacity:1}100%{opacity:0}}



:root{
  --bg:#070b17;
  --bg-2:#0b1120;
  --surface:#10192b;
  --surface-2:#17243b;
  --border:#24324f;
  --border-dim:#172236;
  --text:#eef4ff;
  --text-dim:#9fb0d0;
  --text-dimmer:#6c7d9d;
  --accent:#8b5cf6;
  --cool:#3bb8ff;
  --warm:#ffb84d;
  --success:#47e6a1;
  --danger:#ff5c87;
  --glow:#6cf1ff;
  --magenta:#ff67c8;
  --purple:#b18cff;
}
body{
  background:
    radial-gradient(circle at 15% 10%, rgba(59,184,255,.18), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(139,92,246,.18), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(71,230,161,.10), transparent 34%),
    linear-gradient(180deg,#050813 0%,#0a1222 52%,#09111f 100%);
}
.frame{max-width:1180px;padding:24px 18px 38px;}
.bar{
  margin-bottom:22px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(10,16,30,.68);
  backdrop-filter: blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.bar .brand-mark{color:#fff;font-weight:800;letter-spacing:1.6px}
.bar .brand-mark::before{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--cool),var(--accent));box-shadow:0 0 14px rgba(59,184,255,.6)}
.build-badge{
  border-radius:999px;
  padding:8px 12px;
  background:linear-gradient(90deg,rgba(59,184,255,.16),rgba(139,92,246,.16));
  border:1px solid rgba(255,255,255,.08);
  color:#dff5ff;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.menu{
  padding:58px 28px 36px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(14,22,38,.78),rgba(9,15,28,.88));
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.brand{
  font-family:var(--font-display);
  font-size:84px;
  font-weight:800;
  line-height:.88;
  letter-spacing:2px;
  color:#fff;
  text-shadow:none;
  margin-bottom:18px;
}
.brand .row2{color:#dfe7ff;text-shadow:none}
.brand .dot{color:var(--cool)}
.tagline{font-size:12px;letter-spacing:3px;color:#9cb0d3;margin-bottom:38px}
.tagline span:not(:last-child)::after{content:'•';margin-left:14px;color:rgba(255,255,255,.3)}
.btns{max-width:420px;gap:12px}
.btn{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:17px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  letter-spacing:1.2px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.btn::before{content:'';width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .18s ease}
.btn:hover{transform:translateY(-1px);border-color:rgba(108,241,255,.55);background:linear-gradient(180deg,rgba(59,184,255,.10),rgba(139,92,246,.10));box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 0 1px rgba(108,241,255,.18)}
.btn:hover::before{background:var(--glow);box-shadow:0 0 12px rgba(108,241,255,.65);transform:none}
.btn.primary{background:linear-gradient(90deg,var(--cool),var(--accent));border:none;color:#fff;box-shadow:0 14px 34px rgba(59,184,255,.22)}
.btn.primary::before{background:rgba(255,255,255,.8)}
.btn.primary:hover{background:linear-gradient(90deg,#58c8ff,#9d72ff);color:#fff}
.btn.danger{border-color:rgba(255,92,135,.4);color:#ffc3d4;background:rgba(255,92,135,.08)}
.footer-note{color:#8ea1c4;letter-spacing:1.1px;line-height:1.7;max-width:620px}
.lobby,.gameframe,.result{
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(13,20,35,.82),rgba(8,14,26,.92));
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.lobby,.result{padding:48px 20px 30px}
.lobby-title,.result-headline,.turn-banner b,.pc-score b,.result-scores b{font-family:var(--font-display)}
.lobby-title{font-size:48px;letter-spacing:2px;color:#f4f8ff;text-shadow:none}
.lobby-sub,.result-sub{letter-spacing:2px;color:#94a7ca}
.link-row,.code-input,.matchstrip,.turn-banner,.player-card,.result-scores>div{border-radius:18px}
.link-row{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.link-row button{color:#dff5ff;border-left:1px solid rgba(255,255,255,.08)}
.gameframe{padding:14px;gap:16px}
.matchstrip{
  background:linear-gradient(90deg,rgba(59,184,255,.12),rgba(139,92,246,.14));
  border:1px solid rgba(255,255,255,.08);
  padding:14px 16px;
  font-size:11px;
}
.turn-banner{
  border:1px solid rgba(108,241,255,.22);
  background:linear-gradient(90deg,rgba(59,184,255,.12),rgba(139,92,246,.08));
  color:#dff7ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.turn-banner b{font-size:28px;letter-spacing:2px;color:#fff}
.turn-banner.extra{border-color:rgba(71,230,161,.28);background:linear-gradient(90deg,rgba(71,230,161,.18),rgba(59,184,255,.08));color:#dfffea}
.board{max-width:470px;opacity:.9;filter:none}
.board.active-turn{transform:translateY(-4px);filter:none}
.player-card{
  background:linear-gradient(180deg,rgba(20,31,51,.96),rgba(12,18,31,.98));
  border:1px solid rgba(255,255,255,.08);
  border-bottom:none;
  border-radius:20px 20px 0 0;
  padding:14px 14px 12px;
}
.player-card.you{border-top:3px solid var(--cool)}
.player-card.opp{border-top:3px solid var(--magenta)}
.pc-name .tag{border-radius:999px;padding:5px 9px;font-size:10px}
.pc-name.you .tag{background:rgba(59,184,255,.16);color:#dff5ff;box-shadow:none}
.pc-name.opp .tag{background:rgba(255,103,200,.14);color:#ffe3f5;border-color:transparent}
.pc-score{padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.pc-score .score-label{font-size:10px;letter-spacing:2.5px;color:#91a3c8}
.pc-score b{font-size:72px;line-height:.9;text-shadow:none}
.player-card.you .pc-score b{color:#ffffff}
.player-card.opp .pc-score b{color:#ffe7f6}
.pc-stats span{border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
canvas.board-canvas{
  border:1px solid rgba(255,255,255,.08);
  border-top:none;
  border-radius:0 0 20px 20px;
  background:linear-gradient(180deg,#0a1221 0%,#0a1020 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.controls{margin-top:6px}
.result-headline{font-size:76px;letter-spacing:2px}
.result-scores>div{padding:18px 24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.result-scores b{font-size:58px}
@media (max-width:720px){
  .brand{font-size:56px}
  .pc-score b{font-size:56px}
  .result-headline{font-size:54px}
}


/* ===== Filthy Casual ===== */
:root{
  --bg:#060914;
  --bg-2:#0b1323;
  --surface:#0f1728;
  --surface-2:#162238;
  --border:#243557;
  --border-dim:#1b2840;
  --text:#eef5ff;
  --text-dim:#9db1d4;
  --text-dimmer:#6e81a5;
  --accent:#7c5cff;
  --cool:#2fd2ff;
  --warm:#ffbf5f;
  --success:#37e7a0;
  --danger:#ff5d88;
  --glow:#78f2ff;
  --magenta:#ff64c8;
  --purple:#a885ff;
}
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(47,210,255,.16), transparent 27%),
    radial-gradient(circle at 82% 14%, rgba(124,92,255,.16), transparent 29%),
    radial-gradient(circle at 50% 100%, rgba(55,231,160,.10), transparent 34%),
    linear-gradient(180deg, #060914 0%, #0a1220 58%, #08101d 100%);
  color:var(--text);
}
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; opacity:.28;
  background-image:
    linear-gradient(rgba(120,242,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,242,255,.06) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at center, black 48%, transparent 100%);
}
.frame{max-width:1220px;padding:24px 18px 40px;position:relative;z-index:1}
.bar{
  margin-bottom:22px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(13,20,35,.76), rgba(10,16,28,.86));
  box-shadow:0 18px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
}
.bar .brand-mark{
  color:#ffffff;
  font-weight:800;
  letter-spacing:1.8px;
  text-shadow:0 0 18px rgba(47,210,255,.18);
}
.bar .brand-mark::before{
  width:12px;height:12px;border-radius:50%;
  background:linear-gradient(135deg,var(--cool),var(--accent));
  box-shadow:0 0 18px rgba(47,210,255,.55);
}
.build-badge{
  border-radius:999px;
  padding:8px 12px;
  background:linear-gradient(90deg, rgba(47,210,255,.18), rgba(124,92,255,.18));
  border:1px solid rgba(255,255,255,.08);
  color:#e3f7ff;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.build-badge::before{background:var(--glow);box-shadow:0 0 12px rgba(120,242,255,.75)}
.menu{
  position:relative;
  overflow:hidden;
  padding:62px 30px 38px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:linear-gradient(180deg, rgba(15,23,40,.82), rgba(10,16,29,.94));
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.menu::before{
  content:'';
  position:absolute; inset:-1px;
  background:radial-gradient(circle at 18% 0%, rgba(47,210,255,.16), transparent 26%), radial-gradient(circle at 100% 0%, rgba(124,92,255,.18), transparent 34%);
  pointer-events:none;
}
.brand{
  position:relative;
  font-size:88px;
  font-weight:800;
  line-height:.9;
  letter-spacing:1px;
  color:#ffffff;
  text-shadow:none;
  margin-bottom:18px;
}
.brand .row2{color:#e7eeff;text-shadow:none}
.brand .dot{color:var(--cool);text-shadow:0 0 16px rgba(47,210,255,.5)}
.tagline{
  margin-bottom:42px;
  letter-spacing:3px;
  color:#92a9ce;
}
.tagline span:not(:last-child)::after{content:'•';color:rgba(255,255,255,.28)}
.btns{max-width:440px;gap:12px}
.btn{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  letter-spacing:1.2px;
  font-weight:800;
}
.btn::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.35);
}
.btn:hover{
  border-color:rgba(120,242,255,.55);
  background:linear-gradient(180deg, rgba(47,210,255,.10), rgba(124,92,255,.10));
  box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 0 1px rgba(120,242,255,.14);
  color:#fff;
  transform:translateY(-1px);
}
.btn:hover::before{background:var(--glow);box-shadow:0 0 14px rgba(120,242,255,.68)}
.btn.primary{
  border:none;
  color:#fff;
  background:linear-gradient(90deg, var(--cool), var(--accent));
  box-shadow:0 14px 34px rgba(47,210,255,.22);
}
.btn.primary::before{background:rgba(255,255,255,.8)}
.btn.primary:hover{background:linear-gradient(90deg, #52dbff, #9571ff)}
.btn.danger{background:rgba(255,93,136,.08);border-color:rgba(255,93,136,.35);color:#ffc6d6}
.footer-note{max-width:640px;color:#8fa4c8;letter-spacing:1px;line-height:1.7}

.lobby,.gameframe,.result{
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(13,20,36,.84), rgba(8,14,26,.95));
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}
.lobby,.result{padding:48px 20px 32px}
.lobby-title,.result-headline,.turn-banner b,.pc-score b,.result-scores b{font-family:var(--font-display);text-transform:uppercase}
.lobby-title{font-size:50px;color:#f5f9ff;text-shadow:none;letter-spacing:1px}
.lobby-sub,.result-sub{color:#93a8cc;letter-spacing:2px}
.link-row,.code-input,.matchstrip,.turn-banner,.player-card,.result-scores>div{border-radius:18px}
.link-row{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.link-row button{color:#dff8ff;border-left:1px solid rgba(255,255,255,.08)}
.gameframe{padding:14px;gap:16px}
.matchstrip{
  background:linear-gradient(90deg, rgba(47,210,255,.12), rgba(124,92,255,.14));
  border:1px solid rgba(255,255,255,.08);
  padding:14px 16px;
  font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.matchstrip .mid b{color:#8ee8ff}
.matchstrip .seed b{color:#cdbbff}
.matchstrip .stake b{color:#ffd08e}
.turn-banner{
  border:1px solid rgba(120,242,255,.22);
  background:linear-gradient(90deg, rgba(47,210,255,.12), rgba(124,92,255,.08));
  color:#ddf7ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.turn-banner b{font-size:29px;letter-spacing:2px;color:#ffffff}
.turn-banner.extra{
  border-color:rgba(55,231,160,.28);
  background:linear-gradient(90deg, rgba(55,231,160,.18), rgba(47,210,255,.08));
  color:#e8fff5;
}
.board{max-width:470px;opacity:.94;filter:none}
.board.active-turn{transform:translateY(-4px);opacity:1}
.player-card{
  background:linear-gradient(180deg, rgba(18,29,50,.98), rgba(11,18,33,.98));
  border:1px solid rgba(255,255,255,.08);
  border-bottom:none;
  border-radius:22px 22px 0 0;
  padding:14px 14px 12px;
  box-shadow:0 18px 38px rgba(0,0,0,.22);
}
.player-card.you{border-top:3px solid var(--cool)}
.player-card.opp{border-top:3px solid var(--magenta)}
.pc-name .tag{
  border-radius:999px;
  padding:6px 10px;
  font-size:10px;
  font-weight:800;
}
.pc-name.you .tag{background:rgba(47,210,255,.14);color:#ddf7ff;box-shadow:none}
.pc-name.opp .tag{background:rgba(255,100,200,.14);color:#ffe4f5;border-color:transparent}
.pc-name .addr{font-size:11px;color:#9fb2d6}
.pc-score{
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
}
.pc-score .score-label{font-size:10px;letter-spacing:2.5px;color:#8ea5cc}
.pc-score b{
  font-size:76px;
  line-height:.9;
  color:#ffffff;
  text-shadow:0 0 24px rgba(124,92,255,.08);
}
.player-card.opp .pc-score b{color:#ffe8f6}
.pc-stats span{
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.pc-stats .mult{border-color:rgba(255,191,95,.28)}
canvas.board-canvas{
  border:1px solid rgba(255,255,255,.08);
  border-top:none;
  border-radius:0 0 22px 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(47,210,255,.06), transparent 34%),
    linear-gradient(180deg, #091221 0%, #08101d 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.controls{margin-top:6px}
.result-headline{font-size:78px;letter-spacing:1px}
.result-scores>div{
  padding:18px 24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.result-scores b{font-size:58px}
.version-toast{
  background:rgba(9,15,28,.92);
  border:1px solid rgba(120,242,255,.24);
  color:#e2fbff;
  box-shadow:0 10px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (max-width:720px){
  .brand{font-size:58px}
  .pc-score b{font-size:58px}
  .result-headline{font-size:54px}
}




.bar,.lobby,.gameframe,.result{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
body::before{opacity:.12;}
.gameframe,.board,.player-card,canvas.board-canvas{transform:translateZ(0);}
canvas.board-canvas{image-rendering:auto;contain:strict;}
.btn,.board,.player-card{transition:transform .12s ease,border-color .12s ease,background .12s ease,opacity .12s ease;}
.version-toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}



@media (min-width: 900px){
  .frame{
    max-width:1120px;
    padding:10px 14px 16px;
  }
  .bar{
    margin-bottom:10px;
    padding:10px 14px;
    border-radius:14px;
  }
  .gameframe{
    gap:8px;
    padding:10px;
    border-radius:20px;
  }
  .matchstrip{
    padding:8px 12px;
    font-size:9px;
    letter-spacing:1.3px;
  }
  .turn-banner{
    padding:9px 12px;
    font-size:10px;
    letter-spacing:1.4px;
  }
  .turn-banner b{
    font-size:20px;
    letter-spacing:1.3px;
  }
  .turn-banner .turn-help{
    font-size:9px;
  }
  .boards{
    gap:14px;
    align-items:flex-start;
  }
  .board{
    max-width:min(405px, calc((100vw - 110px)/2));
    flex-basis:min(405px, calc((100vw - 110px)/2));
  }
  .player-card{
    padding:8px 10px;
    border-radius:16px 16px 0 0;
    gap:5px 10px;
  }
  .pc-name .tag{
    padding:4px 8px;
    font-size:9px;
  }
  .pc-name .addr{
    font-size:10px;
  }
  .pc-score{
    padding-top:5px;
  }
  .pc-score .score-label{
    font-size:9px;
    padding-bottom:5px;
    letter-spacing:2px;
  }
  .pc-score b{
    font-size:44px;
    line-height:.86;
  }
  .pc-stats{
    gap:5px;
    font-size:9px;
  }
  .pc-stats span{
    padding:4px 7px;
  }
  canvas.board-canvas{
    border-radius:0 0 16px 16px;
  }
  .controls{
    margin-top:0;
  }
  .controls .btn{
    min-width:120px;
    padding:9px 14px;
    font-size:10px;
  }
}

/* Lightweight esports accents that avoid expensive blur/compositing during gameplay. */
.gameframe{
  background:
    linear-gradient(180deg,rgba(13,20,36,.92),rgba(8,14,26,.96)),
    radial-gradient(circle at 20% 0%,rgba(47,210,255,.12),transparent 35%);
}
.player-card{
  position:relative;
  overflow:hidden;
}
.player-card::after{
  content:'';
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,242,255,.55),transparent);
  opacity:.75;
}
.board.active-turn .player-card{
  border-color:rgba(120,242,255,.30);
}
canvas.board-canvas{
  outline:1px solid rgba(120,242,255,.06);
  outline-offset:-5px;
}



@media (max-width: 760px){
  .frame{
    padding:8px 8px 14px;
  }
  .bar{
    margin-bottom:8px;
    padding:9px 10px;
    border-radius:14px;
    gap:8px;
    flex-wrap:wrap;
  }
  .build-badge{
    font-size:9px;
    padding:6px 8px;
  }
  .gameframe{
    padding:8px;
    gap:8px;
    border-radius:18px;
  }
  .matchstrip{
    padding:8px 10px;
    gap:6px 10px;
    font-size:8px;
    letter-spacing:.9px;
  }
  .turn-banner{
    position:sticky;
    top:0;
    z-index:20;
    padding:10px 12px;
    border-radius:15px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    box-shadow:0 10px 28px rgba(0,0,0,.38);
  }
  .turn-banner b{
    font-size:18px;
    letter-spacing:1px;
    line-height:1.15;
  }
  .turn-banner .turn-help{
    font-size:9px;
    line-height:1.25;
  }
  .boards{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    align-items:stretch;
  }
  .board{
    width:100%;
    max-width:100%;
    min-width:0;
    flex:0 0 auto;
    opacity:.72;
    transform:none;
  }
  .board.active-turn{
    order:-1;
    opacity:1;
    transform:none;
  }
  .board:not(.active-turn) canvas.board-canvas{
    display:none;
  }
  .board:not(.active-turn) .player-card{
    border-radius:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:8px 10px;
    grid-template-columns:1fr auto;
  }
  .board:not(.active-turn) .pc-score{
    grid-column:auto;
    border-top:none;
    padding-top:0;
    justify-content:flex-end;
    gap:8px;
  }
  .board:not(.active-turn) .pc-score .score-label{
    display:none;
  }
  .board:not(.active-turn) .pc-score b{
    font-size:28px;
  }
  .board:not(.active-turn) .pc-stats{
    display:none;
  }
  .player-card{
    padding:8px 10px;
    border-radius:16px 16px 0 0;
    gap:6px 8px;
  }
  .pc-name .tag{
    font-size:9px;
    padding:4px 7px;
  }
  .pc-name .addr{
    font-size:10px;
  }
  .pc-score{
    padding-top:5px;
  }
  .pc-score b{
    font-size:42px;
  }
  .pc-score .score-label{
    font-size:8px;
    padding-bottom:4px;
  }
  .pc-stats{
    gap:4px;
    font-size:8px;
  }
  .pc-stats span{
    padding:4px 6px;
  }
  canvas.board-canvas{
    width:100%;
    max-height:calc(100vh - 260px);
    object-fit:contain;
  }
  .controls{
    margin-top:2px;
  }
  .controls .btn{
    padding:9px 12px;
    min-width:112px;
  }
}




.board.active-turn .player-card.opp{
  border-color:rgba(255,100,200,.42);
}
.board.active-turn .player-card.opp::after{
  background:linear-gradient(90deg,transparent,rgba(255,100,200,.75),transparent);
}
@media (max-width:760px){
  .board.active-turn .player-card.opp .pc-score b{
    color:#ffe5f6;
  }
}



.footer-note{
  max-width:720px;
}
.btn.primary .meta{
  color:rgba(255,255,255,.82);
}
.result .btns .btn{
  justify-content:flex-start;
}



.profile-card{
  width:100%;
  max-width:420px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.profile-label{
  display:block;
  text-align:left;
  margin-bottom:8px;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
}
.profile-elo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(120,242,255,.18);
  border-radius:14px;
  background:linear-gradient(90deg,rgba(47,210,255,.08),rgba(124,92,255,.08));
}
.profile-elo span{
  color:var(--text-dim);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.profile-elo b{
  font-family:var(--font-display);
  font-size:34px;
  color:#fff;
}
.leaderboard-list{
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.leader-row{
  display:grid;
  grid-template-columns:58px 1fr 86px 82px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  text-align:left;
}
.leader-row.me{
  border-color:rgba(120,242,255,.42);
  background:rgba(47,210,255,.08);
}
.leader-row .rank{
  color:var(--glow);
  font-weight:800;
}
.leader-row .name{
  color:#fff;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.leader-row .record{
  color:var(--text-dim);
  font-size:11px;
}
.leader-row b{
  text-align:right;
  font-family:var(--font-display);
  font-size:22px;
  color:#fff;
}
@media (max-width:560px){
  .leader-row{grid-template-columns:44px 1fr 58px;gap:8px}
  .leader-row .record{display:none}
}


/* ===== Filthy Casual THEME ===== */
:root{
  --bg:#01030a;
  --bg-2:#040714;
  --surface:#070b16;
  --surface-2:#0d1426;
  --border:#14223b;
  --border-dim:#0d1628;
  --text:#f4f8ff;
  --text-dim:#9badcf;
  --text-dimmer:#5e6d89;
  --accent:#8d5cff;
  --cool:#00e7ff;
  --warm:#ffbe4a;
  --success:#38ffb7;
  --danger:#ff3f7f;
  --glow:#8af7ff;
  --magenta:#ff3fd5;
  --purple:#b178ff;
}
html{
  background:#01030a;
}
body{
  background:
    radial-gradient(circle at 50% -8%, rgba(0,231,255,.20), transparent 25%),
    radial-gradient(circle at 13% 18%, rgba(255,63,213,.13), transparent 27%),
    radial-gradient(circle at 86% 12%, rgba(141,92,255,.15), transparent 30%),
    radial-gradient(circle at 50% 105%, rgba(56,255,183,.08), transparent 32%),
    linear-gradient(180deg,#01030a 0%,#030714 52%,#01030a 100%);
  color:var(--text);
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background:
    linear-gradient(rgba(138,247,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,247,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at center, black 44%, transparent 88%);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(transparent 0%, rgba(255,255,255,.025) 50%, transparent 100%);
  background-size:100% 4px;
  opacity:.16;
  mix-blend-mode:screen;
}
.frame{
  max-width:1220px;
  position:relative;
  z-index:1;
}
.bar{
  border:1px solid rgba(138,247,255,.13);
  background:linear-gradient(180deg,rgba(5,10,22,.86),rgba(2,5,13,.94));
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(0,231,255,.03);
}
.bar .brand-mark{
  color:#fff;
  text-shadow:0 0 14px rgba(0,231,255,.45);
}
.bar .brand-mark::before{
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--cool) 38%,var(--accent) 100%);
  box-shadow:0 0 18px rgba(0,231,255,.9),0 0 34px rgba(141,92,255,.45);
}
.build-badge{
  border:1px solid rgba(138,247,255,.18);
  background:linear-gradient(90deg,rgba(0,231,255,.10),rgba(255,63,213,.10));
  color:#e9fdff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 24px rgba(0,231,255,.06);
}
.menu,.lobby,.result,.gameframe{
  border:1px solid rgba(138,247,255,.12);
  background:
    linear-gradient(180deg,rgba(5,9,20,.90),rgba(2,5,13,.96)),
    radial-gradient(circle at 18% 0%,rgba(0,231,255,.10),transparent 34%),
    radial-gradient(circle at 100% 8%,rgba(255,63,213,.10),transparent 28%);
  box-shadow:
    0 28px 100px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 60px rgba(0,231,255,.035);
}
.menu{
  position:relative;
}
.menu::after,.gameframe::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0%,rgba(138,247,255,.045) 22%,transparent 42%,rgba(255,63,213,.04) 70%,transparent 100%);
}
.brand{
  color:#ffffff;
  text-shadow:
    0 0 10px rgba(255,255,255,.22),
    0 0 30px rgba(0,231,255,.28),
    0 0 52px rgba(141,92,255,.22);
}
.brand .row2{
  color:#eaf2ff;
}
.brand .dot{
  color:var(--cool);
  text-shadow:0 0 14px rgba(0,231,255,.9),0 0 34px rgba(0,231,255,.45);
}
.tagline{
  color:#8fa5cc;
}
.btn{
  border:1px solid rgba(138,247,255,.12);
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),
    radial-gradient(circle at 0% 50%,rgba(0,231,255,.06),transparent 42%);
  box-shadow:0 16px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
}
.btn::before{
  background:rgba(138,247,255,.55);
}
.btn:hover{
  border-color:rgba(138,247,255,.62);
  background:
    linear-gradient(180deg,rgba(0,231,255,.13),rgba(141,92,255,.08)),
    radial-gradient(circle at 100% 50%,rgba(255,63,213,.12),transparent 42%);
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    0 0 0 1px rgba(138,247,255,.15),
    0 0 36px rgba(0,231,255,.14);
}
.btn.primary{
  color:#03101b;
  background:linear-gradient(90deg,#00e7ff 0%,#8d5cff 54%,#ff3fd5 100%);
  box-shadow:0 16px 42px rgba(0,231,255,.22),0 0 52px rgba(141,92,255,.14);
}
.btn.primary:hover{
  color:#020611;
  background:linear-gradient(90deg,#8af7ff 0%,#a884ff 54%,#ff76e3 100%);
}
.btn.primary .meta{
  color:rgba(2,6,17,.72);
}
.matchstrip{
  border:1px solid rgba(138,247,255,.14);
  background:
    linear-gradient(90deg,rgba(0,231,255,.10),rgba(141,92,255,.10),rgba(255,63,213,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.turn-banner{
  border:1px solid rgba(138,247,255,.24);
  background:
    linear-gradient(90deg,rgba(0,231,255,.12),rgba(141,92,255,.10)),
    rgba(2,5,13,.72);
  box-shadow:0 12px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.turn-banner b{
  color:#ffffff;
  text-shadow:0 0 18px rgba(0,231,255,.34);
}
.turn-banner.extra{
  border-color:rgba(56,255,183,.42);
  background:linear-gradient(90deg,rgba(56,255,183,.17),rgba(0,231,255,.10));
}
.player-card{
  background:
    linear-gradient(180deg,rgba(8,14,28,.98),rgba(3,7,16,.99));
  border:1px solid rgba(138,247,255,.12);
  box-shadow:
    0 18px 42px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.045);
}
.player-card.you{
  border-top-color:var(--cool);
}
.player-card.opp{
  border-top-color:var(--magenta);
}
.player-card::after{
  background:linear-gradient(90deg,transparent,rgba(0,231,255,.75),transparent);
}
.pc-name.you .tag{
  background:rgba(0,231,255,.14);
  color:#dffdff;
  border:1px solid rgba(0,231,255,.20);
}
.pc-name.opp .tag{
  background:rgba(255,63,213,.13);
  color:#ffe2f9;
  border:1px solid rgba(255,63,213,.20);
}
.pc-score b{
  color:#ffffff;
  text-shadow:0 0 24px rgba(0,231,255,.16);
}
.player-card.opp .pc-score b{
  color:#ffe1f8;
  text-shadow:0 0 22px rgba(255,63,213,.14);
}
.pc-stats span{
  background:rgba(255,255,255,.035);
  border-color:rgba(138,247,255,.10);
}
canvas.board-canvas{
  background:#020610;
  border:1px solid rgba(138,247,255,.12);
  border-top:none;
  box-shadow:
    0 22px 54px rgba(0,0,0,.50),
    0 0 0 1px rgba(0,231,255,.03),
    inset 0 0 80px rgba(0,231,255,.025);
}
.board.active-turn canvas.board-canvas{
  outline:1px solid rgba(138,247,255,.18);
  box-shadow:
    0 22px 54px rgba(0,0,0,.50),
    0 0 36px rgba(0,231,255,.10);
}
.profile-card,.leader-row,.result-scores>div,.link-row{
  border-color:rgba(138,247,255,.13);
  background:rgba(255,255,255,.030);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.leader-row.me{
  border-color:rgba(0,231,255,.45);
  background:linear-gradient(90deg,rgba(0,231,255,.10),rgba(141,92,255,.06));
}
.version-toast{
  background:rgba(2,5,13,.94);
  border-color:rgba(138,247,255,.35);
  color:#eaffff;
  box-shadow:0 14px 44px rgba(0,0,0,.48),0 0 30px rgba(0,231,255,.10);
}
.lobby-title,.result-headline{
  text-shadow:0 0 26px rgba(0,231,255,.22),0 0 44px rgba(141,92,255,.14);
}
.footer-note,.qr-tip,.lobby-detail,.result-detail.tx{
  color:#7f93bb;
}
@media (max-width:760px){
  body::before{background-size:52px 52px;opacity:.24}
  .turn-banner{
    background:linear-gradient(90deg,rgba(0,231,255,.16),rgba(141,92,255,.12)),rgba(2,5,13,.92);
  }
}



.bar{
  gap:12px;
}
.top-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-left:auto;
}
.top-nav button{
  appearance:none;
  border:1px solid rgba(138,247,255,.14);
  background:rgba(255,255,255,.028);
  color:var(--text-dim);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  border-radius:999px;
  padding:8px 11px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.top-nav button:hover{
  color:#eaffff;
  border-color:rgba(138,247,255,.45);
  background:rgba(0,231,255,.08);
  box-shadow:0 0 22px rgba(0,231,255,.10);
}
@media (max-width:620px){
  .bar{
    align-items:flex-start;
  }
  .top-nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    margin-left:0;
  }
  .top-nav button{
    padding:7px 10px;
    font-size:9px;
  }
}



.leaderboard-screen .lobby-sub{
  color:var(--glow);
}



.profile-card.wide{
  max-width:760px;
}
.profile-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.profile-stat{
  border:1px solid rgba(138,247,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.032);
  padding:10px 12px;
}
.profile-stat span{
  display:block;
  color:var(--text-dim);
  font-size:9px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.profile-stat b{
  display:block;
  color:#fff;
  font-family:var(--font-display);
  font-size:22px;
  line-height:1;
}
.badge-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.badge{
  display:flex;
  flex-direction:column;
  gap:3px;
  border:1px solid rgba(255,191,74,.22);
  border-radius:14px;
  padding:8px 10px;
  background:linear-gradient(180deg,rgba(255,191,74,.08),rgba(255,255,255,.025));
}
.badge b{
  color:#ffe6a8;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.badge em{
  color:var(--text-dim);
  font-size:9px;
  font-style:normal;
}
@media (max-width:760px){
  .profile-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:460px){
  .profile-grid{
    grid-template-columns:1fr;
  }
}



.avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(138,247,255,.34);
  background:linear-gradient(135deg,rgba(0,231,255,.18),rgba(255,63,213,.14));
  color:#eaffff;
  font-weight:900;
  box-shadow:0 0 18px rgba(0,231,255,.12);
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.avatar.mini{
  width:24px;
  height:24px;
  font-size:11px;
}
.avatar.small{
  width:38px;
  height:38px;
}
.avatar.big{
  width:74px;
  height:74px;
  font-size:28px;
  border-width:2px;
}
.pfp-preview{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(138,247,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:var(--text-dim);
  font-size:12px;
}
.file-input{
  width:100%;
  margin-top:8px;
  color:var(--text-dim);
  font-family:var(--font-body);
}
.match-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:18px auto;
}
.match-preview b{
  font-family:var(--font-display);
  color:var(--glow);
  letter-spacing:2px;
}
.versus-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:8px 10px;
  border:1px solid rgba(138,247,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.versus-strip div{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.versus-strip span{
  max-width:160px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--text-dim);
  font-size:11px;
  font-weight:800;
}
.versus-strip b{
  color:var(--glow);
  font-family:var(--font-display);
  font-size:18px;
}
.pc-name{
  gap:7px;
}
@media(max-width:620px){
  .versus-strip span{max-width:104px}
  .avatar.big{width:62px;height:62px}
}



.leader-row.has-avatar{
  grid-template-columns:58px 28px 1fr 86px 82px;
}
.leader-row.has-avatar .avatar.mini{
  width:26px;
  height:26px;
}
@media (max-width:560px){
  .leader-row.has-avatar{
    grid-template-columns:42px 26px 1fr 70px;
  }
  .leader-row.has-avatar .record{
    display:none;
  }
}


.mini-btn{
  width:auto!important;
  padding:8px 12px!important;
  min-height:auto!important;
  font-size:12px!important;
}



.tabs{
  display:flex;
  gap:8px;
  margin:16px auto 18px;
  padding:5px;
  border:1px solid rgba(138,247,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.025);
}
.tabs button{
  appearance:none;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--font-body);
  font-weight:900;
  font-size:10px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  padding:9px 13px;
  cursor:pointer;
}
.tabs button.active{
  color:#06111b;
  background:linear-gradient(90deg,var(--cool),var(--accent),var(--magenta));
  box-shadow:0 0 24px rgba(0,231,255,.12);
}
.tabs button:not(.active):hover{
  color:#eaffff;
  border-color:rgba(138,247,255,.20);
  background:rgba(0,231,255,.06);
}



.qr-tip:empty,
.result-detail:empty{
  display:none;
}
.footer-note{
  text-align:center;
  font-weight:800;
  color:#9fb3d9;
}
.lobby-sub{
  max-width:520px;
}



.onboarding-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:radial-gradient(circle at 50% 35%,rgba(0,231,255,.12),transparent 34%),rgba(3,7,18,.78);
  backdrop-filter:blur(10px);
}
.onboarding-card{
  width:min(520px,100%);
  border:1px solid rgba(138,247,255,.18);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(13,20,42,.96),rgba(5,8,20,.96));
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 55px rgba(0,231,255,.10);
  padding:22px;
}
.onboarding-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.onboarding-kicker{
  color:var(--glow);
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.onboarding-x{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#dce8ff;
  width:34px;
  height:34px;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.onboarding-title{
  font-family:var(--font-display);
  font-size:30px;
  line-height:1.05;
  letter-spacing:1px;
  color:#fff;
  margin-bottom:12px;
  text-shadow:0 0 24px rgba(0,231,255,.16);
}
.onboarding-body{
  color:#b9c7e8;
  font-size:14px;
  line-height:1.55;
}
.onboarding-body p{
  margin:0 0 10px;
}
.onboarding-body b{
  color:#fff;
}
.onboarding-actions{
  display:flex;
  gap:10px;
  margin-top:18px;
}
.onboarding-actions .btn{
  min-height:46px;
}
.onboarding-profile{
  display:grid;
  gap:9px;
  margin-top:14px;
}
.onboarding-profile label{
  color:var(--text-dim);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
@media(max-width:520px){
  .onboarding-card{
    padding:18px;
    border-radius:20px;
  }
  .onboarding-title{
    font-size:25px;
  }
  .onboarding-actions{
    flex-direction:column;
  }
}



.bar{
  position:sticky;
  top:0;
  z-index:5000;
  background:linear-gradient(180deg,rgba(5,8,20,.96),rgba(5,8,20,.86));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:0 0 16px 16px;
  padding:10px 12px 12px;
}
.top-nav button:first-child{
  color:#eaffff;
  border-color:rgba(138,247,255,.32);
  background:rgba(0,231,255,.065);
}
@media(max-width:620px){
  .bar{
    top:0;
    border-radius:0 0 14px 14px;
  }
  .brand-mark{
    max-width:42%;
  }
}


.leader-row.clickable-player{
  width:100%;
  font:inherit;
  color:inherit;
  cursor:pointer;
  border-left:0;
  border-right:0;
  border-top:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
}
.leader-row.clickable-player:hover{
  background:rgba(138,247,255,.075);
  border-color:rgba(138,247,255,.18);
}
.public-profile-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.public-player-name{
  font-family:var(--font-display);
  font-size:22px;
  color:#fff;
  letter-spacing:.8px;
}
.public-player-id{
  color:var(--text-dim);
  font-size:11px;
  margin-top:3px;
}



:root{
  --fc-slime:#d7ff3f;
  --fc-pink:#ff4fd8;
  --fc-orange:#ff9f1c;
  --fc-ink:#05050b;
}
body{
  background:
    radial-gradient(circle at 15% 12%, rgba(255,79,216,.16), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(215,255,63,.14), transparent 24%),
    radial-gradient(circle at 45% 100%, rgba(255,159,28,.10), transparent 32%),
    linear-gradient(180deg,#060611 0%,#090b18 46%,#04040a 100%);
}
.brand-mark{
  color:#fff;
  text-shadow:0 0 22px rgba(215,255,63,.20);
}
.brand-mark span{
  color:var(--fc-slime);
}
.brand{
  letter-spacing:-1px;
  text-shadow:
    0 0 22px rgba(255,79,216,.22),
    0 0 34px rgba(215,255,63,.13);
}
.brand .row2{
  color:var(--fc-slime);
}
.brand .dot{
  color:var(--fc-pink);
}
.tagline span{
  border-color:rgba(215,255,63,.24);
  background:rgba(215,255,63,.055);
  color:#f3ffd0;
}
.btn.primary{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(135deg,var(--fc-pink),var(--fc-orange) 52%,var(--fc-slime));
  color:#09090f;
  border-color:rgba(255,255,255,.24);
  box-shadow:0 14px 38px rgba(255,79,216,.22),0 0 24px rgba(215,255,63,.14);
}
.btn.primary .meta{
  color:rgba(0,0,0,.62);
}
.btn:hover{
  transform:translateY(-1px);
}
.footer-note{
  color:#d9e6b0;
}
.top-nav button:first-child{
  border-color:rgba(215,255,63,.35);
  background:rgba(215,255,63,.08);
  color:#fbffd9;
}
.net-dot{
  box-shadow:0 0 14px rgba(215,255,63,.7);
  background:var(--fc-slime);
}
.player-card.you{
  border-color:rgba(215,255,63,.22);
}
.player-card.opp{
  border-color:rgba(255,79,216,.20);
}
.lobby-title{
  text-shadow:0 0 24px rgba(255,79,216,.18);
}
.tabs button.active{
  border-color:rgba(215,255,63,.35);
  background:rgba(215,255,63,.09);
  color:#f6ffd2;
}
.version-toast{
  border-color:rgba(215,255,63,.45);
  color:var(--fc-slime);
}



:root{
  --fc-slime:#d7ff3f;
  --fc-pink:#ff4fd8;
  --fc-orange:#ff9f1c;
  --fc-ink:#05050b;
}
body{
  background:
    radial-gradient(circle at 15% 12%, rgba(255,79,216,.16), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(215,255,63,.14), transparent 24%),
    radial-gradient(circle at 45% 100%, rgba(255,159,28,.10), transparent 32%),
    linear-gradient(180deg,#060611 0%,#090b18 46%,#04040a 100%);
}
.brand-mark{color:#fff;text-shadow:0 0 22px rgba(215,255,63,.20)}
.brand-mark span{color:var(--fc-slime)}
.brand{letter-spacing:-1px;text-shadow:0 0 22px rgba(255,79,216,.22),0 0 34px rgba(215,255,63,.13)}
.brand .row2{color:var(--fc-slime)}
.brand .dot{color:var(--fc-pink)}
.tagline span{border-color:rgba(215,255,63,.24);background:rgba(215,255,63,.055);color:#f3ffd0}
.btn.primary{
  background:radial-gradient(circle at 20% 0%, rgba(255,255,255,.22), transparent 30%),linear-gradient(135deg,var(--fc-pink),var(--fc-orange) 52%,var(--fc-slime));
  color:#09090f;border-color:rgba(255,255,255,.24);
  box-shadow:0 14px 38px rgba(255,79,216,.22),0 0 24px rgba(215,255,63,.14);
}
.btn.primary .meta{color:rgba(0,0,0,.62)}
.footer-note{color:#d9e6b0}
.top-nav button:first-child{border-color:rgba(215,255,63,.35);background:rgba(215,255,63,.08);color:#fbffd9}
.net-dot{box-shadow:0 0 14px rgba(215,255,63,.7);background:var(--fc-slime)}
.player-card.you{border-color:rgba(215,255,63,.22)}
.player-card.opp{border-color:rgba(255,79,216,.20)}
.lobby-title{text-shadow:0 0 24px rgba(255,79,216,.18)}
.tabs button.active{border-color:rgba(215,255,63,.35);background:rgba(215,255,63,.09);color:#f6ffd2}
.version-toast{border-color:rgba(215,255,63,.45);color:var(--fc-slime)}


/* Professional polish */
.version-toast,
.build-info,
.dev-note{
  display:none !important;
}
.footer-note{
  color:#dfe8c2;
  opacity:.82;
}
.lobby-detail{
  color:rgba(225,234,255,.62);
}


/* Progressive login */
.save-card-prompt{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:9000;
  width:min(520px,calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(215,255,63,.24);
  border-radius:18px;
  background:rgba(7,10,24,.94);
  box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 24px rgba(215,255,63,.08);
  backdrop-filter:blur(10px);
}
.save-card-prompt div{
  flex:1;
  min-width:0;
}
.save-card-prompt b{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:2px;
}
.save-card-prompt span{
  display:block;
  color:rgba(225,234,255,.72);
  font-size:12px;
  line-height:1.35;
}
.save-card-prompt button{
  border:1px solid rgba(215,255,63,.28);
  background:rgba(215,255,63,.09);
  color:#f7ffd0;
  border-radius:12px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
}
.save-card-prompt button.quiet{
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  color:rgba(225,234,255,.74);
}
@media(max-width:560px){
  .save-card-prompt{
    align-items:stretch;
    flex-direction:column;
  }
  .save-card-prompt button{
    width:100%;
  }
}


/* Auth-aware onboarding */
.onboarding-save-box{
  margin-top:6px;
  border:1px solid rgba(215,255,63,.20);
  background:rgba(215,255,63,.055);
  border-radius:16px;
  padding:11px 12px;
}
.onboarding-save-box b{
  display:block;
  color:#f7ffd0;
  font-size:12px;
  margin-bottom:3px;
}
.onboarding-save-box span{
  display:block;
  color:rgba(225,234,255,.74);
  font-size:12px;
  line-height:1.35;
}


/* Clean top navigation */
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand-home{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:.5px;
  font-size:18px;
  line-height:1;
  padding:8px 0;
  text-shadow:0 0 22px rgba(215,255,63,.20);
  white-space:nowrap;
}
.brand-home span{
  color:var(--fc-slime);
  margin-left:4px;
}
.build-badge{
  display:none !important;
}
.sr-net{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(1px,1px,1px,1px) !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.top-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.top-nav button{
  white-space:nowrap;
}
@media(max-width:620px){
  .bar{
    gap:8px;
  }
  .brand-home{
    font-size:14px;
  }
  .top-nav{
    gap:5px;
  }
  .top-nav button{
    padding:8px 9px;
    font-size:11px;
  }
}


/* Daily mobile paint guard only */
@media(max-width:620px){
  #canvas-player.board-canvas{
    display:block;
    visibility:visible;
    opacity:1;
  }
}