/* ==========================================================================
   LONGUARD — WHAT KIND OF FIGHTER ARE YOU?
   Cinematic title-screen model: full-bleed key art, a left-aligned lockup held
   at the vertical centre, almost no chrome. Mobile-first — the phone layout is
   the base and the desktop rules are the exception.
   ========================================================================== */

:root {
  --void: #000;
  --bone: #F2EBD8;
  --bone-soft: rgba(242, 235, 216, 0.86); /* body copy, kept high-contrast */
  --bone-mid: rgba(242, 235, 216, 0.62);
  --bone-dim: rgba(242, 235, 216, 0.42);
  --line: rgba(242, 235, 216, 0.18);

  --slasher: #C1272D;
  --stoic: #FFFFFF;
  --stoic-text: #2A241C;
  --joker: #D4AF37;
  --sleeper: #4A90D9;
  --sleeper-text: #8FC0F0;
  --cornerwoman: #3FA88C;

  --accent: var(--slasher);
  --accent-text: #000;

  --ui: 'Archivo', system-ui, sans-serif;
  /* IBM Plex Sans: humanist rather than another neo-grotesque, so it reads as a
     different voice next to Archivo instead of a slightly-off match. Open
     apertures and a tall x-height hold up well as light text on black.
     Drop-in alternates if you want to try others: 'Instrument Sans' or 'Manrope'
     — swap here and in the Google Fonts link in index.html. */
  --body: 'IBM Plex Sans', system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --gutter: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== Hero stage ===== */

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 62% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(90% 70% at 30% 100%, #121216, #000 72%);
}

/* the still: key art for the attract beat, drifting like a held camera */
.hero-still {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  /* biased high so faces survive the cover-crop on wide viewports */
  background-position: center 12%;
  opacity: 0;
  filter: saturate(0.62) contrast(1.08) brightness(0.78);
  animation: kenburns 24s var(--ease-soft) infinite alternate;
  transition: opacity 1s var(--ease-soft);
  will-change: transform;
}
body.stage-still .hero-still { opacity: 1; }

/* A real camera move rather than a nudge: pushes in and drifts across, with a
   mid-point that isn't on the straight line between the ends so it reads as a
   handheld push instead of a linear zoom. */
@keyframes kenburns {
  0%   { transform: scale(1.04) translate3d(2.5%, 1.2%, 0); }
  50%  { transform: scale(1.15) translate3d(-1%, -2.2%, 0); }
  100% { transform: scale(1.24) translate3d(-4.5%, -3.4%, 0); }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* crushed, desaturated and cooled — footage graded down to sit under the UI
     rather than compete with it */
  filter: saturate(0.62) contrast(1.12) brightness(1.18);
  transition: opacity 1.2s var(--ease-soft), filter 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}
body.stage-video .hero-video { opacity: 1; }

/* Colour grade laid over the footage: warm accent in the highlights, cold blue
   in the shadows. Overlay keeps the blacks black instead of tinting the whole
   frame flat. */
.grade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 42%),
    linear-gradient(300deg, rgba(52, 82, 130, 0.55) 0%, transparent 55%);
  transition: opacity 1.2s var(--ease-soft);
}
body.stage-video .grade { opacity: 0.5; }

/* the left third goes to near-black under the video so the menu always reads */
.video-fade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    #000 0%,
    rgba(0, 0, 0, 0.92) 18%,
    rgba(0, 0, 0, 0.62) 40%,
    rgba(0, 0, 0, 0.18) 68%,
    rgba(0, 0, 0, 0.45) 100%);
  transition: opacity 1.2s var(--ease-soft);
}
body.stage-video .video-fade { opacity: 1; }

/* The letterbox is a title-card device. On the long scrolling profile it just
   swallows whatever passes under it, so the top bar steps aside there — the
   bottom one stays, since it carries the mark and nothing scrolls past it. */
body.stage-photo .bar-top { opacity: 0; pointer-events: none; }
.bar-top { transition: opacity 0.5s var(--ease-soft); }

/* With the fade doing the left-side work, the scrim drops its own horizontal
   gradient — running both crushed the footage to almost nothing. */
body.stage-video .scrim {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.32) 32%, transparent 62%, rgba(0, 0, 0, 0.45) 100%),
    radial-gradient(130% 95% at 58% 50%, transparent 42%, rgba(0, 0, 0, 0.62) 100%);
}

/* The still and the video are mutually exclusive modes, never stacked — a
   ghosted photo sitting under a video read as a mistake, and it was one.
   Questions get `stage-none`: no imagery at all, just the lit ground, because
   motion behind a decision is the most distracting thing on the page. */
body.stage-none .hero-still,
body.stage-none .hero-video,
body.stage-photo .hero-video,
body.stage-video .hero-still,
body.stage-still .hero-video { opacity: 0; }

body.stage-none .rain { opacity: 0.28; }

/* The long read sits on the cover photo, held completely still — no Ken Burns,
   no video — so 700 words stay comfortable to read. */
body.stage-photo .hero-still {
  opacity: 1;
  animation: none;
  transform: scale(1.04);
  filter: saturate(0.4) contrast(1.02) brightness(0.42) blur(2px);
}
body.stage-photo .hero-video { opacity: 0; }
body.stage-photo .rain { opacity: 0.2; }
body.stage-photo .scrim {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.7) 100%);
}
body.stage-none .scrim {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.72) 100%);
}

/* rain — two sheets at different speeds so it has depth */
.rain { position: absolute; inset: -10%; pointer-events: none; opacity: 0.5; }
.rain::before,
.rain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(101deg,
    transparent 0 3px,
    rgba(255, 255, 255, 0.05) 3px 4px,
    transparent 4px 11px);
}
.rain::before { animation: rain 0.85s linear infinite; }
.rain::after { animation: rain 1.5s linear infinite; opacity: 0.55; transform: scale(1.4); }

@keyframes rain { to { transform: translate3d(-70px, 420px, 0); } }
.rain::after { animation-name: rainFar; }
@keyframes rainFar { to { transform: scale(1.4) translate3d(-40px, 300px, 0); } }

/* the lower-left has to hold small type over moving art */
.scrim {
  position: absolute;
  inset: 0;
  /* On a phone the subject sits centre-frame, right under the headline, so the
     horizontal wash stays light here — the vertical one does the protecting.
     The desktop block below swaps in a much stronger left-side gradient, where
     the crop puts the subject on the right. */
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.58) 30%, rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.24) 55%, rgba(0, 0, 0, 0.1) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.7) 100%);
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.26;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.bloom {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 45% at 30% 55%, var(--accent), transparent 72%);
}
.bloom.fire { animation: bloom 1.2s var(--ease-soft); }
@keyframes bloom { 0% { opacity: 0; } 22% { opacity: 0.26; } 100% { opacity: 0; } }


/* ===== Cinematic letterbox ===== */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 6;
  background: #000;
  height: clamp(34px, 6vh, 62px);
  pointer-events: none;
}
.bar-top { top: 0; }
.bar-bottom {
  bottom: 0;
  height: clamp(44px, 7vh, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.legal {
  display: flex;
  align-items: center;
  gap: clamp(14px, 5vw, 40px);
  font-family: var(--ui);
  font-size: clamp(8.5px, 2.2vw, 10px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 235, 216, 0.34);
  white-space: nowrap;
}
/* a hairline between the two marks rather than a bullet */
.legal span + span::before {
  content: "";
  display: inline-block;
  width: clamp(14px, 5vw, 40px);
  height: 1px;
  background: rgba(242, 235, 216, 0.2);
  vertical-align: middle;
  margin-right: clamp(14px, 5vw, 40px);
}

/* the bars eat into the safe area, so content clears them */
.stage-content {
  padding-top: calc(env(safe-area-inset-top) + clamp(34px, 6vh, 62px) + 28px);
  padding-bottom: calc(env(safe-area-inset-bottom) + clamp(44px, 7vh, 72px) + 28px);
}

/* ===== Audio ===== */

.audio-ctl {
  position: fixed;
  top: calc(clamp(34px, 6vh, 62px) + 14px);
  right: var(--gutter);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.audio-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  color: var(--bone-mid);
  cursor: pointer;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}
.audio-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.audio-btn .spk { fill: currentColor; stroke: none; }
.audio-btn .waves { opacity: 0; transition: opacity 0.3s var(--ease-soft); }
.audio-btn .cross { opacity: 1; transition: opacity 0.3s var(--ease-soft); }

body.audio-on .audio-btn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
body.audio-on .audio-btn .waves { opacity: 1; }
body.audio-on .audio-btn .cross { opacity: 0; }

/* The dial drops out of the button and retires on its own — it's a setting, not
   permanent furniture, so it shows on interaction and fades a few seconds later. */
.audio-dial {
  position: relative;
  width: 22px;
  height: 92px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft), transform 0.4s var(--ease);
}
.audio-ctl.open .audio-dial { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* five marks: 0 / 25 / 50 / 75 / 100, matching the step */
.audio-ticks {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 100%;
  color: rgba(242, 235, 216, 0.34);
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0 1px,
    transparent 1px calc((100% - 1px) / 4));
}

.audio-range {
  position: relative;
  width: 22px;
  height: 92px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  writing-mode: vertical-lr;
  direction: rtl; /* so dragging up raises the level */
  margin: 0;
  cursor: pointer;
}
/* the rail the thumb rides, drawn separately from the tick marks */
.audio-range::-webkit-slider-runnable-track {
  width: 2px;
  height: 100%;
  background: rgba(242, 235, 216, 0.22);
  margin-left: 14px;
}
.audio-range::-moz-range-track {
  width: 2px;
  height: 100%;
  background: rgba(242, 235, 216, 0.22);
  margin-left: 14px;
}

.audio-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 5px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
  cursor: pointer;
}
.audio-range::-moz-range-thumb {
  width: 13px;
  height: 5px;
  border: 0;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
  cursor: pointer;
}

/* ===== Hard cut between beats ===== */

.cut {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.cut.firing { animation: cut 1900ms cubic-bezier(0.33, 0, 0.2, 1); }
/* long, even ramps and a real hold — a dissolve to black and back, not a blink */
@keyframes cut {
  0%   { opacity: 0; }
  26%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Layout: left-aligned column, held at the vertical centre ===== */

.stage-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding:
    calc(env(safe-area-inset-top) + 40px)
    calc(env(safe-area-inset-right) + var(--gutter))
    calc(env(safe-area-inset-bottom) + 40px)
    calc(env(safe-area-inset-left) + var(--gutter));
}

.screen { display: none; width: 100%; max-width: 560px; text-align: left; }
.screen.on { display: block; animation: screenIn 0.55s var(--ease) both; }
.screen.leaving { animation: screenOut 0.28s var(--ease-soft) both; }

@keyframes screenIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes screenOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } }

/* ===== Type ===== */

.kicker {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  transition: color 0.6s var(--ease-soft);
}

.game-title {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(38px, 12.5vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #FFF;
  margin-bottom: 26px;
  text-shadow: 0 4px 44px rgba(0, 0, 0, 0.95);
}
.game-title-sm { font-size: clamp(27px, 8vw, 42px); margin-bottom: 30px; }

.chapter-title {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.chapter-big { font-size: clamp(38px, 13vw, 66px); }

.question {
  font-family: var(--ui);
  font-weight: 700;
  font-size: clamp(23px, 6.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  color: #FFF;
}

.lede { font-size: 16px; line-height: 1.7; color: var(--bone-soft); margin-bottom: 26px; }

.press-start {
  font-family: var(--ui);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-mid);
  animation: blink 1.9s var(--ease-soft) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ===== Menu ===== */

.menu { margin-bottom: 8px; }

.menu-item {
  /* width: fit-content, not 100% — the carets are flex siblings of the label, so
     the right one sits beside the text instead of at the far edge of the button */
  display: flex;
  align-items: center;
  width: fit-content;
  line-height: 1;   /* no half-leading, so flex centring lands on the cap centre */
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-size: clamp(20px, 5.6vw, 25px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-mid);
  padding: 14px 0;
  transition: color 0.3s var(--ease-soft);
}
/* Selection reads as a light source on the left casting a bar across the item:
   a bright marker, then a gradient that falls away to nothing on the right. */
.menu-item { position: relative; isolation: isolate; }

.menu-item::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 0;
  margin-right: 18px;
  background: var(--accent);
  box-shadow: 0 0 14px 2px var(--accent), 0 0 34px 6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: height 0.35s var(--ease), opacity 0.3s var(--ease-soft);
  opacity: 0;
}

/* the wash — sits behind the label, fades out to the right */
.menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 78vw);
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 42%, transparent) 0%,
    color-mix(in srgb, var(--accent) 16%, transparent) 34%,
    transparent 88%);
  opacity: 0;
  transform: scaleX(0.75);
  transform-origin: left center;
  transition: opacity 0.4s var(--ease-soft), transform 0.45s var(--ease);
}

.menu-item > span { display: block; line-height: 1; transition: text-shadow 0.35s var(--ease-soft); }

.menu-item.cursor { color: #FFF; }
.menu-item.cursor::before { height: 1.15em; opacity: 1; }
.menu-item.cursor::after { opacity: 1; transform: scaleX(1); }
.menu-item.cursor > span {
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ===== Rules ===== */

.rules { list-style: none; counter-reset: rule; margin-bottom: 30px; }
.rules li {
  counter-increment: rule;
  position: relative;
  padding: 14px 0 14px 36px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bone-soft);
  border-bottom: 1px solid var(--line);
}
.rules li:last-child { border-bottom: 0; }
.rules li::before {
  content: "0" counter(rule);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

/* ===== Rule / progress ===== */

.rule { height: 2px; background: rgba(242, 235, 216, 0.14); overflow: hidden; margin-bottom: 20px; }
.rule-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 14px -1px var(--accent);
  transition: width 0.85s var(--ease), background 0.6s var(--ease-soft);
}

/* ===== Questions ===== */

.q-head { margin-bottom: 26px; }

.counter {
  display: block;
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 12px;
  transition: color 0.6s var(--ease-soft);
}
.counter-of { font-size: 0.45em; color: var(--bone-dim); }

.q-body { animation: qIn 0.5s var(--ease) both; }
.q-body.leaving { animation: qOut 0.24s var(--ease-soft) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }

.q-bridge { color: var(--bone-dim); margin-bottom: 14px; }
.q-bridge:empty { display: none; }

.options { display: flex; flex-direction: column; gap: 8px; }

.option-btn {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 62px;
  width: 100%;
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--bone);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(242, 235, 216, 0.3);
  padding: 16px 16px 16px 40px;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.35s var(--ease-soft), background 0.35s var(--ease-soft),
              transform 0.35s var(--ease), opacity 0.35s var(--ease-soft);
  animation: optionIn 0.5s var(--ease) backwards;
}
.option-btn:nth-child(1) { animation-delay: 0.06s; }
.option-btn:nth-child(2) { animation-delay: 0.13s; }
.option-btn:nth-child(3) { animation-delay: 0.20s; }
.option-btn:nth-child(4) { animation-delay: 0.27s; }
.option-btn:nth-child(5) { animation-delay: 0.34s; }
@keyframes optionIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.option-btn .cursor-mark {
  position: absolute;
  left: 16px;
  opacity: 0;
  transform: translateX(-8px);
  color: var(--accent);
  transition: opacity 0.3s var(--ease-soft), transform 0.35s var(--ease);
}
.option-btn.cursor { border-left-color: var(--accent); transform: translateX(5px); }
.option-btn.cursor .cursor-mark { opacity: 1; transform: translateX(0); }

.option-btn.selected {
  border-color: var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, rgba(10, 10, 12, 0.72)), rgba(10, 10, 12, 0.72));
  transform: translateX(5px);
}
.options.resolved .option-btn:not(.selected) { opacity: 0.24; transform: none; }

/* ===== Brief ===== */

.brief-body {
  font-family: var(--ui);
  font-size: clamp(20px, 5.4vw, 26px);
  font-weight: 600;
  line-height: 1.42;
  color: #FFF;
  margin-bottom: 32px;
  min-height: 4.4em;
}
.brief-body::after { content: "▌"; color: var(--accent); animation: blink 1s steps(2) infinite; }
.brief-body.done::after { content: ""; }

/* ===== Buttons ===== */

.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--line);
  padding: 16px 22px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.35s var(--ease-soft), color 0.35s var(--ease-soft),
              background 0.35s var(--ease-soft), transform 0.25s var(--ease);
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  transition: filter 0.35s var(--ease-soft), transform 0.25s var(--ease), background-color 0.6s var(--ease-soft);
}
.btn-primary:disabled { filter: saturate(0.4) brightness(0.7); cursor: default; }
.btn + .btn { margin-top: 10px; }

/* The one button that starts the run: a breathing pulse, a sheen that sweeps
   across on a loop, and cut corners so it reads as a console prompt rather than
   a form submit. */
.btn-game {
  position: relative;
  overflow: hidden;
  min-height: 64px;
  font-size: 17px;
  letter-spacing: 0.3em;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  animation: gamePulse 2.6s var(--ease-soft) infinite;
}
.btn-game > span { position: relative; z-index: 1; }
.btn-game::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: sheen 2.8s var(--ease-soft) infinite;
}

@keyframes gamePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50%      { box-shadow: 0 0 30px 3px color-mix(in srgb, var(--accent) 40%, transparent); }
}
@keyframes sheen {
  0%   { left: -50%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}

/* ===== Roster ===== */

.roster-view { display: grid; gap: 18px; margin-bottom: 26px; }
.roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* odd count on a two-up grid leaves a widow — centre it instead of stranding it left */
.roster .record:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }

/* records are buttons now, so they need the button reset */
.record {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
}
.record-art, .record-name, .record-el { display: block; }
.record.picked { transform: translateY(-6px); }
.record.picked .record-art { border-color: var(--card); box-shadow: 0 0 26px -8px var(--card); }
.record.picked .record-name { color: #FFF; }

/* the read that opens beside the card */
.roster-panel {
  border: 1px solid var(--line);
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-width: 0;
  transition: opacity 0.4s var(--ease-soft), max-height 0.5s var(--ease), padding 0.4s var(--ease);
}
.roster-panel.open { opacity: 1; max-height: 640px; padding: 18px; border-width: 1px; }

.roster-panel[data-archetype="slasher"] { --card: var(--slasher); }
.roster-panel[data-archetype="stoic"]   { --card: var(--stoic); }
.roster-panel[data-archetype="joker"]   { --card: var(--joker); }
.roster-panel[data-archetype="sleeper"] { --card: var(--sleeper); }
.roster-panel[data-archetype="cornerwoman"] { --card: var(--cornerwoman); }

.panel-art {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--card, var(--line));
  margin-bottom: 14px;
}
.panel-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.panel-art.placeholder { background: repeating-linear-gradient(135deg, #08080A 0 5px, #101013 5px 10px); position: relative; }
.panel-art.placeholder img { display: none; }
.panel-art.placeholder::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-weight: 800;
  font-size: 30px;
  color: var(--bone-dim);
}

.panel-name {
  font-family: var(--ui);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.panel-meta {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 10px;
}
.panel-tag { font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--bone-soft); margin-bottom: 12px; }
.panel-blurb { font-size: 14.5px; line-height: 1.65; color: var(--bone-soft); margin-bottom: 16px; }
.panel-cta {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--card, var(--accent));
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.record[data-archetype="slasher"] { --card: var(--slasher); }
.record[data-archetype="stoic"]   { --card: var(--stoic); }
.record[data-archetype="joker"]   { --card: var(--joker); }
.record[data-archetype="sleeper"] { --card: var(--sleeper-text); }

.record { transition: transform 0.45s var(--ease); }
.record-art {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0B0B0D;
  border: 1px solid var(--line);
  margin-bottom: 9px;
  transition: border-color 0.5s var(--ease-soft);
}
.record-art img,
.record-art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: filter 0.7s var(--ease-soft);
}
.record-art video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease-soft); }
.record-art.has-video video { opacity: 1; }

/* Sealed: obscured, not blanked. The art has an opaque background, so a true
   silhouette just flattens the whole card to a grey rectangle — darkening,
   desaturating and blurring instead leaves a figure you can sense but not read. */
.record.locked .record-art img { filter: grayscale(1) brightness(0.34) contrast(0.9) blur(3px); }
.record.picked .record-art img { filter: grayscale(0.5) brightness(0.6) blur(1.5px); }
.record.locked .record-art::after {
  content: "Locked";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-align: center;
}

.record-art.placeholder img { display: none; }
.record-art.placeholder { background: repeating-linear-gradient(135deg, #08080A 0 5px, #101013 5px 10px); }
.record-art.placeholder::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-weight: 800;
  font-size: 30px;
  color: var(--bone-dim);
}
.record.unlocked .record-art.placeholder::before { content: attr(data-glyph); font-size: 12px; letter-spacing: 0.08em; text-align: center; padding: 8px; }

.record-name {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card, var(--bone));
}
.record-el {
  font-family: var(--body);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
  color: var(--bone-dim);
  margin-top: 4px;
}

.record.unlocked .record-art { border-color: var(--card, var(--accent)); }
.record.unlocked .record-art img { filter: none; }

/* ===== Email ===== */

#email-form { display: grid; gap: 10px; margin-bottom: 14px; }

#name-input,
#email-input {
  width: 100%;
  min-height: 56px;
  background: rgba(10, 10, 12, 0.75);
  border: 1px solid var(--line);
  color: var(--bone);
  padding: 16px;
  font-family: var(--body);
  font-size: 16px; /* 16px keeps iOS from zooming the viewport on focus */
  transition: border-color 0.35s var(--ease-soft);
}
#name-input::placeholder,
#email-input::placeholder { color: var(--bone-dim); }
#name-input:focus,
#email-input:focus { outline: none; border-color: var(--accent); }

.fine-print { color: var(--bone-dim); font-size: 12.5px; line-height: 1.5; }

/* ===== Scan ===== */

.scanning { padding: 40px 0 60px; }
.scanning[hidden] { display: none; }

.scan-name {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(30px, 9.5vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 18px;
}
.scan-name.landed { color: var(--accent); }

.scan-fill { width: 40%; animation: sweep 1.4s var(--ease-soft) infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* ===== Reveal ===== */

/* the one screen that ignores the left column — the cards own the whole frame */
#screen-reveal { max-width: none; }
#screen-reveal.on { display: flex; justify-content: center; }
.reveal-stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.reveal-caption { text-align: center; transition: opacity 0.4s var(--ease-soft); }
.reveal-caption.gone { opacity: 0; }

.reveal-cards {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 18px);
  width: 100%;
}

.rcard[data-archetype="slasher"] { --card: var(--slasher); }
.rcard[data-archetype="stoic"]   { --card: var(--stoic); }
.rcard[data-archetype="joker"]   { --card: var(--joker); }
.rcard[data-archetype="sleeper"] { --card: var(--sleeper); }
.rcard[data-archetype="cornerwoman"] { --card: var(--cornerwoman); }

.rcard {
  position: relative;
  width: clamp(52px, 15.5vw, 124px);
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  background: repeating-linear-gradient(135deg, #08080A 0 5px, #101013 5px 10px);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform 0.5s var(--ease),
    opacity 0.5s var(--ease-soft),
    border-color 0.35s var(--ease-soft),
    box-shadow 0.35s var(--ease-soft),
    filter 0.6s var(--ease-soft);
}
.rcard img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: brightness(0) invert(0.2); transition: filter 0.7s var(--ease-soft); }

/* the cursor sweeping across the four */
.rcard.hot {
  border-color: var(--card);
  box-shadow: 0 0 26px -6px var(--card);
  transform: translateY(-8px) scale(1.04);
}
/* the ones that weren't you */
.rcard.out { opacity: 0.12; transform: scale(0.9); filter: blur(2px); }

/* the chosen card: rises, holds, then opens */
.rcard.chosen {
  border-color: var(--card);
  box-shadow: 0 0 60px -10px var(--card), 0 0 140px -20px var(--card);
  transform: scale(1.32);
  z-index: 2;
}
.rcard.chosen.opened img { filter: none; }
.rcard.chosen.opened { animation: cardOpen 0.7s var(--ease) both; }
@keyframes cardOpen {
  0%   { transform: scale(1.32) rotateY(0deg); }
  45%  { transform: scale(1.5) rotateY(12deg); }
  100% { transform: scale(1.42) rotateY(0deg); }
}

/* the shockwave when it opens */
.rcard.chosen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card);
  opacity: 0;
  pointer-events: none;
}
.rcard.chosen.opened::after { animation: cardFlash 0.7s var(--ease-soft); }
@keyframes cardFlash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* FLIP: the card travels from centre stage to where the profile portrait sits */
.rcard.flying {
  position: fixed;
  margin: 0;
  z-index: 9;
  transition: transform 0.85s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.3s var(--ease-soft) 0.6s;
  transform-origin: top left;
}

/* ===== Result ===== */

.result-body { opacity: 0; }
.result-body.revealed { opacity: 1; }

.dossier { display: flex; align-items: flex-end; gap: 16px; margin: 8px 0 26px; }
.dossier .record { width: 116px; flex: 0 0 116px; }
.dossier .record-name, .dossier .record-el { display: none; }
.dossier-head { flex: 1; min-width: 0; }

.result-body.revealed .dossier .record { animation: recordIn 0.9s var(--ease) 0.12s both; }
@keyframes recordIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.result-name {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(30px, 9.5vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  transition: color 0.6s var(--ease-soft);
}
.result-body.revealed .result-name { animation: settleIn 0.9s var(--ease) both; }
@keyframes settleIn {
  0%   { opacity: 0; transform: scale(1.1); letter-spacing: 0.2em; filter: blur(7px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); letter-spacing: -0.02em; filter: blur(0); }
}

.result-tag { font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--bone-soft); margin-bottom: 6px; }
.result-element {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* ===== Sections ===== */

/* One rhythm for every block on the result page — the sections used to inherit
   different spacing depending on which container they sat in, which made
   "In the gym", "Your people" and "Strengths" bunch up against each other. */
.section { margin-bottom: 48px; }
.section:last-child { margin-bottom: 0; }
.section .kicker { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

#result-bio { margin-bottom: 44px; }
/* the long read ends above the letterbox, never behind it */
#screen-result { padding-bottom: clamp(40px, 7vh, 72px); }
#result-split { margin-bottom: 0; }
#result-sections { margin-top: 0; }
.section p { font-size: 16px; line-height: 1.78; color: var(--bone-soft); }
.section p + p { margin-top: 15px; }

.trait { margin-bottom: 20px; }
.trait h4 {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #FFF;
  margin-bottom: 6px;
}
.trait p { font-size: 15.5px; line-height: 1.72; color: var(--bone-soft); }

.work-list { list-style: none; }
.work-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--bone-soft);
}
.work-list li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--accent);
  transition: color 0.6s var(--ease-soft);
}

/* in the gym / under pressure, side by side on desktop */
.split { display: grid; gap: 0; }
.split .section { margin-bottom: 48px; }

/* ===== Charts ===== */

.charts { display: grid; gap: 14px; margin-bottom: 34px; }

.chart-card { border: 1px solid var(--line); padding: 20px 18px; background: rgba(8, 8, 10, 0.5); }
.chart-card .kicker { margin-bottom: 16px; }

.radar-wrap { max-width: 340px; margin: 0 auto; }
.radar-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar-grid { fill: none; stroke: rgba(242, 235, 216, 0.14); stroke-width: 1; }
.radar-axis { stroke: rgba(242, 235, 216, 0.12); stroke-width: 1; }
.radar-shape {
  fill: color-mix(in srgb, var(--accent) 26%, transparent);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  /* drawn from the centre outward once the result lands */
  transform-origin: 100px 100px;
  transform: scale(0);
  transition: transform 1.1s var(--ease);
}
.radar-shape.drawn { transform: scale(1); }
.radar-dot { fill: var(--accent); }
.radar-label {
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--bone-mid);
}
.radar-value { font-family: var(--ui); font-size: 10px; font-weight: 700; fill: var(--accent); }

.chart-note { font-size: 13px; line-height: 1.6; color: var(--bone-mid); margin-top: 14px; }

/* the spectrum: where you sit between two poles */
.spectrum { margin-bottom: 18px; }
.spectrum-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 8px;
}
.spectrum-head .lit { color: var(--bone); }
.spectrum-track { position: relative; height: 2px; background: rgba(242, 235, 216, 0.14); }
.spectrum-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: left 1s var(--ease), background-color 0.6s var(--ease-soft);
}

/* ===== Fit + matchups ===== */

.fit-line {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFF;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.matchups { display: grid; gap: 12px; margin-bottom: 30px; }
.matchup { display: flex; gap: 14px; border: 1px solid var(--line); padding: 16px; }
.matchup-art {
  flex: 0 0 auto;
  width: 68px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #08080A 0 5px, #101013 5px 10px);
  border: 1px solid var(--line);
}
.matchup-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.matchup-body { flex: 1; min-width: 0; }
.matchup .kicker { font-size: 10px; margin-bottom: 10px; color: var(--bone-dim); }
.matchup-name {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.matchup p { font-size: 14px; line-height: 1.6; color: var(--bone-soft); }

.result-actions { display: flex; flex-direction: column; padding-bottom: 14px; }
.inbox-note { padding-bottom: 32px; max-width: 46ch; }

.result-body .reveal-item { opacity: 0; }
.result-body.revealed .reveal-item { animation: statIn 0.5s var(--ease) both; }
@keyframes statIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Per-archetype accent ===== */

body.result-slasher { --accent: var(--slasher); --accent-text: #000; }
body.result-stoic   { --accent: var(--stoic);   --accent-text: var(--stoic-text); }
body.result-joker   { --accent: var(--joker);   --accent-text: #000; }
body.result-sleeper { --accent: var(--sleeper); --accent-text: #000; }
body.result-cornerwoman { --accent: var(--cornerwoman); --accent-text: #000; }

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 760px) {
  :root { --gutter: 72px; }

  .screen { max-width: 620px; }
  #screen-result { max-width: 760px; }

  .scrim {
    background:
      linear-gradient(to right, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.62) 40%, rgba(0, 0, 0, 0.06) 74%, rgba(0, 0, 0, 0.4) 100%),
      linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent 48%),
      radial-gradient(120% 90% at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.7) 100%);
  }

  .roster { grid-template-columns: repeat(5, 1fr); }
  .roster .record:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: 100%; }
  /* the panel opens to the right of the cards once there's room for it */
  .roster-view { grid-template-columns: minmax(0, 1fr) 0fr; gap: 0; transition: grid-template-columns 0.5s var(--ease), gap 0.5s var(--ease); }
  .roster-view:has(.roster-panel.open) { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
  .roster-panel { max-height: none; }
  .roster-panel.open { max-height: none; }
  #screen-roster { max-width: 860px; }
  .dossier .record { width: 168px; flex: 0 0 168px; }
  .charts { grid-template-columns: 1fr 1fr; align-items: start; gap: 18px; }
  .split { grid-template-columns: 1fr 1fr; gap: 30px; }
  /* the two columns lose their own bottom margin so they stay top-aligned, so
     the container carries the gap to whatever follows */
  .split .section { margin-bottom: 0; }
  #result-split { margin-bottom: 48px; }
  .matchups { grid-template-columns: 1fr 1fr; }
  .result-actions { flex-direction: row; gap: 10px; }
  .btn + .btn { margin-top: 0; }
  .result-actions .btn { flex: 1; }
  #email-form { flex-direction: row; }
  #name-input,
#email-input { flex: 1; }
  #email-form .btn { width: auto; white-space: nowrap; }
}

@media (hover: hover) {
  .menu-item:hover { color: #FFF; }
  .menu-item:hover::before { height: 1.15em; opacity: 1; }
  .menu-item:hover::after { opacity: 1; transform: scaleX(1); }
  .option-btn:hover { border-left-color: var(--accent); transform: translateX(5px); }
  .option-btn:hover .cursor-mark { opacity: 1; transform: translateX(0); }
  .btn:hover { border-color: var(--accent); color: #FFF; background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .btn-primary:hover { filter: brightness(1.1); background: var(--accent); color: var(--accent-text); }
  .record:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-still { animation: none; }
  .rain, .bloom, .cut { display: none; }
  .btn-game::after { display: none; }
  .result-body .reveal-item { opacity: 1; }
  .radar-shape { transform: scale(1); }
}