/* Bangers (SIL OFL 1.1, fonts/OFL.txt), self-hosted: the wordmark, the celebration title and the gauntlet title only. */
@font-face {
  font-family: "Bangers";
  src: url("fonts/bangers-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Stand-ins for Bangers while it loads (font-display: swap), sized so "HERODEX" is as wide as it is in Bangers (2.889 em) and the
   ascent and descent match (0.883 and 0.181 em), so the swap does not move the header. size-adjust is Bangers' width over the local face's
   (Arial Narrow Bold 4.054 em, Arial Bold 4.945 em, Roboto 4.4375 em Regular and 4.4461 em Bold); the overrides are Bangers' metrics
   divided by size-adjust. Android has no Arial, so its stand-in is Roboto: Regular and Bold differ by 0.2%, so one value (their midpoint)
   serves whichever face the phone resolves. A phone with none of these falls through to Impact and then the generic sans-serif. */
@font-face {
  font-family: "Bangers Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  font-weight: 400;
  size-adjust: 71.26%;
  ascent-override: 123.9%;
  descent-override: 25.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bangers Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 400;
  size-adjust: 58.42%;
  ascent-override: 151.1%;
  descent-override: 31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bangers Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto-Regular"), local("Roboto Regular"), local("RobotoStatic-Regular"), local("Roboto");
  font-weight: 400;
  size-adjust: 65.04%;
  ascent-override: 135.8%;
  descent-override: 27.8%;
  line-gap-override: 0%;
}
:root {
  --bg: #0c0a0b;
  --panel: #171314;
  --panel-2: #201a1b;
  --line: #3a2e2f;
  --text: #f5efe6;
  --muted: #b3a79e;
  --accent: #d42a20;      /* red fills: the selected tab and the primary buttons (top of their gradient); never text, never on a tile */
  --accent-deep: #a3160e; /* bottom of the red fills */
  --accent-2: #ffd86b;    /* light gold: links, focus rings, the strip label, the stones count */
  --correct-ink: #06130a; /* text and marks on green: the value --accent-ink had, kept apart so the red buttons can take light ink */
  --accent-ink: #fff6ea;  /* text on a red fill */
  --gold: #f4b927;
  --gold-deep: #a86f08;
  --ink: #140b08;         /* text on gold, comic outlines and drop shadows */
  --red-text: #ff6a5e;    /* red as text or a light edge on dark */
  --display: "Bangers", "Bangers Fallback", "Bangers Fallback Arial", "Bangers Fallback Roboto", Impact, "Arial Narrow Bold", sans-serif;
  --socket: #1a1213;
  --socket-ring: #8a7a72;
  --stone-space: #2f7cff; --stone-space-hi: #a8ccff; --stone-space-deep: #0f3a99;
  --stone-mind: #ffcf26; --stone-mind-hi: #fff3b0; --stone-mind-deep: #a87b00;
  --stone-reality: #e8262b; --stone-reality-hi: #ff9a94; --stone-reality-deep: #7a0c10;
  --stone-power: #9b4dff; --stone-power-hi: #d6b3ff; --stone-power-deep: #43128f;
  --stone-time: #1fc46a; --stone-time-hi: #a3f7c6; --stone-time-deep: #08703a;
  --stone-soul: #ff8a1c; --stone-soul-hi: #ffc98f; --stone-soul-deep: #a34800;
  --correct: #2e9e4f;
  --partial: #c9a227;
  --wrong: #3a3a48;
  --danger: #c94f4f;
  --radius: 10px;
  --gutter: 16px;
  --name-col: 150px;
  --col: 112px;
  --cols: 7;        /* attribute columns; app.js sets it from game.js FIELDS */
  --fast: 120ms;
  --flip: 1000ms;   /* set from game.js REVEAL at start-up */
  --stagger: 550ms;
  --tap: 44px;            /* smallest touch target (Apple HIG) */
  --field: 48px;          /* input, Guess and tab height: --tap + 4 */
  --tile-edge: #6a6a82;   /* 1px outline on grey tiles and the dashed preview tiles */
  --danger-text: #ff8a8a; /* error text */
  --partial-ink: #1a1500; /* text on yellow */
  --bleed: 8px;           /* on a phone the tiles reach this far past the gutter */
  --sug-max: 320px;       /* typeahead height; app.js lowers it to fit above the keyboard */
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  min-height: 100vh;
  display: flow-root; /* WebKit: stops the footer's bottom margin collapsing out of the min-height (30px of extra scroll) */
}
a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; } /* red is 3.90:1 on --bg, under the 4.5:1 text needs, so links are gold */
button { font: inherit; }
/* Read by screen readers, not shown. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* One focus ring for links, buttons, disclosures and tabs; the input keeps its own. */
:where(a, button, summary, [role="tab"]):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; } /* a drawn dot, not a "·" character */

/* Backdrop: a red glow and a comic halftone, all drawn in CSS. */
.bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(212, 42, 32, 0.26), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.5px) 0 0 / 14px 14px,
    var(--bg);
}
/* The fade toward the page colour (top clear, 45% at 40% down, 65% at the bottom) is an overlay in --bg's colour, not a mask-image on .bg:
   the mask turned the whole backdrop, animated orbs included, into an off-screen pass that the GPU redrew every frame. */
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 11, 0) 0%, rgba(12, 10, 11, 0.45) 40%, rgba(12, 10, 11, 0.65) 100%);
}
/* The hero layer: a hex mesh, three energy streaks and six drifting orbs in the six stone colours. The mesh is a still svg. The orbs and streaks are
   plain boxes with gradient backgrounds, so their transform and opacity animations run on the compositor (will-change) and nothing repaints.
   They sit in the old svg's 1200-unit space: --u is one of those units at the layer's width. The layer's 80% is set on the parts, not on the group. */
.hero { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: max(1200px, 100%); height: 520px; overflow: hidden; container-type: inline-size; --u: calc(100cqw / 1200); }
/* Safari before 16 has no container units: --u would be invalid and the orbs and streaks would collapse to nothing. The layer is as wide as the viewport
   or 1200px, so the same unit in viewport units keeps them where they are (chosen over hiding them: the backdrop is the stones' preview). */
@supports not (width: 1cqw) {
  .hero { --u: calc(max(1200px, 100vw) / 1200); }
}
.hero .mesh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.hero .orb {
  position: absolute; left: calc((var(--cx) - var(--r)) * var(--u)); top: calc((var(--cy) - var(--r)) * var(--u));
  width: calc(var(--r) * 2 * var(--u)); height: calc(var(--r) * 2 * var(--u));
  background: radial-gradient(circle closest-side, var(--g));
  opacity: 0.8; will-change: transform; animation: drift 14s ease-in-out infinite alternate;
}
/* Each orb runs from its stone's -hi colour at 0.95 to its base at 0 (stop lists, so the fade is not premultiplied). */
.hero .o1 { --cx: 160; --cy: 140; --r: 54; --g: rgba(214, 179, 255, 0.95) 0%, rgba(202, 159, 255, 0.76) 20%, rgba(190, 138, 255, 0.57) 40%, rgba(179, 118, 255, 0.38) 60%, rgba(167, 97, 255, 0.19) 80%, rgba(155, 77, 255, 0) 100%; } /* Power */
.hero .o2 { --cx: 1030; --cy: 110; --r: 62; --g: rgba(168, 204, 255, 0.95) 0%, rgba(144, 188, 255, 0.76) 20%, rgba(120, 172, 255, 0.57) 40%, rgba(95, 156, 255, 0.38) 60%, rgba(71, 140, 255, 0.19) 80%, rgba(47, 124, 255, 0) 100%; animation-duration: 17s; animation-delay: -4s; } /* Space */
.hero .o3 { --cx: 300; --cy: 250; --r: 40; --g: rgba(163, 247, 198, 0.95) 0%, rgba(137, 237, 180, 0.76) 20%, rgba(110, 227, 161, 0.57) 40%, rgba(84, 216, 143, 0.38) 60%, rgba(57, 206, 124, 0.19) 80%, rgba(31, 196, 106, 0) 100%; animation-duration: 12s; animation-delay: -7s; } /* Time */
.hero .o4 { --cx: 930; --cy: 240; --r: 46; --g: rgba(255, 201, 143, 0.95) 0%, rgba(255, 188, 120, 0.76) 20%, rgba(255, 176, 97, 0.57) 40%, rgba(255, 163, 74, 0.38) 60%, rgba(255, 151, 51, 0.19) 80%, rgba(255, 138, 28, 0) 100%; animation-duration: 19s; animation-delay: -2s; } /* Soul */
.hero .o5 { --cx: 600; --cy: 60; --r: 70; --g: rgba(255, 154, 148, 0.95) 0%, rgba(250, 131, 127, 0.76) 20%, rgba(246, 108, 106, 0.57) 40%, rgba(241, 84, 85, 0.38) 60%, rgba(237, 61, 64, 0.19) 80%, rgba(232, 38, 43, 0) 100%; animation-duration: 16s; animation-delay: -9s; } /* Reality, the large red one */
.hero .o6 { --cx: 760; --cy: 150; --r: 34; --g: rgba(255, 243, 176, 0.95) 0%, rgba(255, 236, 148, 0.76) 20%, rgba(255, 229, 121, 0.57) 40%, rgba(255, 221, 93, 0.38) 60%, rgba(255, 214, 66, 0.19) 80%, rgba(255, 207, 38, 0) 100%; animation-duration: 13s; animation-delay: -5s; } /* Mind */
.hero .streaks { position: absolute; inset: 0; opacity: 0.8; will-change: transform, opacity; animation: sweep 9s linear infinite; }
.hero .streaks > i {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  transform: rotate(-18deg); transform-origin: calc(var(--ox) * var(--u)) 0;
  background: linear-gradient(90deg, rgba(244, 185, 39, 0) 0%, rgba(250, 201, 73, 0.275) 25%, rgba(255, 216, 107, 0.55) 50%, rgba(250, 201, 73, 0.275) 75%, rgba(244, 185, 39, 0) 100%);
}
.hero .s1 { --x: -200; --y: 120; --w: 520; --h: 2; --ox: 260; }
.hero .s2 { --x: 800; --y: 60; --w: 620; --h: 2; --ox: 310; }
.hero .s3 { --x: 300; --y: 330; --w: 420; --h: 1.5; --ox: 210; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(calc(28 * var(--u)), calc(-18 * var(--u))) scale(1.12); } }
@keyframes sweep { from { transform: translateX(calc(-60 * var(--u))); opacity: 0.4; } 50% { opacity: 0.8; } to { transform: translateX(calc(60 * var(--u))); opacity: 0.4; } }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gutter) 6px; max-width: 1100px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
/* The shadow sits on the still badge, not on .emblem: a filter on the parent of the spinning rings re-runs the blur every frame. */
.emblem { display: inline-flex; position: relative; flex: none; }
.emblem > svg:not(.rings) { filter: drop-shadow(0 4px 10px rgba(212, 42, 32, 0.35)); }
.emblem .rings { position: absolute; inset: 0; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The wordmark: HERO in gold, DEX in red letters on black, in Bangers. No plate or box behind it, and never light letters on a red fill.
   Bangers' X leans right: its ink reaches about 0.09 em past the advance width, and background-clip: text paints only inside the box, so the box
   was cutting the X's right edge off. The link and the span each take 0.12 em of padding on the right (the ink plus a margin for antialiasing) and
   give it back as a negative margin, so the h1 is still exactly as wide as the text and nothing moves. The stand-in faces' X sits inside its advance. */
.brand h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 44px; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; }
.brand h1 a {
  display: inline-block; text-decoration: none; white-space: nowrap; padding-right: 0.12em; margin-right: -0.12em;
  background: linear-gradient(180deg, #fff1c2 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 6px rgba(212, 42, 32, 0.35));
}
.brand h1 a span { padding-right: 0.12em; margin-right: -0.12em; background: linear-gradient(180deg, var(--red-text) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.icons { display: flex; gap: 8px; }
.icon {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); cursor: pointer; display: grid; place-items: center; font-weight: 700;
}
.icon:hover { background: var(--panel-2); border-color: var(--accent); }
.icon:disabled { opacity: 0.5; cursor: default; }

main { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); min-height: 100vh; min-height: 100svh; } /* the first screen is for play: the footer starts below it */

/* The Doomsday strip */
.doomsday {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  margin: 6px auto 12px; padding: 8px 14px; border-radius: 999px; width: max-content; max-width: 100%;
  background: linear-gradient(90deg, rgba(212, 42, 32, 0.16), rgba(212, 42, 32, 0.05)), var(--bg); /* the tint sits on an opaque base: over the backdrop a gold streak crossed the label */
  border: 1px solid rgba(212, 42, 32, 0.45); font-size: 13px; letter-spacing: 0.04em;
}
.dd-label { text-transform: uppercase; font-weight: 800; color: var(--accent-2); display: inline-flex; align-items: center; gap: 8px; }
.dd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-text); box-shadow: 0 0 10px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.dd-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.dd-when { color: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: var(--panel); padding: 4px; border-radius: 24px; width: max-content; max-width: 100%; margin: 0 auto 6px; border: 1px solid var(--line); }
.mode { border: 0; background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.mode svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mode[aria-selected="true"] { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: var(--accent-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.mode:disabled { opacity: 0.5; cursor: default; }
.mode-desc { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.mode-desc .day { color: var(--muted); font-size: 13px; }
.mode-desc .prompt { color: var(--text); font-size: 14px; font-weight: 600; }
.mode-desc .dot, .today .dot { margin: 0 7px; }
.today { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.today b { color: var(--text); }

.guess-form { margin: 8px auto 6px; max-width: 560px; }
.combo { position: relative; display: flex; gap: 8px; }
.guess-input {
  flex: 1; min-width: 0; min-height: var(--field); padding: 12px 14px; font-size: 17px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
}
.guess-input::placeholder { color: var(--muted); opacity: 1; } /* the browser default was 4.00:1 on --panel */
.guess-input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.guess-btn {
  min-height: var(--field); padding: 12px 18px; border-radius: var(--radius); border: 0; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: var(--accent-ink);
  font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(212, 42, 32, 0.28);
}
.guess-btn:active:not(:disabled) { transform: scale(0.97); transition: transform 100ms ease-out; }
.guess-btn:disabled, .guess-input:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-height: var(--sug-max); overflow: auto;
}
.suggestions li { min-height: var(--tap); padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--panel); }
.suggestions .alias { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { position: relative; text-align: center; color: var(--muted); min-height: 1.4em; margin: 4px 0 10px; font-size: 14px; }

/* The colour key under the input, one line down to 320px */
.key { display: flex; justify-content: center; align-items: center; gap: 4px 8px; margin: 2px 0 0; padding: 0; list-style: none; white-space: nowrap; font-size: 12px; line-height: 1.5; color: var(--muted); }
.key[hidden] { display: none; }
.key li { display: inline-flex; align-items: center; }
.key .swatch { width: 20px; height: 18px; margin-right: 4px; flex: none; }

/* The load error: its heading, its role and a drawn triangle say it is an error, not the red border alone */
.notice { margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: center; }
.notice h2 { margin: 0 0 6px; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.notice h2 svg { width: 18px; height: 18px; flex: none; }
.notice p { margin: 0 0 12px; color: var(--muted); }
.notice.error { border-color: var(--danger); }
.notice.error h2 { color: var(--danger-text); }
.notice .btn { min-width: 120px; }
.load-error .key, .load-error .empty { display: none; }

.board { margin: 0 calc(-1 * var(--gutter)); }
.grid-scroll { overflow-x: auto; padding: 0 var(--gutter) 8px; scrollbar-width: thin; }
.grid { display: grid; grid-template-columns: minmax(var(--name-col), 1.4fr) repeat(var(--cols), minmax(var(--col), 1fr)); gap: 6px; min-width: 100%; }
.grid .head {
  position: sticky; top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.grid .head svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* red and gold never touch the board */
.grid .head.name { text-align: left; align-items: flex-start; justify-content: flex-end; }
.tile {
  min-height: 72px; border-radius: 10px; padding: 8px 6px; display: grid; place-items: center; text-align: center;
  font-size: 13px; line-height: 1.25; background: linear-gradient(180deg, #41414f, var(--wrong)); overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.35);
}
.tile.fresh { animation: flip var(--flip) cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * var(--stagger)); backface-visibility: hidden; }
.tile.name { background: linear-gradient(180deg, #23232f, var(--panel-2)); font-weight: 700; font-size: 14px; text-align: left; justify-items: start; padding-left: 10px; }
.tile.correct { background: linear-gradient(180deg, #38b45b, var(--correct)); color: var(--correct-ink); } /* dark ink: light text on green was 2.8:1 */
.tile.partial { background: linear-gradient(180deg, #d9b23a, var(--partial)); color: var(--partial-ink); }
.tile.wrong { box-shadow: inset 0 0 0 1px var(--tile-edge), 0 2px 6px rgba(0,0,0,0.35); }
.tile .sub { color: inherit; font-size: 12px; }
.name .real { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.tile.name .score { display: none; } /* shown on phones */
@keyframes flip { from { transform: perspective(600px) rotateY(90deg); opacity: 0; } 40% { opacity: 1; } to { transform: perspective(600px) rotateY(0); opacity: 1; } }

/* A guess is one .guess group: the name, seven tile buttons, a detail line. Wide screens keep the 8-column grid. */
.guess { display: contents; }
button.tile { appearance: none; border: 0; font-family: inherit; color: var(--text); cursor: pointer; position: relative; padding-top: 16px; } /* wide screens: room for the mark in the corner, so it never sits on the text */
button.tile.correct { color: var(--correct-ink); }
button.tile.partial { color: var(--partial-ink); }
.tile .lbl { position: absolute; top: 4px; right: 4px; display: flex; }
.tile .lt { display: none; }
.mk, .ar { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk .fill { fill: currentColor; stroke: none; }
.tile[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); } /* outside the tile: inside it the 4 px ring touched the 3 px of padding on a phone card; it fits the 6 px gap */
.tile[aria-expanded="true"]:focus-visible { outline-offset: 4px; } /* past the ring, so the keyboard outline does not cover it */
.detail { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; line-height: 1.4; text-align: left; }

/* The card layout, used by the help's example row at every width and by the board on phones */
.guess.example { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.guess.example > .tile { grid-column: span 3; min-height: var(--tap); }
.guess.example > .tile:nth-child(n + 6) { grid-column: span 4; }
.guess.example > .tile:not(.name) { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 5px 3px 6px; font-size: 12px; line-height: 1.25; text-align: left; }
.guess.example > .tile.name { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-height: 0; padding: 0 calc(var(--gutter) - var(--bleed)); background: none; box-shadow: none; color: var(--text); font-size: 16px; line-height: 1.3; text-align: left; }
.guess.example .name .real { display: inline; font-size: 12px; }
.guess.example .name .score { display: inline; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.guess.example .tile .lbl { position: static; display: flex; align-items: center; justify-content: space-between; gap: 2px; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.guess.example .tile .lt { display: inline; }
.guess.example .tile .val { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; overflow-wrap: break-word; hyphens: manual; }
.guess.example .tile .sub { display: flex; align-items: center; gap: 4px; font-size: 12px; }
/* The empty state's wordless preview card: the same 4 + 3 shape, dashed, an icon in each tile, never inside #grid. Seven tiles and no name row, so the wide ones start at the fifth. */
.guess.example.preview > .tile { grid-column: span 3; display: grid; place-items: center; align-content: center; justify-content: center; gap: 0; min-height: 58px; padding: 0; background: transparent; box-shadow: none; border: 1px dashed var(--tile-edge); color: var(--muted); }
.guess.example.preview > .tile:nth-child(n + 5) { grid-column: span 4; }
.guess.example.preview > .tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty { text-align: center; color: var(--muted); padding: 24px var(--gutter); }

/* Clue modes: Quote, Emoji */
.clue { max-width: 640px; margin: 4px auto 14px; }
.clue-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.clue-card .quote { font-size: 24px; line-height: 1.35; font-weight: 600; margin: 0; }
.clue-card .quote::before { content: "\201C"; color: var(--red-text); margin-right: 2px; }
.clue-card .quote::after { content: "\201D"; color: var(--red-text); margin-left: 2px; }
.clue-card .emoji { font-size: 56px; line-height: 1.2; letter-spacing: 0.15em; margin: 0; }
.clue-card .clue-sub { color: var(--muted); font-size: 13px; margin: 10px 0 0; text-transform: uppercase; letter-spacing: 0.08em; }
.hints { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.hints li { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; display: flex; gap: 10px; align-items: baseline; }
.hints li.revealed { animation: pop 320ms ease both; }
.hints li b { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.hints li.locked { color: var(--muted); border-style: dashed; animation: none; }
.hints li.ready { padding: 0; border-color: rgba(244, 185, 39, 0.5); background: linear-gradient(90deg, rgba(244, 185, 39, 0.14), transparent); }
.hint-btn { width: 100%; min-height: var(--tap); text-align: left; padding: 10px 12px; border: 0; background: transparent; color: var(--accent-2); font-weight: 700; cursor: pointer; border-radius: 10px; }
.hint-btn::before { content: "💡 "; }
.hint-btn:hover { background: rgba(244, 185, 39, 0.12); }
.hints li.revealed { border-color: var(--line); }
.chips { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips li { padding: 8px 12px; border-radius: 999px; background: linear-gradient(180deg, #41414f, var(--wrong)); font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.chips li.correct { background: linear-gradient(180deg, #38b45b, var(--correct)); color: var(--correct-ink); font-weight: 700; }
.chips li.fresh { animation: flip var(--flip) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* The result panel. A won one carries the starburst title (the burst, the confetti and the shine are moved by app.js with Element.animate; this file holds them at rest). */
.result {
  position: relative; margin: 18px auto 24px; max-width: 640px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.result h2 { margin: 0; }
.result h2.lost { font-size: 24px; font-weight: 800; line-height: 1.2; margin: 2px 0 4px; }
.result .lead { color: var(--muted); margin: 0 0 12px; }
/* The title block is 240 x 84 at every width, its centre 64px under the panel's padding edge (the confetti's origin, .confetti i below): the wide panel's 18px padding takes 2px off the margin. */
.result h2.won { position: relative; isolation: isolate; width: 240px; height: 84px; margin: 4px auto 4px; display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: 36px; color: var(--ink); }
.result h2.won .burst { position: absolute; inset: 0; z-index: 0; }
.result h2.won .burst svg { width: 100%; height: 100%; display: block; overflow: visible; }
.b-out { fill: var(--accent); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* the comic outline */
.b-in { fill: var(--gold); }
.result h2.won .t { position: relative; z-index: 1; display: block; width: 168px; padding: 2px 0 1px; overflow: hidden; color: var(--ink); font-size: 1em; line-height: 1.1; letter-spacing: 0.02em; text-align: center; white-space: nowrap; }
i.shine { position: absolute; top: -10%; bottom: -10%; left: 0; width: 24px; background: rgba(255, 255, 255, 0.55); transform: translateX(-30px) skewX(-20deg); pointer-events: none; }
.answer { margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.result .faster { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(244, 185, 39, 0.10); border: 1px solid rgba(244, 185, 39, 0.35); font-size: 15px; }
.result .faster b { color: var(--accent-2); }
.card { display: grid; grid-template-columns: 1fr; gap: 6px 14px; margin: 4px 0 8px; }
.card dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.card dd { margin: 0 0 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.result .actions { justify-content: center; }
.btn { min-height: var(--tap); padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: var(--accent-ink); border-color: transparent; font-weight: 800; box-shadow: 0 6px 16px rgba(212, 42, 32, 0.28); }
.btn.primary:disabled { box-shadow: none; }
.btn.primary:active:not(:disabled) { transform: scale(0.97); transition: transform 100ms ease-out; }
.btn.quiet { background: transparent; }
.countdown { display: block; color: var(--muted); font-variant-numeric: tabular-nums; margin: 10px 0 4px; font-size: 14px; }
.notes { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.notes:last-child { margin-bottom: 0; }
.reveal { text-align: center; margin: 6px 0 0; }

/* Disclosures: native details and summary, closed by default. The summary row is a 44px target; its chevron points right and turns 90 degrees to point down when open. */
details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: var(--tap); cursor: pointer; color: var(--accent-2); font-weight: 600; font-size: 15px; }
details > summary::-webkit-details-marker { display: none; }
details > summary .chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); transition: transform 150ms ease-out; }
details[open] > summary .chev { transform: rotate(0deg); }
details.more { border-top: 1px solid var(--line); }
details.more > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; text-align: left; }
details.facts { border-top: 1px solid var(--line); margin-top: 6px; text-align: left; }
.facts-body { padding: 0 0 6px; }

/* The stones card: the gauntlet drawing on the left, the count and the line on the right. app.js draws the svg and sets no width or height; the box sizes it. */
.stones { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; max-width: 640px; margin: 0 auto 20px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.stones[hidden] { display: none; }
.gauntlet-art { position: relative; flex: none; }
.stones .gauntlet-art { width: 128px; height: 156px; }
.gauntlet-art .gauntlet-svg { display: block; overflow: visible; width: 100%; height: 100%; }
.stones-text { min-width: 0; }
.stones-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.3; display: flex; align-items: baseline; flex-wrap: wrap; }
.stones-title .dot { margin: 0 6px; align-self: center; }
.stones-count { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.stones-line { margin: 0 0 4px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.stones-small { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.gauntlet-svg .metal { fill: url(#metal); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.gauntlet-svg .plate { fill: none; stroke: #c98a12; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gauntlet-svg .rivet { fill: #c98a12; }
.gauntlet-svg .shinec { fill: none; stroke: #fff1c2; stroke-opacity: 0.45; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gauntlet-svg .bezel { fill: var(--socket); stroke: var(--ink); stroke-width: 2; }
.gauntlet-svg .ring { fill: none; stroke: var(--socket-ring); stroke-width: 1.5; stroke-dasharray: 2 2; }
.gauntlet-svg .flash { fill: none; stroke: #fff; stroke-width: 2; }
.gem-svg { display: block; overflow: visible; }
.gem .f-hi { fill: var(--hi); }
.gem .f-base { fill: var(--base); }
.gem .f-deep { fill: var(--deep); }
.gem .hl { fill: #fff; opacity: 0.85; }
.gem .out { fill: none; stroke: var(--ink); stroke-width: 0.8; stroke-linejoin: round; }
.gem .shine { fill: #fff; opacity: 0.7; }
.gem-space { --hi: var(--stone-space-hi); --base: var(--stone-space); --deep: var(--stone-space-deep); }
.gem-mind { --hi: var(--stone-mind-hi); --base: var(--stone-mind); --deep: var(--stone-mind-deep); }
.gem-reality { --hi: var(--stone-reality-hi); --base: var(--stone-reality); --deep: var(--stone-reality-deep); }
.gem-power { --hi: var(--stone-power-hi); --base: var(--stone-power); --deep: var(--stone-power-deep); }
.gem-time { --hi: var(--stone-time-hi); --base: var(--stone-time); --deep: var(--stone-time-deep); }
.gem-soul { --hi: var(--stone-soul-hi); --base: var(--stone-soul); --deep: var(--stone-soul-deep); }
/* The large gem that flies into its socket (app.js moves it): centred over the gauntlet at rest. */
.gem-flying { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; pointer-events: none; z-index: 2; }
.gem-flying > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The confetti and the stone burst: an absolutely positioned layer that clips its pieces; app.js moves each piece with transform and opacity. */
.celebrate { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -160px; bottom: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.confetti i, .stone-burst i { position: absolute; display: block; }
.confetti i { left: 50%; top: 224px; } /* the title's centre: 160px of headroom, 16px of padding, 6px of margin and half of the 84px title box (on a wide panel 18px and 4px) */
.confetti i.rib { width: 6px; height: 10px; margin: -5px 0 0 -3px; border-radius: 1px; }
.confetti i.pip { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; }
.confetti i.star { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.c-accent { background: var(--accent); }
.c-gold { background: var(--gold); }
.c-text { background: var(--text); }
.c-space { background: var(--stone-space); }
.c-power { background: var(--stone-power); }
.c-soul { background: var(--stone-soul); }
.c-mind { background: var(--stone-mind); }
.c-reality { background: var(--stone-reality); }
.c-time { background: var(--stone-time); }
.stone-burst { position: absolute; left: -12px; right: -12px; top: -70px; bottom: -140px; overflow: hidden; pointer-events: none; z-index: 3; } /* the art's box plus the dialog body's padding each side, 70px above and 140px below */
.stone-burst i { left: var(--ox, 50%); top: var(--oy, calc(70px + var(--art-h) * 0.6667)); } /* the palm socket, where the particles start: app.js sets --ox and --oy from the drawing; these are the same place at rest */
.stone-burst i.pip { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; }
.stone-burst i.star { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

.foot { max-width: 1100px; margin: 20px auto 30px; padding: 0 var(--gutter); color: var(--muted); font-size: 13px; }
.foot p { margin: 0 0 8px; }
.foot .dexverse { margin: 0 0 6px; }
.foot .dexverse b { color: var(--accent-2); letter-spacing: 0.02em; }
.foot .also a { margin: 0 2px; }
.foot details.more { margin-top: 4px; }

.dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); padding: 0; max-width: min(560px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(0,0,0,0.6); }
.dialog-body { padding: 20px; }
.dialog h2 { margin: 0 0 10px; }
.dialog h2[tabindex="-1"]:focus { outline: none; } /* the help's title takes focus on open; it is not a control */
.dialog h3 { margin: 4px 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.dialog details.more { margin: 0 0 10px; }
.swatch { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; vertical-align: middle; margin-right: 6px; font-size: 13px; }
.swatch.correct { background: var(--correct); color: var(--correct-ink); } .swatch.partial { background: var(--partial); color: var(--partial-ink); } .swatch.wrong { background: var(--wrong); color: var(--text); }
.small { font-size: 13px; color: var(--muted); }
.dialog .small { margin: 0 0 4px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin: 4px 0 10px; }
.stat-row b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.stat-row span { font-size: 12px; color: var(--muted); }
.stones-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.stones-row[hidden] { display: none; }
.stones-row .gem-svg, .stones-row .soc-svg { width: 20px; height: 20px; flex: none; }
.stones-row .stones-count { margin-left: 6px; font-weight: 700; }
.stones-row .tally { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.stones-next { flex: 0 0 100%; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.soc-svg { display: block; overflow: visible; }
.soc-svg .bezel { fill: var(--socket); stroke: var(--ink); stroke-width: 1.2; }
.soc-svg .ring { fill: none; stroke: var(--socket-ring); stroke-width: 1; stroke-dasharray: 1.6 1.6; }
.dist { display: grid; gap: 3px; margin-bottom: 12px; }
.dist .bar { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 6px; font-size: 13px; }
.dist .fill { background: var(--wrong); border-radius: 4px; padding: 1px 6px; min-width: 22px; text-align: right; }
.dist .fill.me { background: var(--correct); color: var(--correct-ink); }

/* The gauntlet dialog (day 6, 12, ...): static styling at rest. app.js opens it and moves the gem, the ring, the particles and the title with Element.animate; the dialog clips them. */
.dialog.gauntlet { --art-h: 250px; overflow: hidden; text-align: center; width: min(420px, calc(100vw - 32px)); }
.gauntlet .dialog-body { position: relative; padding: 16px 12px; }
.gauntlet .starburst { position: absolute; left: 50%; top: 150px; width: 300px; height: 200px; margin: -100px 0 0 -150px; opacity: 0.5; z-index: 0; }
.gauntlet .starburst svg { width: 100%; height: 100%; display: block; }
.dialog.gauntlet .gauntlet-title { position: relative; z-index: 2; margin: 0; height: 44px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 44px; letter-spacing: 0.02em; color: var(--accent-2); text-shadow: 0 3px 0 var(--ink), 0 0 16px rgba(255, 216, 107, 0.35); white-space: nowrap; }
.gauntlet .art-wrap { position: relative; z-index: 1; margin: 8px auto 0; }
.gauntlet .art-wrap .gauntlet-art { width: calc(var(--art-h) * 0.8); height: var(--art-h); margin: 0 auto; z-index: 1; }
.gauntlet .ring-gold { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 4px solid var(--gold); box-shadow: 0 0 24px rgba(244, 185, 39, 0.6); z-index: 0; }
.gauntlet .art-wrap .gem-flying { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.gauntlet-line { position: relative; z-index: 2; margin: 8px 0 12px; font-size: 16px; font-weight: 700; }
.gauntlet .btn { position: relative; z-index: 2; width: 100%; min-height: var(--field); }

@media (prefers-reduced-motion: reduce) {
  .tile.fresh, .chips li.fresh, .hints li, .hero .orb, .hero .streaks, .emblem .rings { animation: none; }
  .dd-dot { animation: none; }
  /* app.js creates none of these under reduce; this is the safety net, and the moments' own motion is Element.animate, which app.js does not start */
  .celebrate, .gem-flying, .stone-burst, .ring-gold, .gauntlet-svg .flash { display: none; }
  details > summary .chev, .btn.primary:active, .guess-btn:active { transition: none; }
}
/* app.js adds .calm to <html> 5 seconds after a touch screen loads: the orbs, streaks and rings hold where they are, and the Doomsday dot stays lit. Every endless loop is covered. */
.calm .hero .orb, .calm .hero .streaks, .calm .emblem .rings { animation-play-state: paused; }
.calm .dd-dot { animation: none; }

/* Today's board */
.leaderboard { margin: 0 auto 24px; max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.leaderboard h2 { margin: 0 0 4px; font-size: 20px; }
.leaderboard h3 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.leaderboard .fun { margin: 0 0 8px; }
.lb-table { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb-table li { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.lb-table li.me { background: linear-gradient(90deg, rgba(244, 185, 39, 0.18), rgba(244, 185, 39, 0.06)); border: 1px solid rgba(244, 185, 39, 0.5); font-weight: 700; }
.lb-table .rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-table li.me .rank { color: var(--accent-2); }
.lb-table .handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-table .num { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.lb-table li.me .num { color: var(--text); }
.lb-empty { color: var(--muted); font-size: 14px; margin: 4px 0; }
.lb-you { margin: 12px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.lb-you b { color: var(--text); }
.link-btn { border: 0; background: transparent; color: var(--accent-2); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* 44px hit area for links in running text: padding out, margin back in */
.link-btn, .notes a, .foot p a { display: inline-block; padding: 14px 6px; margin: -14px -6px; }
.handle-row { display: flex; gap: 8px; margin: 8px 0 6px; }
.handle-row .guess-input { flex: 1; }
.handle-error { color: var(--danger-text); font-size: 13px; min-height: 1.3em; margin: 0 0 6px; }
.check { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 14px; margin: 4px 0 10px; color: var(--muted); }
.check input { width: 24px; height: 24px; flex: none; }

/* Phones: 640px and narrower, the one breakpoint */
@media (max-width: 640px) {
  /* Header: emblem, wordmark and the two icons on one 44px row (52px with the padding above it) */
  .top { flex-wrap: nowrap; justify-content: flex-start; column-gap: 10px; row-gap: 0; padding: 8px var(--gutter) 0; }
  .brand, .brand > div { display: contents; }
  .emblem { order: 1; }
  .emblem svg { width: 44px; height: 44px; }
  .brand h1 { order: 2; flex: 0 1 auto; min-width: 0; font-size: 32px; }
  .brand h1 a { padding: 6px 0.12em 6px 0; margin: -6px -0.12em -6px 0; filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 0 6px rgba(212, 42, 32, 0.35)); } /* a 44px hit area: 32px of type and 6px above and below; the right padding and margin are the X's overhang, as above */
  .icons { order: 3; margin-left: auto; gap: 4px; }

  /* Doomsday strip: one line */
  .doomsday { flex-wrap: nowrap; white-space: nowrap; gap: 0 6px; margin: 6px auto 8px; padding: 6px 8px; font-size: 12px; letter-spacing: 0; }
  .dd-label { text-transform: none; }
  .dd-when { display: none; }

  /* Four mode tabs, one row, icon over label */
  .modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; padding: 2px; margin: 0 0 6px; }
  .mode { flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-height: var(--field); padding: 4px 0; font-size: 12px; font-weight: 600; line-height: 1.2; }
  .mode svg { width: 16px; height: 16px; }
  .mode-desc { margin: 4px 0 2px; }
  .today { margin: 0 0 6px; }

  /* Input row, status line, empty state */
  .guess-form { max-width: none; margin: 6px 0 4px; scroll-margin-top: 8px; }
  .guess-btn { padding: 0 16px; }
  .status { margin: 2px 0 6px; }
  .empty { padding: 12px 0 8px; }

  /* The board has no sideways scroll: each guess is a card of a name line, 4 tiles, 3 tiles and a detail line */
  .board { margin: 0 calc(var(--bleed) * -1); }
  .grid-scroll { overflow: visible; padding: 0 0 8px; }
  .grid { display: block; min-width: 0; }
  .grid .head { display: none; }
  .grid .guess { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 10px 0 12px; }
  .grid .guess + .guess { border-top: 1px solid var(--line); }
  .grid .guess:first-of-type { padding-top: 4px; }
  .grid .guess > .tile { grid-column: span 3; min-height: var(--tap); }
  .grid .guess > .tile:nth-child(n + 6) { grid-column: span 4; }
  .grid .guess > .tile:not(.name) { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 5px 3px 6px; font-size: 12px; line-height: 1.25; text-align: left; }
  .grid .guess > .tile.name { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-height: 0; padding: 0 calc(var(--gutter) - var(--bleed)); background: none; box-shadow: none; color: var(--text); font-size: 16px; line-height: 1.3; text-align: left; }
  .grid .guess .name .real { display: inline; font-size: 12px; }
  .grid .guess .name .score { display: inline; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
  .grid .guess .tile .lbl { position: static; display: flex; align-items: center; justify-content: space-between; gap: 2px; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
  .grid .guess .tile .lt { display: inline; }
  .grid .guess .tile .val { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; overflow-wrap: break-word; hyphens: manual; }
  .grid .guess .tile .sub { display: flex; align-items: center; gap: 4px; font-size: 12px; }

  /* Result, stones, board, dialogs */
  .result { margin: 14px 0 20px; padding: 16px; scroll-margin-top: 8px; }
  .result.won { scroll-margin-top: 128px; } /* the old 8px plus 120px of headroom, so the starburst and the confetti rise inside the screen */
  .result h2.won { font-size: 30px; margin-top: 6px; }
  .stones { margin: 0 0 20px; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .actions .btn { padding: 10px 4px; }
  .actions .btn:only-child { grid-column: 1 / -1; }
  .leaderboard { margin: 0 0 20px; padding: 16px; }
  .dialog { width: calc(100% - 16px); max-width: 560px; max-height: calc(100% - 16px); }
  .dialog.gauntlet { width: calc(100% - 16px); }
  .dialog-body { padding: 16px 12px; }
  .dialog h2 { font-size: 20px; }
  .dialog .actions .btn { padding: 10px 14px; }
  .dialog .guess.example { margin: 0 -6px; }
  .dialog > form > .btn { width: 100%; }
  .handle-row .btn { flex: none; }

  /* Footer: Also-play links are 44px pills; the credit link keeps its place in the sentence */
  .foot { margin: 16px 0 24px; font-size: 13px; }
  .foot .dexverse { margin: 0 0 14px; }
  .foot .also { display: inline-flex; flex-wrap: wrap; align-items: center; vertical-align: middle; }
  .foot .also[hidden] { display: none; }
  .foot .also a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 10px; margin: 0; }
}

/* 320 wide: the gauntlet drawings and the gauntlet title shrink so nothing wraps or clips */
@media (max-width: 359px) {
  .stones .gauntlet-art { width: 96px; height: 116px; }
  .dialog.gauntlet { --art-h: 210px; }
  .dialog.gauntlet .gauntlet-title { font-size: 30px; }
  .gauntlet .art-wrap .gem-flying { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
}