/* ==========================================================================
   SNAP GUESS — STYLES
   Design language: a photo studio at the moment of the shutter click.
   Dark charcoal stage, a flash-yellow accent, monospace HUD numbers like
   camera EXIF read-outs, and a physical instant-photo card as the centerpiece.
   ========================================================================== */

:root{
  --bg-0:#0E0F13;
  --bg-1:#1A1C23;
  --panel:#1E2029;
  --panel-line: rgba(255,255,255,0.08);
  --text-0:#F4F2EC;
  --text-1:#9C9EAB;
  --text-2:#6A6C79;

  --accent:#D7FF3E;
  --accent-dim:#A9CC2F;
  --accent-ink:#12130A;

  --good:#3ED598;
  --good-dim:#1E3B30;
  --bad:#FF5C72;
  --bad-dim:#3B1E24;

  --ring-track: rgba(255,255,255,0.10);

  --font-display:'Space Grotesk', sans-serif;   /* SNAPGUESS wordmark only */
  --font-body:'Montserrat', sans-serif;
  --font-mono:'Montserrat', sans-serif;          /* numerals use tabular-nums instead of a mono face */

  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.9,.32,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-tap-highlight-color:transparent;
}

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

button{ font-family:inherit; touch-action:manipulation; }
select, input, textarea{ touch-action:manipulation; }
img{ max-width:100%; }

/* ---------------------------------------------------------------------- */
/* Ambient background                                                      */
/* ---------------------------------------------------------------------- */
.scene{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 15% 0%, #23263080 0%, transparent 55%),
    radial-gradient(120% 90% at 85% 100%, #2a1f2a80 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.35;
  will-change: transform;
}
.orb-a{
  width:38vmax; height:38vmax;
  left:-10vmax; top:-12vmax;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  animation: drift-a 22s ease-in-out infinite;
}
.orb-b{
  width:32vmax; height:32vmax;
  right:-8vmax; bottom:-10vmax;
  background: radial-gradient(circle, #FF5C72, transparent 70%);
  opacity:0.22;
  animation: drift-b 26s ease-in-out infinite;
}
@keyframes drift-a{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(6vmax, 8vmax) scale(1.12); }
}
@keyframes drift-b{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-5vmax,-6vmax) scale(1.08); }
}
.grain{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 2px);
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* ---------------------------------------------------------------------- */
/* App shell                                                               */
/* ---------------------------------------------------------------------- */
.app{
  position:relative; z-index:1;
  min-height:100dvh;
  display:flex; flex-direction:column;
  max-width:640px;
  margin:0 auto;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}

/* HUD — sticky so pause/quit/score stay reachable without scrolling back up
   to them on tall rounds or short viewports. */
.hud{
  display:none;
  align-items:center;
  padding: 6px 4px 22px;
  position:sticky;
  top: env(safe-area-inset-top);
  z-index:11;
}
.hud:not([hidden]){
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap:8px;
  animation: fade-down 0.5s var(--ease);
}
.hud:not([hidden])::before{
  content:'';
  position:absolute;
  inset: -20px -24px auto -24px;
  height: calc(100% + 20px);
  background: linear-gradient(var(--bg-0) 65%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:-1;
  pointer-events:none;
}
.hud-brand{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-body);
  font-weight:800; letter-spacing:0.05em;
  font-size:13px; color:var(--text-1);
  white-space:nowrap;
  justify-self:start;
}
.brand-break{ display:none; }
.shutter-dot{
  width:9px; height:9px; border-radius:50%;
  flex-shrink:0;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(215,255,62,0.15);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.3); opacity:0.7; }
}
.hud-controls{ display:flex; align-items:center; gap:4px; justify-self:center; }
.hud-stats{ display:flex; align-items:center; gap:8px; justify-self:end; }
.hud-chip{
  display:flex; flex-direction:column; align-items:flex-end;
  padding:6px 10px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  min-width:56px;
}
.hud-label{ font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2); }
.hud-value{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; color:var(--text-0); }

/* Icon buttons (pause / quit) */
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
  color:var(--text-1);
  cursor:pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.icon-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--text-0); }
.icon-btn:active:not(:disabled){ transform:scale(0.95); }
.icon-btn:disabled{ opacity:0.4; cursor:default; }
.icon-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.icon-btn-danger:hover:not(:disabled){ border-color:var(--bad); color:var(--bad); }

/* Floating mute toggle — always reachable, on every screen */
.mute-fab{
  position:fixed;
  top:calc(16px + env(safe-area-inset-top));
  right:16px;
  z-index:20;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:50%;
  color:var(--text-0);
  cursor:pointer;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.mute-fab:hover{ border-color:var(--accent); transform:translateY(-1px); }
.mute-fab:active{ transform:translateY(0) scale(0.95); }
.mute-fab.muted{ color:var(--text-2); }

/* Docked state — used whenever the HUD is showing (game/results screens).
   The button is moved into .hud-controls by JS so it sits inline with
   pause/quit instead of floating fixed, which would otherwise land on top
   of the score chip on narrower phones. Matches .icon-btn sizing exactly
   so it lines up in the row without needing its own breakpoint rules. */
.mute-fab.docked{
  position:static;
  top:auto; right:auto;
  z-index:auto;
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  box-shadow:none;
}

/* Stage / screens */
.stage{ flex:1; display:flex; }
.screen{
  display:none;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}
.screen.active{
  display:flex;
  animation: screen-in 0.45s var(--ease);
}
@keyframes screen-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fade-down{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent-dim);
  margin:0 0 10px;
}

/* ---------------------------------------------------------------------- */
/* Menu screen                                                             */
/* ---------------------------------------------------------------------- */
.menu-card{
  width:100%;
  max-width:440px;
  text-align:center;
  padding:8px;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(40px, 11vw, 60px);
  line-height:0.95;
  letter-spacing:-0.01em;
  margin:0 0 14px;
  color:var(--text-0);
}
.wordmark span{ color:var(--accent); }

.tagline{
  color:var(--text-1);
  font-size:15px;
  line-height:1.55;
  max-width:360px;
  margin:0 auto 32px;
}

.field{ text-align:left; margin-bottom:22px; }
.field-label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--text-1);
  margin-bottom:8px;
}
.select-shell{
  position:relative;
  border-radius:var(--radius-md);
  background:var(--panel);
  border:1px solid var(--panel-line);
  transition: border-color 0.2s var(--ease);
}
.select-shell:focus-within{ border-color:var(--accent); }
.select-shell.open{ border-color:var(--accent); }

.select-trigger{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background:transparent;
  border:none;
  color:var(--text-0);
  font-family:inherit;
  font-size:16px; /* keep at 16px+ so iOS Safari doesn't auto-zoom on focus */
  font-weight:500;
  text-align:left;
  padding:15px 40px 15px 16px;
  cursor:pointer;
  position:relative;
}
.select-trigger:focus{ outline:none; }
.select-trigger:focus-visible{ box-shadow: inset 0 0 0 1px var(--accent); border-radius:var(--radius-md); }
.select-caret{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  color:var(--text-1);
  pointer-events:none;
  transition: transform 0.22s var(--ease), color 0.2s var(--ease);
}
.select-shell.open .select-caret{ transform:translateY(-50%) rotate(180deg); color:var(--accent); }

/* Custom listbox — replaces the browser's native (unstyleable) dropdown
   popup so open/closed states share one consistent, on-brand look. */
.select-listbox{
  position:absolute;
  top:calc(100% + 8px);
  left:0; right:0;
  z-index:15;
  margin:0;
  padding:6px;
  list-style:none;
  max-height:272px;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius-md);
  box-shadow: 0 20px 44px -16px rgba(0,0,0,0.6);
  animation: listbox-in 0.16s var(--ease);

  scrollbar-width:thin;
  scrollbar-color: var(--accent-dim) var(--panel);
}
.select-listbox::-webkit-scrollbar{ width:6px; }
.select-listbox::-webkit-scrollbar-track{ background:var(--panel); border-radius:999px; }
.select-listbox::-webkit-scrollbar-thumb{ background:var(--accent-dim); border-radius:999px; }
.select-listbox::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
@keyframes listbox-in{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

.select-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px;
  border-radius:10px;
  font-size:14.5px;
  font-weight:500;
  color:var(--text-0);
  cursor:pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.select-option:hover,
.select-option.focused{ background:var(--bg-1); }
.select-option.selected{ color:var(--accent); font-weight:700; }
.select-option-check{
  display:flex; flex:none;
  color:var(--accent);
  opacity:0;
  transition: opacity 0.15s var(--ease);
}
.select-option.selected .select-option-check{ opacity:1; }
.select-option.disabled{
  color:var(--text-2);
  cursor:default;
}
.select-option.disabled:hover,
.select-option.disabled.focused{ background:transparent; }
.select-option-badge{
  flex:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-2);
  background:rgba(255,255,255,0.06);
  border:1px solid var(--panel-line);
  padding:3px 7px;
  border-radius:999px;
}
.field-hint{
  margin:8px 2px 0;
  font-size:12px;
  color:#d6d6d6;
}

.btn-primary{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  border-radius:999px;
  padding:16px 24px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.01em;
  cursor:pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
  box-shadow: 0 8px 24px -8px rgba(215,255,62,0.45);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn-primary:active{ transform:translateY(0px) scale(0.98); }
.btn-primary svg{ transition: transform 0.18s var(--ease); }
.btn-primary:hover svg{ transform:translateX(3px); }

.btn-ghost{
  width:100%;
  background:transparent;
  color:var(--text-1);
  border:1px solid var(--panel-line);
  border-radius:999px;
  padding:14px 24px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-ghost:hover{ border-color:var(--text-1); color:var(--text-0); }

.menu-footnote{
  margin:20px 0 0;
  font-family:var(--font-mono);
  font-size:12px;
  color:#d6d6d6;
  letter-spacing:0.02em;
}
.footnote-link{
  color:var(--accent-dim);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.footnote-link:hover{ color:var(--accent); }

/* ---------------------------------------------------------------------- */
/* Game screen                                                             */
/* ---------------------------------------------------------------------- */
.game-card{ width:100%; max-width:420px; position:relative; }

/* Pause overlay — lets anyone stop the clock and think without pressure.
   Fixed to the real viewport (not just the game-card's box) so it's always
   centered on screen, regardless of scroll position or how tall the round's
   content is. Sits below the HUD's z-index so pause/quit stay reachable. */
.pause-overlay{
  position:fixed; inset:0;
  z-index:8;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  background: rgba(14,15,19,0.82);
  backdrop-filter: blur(6px);
}
.pause-overlay:not([hidden]){
  display:flex;
  animation: screen-in 0.25s var(--ease);
}
.pause-card{
  text-align:center;
  max-width:280px;
  padding:24px;
  color:var(--text-0);
}
.pause-card svg{ color:var(--accent); margin-bottom:12px; }
.pause-title{
  margin:0 0 8px;
  font-weight:800;
  font-size:20px;
}
.pause-sub{
  margin:0 0 20px;
  color:var(--text-1);
  font-size:13px;
  line-height:1.5;
}
.pause-card .btn-primary{ width:auto; padding:13px 26px; margin:0 auto; }

.timer-row{
  display:flex; align-items:center; gap:16px;
  margin-bottom:22px;
}
.timer-ring{
  position:relative;
  width:64px; height:64px;
  flex:none;
}
.timer-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{
  fill:none; stroke:var(--ring-track); stroke-width:6;
}
.ring-progress{
  fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:232.5;
  stroke-dashoffset:0;
  transition: stroke-dashoffset 1s linear, stroke 0.25s var(--ease);
}
.timer-ring.low .ring-progress{ stroke:var(--bad); }
.timer-ring.low{ animation: ring-pulse 0.6s ease-in-out infinite; }
@keyframes ring-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}
.timer-number{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; font-size:18px;
  color:var(--text-0);
}
.prompt-copy{ text-align:left; }
.prompt-copy .eyebrow{ margin-bottom:4px; }
.prompt-sub{ margin:0; font-size:13px; color:var(--text-2); }

.polaroid{
  background:#F4F2EC;
  border-radius:14px;
  padding:14px 14px 22px;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.4) inset;
  transform: rotate(-1.2deg);
  animation: polaroid-float 5s ease-in-out infinite;
  margin-bottom:24px;
}
@keyframes polaroid-float{
  0%,100%{ transform: rotate(-1.2deg) translateY(0); }
  50%{ transform: rotate(-0.4deg) translateY(-6px); }
}
.polaroid-photo{
  position:relative;
  /* Bounded by whichever is scarcer — card width or viewport height — so
     the square shrinks on short phones instead of the whole card growing
     past the viewport and hiding the options/HUD below the fold. */
  width:min(100%, 44dvh);
  margin:0 auto;
  aspect-ratio: 1 / 1;
  border-radius:4px;
  overflow:hidden;
  background:#111219;
}
.photo-skeleton{
  position:absolute; inset:0;
  background: linear-gradient(100deg, #1a1b22 30%, #23252f 50%, #1a1b22 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 120% 0; }
  100%{ background-position: -20% 0; }
}
.polaroid-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: top center;
  opacity:0;
  transition: opacity 0.4s var(--ease);
}
.polaroid-photo img.loaded{ opacity:1; }

/* Logo rounds (company logos etc.) get a light, letterboxed tile instead of
   a dark cropped portrait — logos are vector marks with their own internal
   padding and often a transparent background, so "cover" cropping and a
   near-black backdrop can clip them or make dark-colored marks vanish. */
.polaroid-photo.logo-frame{ background:#F4F2EC; }
.polaroid-photo img.logo-img{
  object-fit:contain;
  object-position:center;
  padding:14%;
  box-sizing:border-box;
}
.flash{
  position:absolute; inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
}
.flash.pop{ animation: flash-pop 0.5s ease-out; }
@keyframes flash-pop{
  0%{ opacity:0.9; }
  100%{ opacity:0; }
}
.polaroid-caption{
  padding-top:14px;
  text-align:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  color:#1a1b22;
  min-height:20px;
}

.answer-status{
  display:flex; align-items:center; justify-content:center; gap:8px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-bottom:0;
  padding:0 16px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  border:1px solid transparent;
  transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease), margin 0.3s var(--ease), padding 0.3s var(--ease);
}
.answer-status svg{ flex:none; }
.answer-status.show{
  max-height:52px;
  opacity:1;
  margin-bottom:14px;
  padding:11px 16px;
  animation: status-pop 0.35s var(--ease);
}
.answer-status.good{ background:var(--good-dim); color:var(--good); border-color:var(--good); }
.answer-status.bad{ background:var(--bad-dim); color:var(--bad); border-color:var(--bad); }
@keyframes status-pop{
  0%{ transform:scale(0.92); }
  55%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}

.options{
  display:flex; flex-direction:column; gap:10px;
}
.option-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  text-align:left;
  background:var(--panel);
  border:1px solid var(--panel-line);
  color:var(--text-0);
  border-radius:var(--radius-md);
  padding:16px 18px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.option-btn:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-2px); }
.option-btn:active:not(:disabled){ transform:translateY(0) scale(0.99); }
.option-btn:disabled{ cursor:default; }
.option-btn .opt-mark{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; min-height:22px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-2);
  border:1px solid var(--panel-line);
  border-radius:6px;
  padding:2px 6px;
  transition: transform 0.2s var(--ease);
}
.option-btn.correct .opt-mark,
.option-btn.wrong .opt-mark{
  animation: mark-pop 0.3s var(--ease);
}
@keyframes mark-pop{
  0%{ transform:scale(0.4); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.option-btn.correct{
  background:var(--good-dim);
  border-color:var(--good);
  color:var(--good);
  animation: correct-pop 0.35s var(--ease);
}
.option-btn.correct .opt-mark{ border-color:var(--good); color:var(--good); }
.option-btn.wrong{
  background:var(--bad-dim);
  border-color:var(--bad);
  color:var(--bad);
  animation: shake 0.4s var(--ease);
}
.option-btn.wrong .opt-mark{ border-color:var(--bad); color:var(--bad); }
.option-btn.dim{ opacity:0.45; }
@keyframes correct-pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.03); }
  100%{ transform:scale(1); }
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(5px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(3px); }
}

/* ---------------------------------------------------------------------- */
/* Results screen                                                          */
/* ---------------------------------------------------------------------- */
.results-card{
  position:relative;
  width:100%; max-width:420px;
  text-align:center;
  padding:8px;
}
.results-score{
  margin:0 0 8px;
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
  font-weight:800;
  font-size:clamp(48px,14vw,72px);
  color:var(--accent);
  line-height:1;
}
.results-score small{
  font-size:18px;
  font-weight:600;
  color:var(--text-2);
  margin-left:6px;
}
.results-breakdown{
  margin:0 0 28px;
  color:var(--text-1);
  font-size:14px;
}
.results-strip{
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px;
  margin-bottom:32px;
}
.strip-dot{
  width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  background:var(--panel);
  border:1px solid var(--panel-line);
}
.strip-dot.hit{ background:var(--good-dim); border-color:var(--good); color:var(--good); }
.strip-dot.miss{ background:var(--bad-dim); border-color:var(--bad); color:var(--bad); }

.results-review{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:24px;
  max-height:280px;
  overflow-y:auto;
  text-align:left;
  padding-right:6px;

  /* Firefox */
  scrollbar-width:thin;
  scrollbar-color: var(--accent-dim) var(--panel);
}
.results-review:empty{ display:none; }

/* Chromium / WebKit — themed to match the studio palette instead of the
   generic OS scrollbar */
.results-review::-webkit-scrollbar{ width:6px; }
.results-review::-webkit-scrollbar-track{
  background:var(--panel);
  border-radius:999px;
}
.results-review::-webkit-scrollbar-thumb{
  background:var(--accent-dim);
  border-radius:999px;
}
.results-review::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
.review-row{
  display:flex; align-items:center; gap:12px;
  padding:8px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius-sm);
}
.review-row.miss{ border-color: rgba(255,92,114,0.35); }
.review-thumb{
  width:40px; height:40px;
  border-radius:8px;
  object-fit:cover;
  object-position: top center;
  flex:none;
  background:#111219;
}
.review-thumb.logo-mode{
  object-fit:contain;
  padding:6px;
  box-sizing:border-box;
  background:#F4F2EC;
}
.review-info{ flex:1; min-width:0; }
.review-name{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:var(--text-0);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.review-answer{
  margin:2px 0 0;
  font-size:12px;
  color:var(--text-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.review-row.hit .review-answer{ color:var(--good); }
.review-row.miss .review-answer{ color:var(--bad); }
.review-mark{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
}
.review-row.hit .review-mark{ background:var(--good-dim); color:var(--good); }
.review-row.miss .review-mark{ background:var(--bad-dim); color:var(--bad); }

.results-actions{ display:flex; flex-direction:column; gap:10px; }

.confetti{ position:absolute; inset:-40px 0 auto 0; height:0; overflow:visible; pointer-events:none; }
.confetti span{
  position:absolute;
  top:-20px;
  width:7px; height:12px;
  opacity:0.9;
  animation: confetti-fall 2.6s ease-in forwards;
}
@keyframes confetti-fall{
  0%{ transform: translateY(0) rotate(0deg); opacity:1; }
  100%{ transform: translateY(340px) rotate(540deg); opacity:0; }
}

.btn-danger{
  width:100%;
  background:var(--bad);
  color:#2A0D12;
  border:none;
  border-radius:999px;
  padding:14px 24px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease);
}
.btn-danger:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-danger:active{ transform:translateY(0) scale(0.98); }

/* ---------------------------------------------------------------------- */
/* Loading overlay — shown while a round's photos are being fetched        */
/* ---------------------------------------------------------------------- */
.loading-overlay{
  position:fixed; inset:0;
  z-index:40;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(10,11,15,0.82);
  backdrop-filter: blur(6px);
}
.loading-overlay:not([hidden]){
  display:flex;
  animation: screen-in 0.2s var(--ease);
}
.loading-card{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center;
  padding:24px;
}
.loading-spinner{
  width:40px; height:40px;
  border-radius:50%;
  border:3px solid var(--panel-line);
  border-top-color:var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}
.loading-text{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--text-1);
  letter-spacing:0.01em;
}

/* ---------------------------------------------------------------------- */
/* End-session confirmation modal                                         */
/* ---------------------------------------------------------------------- */
.modal-overlay{
  position:fixed; inset:0;
  z-index:30;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  background: rgba(10,11,15,0.7);
  backdrop-filter: blur(4px);
}
.modal-overlay:not([hidden]){
  display:flex;
  animation: screen-in 0.2s var(--ease);
}
.modal-card{
  width:100%; max-width:360px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.modal-title{
  margin:0 0 10px;
  font-size:19px;
  font-weight:800;
  color:var(--text-0);
}
.modal-body{
  margin:0 0 22px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-1);
}
.modal-actions{ display:flex; flex-direction:column; gap:10px; }

/* ---------------------------------------------------------------------- */
/* Toast                                                                   */
/* ---------------------------------------------------------------------- */
.toast{
  position:fixed;
  left:50%; bottom:24px;
  transform:translate(-50%, 12px);
  background:var(--panel);
  border:1px solid var(--panel-line);
  color:var(--text-0);
  padding:12px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index:10;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5);
}
.toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* Mobile-first: base styles above already target phones. These queries    */
/* fine-tune the extremes — very small/narrow phones, short landscape       */
/* viewports where vertical space is the constraint, and larger screens.    */
/* ---------------------------------------------------------------------- */

/* Small phones (iPhone SE and similar, ~360px and under) */
@media (max-width:380px){
  .app{ padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .wordmark{ font-size:36px; }
  .tagline{ font-size:14px; margin-bottom:24px; }
  .polaroid{ padding:10px 10px 16px; }
  .timer-row{ gap:12px; margin-bottom:18px; }
  .timer-ring{ width:56px; height:56px; }
  .timer-number{ font-size:16px; }
  .option-btn{ padding:14px 14px; font-size:14px; }
  .results-score{ font-size:44px; }
  .hud-brand{ font-size:12px; letter-spacing:0.03em; gap:6px; white-space:normal; line-height:1.15; align-self:center; }
  .brand-break{ display:block; }
  .hud-chip{ min-width:52px; padding:5px 9px; }
  .modal-card{ padding:20px; }
}

/* Very narrow phones (older/small-screen devices, ~340px and under) */
@media (max-width:340px){
  .wordmark{ font-size:32px; }
  .hud-brand span:last-child{ font-size:12px; }
  .btn-primary, .btn-ghost, .btn-danger{ padding:13px 18px; font-size:13.5px; }
  /* Three icon buttons (mute docks in here too) + two stat chips is a tight
     fit at this width — tighten gaps and shrink both so nothing wraps. */
  .hud:not([hidden]){ column-gap:4px; }
  .hud-controls{ gap:4px; }
  .icon-btn, .mute-fab.docked{ width:32px; height:32px; }
  .hud-chip{ min-width:44px; padding:4px 7px; }
}

/* Shortish viewports in any orientation — phones where the browser's
   address/tab bar eats into the visible height (common in portrait too,
   not just landscape). Tighten vertical rhythm so the answer options and
   pause/quit controls don't end up needing a scroll to reach. */
@media (max-height:700px){
  .app{ padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .hud{ padding-bottom:14px; }
  .wordmark{ font-size:clamp(32px, 9vw, 46px); margin-bottom:10px; }
  .tagline{ font-size:14px; margin-bottom:20px; }
  .field{ margin-bottom:16px; }
  .menu-footnote{ margin-top:12px; }
  .timer-row{ margin-bottom:14px; }
  .polaroid{ margin-bottom:14px; padding:10px 10px 16px; }
  .polaroid-photo{ width:min(100%, 34dvh); }
  .answer-status.show{ margin-bottom:10px; }
  .options{ gap:8px; }
  .option-btn{ padding:13px 16px; }
  .results-review{ max-height:190px; }
  .results-strip{ margin-bottom:18px; }
  .results-breakdown{ margin-bottom:18px; }
}

/* Short viewports — mobile landscape, split-screen, or small tablets in
   landscape. Height is the scarce resource here, not width, so we shrink
   the decorative bits and tighten vertical rhythm instead of shrinking text. */
@media (max-height:520px) and (orientation:landscape){
  .app{ padding-top:10px; padding-bottom:10px; }
  .hud{ padding:4px 4px 12px; }
  .wordmark{ font-size:34px; margin-bottom:8px; }
  .tagline{ margin-bottom:18px; }
  .field{ margin-bottom:14px; }
  .menu-footnote{ margin-top:12px; }
  .timer-row{ margin-bottom:12px; }
  .timer-ring{ width:44px; height:44px; }
  .timer-number{ font-size:14px; }
  .polaroid{
    display:flex; align-items:center; gap:14px;
    padding:10px 14px; margin-bottom:12px;
  }
  .polaroid-photo{ width:96px; height:96px; flex:none; aspect-ratio:auto; }
  .polaroid-caption{ padding-top:0; text-align:left; }
  .orb{ display:none; } /* skip the ambient float animation — nothing to gain, costs paint */
  .results-review{ max-height:160px; }
  .results-strip{ margin-bottom:16px; }
  .results-score{ font-size:36px; margin-bottom:4px; }
  .results-breakdown{ margin-bottom:16px; }
}

/* Tablets and up */
@media (min-width:720px){
  .app{ padding-top:32px; }
  .wordmark{ font-size:66px; }
}

/* Respect notches/home-indicators and on-screen keyboards: ensure the
   quit/results modals never get clipped by dynamic viewport chrome. */
.modal-overlay, .loading-overlay{
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/*JoErl*/
.developer-name{
  color:var(--accent);

}