:root {
  /* ---- 8.3 token layer (new) ---- */
  /* The smallest text anywhere (build 24, R-036): 11 px. */
  --text-micro: 0.6875rem;
  --card-w: 76px;
  --card-h: 108px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 50%;
  --z-base: 1;
  --z-zone: 10;
  --z-hand: 100;
  --z-chat: 150;
  --z-panel: 200;
  --z-chrome: 250;
  --z-overlay: 300;
  --z-toast: 1000;
  --z-banner: 1100;
  /* Motion (render/motion.js uses the same curves): strong ease-out for
     things arriving or answering a tap, ease-in-out for moves on screen. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --team-ns: #f0b44a;
  --team-ew: #62d2cb;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Phase 1 clearance model — measured live by public/clearance.js, which
     writes these on :root (inline, so it wins). These are pre-JS fallbacks. */
  --hand-h: 140px;
  --chat-h: 0px;
  --chrome-h: 0px;
  /* ---- existing tokens (values unchanged; card tokens alias the new names) ---- */
  --card-width: var(--card-w);
  --card-height: var(--card-h);
  --card-small-width: 50px;
  --card-small-height: 75px;
  --red: #c62828;
  --black: #1b1b1b;
  --bg: #0f261a;
  --bg-2: #14301f;
  --table: #1c5234;
  --felt: #1f5c3a;
  --felt-edge: #123823;
  --panel: #10241a;
  --panel-2: #173024;
  --panel-border: rgba(255, 255, 255, 0.09);
  --gold: #e3b54a;
  --gold-strong: #f0c65e;
  --text: #eef3ef;
  --text-dim: #a8bcae;
  --border: rgba(255, 255, 255, 0.12);
  --good: #6fcf8e;
  --bad: #ef7d6f;
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Sleek modern scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(218, 165, 32, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(218, 165, 32, 0.75);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 165, 32, 0.4) rgba(0, 0, 0, 0.2);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2) 0%, var(--bg) 60%) fixed;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

/* App Shell — persistent DOM slots */
#phase-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Single owner of the bottom-rail clearance; --hand-h is measured by
     public/clearance.js and includes the chat dock when it is open. */
  padding-bottom: calc(var(--hand-h) + var(--space-4));
}
/* At the table the felt itself ends at the hand rail (.game-table's
   height), so the extra 16 px only made the page 16 px taller than the
   window: it scrolled by 16 at every size (B24 pass 2 N-012). */
body.at-table #phase-root { padding-bottom: var(--hand-h); }

/* Bottom rail: #hand-slot is fixed to the viewport bottom. The chat and
   The chat slot holds a floating sheet (chat.css) and take no layout space,
   so --chat-h stays 0. Clearance model: public/clearance.js. */
#chat-slot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  z-index: var(--z-chat);
}

/* The hand bar itself is a static block inside this fixed slot. */
#hand-slot {
  position: fixed;
  bottom: var(--chat-h, 0px);
  left: 0;
  right: 0;
  z-index: var(--z-hand);
}

/* Top rail (score bar + toolbar). Height is measured by public/clearance.js
   and published as --chrome-h. */
.top-chrome {
  flex-shrink: 0;
}

/* ≤1024px: keep the score bar + toolbar pinned while the game content scrolls.
   z-index 250 beats .trick-area (200) and stays below overlays (300) / toasts. */
@media (max-width: 1024px) {
  .top-chrome {
    position: sticky;
    top: 0;
    z-index: var(--z-chrome);
  }
}

/* ---- Top bar: scores, hand context, menu ---- */
.score-bar.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  /* Keep the bar clear of the top inset (notch/status bar) in standalone PWA. */
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: rgba(6, 18, 12, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-border);
}

.score-pills {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}

.score-pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 4px;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  padding: 6px 12px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  min-width: 0;
  max-width: 260px;
}

.score-pill.is-mine {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.pill-names {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pill-score {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pill-end { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.pill-downs { display: inline-flex; align-items: center; gap: 3px; color: var(--text-dim); font-size: var(--text-micro, 0.6875rem); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.pill-downs-label { margin-right: 1px; }
.pill-pip { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.pill-pip.is-used { background: var(--gold); border-color: var(--gold); }
.pill-downs.has-used { color: var(--gold); }

.pill-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.pill-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: currentColor;
  transition: width 0.6s var(--ease-out);
}

.score-pill.team-ns { color: var(--team-ns); }
.score-pill.team-ew { color: var(--team-ew); }
.score-pill .pill-score { color: var(--text); }

.hand-context {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.ctx-chip {
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-border);
  white-space: nowrap;
  color: var(--text-dim);
}

.ctx-chip b { color: var(--text); }
.ctx-chip.is-quiet { opacity: 0.8; }

.trump-glyph {
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  color: #fff;
  vertical-align: -1px;
}

.trump-glyph.suit-H,
.trump-glyph.suit-D { color: #ff8a80; }

body.four-color-deck .trump-glyph.suit-C { color: #7ee08f; }
body.four-color-deck .trump-glyph.suit-D { color: #82b8ff; }

/* The club where a suit is drawn small (build 28, ISSUES row 89; suit-mark.js):
   the deck's own bolder trefoil, in the text's color and size. A 0.95em box whose
   ink is 0.87em wide and 0.81em tall (the font's club is 0.77 by 0.77), its foot
   a hair below the baseline as the font's glyph sits. The glyph itself stays in
   the markup as hidden text, so the words around it copy and search as before.
   The margins make the mark take 0.91em along the line, which is what the
   system font's club took, so a row of chips (a five-card run at 375 px, where
   the row has no room to spare) wraps exactly where it did. The ink is inset
   0.038em in the box, so the 0.02em overhang of the box holds no ink. */
.club-mark {
  position: relative;
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin: 0 -0.02em;
  vertical-align: -0.11em;
  flex: none;
}
.club-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.club-mark-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  /* A 1px glyph in a 1px box: it takes no room and overflows nothing. */
  font-size: 1px;
  line-height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.top-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  position: relative;
  flex-shrink: 0;
}

.icon-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.icon-btn.menu-btn { font-size: 1.1rem; }

.top-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-overlay);
  min-width: 200px;
  padding: 6px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.top-menu[hidden] { display: none; }

.menu-item {
  text-align: left;
  padding: 10px 12px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
}

.menu-item:hover { background: rgba(255, 255, 255, 0.07); }
.menu-item.is-danger { color: var(--bad); }

/* Teach Me toggle (landing / lobby) */
.teach-toggle {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  margin-left: 8px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  min-height: 44px;
  min-width: 44px;
}

.teach-toggle.active {
  background: var(--gold);
  color: #111;
}

.score-ns { color: var(--team-ns); }
.score-ew { color: var(--team-ew); }

/* Game Content */
.game-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Shared dialog pieces */
.dialog-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 14px;
}

.dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dialog-actions.is-centered { justify-content: center; }

/* ========== MOBILE RESPONSIVE (extracted per-component from the style.css mega-block) ========== */
@media (max-width: 600px), (max-height: 500px) {
  :root {
    --card-w: 58px;
    --card-h: 84px;
    --card-width: 58px;
    --card-height: 84px;
    --card-small-width: 40px;
    --card-small-height: 58px;
    /* Fallback only — clearance.js measures the real mobile bar. */
    --hand-h: 100px;
  }
  .score-bar.top-bar {
    gap: 6px;
    padding: 6px 8px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    flex-wrap: wrap;
  }
  .score-pills { flex: 1 1 100%; order: 1; }
  .score-pill { flex: 1 1 0; padding: 4px 8px 5px; }
  .pill-names { font-size: 0.72rem; }
  .pill-score { font-size: 1rem; }
  .pill-downs-label { display: none; }
  .pill-end { gap: 6px; }
  .hand-context { order: 2; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
  .ctx-chip { font-size: 0.74rem; padding: 3px 8px; }
  .top-actions { order: 3; }
  .icon-btn { min-height: 44px; padding: 0 9px; font-size: 0.78rem; }
  /* Fix #6: Teach toggle compact */
  .teach-toggle {
    font-size: var(--text-micro, 0.6875rem);
    padding: 1px 8px;
  }
}

/* Anyone who asked their device for less motion gets no looping or sliding
   animations anywhere (a few components also switch theirs off by name). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Easy view (Settings, as in the app): larger text everywhere, and the hand
   in two rows of bigger cards (see the decks' .hand-two-rows). */
body.easy-view { font-size: 112%; }
body.easy-view .hand.hand-two-rows {
  --card-width: calc(var(--card-w) * 1.4);
  --card-height: calc(var(--card-h) * 1.4);
}