/* ===========================================================================
   Humor Intelligence Test
   Concept: a lab instrument for something that refuses to be measured.
   Signature: the laugh-meter gauge that sweeps to your score.
   =========================================================================== */

:root {
  --ink:      #191A33;   /* deep indigo near-black */
  --cloud:    #EDEFF4;   /* cool page ground */
  --paper:    #FBFBFE;   /* card surface */
  --marquee:  #F4B942;   /* spotlight gold */
  --punch:    #E4447C;   /* score-reveal rose */
  --teal:     #2BB3A3;   /* calm end of the meter */
  --slate:    #63657D;   /* muted text */
  --hairline: #DADDE7;   /* borders + empty gauge track */

  --shadow: 0 18px 50px -24px rgba(25, 26, 51, 0.45);
  --radius: 18px;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- screens ---- */
.screen { animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.screen[hidden] { display: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- shared type ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 18px;
}
.eyebrow strong { color: var(--ink); }

/* ---- buttons ---- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 24px -12px rgba(25, 26, 51, 0.9);
}
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--slate);
  padding: 14px 18px;
}
.btn--ghost:hover { color: var(--ink); }

/* =========================== INTRO =========================== */
.screen--intro { text-align: left; }

.marquee {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
}
.marquee span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--marquee);
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.18);
  animation: bulb 1.6s ease-in-out infinite;
}
.marquee span:nth-child(2n)  { animation-delay: 0.2s; }
.marquee span:nth-child(3n)  { animation-delay: 0.45s; }
.marquee span:nth-child(4n)  { animation-delay: 0.7s; }
@keyframes bulb {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.hero em {
  font-style: italic;
  color: var(--punch);
}

.lede {
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--slate);
  max-width: 46ch;
  margin: 0 0 30px;
}

.fineprint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--slate);
  margin: 18px 0 0;
}

/* =========================== TEST =========================== */
.test-head { margin-bottom: 26px; }

.progress__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.progress__track {
  margin-top: 10px;
  height: 6px;
  border-radius: 6px;
  background: var(--hairline);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--teal), var(--marquee), var(--punch));
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
}
.card__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--marquee);
  padding: 5px 11px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.card__image {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin-bottom: 20px;
  line-height: 0;
}
.card__image svg,
.card__image img { width: 100%; height: auto; display: block; }

.card__setup {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.answer {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cloud);
  border: 2px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color 0.15s ease;
}
.answer::placeholder { color: var(--slate); opacity: 0.7; }
.answer:focus { outline: none; border-color: var(--ink); }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  gap: 12px;
}
.counter {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--slate);
}
.card__actions { display: flex; align-items: center; gap: 6px; }

/* =========================== SCORING =========================== */
.screen--scoring { text-align: center; }
.meter--idle { margin: 0 auto 20px; max-width: 300px; }
.gauge { width: 100%; height: auto; }
.gauge__sweep {
  pathLength: 100;
  stroke-dasharray: 24 100;
  animation: sweep 1.3s ease-in-out infinite;
}
@keyframes sweep {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: -24; }
}
.scoring-text {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--slate);
}

/* =========================== RESULTS =========================== */
.screen--results { text-align: center; }

.meter {
  position: relative;
  max-width: 320px;
  margin: 6px auto 8px;
}
.meter__readout {
  position: absolute;
  bottom: 6px;
  left: 0; right: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.meter__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ink);
}
.meter__outof {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--slate);
}

.band {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  letter-spacing: -0.01em;
  margin: 8px 0 8px;
  color: var(--punch);
}
.band-blurb {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--slate);
  max-width: 42ch;
  margin: 0 auto 26px;
}

/* dimension bars */
.dims {
  display: grid;
  gap: 12px;
  text-align: left;
  margin: 0 auto 26px;
  max-width: 420px;
}
.dim { display: grid; grid-template-columns: 92px 1fr 38px; align-items: center; gap: 12px; }
.dim__name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.dim__track { height: 8px; border-radius: 8px; background: var(--hairline); overflow: hidden; }
.dim__fill {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  background: var(--ink);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dim__val { font-family: var(--font-mono); font-size: 0.8rem; text-align: right; color: var(--ink); }

.style-note {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-align: left;
  margin: 0 auto 22px;
  max-width: 460px;
  box-shadow: var(--shadow);
}
.style-note__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--punch);
  margin: 0 0 8px;
}
.style-note p:last-child { margin: 0; line-height: 1.55; }

/* per-answer breakdown */
.breakdown {
  max-width: 460px;
  margin: 0 auto 28px;
  text-align: left;
}
.breakdown > summary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--slate);
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
}
.breakdown > summary::-webkit-details-marker { display: none; }
.breakdown > summary::before { content: "▸ "; }
.breakdown[open] > summary::before { content: "▾ "; }

.breakdown__item {
  border-top: 1px solid var(--hairline);
  padding: 14px 0;
}
.breakdown__setup { font-weight: 600; font-size: 0.92rem; margin: 0 0 4px; }
.breakdown__answer {
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cloud);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 8px;
}
.breakdown__answer.is-empty { color: var(--slate); font-style: italic; }
.breakdown__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.breakdown__note { font-size: 0.86rem; color: var(--slate); margin: 0; }
.breakdown__score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
  white-space: nowrap;
}

.results-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.mode-flag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--slate);
  margin-top: 18px;
}

/* =========================== FOOTER =========================== */
.site-foot {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--slate);
  padding: 18px;
}
.site-foot .dot { margin: 0 8px; }

/* =========================== A11Y / MOTION =========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}