/* ==========================================================================
   SOUND BRIEF — stylesheet
   Plain CSS, no build step. Sections:
     1. Fonts            4. Start screen        7. Feedback panel
     2. Design tokens    5. Game layout         8. Result screen
     3. Base / reset     6. Music cards         9. Motion preferences
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------- */
/* Text uses the system UI font (see --font-sans below); only the monospace score digits use
   Geist Mono (SIL Open Font License, see fonts/OFL-LICENSE.txt), self-hosted. */

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}


/* 2. Design tokens -------------------------------------------------------- */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco,
    "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;

  --bg: #05060a;
  --brand-pink: #ff3d9a; /* the FX in FXCTRL (6.1:1 on --bg). Keep in step with BRAND_PINK in tools/build-guide.py */

  /* Type scale: nothing readable goes below --text-sm (14px). rem so browser text-size settings apply. */
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  /* Palette (Tailwind v4 colours): sRGB fallback first, wide-gamut lab() override below. */
  --white: #fff;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #9f9fa9;
  --zinc-500: #71717b;
  --zinc-600: #52525c;
  --zinc-950: #09090b;
  --amber-50: #fffbeb;
  --amber-300: #ffd236;
  --emerald-300: #5ee9b5;
  --emerald-400: #00d294;
  --cyan-300: #53eafd;
  --cyan-400: #00d2ef;
  --fuchsia-200: #f6cfff;
  --fuchsia-300: #f2a9ff;
  --fuchsia-400: #ec6cff;
  --fuchsia-500: #e12afb;
  --rose-50: #fff1f2;
  --rose-300: #ffa2ae;
  --rose-400: #ff667f;
  --rose-500: #ff2357;
  --ring: #a1a1a1;

  /* Panel fills: an accent colour mixed into this near-black. Strong enough to read as a colour, dark enough
     that light text on top keeps high contrast. Used to pull the eye to whatever the player should read now:
     cyan = the scene to read, fuchsia = what to do next, rose = a miss, amber = a tip, emerald = the answer. */
  --panel-base: var(--zinc-950);

  /* Radii */
  --r-lg: 0.625rem;
  --r-xl: calc(0.625rem + 4px);
  --r-2xl: 1rem;

  /* Line heights that pair with each font size */
  --lh-xs: calc(1 / 0.75);
  --lh-sm: calc(1.25 / 0.875);
  --lh-lg: calc(1.75 / 1.125);
  --lh-xl: calc(1.75 / 1.25);
  --lh-2xl: calc(2 / 1.5);
  --lh-3xl: calc(2.25 / 1.875);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@supports (color: lab(0% 0 0)) {
  :root {
    --zinc-200: lab(90.6853% 0.399232 -1.45452);
    --zinc-300: lab(84.9837% 0.601262 -2.17986);
    --zinc-400: lab(65.6464% 1.53497 -5.42429);
    --zinc-500: lab(47.8878% 1.65477 -5.77283);
    --zinc-600: lab(35.1166% 1.78212 -6.1173);
    --zinc-950: lab(2.51107% 0.242703 -0.886115);
    --amber-300: lab(86.4156% 6.13147 78.3961);
    --emerald-300: lab(83.9203% -48.7124 13.8849);
    --emerald-400: lab(75.0771% -60.7313 19.4147);
    --cyan-300: lab(85.3886% -36.7636 -21.5716);
    --cyan-400: lab(76.6045% -40.9406 -29.6231);
    --fuchsia-200: lab(87.7108% 19.9958 -18.2054);
    --fuchsia-300: lab(78.5378% 39.3533 -32.9615);
    --fuchsia-400: lab(66.1178% 66.0652 -52.4733);
    --fuchsia-500: lab(56.4256% 83.132 -64.639);
    --rose-300: lab(76.6339% 38.3549 9.68835);
    --rose-400: lab(64.4125% 63.0291 19.2068);
    --rose-500: lab(56.101% 79.4328 31.4532);
    --ring: lab(66.128% -0.0000298023 0.0000119209);
  }
}


/* 3. Base / reset --------------------------------------------------------- */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

* {
  /* focus rings: a soft grey rather than the browser default blue */
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
  font-size: inherit;
  font-weight: inherit;
}

strong {
  font-weight: bolder;
}

ul {
  list-style: none;
}

svg {
  display: block;
  vertical-align: middle;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
  opacity: 1;
  appearance: button;
}

/* Colour tokens that mix white at different strengths (borders, fills). */
:root {
  --white-5: color-mix(in oklab, var(--white) 5%, transparent);
  --white-10: color-mix(in oklab, var(--white) 10%, transparent);
  --white-15: color-mix(in oklab, var(--white) 15%, transparent);
  --white-20: color-mix(in oklab, var(--white) 20%, transparent);
  --white-30: color-mix(in oklab, var(--white) 30%, transparent);
  --white-40: color-mix(in oklab, var(--white) 40%, transparent);
  --white-80: color-mix(in oklab, var(--white) 80%, transparent);
}

/* Shared transition used by buttons (same property list as Tailwind's `transition`). */
.btn-neon,
.btn-sm,
.btn-wide {
  transition-property: color, background-color, border-color, outline-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale,
    rotate, filter, backdrop-filter;
  transition-timing-function: var(--ease);
  transition-duration: 0.15s;
}


/* 4. Screens and backdrop ------------------------------------------------- */

.screen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.backdrop__grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: linear-gradient(rgba(168, 85, 247, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.5) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.backdrop__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.25) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}

.content {
  position: relative;
  z-index: 10;
  padding: 2rem 1rem;
}

.content--game {
  max-width: 48rem;
  margin-inline: auto;
  padding: 1.5rem 1rem;
}


/* 4b. Start screen -------------------------------------------------------- */

.start {
  position: relative;
  margin-inline: auto;
  display: flex;
  min-height: 80vh;
  max-width: 42rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.start__glow {
  position: absolute;
  z-index: -10;
  border-radius: 9999px;
  filter: blur(64px);
}

.start__glow--violet {
  top: -2.5rem;
  left: 50%;
  height: 18rem;
  width: 18rem;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 70%);
}

.start__glow--teal {
  top: 5rem;
  left: 25%;
  height: 15rem;
  width: 15rem;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.25), transparent 70%);
}

.start__glow--rose {
  bottom: 0;
  right: 25%;
  height: 15rem;
  width: 15rem;
  background: radial-gradient(circle, rgba(251, 113, 133, 0.25), transparent 70%);
}

.start__eyebrow {
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
  line-height: var(--lh-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: color-mix(in oklab, var(--cyan-300) 80%, transparent);
}

.start__title {
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--white);
  text-shadow: 0 0 24px rgba(168, 85, 247, 0.6), 0 0 60px rgba(168, 85, 247, 0.3);
}

.start__title-accent {
  background-image: linear-gradient(
    to right,
    var(--fuchsia-400) 0%,
    var(--cyan-300) 50%,
    var(--amber-300) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Smoother gradient interpolation where supported (older browsers keep the plain one above) */
@supports (background-image: linear-gradient(in lab, red, red)) {
  .start__title-accent {
    background-image: linear-gradient(
      to right in oklab,
      var(--fuchsia-400) 0%,
      var(--cyan-300) 50%,
      var(--amber-300) 100%
    );
  }
}

.start__lede {
  margin-top: 1rem;
  max-width: 28rem;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--cyan-400) 50%, transparent);
  background: color-mix(in oklab, var(--cyan-400) 18%, var(--panel-base));
  padding: 0.625rem 1rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--zinc-200);
}

.how {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  color: var(--zinc-400);
}

.how__item {
  --tint: var(--cyan-400);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--tint) 50%, transparent);
  background: color-mix(in oklab, var(--tint) 18%, var(--panel-base));
  padding: 0.75rem;
}

.how__item:nth-child(2) {
  --tint: var(--fuchsia-500);
}

.how__item:nth-child(3) {
  --tint: var(--amber-300);
}

.how__icon {
  font-size: 1rem;
  line-height: 1.5;
}

.how__title {
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--white);
}

/* Big neon buttons (PRESS START / PLAY AGAIN) */
.btn-neon {
  border-radius: var(--r-xl);
  border: 2px solid var(--fuchsia-400);
  background: color-mix(in oklab, var(--fuchsia-500) 10%, transparent);
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--fuchsia-200);
}

.btn-neon--start {
  margin-top: 2.5rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 0 32px rgba(217, 70, 239, 0.4);
}

.btn-neon--again {
  margin-top: 1.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  box-shadow: 0 0 24px rgba(217, 70, 239, 0.3);
}

.start__stats {
  margin-top: 1.5rem;
  max-width: 28rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--white-15);
  background: color-mix(in oklab, var(--white) 8%, var(--panel-base));
  padding: 0.625rem 1rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  color: var(--zinc-300);
}

.start__stats > :not(:last-child) {
  margin-bottom: 0.25rem;
}

.stat-strong {
  color: var(--white);
}

.stat-best {
  font-family: var(--font-mono);
  color: var(--amber-300);
}

.link-btn {
  padding-top: 0.25rem;
  color: var(--zinc-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.start__hint {
  margin-top: 1.5rem;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--zinc-400);
}


/* 5. Game layout ---------------------------------------------------------- */

.scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: var(--r-xl);
  border: 1px solid var(--white-15);
  background: color-mix(in oklab, var(--zinc-950) 70%, transparent);
  padding: 0.75rem 1rem;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.scoreboard__group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.scoreboard__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.scoreboard__label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--zinc-400);
}

.scoreboard__round {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 700;
  color: var(--white);
}

.scoreboard__round-total {
  color: var(--zinc-400);
}

.scoreboard__dots {
  display: flex;
  gap: 0.375rem;
}

.scoreboard__dot {
  height: 0.375rem;
  width: 1.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
}

.scoreboard__dot--done {
  background: #34d399;
}

.scoreboard__dot--current {
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}

.combo {
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: var(--text-sm);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #fbbf2422;
  color: #fbbf24;
  border: 1px solid #fbbf2455;
}

.scoreboard__score {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 900;
  color: var(--amber-300);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.game-grid {
  margin-top: 1.25rem;
  display: grid;
  gap: 1.25rem;
}

.scene-head {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.badge {
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--fuchsia-400) 40%, transparent);
  background: color-mix(in oklab, var(--fuchsia-500) 10%, transparent);
  padding: 0.125rem 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fuchsia-300);
}

.scene-head__hint {
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  color: var(--zinc-400);
}

.scene {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-xl);
  aspect-ratio: 16 / 9;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 48px -22px rgba(0, 0, 0, 0.9);
}

.scene svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

/* The scene's title + cue: the text to read while choosing. Cyan while you choose, then it relaxes to a
   neutral lift once the answer is showing, so the eye moves on to the feedback. */
.scene-brief {
  margin-top: 0.75rem;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--cyan-400) 55%, transparent);
  background: color-mix(in oklab, var(--cyan-400) 20%, var(--panel-base));
  padding: 0.75rem 1rem;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.scene-brief--done {
  border-color: var(--white-15);
  background: color-mix(in oklab, var(--white) 7%, var(--panel-base));
}

.scene-title {
  font-size: 1.75rem;
  line-height: var(--lh-2xl);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--white);
}

.scene-text {
  margin-top: 0.25rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--zinc-200);
}

.options-head {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The instruction for this step ("Pick the track" / "Try again"), as a filled pill so it reads as the call to act. */
.options-head__title {
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--fuchsia-400) 65%, transparent);
  background: color-mix(in oklab, var(--fuchsia-500) 30%, var(--panel-base));
  padding: 0.25rem 0.875rem;
  font-size: var(--text-sm);
  line-height: var(--lh-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fuchsia-200);
}

.options-head__title--retry {
  border-color: color-mix(in oklab, var(--amber-300) 65%, transparent);
  background: color-mix(in oklab, var(--amber-300) 24%, var(--panel-base));
  color: var(--amber-50);
}

.options-head__hint {
  font-size: var(--text-sm);
  color: var(--zinc-400);
}

.options-grid {
  display: grid;
  gap: 0.75rem;
}

.revealed-grid {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.footer {
  margin-top: 2.5rem;
  padding-bottom: 1.5rem;
  text-align: center;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--zinc-400);
}

/* Callout boxes: first-miss notice, "why not", "why it works", pro tip, result takeaways */
.callout {
  border-radius: var(--r-lg);
  border: 1px solid;
  padding: 0.75rem;
}

.callout__label {
  margin-bottom: 0.25rem;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.callout__text {
  font-size: var(--text-lg);
  line-height: 1.625;
}

.callout--miss {
  margin-bottom: 0.75rem;
  border-color: color-mix(in oklab, var(--rose-400) 65%, transparent);
  background: color-mix(in oklab, var(--rose-500) 26%, var(--panel-base));
}

.callout--miss .callout__label,
.callout--why-not .callout__label {
  color: var(--rose-300);
}

.callout--miss .callout__text,
.callout--why-not .callout__text {
  color: var(--rose-50);
}

.callout__hint {
  margin-top: 0.5rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  color: var(--zinc-300);
}

.callout--why-not {
  margin-bottom: 1rem;
  border-color: color-mix(in oklab, var(--rose-400) 60%, transparent);
  background: color-mix(in oklab, var(--rose-500) 24%, var(--panel-base));
}

/* Secondary reading (the mood's description + dials): a neutral lift rather than pure black, no colour. */
.callout--works {
  margin-bottom: 1rem;
  border-color: var(--white-15);
  background: color-mix(in oklab, var(--white) 8%, var(--panel-base));
}

.callout--works .callout__label {
  color: var(--zinc-300);
}

.callout--works .callout__text {
  color: var(--zinc-200);
}

.callout--tip {
  margin-bottom: 1rem;
  border-color: color-mix(in oklab, var(--amber-300) 60%, transparent);
  background: color-mix(in oklab, var(--amber-300) 20%, var(--panel-base));
}

.callout--tip .callout__label {
  color: var(--amber-300);
}

.callout--tip .callout__text {
  color: var(--amber-50);
}


/* 6. Music option cards --------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: var(--r-xl);
  border: 2px solid var(--white-15);
  background: color-mix(in oklab, var(--zinc-950) 70%, transparent);
  padding: 1rem;
  transition: all 0.2s var(--ease);
  /* box-shadow (glow) is set inline: its colour depends on the mood */
}

.card--playing {
  border-color: var(--white-80);
  background: color-mix(in oklab, var(--white) 10%, var(--panel-base));
}

.card--correct {
  border-color: var(--emerald-400);
  background: color-mix(in oklab, var(--emerald-400) 18%, var(--panel-base));
}

.card--wrong {
  border-color: var(--rose-500);
  background: color-mix(in oklab, var(--rose-500) 14%, var(--panel-base));
}

.card--dim {
  opacity: 0.6;
}

/* equalizer: bar colour / height / opacity / animation are set inline per bar */
.eq {
  display: flex;
  height: 2.5rem;
  align-items: flex-end;
  gap: 0.25rem;
}

.eq-bar {
  flex: 1;
  border-radius: 0.25rem 0.25rem 0 0;
  transform-origin: bottom;
  transition: opacity 0.2s;
}

.card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.card__who {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

.card__emoji {
  font-size: 1.5rem;
  line-height: var(--lh-2xl);
}

.card__text {
  min-width: 0;
}

.card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--mood); /* set inline per card: the mood's colour, or neutral while the card is still blind */
}

/* A mood's name inside a sentence or a tinted panel. The mood colour is lightened a touch so even the darkest
   one (Aggressive's red) stays readable on the coloured fills. */
.mood-name {
  color: color-mix(in oklab, var(--mood) 78%, white);
}

.card__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--zinc-400);
}

.card--correct .card__sub,
.card--wrong .card__sub {
  color: var(--zinc-300);
}

/* The right answer's name (e.g. NOSTALGIC): on a chip in its own colour, and it fades softly between 75% and
   100% opacity for as long as the answer is showing, whether the player got it right or not. The text is the
   mood colour lightened toward white so it stays readable even at the 75% end of the fade. */
.card--correct .card__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--mood) 60%, transparent);
  background: color-mix(in oklab, var(--mood) 22%, var(--panel-base));
  color: color-mix(in oklab, var(--mood) 45%, white);
  padding-inline: 0.75rem;
  animation: answer-fade 2s ease-in-out infinite alternate;
}

.card__mark {
  font-size: 1.25rem;
  line-height: var(--lh-xl);
}

.card__mark--ok {
  color: var(--emerald-400);
}

.card__mark--bad {
  color: var(--rose-500);
}

.card__actions {
  display: flex;
  gap: 0.5rem;
}

.btn-sm {
  flex: 1;
  border-radius: var(--r-lg);
  border: 1px solid;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  min-height: 2.75rem;
}

.btn-preview {
  border-color: var(--white-15);
  background: var(--white-5);
  font-weight: 600;
}

.btn-match {
  border-color: var(--white-30);
  background: var(--white-10);
  font-weight: 700;
  color: var(--white);
}

/* Once a track has been heard, its MATCH button lights up in the game's action colour; "LISTEN FIRST" stays grey. */
.btn-match:not(:disabled) {
  border-color: var(--fuchsia-400);
  background: color-mix(in oklab, var(--fuchsia-500) 32%, var(--panel-base));
  box-shadow: 0 0 14px color-mix(in oklab, var(--fuchsia-500) 35%, transparent);
}

.btn-match:disabled {
  cursor: not-allowed;
  border-color: var(--white-10);
  background: var(--white-5);
  color: var(--zinc-400);
}


/* 7. Feedback panel ------------------------------------------------------- */

.feedback {
  border-radius: var(--r-xl);
  border: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, rgb(9 9 12 / 0.92));
  padding: 1.25rem;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.feedback--first {
  --accent: #34d399;
  box-shadow: 0 0 32px rgba(52, 211, 153, 0.35), inset 0 0 24px rgba(52, 211, 153, 0.08);
}

.feedback--recovered {
  --accent: #fbbf24;
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.3), inset 0 0 24px rgba(251, 191, 36, 0.07);
}

.feedback--missed {
  --accent: #fb7185;
  box-shadow: 0 0 32px rgba(251, 113, 133, 0.35), inset 0 0 24px rgba(251, 113, 133, 0.08);
}

.feedback__top {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.feedback__badge {
  border-radius: 9999px;
  background: var(--accent);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #0a0a0a;
}

.feedback__points {
  font-size: 1.125rem;
  line-height: var(--lh-lg);
  font-weight: 700;
  color: var(--accent);
}

.feedback__note {
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  color: var(--amber-300);
}

.feedback__picked {
  margin-bottom: 0.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--white-20);
  background: color-mix(in oklab, var(--white) 10%, var(--panel-base));
  padding: 0.625rem 0.75rem;
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  color: var(--zinc-200);
}

.dials {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  border-top: 1px solid var(--white-10);
  padding-top: 0.75rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
}

.dials dt {
  color: var(--zinc-400);
}

.dials dd {
  color: var(--zinc-200);
}

.feedback__hint {
  margin-bottom: 0.75rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  color: var(--zinc-400);
}

.btn-wide {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent, var(--white-30));
  background: color-mix(in oklab, var(--accent, var(--white)) 28%, var(--panel-base));
  padding: 0.75rem 1rem;
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--white);
}


/* 8. Result screen -------------------------------------------------------- */

.result {
  margin-inline: auto;
  max-width: 42rem;
  padding-block: 2rem;
}

.result__card {
  border-radius: var(--r-2xl);
  border: 2px solid;
  background: rgba(9, 9, 12, 0.85);
  padding: 2rem;
  text-align: center;
  /* border-color / box-shadow are set inline from the rank colour */
}

.result__new-best {
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
  line-height: var(--lh-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--emerald-300);
}

.result__label {
  font-size: var(--text-sm);
  line-height: var(--lh-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--zinc-400);
}

.result__score {
  margin-block: 0.75rem;
  font-family: var(--font-mono);
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 900;
}

.result__summary {
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  color: var(--zinc-400);
}

.result__title {
  margin-top: 1.5rem;
  font-size: 1.875rem;
  line-height: var(--lh-3xl);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.result__subtitle {
  margin-top: 0.5rem;
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  color: var(--zinc-300);
}

.rounds {
  margin-top: 1.5rem;
}

.rounds > :not(:last-child) {
  margin-bottom: 0.5rem;
}

.rounds__title {
  font-size: var(--text-sm);
  line-height: var(--lh-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--zinc-400);
}

.round-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--white-10);
  background: var(--white-5);
  padding: 0.75rem 1rem;
}

/* Result rows are tinted by outcome so the misses stand out at a glance. */
.round-row--ok {
  border-color: color-mix(in oklab, var(--emerald-400) 40%, transparent);
  background: color-mix(in oklab, var(--emerald-400) 12%, var(--panel-base));
}

.round-row--half {
  border-color: color-mix(in oklab, var(--amber-300) 45%, transparent);
  background: color-mix(in oklab, var(--amber-300) 12%, var(--panel-base));
}

.round-row--bad {
  border-color: color-mix(in oklab, var(--rose-500) 55%, transparent);
  background: color-mix(in oklab, var(--rose-500) 18%, var(--panel-base));
}

.round-row__left {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.round-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: var(--lh-xs);
  color: var(--zinc-400);
}

.round-row__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--white);
}

.round-row__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-md);
  line-height: var(--lh-xs);
}

.round-row__arrow {
  color: var(--zinc-400);
}

.mark--ok {
  color: var(--emerald-400);
}

.mark--half {
  color: var(--amber-300);
}

.mark--bad {
  color: var(--rose-500);
}

.takeaways {
  margin-top: 1.5rem;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in oklab, var(--cyan-400) 55%, transparent);
  background: color-mix(in oklab, var(--cyan-400) 18%, var(--panel-base));
  padding: 1.25rem;
}

.takeaways__label {
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
  line-height: var(--lh-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan-300);
}

.takeaways__list,
.takeaways__text {
  font-size: var(--text-lg);
  line-height: var(--lh-sm);
  color: var(--zinc-200);
}

.takeaways__list > :not(:last-child) {
  margin-bottom: 0.75rem;
}


/* Hover effects only on devices that can hover (so touch screens don't get stuck states) */
@media (hover: hover) {
  .btn-neon--start:hover {
    background: color-mix(in oklab, var(--fuchsia-500) 20%, transparent);
    scale: 105%;
  }

  .btn-neon--again:hover {
    background: color-mix(in oklab, var(--fuchsia-500) 20%, transparent);
  }

  .link-btn:hover {
    color: var(--zinc-300);
  }

  .card--selectable:hover {
    translate: 0 -0.125rem;
    border-color: var(--white-40);
  }

  .btn-preview:hover {
    background: var(--white-10);
  }

  .btn-match:not(:disabled):hover {
    background: color-mix(in oklab, var(--fuchsia-500) 48%, var(--panel-base));
  }

  .btn-wide:hover {
    background: color-mix(in oklab, var(--accent, var(--white)) 42%, var(--panel-base));
  }
}


/* Responsive */
@media (min-width: 40rem) {
  .start__title {
    font-size: 6rem;
    line-height: 1;
  }

  .revealed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .game-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}


/* 9. Motion --------------------------------------------------------------- */

/* Equalizer bars on the music option cards (only animated while a track plays) */
@keyframes eq {
  0% {
    transform: scaleY(0.3);
  }
  100% {
    transform: scaleY(1);
  }
}

/* The right answer's name: a soft, slow fade between 75% and 100% opacity (one direction takes 2s, so it
   never pulses faster than about once every 4s). */
@keyframes answer-fade {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eq-bar,
  .card--correct .card__name {
    animation: none !important;
  }
}

/* Phone scoreboard: the progress dots shrink instead of pushing the score off a 390px screen. */
.scoreboard__group,
.scoreboard__right {
  flex-shrink: 0;
}
.scoreboard__dots {
  flex: 1 1 auto;
  min-width: 0;
}
.scoreboard__dot {
  flex: 1 1 0;
  width: auto;
  min-width: 0.25rem;
  max-width: 1.5rem;
}

/* Ending: next skill + call to action */
.next p {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}
.next__progress {
  font-weight: 600;
}
.next__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.next__btn {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid var(--white-15);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.next__btn--primary {
  border-color: #5eead4;
  color: #5eead4;
}
.footer a {
  color: inherit;
}

/* Brand name: FX in pink, CTRL in white. Built by brandName() in js/views.js. */
.brand {
  color: var(--white);
}
.brand__fx {
  color: var(--brand-pink);
}

/* Cinematic finish over every scene: vignette + film grain as static layers, so animated art underneath stays cheap. */
.scene::before,
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene::before {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.scene::after {
  background: url("data:image/png;base64,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");
  opacity: 0.07;
  mix-blend-mode: overlay;
}


/* 10. Shorter-text additions: "Why?" toggles, mood map, bigger step titles ------------------ */

.how__title { font-size: var(--text-lg); }

.more > summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.875rem;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--cyan-400) 50%, transparent);
  background: color-mix(in oklab, var(--cyan-400) 16%, var(--panel-base));
  cursor: pointer;
  list-style: none;
  font-size: var(--text-md);
  color: var(--cyan-300);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "▸"; margin-right: 0.5rem; transition: transform 0.15s; }
.more[open] > summary::before { transform: rotate(90deg); }
.more > :not(summary) { margin-top: 0.75rem; }
.feedback > .more { margin-bottom: 0.75rem; }

.mood-map {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5rem;
  margin-block: 0.75rem;
}
/* Axes: an arrow chip at each end (up/right = more, down/left = less) and the axis name between them. */
.mood-map__y {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
}
.mood-map__x {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.axis-name {
  border-radius: 9999px;
  border: 1px solid var(--white-20);
  background: color-mix(in oklab, var(--white) 10%, var(--panel-base));
  padding: 0.125rem 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--zinc-200);
}
.mood-map__y .axis-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 0.75rem 0.125rem;
}
.axis-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--cyan-400) 60%, transparent);
  background: color-mix(in oklab, var(--cyan-400) 24%, var(--panel-base));
  color: var(--cyan-300);
}
.axis-arrow svg { width: 1rem; height: 1rem; }
.axis-arrow--down svg { transform: rotate(180deg); }
.axis-arrow--right svg { transform: rotate(90deg); }
.axis-arrow--left svg { transform: rotate(-90deg); }
.mood-map__plot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--white-20);
  background:
    linear-gradient(var(--white-10) 1px, transparent 1px) 0 0 / 100% 20%,
    linear-gradient(90deg, var(--white-10) 1px, transparent 1px) 0 0 / 20% 100%,
    color-mix(in oklab, var(--white) 6%, var(--panel-base));
}
.mood-map__dot {
  position: absolute;
  transform: translate(-50%, 50%);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--zinc-400);
}
.mood-map__dot b {
  position: absolute;
  top: -0.5rem;
  right: -0.375rem;
  font-size: var(--text-sm);
  line-height: 1;
}
.mood-map__dot--other { opacity: 0.6; }
.mood-map__dot--correct { z-index: 2; border-color: var(--emerald-400); box-shadow: 0 0 14px var(--emerald-400); }
.mood-map__dot--correct b { color: var(--emerald-300); }
.mood-map__dot--picked { z-index: 1; border-color: var(--rose-400); }
.mood-map__dot--picked b { color: var(--rose-300); }


/* 11. Advert framing: brand end-line strip, the brief, "often heard in" ------------------ */

/* The picture and its end-line strip read as one piece of footage, like a TV end super. */
.ad-frame {
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: 0 18px 48px -22px rgba(0, 0, 0, 0.9);
}

.ad-frame .scene {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.ad-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: color-mix(in oklab, var(--white) 7%, var(--panel-base));
  padding: 0.5rem 0.75rem;
}

.ad-strip__bug {
  align-self: center;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in oklab, var(--fuchsia-400) 60%, transparent);
  padding: 0 0.375rem;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--fuchsia-300);
}

.ad-strip__brand {
  font-size: var(--text-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
}

.ad-strip__tag {
  font-size: var(--text-md);
  font-style: italic;
  color: var(--zinc-300);
}

/* The creative brief: what the advert has to achieve. Sits in the same panel as the cue. */
.ad-goal {
  margin-top: 0.625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 0.625rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--zinc-200);
}

.ad-goal__label {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber-300);
}

.callout__extra {
  margin-top: 0.5rem;
}

.start__who {
  margin-top: 1.25rem;
  max-width: 28rem;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--zinc-400);
}

/* Phones: round, combo and score can't share one line with the progress dots, so the dots take their own row. */
@media (max-width: 30rem) {
  .scoreboard {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .scoreboard__dots {
    order: 3;
    flex: 1 1 100%;
  }
  .scoreboard__dot {
    max-width: none;
  }
}

.sources-note {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--zinc-400);
}