/* DPRKaptcha: one neutral verification frame, with color reserved for the result. */
@font-face {
  font-family: Geist;
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --background: light-dark(#f1f1f1, #181818);
  --foreground: light-dark(#202020, #ededed);
  --muted-foreground: light-dark(#626262, #aaa);
  --card: light-dark(#fff, #232323);
  --secondary: light-dark(#f1f1f1, #303030);
  --border: light-dark(#b5b5b5, #606060);
  --control-border: light-dark(#858585, #888);
  --radius: 0px;
  --control-radius: 0px;
  --font-sans: Geist, Tahoma, Arial, sans-serif;
  --focus-ring: var(--foreground);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--background); color: var(--foreground); font: .875rem/1.5 var(--font-sans); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, input { font: inherit; color: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:is(button, a, input, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
h1[tabindex="-1"]:focus, #main:focus { outline: none; }
h1 { text-wrap: balance; }
p { text-wrap: pretty; }
svg { fill: none; stroke: currentColor; }
#symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 16px; z-index: 10; padding: 12px 16px; background: var(--foreground); color: var(--background); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* The mark keeps its original 560:500 aspect ratio in every lockup. */
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; }
.brandmark { display: block; width: 28px; height: auto; aspect-ratio: 560 / 500; flex: none; fill: currentColor; stroke: none; }
.home { text-decoration: none; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; min-height: 88px; padding: 20px 32px; }
.site-header .wordmark { margin-inline-end: auto; font-size: 1.25rem; }
.account-status { flex-basis: 100%; margin: 0; color: var(--muted-foreground); font-size: .8125rem; }
.account-status:empty { display: none; }
.shell { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - 88px); padding: 32px 20px 64px; }
.screen { width: 100%; max-width: 384px; }
.screen.result-screen { max-width: 640px; }

/* All actions share a hit area, type treatment, and icon geometry. */
.primary, .secondary, .text-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: var(--control-radius);
  font-size: .875rem; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none;
}
.primary { border: 1px solid var(--control-border); background: var(--secondary); color: var(--foreground); box-shadow: inset 1px 1px 0 var(--card), inset -1px -1px 0 var(--border); }
.secondary { border: 1px solid var(--control-border); background: var(--card); }
.text-button { border: 1px solid transparent; background: none; color: var(--muted-foreground); font-weight: 400; }
.button-icon { width: 18px; height: 18px; flex: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.feedback { min-height: 20px; margin: 16px 0 0; color: var(--muted-foreground); font-size: .8125rem; overflow-wrap: anywhere; }

/* Sign-in reads as one deliberate surface rather than scattered controls. */
.signin { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.signin h1 { margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; line-height: 28px; }
.signin > p:first-of-type { margin: 0 0 24px; color: var(--muted-foreground); font-size: 1rem; line-height: 1.5; }
.provider-list { display: grid; gap: 8px; }
.provider { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; align-items: center; gap: 8px; min-height: 48px; padding: 12px 16px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--card); text-decoration: none; }
.provider::after { content: ''; }
.provider-label { min-width: 0; text-align: center; font-weight: 600; line-height: 1.4; }
.provider-icon { display: block; width: 20px; height: 20px; fill: currentColor; stroke: none; }
.provider[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.identity-note, .provider-note { color: var(--muted-foreground); font-size: .75rem; line-height: 1.6; text-align: center; }
.identity-note { margin: 24px 0 0; }
.provider-note { margin: 12px 0 0; }
.provider-note:empty { display: none; }
.signin .preview { width: 100%; margin-top: 24px; background: var(--secondary); }
.signin .feedback:empty { display: none; }

/* Identity and the familiar entry checkbox. */
.identity { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 24px; color: var(--muted-foreground); font-size: .8125rem; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--secondary); color: var(--foreground); font-size: .8125rem; font-weight: 600; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.identity-detail { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.identity strong { display: block; color: var(--foreground); font-size: .875rem; font-weight: 600; }
.checkbox-widget { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 104px; padding: 20px; border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--card); text-align: start; cursor: pointer; }
.entry-box { width: 28px; height: 28px; margin: 0; flex: none; accent-color: var(--foreground); cursor: pointer; }
.claim { min-width: 0; flex: 1; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.checkbox-widget .wordmark { flex-direction: column; gap: 4px; margin-inline-start: auto; font-size: .625rem; letter-spacing: -.02em; }
.checkbox-widget .brandmark { width: 26px; }
.checkbox-widget .wordmark { align-self: center; }
.checkbox-widget:has(.entry-box:checked) { border-color: var(--foreground); }
.entry-followup { min-height: 88px; }
.entry-nudge { margin: 12px 0; color: var(--muted-foreground); font-size: .8125rem; }
.entry-nudge:empty { margin: 0; }
#entry-checks[data-busy="true"] .checkbox-widget { opacity: .6; cursor: wait; }
.entry-note { margin: 16px 0 0; color: var(--muted-foreground); font-size: .8125rem; text-align: center; }

/* Puzzle geometry is physical; its controls and labels remain responsive. */
.attempt-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 40px; margin-block-end: 12px; }
.attempt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.attempt-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attempt-label { font-size: .8125rem; font-weight: 700; line-height: 1.4; }
.attempt-marks { display: flex; flex: none; gap: 4px; }
.attempt-marks span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--control-border); }
.attempt-marks svg { width: 14px; height: 14px; stroke-width: 2.5; visibility: hidden; }
.attempt-marks .is-used svg { visibility: visible; }
.attempt-marks .is-used { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
@media (forced-colors: active) {
  .attempt-marks span { color: Canvas; background: Canvas; border-color: CanvasText; }
  .attempt-marks .is-used { color: HighlightText; background: Highlight; border-color: Highlight; forced-color-adjust: none; }
}
.challenge { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.instruction { min-height: 144px; padding: 16px; background: var(--foreground); color: var(--background); }
.instruction p { margin: 0; font-size: .875rem; }
.instruction h1 { margin: 4px 0 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.instruction small { display: block; font-size: .75rem; line-height: 1.5; }
.puzzle-body { margin: 8px 0; }
.photo { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--secondary); }
.photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cutout, .piece { position: absolute; top: 27%; width: 24%; aspect-ratio: 1; clip-path: url(#piece-cut); }
.cutout { left: 42%; background: var(--foreground); opacity: .8; }
.piece { left: 5%; touch-action: none; cursor: grab; }
.piece:active { cursor: grabbing; }
.piece[aria-disabled="true"] { cursor: not-allowed; }
.piece img { position: absolute; width: 416.666667%; max-width: none; height: 416.666667%; left: -175%; top: -112.5%; pointer-events: none; user-select: none; }
.slider-row { padding: 12px 8px 0; }
.slider-row label { display: block; color: var(--muted-foreground); font-size: .8125rem; }
input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--foreground); cursor: ew-resize; }
#slide { --range-thumb-image: url('/assets/controls/rocket.svg'); }
#weight { --range-thumb-image: url('/assets/controls/kim-head.svg'); }
/* Keep the native range semantics and a 44px handle around the small artwork. */
@media (forced-colors: none) {
  .illustrated-range { appearance: none; background: transparent; }
  .illustrated-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--control-border); }
  .illustrated-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--control-border); }
  .illustrated-range::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; margin-top: -19px; border: 0; border-radius: 0; background: transparent var(--range-thumb-image) center / 32px 32px no-repeat; }
  .illustrated-range::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent var(--range-thumb-image) center / 32px 32px no-repeat; }
}
.weight-range { position: relative; padding-top: 2em; --weight-label-half: 64px; }
.weight-range output { position: absolute; top: 0; left: clamp(var(--weight-label-half), calc(var(--weight-position, 12.5%) + var(--weight-thumb-offset, 16.5px)), calc(100% - var(--weight-label-half))); transform: translateX(-50%); white-space: nowrap; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.phrase-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.challenge-source { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--muted-foreground); }
.challenge-source svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.challenge-source:hover { color: var(--foreground); background: var(--secondary); }
.puzzle-alternative { padding: 8px; color: var(--muted-foreground); font-size: .8125rem; }
summary { min-height: 32px; padding-block: 6px; cursor: pointer; }
.puzzle-alternative p { margin: 4px 0 8px; }
.rotate-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 8px; }
.text-task { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 416px; padding: 16px 8px; }
.text-task canvas { display: block; width: 100%; height: auto; background: var(--secondary); }
.text-task label { font-size: .875rem; }
.text-task input, .download-fallback { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px; border: 1px solid var(--muted-foreground); border-radius: var(--control-radius); background: var(--card); color: var(--foreground); font-size: 1rem; }
.challenge-media { display: block; width: 100%; height: auto; object-fit: contain; background: var(--secondary); }
.horse-photo { max-height: 300px; }
.tile-photo { position: relative; aspect-ratio: 7 / 4; overflow: hidden; background: var(--secondary); }
.tile-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; }
.tile-options { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); min-width: 0; margin: 0; padding: 0; border: 0; }
.tile-options label { position: relative; cursor: pointer; }
.tile-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.tile-mark { position: absolute; inset: 0; border: 1px solid #fff; pointer-events: none; }
.tile-options input:checked + .tile-mark { border: 3px solid var(--tile-ink); background: var(--tile-wash); box-shadow: inset 0 0 0 1px #fff; }
/* Keep the check readable at every tile hue; color frames the stamp. */
.tile-mark::after { content: '✓'; position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #202020; color: #fff; box-shadow: 0 0 0 2px var(--tile-ink, #202020); font-size: 1rem; font-weight: 700; opacity: 0; transform: scale(.95); transition: opacity var(--motion-feedback) var(--motion-ease-out), transform var(--motion-feedback) var(--motion-ease-out); }
.tile-options input:checked + .tile-mark::after { opacity: 1; transform: scale(var(--stamp-scale, 1)) rotate(var(--stamp-turn, 0deg)); }
.tile-options input:focus-visible + .tile-mark { outline: 3px solid #202020; outline-offset: -6px; box-shadow: inset 0 0 0 3px #fff; }
.tile-options label:has(:disabled) { cursor: not-allowed; }
.tile-count { margin: 12px 8px 0; color: var(--muted-foreground); font-size: .875rem; font-variant-numeric: tabular-nums; }
.festive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); aspect-ratio: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: var(--secondary); }
.festive-option { position: relative; min-width: 0; min-height: 0; overflow: hidden; cursor: pointer; }
.festive-option > img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.festive-option > .gray-overlay { position: absolute; inset: 0; }
.festive-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.festive-mark { position: absolute; inset: 0; border: 2px solid var(--card); pointer-events: none; }
.festive-option input:checked + .festive-mark { border: 4px solid #fff; box-shadow: inset 0 0 0 2px #202020; }
.festive-option input:checked + .festive-mark::after { content: '✓'; position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #202020; color: #fff; font-size: 1rem; font-weight: 700; }
.festive-option input:focus-visible + .festive-mark { outline: 3px solid #202020; outline-offset: -8px; box-shadow: inset 0 0 0 4px #fff; }
.festive-option:has(:disabled) { cursor: not-allowed; }
.challenge-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--secondary); }
.audio-player { padding: 24px 8px 8px; }
.audio-player audio { display: block; width: 100%; min-width: 0; }
#voice-task { padding: 0 8px; }
/* Compact transport and inset display, using the CAPTCHA's existing palette. */
.voice-recorder { margin: 12px 0 4px; padding: 4px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--secondary); }
.voice-display { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border: 1px solid var(--control-border); background: var(--card); box-shadow: inset 1px 1px var(--border); }
.voice-clock { flex: none; font-size: .8125rem; line-height: 20px; font-variant-numeric: tabular-nums; }
.voice-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.voice-transport button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--secondary); box-shadow: inset 1px 1px var(--card), inset -1px -1px var(--border); font-size: .75rem; }
.voice-transport button:enabled:active, #voice-record[aria-pressed="true"] { background: var(--card); box-shadow: inset 1px 1px var(--border); }
.voice-record-dot, .voice-stop-icon { flex: none; width: 9px; height: 9px; background: currentColor; }
.voice-record-dot { border-radius: 50%; }
#voice-record-status { margin-inline-start: auto; padding-inline: 4px; color: var(--muted-foreground); font-size: .75rem; }
.voice-wave { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 28px; }
.voice-wave::before { content: ''; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid var(--border); }
.voice-wave i { position: relative; display: block; flex: 1; max-width: 3px; height: 100%; background: var(--foreground); transform: scaleY(.07); }
.is-recording .voice-wave i { animation: voice-wave 800ms var(--motion-ease-out) infinite alternate; }
.is-recording .voice-wave i:nth-child(2n) { animation-delay: -350ms; animation-duration: 600ms; }
.is-recording .voice-wave i:nth-child(3n) { animation-delay: -600ms; animation-duration: 1000ms; }
.is-recording .voice-wave i:nth-child(5n) { animation-delay: -150ms; }
.is-paused .voice-wave i { animation-play-state: paused; }
@keyframes voice-wave { 0%, 100% { transform: scaleY(.1); } 30% { transform: scaleY(.8); } 60% { transform: scaleY(.3); } 80% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .is-recording .voice-wave i { animation: none; transform: scaleY(.4); }
  .is-recording .voice-wave i:nth-child(2n) { transform: scaleY(.7); }
}
.shave-photo { user-select: none; }
.shave-photo > img { object-position: center top; }
.mustache-photo { user-select: none; }
.mustache-photo > img { object-position: center top; }
#challenge .mustache-photo #mustache-surface { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
#mustache-surface:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }
#mustache-surface[aria-disabled="true"] { cursor: wait; }
#challenge .shave-photo #shave-surface { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: url('/assets/challenges/shave/clippers.svg') 16 7, crosshair; }
#shave-surface:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }
#shave-surface[aria-disabled="true"] { cursor: wait; }
.shave-meter { display: flex; align-items: center; gap: 12px; margin: 8px; font-size: .75rem; line-height: 16px; font-variant-numeric: tabular-nums; }
.shave-meter progress { flex: 1; min-width: 0; width: 100%; height: 8px; accent-color: var(--foreground); }
.shave-meter span { white-space: nowrap; }
.voice-phrase { margin: 0 0 8px; font-size: 1.25rem; line-height: 28px; font-weight: 600; text-wrap: balance; }
.answer-options { display: grid; gap: 8px; min-width: 0; margin: 16px 8px; padding: 0; border: 0; }
.answer-options legend { margin-bottom: 12px; padding: 0; }
.answer-options label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: var(--control-radius); cursor: pointer; }
.answer-options label:has(:checked) { border-color: var(--foreground); background: var(--secondary); }
.answer-options input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--foreground); }
.answer-options label:has(:disabled) { cursor: wait; }
.phrase-answer { padding: 8px; }
.phrase-answer input { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px; border: 1px solid var(--muted-foreground); border-radius: var(--control-radius); background: var(--card); font-size: 1rem; }
.passport-media { position: relative; }
.passport-source { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--control-radius); background: var(--background); color: var(--foreground); }
.passport-source svg { width: 16px; height: 16px; }
.passport-source:hover { background: var(--secondary); }
.media-source { display: inline-flex; align-items: center; min-height: 44px; margin-inline: 8px; color: var(--muted-foreground); font-size: .75rem; text-underline-offset: .2em; }
.range-bounds { display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: .75rem; }
.media-note { margin: 8px 0; color: var(--muted-foreground); font-size: .8125rem; }
.slider-row output { color: var(--foreground); font-variant-numeric: tabular-nums; }
.picture-feedback { padding: 12px; background: var(--secondary); }
.picture-feedback p { margin: 0 0 8px; font-size: .8125rem; }
.picture-feedback p:last-child { margin-bottom: 0; }
.picture-unavailable { display: none; }
.challenge:has(#picture-feedback:not([hidden])) .puzzle-body { min-height: 0; }
.status { min-height: 36px; margin: 8px; color: var(--muted-foreground); font-size: .8125rem; overflow-wrap: anywhere; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 4px 0; border-top: 1px solid var(--border); }
.refresh { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--control-radius); background: none; }
.refresh svg { width: 20px; height: 20px; }
.step { font-size: .8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.controls .primary { margin-inline-start: auto; }
/* Old-style stippling makes the unavailable acknowledgement explicit. */
#challenge[data-challenge="voice"] #verify:disabled {
  opacity: 1;
  color: var(--muted-foreground);
  background-color: var(--secondary);
  background-image: repeating-conic-gradient(color-mix(in srgb, var(--border) 45%, transparent) 0% 25%, transparent 0% 50%);
  background-size: 2px 2px;
  text-shadow: 1px 1px var(--card);
  box-shadow: none;
}
.challenge-brand { margin-top: 16px; text-align: center; color: var(--muted-foreground); }
.challenge-brand .wordmark { font-size: .75rem; }
.challenge-brand .brandmark { width: 18px; }

/* A challenge is one screen. Budget artwork after measuring the text and
   controls, including optional feedback, rather than hiding page overflow. */
body:has(#challenge:not([hidden])) { display: flex; flex-direction: column; min-height: 100dvh; }
body:has(#challenge:not([hidden])) > .site-header { flex: none; min-height: 0; padding: 4px 16px; }
body:has(#challenge:not([hidden])) > .site-policies { flex: none; padding: 0 16px; font-size: .75rem; }
body:has(#challenge:not([hidden])) .policy-links { gap: 0 16px; }
.shell:has(#challenge:not([hidden])) { flex: 1; min-height: 0; padding: 8px 16px; align-items: safe center; }
#challenge .challenge-brand { display: none; }
#challenge .instruction { min-height: 0; padding: 12px; }
#challenge .challenge-progress { margin-top: 8px; }
#challenge .status { min-height: 0; }
#challenge .status:empty { display: none; }
#challenge .text-task { min-height: 0; gap: 16px; padding: 8px; }
#challenge :is(.photo, .festive-grid) { width: min(100%, var(--puzzle-media-height, 100%)); height: auto; margin-inline: auto; }
/* Preserve 24px targets in interactive grids when enlarged text needs scrolling. */
#challenge .festive-grid { min-width: min(72px, 100%); }
#challenge .tile-photo { min-width: min(168px, 100%); width: min(100%, calc(var(--puzzle-media-height, 208px) * 7 / 4)); height: auto; margin-inline: auto; }
#challenge .media-frame:not(.tile-photo, .festive-grid) { height: var(--puzzle-media-height, auto); }
#challenge .media-frame:not(.tile-photo, .festive-grid) > img { height: 100%; max-height: none; object-fit: contain; }
#challenge :is(canvas, .challenge-video) { height: var(--puzzle-media-height, auto); object-fit: contain; }
#challenge #captcha-text { min-height: 120px; }
#challenge .answer-options { gap: 4px; margin: 8px; }
#challenge .answer-options legend { margin-bottom: 4px; }
#challenge .answer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#challenge .answer-options label { min-width: 0; gap: 8px; padding-inline: 8px; overflow-wrap: anywhere; }
#challenge .slider-row { padding-top: 4px; }
#challenge .rotate-controls { margin-block: 8px; }
#challenge .puzzle-alternative { padding-block: 0; }
#challenge .puzzle-alternative p { margin-block: 4px; }
#challenge .tile-count { margin-top: 4px; }
.tile-solution { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
#challenge .audio-player { padding-top: 8px; }
#audio-task:has(#audio-feedback:not([hidden])) audio { display: none; }
@media (max-height: 820px) {
  #main:has(#challenge:not([hidden])) { padding-block: 4px; }
  #challenge .instruction { padding: 8px; }
  #challenge .instruction h1 { margin: 4px 0 0; font-size: 1.25rem; line-height: 1.2; }
  #challenge #instruction-lead { font-size: .75rem; }
  #challenge #instruction-help { margin-top: 4px; }
  #challenge .challenge-progress { margin-top: 4px; }
  #challenge .audio-player { padding-block: 0; }
  #challenge .phrase-answer { padding: 4px; }
  #challenge .puzzle-body > section:has(details[open]) :is(.photo, .media-frame:not(.tile-photo, .festive-grid), video) { display: none; }
  #challenge section:has(details[open]) :is(.tile-photo, .festive-grid) { min-width: 96px; min-height: 96px; }
  #audio-task:has(details[open]) audio { display: none; }
  #audio-task:has(details[open]) .audio-player:has(#audio-feedback[hidden]) { display: none; }
  #audio-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #audio-task :is(.audio-player, .phrase-answer) { grid-column: 1 / -1; }
  #audio-task .puzzle-alternative { grid-column: 1 / -1; grid-row: 3; }
  #audio-task summary { width: calc(100% - 144px); min-width: 112px; }
  #audio-task .media-source { grid-column: 2; grid-row: 3; align-self: start; min-height: 32px; }
}

@media (min-width: 600px) and (max-height: 600px) {
  /* Leave room for recovery feedback with narrower fallback-font metrics. */
  .shell:has(#challenge:not([hidden])) #challenge { max-width: 800px; }
  #challenge .challenge { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr auto; column-gap: 8px; padding: 4px; }
  /* Leave room for the separate recovery row without shrinking media or targets. */
  #challenge .puzzle-body { margin-block: 0; }
  #challenge .puzzle-body .text-task { padding-block: 0; gap: 2px; }
  #challenge :is(.text-task, .phrase-answer) input { margin-top: 2px; padding-block: 8px; }
  #challenge .puzzle-body .phrase-answer { padding-block: 2px; }
  #challenge .shave-meter { margin-block: 2px; }
  #challenge .instruction { grid-column: 1; grid-row: 1; }
  #challenge .status { grid-column: 1; grid-row: 2; }
  #challenge .controls { grid-column: 1; grid-row: 3; padding-top: 4px; }
  #challenge :is(.puzzle-body, .picture-feedback) { grid-column: 2; grid-row: 1 / 4; min-width: 0; }
  #challenge .puzzle-body { margin-top: 0; }
  #challenge .answer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #challenge .answer-options legend { grid-column: 1 / -1; }
  #challenge .media-source { min-height: 32px; }
  #challenge .media-note { margin-block: 4px; }
  #voice-task .voice-recorder { margin-block: 4px 0; }
  #challenge .phrase-answer { padding: 4px; }
}

/* Receipt hierarchy: identity, outcome, metrics, invitation. */
.result { position: relative; width: 100%; overflow: hidden; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.result-head .wordmark { font-size: 1.125rem; }
.result-head .brandmark { width: 26px; }
.result-date { color: var(--muted-foreground); font-size: .75rem; white-space: nowrap; }
.result .identity { margin: 24px 0 0; }
.result-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 40px 0; }
.result-main > div { min-width: 0; }
.result-main h1 { margin: 0; font-size: clamp(4rem, 18vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.result-main h1 small { color: var(--muted-foreground); font-size: 2.5rem; font-weight: 400; letter-spacing: -.03em; }
.result-main h1.fail-title { max-width: 350px; font-size: clamp(2rem, 10vw, 3.5rem); line-height: 1.1; letter-spacing: -.04em; }
.result-caption { max-width: 350px; margin: 12px 0 0; text-wrap: pretty; }
.result-sub { margin: 12px 0 0; font-size: 1.125rem; line-height: 1.5; }
.big-check { width: 100px; height: 100px; flex: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap: 24px; margin: 0 0 32px; }
.stats div { min-width: 0; }
.stats dt { margin-bottom: 4px; color: var(--muted-foreground); font-size: .75rem; }
.stats dd { margin: 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.result-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); }
.result-foot strong { font-size: .875rem; font-weight: 600; }
.result-foot span { color: var(--muted-foreground); font-size: .75rem; overflow-wrap: anywhere; }
.result[data-artwork="ready"] { padding: 0; border: 0; border-radius: 0; background: transparent; }
.result[data-artwork="ready"] .result-details { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#result-card-preview { display: block; width: 100%; height: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.replay { margin-inline-start: auto; }

/* Waiting and recovery use the same voice and controls. */
.error-screen h1 { margin: 0 0 12px; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.03em; }
.error-screen > p { margin: 0; color: var(--muted-foreground); font-size: 1rem; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (hover: hover) {
  .provider:not([aria-disabled="true"]):hover, .secondary:not(:disabled):hover, .refresh:not(:disabled):hover { background: var(--secondary); }
  .primary:not(:disabled):hover { opacity: .9; }
  summary:hover, .text-button:not(:disabled):hover { color: var(--foreground); }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition: transform 150ms var(--motion-ease-out, cubic-bezier(.22, 1, .36, 1)); }
  button:not(:disabled):active { transform: translateY(1px); }
}
@media (max-width: 420px) {
  .site-header { min-height: 72px; padding: 16px 20px; }
  .shell { min-height: calc(100svh - 72px); padding: 24px 16px 40px; }
  .shell:has(#challenge:not([hidden])) { align-items: flex-start; padding-top: 8px; }
  .signin { padding: 24px; }
  .checkbox-widget { gap: 12px; padding: 16px; }
  .claim { font-size: .875rem; }
  .result { padding: 24px; }
  .result-main { margin-block: 32px; gap: 16px; }
  .big-check { width: 64px; height: 64px; }
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions .primary { grid-column: 1 / -1; }
  .actions .replay { grid-column: 1 / -1; justify-self: start; margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .tile-options input:checked + .tile-mark::after { transform: none; }
}
@media (forced-colors: active) {
  :is(button, a, input, summary):focus-visible { outline-color: Highlight; }
  .challenge-progress > .is-complete { outline: 2px solid Highlight; }
}

/* An invitation before account selection; the game retains its compact frame. */
body:has(:is(.landing,.startup-screen):not([hidden])) { display: flex; flex-direction: column; min-height: 100svh; }
.shell:has(:is(.landing,.startup-screen):not([hidden])) { flex: 1; min-height: 0; padding: 48px 32px; }
.screen:is(.landing,.startup-screen) { max-width: 480px; overflow-wrap: anywhere; }
.verification-window { border: 1px solid var(--control-border); background: var(--card); }
.landing-copy { padding: 32px; }
:is(.landing,.startup-screen) h1 { margin: 0; padding: 12px 16px; background: var(--foreground); color: var(--card); font-size: 1rem; line-height: 1.5; font-weight: 700; letter-spacing: 0; text-wrap: pretty; }
.landing-intro { margin: 0 0 16px; font-size: 1.125rem; line-height: 1.5; }
.landing-note { margin: 0 0 24px; color: var(--muted-foreground); font-size: .875rem; line-height: 1.5; }
.landing-cta { padding: 8px 16px; font-size: .875rem; line-height: 20px; }
#signin-dialog { padding: 0; max-width: 384px; width: calc(100% - 32px); max-height: calc(100svh - 32px); border: none; border-radius: var(--radius); color: var(--foreground); background: var(--card); }
#signin-dialog::backdrop { background: rgb(0 0 0 / .5); }
body:has(#signin-dialog[open]) { overflow: hidden; }
.signin-close { display: flex; margin: -16px -16px 16px auto; gap: 12px; }
@media (max-width: 760px) {
  .shell:has(:is(.landing,.startup-screen):not([hidden])) { padding: 24px 16px 40px; }
  .landing-copy { padding: 24px; }
}

/* One native modal owns focus while the verification windows pile up inside it. */
.entry-dialog {
  position: fixed; inset: 0; width: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; overflow: hidden;
}
.entry-window {
  position: absolute; top: 24px; left: 16px;
  width: min(560px, calc(100% - 32px)); max-width: none;
  max-height: calc(100dvh - 32px);
  margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 8px;
  border: 2px solid var(--foreground); border-radius: 0;
  background: var(--card); color: var(--foreground);
}
.entry-dialog::backdrop { background: rgb(0 0 0 / .06); }
body:has(.entry-dialog[open]) { overflow: hidden; }
.entry-window h2 { margin: 0; padding: 12px 16px; background: var(--foreground); color: var(--card); font-size: .875rem; line-height: 20px; }
.entry-dialog-body { padding: 24px; }
.entry-question { margin: 0 0 24px; font-size: 1.875rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.entry-window[data-mood]:has(.entry-question:not([hidden])) .entry-followup { min-height: 88px; }
.entry-history { pointer-events: none; }
.entry-history input:disabled { opacity: 1; }
.entry-window .entry-followup { align-items: center; gap: 24px; min-height: 160px; padding: 0; border: 0; }
.entry-window .entry-box { width: 56px; height: 56px; }
.entry-window .claim { font-size: 1.875rem; line-height: 36px; font-weight: 700; }
.entry-window .feedback { margin: 16px 0 0; }
.entry-window .feedback:empty { display: none; }
.entry-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; }
.entry-dialog[aria-busy="true"] .entry-followup { cursor: wait; }
@media (max-width: 420px) {
  .entry-dialog-body { padding: 16px; }
  .entry-window .entry-followup { gap: 16px; }
  .entry-window .claim { font-size: 1.5rem; line-height: 32px; }
}

/* Recovery actions sit separately beneath the challenge. */
.recovery-controls { margin-top: 12px; }
.recovery-controls > div, .confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.recovery-controls > div { justify-content: center; }
.recovery-controls button { padding-inline: 8px; }
.confirm-dialog { width: min(440px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.confirm-dialog h2 { font-size: 1.25rem; margin: 0 0 16px; }
.confirm-dialog p { line-height: 1.5; }
.confirm-actions { justify-content: flex-end; margin-top: 24px; }
.confirm-dialog::backdrop { background: #0008; }
@media (max-height: 600px) {
  .recovery-controls { margin-top: 4px; padding-block: 0; }
}
/* Drawing remains usable when enlarged text needs vertical scrolling. */
#challenge :is(.shave-photo, .mustache-photo) { min-width: min(128px, 100%); }
#challenge :is(.shave-photo, .mustache-photo) > canvas { height: 100%; object-fit: fill; }
@media (max-height: 600px) {
  body:has(#challenge:not([hidden])) > .site-header { padding-block: 0; }
  .attempt-status { min-height: 24px; margin-block-end: 4px; }
  .attempt-value { font-size: 1.5rem; line-height: 1; }
  #challenge .status { margin-block: 4px; }
  #challenge .text-task { gap: 4px; padding-block: 2px; }
  #voice-task .voice-phrase { margin-bottom: 4px; }
}

/* Drift sits behind the site content. */
#site-background { position: fixed; inset: 0; z-index: 0; isolation: isolate; pointer-events: none; }
body > :is(.site-header, main, footer) { position: relative; z-index: 1; }
.legal-main, .error-screen, .ready, .attempt-status, .recovery-controls { background: var(--background); box-shadow: 0 0 24px 20px var(--background); }
@media print { #site-background { display: none; } .legal-main { box-shadow: none; } }