/* Murrigan — touch-first dark design system.
   Primary target: 10" Android tablet (≈1280×800 CSS px), then phones. */

:root {
  --bg: #0c1310;
  --bg-2: #111a16;
  --surface: #16211c;
  --surface-2: #1d2a24;
  --surface-3: #26362f;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .14);
  --text: #eef3ef;
  --text-2: #b9c6bf;
  --muted: #7f9088;
  --good: #3ecf8e;
  --bad: #ff6b6b;
  --warn: #f5c542;
  --joker: #8b6cff;

  --amerikano: #f08a24;
  --kanasta: #3b9ae1;
  --ttr: #e0483a;
  --poker: #d4b05a;

  --accent: #3ecf8e;
  --accent-soft: rgba(62, 207, 142, .14);
  --accent-line: rgba(62, 207, 142, .45);
  --accent-ink: #06150e;

  --radius: 18px;
  --radius-sm: 12px;
  --tap: 52px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

body[data-game="amerikano"] { --accent: var(--amerikano); --accent-soft: rgba(240, 138, 36, .15); --accent-line: rgba(240, 138, 36, .5); --accent-ink: #1b0e02; }
body[data-game="kanasta"]   { --accent: var(--kanasta);   --accent-soft: rgba(59, 154, 225, .15); --accent-line: rgba(59, 154, 225, .5); --accent-ink: #03111c; }
body[data-game="ttr"]       { --accent: var(--ttr);       --accent-soft: rgba(224, 72, 58, .15);  --accent-line: rgba(224, 72, 58, .5);  --accent-ink: #fff; }
body[data-game="poker"]     { --accent: var(--poker);     --accent-soft: rgba(212, 176, 90, .15); --accent-line: rgba(212, 176, 90, .5); --accent-ink: #171204; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
@media (min-width: 900px) { html { font-size: 17px; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(62, 207, 142, .07), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, var(--accent-soft), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font: 400 1rem/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.display { font-family: var(--display); }
.muted { color: var(--muted); }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Top bar ─────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  min-height: 68px;
  padding: .6rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
  background: rgba(12, 19, 16, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .title { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; }
.topbar h1 {
  margin: 0; font: 700 1.75rem/1 var(--display); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .game-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; }
.topbar .actions { display: flex; gap: .5rem; align-items: center; }

.icon-btn {
  width: var(--tap); height: var(--tap); flex: none;
  display: inline-grid; place-items: center;
  border-radius: 16px; border: 1px solid var(--line-2);
  background: var(--surface); font-size: 1.35rem; line-height: 1;
  transition: transform .08s, background .15s;
}
.icon-btn:active { transform: scale(.94); background: var(--surface-2); }
.icon-btn svg { width: 24px; height: 24px; }

.sync-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.sync-dot.on { background: var(--good); box-shadow: 0 0 0 4px rgba(62, 207, 142, .18); }
.sync-dot.off { background: var(--bad); }

/* ── Layout ──────────────────────────────────────────────── */

.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.card-head { display: flex; align-items: center; gap: .75rem; margin: -.15rem 0 .85rem; }
.card-title {
  margin: 0; flex: 1;
  font: 700 .78rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  min-height: var(--tap);
  padding: 0 1.2rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 16px; border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: transform .08s, background .15s, opacity .15s;
}
.btn:active { transform: scale(.98); background: var(--surface-3); }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.btn-primary:active { background: var(--accent); filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-danger { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .35); color: var(--bad); }
.btn-lg { min-height: 64px; font-size: 1.15rem; border-radius: 20px; padding: 0 1.5rem; }
.btn-sm { min-height: 40px; padding: 0 .9rem; border-radius: 12px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .38; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: 0 .9rem;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface-2); font-weight: 600; font-size: .92rem;
}

/* Segmented control */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; }
.seg button { min-height: 46px; border: 0; border-radius: 12px; background: transparent; font-weight: 600; color: var(--text-2); }
.seg button.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Toggle switch row */
.toggle { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .4rem .2rem; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .sw { width: 52px; height: 32px; border-radius: 99px; background: var(--surface-3); position: relative; flex: none; transition: background .2s; }
.toggle .sw::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #dfe7e2; transition: transform .2s; }
.toggle input:checked + .sw { background: var(--accent); }
.toggle input:checked + .sw::after { transform: translateX(20px); background: #fff; }
.toggle .lbl { flex: 1; font-weight: 500; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.input {
  width: 100%; min-height: 56px; padding: 0 1rem;
  border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg-2);
  font-size: 1.1rem; outline: none;
}
.input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.input.code { text-align: center; font: 700 2.2rem/1 var(--display); letter-spacing: .4em; text-transform: uppercase; padding-left: 1.4rem; }

/* ── Avatars ─────────────────────────────────────────────── */

.avatar {
  --c: var(--muted);
  width: 40px; height: 40px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--c); color: #0b120f;
  font: 700 1.2rem/1 var(--display); text-transform: uppercase;
}
.avatar.lg { width: 64px; height: 64px; font-size: 2rem; }
.avatar.sm { width: 30px; height: 30px; font-size: .95rem; }
.pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-2);
}
.badge.g-amerikano { background: rgba(240, 138, 36, .18); color: #ffb26b; }
.badge.g-kanasta { background: rgba(59, 154, 225, .18); color: #8cc8f5; }
.badge.g-ttr { background: rgba(224, 72, 58, .2); color: #ff9a8f; }
.badge.g-poker { background: rgba(212, 176, 90, .2); color: #ecd28f; }
.badge.dealer { background: var(--accent); color: var(--accent-ink); }

/* ── Hero: current round + dealer ───────────────────────── */

.hero {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem;
  border-radius: 22px;
  background: linear-gradient(120deg, var(--accent-soft), rgba(255, 255, 255, .02) 70%), var(--surface);
  border: 1px solid var(--accent-line);
}
.hero-round { min-width: 0; }
.hero-label { font: 700 .78rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hero-num { font: 700 3.4rem/1 var(--display); margin-top: .2rem; }
.hero-num small { font-size: 1.6rem; color: var(--muted); font-weight: 600; }
.hero-name { font: 700 1.7rem/1.1 var(--display); margin-top: .15rem; }
.hero-sub { color: var(--text-2); font-size: .92rem; margin-top: .3rem; }
.hero-dealer {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem 1.1rem .8rem .8rem; border-radius: 18px;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line-2);
}
.hero-dealer .who { font: 700 1.9rem/1 var(--display); }
.hero-dealer .next { font-size: .85rem; color: var(--muted); margin-top: .25rem; }
.hero-dealer button { all: unset; cursor: pointer; display: contents; }
.hero.done { border-color: rgba(62, 207, 142, .5); background: linear-gradient(120deg, rgba(62, 207, 142, .16), transparent 70%), var(--surface); }
.hero.done .hero-label { color: var(--good); }
@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; padding: .8rem .9rem; }
  .hero-num { font-size: 2.5rem; }
  .hero-num small { font-size: 1.2rem; }
  .hero-name { font-size: 1.3rem; }
  .hero-sub { font-size: .8rem; }
  .hero-dealer { flex-direction: column; gap: .35rem; padding: .55rem .7rem; text-align: center; }
  .hero-dealer .avatar.lg { width: 46px; height: 46px; font-size: 1.5rem; }
  .hero-dealer .who { font-size: 1.35rem; }
  .hero-dealer .next { font-size: .75rem; }
}

/* ── Round game layout ───────────────────────────────────── */

/* Single column (phones, portrait tablets): hero → entry → table.
   Landscape tablets: hero + table on the left, entry pinned on the right. */
.game-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.game-main { display: contents; }
#hero { order: 1; }
.game-side { order: 2; min-width: 0; }
#board { order: 3; }
@media (min-width: 1000px) and (orientation: landscape) {
  .game-grid { grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr); align-items: start; }
  .game-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
  .game-side { position: sticky; top: 80px; }
}

/* Score table */
.board { padding: .4rem .4rem .6rem; overflow-x: auto; }
table.score { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; table-layout: fixed; }
.score th {
  padding: .7rem .3rem .6rem; font-weight: 600; text-align: center; vertical-align: bottom;
  border-bottom: 1px solid var(--line-2);
}
.score th .ph { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; }
.score th .pname { max-width: 100%; font-size: .98rem; }
.score th.is-dealer .pname { color: var(--accent); }
.score th.rl { width: 34%; text-align: left; padding-left: .7rem; color: var(--muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.score td {
  padding: .72rem .3rem; text-align: center; font-size: 1.15rem;
  border-bottom: 1px solid var(--line);
}
.score td.rl { text-align: left; padding-left: .7rem; font-size: .92rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score td.rl b { color: var(--text); font-weight: 700; margin-right: .35rem; font-variant-numeric: tabular-nums; }
.score td.rl .dl { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: .4rem; border-radius: 50%; font: 700 .72rem/1 var(--display); color: #0b120f; vertical-align: 1px; }
.score tr.played td { cursor: pointer; }
.score tr.played:active td { background: var(--surface-2); }
.score tr.editing td { background: rgba(74, 163, 255, .14); }
.score tr.current td { background: var(--accent-soft); }
.score tr.current td.rl { color: var(--text); font-weight: 600; }
.score tr.future td { color: var(--muted); }
.score tr.future td.rl { opacity: .7; }
.score tr.fresh td { animation: fresh 1.6s ease-out; }
@keyframes fresh { from { background: var(--accent-line); } to { background: transparent; } }
.score sup { font-size: .62em; margin-left: 1px; }
.score tfoot td { border-bottom: 0; padding: .65rem .3rem; }
.score tfoot tr.tot td { font: 700 1.75rem/1 var(--display); border-top: 2px solid var(--line-2); }
.score tfoot tr.pay td { font-size: .9rem; font-weight: 600; padding-top: 0; }
.score .medal { font-size: .8em; }
@media (max-width: 640px) {
  .score td { font-size: 1rem; padding: .6rem .15rem; }
  .score th.rl { width: 30%; }
  .score td.rl { font-size: .82rem; padding-left: .4rem; }
  .score tfoot tr.tot td { font-size: 1.4rem; }
}

.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; position: relative; }
.progress > i { position: absolute; inset: 0 auto 0 0; background: var(--c, var(--accent)); border-radius: 99px; transition: width .4s; }

/* Entry panel */
.entry { display: flex; flex-direction: column; gap: .8rem; }
.entry-head { display: flex; align-items: center; gap: .6rem; }
.entry-head h2 { margin: 0; flex: 1; font: 700 1.45rem/1.1 var(--display); }
.entry-body { display: grid; gap: .8rem; }
@media (min-width: 700px) and (orientation: portrait), (min-width: 700px) and (max-width: 999px) {
  .entry-body { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

.erows { display: flex; flex-direction: column; gap: .5rem; }
.erow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .65rem;
  min-height: 62px; padding: .45rem .6rem .45rem .55rem;
  border-radius: 16px; border: 2px solid transparent;
  background: var(--surface-2);
  cursor: pointer;
}
.erow.sel { border-color: var(--accent); background: var(--accent-soft); }
.erow .info { min-width: 0; }
.erow .info .pname { display: block; font-size: 1.02rem; }
.erow .info .meta { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.erow .info .meta .res { color: var(--text-2); font-weight: 600; }
.erow .val { font: 700 2rem/1 var(--display); min-width: 3.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.erow .val.empty { color: var(--muted); opacity: .5; }
.erow .val.caret::after { content: ''; display: inline-block; width: 2px; height: .8em; margin-left: 2px; background: var(--accent); vertical-align: -1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.flags { display: flex; gap: .35rem; }
.flag {
  min-width: 46px; height: 44px; padding: 0 .5rem;
  border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-3);
  font-size: .95rem; font-weight: 700; line-height: 1;
}
.flag.on-joker { background: var(--joker); border-color: transparent; color: #fff; }
.flag.on-mistake { background: var(--bad); border-color: transparent; color: #fff; }
.flag.finish { font-size: .82rem; color: var(--text-2); }
@media (max-width: 480px) {
  .erow { gap: .4rem; padding: .35rem .45rem; min-height: 56px; }
  .erow > .avatar { width: 30px; height: 30px; font-size: .95rem; }
  .erow .info .pname { font-size: .95rem; }
  .erow .info .meta { font-size: .72rem; }
  .erow .info .badge { display: none; }
  .flags { gap: .25rem; }
  .flag { min-width: 36px; height: 40px; padding: 0 .25rem; font-size: .85rem; }
  .flag.finish { font-size: .72rem; }
  .erow .val { font-size: 1.6rem; min-width: 2.6ch; }
}

.numpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.key {
  height: 62px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface-2);
  font: 600 1.85rem/1 var(--display);
  transition: transform .06s, background .12s;
}
.key:active { transform: scale(.96); background: var(--surface-3); }
.key.fn { font-size: 1.35rem; color: var(--text-2); }
.key.next { grid-row: span 2; height: auto; font: 600 1rem/1.3 var(--font); background: var(--surface-3); }
.key.zero { grid-column: span 3; }
@media (min-width: 1000px) and (orientation: landscape) and (max-height: 820px) {
  .key { height: 54px; }
  .erow { min-height: 56px; }
}
@media (max-width: 480px) { .key { height: 56px; } }

.joker-note { color: var(--joker); font-weight: 700; font-size: .95rem; }

/* Results / standings */
.standings { display: flex; flex-direction: column; gap: .5rem; }
.stand {
  display: grid; grid-template-columns: 2.2rem auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: 16px; background: var(--surface-2);
}
.stand .rk { font: 700 1.5rem/1 var(--display); text-align: center; color: var(--muted); }
.stand .pts { font: 700 1.6rem/1 var(--display); text-align: right; }
.stand .amt { font-size: .85rem; font-weight: 600; text-align: right; }
.stand.first { background: linear-gradient(90deg, rgba(245, 197, 66, .18), var(--surface-2)); }

/* ── Sheets, toasts ──────────────────────────────────────── */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .58);
  opacity: 0; transition: opacity .2s;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 26px 26px 0 0;
  padding: 1.3rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));
  transform: translateY(30px); transition: transform .22s ease-out;
  overscroll-behavior: contain;
}
.sheet.wide { max-width: 860px; }
.sheet-backdrop.open .sheet { transform: none; }
@media (min-width: 700px) {
  .sheet-backdrop { align-items: center; padding: 1.5rem; }
  .sheet { border-radius: 26px; }
}
.sheet-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.sheet-head h2 { margin: 0; flex: 1; font: 700 1.8rem/1.1 var(--display); }
.sheet-head p { margin: .3rem 0 0; color: var(--text-2); }
.sheet-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.sheet-actions .btn { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 200;
  max-width: calc(100% - 2rem);
  transform: translate(-50%, 160%);
  padding: .9rem 1.3rem; border-radius: 16px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  font-weight: 600; box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
  transition: transform .25s ease-out; pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); }

/* ── Home ────────────────────────────────────────────────── */

.home-grid { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .home-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  --tc: var(--surface-3);
  position: relative; overflow: hidden;
  min-height: 132px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  border: 0; border-radius: 22px; color: #fff;
  background: linear-gradient(155deg, var(--tc), rgba(0, 0, 0, .35) 160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .1s;
}
.tile:active { transform: scale(.97); }
.tile .t-icon { position: absolute; top: .55rem; right: .9rem; font-size: 2.6rem; opacity: .35; line-height: 1; }
.tile .t-name { font: 700 1.75rem/1 var(--display); }
.tile .t-sub { font-size: .82rem; opacity: .85; margin-top: .3rem; }
.tile.amerikano { --tc: #c96a14; }
.tile.kanasta { --tc: #2276b8; }
.tile.ttr { --tc: #b8342a; }
.tile.poker { --tc: #1f4a33; color: #f3dc9c; }
.tile.random { --tc: #4b3a8f; }

.live {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  border-color: var(--accent-line);
  background: linear-gradient(120deg, var(--accent-soft), transparent 70%), var(--surface);
}
.live .pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--good); margin-right: .45rem; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .6); } 100% { box-shadow: 0 0 0 12px rgba(62, 207, 142, 0); } }
.live h3 { margin: .3rem 0 .2rem; font: 700 1.8rem/1 var(--display); }
.live .mini { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .5rem; color: var(--text-2); font-size: .92rem; }

.lb-row {
  display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: .8rem; align-items: center;
  width: 100%; padding: .6rem .3rem; border: 0; background: none; text-align: left;
  border-bottom: 1px solid var(--line);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row .rk { font: 700 1.35rem/1 var(--display); color: var(--muted); text-align: center; }
.lb-row .rk.r1 { color: #f5c542; } .lb-row .rk.r2 { color: #c9d2d8; } .lb-row .rk.r3 { color: #d99a5b; }
.lb-row .sub { font-size: .8rem; color: var(--muted); }
.lb-row .bal { font: 700 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.bar { height: 4px; border-radius: 99px; background: var(--surface-3); margin-top: .35rem; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; }

.records { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.rec { padding: .75rem .85rem; border-radius: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: .3rem; }
.rec .rl { font-size: .8rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.rec .rv { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.rec .rv b { font-weight: 700; }
.rec .rv span { font: 700 1.3rem/1 var(--display); }
.records-sub { margin: 1.1rem 0 .6rem; font: 700 .72rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.records-sub:first-child { margin-top: 0; }
.rec.shame { background: rgba(255, 107, 107, .08); }

.hist-item { border-bottom: 1px solid var(--line); }
.hist-item:last-child { border-bottom: 0; }
.hist-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; width: 100%; padding: .7rem .2rem; background: none; border: 0; text-align: left; }
.hist-row .when { font-size: .8rem; color: var(--muted); }
.hist-row .res { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .9rem; }
.hist-detail { padding: 0 .2rem .9rem; }
.hist-detail table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.hist-detail th, .hist-detail td { padding: .35rem .3rem; text-align: center; border-bottom: 1px solid var(--line); }
.hist-detail th:first-child, .hist-detail td:first-child { text-align: left; color: var(--muted); }

.pchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pchip { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 .4rem 0 .45rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; }
.pchip .x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; }
.pchip .x:active { background: var(--surface-3); color: var(--bad); }

/* Player picker (start game) */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
.pick {
  position: relative; display: flex; align-items: center; gap: .6rem;
  min-height: 60px; padding: .4rem .8rem .4rem .5rem;
  border-radius: 16px; border: 2px solid var(--line-2); background: var(--surface-2);
  font-weight: 600; text-align: left;
}
.pick.on { border-color: var(--accent); background: var(--accent-soft); }
.pick .n {
  position: absolute; top: -9px; right: -7px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 700 1rem/1 var(--display);
  box-shadow: 0 0 0 3px var(--bg-2);
}
.seat-order { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 46px; padding: .5rem .7rem; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line-2); color: var(--text-2); font-size: .95rem; }
.seat-order b { color: var(--text); }

/* Landing */
.landing { max-width: 560px; margin: 0 auto; padding: 2rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.logo { display: block; width: 240px; max-width: 70%; margin: 0 auto .5rem; padding: .8rem 1.2rem; border-radius: 22px; background: #f1ebde; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.logo-chip { height: 46px; width: auto; padding: 4px 8px; border-radius: 12px; background: #f1ebde; flex: none; }

/* TV sheet */
.tv-url { font: 700 2rem/1.1 var(--display); letter-spacing: .02em; word-break: break-all; }
.tv-code { font: 700 3.2rem/1 var(--display); letter-spacing: .3em; color: var(--accent); }
.step { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; align-items: start; padding: .5rem 0; }
.step i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-weight: 700; }

/* Charts */
.chart svg { display: block; width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--text-2); margin-top: .5rem; }
.legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }

/* Profile */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .55rem; }
.stat { padding: .7rem .8rem; border-radius: 14px; background: var(--surface-2); }
.stat b { display: block; font: 700 1.6rem/1.1 var(--display); }
.stat span { font-size: .78rem; color: var(--muted); }

/* TTR */
.ptabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.ptab {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  min-height: 72px; padding: .55rem .8rem; border-radius: 16px;
  border: 2px solid transparent; background: var(--surface-2); text-align: left; min-width: 0;
}
.ptab .pname { max-width: 100%; }
.ptab .pt { font: 700 1.7rem/1 var(--display); }
.ptab.on { border-color: var(--c); background: rgba(255, 255, 255, .05); }
.ptab .stripe { width: 28px; height: 4px; border-radius: 4px; background: var(--c); }
.route-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5rem; gap: .8rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.route-row:last-child { border-bottom: 0; }
.route-len { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.cars { display: flex; gap: 3px; }
.cars i { width: 14px; height: 22px; border-radius: 4px; background: var(--c, var(--accent)); opacity: .9; }
.route-pts { color: var(--muted); font-size: .85rem; }
.route-sub { font: 700 1.4rem/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: .3rem; }
.stepper button { width: 54px; height: 54px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 1.6rem; font-weight: 600; }
.stepper button:active { background: var(--surface-3); transform: scale(.95); }
.stepper .v { min-width: 2.4ch; text-align: center; font: 700 1.9rem/1 var(--display); }
.tickets { display: flex; flex-wrap: wrap; gap: .5rem; }
.ticket {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 52px; padding: 0 .4rem 0 .9rem; border-radius: 14px;
  font: 700 1.35rem/1 var(--display); border: 2px solid;
}
.ticket.done { background: rgba(62, 207, 142, .14); border-color: rgba(62, 207, 142, .55); color: #8ff0c2; }
.ticket.fail { background: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .5); color: #ffb0b0; }
.ticket .x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .2); color: inherit; font-size: 1rem; }
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.num-grid button { height: 58px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font: 700 1.5rem/1 var(--display); }
.num-grid button:active { background: var(--surface-3); }

/* Poker */
.clock-wrap { text-align: center; padding: 1.5rem 1rem; }
.big-clock { font: 700 clamp(5rem, 16vw, 11rem)/.9 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.big-clock.urgent { color: var(--bad); animation: blinkSoft 1s infinite; }
.big-clock.paused { opacity: .45; }
@keyframes blinkSoft { 50% { opacity: .55; } }
.blinds { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.blind { text-align: center; padding: 1rem; border-radius: 18px; background: var(--surface-2); }
.blind .v { font: 700 3.2rem/1 var(--display); }
.blind .n { color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.kpi { text-align: center; padding: .9rem .5rem; border-radius: 18px; background: var(--surface-2); }
.kpi b { display: block; font: 700 2.2rem/1 var(--display); }
.kpi span { font-size: .78rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.sched { display: flex; flex-direction: column; }
.sched div { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .6rem; padding: .55rem .6rem; border-radius: 12px; font-variant-numeric: tabular-nums; }
.sched div.past { opacity: .4; }
.sched div.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.num-step { display: grid; grid-template-columns: 54px 1fr 54px; gap: .4rem; align-items: center; }
.num-step button { height: 54px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 1.5rem; }
.num-step input { text-align: center; font: 700 1.6rem/1 var(--display); min-height: 54px; }
/* Poker chips: a dashed edge in the text colour, like the stripes on a real chip */
.chip {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--chip); color: var(--chip-ink); border: 4px dashed var(--chip-ink);
  box-shadow: 0 0 0 2px var(--chip), 0 0 0 3px var(--line-2); font: 700 .8rem/1 var(--display); letter-spacing: -.02em;
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.1rem; }
.chips .chip { width: 54px; height: 54px; font-size: 1.05rem; }
.chip.long { font-size: .68rem; }
.chips .chip.long { font-size: .85rem; }
.chip-rows { display: flex; flex-direction: column; gap: .5rem; }
.chip-row { display: grid; grid-template-columns: 50px 1fr 6.5rem 48px; gap: .5rem; align-items: center; }
.chip-row > span { display: grid; place-items: center; }
.chip-row .input { min-height: 50px; }
.chip-row .input.num { text-align: center; font: 700 1.35rem/1 var(--display); padding: 0 .5rem; }
.entry .row .btn { padding: 0 .8rem; white-space: nowrap; }
.picker > p { grid-column: 1 / -1; }
@media (max-width: 480px) { .logo-chip { display: none; } }

/* Kanasta opening-meld requirement */
.meld { display: inline-block; padding: .1rem .45rem; border-radius: 7px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.meld.m90 { background: rgba(245, 197, 66, .18); color: var(--warn); }
.meld.m120 { background: rgba(255, 107, 107, .16); color: var(--bad); }
.erow .meta .meld { margin-left: .2rem; }

/* Music remote */
.pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--good); margin-right: .45rem; animation: pulse 1.6s infinite; }
.music-now { background: var(--surface); }
.stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.station { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 100px; padding: .55rem .4rem; border-radius: 16px; border: 2px solid var(--line-2); background: var(--surface-2); text-align: center; }
.station img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.station .st-name { font-weight: 700; font-size: .9rem; line-height: 1.15; }
.station .st-freq { font-size: .75rem; color: var(--muted); }
.station.on { border-color: var(--good); background: rgba(62, 207, 142, .12); }
.vol { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 99px; background: var(--surface-3); outline: none; }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--text); border: 4px solid var(--bg-2); box-shadow: 0 0 0 1px var(--line-2); }
.vol::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--text); border: 4px solid var(--bg-2); }
@media (max-width: 480px) {
  .topbar { gap: .45rem; padding-left: .6rem; padding-right: .6rem; }
  .topbar .actions { gap: .35rem; }
  .topbar .icon-btn { width: 44px; height: 44px; border-radius: 13px; font-size: 1.15rem; }
  .topbar h1 { font-size: 1.5rem; }
}

/* Kanasta round statistics (one sheet for all players) */
.ks-open { flex: none; }
.kstat { margin-left: .3rem; color: var(--text-2); white-space: nowrap; }
.sheet.ks-sheet { max-width: 1100px; }
.ks-head, .ks-row { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)) 72px; align-items: center; gap: .5rem; }
.ks-head { padding: 0 .3rem .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.ks-row { padding: .55rem .3rem; border-top: 1px solid var(--line); }
.ks-name { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 600; }
.ks-cell { display: flex; justify-content: center; }
.ks-step button { width: 48px; height: 48px; border-radius: 14px; font-size: 1.4rem; }
.ks-step button[disabled] { opacity: .3; }
.ks-step .v { min-width: 1.8ch; font-size: 1.6rem; }
.ks-out { width: 60px; height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 1.3rem; opacity: .55; }
.ks-out.on { background: var(--accent); border-color: transparent; opacity: 1; }
.ks-out-lbl { display: none; }
/* Phones: name + "went out" on the first line, the four counters two by two below */
@media (max-width: 760px) {
  .ks-head { display: none; }
  .ks-row { grid-template-columns: 1fr 1fr; gap: .35rem .6rem; padding: .7rem .2rem; }
  .ks-name { order: 0; }
  .ks-outcell { order: 1; justify-content: flex-end; }
  .ks-row > .ks-cell:not(.ks-outcell) { order: 2; flex-direction: column; align-items: flex-start; gap: .15rem; }
  .ks-row > .ks-cell:not(.ks-outcell)::before { content: attr(data-label); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .ks-out { width: auto; height: 44px; padding: 0 .8rem; font-size: 1rem; font-weight: 600; }
  .ks-out-lbl { display: inline; }
  .ks-step button { width: 44px; height: 44px; }
}

/* ── Light theme ("Bjart") ─────────────────────────────────
   Snow/marble white, Icelandic blue as the main colour and the red both flags share. */
html[data-theme="light"] {
  --bg: #f6f3ee;
  --bg-2: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f2eee8;
  --surface-3: #e6e0d6;
  --line: rgba(11, 31, 58, .09);
  --line-2: rgba(11, 31, 58, .17);
  --text: #0b1f3a;
  --text-2: #3a4a63;
  --muted: #6a7689;
  --good: #11815c;
  --bad: #c8102e;
  --warn: #a86a0c;
  --joker: #6a4bd6;
  --amerikano: #d4660a;
  --kanasta: #02529c;
  --ttr: #c8102e;
  --poker: #8a6a1c;
  --accent: #02529c;
  --accent-soft: rgba(2, 82, 156, .10);
  --accent-line: rgba(2, 82, 156, .40);
  --accent-ink: #ffffff;
  color-scheme: light;
}
html[data-theme="light"] body[data-game="amerikano"] { --accent: #d4660a; --accent-soft: rgba(212, 102, 10, .11); --accent-line: rgba(212, 102, 10, .45); --accent-ink: #fff; }
html[data-theme="light"] body[data-game="kanasta"] { --accent: #02529c; --accent-soft: rgba(2, 82, 156, .10); --accent-line: rgba(2, 82, 156, .42); --accent-ink: #fff; }
html[data-theme="light"] body[data-game="ttr"] { --accent: #c8102e; --accent-soft: rgba(200, 16, 46, .09); --accent-line: rgba(200, 16, 46, .40); --accent-ink: #fff; }
html[data-theme="light"] body[data-game="poker"] { --accent: #8a6a1c; --accent-soft: rgba(138, 106, 28, .12); --accent-line: rgba(138, 106, 28, .45); --accent-ink: #fff; }
html[data-theme="light"] body {
  background-image:
    radial-gradient(1100px 520px at 0% -10%, rgba(2, 82, 156, .09), transparent 60%),
    radial-gradient(900px 480px at 100% -5%, rgba(200, 16, 46, .07), transparent 60%);
}
html[data-theme="light"] .topbar { background: rgba(251, 250, 247, .92); border-bottom: 0; }
/* thin flag stripe under the top bar: Icelandic blue · white · red */
html[data-theme="light"] .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #02529c 0 46%, #ffffff 46% 49%, #c8102e 49% 100%); box-shadow: 0 1px 0 var(--line); }
html[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 6px 18px rgba(11, 31, 58, .04); }
html[data-theme="light"] .hero-dealer { background: rgba(11, 31, 58, .04); }
html[data-theme="light"] .toggle .sw::after { background: #fff; box-shadow: 0 1px 3px rgba(11, 31, 58, .3); }
html[data-theme="light"] .sheet-backdrop { background: rgba(11, 31, 58, .35); }
html[data-theme="light"] .sheet { box-shadow: 0 -10px 40px rgba(11, 31, 58, .15); }
html[data-theme="light"] .toast { background: #0b1f3a; color: #fff; border-color: transparent; }
html[data-theme="light"] .badge.g-amerikano { background: rgba(212, 102, 10, .12); color: #a14d05; }
html[data-theme="light"] .badge.g-kanasta { background: rgba(2, 82, 156, .10); color: #02529c; }
html[data-theme="light"] .badge.g-ttr { background: rgba(200, 16, 46, .10); color: #a50d26; }
html[data-theme="light"] .badge.g-poker { background: rgba(138, 106, 28, .14); color: #6e5414; }
html[data-theme="light"] .tile.kanasta { --tc: #02529c; }
html[data-theme="light"] .tile.ttr { --tc: #c8102e; }
html[data-theme="light"] .tile.random { background: linear-gradient(135deg, #02529c 0 50%, #c8102e 50% 100%); }
html[data-theme="light"] .lb-row .rk.r1 { color: #c18f00; }
html[data-theme="light"] .lb-row .rk.r2 { color: #8a96a3; }
html[data-theme="light"] .lb-row .rk.r3 { color: #ad6629; }
html[data-theme="light"] .logo { box-shadow: 0 8px 24px rgba(11, 31, 58, .14); }
html[data-theme="light"] .logo-chip { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-theme="light"] .ptab.on { background: rgba(11, 31, 58, .03); }
html[data-theme="light"] .ticket.done { color: #0f6e4e; }
html[data-theme="light"] .ticket.fail { color: #a50d26; }
html[data-theme="light"] .ticket .x { background: rgba(11, 31, 58, .08); }
html[data-theme="light"] .stand.first { background: linear-gradient(90deg, rgba(222, 170, 20, .2), var(--surface-2)); }