/* Mahjong Orchid — the site stylesheet.
   This is Mahjong Winds' site/style.css (the reference: "don't ignore all the
   hard work and improvements we did for mahjong winds", owner 2026-10-14) with
   Orchid's palette in Winds' places: a near-black navy ground, the indigo felt
   only as a glow and inside exhibits, aluminium where Winds has brass, orchid
   pink where Winds has gold. Rules, sizes and comments are Winds' own; the
   Orchid additions are at the end. Built into /assets/site.<hash>.css. */
:root {
  --felt: #2b4b7d;
  --felt-dk: #1e3660;
  --panel: #0d1a36;
  --brass: #a9b6c8;
  --gold: #f1a6c3;
  --cream: #eef2f8;
  --muted: #9fb0cc;
  --bone: #f6f1e4;
  --line: rgba(169,182,200,.2);
  --jade: #69d6ad;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #070e20;
  color: var(--cream);
  font: 16px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 0 20px 64px;
}
html[lang^="zh"] body { font-family: -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; }
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0 18px;
  flex-wrap: wrap;
}
.logo {
  width: 40px; height: 52px; border-radius: 7px;
  background: linear-gradient(180deg, #faf4e3, #f2e9d2 55%, #dfd2b2);
  box-shadow: 0 4px 0 #c9b98f, 0 5.5px 0 #2a55a3, 0 8px 16px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 24px; font-weight: 900; color: #c23a72;
  transform: rotate(-5deg);
  flex: none;
}
/* The wordmark is a link home, like the tile beside it. It used to be a
   plain <span>, so only the small tile was clickable and people who aimed at
   the name got nothing. */
header .name {
  font-size: 19px; font-weight: 800; letter-spacing: .3px;
  color: inherit; text-decoration: none;
}
header a.name:hover { color: var(--gold); }
/* justify-content matters here. When the nav is wider than the row — Turkish
   is, at common phone widths — this wraps, and without it the language button
   drops to the LEFT edge of a new line. The dropdown opens with `right: 0`,
   which is correct for a right-anchored button and puts a 132px menu off the
   left of the screen for a left-anchored one. Reported 2026-09-04 with a
   screenshot of exactly that. */
.headright {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
header nav { display: flex; gap: 14px; flex-wrap: wrap; }
header nav a { color: var(--brass); font-size: 14px; font-weight: 600; }
a { color: var(--gold); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1 { font-size: 27px; font-weight: 800; margin: 8px 0 4px; text-wrap: balance; }
h2 {
  font-size: 17px; font-weight: 800; color: var(--gold);
  margin: 28px 0 6px; text-wrap: balance;
}
p, li { color: var(--cream); }
.lede { color: var(--muted); font-size: 15.5px; }
.updated { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
ul { padding-left: 20px; }
li { margin: 5px 0; }
/* The point of the whole document: what we do NOT take. */
.callout {
  background: linear-gradient(180deg, #142650, var(--panel));
  border: 1px solid rgba(169,182,200,.4);
  border-left: 3px solid var(--brass);
  border-radius: 10px;
  padding: 13px 16px;
  margin: 16px 0;
}
.callout.good { border-left-color: var(--jade); }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14.5px; }
.scroll { overflow-x: auto; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(169,182,200,.22); vertical-align: top; }
th { color: var(--brass); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
/* Compact header language switch — a plain "TR · EN" text toggle, the way
   normal sites do it, not big pill tabs sitting in the content. Hidden until
   lang.js runs (see the .js rules below). */
.langbar { align-items: center; gap: 6px; }
.langbar button {
  background: none; border: 0; padding: 2px 2px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.langbar button:hover { color: var(--cream); }
.langbar button[aria-pressed="true"] { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.langsep { color: var(--muted); opacity: .5; }
.langpair { display: inline-flex; gap: 7px; align-items: baseline; font-size: 13px; font-weight: 700; }
.langon { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
a.langswap { color: var(--brass); text-decoration: none; }
a.langswap:hover { color: var(--cream); }
footer {
  margin-top: 44px; padding-top: 18px;
  border-top: 1px solid rgba(169,182,200,.25);
  color: var(--muted); font-size: 13.5px;
}
/* "More games from us" (Cribbage Street D66): the footer's first row, above the
   one-line footer, under the gold hairline; site-build/more-games.mjs writes it.
   On a phone the label takes its own line and the three games wrap under it. */
footer .more-games { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
footer .more-games .mg-label { color: var(--muted); font-size: 13.5px; margin-right: 2px; }
footer .more-games a { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); font-size: 14px; text-decoration: none; }
footer .more-games a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer .more-games img { width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(169,182,200,.35); display: block; flex: none; }
@media (max-width: 420px) { footer .more-games { gap: 10px 16px; } footer .more-games .mg-label { width: 100%; } }
/* Progressive enhancement: with no JavaScript BOTH language sections show,
   which is correct-but-long rather than a blank page. `js` is set by lang.js
   the moment it runs, and only then does one-at-a-time kick in. A privacy
   policy that renders nothing without JS is a policy Google cannot read. */
.js section[lang] { display: none; }
.js section[lang].on { display: block; }
.langbar { display: none; }
.js .langbar { display: flex; }
/* ═══════════════ landing page ═══════════════ */
/* the landing uses a WIDE container — the legal pages' 720px was the cramping
   culprit; keep 720 for text, 1080 here for a real hero */
/* 1120px of content, matching mahjongcalculators.com measured directly:
   its main is max-width 1152px with 16px of padding each side. Body padding
   here is 20px, so 1160 lands on the same 1120. */
.wrap.wide { max-width: 1160px; }
/* felt-table glow behind the whole landing (legal pages keep the flat ground) */
body.landing {
  background:
    radial-gradient(120% 80% at 82% -5%, #2f5591 0%, rgba(47,85,145,0) 46%),
    radial-gradient(90% 60% at 10% 0%, #1c3566 0%, rgba(28,53,102,0) 40%),
    #050b1a;
  background-attachment: fixed;
}
/* hero */
.hero { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; padding: 44px 0 36px; }
.watermark { position: absolute; right: -30px; top: -34px; font-size: 360px; line-height: 1; color: rgba(241,166,195,.055); font-weight: 900; pointer-events: none; user-select: none; z-index: 0; }
.hero-copy { position: relative; z-index: 1; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 16px; }
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hero-copy h1 { font-size: 48px; line-height: 1.04; letter-spacing: -.02em; font-weight: 900; color: var(--bone); margin: 0 0 16px; text-wrap: balance; }
.hero-copy h1 .em { color: var(--gold); }
.hero-copy .lede { font-size: 18px; color: var(--muted); max-width: 42ch; margin: 0 0 26px; }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* ── the play button IS a tile ──
   Same face, side, bevel and radius as TileView, the same corner stamp, and a
   real drop shadow onto the felt. It presses like a tile: the face travels down
   its own depth and the side disappears. */
.store {
  --depth: 6px;
  position: relative;
  display: inline-flex; align-items: center; gap: 13px;
  padding: 13px 22px 13px 18px;
  border-radius: 5px;
  text-decoration: none;
  background: linear-gradient(180deg, #fbf8ef 0%, #f8f4e9 42%, #f1ecdd 100%);
  color: #23201a;
  border-top: 1.5px solid #ffffff;
  border-left: .5px solid #fffdf4;
  font-family: "Noto Sans TC", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow:
    0 var(--depth) 0 #c9b98f,
    0 calc(var(--depth) + 1px) 0 #9c8c66,
    0 calc(var(--depth) + 14px) 28px -8px rgba(0,0,0,.65),
    inset 0 -2px 4px rgba(160,142,96,.18);
  transition: transform .09s ease, box-shadow .09s ease, filter .16s ease;
}
.store:hover, .store:focus-visible { filter: brightness(1.03); }
.store:active {
  transform: translateY(var(--depth));
  box-shadow:
    0 0 0 #c9b98f,
    0 1px 0 #9c8c66,
    0 3px 8px rgba(0,0,0,.45),
    inset 0 -2px 4px rgba(160,142,96,.18);
}
.store .glyph { width: 21px; height: 23px; flex: none; }
.store .lab { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store .lab b {
  font-size: 15.5px; font-weight: 700; letter-spacing: .002em; color: #23201a;
}
.store .lab small {
  font-size: 11px; font-weight: 500; color: #7b7360; letter-spacing: .012em;
}
/* the stamp every flower tile carries: 蘭, in orchid pink */
.store::before {
  content: "蘭";
  position: absolute; top: 2px; left: 5px;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  color: rgba(168, 43, 95, .5);
}
/* the App Store tile is the same tile face down: the 36# set's blue back
   with its engraved frame over a bone side, so the pair reads as the two
   faces of one tile, the app icon's pair (Winds pairs 中 and 發 instead) */
.stores { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.store-ios {
  background: linear-gradient(180deg, #5188e0 0%, #3b72d0 55%, #2a55a3 100%);
  color: #fff;
  border-top: 1.5px solid rgba(255,255,255,.55);
  border-left: .5px solid rgba(255,255,255,.3);
  box-shadow:
    0 var(--depth) 0 #d6c9ab,
    0 calc(var(--depth) + 1.5px) 0 #1c3c78,
    0 calc(var(--depth) + 14px) 28px -8px rgba(0,0,0,.75),
    inset 0 -2px 4px rgba(0,0,0,.2);
}
.store-ios:hover, .store-ios:focus-visible { filter: brightness(1.08); }
.store-ios:active {
  box-shadow:
    0 0 0 #d6c9ab,
    0 1.5px 0 #1c3c78,
    0 3px 8px rgba(0,0,0,.55),
    inset 0 -2px 4px rgba(0,0,0,.2);
}
.store-ios .glyph { width: 20px; height: 22px; color: #fff; }
.store-ios .lab b { color: #fff; }
.store-ios .lab small { color: rgba(255,255,255,.78); }
.store-ios::before { content: ""; inset: 5px; border: 1.5px solid rgba(157,187,238,.5); border-radius: 4px; pointer-events: none; }
/* before launch the tiles say so and are not pressable (SITE.launched) */
.store.soon { cursor: default; }
.store.soon:hover { filter: none; }
.store.soon:active { transform: none; }
.store.soon .lab small { color: #a82b5f; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.store-ios.soon .lab small { color: #fff; }
html[lang^="zh"] .store.soon .lab small { text-transform: none; letter-spacing: .08em; }
.closing .stores { justify-content: center; margin: 0 0 22px; }
.seelink { color: var(--gold); font-weight: 700; font-size: 14.5px; }
.micro { margin: 20px 0 0; font-size: 12.5px; color: var(--muted); opacity: .85; }
/* device bezel — LIGHT, because the screenshots already carry the game's own
   wood rail; a heavy frame would double it */
.hero-shot { position: relative; z-index: 1; justify-self: end; width: 100%; }
.hero-shot::before { content: ""; position: absolute; inset: -10% -8% -14% -8%;
  background: radial-gradient(60% 60% at 55% 45%, rgba(241,166,195,.26), rgba(241,166,195,0) 70%); filter: blur(8px); z-index: 0; }
.device { position: relative; z-index: 1; padding: 8px; border-radius: 20px;
  background: linear-gradient(158deg,#1e2635,#0a0e16 72%); border: 1px solid rgba(241,166,195,.16);
  box-shadow: 0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.shot { display: block; width: 100%; height: auto; border-radius: 12px; }
/* winds divider band, tying to the name */
.winds { display: flex; justify-content: center; gap: 30px; padding: 24px 0; margin: 4px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.winds span { font-size: 24px; font-weight: 900; color: rgba(241,166,195,.30); }
.winds .cap { align-self: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); font-weight: 800; }
/* feature rows */
.features { display: flex; flex-direction: column; gap: 56px; padding: 52px 0; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.feature:nth-child(even) .feature-shot { order: -1; }
.feature .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); font-weight: 800; margin: 0 0 10px; }
.feature h2 { font-size: 29px; line-height: 1.1; letter-spacing: -.01em; font-weight: 800; color: var(--cream); margin: 0 0 12px; text-wrap: balance; }
.feature p { margin: 0; color: var(--muted); font-size: 16.5px; max-width: 44ch; }
/* responsiveness showcase — landscape gameplay phone + portrait menu phone */
.showcase { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; padding: 52px 0; border-top: 1px solid var(--line); }
.showcase .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); font-weight: 800; margin: 0 0 10px; }
.showcase h2 { font-size: 29px; line-height: 1.1; letter-spacing: -.01em; font-weight: 800; color: var(--cream); margin: 0 0 12px; text-wrap: balance; }
.showcase p { margin: 0; color: var(--muted); font-size: 16.5px; max-width: 42ch; }
.devices { display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.ph { padding: 6px; border-radius: 24px; background: linear-gradient(158deg,#1e2635,#0a0e16 72%);
  border: 1px solid rgba(241,166,195,.2); box-shadow: 0 24px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); }
.ph .scr { overflow: hidden; border-radius: 15px; }
.ph .scr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph.land { width: 300px; }
.ph.land .scr { aspect-ratio: 16/9; }
.ph.port { width: 124px; margin-bottom: 8px; }
.ph.port .scr { aspect-ratio: 9/19; }
.devwrap { position: relative; }
.devwrap .tag { display: block; text-align: center; margin-top: 12px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
/* three pillars — a small brass diamond marker (the game's tier motif), no emoji */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 4px 0; }
.pillar { background: linear-gradient(180deg,#142650,var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; }
.pillar .mk { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); margin-bottom: 14px; }
.pillar h3 { font-size: 16.5px; margin: 0 0 6px; color: var(--cream); }
.pillar p { margin: 0; font-size: 14px; color: var(--muted); }
/* not-gambling — a slim left-ruled line, not a big box */
.note-line { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; margin: 44px 0 0;
  border-left: 2px solid var(--brass); background: rgba(169,182,200,.06); border-radius: 0 10px 10px 0; color: var(--muted); font-size: 14px; }
.note-line b { color: var(--cream); }
/* closing */
.closing { text-align: center; padding: 68px 0 36px; }
.closing h2 { font-size: 32px; font-weight: 900; letter-spacing: -.01em; color: var(--bone); margin: 0 0 12px; }
.closing p { color: var(--muted); margin: 0 0 20px; }
@media (prefers-reduced-motion: no-preference) {
  body.landing .hero-copy > * { animation: rise .6s cubic-bezier(.2,.7,.3,1) both; }
  body.landing .hero-copy h1 { animation-delay: .06s; }
  body.landing .hero-copy .lede { animation-delay: .14s; }
  body.landing .hero-copy .cta-row { animation-delay: .22s; }
  body.landing .hero-shot { animation: rise .7s .18s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 30px 0; }
  .hero-copy h1 { font-size: 38px; }
  .watermark { font-size: 220px; right: -14px; top: -6px; }
  .hero-shot { max-width: 520px; width: 100%; margin: 0 auto; }
  .feature { grid-template-columns: 1fr; gap: 18px; }
  .feature:nth-child(even) .feature-shot { order: 0; }
  .showcase { grid-template-columns: 1fr; gap: 30px; }
  .pillars { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .devices { gap: 12px; }
  .ph.land { width: 210px; }
  .ph.port { width: 92px; }
}
/* ── the learn band on the landing ── */
.learn { margin: 56px 0 0; padding-top: 34px; border-top: 1px solid var(--line); }
.learn h2 { font-size: 24px; margin: 0 0 6px; }
.learnrows { margin-top: 10px; max-width: 640px; }
.lrow {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 6px; border-radius: 8px;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.learnrows .lrow:last-child { border-bottom: 1px solid var(--line); }
.lrow .lt { flex: 1; min-width: 0; }
.lrow .ln { display: block; font-size: 16px; font-weight: 700; color: var(--cream); }
.lrow .ld { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.lrow .go { color: var(--muted); font-size: 17px; transition: color .15s, transform .15s; }
.lrow:hover { background: rgba(255,255,255,.035); }
.lrow:hover .go { color: var(--gold); transform: translateX(3px); }
/* >>> generated tiles */
/* ═══════════════ tiles (generated: site/build/tiles.mjs) ═══════════════
   Face, side, bevel and sizes copied from apps/mobile/src/components/
   TileView.tsx and src/theme.ts so a tile on the site is the same object the
   game draws. Corner hints follow useTileHint and are always on here, because
   a reference page exists for someone who cannot read 三. */
.tile {
  --w: 36px; --h: 48px; --d: 3px;
  position: relative; display: inline-block; flex: none;
  width: var(--w); height: calc(var(--h) + var(--d));
  background: #c9b98f; border-radius: 4px; vertical-align: bottom;
  /* Orchid: the 36# tile's blue shows along the foot of the side */
  background: linear-gradient(to top, #2a55a3 0, #2a55a3 calc(var(--d) * .45), #c9b98f calc(var(--d) * .45));
}
/* face down: the 36# set's blue back, a pale rim, the engraved inner frame */
.tile.back .face { background: linear-gradient(180deg, #5188e0, #3b72d0); border-top-color: rgba(255,255,255,.6); border-left-color: rgba(255,255,255,.35); }
.tile.back .frame { position: absolute; inset: 16% 18%; border: 1.5px solid rgba(157,187,238,.55); border-radius: 3px; }
.tile.sel .face { box-shadow: inset 0 0 0 2px #d4467f; }
.tile.sm { --w: 26px; --h: 34px; --d: 2px; }
.tile.lg { --w: clamp(34px, calc(3.4vw + 15px), 46px); --h: calc(var(--w) * 1.348); --d: 4px; }
.tile.xl { --w: clamp(38px, calc(4.4vw + 16px), 56px); --h: calc(var(--w) * 1.357); --d: 4px; }
.tile .face {
  position: absolute; inset: 0 0 var(--d) 0;
  background: #f8f4e9;
  /* bevel on the top and left only, as TileView has it */
  border-top: 1.5px solid #ffffff;
  border-left: .5px solid #fffdf4;
  border-radius: 4px;
  overflow: hidden; line-height: .98;
  font-family: "Noto Sans TC", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* grid centres the GLYPH faces, which size themselves from their text. The
     drawn faces (dots, bamboo, 白板) are absolutely positioned instead, because
     a percentage height on a grid item resolves against an auto-sized row and
     collapses. */
  display: grid; place-items: center; place-content: center;
}
/* Characters stack a numeral over 萬, so that one face is a column */
.tile .face:has(.num) { grid-auto-flow: row; row-gap: 0; }
/* Everything inside the face is sized against the ART BOX, not the tile.
   TileView renders faces at 78% width and 72% height so bone margin stays
   visible and the corner hint keeps its own pocket, then sizes glyphs against
   THAT box. Scaling against the full tile made every glyph 1/0.72 too big:
   the numbers collided with the dots and the wind glyphs overflowed their
   box, which is what read as "not centred". Factors below are the app's own
   multiplied through by .72. */
.tile .num  { font-size: calc(var(--h) * .245); line-height: 1.16; color: #2456a6; font-weight: 700; }
.tile .wan  { font-size: calc(var(--h) * .288); line-height: 1.1; color: #c0392b; font-weight: 700; }
.tile .gly  {
  font-size: calc(var(--h) * .374); font-weight: 700; color: #2b2b23;
  /* CJK ink sits high in a 1.0 line box; a slightly taller one centres it the
     way GlyphFace's lineHeight = size + 4 does natively. */
  line-height: 1.14;
}
.tile .gly.red   { color: #c0392b; }
.tile .gly.green { color: #1e7d43; }
.tile .hint {
  position: absolute; top: .5px; left: 2.5px;
  color: rgba(43,43,35,.55); font-weight: 800;
  font-size: max(6px, calc(var(--h) * .17)); line-height: 1;
}
/* Dots and bamboo are SVG, ported coordinate for coordinate from TileView's
   60x80 grid — see site/build/faces.mjs. The 78/72 box is what keeps the rank
   number clear of the art. */
.tile .art {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78%; height: 72%;
}
.tile .art.dragon-white { width: 71.8%; height: 66.2%; }
/* Bonus tiles carry a number, a name AND a plant, so they use nearly the whole
   tile: BonusFace renders at 94% x 92% where a suit face gets 78% x 72%. */
.tile .art.bonus { width: 94%; height: 92%; }
.hand { display: flex; gap: 3px; align-items: flex-end; flex-wrap: wrap; max-width: 100%; }
/* Symmetric padding, so a marked group's tiles sit on the same baseline and
   the same left edge as loose tiles beside it. The old 5/6/4 made grouped
   tiles ride high and inset. */
.hand .grp { display: flex; flex-wrap: wrap; gap: 3px; padding: 5px; border-radius: 7px; min-width: 0; }
.hand > .tile { margin: 5px 0; }
.hand .grp.mark { background: rgba(241,166,195,.1); box-shadow: inset 0 0 0 1px rgba(241,166,195,.3); }
/* "+n more tiles". A fade over the last tile read as a broken tile rather
   than as a continuation, and it left rows of different lengths looking
   ragged; a count is unambiguous and aligns. */
.more { align-self: center; color: var(--brass); font-weight: 800; }
/* ═══════════════ scoring pages (generated) ═══════════════ */
body.docs .rows { display: flex; flex-direction: column; }
body.docs .row {
  display: grid; grid-template-columns: 248px 1fr auto; gap: 22px;
  align-items: center; padding: 15px 6px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
/* the sample fills its track and the "+n" marker pins to the right edge, so
   every row's marker lands on the same vertical line whether the row shows
   three tiles or five */
body.docs .row > .hand { width: 100%; flex-wrap: nowrap; }
body.docs .row .more {
  margin-left: auto; padding-left: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--brass); opacity: .85; font-variant-numeric: tabular-nums;
}
body.docs .row:hover { background: rgba(241,166,195,.045); }
body.docs .row:hover .nm { color: var(--gold); }
body.docs .rmid { display: block; }
body.docs .nm { display: block; font-weight: 700; font-size: 16px; color: var(--cream); }
body.docs .cn { color: var(--muted); font-weight: 500; margin-left: 8px; font-size: 15px; }
body.docs .ds { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
body.docs .tag {
  display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
body.docs .fa {
  font-variant-numeric: tabular-nums; font-weight: 900; font-size: 21px;
  color: var(--gold); text-align: right; white-space: nowrap;
}
body.docs .fa .u { font-size: 11px; font-weight: 700; color: var(--brass); letter-spacing: .1em; margin-left: 4px; }
body.docs .fa.limit { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
body.docs .fa.none { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
body.docs .sec { margin-top: 46px; }
body.docs .sec h2 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); font-weight: 800; margin: 0 0 6px;
}
body.docs .sec-note { color: var(--muted); font-size: 14.5px; max-width: 68ch; margin: 0 0 14px; }
body.docs .callout h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 800; color: var(--bone); }
body.docs .callout .eq { color: var(--jade); font-weight: 700; }
body.docs .crumb { margin: 0 0 10px; font-size: 13.5px; }
body.docs .detail-h1 { font-size: 36px; margin: 0 0 8px; }
/* The standfirst has to stay above the body text it introduces. Raising the
   prose to 17px left this at the base 15.5px, i.e. the summary line smaller
   than the paragraphs under it, which reads as a caption by mistake. */
body.docs .detail-head .lede { font-size: 19px; }
body.docs .cn-big { color: var(--muted); font-weight: 700; font-size: 24px; }
body.docs .worth { color: var(--gold); }
body.docs .detail-hand {
  background: linear-gradient(180deg, #142650, var(--panel));
  border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; margin: 24px 0 8px;
}
body.docs .fieldlab {
  display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass); font-weight: 800; margin-bottom: 12px;
}
body.docs .bonus-row { margin-top: 18px; }
/* These pages became articles rather than captions, and the type had to catch
   up (owner, 2026-08-29: "are our font too small? also ours look a bit
   narrow"). Three things were wrong for reading 400 words:
   1. h2 was a 12px uppercase brass LABEL. That reads as a field caption above
      one sentence, and it made the structure of a real article invisible.
      Brass uppercase stays the house style for actual labels (.fieldlab,
      .kicker); content headings are now sized like headings.
   2. 16px body at a 68ch measure, flush left inside the 1080px wrap the tile
      hand needs, left a wide empty gutter on the right. 17px at 78ch fills the
      column while staying inside the readable 60-80 character range.
   3. Paragraphs sat flush against each other with no rhythm.
   Colour was checked and left alone: every token clears WCAG AA on this
   background by a wide margin, cream body text at 15.4:1. */
/* THE GUTTER. Reported twice as "narrow", the second time with the empty strip
   circled beside a competitor page where it does not happen.
   The problem was never absolute width. The text stopped short of the edge the
   tile box above it had just drawn, and the eye reads that as the text having
   run out rather than as a margin. Capping the measure at 68ch (and later
   84ch) inside a 1080px wrap is exactly what produced it.
   Measured the page being compared against, at a 1920px viewport: 1120px
   container, prose filling all 1120px, 16px/26px type, 24px headings. No cap
   at all. So: no cap here either. Every element on the page now shares the
   wrap's width and lines up on both edges.
   That is ~127 characters a line, which is long by the textbook and still
   shorter than the ~140 of the page it is matching. Type goes to 17px, above
   their 16px, because the same owner asked whether ours was too small. */
body.docs .detail-body { max-width: none; }
body.docs .detail-body h2 {
  font-size: 24px; font-weight: 800; letter-spacing: -.01em;
  color: var(--bone); margin: 40px 0 12px; text-wrap: balance;
}
body.docs .detail-body h2:first-child { margin-top: 28px; }
body.docs .detail-body p { font-size: 17px; line-height: 1.7; margin: 0 0 15px; }
/* FAQ. Open, not an accordion: these answers are the reason the page ranks,
   so a reader scans them without clicking and a crawler sees them plainly.
   Hairline rules give the block its rhythm (owner's call, 2026-08-29). */
body.docs .faq { margin-top: 8px; }
body.docs .faq .qa { padding: 16px 0; border-top: 1px solid var(--line); }
body.docs .faq .qa:last-child { border-bottom: 1px solid var(--line); }
body.docs .faq .q {
  margin: 0 0 6px; font-size: 16.5px; font-weight: 800;
  color: var(--cream); line-height: 1.4;
}
body.docs .faq .a { margin: 0; color: var(--muted); }
body.docs .excluded-note { margin-top: 30px; }
body.docs .detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
/* :first-child, NOT > div — the badge is a div too, and 'body.docs
   .detail-head > div' (0,2,2) outranks 'body.docs .worth-badge' (0,2,1), so the
   badge inherited flex: 1 1 320px and stretched to half the page. */
body.docs .detail-head > div:first-child { flex: 1 1 320px; }
body.docs .worth-badge {
  flex: none; text-align: center; min-width: 104px;
  padding: 14px 18px 12px;
  border: 1px solid rgba(169,182,200,.35); border-radius: 12px;
  background: linear-gradient(180deg, #142650, var(--panel));
}
body.docs .worth-badge b {
  display: block; font-size: 40px; line-height: 1; font-weight: 900;
  color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
body.docs .worth-badge small {
  display: block; margin-top: 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass);
}
body.docs .worth-badge.limit b { font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
body.docs .worth-badge.none b { color: var(--muted); }
body.docs .neighbours { margin-top: 52px; }
body.docs .neighbours h2 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); font-weight: 800; margin: 0 0 14px;
}
body.docs .ncards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
body.docs .ncard {
  display: block; padding: 14px 16px 13px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(0,0,0,.14);
  transition: border-color .15s ease, background .15s ease;
}
body.docs .ncard:hover { border-color: rgba(169,182,200,.5); background: rgba(241,166,195,.05); }
body.docs .ncard .hand { margin-bottom: 10px; }
body.docs .nname { display: block; font-weight: 700; font-size: 14.5px; color: var(--cream); }
body.docs .nfaan {
  display: block; margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
body.docs .trycalc {
  display: inline-block; margin-top: 14px;
  font-size: 13px; font-weight: 800; color: var(--gold); text-decoration: none;
  border: 1px solid rgba(241,166,195,.4); border-radius: 9px; padding: 8px 14px;
}
body.docs .trycalc:hover { background: rgba(241,166,195,.08); }
body.docs .contested {
  margin: 14px 0 0; padding: 12px 16px; max-width: 72ch;
  font-size: 14px; color: var(--cream);
  border: 1px solid rgba(224,160,76,.4); border-left: 3px solid #e0a04c;
  border-radius: 9px; background: rgba(224,160,76,.07);
}
body.docs .contested a { color: var(--gold); font-weight: 700; }
body.docs .srcline { color: var(--muted); font-size: 14.5px; max-width: 70ch; margin: 18px 0 0; }
body.docs .srcline a { color: var(--gold); font-weight: 700; }
body.docs .cta-block { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
body.docs .cta-h { font-size: 20px; font-weight: 800; color: var(--bone); margin: 0 0 4px; }
body.docs .cta-s { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; }
/* Language menu. Was an inline list of codes, which only reads as a control
   while there are two or three of them. */
body.docs .langmenu { position: relative; font-size: 13px; font-weight: 700; }
body.docs .langmenu > summary {
  list-style: none; cursor: pointer; color: var(--brass);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px;
}
body.docs .langmenu > summary::-webkit-details-marker { display: none; }
body.docs .langmenu > summary:hover { color: var(--cream); border-color: var(--brass); }
body.docs .langmenu .caret { font-size: 9px; opacity: .7; }
body.docs .langlist {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 40;
  display: flex; flex-direction: column; min-width: 132px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 5px; box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
body.docs .langlist a {
  color: var(--bone); text-decoration: none; padding: 7px 10px;
  border-radius: 6px; white-space: nowrap; font-weight: 600;
}
body.docs .langlist a:hover { background: rgba(255,255,255,.07); }
body.docs .langlist a.on { color: var(--gold); }
@media (max-width: 640px) {
  body.docs .detail-h1 { font-size: 26px; }
  body.docs .row { grid-template-columns: 1fr auto; row-gap: 10px; }
  body.docs .row .hand { grid-column: 1 / -1; }
}
/* ── sources page ── */
body.docs .refgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 14px; }
body.docs .refcard {
  display: flex; flex-direction: column; gap: 5px;
  padding: 17px 18px 15px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 11px;
  background: linear-gradient(180deg, #142650, var(--panel));
  transition: border-color .15s ease;
}
body.docs a.refcard:hover { border-color: rgba(169,182,200,.55); }
body.docs .refcard.nolink { background: rgba(0,0,0,.14); }
body.docs .refname { font-weight: 800; font-size: 15.5px; color: var(--cream); }
body.docs .refcn { font-size: 13px; color: var(--muted); }
body.docs .refwhat { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; }
body.docs .refurl {
  margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--brass); text-transform: lowercase;
}
body.docs .disrow { padding: 16px 0 4px; border-bottom: 1px solid var(--line); }
body.docs .disrow h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; color: var(--bone); }
body.docs .disreadings { margin: 0 0 8px; font-size: 14.5px; color: var(--muted); max-width: 70ch; }
body.docs .disours { margin: 0 0 12px; font-size: 14.5px; color: var(--cream); max-width: 70ch; }
body.docs .disours a { color: var(--gold); font-weight: 700; }
/* the tile-styled secondary button, shared with other page CTAs */
body.docs .btn-tile {
  display: inline-block; padding: 11px 20px; border-radius: 5px;
  background: #f8f4e9; color: #23201a; font-weight: 800; font-size: 14.5px;
  text-decoration: none; border-top: 1.5px solid #fff;
  box-shadow: 0 4px 0 #c9b98f, 0 5px 0 #9c8c66, 0 12px 22px -8px rgba(0,0,0,.55);
}
body.docs .btn-tile:active { transform: translateY(4px); box-shadow: 0 0 0 #c9b98f, 0 1px 0 #9c8c66; }
/* ── tiles page: uniform cards, tiles over copy ── */
body.docs .tilecards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 30px;
}
body.docs .tilecard {
  padding: 22px 24px 20px;
  border: 1px solid var(--line); border-radius: 13px;
  background: linear-gradient(180deg, #142650, var(--panel));
}
body.docs .tilecard h2 {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 17px; font-weight: 800; color: var(--bone);
  letter-spacing: 0; text-transform: none; margin: 0 0 14px;
}
body.docs .tilecard h2 .cn { font-size: 13px; color: var(--muted); font-weight: 600; }
body.docs .tiles-row { margin: 0 0 14px; gap: 4px; }
body.docs .groupcopy { margin: 0 0 10px; color: var(--cream); font-size: 14px; line-height: 1.65; }
body.docs .grouplinks { margin: 0; font-size: 13px; color: var(--muted); }
body.docs .grouplinks a { color: var(--gold); font-weight: 700; }
@media (max-width: 900px) {
  body.docs .tilecards { grid-template-columns: 1fr; }
}
/* ── how-to-play: the lesson viewer ── */
body.docs .howgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; margin-top: 30px; align-items: start; }
body.docs .lessonnav { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; }
body.docs .lessonnav a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
}
body.docs .lessonnav a .ln {
  font-size: 11px; font-weight: 800; color: var(--brass);
  font-variant-numeric: tabular-nums; min-width: 16px;
}
body.docs .lessonnav a:hover { color: var(--cream); background: rgba(241,166,195,.05); }
body.docs .lessonnav a.on { color: var(--gold); background: rgba(241,166,195,.09); }
body.docs .lessonpane {
  min-width: 0; max-width: 620px; margin: 0 auto; width: 100%;
}
html.lessons body.docs .lessonpane { display: flex; flex-direction: column; }
html.lessons body.docs .lessonstep { margin-top: 28px; }
body.docs .lessonno {
  margin: 0 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass); font-weight: 800;
}
body.docs .howsec { margin-top: 0; padding-top: 8px; }
body.docs .howsec + .howsec { margin-top: 44px; }
body.docs .howsec h2 {
  font-size: 24px; letter-spacing: -.01em; text-transform: none;
  color: var(--bone); font-weight: 800; margin: 0 0 12px;
}
body.docs .howsec p { max-width: none; margin: 0 0 13px; font-size: 15.5px; line-height: 1.7; color: var(--cream); }
body.docs .howhand { margin: 0; justify-content: center; }
body.docs .exhibit {
  padding: 22px 18px 16px; border-radius: 14px; margin: 16px 0 20px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(170,200,255,.10), transparent 70%),
    linear-gradient(180deg, #345b91, var(--felt));
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -14px 30px rgba(0,0,0,.22);
}
body.docs .exlabel {
  text-align: center; margin: 12px 0 0;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,235,220,.55); font-weight: 700;
}
body.docs .glossary { display: grid; grid-template-columns: max-content 1fr; gap: 9px 20px; max-width: 72ch; margin: 12px 0 0; }
body.docs .glossary dt { font-weight: 800; color: var(--bone); font-size: 15px; }
body.docs .glossary dd { margin: 0; color: var(--muted); font-size: 15px; }
body.docs .lessonstep { display: none; gap: 10px; margin-top: 30px; }
body.docs .lessonstep button {
  padding: 11px 22px; border-radius: 11px; font-size: 14.5px; font-weight: 800;
  border: 1px solid var(--line); background: rgba(0,0,0,.18); color: var(--cream); cursor: pointer;
}
body.docs .lessonstep button.primary {
  background: #f8f4e9; color: #23201a; border: 0; border-top: 1.5px solid #fff;
  box-shadow: 0 4px 0 #c9b98f, 0 10px 20px -8px rgba(0,0,0,.5);
}
body.docs .lessonstep button.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9b98f; }
body.docs .lessonstep button:disabled { opacity: .4; cursor: default; }
body.docs .steplink {
  margin-left: auto; align-self: center;
  color: var(--gold); font-size: 13.5px; font-weight: 700; text-decoration: none;
}
body.docs .steplink:hover { text-decoration: underline; }
/* with the script running, one lesson at a time */
html.lessons body.docs .howsec { display: none; }
html.lessons body.docs .howsec.on { display: block; }
html.lessons body.docs .lessonstep { display: flex; }
html.lessons body.docs .lessonno { display: block; }
@media (max-width: 859px) {
  body.docs .howgrid { grid-template-columns: 1fr; gap: 16px; }
  body.docs .lessonnav {
    position: static; flex-direction: row; overflow-x: auto; gap: 6px;
    padding-bottom: 6px; scrollbar-width: thin;
  }
  body.docs .lessonnav a { flex: none; border: 1px solid var(--line); padding: 7px 12px; }
  body.docs .howsec h2 { font-size: 20px; }
}
/* ── calculator ── */
body.docs .calcgrid {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 30px; margin-top: 30px; align-items: start;
}
body.docs .pickrow { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
body.docs .pick {
  position: relative; padding: 3px; background: none; border: 0; cursor: pointer;
  border-radius: 7px;
}
body.docs .pick:hover:not(:disabled) { background: rgba(241,166,195,.09); }
body.docs .pick:disabled { opacity: .3; cursor: default; }
body.docs .pick .cnt {
  position: absolute; top: -3px; right: -1px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--brass); color: #23201a;
  font-size: 10px; font-weight: 800; line-height: 15px; text-align: center;
}
body.docs .pick .cnt:empty { display: none; }
body.docs .meldbar { display: flex; gap: 8px; }
body.docs .meldbtn {
  padding: 9px 15px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(0,0,0,.18); color: var(--cream); font-weight: 700; font-size: 13.5px; cursor: pointer;
}
body.docs .meldbtn.on { border-color: var(--gold); color: var(--gold); background: rgba(241,166,195,.09); }
body.docs .meldbtn:disabled { opacity: .35; cursor: default; }
body.docs .meldhint { min-height: 20px; margin: 8px 0 0; font-size: 13px; color: var(--gold); }
body.docs .meldnote { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); max-width: 52ch; }
body.docs .segrow { display: flex; gap: 22px; flex-wrap: wrap; }
body.docs .seglab > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
body.docs .seg { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; }
body.docs .seg button, body.docs .bonuschip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 3px 4px 4px; cursor: pointer; border-radius: 7px; opacity: .4;
}
body.docs .chiplab { font-size: 10.5px; font-weight: 700; color: var(--muted); line-height: 1; letter-spacing: .02em; }
body.docs .seg button[aria-pressed="true"] .chiplab, body.docs .bonuschip[aria-pressed="true"] .chiplab { color: var(--gold); }
body.docs .seg button[aria-pressed="true"], body.docs .bonuschip[aria-pressed="true"] {
  opacity: 1; outline: 2px solid var(--gold); outline-offset: 1px;
}
body.docs .seg2 { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
body.docs .seg2 button {
  padding: 9px 16px; font-size: 13.5px; font-weight: 700; color: var(--muted);
  background: none; border: 0; cursor: pointer;
}
body.docs .seg2 button[aria-pressed="true"] { background: rgba(241,166,195,.12); color: var(--gold); }
body.docs .bonusrow { display: flex; gap: 5px; flex-wrap: wrap; }
body.docs .adv { margin-top: 20px; border: 1px solid var(--line); border-radius: 11px; padding: 12px 16px; }
body.docs .adv summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--muted); }
body.docs .adv label { display: block; margin-top: 10px; font-size: 13.5px; color: var(--cream); }
body.docs .adv input { margin-right: 8px; }
body.docs .calcright {
  position: sticky; top: 16px;
  border: 1px solid var(--line); border-radius: 13px;
  background: rgba(0,0,0,.14); padding: 18px 20px;
}
body.docs .trayhead { display: flex; justify-content: space-between; align-items: baseline; }
body.docs .trayhead .fieldlab { margin: 0 0 10px; }
body.docs .trayacts { display: flex; gap: 14px; align-items: baseline; }
body.docs #share {
  background: none; border: 0; color: var(--gold); font-size: 12.5px; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
body.docs #share[hidden] { display: none; }
body.docs .samplelink {
  color: var(--gold); font-size: 12.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
body.docs #clear {
  background: none; border: 0; color: var(--muted); font-size: 12.5px; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
body.docs #tray { min-height: 55px; gap: 4px; }
body.docs .traybtn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 5px; }
body.docs .traybtn.winring { outline: 2.5px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 14px rgba(241,166,195,.45); }
body.docs .meldchip {
  display: inline-flex; gap: 3px; align-items: center; margin: 10px 8px 0 0;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.16);
}
body.docs .meldx { background: none; border: 0; color: var(--muted); font-weight: 800; cursor: pointer; margin-left: 4px; font-size: 15px; }
body.docs .result {
  display: block; width: 100%; margin-top: 16px; padding: 13px 16px;
  border-radius: 11px; border: 1px solid var(--line);
  background: rgba(0,0,0,.18); color: var(--cream);
  font-size: 16px; font-weight: 800; text-align: left; cursor: pointer;
}
body.docs .result.good { border-color: rgba(105,214,173,.5); color: var(--jade); background: rgba(105,214,173,.07); }
body.docs .result.under { border-color: rgba(224,160,76,.5); color: #e0a04c; background: rgba(224,160,76,.06); }
body.docs .result.bad { border-color: rgba(224,85,69,.45); color: #e07a6c; }
body.docs .result.waiting { border-color: rgba(241,166,195,.45); color: var(--gold); }
body.docs .sheet { margin-top: 12px; }
body.docs .wonline { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
body.docs .faanlines { border-top: 1px solid var(--line); }
body.docs .faanline {
  display: flex; justify-content: space-between; padding: 8px 2px;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
body.docs .faanline a { color: var(--gold); text-decoration: none; font-weight: 700; }
body.docs .faanline a:hover { text-decoration: underline; }
body.docs .faanline span { font-variant-numeric: tabular-nums; font-weight: 800; }
body.docs .undernote { margin: 10px 0 0; font-size: 13px; color: #e0a04c; }
body.docs .waitrow { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
body.docs .waitbtn { background: none; border: 0; padding: 2px; cursor: pointer; border-radius: 5px; }
body.docs .waitbtn:hover { background: rgba(241,166,195,.09); }
body.docs .calcseo { max-width: 70ch; }
body.docs .calcseo p { color: var(--muted); font-size: 14.5px; margin: 0 0 12px; }
@media (max-width: 900px) {
  body.docs .calcgrid { grid-template-columns: 1fr; gap: 18px; }
  /* the tray leads the page in normal flow, on a solid panel */
  body.docs .calcright {
    position: static; order: -1; z-index: auto;
    background: linear-gradient(180deg, #142650, var(--panel));
    padding: 14px 14px 12px;
  }
  /* the score is a fixed bottom bar; the page keeps room for it */
  body.docs .calcgrid { padding-bottom: 76px; }
  body.docs .result {
    position: fixed; left: 12px; right: 12px; bottom: 10px; z-index: 60;
    width: auto; margin: 0;
    background: linear-gradient(180deg, #1a2f5c, #0d1a36);
    box-shadow: 0 -6px 24px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
    /* room for the chevron on the right */
    padding-right: 40px;
  }
  /* THE BAR MUST BE OPAQUE HERE. It is fixed over scrolling content, and the
     state tints above (.good/.under) are 7% washes designed for the desktop
     layout, where the bar sits in normal flow on a solid panel. At (0,3,1)
     they outrank this block's (0,2,1) gradient no matter the source order, so
     the moment a hand scored the bottom of the page went see-through and the
     tiles scrolled straight through the score (owner screenshot, 2026-09-05).
     Same two hues, composited onto the gradient instead of replacing it. */
  body.docs .result.good  { background: linear-gradient(180deg, #17424a, #12343d); }
  body.docs .result.under { background: linear-gradient(180deg, #3b3524, #2e2b1f); }
  body.docs .result.bad,
  body.docs .result.waiting { background: linear-gradient(180deg, #1a2f5c, #0d1a36); }
  /* IT IS A BUTTON. Nothing said so: the breakdown is the whole reason the
     calculator exists and it was one undiscoverable tap away (owner: the
     bottom is "not obviously expandable"). The caret points the way the
     sheet actually travels — up to open, down to close. */
  body.docs .result::after {
    content: '\25b4';
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    font-size: 15px; line-height: 1; opacity: .7;
  }
  body.docs .result.open::after { content: '\25be'; }
  /* the breakdown opens as a solid sheet above the bar, scrolling inside */
  body.docs .sheet { display: none; }
  body.docs .sheet.open {
    display: block; position: fixed; left: 12px; right: 12px; bottom: 72px; z-index: 59;
    max-height: 55vh; overflow-y: auto;
    background: linear-gradient(180deg, #142650, var(--panel));
    border: 1px solid rgba(169,182,200,.4); border-radius: 13px;
    padding: 14px 16px; box-shadow: 0 -10px 40px rgba(0,0,0,.6);
  }
  /* bigger tiles, tighter button padding so nine still fit at 360 */
  body.docs .pick { padding: 1px; }
  body.docs .pick .tile { --w: 34px; --h: 45px; --d: 2px; }
  body.docs #tray .tile { --w: 33px; --h: 44px; --d: 2px; }
}
/* <<< generated tiles */
/* The landing header's tile and wordmark are links home, like every generated
   page. They used to be a <div> and a <span>, so neither was clickable and a
   reader who aimed at the name got nothing. */
/* Only kill the underline. `color: inherit` here washed the tile's 蘭 out
   to the header's own cream, because .logo sets its own color:#c23a72 and an
   anchor rule of equal specificity later in the file beat it. */
header a.logo { text-decoration: none; }
header a.name { text-decoration: none; color: inherit; }
header a.name:hover { color: var(--gold); }
/* Language dropdown. The generated pages style this under body.docs; the
   landing page is body.landing, so without these it kept the browser's default
   disclosure triangle and rendered "▶ 繁 ▾". */
.langmenu { position: relative; font-size: 13px; font-weight: 700; }
.langmenu > summary {
  list-style: none; cursor: pointer; color: var(--brass);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px;
}
.langmenu > summary::-webkit-details-marker { display: none; }
.langmenu > summary::marker { content: ''; }
.langmenu > summary:hover { color: var(--cream); border-color: var(--brass); }
.langmenu .caret { font-size: 9px; opacity: .7; }
.langlist {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 40;
  display: flex; flex-direction: column; min-width: 132px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 5px; box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.langlist a {
  color: var(--bone); text-decoration: none; padding: 7px 10px;
  border-radius: 6px; white-space: nowrap; font-weight: 600;
}
.langlist a:hover { background: rgba(255,255,255,.07); }
.langlist a.on { color: var(--gold); }
/* ═══════════════ Orchid additions ═══════════════
   What Winds has no page for (dealer streak, payments, the tai variants),
   written in Winds' own idiom and tokens. */
.skip { position: absolute; left: -999px; top: 0; z-index: 50; padding: 8px 12px; background: var(--cream); color: #070e20; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
/* the page you are on, in the header nav */
header nav a.on { color: var(--gold); }
/* the breadcrumb trail (Winds' .crumb on every reference page) */
.crumb { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.crumb a { color: var(--gold); }
footer .mail { color: var(--cream); user-select: all; }
/* the flower band: Winds' winds band with the four flowers, pink instead of gold */
.winds.flowers span { color: rgba(241,166,195,.34); }
.winds.flowers .cap { color: var(--brass); }
/* the room picker screenshot is upright: a phone-shaped device, centred */
.device.port { max-width: 250px; margin: 0 auto; padding: 6px; border-radius: 24px; }
.device.port .shot { border-radius: 17px; }
/* zh: CJK needs no uppercase tracking games and reads better a touch looser */
html[lang^="zh"] .kicker, html[lang^="zh"] .eyebrow, html[lang^="zh"] .fieldlab { letter-spacing: .2em; }
html[lang^="zh"] .hero-copy h1 { letter-spacing: .01em; line-height: 1.15; }
.draftbar { background: #ffd34d; color: #3a2a00; font: 700 12px/1.3 -apple-system, "Segoe UI", sans-serif; text-align: center; padding: 5px 16px; }
/* the dealer marker beside a seat (calculator, pattern pages) */
.dtag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--gold); border: 1px solid rgba(241,166,195,.45); vertical-align: 1px; }
/* Readability floor (the owner, 2026-10-14: "it should be easy to read"):
   no text under 11px. Winds' labels ran 9-10.5px; these lift them. */
body.docs .fieldlab, .fieldlab { font-size: 11.5px; }
.langmenu .caret, body.docs .langmenu .caret { font-size: 11px; }
body.docs .worth-badge small { font-size: 11.5px; }
body.docs .detail-hand .meld .mt, body.docs .howhand .meld .mt { font-size: 11px; }
.dtag { font-size: 11px; }
body.docs .tag { font-size: 11px; }
body.docs .chiplab { font-size: 11px; }
body.docs .pick .cnt { font-size: 11px; min-width: 17px; height: 17px; line-height: 17px; }
.devwrap .tag { font-size: 11px; }
/* the hero's watermark glyph and the glow behind its screenshot hang past the
   right edge on a phone; the page must not scroll sideways for them */
.hero { overflow-x: clip; }
/* a callout's own heading when it sits straight under the page title */
body.docs .callout .ch { margin: 0 0 10px; font-size: 16.5px; font-weight: 800; color: var(--bone); letter-spacing: 0; text-transform: none; }
/* the nav wraps to the right like Winds' (six links, not four); on a phone the
   store buttons are a screen away, so "Get the app" leaves the nav */
header nav { justify-content: flex-end; }
@media (max-width: 600px) { header nav .navget { display: none; } }
/* a pattern's Chinese name and pinyin sit under the English on a phone, whole */
body.docs .cn-big { word-break: keep-all; }
@media (max-width: 640px) { body.docs .detail-h1 .cn-big { display: block; margin-top: 6px; font-size: 18px; } }
/* the header mark is the app icon's own pair of tiles (the orchid flower tile
   over the blue back), standing on the ground the way Winds' logo tile does */
header .logo.mark { width: auto; height: auto; background: none; box-shadow: none; transform: none; border-radius: 0; }
header .logo.mark img { display: block; width: 56px; height: 56px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
@media (max-width: 420px) { header .logo.mark img { width: 48px; height: 48px; } }
/* the four flower tiles fanned over the hero's table shot */
/* low enough that the rack stays readable: the fan hangs off the frame's lower edge */
.hero-shot .fan { position: absolute; z-index: 2; left: -40px; bottom: -100px; display: flex; align-items: flex-end; filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); pointer-events: none; }
.hero-shot .fan .tile { margin-right: -16px; transform-origin: 50% 100%; }
.hero-shot .fan .tile:nth-child(1) { transform: rotate(-16deg) translateY(10px); }
.hero-shot .fan .tile:nth-child(2) { transform: rotate(-6deg) translateY(2px); }
.hero-shot .fan .tile:nth-child(3) { transform: rotate(5deg) translateY(2px); }
.hero-shot .fan .tile:nth-child(4) { transform: rotate(15deg) translateY(10px); }
@media (max-width: 860px) {
  .hero-shot { padding-bottom: 80px; }
  .hero-shot .fan { left: 20px; bottom: 0; }
  /* !important: the fan's tiles carry their desktop size inline */
  .hero-shot .fan .tile { --w: 58px !important; --h: 78px !important; --d: 5px !important; margin-right: -12px; }
}
/* the flower band: Winds' winds band, here the four flower tiles that name the
   four rooms (梅 蘭 菊 竹: Plum, Orchid, Mum, Bamboo) */
.winds.flowers { align-items: center; gap: 22px 30px; flex-wrap: wrap; }
.winds.flowers .fl { display: grid; justify-items: center; gap: 8px; }
.winds.flowers .fl b { font-size: 13px; font-weight: 700; color: var(--cream); letter-spacing: .02em; }
.winds.flowers .cap { flex-basis: auto; }
@media (max-width: 600px) { .winds.flowers .cap { flex-basis: 100%; text-align: center; } }
/* ── review fixes, 2026-10-14 (scratchpad site-review.md) ── */
/* home at 421-480px: landscape 300 + portrait 124 + gap ran 34px off a 430 phone */
@media (max-width: 480px) {
  .devices { gap: 12px; }
  .ph.land { width: 210px; }
  .ph.port { width: 92px; }
}
/* the device captions are plain captions, as on Winds' landing (body.docs .tag
   made them bordered pills, and "PORTRAIT: / MENUS" wrapped) */
body.docs .devwrap .tag { display: block; margin: 12px 0 0; padding: 0; border: 0; background: none; letter-spacing: .08em; line-height: 1.4; }
/* both captions hold two lines, so the phones' bottoms line up when one wraps */
.devwrap .tag { min-height: 2.8em; }
/* the table screenshot is 1170 x 540: a 16:9 frame cut 18% off the seats */
.ph.land .scr { aspect-ratio: 1170 / 540; }
/* unselected winds and flowers: dim the tile, keep the label readable (was 2.3:1) */
body.docs .seg button, body.docs .bonuschip { opacity: 1; }
body.docs .seg button:not([aria-pressed="true"]) .tile, body.docs .bonuschip:not([aria-pressed="true"]) .tile { opacity: .45; }
/* the calculator's winds and flowers never drop under the md tile on a phone */
body.docs .seg .tile.lg, body.docs .bonuschip .tile.lg { --w: clamp(36px, calc(3.4vw + 15px), 46px); }
/* each payer's formula explains the amount beside it */
body.docs .resbody .pw small { font-size: 13.5px; }
/* two-option controls that wrap fill their row */
body.docs .seg2 { display: flex; flex-wrap: wrap; }
body.docs .seg2 button { flex: 1 1 auto; }
/* the tray header: the links take their own row instead of stranding "· flowers 1" */
body.docs .trayhead { flex-wrap: wrap; gap: 0 14px; }
body.docs .trayhead .count { white-space: nowrap; }
/* the App Store tile: white on the tile blue was 4.26:1 */
.store-ios { background: linear-gradient(180deg, #4a7fd6 0%, #2d63c4 55%, #234f9e 100%); }
/* zh: break between phrases, never inside a word (幾 / 分鐘) */
html[lang^="zh"] .hero-copy h1 { word-break: keep-all; overflow-wrap: anywhere; }
/* a pattern hand on a phone: two pungs share a row (they missed by 6px) */
@media (max-width: 640px) { body.docs .detail-hand { padding-left: 14px; padding-right: 14px; } }
/* the support address is a link like the others in the footer */
footer a.mail { color: var(--gold); user-select: text; }
/* a 360 phone: the language button rides the logo row, the nav keeps one line less */
@media (max-width: 420px) {
  header { position: relative; }
  header .langmenu, body.docs header .langmenu { position: absolute; top: 30px; right: 0; }
  header .name { margin-right: 64px; }
  header nav { gap: 8px 12px; }
}