/* app.css — shell, lobby, match chrome. Dark "game lounge" theme. */
:root{
  --bg:#0d1016; --panel:#151b25; --panel2:#1b2331; --line:#2a3342;
  --ink:#e8edf4; --mut:#8a97a9; --faint:#5c6779;
  --accent:#ffbf47; --accent-d:#e2a52f; --mint:#43d1a0; --danger:#ff6161;
  --win:#43d1a0; --lose:#ff6161; --draw:#ffbf47;
  --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, #182233 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #1a1526 0%, transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.hkc-has-bar .app{padding-top:calc(48px + env(safe-area-inset-top))}
.app{max-width:1040px;margin:0 auto;padding:18px 16px 60px}
.view.hidden{display:none}
.pad{padding:20px}
.mini{color:var(--mut);font-size:12.5px}
.hidden{display:none}

/* buttons */
.btn{
  font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--line); background:var(--panel2); color:var(--ink);
  padding:9px 14px;border-radius:10px;transition:transform .06s ease,border-color .15s,background .15s;
}
.btn:hover{border-color:#3a465a}
.btn:active{transform:translateY(1px)}
.btn.small{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-d));color:#26200a;border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}
.btn.primary.armed{background:var(--panel2);color:var(--accent);border:1px solid var(--accent)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger)} .btn.danger.ghost:hover{border-color:var(--danger)}
.btn[disabled]{opacity:.6;cursor:default}
.linklike{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12.5px;padding:0 4px;text-decoration:underline}

/* ---------- lobby ---------- */
.lobby-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 22px;flex-wrap:wrap}
.brandline{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(180deg,var(--accent),var(--accent-d));color:#241d06;font-size:22px;
  box-shadow:0 6px 22px rgba(255,191,71,.28)}
.wordmark{font-size:26px;font-weight:800;letter-spacing:.28em;padding-left:.28em}
.who{color:var(--mut);font-size:13.5px}
.who b{color:var(--ink)}

.picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.gcard{background:linear-gradient(180deg,var(--panel),#12171f);border:1px solid var(--line);
  border-radius:16px;padding:18px 16px;cursor:pointer;transition:border-color .15s,transform .08s,box-shadow .2s;position:relative;overflow:hidden}
.gcard:hover{border-color:#3d4a5f;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.gcard.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.gicon{font-size:40px;line-height:1;margin-bottom:10px}
.gname{font-size:18px;font-weight:700;letter-spacing:.02em}
.gblurb{color:var(--mut);font-size:12.5px;margin:6px 0 14px;min-height:32px;line-height:1.4}
.gactions{display:flex;flex-wrap:wrap;gap:8px}

.joinrow{display:flex;gap:8px;margin:0 0 26px}
.codeinput,.cinput{background:#0c1119;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:14px}
.codeinput{width:220px;text-transform:uppercase;letter-spacing:.18em}
.codeinput:focus,.cinput:focus{outline:none;border-color:var(--accent)}

.open-head{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;border-top:1px solid var(--line);padding-top:16px}
.open-head h3{margin:0;font-size:15px;letter-spacing:.02em}
.matchlist{display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mrow-icon{font-size:24px}
.mrow-main{flex:1;min-width:0}
.mrow-title{font-weight:600}
.mygames{margin-bottom:6px}
.mrow.resume{border-color:#3a4a3f;background:linear-gradient(180deg,#16211b,#131a17)}

/* ---------- match ---------- */
.match-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.match-title{flex:1;text-align:center;font-size:19px;font-weight:700;letter-spacing:.02em}
.match-title .gi{font-size:20px}
.match-code{display:flex;gap:8px;align-items:center}
.tag{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:2px 7px}

.players{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.pchip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;transition:border-color .2s,box-shadow .2s}
.pchip.tomove{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 0 18px rgba(255,191,71,.15)}
.pchip.me .pname{color:var(--ink)}
.pname{font-weight:600;font-size:14px}
.seatmark{font-size:17px;width:22px;text-align:center}
.seatmark.s1{color:var(--mut)}
.vs{color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.dot{width:8px;height:8px;border-radius:50%}
.dot.on{background:var(--mint);box-shadow:0 0 8px var(--mint)}
.dot.off{background:var(--faint)}

.board-wrap{display:flex;justify-content:center;margin:6px auto 14px}
.board-empty{padding:60px 20px;color:var(--mut);text-align:center}

.statusbar{text-align:center;font-weight:600;font-size:15px;padding:10px;border-radius:10px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel)}
.statusbar.your{color:#26200a;background:linear-gradient(180deg,var(--accent),var(--accent-d));border-color:transparent}
.statusbar.their{color:var(--mut)}
.statusbar.win{color:var(--win);border-color:var(--win)}
.statusbar.lose{color:var(--lose);border-color:var(--lose)}
.statusbar.draw{color:var(--draw);border-color:var(--draw)}
.statusbar.wait{color:var(--mut)}

.controls{display:flex;gap:10px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}

.sidepanel{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin:0 auto}
@media(max-width:560px){.sidepanel{grid-template-columns:1fr}}
.sp-title{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin-bottom:8px}
.movelog,.chat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.mlist,.cfeed{max-height:150px;overflow:auto;font-size:13px;display:flex;flex-direction:column;gap:4px}
.cfeed{margin-bottom:8px}
.cmsg{line-height:1.4} .cmsg b{color:var(--accent)} .cmsg.mine b{color:var(--mint)}
.cinput{width:100%}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#0a0e14;border:1px solid var(--accent);color:var(--ink);padding:11px 18px;border-radius:12px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}