/* Blackjack — table styling.
   Dark felt throughout; the app is played on phones in a room with the lights
   on, so contrast is pushed harder than a desktop design would need. */

:root {
  --felt: #0b3d2e;
  --felt-dark: #072a20;
  --felt-light: #12513c;
  --line: rgba(255, 255, 255, 0.14);
  --text: #f2f6f3;
  --muted: #9fb5ab;
  --gold: #e8c46a;
  --red: #d94b4b;
  --green: #58c07a;
  --card-face: #fbfaf6;
  --card-ink: #16202a;
  --radius: 14px;
  /* Safari paints native form controls light unless it is told the page is
     dark; without this the name and code inputs come out black-on-black. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only display:none by way of the UA stylesheet, so
   any class rule that sets `display` silently beats it — `.sheet { display:
   flex }` did exactly that in 0.1.0 and left the leaderboard and log overlays
   permanently on top of the table, swallowing every tap meant for the game.
   Stating it here, with !important, makes `hidden` mean hidden no matter what
   a later rule does. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  /* 100dvh, not 100vh: on mobile Safari and Chrome, 100vh is the viewport with
     the browser chrome *retracted*, so the action bar sits under the toolbar
     until you scroll. dvh tracks the visible viewport. 100% first as a fallback
     for anything that does not know dvh. */
  height: 100%;
  height: 100dvh;
  /* Only the felt scrolls. Without this the whole page can be dragged around
     on a phone, which fights the felt's own scrolling. */
  overflow: hidden;
  background: var(--felt-dark);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Stops the whole page rubber-banding on iOS when a sheet is scrolled. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  touch-action: manipulation;              /* kills the 300ms double-tap zoom delay */
  -webkit-tap-highlight-color: transparent; /* no grey flash on every tap */
}

.screen { display: none; height: 100%; height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* ------------------------------------------------------------- join screen */

#screen-join {
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 90% at 50% 0%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
}

.join-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.brand {
  margin: 0;
  font-size: 42px;
  letter-spacing: -0.5px;
  font-weight: 800;
}
.brand span { color: var(--gold); }

.tagline { margin: -6px 0 8px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field > span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }

input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 17px;              /* < 16px makes iOS Safari zoom the page on focus */
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
input[type="text"]:focus { border-color: var(--gold); }

.code-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-weight: 700;
  text-align: center;
  font-size: 22px;
}

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.join-row { display: flex; gap: 10px; }

/* ------------------------------------------------------------------ buttons */

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.06s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.big { padding: 15px 20px; font-size: 17px; }
.btn.primary { background: var(--gold); color: #241d09; border-color: transparent; }
.btn.danger { color: var(--red); }
.btn.icon { padding: 10px 12px; font-size: 16px; line-height: 1; }
.btn.link { background: none; border: none; color: var(--muted); text-decoration: underline; }

.join-links { display: flex; align-items: center; justify-content: center; gap: 18px; }

.error { color: var(--red); margin: 0; min-height: 1.2em; font-size: 14px; }
.version { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ------------------------------------------------------------ table screen */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: var(--felt-dark);
  border-bottom: 1px solid var(--line);
}

.code-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.code-chip small { font-size: 9px; color: var(--muted); letter-spacing: 1.4px; }
.code-chip strong { font-size: 19px; letter-spacing: 3px; color: var(--gold); }

.topbar-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--muted); }
.topbar-actions { display: flex; gap: 6px; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.dot.off { background: var(--red); }

.felt {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 12px 8px;
  background: radial-gradient(120% 70% at 50% 0%, var(--felt-light) 0%, var(--felt) 55%, var(--felt-dark) 100%);
}

.dealer {
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.seat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.seat-name { font-weight: 700; }
.hand-label {
  font-size: 13px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* -------------------------------------------------------------- table mode */

.mode-row {
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
}

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input {
  /* accent-color is enough here — a hand-built toggle would be more markup than
     the control deserves, and the native checkbox is already 44px-tappable with
     the padding below. */
  width: 22px;
  height: 22px;
  accent-color: var(--gold);
  flex: none;
}
.switch span { font-weight: 600; }
.switch input:disabled + span { opacity: 0.75; }

.mode-note { margin: 6px 0 0 32px; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------- cards */

.cards { display: flex; gap: 5px; flex-wrap: wrap; min-height: clamp(54px, 16.5vw, 74px); }

.card {
  /* Scales with the screen so a five-card hand still fits one row on a small
     phone, without becoming comically large on a desktop. */
  width: clamp(38px, 11.5vw, 50px);
  height: clamp(54px, 16.5vw, 72px);
  border-radius: 7px;
  background: var(--card-face);
  color: var(--card-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  /* Each card animates in as it arrives, which is the only feedback that a
     hit landed on a table where somebody else is acting. */
  animation: deal 0.22s ease-out;
}
.card .rank { font-size: clamp(15px, 4.6vw, 20px); }
.card .suit { font-size: clamp(13px, 4vw, 17px); margin-top: 2px; }
.card.red { color: var(--red); }
.card.back {
  background: repeating-linear-gradient(45deg, #7b1c1c 0 6px, #601515 6px 12px);
  border: 2px solid var(--card-face);
  color: transparent;
}

@keyframes deal {
  from { opacity: 0; transform: translateY(-14px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  .btn:active { transform: none; }
}

/* ------------------------------------------------------------------- seats */

.seats { display: flex; flex-direction: column; gap: 10px; }

.seat {
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line);
}
.seat.you { border-color: var(--gold); background: rgba(232, 196, 106, 0.09); }
.seat.turn { box-shadow: 0 0 0 2px var(--gold); }
.seat.gone { opacity: 0.5; }
.seat .cards { min-height: 0; }

.seat-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--muted); }

.badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
}
.badge.lead { background: var(--gold); color: #241d09; }
.badge.win { background: var(--green); color: #06280f; }
.badge.lose { background: var(--red); color: #2a0808; }
.badge.push { background: #5d7f9a; color: #04141f; }
.badge.bust { background: var(--red); color: #2a0808; }
.badge.bj { background: #fff; color: #111; }

.score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.delta { font-variant-numeric: tabular-nums; font-weight: 700; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }

.banner {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  text-align: center;
  font-weight: 700;
  background: rgba(232, 196, 106, 0.14);
  border: 1px solid rgba(232, 196, 106, 0.4);
  color: var(--gold);
}

/* ------------------------------------------------------- your hand (pinned) */

.you-panel {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(232, 196, 106, 0.10), rgba(0, 0, 0, 0.28));
  border-top: 1px solid rgba(232, 196, 106, 0.35);
}
.you-panel.turn { box-shadow: inset 0 2px 0 var(--gold); }
.you-panel .cards { min-height: 0; }
.you-panel .seat-head { margin-bottom: 6px; }
.you-panel .score { margin-left: auto; font-size: 13px; }
.you-badges { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- turn bar */

.turn-bar { height: 4px; background: rgba(0, 0, 0, 0.4); }
.turn-fill { height: 100%; width: 100%; background: var(--gold); transition: width 0.25s linear; }
.turn-fill.urgent { background: var(--red); }

/* ---------------------------------------------------------------- actions */

.actions {
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  background: var(--felt-dark);
  border-top: 1px solid var(--line);
}
.hint { text-align: center; color: var(--muted); font-size: 13px; min-height: 1.3em; margin-bottom: 8px; }
.action-row { display: flex; gap: 10px; }
.action-row .btn { flex: 1; }

/* ---------------------------------------------------------------- overlays */

.sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  z-index: 40;
}
.sheet-inner {
  width: 100%;
  max-height: 78dvh;
  overflow-y: auto;
  /* Stops a flick at the end of the list scrolling the table underneath. */
  overscroll-behavior: contain;
  background: var(--felt);
  border-radius: 18px 18px 0 0;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-head h2 { margin: 0; font-size: 18px; }

.log-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.log-list li { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.log-list li.round { color: var(--gold); font-weight: 700; }

.board-wrap { overflow-x: auto; }
.board { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.board th, .board td { padding: 7px 8px; text-align: right; white-space: nowrap; }
.board th:nth-child(2), .board td:nth-child(2) { text-align: left; width: 100%; }
.board thead th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--line); }
.board tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 50;
}

/* A phone on its side leaves very little height, so give the vertical space
   back: smaller cards, tighter padding, and the hint line dropped entirely. */
@media (max-height: 500px) and (orientation: landscape) {
  .card { width: clamp(32px, 6vw, 44px); height: clamp(46px, 8.5vw, 62px); }
  .cards { min-height: 0; }
  .felt { padding: 8px 12px 4px; }
  .dealer { padding: 8px 10px; margin-bottom: 8px; }
  .you-panel { padding: 6px 12px; }
  .hint { display: none; }
  .actions { padding: 6px 12px max(6px, env(safe-area-inset-bottom)); }
  .btn.big { padding: 10px 16px; font-size: 15px; }
  .seats { flex-direction: row; flex-wrap: wrap; }
  .seat { flex: 1 1 200px; }
}

/* Wider screens get the seats side by side; the table reads much better as a
   row when there is room for one. */
@media (min-width: 720px) {
  .seats { flex-direction: row; flex-wrap: wrap; }
  .seat { flex: 1 1 220px; }
  .felt { padding: 22px 20px 12px; }
}