:root {
  color-scheme: dark;
  --bg: oklch(0.15 0.012 32);
  --panel: oklch(0.19 0.013 32);
  --panel-raised: oklch(0.23 0.014 32);
  --media: oklch(0.13 0.01 285);
  --text: oklch(0.94 0.018 82);
  --muted: oklch(0.72 0.015 77);
  --faint: oklch(0.56 0.012 65);
  --line: oklch(0.78 0.012 75 / 16%);
  --gold: oklch(0.78 0.13 78);
  --gold-wash: color-mix(in oklch, var(--gold) 14%, transparent);
  --green: oklch(0.84 0.11 148);
  --red: oklch(0.7 0.16 31);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.site-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 clamp(18px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wordmark { font-weight: 760; letter-spacing: .06em; }
.head-divider { height: 14px; width: 1px; background: var(--line); }
.head-section { color: var(--muted); }
.home-link { margin-left: auto; color: var(--muted); letter-spacing: .06em; transition: color .18s; }
.home-link:hover, .home-link:focus-visible, .site-foot a:hover, .site-foot a:focus-visible { color: var(--text); }
.home-link span, .site-foot a span { margin-left: 5px; color: var(--gold); }

.game-shell { width: min(1280px, 100%); padding: 34px clamp(16px, 4vw, 52px) 0; margin: 0 auto; }
.intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 20px; padding-bottom: 25px; }
.eyebrow { margin: 0; color: var(--gold); font-size: 10px; font-weight: 720; letter-spacing: .17em; line-height: 1.4; text-transform: uppercase; }
.intro .eyebrow { grid-column: 1 / -1; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 600; }
h1 { margin-bottom: 0; font-size: clamp(39px, 5.8vw, 72px); letter-spacing: -.055em; line-height: .92; }
.dek { align-self: end; margin: 0 2px 2px 0; color: var(--muted); font-size: 14px; }

.game { border: 1px solid var(--line); background: var(--panel); }
.game-toolbar { min-height: 72px; display: grid; grid-template-columns: minmax(110px, 1fr) auto minmax(190px, 280px) auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.round-label { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; }
.round-index { grid-row: span 2; color: var(--text); font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 690; letter-spacing: -.04em; }
.round-index i { color: var(--faint); font-size: 12px; font-style: normal; font-weight: 450; }
.round-caption { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.album-picker-label { color: var(--muted); font-size: 11px; }
#album-picker { width: 100%; min-width: 0; height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 0; background: var(--panel-raised); color: var(--text); font-size: 13px; }
#album-picker:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#album-picker option:disabled { color: var(--faint); }
.control-button { min-height: 40px; display: inline-flex; justify-content: center; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--text); font-size: 12px; font-weight: 620; transition: border-color .16s, background .16s, color .16s; }
.control-button:hover:not(:disabled) { border-color: color-mix(in oklch, var(--gold) 68%, transparent); background: var(--gold-wash); }
.control-button:focus-visible, .next-round-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.control-button:disabled { opacity: .35; cursor: default; }

.score-row { min-height: 62px; display: grid; grid-template-columns: 150px 1fr 120px; align-items: center; gap: 16px; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.score-copy { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.score-number { color: var(--gold); font-size: 27px; font-weight: 740; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.score-total, .miss-count { color: var(--muted); font-size: 11px; }
.miss-count { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.progress-dots { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1vw, 12px); margin: 0; padding: 0; list-style: none; }
.progress-dots li { width: 10px; height: 10px; flex: 0 0 auto; border: 1px solid color-mix(in oklch, var(--text) 23%, transparent); border-radius: 50%; background: transparent; transition: background .18s, border-color .18s, transform .18s; }
.progress-dots li.found { border-color: var(--gold); background: var(--gold); transform: scale(1.08); }

.cover-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.cover-panel { min-width: 0; margin: 0; padding: 14px; background: var(--media); }
.cover-panel figcaption { display: flex; align-items: baseline; gap: 9px; margin: 0 auto 10px; max-width: 620px; }
.cover-label-number { color: var(--gold); font-size: 9px; font-weight: 740; letter-spacing: .12em; }
.cover-label-title { font-size: 12px; font-weight: 680; }
.cover-label-note { margin-left: auto; color: var(--faint); font-size: 10px; }
.artwork { position: relative; width: min(100%, 620px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; background: var(--panel-raised); cursor: crosshair; touch-action: manipulation; }
.artwork img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.artwork.has-difference-layer::after { content: ""; position: absolute; z-index: 1; inset: 0; background-image: var(--difference-layer); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.marker-layer { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.spot-target { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 2px; height: 2px; padding: 0; overflow: hidden; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; color: transparent; opacity: 0; pointer-events: none; }
.spot-target:focus-visible { width: 52px; height: 52px; opacity: 1; overflow: visible; outline: 2px dashed var(--text); outline-offset: 2px; background: color-mix(in oklch, var(--text) 18%, transparent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--bg) 78%, transparent); color: var(--text); }
.spot-target.found { z-index: 2; width: clamp(22px, 4.6vw, 42px); height: clamp(22px, 4.6vw, 42px); opacity: 1; overflow: visible; border: 2px solid var(--green); background: color-mix(in oklch, var(--green) 14%, transparent); color: var(--text); box-shadow: 0 0 0 2px color-mix(in oklch, var(--bg) 72%, transparent), 0 0 22px color-mix(in oklch, var(--green) 36%, transparent); pointer-events: none; }
.spot-target.found::after { content: "✓"; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--bg); font-size: 12px; font-weight: 900; }
.spot-target.found span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font-size: 12px; font-weight: 750; text-shadow: 0 1px 3px var(--bg); }
.miss-ping { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 38px; height: 38px; transform: translate(-50%, -50%); border: 2px solid var(--red); border-radius: 50%; animation: miss-ping .62s ease-out forwards; }
@keyframes miss-ping { from { opacity: .95; scale: .55; } to { opacity: 0; scale: 1.35; } }

.status-row { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.status-message { margin: 0; color: var(--text); font-size: 12px; }
.status-hint { color: var(--faint); font-size: 10px; text-align: right; }
.status-message.is-good { color: var(--green); }
.status-message.is-miss { color: var(--red); }
.game-controls { min-height: 55px; display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--line); }
.controls-spacer { flex: 1; }
.game-controls .next-button { border-color: color-mix(in oklch, var(--gold) 40%, transparent); color: var(--gold); }

.complete-panel { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px; border-top: 1px solid color-mix(in oklch, var(--green) 28%, transparent); background: linear-gradient(100deg, color-mix(in oklch, var(--green) 9%, transparent), color-mix(in oklch, var(--green) 2.5%, transparent)); }
.complete-panel[hidden] { display: none; }
.complete-panel h2 { margin: 3px 0 4px; font-size: 25px; letter-spacing: -.055em; }
.completion-summary { margin: 0; color: var(--muted); font-size: 12px; }
.next-round-button { flex: 0 0 auto; min-height: 42px; padding: 0 14px; border: 1px solid color-mix(in oklch, var(--green) 50%, transparent); border-radius: 2px; background: color-mix(in oklch, var(--green) 8%, transparent); color: var(--text); font-size: 12px; font-weight: 680; }
.next-round-button:hover { background: color-mix(in oklch, var(--green) 15%, transparent); }
.next-round-button span { margin-left: 7px; color: var(--green); }

.instructions { max-width: 780px; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.unavailable-details { max-width: 780px; margin: 12px 0 0; color: var(--faint); font-size: 11px; line-height: 1.6; }
.unavailable-details summary { width: fit-content; cursor: pointer; transition: color .18s; }
.unavailable-details summary:hover, .unavailable-details summary:focus-visible { color: var(--text); }
.unavailable-details ul { display: grid; gap: 7px; margin: 9px 0 0; padding-left: 18px; }
.unavailable-details strong { color: var(--muted); }
.site-foot { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding: 0 clamp(18px, 4vw, 52px); border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.site-foot a { color: var(--muted); transition: color .18s; }

@media (min-width: 1500px) {
  .game-shell { padding-right: 60px; padding-left: 60px; }
}

@media (max-width: 760px) {
  .site-head { min-height: 52px; padding-right: 16px; padding-left: 16px; }
  .game-shell { padding: 26px 12px 0; }
  .intro { grid-template-columns: 1fr; gap: 8px; padding: 0 4px 18px; }
  h1 { font-size: clamp(39px, 12vw, 54px); }
  .dek { margin: 2px 0 0; font-size: 13px; }
  .game-toolbar { grid-template-columns: minmax(82px, 1fr) minmax(140px, 2fr) auto; gap: 8px; padding: 10px; }
  .album-picker-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  #album-picker { grid-column: 2; height: 38px; font-size: 12px; }
  .round-index { font-size: 16px; }
  .round-caption { font-size: 9px; }
  .restart-button { grid-column: 3; min-height: 38px; padding: 0 9px; font-size: 11px; }
  .score-row { grid-template-columns: auto 1fr auto; gap: 9px; min-height: 54px; padding: 7px 10px; }
  .score-row { position: sticky; top: 0; z-index: 8; background: var(--panel); }
  .score-number { font-size: 24px; }
  .score-total, .miss-count { font-size: 10px; }
  .progress-dots { gap: clamp(4px, 1.4vw, 8px); }
  .progress-dots li { width: 7px; height: 7px; }
  .cover-board { grid-template-columns: 1fr; gap: 1px; }
  .cover-panel { padding: 12px; }
  .cover-panel figcaption { margin-bottom: 8px; }
  .artwork { width: min(100%, 620px); }
  .spot-target:focus-visible { width: 48px; height: 48px; }
  .status-row { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 8px 11px; }
  .status-hint { text-align: left; }
  .game-controls { min-height: 50px; padding: 7px 10px; }
  .complete-panel { align-items: flex-start; flex-direction: column; gap: 14px; padding: 15px 12px; }
  .instructions { margin: 14px 4px 0; font-size: 11px; }
  .site-foot { min-height: 58px; margin-top: 22px; padding-right: 16px; padding-left: 16px; font-size: 9px; }
}

@media (max-width: 380px) {
  .head-section, .head-divider { display: none; }
  .game-toolbar { grid-template-columns: 70px minmax(120px, 1fr) auto; }
  .round-index { font-size: 14px; }
  .restart-button { padding: 0 7px; }
  .progress-dots { gap: 4px; }
}

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