:root {
  --bg: #0c0e13;
  --bg-2: #12151d;
  --panel: #161a24;
  --panel-2: #1d2230;
  --line: #272d3d;
  --text: #e7eaf0;
  --muted: #8b93a7;
  --gold: #d8b46a;
  --gold-soft: #b9974f;
  --green: #3ddc84;
  --red: #ff5a6a;
  --blue: #4aa3ff;
  --accent: #6c8cff;
  --felt: #14463a;
  --felt-2: #0e3329;
  --card-back: #243056;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, #1b1c20 0%, var(--bg) 60%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* shown only on phones (set in the phone media query below) */
.phone-only { display: none; }

/* nav buttons carry an icon + a text label; desktop shows text, phones show icon */
.btn-ic { display: none; align-items: center; }
.btn-ic svg { display: block; }
.btn-tx { display: inline; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* account for mobile browser chrome */
  max-width: 1920px;
  margin: 0 auto;
  padding: 10px 16px 14px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  gap: 8px;
}

/* content = play column (table + dock) beside the always-visible chart */
.content {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 12px;
}
.play-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chart-col {
  flex: 0 0 560px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (max-width: 1180px) {
  .content { flex-direction: column; }
  .chart-col { flex: 0 0 auto; max-height: 46vh; }
}

/* top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
  flex-wrap: wrap;
}
/* Shared brand/logo — gold rounded-square spade + wordmark. Used by the topbar,
   the landing nav/footer and the auth overlay. Never underlined (it's an <a>). */
.brand {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.topbar .brand { transform: translateY(-8px); } /* desktop: visually center with the navbar (reset on mobile) */
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: radial-gradient(120% 120% at 30% 20%, #20222a, #0e0f12);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); font-size: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 45%, transparent);
}
.topbar-info { display: flex; gap: 8px; flex: 1; justify-content: center; }
.pill {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.pill b { color: var(--text); }
.pill.phase { color: var(--gold); min-width: 74px; text-align: center; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.auto { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.auto input { accent-color: var(--gold); }

.btn {
  font-family: inherit;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none; /* so <a class="btn"> links (e.g. the calculator nav CTA) aren't underlined */
  transition: transform 0.05s ease, filter 0.15s ease, background 0.15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%);
  color: #1a1406;
  border-color: var(--gold-soft);
}

/* inline confirm for destructive actions (replaces the trigger in place) */
.confirm-inline {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: transparent; border: none; border-radius: 8px; padding: 0;
}
/* siblings hidden while a sibling-collapsing confirm is open (see confirm.js) */
.confirm-hidden { display: none !important; }
.confirm-q { font-size: 12px; font-weight: 700; color: var(--text); }
.confirm-yes, .confirm-no {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; line-height: 1.5;
}
.confirm-yes { background: var(--red); color: #fff; border-color: var(--red); }
.confirm-no { background: var(--panel); color: var(--muted); }
.confirm-yes:hover, .confirm-no:hover { filter: brightness(1.12); }

/* stage */
.stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.table-mount { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.status-banner {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 14, 19, 0.85);
  border: 1px solid var(--line);
  color: var(--gold);
  padding: 7px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
  min-height: 0;
  white-space: nowrap;
}
.status-banner:empty { display: none; }

/* showdown overlay: names the winning hand on the felt at showdown */
.showdown-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 14, 19, 0.92);
  border: 1px solid var(--gold);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  color: var(--gold);
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  animation: showdown-pop 0.22s ease-out;
}
.showdown-banner[hidden] { display: none; }
@keyframes showdown-pop {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* dock */
.dock {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .dock { grid-template-columns: 1fr; }
}

/* ---- phone-first tier ---- */
@media (max-width: 640px) {
  .app { padding: 8px 10px 10px; gap: 6px; }
  .phone-only { display: inline-flex; }

  /* topbar: ONE row — compact brand + icon-only action buttons */
  .topbar { gap: 6px; padding: 4px 2px; flex-wrap: nowrap; }
  .brand { font-size: 16px; flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; gap: 7px; }
  .topbar .brand { transform: none; }
  .brand-mark { width: 26px; height: 26px; font-size: 14px; }
  .topbar-info { display: none; }                              /* drop hand#/blinds/depth/table/phase pills */
  #user-chip, #new-hand, .auto { display: none !important; }    /* drop email + New Hand + Auto-deal */
  .topbar-actions { gap: 6px; flex-wrap: nowrap; }
  .topbar-actions .btn { padding: 8px; min-width: 40px; justify-content: center; }
  .btn-ic { display: inline-flex; }
  .btn-tx { display: none; }
  /* trainer (play) page on mobile: drop Logout to keep the icon topbar tight
     (still available on the dashboard). */
  body.play-mode #logout-btn { display: none; }

  /* 100vh fold: navbar + table + betting fill the screen; coach (#hud) and then
     the docked chart (#chart-col) — both moved by placeHud to sit after .play-col
     — overflow below and are reached by scrolling. (The "Chart" button still opens
     the full heatmap overlay.) */
  .app { overflow: hidden; }                                   /* clip to 100dvh */
  .content { overflow-y: auto; gap: 8px; }                      /* the scroll area = 100dvh - navbar */
  .play-col { min-height: 100%; }                               /* stage + betting fill the first screen */
  .stage { flex: 1 1 auto; min-height: 0; }
  #controls { flex: 0 0 auto; }
  #hud { flex: 0 0 auto; }

  /* docked chart below the coach: stacked (info card over hands), self-sized so it
     grows the scroll page; the hands list keeps an internal cap for long buckets. */
  .chart-col { display: flex; flex: 0 0 auto; max-height: none; overflow: visible; }
  .chart-split { flex-direction: column; }
  .chart-single { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--line); overflow: visible; padding: 14px; }
  .chart-hands .hands-body { max-height: 44vh; }
  .chart-head { padding: 10px 12px 8px; }
  .hs-cat { font-size: 18px; }
  .hs-num { font-size: 18px; }
  .hs-stat { padding: 9px 5px; }

  .status-banner { font-size: 13px; padding: 6px 14px; white-space: normal; max-width: 92vw; text-align: center;
    transform: translate(-50%, 12px); }  /* nudge down so it clears the hero seat on mobile */
  .showdown-banner { font-size: 13px; padding: 6px 14px; white-space: normal; max-width: 92vw; text-align: center; }
}

/* larger tap targets on touch devices */
@media (pointer: coarse) {
  .btn { min-height: 42px; }
}

/* ---- cookie / analytics consent banner (shared across SPA + legal pages) ---- */
.consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  animation: consent-rise 0.2s ease-out;
}
@keyframes consent-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.consent-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
}
.consent-copy { flex: 1 1 340px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.consent-copy strong { color: var(--text); font-weight: 600; }
.consent-copy a { color: var(--gold); text-decoration: underline; }
.consent-custom { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.consent-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--text); cursor: pointer; }
/* iOS-style toggle switch (the native checkbox is kept for state, visually hidden) */
.consent-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; }
.consent-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.consent-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line); border: 1px solid var(--line); transition: background 0.15s ease, border-color 0.15s ease; }
.consent-slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.15s ease, background 0.15s ease; }
.consent-switch input:checked + .consent-slider { background: var(--gold); border-color: var(--gold); }
.consent-switch input:checked + .consent-slider::before { transform: translateX(16px); background: #1a1205; }
.consent-switch input:focus-visible + .consent-slider { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent-necessary { opacity: 0.8; }
.consent-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.consent-btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); transition: filter 0.15s ease, transform 0.05s ease;
}
.consent-btn:active { transform: translateY(1px); }
.consent-ghost { background: var(--panel-2); color: var(--text); }
.consent-ghost:hover { filter: brightness(1.15); }
.consent-primary { background: var(--gold); color: #1a1205; border-color: var(--gold); }
.consent-primary:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
  .consent-actions { width: 100%; margin-left: 0; }
  .consent-btn { flex: 1 1 auto; min-height: 40px; }
}