/* Couples Queries, on the Crux site tokens (styles.css).
 *
 * Studio cream: the warm Crux ground with faint sunburst rays, Crux red as
 * the one dominant colour (title, curtain, A's podium), honey gold for the
 * marquee bulbs and the score, deep teal for B's podium, olive green for a
 * match. Bagel Fat One is the display face for the title and the score only.
 * Buttons are the chunky press-down kind: a solid bottom edge that the
 * button sinks into on press. Every transform-based motion sits behind
 * prefers-reduced-motion: no-preference. */

@font-face {
  font-family: 'Bagel Fat One';
  src: url('/assets/fonts/bagel-fat-one.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.cq-page {
  --show: 'Bagel Fat One', 'Space Grotesk', 'Avenir Next', sans-serif;
  --a: #e4002b;
  --a-edge: #9e001e;
  --b: #0f6b6e;
  --b-edge: #084446;
  --gold: #e8b84a;
  --gold-edge: #b8862b;
  --gold-ink: #171310;
  --match: var(--green);
  --match-fill: #4a7c3e;
  --card-bg: #fffdf9;
  --edge-quiet: #d9d3c8;
  --rays: rgba(228, 0, 43, 0.025);
  --me: var(--a);
  --me-edge: var(--a-edge);
  --verdict-match: #2f6d26;
  --verdict-close: #e6b23e;
  --floor: rgba(120, 72, 20, 0.16);
  --peak-glow: rgba(255, 236, 170, 0.5);
  --hero-glow: rgba(224, 169, 46, 0.22);
  --peak-rays: rgba(232, 184, 74, 0.2);
  /* What sits above the stage: the header and the page's top padding. */
  --above: 112px;
}

:root[data-theme='dark'] .cq-page {
  --card-bg: #1c1c1c;
  --edge-quiet: #333;
  --rays: rgba(224, 169, 46, 0.035);
  --match-fill: #4a7c3e;
  --floor: rgba(0, 0, 0, 0.55);
  --peak-glow: rgba(224, 169, 46, 0.16);
  --hero-glow: rgba(224, 169, 46, 0.15);
  --peak-rays: rgba(224, 169, 46, 0.1);
}

.cq-page {
  background:
    repeating-conic-gradient(from 0deg at 50% -10%, var(--rays) 0deg 6deg, transparent 6deg 14deg),
    radial-gradient(70rem 40rem at 50% -14rem, var(--glow-red), transparent 70%),
    var(--grain),
    var(--bg);
  min-height: 100vh;
}

.cq-header {
  position: relative;
  z-index: 2;
}

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

.cq-nav a {
  font-weight: 700;
  font-size: 15px;
}

.cq-main {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 18px 64px;
  outline: none;
}

/* Game screens fill the phone exactly, so nothing scrolls under a thumb. */
[data-screen='play'] .cq-main,
[data-screen='card'] .cq-main,
[data-screen='reveal'] .cq-main {
  padding-bottom: 18px;
}

.cq-stage-bg {
  position: absolute;
  inset: -40px 0 auto;
  height: 520px;
  overflow: hidden;
  pointer-events: none;
}

.cq-sway {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 360px;
  height: 560px;
  margin-left: -180px;
  background: linear-gradient(180deg, var(--glow-gold), transparent 80%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  opacity: 0.9;
}

.cq-screen {
  position: relative;
  z-index: 1;
}

/* --- chunky buttons --- */

.chunk {
  --face: var(--raised);
  --ink: var(--text);
  --edge: var(--edge-quiet);
  position: relative;
  display: inline-flex;
  min-height: 52px;
  padding: 12px 20px;
  border: 2px solid var(--edge);
  border-radius: 16px;
  background: var(--face);
  box-shadow: 0 6px 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  user-select: none;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 90ms ease, color 120ms ease;
}

.chunk:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(5px);
}

.chunk:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Busy (sealing, sending): stays solid, the podiums above it move. */
.chunk.is-busy:disabled {
  opacity: 0.85;
}

.chunk-red {
  --face: var(--a);
  --ink: #fff;
  --edge: var(--a-edge);
}

.chunk-red:hover:not(:disabled) {
  --face: #d1002a;
}

.chunk-teal {
  --face: var(--b);
  --ink: #fff;
  --edge: var(--b-edge);
}

.chunk-gold {
  --face: var(--gold);
  --ink: var(--gold-ink);
  --edge: var(--gold-edge);
}

.chunk-quiet:hover:not(:disabled) {
  --edge: var(--line-strong);
}

.cq-link-btn {
  min-height: 44px;
  padding: 10px 6px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

/* --- home --- */

.cq-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cq-marquee {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 18px 0 6px;
}

.cq-marquee i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(232, 184, 74, 0.7);
}

.cq-title {
  margin: 4px 0 6px;
  color: var(--red-display);
  font-family: var(--show);
  font-size: clamp(44px, 13vw, 76px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
}

.cq-tagline {
  max-width: 30ch;
  margin: 6px 0 4px;
  color: var(--text-dim);
  font-size: 17px;
  font-weight: 500;
}

.cq-edition {
  display: inline-block;
  margin: 10px 0 18px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.card-chunk {
  border: 2px solid var(--line);
  border-radius: 24px;
  background: var(--card-bg);
  box-shadow: 0 6px 0 var(--edge-quiet), var(--shadow-card);
}

.cq-setup {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 18px;
  padding: 22px 18px 16px;
  text-align: left;
}

.cq-seg-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.cq-label {
  margin: 0 0 8px;
  padding: 0;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cq-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cq-seg-btn {
  --face: var(--raised);
  --ink: var(--text);
  --edge: var(--edge-quiet);
  min-height: 50px;
  border: 2px solid var(--edge);
  border-radius: 14px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--edge);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.cq-seg-btn[aria-pressed='true'] {
  --face: var(--red-tint);
  --edge: var(--a);
  color: var(--red);
}

.cq-seg-btn:active {
  box-shadow: 0 1px 0 var(--edge);
  transform: translateY(3px);
}

.cq-hint {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

.cq-names {
  display: grid;
  gap: 12px;
}

.cq-field {
  display: grid;
  gap: 6px;
}

.cq-field-label {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cq-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cq-field input {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  background: var(--inset);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 500;
}

.cq-field input::placeholder {
  color: var(--text-faint);
}

.cq-field input:focus-visible {
  border-color: var(--focus);
  outline: none;
}

.cq-initial {
  display: inline-grid;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--a);
  color: #fff;
  font-family: var(--show);
  font-size: 18px;
  place-items: center;
}

.cq-initial-b,
[data-turn='b'] > .cq-initial {
  background: var(--b);
}

.cq-start {
  overflow: hidden;
  width: 100%;
  min-height: 60px;
  font-size: 19px;
}

.cq-error {
  margin: 0;
  color: var(--red);
  font-weight: 700;
}

.cq-pairs,
.cq-packs {
  width: 100%;
  margin: 8px 0 22px;
  text-align: left;
}

.cq-packs {
  margin-top: 28px;
}

.cq-pair-list,
.cq-pack-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.cq-pack-list {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.cq-pair-btn,
.cq-pack-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.cq-pack-btn {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 76px;
}

.cq-pack-btn[aria-pressed='true'] {
  --edge: var(--a);
}

.cq-pack-blurb {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
}

/* --- play --- */

.cq-play {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: min(calc(100svh - var(--above)), 760px);
  padding-top: 14px;
}

.cq-play[hidden] {
  display: none;
}

.cq-play[data-turn='b'] {
  --me: var(--b);
  --me-edge: var(--b-edge);
}

.cq-play-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cq-progress {
  position: relative;
  flex: 1;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-hi);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
}

.cq-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4%;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  transform-origin: 0 50%;
}

.cq-progress-fill::after {
  position: absolute;
  top: 3px;
  right: 8px;
  left: 8px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  content: '';
}

.cq-streak-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 3px 0 var(--gold-edge);
  color: var(--gold-ink);
  font-size: 14px;
  font-weight: 700;
}

.cq-streak-chip::before {
  width: 12px;
  height: 15px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 75%, #ffe08a 0 30%, #e4002b 32% 100%);
  content: '';
  transform: rotate(-8deg);
}

.cq-turn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
}

.cq-qcard {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 18px 22px;
  border-top: 6px solid var(--me);
}

.cq-qnum {
  order: 0;
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cq-step {
  order: 1;
  align-self: flex-start;
  margin: 10px 0 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--me);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.cq-step[data-step='guess'] {
  background: var(--gold);
  color: var(--gold-ink);
}

.cq-qtext {
  order: 2;
  margin: auto 0;
  padding: 18px 0 22px;
  font-size: clamp(26px, 7.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Four or five options: the question gives them the room. */
[data-kind='pick'] .cq-qtext,
[data-kind='number'] .cq-qtext,
[data-kind='top2'] .cq-qtext {
  padding: 8px 0 16px;
  font-size: clamp(24px, 6.8vw, 31px);
}

[data-kind='number'] .cq-options,
[data-kind='top2'] .cq-options {
  gap: 10px;
}

[data-kind='number'] .cq-opt,
[data-kind='top2'] .cq-opt {
  min-height: 54px;
}

.cq-qtext:focus {
  outline: none;
}

/* On the guess the partner's name is the point of the question: it wears
 * their colour, so the card reads "about Sam" at a glance. */
.cq-qname {
  color: var(--b);
}

[data-turn='b'] .cq-qname {
  color: var(--a);
}

.cq-pick-two {
  order: 3;
  margin: -10px 0 12px;
  color: var(--text-dim);
  font-weight: 500;
}

.cq-options {
  display: grid;
  order: 4;
  gap: 12px;
}

[data-kind='either'] .cq-options,
[data-kind='who'] .cq-options {
  grid-template-columns: 1fr 1fr;
}

/* The lock button sits first in the DOM so it is reached before five options
   on keyboard, and shows under them. */
.cq-lock {
  order: 5;
  margin-top: 16px;
  min-height: 56px;
}

.cq-opt {
  justify-content: flex-start;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  text-align: left;
}

[data-kind='either'] .cq-opt,
[data-kind='who'] .cq-opt {
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  font-size: 22px;
  text-align: center;
}

.cq-opt-key {
  display: inline-grid;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  place-items: center;
}

.cq-opt[aria-pressed='true'] {
  --face: var(--me);
  --ink: #fff;
  --edge: var(--me-edge);
}

.cq-opt[aria-pressed='true'] .cq-opt-key {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.cq-opt:disabled {
  opacity: 0.45;
}

.cq-opt.is-picked,
.cq-opt[aria-pressed='true']:disabled {
  opacity: 1;
}

.cq-play-foot {
  display: flex;
  min-height: 54px;
  justify-content: center;
}

.cq-swap {
  min-height: 48px;
  font-size: 15px;
}

/* --- curtain --- */

.cq-curtain {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: var(--a);
  color: #fff;
  place-items: center;
}

.cq-curtain[hidden] {
  display: none;
}

.cq-curtain-cloth {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 22%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 6px, transparent 6px 34px, rgba(255, 255, 255, 0.08) 34px 40px, transparent 40px 64px),
    var(--a);
}

.cq-curtain-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  padding: 24px;
  text-align: center;
}

.cq-curtain-title {
  margin: 8px 0 8px;
  color: #fff;
  font-family: var(--show);
  font-size: clamp(42px, 12vw, 64px);
  font-weight: 400;
  line-height: 1;
}

.cq-curtain-sub {
  margin: 0 0 26px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

.cq-hold {
  position: relative;
  display: grid;
  width: 168px;
  height: 168px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fffdf9;
  box-shadow: 0 7px 0 var(--a-edge), 0 18px 40px rgba(0, 0, 0, 0.25);
  color: #8f001b;
  cursor: pointer;
  place-items: center;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cq-hold.is-holding {
  box-shadow: 0 2px 0 var(--a-edge), 0 10px 26px rgba(0, 0, 0, 0.25);
}

.cq-hold-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cq-hold-ring circle {
  fill: none;
  stroke-width: 9;
}

.cq-hold-track {
  stroke: rgba(228, 0, 43, 0.14);
}

.cq-hold-fill {
  stroke: var(--gold);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 180ms ease-out;
}

.cq-hold.is-holding .cq-hold-fill {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 600ms linear;
}

.cq-hold-label {
  position: relative;
  max-width: 120px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.cq-curtain-hint {
  min-height: 1.5em;
  margin: 18px 0 0;
  color: #fff;
  font-weight: 700;
}

/* --- cards: send, waiting, invite, errors --- */

/* A card fills the phone like a game screen: the two podiums are the hero
   in their own spotlight, the words under them, the action at the bottom. */
.cq-card-screen {
  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - var(--above)), 720px);
  padding-top: 14px;
}

.cq-card-screen[hidden] {
  display: none;
}

.cq-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 20px 22px;
  text-align: center;
}

.cq-podium-pair {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 170px;
  width: 100%;
}

.cq-podium-pair::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 200px;
  margin: -100px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-glow), transparent);
  content: '';
  scale: 1.6;
}

/* The floor the two podiums stand on. */
.cq-podium-pair::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 230px;
  height: 30px;
  margin: 40px 0 0 -115px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--floor), transparent);
  content: '';
}

.cq-podium-pair > * {
  position: relative;
}

.cq-mini-podium {
  display: grid;
  width: 82px;
  height: 92px;
  border-radius: 18px 18px 10px 10px;
  background: var(--a);
  box-shadow: 0 7px 0 var(--a-edge);
  color: #fff;
  font-family: var(--show);
  font-size: 40px;
  place-items: center;
}

.cq-mini-podium.b {
  background: var(--b);
  box-shadow: 0 7px 0 var(--b-edge);
}

.cq-heart {
  width: 18px;
  height: 18px;
  scale: 1.4;
  background: var(--a);
  clip-path: path('M9 17 L1.5 9.5 A4.6 4.6 0 0 1 9 3.6 A4.6 4.6 0 0 1 16.5 9.5 Z');
}

.cq-card-title {
  text-wrap: balance;
  margin: 10px 0 0;
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.15;
}

.cq-card-title:focus {
  outline: none;
}

.cq-card-sub {
  max-width: 34ch;
  margin: 0;
  color: var(--text-dim);
  font-weight: 500;
}

.cq-card .cq-field {
  width: 100%;
  text-align: left;
}

.cq-card-actions {
  display: grid;
  width: 100%;
  gap: 12px;
  margin-top: 10px;
}

/* An ended round: the heart goes quiet. */
.cq-card-screen[data-tone='quiet'] .cq-heart {
  background: var(--line-strong);
}

.cq-card-actions:empty {
  display: none;
}

.cq-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--green);
  font-weight: 700;
}

.cq-status[data-tone='warn'] {
  color: var(--amber);
}

/* --- the reveal --- */

.cq-reveal {
  padding-top: 8px;
}

.cq-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: max(460px, min(calc(100svh - var(--above)), 780px));
  overflow: hidden;
  padding: 12px 0 18px;
  cursor: pointer;
  user-select: none;
}

.cq-counter {
  margin: 0;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-edge);
  color: var(--gold-ink);
  font-family: var(--show);
  font-size: 22px;
  font-weight: 400;
}

.cq-chip-slot {
  display: grid;
  flex: 1;
  min-height: 120px;
  width: 100%;
  padding: 14px 4px 18px;
  place-items: center;
}

.cq-qchip {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 18px 20px 20px;
  border: 2px solid var(--edge-quiet);
  border-radius: 22px;
  background: var(--card-bg);
  box-shadow: 0 6px 0 var(--edge-quiet);
  font-size: clamp(21px, 6vw, 27px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
}

.cq-qchip::before {
  color: var(--text-dim);
  content: attr(data-n);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cq-qchip:empty {
  display: none;
}

.cq-floor {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 22px 1fr;
  align-items: end;
}

/* The stage floor the podiums stand on. */
.cq-floor::after {
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: -16px;
  left: -8%;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--floor), transparent);
  content: '';
}

.cq-podium {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.cq-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 186px;
  justify-content: flex-end;
  padding: 0 2px 10px;
}

.cq-answer {
  position: relative;
  width: 100%;
  min-height: 92px;
  display: grid;
  padding: 12px 8px;
  border: 3px solid var(--side, var(--a));
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: 0 6px 0 var(--side-edge, var(--a-edge));
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  place-items: center;
  text-align: center;
}

.cq-podium.b {
  --side: var(--b);
  --side-edge: var(--b-edge);
}

.cq-ring {
  position: absolute;
  inset: -8px;
  border: 3px solid var(--match);
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
}

.cq-slot.is-match.is-landed .cq-answer {
  border-color: var(--match-fill);
  box-shadow: 0 5px 0 #2f5427, 0 0 0 5px var(--green-tint);
}

.cq-tag {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin-top: -14px;
  padding: 5px 12px;
  border: 2px solid var(--gold-edge);
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 3px 0 var(--gold-edge);
  color: var(--gold-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.cq-tag:empty {
  visibility: hidden;
}

.cq-slot.is-close .cq-tag {
  align-self: flex-end;
  margin-top: -8px;
  transform: rotate(4deg);
}

.cq-slot.is-miss .cq-tag {
  margin-top: 8px;
  border: 2px dashed var(--line-strong);
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
}

.cq-slot.is-who .cq-tag {
  display: none;
}

.cq-verdict {
  min-height: 30px;
  margin: 8px 0 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--verdict-match);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.cq-verdict:empty,
.cq-slot:not(.is-landed) .cq-verdict {
  visibility: hidden;
}

.cq-slot.is-close .cq-verdict {
  background: var(--verdict-close);
  box-shadow: 0 3px 0 var(--gold-edge);
  color: var(--gold-ink);
}

.cq-slot.is-who.is-miss .cq-verdict {
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.cq-podium-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 118px;
  padding: 22px 6px 16px;
  border-radius: 16px 16px 6px 6px;
  background: var(--side, var(--a));
  box-shadow: 0 6px 0 var(--side-edge, var(--a-edge));
  color: #fff;
}

.cq-podium-bulbs {
  position: absolute;
  top: 6px;
  right: 12px;
  left: 12px;
  height: 6px;
  background: radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px) 0 0 / 14px 6px repeat-x;
}

.cq-podium-body .cq-initial {
  width: 46px;
  height: 46px;
  background: #fff;
  color: var(--side-edge, var(--a-edge));
  font-size: 22px;
}

.cq-podium-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cq-spot {
  position: relative;
  align-self: stretch;
}

.cq-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120px;
  height: 260px;
  margin-left: -60px;
  background: linear-gradient(0deg, rgba(232, 184, 74, 0.38), transparent 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0.6;
  pointer-events: none;
}

.cq-beam.a {
  transform: translateX(-30%) rotate(-10deg);
}

.cq-beam.b {
  transform: translateX(30%) rotate(10deg);
}

.cq-spot.is-merged .cq-beam,
.is-finale .cq-beam {
  transform: none;
  opacity: 0.9;
}

.cq-skip-hint {
  margin: 28px 0 0;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cq-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 236, 170, 0.45) 50%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

/* The finale: the podiums stay as the stage and the score takes the pill's
   place, so the score shows once. */
.is-finale .cq-counter,
.is-finale .cq-chip-slot,
.is-finale .cq-slot,
.is-finale .cq-skip-hint {
  display: none;
}

.cq-stage.is-finale {
  min-height: 0;
  padding-bottom: 22px;
  cursor: default;
}

.is-finale .cq-floor {
  margin-top: 6px;
}

.is-finale .cq-podium-body {
  min-height: 0;
  padding: 18px 6px 12px;
}

.cq-finale {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 24px;
  text-align: center;
}

/* The spotlight pool the score lands in. */
.cq-finale::before {
  position: absolute;
  z-index: -1;
  top: -40px;
  left: 50%;
  width: 440px;
  height: 260px;
  margin-left: -220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-glow), transparent);
  content: '';
  pointer-events: none;
}

.cq-reveal.is-peak .cq-finale::before {
  top: -120px;
  width: 640px;
  height: 640px;
  margin-left: -320px;
  background:
    radial-gradient(closest-side, var(--peak-glow), transparent 70%),
    repeating-conic-gradient(var(--peak-rays) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

.cq-burst {
  position: fixed;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cq-confetti {
  position: absolute;
  width: 9px;
  height: 14px;
  border-radius: 2px;
}

.cq-confetti.is-round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.cq-finale[hidden] {
  display: none;
}

.cq-rings {
  width: 170px;
  height: 96px;
  margin-bottom: -4px;
  overflow: visible;
}

.cq-rings circle {
  fill: none;
  stroke-width: 9;
}

.cq-rings circle:first-child {
  stroke: var(--a);
}

.cq-rings circle:last-child {
  stroke: var(--b);
}

.cq-score-line {
  position: relative;
  margin: 6px 0 0;
  color: var(--red-display);
  font-family: var(--show);
  font-size: clamp(60px, 18vw, 84px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.cq-score-line:focus {
  outline: none;
}

/* While the score rolls up, the line keeps the final score for screen readers
   and the roll is drawn on top. */
.cq-score-line.is-counting {
  color: transparent;
  text-shadow: none;
}

.cq-score-line.is-counting::after {
  position: absolute;
  inset: 0;
  color: var(--red-display);
  content: attr(data-count);
  text-align: center;
}

.is-peak .cq-score-line:not(.is-counting),
.is-peak .cq-score-line::after {
  text-shadow: 0 5px 0 var(--gold-edge);
}

.cq-names-line {
  max-width: 30ch;
  text-wrap: balance;
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.cq-tier-line {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-family: var(--aside);
  font-size: 22px;
  font-style: italic;
}

.is-peak .cq-tier-line {
  color: var(--text);
  font-size: 26px;
}

.cq-streak-big {
  padding: 8px 16px 8px 12px;
  font-size: 16px;
  transform: scale(var(--grow, 1));
}

.cq-finale-actions {
  display: grid;
  width: 100%;
  max-width: 420px;
  gap: 12px;
  margin-top: 14px;
}

.cq-countdown {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-weight: 500;
}

/* The end-of-round email card (hub-email.js). Field styles come from
   styles.css (.subscribe-*); this sets the couples card look. */
.cq-hub-email {
  width: 100%;
  max-width: 420px;
}

.cq-hub-card {
  margin-top: 18px;
  padding: 20px 18px 10px;
  text-align: left;
}

.cq-hub-card .hub-email-title {
  margin: 0;
  font-family: var(--show);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
}

.cq-hub-card .subscribe-copy {
  margin: 8px 0 16px;
}

.cq-hub-card .subscribe-controls {
  grid-template-columns: 1fr;
}

.cq-hub-card .subscribe-controls input {
  border-width: 2px;
  border-radius: 14px;
}

/* styles.css gives .subscribe-controls button the homepage pill; the finale
   wants the same chunky button as Share result above it. */
.cq-hub-card .subscribe-controls .chunk {
  min-height: 52px;
  padding: 12px 20px;
  border: 2px solid var(--edge);
  border-radius: 16px;
  background: var(--face);
  box-shadow: 0 6px 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: none;
}

.cq-hub-card .subscribe-controls .chunk:hover:not(:disabled),
.cq-hub-card .subscribe-controls .chunk:focus-visible:not(:disabled) {
  background: #d1002a;
}

.cq-hub-card .subscribe-controls .chunk:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(5px);
}

/* --- dialogs --- */

.cq-dialog {
  width: min(92vw, 460px);
  max-height: 80vh;
  padding: 22px 20px 20px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: var(--card-bg);
  box-shadow: 0 6px 0 var(--edge-quiet), var(--shadow-card);
  color: var(--text);
}

.cq-dialog::backdrop {
  background: rgba(13, 13, 13, 0.5);
}

.cq-dialog h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.cq-dialog ol,
.cq-dialog ul {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding-left: 20px;
}

.cq-dialog ul.cq-learned-list {
  max-height: 56vh;
  overflow-y: auto;
  padding: 2px 2px 8px;
  list-style: none;
}

.cq-learned-list li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 2px solid var(--edge-quiet);
  border-radius: 16px;
  background: var(--surface);
  font-weight: 500;
}

.cq-learned-answer {
  font-size: 17px;
  font-weight: 700;
}

.cq-learned-list .cq-learned-guess + .cq-learned-answer {
  margin-top: 6px;
}

.cq-learned-q {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cq-learned-list b {
  color: var(--text-dim);
}

.cq-learned-list .cq-learned-guess {
  color: var(--text-dim);
}

.cq-dialog .chunk {
  width: 100%;
}

/* --- wide screens --- */

@media (min-width: 900px) {
  .cq-main {
    max-width: 720px;
    padding-top: 20px;
  }

  .cq-home .cq-setup,
  .cq-home .cq-pairs,
  .cq-home .cq-packs,
  .cq-play,
  .cq-card-screen {
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
  }

  .cq-play {
    display: flex;
  }

  .cq-card-screen {
    min-height: 600px;
  }

  .cq-stage {
    min-height: 660px;
  }

  .cq-card-title {
    font-size: 34px;
  }

  .cq-floor {
    grid-template-columns: 1fr 120px 1fr;
  }

  .cq-answer {
    min-height: 100px;
    font-size: 20px;
  }

  .cq-qchip {
    max-width: 560px;
    padding: 22px 32px 26px;
    font-size: 30px;
  }
}

/* --- motion, only when it is welcome --- */

@media (prefers-reduced-motion: no-preference) {
  .cq-sway {
    animation: cq-sway 9s ease-in-out infinite alternate;
  }

  .is-away .cq-sway {
    animation-play-state: paused;
  }

  .chunk,
  .cq-seg-btn {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: 120ms, 120ms, 90ms, 120ms, 90ms;
  }

  .cq-progress-fill {
    transition: width 460ms cubic-bezier(0.3, 1.5, 0.5, 1);
  }

  .cq-beam {
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 420ms ease;
  }

  .cq-marquee i {
    animation: cq-bulb 1.6s steps(2, jump-none) infinite;
  }

  .cq-marquee i:nth-child(even) {
    animation-delay: 0.8s;
  }

  .is-away .cq-marquee i {
    animation-play-state: paused;
  }

  /* One living element on every card: the heart between the two podiums
     beats, and while a round is out the other podium bobs. */
  .cq-heart {
    animation: cq-beat 1.6s ease-in-out infinite;
  }

  /* The hold button calls with a ring that ripples out of it; the button
     itself never moves under a finger. */
  .cq-hold::after {
    position: absolute;
    inset: -4px;
    border: 3px solid rgba(255, 253, 249, 0.75);
    border-radius: 50%;
    content: '';
    animation: cq-ping 1.9s ease-out infinite;
    pointer-events: none;
  }

  .cq-hold.is-holding::after,
  .is-away .cq-hold::after {
    animation-play-state: paused;
    opacity: 0;
  }

  /* The start button catches the light every few seconds. */
  .cq-start::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
    content: '';
    animation: cq-shine 4.2s ease-in-out 1.2s infinite;
    pointer-events: none;
    transform: translateX(-120%);
  }

  .is-away .cq-start::after {
    animation-play-state: paused;
  }

  .cq-card-screen[data-tone='waiting'] .cq-mini-podium.b,
  .cq-card-screen[data-tone='sending'] .cq-mini-podium {
    animation: cq-bob 0.9s ease-in-out infinite alternate;
  }

  .cq-card-screen[data-tone='sending'] .cq-mini-podium.b {
    animation-delay: 0.45s;
  }

  .cq-finale::before {
    animation: cq-breathe 4.8s ease-in-out infinite alternate;
  }

  .cq-reveal.is-peak .cq-finale::before {
    animation: cq-spin 48s linear infinite;
  }

  .cq-reveal.is-peak .cq-podium-bulbs {
    animation: cq-bulb 0.42s steps(2, jump-none) 10;
  }

  .is-away .cq-heart,
  .is-away .cq-mini-podium,
  .is-away .cq-finale::before {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chunk:active:not(:disabled),
  .cq-seg-btn:active {
    transform: none;
  }
}

@keyframes cq-sway {
  from {
    transform: rotate(-7deg);
  }

  to {
    transform: rotate(7deg);
  }
}

@keyframes cq-ping {
  from {
    opacity: 0.9;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes cq-shine {
  0% {
    transform: translateX(-120%);
  }

  35%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes cq-beat {
  0%,
  40%,
  100% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.28);
  }

  28% {
    transform: scale(1.08);
  }
}

@keyframes cq-bob {
  to {
    transform: translateY(-6px);
  }
}

@keyframes cq-breathe {
  from {
    opacity: 0.75;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes cq-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes cq-bulb {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.45;
  }
}

/* --- about --- */

.cq-about {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}

.cq-about-card {
  padding: 20px 20px 8px;
  text-align: left;
}

.cq-about-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.cq-about-card h3 {
  margin: 14px 0 4px;
  font-size: 17px;
}

.cq-about-card ol,
.cq-about-card ul {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 20px;
}

.cq-about-back {
  margin: 6px 0 0;
}

.cq-about-back .chunk {
  text-decoration: none;
}

/* The effects layer (WP7c, public/couples-fx.js): a canvas of light under
 * the content, never over a word. It only exists with motion on; without it
 * the CSS beams stay. */
.cq-stage.is-fx,
.cq-reveal.is-fx {
  position: relative;
  isolation: isolate;
}

.cq-fx {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cq-stage.is-fx .cq-beam {
  visibility: hidden;
}