/* River on the web — the iPhone app's felt-table look (Theme.swift colours). */
:root {
  --felt-light: #1F5E49;
  --felt: #1A5240;
  --felt-deep: #0D2A21;
  --felt-panel: #14573F;
  --ink: #EAF2EC;
  --muted: #A9C2B4;
  --brass: #E2B04A;
  --brass-ink: #2A1D04;
  --gold: #F0CE82;
  --good: #4CC17E;
  --warn: #F0B34A;
  --bad: #EA6A5E;
  --panel: rgba(0, 0, 0, 0.28);
  --panel-stroke: rgba(255, 255, 255, 0.12);
  --chip: rgba(255, 255, 255, 0.14);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 0%, var(--felt-light), var(--felt) 45%, var(--felt-deep));
  background-attachment: fixed;
  background-color: var(--felt-deep);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { cursor: default; opacity: 0.45; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 10px; }

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom));
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.gold { color: var(--gold); }
.small { font-size: 14px; font-weight: 500; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Top bar: ‹ Back   Title   [buttons] */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr); column-gap: 6px; align-items: center;
  min-height: 56px; margin: 0 -16px 8px; padding: 0 12px;
  background: linear-gradient(var(--felt-light) 70%, transparent);
}
.topbar h1 { margin: 0; font-size: clamp(16px, 4.6vw, 18px); font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .left { justify-self: start; }
.topbar .right { justify-self: end; display: flex; gap: 6px; }
.back { display: flex; align-items: center; gap: 3px; min-height: 44px; min-width: 44px; color: var(--brass); font-size: 16px; font-weight: 700; }
.back::before { content: "‹"; font-size: 26px; line-height: 1; margin-top: -3px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); display: grid; place-items: center;
}
.icon-btn svg { width: 20px; height: 20px; }
.pill-btn { height: 44px; padding: 0 14px; border-radius: 22px; background: rgba(255, 255, 255, 0.12); font-size: 16px; font-weight: 700; }

/* Panels */
.panel {
  background: var(--panel); border: 1px solid var(--panel-stroke);
  border-radius: 18px; padding: 14px;
}
.panel.hi { background: rgba(226, 176, 74, 0.10); border-color: rgba(226, 176, 74, 0.55); }
.section-label { margin: 10px 4px 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.section-foot { margin: 6px 4px 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.display { font-size: 22px; font-weight: 800; line-height: 1.2; }
.display.big { font-size: 26px; }

/* Buttons */
.brass, .brass2 {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: 14px;
  font-size: 18px; font-weight: 800;
}
.brass { background: var(--brass); color: var(--brass-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.brass:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.brass2 { background: rgba(226, 176, 74, 0.14); color: var(--gold); border: 1.5px solid rgba(226, 176, 74, 0.5); font-size: 17px; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }
.text-btn { color: var(--brass); font-weight: 700; font-size: 15px; min-height: 44px; }

/* Home */
.hero { display: flex; align-items: center; gap: 14px; padding: 18px 2px 6px; }
.hero img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.hero h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.1; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-stroke);
}
.choice.main { background: var(--brass); color: var(--brass-ink); border-color: transparent; }
.choice.main .sub { color: rgba(42, 29, 4, 0.75); }
.choice .title { font-size: 20px; font-weight: 800; }
.choice .sub { font-size: 15px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.choice .badge { font-size: 26px; width: 40px; text-align: center; }
.choice.soon { opacity: 0.6; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: var(--muted); }

/* Resume card */
.resume { display: flex; align-items: center; gap: 12px; background: var(--felt-panel); border-radius: 18px; padding: 14px; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.resume .brass { width: 104px; min-height: 50px; flex: none; font-size: 17px; }

/* Avatars */
.avatar {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  color: #1b1b1b; font-weight: 800;
}

/* Setup */
.list { background: var(--panel); border: 1px solid var(--panel-stroke); border-radius: 18px; overflow: hidden; }
.list > .item { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 12px; }
.list > .item + .item { border-top: 1px solid var(--panel-stroke); }
.item .name { font-size: 17px; font-weight: 700; }
.deals-first { flex: none; font-size: 13px; font-weight: 800; color: var(--brass-ink); background: var(--brass); border-radius: 999px; padding: 3px 8px; }
.mini { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.10); display: grid; place-items: center; font-size: 16px; color: var(--ink); flex: none; }
.add-row input {
  flex: 1; min-width: 0; min-height: 44px; background: transparent; border: 0; outline: none;
  font-size: 17px; font-weight: 500;
}
.add-row input::placeholder { color: var(--muted); }
.add-btn { flex: none; padding: 0 16px; min-height: 40px; border-radius: 20px; background: var(--brass); color: var(--brass-ink); font-weight: 800; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; background: var(--chip); font-size: 16px; font-weight: 700;
}
.chip[aria-pressed="true"] { background: var(--brass); color: var(--brass-ink); }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 56px; }
.switch { flex: none; width: 52px; height: 32px; border-radius: 16px; background: rgba(255, 255, 255, 0.22); position: relative; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.switch[aria-checked="true"] { background: var(--brass); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Game: number entry */
.entry-head { display: flex; align-items: baseline; gap: 8px; }
.entry-head .display { color: var(--gold); flex: 1; min-width: 0; }
.seg { display: flex; background: rgba(255, 255, 255, 0.10); border-radius: 10px; padding: 3px; }
.seg button { flex: 1; min-height: 38px; border-radius: 8px; font-weight: 700; color: var(--muted); }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.85); color: var(--felt-deep); }
.numbers { display: grid; grid-template-columns: repeat(4, 68px); gap: 10px; }
.numbers button {
  width: 68px; height: 64px; border-radius: 14px; background: rgba(255, 255, 255, 0.16);
  font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; position: relative;
}
.numbers button[aria-pressed="true"] { background: var(--brass); color: var(--brass-ink); }
.numbers button.blocked::after { content: "⃠"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 52px; color: var(--bad); opacity: 0.8; }
.problem { display: flex; gap: 6px; color: var(--warn); font-size: 15px; font-weight: 600; }
.problem::before { content: "⚠"; }

/* Game: players in bidding order */
.prow-head, .prow { display: grid; grid-template-columns: 1fr 46px 50px 56px; align-items: center; padding: 0 8px; }
.prow-head { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.prow-head > :nth-child(n+2), .prow > :nth-child(n+2) { text-align: center; }
.prow-head > :last-child, .prow > :last-child { text-align: right; }
.prow {
  width: 100%; min-height: 50px; margin-top: 4px; border-radius: 10px; text-align: left;
  background: rgba(255, 255, 255, 0.04); border: 2px solid transparent; font-size: 18px;
}
.prow.on { background: rgba(226, 176, 74, 0.18); border-color: var(--brass); }
.prow .who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 17px; font-weight: 700; }
.dealer-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brass); color: var(--brass-ink); font-size: 12px; font-weight: 900; display: grid; place-items: center; }

/* Score sheet */
.sheet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
table.sheet { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
.sheet th, .sheet td { text-align: center; padding: 0; height: 46px; }
.sheet .lab { width: 34px; }
.sheet thead th { font-size: 14px; font-weight: 700; height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.sheet .tot td { padding-bottom: 8px; }
.sheet .tot span { display: inline-block; min-width: 44px; padding: 6px 4px; border-radius: 10px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sheet .tot .lead { background: var(--brass); color: var(--brass-ink); }
.sheet tr.now { background: rgba(255, 255, 255, 0.10); }
.sheet tr.now td:first-child { border-radius: 10px 0 0 10px; }
.sheet tr.now td:last-child { border-radius: 0 10px 10px 0; }
.sheet tr.fixable { cursor: pointer; }
.sheet tr.fixable:active { background: rgba(255, 255, 255, 0.08); }
.sheet .rnd { font-size: 14px; line-height: 1.1; color: var(--muted); font-variant-numeric: tabular-nums; }
.sheet .rnd b { display: block; font-weight: 700; }
.sheet tr.now .rnd b { color: var(--gold); }
.cell { font-size: 14px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cell .bt { color: var(--muted); font-weight: 700; }
.cell .pts { font-size: 15px; font-weight: 700; }
.ok { color: var(--good); }
.no { color: var(--bad); }

/* Standings */
.stand { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.stand.first { background: rgba(240, 206, 130, 0.12); }
.stand .place { width: 40px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.stand.first .place, .stand.first .score { color: var(--gold); }
.stand .score { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Past games */
.past { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.10); }
.empty { text-align: center; color: var(--muted); font-size: 17px; font-weight: 500; padding: 60px 24px; }

/* Modal (confirm, fix a round, how-to) */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.sheet-modal {
  width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  background: var(--felt-deep); border-radius: 22px 22px 0 0; border: 1px solid var(--panel-stroke);
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  animation: up 0.22s ease-out;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-modal h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.sheet-modal p { margin: 0 0 12px; color: var(--muted); font-weight: 500; line-height: 1.4; }
.danger { background: rgba(234, 106, 94, 0.18); color: #ffb3aa; border: 1.5px solid rgba(234, 106, 94, 0.6); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: 20px; font-weight: 800; }
.stepper output { width: 34px; text-align: center; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.howto ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink); font-weight: 500; line-height: 1.45; }
.howto li { margin-bottom: 4px; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--brass); color: var(--brass-ink); padding: 10px 16px; border-radius: 999px; font-weight: 800; z-index: 30;
}
.noscript { padding: 24px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.sheet-modal:focus { outline: none; }

/* ---------- Play together ---------- */
.conn { text-align: center; padding: 8px 12px; border-radius: 12px; background: rgba(240, 179, 74, 0.18); color: var(--warn); font-size: 15px; font-weight: 700; }
.code-in { text-transform: uppercase; letter-spacing: 0.3em; font-weight: 800 !important; }
.codebox { text-align: center; }
.codebox .code { font-size: 46px; font-weight: 900; letter-spacing: 0.18em; color: var(--gold); margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.bot { flex: none; font-size: 14px; }
.log { font-size: 14px; font-weight: 500; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.log div:first-child { color: var(--ink); }

/* Cards: white, red for hearts and diamonds */
.card {
  flex: none; width: 46px; height: 66px; border-radius: 8px; background: #FBF8F1; color: #1d1d1d;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 0, 0, 0.15);
}
.card.red { color: #C8322A; }
.card .r { font-size: 21px; font-weight: 800; }
.card .s { font-size: 22px; margin-top: 2px; }
.card.sm { width: 32px; height: 46px; border-radius: 6px; }
.card.sm .r { font-size: 15px; } .card.sm .s { font-size: 15px; }
.hand { display: flex; flex-wrap: wrap; gap: 6px; }
.hand.live .card:not(.no) { box-shadow: 0 0 0 2px var(--brass), 0 3px 6px rgba(0, 0, 0, 0.4); }
.hand .card.no { opacity: 0.38; }
.hand button.card:active:not(.no) { transform: translateY(-4px); }
.trump { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--gold); }
.trick .tcards { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.trick.old .tcards { opacity: 0.6; }
.empty-trick { text-align: center; font-size: 15px; }
.tplay { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tplay.win { color: var(--gold); }
.tplay.win .card { box-shadow: 0 0 0 3px var(--brass), 0 3px 6px rgba(0, 0, 0, 0.4); }