/* PokerNow HUD Advanced: core website styles, on every page.
   Palette and type are the extension's own: baize ink, card-stock bone, chip gold and
   Barlow Semi Condensed numerals. Sections:
     1. fonts and tokens       5. buttons              9. FAQ
     2. base                   6. sections and type   10. HUD recreations (mirror the extension)
     3. header and nav         7. footer              11. motion and print
     4. skip link, utilities   8. plain pages
   Guides, articles and the other template pages add page.css; the home page adds home.css.
   Documentation: OPS/web/TEMPLATE.md. */

/* ---------- 1. fonts and tokens ---------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }
/* Arial sized to Barlow's metrics (widths measured on the site's own text in Chromium), so
   nothing moves when the web fonts arrive. Ascent and descent are Barlow's (1.0 and 0.2 em)
   divided by the size adjustment. */
@font-face { font-family: 'Barlow Fallback'; font-weight: 100 550; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust: 95.6%; ascent-override: 104.6%; descent-override: 20.9%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Fallback'; font-weight: 551 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 90.8%; ascent-override: 110.1%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow SC Fallback'; font-weight: 100 550; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust: 86%; ascent-override: 116.3%; descent-override: 23.3%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow SC Fallback'; font-weight: 551 650; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 81.8%; ascent-override: 122.2%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow SC Fallback'; font-weight: 651 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); size-adjust: 83.8%; ascent-override: 119.3%; descent-override: 23.9%; line-gap-override: 0%; }

:root {
  --ink: #0d1f26;
  --ink-2: #132b35;
  --ink-3: #1b3a47;
  --felt-1: #1a5446;
  --felt-2: #133f36;
  --felt-3: #0e312c;
  --bone: #ede6d6;
  --bone-2: #fff8e8;
  --soft: #cdd3ce;
  --dim: #9fb1b6;
  --faint: rgba(237, 230, 214, 0.56);
  --gold: #d2a45c;
  --focus: #f3cf7a;
  --hot: #efb54a;
  --cool: #7db8ea;
  --rule: rgba(237, 230, 214, 0.13);
  --rule-2: rgba(237, 230, 214, 0.22);
  --display: 'Barlow Semi Condensed', 'Barlow SC Fallback', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Barlow Fallback', system-ui, sans-serif;
  --wrap: 1160px;
  --gutter: 16px;
  --header: 60px;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 32px; --header: 64px; } }

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-kerning: normal;
  overflow-x: hidden;
}
@media (min-width: 720px) { body { font-size: 18px; } }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--focus); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--bone-2); }
a:not([href]) { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(243, 207, 122, 0.3); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(42px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.014em; }
h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.04; letter-spacing: -0.008em; }
h3 { font-size: 23px; line-height: 1.15; }
h4 { font-size: 19px; line-height: 1.2; font-weight: 600; }
code { font-family: var(--display); font-weight: 600; font-size: 0.95em; color: var(--bone); background: var(--ink-2); border-radius: 4px; padding: 0.08em 0.36em; }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }

/* ---------- 3. header and nav ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(13, 31, 38, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: var(--header); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--bone); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1;
}
.brand:hover { color: var(--bone); }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 8px 0 0; padding: 0; list-style: none; }
.nav-links a {
  display: block; padding: 8px 12px; border-radius: 6px;
  color: var(--dim); text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.2;
}
.nav-links a:hover { color: var(--bone); background: rgba(237, 230, 214, 0.06); }
.nav-links a[aria-current='page'] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 6px 6px 0 0; }
/* The phone menu: a disclosure that works without JavaScript. */
.menu { position: relative; display: none; }
.menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 8px; color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu summary .when-open { display: none; }
.menu[open] summary .when-open { display: block; }
.menu[open] summary .when-closed { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 2 * var(--gutter)));
  background: var(--ink-2); border-radius: 12px; padding: 8px;
  box-shadow: 0 0 0 1px var(--rule), 0 18px 40px rgba(0, 0, 0, 0.45);
}
.menu-panel ul { margin: 0; padding: 0; list-style: none; }
.menu-panel a {
  display: block; padding: 12px 14px; border-radius: 8px; color: var(--bone); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.2;
}
.menu-panel a:hover { background: var(--ink-3); }
.menu-panel a[aria-current='page'] { color: var(--focus); }
@media (max-width: 859px) {
  .nav-links { display: none; }
  .menu { display: block; }
}
/* Narrow phones: the name stacks on two lines so the button and menu keep their room. */
@media (max-width: 459px) {
  .brand { gap: 8px; }
  .brand svg { width: 26px; height: 26px; }
  .brand span { white-space: normal; max-width: 6.4em; font-size: 16.5px; line-height: 1.02; }
  .top .wrap { gap: 10px; }
  .top .btn.small { padding: 10px 12px; font-size: 15px; }
  .nav { gap: 6px; }
}
@media (max-width: 339px) {
  .brand svg { width: 22px; height: 22px; }
  .brand span { font-size: 15px; }
  .top .btn.small { padding: 9px 10px; font-size: 14px; }
  .menu summary { width: 40px; height: 40px; }
}

/* ---------- 4. skip link and utilities ---------- */
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  background: var(--bone); color: var(--ink); padding: 10px 14px; border-radius: 6px;
  font-family: var(--display); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--dim); }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- 5. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1;
  color: var(--ink); background: var(--bone);
  border: 0; border-radius: 8px; padding: 16px 26px; min-height: 48px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: background-color 120ms linear, transform 120ms ease;
}
.btn:hover { background: var(--bone-2); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.small { font-size: 16px; padding: 10px 15px; min-height: 40px; border-radius: 7px; box-shadow: none; }
.btn.ghost { background: none; color: var(--bone); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn.ghost:hover { background: rgba(237, 230, 214, 0.07); color: var(--bone); }

/* ---------- 6. sections and type ---------- */
.section { padding-block: 80px; }
@media (min-width: 980px) { .section { padding-block: 112px; } }
.section-head { max-width: 46em; }
.section-head p { margin-top: 18px; color: var(--soft); font-size: 19px; line-height: 1.55; max-width: 36em; }
@media (min-width: 720px) { .section-head p { font-size: 21px; } }
.lede { color: var(--soft); font-size: 19px; line-height: 1.55; max-width: 34em; }
@media (min-width: 720px) { .lede { font-size: 21px; } }
.fine { color: var(--dim); font-size: 15px; line-height: 1.45; }
.fine a { color: var(--dim); }
.fine a:hover { color: var(--bone); }

/* ---------- 7. footer ---------- */
.foot { border-top: 1px solid var(--rule); padding-block: 56px 48px; color: var(--dim); font-size: 15px; line-height: 1.55; background: linear-gradient(180deg, rgba(19, 43, 53, 0.55), rgba(13, 31, 38, 0) 70%); }
.foot .wrap { display: grid; gap: 36px; }
@media (min-width: 900px) { .foot .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } }
.foot .brand { font-size: 18px; }
.foot .brand svg { width: 26px; height: 26px; }
.foot-about p { margin-top: 14px; max-width: 30em; }
.foot-about .entity { color: var(--soft); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px 24px; }
.foot-cols h2 { font-size: 15px; line-height: 1.3; letter-spacing: 0; font-weight: 600; color: var(--bone); margin-bottom: 10px; }
.foot-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--bone); text-decoration: underline; }
.foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* ---------- 8. plain pages (privacy, 404, get) ---------- */
.page { padding-block: 48px 104px; }
@media (min-width: 980px) { .page { padding-block: 64px 128px; } }
.page .narrow { max-width: calc(760px + 2 * var(--gutter)); }
.page h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.02; }
.page .meta { color: var(--dim); margin-top: 14px; font-size: 16px; }
.page .intro { color: var(--soft); margin-top: 22px; font-size: 19px; line-height: 1.55; }
.page article > h2, .policy h2 { font-size: 28px; margin: 48px 0 0; }
.policy h2 + p, .policy h2 + ul { margin-top: 12px; }
.policy p, .policy li { color: var(--soft); }
.policy ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.policy p + p { margin-top: 14px; }
.page .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.related-list { margin: 22px 0 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--soft); }
.related-list li::marker { color: var(--gold); }
.policy-more { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--soft); }

/* ---------- 9. FAQ (home page and guides) ---------- */
/* FAQ: <details> per question; the answer's first sentence answers it. */
.faq { border-top: 1px solid var(--rule); max-width: 52em; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 48px 20px 0;
  font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--bone);
}
@media (min-width: 720px) { .faq summary { font-size: 22px; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-52%);
  font-family: var(--display); font-weight: 500; font-size: 28px; color: var(--dim);
}
.faq details[open] summary::after { content: '\2013'; }
.faq summary:hover::after { color: var(--bone); }
.faq summary h3 { display: inline; font: inherit; }
.faq .a { padding: 0 0 24px; color: var(--soft); max-width: 42em; display: grid; gap: 12px; }
.prose > .faq { margin-top: 24px; max-width: 720px; }

/* ---------- 10. HUD recreations ----------
   The extension's styles.ts (0.4.0, its sizes for windows 1,100px and up) in em: .hud's font
   size stands for its 12px root; each value is its px over the element's own type size (13px
   pill, 13.5px open-badge line). Put them on .felt. */
.felt {
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(120% 95% at 50% 32%, var(--felt-1), var(--felt-2) 55%, var(--felt-3));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0 7px rgba(4, 18, 16, 0.5), 0 24px 60px rgba(0, 0, 0, 0.32);
}
.tip-host { position: relative; }
.hud {
  font-family: var(--display); font-feature-settings: 'tnum' 1, 'lnum' 1; line-height: 1.2; color: var(--bone); font-size: 13px;
  --hud-ink: rgba(13, 31, 38, 0.93);
  /* Hairline edge on badges, the dock, the panel and tooltips. */
  --edge: rgba(237, 230, 214, 0.22);
  --edge-2: rgba(237, 230, 214, 0.38);
}

/* Seat badges: a pill at rest, a card when open. The type follows the numbers. */
.hud .badge {
  position: relative; display: inline-flex; flex-direction: column; align-self: flex-start;
  background: var(--hud-ink); box-shadow: inset 0 0 0 1px var(--edge), 0 1px 0 rgba(0, 0, 0, 0.35);
  user-select: none; text-align: left; color: var(--bone);
  font: inherit; border: 0;
}
.hud .badge > *, .hud .badge > .face > *, .hud .badge .row > * { transition: opacity 120ms linear; }
button.badge { cursor: pointer; }
.hud .badge.mini { padding: 0.154em 0.615em; border-radius: 0.769em; font-size: 1.083em; line-height: 1.231; }
.hud .badge.open { padding: 0.333em 0.75em 0.417em; border-radius: 0.5em; gap: 0.25em; max-width: 21.667em; box-shadow: inset 0 0 0 1px var(--edge), 0 0.333em 1.167em rgba(0, 0, 0, 0.4); }
/* Folded: the numbers dim, the pill and its edge stay, and so does your tag chip (home.css). */
.hud .badge.folded > :not(.face):not(.row), .hud .badge.folded > .face > :not(.row), .hud .badge.folded .row > :not(.tg) { opacity: 0.5; }
.hud .badge.pinned { box-shadow: inset 0 0 0 1px var(--edge-2), 0 0.333em 1.167em rgba(0, 0, 0, 0.4); }
.hud .badge.toact { box-shadow: 0 0 0 0.167em var(--focus), 0 0.333em 1.167em rgba(0, 0, 0, 0.4); }
.hud .badge.mini.toact { box-shadow: 0 0 0 0.154em var(--focus), 0 0.308em 1.077em rgba(0, 0, 0, 0.4); }
.hud .badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hud .row { display: flex; align-items: baseline; gap: 0.538em; white-space: nowrap; }
.hud .vp { display: inline-flex; align-items: baseline; gap: 0.077em; }
.hud .badge .vp .st { font-weight: 700; }
.hud .base { font-size: 1.125em; gap: 0.519em; }
.hud .dot { width: 0.385em; height: 0.385em; border-radius: 50%; background: var(--focus); align-self: center; margin-left: -0.154em; }
.hud .n { color: var(--dim); font-size: 0.815em; font-weight: 500; margin-left: auto; padding-left: 0.182em; }
.hud [data-k], .hud [data-tip] { cursor: help; }
.hud button.badge [data-k] { cursor: pointer; }
.hud .nb { display: inline-flex; align-items: center; gap: 0.19em; align-self: center; margin-right: -0.286em; padding: 0.095em 0.286em; border-radius: 0.286em; line-height: 1; color: var(--dim); font-size: 0.778em; font-weight: 600; }
.hud .nb svg { width: 1.048em; height: 1.048em; }
.hud .ctx { padding-top: 0.231em; border-top: 1px solid var(--rule); font-size: 1.083em; flex-wrap: wrap; row-gap: 0.154em; white-space: normal; }
.hud .ctx .pair { white-space: nowrap; }
.hud .note { display: block; color: var(--dim); font-size: 1em; line-height: 1.3; max-width: 20em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud .lb { color: var(--dim); font-weight: 500; }
.hud .st { font-weight: 600; border-radius: 0.2em; }
.hud .st.low { color: var(--cool); }
.hud .st.high { color: var(--hot); }
/* --faint is 56% bone here (50% in the extension), for a 4.5:1 contrast. */
.hud .st.thin { color: var(--faint); }
.hud .st.none { color: var(--faint); font-weight: 500; }
.hud .st.lit { box-shadow: 0 0 0 0.12em var(--focus); }
.hud .st:focus-visible, .hud .n:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hud .pair { display: inline-flex; gap: 0.15em; align-items: baseline; }
.hud .slash { color: var(--faint); }
/* Player type, after the numbers. Gold = loose recreational, blue = tight, bone = solid regular. */
.hud .ty { font-size: 0.769em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; color: rgba(237, 230, 214, 0.82); white-space: nowrap; }
.hud .ty.hot { color: var(--hot); }
.hud .ty.cool { color: var(--cool); }
.hud .ty.thin { color: var(--faint); }
.hud .note .ty { font-size: 0.833em; margin-right: 0.6em; }
.hud .note .txt.auto { text-decoration: underline dotted rgba(237, 230, 214, 0.35); text-underline-offset: 2px; }
.hud .ty:focus-visible, .hud .txt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.badge .face { display: contents; }
.badge.mini .face-open, .badge.open .face-mini { display: none; }

/* The decision dock */
.hud .dock {
  position: relative; width: 22em; max-width: 100%;
  background: var(--hud-ink); border-radius: 0.667em;
  box-shadow: inset 0 0 0 1px var(--edge), 0 0.5em 1.5em rgba(0, 0, 0, 0.35);
  padding: 0.5em 0.667em 0.583em 0.833em;
}
.hud .dock .dtop { display: flex; align-items: center; gap: 0.667em; }
.hud .dock .titles { flex: 1; min-width: 0; }
/* The chip mark: before .titles between your turns, in the randomizer's place. */
.hud .dock .mark { display: block; flex: none; width: 1.5em; height: 1.5em; }
.hud .dock .head { font-size: 1.25em; font-weight: 600; line-height: 1.2; }
.hud .dock .sub { color: var(--dim); font-size: 1em; margin-top: 0.083em; }
.hud .dock .hide { align-self: flex-start; color: var(--dim); font-size: 1.167em; line-height: 1; padding: 0.071em 0.143em; margin: -0.071em -0.143em 0 0; }
.hud .dock .opts { margin-top: 0.5em; padding-top: 0.5em; border-top: 1px solid var(--rule); display: grid; gap: 0.417em; }
.hud .dock .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 0.667em; font-size: 1em; color: var(--dim); }
.hud .dock .cap .verb { color: var(--bone); font-weight: 600; font-size: 1.083em; }
.hud .dock .cap .what { text-align: right; min-width: 0; }
.hud .dock b { color: var(--bone); font-weight: 600; }
/* Fold rates under the sizes: the dock's biggest numbers. */
.hud .dock .sizes { display: flex; gap: 0.5em; }
.hud .dock .cell { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 0.25em; }
.hud .dock .sizes button {
  width: 100%; font: inherit; font-weight: 600; font-size: 1.167em; line-height: 1.1;
  color: var(--ink); background: var(--bone); border: 0; border-radius: 0.286em; padding: 0.286em; cursor: pointer;
}
.hud .dock .sizes button small { display: block; font-weight: 500; font-size: 0.786em; color: #3e5660; }
.hud .dock .sizes button:hover { background: var(--bone-2); }
.hud .dock .sizes button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hud .dock .sizes button.pressed { box-shadow: 0 0 0 0.125em var(--focus); }
.hud .dock .cell .st { font-size: 1.333em; font-weight: 700; line-height: 1.1; }
.hud .dock .line { font-size: 1.042em; color: var(--dim); line-height: 1.35; }
.hud .dock .line .st { font-size: 1.04em; }
.hud .dock .line .if { color: var(--dim); }

/* The randomizer: a chip whose face is the number. */
.hud .chip {
  flex: none; display: grid; place-items: center;
  width: 2.46em; height: 2.46em; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 1.083em; font-weight: 700; color: var(--bone);
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 0.808em, transparent 0.846em),
    repeating-conic-gradient(var(--bone) 0 18deg, #b8894a 18deg 36deg);
  box-shadow: inset 0 0 0 0.154em var(--ink);
}
.hud .chip.wide { letter-spacing: -0.06em; }
.hud .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hud .chip.rolled { animation: spin 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes spin { from { transform: rotate(-200deg); } to { transform: rotate(0); } }

/* Stat tooltips */
.hud .tip {
  max-width: 22.5em; background: var(--ink); color: var(--bone);
  border-radius: 0.5em; padding: 0.583em 0.75em;
  box-shadow: inset 0 0 0 1px var(--edge), 0 0.5em 1.333em rgba(0, 0, 0, 0.4);
  font-size: 1em; line-height: 1.35;
}
.hud .tip b { font-size: 1.125em; font-weight: 700; }
.hud .tip .val { font-size: 1.5em; font-weight: 700; margin: 0.111em 0; }
.hud .tip .muted { color: var(--dim); }
.hud .tip .hint { margin-top: 0.333em; color: var(--hot); }
.hud .tip .hint.cool { color: var(--cool); }
.hud .tip.floating { position: absolute; z-index: 6; pointer-events: none; width: max-content; }
/* The wrapper a floating tooltip is added in: never part of the layout, whatever the page's CSS. */
.hud.tip-layer { display: contents !important; }

/* A HUD snippet inside an article (for example a badge next to a stat's definition). */
.hud-figure { display: grid; place-items: center; padding: 28px 20px; container-type: inline-size; }
.hud-figure .hud { font-size: 15px; }

/* ---------- 11. motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .top, .foot, .skip, .toc, .install, .menu { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .prose, .prose strong, .prose h2, .prose h3, .lede, table.data, table.data th { color: #000 !important; }
  a { color: #000; }
}