/* pages-options.css — Light option pages (first-car, place-to-go, journey-of-life), 4K ultra-kiosk ceiling lifts */

/* ═══════════════════════════════════════════════════
   LIGHT OPTION PAGES — first-car, place-to-go, journey-of-life
   Same light gray background as age/hobby/carplan pages.
════════════════════════════════════════════════════ */
.light-option-page {
  background: var(--page-bg);
  justify-content: flex-start;
}

/* Progress bar — red on light gray (matches quiz pages but on light bg) */
.light-progress-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2cqw, 51px);
  padding: 0 clamp(54px, 13.5cqw, 346px) clamp(8px, 2cqw, 51px);
  flex-shrink: 0;
}

.light-progress-label {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, 3cqw, 64px);
  font-weight: 600;
  color: var(--page-red);
  min-width: clamp(24px, 6cqw, 154px);
  flex-shrink: 0;
}

.light-progress-track {
  flex: 1;
  height: clamp(5px, 1.4cqw, 31px);
  background: rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  overflow: hidden;
}

.light-progress-fill {
  height: 100%;
  background: var(--page-red);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Question block */
.light-page-question {
  width: 100%;
  padding: clamp(8px, 2cqw, 14px) clamp(54px, 13.5cqw, 173px) 0;
  flex-shrink: 0;
  text-align: center;
}

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

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

.light-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: var(--page-muted);
  margin-top: clamp(4px, 1cqw, 8px);
  text-transform: uppercase;
}

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

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

/* White card with red border (unselected: subtle border, selected: red) */
.light-option-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(90px, 25cqw, 160px);
  border-radius: clamp(12px, 3cqw, 20px);
  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(11px, 2.8cqw, 18px);
  font-weight: 350;
  color: var(--page-text);
  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, color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.light-option-card--selected {
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  color: #fff;
  font-weight: 600;
}

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

/* Journey of Life — tall pill-shaped list cards */
.light-list-options {
  width: 100%;
  padding: clamp(10px, 2.5cqw, 18px) clamp(54px, 13.5cqw, 173px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2cqw, 14px);
}

.light-list-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4cqw, 26px) clamp(16px, 4cqw, 28px);
  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(13px, 3.2cqw, 20px);
  font-weight: 350;
  color: var(--page-text);
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.light-list-card--selected {
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  color: #fff;
  font-weight: 600;
}

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

/* Kiosk scaling */
@media (min-width: 450px) {
  .light-page-question-title { font-size: clamp(18px, 4.2cqw, 80px); }
  .light-option-card          { font-size: clamp(13px, 3.2cqw, 56px); min-height: clamp(110px, 28cqw, 400px); }
  .light-list-card            { font-size: clamp(15px, 3.5cqw, 80px); }
}

/* ═══════════════════════════════════════════════════
   4K ULTRA-KIOSK — pages.css ceiling lifts
   All max values ×1.5 over the corresponding 450px block.
   Mirrors the five @media (min-width: 450px) blocks above.
════════════════════════════════════════════════════ */
@media (min-width: 1800px) {

  /* ── Base layout overrides (base clamps not covered by 450px block) ── */

  /* Topbar: vertical padding caps at 90px, side caps at 96px → lift for 2160px */
  .page-topbar { padding: clamp(19px, 7cqw, 216px) clamp(30px, 7.5cqw, 230px) clamp(11px, 2.5cqw, 80px); min-height: clamp(60px, 28cqw, 1000px); }

  /* Topbar progress slot side offset compensation */
  .page-topbar-progress-slot .story-progress-wrap,
  .page-topbar-progress-slot .light-progress-wrap { padding-left: clamp(54px, 13.5cqw, 519px); padding-right: clamp(54px, 13.5cqw, 519px); margin-left: calc(-1 * clamp(30px, 7.5cqw, 288px)); margin-right: calc(-1 * clamp(30px, 7.5cqw, 288px)); width: calc(100% + 2 * clamp(30px, 7.5cqw, 288px)); }

  /* CTA bar: side padding caps at 173px, bottom caps at 472px → lift ×2 */
  .page-cta-bar { padding: clamp(12px, 3cqw, 80px) clamp(54px, 13.5cqw, 346px) clamp(90px, 34cqw, 944px); }

  /* Title page specifics */
  .title-headline { font-size: clamp(34px, 8.6cqw, 372px); padding: 0 clamp(54px, 13.5cqw, 519px) 0; }
  .title-subtitle { font-size: clamp(14px, 3.5cqw, 120px); padding: clamp(8px, 2cqw, 72px) clamp(54px, 13.5cqw, 519px) 0; }
  .title-mascot   { right: clamp(-432px, -14cqw, -56px); bottom: clamp(90px, 26cqw, 810px); height: clamp(300px, 61svh, 3230px); }

  /* Page question header */
  .page-question  { padding: clamp(4px, 1cqw, 30px) clamp(54px, 13.5cqw, 519px) clamp(10px, 2.5cqw, 54px); }

  /* ── Mirror of block at line 2003: page common / quiz / story / thankyou ── */
  .page-title-text        { font-size: clamp(36px, 8cqw, 240px); }

  .page-topbar-badge-num  { font-size: clamp(36px, 9cqw, 180px); }
  .page-topbar-badge-text { font-size: clamp(9px, 2cqw, 42px); }
  .page-topbar-logo img   { height: clamp(36px, 8cqw, 220px); }

  .page-question-title    { font-size: clamp(26px, 6cqw, 165px); }

  .btn-back,
  .btn-next               { padding: clamp(12px, 2.5cqw, 78px) clamp(32px, 8cqw, 270px); font-size: clamp(16px, 3cqw, 99px); border-radius: clamp(8px, 1.5cqw, 48px); }

  .btn-berikutnya         { font-size: clamp(18px, 4cqw, 120px); padding: 0.8cqw 0.8cqw 0.8cqw clamp(24px, 6cqw, 180px); border-radius: clamp(40px, 12cqw, 360px); }
  .btn-berikutnya-arrow   { width: clamp(28px, 8cqw, 216px); height: clamp(28px, 8cqw, 216px); }
  .btn-sebelumnya         { font-size: clamp(18px, 4cqw, 120px); padding: 0.8cqw clamp(24px, 6cqw, 180px) 0.8cqw 0.8cqw; border-radius: clamp(40px, 12cqw, 360px); }
  .btn-sebelumnya-arrow   { width: clamp(28px, 8cqw, 216px); height: clamp(28px, 8cqw, 216px); }

  .gender-card              { font-size: clamp(20px, 5cqw, 150px); max-height: clamp(120px, 28cqw, 570px); }
  .gender-card .choice-icon { font-size: clamp(36px, 9cqw, 270px); }

  .age-card             { font-size: clamp(12px, 2.8cqw, 84px); }
  .carplan-card         { font-size: clamp(14px, 3.2cqw, 96px); }
  .carplan-card strong  { font-size: clamp(16px, 3.6cqw, 108px); }

  /* .hobby-card uses pure cqw — no ceiling needed */
  .hobby-category-label   { font-size: clamp(11px, 2.5cqw, 75px); }
  .hobby-scroll-arrow     { width: clamp(36px, 9cqw, 216px); height: clamp(36px, 9cqw, 216px); font-size: clamp(28px, 7cqw, 168px); }

  .quiz-question-text        { font-size: clamp(19px, 3.6cqw, 138px); }
  .quiz-question-text strong { font-size: clamp(21px, 4.2cqw, 161px); }
  .quiz-question-sub         { font-size: clamp(14px, 3cqw, 116px); }

  .story-intro-text         { font-size: clamp(20px, 4cqw, 87px); }
  .story-intro2-text        { font-size: clamp(20px, 4cqw, 87px); }
  .story-narrative          { font-size: clamp(19px, 3.6cqw, 138px); }
  .story-narrative strong   { font-size: clamp(22px, 4.4cqw, 168px); }

  .thankyou-title           { font-size: clamp(24px, 4.9cqw, 105px); }
  .thankyou-keychain-pill { font-size: clamp(11px, 2.8cqw, 50px); border-radius: clamp(20px, 6cqw, 108px); padding: clamp(10px, 2.5cqw, 45px) clamp(16px, 4cqw, 72px); }

  .thankyou-body        { padding: clamp(8px, 2cqw, 24px) clamp(54px, 13.5cqw, 519px) clamp(20px, 5cqw, 54px); gap: clamp(14px, 3.5cqw, 60px); }
  .thankyou-card        { border-radius: clamp(16px, 4cqw, 84px); padding: clamp(16px, 12cqw, 288px) clamp(20px, 5cqw, 108px) clamp(20px, 37.5cqw, 720px); gap: clamp(10px, 2.5cqw, 54px); }
  .thankyou-card-label  { font-size: clamp(9px, 2.8cqw, 84px); }
  .thankyou-card-sub    { font-size: clamp(12px, 3cqw, 116px); }
  .thankyou-qr-box      { width: clamp(64px, 24.32cqw, 932px); }
  .thankyou-qr-placeholder { font-size: clamp(14px, 3.5cqw, 72px); }

  /* CRITICAL: at 2160px, 45cqw = 972px which exceeds the 600px ceiling — raises to 900px */
  .thankyou-mascot      { width: clamp(135px, 45cqw, 900px); }

  /* Bottom clearance: 800px × 1.5 = 1200px */
  .thankyou-cta-bar     { padding: clamp(12px, 3cqw, 80px) clamp(54px, 13.5cqw, 346px) clamp(90px, 34cqw, 944px); gap: clamp(8px, 2cqw, 36px); }
  .thankyou-reset-btn   { padding: 0.8cqw 0.8cqw 0.8cqw clamp(24px, 6cqw, 180px); border-radius: clamp(40px, 12cqw, 360px); }
  .thankyou-reset-btn-text { font-size: clamp(18px, 4cqw, 120px); }
  .thankyou-reset-btn-icon { width: clamp(28px, 8cqw, 216px); height: clamp(28px, 8cqw, 216px); }
  .thankyou-auto        { font-size: clamp(10px, 2.5cqw, 78px); }

  /* ── NGP page: base clamp lifts (not in 450px block) ── */
  .ngp-intro           { padding: 4cqw clamp(54px, 13.5cqw, 519px) clamp(4px, 1cqw, 56px); }
  .ngp-intro-text      { font-size: clamp(16px, 3.9cqw, 84px); }
  .ngp-intro-highlight { font-size: clamp(19px, 4.9cqw, 105px); }
  .ngp-section         { padding: 0 clamp(54px, 13.5cqw, 346px); }
  .ngp-label           { font-size: clamp(14px, 3.5cqw, 75px); margin-bottom: clamp(10px, 6cqw, 172px); }
  .ngp-field           { padding: 0.8cqw clamp(14px, 3.5cqw, 56px); border-radius: clamp(40px, 12cqw, 240px); }
  .ngp-field-text,
  .ngp-field-placeholder { font-size: clamp(13px, 3.3cqw, 72px); }
  .ngp-field-cursor    { height: clamp(14px, 3.5cqw, 75px); }
  .ngp-dropdown-wrap   { border-radius: clamp(40px, 12cqw, 240px); }
  .ngp-dropdown-wrap--open { border-radius: clamp(16px, 4cqw, 86px); }
  .ngp-dropdown-trigger { padding: 0.8cqw clamp(14px, 3.5cqw, 56px); }
  .ngp-dropdown-text   { font-size: clamp(13px, 3.3cqw, 72px); }
  .ngp-dropdown-arrow svg { width: clamp(12px, 3cqw, 64px); }
  .ngp-dropdown-option { padding: 0.8cqw clamp(14px, 3.5cqw, 56px); font-size: clamp(13px, 3.3cqw, 72px); }
  .ngp-gender-btn-wrap { gap: clamp(8px, 2cqw, 43px); }
  .ngp-gender-btn      { font-size: clamp(10px, 3cqw, 64px); padding: 0.8cqw clamp(8px, 2cqw, 43px); border-radius: clamp(40px, 12cqw, 240px); }
  .ngp-fields-wrap     { padding-top: clamp(21px, 8cqw, 248px); gap: clamp(23px, 10cqw, 344px); }

  /* ── Mirror of block at line 2453: NGP page + virtual keyboard (450px kiosk lifts) ── */
  .ngp-intro-text      { font-size: clamp(20px, 3.9cqw, 150px); }
  .ngp-intro-highlight { font-size: clamp(24px, 4.9cqw, 188px); }
  .ngp-label           { font-size: clamp(18px, 4cqw, 86px); }
  .ngp-field           { padding: 0.8cqw clamp(20px, 5cqw, 56px); }
  .ngp-field-text,
  .ngp-field-placeholder,
  .ngp-dropdown-text   { font-size: clamp(16px, 4cqw, 72px); }
  .ngp-field-cursor    { height: clamp(18px, 4.5cqw, 72px); }
  .ngp-dropdown-arrow svg { width: clamp(16px, 4cqw, 72px); }
  .ngp-dropdown-option { padding: 0.8cqw clamp(18px, 4.5cqw, 84px); font-size: clamp(16px, 4cqw, 72px); }
  .ngp-gender-btn      { font-size: clamp(12px, 3.2cqw, 84px); }

  .ngp-keyboard        { --vkb-key: clamp(40px, 7.8cqw, 180px); --vkb-gap: clamp(5px, 1.2cqw, 21px); }
  .vkb-key             { height: clamp(52px, 11cqw, 240px); font-size: clamp(16px, 3cqw, 72px); }
  .vkb-key--shift,
  .vkb-key--backspace  { font-size: clamp(16px, 3.5cqw, 72px); }
  .vkb-key--shift      { font-size: clamp(18px, 4cqw, 81px); }
  .vkb-key--space      { height: clamp(52px, 11cqw, 240px); }

  /* ── Mirror of block at line 2729: topbar badge SVG variant ── */
  .page-topbar-badge-img { height: clamp(36px, 9cqw, 180px); }

  /* ── Dark page base lifts ── */
  .dark-page-question       { padding: clamp(8px, 2cqw, 30px) clamp(24px, 6cqw, 96px) 0; }
  .dark-page-question-hint  { font-size: clamp(10px, 2.4cqw, 52px); margin-top: clamp(4px, 1cqw, 22px); }
  .dark-option-grid         { padding: clamp(10px, 2.5cqw, 39px) clamp(16px, 4cqw, 69px); gap: clamp(8px, 2cqw, 30px); }
  .dark-option-card         { min-height: clamp(80px, 22cqw, 475px); border-radius: clamp(12px, 3cqw, 65px); font-size: clamp(11px, 2.8cqw, 84px); padding: clamp(8px, 2cqw, 30px) clamp(6px, 1.5cqw, 22px); }
  .dark-list-options        { padding: clamp(10px, 2.5cqw, 39px) clamp(20px, 5cqw, 78px); gap: clamp(8px, 2cqw, 30px); }
  .dark-list-card           { padding: clamp(16px, 4cqw, 61px) clamp(16px, 4cqw, 61px); border-radius: clamp(12px, 3cqw, 65px); font-size: clamp(13px, 3.2cqw, 69px); }

  /* ── Mirror of block at line 2962: dark option cards (450px kiosk lifts) ── */
  .dark-page-question-title { font-size: clamp(18px, 4.2cqw, 120px); }
  .dark-option-card         { font-size: clamp(13px, 3.2cqw, 84px); min-height: clamp(100px, 26cqw, 570px); }
  .dark-list-card           { font-size: clamp(15px, 3.5cqw, 120px); }

  /* ── Light page base lifts ── */
  .light-progress-wrap      { gap: clamp(8px, 2cqw, 110px); padding: 0 clamp(54px, 13.5cqw, 519px) clamp(8px, 2cqw, 110px); }
  .light-progress-label     { font-size: clamp(10px, 3cqw, 108px); min-width: clamp(24px, 6cqw, 259px); }
  .light-progress-track     { height: clamp(5px, 1.4cqw, 52px); }
  .light-page-question      { padding: clamp(8px, 2cqw, 30px) clamp(54px, 13.5cqw, 346px) 0; }
  .light-page-question-hint { font-size: clamp(10px, 2.4cqw, 52px); margin-top: clamp(4px, 1cqw, 22px); }
  .light-option-grid        { padding: clamp(10px, 2.5cqw, 39px) clamp(24px, 6cqw, 104px); gap: clamp(8px, 2cqw, 30px); }
  .light-option-card        { min-height: clamp(90px, 25cqw, 540px); border-radius: clamp(12px, 3cqw, 65px); font-size: clamp(11px, 2.8cqw, 60px); padding: clamp(8px, 2cqw, 30px) clamp(6px, 1.5cqw, 22px); }
  .light-list-options       { padding: clamp(10px, 2.5cqw, 39px) clamp(54px, 13.5cqw, 346px); gap: clamp(8px, 2cqw, 30px); }
  .light-list-card          { padding: clamp(16px, 4cqw, 86px) clamp(16px, 4cqw, 86px); border-radius: clamp(40px, 12cqw, 240px); font-size: clamp(13px, 3.2cqw, 69px); }

  /* ── Mirror of block at line 3131: light option cards (450px kiosk lifts) ── */
  .light-page-question-title { font-size: clamp(18px, 4.2cqw, 120px); }
  .light-option-card         { font-size: clamp(13px, 3.2cqw, 84px); min-height: clamp(110px, 28cqw, 600px); }
  .light-list-card           { font-size: clamp(15px, 3.5cqw, 120px); }

  /* ── Gender page base lifts ── */
  .gender-grid          { gap: clamp(10px, 2.5cqw, 39px); padding: clamp(8px, 2cqw, 35px) clamp(24px, 6cqw, 104px); }
  .gender-card          { max-height: clamp(100px, 28cqw, 605px); gap: clamp(12px, 3cqw, 65px); padding: 0 clamp(20px, 5cqw, 108px); border-radius: clamp(12px, 3cqw, 65px); font-size: clamp(16px, 4.5cqw, 97px); }
  .gender-card .choice-icon { font-size: clamp(28px, 8cqw, 172px); }

  /* ── Age page base lifts ── */
  .age-grid             { padding: clamp(4px, 1cqw, 22px) clamp(54px, 13.5cqw, 346px); }
  .age-card             { font-size: clamp(10px, 2.6cqw, 56px); border-radius: clamp(40px, 12cqw, 240px); padding: 0.8cqw clamp(8px, 2cqw, 43px); }

  /* ── Carplan page base lifts ── */
  .carplan-grid         { gap: clamp(14px, 3.4cqw, 106px); padding: clamp(4px, 1cqw, 22px) clamp(54px, 13.5cqw, 346px); }
  .carplan-card         { border-radius: clamp(16px, 5cqw, 108px); font-size: clamp(12px, 3cqw, 65px); padding: clamp(12px, 3cqw, 65px); }
  .carplan-card strong  { font-size: clamp(14px, 3.4cqw, 74px); }

  /* ── Hobby page base lifts ── */
  .hobby-category-label { font-size: clamp(9px, 2.2cqw, 48px); }
  #page-hobby-choose .page-cta-bar,
  #page-car-choose .page-cta-bar { padding-bottom: clamp(44px, 18cqw, 1024px); }
  #page-hobby-choose .quiz-question-block { padding-left: clamp(54px, 13.5cqw, 346px); padding-right: clamp(54px, 13.5cqw, 346px); }
  .hobby-list { padding-left: clamp(16px, 13.5cqw, 346px); padding-right: clamp(16px, 13.5cqw, 346px); }

  /* ── Quiz2 card base lifts ── */
  .quiz2-arena      { padding: clamp(8px, 2cqw, 104px) clamp(12px, 3cqw, 156px); }
  .quiz2-col        { gap: clamp(8px, 2cqw, 104px); }
  .quiz2-card       { width: clamp(80px, 24cqw, 720px); height: clamp(80px, 24cqw, 720px); border-radius: clamp(10px, 2.5cqw, 129px); padding: clamp(8px, 2cqw, 104px); gap: clamp(4px, 1cqw, 52px); }
  .quiz2-card-img   { width: clamp(58px, 15.84cqw, 524px); height: clamp(58px, 15.84cqw, 524px); margin-bottom: clamp(1px, 0.2cqw, 10px); }
  .quiz2-card-label { font-size: clamp(8px, 2.16cqw, 112px); }
  .quiz2-heart-wrap { width: clamp(115px, 32.4cqw, 1660px); height: clamp(115px, 32.4cqw, 1660px); }
  .quiz2-hint       { font-size: clamp(10px, 2.4cqw, 122px); padding: 0 clamp(16px, 4cqw, 204px); margin-bottom: clamp(4px, 1cqw, 52px); }

  /* ── Car choose page base lifts ── */
  .car-choose-grid          { padding: 5cqw clamp(24px, 6cqw, 312px) 0; column-gap: 4cqw; row-gap: 9.45cqw; }
  .car-choose-card          { height: 13.5cqw; border-radius: clamp(10px, 2.5cqw, 54px); padding: clamp(4px, 1cqw, 21px); }
  .car-choose-card-label    { font-size: clamp(8px, 2.4cqw, 48px); }

  /* ── Story intro 2 base lifts ── */
  .story-intro2-title-wrap  { padding: clamp(8px, 2cqw, 86px) clamp(24px, 6cqw, 259px) 0; }
  .story-intro2-title       { font-size: clamp(16px, 3.9cqw, 120px); }
  .story-intro2-highlight,
  .story-intro2-highlight-black { font-size: clamp(19px, 4.9cqw, 150px); }
  .story-intro2-sub-wrap    { padding: clamp(16px, 4cqw, 172px) clamp(24px, 6cqw, 259px) 0; }
  .story-intro2-sub         { font-size: clamp(16px, 3.9cqw, 120px); }

  /* ── Result char page base lifts ── */
  .result-char-text      { padding: clamp(12px, 3cqw, 166px) clamp(54px, 13.5cqw, 519px) 0; }
  .result-char-label     { font-size: clamp(16px, 3.9cqw, 150px); }
  .result-char-name      { font-size: clamp(26px, 6.5cqw, 280px); margin-bottom: clamp(8px, 2cqw, 86px); }
  .result-char-sub       { font-size: clamp(16px, 3.9cqw, 150px); }
  .result-char-sub strong { font-size: clamp(19px, 4.9cqw, 188px); }
  .result-char-img-wrap  { bottom: clamp(-1108px, -20cqw, -53px); }

  /* ── Story-egg placeholder (dark story page) ── */
  .story-egg-placeholder { font-size: clamp(80px, 28cqw, 605px); }

  /* ── Story intro page base lifts ── */
  .story-intro-tagline-wrap { padding: clamp(36px, 10cqw, 310px) clamp(24px, 6cqw, 186px) 0; }
  .story-intro-tagline      { font-size: clamp(16px, 3.9cqw, 120px); }
  .story-intro-typing-text  { font-size: clamp(16px, 3.9cqw, 120px); padding: clamp(22px, 6cqw, 186px) clamp(54px, 13.5cqw, 519px) clamp(12px, 3cqw, 93px); }
  .story-intro-illust-wrap  { height: clamp(200px, 58cqw, 1728px); }

  /* ── Story pages (story1/story2/story3/story-end) base lifts ── */
  .story-text-block         { padding: 0 clamp(48px, 12cqw, 460px) 0; }
  .story-end-page .story-text-block { padding-top: clamp(20px, 5cqw, 120px); padding-left: clamp(48px, 12cqw, 460px); padding-right: clamp(48px, 12cqw, 460px); }
  .story-mascot             { width: clamp(140px, 50cqw, 900px); }

  /* ── Quiz page CTA bar base lifts ── */
  .quiz-page .page-cta-bar  { padding-bottom: clamp(44px, 18cqw, 1024px); }
  .quiz2-page .page-cta-bar { padding-bottom: clamp(48px, 22cqw, 1126px); }

  /* ── Quiz card grid base lifts (quiz1 / quiz3) ── */
  .quiz-track--grid         { gap: clamp(12px, 3cqw, 156px); padding: clamp(12px, 3cqw, 156px) clamp(32px, 8cqw, 416px); }
  .quiz-grid-card           { border-radius: clamp(10px, 2.5cqw, 129px); gap: clamp(1px, 0.2cqw, 10px); }
  .quiz-grid-card .quiz-card-label { font-size: clamp(8px, 2.4cqw, 102px); padding: 0 clamp(6px, 1.5cqw, 78px); }
  .quiz-card-icon           { width: clamp(32px, 12.8cqw, 660px); height: clamp(32px, 12.8cqw, 660px); }
  .quiz-peek-card           { border-radius: clamp(10px, 2.5cqw, 129px); }

  /* Drop zone */
  .quiz-dropzone            { height: clamp(74px, 18cqw, 920px); margin-top: clamp(8px, 2cqw, 104px); border-radius: clamp(12px, 3cqw, 156px); gap: clamp(4px, 1cqw, 52px); padding: clamp(6px, 1.5cqw, 78px); }
  .quiz-dropzone-hint       { font-size: clamp(10px, 2.4cqw, 122px); }
  .quiz-collected-card      { max-width: clamp(52px, 13cqw, 666px); border-radius: clamp(6px, 1.5cqw, 78px); }
  .quiz-collected-card-label { font-size: clamp(7px, 1.7cqw, 88px); }
  .quiz-collected-card-remove { top: clamp(-6px, -1.5cqw, -78px); right: clamp(-6px, -1.5cqw, -78px); width: clamp(16px, 4cqw, 204px); height: clamp(16px, 4cqw, 204px); font-size: clamp(9px, 2.2cqw, 114px); }

  /* Swipe hint & nav arrows */
  .quiz-swipe-hint          { font-size: clamp(10px, 2.4cqw, 122px); padding: 0 clamp(16px, 4cqw, 204px); margin-top: clamp(6px, 1.5cqw, 78px); }
  .quiz-nav-arrow           { width: clamp(53px, 13.2cqw, 317px); height: clamp(53px, 13.2cqw, 317px); }
  .quiz-nav-arrow__inner    { border-width: clamp(5px, 1.5cqw, 42px); box-shadow: 0 0 0 clamp(3px, 0.7cqw, 21px) var(--page-red), 0 2px 12px rgba(0,0,0,0.18); }

  /* Pagination dots */
  .quiz-dot                 { width: clamp(7px, 1.8cqw, 93px); height: clamp(7px, 1.8cqw, 93px); }
  .quiz-dots                { gap: clamp(6px, 1.5cqw, 78px); padding-top: clamp(6px, 1.5cqw, 78px); }

  /* Swipeable single card (carousel mode) */
  .quiz-card                { width: clamp(140px, 42cqw, 2150px); height: clamp(180px, 54cqw, 2765px); border-radius: clamp(12px, 3cqw, 156px); bottom: clamp(8px, 2cqw, 104px); }
  .quiz-card-label          { font-size: clamp(11px, 2.8cqw, 144px); padding: clamp(10px, 2.5cqw, 129px) clamp(10px, 2.5cqw, 129px) 0; }
  .quiz-card-img            { padding-bottom: clamp(10px, 2.5cqw, 129px); }
  .quiz-question-block      { padding: clamp(8px, 2cqw, 104px) clamp(24px, 6cqw, 312px) 0; }
  .quiz-question-sub        { margin-top: clamp(4px, 1cqw, 52px); padding-top: clamp(8px, 2cqw, 104px); }
}