:root { color-scheme: dark; --felt:#12613b; --panel:#15202b; --gold:#f5c542; --danger:#e94f64; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:#07130e; color:#f7faf7; }
button, input { font: inherit; border-radius: 10px; border: 0; padding: .75rem 1rem; }
button { cursor:pointer; background:#e8edf2; color:#0b1220; font-weight:700; }
button:disabled, .disabled { opacity:.45; cursor:not-allowed; }
a { color:#b8f7d4; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; background:#0d1b14; border-bottom:1px solid #284936; }
#game { min-height:100vh; display:grid; grid-template-rows:auto auto auto 1fr; gap:1rem; padding:1rem; }
.table { min-height:330px; position:relative; border-radius:32px; background:radial-gradient(circle, #1b8554, var(--felt)); border:10px solid #4f2c18; box-shadow: inset 0 0 80px #07351f; }
.players { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:.75rem; padding:1rem; }
.player { background:rgba(0,0,0,.35); border:2px solid transparent; border-radius:16px; padding:.75rem; display:grid; gap:.2rem; }
.player.active { border-color:var(--gold); box-shadow:0 0 18px var(--gold); }
.player.last-played { outline:2px dashed #fff8; }
.player.me { background:rgba(255,255,255,.16); }
.player.offline { filter:grayscale(1); opacity:.55; }
.center-pile { position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:.25rem; padding:1rem 2rem; border-radius:22px; background:rgba(0,0,0,.35); }
.pile-card { font-size:4rem; line-height:1; }
.controls, .selected-zone, .my-hand-section, .log, .reveal, .lobby-card, .panel { background:var(--panel); border:1px solid #2c4052; border-radius:18px; padding:1rem; }
.controls { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.rank-picker { display:flex; flex-wrap:wrap; gap:.35rem; }
.rank { min-width:2.6rem; padding:.55rem .7rem; }
.rank.chosen { background:var(--gold); }
.danger { background:var(--danger); color:white; }
.hand { min-height:125px; }
.card { width:82px; transition:transform .16s, filter .16s; cursor:pointer; }
.active-hand .card:hover { filter:brightness(1.18); }
.card.selected { transform:translateY(-10px); outline:4px solid var(--gold); border-radius:7px; }
.card.truth { outline:4px solid #38d978; border-radius:7px; }
.card.lie { outline:4px solid var(--danger); border-radius:7px; }
.selected-zone .hand { display:flex; gap:.4rem; align-items:center; }
.reveal { position:fixed; z-index:10; inset:10% 8%; display:grid; place-items:center; background:rgba(10,18,28,.96); box-shadow:0 18px 80px #000; }
.hidden { display:none !important; }
.log ul { margin:0; padding-left:1.2rem; }
.lobby-page { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.lobby-card { width:min(720px, 100%); display:grid; gap:1rem; }
.panel { display:grid; gap:.75rem; }
.panel input { background:#eef3f7; color:#111827; }
@media (max-width: 700px) { .card { width:58px; } .table { min-height:420px; } }