/* ==========================================================================
   Duet — "Nightwatch"
   A celestial chart read under lamplight: a brass-framed plate, parchment
   givens engraved in place, and player symbols lit like orbs.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens - */

:root {
  /* Ground */
  --night-0: #05070f;
  --night-1: #0a0e1b;
  --night-2: #101728;
  --night-3: #18203a;
  --night-4: #212b4a;

  /* Structure */
  --line: rgba(146, 166, 214, 0.14);
  --line-strong: rgba(146, 166, 214, 0.26);
  --line-brass: rgba(217, 164, 65, 0.28);

  /* Ink */
  --text: #e9edf8;
  --text-dim: #a7b2ce;
  --muted: #7e8aab;

  /* Sun */
  --gold: #ffc75a;
  --gold-deep: #e09b2b;
  --brass: #d9a441;
  --brass-soft: #f0c874;

  /* Moon */
  --moon: #e2e9fa;
  --moon-cool: #a8bce4;

  /* Alarm */
  --danger: #ff6b6b;
  --danger-deep: #c93a3a;
  --danger-wash: rgba(255, 107, 107, 0.09);

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Geometry */
  --gutter: clamp(13px, 3vw, 21px);
  --cell-gap: 7px;
  --plate-radius: 22px;
  --btn-radius: 11px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------ foundation - */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--night-1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* `manipulation` keeps panning and pinch-zoom but drops the double-tap
     zoom, which otherwise fires when a player taps a cell twice in quick
     succession to change their mind — and zooms the board mid-move. */
  touch-action: manipulation;
}

/* A slow, cold night with one warm lamp in it. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}

.aurora__orb--sun {
  width: 46vmax;
  height: 46vmax;
  top: -22vmax;
  left: -14vmax;
  background: radial-gradient(circle, rgba(224, 155, 43, 0.5), transparent 68%);
  animation: drift-sun 34s var(--ease-out) infinite alternate;
}

.aurora__orb--moon {
  width: 52vmax;
  height: 52vmax;
  bottom: -26vmax;
  right: -18vmax;
  background: radial-gradient(circle, rgba(120, 155, 220, 0.42), transparent 68%);
  animation: drift-moon 44s var(--ease-out) infinite alternate;
}

@keyframes drift-sun {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vw, 5vh, 0) scale(1.14); }
}

@keyframes drift-moon {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-6vw, -4vh, 0) scale(1); }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- layout - */

.shell {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 40px) clamp(16px, 4vw, 28px) 56px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 24px);
}

/* -------------------------------------------------------------- masthead - */

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.wordmark {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--night-3), var(--night-1));
  border: 1px solid var(--line-brass);
  padding: 5px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 10px 26px -14px rgba(217, 164, 65, 0.7);
}

/* The wordmark IS the puzzle: a 6×6 pattern that keeps re-solving itself. */
.wordmark__cell {
  transition: fill 620ms var(--ease-out), opacity 620ms var(--ease-out);
}

.masthead__titles {
  min-width: 0;
}

.masthead__title {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  background: linear-gradient(168deg, #fff 6%, var(--brass-soft) 52%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.masthead__tagline {
  margin: 5px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.masthead__tools {
  display: flex;
  gap: 8px;
  flex: none;
}

.iconbtn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 200ms, border-color 200ms, background 200ms, transform 200ms var(--ease-spring);
}

.iconbtn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconbtn:hover {
  color: var(--gold);
  border-color: var(--line-brass);
  background: rgba(217, 164, 65, 0.08);
  transform: translateY(-1px);
}

.iconbtn:active {
  transform: translateY(0) scale(0.94);
}

/* --------------------------------------------------------------- readout - */

.readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-radius: var(--btn-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
}

.readout__group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.readout__group--right {
  gap: 12px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 7px;
}

.stat__icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat__value {
  font-family: var(--font-mono);
  font-size: 1.12rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}

.stat__value--sm {
  font-size: 0.92rem;
  color: var(--text-dim);
}

.stat__label {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.stat--level {
  gap: 8px;
}

.stat__badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--brass-soft);
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid var(--line-brass);
  white-space: nowrap;
}

.stat--level.is-hidden {
  display: none;
}

/* ----------------------------------------------------------------- plate - */

.boardwrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.plate {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: clamp(14px, 3.2vw, 22px);
  border-radius: var(--plate-radius);
  background:
    linear-gradient(168deg, var(--night-3) 0%, var(--night-2) 46%, #0c1120 100%);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 70px -34px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* A warm rim-light along the top edge, like brass catching lamplight. */
.plate__glow {
  position: absolute;
  inset: 0;
  border-radius: var(--plate-radius);
  pointer-events: none;
  background: linear-gradient(190deg, rgba(240, 200, 116, 0.14), transparent 34%);
  mix-blend-mode: screen;
}

.board {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cell-gap);
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: visible;
  /* The board is the surface a player taps most, so the double-tap zoom is
     disabled here specifically. Pinch-zoom still works. */
  touch-action: manipulation;
}

.row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--cell-gap);
  flex: 1;
  min-height: 0;
}

/* ------------------------------------------------------------------ cell - */

.cell {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 0 0 1px rgba(146, 166, 214, 0.075);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 160ms var(--ease-spring);
}

/* An empty cell shows a faint socket, so the board reads as 36 slots. */
.cell.is-empty::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(146, 166, 214, 0.2);
  transition: border-color 200ms var(--ease-out);
  pointer-events: none;
}

.cell.is-empty:hover::after {
  border-color: rgba(217, 164, 65, 0.55);
}

/* Engraved parchment — a given is a mark already burned into the plate. */
.cell.is-given {
  background:
    linear-gradient(158deg, rgba(236, 219, 178, 0.3), rgba(196, 173, 124, 0.15));
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.3),
    inset 0 0 0 1px rgba(236, 219, 178, 0.26);
  cursor: default;
}

.cell:not(.is-given):hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.cell:not(.is-given):active {
  transform: scale(0.94);
}

.cell:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  z-index: 3;
}

.cell.is-shake {
  animation: shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* --- the symbols ------------------------------------------------------- */

.cell .sym {
  width: 58%;
  height: 58%;
  display: block;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}

.cell .sym--sun {
  color: var(--gold);
  filter: drop-shadow(0 0 9px rgba(255, 199, 90, 0.5));
}

.cell .sym--sun circle {
  fill: currentColor;
}

.cell .sym--sun line {
  stroke: currentColor;
}

.cell .sym--moon {
  fill: var(--moon);
  filter: drop-shadow(0 0 8px rgba(168, 188, 228, 0.42));
}

/* A given symbol is engraved, not lit. */
.cell.is-given .sym--sun {
  color: #e6d4a2;
  filter: none;
  opacity: 0.95;
}

.cell.is-given .sym--moon {
  fill: #c2cbdd;
  filter: none;
  opacity: 0.92;
}

/* A symbol the player just placed blooms in. */
.cell.is-fresh .sym {
  animation: bloom 320ms var(--ease-spring);
}

@keyframes bloom {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.cell.is-hinted::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  border: 1px dashed rgba(217, 164, 65, 0.55);
  pointer-events: none;
}

/* --- violation hatching ------------------------------------------------ */

.cell.is-violating::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 92, 92, 0.62) 0 5px,
    rgba(255, 92, 92, 0.12) 5px 10px
  );
  box-shadow: inset 0 0 0 1.5px rgba(255, 107, 107, 0.6);
  pointer-events: none;
  animation: hatch-in 260ms var(--ease-out);
  z-index: 2;
}

@keyframes hatch-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------ clue - */

/* The chips sit in a 7px gutter, so their box overlaps the cells either
   side. The glyph is what the player actually reads, so it is drawn as bars
   rather than set in type: a monospace "=" is only ~0.5em wide, so a
   font-size large enough to fill the chip overflows the box. Drawn bars
   fill it exactly, at any chip size.

   The chip's own text is kept at zero size — it stays in the DOM for
   assistive tech and for the tests that read the chip's textContent. */
.clue {
  position: absolute;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: rgba(10, 14, 27, 0.96);
  border: 1px solid rgba(146, 166, 214, 0.42);
  box-shadow:
    0 2px 7px -2px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  font-size: 0;
  line-height: 0;
  --clue-ink: #a7b2ce;
  pointer-events: none;
  z-index: 4;
  animation: clue-in 420ms var(--ease-spring) both;
}

/* The bars that make up the glyph. Every dimension is a share of the chip,
   so the same rules fit both the desktop chip and the smaller phone one. */
.clue::before,
.clue::after {
  content: '';
  position: absolute;
  background: var(--clue-ink);
  border-radius: 2px;
  filter: drop-shadow(0 0 3px var(--clue-ink));
}

/* "=" — two horizontal bars across the chip, with a clear gap between them
   so the glow does not fuse them into one block. */
.clue--eq::before,
.clue--eq::after {
  left: 11%;
  width: 78%;
  height: 15%;
}
.clue--eq::before { top: 25%; }
.clue--eq::after { top: 60%; }

/* "×" — two bars crossed at 45°. A bar of length L, turned 45°, spans
   L x √2, so the bar is 55% long to fill ~78% of the chip. */
.clue--ne::before,
.clue--ne::after {
  top: 50%;
  left: 50%;
  width: 15%;
  height: 55%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.clue--ne::after { transform: translate(-50%, -50%) rotate(-45deg); }

.clue--eq { --clue-ink: #c6d8fb; }
.clue--ne { --clue-ink: #ffd88a; }

@keyframes clue-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------------------------------------------------------------- banner - */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  padding: 12px 15px;
  border-radius: var(--btn-radius);
  background: #fdf6f4;
  border: 1.5px solid var(--danger);
  color: #7a1f1f;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 16px 40px -22px rgba(255, 107, 107, 0.55);
  animation: banner-in 300ms var(--ease-out);
}

.banner[hidden] {
  display: none;
}

@keyframes banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.banner__icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--danger-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.banner__text {
  min-width: 0;
}

/* --------------------------------------------------------------- actions - */

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 170ms var(--ease-spring),
    border-color 200ms,
    background 200ms,
    color 200ms,
    opacity 200ms;
}

.btn__icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover:not(:disabled) {
  border-color: var(--line-brass);
  background: linear-gradient(180deg, rgba(217, 164, 65, 0.13), rgba(217, 164, 65, 0.04));
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.btn--accent {
  color: var(--brass-soft);
  border-color: var(--line-brass);
  background: linear-gradient(180deg, rgba(217, 164, 65, 0.14), rgba(217, 164, 65, 0.04));
}

.btn--ghost {
  background: transparent;
  color: var(--text-dim);
}

.btn--primary {
  background: linear-gradient(180deg, var(--brass-soft), var(--gold-deep));
  border-color: var(--brass-soft);
  color: #241703;
  font-weight: 600;
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffe0a1, var(--brass));
  border-color: #ffe0a1;
  color: #241703;
}

.btn__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  color: inherit;
}

/* ----------------------------------------------------------------- rules - */

.rules {
  border-radius: var(--btn-radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.rules__toggle {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 16px;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Guarantees a 44px hit height regardless of the label's line box. */
.rules__toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.rules__toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.rules__chev {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 280ms var(--ease-out);
}

.rules__toggle[aria-expanded='true'] .rules__chev {
  transform: rotate(180deg);
}

.rules__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms var(--ease-out);
}

.rules__body.is-collapsed {
  grid-template-rows: 0fr;
}

.rules__body > * {
  min-height: 0;
  overflow: hidden;
}

.rulecards {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  display: grid;
  gap: 9px;
}

.rulecard {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line);
}

.rulecard__num {
  flex: none;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(217, 164, 65, 0.15);
  border: 1px solid var(--line-brass);
  color: var(--brass-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  margin-top: 1px;
}

.rulecard p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.rulecard b {
  color: var(--text);
  font-weight: 600;
}

/* Inline glyphs in the rule cards — deliberately NOT the board's SVG sizing. */
.rulecard .sym {
  font-family: var(--font-body);
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -0.1em;
  display: inline;
  width: auto;
  height: auto;
}

.rulecard .sym--sun { color: var(--gold); }
.rulecard .sym--moon { color: var(--moon); }

.rel {
  font-family: var(--font-mono);
  color: var(--brass-soft);
  font-weight: 600;
}

/* ------------------------------------------------------------- colophon - */

.colophon {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.7;
  padding-top: 4px;
}

.colophon p {
  margin: 0;
}

.colophon__keys {
  margin-top: 8px !important;
  font-size: 0.72rem;
}

kbd {
  display: inline-block;
  min-width: 19px;
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  text-align: center;
}

/* -------------------------------------------------------------- overlay - */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}

.overlay[hidden] {
  display: none;
}

.overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 13, 0.78);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: fade-in 260ms var(--ease-out);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 30px 26px 24px;
  border-radius: 20px;
  background: linear-gradient(168deg, var(--night-3), var(--night-1));
  border: 1px solid var(--line-brass);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 40px 90px -40px rgba(0, 0, 0, 1);
  text-align: center;
  animation: panel-in 380ms var(--ease-spring);
  overflow: hidden;
}

.overlay__panel--wide {
  max-width: 460px;
  text-align: left;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.overlay__flare {
  position: absolute;
  top: -110px;
  left: 50%;
  width: 260px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(240, 200, 116, 0.3), transparent 66%);
  filter: blur(16px);
  pointer-events: none;
}

.overlay__eyebrow {
  margin: 0 0 6px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-soft);
  font-weight: 600;
}

.overlay__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.1rem, 8vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(168deg, #fff, var(--brass-soft) 70%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.overlay__title--sm {
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  margin-bottom: 16px;
}

.scoreline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 15px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
}

.scoreline__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  position: relative;
}

.scoreline__label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.scoreline__value {
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}

.scoreline__value--sm {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding-top: 3px;
}

/* The "New best" flag is anchored to the scoreline's top-right corner, clear
   of the cell labels it would otherwise sit on top of. */
.newbest {
  position: absolute;
  top: -11px;
  right: 10px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #241703;
  background: linear-gradient(180deg, var(--brass-soft), var(--gold));
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(217, 164, 65, 0.8);
  animation: pop 420ms var(--ease-spring);
}

.newbest[hidden] {
  display: none;
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

.overlay__status {
  margin: 14px 0 0;
  padding: 10px 13px;
  border-radius: 9px;
  background: var(--danger-wash);
  border: 1px solid rgba(255, 107, 107, 0.4);
  color: #ffb4b4;
  font-size: 0.85rem;
  text-align: left;
}

.overlay__status[hidden] {
  display: none;
}

.overlay__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.overlay__actions .btn {
  flex: 1;
}

/* -------------------------------------------------------------- settings - */

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.setting:last-of-type {
  border-bottom: 0;
}

.setting__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.setting__label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
}

.setting__hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.switch {
  flex: none;
  width: 52px;
  height: 30px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 240ms var(--ease-out), border-color 240ms;
}

.switch[aria-checked='true'] {
  background: linear-gradient(180deg, rgba(217, 164, 65, 0.55), rgba(217, 164, 65, 0.28));
  border-color: var(--line-brass);
}

.switch__knob {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 260ms var(--ease-spring);
}

.switch[aria-checked='true'] .switch__knob {
  transform: translateX(22px);
  background: #fff6e2;
}

.switch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.levelpick {
  display: flex;
  gap: 5px;
  flex: none;
}

.levelpick__opt {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}

.levelpick__opt:hover {
  border-color: var(--line-brass);
  color: var(--brass-soft);
}

.levelpick__opt[aria-checked='true'] {
  background: linear-gradient(180deg, var(--brass-soft), var(--gold-deep));
  border-color: var(--brass-soft);
  color: #241703;
  font-weight: 600;
}

.levelpick__opt:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- toast - */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--night-3);
  border: 1px solid var(--line-brass);
  color: var(--text);
  font-size: 0.86rem;
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 1);
  animation: toast-in 320ms var(--ease-spring);
}

.toast[hidden] {
  display: none;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 420px) {
  .masthead__tagline {
    display: none;
  }

  .wordmark {
    width: 40px;
    height: 40px;
  }

  .readout {
    padding: 9px 11px;
    gap: 8px;
  }

  .readout__group {
    gap: 10px;
  }

  .stat--best {
    display: none;
  }

  .cell {
    border-radius: 6px;
  }

  .clue {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .scoreline {
    gap: 4px;
    padding: 13px 6px;
  }

  .scoreline__value {
    font-size: 1.1rem;
  }

  .colophon__keys {
    display: none;
  }
}

@media (max-width: 360px) {
  .shell {
    padding-inline: 12px;
  }

  .actions {
    gap: 9px;
  }

  .btn {
    font-size: 0.86rem;
    padding: 0 12px;
  }
}

/* -------------------------------------------------------------- a11y/motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .aurora__orb {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(180, 195, 230, 0.4);
    --line-strong: rgba(200, 212, 240, 0.6);
    --muted: #a9b4cf;
  }

  .cell {
    background: rgba(255, 255, 255, 0.05);
  }

  .clue {
    border-color: rgba(220, 230, 255, 0.85);
  }
}