:root{
  --bg:#0b0d14; --bg2:#111524; --ink:#f2f5fa; --dim:#8e9bb0;
  --p1:#ffb020; --p1d:#c98611; --p2:#3ddad7; --p2d:#1f9c99;
  --line:rgba(255,255,255,.10); --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:radial-gradient(900px 600px at 50% -10%,#18203a 0%,var(--bg) 60%) no-repeat,var(--bg);
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:18px;
  min-height:100dvh;
}
.wrap{width:100%;max-width:460px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{font-weight:800;letter-spacing:-.02em;font-size:19px;color:var(--dim);text-transform:uppercase;font-size:13px;letter-spacing:.18em}
.share{
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  padding:9px 14px;border-radius:100px;font:inherit;font-size:13px;cursor:pointer;
}
.share:active{transform:scale(.97)}

.lobby{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
.lead{color:var(--dim);font-size:15px;line-height:1.5;margin-bottom:20px}
.btn{
  width:100%;padding:16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink);font:inherit;font-size:16px;font-weight:600;
  cursor:pointer;transition:transform .08s ease,background .2s;
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--p1);border-color:var(--p1);color:#1a1205}
.btn.primary:active{background:var(--p1d)}
.wide{width:100%;margin-top:16px}
.or{text-align:center;color:var(--dim);font-size:13px;margin:16px 0}
.joinrow{display:flex;gap:10px}
.joinrow input{
  flex:1;min-width:0;padding:15px;border-radius:14px;border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--ink);font:inherit;font-size:18px;letter-spacing:.2em;
  text-align:center;text-transform:uppercase;outline:none;
}
.joinrow input:focus{border-color:var(--p1)}
.joinrow .btn{width:auto;padding:15px 20px}
.err{color:#ff7b6b;font-size:14px;margin-top:14px;min-height:18px}

.game{display:flex;flex-direction:column;gap:14px}
.status{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--dim)}
.code{font-weight:700;letter-spacing:.22em;color:var(--ink)}
.turn{font-size:14px}
.turn.you{color:var(--p1)}
.turn.them{color:var(--p2)}
.turn.win{color:#8ef58e}

.board{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  background:linear-gradient(180deg,#141a2c,#0e1320);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px;
  touch-action:manipulation;
}
.cell{
  position:relative;aspect-ratio:1;border-radius:50%;
  background:rgba(0,0,0,.45);box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.disc{width:86%;height:86%;border-radius:50%;transform:translateY(-320%);transition:transform .32s cubic-bezier(.34,1.4,.64,1)}
.disc.p1{background:radial-gradient(circle at 35% 30%,#ffd07a,var(--p1) 55%,var(--p1d))}
.disc.p2{background:radial-gradient(circle at 35% 30%,#8ff3f1,var(--p2) 55%,var(--p2d))}
.disc.dropped{transform:translateY(0)}
.cell.win .disc{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 18px rgba(255,255,255,.45)}
.col-hint{cursor:pointer}
.col-hint:active{background:rgba(255,255,255,.05)}

.players{display:flex;justify-content:space-between;font-size:13px;color:var(--dim)}
.chip{display:flex;align-items:center;gap:7px}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.dot.p1{background:var(--p1)} .dot.p2{background:var(--p2)}
.chip.active{color:var(--ink);font-weight:600}

@media (max-height:700px){ .board{gap:5px;padding:8px} }

.ver{text-align:center;color:rgba(255,255,255,.18);font-size:11px;margin-top:18px}