/* frontend/yutnori.css — Yut Nori board, both layouts and both schemes.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Pachisi / Ramp / Crown & Anchor
 * precedent: a board suite that slices its block out of style.css has broken on someone
 * else's append (the Senet "slice to END OF FILE" trap), and a stylesheet of its own can
 * neither be swallowed by nor swallow the next game's block.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable in the two scheme blocks, lifted from the mock's pal().
 * CLASSIC is cloth, brush ink and brass; ARCADE is the same geometry in glass.
 * ⛔ Game accents are LITERALS: `--pgr-accent` IS `--pgr-line` in Classic
 * (layout-schemes.js), so deriving from it goes invisible silently (the Senet finding).
 * ⛔ The Arcade hook is the CLASS `gm-arcade` that GameTheme.apply toggles on the
 * SCREEN — never `is-arcade`, never `[data-scheme]` (the Pachisi finding).
 * ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the route sheet and the
 * capture banner are siblings of `.wrap`, outside `.yn-root`, and a var() fallback is
 * not a scope (Pachisi again).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every band has a FIXED height in every phase (the board is the one flexible band on
 * the phone, sized once by ynFitPhone). The chain chip, the throw-again strip, the hint
 * row, the result block and the feed hold their space whether lit or not. `min-height`
 * is not a reservation.
 */

/* ── CLASSIC ─────────────────────────────────────────────────────────────── */
#yutnori-game-screen, #yutnori-mp-game-screen, .yn-root {
  --yn-table: radial-gradient(120% 100% at 50% -10%, #3b332a 0%, #272119 55%, #161210 100%);
  --yn-cloth: linear-gradient(150deg, #dcd0b4, #c2b193);
  --yn-cloth-edge: rgba(58, 46, 32, .5);
  --yn-line: rgba(52, 42, 30, .5);
  --yn-stn: #f2ebd9;
  --yn-stn-line: rgba(52, 42, 30, .62);
  --yn-stn-hot: #e9dcb8;
  --yn-stn-hot-line: rgba(52, 42, 30, .8);
  --yn-panel: #efe6d0;
  --yn-panel-line: rgba(72, 58, 38, .28);
  --yn-txt: #f1e8d7;
  --yn-dim: rgba(241, 232, 215, .6);
  --yn-ink: #33291c;
  --yn-ptxt: #3a2f20;
  --yn-pdim: rgba(58, 47, 32, .66);
  --yn-chrome: rgba(255, 255, 255, .055);
  --yn-chrome-line: rgba(226, 208, 177, .24);
  --yn-accent: #2f6f62;
  --yn-gold: #9d7519;
  --yn-danger: #96382e;
  --yn-diebg: linear-gradient(180deg, #f8f2e1, #e6dabd);
  --yn-btn: linear-gradient(180deg, #b98f2c, #95701c);
  --yn-btn-txt: #241a0c;
  --yn-on-dark: #f6efdd;
  --yn-on-gold: #241a0c;
  --yn-count-txt: #f2e9d6;
  --yn-glow: 0 0 0 rgba(0, 0, 0, 0);
  --yn-soft-glow: 0 0 0 rgba(0, 0, 0, 0);
  --yn-sheet-bg: #efe6d0;
  --yn-scrim: rgba(24, 18, 10, .38);
  --yn-blur: none;
  --yn-p0: #2f4b7c;
  --yn-p1: #9c3b32;
  --yn-p2: #4c6b46;
  --yn-p3: #a8842c;
  --yn-stroke-c: rgba(20, 14, 8, .7);
}

/* ── ARCADE — the same board, luminous ───────────────────────────────────── */
#yutnori-game-screen.gm-arcade, #yutnori-mp-game-screen.gm-arcade, .gm-arcade .yn-root {
  --yn-table: radial-gradient(120% 100% at 50% -10%, #2a1d6e 0%, #150e3c 55%, #080618 100%);
  --yn-cloth: linear-gradient(150deg, rgba(94, 72, 220, .42), rgba(18, 12, 54, .85));
  --yn-cloth-edge: rgba(140, 170, 255, .34);
  --yn-line: rgba(160, 190, 255, .34);
  --yn-stn: rgba(160, 190, 255, .13);
  --yn-stn-line: rgba(160, 190, 255, .5);
  --yn-stn-hot: rgba(255, 210, 74, .16);
  --yn-stn-hot-line: rgba(255, 210, 74, .62);
  --yn-panel: rgba(120, 150, 255, .12);
  --yn-panel-line: rgba(150, 180, 255, .28);
  --yn-txt: #eaf0ff;
  --yn-dim: rgba(214, 228, 255, .62);
  --yn-ink: #dce7ff;
  --yn-ptxt: #eaf0ff;
  --yn-pdim: rgba(214, 228, 255, .66);
  --yn-chrome: rgba(120, 150, 255, .12);
  --yn-chrome-line: rgba(150, 180, 255, .28);
  --yn-accent: #41e8ff;
  --yn-gold: #ffd24a;
  --yn-danger: #ff4d7d;
  --yn-diebg: rgba(255, 255, 255, .12);
  --yn-btn: linear-gradient(180deg, #48e6ff, #1f8fd6);
  --yn-btn-txt: #05132b;
  --yn-on-dark: #05132b;
  --yn-on-gold: #05132b;
  --yn-count-txt: #0a0a1a;
  --yn-glow: 0 0 26px rgba(65, 232, 255, .55);
  --yn-soft-glow: 0 0 16px rgba(65, 232, 255, .35);
  /* ⛔ AN OPAQUE SHEET: --yn-panel is a TINT in Arcade (the Can't Stop plate lesson) */
  --yn-sheet-bg: #1c1650;
  --yn-scrim: rgba(8, 6, 24, .42);
  --yn-blur: blur(6px);
  --yn-p0: #5b9dff;
  --yn-p1: #ff5d7a;
  --yn-p2: #3ce6a8;
  --yn-p3: #ffc93d;
  --yn-stroke-c: rgba(5, 8, 30, .85);
}

/* ── the shell (MOBILE first — unscaled, a separate arrangement) ─────────── */
.yn-root {
  --yn-bs: 346px;
  /* station and piece sizes follow the board, so a short phone shrinks them together */
  --yn-corner: calc(var(--yn-bs) * .0954);
  --yn-edge: calc(var(--yn-bs) * .0723);
  --yn-diag: calc(var(--yn-bs) * .0694);
  --yn-centre: calc(var(--yn-bs) * .1156);
  --yn-tok: calc(var(--yn-bs) * .0434);
  --yn-lift: calc(var(--yn-bs) * .0092);
  --yn-die: 44px;
  position: relative;
  box-sizing: border-box;
  height: var(--yn-phone-h, 780px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 8px;
  background: var(--yn-table);
  color: var(--yn-txt);
  border-radius: 22px;
  overflow: hidden;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.yn-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.yn-root button { font-family: inherit; }
.yn-dsk { display: none; }
.yn-cap { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--yn-pdim); font-weight: 700; white-space: nowrap; }

/* On a phone the three columns dissolve into the root's single column. */
.yn-body, .yn-railL, .yn-centre, .yn-railR { display: contents; }
.yn-legend { display: none; }

/* ── head ───────────────────────────────────────────────────────────────── */
.yn-head { flex: none; height: 30px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.yn-turn {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--yn-txt);
  background: var(--yn-chrome); box-shadow: inset 0 0 0 1px var(--yn-chrome-line);
  min-width: 0; overflow: hidden;
  /* ⭐ LOCKED: a FIXED width, sized for the longest seat name ("Kestrel’s turn") — the pill
   * changed width with whose turn it was and shoved the badge beside it (board suite §7). */
  flex: none; width: 128px;
}
.yn-turn[data-you="1"] { background: color-mix(in oklab, var(--yn-accent) 22%, transparent); box-shadow: inset 0 0 0 1px var(--yn-accent); }
.yn-turn .yn-tok { --yn-tsz: 11px; }
.yn-chain {
  /* a FIXED width, not min-width: "throw 1" and "throw 2" are different widths */
  flex: none; height: 26px; width: 70px; padding: 0 6px; overflow: hidden; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: transparent; box-shadow: inset 0 0 0 1px var(--yn-chrome-line); opacity: .25;
}
.yn-chain[data-on="1"] { color: var(--yn-gold); box-shadow: inset 0 0 0 1px var(--yn-gold); opacity: 1; }
.yn-headspace { flex: 1; min-width: 0; }
.yn-badge {
  flex: none; padding: 5px 7px; border-radius: 7px; font-size: 8.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; color: var(--yn-dim); box-shadow: inset 0 0 0 1px var(--yn-chrome-line);
}
.yn-menu {
  display: none; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; align-items: center; justify-content: center;
  font-size: 12px; color: var(--yn-txt); background: var(--yn-chrome); box-shadow: inset 0 0 0 1px var(--yn-chrome-line);
}
.yn-info {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--yn-txt); background: var(--yn-chrome);
  box-shadow: inset 0 0 0 1px var(--yn-chrome-line);
}

/* ── side cards ─────────────────────────────────────────────────────────── */
.yn-sides { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.yn-side {
  min-width: 0; height: 44px; padding: 4px 7px; border-radius: 11px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--yn-panel); box-shadow: inset 0 0 0 1px var(--yn-panel-line); backdrop-filter: var(--yn-blur);
}
.yn-root[data-seats="3"] .yn-side, .yn-root[data-seats="4"] .yn-side { height: 36px; }
.yn-side[data-ci="0"] { --yn-pc: var(--yn-p0); } .yn-side[data-ci="1"] { --yn-pc: var(--yn-p1); }
.yn-side[data-ci="2"] { --yn-pc: var(--yn-p2); } .yn-side[data-ci="3"] { --yn-pc: var(--yn-p3); }
.yn-side[data-active="1"] { box-shadow: inset 0 0 0 2px var(--yn-pc), var(--yn-soft-glow); }
.yn-side[data-enter="1"] { cursor: pointer; box-shadow: inset 0 0 0 2px var(--yn-accent), var(--yn-soft-glow); }
.yn-side[data-enter="1"][data-sel="1"] { background: color-mix(in oklab, var(--yn-accent) 22%, var(--yn-panel)); }
.yn-sidehead { display: none; }
.yn-member { display: flex; align-items: center; gap: 5px; min-width: 0; }
.yn-av {
  flex: none; position: relative; width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--yn-pc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--yn-pc) 45%, transparent);
}
.yn-av .yn-tok { --yn-tsz: 13px; }
.yn-root[data-seats="3"] .yn-av, .yn-root[data-seats="4"] .yn-av { width: 18px; height: 18px; }
.yn-mcol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yn-mname { font-size: 11px; font-weight: 700; color: var(--yn-ptxt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yn-mseat { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--yn-pdim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yn-root[data-seats="3"] .yn-mseat, .yn-root[data-seats="4"] .yn-mseat { display: none; }
.yn-traybox { flex: none; display: flex; gap: 2px; }
.yn-tray { --yn-tsz: 9px; }
.yn-tray[data-state="home"] { box-shadow: 0 0 0 2px color-mix(in oklab, var(--yn-gold) 80%, transparent); }
.yn-tray[data-state="board"] { opacity: .22; }
.yn-tray[data-state="wait"] { opacity: .72; }
/* 🌐 ONLINE — a 2 vs 2 card carries BOTH players on its one member row (the card keeps its locked
 * height): two silhouettes in the side's colour, the one on the clock outlined; a leaver dims. */
.yn-side[data-pair="1"] .yn-member { gap: 3px; }
.yn-side[data-pair="1"] .yn-av + .yn-mcol { margin-left: 2px; }
.yn-av[data-on="1"] { box-shadow: inset 0 0 0 2px var(--yn-pc); }
.yn-av[data-left="1"], .yn-side[data-left="1"] .yn-traybox { opacity: .35; }
.yn-side[data-left="1"] { box-shadow: inset 0 0 0 1px var(--yn-panel-line); }

/* ── board ──────────────────────────────────────────────────────────────── */
.yn-boardwrap {
  flex: none; align-self: center; position: relative;
  width: var(--yn-bs); height: var(--yn-bs); border-radius: 16px; background: var(--yn-cloth);
  box-shadow: inset 0 0 0 1px var(--yn-cloth-edge), 0 18px 40px -22px rgba(0, 0, 0, .7);
}
.yn-board { position: absolute; inset: 0; }
.yn-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.yn-lines rect, .yn-lines line { fill: none; stroke: var(--yn-line); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.yn-chevs, .yn-dots, .yn-stations { position: absolute; inset: 0; }
/* the dots ride ABOVE the stations (a dot under a station's fill is no dot at all) */
.yn-dots { z-index: 9; pointer-events: none; }
.yn-chev {
  position: absolute; width: 6px; height: 6px;
  border-top: 1.5px solid var(--yn-ink); border-right: 1.5px solid var(--yn-ink); opacity: .46;
  transform: translate(-50%, -50%) rotate(var(--yn-ang));
}
.yn-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 6;
  background: var(--yn-accent); opacity: .8; pointer-events: none;
}
.yn-dot[data-route="B"] { background: var(--yn-gold); }
.gm-arcade .yn-dot { box-shadow: 0 0 10px currentColor; }

.yn-st {
  --yn-d: var(--yn-edge);
  position: absolute; width: var(--yn-d); height: var(--yn-d); margin-left: calc(var(--yn-d) / -2); margin-top: calc(var(--yn-d) / -2);
  border-radius: 50%; background: var(--yn-stn); box-shadow: inset 0 0 0 1px var(--yn-stn-line); z-index: 8;
}
.yn-st[data-kind="corner"] { --yn-d: var(--yn-corner); }
.yn-st[data-kind="diag"] { --yn-d: var(--yn-diag); }
.yn-st[data-kind="centre"] { --yn-d: var(--yn-centre); }
/* ⛔ Y1 — the DOUBLE RING marks a FORK (ynForks), not a corner. r15 and r0 are corner-sized, single-ringed. */
.yn-st[data-fork="1"] { background: var(--yn-stn-hot); box-shadow: inset 0 0 0 1.5px var(--yn-stn-hot-line); }
.yn-ring { display: none; }
.yn-st[data-fork="1"] .yn-ring {
  display: block; position: absolute; inset: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--yn-stn-hot-line); opacity: .5; pointer-events: none;
}
.yn-st[data-start="1"] { box-shadow: inset 0 0 0 2px var(--yn-stn-line); }
.yn-st[data-tap="1"] { cursor: pointer; }
.yn-lab {
  position: absolute; transform: translate(-50%, 0); z-index: 9; white-space: nowrap; pointer-events: none;
  font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--yn-ink); opacity: .6;
}
.yn-lab-centre { margin-top: calc(var(--yn-centre) / 2 + 4px); }
.yn-lab-start { margin-top: calc(var(--yn-corner) / 2 + 3px); opacity: .72; transform: translate(-78%, 0); }

/* ── pieces ─────────────────────────────────────────────────────────────── */
.yn-tok {
  --yn-tsz: var(--yn-tok);
  --yn-pc: var(--yn-p0);
  --yn-stroke: drop-shadow(.7px 0 0 var(--yn-stroke-c)) drop-shadow(-.7px 0 0 var(--yn-stroke-c)) drop-shadow(0 .7px 0 var(--yn-stroke-c)) drop-shadow(0 -.7px 0 var(--yn-stroke-c));
  position: absolute; left: 50%; top: 50%; width: var(--yn-tsz); height: var(--yn-tsz); display: block; font-style: normal;
  background: linear-gradient(158deg, color-mix(in oklab, var(--yn-pc) 74%, #ffffff), color-mix(in oklab, var(--yn-pc) 88%, #000000));
  border-radius: 50%;
  /* a stack: each layer lifted; the group of stacks on one station fans a little sideways */
  transform: translate(-50%, -50%)
    translate(calc((var(--pi, 0) - (var(--pn, 1) - 1) / 2) * 3px),
              calc(var(--yn-lift) * ((var(--sn, 1) - 1) / 2 - var(--k, 0)) * 1.1));
  /* ⛔ FOUR drop-shadows, NOT a border: two silhouettes are clip-path polygons, and a
   * border would draw a rectangle around a triangle (the Senet playtest fix). */
  filter: var(--yn-stroke) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4));
  transition: opacity .2s;
}
.yn-tok[data-ci="0"] { --yn-pc: var(--yn-p0); } .yn-tok[data-ci="1"] { --yn-pc: var(--yn-p1); }
.yn-tok[data-ci="2"] { --yn-pc: var(--yn-p2); } .yn-tok[data-ci="3"] { --yn-pc: var(--yn-p3); }
.yn-tok[data-si="1"] { border-radius: 26%; }
.yn-tok[data-si="2"] { border-radius: 0; clip-path: polygon(50% 5%, 95% 93%, 5% 93%); }
.yn-tok[data-si="3"] { border-radius: 0; clip-path: polygon(26% 3%, 74% 3%, 98% 50%, 74% 97%, 26% 97%, 2% 50%); }
.yn-tok[data-top="1"]::after {
  content: ''; position: absolute; left: 14%; right: 46%; top: 12%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, .5); opacity: .75;
}
.yn-tok-flat { position: relative; left: auto; top: auto; transform: none; flex: none; display: inline-block; }
/* ⛔ `filter` is ONE property: every state that sets its own must re-include the stroke. */
.yn-movable { filter: var(--yn-stroke) drop-shadow(0 0 2px var(--yn-accent)) drop-shadow(0 0 2px var(--yn-accent)); animation: yn-pulse 1.6s ease-in-out infinite; }
.yn-dim { opacity: .42; }
.yn-ghost { opacity: .3; filter: none; }
.yn-hopping { filter: var(--yn-stroke) drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
@keyframes yn-pulse { 50% { filter: var(--yn-stroke) drop-shadow(0 0 4px var(--yn-accent)) drop-shadow(0 0 4px var(--yn-accent)); } }

.yn-count {
  position: absolute; right: -4px; bottom: -3px; z-index: 20; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800; font-style: normal;
  background: var(--yn-ink); color: var(--yn-count-txt); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8);
}
.yn-count[data-risk="1"] { background: var(--yn-danger); color: var(--yn-on-dark); }
.yn-risk {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 22; white-space: nowrap; pointer-events: none;
  padding: 1px 5px; border-radius: 999px; background: var(--yn-danger); color: var(--yn-on-dark);
  font-size: 7.5px; font-weight: 800; letter-spacing: .06em;
}
.yn-target {
  --yn-tc: var(--yn-accent);
  position: absolute; left: 50%; top: 50%; width: calc(var(--yn-d) + 11px); height: calc(var(--yn-d) + 11px);
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 14; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--yn-tc); background: color-mix(in oklab, var(--yn-tc) 10%, transparent);
}
.yn-target[data-kind="B"], .yn-target[data-kind="home"] { --yn-tc: var(--yn-gold); }
.yn-target[data-kind="capture"] { --yn-tc: var(--yn-danger); }
.yn-target[data-sel="1"] { box-shadow: inset 0 0 0 2.5px var(--yn-tc), var(--yn-glow); background: color-mix(in oklab, var(--yn-tc) 22%, transparent); }
.yn-tlab {
  transform: translateY(9px); padding: 1px 5px; border-radius: 999px; white-space: nowrap;
  background: var(--yn-tc); color: var(--yn-on-dark); font-size: 8px; font-weight: 800; letter-spacing: .04em;
}
.yn-target[data-kind="B"] .yn-tlab, .yn-target[data-kind="home"] .yn-tlab { color: var(--yn-on-gold); }
/* the 44px hit slug — may overlap neighbours because inactive stations take no taps */
.yn-hit { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; z-index: 30; }

/* ── feed ───────────────────────────────────────────────────────────────── */
.yn-feed {
  flex: none; height: 34px; border-radius: 9px; background: var(--yn-panel); box-shadow: inset 0 0 0 1px var(--yn-panel-line);
  display: flex; align-items: center; gap: 9px; padding: 0 10px; min-width: 0; backdrop-filter: var(--yn-blur);
}
.yn-feedtag { flex: none; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--yn-pdim); }
.yn-feedtxt { flex: 1 1 0%; min-width: 0; width: 0; font-size: 11px; line-height: 1.3; color: var(--yn-ptxt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── throw panel ────────────────────────────────────────────────────────── */
.yn-throw {
  flex: none; margin-top: auto; background: var(--yn-panel); border-radius: 14px; padding: 8px 8px 9px;
  display: flex; flex-direction: column; gap: 5px; box-shadow: inset 0 0 0 1px var(--yn-panel-line); backdrop-filter: var(--yn-blur); min-width: 0;
}
.yn-slotsrow { display: flex; align-items: stretch; gap: 5px; min-width: 0; }
.yn-sticks { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.yn-stickwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.yn-stick { width: var(--yn-die); height: var(--yn-die); display: flex; align-items: center; justify-content: center; }
.yn-stick[data-lit="0"] { opacity: .45; }
.yn-die-fallback { display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--yn-diebg); color: var(--yn-ink); }
.yn-stickcap { height: 10px; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--yn-pdim); }
.yn-result {
  flex: none; width: 108px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 6px;
  background: color-mix(in oklab, var(--yn-ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--yn-panel-line);
}
.gm-arcade .yn-result { background: color-mix(in oklab, var(--yn-ink) 14%, transparent); }
.yn-result[data-big="1"] { background: color-mix(in oklab, var(--yn-gold) 24%, transparent); box-shadow: inset 0 0 0 2px var(--yn-gold), var(--yn-glow); }
.yn-resnum { display: flex; align-items: baseline; gap: 6px; }
.yn-resnum small { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--yn-pdim); font-weight: 800; }
.yn-resnum b { font-size: 32px; font-weight: 800; line-height: 1; color: var(--yn-ptxt); font-variant-numeric: tabular-nums; }
.yn-resside { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
/* ⛔ A FIXED LINE BOX: the Korean name (모, 윷…) falls back to a CJK face with taller
 * metrics, and an auto line grew the whole throw band 1px the instant a name landed
 * (board suite §7, phone). */
.yn-resside b { height: 15px; line-height: 15px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--yn-ptxt); white-space: nowrap; }
.yn-resside span { height: 11px; font-size: 8.5px; line-height: 11px; font-weight: 700; color: var(--yn-pdim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.yn-result[data-big="1"] small, .yn-result[data-big="1"] b, .yn-result[data-big="1"] span { color: var(--yn-gold); }
.yn-tally { height: 13px; font-size: 10px; line-height: 13px; text-align: center; font-weight: 600; color: var(--yn-pdim); white-space: nowrap; }
/* ⭐ A BADGE, NOT A BUTTON — tinted, gold TEXT, no pointer (the Senet playtest). */
.yn-again {
  flex: none; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; overflow: hidden; cursor: default;
  color: var(--yn-pdim); box-shadow: inset 0 0 0 1px var(--yn-panel-line); opacity: .45;
}
.yn-again[data-on="1"] { color: var(--yn-gold); background: color-mix(in oklab, var(--yn-gold) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--yn-gold); opacity: 1; }
.yn-scale { font-size: 11px; line-height: 1.55; color: var(--yn-pdim); }
.yn-scale b { color: var(--yn-gold); font-weight: 800; }
.yn-throwspace { display: none; }
.yn-hint {
  flex: none; height: 42px; overflow: hidden; border-radius: 10px; padding: 5px 9px; display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; line-height: 1.3; font-weight: 500; color: var(--yn-pdim);
  background: color-mix(in oklab, var(--yn-ink) 6%, transparent);
}
.gm-arcade .yn-hint { background: color-mix(in oklab, var(--yn-ink) 10%, transparent); }
.yn-hint[data-tone="warn"] { color: var(--yn-danger); font-weight: 700; background: color-mix(in oklab, var(--yn-danger) 16%, transparent); box-shadow: inset 0 0 0 1px var(--yn-danger); }
.yn-hint[data-tone="gold"] { color: var(--yn-gold); font-weight: 700; }
.yn-hint[data-tone="carry"] { padding: 4px 5px 4px 9px; box-shadow: inset 0 0 0 1px var(--yn-accent); }
.yn-carrytxt { flex: 1; min-width: 0; font-weight: 700; color: var(--yn-ptxt); overflow: hidden; }
.yn-carrybtns { flex: none; display: flex; gap: 5px; }
.yn-carrybtn {
  height: 32px; padding: 0 9px; border-radius: 9px; border: 0; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap;
  background: transparent; color: var(--yn-ptxt); box-shadow: inset 0 0 0 1.5px var(--yn-pdim);
}
.yn-carrybtn[data-emph="1"] { background: var(--yn-btn); color: var(--yn-btn-txt); box-shadow: none; }
.yn-btn {
  flex: none; height: 50px; border-radius: 13px; border: 0; cursor: pointer; padding: 0 12px;
  font-size: 15px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--yn-btn); color: var(--yn-btn-txt); box-shadow: var(--yn-soft-glow);
}
.yn-btn:disabled { cursor: default; background: transparent; color: var(--yn-pdim); box-shadow: inset 0 0 0 1px var(--yn-pdim); opacity: .55; }

/* ── screen-level siblings of the board ──────────────────────────────────────
 * ⛔⛔ NOTHING INSIDE THE BOARD IS position:fixed — on desktop `.yn-root` carries
 * BoardFit's scale transform and would trap it. The route sheet and the capture
 * banner are siblings of `.wrap`, inside the screen (which carries the palette). */
#yutnori-sheet, #yutnori-banner, #yutnori-mp-sheet, #yutnori-mp-banner { position: fixed; inset: 0; z-index: 60; display: flex; pointer-events: none; }
#yutnori-sheet, #yutnori-mp-sheet { align-items: flex-end; justify-content: center; }
/* the scrim tints but does not block: a lit station on the board still takes the tap */
.yn-sheet-scrim { position: absolute; inset: 0; background: var(--yn-scrim); pointer-events: none; }
.yn-sheet {
  position: relative; pointer-events: auto; width: 100%; max-width: 560px; margin: 0 8px 96px;
  padding: 14px 14px 13px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px;
  background: var(--yn-sheet-bg); color: var(--yn-ptxt);
  box-shadow: inset 0 0 0 2px var(--yn-accent), 0 30px 60px -30px #000; backdrop-filter: blur(8px);
  font-family: 'Outfit', system-ui, sans-serif;
}
.yn-sheet-tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: var(--yn-accent); }
.yn-sheet-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.15; color: var(--yn-ptxt); }
.yn-sheet-rows { display: flex; flex-direction: column; gap: 7px; }
.yn-sheet-row {
  --yn-rc: var(--yn-accent);
  display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 13px; border: 0; cursor: pointer; text-align: left; min-width: 0;
  font-family: inherit; color: var(--yn-ptxt);
  background: color-mix(in oklab, var(--yn-rc) 9%, transparent); box-shadow: inset 0 0 0 1px var(--yn-panel-line);
}
.yn-sheet-row[data-route="B"] { --yn-rc: var(--yn-gold); }
.yn-sheet-row[data-sel="1"] { background: color-mix(in oklab, var(--yn-rc) 18%, transparent); box-shadow: inset 0 0 0 2px var(--yn-rc); }
.yn-sheet-top { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.yn-key {
  flex: none; width: 19px; height: 19px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--yn-accent); color: var(--yn-on-dark);
}
.yn-key[data-route="B"] { background: var(--yn-gold); color: var(--yn-on-gold); }
.yn-sheet-h { font-size: 13px; font-weight: 800; white-space: nowrap; }
.yn-sheet-space { flex: 1; }
.yn-sheet-meta { font-size: 10.5px; font-weight: 800; white-space: nowrap; color: var(--yn-accent); margin-left: auto; }
.yn-sheet-meta[data-route="B"] { color: var(--yn-gold); }
.yn-sheet-sub { font-size: 11.5px; line-height: 1.4; color: var(--yn-pdim); }
.yn-sheet-risk { font-size: 11px; line-height: 1.35; font-weight: 700; color: var(--yn-pdim); }
.yn-sheet-risk[data-tone="danger"] { color: var(--yn-danger); }
.yn-sheet-foot { display: flex; flex-direction: column; gap: 8px; font-size: 11px; line-height: 1.45; color: var(--yn-pdim); }
.yn-sheet-acts { display: flex; gap: 8px; }
.yn-sheet-btn {
  flex: 1 1 0; height: 44px; border-radius: 12px; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800;
  background: transparent; color: var(--yn-ptxt); box-shadow: inset 0 0 0 1.5px var(--yn-pdim);
}
.yn-sheet-btn[data-emph="1"] { flex: 1.6 1 0; background: var(--yn-btn); color: var(--yn-btn-txt); box-shadow: none; }

#yutnori-banner, #yutnori-mp-banner { align-items: flex-start; justify-content: center; padding-top: 18vh; }
.yn-banner {
  max-width: 340px; padding: 16px 20px; border-radius: 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: var(--yn-sheet-bg); box-shadow: inset 0 0 0 2px var(--yn-danger), 0 30px 60px -30px #000;
  font-family: 'Outfit', system-ui, sans-serif; animation: yn-banner-in .28s ease-out;
}
.yn-banner-tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--yn-danger); }
.yn-banner-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.12; color: var(--yn-ptxt); }
.yn-banner-sub { margin: 0; font-size: 12px; line-height: 1.5; color: var(--yn-pdim); }
@keyframes yn-banner-in { from { opacity: 0; transform: translateY(-8px); } }

/* ── setup card (a SITE surface: --pgr-* and the shared .card) ───────────── */
.yn-setup-card { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.yn-setup-eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--pgr-dim, #83858b); font-weight: 700; }
.yn-setup-title { margin: 0; font-size: 30px; font-weight: 700; color: var(--pgr-txt, #e9e8e4); }
.yn-setup-blurb, .yn-setup-hint, .yn-setup-warn { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pgr-dim, #83858b); }
.yn-setup-blurb b { color: var(--pgr-txt, #e9e8e4); }
.yn-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.yn-setup-lab { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pgr-dim, #83858b); font-weight: 700; min-width: 64px; }
.yn-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.yn-opt {
  border: 0; cursor: pointer; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: transparent; color: var(--pgr-txt, #e9e8e4); box-shadow: inset 0 0 0 1.5px var(--pgr-line, rgba(255,255,255,.18));
  -webkit-tap-highlight-color: transparent;
}
.yn-opt[data-on="1"] { background: var(--yn-btn); color: var(--yn-btn-txt); box-shadow: none; }
.yn-start {
  border: 0; cursor: pointer; height: 52px; border-radius: 12px; font-size: 15px; font-weight: 800;
  background: var(--yn-btn); color: var(--yn-btn-txt); -webkit-tap-highlight-color: transparent;
}

/* end screen rows (inside GameEndScreen — a body overlay, so site colours) */
.yn-endrows { display: flex; flex-direction: column; gap: 6px; }
.yn-endrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.yn-endrow[data-win="1"] { box-shadow: inset 0 0 0 1.5px #c9a227; }
.yn-endnm { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.yn-endnm .yn-tok { --yn-tsz: 16px; }
.yn-endsc { font-weight: 800; font-variant-numeric: tabular-nums; }
.yn-endst { font-size: 12px; opacity: .7; white-space: nowrap; }
.yn-endrow .yn-tok[data-ci="0"] { --yn-pc: #2f4b7c; } .yn-endrow .yn-tok[data-ci="1"] { --yn-pc: #9c3b32; }
.yn-endrow .yn-tok[data-ci="2"] { --yn-pc: #4c6b46; } .yn-endrow .yn-tok[data-ci="3"] { --yn-pc: #a8842c; }

@media (prefers-reduced-motion: reduce) {
  .yn-root *, .yn-root *::before, .yn-root *::after, .yn-banner { animation: none !important; transition: none !important; }
}

/* ── PHONE ──────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* ⛔ The vertical gutter goes too: `.wrap`'s bottom 24px sits under the fixed chat
   * bar and pushes the button under it (the Pachisi finding). Scoped to a live board
   * so the setup card keeps its page gutter. */
  #yutnori-game-screen.yn-playing .wrap { padding: 0 2px; max-width: none; }
  /* 🌐 The online screen's pair — ⛔ WITHOUT the bottom: the in-match chat bar reserves its height as
   * ".has-chatbar .wrap { padding-bottom }", and "padding: 0 2px" here would out-rank it and zero the
   * reservation (ynFitPhone reads the wrap's padding for exactly that bar). */
  #yutnori-mp-game-screen.yn-playing .wrap { padding-top: 0; padding-left: 2px; padding-right: 2px; max-width: none; }
  #yutnori-game-screen.yn-playing .topbar, #yutnori-mp-game-screen.yn-playing .topbar { display: none; }
  #yutnori-game-screen.yn-playing.yn-topbar-open .topbar, #yutnori-mp-game-screen.yn-playing.yn-topbar-open .topbar { display: flex; }
  .yn-menu { display: inline-flex; }
  /* the start label hangs just below r0, past the cloth's edge (the mock's own mobile
   * frames do the same): lift the board over the feed and give it the room. */
  .yn-boardwrap { z-index: 2; margin-bottom: 9px; }
  .yn-lab-start { font-size: 7px; }
}

/* ── SHORT PHONE — the board is the flexible band, so every fixed band gives first ──
 * ⛔ The budget is the one WITH THE CHAT BAR UP (84px on an unfitted screen) — the board
 * suite applies body.solo-chat-on by hand, because it runs signed out and the SCC /
 * Pachisi phones shipped scrolling for exactly that blind spot. Below ~760px of height
 * the captions under the sticks and the tally line go (the result block already names
 * the throw), and the controls take their compact heights. */
@media (max-width: 999px) and (max-height: 760px) {
  .yn-root { --yn-die: 36px; gap: 5px; padding: 5px 7px 6px; }
  .yn-head { height: 26px; }
  .yn-root[data-seats] .yn-side { height: 34px; }
  .yn-mseat { display: none; }
  .yn-feed { height: 30px; }
  .yn-stickcap, .yn-tally { display: none; }
  .yn-throw { gap: 4px; padding: 6px 7px 7px; }
  .yn-resnum b { font-size: 24px; }
  .yn-again { height: 22px; }
  .yn-hint { height: 34px; font-size: 10px; }
  .yn-carrybtn { height: 26px; }
  .yn-btn { height: 44px; font-size: 14px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit ─────────────── */
@media (min-width: 1000px) {
  #yutnori-game-screen .wrap, #yutnori-mp-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .yn-root {
    --yn-bs: 620px;
    --yn-corner: 56px; --yn-edge: 42px; --yn-diag: 40px; --yn-centre: 66px;
    --yn-tok: 24px; --yn-lift: 5px;
    --yn-die: 56px;
    width: 1240px;
    height: 656px;
    padding: 18px 20px;
    gap: 0;
    border-radius: 18px;
  }
  .yn-dsk { display: inline; }
  .yn-cap.yn-dsk { display: block; }
  /* ⭐ The head row rides the rail tops (see YN_FIT_H in yutnori.js): absolutely placed
   * over the box, the middle transparent to taps, the rails padded to make room. */
  .yn-head { position: absolute; top: 18px; left: 20px; right: 20px; height: 40px; gap: 12px; z-index: 5; pointer-events: none; }
  .yn-head > * { pointer-events: auto; }
  .yn-head .yn-headspace { pointer-events: none; order: 2; }
  .yn-turn { order: 0; } .yn-badge { order: 1; } .yn-chain { order: 3; } .yn-info { order: 4; }
  .yn-railL, .yn-railR { padding-top: 50px; }
  .yn-turn { height: 40px; width: 150px; padding: 0 12px; gap: 9px; font-size: 14px; }
  .yn-turn .yn-tok { --yn-tsz: 14px; }
  .yn-chain { height: 34px; padding: 0 13px; font-size: 12px; letter-spacing: .1em; width: 232px; }
  .yn-badge { padding: 8px 10px; font-size: 10.5px; }
  .yn-info { width: 36px; height: 36px; font-size: 16px; }

  .yn-body { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 20px; }
  .yn-railL, .yn-railR, .yn-centre { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .yn-railL { gap: 10px; }
  .yn-centre { gap: 10px; align-items: center; justify-content: center; }

  .yn-sides { display: flex; flex-direction: column; gap: 10px; }
  .yn-root[data-seats="3"] .yn-sides, .yn-root[data-seats="4"] .yn-sides { gap: 8px; }
  .yn-side { height: 88px; padding: 10px 12px; border-radius: 14px; gap: 8px; justify-content: flex-start; }
  .yn-root[data-seats="3"] .yn-side, .yn-root[data-seats="4"] .yn-side { height: 76px; padding: 8px 12px; gap: 6px; }
  .yn-sidehead { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .yn-sidedot { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--yn-pc); }
  .yn-sidelab { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--yn-ptxt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yn-sidespace { flex: 1; }
  .yn-sidetot { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--yn-pdim); white-space: nowrap; }
  .yn-member { gap: 9px; }
  .yn-av, .yn-root[data-seats="3"] .yn-av, .yn-root[data-seats="4"] .yn-av { width: 32px; height: 32px; border-radius: 10px; }
  .yn-av .yn-tok { --yn-tsz: 19px; }
  .yn-mname { font-size: 14px; }
  .yn-mseat, .yn-root[data-seats="3"] .yn-mseat, .yn-root[data-seats="4"] .yn-mseat { display: block; font-size: 9.5px; }
  .yn-traybox { gap: 4px; }
  .yn-tray { --yn-tsz: 14px; }

  .yn-legend {
    display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; border-radius: 14px; min-height: 0; overflow: hidden;
    background: var(--yn-panel); box-shadow: inset 0 0 0 1px var(--yn-panel-line);
  }
  .yn-root[data-seats="3"] .yn-legend, .yn-root[data-seats="4"] .yn-legend { padding: 10px 13px; gap: 5px; }
  .yn-keyrow { display: flex; align-items: center; gap: 9px; font-size: 11.5px; line-height: 1.35; color: var(--yn-pdim); }
  .yn-root[data-seats="4"] .yn-keyrow { font-size: 10.5px; line-height: 1.25; }
  .yn-sw { flex: none; width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-style: normal; }
  .yn-sw-arrow { background: var(--yn-stn); box-shadow: inset 0 0 0 1px var(--yn-stn-line); color: var(--yn-ink); font-size: 14px; }
  .yn-sw-fork { border-radius: 50%; background: var(--yn-stn-hot); box-shadow: inset 0 0 0 2px var(--yn-stn-hot-line); }
  .yn-sw-tok .yn-tok { --yn-tsz: 18px; }
  .yn-sw-stack { background: var(--yn-ink); color: var(--yn-count-txt); font-size: 8.5px; font-weight: 800; }
  .yn-sw-route { background: var(--yn-accent); color: var(--yn-on-dark); font-size: 10px; font-weight: 800; }

  .yn-boardwrap { border-radius: 20px; }
  .yn-lines rect, .yn-lines line { stroke-width: 2px; }
  .yn-chev { width: 9px; height: 9px; border-width: 2px; opacity: .42; }
  .yn-dot { width: 12px; height: 12px; }
  .yn-st { box-shadow: inset 0 0 0 1.5px var(--yn-stn-line); }
  .yn-st[data-fork="1"] { box-shadow: inset 0 0 0 2px var(--yn-stn-hot-line); }
  .yn-st[data-fork="1"] .yn-ring { inset: 6px; }
  .yn-lab { font-size: 10px; }
  .yn-lab-centre { margin-top: 38px; }
  .yn-lab-start { margin-top: 32px; }
  .yn-count { right: -6px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px; }
  .yn-risk { top: -22px; padding: 2px 8px; font-size: 10px; }
  .yn-target { width: calc(var(--yn-d) + 18px); height: calc(var(--yn-d) + 18px); box-shadow: inset 0 0 0 2px var(--yn-tc); }
  .yn-target[data-sel="1"] { box-shadow: inset 0 0 0 3px var(--yn-tc), var(--yn-glow); }
  .yn-tlab { transform: translateY(13px); padding: 2px 8px; font-size: 10.5px; }
  .yn-hit { display: none; }

  .yn-railR { gap: 10px; }
  .yn-feed { height: 64px; padding: 9px 12px; border-radius: 12px; align-items: flex-start; flex-direction: column; gap: 3px; }
  .yn-feedtag { font-size: 9px; }
  .yn-feedtxt { width: auto; flex: none; font-size: 12.5px; line-height: 1.3; white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  .yn-throw { flex: 1; min-height: 0; margin-top: 0; padding: 14px; gap: 9px; border-radius: 16px; }
  .yn-slotsrow { flex-direction: column; gap: 10px; }
  .yn-sticks { gap: 8px; }
  .yn-stickwrap { gap: 5px; }
  .yn-stickcap { height: 12px; font-size: 9px; }
  .yn-result { width: auto; height: 70px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 10px 14px; border-radius: 13px; }
  .yn-resnum { flex-direction: column; align-items: flex-start; gap: 0; width: 46px; }
  .yn-resnum small { font-size: 9.5px; }
  .yn-resnum b { font-size: 46px; }
  .yn-resside { align-items: flex-start; gap: 2px; }
  .yn-resside b { height: 21px; line-height: 21px; font-size: 17px; }
  .yn-resside span { height: 15px; font-size: 11.5px; line-height: 15px; }
  .yn-tally { height: 15px; font-size: 12px; line-height: 15px; text-align: left; }
  .yn-again { height: 36px; font-size: 12px; }
  .yn-throwspace { display: block; flex: 1; }
  .yn-hint { height: 64px; padding: 8px 12px; font-size: 12.5px; line-height: 1.35; }
  .yn-hint[data-tone="carry"] { flex-direction: column; align-items: stretch; justify-content: center; padding: 7px 8px; }
  .yn-carrybtns .yn-carrybtn { flex: 1 1 0; height: 34px; font-size: 12px; }
  .yn-carrybtns { display: flex; }
  .yn-carrytxt { font-size: 12px; }
  .yn-btn { height: 58px; font-size: 16px; }

  .yn-sheet { max-width: 560px; margin-bottom: 72px; padding: 20px 22px; gap: 11px; }
  .yn-sheet-title { font-size: 24px; }
  .yn-sheet-rows { flex-direction: row; gap: 12px; }
  .yn-sheet-row { flex: 1 1 0; padding: 13px 14px; }
  .yn-sheet-h { font-size: 15px; }
  .yn-sheet-meta { font-size: 12px; }
  .yn-sheet-sub { font-size: 12.5px; }
  .yn-sheet-risk { font-size: 12px; }
  .yn-sheet-foot { flex-direction: row; align-items: center; gap: 14px; font-size: 12px; }
  .yn-sheet-foot > span:first-child { flex: 1; }
  .yn-sheet-acts { flex: none; width: 260px; }
  .yn-banner { max-width: 440px; padding: 22px 30px; }
  .yn-banner-title { font-size: 26px; }
}