/* American Mahjong client.
 *
 * The design brief, in order of priority:
 *
 *   1. A 70-year-old can use it without being taught. Big targets, text
 *      labels on everything, layout that never moves, no timers anywhere.
 *   2. It looks like a good physical set on a table, not a casino. Warm
 *      surface, ivory tiles, restrained. Nothing here should read as gambling.
 *   3. The card is half the interface. Tiles are the other half. Both are
 *      always visible on a desktop or tablet; the card collapses on a phone,
 *      which is not the target anyway.
 *
 * Tiles are drawn in CSS rather than shipped as images: no asset licensing
 * question, they scale without blurring, and the tile size control is a single
 * custom property.
 */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-700.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400i.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/outfit-500.woff2?v=7947b61a32") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/outfit-700.woff2?v=7947b61a32") format("woff2"); }

:root {
  /* Starts larger than a games site would. The audience is sixty to a
     hundred, and a tile nobody can read is not a design choice. */
  --tile-scale: 1;   /* an area's own size for its tiles (the rack 1, a card line smaller) */
  --tile-back: #2f5fa8; --tile-back-deep: #1d3f7a;   /* the coloured back of an American set: blue unless the Backs setting says otherwise */
  --tile-size: 1;    /* the Size setting: multiplies every tile on the page */
  --ui: 1;           /* the same setting, for the words: the panel, the buttons, the middle of the table */
  /* The base size. The scale is applied in `.tile` rather than folded in
     here, because a custom property containing var() is resolved where it is
     declared - so computing the width at :root freezes it to the root scale
     and every override on a child silently does nothing. */
  /* Sized from the screen (Jeff, 10 Sep: "the table needs to scale with the size of the screen"): the rack's
     fourteen tiles fill the width beside the card panel, bounded by the height and by a largest size; the
     Tile size slider multiplies this. */
  --panel-w: clamp(270px, 24vw, 520px);   /* 270 leaves a 1280 wide screen room for fourteen tiles on one row */
  --tile-base-w: 58px;
  --tile-base-h: 81px;
  /* --fit is set by the page after every draw: the largest factor at which the whole board fits the window
     without scrolling (Jeff, 10 Sep: "I can't see the whole board"). */
  --fit: 1;
  --tile-face: #fdfbf5;
  --tile-edge: #d9d2c2;
  --tile-shadow: rgba(60, 45, 25, 0.28);

  /* The table (0026, 12 Sep): forest felt under a warm lamp, the room dark walnut around it, the rack wood.
     Brown, purple, navy and slate remain choices in the settings. */
  --surface: #2f5f3c;
  --surface-2: #2a231b;
  --cloth: #35693f;
  --wood: #7b4a27;
  --wood-2: #4e2e18;
  --wood-light: #a5703f;

  --ink: #232019;
  --ink-soft: #5c5445;
  --paper: #f6f1e6;
  --paper-2: #efe7d6;
  --line: #ded3bd;

  --bam: #1d6b3f;
  --crak: #a3242b;
  --dot: #1f4f86;
  --joker: #7a3d8f;

  /* Pip colours, kept separate from the suit colours used in text. A tile
     face is ink on ivory and wants a little more weight than a label does. */
  --pip-bam: #1a7a44;
  --pip-bam-alt: #15603a;
  --pip-crak: #b02a2f;
  --pip-dot: #1e5391;
  --pip-wind: #6b5636;
  --pip-flower: #2f8a52;
  --pip-flower-heart: #c8892a;
  --pip-joker: #7a3d8f;
  --muted-ink: #6f6656;

  /* A tile face is ivory in both themes, because a real one is. So the ink on
     it must not follow the page ink, which flips to near-white in dark mode -
     that would put pale glyphs on a pale tile and make every crak, wind and
     dragon invisible. These deliberately do not change between themes. */
  --tile-ink: #232019;
  --tile-muted-ink: #6f6656;

  --accent: #b8771f;
  --good: #1d6b3f;
  --warn: #a3242b;

  --radius: 10px;
  --gap: 12px;
  /* Atkinson Hyperlegible (Braille Institute, OFL): drawn so that b/d, 1/l/I and 0/O cannot be confused, for
     players who are sixty to a hundred; Outfit for the headline in the top bar and the site's titles. */
  --font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --tile-face: #ece6da;
    --tile-edge: #b9b1a0;
    --surface: #203f2a;
    --surface-2: #17120d;
    --cloth: #254a30;
    --wood: #5e3820;
    --wood-2: #3a2212;
    --wood-light: #86582f;
    --ink: #f2ece0;
    --ink-soft: #b9b1a0;
    --paper: #2a2219;
    --paper-2: #221b14;
    --line: #4a3d2e;
    --bam: #4fbb7f;
    --crak: #e8646a;
    --dot: #6ba3e0;
    --joker: #c288d8;
    --accent: #d9a463;
    --good: #4fbb7f;
    --warn: #e8646a;
  }
}

:root[data-theme="dark"] {
  --tile-face: #ece6da;
  --tile-edge: #b9b1a0;
  --surface: #203f2a;
  --surface-2: #17120d;
  --cloth: #254a30;
  --wood: #5e3820;
  --wood-2: #3a2212;
  --wood-light: #86582f;
  --ink: #f2ece0;
  --ink-soft: #b9b1a0;
  --paper: #2a2219;
  --paper-2: #221b14;
  --line: #4a3d2e;
  --bam: #4fbb7f;
  --crak: #e8646a;
  --dot: #6ba3e0;
  --joker: #c288d8;
  --accent: #d9a463;
  --good: #4fbb7f;
  --warn: #e8646a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  /* the room: dark walnut, lit from above the table */
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(255, 220, 160, 0.10), transparent 70%),
    var(--surface-2);
  font-size: 16px;
  line-height: 1.45;
}

button {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 18px;
  min-height: 48px;           /* generous target: tremor and arthritis are common */
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--paper-2); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, .tile:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
button.primary { background: var(--accent); color: #fff; border-color: transparent; }

/* --- layout --------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  /* the page is the height of the screen, never taller (Jeff, 14 Sep, on a 49 inch monitor: "i still cant
     see the whole page"): the middle of the table scrolls when it must; the rack and its buttons never leave
     the screen */
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
}

header {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 10px 16px;
}
header h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: 0.01em; }
header .spacer { flex: 1; }
header .bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
header .bar-row button { min-height: 40px; padding: 8px 14px; }
#settingsToggle[aria-expanded="true"] { background: var(--paper-2); }
header .meta { color: var(--ink-soft); font-size: 0.9rem; }

/* The settings: three groups, a label above every control, one look for every control (Jeff, 11 Sep:
   the row of bare browser controls "looks like 1990s"). */
/* one column, in the order a person thinks (Jeff, 13 Sep: "all over the place"): sets, the next hand, house rules folded, the look */
/* Settings sits over the table, not in place of it, and Done and Cancel are always on screen
   (Jeff, 16 Sep: "once you find settings (which is a PIA) how do you get out of them?") */
header .settings { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: rgba(12, 14, 11, 0.5); padding: 0; margin: 0; border: 0; max-width: none; }
.settings-sheet { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 64rem; margin: 24px auto 40px; background: var(--paper); border-radius: var(--radius); padding: 0 16px 16px; }
.settings-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 -16px; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.settings-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.01em; text-transform: none; color: var(--ink); }
.settings-head .spacer { flex: 1; }
.settings-head button { min-height: 40px; padding: 8px 16px; }
body.settings-open { overflow: hidden; }
.settings-sheet .lesson-back-bar { position: static; }
.settings .group h2 .twistie { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.settings .group h2 .twistie::before { content: ""; width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid var(--ink-soft); transition: transform 150ms; }
.settings .group h2 .twistie[aria-expanded="true"]::before { transform: rotate(90deg); }
.settings .field .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.settings .field .row input[type=text] { flex: 1 1 10rem; min-height: 40px; font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.settings .field .row button { min-height: 40px; }
.settings .sets .fields .field { flex: 1 1 18rem; }
header .settings[hidden] { display: none; }
.settings .group { background: var(--paper-2); border-radius: var(--radius); padding: 12px 14px 14px; }
.settings .group h2 { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.settings .fields { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.settings .field { display: flex; flex-direction: column; gap: 4px; min-width: 9rem; flex: 1 1 9rem; }
.settings .field.wide { flex-basis: 100%; }
.settings .house-rules { grid-column: 1 / -1; }
.settings .house-rules #houseRulesBody[hidden] { display: none; }
.settings .group h2 .fine { text-transform: none; letter-spacing: 0; margin-left: 0.5rem; font-weight: 400; }
.settings .house-rules .field { min-width: 13rem; }
.settings .house-rules .field span:first-child { font-size: 0.85rem; }
.settings .house-rules p.fine { margin: 10px 0 0; }
.settings .house-rules input[type=number] { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 40px; }
.settings .house-rules select.changed, .settings .house-rules input.changed { outline: 2px solid var(--accent); }
.settings .field > span:first-child { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.settings .select { position: relative; display: block; }
.settings .select select {
  width: 100%; appearance: none; -webkit-appearance: none; font: inherit; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 34px 9px 12px; min-height: 40px; cursor: pointer;
}
.settings .select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.settings .select select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.settings .check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; }
.settings .check input { width: 20px; height: 20px; accent-color: var(--accent); }
.settings .attest .buy { font-size: 0.85rem; color: var(--accent); margin-top: 2px; }
.settings .toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.settings button.toggle { min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 0.92rem; }
.settings button.toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.settings input[type=range] { width: 100%; min-height: 40px; accent-color: var(--accent); margin: 0; }
html[data-theme="dark"] .settings .select select, html[data-theme="dark"] .settings button.toggle { background: var(--paper); }

/* The felt. A table should look like a surface with things on it, not like a
   stack of boxes on a brown background - and the seats should sit around the
   discards the way people sit around a table, because that is the spatial
   sense a player already has and does not have to learn. */
.table {
  /* felt: a lamp above the centre, the weave of the cloth (two faint diagonal repeats), the shade at the rim */
  background:
    radial-gradient(75% 60% at 50% 22%, rgba(255, 235, 190, 0.16), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--surface), var(--cloth));
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 90px rgba(0, 0, 0, 0.32),
    0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow: auto;        /* only when even the rack alone is taller than the screen */
  scrollbar-gutter: stable;   /* while watching the table scrolls as one; its bar coming and going shook everything (10 Oct) */
}

/* Opponents sit where they actually sit. You are at the bottom, so the player
 * on your right is on the right, across is at the top, and left is on the
 * left. That is not decoration: the Charleston passes right, across and left,
 * and a player should be able to see where their tiles are going. */
.around {
  flex: 1;
  min-height: 0;
  overflow: auto;        /* on a small screen the middle scrolls; the rack stays put and full size */
  scrollbar-gutter: stable;   /* the scroll bar's room kept: a call offer made the ring scroll for a moment and the whole table shifted (10 Oct) */
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.6fr) minmax(180px, 0.85fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  grid-template-areas:
    ".    across ."
    "left centre right";
  gap: 10px;
  align-items: start;
}
.slot-across { grid-area: across; }
.slot-left   { grid-area: left; }
.slot-right  { grid-area: right; }
.slot-centre { grid-area: centre; align-self: stretch; }

.centre {
  height: 100%;
  border: 0;
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.centre h3 { margin: 0; font-size: 0.88rem; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.centre-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.centre #centre { cursor: zoom-in; }
.centre .empty { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }
.centre .latest { display: flex; align-items: center; gap: 10px; }
.centre .latest .who { color: #fff; font-weight: 700; font-size: 0.9rem; }

.panel {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 90px);
}

/* --- opponents ------------------------------------------------------------ */


/* A seat is a place at the table, not a card on a page: the name on a plate, the tiles on the felt. The
   plate lights up amber on the seat's turn. */
.seat {
  background: none;
  border: 0;
  padding: 2px 4px;
}
.seat.is-dead { opacity: 0.55; }

.seat-head {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: #fff; font-weight: 700; margin-bottom: 4px;
  padding: 4px 12px 4px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.seat.is-turn .seat-head { box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(224, 170, 85, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
.seat .direction {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem; font-weight: 600;
  margin: 0 0 2px 6px;
}
.seat-head .tag {
  font-weight: 600; font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.3); padding: 2px 8px; border-radius: 999px;
}
.seat-head .zoom-open { margin-left: auto; }
.opponents { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.opponents label { font-size: 0.85rem; display: inline-flex; gap: 4px; align-items: center; }
.zoom-open {
  font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.3);
}
.zoom-open:hover:not(:disabled) { background: rgba(255, 255, 255, 0.28); }
.seat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seat-row .label {
  color: rgba(255, 255, 255, 0.82); font-size: 0.84rem;
  min-width: 74px; font-weight: 600;
}

/* --- tiles ---------------------------------------------------------------- */

.tiles { display: flex; flex-wrap: wrap; gap: 5px; }

.tile {
  width: calc(var(--tile-base-w) * var(--tile-scale) * var(--tile-size) * var(--fit) * var(--zoom, 1));
  height: calc(var(--tile-base-h) * var(--tile-scale) * var(--tile-size) * var(--fit) * var(--zoom, 1));
  border: 0;
  padding: 0;
  border-radius: 7px;
  /* A tile is a block of ivory, not a card: a lit top edge, a shaded bottom edge and a soft fall-off keep it
     reading as an object at every size, and they live in the background so the states that replace the
     shadow (selected, ringed) leave the bevel alone. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 16%),
    linear-gradient(0deg, rgba(88, 66, 36, 0.30), rgba(88, 66, 36, 0) 11%),
    linear-gradient(90deg, rgba(88, 66, 36, 0.10), rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(88, 66, 36, 0.10)),
    radial-gradient(130% 95% at 50% 18%, #fffdf7 0%, var(--tile-face) 55%, var(--tile-edge) 135%);
  box-shadow: 0 2px 0 var(--tile-shadow), 0 4px 8px rgba(30, 24, 12, 0.28);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  cursor: default;
  position: relative;
  user-select: none;
}
.tile.small { --tile-scale: 0.62; }

/* The drawn face fills the tile. Its viewBox is 100x140, the same proportion
   as the tile itself, so nothing is letterboxed at any scale. */
.tile .face { width: 100%; height: 100%; display: block; }
.tile .face .corner { opacity: 0.94; }

/* On a small tile - a discard, an opponent's exposure - the pips shrink below
   the point where they can be counted, but the corner marker is a single bold
   glyph and stays readable. So it grows rather than hiding: at thumbnail size
   it is the whole identity of the tile.

   Players here are sixty to a hundred. Anything that depends on resolving
   nine small circles is a feature only the young can use. */
.tile.small .face .corner { transform: scale(1.5); transform-origin: 20px 18px; }
.tile.small .face > :not(.corner) { opacity: 0.55; }

.tile .rank { font-size: calc(var(--tile-base-w) * 0.37 * var(--tile-scale) * var(--tile-size) * var(--fit) * var(--zoom, 1)); font-weight: 800; line-height: 1; }
.tile .mark { font-size: calc(var(--tile-base-w) * 0.17 * var(--tile-scale) * var(--tile-size) * var(--fit) * var(--zoom, 1)); font-weight: 700; letter-spacing: 0.06em; }

.tile.bam  .rank, .tile.bam  .mark { color: var(--bam); }
.tile.crak .rank, .tile.crak .mark { color: var(--crak); }
.tile.dot  .rank, .tile.dot  .mark { color: var(--dot); }
.tile.honour .rank { color: var(--ink); }
.tile.dragon-g .rank, .tile.dragon-g .mark { color: var(--bam); }
.tile.dragon-r .rank, .tile.dragon-r .mark { color: var(--crak); }
.tile.dragon-w .rank, .tile.dragon-w .mark { color: var(--dot); }
.tile.joker .rank, .tile.joker .mark { color: var(--joker); }
.tile.flower .rank, .tile.flower .mark { color: var(--accent); }

/* Selectable tiles are buttons; everything else is inert. */
.tile[data-selectable="true"] { cursor: pointer; }
.tile[data-selectable="true"]:hover { transform: translateY(-3px); }
.tile.selected {
  transform: translateY(-10px);
  box-shadow: 0 0 0 3px var(--accent), 0 6px 10px rgba(0, 0, 0, 0.3);
}
/* Marks a tile the line in focus is built on. Deliberately a bar rather than a
   colour change: the tile's own colour already carries its suit. */
.tile.wanted::after {
  content: "";
  position: absolute; inset: auto 4px 3px 4px; height: 4px;
  border-radius: 2px; background: var(--good);
}

/* --- your rack ------------------------------------------------------------ */

.rack {
  /* a wooden rack: the grain runs along it, the top edge catches the lamp, the front lip is in shade */
  background:
    linear-gradient(180deg, rgba(255, 235, 200, 0.16), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(90deg, rgba(255, 230, 190, 0.05) 0 3px, transparent 3px 11px, rgba(0, 0, 0, 0.05) 11px 13px, transparent 13px 29px),
    linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 30%, var(--wood-2) 100%);
  border-radius: 14px 14px 10px 10px;
  padding: 14px 16px 18px;
  margin-top: auto;
}
.rack .rack-h { margin: 0 0 10px; font-size: 0.95rem; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.rack .tiles .tile { box-shadow: 0 3px 0 var(--tile-shadow), 0 9px 12px rgba(0, 0, 0, 0.42); }
/* the rings outrank the rack's own shadow (13 Sep: they were written below it in specificity and never showed) */
.rack .tiles .tile.ringed { box-shadow: 0 0 0 4px #3fa34d, 0 0 0 8px rgba(255, 255, 255, 0.85), 0 9px 14px rgba(0, 0, 0, 0.42); transform: translateY(-4px); z-index: 1; }
.rack .tiles .tile.teacher-ring { box-shadow: 0 0 0 4px #e0a020, 0 0 0 8px rgba(255, 255, 255, 0.85), 0 9px 14px rgba(0, 0, 0, 0.42); transform: translateY(-4px); z-index: 1; }
.rack .hint { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; font-weight: 500; }
/* a short screen (a 720 or 768 line laptop) has no room for the long help line: it took two rows of the rack, and the
   question in the middle said the same thing (1 Oct) */
@media (max-height: 900px) { .rack .hint { display: none; } }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* --- the card panel ------------------------------------------------------- */

.panel h2 { margin: 0 0 4px; font-size: 1rem; }
/* the panel's two folds (Jeff, 13 Sep): the table's words and the card, each with a twistie, remembered per device */
.panel .fold { margin-bottom: 10px; }
.panel .fold h2 { margin: 0; }
.panel .twistie { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 6px 0; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; min-height: 40px; }
.panel .twistie::before { content: ""; width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid var(--ink-soft); transform: rotate(90deg); transition: transform 150ms; }
.panel .twistie[aria-expanded="false"]::before { transform: rotate(0deg); }
.panel .fold.folded > :not(h2) { display: none; }
.panel #banner:empty::before { content: "Nothing to say yet."; color: var(--ink-soft); font-size: 0.9rem; }
.app.card-folded { --panel-w: clamp(260px, 18vw, 340px); }
.rack .rack-h #rackZoom .zoom-open { margin-left: 6px; }
.panel .sub { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 12px; }

.line {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 7px;
  min-height: 0;
  background: var(--paper-2);
  cursor: pointer;
}
.line:hover { background: var(--paper); }
.line.focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.line.close { border-color: var(--good); }
.line.complete { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--paper-2)); }
.line.gone { opacity: 0.45; }

.line-top { display: flex; align-items: baseline; gap: 8px; }
.line .away {
  font-weight: 800; font-size: 0.95rem; min-width: 3.6em;
  color: var(--ink-soft);
}
.line.close .away, .line.complete .away { color: var(--good); }
.line .value { margin-left: auto; font-weight: 700; color: var(--accent); }
.line .notation {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem; color: var(--ink-soft);
  margin-top: 3px; word-break: break-word;
}
.line .need { font-size: 0.8rem; color: var(--ink-soft); margin-top: 3px; }

/* the record: closed by default (Jeff, 12 Sep: "can the record be collapsed?"); the banner says the result */
.record { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.record summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.record summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 150ms; }
.record[open] summary::before { transform: rotate(45deg); }
.record summary::-webkit-details-marker { display: none; }
.log { padding-top: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.log div { padding: 2px 0; }

.banner {
  background: var(--paper); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; font-weight: 600;
}
.banner.error { border-left: 4px solid var(--warn); }
.banner.win { border-left: 4px solid var(--good); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.facts dt { font-weight: 700; color: var(--ink-soft); font-size: 0.85rem; }
.facts dd { margin: 0; font-weight: 600; }


@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; }   /* a phone scrolls the page */
  .panel { max-height: none; }
  .around {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "across" "left" "right" "centre";
  }
}

/* --- the tutorial --------------------------------------------------------- */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 14, 8, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.overlay[hidden] { display: none; }

.sheet {
  --fit: 1;
  background: var(--paper);
  border-radius: 14px;
  width: min(940px, 100%);
  max-height: min(88vh, 900px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.sheet-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; font-size: 1.25rem; }
.sheet-head .eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sheet-head button { margin-left: auto; }

.sheet-body { padding: 18px 20px; overflow-y: auto; }
.sheet-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px 18px; border-top: 1px solid var(--line);
}
.sheet-foot .progress { color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; }
.sheet-foot .grow { flex: 1; }

/* the contents list */
.menu { display: grid; gap: 10px; }
.menu-group { font-weight: 800; margin-top: 6px; }
.menu button {
  display: block; width: 100%; text-align: left;
  background: var(--paper-2); min-height: 0; padding: 12px 14px;
}
.menu button .name { font-weight: 700; display: block; }
.menu button .why { color: var(--ink-soft); font-weight: 500; font-size: 0.9rem; }
.menu button .len { float: right; color: var(--ink-soft); font-weight: 600; font-size: 0.85rem; }

/* a step */
.step h3 { margin: 0 0 8px; font-size: 1.1rem; }
.step p { margin: 0 0 14px; font-size: 1.02rem; }
.step .demo {
  background: linear-gradient(160deg, var(--surface), var(--cloth));
  border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.step .note {
  background: var(--paper-2); border-left: 4px solid var(--accent);
  padding: 10px 12px; border-radius: 0 8px 8px 0;
  font-size: 0.94rem;
}
.step .lineDemo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
}
.step .lineDemo .head { font-family: var(--font); font-weight: 700; margin-bottom: 4px; }
.step .pointer {
  font-weight: 600; color: var(--accent); font-size: 0.92rem; margin-bottom: 12px;
}


/* --- card lines drawn as tiles --------------------------------------------
 *
 * The panel is the product: the research said the pain is "I cannot read this
 * card", so the card is drawn rather than transcribed. Pattern tiles are small
 * because a line is fourteen of them and the panel has to hold sixty lines,
 * but the grouping is preserved - four of a kind reads differently from four
 * singles, and a flat row hides that. */

.pattern { display: flex; flex-wrap: wrap; gap: 9px; margin: 7px 0 2px; }
.pattern-group { display: flex; gap: 2px; }

.tile.pattern-tile {
  --tile-scale: 0.40;
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--tile-shadow);
}
/* The corner keeps the suit *variable* - A, B or C. A printed card shows which
   suits differ using colour alone, and roughly one man in twelve cannot read
   that. The letter costs nothing and makes the same statement. */
.tile.pattern-tile .face .corner { transform: scale(0.85); transform-origin: 12px 12px; }

.need {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.need-label {
  font-size: 0.78rem; color: var(--ink-soft); font-weight: 600;
  margin-right: 4px;
}
.tile.need-tile { --tile-scale: 0.44; border-radius: 4px; box-shadow: 0 1px 0 var(--tile-shadow); }
.tile.need-tile .face .corner { transform: scale(1.7); transform-origin: 20px 18px; }
.tile.need-tile .face > :not(.corner) { opacity: 0.4; }


/* --- the line you are looking at, shown large ------------------------------
 *
 * The panel has to list sixty lines, so its tiles are small enough to scan and
 * too small to study. The table meanwhile was two thirds empty. So the focused
 * line is drawn here, at a size someone with sixty-year-old eyes can actually
 * read, in space that was doing nothing.
 *
 * This is also the answer to the complaint the research found loudest. "I
 * cannot read this card" is not solved by a smaller font. */

.focus-line {
  margin-top: 18px;
  padding: 16px 18px 18px;
  background: rgba(0, 0, 0, 0.16);
  border: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.focus-line .focus-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; color: #fff;
}
.focus-line .focus-name { font-size: 1.15rem; font-weight: 700; }
.focus-line .focus-away { font-size: 0.9rem; font-weight: 700; opacity: 0.85; }
.focus-line .focus-value { margin-left: auto; font-size: 1.15rem; font-weight: 700; }
.focus-line .tile.pattern-tile { --tile-scale: 0.78; border-radius: 6px; }
.focus-line .tile.pattern-tile .face .corner { transform: none; }
.focus-line .pattern { gap: 14px; }
.focus-line .focus-note {
  margin-top: 12px; color: rgba(255,255,255,0.82); font-size: 0.9rem;
}
.focus-line .need { margin-top: 10px; }
.focus-line .need-label { color: rgba(255,255,255,0.75); }
.focus-line .tile.need-tile { --tile-scale: 0.62; }
.focus-line .tile.need-tile .face > :not(.corner) { opacity: 0.9; }
.focus-line { cursor: zoom-in; }
.focus-line .focus-head .zoom-open { margin-left: 8px; }
/* folded to one line (the default; Jeff, 14 Sep): the name, how far, Open, Zoom, the value */
.focus-line.folded {
  cursor: pointer; margin-top: 10px; padding: 8px 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #fff;
}
.focus-line.folded .focus-name { font-size: 1rem; }
.focus-line.folded .focus-value { margin-left: auto; font-size: 1rem; }


/* --- the felt --------------------------------------------------------------
 *
 * The table was a flat brown field with four rounded rectangles floating on
 * it and two thirds of its height empty. Nothing about it said "a table" -
 * and a player who has sat at a real one already knows where things belong,
 * so the layout should borrow that rather than teach a new one.
 */

/* Seat panels read as places at the table rather than as cards on a page:
   no heavy border, a soft inset instead, and the name doing the work. */
.slot-across > *, .slot-left > *, .slot-right > * { background: none; border: 0; }

/* The discard area is the middle of the table and should look like it: a well, sunk into the felt, where
   thrown tiles land and lie flat, each a little askew the way thrown tiles are. */
.centre {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(0, 0, 0, 0.10), transparent 70%),
    rgba(0, 0, 0, 0.22);
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.05);
  min-height: 132px;
}
.centre .tiles .tile { box-shadow: 0 1px 0 var(--tile-shadow), 0 3px 5px rgba(0, 0, 0, 0.40); }
.centre .tiles .tile:nth-child(3n + 1) { transform: rotate(-1.6deg); }
.centre .tiles .tile:nth-child(3n + 2) { transform: rotate(1.2deg); }
.centre .tiles .tile:nth-child(5n) { transform: rotate(2.2deg); }
.centre .latest .tile { box-shadow: 0 2px 0 var(--tile-shadow), 0 6px 10px rgba(0, 0, 0, 0.45); }

/* Your own rack sits at the near edge, lifted off the felt. */
.rack {
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, 0.28), inset 0 -7px 0 rgba(0, 0, 0, 0.30), 0 -10px 30px rgba(0, 0, 0, 0.25), 0 14px 26px rgba(0, 0, 0, 0.40);
}


/* The drills are the product, so they get a place in the top bar rather than
   living at a URL nobody is told about. */
.linkish {
  color: var(--ink); font-weight: 600; text-decoration: none;
  font-size: 0.94rem; padding: 8px 4px;
}
.linkish:hover { text-decoration: underline; }


/* The table's colour, a player's choice (Jeff, 10 Sep): each palette sets the three surface variables in both
   the light and the dark theme. Brown is the original; the others follow the same three-tone recipe. */
:root[data-table="brown"] { --surface: #7d5b3f; --surface-2: #3a2a1e; --cloth: #8d6a4a; }
/* the Backs setting (Jeff, 14 Sep: "arent they blue or red, or are they white?"): the colour of the back of the tiles in the shuffle */
:root[data-back="red"] { --tile-back: #b8332f; --tile-back-deep: #7d1e1b; }
:root[data-back="green"] { --tile-back: #2f7a4a; --tile-back-deep: #1c4f2f; }
:root[data-back="purple"] { --tile-back: #6a4a9c; --tile-back-deep: #452c6b; }
:root[data-back="black"] { --tile-back: #3a3a3a; --tile-back-deep: #141414; }
:root[data-back="white"] { --tile-back: #f1ece0; --tile-back-deep: #d6cdb8; }
:root[data-table="purple"] { --surface: #5a4270; --surface-2: #2a2230; --cloth: #6a4f83; }
:root[data-table="navy"] { --surface: #3a4a6b; --surface-2: #1f232c; --cloth: #45577d; }
:root[data-table="slate"] { --surface: #5a5f66; --surface-2: #26282b; --cloth: #676c74; }
:root[data-table="brown"]:not([data-theme="light"]) { --surface: #33261b; --surface-2: #1a130d; --cloth: #3d2d20; }
:root[data-table="purple"]:not([data-theme="light"]) { --surface: #2f2340; --surface-2: #221932; --cloth: #3a2c4e; }
:root[data-table="navy"]:not([data-theme="light"]) { --surface: #1f2a3f; --surface-2: #161f2f; --cloth: #27344c; }
:root[data-table="slate"]:not([data-theme="light"]) { --surface: #2e3238; --surface-2: #23262b; --cloth: #383d44; }
@media (prefers-color-scheme: light) {
  :root[data-table="brown"]:not([data-theme="dark"]) { --surface: #7d5b3f; --surface-2: #3a2a1e; --cloth: #8d6a4a; }
  :root[data-table="purple"]:not([data-theme="dark"]) { --surface: #5a4270; --surface-2: #2a2230; --cloth: #6a4f83; }
  :root[data-table="navy"]:not([data-theme="dark"]) { --surface: #3a4a6b; --surface-2: #1f232c; --cloth: #45577d; }
  :root[data-table="slate"]:not([data-theme="dark"]) { --surface: #5a5f66; --surface-2: #26282b; --cloth: #676c74; }
}


@media (prefers-reduced-motion: reduce) {
  .centre .tiles .tile { transform: none; }
}

/* The zoomed line: a card line blown up in the middle of the screen, with its own zoom slider and a close button. */
.zoom[hidden] { display: none; }
.zoom { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 24px; }
.zoom-box { --zoom: 1.8; --tile-size: 1; --fit: 1;   /* the zoomed view answers to its own slider only */ background: linear-gradient(160deg, var(--surface), var(--cloth)); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); max-width: min(96vw, 1200px); max-height: 92vh; overflow: auto; padding: 14px 18px 22px; }
.zoom-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #fff; margin-bottom: 6px; }
.zoom-bar label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.zoom-close { font-size: 1.6rem; line-height: 1; padding: 2px 12px; }
.zoom-box .focus-line { margin-top: 6px; }
body.zoomed { overflow: hidden; }
.zoom-tiles { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 6px 0 10px; }
.zoom-group { padding: 8px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius); display: inline-flex; margin-right: 10px; }
.zoom-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.zoom-cap { color: #fff; font-size: 0.8rem; font-weight: 600; opacity: 0.85; }
.zoom-label { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-weight: 700; margin-top: 10px; }
/* the zoomed pile's three readings and its throw numbers (6 Oct) */
.zoom-sorts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.zoom-sort { font: inherit; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.zoom-sort.on { background: #f6d77a; color: #2b2410; border-color: #f6d77a; }
.zoom-sort:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zoom-way { margin-left: auto; }
.zoom-tilewrap { position: relative; }
.zoom-num { position: absolute; right: -6px; top: -8px; min-width: 22px; padding: 1px 5px; border-radius: 999px; background: #1f2a22;
  color: #fff; font-size: 0.75rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; border: 1px solid rgba(255, 255, 255, 0.5); }
.zoom-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: -1px; }
.zoom-body { width: min(1040px, 86vw); max-width: 100%; }
.zoom-faces { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: flex-start; }
.zoom-face { display: grid; gap: 2px; }
.zoom-face .zoom-tiles { margin-top: 2px; }


/* --- watch mode (0025, the table as a teacher) ------------------------------ */
.watch-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 12px 0; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28); color: #fff; font-size: 0.9rem;
}
.watch-bar[hidden] { display: none; }
/* A watched table has the controls and the explanation under the seats, so on a laptop the seats and the discards
   were squeezed into a strip that cut them off (1 Oct). When watching, the seats keep their full height and the
   table scrolls as one. */
/* Fits the window (item 21, 10 Oct: the rack was below the fold on a 1280 x 720 laptop, the table 897 pixels tall in 613):
   the seats take what the bar, the move box and the rack leave, never under 240 pixels, and scroll inside below that. */
.table:has(#watchBar:not([hidden])) .around { flex: 1 1 0; min-height: 240px; overflow: auto; }
.table:has(#watchBar:not([hidden])) .watch-bar { margin-top: 0; padding: 6px 12px; gap: 6px 12px; }
.table:has(#watchBar:not([hidden])) .watch-bar button { padding: 6px 12px; font-size: 0.85rem; min-height: 36px; }
.watch-bar label { display: inline-flex; align-items: center; gap: 6px; }
.watch-bar .watch-count { margin-left: auto; opacity: 0.8; }
.decision {
  margin: 12px 12px 0; padding: 12px 16px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
}
.decision[hidden] { display: none; }
/* one height while watching (Jeff, 10 Oct: "the screen continually shakes because of things resizing"): a line of words one
   move, words and a row of candidate tiles the next; the box keeps room for both and scrolls inside if ever more */
.table:has(#watchBar:not([hidden])) .decision { height: 6.5rem; flex: 0 0 auto; margin-top: 0; overflow-y: auto; box-sizing: border-box; }
.decision .words { font-size: 1rem; margin-bottom: 8px; }
.decision .guess { font-weight: 700; margin-bottom: 8px; }
.decision .cands { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.decision .cand { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.78rem; opacity: 0.85; }
.decision .cand.chosen { opacity: 1; }
.decision .cand.chosen .tile { outline: 3px solid var(--good); outline-offset: 1px; }
.decision .cand.guessed .tile { outline: 3px solid var(--accent); outline-offset: 1px; }
.decision .cand .tile { --tile-scale: 0.72; }
.decision .who { font-weight: 700; margin-right: 6px; }
.decision .answers { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.88rem; }
.seat-row.face-up .tiles { gap: 2px; }
.rack .guessing { color: var(--accent); }

/* --- the help levels --------------------------------------------------------- */
.card-category {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 14px 0 6px;
}
.zoom-box .card-category { color: rgba(255, 255, 255, 0.8); }
.card-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); color: #fff; }
.card-row-name { min-width: 220px; font-weight: 600; }
.card-row-value { margin-left: auto; font-weight: 700; }
.zoom-box .card-row .tile { --tile-scale: 0.5; }
body.no-card .panel h2 { display: none; }

/* --- lessons: rings, parts, scenes ------------------------------------------- */
.tile.ringed {                                      /* the adviser's suggestion: green, never the teacher's amber */
  box-shadow: 0 0 0 4px #3fa34d, 0 0 0 8px rgba(255, 255, 255, 0.85), 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(-4px);
  z-index: 1;
}
.demo.has-ring .tile:not(.ringed) { opacity: 0.55; }
.demo .tiles { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.demo-label {
  color: rgba(255, 255, 255, 0.85); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; margin: 10px 0 6px;
}
.demo-label:empty { display: none; }
.demo .parts { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.demo .part { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.demo .part .demo-label { margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
.demo .thrown { display: flex; gap: 12px; flex-wrap: wrap; }
.demo.line-demo .focus-head { display: flex; align-items: baseline; gap: 12px; color: #fff; margin: 4px 0 8px; }
.demo .part .tile { --tile-scale: 0.82; }
.demo.line-demo .tile.pattern-tile { --tile-scale: 0.62; }
.lit { outline: 5px solid #ffd166; outline-offset: 4px; border-radius: var(--radius); }

/* --- the shuffle ------------------------------------------------------------- */
.shuffle { position: fixed; inset: 0; z-index: 45; background: linear-gradient(160deg, var(--surface), var(--cloth)); }
.shuffle[hidden] { display: none; }
.shuffle canvas { position: absolute; inset: 0; }
/* the caption keeps to a band at the foot of the screen, below your rack in the deal (Jeff, 5 Oct: the longer
   captions wrapped upward into the tiles): full width so a long line wraps at most once, growing downward */
.shuffle-cap {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(92vw, 900px);
  text-align: center; text-wrap: balance; line-height: 1.3;
  color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.shuffle #shuffleSkip { position: absolute; right: 24px; top: 24px; }

/* --- words with tiles in them, and the stage strip ---------------------------- */
.inline-tile { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap; margin: 0 2px; }
.tile.tiny { --tile-scale: 0.42; --fit: 1; --tile-size: 1; border-radius: 4px; box-shadow: 0 1px 0 var(--tile-shadow); }
.tile.tiny .face > :not(.corner) { opacity: 0.95; }
.log .inline-tile { font-weight: 600; }
.stage {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 4px; border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.stage-label { font-weight: 800; font-size: 1rem; }
.stage-detail { opacity: 0.9; }

/* the player's own exposures, face up on the rack */
.exposed-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.exposed-row[hidden] { display: none; }
.exposed-row .label { color: rgba(255, 255, 255, 0.88); font-size: 0.84rem; font-weight: 700; }
.exposed-row .tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.exposed-group { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; }

.seat-read { color: rgba(255, 255, 255, 0.85); font-size: 0.82rem; margin-top: 6px; line-height: 1.3; }

/* --- the teacher view (0026): the coach bar, the teacher's marks, the pause ------------------------- */
.coach-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 12px 0; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(120, 40, 40, 0.55); color: #fff; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.25);
}
.coach-bar[hidden] { display: none; }
.coach-bar .coach-title { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
.coach-bar input { flex: 1 1 14rem; min-width: 10rem; font: inherit; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4); }
.coach-bar .coach-status { margin-left: auto; opacity: 0.85; }
.banner.teacher { border-left: 4px solid var(--accent); }
.table { position: relative; }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; touch-action: none; }
.ink.drawing { pointer-events: auto; cursor: crosshair; }
.coach-bar button.on { outline: 3px solid var(--accent); }
.tile.teacher-ring { box-shadow: 0 0 0 4px #e0a020, 0 0 0 8px rgba(255, 255, 255, 0.85), 0 6px 14px rgba(0, 0, 0, 0.35); transform: translateY(-4px); z-index: 1; }
/* the acknowledgement (Jeff, 13 Sep): a dialog the first time a published card is chosen, not a checkbox in the settings */
/* The card in the header is a button, and it opens the card box (Jeff, 16 Sep: the Menu's "Card" was out of place) */
.card-pick { font: inherit; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; min-height: 36px; cursor: pointer; text-align: left;
  margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 12rem; flex: 0 1 auto; }
header .site-bar .card-pick + .meta { margin-left: 0; }
/* on a phone the card button (never under 12rem) pushed New game and Menu past the edge and the table scrolled
   sideways (531px in a 390px window, 7 Oct); the menu already names the card and has Change the card */
@media (max-width: 560px) { header .site-bar .card-pick { display: none; } }
.card-pick:hover, .card-pick:focus-visible { color: var(--ink); border-color: var(--accent); }
.card-box { position: fixed; inset: 0; z-index: 72; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; padding: 16px; }
.card-box[hidden] { display: none; }
.card-box-card { background: var(--paper); color: var(--ink); padding: 20px 24px 14px; border-radius: var(--radius); width: min(34rem, 100%);
  max-height: 86vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.card-box-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.3rem; }
.card-box-list { display: grid; gap: 6px; margin: 12px 0 4px; }
.card-box-row { display: grid; gap: 2px; text-align: left; font: inherit; padding: 10px 14px; min-height: 44px; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; color: inherit; }
.card-box-row[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.card-box-name { font-weight: 700; }
.card-box-note { color: var(--ink-soft); font-size: 0.88rem; }
.card-box-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.card-box-actions button { min-height: 44px; padding: 8px 16px; }
.ack { position: fixed; inset: 0; z-index: 46; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; padding: 16px; }
.ack[hidden] { display: none; }
.ack-card { background: var(--paper); color: var(--ink, #222); padding: 22px 26px 18px; border-radius: var(--radius); max-width: 32rem; font-size: 1.02rem; line-height: 1.5; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.ack-card h2 { margin: 0 0 10px; font-size: 1.3rem; }
.ack-card p { margin: 0 0 12px; }
.ack-card .ack-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.ack-card .ack-actions button { min-height: 44px; padding: 8px 16px; font: 700 1rem var(--font, inherit); border-radius: 10px; border: 1px solid var(--line, #ccc); background: var(--paper-2, #eee); cursor: pointer; }
.ack-card .ack-actions button.primary { background: var(--accent, #b8771f); color: #fff; border-color: transparent; }
.ack-card .fine { color: var(--ink-soft, #666); font-size: 0.9rem; margin: 0; }
/* the level question before the first hand (9 Oct): three big choices, the strongest last */
.level-ask .level-choices { display: grid; gap: 10px; margin: 6px 0 14px; }
.level-ask .level-choices button { display: grid; gap: 2px; text-align: left; min-height: 56px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--line, #ccc); background: var(--paper-2, #eee); color: inherit; font: inherit; cursor: pointer; }
.level-ask .level-choices button b { font-size: 1.15rem; }
.level-ask .level-choices button span { color: var(--ink-soft, #666); }
.level-ask .level-choices button:hover, .level-ask .level-choices button:focus-visible { border-color: var(--accent, #b8771f); outline: 2px solid var(--accent, #b8771f); }
.level-ask .link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }
.pause { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; }
.pause[hidden] { display: none; }
.pause-card { background: var(--paper); color: var(--ink, #222); padding: 20px 26px; border-radius: var(--radius); max-width: 26rem; text-align: center; font-size: 1.05rem; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }

/* --- tile safety (0026 item 9): a stripe along the top edge, green, yellow or red ---------------------- */
.tile.safety-safe::before, .tile.safety-care::before, .tile.safety-danger::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 4px; border-radius: 2px;
}
.tile.safety-safe::before { background: var(--good); }
.tile.safety-care::before { background: #e0a020; }
.tile.safety-danger::before { background: var(--warn); }
.seat-wait { font-size: 0.82rem; opacity: 0.9; margin-top: 4px; }

/* --- a table for people (0026 item 7): the lobby block and the claim countdown ------------------------ */
.lobby-box { margin: 12px 12px 0; padding: 12px 16px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.lobby-box[hidden] { display: none; }
.lobby-box h3 { margin: 0 0 6px; font-size: 1rem; }
.lobby-box .chairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 8px; margin: 6px 0 10px; }
.lobby-box .chair { padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-size: 0.92rem; }
.lobby-box .chair.open { border: 1px dashed rgba(255, 255, 255, 0.5); }
.lobby-box .chair.you { outline: 2px solid var(--accent); }
.lobby-box .invite { font-size: 0.92rem; }
.lobby-box .invite code { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; user-select: all; }
.seat-head .tag.waiting { background: #e0a020; color: #222; }
.claim-clock { font-weight: 700; margin-left: 8px; }

.avatar-wrap { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: middle; }
.avatar-wrap .avatar { border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.lobby-box .chair .avatar-wrap { margin-right: 8px; }

/* notices on the table page: the bell in the header, the toasts in the corner */
.bell { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; cursor: pointer; font: inherit; }
.bell[hidden] { display: none; }
.bell .count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--warn); color: #fff; font: 700 0.7rem/18px var(--font); text-align: center; padding: 0 4px; }
.bell .count:empty { display: none; }
.bell-panel { position: absolute; right: 12px; top: 56px; width: min(24rem, 90vw); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.3); padding: 10px 14px; z-index: 30; font-size: 0.95rem; }
.bell-panel[hidden] { display: none; }
.bell-panel .notice { padding: 4px 0; border-bottom: 1px solid var(--line); } .bell-panel .notice.unread { font-weight: 700; }
.bell-panel button.link { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; padding: 4px 0; }
#toasts { position: fixed; right: 12px; bottom: 12px; display: grid; gap: 8px; z-index: 60; max-width: min(26rem, 92vw); }
.toast { display: flex; align-items: center; gap: 10px; background: #1d2a1f; color: #fff; padding: 12px 14px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); font-size: 0.95rem; }
.toast .button { display: inline-block; padding: 6px 12px; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; white-space: nowrap; font-weight: 600; }
.toast .close { background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; }
.lobby-box .invite-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; vertical-align: middle; }
.lobby-box .invite-actions button, .lobby-box .invite-actions input { font: inherit; font-size: 0.85rem; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.25); color: #fff; }
.lobby-box .invite-actions input { min-width: 14rem; }

/* the way back to the site from the table (Jeff, 11 Sep: "no way from the game to get back to the main page") */
/* the same header as the site (design-system/mahjongg-school/MASTER.md): the logo tile and the name, the pages,
   the account; the table's own controls in the row under it */
/* one row (Jeff, 14 Sep: two bars took 130 pixels before the table began; "make the New game, watch a
   dropdown"): the school's links, the card and the wall, New game, and a menu with the rest */
header .site-bar { flex-wrap: nowrap; }
header .site-bar .meta { margin-left: auto; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
header .menu { position: relative; }
header .bar-btn { min-height: 40px; padding: 8px 14px; font-weight: 600; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
header .bar-btn.icon { padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; }
header .bar-btn[hidden] { display: none; }
header .bar-btn.armed { background: #8a2d1e; border-color: #8a2d1e; color: #fff; }
header .bar-btn:focus-visible { outline: 3px solid var(--accent, #c9a227); outline-offset: 2px; }
@media (max-width: 560px) { header #giveUp, header #gearBtn, header #fullScreen { display: none; } }   /* a phone keeps them in the Menu: the bar had no room (10 Oct) */
@media (min-width: 561px) { .menu-list .phone-only { display: none; } }
header .menu-list .armed { background: #8a2d1e; color: #fff; }
header .menu summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px;
  font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
header .menu summary::-webkit-details-marker { display: none; }
header .menu summary::after { content: ""; width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid var(--ink-soft); margin-top: 5px; }
header .menu[open] summary { background: var(--paper-2); }
header .menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 15rem;
  display: grid; gap: 6px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}
header .menu-list button, header .menu-list .feedback-tab { width: 100%; justify-content: flex-start; text-align: left; border-radius: 8px; }
header .menu-meta { display: none; color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; padding: 4px 6px 6px; border-bottom: 1px solid var(--line); }
header .menu-meta:empty { display: none; }
@media (max-width: 1500px) { header .site-bar .meta { display: none; } header .menu-meta { display: block; } }   /* the card and the wall move into the menu */
header a.home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
header a.home .mark { display: inline-block; width: 26px; height: 36px; background: url("/static/logo.svg?v=7947b61a32") no-repeat center / contain; font-size: 0; }
header a.home:hover h1 { text-decoration: underline; }
header .site-links { display: inline-flex; gap: 2px; align-items: center; flex-wrap: wrap; }
header .site-links a, header .site-links .bell { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.98rem; }
header .site-links a:hover { background: var(--paper-2); }
header .site-links a[aria-current="page"] { background: var(--paper-2); box-shadow: inset 0 -3px 0 var(--surface); border-radius: 12px 12px 4px 4px; }
header .site-links.me { border-left: 1px solid var(--line); padding-left: 8px; }
/* the school, as one menu, built to look exactly like the site's (18 Sep: "second with the same look") */
header .site-links details.menu { position: relative; }
header .site-links details.menu > summary { list-style: none; cursor: pointer; min-height: 40px;
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 6px 12px; border-radius: 999px;
  font-weight: 700; font-size: 0.98rem; color: var(--ink); }
header .site-links details.menu > summary::-webkit-details-marker { display: none; }
header .site-links details.menu > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
header .site-links details.menu[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
header .site-links details.menu > summary:hover { background: var(--paper-2); }
header .site-links details.menu > summary:focus-visible { outline: 3px solid var(--surface); outline-offset: 2px; }
header .site-links .menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 14rem;
  display: grid; gap: 1px; padding: 6px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 14px 30px rgba(40, 30, 15, 0.18); }
header .site-links .menu-panel a { display: block; width: 100%; border-radius: 9px; font-weight: 500; }
header .site-links a.account { border: 1px solid var(--line); }
header .site-links .bell { border: 0; background: none; cursor: pointer; padding: 6px 8px; }
header .site-links .bell svg { display: block; }
header .feedback-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.92rem; background: var(--paper); }
header .feedback-tab:hover { background: var(--paper-2); }
@media (max-width: 900px) { header .site-links { display: none; } }


/* a lesson beside the board (13 Sep): the panel carries the words, the board carries the picture */
.panel .fold.lesson { background: var(--paper-2); border-radius: 12px; padding: 12px 14px 10px; margin-bottom: 12px; border-left: 5px solid #7fd0ff; }
.panel .fold.lesson .eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.panel .fold.lesson h2 { font-size: 1.15rem; margin: 2px 0 8px; }
.panel .fold.lesson .lesson-body p { font-size: 1.02rem; line-height: 1.5; margin: 0 0 8px; }
.panel .fold.lesson .lesson-body .found { font-weight: 700; }
.panel .fold.lesson .lesson-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* Next stays in view however long the step is and however short the window (14 Oct: on a big screen with a short
   window she had to scroll to find Next); the phone rules below already did this */
.panel .fold.lesson .lesson-foot { position: sticky; bottom: 0; z-index: 2; background: var(--paper-2); padding: 8px 0 4px;
  box-shadow: 0 -10px 12px -8px rgba(0, 0, 0, 0.18); }
.panel .fold.lesson .lesson-foot .progress { color: var(--ink-soft); font-size: 0.9rem; margin-right: auto; }
.tile.lesson-ring { box-shadow: 0 0 0 4px #7fd0ff, 0 0 0 8px rgba(255, 255, 255, 0.85), 0 9px 14px rgba(0, 0, 0, 0.42); z-index: 1; animation: lesson-pulse 0.9s ease-in-out 2; }
.lit-soft { outline: 5px solid #7fd0ff; outline-offset: 4px; border-radius: var(--radius); box-shadow: 0 0 0 12px rgba(127, 208, 255, 0.18); animation: lesson-pulse 0.9s ease-in-out 2; }
/* a lit thing moves twice, then holds its ring (Jeff, 14 Sep: "when we highlight something can it move or blink") */
@keyframes lesson-pulse { 0%, 100% { box-shadow: 0 0 0 12px rgba(127, 208, 255, 0.18); } 50% { box-shadow: 0 0 0 18px rgba(127, 208, 255, 0.38); } }
/* only a tile on your own rack lifts; in the middle, in a picture or in somebody's group the ring alone pulses
   (Jeff, 15 Sep: "its too much on the center when the tile itself moves that much") */
.rack .tiles .tile.lesson-ring { transform: translateY(-4px); animation-name: lesson-ring-pulse; animation-iteration-count: 3; }
@keyframes lesson-ring-pulse { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-12px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .lit-soft, .tile.lesson-ring { animation: none; } }
/* what a step points at, a tile or a control, keeps moving until it is used (Jeff, 15 Sep: "highlight and wiggle the tile
   you want them to tap") */
/* a tile that is both ringed and pointed at still wiggles: the ring's rule is the stronger one, which is why some
   pointed tiles moved and others did not (Jeff, 15 Sep) */
.rack .tiles .tile.lesson-point, .tile.lesson-point { animation: lesson-wiggle 1.1s ease-in-out infinite; }
button.lesson-point, summary.lesson-point, .field.lesson-point, a.lesson-point { outline: 4px solid #7fd0ff; outline-offset: 3px; animation: lesson-bob 1.1s ease-in-out infinite; }
@keyframes lesson-wiggle { 0%, 100% { transform: translateY(-6px) rotate(0deg); } 25% { transform: translateY(-10px) rotate(-4deg); } 75% { transform: translateY(-10px) rotate(4deg); } }
@keyframes lesson-bob { 0%, 100% { box-shadow: 0 0 0 4px rgba(127, 208, 255, 0.25); } 50% { box-shadow: 0 0 0 10px rgba(127, 208, 255, 0.45); } }
.tile.nudge { animation: lesson-wiggle 0.25s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .tile.lesson-point, button.lesson-point, summary.lesson-point, .field.lesson-point, a.lesson-point, .tile.nudge { animation: none; } }
.zoom .lesson-zoom-foot { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* a lesson step's moves, one line a move as the table makes them (15 Sep); the newest one marked */
.panel .fold.lesson .lesson-moves { margin: 4px 0 8px; padding-left: 1.4rem; display: grid; gap: 4px; }
.panel .fold.lesson .lesson-moves li { line-height: 1.45; color: var(--ink-soft); }
.panel .fold.lesson .lesson-moves li.newest { color: var(--ink); font-weight: 700; }
.panel .fold.lesson .lesson-moves li.yours { list-style: none; margin-left: -1.4rem; color: var(--ink); font-weight: 700; }
.zoom .lesson-zoom-parts { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: center; }
.zoom .lesson-zoom-parts .part { display: grid; gap: 6px; justify-items: center; }
.zoom .lesson-zoom-parts .demo-label { font-weight: 700; color: #fff; }
/* the step's words in the zoom sit on paper, never black on the felt (Jeff, 14 Sep) */
.zoom .zoom-why { background: var(--paper); color: var(--ink); padding: 12px 16px; border-radius: 10px; margin: 12px auto 0; max-width: 62ch; font-size: 1.05rem; line-height: 1.5; }
/* the wall, drawn above the rack during a lesson */
.wall-pile { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.18); color: #fff; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wall-pile[hidden] { display: none; }
.wall-pile .pile-tiles { display: flex; flex-wrap: wrap; gap: 2px; max-width: 60%; }
.wall-pile .tile.back { width: 22px; height: 30px; border-radius: 4px; background: linear-gradient(135deg, var(--tile-back), var(--tile-back-deep)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.wall-pile .pile-cap { font-weight: 700; font-size: 0.95rem; }
/* the four walls during play (25 Sep): a stack is two tiles, one tile is a paler half, a drawn stack an outline */
.wall-map { width: 124px; height: 124px; flex: none; }
.wall-pile.big .wall-map { width: min(260px, 70vw); height: min(260px, 70vw); }
.wall-map .st.two { fill: var(--tile-back); stroke: var(--tile-back-deep); stroke-width: 0.6; }
.wall-map .st.one { fill: var(--tile-back); fill-opacity: 0.5; stroke: var(--tile-back-deep); stroke-width: 0.6; }
.wall-map .st.gone { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.6; }
.wall-map .st.held { stroke: #f3d27a; stroke-width: 1.2; }
.wall-map .st.next { stroke: #fff; stroke-width: 1.4; }
.wall-map .in-play { transition: transform 0.4s ease; }
.wall-map .wall-count { fill: rgba(255, 255, 255, 0.85); font-size: 18px; font-weight: 700; }
.wall-map .wall-east { fill: #f3d27a; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }
/* the card line a lesson step talks about (14 Sep): lit on the card at the right and in the middle of the table; the
   card keeps its size and nothing moves (Jeff: "the side goes through girations and its too big") */
#lines .line.lesson-line { outline: 4px solid #7fd0ff; outline-offset: 2px; box-shadow: 0 0 0 10px rgba(127, 208, 255, 0.25); }
#focusLine.lesson-line { outline: 4px solid #7fd0ff; outline-offset: 4px; box-shadow: 0 0 0 12px rgba(127, 208, 255, 0.2); }
.lesson-tiles-cap { margin: 0.6rem 0 0.2rem; font-weight: 700; }
body.lesson-on .focus-line .tile.pattern-tile { --tile-scale: 0.52; }
body.lesson-on .focus-line .need { display: none; }
.lesson-tiles { display: flex; flex-wrap: wrap; gap: 2px; --tile-scale: 0.55; }


/* the tile just drawn or taken (13 Sep): lifted, a pale ring, for the length of the turn */
.rack .tiles .tile.drawn { box-shadow: 0 0 0 3px #fff7dd, 0 0 0 6px rgba(255, 209, 102, 0.9), 0 9px 14px rgba(0, 0, 0, 0.42); transform: translateY(-6px); }
.rack .tiles .tile.drawn.selected { transform: translateY(-10px); }


/* the now line in the middle, the log beside the board, the loud offer (13 Sep) */
.centre .now { margin: 0 0 8px; }
.centre .now .banner { background: rgba(255, 255, 255, 0.12); color: #fff; border-left: 4px solid #ffe3a8; border-radius: 10px; padding: 8px 12px; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.centre .now .banner.error { border-left-color: #ff9a8b; }
.centre .now .banner.win { border-left-color: #b9f2c2; }
.centre .now .banner.teacher { border-left-color: var(--accent); }
.centre .now .inline-tile .tile { vertical-align: middle; }
.panel #banner:empty::before { content: none; }
.panel .say-log { max-height: 13rem; overflow: auto; padding: 4px 0 0; font-size: 0.9rem; color: var(--ink); }
.panel .say-log .say-line { padding: 4px 6px; border-radius: 6px; cursor: pointer; line-height: 1.35; }
.panel .say-log .say-line:hover { background: rgba(0, 0, 0, 0.05); }
.panel .say-log .say-line.now-line { font-weight: 700; background: rgba(53, 105, 63, 0.10); }
.panel .say-log:empty::before { content: "Nothing has happened yet."; color: var(--ink-soft); }
.tile.lit-tile { box-shadow: 0 0 0 4px #ffe3a8, 0 0 0 8px rgba(255, 227, 168, 0.5), 0 6px 14px rgba(0, 0, 0, 0.35); transform: translateY(-4px); z-index: 2; }
.centre .latest .tile.offered { box-shadow: 0 0 0 4px #ffc23d, 0 0 0 9px rgba(255, 194, 61, 0.45), 0 6px 14px rgba(0, 0, 0, 0.35); animation: offered 1.1s ease-in-out infinite alternate; }
@keyframes offered { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .centre .latest .tile.offered { animation: none; transform: translateY(-4px); } }


/* Size: the words scale with the tiles (14 Sep) */
.panel { font-size: calc(1rem * var(--ui)); }
.rack .actions button, .actions button { font-size: calc(0.95rem * var(--ui)); }
.centre .now .banner { font-size: calc(1.05rem * var(--ui)); }
.centre h3, .centre .empty, .centre .latest .who { font-size: calc(0.9rem * var(--ui)); }
.stage { font-size: calc(0.95rem * var(--ui)); }
.seat { font-size: calc(0.92rem * var(--ui)); }
.rack .rack-h { font-size: calc(1rem * var(--ui)); }
.panel .say-log { font-size: calc(0.9rem * var(--ui)); }

/* High contrast (14 Sep): darker marks, an outline round every tile, more room between them */
body.hc { --pip-bam: #0b4d2a; --pip-bam-alt: #083a1f; --pip-crak: #7a0f14; --pip-dot: #0b2d63; --pip-wind: #2e2110; --pip-flower: #1f5f36; --pip-flower-heart: #8a5a10; --pip-joker: #4a1f5c; }
body.hc .tile { outline: 2px solid #1f1a12; outline-offset: -1px; }
body.hc .tile .face .corner { opacity: 1; font-weight: 900; }
body.hc .rack .tiles { gap: 12px; }
body.hc .centre .tiles { gap: 8px; }
body.hc .panel { color: #111; }
body.hc .fine, body.hc .panel .fine { color: #333; }

/* a 1280 wide screen: fourteen tiles stay on one row (the rack's side padding and the table's shrink a little) */
@media (max-width: 1400px) and (min-width: 1001px) {
  .table { padding: 12px; }
  .rack { padding-left: 10px; padding-right: 10px; }
}

/* watching someone else's table (14 Sep): a line that says so, beside Stop watching */
#actions .watch-note { color: #fff; font-weight: 700; align-self: center; margin-right: 8px; }

/* the end of the course (15 Sep): a celebration in the middle of the screen */
.course-done { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(12, 24, 16, 0.62); }
.course-done-card { width: min(560px, 100%); background: var(--paper, #fbf7ee); color: var(--ink, #22281f); border-radius: 18px; padding: 26px 26px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); text-align: center; position: relative; overflow: hidden; }
.course-done-card h2 { font-size: 1.6rem; margin: 6px 0 10px; text-wrap: balance; }
.course-done-card p { font-size: 1.05rem; line-height: 1.5; margin: 0 0 10px; }
.course-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
/* the links in the finish box look and press like the table's buttons (15 Sep audit: they showed as plain blue text) */
.course-done-actions .button { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 18px; font-weight: 600; text-decoration: none;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.course-done-actions .button:hover { background: var(--paper-2); }
.course-done-actions .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.course-done-actions .button.primary { background: var(--accent); color: #fff; border-color: transparent; }
.course-confetti { display: flex; justify-content: center; gap: 6px; height: 54px; margin-bottom: 4px; }
.course-confetti .tile { animation: course-toss 1.6s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes course-toss { 0% { transform: translateY(40px) rotate(0deg); opacity: 0; } 55% { transform: translateY(-14px) rotate(calc(var(--i) * 9deg - 40deg)); opacity: 1; } 100% { transform: translateY(0) rotate(0deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .course-confetti .tile { animation: none; } }

/* a lesson's zoom picture keeps its Back and Next in view when even the smallest zoom is taller than the screen (a phone) */
.zoom-box.lesson-zoom-box .lesson-zoom-foot { position: sticky; bottom: -22px; padding: 10px 0 12px; background: linear-gradient(180deg, transparent, var(--cloth, #2f5f3f) 35%); }
.lesson-back-bar { position: fixed; right: 20px; bottom: 20px; z-index: 70; }

/* the AI badge on an AI opponent's chair (15 Sep) */
.tag.person-tag { background: #b8771f; color: #fff; font-weight: 700; border-color: transparent; }
.tag.ai-badge, .chair .ai-badge { background: #2f6243; color: #fff; font-weight: 700; letter-spacing: 0.04em; border-color: transparent; }
.chair .ai-badge { margin-left: 8px; font-size: 0.78rem; padding: 1px 7px; border-radius: 999px; }

/* the house table's boxes (15 Sep): the same card as the course's finish, a name field and the explanation switch */
.house-ask-card { text-align: left; }
.house-ask-card h2 { text-align: center; }
.house-ask .course-done-actions { justify-content: flex-start; }
.house-name { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 4px 0 6px; }
.house-name input { font: inherit; padding: 10px 12px; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.house-explain { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: 44px; }
.house-explain input { width: 22px; height: 22px; }
.house-how { margin: 8px 0 4px; }

/* watching a house table (15 Sep): a seat is tapped to watch from it; the explained throw is ringed; Why that throw sits in the panel */
.seat.watchable { cursor: pointer; }
.seat.watchable:hover .seat-head, .seat.watchable:focus-visible .seat-head { outline: 3px solid #7fd0ff; outline-offset: 2px; }
.seat.watchable:focus-visible { outline: none; }
#centre .latest .tile.explained { outline: 4px solid #7fd0ff; outline-offset: 2px; }
.fold.why[hidden] { display: none; }
.fold.why .why-body { margin: 6px 0 0; background: var(--felt, #2f5f3f); }
.fold.why .why-body .cand .tile { --tile-scale: 0.6; }

/* the highlight the lessons already had, used everywhere something is pointed at (Jeff, 15 Sep: "what we had earlier
   was fine.. it just needed to be applied everywhere"): a soft pulse on a panel or a line, the tile's own rise */
#lines .line.lesson-line, #focusLine.lesson-line, #centre .latest .tile.explained { animation: lesson-pulse 0.9s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  #lines .line.lesson-line, #focusLine.lesson-line, #centre .latest .tile.explained { animation: none; }
}

/* Settings shown by a lesson: read only, with the way back above the panel (15 Sep). The sheet steps aside so the
   lesson it belongs to is still readable in the panel beside it (16 Sep) */
header .settings.lesson-readonly { background: transparent; pointer-events: none; }
.settings.lesson-readonly .settings-sheet { pointer-events: auto; margin-left: 16px; margin-right: auto; max-width: 44rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.settings.lesson-readonly .fields, .settings.lesson-readonly .group { pointer-events: none; }
.settings.lesson-readonly .field.lesson-point { pointer-events: none; }
.lesson-back-bar { position: sticky; top: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 0 0 8px; background: var(--paper-2, #efe7d7); border-radius: var(--radius); }
.lesson-back-note { font-weight: 600; }

/* the numbers the table works out, above the rack while a lesson asks for them (15 Sep) */
.lesson-numbers { display: grid; gap: 4px; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.3); color: #fff; max-width: 640px; }
.lesson-numbers .lesson-number { display: flex; gap: 10px; justify-content: space-between; }
.lesson-numbers .label { opacity: 0.85; }
.lesson-numbers .value { font-weight: 700; text-align: right; }
.lesson-numbers button { margin-top: 6px; justify-self: start; min-height: 40px; padding: 6px 12px; }

/* the stage, said once in the middle and gone (15 Sep) */
.slot-centre { position: relative; }
.stage-said { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 30;
  font-family: var(--display, inherit); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); animation: stage-said 2.6s ease-out forwards; }
@keyframes stage-said { 0% { opacity: 0; transform: scale(0.92); } 12% { opacity: 1; transform: scale(1); } 65% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stage-said { animation: none; opacity: 0; } }

/* the wall, on every screen: a small stack of backs with the count, large in the lesson about it (15 Sep) */
.wall-pile:not(.big) { margin: 0 0 8px; padding: 6px 10px; gap: 10px; background: rgba(0, 0, 0, 0.22); }
.wall-pile:not(.big) .pile-tiles { gap: 0; }
.wall-pile:not(.big) .pile-tiles .tile.back { width: 16px; height: 22px; margin-left: -8px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.wall-pile:not(.big) .pile-tiles .tile.back:first-child { margin-left: 0; }
.wall-pile:not(.big) .pile-cap { font-size: 0.88rem; font-weight: 700; opacity: 0.92; }
.tile.tile-fly { position: fixed; z-index: 90; pointer-events: none; transition: transform 0.45s ease-out, opacity 0.45s ease-out; }
@media (prefers-reduced-motion: reduce) { .tile.tile-fly { display: none; } }

/* the card as printed, or in words, and the switch between them (16 Sep) */
/* a card is printed on paper: the letters need one to be read (16 Sep), and the paper is the same in both themes
   because the card's third colour is black and black has to read on it (18 Sep) */
.printed-line { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 800; letter-spacing: 0.06em; font-size: 1.15rem;
  margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: #fffdf8; color: #17140f;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.printed-line.large { font-size: 1.6rem; }
.printed-group { white-space: nowrap; }
.line-words { margin: 4px 0; line-height: 1.5; }
.card-view { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.card-view-label { font-size: 0.85rem; opacity: 0.8; }
.card-view .card-view-pick { min-height: 34px; padding: 4px 10px; font-size: 0.85rem; }

/* the wall in the table's upper right corner (28 Sep, Jeff: "not take up so much horizontal space", "a zoom button") */
.wall-pile.corner { position: absolute; top: 10px; right: 10px; z-index: 5; margin: 0; padding: 6px; gap: 2px;
  flex-direction: column; align-items: center; flex-wrap: nowrap; background: rgba(0, 0, 0, 0.28); border-radius: 10px; }
.wall-pile.corner .wall-map { width: 88px; height: 88px; }
.wall-pile.corner .wall-map .wall-east, .wall-pile.corner .wall-map .wall-count { display: none; }
.wall-pile.corner .pile-cap { font-size: 0.8rem; font-weight: 700; line-height: 1.2; }
.wall-zoom { position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; min-height: 0; padding: 5px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; line-height: 0; }
.wall-zoom svg { width: 100%; height: 100%; }
.wall-zoom:hover { background: rgba(0, 0, 0, 0.65); }
.wall-zoom:focus-visible, .wall-zoom-close:focus-visible { outline: 3px solid #f3d27a; outline-offset: 2px; }
.wall-zoom-box { border: 0; border-radius: 16px; padding: 18px; max-width: min(560px, calc(100vw - 32px));
  background: linear-gradient(160deg, var(--surface), var(--cloth)); color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.wall-zoom-box::backdrop { background: rgba(20, 14, 8, 0.6); }
.wall-zoom-box .wall-pile.big { margin: 0 0 12px; flex-direction: column; align-items: center; }
.wall-zoom-box .wall-pile.big .wall-map { width: min(440px, calc(100vw - 80px)); height: min(440px, calc(100vw - 80px)); }
.wall-zoom-box .pile-cap { max-width: 60ch; font-weight: 600; line-height: 1.45; }
.wall-zoom-close { display: block; margin-left: auto; min-height: 40px; padding: 8px 18px; border-radius: 999px; font: inherit;
  font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.3); color: #fff; }
@media (max-width: 1000px) {
  .wall-pile.corner .wall-map { width: 64px; height: 64px; }
  .slot-across { padding-right: 92px; }          /* the player across sits beside the corner wall, not under it */
}

/* --- 0029 stage 1: the table redesigned (30 Sep, from the approved mockups) ---------------------------------------
   Opponents as tile backs and a name, their face-up sets toward the middle; the discards in the order thrown; the
   question in the middle with big buttons; the helpers in one row; the rack as dealt with a Sort button. */
.around .seat { display: flex; gap: 8px; padding: 0; }
.around .seat-across { flex-direction: column; align-items: center; }
.around .seat-left { flex-direction: row; align-items: flex-start; }
.around .seat-right { flex-direction: row-reverse; align-items: flex-start; }
.seat-person { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seat-tiles { display: flex; gap: 3px; }
.seat-left .seat-tiles, .seat-right .seat-tiles { flex-direction: column; }
.seat-back { display: block; width: 22px; height: 30px; border-radius: 4px;
  background: linear-gradient(135deg, var(--tile-back), var(--tile-back-deep)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.seat-left .seat-back, .seat-right .seat-back { width: 30px; height: 18px; }
.seat-tiles.face-up { flex-wrap: wrap; max-width: 100%; }
.seat-tiles.face-up .tile { --tile-scale: 0.42; }
.seat-name { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 0.9rem; color: #fff;
  padding: 3px 10px 3px 5px; min-height: 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.32); cursor: pointer; white-space: nowrap; }
.seat-name .tag { font-weight: 600; font-size: 0.72rem; background: rgba(0, 0, 0, 0.3); padding: 1px 7px; border-radius: 999px; }
.seat.is-turn .seat-name { background: #f3d27a; color: #2b2213; border-color: #f3d27a; }
.seat.is-turn .seat-name .tag { background: rgba(0, 0, 0, 0.12); color: #2b2213; }
.seat-name:focus-visible { outline: 3px solid #f3d27a; outline-offset: 2px; }
.seat-sets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.seat-left .seat-sets, .seat-right .seat-sets { flex-direction: column; align-items: stretch; align-self: center; }
.seat-set { display: flex; gap: 2px; padding: 3px; border-radius: 7px; background: rgba(0, 0, 0, 0.16); }
.seat-set .tile { --tile-scale: 0.5; }
.seat-about { position: absolute; z-index: 20; max-width: 300px; margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  background: #fbf6ea; color: #2b2213; font-size: 0.9rem; line-height: 1.4; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.seat-about p { margin: 0 0 4px; }
.seat-about[hidden] { display: none; }
.around .seat { position: relative; }
.seat-across .seat-about { top: 100%; left: 50%; transform: translateX(-50%); }
.seat-left .seat-about { top: 40px; left: 0; }
.seat-right .seat-about { top: 40px; right: 0; }

/* the middle: the question leads, the stage line and the card line leave (the card panel has the lines) */
.centre .stage, .centre .centre-head, .centre #focusLine { display: none; }
.centre .now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.centre { align-items: center; justify-content: center; gap: 12px; }
.pool { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 560px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.12); }
.pool .tile { --tile-scale: 0.5; }
.pool .tile.mine { box-shadow: 0 0 0 2px rgba(127, 209, 255, 0.85), 0 2px 0 var(--tile-shadow); }
.pool .pool-face { position: relative; display: inline-flex; padding-bottom: 12px; }
.pool .pool-count { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font: 700 calc(0.68rem * var(--ui, 1))/1 var(--font, sans-serif); color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: 999px; padding: 1px 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pool .tile.last { outline: 3px solid #f3d27a; outline-offset: 1px; }
.pool-key { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); text-align: center; }
/* scoped to the table: the drills page has its own #ask and #hand, and these turned its question white (3 Oct) */
.table #ask { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff; }
.table #ask[hidden] { display: none; }
.ask-line { font-size: calc(1.15rem * var(--ui, 1)); font-weight: 700; max-width: 46ch; line-height: 1.35; text-wrap: balance; }
.ask-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ask-sub { font-size: calc(0.95rem * var(--ui, 1)); max-width: 54ch; line-height: 1.4; opacity: 0.92; text-wrap: balance; }
.ask-slots { display: flex; gap: 8px; align-items: flex-end; }
.ask-slot-col { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 700; }
.ask-slot-col span:empty { display: none; }
.ask-slot { width: calc(var(--tile-base-w) * var(--tile-size) * var(--fit)); height: calc(var(--tile-base-h) * var(--tile-size) * var(--fit));
  border-radius: 7px; border: 2px dashed rgba(255, 255, 255, 0.5); }
.ask-slot.blind { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 12px); }
.ask-thrown .tile { --tile-scale: 1.15; }
.ask-what { font-size: 0.9rem; max-width: 52ch; }
.ask-what summary { cursor: pointer; color: #ffe7a3; text-decoration: underline; text-underline-offset: 3px; }
.ask-what p { margin: 6px 0 0; line-height: 1.4; }
.ask-go { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.ask-go:empty { display: none; }
.ask-go button { font-size: calc(1.1rem * var(--ui, 1)); font-weight: 800; min-width: 170px; min-height: 52px; padding: 10px 22px;
  border-radius: 12px; border: 0; background: #fbf6ea; color: #2b2213; box-shadow: 0 3px 0 #cbbf9f, 0 6px 14px rgba(0, 0, 0, 0.2); }
.ask-go button.primary { background: #f0c54e; box-shadow: 0 3px 0 #b8902a, 0 6px 14px rgba(0, 0, 0, 0.25); }
.ask-go button:disabled { opacity: 0.55; }
.ask-go .practice-next { flex: 0 0 100%; margin: 0; text-wrap: balance; text-align: center; font-size: calc(1.05rem * var(--ui, 1)); line-height: 1.45; color: #fff; }
.ask-go button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* the coach's note on a newcomer's first hand (4 Oct): above the rack, to the next throw or Got it */
.coach-tip { position: fixed; right: 24px; top: 92px; z-index: 60; width: min(360px, calc(100vw - 32px));
  background: rgba(255, 250, 235, 0.98); color: #2b2213; border-left: 6px solid #f0c54e; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); font-size: 0.98rem; line-height: 1.45; display: grid; gap: 6px; }
.coach-tip[hidden] { display: none; }
.coach-tip strong { font-size: 0.85rem; letter-spacing: 0.04em; color: #7a5a12; }
.coach-tip .coach-close { justify-self: end; border: 0; background: #2b2213; color: #fff8e6; border-radius: 8px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
/* on a laptop it sits over the top of the card panel, clear of the decision buttons; on a phone, above the rack */
@media (max-width: 900px) { .coach-tip { top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: 150px; } }
.ask-advice { max-width: 58ch; text-align: left; font-size: 0.95rem; line-height: 1.45; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 250, 235, 0.96); color: #2b2213; border-left: 5px solid #f0c54e; }

/* your side: the helpers in one row, More for the rest; the Sort button beside your name */
.rack-sort { font: inherit; font-size: 0.85rem; font-weight: 700; padding: 4px 12px; min-height: 32px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.25); color: #fff; cursor: pointer; }
.rack-sort[aria-pressed="true"] { background: #fbf6ea; color: #2b2213; border-color: #fbf6ea; }
.rack-sort[hidden] { display: none; }
.more-helpers { position: relative; }
.more-helpers summary { list-style: none; cursor: pointer; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.25); color: #fff; }
.more-helpers summary::-webkit-details-marker { display: none; }
.more-list { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 25; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 12px; background: #fbf6ea; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); min-width: 220px; }
.wall-pile.corner { cursor: pointer; }
/* the corner wall stays clear of the player on the right; the middle scrolls rather than clip its buttons */
.wall-pile.corner .wall-map { width: 72px; height: 72px; }
.slot-right { padding-top: 44px; }
.centre { overflow: auto; scrollbar-gutter: stable; }
/* the scroll bar's room is kept even when nothing scrolls (Jeff, 10 Oct: "when something is put into the throw pile
   the screen kind of shakes.. the scroll bar disappears and then re-appears"): the offer to call a thrown tile makes
   the middle taller for a moment, and without the kept room every tile in the pile moved over and back */
.pool .tile { --tile-scale: 0.44; }
.ask-thrown .tile { --tile-scale: 1; }
.pool-key[hidden] { display: none; }
/* on a narrow screen every opponent is a short row: name, then backs across, sets under (the full phone layout is 0029 stage 6) */
@media (max-width: 1000px) {
  .around .seat-left, .around .seat-right { flex-direction: column; align-items: flex-start; }
  .seat-left .seat-person, .seat-right .seat-person { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .seat-left .seat-tiles, .seat-right .seat-tiles { flex-direction: row; }
  .seat-back, .seat-left .seat-back, .seat-right .seat-back { width: 14px; height: 20px; border-radius: 3px; }
  .seat-left .seat-sets, .seat-right .seat-sets { flex-direction: row; align-self: flex-start; }
  .slot-right { padding-top: 0; }
  .slot-across { padding-right: 84px; }
}
/* a short middle keeps its top in view; face-up hands on the side seats wrap into rows */
.centre { justify-content: safe center; }
.seat-left .seat-tiles.face-up, .seat-right .seat-tiles.face-up { flex-direction: row; flex-wrap: wrap; max-width: 150px; }
.seat-left .seat-tiles.face-up .tile, .seat-right .seat-tiles.face-up .tile { --tile-scale: 0.36; }

/* --- 0029 stage 2: the card on the right, hidden and shown with a button -------------------------------------------- */
.app.panel-hidden { grid-template-columns: minmax(0, 1fr); }
.app.panel-hidden .panel { display: none; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-top h2 { margin: 0; }
.card-nearest { font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); margin: 2px 0 0; }
.card-nearest:empty { display: none; }
.panel-hide { font: inherit; font-size: 0.82rem; font-weight: 700; padding: 5px 12px; min-height: 32px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-2, #fff); color: var(--ink); cursor: pointer; white-space: nowrap; }
.panel-show { position: absolute; top: 12px; left: 12px; z-index: 6; font: inherit; font-size: 0.88rem; font-weight: 700;
  padding: 6px 14px; min-height: 34px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.3); color: #fff; cursor: pointer; }
.panel-show[hidden] { display: none; }
/* closed by default since 11 Oct, so the button is gold and easy to see (the right corner holds the wall) */
@media (min-width: 1280px) { .panel-show { background: #f3d98b; color: #2c2414; border-color: #f3d98b; } }
.panel-show.nudge { animation: card-nudge 1.6s ease-in-out 3; }
@keyframes card-nudge { 50% { box-shadow: 0 0 0 6px rgba(243, 217, 139, 0.45); } }
@media (prefers-reduced-motion: reduce) { .panel-show.nudge { animation: none; } }
.panel-show.in-rack { position: static; vertical-align: middle; margin-left: 4px; }
.wall-pile.corner { transform: translateY(calc(-1 * var(--mid-scroll, 0px))); }

/* --- 0029 stage 3: a colour for each player, switched by the dot on their name --------------------------------------- */
.seat-name { cursor: default; padding: 3px 4px 3px 4px; }
.seat-who-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; background: none; border: 0;
  padding: 0 6px 0 2px; cursor: pointer; min-height: 24px; }
.seat-who-btn:focus-visible { outline: 3px solid #f3d27a; outline-offset: 2px; border-radius: 999px; }
.seat-dot { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; border-radius: 50%; border: 2px solid var(--c);
  background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); cursor: pointer; }
.seat-dot.off { background: transparent; }
.seat-dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#youDot { display: inline-flex; vertical-align: middle; margin-right: 6px; }
#youDot:empty { display: none; }
.pool .tile.by { box-shadow: 0 0 0 3px var(--c), 0 2px 0 var(--tile-shadow); }
.zoom-tiles .tile.by { box-shadow: 0 0 0 4px var(--c), 0 2px 0 var(--tile-shadow); }
.seat-set.by, .exposed-group.by { box-shadow: inset 0 0 0 2px var(--c); border-radius: 7px; }
.who-c { background: var(--c); color: #2b2213; padding: 0 5px; border-radius: 4px; font-weight: 700; }
/* the middle stays one screen: the pile keeps its last rows in view, the claim buttons stay compact */
.pool { position: relative; padding-right: 38px; }   /* every discard shows; the zoom button sits in the corner */
.ask-go button { min-height: 46px; }
.ask-thrown .tile { --tile-scale: 0.9; }

/* --- 0029 stage 4: the close-up of the wall being drawn from, in the wall zoom ------------------------------------------ */
.wall-close { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; width: 100%; }
.wall-close-cap { font-weight: 700; }
.wall-close-strip { display: flex; gap: 6px; align-items: flex-end; justify-content: center; padding: 30px 10px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); }
.wall-close-stack { display: flex; flex-direction: column; gap: 3px; align-items: center; position: relative; }
.wall-close-stack .b, .wall-close-stack .gone { width: 38px; height: 26px; border-radius: 5px; }
.wall-close-stack .b { background: linear-gradient(135deg, var(--tile-back), var(--tile-back-deep)); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.wall-close-stack .gone { border: 1.5px dashed rgba(255, 255, 255, 0.3); }
.wall-close-stack .next { outline: 3px solid #fff; outline-offset: 2px; }
.wall-close-stack.held .b { box-shadow: 0 0 0 2px #f3d27a; }
.wall-close-stack.other { opacity: 0.6; }
.wall-close-arrow { position: absolute; top: -22px; font-weight: 800; font-size: 0.78rem; white-space: nowrap; }
.wall-close-say { font-size: 0.9rem; line-height: 1.45; max-width: 64ch; }
.wall-zoom-box .wall-pile.big .wall-map { width: min(300px, calc(100vw - 80px)); height: min(300px, calc(100vw - 80px)); }

/* --- 0029 stage 5: what a player might be going for, opened from their name ------------------------------------------- */
.seat-about { width: min(380px, 80vw); max-width: none; border-top: 5px solid var(--c, #f0c54e); }
.seat-about h4 { margin: 0 0 4px; font-family: var(--display, inherit); font-size: 1rem; }
.seat-about .about-from { font-size: 0.82rem; color: #5a5040; }
.about-line { border: 1px solid #e3d8bf; border-radius: 10px; padding: 7px 9px; background: #fff; margin: 6px 0; }
.about-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.about-rank { color: #8a6a1e; font-size: 0.8rem; }
.about-line .tile { --tile-scale: 0.4; }
.about-why { font-size: 0.84rem; margin: 5px 0 0; color: #3d3425; }
.about-careful { font-weight: 700; margin-top: 6px; }
.seat-about { max-height: min(360px, 55vh); overflow-y: auto; }

/* --- 0029 stage 6: the phone -------------------------------------------------------------------------------------------
   Opponents as short rows (stage 1), the question in the middle, all fourteen tiles in two rows, the rack's hint left
   out, and the card as a sheet that rises from the bottom over the table, closed to begin with. */
@media (max-width: 1000px) {
  .rack .hint { display: none; }
  .rack #hand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .rack #hand .tile { width: 100%; height: auto; aspect-ratio: 100 / 140; }
  .app:not(.panel-hidden) .panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 72vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35); padding-top: 10px; }
  .app:not(.panel-hidden) .panel::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; margin: 0 auto 8px;
    background: var(--line); }
  .panel-show { top: auto; bottom: 12px; left: 12px; position: fixed; z-index: 35; }
  .ask-go button { min-width: 140px; }
  /* a lesson on a phone (7 Oct): its words sit at the top, over the header and the far seat, clear of the rack, or low
     when the step points at the top of the table; only the lesson shows there, since a step that names a card line opens it on the table */
  body.lesson-on .app:not(.panel-hidden) .panel { top: 0; bottom: auto; max-height: 38vh; border-radius: 0 0 18px 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); padding-top: 6px; }
  body.lesson-on .app:not(.panel-hidden) .panel::before { display: none; }
  body.lesson-on.lesson-low .app:not(.panel-hidden) .panel { top: auto; bottom: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35); }       /* a step about the players or the corner: the words go low */
  body.lesson-on .panel > :not(#foldLesson) { display: none; }
  body.lesson-on .panel .fold.lesson { margin-bottom: 6px; }
  body.lesson-on .panel .fold.lesson .lesson-foot { position: sticky; bottom: -6px; background: var(--paper-2); padding: 8px 0 6px;
    margin-top: 0; box-shadow: 0 -10px 12px -8px rgba(0, 0, 0, 0.18); flex-wrap: nowrap; gap: 6px; }   /* a long step keeps Next in reach */
  body.lesson-on .panel .fold.lesson .lesson-foot button { padding: 8px 12px; white-space: nowrap; }
}
/* the More list opens toward the middle, never past the screen's edge, and is gone while shut */
.more-list { left: auto; right: 0; }
.more-helpers:not([open]) .more-list { display: none; }
/* a shared table in play: the chairs and the invitation folded to one line */
.lobby-box:has(> .lobby-fold) { padding: 6px 12px; }
.lobby-fold summary { cursor: pointer; font-weight: 700; padding: 4px 0; }

/* dragging a tile (30 Sep): the tile follows the pointer, the place it will land lights up */
.rack #hand .tile { touch-action: none; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; margin: 0; transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45); }
.rack #hand .tile.dragging { opacity: 0.3; }
.rack #hand .tile.drag-ready { transform: translateY(-6px); }
.centre.drop-ok, .table #ask.drop-ok { outline: 3px dashed #f3d27a; outline-offset: 4px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .drag-ghost { transform: none; } }
.pool-zoom { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; min-height: 0; padding: 5px; border-radius: 8px; line-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; }
.pool-zoom svg { width: 100%; height: 100%; }
.pool-zoom:focus-visible { outline: 3px solid #f3d27a; outline-offset: 2px; }
.pool { max-width: 640px; }

/* face-up sets on the side seats turned toward their owner, as at a real table (Jeff, 30 Sep: "they need to be rotated 90..
   and smaller"): each set a column of tiles lying on their side, Mort's tops toward him on the left, Joan's toward her
   on the right. A turned tile keeps its layout box, so its margins swap its width and height back. */
.seat-left .seat-set, .seat-right .seat-set { flex-direction: column; align-items: center; gap: 0; padding: 4px 2px; }
.seat-left .seat-set .tile, .seat-right .seat-set .tile {
  --tile-scale: 0.42;
  --turn-gap: calc((var(--tile-base-h) - var(--tile-base-w)) / 2 * var(--tile-scale) * var(--tile-size) * var(--fit) * var(--zoom, 1));
  margin: calc(var(--turn-gap) * -1 + 1px) var(--turn-gap);
}
.seat-left .seat-set .tile { transform: rotate(-90deg); }
.seat-right .seat-set .tile { transform: rotate(90deg); }
.seat-left .seat-sets, .seat-right .seat-sets { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.seat-sets[role="button"] { cursor: zoom-in; border-radius: 8px; }
.seat-sets[role="button"]:hover .seat-set { background: rgba(0, 0, 0, 0.26); }
.seat-sets[role="button"]:focus-visible { outline: 3px solid #f3d27a; outline-offset: 3px; }
.seat-across .seat-set .tile { --tile-scale: 0.42; }
@media (max-width: 1000px) {
  .seat-left .seat-set .tile, .seat-right .seat-set .tile { transform: none; margin: 0; --tile-scale: 0.4; }
  .seat-left .seat-set, .seat-right .seat-set { flex-direction: row; }
}
/* the side seats take only the width they need, so the middle has room for the whole pile in a few rows (30 Sep) */
@media (min-width: 1001px) {
  .around { grid-template-columns: auto minmax(0, 1fr) auto; }
  .centre .pool { max-width: none; }
}
/* your own face-up sets on the felt, just above your rack, as the others' sit in front of them */
.your-sets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.your-sets[hidden] { display: none; }
.your-sets .seat-set .tile { --tile-scale: 0.5; }
/* the speed beside the helpers, and giving up asked twice */
.table-speed { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; font-size: 0.85rem; color: #fff; flex-wrap: wrap; }
.speed-steps { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.4); }
.speed-steps button, .speed-rhythm { font: inherit; font-weight: 700; font-size: 0.82rem; min-height: 32px; padding: 4px 11px; border: 0;
  background: rgba(0, 0, 0, 0.28); color: #fff; cursor: pointer; box-shadow: none; border-radius: 0; }
.speed-steps button + button { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.speed-steps button[aria-pressed="true"], .speed-rhythm[aria-pressed="true"] { background: #fbf6ea; color: #2b2213; }
.speed-rhythm { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); }
.speed-steps button:disabled, .speed-rhythm:disabled { cursor: default; opacity: 0.75; }
.speed-steps button:focus-visible, .speed-rhythm:focus-visible { outline: 3px solid #f3d27a; outline-offset: -3px; }
#giveUp.armed { background: #b8332f; color: #fff; border-color: #b8332f; }
@media (max-width: 1000px) { .rack { padding-bottom: 56px; } }   /* room for the Show the card button under the speed row */

/* The player's area, smaller (Jeff, 1 Oct: "its huge and there is no room for our matches on the felt.. make the rack
   tiles smaller"): the rack's tiles at 86 percent, less wood round them, and the buttons a little lower (44 px is still
   a comfortable target). The felt above gets the height back. */
.rack { padding: 8px 14px 10px; }
.rack .rack-h { margin-bottom: 6px; }
@media (min-width: 1001px) { .rack #hand .tile { --tile-scale: 0.86; } }
.rack .actions { margin-top: 8px; gap: 8px; }
.rack .actions button { min-height: 44px; padding: 8px 14px; }
.rack .rack-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.rack .rack-h .table-speed { margin-left: auto; font-size: 0.85rem; text-shadow: none; }
.rack .rack-h .hint { flex: 1 1 100%; order: 9; }

/* Throw it, on the tile (1 Oct): the chosen tile rises and the button takes the gap under it */
.rack { position: relative; }
.rack .tiles .tile.to-throw, .rack .tiles .tile.to-throw.drawn, .rack .tiles .tile.to-throw.selected { transform: translateY(calc(-1 * var(--rise, 48px))); z-index: 3; }
.rack > .throw-tag { position: absolute; z-index: 4; margin: 0; padding: 2px; min-height: 0; border-radius: 8px; font-size: 0.8rem; font-weight: 800;
  line-height: 1.05; white-space: normal; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.3); }
.ask-how { font-weight: 500; font-size: 0.9rem; opacity: 0.9; }
/* the letter keys still work but are not printed on the buttons (12 Oct): Space and Esc are the two to know, in The keys */
.keys-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 80; width: min(420px, calc(100vw - 32px));
  background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
.keys-box h3 { margin: 0 0 10px; font-size: 1.05rem; }
.keys-box dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; }
.keys-box dt { font-weight: 800; }
.keys-box dd { margin: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) { .rack .tiles .tile { transition: transform 120ms ease-out; } }

/* the panel's tabs: the card, or the log of the hand (1 Oct) */
.panel-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper-2); }
.panel-tab { font: inherit; font-weight: 700; font-size: 0.9rem; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 0; background: none;
  color: var(--ink-soft); cursor: pointer; box-shadow: none; }
.panel-tab + .panel-tab { border-left: 1px solid var(--line); }
.panel-tab[aria-selected="true"] { background: var(--accent); color: #fff; }
.panel-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.panel .card-top { flex-wrap: wrap; margin-bottom: 8px; }
.panel #foldSay .say-log { max-height: none; }
.panel .fold[hidden] { display: none; }

/* An opponent's hand stands on a wooden rack, like your own (Jeff, 2 Oct: "i dont see anyones wood rack"; the first
   try was an edge a few pixels wide, which nobody could see). The backs stand on a ledge of wood with a raised lip:
   under the row for the player across, on the table side for the players at the sides. */
.seat-tiles:not(.face-up) { width: max-content; border-radius: 7px; padding: 5px 9px 11px;
  background:
    linear-gradient(180deg, transparent 0, transparent calc(100% - 11px), rgba(0, 0, 0, 0.22) calc(100% - 11px), transparent calc(100% - 8px)),
    linear-gradient(180deg, var(--wood-light), var(--wood) 55%, var(--wood-2));
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.32), 0 4px 10px rgba(0, 0, 0, 0.35); }
.seat-left .seat-tiles:not(.face-up) { padding: 9px 12px 9px 5px;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 12px), rgba(0, 0, 0, 0.22) calc(100% - 12px), transparent calc(100% - 9px)),
    linear-gradient(90deg, var(--wood-light), var(--wood) 55%, var(--wood-2));
  box-shadow: inset 1px 0 0 rgba(255, 240, 210, 0.35), inset -4px 0 0 rgba(0, 0, 0, 0.32), 0 4px 10px rgba(0, 0, 0, 0.35); }
.seat-right .seat-tiles:not(.face-up) { padding: 9px 5px 9px 12px;
  background:
    linear-gradient(270deg, transparent 0, transparent calc(100% - 12px), rgba(0, 0, 0, 0.22) calc(100% - 12px), transparent calc(100% - 9px)),
    linear-gradient(270deg, var(--wood-light), var(--wood) 55%, var(--wood-2));
  box-shadow: inset -1px 0 0 rgba(255, 240, 210, 0.35), inset 4px 0 0 rgba(0, 0, 0, 0.32), 0 4px 10px rgba(0, 0, 0, 0.35); }
@media (max-width: 1000px) {
  .seat-tiles:not(.face-up), .seat-left .seat-tiles:not(.face-up), .seat-right .seat-tiles:not(.face-up) { padding: 3px 5px 6px; background: linear-gradient(180deg, var(--wood-light), var(--wood) 55%, var(--wood-2));
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.3); }
}
.seat-tiles:not(.face-up):empty { display: none; }
.your-sets { cursor: zoom-in; }
/* the host's help for the table */
.table-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0; color: #fff; }
.table-help-label { font-weight: 700; font-size: 0.9rem; }
.table-help-says { flex: 1 1 100%; margin: 0; font-size: 0.85rem; opacity: 0.9; }

/* the end of a hand, said large in the middle of the table (2 Oct) */
.table-ask.ask-over { background: rgba(0, 0, 0, 0.34); border-radius: var(--radius); padding: 16px 18px; gap: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22); }
.table-ask.ask-over .ask-line { font-size: calc(1.7rem * var(--ui, 1)); font-weight: 800; letter-spacing: 0.01em; }
.table-ask.ask-won { box-shadow: inset 0 0 0 3px #f0c54e, 0 0 34px rgba(240, 197, 78, 0.35); }
.table-ask.ask-won .ask-line { color: #f6d77a; }
.over-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: flex-end; margin: 4px 0; }
.over-set { display: flex; gap: 2px; padding: 3px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.over-set .tile { --tile-scale: 0.56; }
.over-rest { background: none; }
.over-set .tile.winning { box-shadow: 0 0 0 3px #f0c54e, 0 0 0 6px rgba(255, 255, 255, 0.8); transform: translateY(-5px); }
.over-pay { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: calc(0.95rem * var(--ui, 1)); }
.over-pay-row { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.over-pay-row.you { font-weight: 800; font-size: 1.15em; flex: 1 1 100%; text-align: center; background: none; }
.over-pay-row.you.up { color: #f6d77a; }
/* the end-of-hand panel's own links read on its green (Jeff, 5 Oct: "the start a table link is so dark no one can see it") */
.over-friends a { color: #f6d77a; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.over-friends a:hover, .over-friends a:focus-visible { color: #fff3c4; }
.over-why { opacity: 0.9; }
.over-sitting { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.over-sitting-head { font-size: calc(0.85rem * var(--ui, 1)); opacity: 0.85; text-align: center; }
.over-shown { outline: 1px dashed rgba(255, 255, 255, 0.45); outline-offset: 2px; border-radius: 4px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.confetti span { position: absolute; top: -14px; left: var(--x); width: var(--w); height: calc(var(--w) * 1.6); border-radius: 2px; opacity: 0;
  animation: confetti-fall 2.1s cubic-bezier(0.2, 0.6, 0.4, 1) var(--d) forwards; }
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(78vh) rotate(var(--r)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* a dead hand, said in the middle with its reasons (2 Oct) */
.ask-dead { max-width: 60ch; padding: 10px 14px; border-radius: var(--radius); background: rgba(120, 20, 16, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 190, 180, 0.5);
  font-size: calc(0.98rem * var(--ui, 1)); line-height: 1.4; }
.ask-dead strong { font-size: 1.15em; }
.ask-dead p { margin: 6px 0 8px; opacity: 0.95; }
.ask-dead ul { margin: 6px 0 0; padding-left: 1.2em; text-align: left; }
.ask-dead button { min-height: 40px; padding: 6px 14px; }
.watch-bar label[hidden] { display: none; }

/* a call, said in the middle of the table for a moment (2 Oct) */
.callout { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 26; pointer-events: none; text-align: center; color: #fff;
  padding: 14px 24px; border-radius: 16px; background: rgba(18, 28, 20, 0.92); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 18px 44px rgba(0, 0, 0, 0.5);
  max-width: min(90%, 560px); animation: callout-show 2.6s ease-out forwards; }
.callout-top { font-size: calc(1.6rem * var(--ui, 1)); font-weight: 800; line-height: 1.25; }
.callout-sub { font-size: calc(1rem * var(--ui, 1)); opacity: 0.9; margin-top: 2px; }
.callout-skip { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.3); font-weight: 700; color: #f6d77a; }
.callout:has(.callout-skip) { animation-duration: 3.6s; }
@keyframes callout-show { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.seat-set.just-called { animation: set-glow 1.1s ease-in-out 3; border-radius: 8px; }
@keyframes set-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 215, 122, 0); } 50% { box-shadow: 0 0 0 5px rgba(246, 215, 122, 0.95), 0 0 22px rgba(246, 215, 122, 0.7); } }
.tile.tile-fly.call-fly { transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.7s ease-in; }
@media (prefers-reduced-motion: reduce) { .seat-set.just-called { animation: none; box-shadow: 0 0 0 3px rgba(246, 215, 122, 0.95); } .callout { animation: none; } }

/* A rack is as long as a rack is (Jeff, 2 Oct: "the bamboo racks on the opponents should stay the same length.. right
   now it shrinks with the number of tiles in it.. wrong"): room for thirteen backs, however many stand on it. */
.seat-across .seat-tiles:not(.face-up) { min-width: calc(13 * 22px + 12 * 3px + 18px); box-sizing: border-box; }
.seat-left .seat-tiles:not(.face-up), .seat-right .seat-tiles:not(.face-up) { min-height: calc(13 * 18px + 12 * 3px + 18px); box-sizing: border-box; }
.seat-tiles:not(.face-up):empty { display: flex; }
@media (max-width: 1000px) {
  .seat-across .seat-tiles:not(.face-up), .seat-left .seat-tiles:not(.face-up), .seat-right .seat-tiles:not(.face-up) { min-width: calc(13 * 14px + 12 * 3px + 10px); min-height: 0; }
}

/* The rack is nineteen places (2 Oct). Your own: nineteen columns, the tiles as wide as a column, so on a laptop they
   are smaller ("smaller tiles to fit 19"), and never wider than a tile was. An empty place takes a tile dropped on it. */
@media (min-width: 1001px) {
  #hand.slots { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 4px; align-items: end;
    max-width: calc(19 * var(--tile-base-w) * 0.86 * var(--tile-size) * var(--fit) + 18 * 4px); }
  #hand.slots .tile { width: 100%; height: auto; aspect-ratio: 100 / 140; }
  #hand.slots .rack-gap { aspect-ratio: 100 / 140; border-radius: 6px; }
  body.dragging-tile #hand.slots .rack-gap { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.12); }
}
/* an opponent's rack: nineteen places too, the backs where that player stood them */
.seat-back.none { visibility: hidden; }
.seat-across .seat-tiles:not(.face-up) { min-width: 0; }
.seat-left .seat-tiles:not(.face-up), .seat-right .seat-tiles:not(.face-up) { min-height: 0; }
.seat-left .seat-back, .seat-right .seat-back { height: 14px; }
@media (max-height: 800px) { .seat-left .seat-back, .seat-right .seat-back { height: 11px; } .seat-left .seat-tiles, .seat-right .seat-tiles { gap: 2px; } }
@media (max-width: 1000px) { .seat-back.none { display: none; } }

/* a side rack's backs are as thin as its nineteen places need to fit the height beside the discards (set by the page) */
.seat-left .seat-tiles:not(.face-up) .seat-back, .seat-right .seat-tiles:not(.face-up) .seat-back { height: var(--back-h-left, 14px); border-radius: 3px; }
.seat-right .seat-tiles:not(.face-up) .seat-back { height: var(--back-h-right, 14px); }
.ask-dead .dead-lines { opacity: 0.85; font-size: 0.92em; }
.ask-dead li + li { margin-top: 6px; }

/* the rack's name is the heading; the buttons beside it are not part of it (4 Oct) */
.rack .rack-h .rack-name { display: inline; margin: 0; font: inherit; color: inherit; }
.over-sitting .over-pay-row.up { color: #f6d77a; }
.over-sitting .over-pay-row.down { color: #f3d9cf; }

/* The floating Coach (11 Oct): a button labelled Coach that floats over the table, opens its box beside it and can be
   dragged anywhere; floating, it never changes the size of the middle */
.coach-dock { position: fixed; z-index: 44; touch-action: none; }   /* under the deal animation (45) */
.coach-dock[hidden] { display: none; }
.coach-bubble { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 10px 5px; border-radius: 16px;
  border: 2px solid #f3d98b; background: #fff8e6; color: #2c2414; cursor: grab; font: inherit;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); user-select: none; }
.coach-dock.dragging .coach-bubble { cursor: grabbing; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); }
.coach-bubble:focus-visible { outline: 3px solid #ffe3a8; outline-offset: 3px; }
.coach-face { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--felt, #2f5d3a);
  color: #fff8e6; font: 700 1.15rem/1 serif; }
.coach-word { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; }
.coach-dot { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #e0533d;
  border: 2px solid #fff8e6; display: none; }
.coach-dock.news .coach-dot { display: block; }
.coach-dock.news .coach-bubble { animation: coach-news 1.4s ease-in-out 2; }
@keyframes coach-news { 50% { box-shadow: 0 0 0 8px rgba(243, 217, 139, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35); } }
@media (prefers-reduced-motion: reduce) { .coach-dock.news .coach-bubble { animation: none; } }
.coach-box { position: absolute; left: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 24px)); max-height: 50vh; overflow-y: auto;
  background: #fff8e6; color: #2b2213; border-radius: 12px; padding: 10px 14px 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  font-size: 0.95rem; line-height: 1.45; text-align: left; }
.coach-box[hidden] { display: none; }
.coach-dock.open-left .coach-box { left: auto; right: 0; }
.coach-dock.open-up .coach-box { top: auto; bottom: calc(100% + 8px); }
.coach-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.coach-head strong { font-size: 0.85rem; letter-spacing: 0.04em; color: #7a5a12; }
.coach-x { border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #5c5445; padding: 2px 6px; border-radius: 6px; }
.coach-x:focus-visible { outline: 2px solid #7a5a12; }
.coach-body p { margin: 0 0 8px; }
.coach-box .coach-ask { margin-top: 2px; }
.coach-dock.docked { left: 12px; top: auto; bottom: 150px; }
.coach-dock.docked .coach-bubble { cursor: pointer; }

/* East, one mark on the dealer's nameplate (12 Oct) */
.east-mark { display: inline-flex; align-items: center; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.04em; line-height: 1;
  padding: 3px 7px; border-radius: 999px; color: #f3d27a; background: #3a2a10; border: 1px solid #f3d27a; }
/* the player the pass goes to: their nameplate lit, and an arrow beside the heading (12 Oct) */
.seat.pass-to .seat-name { outline: 3px solid #8fd3ff; outline-offset: 2px; box-shadow: 0 0 14px 2px rgba(143, 211, 255, 0.55); }
.pass-arrow { display: inline-block; font-size: 1.3em; line-height: 1; color: #8fd3ff; vertical-align: -0.08em; }
@media (prefers-reduced-motion: no-preference) {
  .seat.pass-to .seat-name { animation: pass-to-glow 1.6s ease-in-out 2; }
  @keyframes pass-to-glow { 50% { box-shadow: 0 0 22px 6px rgba(143, 211, 255, 0.8); } }
}

/* the tiles to keep glow (Jeff, 12 Oct: "you cant even really see it on the screen you need to make them glow"); steady,
   not pulsing, since several glow at once all hand long */
.rack .tiles .tile.wanted { box-shadow: 0 0 0 3px #6dffa0, 0 0 22px 8px rgba(90, 235, 140, 0.85), 0 6px 10px rgba(0, 0, 0, 0.3); }
.rack .tiles .tile.wanted.selected { box-shadow: 0 0 0 3px var(--accent), 0 0 22px 8px rgba(90, 235, 140, 0.85), 0 6px 10px rgba(0, 0, 0, 0.3); }
.coach-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.12); font-size: 0.86rem; line-height: 1.4; }

/* the rack in ordinary play (12 Oct): no title row, the tiles first, one row under them */
.rack.plain .rack-h { display: none; }
.rack-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.rack-row .actions { margin-top: 0; flex: 1 1 auto; }
.rack-east:empty { display: none; }
.rack-row .panel-show.in-rack { position: static; }
.more-list .table-speed { color: #2b2213; margin-left: 0; }
.more-list .speed-steps { border-color: rgba(43, 34, 19, 0.3); }
.more-list .speed-steps button, .more-list .speed-rhythm { background: rgba(43, 34, 19, 0.08); color: #2b2213; }
.more-list .speed-steps button + button { border-left-color: rgba(43, 34, 19, 0.2); }
.more-list .speed-steps button[aria-pressed="true"], .more-list .speed-rhythm[aria-pressed="true"] { background: #2b2213; color: #fbf6ea; }
.more-list .speed-rhythm { border-color: rgba(43, 34, 19, 0.3); }
.more-list button[aria-pressed="true"]:not(.speed-steps button):not(.speed-rhythm) { font-weight: 700; }
/* More sits at the left of the row now, so its list opens up and to the right, inside the screen */
.rack-row .more-list { left: 0; right: auto; min-width: 330px; max-width: calc(100vw - 32px); }
.more-list .speed-steps button { white-space: nowrap; }
.more-list .table-speed { gap: 6px 8px; }

/* your own nameplate, at the start of the row under your tiles (12 Oct) */
.rack-me:empty { display: none; }
.me-name { cursor: pointer; }
.me-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.me-form input { font: inherit; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); width: 14ch; }
.me-form button { padding: 5px 12px; }
.me-note { color: #fff; font-size: 0.85rem; flex-basis: 100%; }
.me-note:empty { display: none; }
.rack-me .me-name { background: rgba(0, 0, 0, 0.35); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: none; padding: 4px 14px; min-height: 32px; font-weight: 700; }
.rack-me .me-name:hover { background: rgba(0, 0, 0, 0.5); }

/* the server's "no", floating over the top of the table (12 Oct) */
.table-error { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border-radius: 12px; background: #fbf6ea; color: #2b2213;
  border-left: 5px solid #c0432f; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); font-weight: 600; line-height: 1.4; }
.table-error[hidden] { display: none; }
.table-error-text { flex: 1 1 auto; }
.table-error .button { white-space: nowrap; }
.table-error-x { background: none; border: 0; box-shadow: none; font-size: 1.3rem; line-height: 1; padding: 4px 6px; cursor: pointer; color: inherit; }
.table-error a.button { background: #2b2213; color: #fbf6ea; padding: 7px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; }
.table-error a.button:focus-visible { outline: 3px solid #f3d27a; outline-offset: 2px; }
/* the end of a hand, trimmed (12 Oct): your money in one bold line, the sitting score small */
.over-money { font-weight: 700; }
.over-sitting { display: block; font-size: calc(0.85rem * var(--ui, 1)); opacity: 0.85; text-align: center; }

/* the header's members-only links (13 Oct): the link rules above set display, which would beat the hidden attribute */
header .site-links [hidden] { display: none !important; }
/* the site's menus in the table's bar (13 Oct): quiet like the site's header, not the bordered table Menu button */
header .site-links details.menu > summary { border: 0; background: transparent; font-weight: 700; }
header .site-links details.menu[open] > summary { background: var(--paper-2); }
header .site-links details.menu > summary::after { width: 0.4rem; height: 0.4rem; margin: 0; border: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.6; }
header .site-links { flex-wrap: nowrap; }
@media (max-width: 1240px) {
  header a.home h1 { display: none; }
  header .site-links a, header .site-links details.menu > summary { padding: 6px 9px; }
}
header .site-bar .site-links a, header .site-bar #newGame { white-space: nowrap; }
@media (max-width: 1240px) { header .site-bar #cardName { display: none; } }   /* the card and Change the card are in the Menu */

/* the first-game certificate offer at the end of the first game (13 Oct) */
.over-first { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 214, 102, 0.16); border: 1px solid rgba(255, 214, 102, 0.55); font-size: 0.95rem; line-height: 1.4; }
.over-first strong { color: #ffe08a; }
.over-first-do { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; align-items: center; }
.over-first-do a { color: inherit; text-decoration: underline; }
.over-first-do a.primary { text-decoration: none; background: #ffd666; color: #2b2200; font-weight: 700; padding: 6px 12px; border-radius: 8px; }

/* a lesson step's question (13 Oct, the rewritten first lesson): two answers to tap, the right one lets Next on */
.lesson-q { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lesson-q-ask { margin: 0 0 10px; font-weight: 700; font-size: 1.05em; }
.lesson-q-answers { display: flex; flex-direction: column; gap: 8px; }
.lesson-q-answer { text-align: left; padding: 10px 12px; min-height: 44px; font-size: 1em; white-space: normal; }
.lesson-q-answer.right { outline: 3px solid var(--good); outline-offset: 1px; }
.lesson-q-answer.wrong { outline: 3px solid var(--warn); outline-offset: 1px; }
.lesson-q-said { margin: 10px 0 0; min-height: 1.3em; }
.lesson-q-said.is-right { color: var(--good); font-weight: 700; }
.lesson-q-said.is-wrong { color: var(--warn); }
#zoom .lesson-q { max-width: 62ch; margin: 12px auto 0; background: var(--paper); color: var(--ink); }
.zoom-note { color: var(--paper); text-align: center; font-weight: 700; font-size: 1.15em; margin: 10px 0 0; font-variant-numeric: tabular-nums; }

/* building a card line (14 Oct): the line sits on paper, as a printed card does, each printed group directly over its
   own spots; empty spots are dashed outlines the size of a tile; the tray sits under the words */
.lesson-build { display: grid; gap: 12px; justify-items: center; margin: 12px auto 0; max-width: 100%; }
.build-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; background: var(--paper);
  border-radius: 12px; padding: 12px 16px; }
.build-group { display: grid; gap: 6px; justify-items: center; }
.build-print { font: 800 1.9rem/1 "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: 0.08em; }
.build-spots { display: flex; gap: 4px; }
.build-spot { min-width: calc(var(--tile-base-w) * 0.62 * var(--zoom, 1)); min-height: calc(var(--tile-base-h) * 0.62 * var(--zoom, 1));
  border-radius: 7px; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); display: grid; place-items: center; }
.build-spot.filled { border-color: transparent; }
.build-spot .tile { --tile-scale: 0.62; }
.build-cap { margin: 2px 0 0; color: #fff; font-weight: 700; }
.build-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.build-tray .tile { cursor: pointer; }
.build-tray .tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lesson-build > .lesson-q-said { background: var(--paper); border-radius: 10px; padding: 8px 14px; max-width: 62ch; }
.lesson-build > .lesson-q-said:empty { display: none; }
/* choosing a rack or a line: each choice a paper button, its printed line over its tiles */
.choice-list { display: grid; gap: 10px; }
.lesson-choice { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 10px 12px; min-height: 44px;
  border-radius: 10px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font-size: 1em; }
.lesson-choice .choice-label { font-weight: 800; letter-spacing: 0.04em; }
.lesson-choice .choice-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.lesson-choice .choice-group { display: flex; gap: 2px; }
.lesson-choice.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--paper)); }
.lesson-choice.wrong { border-color: var(--warn); }
/* a picture step (14 Oct): the side shows the lesson box only, never the card list beside the picture */
body.lesson-pictured .panel > :not(#foldLesson) { display: none; }
@media (max-width: 600px) {
  .build-line { gap: 8px 12px; padding: 10px; }
  .build-print { font-size: 1.15rem; }
  .build-spots { gap: 2px; }
  .build-spot { min-width: calc(var(--tile-base-w) * 0.42); min-height: calc(var(--tile-base-h) * 0.42); border-radius: 5px; }
  .build-spot .tile { --tile-scale: 0.42; }
  .build-tray { gap: 6px; }
  .build-tray .tile { --tile-scale: 0.62; }
}
/* a lesson clip (14 Oct): as wide as the picture allows, the captions large enough to read at arm's length */
.lesson-video { display: block; width: 100%; max-width: 1100px; max-height: 62vh; margin: 8px auto 0; border-radius: 12px;
  background: #000; aspect-ratio: 16 / 9; }
.lesson-video::cue { font-size: 1.15em; line-height: 1.35; background: rgba(20, 28, 24, 0.86); color: #fff; }

/* one quiet ad at the foot of the card panel (15 Oct): labelled, never over the tiles */
.panel .ad-slot { margin-top: 12px; display: grid; gap: 4px; }
.panel .ad-label { font-size: 0.72rem; color: var(--ink-soft, #6b6150); letter-spacing: 0.04em; }
.ask-go .collection-note a { color: #ffe3a8; font-weight: 700; }