/* pages-results.css — Name+gender page, result-char, result-video, car-choose, popups, topbar badge, story-intro2, dark story pages */

/* ═══════════════════════════════════════════════════
   NAME + GENDER PAGE
════════════════════════════════════════════════════ */
#page-name-gender-page {
  justify-content: flex-start;
  overflow: hidden;
  background: url('../assets/bg/BG2.jpg') center / cover no-repeat;
}

/* Hide 55 Tahun badge on name-gender page — not shown in mockup */
#page-name-gender-page .page-topbar-badge {
  display: none;
}

/* Intro text block */
.ngp-intro {
  width: 100%;
  padding: 4cqw clamp(54px, 13.5cqw, 346px) clamp(4px, 1cqw, 26px);
  flex-shrink: 0;
}

.ngp-intro-text {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 3.9cqw, 30px);
  font-weight: 350;
  line-height: 1.4;
  color: var(--page-text);
}

.ngp-intro-highlight {
  display: inline;
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(19px, 4.9cqw, 38px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--page-text);
}

/* Section wrapper (name / gender) */
.ngp-section {
  width: 100%;
  padding: 0 clamp(54px, 13.5cqw, 173px);
  flex-shrink: 0;
}

.ngp-label {
  display: block;
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(14px, 3.5cqw, 24px);
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: clamp(10px, 6cqw, 100px);
}

.ngp-field-wrap {
  width: 100%;
  position: relative;
}

/* Name input field (readonly, virtual-keyboard driven) */
.ngp-field {
  width: 100%;
  min-height: calc(8cqw + 2 * 0.8cqw);
  padding: 0.8cqw clamp(14px, 3.5cqw, 22px);
  background: var(--page-card-bg);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: clamp(40px, 12cqw, 80px);
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 2px;
  cursor: pointer;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ngp-field--active {
  border-color: var(--page-red);
}

.ngp-field-text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(13px, 3.3cqw, 22px);
  font-weight: 500;
  color: var(--page-text);
  word-break: break-all;
}

.ngp-field-placeholder {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(13px, 3.3cqw, 22px);
  font-weight: 350;
  color: rgba(0, 0, 0, 0.35);
}

.ngp-field-cursor {
  display: none;
  width: 2px;
  height: clamp(14px, 3.5cqw, 24px);
  background-color: var(--page-red);
  border-radius: 1px;
  margin-left: 1px;
  flex-shrink: 0;
  align-self: center;
  animation: cursor-blink 1s step-end infinite;
}

/* Gender dropdown — unified single-border container */
.ngp-dropdown-wrap {
  width: 100%;
  background: var(--page-card-bg);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: clamp(40px, 12cqw, 80px);
  overflow: hidden;          /* clips children to the rounded border */
  cursor: pointer;
  transition: border-color 0.15s, border-radius 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ngp-dropdown-wrap--open {
  border-color: var(--page-red);
  border-radius: clamp(16px, 4cqw, 24px);
}

/* Trigger row: always visible */
.ngp-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(8cqw + 2 * 0.8cqw);
  line-height: 1;
  padding: 0.8cqw clamp(14px, 3.5cqw, 22px);
}

.ngp-dropdown-text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(13px, 3.3cqw, 22px);
  font-weight: 350;
  color: rgba(0, 0, 0, 0.35);
  flex: 1;
}

.ngp-dropdown-text--selected {
  color: var(--page-text);
  font-weight: 500;
}

.ngp-dropdown-arrow {
  color: var(--page-red);
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.ngp-dropdown-wrap--open .ngp-dropdown-arrow {
  transform: rotate(180deg);
}

.ngp-dropdown-arrow svg {
  width: clamp(12px, 3cqw, 20px);
  height: auto;
}

/* Options list — hidden by default, shown inside the same border box */
.ngp-dropdown-menu {
  display: none;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.ngp-dropdown-wrap--open .ngp-dropdown-menu {
  display: block;
}

.ngp-dropdown-option {
  min-height: calc(8cqw + 2 * 0.8cqw);
  padding: 0.8cqw clamp(14px, 3.5cqw, 22px);
  display: flex;
  align-items: center;
  line-height: 1;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(13px, 3.3cqw, 22px);
  font-weight: 350;
  color: var(--page-text);
  cursor: pointer;
  transition: background 0.1s;
}

.ngp-dropdown-option:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.ngp-dropdown-option:active {
  background: rgba(0, 0, 0, 0.05);
}

/* Gender button group (replaces dropdown) */
.ngp-gender-btn-wrap {
  width: 100%;
  display: flex;
  gap: clamp(8px, 2cqw, 24px);
}

.ngp-gender-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(8cqw + 2 * 0.8cqw);
  padding: 0.8cqw clamp(8px, 2cqw, 14px);
  border-radius: clamp(40px, 12cqw, 80px);
  background: var(--page-card-bg);
  border: 2px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.18);
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(10px, 3.0cqw, 18px);
  font-weight: 350;
  line-height: 1;
  color: var(--page-text);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.ngp-gender-btn--selected {
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  color: #fff;
  font-weight: 600;
}

.ngp-gender-btn:active {
  opacity: 0.75;
}

/* Grows to fill remaining space and vertically centers the form fields */
.ngp-fields-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(21px, 8cqw, 115px);
  gap: clamp(23px, 10cqw, 167px);
}

/* ── Virtual keyboard popup overlay ─────────────────
   Slides up from the bottom when name field is tapped.
   Tapping the overlay area above the keyboard closes it.
─────────────────────────────────────────────────── */
.ngp-keyboard-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 200;
}

.ngp-keyboard-overlay--visible {
  display: flex;
  pointer-events: auto;
}

@keyframes ngp-keyboard-slide-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.ngp-keyboard {
  width: 100%;
  background: var(--page-bg);
  padding: clamp(8px, 2cqw, 14px) clamp(54px, 13.5cqw, 173px) clamp(20px, 5cqw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--vkb-gap);
  flex-shrink: 0;
  animation: ngp-keyboard-slide-in 0.25s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* Shift key — same width as backspace */
.vkb-key--shift {
  width: calc(var(--vkb-key) * 1.5 + var(--vkb-gap) * 0.5);
  background: var(--page-card-bg);
  font-size: clamp(14px, 3.5cqw, 26px);
}

/* Shift key highlighted when uppercase is active */
.vkb-key--shift-active {
  background: var(--page-red-gradient) !important;
  color: #fff;
}

/* Lowercase mode: CSS handles display; data-key stays uppercase for JS logic */
.ngp-keyboard--lower .vkb-key:not([data-key="SHIFT"]):not([data-key="BACKSPACE"]):not([data-key="SPACE"]) {
  text-transform: lowercase;
}

/* ════════════════════════════════════════════════════
   Result Char Page
════════════════════════════════════════════════════ */
.result-char-page {
  background: url('../assets/bg/BG2-red.jpg') center / cover no-repeat;
  justify-content: flex-start;
  overflow: hidden;
}

/* Body: fills space between topbar and CTA */
.result-char-body {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

/* Text block — top-left, stays above character */
.result-char-text {
  position: relative;
  z-index: 2;
  padding: clamp(12px, 3cqw, 77px) clamp(54px, 13.5cqw, 346px) 0;
}

/* "Persona Toyotamu adalah..." — matches ngp-intro-text */
.result-char-label {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 3.9cqw, 100px);
  color: var(--color-black);
  margin: 0 0 clamp(2px, 0.5cqw, 13px);
  font-weight: 350;
  line-height: 1.4;
}

/* Persona name — red, exclusive to this page */
.result-char-name {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(26px, 6.5cqw, 166px);
  font-weight: 700;
  color: var(--color-red);
  line-height: 1.15;
  margin: 0 0 clamp(8px, 2cqw, 51px);
  white-space: pre-line;
}

/* "Sekarang, mari lihat rekomendasi..." — matches ngp-intro-text */
.result-char-sub {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 3.9cqw, 100px);
  color: var(--color-black);
  line-height: 1.4;
  margin: 0;
  /* margin-top: 4cqw; */
  font-weight: 350;
}

/* "mobil idealmu" bold — matches ngp-intro-highlight */
.result-char-sub strong {
  font-size: clamp(19px, 4.9cqw, 125px);
  font-weight: 700;
  line-height: 1.2;
}

/* Character image — absolute, anchored to bottom, full width like story-intro2 */
.result-char-img-wrap {
  position: absolute;
  bottom: clamp(-512px, -20cqw, -53px);
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.result-char-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Placeholder shown while real character assets are missing */
.result-char-img-placeholder {
  display: none;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  margin: 0 auto;
}

/* Show placeholder only when img is hidden (onerror sets display:none on img) */
.result-char-img[style*="display: none"] ~ .result-char-img-placeholder,
.result-char-img[style*="display:none"] ~ .result-char-img-placeholder {
  display: block;
}

/* CTA bar uses the shared .page-cta-bar — no custom rule needed */

/* ── Large-format kiosk scaling for name-gender-page ── */
@media (min-width: 450px) {
  .ngp-intro-text      { font-size: clamp(20px, 3.9cqw, 100px); }
  .ngp-intro-highlight { font-size: clamp(24px, 4.9cqw, 125px); }
  .ngp-label         { font-size: clamp(18px, 4cqw, 57px); }
  .ngp-field         { min-height: calc(8cqw + 2 * 0.8cqw); padding: 0.8cqw clamp(20px, 5cqw, 56px); }
  .ngp-dropdown-trigger { min-height: calc(8cqw + 2 * 0.8cqw); padding: 0.8cqw clamp(20px, 5cqw, 56px); }
  .ngp-field-text,
  .ngp-field-placeholder,
  .ngp-dropdown-text { font-size: clamp(16px, 4cqw, 48px); }
  .ngp-field-cursor  { height: clamp(18px, 4.5cqw, 48px); }
  .ngp-dropdown-arrow svg { width: clamp(16px, 4cqw, 48px); }
  .ngp-dropdown-option { min-height: calc(8cqw + 2 * 0.8cqw); padding: 0.8cqw clamp(18px, 4.5cqw, 56px); font-size: clamp(16px, 4cqw, 48px); }
  .ngp-gender-btn      { font-size: clamp(12px, 3.2cqw, 56px); min-height: calc(8cqw + 2 * 0.8cqw); padding: 0.8cqw clamp(8px, 2cqw, 40px); }

  /* Keyboard — only override tokens and key height/font/radius; widths derive from tokens */
  .ngp-keyboard        { --vkb-key: clamp(40px, 7.8cqw, 120px); --vkb-gap: clamp(5px, 1.2cqw, 14px); padding: clamp(10px, 2.5cqw, 24px) clamp(54px, 13.5cqw, 173px) clamp(24px, 20cqw, 200px); }
  .vkb-key             { height: clamp(52px, 11cqw, 160px); font-size: clamp(16px, 3cqw, 48px); border-radius: clamp(8px, 1.5cqw, 20px); }
  .vkb-key--shift,
  .vkb-key--backspace  { font-size: clamp(16px, 3.5cqw, 48px); }
  .vkb-key--shift      { font-size: clamp(18px, 4cqw, 54px); }
  .vkb-key--space      { height: clamp(52px, 11cqw, 160px); }
}

/* ── Car Choose page ─────────────────────────────── */
.car-choose-page {
  background: url('../assets/bg/BG2-red.jpg') center / cover no-repeat;
}

.car-choose-page .story-progress-label {
  color: var(--page-red);
}

.car-choose-page .story-progress-track {
  background: rgba(0, 0, 0, 0.12);
}

/* Non-scrollable 3-column grid — sized to fit all cards on one screen */
.car-choose-grid {
  flex: 1;
  width: 100%;
  padding: 5cqw clamp(24px, 6cqw, 154px) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4cqw;
  row-gap: 9.45cqw;
  align-content: start;
  justify-items: center;
  overflow: visible;
  user-select: none;
}

/* Outer wrapper — clickable */
.car-choose-card-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Card — label + image child, position relative so image can be absolute inside */
.car-choose-card {
  width: 100%;
  height: 13.5cqw;
  background: var(--page-card-bg);
  border: 2px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.18);
  border-radius: clamp(10px, 2.5cqw, 16px);
  padding: clamp(4px, 1cqw, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.car-choose-card--selected {
  border-color: var(--page-red);
  background: var(--page-red-gradient);
  box-shadow: 0 4px 16px rgba(227, 6, 19, 0.3);
}

.car-choose-card-wrap:active .car-choose-card:not(.car-choose-card--selected) {
  border-color: rgba(227, 6, 19, 0.6);
}

/* Label */
.car-choose-card-label {
  font-size: clamp(8px, 2.6cqw, 20px);
  font-weight: 700;
  text-align: center;
  color: var(--page-text);
  line-height: 1.3;
  position: relative;
  z-index: 0;
  transform: translateY(-45%);
}

.car-choose-card--selected .car-choose-card-label {
  color: #fff;
}

/* Image — absolute, same size as card, foreground (z-index above label) */
.car-choose-card-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
  transform: translateY(55%);
}

.car-choose-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.car-choose-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.06);
  border-radius: clamp(6px, 1.5cqw, 10px);
}

/* ── Debug: return-to-title confirmation popup ─────── */
.debug-popup-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.debug-popup-overlay--visible {
  display: flex;
}

.debug-popup {
  background: #fff;
  border-radius: max(20px, 5cqw);
  border: 2px solid rgba(227, 6, 19, 0.35);
  box-shadow:
    0 0 0 6px rgba(227, 6, 19, 0.08),
    0 0 40px rgba(227, 6, 19, 0.18),
    0 8px 32px rgba(0, 0, 0, 0.12);
  padding: max(32px, 8cqw) max(24px, 6cqw) max(28px, 7cqw);
  width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(28px, 7cqw);
}

.debug-popup-message {
  font-size: max(18px, 4.5cqw);
  font-weight: 400;
  text-align: center;
  color: #161616;
  line-height: 1.45;
}

.debug-popup-actions {
  display: flex;
  gap: max(12px, 3cqw);
  width: 100%;
}

.debug-popup-btn {
  flex: 1;
  padding: max(14px, 3.5cqw) max(12px, 3cqw);
  border-radius: 999px;
  font-size: max(16px, 4cqw);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.debug-popup-btn:active {
  opacity: 0.8;
  transform: scale(0.97);
}

.debug-popup-btn--yes {
  background: var(--page-red-gradient);
  color: #fff;
  border: none;
  box-shadow:
    0 0 0 5px rgba(227, 6, 19, 0.2),
    0 4px 20px rgba(227, 6, 19, 0.45);
}

.debug-popup-btn--no {
  background: #fff;
  color: #161616;
  border: 2px solid rgba(227, 6, 19, 0.3);
  box-shadow:
    0 0 0 4px rgba(227, 6, 19, 0.08),
    0 2px 10px rgba(227, 6, 19, 0.12);
}

/* ── Network offline popup ─────────────────────────── */
.offline-popup-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.offline-popup-overlay--visible {
  display: flex;
}

.debug-popup-actions--single {
  justify-content: center;
}

.debug-popup-actions--single .debug-popup-btn {
  flex: 0 1 max(140px, 40cqw);
}

/* ═══════════════════════════════════════════════════
   RESULT VIDEO PAGE
════════════════════════════════════════════════════ */

/* Full-bleed video player */
.page-content--video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 0;
}

.result-video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loading overlay — covers full page while video buffers */
.result-video-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--color-faint-gray, #F9F9F9);
  transition: opacity 0.4s ease;
}

.result-video-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Loading body: centred vertically in the remaining space */
.result-video-loading-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-video-loading-text {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(20px, 5cqw, 40px);
  font-weight: 600;
  color: var(--color-black, #000);
  display: flex;
  align-items: baseline;
}

/* Pulsing dots: each span fades in with a staggered delay */
.result-video-loading-dots span::before {
  content: '.';
}
.result-video-loading-dots span {
  animation: loading-dots 1.2s ease-in-out infinite;
  opacity: 0;
}
.result-video-loading-dots span:nth-child(2) { animation-delay: 0.4s; }
.result-video-loading-dots span:nth-child(3) { animation-delay: 0.8s; }

@keyframes loading-dots {
  0%, 80%, 100% { opacity: 0; }
  40%            { opacity: 1; }
}

/* ── Hobby page: analytics loading overlay ── */
.hobby-analytics-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s ease;
}

.hobby-analytics-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hobby-analytics-loading-spinner {
  width: 56px;
  height: 56px;
  border: 5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: hobby-spin 0.8s linear infinite;
}

@keyframes hobby-spin {
  to { transform: rotate(360deg); }
}

/* Thinner, smaller buttons for the hobby analytics error popup */
#hobby-analytics-error .debug-popup-btn {
  padding: max(8px, 2cqw) max(10px, 2.5cqw);
  font-size: max(13px, 3cqw);
  font-weight: 500;
}

/* ── Result-video: error overlay ── */
.result-video-error {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.result-video-error.is-visible {
  display: flex;
}
.result-video-error-url {
  font-size: clamp(11px, 2.8cqw, 18px);
  color: #666;
  word-break: break-all;
  text-align: center;
}


/* ═══════════════════════════════════════════════════
   TOPBAR BADGE — SVG image variant
════════════════════════════════════════════════════ */
.page-topbar-badge-img {
  height: clamp(28px, 7.5cqw, 52px);
  width: auto;
  display: block;
}

@media (min-width: 450px) {
  .page-topbar-badge-img { height: clamp(36px, 9cqw, 120px); }
}


/* (story-intro-scene removed — replaced by .story-intro-stage above) */


/* ═══════════════════════════════════════════════════
   STORY INTRO 2
════════════════════════════════════════════════════ */
.story-intro2-page {
  /* background: var(--page-bg); */
  justify-content: flex-start;
  overflow: hidden;
  /* position: absolute; inset: 0 inherited from .page — do not override */
}

.story-intro2-page .page-topbar,
.story-intro2-page .story-intro2-title-wrap,
.story-intro2-page .story-intro2-sub-wrap,
.story-intro2-page .page-cta-bar {
  position: relative;
  z-index: 1;
}

.story-intro2-title-wrap {
  width: 100%;
  padding: clamp(8px, 2cqw, 32px) clamp(24px, 6cqw, 86px) 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.story-intro2-title {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 3.9cqw, 56px);
  font-weight: 350;
  color: var(--page-text);
  line-height: 1.4;
}

/* Red bold — larger than body text, matches mockup emphasis */
.story-intro2-highlight {
  color: var(--page-red);
  font-weight: 700;
  font-size: clamp(19px, 4.9cqw, 70px);
  line-height: 1.2;
}

/* Black bold — same large size as highlight but black */
.story-intro2-highlight-black {
  color: var(--page-text);
  font-weight: 700;
  font-size: clamp(19px, 4.9cqw, 70px);
  line-height: 1.2;
}

/* Black bold — same size as body text */
.story-intro2-bold {
  font-weight: 700;
  color: var(--page-text);
}

.story-intro2-sub-wrap {
  width: 100%;
  padding: clamp(16px, 4cqw, 60px) clamp(24px, 6cqw, 86px) 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.story-intro2-sub {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 3.9cqw, 56px);
  font-weight: 350;
  color: var(--page-text);
  line-height: 1.4;
}

/* Full-page background illustration — same pattern as .story-scene-bg */
.story-intro2-scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════
   DARK STORY PAGES — shared base used by story-intro3,
   first-car, place-to-go, journey-of-life
════════════════════════════════════════════════════ */
.dark-story-page {
  background: var(--page-bg-dark);
  color: var(--color-white);
  justify-content: flex-start;
  overflow: hidden;
}

/* egg placeholder on story-intro3 */
.story-egg-placeholder {
  font-size: clamp(80px, 28cqw, 200px);
  filter: drop-shadow(0 0 clamp(20px, 6cqw, 60px) rgba(227,6,19,0.6));
}

/* ── Dark option pages (first-car, place-to-go) ── */
.dark-option-page {
  overflow-y: auto;
}

.dark-page-question {
  width: 100%;
  padding: clamp(8px, 2cqw, 14px) clamp(24px, 6cqw, 44px) 0;
  flex-shrink: 0;
  text-align: center;
}

.dark-page-question-title {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(15px, 3.8cqw, 28px);
  font-weight: 350;
  color: var(--color-white);
  line-height: 1.4;
}

.dark-page-question-title strong {
  font-weight: 700;
}

.dark-page-question-hint {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, 2.4cqw, 16px);
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: clamp(4px, 1cqw, 8px);
  text-transform: uppercase;
}

/* 3-column grid for first-car and place-to-go */
.dark-option-grid {
  flex: 1;
  width: 100%;
  padding: clamp(10px, 2.5cqw, 18px) clamp(16px, 4cqw, 32px);
  display: grid;
  gap: clamp(8px, 2cqw, 14px);
  align-content: center;
}

.dark-option-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* Individual dark option card */
.dark-option-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(80px, 22cqw, 150px);
  border-radius: clamp(12px, 3cqw, 20px);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.18);
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(11px, 2.8cqw, 18px);
  font-weight: 350;
  color: var(--color-white);
  cursor: pointer;
  text-align: center;
  padding: clamp(8px, 2cqw, 14px) clamp(6px, 1.5cqw, 10px);
  line-height: 1.3;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.dark-option-card--selected {
  background: rgba(227, 6, 19, 0.25);
  border-color: var(--page-red);
  font-weight: 600;
}

.dark-option-card:active {
  opacity: 0.75;
}

/* ── Journey of Life — tall list cards ── */
.dark-list-options {
  flex: 1;
  width: 100%;
  padding: clamp(10px, 2.5cqw, 18px) clamp(20px, 5cqw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2cqw, 14px);
  justify-content: center;
}

.dark-list-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4cqw, 28px) clamp(16px, 4cqw, 28px);
  border-radius: clamp(12px, 3cqw, 20px);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.18);
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(13px, 3.2cqw, 22px);
  font-weight: 350;
  color: var(--color-white);
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.dark-list-card--selected {
  background: rgba(227, 6, 19, 0.25);
  border-color: var(--page-red);
  font-weight: 600;
}

.dark-list-card:active {
  opacity: 0.75;
}

/* Kiosk scaling for dark option cards */
@media (min-width: 450px) {
  .dark-page-question-title { font-size: clamp(18px, 4.2cqw, 80px); }
  .dark-option-card          { font-size: clamp(13px, 3.2cqw, 56px); min-height: clamp(100px, 26cqw, 380px); }
  .dark-list-card            { font-size: clamp(15px, 3.5cqw, 80px); }
}