@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

/* Field Edition: the almanac page, inked like a field notebook.
 *
 * kit.css's grammar stays (paper, one ink, Inter for language, Plex Mono for
 * data, green for live and right). This sheet adds the notebook's print:
 *
 *   - a hard ink shadow under anything you can press or that holds a round,
 *     offset down and right as if the card were cut out and laid on the page;
 *   - ink rules instead of grey ones round those surfaces;
 *   - big figures (scores, clocks, counts, the wordmark) set in VT323, a
 *     terminal face, so a number reads as a reading off an instrument;
 *   - a faint paper grain, and a double green rule under the masthead.
 *
 * It recolours and reframes the chrome only. Maps, globes, the satellite
 * imagery and flags are drawn exactly as before: nothing here reaches inside
 * an <svg>, a canvas, a Leaflet pane or a flag image, and the --map-* and
 * --ocean tokens are left alone.
 *
 * Every page links this sheet last, after its own styles, so removing the one
 * <link> (or this file) restores the previous look. */

:root {
  --pixel: VT323, "IBM Plex Mono", ui-monospace, monospace;
  --f-ink: #13110f;          /* the rule round a pressable or framed surface */
  --f-shadow: #13110f;       /* the hard shadow under it */
  --f-field: #fffdf9;        /* a field you type into */
  --f-grain-a: rgba(19, 17, 15, .045);
  --f-grain-b: rgba(19, 17, 15, .03);
  --f-lift: 3px;             /* how far a card's shadow falls */
  --f-bevel: var(--f-lift) var(--f-lift) 0 var(--f-shadow);
  --f-bevel-sm: 2px 2px 0 var(--f-shadow);
}
/* Night: dark mode is the deep end, navy as the sea at depth (after
   krillion.io): pale blue-white ink, a bevelled double rule round every
   framed thing, neon green for live and right, cyan for focus, and pixel
   stars behind the page. The maps keep their own night (theme.css). */
:root[data-theme="dark"] {
  --bg: #04070d;
  --panel: #101d33;
  --panel-2: #16284a;
  --wash: #1b3050;
  --text: #e8f1ff;
  --muted: #a9bad9;
  --faint: #7d93b8;
  --border: #2c4570;
  --rule: #c9d8f2;
  --accent: #3fe08b;
  --accent-bright: #48f08f;
  --accent-ink: #04210f;
  --accent-soft: #0f2a24;
  --accent-line: #2b9a62;
  --green: #5fd492;
  --lime: #8fd48f;
  --yellow: #ffd166;
  --orange: #ffb070;
  --red: #ff6f7d;
  --cyan: #4de3ff;
  --pink: #ff5d8f;
  --f-ink: #34507f;
  --f-shadow: #050a14;
  --f-field: #0a1424;
  --f-grain-a: transparent;
  --f-grain-b: transparent;
  --f-bevel: 0 0 0 2px #050a14, 0 0 0 4px #1b3050, 5px 5px 0 4px #050a14;
  --f-bevel-sm: 0 0 0 2px #050a14, 0 0 0 3px #1b3050;
}

/* ---------- paper ---------- */
html, body {
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--f-grain-a) .8px, transparent 1.1px),
    radial-gradient(var(--f-grain-b) .8px, transparent 1.1px);
  background-size: 7px 7px, 13px 13px;
  background-position: 0 0, 4px 6px;
}

/* ---------- masthead ---------- */
#crumbs { background: transparent; }
#topbar {
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 var(--bg), 0 4px 0 var(--accent-line), 0 6px 0 var(--bg), 0 7px 0 var(--accent-line);
}
/* The double rule hangs into the page's top margin; City Limits' map starts
   flush under the masthead, so there it takes its own room. */
#topbar:has(#city-track) { margin-bottom: 7px; }
#topbar h1 {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 34px;
  line-height: .95;
  letter-spacing: .04em;
  text-shadow: 2px 2px 0 var(--accent-line);
}
.site-brand, .brand h1 {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: .05em;
  text-shadow: 2px 2px 0 var(--accent-line);
}
.site-brand { font-size: 36px; line-height: 1; }
.brand h1 { font-size: 38px; line-height: 1; }
@media (max-width: 640px) {
  :root:not(.party-game) #topbar > h1 { font-size: clamp(20px, 6.4vw, 26px); line-height: 1; }
  .site-brand { font-size: 27px; }
  .brand h1 { font-size: 28px; }
}
/* Short windows (a laptop with its browser chrome, a phone on its side) keep
   the masthead as short as it was: a smaller title and a single green rule. */
@media (max-height: 720px) {
  #topbar h1 { font-size: 26px; }
}
@media (max-height: 500px) {
  #topbar h1, :root:not(.party-game) #topbar > h1 { font-size: 21px; text-shadow: 1px 1px 0 var(--accent-line); }
  #topbar { box-shadow: 0 2px 0 var(--bg), 0 3px 0 var(--accent-line); }
  #topbar:has(#city-track) { margin-bottom: 3px; }
}

/* The kicker over a prompt: green, the notebook's running head. */
.prompt .kicker, #briefing .kicker { color: #1f7a43; font-weight: 600; }   /* the accent, darkened for small text on paper */
:root[data-theme="dark"] :is(.prompt .kicker, #briefing .kicker) { color: var(--accent); }

/* Round steps: ink-ruled squares, green for found, red for missed. */
.round-chip .step { width: 12px; height: 12px; box-shadow: none; border: 1px solid var(--f-ink); }
.round-chip .step.won { background: var(--accent); border-color: var(--accent-ink); }
.round-chip .step.lost { background: var(--red); border-color: var(--red); }
.round-chip .step.now { height: 12px; background: var(--text); border-color: var(--text); }
.round-chip .step.done { background: var(--faint); border-color: var(--faint); }
@media (min-width: 641px) {
  .round-chip .step { width: 14px; height: 14px; }
  .round-chip .step.now { height: 14px; }
}

/* ---------- buttons ---------- */
/* The plain .btn was the green one: it is the primary action, so it is inked
   solid with a pale inner rule and a green shadow. Ghost is a paper key with
   an ink shadow; quiet stays flat. Pressing one pushes it into its shadow. */
.btn {
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3px var(--bg), 3px 3px 0 var(--accent);
  font-weight: 600;
}
.btn:hover { background: #2a2622; color: var(--bg); }
:root[data-theme="dark"] .btn:hover { background: #d9d2c8; color: var(--bg); }
.btn.ghost {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--f-ink);
  box-shadow: 2px 2px 0 var(--f-shadow);
}
.btn.ghost:hover { background: var(--wash); border-color: var(--f-ink); }
:root[data-theme="dark"] .btn.ghost:hover { background: var(--wash); }
.btn.quiet { background: transparent; box-shadow: none; }
.btn:active:not(:disabled) { translate: 2px 2px; box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3px var(--bg), 1px 1px 0 var(--accent); }
.btn.ghost:active:not(:disabled) { box-shadow: 0 0 0 var(--f-shadow); }
.btn.quiet:active:not(:disabled) { box-shadow: none; }
.btn:disabled { opacity: 1; color: var(--faint); background: transparent; border: 1px dashed var(--border); box-shadow: none; }

/* The masthead's square tools. */
.icon-btn, .what.icon-btn, .metric-info.icon-btn, .warp-explain.icon-btn,
:root [data-menu-tools] > button, :root #menu-settings-btn, .distance-settings-button {
  border-color: var(--f-ink);
  color: var(--text);
  background: var(--panel);
  box-shadow: 2px 2px 0 var(--f-shadow);
}
@media (max-width: 640px) {
  :root:not(.party-game) #topbar #game-menu-btn { border-color: var(--f-ink); color: var(--text); background: var(--panel); box-shadow: 2px 2px 0 var(--f-shadow); }
  :root:not(.party-game) #topbar #game-menu-btn[aria-expanded="true"] { background: var(--text); color: var(--bg); }
  :root:not(.party-game) #topbar .game-menu:not([hidden]) { border-color: var(--f-ink); box-shadow: 4px 4px 0 var(--f-shadow); }
  :root .game-menu .nav-box { border-color: var(--f-ink); color: var(--text); box-shadow: 2px 2px 0 var(--f-shadow); }
}
.icon-btn:hover, :root [data-menu-tools] > button:hover, :root #menu-settings-btn:hover { background: var(--wash); }
.icon-btn:active, :root [data-menu-tools] > button:active { translate: 2px 2px; box-shadow: none; }
.icon-btn.hint { box-shadow: 2px 2px 0 var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .icon-btn.hint { animation: field-hint 1.7s ease-out infinite; }
}
@keyframes field-hint {
  0%, 100% { box-shadow: 2px 2px 0 var(--accent); }
  50% { box-shadow: 3px 3px 0 var(--accent), 0 0 0 4px rgba(46, 158, 91, .18); }
}
:root .menu-solo {
  border-color: var(--accent-ink);
  box-shadow: 2px 2px 0 var(--f-shadow);
}
:root[data-theme="dark"] .menu-solo { border-color: var(--accent-bright); }
:root .menu-solo:active { translate: 2px 2px; box-shadow: none; }
:root .nav-box { border-color: var(--f-ink); color: var(--text); background: var(--panel); box-shadow: 2px 2px 0 var(--f-shadow); }
:root .nav-box:hover, :root .nav-box:focus-visible { background: var(--wash); }
:root .nav-box[aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
:root[data-theme="dark"] .nav-box[aria-current] .country-avatar { filter: none; }

/* ---------- fields ---------- */
input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea {
  background: var(--f-field);
  border-color: var(--f-ink);
}
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: var(--f-ink);
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
select { border-color: var(--f-ink); background-color: var(--panel); box-shadow: 2px 2px 0 var(--f-shadow); }
:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23efe9e1' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
/* The record pages' selects lost the kit's chevron to their own background
   shorthand; they get it back, with room for it. */
.record-page select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2313110f' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
:root[data-theme="dark"] .record-page select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23efe9e1' stroke-width='1.4'/></svg>");
}
.answer-box input.wrong { border-color: var(--red); outline-color: var(--red); }
.suggestions { border-color: var(--f-ink); box-shadow: 3px 3px 0 var(--f-shadow); }
.suggestion.active { background: var(--text); color: var(--bg); }
.suggestion.active .sub { color: var(--bg); opacity: .75; }

/* ---------- surfaces ---------- */
.card-panel, .modal, #settings-pop, #menu-settings-pop, .stat-popover, .distance-settings-pop {
  border: 1px solid var(--f-ink);
  box-shadow: var(--f-lift) var(--f-lift) 0 var(--f-shadow);
}
.modal { box-shadow: 5px 5px 0 var(--f-shadow); }
.backdrop { background: rgba(19, 17, 15, .36); }
:root[data-theme="dark"] .backdrop { background: rgba(0, 0, 0, .55); }
.map-tip { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); }

/* The frame round every map and globe: ink, with the card's shadow. What is
   drawn inside it is untouched. */
.map-panel, #map-slot { border: 1px solid var(--f-ink); box-shadow: 4px 4px 0 var(--f-shadow); }
.map-btns button { border-color: var(--f-ink); background: var(--panel); box-shadow: 2px 2px 0 var(--f-shadow); }
.map-btns button:hover { background: var(--wash); }

/* Meters: a ruled track with a green fill. */
.meter { height: 8px; background: transparent; border: 1px solid var(--f-ink); background-image: repeating-linear-gradient(90deg, var(--wash) 0 1px, transparent 1px 6px); }
.meter > span { background: var(--accent); }

/* Answer chips. */
.chip.got { border-color: var(--accent); }

/* ---------- figures ---------- */
.scorebit b { font-family: var(--pixel); font-weight: 400; font-size: 30px; line-height: .95; letter-spacing: .02em; }
.modal .headline { font-family: var(--pixel); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: .02em; }

/* ---------- the loading cover (loading.js) ---------- */
.game-loading-title { font-family: var(--pixel); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--accent-line); }
.game-loading-bar { height: 22px; padding: 3px; border: 1px solid var(--f-ink); background: var(--panel); box-shadow: 3px 3px 0 var(--f-shadow); }
.game-loading-bar > span { background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 10px); }

/* ---------- the rules page ---------- */
#briefing .body li::before { font-family: var(--pixel); font-size: 17px; top: -1px; letter-spacing: .04em; }
#briefing .meta { border-top-color: var(--f-ink); }
#briefing .body kbd, kbd {
  border: 1px solid var(--f-ink);
  box-shadow: 0 2px 0 var(--f-shadow);
  background: var(--panel);
}
.info-pages button { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); }
.info-pages button:disabled { box-shadow: none; border-style: dashed; }

/* ---------- the menus (home, solo) ---------- */
header.masthead {
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 var(--bg), 0 4px 0 var(--accent-line), 0 6px 0 var(--bg), 0 7px 0 var(--accent-line);
  margin-bottom: 11px;
}
.cats .cat { border-color: var(--f-ink); color: var(--text); background: var(--panel); box-shadow: 2px 2px 0 var(--f-shadow); }
.cats .cat:hover { background: var(--wash); }
.cats .cat.active { box-shadow: 2px 2px 0 var(--accent); }
#page .grid .card {
  border-color: var(--f-ink);
  box-shadow: var(--f-lift) var(--f-lift) 0 var(--f-shadow);
  transition: translate .14s ease, box-shadow .14s ease, background .18s ease;
}
#page .grid .card:hover, #page .grid .card:focus-visible {
  background: var(--panel);
  translate: -1px -1px;
  box-shadow: 5px 5px 0 var(--f-shadow);
}
#page .grid .card.completed { box-shadow: none; border-style: dashed; border-color: var(--border); }
#page .grid .card.completed:hover { translate: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { #page .grid .card:hover { translate: none; } }

/* ---------- record pages ---------- */
.record-nav { border-bottom: 1px solid var(--rule); box-shadow: 0 3px 0 var(--bg), 0 4px 0 var(--accent-line), 0 6px 0 var(--bg), 0 7px 0 var(--accent-line); }
.record-card, .record-chart, .record-box, .record-banner { border-color: var(--f-ink); box-shadow: var(--f-lift) var(--f-lift) 0 var(--f-shadow); }
.record-card strong { font-family: var(--pixel); font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: .02em; }
@media (max-width: 640px) { .record-card strong { font-size: 30px; } }
.record-table-wrap { border-color: var(--f-ink); }
.record-page th { background: var(--panel-2); border-bottom-color: var(--f-ink); }
.record-page select, .record-page input:not([type=checkbox]):not([type=radio]), .record-page button, .record-page .button { border-color: var(--f-ink); }
.record-page button:not(.setting-switch):not(.nav-box):not(.who-game):not(.picker-option):not(.segmented button), .record-page .button { box-shadow: 2px 2px 0 var(--f-shadow); }
.record-page button:active:not(:disabled), .record-page .button:active { translate: 2px 2px; box-shadow: none; }
.record-page .primary { box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3px var(--bg), 3px 3px 0 var(--accent); }
.record-page h1 { font-weight: 800; }
.record-page h2 { letter-spacing: -.01em; }

/* ---------- small floating keys ---------- */
#random-deal, .report-button { box-shadow: 2px 2px 0 var(--f-shadow); border-color: var(--f-ink); color: var(--text); background: var(--panel); }
.report-button:active, #random-deal:active { translate: 2px 2px; box-shadow: none; }

/* The Report form (report.css), as the other dialogs. */
.report-dialog { border: 1px solid var(--f-ink); box-shadow: 5px 5px 0 var(--f-shadow); }
.report-choice { border-color: var(--f-ink); }
.report-choice:has(input:checked) { box-shadow: inset 3px 0 0 var(--accent); }
.report-send, .report-primary {
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3px var(--bg), 3px 3px 0 var(--accent);
}
.report-send:hover:enabled, .report-primary:hover { background: #2a2622; color: var(--bg); }
:root[data-theme="dark"] :is(.report-send:hover:enabled, .report-primary:hover) { background: #d9d2c8; color: var(--bg); }
.report-send:disabled { opacity: 1; color: var(--faint); background: transparent; border: 1px dashed var(--border); box-shadow: none; }
.report-secondary { border-color: var(--f-ink); color: var(--text); box-shadow: 2px 2px 0 var(--f-shadow); }

/* ---------- the games' own keys ----------
   One rule for the small square controls each game draws for itself: an ink
   rule and a 2px shadow. State colours (chosen, right, wrong) are set by the
   games with more specific selectors and still win. */
.skip-btn, .reveal-btn, #hint-btn, #giveup-btn, .guess-map-controls button,
.hunt-globe-tools button, .zoom-btn, #set-btn, .lives-picker button, #labels,
.world-tools button, #compare {
  border-color: var(--f-ink);
  box-shadow: 2px 2px 0 var(--f-shadow);
}
:is(.skip-btn, .reveal-btn, #hint-btn, #giveup-btn, .guess-map-controls button,
.hunt-globe-tools button, .zoom-btn, #set-btn, .lives-picker button, #labels):active:not(:disabled) {
  translate: 2px 2px; box-shadow: none;
}
:is(.skip-btn, .reveal-btn, #hint-btn, #giveup-btn, .guess-map-controls button,
.hunt-globe-tools button, .zoom-btn, #set-btn, .lives-picker button):disabled { box-shadow: none; border-style: dashed; }
.skip-btn, .reveal-btn { color: var(--text); }
.lives-picker button[aria-pressed="true"] { box-shadow: 2px 2px 0 var(--accent); }

/* City Limits draws its own panel by id. */
#guess-input { background: var(--f-field); border-color: var(--f-ink); }
#guess-input:focus { border-color: var(--f-ink); outline: 2px solid var(--accent); outline-offset: 2px; }
#round-actions button { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); }
#round-actions button:active:not(:disabled) { translate: 2px 2px; box-shadow: none; }
#round-actions button:disabled { box-shadow: none; border-style: dashed; }
#stage-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: 1; }
#city-track { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); }
#city-track li { border-right-color: var(--f-ink); }
#city-track li::before { border-radius: 0; width: 7px; height: 7px; }

/* A tab row: one ink box, the chosen tab inked. */
.world-mode-switch a { border-color: var(--f-ink); color: var(--text); }
.world-mode-switch { box-shadow: 2px 2px 0 var(--f-shadow); }

/* Frames round the globes, the drawing pad, the sizing board and the chart.
   The drawing inside each is untouched. */
.hunt-globe, #pad-wrap, #board-wrap, .chart-layout, #map-wrap, .guess-map-frame {
  border-color: var(--f-ink);
  box-shadow: 4px 4px 0 var(--f-shadow);
}
/* City Limits' guess map: its caption starts below the frame's shadow (4px),
   which covered the top of "Your guesses" (to 24 October 2026). */
#guess-overview figcaption { margin-top: 8px; }

/* Cards a round is played on. */
div.place, .lingocation-quote, .warp-option, .ow-secret, .ow-bans, .rank-row, #lineup-editor {
  border-color: var(--f-ink);
  box-shadow: var(--f-lift) var(--f-lift) 0 var(--f-shadow);
}
div.place.mystery { border-style: dashed; box-shadow: none; }
.answer-wait { border-color: var(--f-ink); }
.ow-clue { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); }
.rank-row { box-shadow: 2px 2px 0 var(--f-shadow); }
.warp-option { box-shadow: 2px 2px 0 var(--f-shadow); }
.warp-option:hover:not(:disabled) { translate: -1px -1px; box-shadow: 3px 3px 0 var(--f-shadow); }
.warp-option:disabled { box-shadow: none; }
.stat-info-mark { border-color: var(--f-ink); color: var(--text); }
#ratio-input { border-color: var(--f-ink); background: var(--f-field); }

/* Oracle 3's sixteen words: square keys on the notebook. */
.cx-tile { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); }
.cx-tile[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: 2px 2px 0 var(--accent); translate: 1px 1px; }
.cx-tile:disabled { box-shadow: none; }
.cx-controls .btn { border-radius: 0; }

/* ---------- home and party ---------- */
.party-button { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.party-button.primary { box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3px var(--bg), 3px 3px 0 var(--accent); }
.party-button.solo-button { border-color: var(--accent-ink); box-shadow: 3px 3px 0 var(--f-shadow); }
:root[data-theme="dark"] .party-button.solo-button { border-color: var(--f-ink); }
.party-button:active:not(:disabled) { translate: 2px 2px; box-shadow: none; }
.party-button:disabled { box-shadow: none; border-style: dashed; }
.small-button { box-shadow: 2px 2px 0 var(--f-shadow); border-color: var(--f-ink); }
.small-button:disabled { box-shadow: none; }
.room-code, .player-card, .party-dialog, .lobby-ready-check, .party-select-menu {
  border-color: var(--f-ink);
  box-shadow: var(--f-lift) var(--f-lift) 0 var(--f-shadow);
}
.party-dialog { box-shadow: 5px 5px 0 var(--f-shadow); }
.player-card.player-slot-empty { box-shadow: none; border-color: var(--border); }
.room-code strong, .room-code .code { font-family: var(--pixel); font-weight: 400; letter-spacing: .12em; }
.game-add-tile, .round-counter button, .game-guide-tabs button, .party-select-trigger, .setup-tabs {
  border-color: var(--f-ink);
  box-shadow: 2px 2px 0 var(--f-shadow);
}
.game-add-tile:active, .round-counter button:active { translate: 2px 2px; box-shadow: none; }
.playlist-item { border-color: var(--f-ink); box-shadow: 2px 2px 0 var(--f-shadow); }
.playlist-empty { border-style: dashed; }
#player-name { border-color: var(--f-ink); background: var(--f-field); }

/* =====================================================================
   Night (dark mode), after krillion.io
   ===================================================================== */
/* The sky: navy deepening downwards, faint scan lines, and two layers of
   pixel stars behind everything (one of them twinkling). The page itself is
   see-through so the sky shows between the panels; nothing here covers a map. */
:root[data-theme="dark"] {
  background-color: #010206;
  background-image:
    repeating-linear-gradient(to bottom, rgba(232, 241, 255, .01) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% -10%, #060c18 0%, #03060d 45%, #010206 100%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body { background: transparent; }
:root[data-theme="dark"]::before, :root[data-theme="dark"]::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  image-rendering: pixelated;
}
:root[data-theme="dark"]::before { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' shape-rendering='crispEdges'><rect x='167' y='77' width='2' height='6' fill='%23a9c6ff'/><rect x='165' y='79' width='6' height='2' fill='%23a9c6ff'/><rect x='298' y='29' width='1' height='1' fill='%23ffe9a8' opacity='.45'/><rect x='114' y='322' width='2' height='2' fill='%237fe0ff' opacity='.45'/><rect x='73' y='276' width='2' height='2' fill='%23e8f1ff' opacity='.8'/><rect x='316' y='105' width='2' height='2' fill='%23a9c6ff' opacity='1'/><rect x='294' y='153' width='2' height='2' fill='%23ffe9a8' opacity='.8'/><rect x='250' y='215' width='1' height='1' fill='%23e8f1ff' opacity='.8'/><rect x='242' y='356' width='1' height='1' fill='%237fe0ff' opacity='.45'/><rect x='181' y='86' width='1' height='1' fill='%23ff9fc0' opacity='1'/><rect x='229' y='205' width='2' height='2' fill='%23ffe9a8' opacity='.6'/><rect x='90' y='77' width='1' height='1' fill='%23e8f1ff' opacity='.45'/><rect x='312' y='289' width='1' height='1' fill='%23a9c6ff' opacity='.45'/><rect x='31' y='97' width='1' height='1' fill='%23e8f1ff' opacity='1'/><rect x='186' y='314' width='1' height='1' fill='%23e8f1ff' opacity='.6'/><rect x='249' y='238' width='2' height='2' fill='%23a9c6ff' opacity='.8'/></svg>") repeat; opacity: .75; }
:root[data-theme="dark"]::after { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' shape-rendering='crispEdges'><rect x='465' y='476' width='2' height='6' fill='%23a9c6ff'/><rect x='463' y='478' width='6' height='2' fill='%23a9c6ff'/><rect x='489' y='190' width='2' height='6' fill='%23e8f1ff'/><rect x='487' y='192' width='6' height='2' fill='%23e8f1ff'/><rect x='92' y='42' width='2' height='2' fill='%23ff9fc0' opacity='1'/><rect x='36' y='194' width='2' height='2' fill='%23e8f1ff' opacity='.45'/><rect x='239' y='301' width='1' height='1' fill='%23a9c6ff' opacity='.45'/><rect x='260' y='322' width='2' height='2' fill='%23e8f1ff' opacity='.8'/><rect x='110' y='297' width='1' height='1' fill='%23a9c6ff' opacity='.45'/><rect x='384' y='406' width='1' height='1' fill='%23a9c6ff' opacity='.6'/><rect x='15' y='419' width='1' height='1' fill='%23e8f1ff' opacity='.6'/><rect x='181' y='192' width='2' height='2' fill='%23a9c6ff' opacity='.6'/><rect x='404' y='430' width='1' height='1' fill='%23e8f1ff' opacity='.8'/><rect x='102' y='43' width='1' height='1' fill='%23e8f1ff' opacity='1'/><rect x='395' y='75' width='1' height='1' fill='%23e8f1ff' opacity='.6'/><rect x='464' y='130' width='2' height='2' fill='%23ff9fc0' opacity='.6'/><rect x='233' y='255' width='1' height='1' fill='%23e8f1ff' opacity='.6'/></svg>") repeat 140px 90px; animation: night-twinkle 5.5s steps(1, end) infinite; }
@keyframes night-twinkle { 0% { opacity: .25; } 20% { opacity: 1; } 45% { opacity: .55; } 60% { opacity: .9; } 80% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="dark"]::after { animation: none; opacity: .7; } }

/* Titles split like an old screen: a pink and a cyan ghost either side. */
:root[data-theme="dark"] :is(#topbar h1, .site-brand, .brand h1, .prompt h2, .record-page h1, .welcome h1, .modal h2, #briefing h2, .game-loading-title, .party-top h1, .setup-heading h1) {
  text-shadow: -2px 1px 0 rgba(255, 93, 143, .7), 2px -1px 0 rgba(77, 227, 255, .65);
}
:root[data-theme="dark"] .prompt .kicker, :root[data-theme="dark"] #briefing .kicker { color: var(--cyan); }

/* Framed surfaces: krillion's bevel, a dark rule and a lighter one outside it. */
:root[data-theme="dark"] :is(.card-panel, .modal, .record-card, .record-chart, .record-box, .record-banner, .ag, div.place,
  .lingocation-quote, .ow-secret, .room-code, .player-card, .party-dialog, .lobby-ready-check, #lineup-editor,
  .map-panel, #map-slot, .hunt-globe, #pad-wrap, #board-wrap, .chart-layout, #map-wrap, .guess-map-frame, .report-dialog) {
  border-color: var(--f-ink);
  box-shadow: var(--f-bevel);
}
/* The night bevel reaches 9px below a frame: the guess map's caption clears it. */
:root[data-theme="dark"] #guess-overview figcaption { margin-top: 13px; }
:root[data-theme="dark"] #page .grid .card { border-color: var(--f-ink); background: rgba(16, 29, 51, .88); box-shadow: var(--f-bevel); }
:root[data-theme="dark"] #page .grid .card:hover, :root[data-theme="dark"] #page .grid .card:focus-visible {
  background: #13243f; border-color: var(--cyan); box-shadow: 0 0 0 2px #050a14, 0 0 0 4px #1d3a5e, 0 0 18px rgba(77, 227, 255, .25);
}
:root[data-theme="dark"] #page .grid .card.completed { background: rgba(11, 21, 38, .7); box-shadow: none; border-style: dashed; border-color: var(--border); }
:root[data-theme="dark"] :is(.rank-row, .warp-option, .cx-tile, .ow-clue, .game-add-tile, .playlist-item, .skip-btn, .reveal-btn,
  .hunt-globe-tools button, .zoom-btn, #set-btn, .lives-picker button, #labels, .map-btns button, .guess-map-controls button, #hint-btn,
  #giveup-btn, #round-actions button, .cats .cat, select, .icon-btn, .nav-box, [data-menu-tools] > button, #menu-settings-btn, .report-button, #random-deal) {
  border-color: var(--f-ink);
  box-shadow: var(--f-bevel-sm);
}
:root[data-theme="dark"] .cx-tile { background: #13243f; }
:root[data-theme="dark"] .cx-tile:hover { background: #1a3155; }
:root[data-theme="dark"] .cx-tile[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: #04121f; box-shadow: 0 0 0 2px #050a14, 0 0 14px rgba(77, 227, 255, .45); }
:root[data-theme="dark"] .cats .cat.active, :root[data-theme="dark"] .nav-box[aria-current] { background: var(--cyan); border-color: var(--cyan); color: #04121f; }
:root[data-theme="dark"] .rank-row.lifted { box-shadow: 0 0 0 2px #050a14, 0 0 0 3px var(--cyan), 0 10px 22px rgba(0, 0, 0, .5); }

/* Buttons: the main one glows neon green on the deep blue; the rest are bevelled keys. */
:root[data-theme="dark"] .btn {
  background: #0f2440; color: #eafff2; border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px #050a14, 0 0 16px rgba(63, 224, 139, .32), inset 0 0 0 2px #0b1a30;
  text-shadow: 0 0 6px rgba(63, 224, 139, .55);
}
:root[data-theme="dark"] .btn:hover { background: #12305a; color: #ffffff; }
:root[data-theme="dark"] .btn:active:not(:disabled) { box-shadow: 0 0 0 2px #050a14, 0 0 8px rgba(63, 224, 139, .3), inset 0 0 0 2px #0b1a30; }
:root[data-theme="dark"] .btn.ghost { background: #0e1a2e; color: var(--text); border: 1px solid var(--f-ink); box-shadow: var(--f-bevel-sm); text-shadow: none; }
:root[data-theme="dark"] .btn.ghost:hover { background: #16284a; border-color: var(--cyan); }
:root[data-theme="dark"] .btn.quiet { background: transparent; border: 1px solid var(--border); box-shadow: none; text-shadow: none; }
:root[data-theme="dark"] .btn:disabled { background: transparent; color: var(--faint); border: 1px dashed var(--border); box-shadow: none; text-shadow: none; }
:root[data-theme="dark"] :is(.party-button.primary, .report-send, .report-primary, .record-page .primary) {
  background: #0f2440; color: #eafff2; border: 2px solid var(--accent); box-shadow: 0 0 0 2px #050a14, 0 0 16px rgba(63, 224, 139, .32);
}
:root[data-theme="dark"] .report-send:disabled { border: 1px dashed var(--border); box-shadow: none; background: transparent; }
:root[data-theme="dark"] .party-button.solo-button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-bright); box-shadow: 0 0 0 2px #050a14, 0 0 18px rgba(63, 224, 139, .4); }
:root[data-theme="dark"] .party-button:not(.primary):not(.solo-button) { background: #0e1a2e; border-color: var(--f-ink); box-shadow: var(--f-bevel-sm); }
:root[data-theme="dark"] .menu-solo { box-shadow: 0 0 0 2px #050a14, 0 0 14px rgba(63, 224, 139, .35); border-color: var(--accent-bright); }
/* The night's accent is a bright green, so a hovered Solo Play keeps its dark ink (white is lost on it). */
:root[data-theme="dark"] .menu-solo:is(:hover, :focus-visible) { color: var(--accent-ink); }

/* Fields: a dark well with a cyan rule when it has the focus. */
:root[data-theme="dark"] :is(input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea, #guess-input, #ratio-input, #player-name) {
  background: var(--f-field); border-color: #2f4a78; color: var(--text);
}
:root[data-theme="dark"] :is(input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea, #guess-input):focus {
  border-color: var(--cyan); outline: 2px solid rgba(77, 227, 255, .35); outline-offset: 2px; box-shadow: 0 0 14px rgba(77, 227, 255, .2);
}
:root[data-theme="dark"] .suggestion.active { background: var(--cyan); color: #04121f; }

/* Meters and steps in neon. */
:root[data-theme="dark"] .meter { border-color: #2f4a78; background-image: repeating-linear-gradient(90deg, #1b3050 0 1px, transparent 1px 6px); }
:root[data-theme="dark"] .meter > span { background: var(--accent); box-shadow: 0 0 8px rgba(63, 224, 139, .6); }
:root[data-theme="dark"] .round-chip .step { border-color: #3d5d8f; }
:root[data-theme="dark"] .round-chip .step.now { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px rgba(77, 227, 255, .6); }
:root[data-theme="dark"] .round-chip .step.won { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px rgba(63, 224, 139, .5); }
:root[data-theme="dark"] .round-chip .step.lost { background: var(--pink); border-color: var(--pink); }

/* The masthead: a ruled HUD strip. */
:root[data-theme="dark"] #topbar { border-bottom-color: #2f4a78; box-shadow: 0 3px 0 rgba(8, 17, 31, .9), 0 4px 0 var(--accent-line), 0 6px 0 rgba(8, 17, 31, .9), 0 7px 0 rgba(77, 227, 255, .35); }
:root[data-theme="dark"] header.masthead, :root[data-theme="dark"] .record-nav { border-bottom-color: #2f4a78; box-shadow: 0 3px 0 rgba(8, 17, 31, .9), 0 4px 0 var(--accent-line), 0 6px 0 rgba(8, 17, 31, .9), 0 7px 0 rgba(77, 227, 255, .35); }
:root[data-theme="dark"] #crumbs { border-bottom-color: #22385c; }

/* Things that drew their own browns and greys by night. */
:root[data-theme="dark"] .game-cover { background: rgba(8, 17, 31, .94); }
:root[data-theme="dark"] .backdrop { background: rgba(4, 9, 18, .7); }
:root[data-theme="dark"] :is(.report-choice) { background: var(--f-field); }
:root[data-theme="dark"] .ag { --ag-0: #142645; --ag-1: #134a35; --ag-2: #1f7a4f; --ag-3: #34b874; --ag-4: #5df2a2; --ag-edge: rgba(77, 227, 255, .12); }

/* ---------- the pixel face on keys and running heads (both themes) ----------
   font-size-adjust scales VT323 (a small face for its size) up to the
   x-height Plex Mono had at the same font-size, so each page's own sizes
   for its buttons still hold and nothing grows or wraps. */
.btn, .party-button, .report-send, .report-primary, .report-secondary, .skip-btn, .reveal-btn, #hint-btn, #giveup-btn, #round-actions button,
.cx-controls .btn, .warp-option .stat-info-mark, .lives-picker button, .cats .cat, .prompt .kicker, #briefing .kicker {
  font-family: var(--pixel); font-weight: 400; font-size-adjust: .54;
}
.btn, .party-button, .report-send, .report-primary, .report-secondary { letter-spacing: .1em; }

/* ---------- the Oracle games in the pixel face (both themes) ---------- */
/* Oracle 3's words: VT323 is narrower than Inter's bold capitals, so the
   width each word may take is worked out at its own ratio (.54, not .68). */
.cx-tile .cx-label { font-family: var(--pixel); font-weight: 400; letter-spacing: .04em; line-height: 1; font-size: clamp(16px, calc((100cqw - 6px) / (var(--len, 6) * .54)), 27px); }
@media (max-width: 650px) {
  .cx-tile .cx-label { font-size: clamp(15px, calc((100cqw - 4px) / (var(--len, 6) * .54)), 21px); }
}
.cx-band strong { font-family: var(--pixel); font-weight: 400; font-size: 25px; letter-spacing: .08em; }
.cx-band-words { font-family: var(--pixel); font-weight: 400; font-size: 19px; letter-spacing: .06em; }
.cx-total, .ow-total { font-family: var(--pixel); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: .04em; }
@media (max-width: 650px) { .ow-total { font-size: 28px; } }
.ow-clue > b { font-family: var(--pixel); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: .04em; }
.cx-dots i { border-radius: 0; background: var(--text); box-shadow: 2px 2px 0 var(--f-shadow); }
:root[data-theme="dark"] .cx-dots i { background: var(--cyan); box-shadow: 0 0 8px rgba(77, 227, 255, .6); }
:root[data-theme="dark"] .cx-band { box-shadow: 0 0 0 2px #050a14, 0 0 0 4px #1b3050; }
:root[data-theme="dark"] .cx-toast { background: var(--cyan); color: #04121f; font-family: var(--pixel); font-size: 20px; font-weight: 400; letter-spacing: .08em; }
.cx-toast { font-family: var(--pixel); font-size: 20px; font-weight: 400; letter-spacing: .08em; }
:root[data-theme="dark"] .party-button:disabled { background: transparent; color: var(--faint); border: 1px dashed var(--border); box-shadow: none; }

/* =====================================================================
   Oracle 2 on one screen, Oracle 1's bigger words, and the heat pills
   ===================================================================== */
/* Oracle 2's empty message lines hold no room (a message, when there is one,
   only nudges what is below it down a line), and its panel packs tighter. */
#solo.ow-master #s-panel { gap: 8px; }
#solo.ow-master #s-panel > :is(.ow-verdict-line, .ow-error):empty { min-height: 0; margin-top: -8px; }
/* A short wide screen (a 720px laptop): a tighter heading. */
@media (min-width: 1000px) and (max-height: 780px) {
  #solo.ow-master { row-gap: 8px; }
  #solo.ow-master .ow-solo-head .prompt h2 { font-size: 24px; }
  #solo.ow-master .ow-solo-head .note { font-size: 13px; line-height: 1.4; }
  #solo.ow-master .ow-bans { margin-top: 4px; padding-block: 4px; }
  #solo.ow-master .ow-dist { padding-block: 7px; gap: 2px 10px; }
}
/* Oracle 2 on a phone: each clue two lines instead of three (the word, the
   oracle's guess and its flag, and the × on the first; the oracle's top three,
   smaller, on the second), and a tighter heading, so the country and the clue
   box stay on screen as the clues build up. Nothing is left out. */
@media (max-width: 650px) {
  .ow-master .ow-clue { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; padding: 3px 6px 4px 9px; }
  .ow-master .ow-clue > b { grid-column: 1; grid-row: 1; font-size: 20px; }
  .ow-master .ow-clue .guess { grid-column: 2; grid-row: 1; justify-self: end; flex-wrap: nowrap; white-space: nowrap; min-width: 0; font-size: 14px; }
  .ow-master .ow-clue .guess .name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ow-master .ow-clue .guess img { width: 22px; height: 15px; }
  .ow-master .ow-clue .drop { grid-column: 3; grid-row: 1; min-width: 28px; height: 28px; font-size: 14px; }
  .ow-master .ow-clue .top { grid-column: 1 / -1; grid-row: 2; font-size: 10.5px; line-height: 15px; }
  #solo.ow-master .ow-solo-head .prompt h2 { font-size: 22px; }
  #solo.ow-master .ow-solo-head .note { font-size: 12.5px; line-height: 1.4; }
  #solo.ow-master .ow-bans { padding-block: 4px; margin-top: 4px; }
  #solo.ow-master .ow-takeback { padding-top: 0; font-size: 10px; }
}

/* Oracle 1's clue words, a size up. */
.ow-guesser .ow-clue > b { font-size: 27px; }
@media (max-width: 650px) { .ow-guesser .ow-clue > b { font-size: 25px; } }

/* The heat pills glow their colour, and each has a little pixel animation of
   its own round its edge (never over its word): eight for each colour, and
   no two alike on one board (pixel-fx.js numbers them). */
.heat.cold { --h1: #4a90e8; --h2: #ffffff; --hg: rgba(74, 144, 232, .55); --drift: 9px;
  --shape: 2px 0 var(--h1), -2px 0 var(--h1), 0 2px var(--h1), 0 -2px var(--h1); }
.heat.warm { --h1: #f0b54a; --h2: #6fb4f0; --hg: rgba(240, 181, 74, .55); --drift: -9px;
  --shape: 2px 0 var(--h1), -2px 0 var(--h1), 0 2px var(--h1), 0 -2px var(--h1); }
.heat.hot { --h1: #f02a1a; --h2: #ffb43a; --hg: rgba(240, 42, 26, .6); --drift: -11px;
  --shape: 0 2px var(--h1), 0 4px #7a0a14; }
:root[data-theme="dark"] .heat.cold { --h1: #7cc4ff; --h2: #e3f6ff; --hg: rgba(124, 196, 255, .7); }
:root[data-theme="dark"] .heat.warm { --h1: #ffcc5c; --h2: #9fd4ff; --hg: rgba(255, 204, 92, .65); }
:root[data-theme="dark"] .heat.hot { --h1: #ff6418; --h2: #ffd36a; --hg: rgba(255, 60, 26, .75); --shape: 0 2px var(--h1), 0 4px #c4101c; }
:is(.ow-clue, .game-view-clues, .ow-day-clues) .heat { position: relative; box-shadow: 0 0 6px var(--hg); }
:root[data-theme="dark"] :is(.ow-clue, .game-view-clues, .ow-day-clues) .heat { box-shadow: 0 0 10px var(--hg), 0 0 2px var(--hg); }
.heat[data-fx]::before, .heat[data-fx]::after { content: ""; position: absolute; width: 2px; height: 2px; pointer-events: none; opacity: 0; background: var(--h2); box-shadow: var(--shape); }
/* 1: a flake falls (cold) or an ember rises (warm, hot) off the right edge. */
.heat[data-fx="1"]::before { right: -6px; top: calc(50% - 1px); animation: pill-drift 1.8s steps(9) infinite; }
/* A sparkle that flares at a corner: a pixel cross, its tips in the level's
   colour, that pops out big, glows and goes. */
.heat[data-fx]:is([data-fx="2"], [data-fx="6"], [data-fx="8"])::before, .heat[data-fx]:is([data-fx="2"], [data-fx="8"])::after {
  --spark: 0 -2px var(--h2), 0 2px var(--h2), -2px 0 var(--h2), 2px 0 var(--h2), 0 -4px var(--h1), 0 4px var(--h1), -4px 0 var(--h1), 4px 0 var(--h1);
  box-shadow: var(--spark); filter: drop-shadow(0 0 3px var(--hg)) drop-shadow(0 0 1px var(--h1)); }
/* 2: a glint at one corner, then a while later at the opposite one (once a
   quick flare hopping corner to corner, too busy beside the board's words). */
.heat[data-fx="2"]::before { left: -5px; top: -5px; animation: pill-glint 4.4s steps(4) infinite; }
.heat[data-fx="2"]::after { right: -5px; bottom: -5px; animation: pill-glint 4.4s steps(4) infinite 2.2s; }
/* 3: a shine runs along the top edge. */
.heat[data-fx="3"]::after { top: -3px; left: 0; width: 8px; box-shadow: none; background: var(--h2); animation: pill-sweep 1.7s steps(12) infinite; }
/* 4: a drop forms on the bottom edge and falls. */
.heat[data-fx="4"]::after { left: calc(50% - 1px); bottom: -3px; box-shadow: none; background: var(--h1); animation: pill-drip 1.6s steps(8) infinite; }
/* 5: the glow breathes. */
.heat[data-fx="5"] { animation: pill-glow 1.4s steps(4) infinite alternate; }
/* 6: the edge flickers between two colours and flares bright, with a spark
   bursting at the corner. */
.heat[data-fx="6"] { animation: pill-flicker .9s steps(1) infinite; }
.heat[data-fx="6"]::before { right: -5px; top: -5px; animation: pill-flare .9s steps(5) infinite .3s; }
/* 7: a pixel circles the pill. */
.heat[data-fx="7"]::before { animation: pill-orbit 2.4s steps(24) infinite; }
/* 8: a small ring of sparks at one corner, then a while later at the
   opposite one. */
.heat[data-fx="8"]::before, .heat[data-fx="8"]::after {
  --spark: 0 -3px var(--h2), 0 3px var(--h2), -3px 0 var(--h2), 3px 0 var(--h2), 2px 2px var(--h1), -2px -2px var(--h1), 2px -2px var(--h1), -2px 2px var(--h1); }
.heat[data-fx="8"]::before { left: -5px; top: -5px; animation: pill-burst 4.8s steps(4) infinite; }
.heat[data-fx="8"]::after { right: -5px; bottom: -5px; animation: pill-burst 4.8s steps(4) infinite 2.4s; }
@keyframes pill-drift { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--drift)); } }
@keyframes pill-blink { 0% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pill-sweep { 0% { opacity: 1; left: 0; } 75% { opacity: 1; left: calc(100% - 8px); } 76%, 100% { opacity: 0; left: calc(100% - 8px); } }
@keyframes pill-drip { 0%, 30% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(7px); } 81%, 100% { opacity: 0; transform: translateY(7px); } }
@keyframes pill-glow { from { box-shadow: 0 0 3px var(--hg); } to { box-shadow: 0 0 14px var(--hg), 0 0 3px var(--hg); } }
@keyframes pill-flicker { 0% { border-color: var(--h1); box-shadow: 0 0 6px var(--hg); } 50% { border-color: var(--h2); box-shadow: 0 0 16px var(--hg), 0 0 3px var(--h1); } }
@keyframes pill-flare { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1.7); } 30% { opacity: 1; transform: scale(1.15); } 55% { opacity: 0; transform: scale(1.4); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes pill-orbit {
  0% { opacity: 1; left: -4px; top: -4px; } 25% { left: calc(100% + 2px); top: -4px; }
  50% { left: calc(100% + 2px); top: calc(100% + 2px); } 75% { left: -4px; top: calc(100% + 2px); } 100% { opacity: 1; left: -4px; top: -4px; } }
@keyframes pill-glint { 0% { opacity: 0; transform: scale(.5); } 5% { opacity: 1; transform: scale(1.1); } 15% { opacity: 1; transform: scale(.9); } 22%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes pill-burst { 0% { opacity: 1; transform: scale(.5); } 8% { opacity: 1; transform: scale(1.2); } 18%, 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) {
  .heat[data-fx] { animation: none !important; }
  .heat[data-fx]::before, .heat[data-fx]::after { animation: none !important; opacity: 0 !important; }
}