/* ============================================================
   Fuelvember: the campaign page, the game stage and its screens.
   Reads the theme's tokens (main.css) and falls back to the same
   values, so the stage also renders on its own in the prototype.
   ============================================================ */

.fv-page {
  /* The game's width: 9:16 inside the height fv-game.js measured, at most
     460px. A definite size, so the hero grid can give it a column of its own
     rather than shrinking it to its minimum. */
  --fv-w: min(460px, calc(var(--fv-fit-h, calc(100svh - 7rem)) * 9 / 16));
  --fv-violet: var(--violet, #9B23D4);
  --fv-magenta: var(--magenta, #E530B5);
  --fv-ink: var(--ink, #1E1233);
  --fv-ink-2: var(--ink-2, #4C3D66);
  --fv-muted: var(--muted, #7C6B94);
  --fv-paper: var(--paper, #F5ECFA);
  --fv-surface: var(--surface, #FFFFFF);
  --fv-hairline: var(--hairline, #E7D8F2);
  --fv-grad: var(--grad, linear-gradient(120deg, #E056FD 0%, #E530B5 100%));
  --fv-r: var(--r, 16px);
  --fv-pad: var(--pad, clamp(1.1rem, 4vw, 2.25rem));
  --fv-maxw: var(--maxw, 76rem);
  color: var(--fv-ink);
}

.fv-page *,
.fv-page *::before,
.fv-page *::after {
  box-sizing: border-box;
}

.fv-wrap {
  max-width: var(--fv-maxw);
  margin-inline: auto;
  padding-inline: var(--fv-pad);
}

/* ---------------- hero: copy beside the game ---------------- */

.fv-hero {
  padding-block: clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(60rem 30rem at 85% 10%, #E530B51F, transparent 60%),
    radial-gradient(40rem 24rem at 10% 90%, #9B23D41A, transparent 60%);
}

.fv-hero .fv-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fv-w);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.fv-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .9rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: #E530B514;
  color: var(--fv-magenta);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fv-h1 {
  margin: 0 0 .75rem;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.03em;
}

.fv-h1 span {
  background: var(--fv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-lede {
  margin: 0 0 1.25rem;
  max-width: 34rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--fv-ink-2);
}

.fv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv-chips li {
  padding: .45rem .8rem;
  border: 1px solid var(--fv-hairline);
  border-radius: 999px;
  background: var(--fv-surface);
  font-size: .9rem;
  font-weight: 700;
}

/* ---------------- the stage ---------------- */

/* --fv-fit-h is set by fv-game.js: the screen height without browser bars,
   minus the site's sticky header. 9:16 inside it, so the whole game is in
   view on arrival on any phone. */
.fv {
  width: min(100%, var(--fv-w));
  min-width: 250px;
  margin-inline: auto;
}

.fv-stage {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  scroll-margin-top: calc(var(--header-h, 84px) + 10px);
  border-radius: 28px;
  background: #FFE9F5;
  box-shadow: 0 0 0 6px var(--fv-ink), 0 0 0 7px #3D2A63, 0 30px 60px -20px #1E123366, 0 18px 46px -14px #9B23D455;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.fv-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.fv-flash {
  margin: 0 0 .75rem;
  padding: .6rem .85rem;
  border-radius: 12px;
  background: #E530B51A;
  color: var(--fv-ink);
  font-size: .9rem;
  font-weight: 650;
  text-align: center;
}

.fv-flash[hidden] {
  display: none;
}

.fv-noscript {
  position: absolute;
  inset: auto 16px 40%;
  margin: 0;
  padding: .8rem;
  border-radius: 12px;
  background: #1E1233E6;
  color: #FFFFFF;
  text-align: center;
}

.fv-controls {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--fv-muted);
}

.fv-sound,
.fv-exit {
  position: absolute;
  top: calc(var(--fv-top, 0px) + 26px);
  right: calc(var(--fv-side, 0px) + 12px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1E1233A6;
  color: #FFFFFF;
  cursor: pointer;
}

.fv-sound svg,
.fv-exit svg {
  width: 18px;
  height: 18px;
}

/* The start button, over the canvas's start screen at three quarters of the
   playfield's height, wherever the playfield sits on the screen. */
.fv-start {
  position: absolute;
  left: 50%;
  top: calc(var(--fv-top, 0px) + (100% - 2 * var(--fv-top, 0px)) * .755);
  z-index: 2;
  width: min(90%, 340px);
  /* Scales with the stage, so on the smallest phones it stays clear of the
     "1 tower = 1% off" line above it. */
  min-height: clamp(40px, 14cqi, 56px);
  padding: .45rem .8rem;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFE45C 0%, #FFB547 100%);
  color: #1E1233;
  font: inherit;
  font-size: clamp(11px, 4.6cqi, 20px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px #E530B5, 0 12px 28px -6px #9B23D4CC;
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: fv-pulse 1.5s ease-in-out infinite;
}

.fv-start[hidden] {
  display: none;
}

.fv-start::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 30%;
  background: linear-gradient(90deg, #FFFFFF00, #FFFFFFB3, #FFFFFF00);
  transform: skewX(-20deg);
  animation: fv-shine 2.6s ease-in-out infinite;
}

.fv-start:focus-visible {
  outline: 3px solid #25F4EE;
  outline-offset: 4px;
}

@keyframes fv-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes fv-shine {
  0%, 55% { left: -40%; }
  100% { left: 120%; }
}

/* Only in full screen, beside the sound button. */
.fv-exit {
  display: none;
  right: calc(var(--fv-side, 0px) + 56px);
}

/* ---------------- full screen on a phone, while playing ---------------- */

html.fv-focus,
html.fv-focus body {
  overflow: hidden;
  overscroll-behavior: none;
}

.fv-stage.is-focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  width: 100%;
  height: 100%;
  height: 100dvh;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: #1E1233;
}

.fv-stage.is-focus .fv-exit {
  display: grid;
}

/* A phone on its side: the game is portrait. */
.fv-rotate {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .fv-rotate {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    background: #1E1233F2;
    color: #FFFFFF;
    font-weight: 800;
    text-align: center;
  }
}

.fv-sound .fv-sound-off,
.fv-sound.is-muted .fv-sound-on {
  display: none;
}

.fv-sound.is-muted .fv-sound-off {
  display: block;
}

.fv-sound:focus-visible,
.fv-exit:focus-visible,
.fv-btn:focus-visible,
.fv-link:focus-visible {
  outline: 3px solid #25F4EE;
  outline-offset: 2px;
}

/* ---------------- screens over the game ---------------- */

.fv-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: end center;
  padding: 14px;
  background: linear-gradient(180deg, #1E123300 30%, #1E1233AA 100%);
  animation: fv-fade .2s ease-out;
}

.fv-layer[hidden] {
  display: none;
}

.fv-card {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 18px 18px 14px;
  border-radius: 22px;
  background: #1E1233EB;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  text-align: center;
  box-shadow: 0 20px 40px -12px #00000080;
  animation: fv-rise .28s cubic-bezier(.2, .9, .3, 1.2);
}

.fv-eyebrow {
  margin: 0 0 .3rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FF9BE6;
}

.fv-title {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 800;
  color: #FFFFFF;
}

.fv-result {
  margin: 0;
  line-height: 1;
}

.fv-big {
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, #FFE45C, #FF7AD9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-off {
  font-size: 1.1rem;
  font-weight: 800;
}

.fv-sub,
.fv-best,
.fv-body,
.fv-note {
  margin: .4rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: #E9DDF6;
}

.fv-best {
  font-weight: 700;
  color: #FFE45C;
}

.fv-note {
  margin: .25rem 0 .5rem;
}

.fv-fine {
  margin: .8rem 0 0;
  font-size: .74rem;
  line-height: 1.4;
  color: #B9A6D3;
}

.fv-actions,
.fv-shop {
  display: grid;
  gap: 8px;
  margin-top: .9rem;
}

.fv-shop {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .7rem 1rem;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.fv-btn:active {
  transform: scale(.97);
}

.fv-btn[disabled] {
  opacity: .7;
  cursor: progress;
}

.fv-btn--primary {
  background: linear-gradient(120deg, #E056FD 0%, #E530B5 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px -10px #E530B5;
}

.fv-btn--primary:hover {
  filter: brightness(1.08);
  color: #FFFFFF;
}

.fv-btn--ghost {
  background: transparent;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF59;
}

.fv-btn--soft {
  background: #FFFFFF1F;
  color: #FFFFFF;
}

.fv-shop .fv-btn {
  font-size: .9rem;
  padding-inline: .4rem;
}

.fv-link {
  display: block;
  margin: .7rem auto 0;
  padding: .2rem;
  border: 0;
  background: none;
  color: #FF9BE6;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fv-card--claim {
  text-align: left;
}

.fv-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: #E9DDF6;
}

.fv-input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 2px solid #FFFFFF33;
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--fv-ink, #1E1233);
  font: inherit;
  font-size: 16px;
}

.fv-input:focus {
  outline: none;
  border-color: #E056FD;
  box-shadow: 0 0 0 3px #E056FD55;
}

.fv-check {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin: .75rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: #E9DDF6;
  cursor: pointer;
}

.fv-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #E530B5;
}

.fv-error {
  margin: .6rem 0 0;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: #FE2C5526;
  color: #FFC2CF;
  font-size: .85rem;
  line-height: 1.4;
}

.fv-error[hidden] {
  display: none;
}

/* Hidden from people, irresistible to bots. */
.fv-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@keyframes fv-fade {
  from { opacity: 0; }
}

@keyframes fv-rise {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
}

/* ---------------- sections below the game ---------------- */

.fv-section {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.fv-section + .fv-section {
  border-top: 1px solid var(--fv-hairline);
}

.fv-h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -.02em;
}

.fv-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fv-step;
}

.fv-steps li {
  position: relative;
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--fv-hairline);
  border-radius: var(--fv-r);
  background: var(--fv-surface);
  counter-increment: fv-step;
}

.fv-steps li::before {
  content: counter(fv-step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: .7rem;
  border-radius: 50%;
  background: var(--fv-grad);
  color: #FFFFFF;
  font-weight: 900;
}

.fv-steps h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
}

.fv-steps p {
  margin: 0;
  color: var(--fv-ink-2);
  font-size: .95rem;
  line-height: 1.5;
}

.fv-zones {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.fv-zones li {
  padding: .75rem .6rem;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.fv-zones li span {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  opacity: .85;
}

.fv-zones li:nth-child(1) { background: linear-gradient(135deg, #FFB37A, #FF7FB8); }
.fv-zones li:nth-child(2) { background: linear-gradient(135deg, #FF7FB8, #E530B5); }
.fv-zones li:nth-child(3) { background: linear-gradient(135deg, #E530B5, #6A20B4); }
.fv-zones li:nth-child(4) { background: linear-gradient(135deg, #3A1A78, #1BA9C9); }
.fv-zones li:nth-child(5) { background: linear-gradient(135deg, #150B30, #2BB585); }

.fv-rules {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 46rem;
}

.fv-rules li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.55;
  color: var(--fv-ink-2);
}

.fv-rules li::before {
  content: "🔥";
  position: absolute;
  left: 0;
  top: 0;
  font-size: .95rem;
}

.fv-faq {
  max-width: 46rem;
}

.fv-faq details {
  border-bottom: 1px solid var(--fv-hairline);
}

.fv-faq summary {
  padding: 1rem 2rem 1rem 0;
  position: relative;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.fv-faq summary::-webkit-details-marker {
  display: none;
}

.fv-faq summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: .85rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fv-magenta);
}

.fv-faq details[open] summary::after {
  content: "–";
}

.fv-faq details p {
  margin: 0 0 1rem;
  color: var(--fv-ink-2);
  line-height: 1.6;
}

.fv-terms {
  max-width: 46rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--fv-muted);
}

.fv-terms h2 {
  font-size: 1rem;
  margin: 0 0 .5rem;
  color: var(--fv-ink-2);
}

.fv-terms ol {
  margin: 0;
  padding-left: 1.2rem;
}

/* ---------------- small screens: the game first ---------------- */

@media (max-width: 860px) {
  .fv-hero {
    padding-top: .75rem;
  }

  .fv-hero .fv-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  /* Visitors arrive from TikTok on a phone: the game goes first, the
     explanation right under it. The heading stays first in the markup. */
  .fv-hero .fv {
    order: -1;
  }

  .fv-hero-copy {
    text-align: center;
  }

  .fv-lede {
    margin-inline: auto;
  }

  .fv-chips {
    justify-content: center;
  }

  .fv-steps {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .fv-zones li:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .fv-stage {
    border-radius: 20px;
    box-shadow: 0 0 0 3px var(--fv-ink), 0 16px 32px -16px #1E123366;
  }

  .fv-controls {
    display: none;
  }
}

/* A small stage gets compact screens, so a card never needs scrolling. */
@container (max-width: 340px) {
  .fv-card {
    padding: 14px 14px 12px;
    border-radius: 18px;
  }

  .fv-big {
    font-size: 2.6rem;
  }

  .fv-title {
    font-size: 1.05rem;
    margin-bottom: .5rem;
  }

  .fv-btn {
    min-height: 42px;
    font-size: .95rem;
  }

  .fv-actions,
  .fv-shop {
    margin-top: .65rem;
  }

  .fv-fine {
    margin-top: .55rem;
  }
}

/* The site-wide promo banner competes with the game for the first screen. */
.page-template-page-fuelvember .lbanner {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fv-layer,
  .fv-card,
  .fv-start,
  .fv-start::after {
    animation: none;
  }
}