@import url("/assets/f742a37155eb9c410f421ef4dde961282ccc247e3b763b4f9297bfa3059042d7/fonts.css");

/* Pixel Edition: every page drawn like a handheld game's menu screen.
 *
 * kit.css sets the tokens (lavender ground, indigo ink, violet for what is
 * yours, gold for the key you press) and the four faces. This sheet adds the
 * pixel print:
 *
 *   - frames with stepped corners: an ink ring drawn just outside the box on
 *     each side but not across the corners, so every card, map and key has a
 *     one-pixel notch where a radius would be, and a hard drop under it;
 *   - keys bevelled like a cartridge button: a light top edge, a darker
 *     bottom one, pressed down into their shadow;
 *   - a faint map grid (small crosses every 24px) behind the page, and a
 *     dither band under each masthead;
 *   - Jersey 15 for titles, keys, big figures and the wordmark (sized in
 *     fonts.css).
 *
 * Frames are box-shadows only (no filter, no clip-path), so nothing inside a
 * map, globe or canvas is repainted when the frame is, focus outlines still
 * show, and no layout moves. It recolours and reframes the chrome only:
 * nothing here reaches inside an <svg>, a canvas, a Leaflet pane or a flag.
 *
 * Every page links this sheet last, after its own styles. */

:root {
  --pixel: "GeoPixel", ui-monospace, monospace;
  --pixel-key: "GeoKey", ui-monospace, monospace;
  --pixel-title: "GeoTitle", ui-sans-serif, sans-serif;
  --figure: "GeoFigure", ui-monospace, monospace;
  --f-ink: #1d1838;          /* the ring round a frame */
  --f-shadow: #1d1838;       /* the drop under it */
  --f-field: #ffffff;        /* a field you type into */
  --f-grid: rgba(91, 63, 240, .16);
  --f-dither: rgba(29, 24, 56, .55);
  --f-lift: 4px;
  --key: #ffc53d; --key-hi: #ffe596; --key-lo: #d98a00; --key-ink: #1d1838; --key-hover: #ffd261;
  --ring: 0 -2px 0 0 var(--f-ink), 0 2px 0 0 var(--f-ink), -2px 0 0 0 var(--f-ink), 2px 0 0 0 var(--f-ink);
  --ring-sm: 0 -1px 0 0 var(--f-ink), 0 1px 0 0 var(--f-ink), -1px 0 0 0 var(--f-ink), 1px 0 0 0 var(--f-ink);
  --f-bevel: var(--ring), 5px 5px 0 0 var(--f-shadow);
  --f-bevel-lg: var(--ring), 7px 7px 0 0 var(--f-shadow);
  --f-bevel-sm: var(--ring-sm), 3px 3px 0 0 var(--f-shadow);
  --f-bevel-down: var(--ring-sm), 1px 1px 0 0 var(--f-shadow);
  --key-face: inset 0 2px 0 var(--key-hi), inset 0 -3px 0 var(--key-lo);
  --plain-face: inset 0 2px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(29, 24, 56, .12);
  --globe-mark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='6' height='1' fill='%231d1838'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%231d1838'/%3E%3Crect x='4' y='1' width='4' height='1' fill='%237b63ff'/%3E%3Crect x='8' y='1' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='10' y='1' width='2' height='1' fill='%231d1838'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%231d1838'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%237b63ff'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%237b63ff'/%3E%3Crect x='9' y='2' width='3' height='1' fill='%23ffc53d'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%231d1838'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%237b63ff'/%3E%3Crect x='4' y='3' width='3' height='1' fill='%23ffc53d'/%3E%3Crect x='7' y='3' width='3' height='1' fill='%237b63ff'/%3E%3Crect x='10' y='3' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%231d1838'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='4' width='4' height='1' fill='%237b63ff'/%3E%3Crect x='5' y='4' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='7' y='4' width='6' height='1' fill='%237b63ff'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%231d1838'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%237b63ff'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='4' y='5' width='6' height='1' fill='%237b63ff'/%3E%3Crect x='10' y='5' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%237b63ff'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%231d1838'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%237b63ff'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23ffc53d'/%3E%3Crect x='5' y='6' width='4' height='1' fill='%237b63ff'/%3E%3Crect x='9' y='6' width='3' height='1' fill='%23ffc53d'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%237b63ff'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%231d1838'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='7' width='2' height='1' fill='%237b63ff'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='5' y='7' width='5' height='1' fill='%237b63ff'/%3E%3Crect x='10' y='7' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%237b63ff'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%231d1838'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='8' width='7' height='1' fill='%237b63ff'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23ffc53d'/%3E%3Crect x='9' y='8' width='4' height='1' fill='%237b63ff'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%231d1838'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='9' width='6' height='1' fill='%237b63ff'/%3E%3Crect x='7' y='9' width='4' height='1' fill='%23ffc53d'/%3E%3Crect x='11' y='9' width='2' height='1' fill='%237b63ff'/%3E%3Crect x='13' y='9' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%231d1838'/%3E%3Crect x='2' y='10' width='6' height='1' fill='%237b63ff'/%3E%3Crect x='8' y='10' width='3' height='1' fill='%23ffc53d'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%237b63ff'/%3E%3Crect x='12' y='10' width='1' height='1' fill='%231d1838'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%231d1838'/%3E%3Crect x='2' y='11' width='7' height='1' fill='%237b63ff'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23ffc53d'/%3E%3Crect x='11' y='11' width='1' height='1' fill='%237b63ff'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%231d1838'/%3E%3Crect x='2' y='12' width='2' height='1' fill='%231d1838'/%3E%3Crect x='4' y='12' width='6' height='1' fill='%237b63ff'/%3E%3Crect x='10' y='12' width='2' height='1' fill='%231d1838'/%3E%3Crect x='4' y='13' width='6' height='1' fill='%231d1838'/%3E%3C/svg%3E");
}

/* Night: a deep violet dusk. Panels lift off it on a lighter violet ring, the
   keys stay gold, and violet still means yours. The maps keep their own
   night (theme.css). */
:root[data-theme="dark"] {
  --bg: #130e26;
  --panel: #1f1840;
  --panel-2: #29204f;
  --wash: #33295f;
  --text: #f1ecff;
  --muted: #c0b6e6;
  --faint: #9086bd;
  --border: #4b3f80;
  --rule: #d9d0ff;
  --accent: #b09bff;
  --accent-bright: #ffcf4d;
  --accent-ink: #1d1838;
  --accent-soft: #2c2160;
  --accent-line: #6d58d6;
  --gold: #ffcf4d;
  --gold-deep: #e8a000;
  --green: #5fd68a;
  --lime: #8fd48f;
  --yellow: #ffd45e;
  --orange: #ffa45e;
  --red: #ff6b7a;
  --right: #5fd68a;
  --right-soft: rgba(95, 214, 138, .18);
  --wrong: #ff6b7a;
  --wrong-soft: rgba(255, 107, 122, .18);
  --cyan: #ffcf4d;
  --pink: #ff7ac0;
  --f-ink: #5a4a99;
  --f-shadow: #05030c;
  --f-field: #120c28;
  --f-grid: rgba(176, 155, 255, .12);
  --f-dither: rgba(176, 155, 255, .45);
  --key: #ffcf4d; --key-hi: #ffe7a3; --key-lo: #c98700; --key-ink: #1d1838; --key-hover: #ffe475;
  --plain-face: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .3);
}

/* ---------- the ground ---------- */
/* A faint map grid: a small cross every 24px. */
html { background-color: var(--bg); background-image: none; }
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='11' y='10' width='2' height='4' fill='%235b3ff0' fill-opacity='.16'/%3E%3Crect x='10' y='11' width='4' height='2' fill='%235b3ff0' fill-opacity='.16'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}
:root[data-theme="dark"] body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='11' y='10' width='2' height='4' fill='%23b09bff' fill-opacity='.13'/%3E%3Crect x='10' y='11' width='4' height='2' fill='%23b09bff' fill-opacity='.13'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1a1236 0%, #130e26 45%, #0e0a1e 100%);
  background-size: 24px 24px, 100% 100%;
  background-attachment: scroll, fixed;
}
:root[data-theme="dark"] { color-scheme: dark; background: #0e0a1e; }

/* ---------- mastheads ---------- */
/* An ink rule with a two-row dither band just above it, like the edge of a
   sprite's shading. The band sits in the bar's own padding: nothing moves. */
#crumbs { background: transparent; }
/* The trail's steps are parted by a small pixel square, not an arrow. */
#crumbs .sep { display: inline-block; width: 4px; height: 4px; margin: 0 2px; background: var(--accent); opacity: 1; flex: none; align-self: center; }
#topbar, header.masthead, .record-nav, .welcome-top {
  border-bottom-color: var(--rule);
  box-shadow: none;
  background-image: repeating-conic-gradient(var(--f-dither) 0 25%, transparent 0 50%);
  background-size: 4px 4px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}
/* City Limits' map starts flush under the masthead, so there the bar keeps
   the room under it that it always had. */
/* The rules keep the widths they had (1px under a game's bar, the solo menu
   and the record pages; 2px on the home page), and the solo menu keeps its
   room under the masthead. */
#topbar, header.masthead, .record-nav { border-bottom-width: 1px; border-bottom-style: solid; }
header.masthead { margin-bottom: 11px; }
#topbar:has(#city-track) { margin-bottom: 7px; }
@media (max-height: 500px) { #topbar:has(#city-track) { margin-bottom: 3px; } }
#topbar h1 {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 34px;
  line-height: .95;
  letter-spacing: .04em;
  text-shadow: 2px 2px 0 var(--gold);
}
:root[data-theme="dark"] #topbar h1 { text-shadow: 2px 2px 0 #5a3fd0; }
.site-brand, .brand h1 {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--gold);
}
:root[data-theme="dark"] :is(.site-brand, .brand h1) { text-shadow: 3px 3px 0 #5a3fd0; }
/* The wordmark keeps the old one's size (36px, 27px on a phone), so it takes
   the room it always did. */
.site-brand { font-size: 36px; line-height: 1; }
.brand h1 { font-size: 38px; line-height: 1; }
.site-brand::before {
  content: ""; flex: none; width: 26px; height: 26px;
  background: var(--globe-mark) center / 100% 100% no-repeat; image-rendering: pixelated;
}
@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; line-height: 1; gap: 7px; text-shadow: 2px 2px 0 var(--gold); }
  .site-brand::before { width: 18px; height: 18px; }
  .brand h1 { font-size: 28px; }
}
@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(--gold); }
}

/* The kicker over a prompt: violet, the screen's running head. */
.prompt .kicker, #briefing .kicker { color: var(--accent); }

/* Round steps: pixel squares; green for a round done, red for a miss,
   periwinkle for the rounds still to play (the one being played has a light
   inner edge). */
.round-chip .step { width: 12px; height: 12px; box-shadow: none; border: 2px solid var(--f-ink); background: #8f9bf2; }
.round-chip .step.won { background: var(--right); border-color: var(--f-ink); }
.round-chip .step.lost { background: var(--wrong); border-color: var(--f-ink); }
.round-chip .step.now { height: 12px; background: #8f9bf2; border-color: var(--f-ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.round-chip .step.done { background: var(--right); border-color: var(--f-ink); }
@media (min-width: 641px) {
  .round-chip .step { width: 14px; height: 14px; }
  .round-chip .step.now { height: 14px; }
}

/* ---------- keys ---------- */
/* The plain .btn is the key you press: gold, with a light top edge, a dark
   bottom one and a hard drop. Ghost is a pale key; quiet stays flat. Pressing
   one pushes it down into its drop. */
.btn {
  background: var(--key);
  color: var(--key-ink);
  border: 1px solid var(--f-ink);
  box-shadow: var(--key-face), var(--f-bevel-sm);
  font-weight: 600;
}
.btn:hover { background: var(--key-hover); color: var(--key-ink); }
.btn.ghost {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--f-ink);
  box-shadow: var(--plain-face), var(--f-bevel-sm);
}
.btn.ghost:hover { background: var(--wash); border-color: var(--f-ink); }
.btn.quiet { background: transparent; box-shadow: none; border: 1px solid var(--border); color: var(--muted); }
.btn.quiet:hover { color: var(--text); border-color: var(--f-ink); }
.btn:active:not(:disabled) { translate: 2px 2px; box-shadow: inset 0 2px 0 var(--key-lo), var(--f-bevel-down); }
.btn.ghost:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(29, 24, 56, .12), var(--f-bevel-down); }
.btn.quiet:active:not(:disabled) { box-shadow: none; }
.btn:disabled { opacity: 1; color: var(--faint); background: var(--bg); 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: var(--plain-face), var(--f-bevel-sm);
}
@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: var(--plain-face), var(--f-bevel-sm); }
  :root:not(.party-game) #topbar #game-menu-btn[aria-expanded="true"] { background: var(--accent); color: #fff; }
  :root:not(.party-game) #topbar .game-menu:not([hidden]) { border-color: var(--f-ink); box-shadow: var(--f-bevel); }
  :root .game-menu .nav-box { border-color: var(--f-ink); color: var(--text); box-shadow: var(--f-bevel-sm); }
}
.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: var(--f-bevel-down); }
.icon-btn.hint { box-shadow: var(--ring-sm), 3px 3px 0 0 var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .icon-btn.hint { animation: px-hint 1.2s steps(2, jump-none) infinite; }
}
@keyframes px-hint {
  0%, 100% { box-shadow: var(--ring-sm), 3px 3px 0 0 var(--gold); }
  50% { box-shadow: var(--ring-sm), 3px 3px 0 0 var(--gold), 0 0 0 4px var(--accent-line); }
}
/* Solo Play, wherever it sits: a gold key. */
:root .menu-solo {
  background: var(--key); color: var(--key-ink); border: 1px solid var(--f-ink);
  box-shadow: var(--key-face), var(--f-bevel-sm);
  font-family: var(--pixel-title); font-weight: 600;
}
:root .menu-solo:is(:hover, :focus-visible) { background: var(--key-hover); color: var(--key-ink); }
:root .menu-solo:active { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
:root .nav-box { border-color: var(--f-ink); color: var(--text); background: var(--panel); box-shadow: var(--plain-face), var(--f-bevel-sm); font-family: var(--pixel-title); font-weight: 500; }
:root .nav-box:hover, :root .nav-box:focus-visible { background: var(--wash); }
:root .nav-box[aria-current] { background: var(--accent); color: #fff; border-color: var(--f-ink); }
:root[data-theme="dark"] .nav-box[aria-current] { color: #130e26; }
: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);
  box-shadow: inset 2px 2px 0 rgba(29, 24, 56, .08), var(--ring-sm);
}
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: inset 2px 2px 0 rgba(29, 24, 56, .08), var(--ring-sm);
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
select { border-color: var(--f-ink); background-color: var(--panel); box-shadow: var(--plain-face), var(--f-bevel-sm); }
: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' shape-rendering='crispEdges'><path d='M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 2h2v2H6zM8 0h2v2H8z' fill='%23f1ecff'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.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' shape-rendering='crispEdges'><path d='M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 2h2v2H6zM8 0h2v2H8z' fill='%231d1838'/></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' shape-rendering='crispEdges'><path d='M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 2h2v2H6zM8 0h2v2H8z' fill='%23f1ecff'/></svg>");
}
.answer-box input.wrong { border-color: var(--red); outline-color: var(--red); }
.suggestions { border-color: var(--f-ink); box-shadow: var(--f-bevel); }
.suggestion.active { background: var(--accent); color: #fff; }
.suggestion.active .sub { color: #fff; opacity: .8; }
:root[data-theme="dark"] .suggestion.active { color: #130e26; }
:root[data-theme="dark"] .suggestion.active .sub { color: #130e26; }

/* ---------- surfaces ---------- */
.card-panel, .modal, #settings-pop, #menu-settings-pop, .stat-popover, .distance-settings-pop, #menu-info, .menu-more:not([hidden]) {
  border: 1px solid var(--f-ink);
  box-shadow: var(--f-bevel);
}
.modal, #menu-info { box-shadow: var(--f-bevel-lg); }
.modal .headline { font-family: var(--pixel); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: .02em; text-shadow: 3px 3px 0 var(--gold); }
/* Only the big figure gets the shadow; the small "of 50" after it stays clean. */
.modal .headline * { text-shadow: none; }
:root[data-theme="dark"] .modal .headline { text-shadow: 3px 3px 0 #5a3fd0; }
.modal h2, #briefing h2, #menu-info h2, .record-page h1, .party-dialog h2 { font-family: var(--pixel-title); font-weight: 700; }
.backdrop, #menu-info-backdrop { background: rgba(29, 24, 56, .42); }
:root[data-theme="dark"] :is(.backdrop, #menu-info-backdrop) { background: rgba(5, 3, 12, .7); }
.map-tip { border-color: var(--f-ink); box-shadow: var(--f-bevel-sm); }
#menu-info-close { background: var(--key); color: var(--key-ink); border: 1px solid var(--f-ink); box-shadow: var(--key-face), var(--f-bevel-sm); font-family: var(--pixel-key); font-weight: 600; }

/* The frame round every map and globe. What is drawn inside it is untouched. */
.map-panel, #map-slot { border: 1px solid var(--f-ink); box-shadow: var(--f-bevel); }
.map-btns button { border-color: var(--f-ink); background: var(--panel); box-shadow: var(--plain-face), var(--f-bevel-sm); }
.map-btns button:hover { background: var(--wash); }

/* Meters: a segmented bar, a pixel block per step. */
.meter { height: 8px; background: var(--panel); border: 1px solid var(--f-ink); box-shadow: var(--ring-sm); }
.meter > span { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 8px); }

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

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

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

/* ---------- the rules page ---------- */
#briefing .body li::before { font-family: var(--pixel); font-weight: 700; font-size: 17px; top: -1px; letter-spacing: .04em; color: var(--accent); }
#briefing .meta { border-top-color: var(--f-ink); }
#briefing .body kbd, kbd {
  font-family: var(--mono);
  border: 1px solid var(--f-ink);
  box-shadow: inset 0 -2px 0 rgba(29, 24, 56, .15), 0 2px 0 var(--f-shadow);
  background: var(--panel);
}
.info-pages button { border-color: var(--f-ink); box-shadow: var(--plain-face), var(--f-bevel-sm); }
.info-pages button:disabled { box-shadow: none; border-style: dashed; }

/* ---------- record pages ---------- */
.record-card, .record-chart, .record-box, .record-banner { border-color: var(--f-ink); box-shadow: var(--f-bevel); }
.record-card strong { font-family: var(--pixel); font-weight: 700; 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); background: var(--panel); }
.record-page button:disabled { background-color: var(--bg); }
.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: var(--plain-face), var(--f-bevel-sm); }
.record-page button:active:not(:disabled), .record-page .button:active { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
.record-page .primary { background: var(--key); color: var(--key-ink); box-shadow: var(--key-face), var(--f-bevel-sm); }
.record-page h1 { font-weight: 700; }
.record-page h2 { letter-spacing: -.01em; }

/* A chosen board, segment or option on the record pages is violet, as a
   chosen thing is everywhere else. */
.record-page .board-chips button[aria-pressed="true"], .record-page .segmented button[aria-pressed="true"] {
  background: var(--accent); color: #fff; border-color: var(--f-ink);
}
:root[data-theme="dark"] .record-page :is(.board-chips, .segmented) button[aria-pressed="true"] { color: #130e26; }
.record-page :is(.placement-line, .day-note) a { color: var(--accent); }

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

/* The Report form (report.css), as the other dialogs. */
.report-dialog { border: 1px solid var(--f-ink); box-shadow: var(--f-bevel-lg); }
.report-choice { border-color: var(--f-ink); }
.report-choice:has(input:checked) { box-shadow: inset 4px 0 0 var(--accent); }
.report-send, .report-primary {
  background: var(--key); color: var(--key-ink); border: 1px solid var(--f-ink);
  box-shadow: var(--key-face), var(--f-bevel-sm);
}
.report-send:hover:enabled, .report-primary:hover { background: var(--key-hover); color: var(--key-ink); }
.report-send:disabled { opacity: 1; color: var(--faint); background: var(--bg); border: 1px dashed var(--border); box-shadow: none; }
.report-secondary { border-color: var(--f-ink); color: var(--text); box-shadow: var(--plain-face), var(--f-bevel-sm); }

/* ---------- the games' own keys ----------
   One rule for the small square controls each game draws for itself: an ink
   ring and a short drop. State colours (chosen, right, wrong) are set by the
   games with more specific selectors and still win. */
.skip-btn, .reveal-btn, #giveup-btn,
.hunt-globe-tools button, .zoom-btn, #set-btn, .lives-picker button, #labels,
.world-tools button, #compare {
  border-color: var(--f-ink);
  box-shadow: var(--plain-face), var(--f-bevel-sm);
}
:is(.skip-btn, .reveal-btn, #giveup-btn,
.hunt-globe-tools button, .zoom-btn, #set-btn, .lives-picker button, #labels):active:not(:disabled) {
  translate: 2px 2px; box-shadow: var(--f-bevel-down);
}
:is(.skip-btn, .reveal-btn, #giveup-btn,
.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"] { background: var(--accent); color: #fff; box-shadow: var(--ring-sm), 3px 3px 0 0 var(--f-shadow); }

/* City Limits draws its own panel by id. */
#guess-input { background: var(--f-field); border-color: var(--f-ink); box-shadow: inset 2px 2px 0 rgba(29, 24, 56, .08), var(--ring-sm); }
#guess-input:focus { border-color: var(--f-ink); outline: 3px solid var(--accent); outline-offset: 3px; }
#round-actions button { border-color: var(--f-ink); box-shadow: var(--plain-face), var(--f-bevel-sm); }
#round-actions button:active:not(:disabled) { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
#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: var(--f-bevel-sm); }
#city-track li { border-right-color: var(--f-ink); }
#city-track li::before { border-radius: 0; width: 8px; height: 8px; }

/* A tab row: one ink box, the chosen tab in violet. */
.world-mode-switch a { border-color: var(--f-ink); color: var(--text); }
.world-mode-switch { box-shadow: var(--f-bevel-sm); }

/* Frames round the globes, the drawing pad, the sizing board and the chart. */
.hunt-globe, #pad-wrap, #board-wrap, .chart-layout, #map-wrap, .guess-map-frame {
  border-color: var(--f-ink);
  box-shadow: var(--f-bevel);
}
/* Except the globes and the flat map beside them (Population Hunt, Countries
   & Capitals, and the lone globes of Blind Click and Lingocation): those sit
   on the page itself, with no fill, ring or drop. Each keeps its box and its
   border's pixel, now clear, so a drag anywhere in it still turns the globe
   or pans the map and the zoom and North-up keys stay where they were. The
   slot a globe loads into matches it. */
.hunt-globe, .hunt-views > :is(.map-panel, #map-slot), #map-slot.globe-slot {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#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-bevel);
}
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: var(--f-bevel-sm); }
.rank-row { box-shadow: var(--plain-face), var(--f-bevel-sm); }
.warp-option { box-shadow: var(--plain-face), var(--f-bevel-sm); }
.warp-option:hover:not(:disabled) { translate: -1px -1px; box-shadow: var(--plain-face), var(--ring-sm), 4px 4px 0 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: pale keys; a chosen one is violet. */
.cx-tile { border-color: var(--f-ink); box-shadow: var(--plain-face), var(--f-bevel-sm); }
.cx-tile[aria-pressed="true"] { background: var(--accent); border-color: var(--f-ink); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), var(--ring-sm), 1px 1px 0 0 var(--f-shadow); translate: 2px 2px; }
:root[data-theme="dark"] .cx-tile[aria-pressed="true"] { background: var(--accent); color: #130e26; }
.cx-tile:disabled { box-shadow: none; }
.cx-controls .btn { border-radius: 0; }

/* ---------- home and party ---------- */
.party-button { border-color: var(--f-ink); background: var(--panel); color: var(--text); box-shadow: var(--plain-face), var(--f-bevel-sm); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.party-button:hover { background: var(--wash); }
.party-button.primary { background: var(--accent); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .25), var(--f-bevel-sm); }
.party-button.primary:hover { background: #6d54ff; }
.party-button.solo-button { background: var(--key); color: var(--key-ink); box-shadow: var(--key-face), var(--f-bevel-sm); }
.party-button.solo-button:hover { background: var(--key-hover); }
.party-button:active:not(:disabled) { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
.party-button:disabled { box-shadow: none; border-style: dashed; background: var(--bg); color: var(--faint); }
/* By night the main keys' dark ink would vanish on a disabled key. */
:root[data-theme="dark"] .party-button:is(.primary, .solo-button):disabled { color: var(--faint); background: var(--bg); }
:root[data-theme="dark"] .party-button.primary { color: #130e26; }
:root[data-theme="dark"] .party-button.primary:hover { background: #c3b2ff; }
.small-button { box-shadow: var(--plain-face), var(--f-bevel-sm); 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-bevel);
}
.party-dialog { box-shadow: var(--f-bevel-lg); }
.player-card.player-slot-empty { box-shadow: none; border-color: var(--border); border-style: dashed; }
.room-code strong, .room-code .code { font-family: var(--pixel); font-weight: 700; 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: var(--plain-face), var(--f-bevel-sm);
}
.game-add-tile:active, .round-counter button:active { translate: 2px 2px; box-shadow: var(--f-bevel-down); }
.playlist-item { border-color: var(--f-ink); box-shadow: var(--f-bevel-sm); }
.playlist-empty { border-style: dashed; }
#player-name { border-color: var(--f-ink); background: var(--f-field); }

/* ---------- the solo menu ---------- */
/* Same filter row, same grid, same cards in the same places. Each card is a
   framed key with its category's colour along its top edge, a pixel icon and
   difficulty as one to three pips. */
/* One family for every card, whatever its kind: a periwinkle edge that turns
   violet on hover, its kind named in violet, and difficulty in gold. */
#page .grid .card { --cat: #8f9bf2; }
:root[data-theme="dark"] #page .grid .card { --cat: #8d97f0; }
#page .grid .card:is(:hover, :focus-visible) { --cat: var(--accent); }

.cats .cat {
  border-color: var(--f-ink); color: var(--text); background: var(--panel);
  box-shadow: var(--plain-face), var(--f-bevel-sm);
}
.cats .cat:hover { background: var(--wash); color: var(--text); border-color: var(--f-ink); }
/* The pixel face runs a little narrow in this row; a touch more spacing keeps
   each filter as wide as it was. */
@media (min-width: 641px) { #page .cats .cat { letter-spacing: .1em; } }
.cats .cat.active { background: var(--accent); color: #fff; border-color: var(--f-ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), var(--f-bevel-sm); }
:root[data-theme="dark"] .cats .cat.active { color: #130e26; }
.cats .cat .n { opacity: 1; background: var(--gold); color: var(--key-ink); box-shadow: 0 0 0 2px var(--gold); }

#page .grid .card {
  border-color: var(--f-ink);
  background: var(--panel);
  box-shadow: inset 0 4px 0 var(--cat), var(--f-bevel);
  transition: translate .12s steps(2), box-shadow .12s steps(2), background .12s steps(2);
}
#page .grid .card:hover, #page .grid .card:focus-visible {
  background: color-mix(in srgb, var(--cat) 9%, var(--panel));
  translate: -2px -2px;
  box-shadow: inset 0 4px 0 var(--cat), var(--ring), 7px 7px 0 0 var(--f-shadow);
}
#page .grid .card:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
#page .grid .card:active { translate: 2px 2px; box-shadow: inset 0 4px 0 var(--cat), var(--ring), 3px 3px 0 0 var(--f-shadow); }
@media (prefers-reduced-motion: reduce) { #page .grid .card:hover, #page .grid .card:active { translate: none; } }
#page .grid .card .no { color: var(--accent); }
#page .grid .card h2 { font-family: var(--pixel-title); font-weight: 700; }
#page .grid .card .icon { color: var(--text); }
#page .grid .card .px-icon { image-rendering: pixelated; }
#page .grid .card .px-icon .px-soft { fill: var(--cat); }
#page .grid .card .played { color: var(--faint); }
#page .grid .card .go { color: var(--text); }
#page .grid .card:hover .go, #page .grid .card:focus-visible .go { color: var(--accent); }

/* Difficulty: one, two or three pips beside the word, in place of the old
   outlined tag. The pips take exactly the room the tag's border and padding
   did, so the chip is as wide as it was. */
#page .card .card-title .chip { gap: 1px; align-items: center; padding: 3px 0; border: 0; background: none; color: var(--muted); }
#page .card .chip .pips { display: inline-flex; gap: 1px; margin-right: 1px; }
#page .card .chip .pips i { width: 3px; height: 9px; background: var(--wash); box-shadow: 0 0 0 1px var(--f-ink); }
#page .card .chip.easy .pips i:nth-child(1),
#page .card .chip.medium .pips i:nth-child(-n+2),
#page .card .chip.hard .pips i { background: var(--pip); }
#page .card .chip { --pip: var(--gold); }
/* City Limits' cities left today, one violet dot each. */
#page .city-dots:is(.easy, .medium, .hard) { color: var(--accent); }

/* A finished card is a key already pressed: flat, no drop, its colour faded. */
#page .grid .card.completed {
  background: var(--panel-2);
  box-shadow: inset 0 4px 0 color-mix(in srgb, var(--cat) 45%, var(--panel-2)), var(--ring-sm);
}
#page .grid .card.completed:hover { translate: none; background: var(--wash); box-shadow: inset 0 4px 0 color-mix(in srgb, var(--cat) 45%, var(--panel-2)), var(--ring-sm); }
#page .grid .card.completed .go { color: var(--muted); }
#page .card.pending { filter: grayscale(1); }

footer.foot-note { border-top-color: var(--rule); }

/* ---------- the welcome page ---------- */
/* The same globe in the same box, drawn as a pixel globe that turns (a
   36-frame sprite drawn from the land data by scripts/build_pixel_globe.py),
   and the same orbits as dashed pixel rings. */
.welcome-copy h1 { font-family: var(--pixel-title); font-weight: 700; letter-spacing: -.04em; text-shadow: 3px 3px 0 var(--gold); }
:root[data-theme="dark"] .welcome-copy h1 { text-shadow: 3px 3px 0 #5a3fd0; }
.welcome-copy .eyebrow { color: var(--accent); }
.welcome-world {
  border: 0; border-radius: 0; transform: none; overflow: visible;
  left: 50%; right: auto; width: auto; aspect-ratio: 1; translate: -50% 0;
  background: url("/assets/9758712b58379f4965c8280cbdb907fd5c8fef98dd6a6605c5403ddb3e33b75f/pixel-globe.png") 0 0 / 3600% 100% no-repeat;
  image-rendering: pixelated;
}
.welcome-world::before, .welcome-world::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .welcome-world { animation: px-spin 14s steps(36, jump-none) infinite; }
}
@keyframes px-spin { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.welcome-orbit { border: 2px dashed var(--accent-line); }
.art-coordinate { color: var(--accent); }

/* ---------- the personal record popup (solo-play.js) ----------
   In the corner on a wide screen: a framed card with a gold edge, its
   heading in the pixel face. In a summary (a phone) it is a plain panel. */
#solo-pr-toast { border: 1px solid var(--f-ink); background: var(--panel); box-shadow: inset 4px 0 0 var(--gold), var(--f-bevel); }
#solo-pr-toast strong { font-family: var(--pixel-title); font-weight: 700; }
#solo-pr-toast:not(.solo-record-inline) { width: min(320px, calc(100vw - 32px)); right: 20px; bottom: 20px; z-index: 6000; }
/* The floating popup gets a bigger heading; in the summary it keeps the
   old line, so the summary is no taller than it was. */
#solo-pr-toast:not(.solo-record-inline) strong { font-size: 18px; line-height: 1.2; }
#solo-pr-toast.solo-record-inline { box-shadow: inset 4px 0 0 var(--gold), var(--ring-sm); }

/* The day's standing after a daily (account.js), in the bottom-left corner:
   a framed card with a violet edge and its place in the pixel face. */
#daily-placement { border: 1px solid var(--f-ink); box-shadow: inset 4px 0 0 var(--accent), var(--f-bevel); }
#daily-placement .big { font-family: var(--pixel-title); font-weight: 700; letter-spacing: 0; }

/* ---------- night details ---------- */
:root[data-theme="dark"] .game-cover { background: rgba(19, 14, 38, .94); }
:root[data-theme="dark"] .report-choice { background: var(--f-field); }
:root[data-theme="dark"] .ag { --ag-0: #2a2150; --ag-1: #4a3a9a; --ag-2: #6d55d8; --ag-3: #9b84ff; --ag-4: #ffcf4d; --ag-edge: rgba(176, 155, 255, .14); }
: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); color: var(--text); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .35), var(--ring-sm);
}
:root[data-theme="dark"] .meter { background: var(--f-field); }
:root[data-theme="dark"] .round-chip .step { border-color: #8a78d6; }

/* ---------- the pixel face on keys and running heads (both themes) ---------- */
/* GeoKey is fitted to the keys' old face at the same sizes, so every key
   keeps its width and height. */
.btn, .party-button, .report-send, .report-primary, .report-secondary, .skip-btn, .reveal-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-key); font-size-adjust: none;
}
.btn, .party-button, .report-send, .report-primary, .report-secondary { letter-spacing: .1em; font-weight: 600; }
.prompt h2 { font-family: var(--pixel-title); font-weight: 700; }

/* ---------- big figures (both themes) ----------
   Clocks, readouts and scores the games set large in the mono face take
   GeoFigure: DotGothic16 at that size stood taller than its box. */
.hunt-bar .big, .hunt-clock, .readout, .vpopulation b, #modal-body .stat b, .preview-clock b, .country-counter b, #points,
.join-panel input.code-input, .player-card .player-score, .clock-wrap #round-clock, .game-cover.countdown h2,
.score-explanation strong, .code-box strong, .ow-clock, .ow-score {
  font-family: var(--figure);
}
/* The info mark's italic i, in the reading face: the pixel face dropped its dot. */
.stat-info-mark { font-family: var(--display); font-size: 11px; font-weight: 600; }

/* ---------- the Oracle games in the pixel face (both themes) ---------- */
/* Oracle 3's words: GeoPixel takes the old face's widths, so the old ratio
   (.54 of the size per letter) still fits each word to its tile. */
.cx-tile .cx-label { font-family: var(--pixel); font-weight: 600; 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: 700; font-size: 25px; letter-spacing: .08em; }
.cx-band-words { font-family: var(--pixel); font-weight: 500; font-size: 19px; letter-spacing: .06em; }
.cx-total, .ow-total { font-family: var(--pixel); font-weight: 700; 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: 600; font-size: 22px; line-height: 1; letter-spacing: .04em; }
.cx-dots i { border-radius: 0; background: var(--accent); box-shadow: 2px 2px 0 var(--f-shadow); }
.cx-toast { font-family: var(--pixel); font-size: 20px; font-weight: 600; letter-spacing: .08em; background: var(--text); color: var(--bg); box-shadow: 4px 4px 0 var(--gold); }
:root[data-theme="dark"] .cx-band { box-shadow: var(--f-bevel); }

/* =====================================================================
   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-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-bans { padding-block: 4px; margin-top: 4px; }
  #solo.ow-master .ow-takeback { padding-top: 0; font-size: 10px; }
}

/* Oracle 2 in one column, on a phone or in a narrow window: the whole round on one
   screen, with no scrolling at the last clue. The rules are under How it works, the
   country and the banned category share a row, each clue is one line, and the
   ranking runs in two columns. The rows are flat children of the stage, so the
   order below is the order on the page. */
@media (max-width: 999px) {
  #solo.ow-master { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: stretch; }
  #solo.ow-master > *, #solo.ow-master .ow-col > *, #solo.ow-master #s-panel > * { grid-column: 1 / -1; }
  #solo.ow-master #s-panel { display: contents; }
  #solo.ow-master > .ow-solo-head { order: 0; display: flex; justify-content: flex-end; }
  #solo.ow-master > .ow-solo-head:not(:has(.ow-solo-side)) { display: none; }
  #solo.ow-master .ow-solo-head .prompt { display: none; }
  #topbar .ow-solo-side { order: 3; margin: 4px 0 0 auto; }
  #topbar .ow-total { font-size: 18px; }
  #solo.ow-master #s-panel > .ow-secret { order: 1; grid-column: 1; min-width: 0; padding: 4px 10px; gap: 10px; }
  #solo.ow-master .ow-secret strong { font-size: 19px; line-height: 1.15; }
  #solo.ow-master .ow-secret img { width: 39px; height: 26px; }
  #solo.ow-master > .ow-bans { order: 2; grid-column: 1; margin: 0; padding: 3px 8px; flex-flow: column nowrap; align-items: flex-start; justify-content: center; gap: 2px; }
  #solo.ow-master > .ow-bans:has(~ .ow-col #s-panel > .ow-secret) { grid-column: 2; }
  #solo.ow-master .ow-bans .why { display: none; }
  #solo.ow-master .ow-examples { margin-top: 3px; gap: 4px 6px; }
  #solo.ow-master .ow-secret { row-gap: 5px; }
  /* At a round's end the card holds the example words: it takes most of the row,
     so two words fit on a line, and the banned category beside it keeps its own
     height (its name wraps rather than stretching it). The words are chips, not
     clue rows: none of the rows' grid. */
  #solo.ow-master:has(.ow-secret .ow-examples) { grid-template-columns: minmax(0, 1fr) fit-content(36%); }
  #solo.ow-master:has(.ow-secret .ow-examples) > .ow-bans { align-self: start; }
  #solo.ow-master:has(.ow-secret .ow-examples) .ow-ban b { white-space: normal; }
  #solo.ow-master .ow-secret .ow-examples .ow-clue { display: inline-flex; gap: 4px; padding: 0 6px; }
  #solo.ow-master .ow-secret .ow-examples .ow-clue { min-height: 0; padding-block: 0; }
  #solo.ow-master .ow-secret .ow-examples .ow-clue > b { font-size: 15px; }
  #solo.ow-master .ow-ban { padding: 1px 7px 1px 3px; font-size: 13px; }
  #solo.ow-master .ow-ban-icon { width: 16px; height: 16px; }
  #solo.ow-master .ow-col > #s-clues { order: 3; gap: 8px; min-height: 0; }
  #solo.ow-master #s-clues > .empty, #solo.ow-master .ow-takeback { display: none; }
  #solo.ow-master .ow-clue { padding-block: 1px; min-height: 30px; }
  #solo.ow-master .ow-clue > b { font-size: 18px; }
  #solo.ow-master .ow-clue .drop { min-width: 26px; height: 24px; font-size: 13px; }
  #solo.ow-master #s-panel > .ow-error { order: 4; }
  #solo.ow-master #s-panel > .ow-solo-form { order: 5; }
  /* The clue box and Send clue share the columns of the card and the banned
     category above them, so the edges line up and the two keys are one width. */
  #solo.ow-master #s-panel > .ow-solo-form { display: grid; grid-template-columns: subgrid; column-gap: inherit; }
  #solo.ow-master #s-panel > .ow-solo-form > input { grid-column: 1; min-width: 0; width: 100%; }
  #solo.ow-master #s-panel > .ow-solo-form > button { grid-column: 2; width: 100%; }
  #solo.ow-master .ow-solo-form input { padding-block: 8px; }
  #solo.ow-master #s-panel > .ow-verdict-line, #solo.ow-master .ow-col > #s-jev { order: 6; min-height: 0; margin: 0; }
  #solo.ow-master #s-panel > :is(.ow-verdict-line, .ow-error):empty, #solo.ow-master .ow-col > #s-jev:empty { display: none; }
  #solo.ow-master .ow-col > #s-dist { order: 7; }
  #solo.ow-master #s-panel > .ow-actions { order: 8; margin: 0; padding-right: 84px; flex-wrap: nowrap; gap: 6px; }
  #solo.ow-master .ow-actions .btn { padding: 6px 8px; font-size: 10px; white-space: nowrap; }
  #solo.ow-master > .solo-no-inline-results { order: 9; }
  #solo.ow-master .ow-dist { grid-template-columns: minmax(0, max-content) minmax(16px, 1fr) auto minmax(0, max-content) minmax(16px, 1fr) auto; gap: 1px 8px; padding: 5px 10px; }
  #solo.ow-master .ow-dist h4 { margin: 0 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #solo.ow-master .ow-dist .name { white-space: nowrap; min-width: 0; }
  #solo.ow-master .ow-dist .name > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
@media (max-width: 650px), (pointer: coarse) and (max-width: 999px) {
  #solo.ow-master .ow-clue .top { display: none; }
  #solo.ow-master .ow-clue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 8px; align-items: center; padding: 1px 4px 1px 9px; }
  #solo.ow-master .ow-clue > b { grid-column: 1; grid-row: 1; white-space: nowrap; }
  #solo.ow-master .ow-clue .guess { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; flex-wrap: nowrap; white-space: nowrap; min-width: 0; font-size: 14px; }
  #solo.ow-master .ow-clue .guess .name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #solo.ow-master .ow-clue .guess img { width: 22px; height: 15px; }
  #solo.ow-master .ow-clue .drop { grid-column: 3; grid-row: 1; }
}
/* A row with your country's place: the word, the place, the guess, the ×. */
@media (max-width: 650px), (pointer: coarse) and (max-width: 999px) {
  #solo.ow-master .ow-clue:has(> .standing) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  #solo.ow-master .ow-clue > .standing { grid-column: 2; grid-row: 1; }
  #solo.ow-master .ow-clue:has(> .standing) .guess { grid-column: 3; max-width: 100%; }
  #solo.ow-master .ow-clue:has(> .standing) .drop { grid-column: 4; }
}
/* A 320px phone: the banned category's name wraps, so the card beside it keeps its room. */
@media (max-width: 360px) {
  #solo.ow-master { grid-template-columns: minmax(0, 1fr) fit-content(40%); }
  #solo.ow-master .ow-ban b { white-space: normal; }
}
@media (max-width: 480px) {
  #solo.ow-master .ow-dist { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  #solo.ow-master .ow-dist .bar { display: none; }
  /* Two columns that read down: places 1 to 4 on the left, 5 to 8 on the right
     (the heading, then name, bar and figure for each place; a ninth, your
     country outside the top eight, under the left column). */
  #solo.ow-master .ow-dist > h4 { grid-area: 1 / 1 / 2 / -1; }
  #solo.ow-master .ow-dist > :nth-child(2) { grid-area: 2 / 1; } #solo.ow-master .ow-dist > :nth-child(4) { grid-area: 2 / 2; }
  #solo.ow-master .ow-dist > :nth-child(5) { grid-area: 3 / 1; } #solo.ow-master .ow-dist > :nth-child(7) { grid-area: 3 / 2; }
  #solo.ow-master .ow-dist > :nth-child(8) { grid-area: 4 / 1; } #solo.ow-master .ow-dist > :nth-child(10) { grid-area: 4 / 2; }
  #solo.ow-master .ow-dist > :nth-child(11) { grid-area: 5 / 1; } #solo.ow-master .ow-dist > :nth-child(13) { grid-area: 5 / 2; }
  #solo.ow-master .ow-dist > :nth-child(14) { grid-area: 2 / 3; } #solo.ow-master .ow-dist > :nth-child(16) { grid-area: 2 / 4; }
  #solo.ow-master .ow-dist > :nth-child(17) { grid-area: 3 / 3; } #solo.ow-master .ow-dist > :nth-child(19) { grid-area: 3 / 4; }
  #solo.ow-master .ow-dist > :nth-child(20) { grid-area: 4 / 3; } #solo.ow-master .ow-dist > :nth-child(22) { grid-area: 4 / 4; }
  #solo.ow-master .ow-dist > :nth-child(23) { grid-area: 5 / 3; } #solo.ow-master .ow-dist > :nth-child(25) { grid-area: 5 / 4; }
  #solo.ow-master .ow-dist > :nth-child(26) { grid-area: 6 / 1; } #solo.ow-master .ow-dist > :nth-child(28) { grid-area: 6 / 2; }
}
@media (max-width: 999px) and (max-height: 719px) {
  #solo.ow-master:has(.ow-solo-form) .ow-secret small { display: none; }
}
/* A small phone: smaller rows and no heading on the ranking. */
@media (max-width: 999px) and (max-height: 600px) {
  #solo.ow-master { row-gap: 4px; }
  #solo.ow-master .ow-col > #s-clues { gap: 2px; }
  #solo.ow-master .ow-clue { min-height: 24px; padding-block: 0; }
  #solo.ow-master .ow-clue > b { font-size: 16px; }
  #solo.ow-master .ow-secret strong { font-size: 16px; }
  #solo.ow-master .ow-dist { padding-block: 3px; }
  #solo.ow-master .ow-clue .drop { height: 22px; }
  #solo.ow-master .ow-dist h4 { display: none; }
  #solo.ow-master .ow-solo-form input { padding-block: 6px; }
  #solo.ow-master .ow-col > #s-jev:not(.thinking) { display: none; }
}
/* A phone at the end of a round: the example words take the ranking's place. */
@media (max-width: 520px) and (max-height: 760px) {
  #solo.ow-master:not(:has(.ow-solo-form)) .ow-col > #s-dist { display: none; }
}
/* A short wide window: the ranking in two columns here too. */
@media (min-width: 1000px) and (max-height: 780px) {
  #solo.ow-master .ow-dist { grid-template-columns: minmax(0, max-content) minmax(16px, 1fr) auto minmax(0, max-content) minmax(16px, 1fr) auto; gap: 1px 8px; padding-block: 5px; }
  #solo.ow-master .ow-dist h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #solo.ow-master .ow-dist .name { white-space: nowrap; min-width: 0; }
  #solo.ow-master .ow-dist .name > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
/* A phone on its side: the clues beside everything else. */
@media (min-width: 640px) and (max-width: 999px) and (max-height: 500px) {
  #solo.ow-master { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); }
  #solo.ow-master > *, #solo.ow-master .ow-col > *, #solo.ow-master #s-panel > * { grid-column: 1 / 3; }
  #solo.ow-master #s-panel > .ow-secret { grid-column: 1; }
  #solo.ow-master > .ow-bans:has(~ .ow-col #s-panel > .ow-secret) { grid-column: 2; }
  #solo.ow-master .ow-col > #s-clues { grid-column: 3; grid-row: 1 / span 9; align-content: flex-start; }
  #app > main:has(#solo.ow-master) { padding-bottom: 0; }
}

/* 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; } }
/* On a phone each of Oracle 1's clues keeps to one row at one height; one-word.js
   fitClues sets a long one's country name smaller, lets it take two short lines,
   and only then sets the word smaller. */
@media (max-width: 650px) {
  #solo.ow-guesser #s-clues .ow-clue { flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; height: 35px; }
  #solo.ow-guesser #s-clues .ow-clue :is(b, .guess) { white-space: nowrap; }
  #solo.ow-guesser #s-clues .ow-clue.ow-two-line .guess { min-width: 0; }
  #solo.ow-guesser #s-clues .ow-clue.ow-two-line .guess .name { min-width: 5.5em; white-space: normal; line-height: 1.1;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #solo.ow-guesser #s-clues .ow-clue.ow-wraps { flex-wrap: wrap; height: auto; }
  #solo.ow-guesser #s-clues .ow-clue.ow-wraps .guess { white-space: normal; }
}

/* 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; }
}

/* Nepal's flag is the one that isn't a rectangle: no frame drawn round it. */
img[src$="/flags/np.svg"] { border-color: transparent !important; box-shadow: none !important; outline: none !important; background: none !important; }

/* The info mark's "i" in a bold serif: the pixel fonts' i read as a bar or a
   slash. (Oracle words' ⓘ and the statistics' i.) */
.cx-info::before, .stat-info-mark { font-family: Georgia, "Times New Roman", serif !important; font-weight: 700 !important; font-style: normal; }