:root{
  --bg:#000000; --surface:#121212; --surface-2:#242424; --line:#1F1F1F; --line-strong:#383838;
  --ink:#F2F2F2; --muted:#8A8A8A; --faint:#555555;
  --table:#1F4A3D; --table-line:rgba(255,255,255,.09); --on-table:#FFFFFF;
  --accent:#111111; --accent-ink:#FFFFFF;
  --good:#3CC48A; --bad:#FF5A4E;
  --sp:#111111; --he:#D1342A; --di:#2156D0; --cl:#1B8A5A; --back:#1F4A3D;
  --font:"Geist","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  color-scheme:dark;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); background:var(--bg);
}
html{ height:100%; scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--font); font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; cursor:pointer; -webkit-user-select:none; user-select:none; }
input{ font:inherit; color:inherit; }
button:focus-visible, input:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
[hidden]{ display:none !important; }
.num{ font-variant-numeric:tabular-nums; }

.logo{ margin:0; font-weight:650; letter-spacing:-.045em; line-height:.9; }
.logo.sm{ font-size:22px; }

/* ---------- buttons ---------- */
.b{ height:52px; border:0; border-radius:10px; font-size:15.5px; font-weight:600; font-variant-numeric:tabular-nums; transition:transform .08s, opacity .15s, background .15s; }
.b:active:not(:disabled){ transform:scale(.98); }
.b:disabled{ opacity:.25; cursor:default; }
.b.primary{ background:var(--ink); color:#000; }
.b.ghost{ background:var(--bg); border:1px solid var(--line-strong); }
.b.sm{ height:40px; font-size:14px; padding:0 16px; border-radius:8px; }
.b.wide{ width:100%; }
.pill{ height:32px; padding:0 11px; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg); font-size:13px; font-weight:500; white-space:nowrap; }
.pill b{ font-weight:650; letter-spacing:.08em; font-variant-numeric:tabular-nums; }

/* ---------- lobby ---------- */
.lobby{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:36px 24px; }
.lobby-in{ width:100%; max-width:380px; }
.lobby .logo{ font-size:72px; }
.tagline{ margin:14px 0 34px; color:var(--muted); font-size:16px; line-height:1.5; }
.field{ display:block; margin-bottom:22px; }
.field > span{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:8px; }
.field input, .join input, .rename input{ width:100%; height:50px; border:1px solid var(--line-strong); border-radius:10px; background:var(--bg); padding:0 14px; font-size:17px; }
.field input:focus, .join input:focus, .rename input:focus{ outline:none; border-color:var(--ink); }
.field input::placeholder, .join input::placeholder{ color:var(--faint); }
.avatars{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.avatars button{ aspect-ratio:1; padding:0; border:0; border-radius:50%; background:var(--av); color:#fff; font-size:15px; font-weight:600; display:grid; place-items:center; }
.avatars button[aria-checked="true"]{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.avatars.sm button{ font-size:14px; }
.err{ min-height:1.3em; margin:0 0 10px; color:var(--bad); font-size:13.5px; }
.join{ display:flex; gap:8px; margin-top:10px; }
.join input{ text-transform:uppercase; letter-spacing:.14em; font-weight:600; }
.join .b{ flex:none; width:96px; height:50px; }
.join .b.ghost{ background:var(--bg); border:1px solid var(--line-strong); }
.join .b.primary{ background:var(--ink); }
.fine{ margin:26px 0 0; font-size:12.5px; color:var(--faint); text-align:center; }

/* ---------- game shell ---------- */
.app{ height:100%; max-width:600px; margin:0 auto; display:flex; flex-direction:column; }
.top{ flex:none; display:flex; align-items:center; gap:8px; height:52px; padding:8px 16px 0; }
.conn{ flex:1; font-size:12.5px; color:var(--bad); }
.stage{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.center{ flex:1 1 auto; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:8px 14px; }
.pot{ display:flex; align-items:center; gap:7px; height:22px; color:var(--ink); font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; transition:opacity .3s; }
.pot.gone{ opacity:0; }
.pstack{ display:flex; }
.pstack{ display:flex; }
.pstack .chip + .chip{ margin-left:-6px; }
.pstack:empty{ display:none; }
.board{ display:flex; gap:6px; }
.board .card{ --w:var(--bw,52px); }
.slot{ width:var(--bw,52px); height:calc(var(--bw,52px) * 1.4); border-radius:calc(var(--bw,52px) * .08); border:1px dashed var(--line-strong); }
.msg{ min-height:1.4em; max-width:100%; color:var(--ink); font-size:13.5px; font-weight:500; line-height:1.45; text-align:center; white-space:pre-line; }
.fx{ position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; }
.fx > *{ position:absolute; left:0; top:0; }

/* ---------- chips (flat) ---------- */
.chip{ --cc:#B73A30; display:inline-block; flex:none; width:14px; height:14px; border-radius:50%; background:var(--cc);
  box-shadow:inset 0 0 0 2px var(--cc), inset 0 0 0 3px rgba(255,255,255,.85); }
.chip.r{ --cc:#C23B30; } .chip.g{ --cc:#2E8B63; } .chip.b{ --cc:#3A68C4; } .chip.k{ --cc:#D8D8D8; } .chip.y{ --cc:#E9E4D4; }
.pot .chip, .bet .chip{ box-shadow:inset 0 0 0 2px var(--cc), inset 0 0 0 3px rgba(255,255,255,.85), 0 0 0 1.5px var(--bg); }
.st .chip{ width:9px; height:9px; margin-right:5px; vertical-align:.02em; box-shadow:inset 0 0 0 1.5px var(--cc), inset 0 0 0 2.2px rgba(255,255,255,.8); }
.plbl{ color:var(--muted); font-weight:500; }

/* ---------- cards (flat) ---------- */
.card{ --w:44px; position:relative; flex:none; width:var(--w); height:calc(var(--w) * 1.4); border-radius:calc(var(--w) * .08);
  background:#fff; color:var(--c,#111); font-family:"Geist",system-ui,sans-serif; transition:transform .2s, opacity .2s; }
.card.sp{ --c:var(--sp); } .card.he{ --c:var(--he); } .card.di{ --c:var(--di); } .card.cl{ --c:var(--cl); }
.card .r{ position:absolute; top:8%; left:11%; font-size:calc(var(--w) * .42); font-weight:600; line-height:.9; letter-spacing:-.06em; }
.card .ss{ position:absolute; left:12%; top:calc(13% + var(--w) * .4); font-size:calc(var(--w) * .3); line-height:1; }
.card .r, .card .ss{ font-variant-emoji:text; }
.card.back{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px), #26352F; box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 3px #26352F, inset 0 0 0 3.5px rgba(255,255,255,.25); }
.card.ph{ background:transparent; box-shadow:none; border:1.5px dashed var(--line-strong); }
.card.ph::after{ display:none; }
.card.hl{ transform:translateY(-6px); box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--good); }
.card.dim{ opacity:.32; }
.hero-cards .card.hl{ box-shadow:0 0 0 2px var(--good); }
.card.deal{ animation:deal .3s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--d,0ms); }
.card.flip{ animation:flip .36s ease-out both; animation-delay:var(--d,0ms); }
@keyframes deal{ from{ opacity:0; transform:translateY(-14px); } }
@keyframes flip{ from{ transform:perspective(300px) rotateY(90deg); } }

/* ---------- seats: top row ---------- */
.players{ flex:none; display:flex; align-items:flex-start; gap:4px; padding:14px 12px 10px; border-bottom:1px solid var(--line); }
.seat{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; transition:opacity .25s; }
.occ{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; }
.ava{ position:relative; width:40px; height:40px; border-radius:50%; background:var(--avbg,#777); color:#fff; display:grid; place-items:center;
  font-size:15px; font-weight:600; line-height:1; }
.ring{ position:absolute; inset:-5px; border-radius:50%; opacity:0; transition:opacity .2s;
  background:conic-gradient(var(--ink) calc(var(--p,1) * 360deg), var(--line) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.seat.turn .ring{ opacity:1; }
.seat.turn.bot .ring{ background:conic-gradient(var(--ink) 0 28%, var(--line) 0); animation:spin 1s linear infinite; }
.ring.urgent{ background:conic-gradient(var(--bad) calc(var(--p,1) * 360deg), var(--line) 0); }
@keyframes spin{ to{ transform:rotate(1turn); } }
.pos{ position:absolute; top:-5px; left:-13px; z-index:2; min-width:26px; padding:1px 4px; border-radius:4px; background:var(--bg); color:var(--muted);
  box-shadow:0 0 0 1px var(--line-strong); font-size:9px; font-weight:600; letter-spacing:.04em; text-align:center; }
.pos.btn{ background:var(--ink); color:#000; box-shadow:none; }
.tag{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; padding:1px 5px; border-radius:4px; background:var(--ink); color:#000;
  font-size:9.5px; font-weight:600; white-space:nowrap; }
.info{ width:100%; margin-top:7px; text-align:center; }
.nm{ font-size:11.5px; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nm.act{ color:var(--ink); font-weight:600; }
.st{ font-size:13.5px; font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mini{ display:flex; gap:3px; height:37px; margin-top:7px; }
.mini .card{ --w:26px; }
.mini .card.back{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 2.5px #26352F, inset 0 0 0 3px rgba(255,255,255,.25); }
.mini .card .r{ font-size:calc(var(--w) * .46); top:9%; left:13%; }
.mini .card .ss{ font-size:calc(var(--w) * .36); top:calc(14% + var(--w) * .44); left:14%; }
.mini .card.hl{ transform:translateY(-3px); box-shadow:0 0 0 1.5px var(--good); }
.bet{ display:flex; align-items:center; justify-content:center; gap:4px; height:18px; margin-top:5px; color:var(--ink); font-size:12px; font-weight:600;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.bet.hide{ visibility:hidden; }
.seat.folded .occ, .seat.away .occ{ opacity:.35; }
.seat.win .ava{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--good); }
.seat.win .st, .seat.win .nm.act{ color:var(--good); }
.empty{ display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; padding:0; border:0; background:none; font-size:11.5px; font-weight:500; color:var(--muted); }
.empty i{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:18px; font-weight:300; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong); }
.empty:disabled{ cursor:default; }
.empty:disabled i{ box-shadow:inset 0 0 0 1px var(--line); color:transparent; }
.empty:not(:disabled):active i{ transform:scale(.94); }

/* your own seat, shown above your cards */
.me-slot{ flex:none; padding:10px 18px 0; }
.seat.me{ flex-direction:row; align-items:center; }
.seat.me .occ{ flex-direction:row; align-items:center; gap:12px; width:auto; }
.seat.me .ava{ width:36px; height:36px; font-size:14px; }
.seat.me .pos{ top:-4px; left:-10px; }
.seat.me .info{ margin:0; text-align:left; width:auto; }
.seat.me .mini{ display:none; }
.seat.me .bet{ margin:0 0 0 auto; height:auto; font-size:13px; }

/* ---------- hero ---------- */
.hero{ flex:none; display:flex; align-items:center; gap:16px; min-height:96px; padding:10px 18px 12px; }
.hero-cards{ display:flex; gap:6px; }
.hero-cards .card{ --w:60px; }
.hero-info{ flex:1; min-width:0; }
.hand-name{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; font-size:15.5px; line-height:1.3; }
.hand-name b{ font-weight:600; }
.hand-name small{ font-size:13px; color:var(--muted); }
.eq{ margin-top:4px; }
.eq-top{ display:flex; align-items:baseline; gap:8px; }
.eq-num{ font-size:28px; font-weight:600; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.eq-cap{ font-size:12.5px; color:var(--muted); }
.gauge{ position:relative; height:4px; margin:9px 0 8px; border-radius:2px; background:var(--surface-2); }
.fill{ position:absolute; left:0; top:0; bottom:0; border-radius:2px; background:var(--ink); transition:width .35s ease, background .2s; }
.fill.good{ background:var(--good); } .fill.bad{ background:var(--bad); }
.need{ position:absolute; top:-5px; bottom:-5px; width:2px; border-radius:1px; background:var(--ink); box-shadow:0 0 0 2px var(--bg); }
.eq-note{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.tag2{ font-size:12.5px; font-weight:600; }
.tag2.good{ color:var(--good); }
.tag2.bad{ color:var(--bad); }
.result{ margin-top:4px; display:flex; align-items:baseline; gap:8px; }
.res-num{ font-size:28px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.res-num.up{ color:var(--good); } .res-num.down{ color:var(--bad); }
.result span{ font-size:12.5px; color:var(--muted); }

/* ---------- controls ---------- */
.controls{ flex:none; position:relative; padding:10px 14px 14px; background:var(--bg); border-top:1px solid var(--line); }
.timebar{ position:absolute; left:0; right:0; top:-1px; height:3px; overflow:hidden; opacity:0; transition:opacity .2s; }
.timebar.on{ opacity:1; }
.timebar i{ display:block; height:100%; width:100%; background:var(--ink); transform-origin:left; }
.timebar.urgent i{ background:var(--bad); }
.upper{ height:72px; display:flex; flex-direction:column; justify-content:center; }
.presets{ display:flex; gap:6px; }
.presets button{ flex:1; height:32px; border:1px solid var(--line); border-radius:7px; background:var(--bg); font-size:12.5px; font-weight:500; }
.presets button:active{ background:var(--surface); }
.slider{ -webkit-appearance:none; appearance:none; width:100%; height:28px; margin:6px 0 0; background:transparent; }
.slider::-webkit-slider-runnable-track{ height:2px; border-radius:2px; background:var(--line-strong); }
.slider::-moz-range-track{ height:2px; border-radius:2px; background:var(--line-strong); }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-10px; border-radius:50%; background:var(--ink); border:0; }
.slider::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--ink); border:0; }
.status{ text-align:center; font-size:14px; line-height:1.45; color:var(--muted); padding:0 8px; }
.btns{ display:grid; grid-template-columns:1fr 1.3fr 1.3fr; gap:8px; }
.btns.one{ grid-template-columns:1fr; }
.b.fold{ background:var(--bg); border:1px solid var(--line-strong); }
.b.call{ background:var(--bg); border:1.5px solid var(--ink); }
.b.raise{ background:var(--ink); color:#000; }
.btns.one .b.primary{ background:var(--ink); color:#000; }
.b.call:disabled, .b.fold:disabled{ opacity:.3; }

/* ---------- sheet ---------- */
.sheet-wrap{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.6); }
.sheet{ width:100%; max-width:600px; max-height:90%; overflow:auto; background:var(--surface); border:1px solid var(--line-strong); border-bottom:0; border-radius:20px 20px 0 0;
  padding:20px 20px calc(26px + env(safe-area-inset-bottom,0px)); }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; }
.sheet h2{ margin:0; font-size:22px; font-weight:600; letter-spacing:-.03em; }
.sheet h3{ margin:26px 0 6px; font-size:13px; font-weight:500; color:var(--muted); }
.x{ height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); font-size:13.5px; font-weight:500; }
.room{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding:14px 16px; border-radius:10px; border:1px solid var(--line); }
.room span{ display:block; font-size:12.5px; color:var(--muted); }
.room b{ font-size:26px; font-weight:600; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.plist{ list-style:none; margin:0; padding:0; }
.plist li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.plist li:first-child{ border-top:0; }
.plist .pa{ width:34px; height:34px; border-radius:50%; background:var(--avbg); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:600; flex:none; }
.plist .pm{ flex:1; min-width:0; }
.plist .pm b{ font-weight:600; }
.plist .pm small{ display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.plist .ps{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.plist .kick{ height:30px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:var(--bg); font-size:12.5px; font-weight:500; }
.hostrow, .leave{ display:flex; gap:8px; margin-top:12px; }
.hostrow .b, .leave .b{ flex:1; }
.hostrow .b.ghost, .leave .b.ghost, .rename .b.ghost{ background:var(--bg); border:1px solid var(--line-strong); }
.note{ font-size:13px; line-height:1.65; color:var(--muted); margin:10px 0 0; }
.row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:15px; }
.row.col{ flex-direction:column; align-items:stretch; gap:10px; }
.rename{ display:flex; gap:8px; }
.rename input{ height:44px; font-size:16px; }
.rename .b{ flex:none; white-space:nowrap; height:44px; }
.switch{ width:46px; height:28px; border-radius:99px; border:0; background:var(--surface-2); position:relative; flex:none; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.switch[aria-checked="true"]{ background:var(--good); }
.switch[aria-checked="true"]::after{ transform:translateX(18px); }

.toast{ position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:60; max-width:88%;
  padding:11px 16px; border-radius:8px; background:var(--ink); color:#000; font-size:14px; font-weight:600; }

@media (max-width:360px){
  .players{ padding-left:8px; padding-right:8px; gap:2px; }
  .ava{ width:36px; height:36px; font-size:14px; }
  .mini .card{ --w:23px; }
  .hero-cards .card{ --w:54px; }
}
@media (prefers-reduced-motion: reduce){
  .card.deal, .card.flip, .seat.turn.bot .ring{ animation:none; }
  .card, .fill{ transition:none; }
}

/* language toggles */
.lang-float{ position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); right:16px; z-index:5; }
.seg{ display:flex; padding:3px; border-radius:9px; background:var(--bg); border:1px solid var(--line-strong); }
.seg button{ height:28px; padding:0 12px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:13px; font-weight:500; }
.seg button[aria-checked="true"]{ background:var(--ink); color:#000; }