:root{
  --bg:#0b1220; --bg2:#0f1a2e; --card:#131f36; --card2:#182742;
  --line:#233355; --txt:#e8eefc; --muted:#8ea3c9;
  --accent:#22d3ee; --accent2:#38bdf8; --x:#34d399; --o:#fbbf24;
  --danger:#f43f5e; --ok:#22c55e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 20% -10%,#12233f 0%,var(--bg) 55%) no-repeat,var(--bg);
  color:var(--txt); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  min-height:100vh; padding-bottom:32px;
}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; background:rgba(11,18,32,.96);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.logo{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06202b;font-weight:900;
}
.conn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.dot.off{background:var(--danger);box-shadow:0 0 10px var(--danger)}

main{max-width:760px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.screen{display:flex;flex-direction:column;gap:14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.lbl{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:8px;display:block}
.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lbl-row .lbl{margin:0}
.row{display:flex;gap:8px;align-items:center}
.muted{color:var(--muted);font-size:13px}

.input{
  flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:11px;padding:11px 13px;font-size:16px;outline:none;
}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,211,238,.15)}

.btn{
  border:1px solid var(--line);background:var(--card2);color:var(--txt);
  border-radius:11px;padding:11px 14px;font-size:15px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:transform .06s ease,filter .15s ease;
}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.12)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#04222c}
.btn.ghost{background:transparent}
.btn.danger{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.5);color:#ffc2cd}
.btn.block{width:100%;margin-top:12px}
.btn.sm{padding:7px 11px;font-size:13px}
.btn.xs{padding:3px 8px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game{
  text-align:left;padding:12px;border-radius:13px;border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);cursor:pointer;
}
.game.sel{border-color:var(--accent);background:rgba(34,211,238,.1);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.game b{display:block;font-size:15px;margin-bottom:3px}
.game span{font-size:12px;color:var(--muted)}

.roomlist{display:flex;flex-direction:column;gap:9px}
.empty{color:var(--muted);font-size:14px;text-align:center;padding:14px 6px}
.roomitem{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
}
.roomitem .rmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
.roomitem .rtitle{font-weight:700;font-size:15px}
.roomitem .rsub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill.playing{color:#bff7d0;border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.12)}
.pill.done{color:#ffd9a8;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12)}

/* ---------- room ---------- */
.roomhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gamename{font-size:19px;font-weight:800}
.players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.pcard{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 6px;min-width:0;
}
.pcard.turn{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,211,238,.16);background:var(--card2)}
.pcard .sym{font-size:22px;font-weight:900;line-height:1}
.pcard .sym.x{color:var(--x)} .pcard .sym.o{color:var(--o)}
.pcard .pname{font-weight:700;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .tag{font-size:11px;color:var(--muted)}
.vs{color:var(--muted);font-size:13px;font-weight:700}

.status{
  text-align:center;font-weight:700;font-size:15px;padding:11px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
}
.status.hot{border-color:var(--accent);background:rgba(34,211,238,.1)}
.status.win{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.12)}

.boardwrap{overflow:auto;display:flex;justify-content:center;padding:4px}
.board{
  display:grid;gap:2px;background:var(--line);border:2px solid var(--line);
  border-radius:10px;padding:2px;touch-action:manipulation;
}
.cell{
  width:var(--cell);height:var(--cell);background:var(--bg2);border-radius:4px;
  display:grid;place-items:center;font-weight:900;font-size:calc(var(--cell) * .62);
  line-height:1;cursor:pointer;user-select:none;color:transparent;
}
.cell.p1{color:var(--x)} .cell.p2{color:var(--o)}
.cell.last{outline:2px solid var(--accent);outline-offset:-2px}
.cell.win{background:rgba(34,197,94,.28)}
.cell.dead{cursor:default}
.cell:not(.dead):hover{background:var(--card2)}

.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.chatcard{margin-top:2px}
.chat{
  height:190px;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;margin-bottom:10px;
}
.msg{font-size:14px;word-break:break-word}
.msg .who{font-weight:700;color:var(--accent)}
.msg.sys{color:var(--muted);font-style:italic;font-size:13px}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:#20304f;border:1px solid var(--line);color:var(--txt);padding:10px 16px;border-radius:12px;
  opacity:0;pointer-events:none;transition:all .22s ease;max-width:88vw;text-align:center;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:420px){
  main{padding:12px}
  .games{grid-template-columns:1fr}
  .gamename{font-size:17px}
}

/* Go88 entry card */
a.btn{display:block;text-align:center;text-decoration:none}
.games.static .game{cursor:default}
.card.go88{background:linear-gradient(160deg,rgba(34,211,238,.10),var(--card) 60%);border-color:#2b4468}
.note{margin-top:8px;line-height:1.35}