:root {
  --paper: #f3efe6; --paper-2: #ebe6da; --panel: #fbf9f4; --ink: #17150f; --ink-2: #3d392f; --muted: #6f6a5e; --line: #d9d3c4; --line-2: #c4bda9;
  --tape: #f5c400; --target: #ff4b33; --ref: #1f4dff; --good: #1f8f5a; --warn: #d28a0c; --bad: #d0321f;
  --display: "Bricolage Grotesque", "Archivo Black", Impact, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --r: 10px; --r-lg: 18px;
  --shadow: 0 1px 0 rgba(23,21,15,.06), 0 12px 30px -18px rgba(23,21,15,.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14130f; --paper-2: #1b1a15; --panel: #1f1e18; --ink: #f3efe6; --ink-2: #d8d2c3; --muted: #9a9484; --line: #2f2d25; --line-2: #45422f;
    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --paper: #14130f; --paper-2: #1b1a15; --panel: #1f1e18; --ink: #f3efe6; --ink-2: #d8d2c3; --muted: #9a9484; --line: #2f2d25; --line-2: #45422f;
}
* { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1; letter-spacing: -0.02em; margin: 0 0 .4em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-top: 1.4em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 18px; }
button { font: inherit; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.brand svg { width: 30px; height: 30px; }
.brand .tape { color: var(--tape); }
nav.main { margin-left: auto; display: flex; gap: 2px; }
nav.main a { text-decoration: none; white-space: nowrap; padding: 8px 12px; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--muted); }
nav.main a:hover, nav.main a.active { color: var(--ink); background: var(--paper-2); }
.streak { font-size: .85rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.streak b { color: var(--target); }
main { padding: 18px 0 70px; }

/* ---------- theme strip ---------- */
.themes { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.themes::-webkit-scrollbar { display: none; }
.themes a { flex: 0 0 auto; text-decoration: none; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); font-weight: 700; font-size: .92rem; color: var(--ink-2); background: var(--panel); display: inline-flex; align-items: center; gap: 7px; transition: transform .1s ease, background .15s ease; }
.themes a:hover { transform: translateY(-1px); border-color: var(--ink); }
.themes a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.themes a .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: none; }
.themes a.done .dot { display: inline-block; }
.themes .sep { flex: 0 0 1px; background: var(--line-2); margin: 6px 6px; }

/* ---------- game ---------- */
.game { background: var(--panel); border: 1.5px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.game-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; flex-wrap: wrap; }
.game-head .title { font-family: var(--display); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1; }
.game-head .sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.progress { display: flex; align-items: center; gap: 10px; }
.rounds { display: flex; gap: 5px; }
.rounds span { width: 26px; height: 9px; border-radius: 3px; background: var(--paper-2); border: 1px solid var(--line-2); }
.progress { flex-wrap: wrap; max-width: 100%; } .rounds { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 600px) { .rounds span { width: 16px; height: 8px; } .rounds { gap: 4px; } .game-head .pts { min-width: 0; } }
.rounds span.cur { background: var(--tape); border-color: var(--tape); }
.rounds span.s3 { background: var(--good); border-color: var(--good); }
.rounds span.s2 { background: var(--warn); border-color: var(--warn); }
.rounds span.s1 { background: var(--bad); border-color: var(--bad); }
.pts { font-family: var(--display); font-weight: 800; font-size: 1.2rem; min-width: 64px; text-align: right; }
.pts small { font-weight: 600; font-family: var(--body); color: var(--muted); font-size: .8rem; }

.prompt { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prompt > div { padding: 12px 18px; display: flex; gap: 10px; align-items: center; }
.prompt > div + div { border-left: 1px solid var(--line); }
.prompt .sw { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; }
.prompt .ref .sw { background: var(--ref); } .prompt .target .sw { background: var(--target); }
.prompt b { display: block; font-size: 1.02rem; line-height: 1.2; }
.prompt small { color: var(--muted); font-size: .84rem; }
.prompt .target small { color: var(--target); font-weight: 700; }
@media (max-width: 560px) { .prompt { grid-template-columns: 1fr; } .prompt > div + div { border-left: 0; border-top: 1px solid var(--line); } }

.board { position: relative; height: 440px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background-color: var(--panel);
  background-image: radial-gradient(var(--line-2) 1px, transparent 1.2px); background-size: 22px 22px; background-position: 0 0; }
@media (max-width: 600px) { .board { height: 360px; } .hint { white-space: normal; max-width: calc(100% - 24px); width: max-content; text-align: center; font-size: .82rem; padding: 8px 12px; } }
.board .ground { position: absolute; left: 0; right: 0; bottom: 48px; border-top: 2px solid var(--ink); }
.ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; overflow: visible; pointer-events: none; }
.ruler line { stroke: var(--ink); stroke-width: 1.2; }
.ruler line.minor { stroke: var(--line-2); }
.ruler text { font: 600 10.5px var(--body); fill: var(--muted); }
.sil { position: absolute; bottom: 48px; display: block; transition: none; }
.sil.ref-sil { z-index: 1; }
.sil.target-sil { z-index: 2; cursor: grab; }
.sil.target-sil:active { cursor: grabbing; }
.sil.actual-sil { z-index: 3; opacity: .4; pointer-events: none; }
.handle { position: absolute; width: 28px; height: 28px; border-radius: 8px; background: var(--target); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); z-index: 6; cursor: nwse-resize; touch-action: none; display: grid; place-items: center; }
.handle::before { content: ""; width: 10px; height: 10px; border-right: 2.5px solid var(--paper); border-top: 2.5px solid var(--paper); transform: translate(-2px, 2px); }
.handle::after { content: ""; position: absolute; inset: -16px; }
.handle.pulse { animation: pulse 1.4s ease-in-out 3; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.label { position: absolute; z-index: 5; font-size: .8rem; font-weight: 700; padding: 3px 8px 3px 7px; border-radius: 6px; background: var(--ink); color: var(--paper); white-space: nowrap; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ref); }
.label.target::before { background: var(--target); }
.label.actual { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); }
.label.actual::before { background: var(--ink); }
.hint { position: absolute; z-index: 8; left: 50%; top: 18px; transform: translateX(-50%); background: var(--tape); color: #17150f; font-weight: 700; font-size: .9rem; padding: 9px 14px; border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); pointer-events: none; animation: hint .5s ease; white-space: nowrap; }
@keyframes hint { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.controls { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.controls .resize { display: flex; flex-direction: column; gap: 4px; }
.controls .resize span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
input[type=range] { width: 100%; height: 28px; accent-color: var(--target); margin: 0; }
.zoom { display: inline-flex; border: 1.5px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.zoom button { border: 0; background: transparent; width: 38px; height: 36px; cursor: pointer; font-weight: 800; color: var(--ink-2); font-size: 1.1rem; }
.zoom button:hover { background: var(--paper-2); }
.estimate { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.estimate small { display: block; font-family: var(--body); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 600px) { .controls { grid-template-columns: 1fr auto; } .estimate { grid-column: 1 / -1; text-align: left; } }

.actions { display: flex; gap: 10px; align-items: center; padding: 0 18px 18px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 800; font-size: 1.02rem; cursor: pointer; text-decoration: none; box-shadow: 3px 3px 0 var(--tape); transition: transform .08s ease, box-shadow .08s ease; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tape); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tape); }
.btn.secondary { background: transparent; color: var(--ink); box-shadow: none; }
.btn.secondary:hover { background: var(--paper-2); box-shadow: none; }
.btn.small { padding: 9px 16px; font-size: .92rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
@media (max-width: 600px) { .actions .btn:first-child { width: 100%; } }
.kbd-hint { color: var(--muted); font-size: .86rem; }
/* Keyboard hints are noise on a phone, where there is no keyboard to hint at. */
.kbd-wide { display: none; }
@media (min-width: 601px) { .kbd-wide { display: inline; } }

.reveal { margin: 0 18px 18px; padding: 16px 18px; border-radius: var(--r); background: var(--paper-2); display: grid; gap: 8px; animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal .score { font-family: var(--display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.reveal .score .verdict { font-family: var(--body); font-size: 1rem; font-weight: 700; }
.reveal .score.good, .good-text { color: var(--good); } .reveal .score.warn, .warn-text { color: var(--warn); } .reveal .score.bad, .bad-text { color: var(--bad); }
.reveal .fact { color: var(--muted); }

/* ---------- summary ---------- */
.summary { padding: 26px 18px 18px; text-align: center; }
.summary .eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.summary .big { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 10vw, 5.2rem); letter-spacing: -0.04em; line-height: 1; margin: 8px 0 4px; }
.summary .big small { font-size: .35em; color: var(--muted); letter-spacing: 0; }
/* One block a round. It wraps, and the phone-sized block lives here rather than in the media
   query at the top of this file - both because of a run of Boss Run played by hand at 400px on
   2026-10-24. Until then this row could not wrap and had no max-width, so a summary's blocks were
   laid out at their full natural width and .game's own `overflow: hidden` quietly cut off whatever
   did not fit: twenty blocks came to 794px inside a 362px card and a player saw about nine of
   them, centred, clipped at both ends. It was never only Boss Run's - ten 34px blocks already came
   to 394px and lost the end of the row on every game's summary - and nothing could see it, because
   a clipped element overflows no document and these blocks hold no text for the overflow pass to
   measure. The 26px phone size had been written for exactly this and never applied: it sat in a
   `max-width: 600px` block *above* the 34px rule, same specificity, so the later rule won at every
   width. Hence both halves here, in source order, with the e2e's new clipping pass holding them. */
.blocks { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 6px; margin: 8px 0 14px; }
.blocks span { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--ink); background: var(--paper-2); }
@media (max-width: 600px) { .blocks span { width: 26px; height: 26px; } }
.blocks span.s3 { background: var(--good); } .blocks span.s2 { background: var(--warn); } .blocks span.s1 { background: var(--bad); }
.summary table { margin: 12px auto 16px; border-collapse: collapse; width: 100%; max-width: 620px; font-size: .95rem; text-align: left; }
/* The verdict cell of a summary table. A round is told apart by its glyph first and by its colour
   second: until 2026-10-17 a right call was green and a wrong one carried no class at all, so the
   whole distinction was a colour and the one screen that reads the day back said nothing to a
   colour-blind player, to anyone in greyscale or to a printed page. Since 2026-10-24 there are
   three of each rather than two - ✓ --good, ≈ --warn, ✗ --bad - because Boss Run's estimate
   rounds pay partial credit and a near miss was reading as a plain ✗ with amber left carrying the
   difference. The one rule here lets a long word break rather than widening the cell: Which One?
   prints an object name in this column and the column can be 46px. Nothing pins the width, on
   purpose - the glyph is held to what it marks by a non-breaking space in app.js instead, which
   keeps the mark with its value without stopping a name from wrapping. */
.summary table td.call { overflow-wrap: anywhere; }
.summary th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.summary td, .summary th { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.summary td:last-child, .summary th:last-child { text-align: right; font-weight: 800; }
.summary .actions { justify-content: center; padding: 0; }
/* Bigger or Smaller share card: one emoji square per call, ten to a row. */
.summary .runcard { margin: 10px auto 14px; max-width: 320px; padding: 10px 12px; border-radius: var(--r); background: var(--paper-2); border: 1.5px solid var(--line-2); overflow-wrap: anywhere; }
.summary .runcard small { display: block; margin-bottom: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.summary .runcard div { font-size: 1.1rem; line-height: 1.3; letter-spacing: .05em; }
/* The result card, shown rather than hidden behind the share button (2026-10-27). The canvas is
   1080x1350 and is laid out at whatever width is going: `height: auto` against the intrinsic
   attributes keeps the ratio without a magic number here that could drift from CARD_W/CARD_H.
   It carries no shadow of its own - it paints its own tape-yellow one inside the picture - and the
   hairline is only there to separate a light card from a light page. */
.summary .cardprev { margin: 18px auto 14px; max-width: 320px; }
.summary .cardprev canvas { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1.5px solid var(--line-2); }
.summary .cardprev figcaption { margin-top: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.next-up { margin-top: 22px; }
.next-up h3 { margin-bottom: 10px; }

/* ---------- numeric ---------- */
.numq { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 18px; }
/* Where a numeric question's figure was checked. Quiet on purpose: it is an attribution line
   under the answer, not part of the result. */
.numsrc { margin: 6px 0 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.numinput { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.numinput input { flex: 1; min-width: 160px; font: inherit; font-family: var(--display); font-weight: 800; font-size: 1.5rem; padding: 10px 14px; border-radius: var(--r); border: 2px solid var(--ink); background: var(--panel); color: var(--ink); }
.numinput input:focus { outline: 3px solid var(--tape); outline-offset: 1px; }
.numinput .unit { display: flex; align-items: center; padding: 0 12px; color: var(--muted); font-weight: 700; }
.lives { display: flex; gap: 3px; }
.lives span { width: 14px; height: 14px; border-radius: 50%; background: var(--target); border: 1.5px solid var(--ink); }
.lives span.lost { background: transparent; }
.timer { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.6rem; }
.timer.low { color: var(--bad); }
.bar { height: 8px; background: var(--paper-2); border-radius: 4px; overflow: hidden; margin: 8px 0 14px; border: 1px solid var(--line); }
.bar > div { height: 100%; background: var(--tape); transition: width .2s linear; }
.pad { padding: 18px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px auto 0; max-width: 620px; }
.stats div { background: var(--paper-2); border-radius: var(--r); padding: 10px; text-align: center; }
.stats b { display: block; font-family: var(--display); font-size: 1.5rem; }
.stats span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
@media (max-width: 480px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- below the fold ---------- */
.below { margin-top: 42px; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 8px; }
.how div { padding: 16px; border-radius: var(--r); background: var(--panel); border: 1.5px solid var(--line-2); }
.how .n { font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--tape); -webkit-text-stroke: 1.5px var(--ink); line-height: 1; margin-bottom: 8px; }
.how b { display: block; margin-bottom: 4px; }
.how p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 680px) { .how { grid-template-columns: 1fr; } }
.prose { max-width: 720px; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.callout { border-left: 4px solid var(--tape); padding: 8px 14px; background: var(--panel); border-radius: 0 var(--r) var(--r) 0; margin: 1em 0; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::after { content: "+"; font-family: var(--display); font-size: 1.3rem; line-height: 1; color: var(--muted); }
details[open] summary::after { content: "–"; }
details p { margin: 8px 0 0; color: var(--muted); }

.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.modes a { text-decoration: none; padding: 14px 16px; border-radius: var(--r); background: var(--panel); border: 1.5px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; transition: transform .1s ease, border-color .1s ease; }
.modes a:hover { transform: translateY(-2px); border-color: var(--ink); }
.modes a.done { border-color: var(--good); }
.modes strong { font-family: var(--display); font-size: 1.05rem; }
.modes span { color: var(--muted); font-size: .88rem; }
.modes .idx { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--tape); -webkit-text-stroke: .6px var(--ink); }
/* Per-theme best streaks, currently only on the Bigger or Smaller card. */
.modes .bests { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--ink); font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.modes .bests b { font-weight: 800; }

.archive-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.archive-list a { text-decoration: none; padding: 10px 12px; border-radius: var(--r); border: 1.5px solid var(--line-2); background: var(--panel); display: flex; justify-content: space-between; font-size: .95rem; font-weight: 600; }
.archive-list a .sc { color: var(--muted); }
.archive-list a.done { border-color: var(--good); }
/* The weight ladder on /weigh-it-up. Wider cells than the archive grid: a row carries an object's
   name and its weight, and the block is read top to bottom as a ladder, so fewer columns keeps the
   order legible inside .prose's 720px. One column on a phone. */
.wt-ladder { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.answers table { width: 100%; border-collapse: collapse; }
.answers th, .answers td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.answers th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.answers td.ratio { font-family: var(--display); font-weight: 800; white-space: nowrap; font-size: 1.1rem; }

.site-footer { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--muted); font-size: .9rem; }
.site-footer .links { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.site-footer a { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-weight: 700; z-index: 50; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- ads & object pages ---------- */
.ad { margin: 16px 0; min-height: 90px; }
.ad ins { border-radius: var(--r); overflow: hidden; }
.object h1 { margin-top: 6px; }
.object-row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; margin-top: 12px; }
.object-sil { width: 100%; max-height: 220px; object-fit: contain; object-position: bottom; }
.big-measure { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.big-measure small { display: block; font-family: var(--body); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.comps { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 4px; }
.comps li b { font-family: var(--display); font-size: 1.15rem; }
@media (max-width: 600px) { .object-row { grid-template-columns: 1fr; } .object-sil { max-height: 160px; width: auto; max-width: 100%; } }

/* ---------- unique features ---------- */
.rank { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 1.1rem; background: var(--tape); color: #17150f; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); margin: 2px 0 12px; }
.duel-tag { margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--target); }
.duel-result { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.duel-result.win { color: var(--good); } .duel-result.lose { color: var(--bad); }
.me-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 18px; }
.me-card { background: var(--panel); border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 16px; }
.me-card .eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.me-stat { font-family: var(--display); font-size: 1.3rem; margin: 4px 0 8px; }
.me-stat b { color: var(--target); }
.me-card ul { list-style: none; padding: 0; margin: 0 0 12px; font-size: .92rem; display: grid; gap: 5px; }
.me-line { font-weight: 600; }

nav.main select { font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-2); background: var(--paper-2); border: 0; border-radius: 999px; padding: 7px 10px; margin-left: 4px; cursor: pointer; }
.unit-pill { font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border: 0; border-radius: 999px; padding: 7px 10px; margin-left: 4px; cursor: pointer; white-space: nowrap; }
.unit-pill:hover { color: var(--ink); background: var(--tape); }
.numinput.two input { min-width: 96px; }
@media (max-width: 600px) { .site-header .wrap { gap: 8px; } .brand { font-size: 1.05rem; gap: 6px; } .brand svg { width: 24px; height: 24px; } nav.main { overflow-x: auto; scrollbar-width: none; } nav.main::-webkit-scrollbar { display: none; } nav.main a { padding: 8px 8px; font-size: .85rem; } nav.main select { font-size: .8rem; padding: 6px 6px; } .unit-pill { font-size: .8rem; padding: 6px 7px; margin-left: 2px; } }

/* Weight rounds: two-pan balance drawn in SVG inside the board */
.board.scale .balance { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.balance .pillar, .balance .bar, .balance .foot { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.balance .pivot { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.balance .string { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.balance .dish { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2; }
.balance .beam, .balance .pan { transition: transform .7s cubic-bezier(.2, .9, .3, 1.1); }
.balance .pan.right { cursor: grab; touch-action: none; }
.balance .pan.right.pulse .dish { transform-box: fill-box; transform-origin: center; animation: pulse 1.2s ease-in-out 3; }
.balance .count { font: 800 15px var(--display); fill: var(--ref); text-anchor: middle; pointer-events: none; }

/* ---------- quick games: Bigger or Smaller, Line Them Up, Which One?, hub ---------- */
.qsil { height: 64px; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 8px; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; padding: 8px 18px 0; }
.versus .card { text-align: center; padding: 16px 12px; border-radius: var(--r); border: 2px solid var(--line-2); background: var(--paper-2); transition: border-color .2s, background .2s; }
.versus .card b { display: block; font-family: var(--display); font-size: 1.1rem; line-height: 1.1; }
.versus .card span { color: var(--muted); font-size: .88rem; }
/* Release Year prints the year inside that muted line, so it needs to read as the figure it is. */
.versus .card .yr { font-style: normal; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Who's older?: the anchor card carries a sentence and not a number - a birth date, a death date
   for the deceased and the age reached - so it gets its own line under the role instead of sharing
   the category's. The challenger's "?" takes the same line at the size the year games print their
   hidden value at, so the two cards keep the same height before the reveal and nothing jumps when
   the sentence lands. Below 601px the card is the full width of the screen and the sentence wraps. */
.versus .card .who-dates { display: block; margin-top: 6px; font-style: normal; font-weight: 700; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.versus .card .who-dates.q { font-size: 1.25rem; font-weight: 800; }
.versus .card.ref { border-color: var(--ref); } .versus .card.target { border-color: var(--target); }
.versus .card.hit { background: color-mix(in srgb, var(--good) 18%, var(--paper-2)); border-color: var(--good); }
.versus .card.miss { background: color-mix(in srgb, var(--bad) 18%, var(--paper-2)); border-color: var(--bad); }
.versus .vs { align-self: center; font-family: var(--display); font-weight: 800; color: var(--muted); }
.numq.q { padding: 14px 18px 0; margin: 0 0 12px; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.actions.choice .btn { flex: 1 1 160px; }
.actions.choice .kbd-hint { flex: 1 1 100%; }
.pts .best { font-weight: 600; }
.picker { margin: 12px 4px 0; font-size: .9rem; } .picker a { text-decoration: none; padding: 2px 6px; border-radius: 6px; } .picker a.on { background: var(--ink); color: var(--paper); }
.lineup .slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.lineup .slot { min-height: 118px; border: 2px dashed var(--line-2); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 4px; font-size: .85rem; }
.lineup .slot .n { font-family: var(--display); font-size: 1.6rem; color: var(--line-2); }
.lineup .slot.filled { border-style: solid; border-color: var(--target); background: var(--paper-2); }
.lineup .slot.hit { border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, var(--paper-2)); }
.lineup .slot.miss { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, var(--paper-2)); }
.lineup .slot b { line-height: 1.1; } .lineup .slot span { color: var(--muted); font-size: .8rem; }
.lineup .tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; border: 2px dashed transparent; border-radius: var(--r); min-height: 60px; }
.lineup .item, .opts .opt { font: inherit; cursor: pointer; background: var(--panel); border: 2px solid var(--ink); border-radius: var(--r); padding: 10px 12px; color: var(--ink); box-shadow: 3px 3px 0 var(--tape); text-align: center; transition: transform .08s; }
.lineup .item { flex: 1 1 120px; max-width: 200px; }
.lineup .item:hover, .opts .opt:hover:not(:disabled) { transform: translate(-1px, -1px); }
.lineup .item b, .opts .opt b { display: block; font-family: var(--display); font-size: 1rem; line-height: 1.1; }
/* Drag-and-drop on desktop (2026-10-15). The tray keeps a transparent border and a floor under its
   height so that it is still a target once all four cards are placed, and so highlighting it on
   hover-over moves nothing. The silhouette is taken out of the pointer's way: it is an <img>, which
   the browser would otherwise drag as a picture instead of letting the card it sits in start the
   drag. The grab cursor is behind a fine-pointer query because touch cannot drag at all. */
.lineup .slot.over, .lineup .tray.over { border-color: var(--target); background: color-mix(in srgb, var(--target) 14%, var(--paper-2)); }
.lineup .slot.over { border-style: dashed; }
.lineup .dragging { opacity: .45; }
.lineup .slot img, .lineup .item img { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .lineup .item, .lineup .slot.filled[draggable="true"] { cursor: grab; } .lineup .dragging { cursor: grabbing; } }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opts .opt span { display: block; font-size: .82rem; margin-top: 2px; }
.opts .opt:disabled { cursor: default; box-shadow: none; opacity: .75; }
.opts .opt.hit { opacity: 1; border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, var(--panel)); }
.opts .opt.miss { opacity: 1; border-color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, var(--panel)); }
.hub { padding: 26px 0 8px; } .hub .lead { font-size: 1.15rem; max-width: 640px; }

/* ---------- Timeline: the row (unrouted until the loop lands) ----------
   The row runs down the screen on a phone and across it from 601px up: one DOM, two directions.
   Oldest first in both. See the note above tlRow in app.js for why a vertical list beats the
   horizontal scroll rail the genre uses - with eleven cards on the table and twelve tappable gaps,
   a rail asks the thumb to drag through a metre of board to see the choices. */
.tl-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 18px; }
.tl-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 2px solid var(--line-2); border-radius: var(--r); background: var(--paper-2); box-shadow: 2px 2px 0 var(--line-2); }
.tl-card .tl-meta { flex: 1 1 auto; min-width: 0; }
.tl-card .tl-meta b { display: block; font-family: var(--display); font-size: .98rem; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tl-card .tl-meta span { display: block; color: var(--muted); font-size: .78rem; }
.tl-card .tl-year { flex: 0 0 auto; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.tl-sil { flex: 0 0 auto; height: 32px; width: auto; max-width: 46px; object-fit: contain; display: block; }
.tl-card.held { border-color: var(--target); background: var(--panel); box-shadow: 2px 2px 0 var(--target); }
.tl-card.hit { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--paper-2)); box-shadow: 2px 2px 0 var(--good); }
/* A gap, not a card: dashed and empty until it is the one you pick. 34px is the short side on a
   phone, which keeps every one of the twelve a real thumb target. */
.tl-slot { appearance: none; -webkit-appearance: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0; margin: 0; color: var(--muted); background: transparent; border: 2px dashed var(--line-2); border-radius: 999px; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.tl-slot span { font-family: var(--display); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.tl-slot:hover, .tl-slot:focus-visible { outline: none; border-style: solid; border-color: var(--ink); background: var(--tape); color: var(--ink); }
/* The held card stays under the site header while the row scrolls past: an eleven-card row is
   taller than a phone screen and the last gap is a long way from the question. `.game` clips to its
   own rounded corners and an overflow clip kills position:sticky, so the Timeline board - and only
   the Timeline board - opts out. The e2e scrolls to the last gap and checks the held card is still
   on screen, so this pair cannot come apart quietly. */
.game.tl-game { overflow: visible; }
.tl-held { position: sticky; top: 60px; z-index: 5; padding: 12px 18px 12px; background: var(--panel); border-bottom: 1.5px dashed var(--line-2); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.tl-held-q { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.tl-held-q .kbd-hint { font-family: var(--body); font-weight: 400; margin-left: 6px; }
/* A card shown in the place it really belonged, after it was put somewhere else. */
.tl-card.miss { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--paper-2)); box-shadow: 2px 2px 0 var(--bad); }
.tl-hearts { font-size: .95rem; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.tl-note { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r); background: var(--paper-2); color: var(--muted); font-size: .88rem; }
/* The reveal renders inside the sticky block, so it drops the board-level margins it carries
   everywhere else and the verdict comes down a size: on a phone this sits above the row with the
   held card, and a 2rem heading there would push the board itself off the screen. */
.tl-held .reveal { margin: 10px 0 0; padding: 12px 14px; animation: none; }
.tl-held .reveal .score { font-size: 1.4rem; gap: 8px; }
.tl-held .reveal .fact { font-size: .86rem; }
.summary .tl-row-h { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin: 18px 0 0; }
/* The same heading on /answers, where it follows the day's table rather than a score and needs the
   air the summary gets from the block above it. */
.answers .tl-row-h { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin: 26px 0 12px; }
.summary .tl-row { padding: 10px 0 4px; }
@media (min-width: 601px) {
  .tl-row { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; }
  .tl-card { flex: 0 1 auto; flex-direction: column; justify-content: center; gap: 2px; min-width: 104px; max-width: 160px; text-align: center; padding: 10px 10px; }
  .tl-card .tl-meta b { font-size: .86rem; }
  .tl-card .tl-year { font-size: 1.1rem; }
  .tl-slot { align-self: stretch; width: 34px; min-height: 86px; }
  .tl-held .tl-card.held { flex-direction: row; max-width: none; text-align: left; }
}
@media (max-width: 600px) { .versus { grid-template-columns: 1fr; } .versus .vs { justify-self: center; } .lineup .slots { grid-template-columns: repeat(2, 1fr); } .qsil { height: 52px; } }

/* ---------- rabbit hole: next game CTA, today's run, global streak ---------- */
.next-up .next-game { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto 14px; padding: 16px 22px; font-size: 1.05rem; text-align: left; }
.next-up .next-game > span:first-child { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.next-up .next-game strong { font-family: var(--display); font-size: 1.25rem; flex: 1; letter-spacing: -0.02em; }
.next-up .next-game .arrow { font-size: 1.4rem; transition: transform .12s ease; }
.next-up .next-game:hover .arrow { transform: translateX(4px); }
.next-up .replay-day { display: flex; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: -4px auto 16px; text-align: center; }
.all-done { text-align: center; padding: 16px 18px; margin: 0 auto 14px; max-width: 560px; border-radius: var(--r-lg); border: 2px dashed var(--good); }
.all-done strong { display: block; font-family: var(--display); font-size: 1.3rem; }
.all-done span { color: var(--muted); font-size: .92rem; }
.run-prog { max-width: 560px; margin: 0 auto 22px; text-align: center; }
.run-prog .bar { height: 8px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--line-2); overflow: hidden; }
.run-prog .bar span { display: block; height: 100%; background: var(--tape); transition: width .4s ease; }
.run-prog small { display: block; margin-top: 6px; color: var(--muted); font-weight: 600; }
#hdr-right { display: inline-flex; gap: 6px; align-items: center; }
.streak.run { text-decoration: none; }
.streak.run.all { background: var(--good); color: var(--paper); }
.streak.run.all b { color: var(--paper); }
.hub-run { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 18px; }
.all-done-pill { cursor: default; border-color: var(--good); color: var(--good); }
@media (max-width: 600px) { .next-up .next-game { flex-wrap: wrap; } .next-up .next-game strong { flex-basis: 100%; } #hdr-right .streak:not(.run) { display: none; } }

/* ---------- Name One!: party game, played on one phone passed around ---------- */
.no-setup { display: grid; gap: 18px; }
.no-setup .no-lead { margin: 0; color: var(--ink-2); max-width: 54ch; }
.no-field { display: grid; gap: 8px; }
.no-field > label, .no-field > small { display: block; }
.no-field > label { font-weight: 800; font-family: var(--display); font-size: 1.05rem; }
.no-stepper { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--ink); border-radius: 999px; background: var(--panel); box-shadow: 3px 3px 0 var(--tape); width: -moz-fit-content; width: fit-content; }
.no-stepper button { font: inherit; font-size: 1.4rem; font-weight: 800; line-height: 1; border: 0; background: transparent; color: var(--ink); width: 48px; height: 48px; cursor: pointer; border-radius: 999px; }
.no-stepper button:hover:not(:disabled) { background: var(--paper-2); }
.no-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.no-stepper b { font-family: var(--display); font-size: 1.4rem; min-width: 28px; text-align: center; }
.no-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.no-name { display: grid; gap: 4px; }
.no-name span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.no-name input { font: inherit; width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: var(--r); border: 2px solid var(--line-2); background: var(--panel); color: var(--ink); }
.no-name input:focus { outline: none; border-color: var(--ink); }
.no-pills, .no-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.no-pills button, .no-chip { font: inherit; font-weight: 700; cursor: pointer; padding: 11px 16px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--panel); color: var(--ink-2); }
.no-pills button:hover, .no-chip:hover { border-color: var(--ink); }
.no-pills button.on, .no-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.no-chip small { opacity: .6; font-weight: 700; }
.no-go { width: 100%; max-width: 420px; padding: 17px 22px; font-size: 1.1rem; }

.no-game .pad { display: grid; gap: 16px; justify-items: center; text-align: center; }
.no-note { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: var(--r); background: var(--paper-2); border: 1.5px dashed var(--line-2); font-weight: 700; color: var(--ink-2); }
.no-emoji { font-size: 2.6rem; line-height: 1; }
.no-who { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.7rem, 7.5vw, 2.4rem); line-height: 1.1; margin: 0; overflow-wrap: anywhere; }
/* The name pops when the phone changes hands mid-clock: the only cue that the turn moved, since no screen does. */
.no-who-live { animation: no-hand .35s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes no-hand { from { transform: scale(.82); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .no-who-live { animation: none; } }
.no-handoff p.muted { margin: -6px 0 0; max-width: 46ch; }
.no-teaser { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; color: var(--ink); background: var(--tape); border-radius: 999px; padding: 7px 14px; }
.no-cat { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.55rem, 6.6vw, 2.3rem); line-height: 1.15; overflow-wrap: anywhere; background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--r-lg); box-shadow: 4px 4px 0 var(--tape); padding: 20px 18px; width: 100%; box-sizing: border-box; }
.no-cat-small { font-size: 1.05rem; padding: 11px 14px; box-shadow: none; border-width: 1.5px; border-color: var(--line-2); }

/* Smaller on a phone than on a laptop: name, clock, category and Said it! must all fit one screen without scrolling. */
.no-clock { position: relative; width: clamp(128px, 36vw, 200px); aspect-ratio: 1; }
.no-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.no-clock circle { fill: none; stroke-width: 10; }
.no-clock circle.bg { stroke: var(--paper-2); }
.no-clock circle.fg { stroke: var(--ref); stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .2s ease; }
.no-clock.danger circle.fg { stroke: var(--bad); }
.no-clock span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 11vw, 3.6rem); }
.no-clock.danger span { color: var(--bad); }

.no-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.no-said { flex: 1 1 220px; padding: 18px 24px; font-size: 1.12rem; }
.no-pass { flex: 0 1 150px; padding: 18px 20px; border-color: var(--line-2); }
.no-hint { margin: -4px 0 0; max-width: 48ch; font-size: .88rem; }
@media (max-width: 600px) { .no-turn { gap: 12px; } .no-turn .no-hint { font-size: .82rem; } }
.no-players { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.no-pill { font-size: .85rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--panel); color: var(--ink-2); }
.no-pill.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.no-pill.out { opacity: .45; text-decoration: line-through; }
.no-quit { margin-top: 2px; opacity: .7; font-size: .85rem; padding: 7px 14px; }

.no-trophy { font-size: 3.2rem; line-height: 1; }
.no-winner { font-family: var(--display); font-size: clamp(1.7rem, 7vw, 2.4rem); margin: 4px 0 0; overflow-wrap: anywhere; }
.no-summary .actions { flex-wrap: wrap; justify-content: center; }
.no-table tr.no-win { font-weight: 800; background: color-mix(in srgb, var(--good) 14%, transparent); }
@media (max-width: 420px) { .no-pass { flex: 1 1 100%; } .no-names { grid-template-columns: 1fr 1fr; } }

/* ---- Boss Run (week of 2026-10-19) ----
   The badge above every round, and the lighter estimate board. Both lean on what is already here:
   the badge is a pill in the site's own shape, and the board reuses .board, .sil, .ground and
   .label so a Boss Run estimate looks like the game it came from without a second design. The
   board is shorter than Size It Up's 440px because a Boss Run round is a judgement against the
   card beside it rather than a measurement off a ruler, and twenty of them have to fit a phone. */
.boss-round { padding: 10px 18px 0; }
.boss-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: .92rem; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; box-shadow: 2px 2px 0 var(--ink); }
.board.boss-board { height: 260px; margin: 0 18px; border-radius: var(--r); background: var(--paper-2); }
.board.boss-board .ground { bottom: 28px; }
.board.boss-board .sil { bottom: 28px; }
.boss-pile-n { position: absolute; right: 12px; top: 44px; z-index: 6; font-family: var(--display); font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .board.boss-board { height: 210px; margin: 0 12px; } .boss-badge { font-size: .84rem; } }