/* Layout concept: phones, held upright, only. One liquid layout sizes itself from the space
   available (fluid clamp() type and spacing, container queries, dynamic viewport units), so any
   phone from 280 px to the largest gets the same design without per-device versions. The 9:16
   playfield takes the largest size that fits, with the controls under it. A phone turned
   sideways stays upright: locked where the browser allows it, counter-rotated where it doesn't
   (see the end of this file).

   Visual language (one system everywhere): deep navy chrome, warm ivory content cards,
   sunshine-yellow primary actions, bold rounded-sans headings. Where a dark section meets an
   ivory one they interlock with opposing curves — see the .oc component. */
:root {
  /* design tokens */
  --navy: #101B3E;        /* chrome, headers, dark sections */
  --navy-deep: #0A1230;   /* page behind everything */
  --ivory: #FCF8EE;       /* content cards */
  --ivory-dim: #F3EDDD;   /* tiles and wells on ivory */
  --ivory-line: #E4DDC8;  /* borders on ivory */
  --yellow: #FFD23E;      /* the one primary-action color */
  --yellow-deep: #F2B61B;
  --ink: #15213F;         /* text on ivory and yellow */
  --ink-soft: #5A6378;    /* supporting text on ivory */
  --text: #F4F6FF;        /* text on navy */
  --muted: #AEB7DE;       /* supporting text on navy */
  --line: #2C3780;        /* borders on navy */
  --blue: #2EC4FF;        /* focus ring, live accents */
  --coral: #FF6B4A;
  --gold: #FFC93C;        /* in-game glow color (canvas-adjacent) */
  --ok: #157A3C;          /* success on ivory */
  --ok-bright: #7CF2A4;   /* success on navy */
  --err: #C2301C;         /* validation on ivory */
  --font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* fluid spacing: grows with the screen, never device-specific */
  --gutter: clamp(10px, 2.6vw, 32px);
  --pad: clamp(18px, 5.4cqi, 24px); /* side padding inside content sections */
  --gap: clamp(8px, 1.6vw, 18px);
  --radius-l: clamp(20px, 3.2vw, 36px);
  --oc-r: clamp(30px, 9cqi, 44px); /* the opposing-curve radius */
  --safe-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --safe-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --safe-b: max(var(--gutter), env(safe-area-inset-bottom, 0px));
  --uh: 1dvh; /* 1% of the upright screen height (see .turned) */
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 0.95rem + 0.2vw, 18px); /* every rem size scales with it */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); }

.app { min-height: 100%; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 110%, #1A2150 0%, var(--navy-deep) 60%); }

/* ---------- the opposing-curve seam (reusable) ----------
   A dark section (.oc-head) sits on an ivory one (.oc-body). The dark section gets a large
   rounded BOTTOM-LEFT corner, the ivory one a large rounded TOP-RIGHT corner, and a straight
   horizontal line connects them. The ivory quarter behind the dark corner is painted by the
   body's ::before; the navy behind the ivory corner is the page itself. Give both sections
   enough padding (var(--pad) and the extra bottom/top) to keep text away from the curves. */
.oc-head { position: relative; z-index: 2; background: var(--navy); border-radius: 0 0 0 var(--oc-r); }
.oc-body { position: relative; z-index: 1; background: var(--ivory); color: var(--ink); border-radius: 0 var(--oc-r) var(--radius-l) var(--radius-l); }
.oc-body::before { content: ""; position: absolute; top: calc(-1 * var(--oc-r)); left: 0; width: calc(var(--oc-r) * 2); height: calc(var(--oc-r) + 1px); background: var(--ivory); }
.oc-head > * { position: relative; } /* content above the artwork layer */

/* ---------- brand bar ---------- */
/* Compact navy menu bar: the game wordmark, sound, Request a Call */
.topbar { background: var(--navy); position: relative; z-index: 30; }
.topbar { container: topbar / inline-size; padding-top: env(safe-area-inset-top, 0px); }
.topbar-inner {
  margin: 0 auto; display: flex; align-items: center; gap: var(--gap);
  padding-block: clamp(6px, 1.2vh, 12px);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
}
.logo-chip { flex: none; display: flex; } /* the Debt Blaster wordmark, straight on the navy bar */
/* the logo scales with the width but never takes too much of a short screen */
.logo-chip img { height: clamp(34px, min(10vw, 5.4vh), 48px); width: auto; display: block; }
.topbar-inner { flex-wrap: wrap; }
.status { order: 3; margin: 0; flex: 1 0 100%; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.08); }
.status-text { min-width: 0; overflow-wrap: anywhere; }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9AA2BE; }
.status[data-tone="ok"] .status-dot { background: #4CCB7E; }
.status[data-tone="live"] { color: #FFFFFF; font-weight: 700; }
.status[data-tone="live"] .status-dot { background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,210,62,0.25); }
.status[data-tone="warn"] .status-dot { background: var(--coral); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.1);
  color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,0.18); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .i-off { display: none; }
.icon-btn[aria-pressed="false"] .i-on { display: none; }
.icon-btn[aria-pressed="false"] .i-off { display: block; }
.text-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: #FFFFFF; color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; }
.text-btn:hover { background: var(--ivory); }

/* ---------- main column ---------- */
.main {
  flex: 1; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gutter);
  padding: var(--gutter) var(--safe-r) var(--safe-b) var(--safe-l);
}
/* height left for a view once the header and gutters are taken (set by app.js as the header resizes) */
.main { --view-h: calc(100 * var(--uh) - var(--topbar-h, 72px) - 2 * var(--gutter)); }

/* ---------- buttons ---------- */
.lede { margin: 0; color: var(--muted); max-width: 42ch; }
.landing-actions { display: flex; flex-direction: column; gap: 10px; }
.proto-note { margin: 0; font-size: 0.8125rem; color: var(--blue); }
.btn-primary, .btn-secondary {
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0; font-weight: 700; font-size: 1.0625rem; cursor: pointer; font-family: var(--font-body); letter-spacing: 0.01em;
}
/* one primary action per screen: always sunshine yellow with dark text */
.btn-primary { background: var(--yellow); color: var(--ink); box-shadow: 0 8px 22px rgba(242,182,27,0.28); }
@media (hover: hover) { .btn-primary:hover { background: #FFC722; } }
.btn-primary:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.btn-secondary { background: #FFFFFF; color: var(--ink); border: 1px solid var(--ivory-line); }
@media (hover: hover) { .btn-secondary:hover { background: var(--ivory); } }
/* ghost adapts to the surface it sits on */
.btn-ghost { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: transparent; color: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.btn-ghost:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.talk-now { border-radius: 999px; }

/* ---------- landing hero: dark headline section over an ivory action section ---------- */
.hero { container: hero / inline-size; display: flex; flex-direction: column; min-height: max(var(--view-h), 300px); border-radius: var(--radius-l); }
.hero-head {
  overflow: hidden; isolation: isolate; border-radius: var(--radius-l) var(--radius-l) 0 var(--oc-r);
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  min-height: clamp(220px, calc(46 * var(--uh)), 560px);
  padding: var(--pad) var(--pad) calc(var(--oc-r) * 0.55 + 10px);
  text-align: center; color: #FFFFFF; text-shadow: 0 2px 14px rgba(5,9,26,0.55);
  background: #0B1433 url("assets/landing-scene.webp") center top / cover no-repeat;
}
.hero-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,9,26,0) 30%, rgba(10,18,48,0.55) 64%, rgba(10,18,48,0.92) 100%); }
.hero-body {
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, calc(1.6 * var(--uh)), 16px);
  padding: clamp(16px, calc(var(--oc-r) * 0.5), 26px) var(--pad) clamp(18px, calc(3 * var(--uh)), 32px);
  text-align: center;
}
.hero-body::before { background: var(--ivory); }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, calc(1 * var(--uh)), 10px); width: 100%; max-width: 46rem; }
.hero h1 { margin: 0; display: flex; justify-content: center; }
.landing-title { width: min(86cqi, 26rem); max-height: calc(18 * var(--uh)); object-fit: contain; height: auto; display: block; filter: drop-shadow(0 1cqi 2.4cqi rgba(5,9,26,0.55)); }
.landing-sun { align-self: center; width: min(66cqi, 20rem); max-height: calc(26 * var(--uh)); object-fit: contain; height: auto; display: block; margin: -1cqi 0; pointer-events: none; }
.hero .lede { margin: 0; max-width: 34ch; color: rgba(255,255,255,0.86); font-size: clamp(0.9375rem, min(3.6cqi, calc(2.3 * var(--uh))), 1.25rem); line-height: 1.5; text-wrap: pretty; }
.hero .landing-actions { width: 100%; max-width: 22rem; }
.hero .landing-actions > * { white-space: nowrap; padding-inline: clamp(14px, 3cqi, 24px); }
.hero .proto-note { color: #1478D4; }
/* the landing page has its own artwork; the header returns once the game opens */
.app[data-view="landing"] .topbar { display: none; }
/* the request form opens under the hero, readable width on any screen */
.landing-intake { width: 100%; max-width: 40rem; margin-inline: auto; }
.talk-now { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 2px solid var(--ok); color: var(--ok); font-weight: 800; text-decoration: none; }
.hero-head .talk-now { border-color: var(--ok-bright); color: var(--ok-bright); }

/* ---------- shared fields (always on ivory) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field[hidden] { display: none; }
.field label { font-weight: 700; font-size: 0.9375rem; }
.field input, .in-select {
  min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid #D5CDB6; background: #FFFFFF; color: var(--ink); font-size: 1rem; width: 100%;
}
.field input::placeholder { color: #9AA0B0; }
.field input:focus-visible, .in-select:focus-visible { outline: 3px solid var(--navy); outline-offset: 0; border-color: var(--navy); }
.field input[aria-invalid="true"] { border-color: var(--err); }
.field-error { margin: 0; color: var(--err); font-size: 0.875rem; font-weight: 600; }

/* ---------- the question card (one ivory component everywhere) ---------- */
.im-intake { display: flex; flex-direction: column; gap: 12px; text-align: left; padding: var(--pad); border-radius: 22px; background: var(--ivory); border: 1px solid var(--ivory-line); color: var(--ink); }
.im-intake[hidden] { display: none; }
/* inside an ivory .oc-body it is part of the card, not a card of its own */
.oc-body .im-intake { background: none; border: 0; padding: 0; border-radius: 0; }
.in-head { display: flex; flex-direction: column; gap: 3px; }
.in-eyebrow { margin: 0; font-weight: 800; font-size: 0.8125rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.in-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.22; }
.in-note, .in-hint { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.in-saved { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ok); min-height: 1.2em; }
.in-preview { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 0.8125rem; font-weight: 700; color: #FFFFFF; background: var(--navy); }
.in-q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.in-q-label { padding: 0; font-weight: 700; font-size: 0.9375rem; margin-bottom: 2px; }
.in-opts { display: flex; flex-direction: column; gap: 8px; }
/* answer options: ivory-white cards; the chosen one turns yellow with dark text */
.in-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--ivory-line); background: #FFFFFF; cursor: pointer; font-size: 0.9375rem; }
.in-opt:hover { border-color: #C9BFA3; }
.in-opt:has(input:checked) { border-color: var(--yellow-deep); background: var(--yellow); font-weight: 600; }
.in-opt:has(input:checked) .in-consent { color: #574410; }
.in-opt input, .in-check input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; margin: 0; }
.in-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; cursor: pointer; }
.in-check input { margin-top: 1px; }
.in-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.in-actions > * { flex: 1 1 auto; }
.in-edit { min-height: 36px; min-width: 44px; border-radius: 10px; border: 1px solid var(--ivory-line); background: transparent; color: #1478D4; font-weight: 700; cursor: pointer; }
.qcard { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.qcard .in-actions .btn-primary { flex: 2 1 10rem; }
.in-opts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 8px; }
.in-phone { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--ivory-dim); border: 1px solid var(--ivory-line); }
.in-phone-label { color: var(--ink-soft); font-size: 0.875rem; }
.in-phone strong { font-size: 1.0625rem; letter-spacing: 0.02em; }
.in-phone .in-edit { margin-left: auto; }
.qpanel { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ivory-line); }
.qrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qrow-sum { color: var(--ink-soft); font-size: 0.875rem; overflow-wrap: anywhere; }
.credit { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; border: 1px dashed #C9BFA3; }
.credit-go { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* the break screen: an information step (checkpoint), the reward and upgrade, or the ad page */
.spotlight[data-mode="level"][data-step="checkpoint"] .im-cash, .spotlight[data-mode="level"][data-step="checkpoint"] .promo,
.spotlight[data-mode="level"][data-step="checkpoint"] .im-upgrades, .spotlight[data-mode="level"][data-step="checkpoint"] .sp-continue { display: none; }
.spotlight[data-mode="level"][data-step="checkpoint"] .im-title { font-size: clamp(1.1rem, 5.4cqi, 1.5rem); }
.spotlight[data-mode="level"][data-step="upgrade"] .promo,
.spotlight[data-mode="level"][data-step="ad"] .im-cash, .spotlight[data-mode="level"][data-step="ad"] .im-upgrades { display: none; }
.spotlight[data-mode="level"][data-step="ad"] .im-title { font-size: clamp(1.25rem, 6cqi, 1.75rem); }
.spotlight[data-mode="level"][data-step="ad"] .promo { padding: 22px 18px 24px; gap: 12px; }
.spotlight[data-mode="level"][data-step="ad"] .promo-sun { width: 104px; height: 104px; }
.spotlight[data-mode="panel"] .im-cash, .spotlight[data-mode="panel"] .promo,
.spotlight[data-mode="panel"] .im-upgrades { display: none; }
/* with the reward hidden, the dark head is a compact strip */
.spotlight[data-mode="level"][data-step="checkpoint"] .sp-head, .spotlight[data-mode="panel"] .sp-head { padding-bottom: calc(var(--oc-r) * 0.45 + 6px); }

/* ---------- game ---------- */
/* The view fills the screen height. The playfield box (.stage-fit) takes whatever space is left
   after the controls, and the 9:16 stage is the largest that fits inside it (contain sizing).
   The decorative curves stay outside this playfield. */
.view-game {
  container: game / size;
  height: max(var(--view-h), 220px);
}
.play-layout { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: var(--gap); justify-items: center; }
.view-game[hidden] { display: none; }
.stage-fit { container: fit / size; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.stage {
  position: relative; aspect-ratio: 9 / 16;
  width: min(100%, calc((100vh - 230px) * 9 / 16)); /* fallback for browsers without container units */
  width: min(100cqw, 100cqh * 9 / 16); height: auto;
  border-radius: clamp(10px, 2.4cqh, 22px); overflow: hidden; background: #070B24; border: 1px solid var(--line);
  container: stage / inline-size;
}
.play-side { width: min(100%, 30rem); display: flex; flex-direction: column; gap: var(--gap); align-items: center; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.controls { container: controls / inline-size; width: 100%; max-width: 30rem; display: flex; gap: var(--gap); }
.btn-pause { flex: 1; min-height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: var(--text); font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-pause:hover { background: rgba(255,255,255,0.14); }
.btn-pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.landing-legal { margin: 0.75rem 0 0; text-align: center; font-size: 0.75rem; }
.landing-legal a, .in-hint a { color: inherit; text-decoration: underline; }
.disclaimer { margin: 0; max-width: 30rem; text-align: center; font-size: 0.75rem; color: var(--muted); }

/* ---------- overlays (HTML, outside the canvas): ivory panels on a dark scrim ---------- */
.overlay { position: absolute; inset: 0; background: rgba(7,11,36,0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: safe center; justify-content: center; padding: clamp(10px, 5cqi, 24px); overflow-y: auto; }
.overlay-body { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: clamp(8px, 3cqi, 14px); text-align: center; background: var(--ivory); color: var(--ink); border-radius: var(--radius-l); padding: clamp(16px, 6cqi, 26px) var(--pad); box-shadow: 0 24px 60px rgba(2,4,16,0.5); }
.overlay h2 { margin: 0; font-weight: 800; font-size: clamp(1.25rem, 7.5cqi, 2rem); line-height: 1.15; }
.eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; }
.overlay .btn-secondary, .overlay .toggle { border-color: var(--ivory-line); }
.overlay .in-opt, .overlay .btn-secondary { background: #FFFFFF; }
.toggle { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--ink-soft); }
.toggle input { width: 20px; height: 20px; accent-color: var(--navy); }
.stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats div { background: var(--ivory-dim); border-radius: 12px; padding: 10px 6px; }
.stats dt { font-size: 0.6875rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.stats dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.overlay-call { background: rgba(7,11,36,0.9); }
.call-ring { align-self: center; width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 10px rgba(255,210,62,0.25), 0 0 0 22px rgba(255,210,62,0.1); }
.toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--ivory); color: var(--ink); border: 1px solid var(--ivory-line); font-weight: 600; font-size: 0.8125rem; white-space: nowrap; box-shadow: 0 10px 26px rgba(2,4,16,0.4); }

/* ---------- upgrade cards: ivory cards, navy icon tile, yellow selected state ---------- */
.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; align-items: center; text-align: left; width: 100%;
  padding: 12px 40px 12px 12px; border-radius: 18px; border: 1px solid var(--ivory-line); background: #FFFFFF; color: var(--ink); cursor: pointer; min-height: 72px;
}
.card:hover, .card:focus-visible { border-color: var(--yellow-deep); }
.card-icon { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--yellow); }
.card-icon svg { width: 26px; height: 26px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card[data-kind="path"][data-id="chain"] .card-icon { color: var(--blue); }
.card-title { font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-key { font-size: 0.6875rem; color: var(--ink-soft); font-weight: 700; }
.card-tag { font-size: 0.75rem; font-weight: 800; color: #B07B00; text-transform: uppercase; letter-spacing: 0.06em; }
.card-desc { grid-column: 2; font-size: 0.8125rem; color: var(--ink-soft); }
.card[aria-pressed="true"] { border-color: var(--yellow-deep); background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow-deep) inset; }
.card[aria-pressed="true"] .card-desc { color: #574410; }
.card[aria-pressed="true"] .card-tag { color: #7A5600; }
.card-kind { grid-column: 2; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.card-check { display: none; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: 0.875rem; font-weight: 900; line-height: 26px; text-align: center; }
.card[aria-pressed="true"] .card-check { display: block; }
.card[aria-pressed="true"] .card-key { display: none; }
.controls > * { min-width: 0; }
.topbar-actions { flex-shrink: 0; }
.lbl-short { display: none; }
/* narrow header: tighter buttons, short label, status on one line */
@container topbar (max-width: 26rem) {
  .topbar .icon-btn { width: 40px; height: 40px; }
  .topbar .text-btn { min-height: 40px; padding: 0 12px; font-size: 13px; }
  .topbar .lbl-long { display: none; }
  .topbar .lbl-short { display: inline; }
  .logo-chip img { height: clamp(30px, 9vw, 40px); }
  .status { font-size: 12px; padding: 4px 8px; }
  .status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- developer panel (unstyled chrome, prototype only) ---------- */
.devpanel { margin: 0 var(--gutter) var(--gutter); border: 1px dashed #5C68B8; border-radius: 14px; background: rgba(17,25,71,0.6); font-size: 0.8125rem; }
.devpanel summary { padding: 12px 14px; cursor: pointer; color: var(--blue); font-weight: 700; }
.dev-grid { display: grid; gap: 12px; padding: 0 14px 14px; }
.devpanel fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 0; padding: 10px; min-width: 0; }
.devpanel legend { padding: 0 4px; font-weight: 700; }
.dev-note { margin: 0 0 8px; color: var(--muted); }
.dev-note code { color: var(--gold); }
.dev-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dev-buttons button { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: #19225C; color: var(--text); cursor: pointer; }
.dev-buttons label { display: inline-flex; gap: 6px; align-items: center; }
.dev-promos { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }
.dev-promos b { color: var(--text); font-weight: 700; }
.dev-log { margin: 0; padding-left: 20px; max-height: 180px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--muted); }
.dev-log li { overflow-wrap: anywhere; }
.dev-funnel { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }
.dev-funnel .on { color: var(--text); }
.dev-funnel b { color: var(--ok-bright); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* ---------- Sunshine spotlight: the full-screen break card ---------- */
.spotlight {
  position: fixed; inset: 0; z-index: 20; overflow: hidden auto;
  container: spot / inline-size;
  padding-top: var(--topbar-h, 64px);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
  background: var(--navy-deep);
  display: flex; align-items: flex-start; justify-content: center;
}
.sp-body { position: relative; width: 100%; max-width: 30rem; display: flex; flex-direction: column; align-items: stretch; text-align: center; padding-block: clamp(10px, calc(2 * var(--uh)), 24px) var(--safe-b); margin: 0 auto; }
/* the dark head: level result and reward, with the restrained landscape low in the corner */
.sp-head {
  display: flex; flex-direction: column; gap: 6px; overflow: hidden; isolation: isolate;
  padding: clamp(16px, calc(2.8 * var(--uh)), 32px) var(--pad) calc(var(--oc-r) * 0.6 + 12px);
  border-radius: var(--radius-l) var(--radius-l) 0 var(--oc-r);
}
.sp-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #0B1433 url("assets/scene.svg") center 36% / cover no-repeat; opacity: 0.5; }
.sp-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); }
.sp-main {
  display: flex; flex-direction: column; gap: var(--gap);
  padding: clamp(14px, calc(var(--oc-r) * 0.45), 22px) var(--pad) clamp(16px, calc(2.4 * var(--uh)), 26px);
  margin-bottom: clamp(10px, calc(2 * var(--uh)), 24px);
}
.sp-eyebrow { margin: 0; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); font-weight: 800; }
.sp-continue { margin-top: 4px; width: 100%; min-height: 56px; font-size: 1.125rem; position: sticky; bottom: 12px; box-shadow: 0 8px 24px rgba(7,11,36,0.35); }

/* between-level screen */
.im-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, min(7.5cqi, calc(5 * var(--uh))), 2.5rem); line-height: 1.08; letter-spacing: 0.01em; }
.im-cash { display: flex; flex-direction: column; gap: 2px; }
.im-cash-num { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, min(11cqi, calc(7 * var(--uh))), 3.75rem); line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.im-cash-unit { font-size: 0.45em; color: var(--text); letter-spacing: 0.04em; }
.im-cash-sub { margin: 0; font-size: 0.75rem; color: var(--muted); }

/* real-world service message: a warm sunshine card, clearly apart from the game rewards */
.promo {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: hidden;
  padding: 16px 16px 18px; border-radius: 22px; color: var(--ink); text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, #FFF4CF 0%, #FFE7A3 45%, #FFD27A 100%);
  box-shadow: 0 0 0 1px rgba(242,182,27,0.55), 0 14px 34px rgba(255,159,46,0.22);
}
.promo::before { /* slow sunrise rays behind the sun */
  content: ""; position: absolute; left: 50%; top: 64px; width: 360px; height: 360px; margin: -180px 0 0 -180px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.5) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%);
  animation: promo-rays 40s linear infinite;
}
.promo > * { position: relative; }
.promo-tag { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7A4A0A; }
.promo-draft { margin: 0; padding: 2px 10px; border-radius: 999px; border: 1px dashed rgba(138,36,18,0.6); color: #8A2412; font-size: 0.75rem; font-weight: 700; background: rgba(255,255,255,0.5); }
.promo-sun { width: 76px; height: 76px; margin: -2px 0 -6px; animation: promo-bob 3.2s ease-in-out infinite; }
.promo-headline { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.45rem, 7.6cqi, 2.1rem); line-height: 1.1; letter-spacing: 0.01em; color: #1B1446; text-wrap: balance; max-width: 22ch; }
.promo-body { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: #3A2B12; max-width: 32ch; text-wrap: pretty; }
.spotlight[data-mode="level"][data-step="ad"] .promo-headline { font-size: clamp(1.75rem, 9.5cqi, 2.6rem); }
.promo-nudge { margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(27,20,70,0.1); font-size: 0.875rem; font-weight: 700; color: #1B1446; }
.promo-compact { margin: 4px 0; padding: 12px 14px 14px; gap: 6px; }
.promo-compact .promo-sun { display: none; }
.promo-compact .promo-headline { font-size: clamp(1.15rem, 6cqi, 1.5rem); }
.promo-compact .promo-body { font-size: 0.875rem; }
.promo-disclosure { margin: 0; font-size: 0.75rem; line-height: 1.4; color: #5A4520; max-width: 40ch; }
.promo-explore, .promo-explore:hover { margin-top: 6px; width: 100%; max-width: 20rem; min-height: 48px; background: #1B1446; color: #FFFFFF; box-shadow: none; }
.promo-in .promo-headline, .promo-in .promo-body { animation: promo-rise 0.45s ease-out both; }
.promo-in .promo-body { animation-delay: 0.08s; }
@keyframes promo-rays { to { transform: rotate(360deg); } }
@keyframes promo-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes promo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo::before, .promo-sun, .promo-in .promo-headline, .promo-in .promo-body { animation: none; } }
.im-upgrades { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.im-upgrades h3 { margin: 0; font-weight: 800; font-size: 1.25rem; text-align: left; }
.im-pick-note { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); text-align: center; min-height: 1.2em; }
.promo-fine { margin: .6rem 0 0; font-size: .625rem; line-height: 1.3; opacity: .65; text-align: center; }

/* ---------- phone turned sideways where the screen can't be locked: keep the game upright ----------
   app.js adds .turned-ccw / .turned-cw from the device orientation. The whole app is drawn in
   the phone's upright shape and turned back by 90 degrees. --turn-w/--turn-h are the exact
   upright width/height (the sideways page's height/width). */
.turned body { overflow: hidden; }
.turned .app {
  position: fixed; top: 0; left: 0; width: var(--turn-w); height: var(--turn-h); min-height: 0; overflow: hidden auto;
  transform-origin: top left;
}
.turned-ccw .app { transform: translateY(var(--turn-w)) rotate(-90deg); }
.turned-cw .app { transform: translateX(var(--turn-h)) rotate(90deg); }
/* the upright height is the sideways width */
.turned { --uh: calc(var(--turn-h) / 100); }
/* the notch sits at the upright top, which is the sideways left or right edge */
.turned-ccw .topbar { padding-top: env(safe-area-inset-left, 0px); }
.turned-cw .topbar { padding-top: env(safe-area-inset-right, 0px); }
/* .spotlight is position: fixed, so inside the turned .app it covers the app box, as intended */

/* ---------- start screen (before the first wave) ----------
   Transparent in the middle so the big idle sun on the canvas shows through. Everything is sized
   from the playfield width (cqi of the stage container), so it looks the same on every phone. */
.start-screen {
  background: linear-gradient(180deg, rgba(5,9,26,0.78) 0%, rgba(5,9,26,0.15) 30%, rgba(5,9,26,0) 48%, rgba(5,9,26,0.2) 62%, rgba(5,9,26,0.9) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden;
  flex-direction: column; justify-content: space-between; align-items: stretch;
  padding: 8cqi 6cqi 6cqi; text-align: center;
}
.start-screen .overlay-body { background: none; color: var(--text); box-shadow: none; padding: 0; border-radius: 0; }
.start-top { display: flex; flex-direction: column; align-items: center; gap: 1cqi; }
.start-title { margin: 0; display: flex; justify-content: center; }
/* the supplied 3D wordmark */
.start-logo { width: min(88cqi, 30rem); max-height: calc(22 * var(--uh)); object-fit: contain; height: auto; display: block; filter: drop-shadow(0 1.2cqi 2.4cqi rgba(5,9,26,0.6)); }
/* the hero sun, cropped from the key art on a matching starfield; edges are feathered in the
   asset so it melts into the live night-sky canvas behind it */
.start-sun { align-self: center; width: min(96cqi, 34rem); max-height: calc(34 * var(--uh)); object-fit: contain; height: auto; display: block; margin: -2cqi 0; pointer-events: none; }
.start-tag { margin: 1.6cqi 0 0; font-size: max(9px, 3.5cqi); font-weight: 700; color: rgba(255,255,255,0.82); text-wrap: balance; }
.start-bottom { display: flex; flex-direction: column; align-items: center; gap: 3cqi; }
.btn-start {
  width: 100%; max-width: 78cqi; min-height: max(44px, 16cqi); border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 900; font-size: max(13px, 5.6cqi); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: linear-gradient(180deg, #FFE27A, #FFC93C 55%, #F29E1B);
  box-shadow: 0 1.6cqi 0 #B5650F, 0 3cqi 7cqi rgba(255,159,46,0.45); animation: start-pulse 1.6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.btn-start:active { transform: translateY(0.9cqi); box-shadow: 0 0.7cqi 0 #B5650F, 0 2cqi 5cqi rgba(255,159,46,0.4); }
@keyframes start-pulse { 0%, 100% { box-shadow: 0 1.6cqi 0 #B5650F, 0 3cqi 7cqi rgba(255,159,46,0.35); } 50% { box-shadow: 0 1.6cqi 0 #B5650F, 0 3cqi 10cqi rgba(255,201,60,0.8); } }
.start-new, .start-call { min-height: 44px; font-size: max(12px, 3.7cqi); color: var(--text); border-color: rgba(255,255,255,0.3); }
.start-best { margin: 0; font-size: max(10px, 3.3cqi); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok-bright); }
.start-note { margin: 0; max-width: 34ch; align-self: center; padding: 2cqi 3.5cqi; border-radius: 3cqi; background: rgba(5,9,26,0.62); font-size: max(10px, 3.3cqi); line-height: 1.4; font-weight: 600; color: rgba(255,255,255,0.92); text-align: center; text-wrap: balance; }
/* entrance */
.start-screen:not([hidden]) .start-top { animation: start-drop 0.5s cubic-bezier(.2,1.4,.4,1) both; }
.start-screen:not([hidden]) .start-bottom { animation: start-rise 0.45s 0.12s ease-out both; }
@keyframes start-drop { from { opacity: 0; transform: translateY(-24px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes start-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .btn-start, .start-screen .start-top, .start-screen .start-bottom { animation: none; } }

/* ---------- opened on a computer or tablet ----------
   It's a phone app, so a wide window shows it at phone width, centered, like a phone on the desk.
   The transform makes the app the box that fixed-position panels fill, so they stay inside it. */
@media (min-width: 600px) {
  html { background: #03060F; }
  :root { --uh: min(9.32px, 1dvh); }
  body {
    font-size: 16px; /* what a 430 px phone gets */ display: flex; flex-direction: column; align-items: center; min-height: 100%;
    background: radial-gradient(60% 50% at 50% 40%, #16204A 0%, #03060F 70%);
  }
  .app {
    width: 430px; max-width: 100%; height: min(932px, 100dvh); min-height: 0; overflow: hidden auto;
    flex: none; margin-top: max(0px, (100dvh - 932px) / 2); transform: translateZ(0); border-radius: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 80px rgba(0,0,0,0.6);
  }
  .app > * { flex-shrink: 0; }
  /* developer controls: below the phone, scroll down to reach them; the app itself is untouched */
  .devpanel { width: min(1100px, calc(100% - 48px)); margin: 32px auto 48px; flex: none; }
  .devpanel .dev-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .devpanel .dev-log-wrap { grid-column: 1 / -1; }
  .devpanel .dev-log { max-height: 260px; }
}
@media (min-width: 600px) and (max-height: 960px) { .app { border-radius: 0; } }

/* ---------- the ad page is a headliner: the headline gets the stage ---------- */
.spotlight[data-mode="level"][data-step="ad"] .sp-eyebrow,
.spotlight[data-mode="level"][data-step="ad"] .im-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spotlight[data-mode="level"][data-step="ad"] .sp-head { padding-bottom: calc(var(--oc-r) * 0.45 + 4px); }
.spotlight[data-mode="level"][data-step="ad"] .promo { padding: 18px 16px 22px; gap: 10px; }
.spotlight[data-mode="level"][data-step="ad"] .promo-sun { width: 64px; height: 64px; margin: -4px 0 -8px; }
.spotlight[data-mode="level"][data-step="ad"] .promo-headline { font-size: clamp(2rem, 11cqi, 2.9rem); line-height: 1.02; max-width: 16ch; }
.spotlight[data-mode="level"][data-step="ad"] .promo-body { font-size: 1rem; }
.promo-nudge { font-size: 0.8125rem; padding: 4px 12px; }
.promo-headline .hw { display: inline-block; }
.promo-in .promo-headline { animation: none; }
.promo-in .promo-headline .hw { animation: hw-punch 0.42s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
@keyframes hw-punch { from { opacity: 0; transform: scale(1.9) translateY(-6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .promo-in .promo-headline .hw { animation: none; } }

/* ---------- information steps ---------- */
.in-progress { display: flex; gap: 6px; margin: 2px 0 4px; }
.in-progress span { flex: 1; height: 6px; border-radius: 3px; background: #E7E0CC; }
.in-progress span.on { background: var(--navy); }
.in-progress span.now { background: var(--yellow-deep); }
.in-opts-cb { display: grid; grid-template-columns: 1fr; gap: 8px; }
.in-opts-cb .in-opt { padding: 10px 16px; align-items: flex-start; }
.in-opts-cb .in-opt input { margin-top: 2px; }
.in-opt-text { display: flex; flex-direction: column; gap: 3px; }
.in-consent { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-soft); font-weight: 500; }
.in-defer-note { margin-top: -4px; }
.in-leave { align-self: center; margin-top: 2px; background: none; border: 0; padding: 8px; color: var(--ink-soft); font: inherit; font-size: 0.875rem; text-decoration: underline; cursor: pointer; }
.qcall { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--ivory-line); }
.qcall strong { flex: 1 0 100%; }
.qcall .qrow-sum { flex: 1; }
.in-skip-top { align-self: flex-start; margin-top: 2px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ivory-line); background: #FFFFFF; color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.in-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* panels (Request a Call, My answers): the step card has its own primary action, so the
   screen-level button stays reachable (sticky) but steps back to a quiet secondary look */
.spotlight[data-mode="panel"] .sp-continue { background: #FFFFFF; color: var(--ink); border: 1px solid var(--ivory-line); box-shadow: 0 8px 22px rgba(7,11,36,0.22); }
@media (hover: hover) { .spotlight[data-mode="panel"] .sp-continue:hover { background: var(--ivory); } }

/* ---------- easing into the break screen ----------
   The jump from gameplay to a full-screen card was harsh. The screen now fades in while the
   card rises gently into place; the global reduced-motion rule above turns both off. */
.spotlight:not([hidden]) { animation: sp-fade 0.3s ease-out; }
.spotlight:not([hidden]) .sp-body { animation: sp-rise 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes sp-fade { from { opacity: 0; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(12px) scale(0.988); } }
/* the same soft entrance for the pause, run-over and call overlays */
.overlay:not([hidden]) { animation: sp-fade 0.25s ease-out; }
.overlay:not([hidden]) .overlay-body { animation: sp-rise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

/* ---------- Request a Call: the loudest button on every screen ----------
   Every call button shares one hot sunset treatment so it outshines the yellow
   play actions; the global reduced-motion rule turns the pulse off. */
#btn-contact, #btn-landing-contact, #btn-start-call, #btn-pause-call, #btn-over-call {
  background: linear-gradient(180deg, #FF8A4A 0%, #FF6B4A 55%, #E8482B 100%);
  color: #FFFFFF; border: 0; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35) inset, 0 8px 24px rgba(232,72,43,0.45);
  animation: call-glow 2s ease-in-out infinite;
}
#btn-landing-contact, #btn-pause-call, #btn-over-call { min-height: 54px; font-size: 1.0625rem; }
#btn-start-call { min-height: max(48px, 13cqi); font-size: max(13px, 4.4cqi); font-weight: 900; width: 100%; max-width: 70cqi; }
@media (hover: hover) { #btn-contact:hover, #btn-landing-contact:hover, #btn-start-call:hover, #btn-pause-call:hover, #btn-over-call:hover { background: linear-gradient(180deg, #FF9A5E 0%, #FF7A55 55%, #F05030 100%); } }
@keyframes call-glow { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.35) inset, 0 8px 24px rgba(232,72,43,0.4); } 50% { box-shadow: 0 0 0 2px rgba(255,255,255,0.45) inset, 0 8px 32px rgba(255,107,74,0.75); } }