/* style.css — Tif.Pink Birthday Slice game UI (HUD, touch controls, overlays).
   Built on tokens from ../assets/css/base.css */

#game {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--sky);
  touch-action: none; /* prevent scroll/zoom while playing */
  user-select: none; -webkit-user-select: none;

  /* Responsive layout vars — driven by responsive.js (applyDeviceClass).
     DESIGN_REQUIRED: defaults below are functional placeholders. */
  --control-scale: 1;
  --overlay-max-w: 720px;
  --obj-min: 160px;

  /* Approved Phase 3 semantic tokens (Secondary Button + Icon Control + Quest Card +
     Reward Chip) — VALUES RESOLVED from the authoritative Figma variable export
     (v1.1.13). Figma is the source of truth (v1.1); these are NO LONGER placeholders.
     NAMES mirror Figma variables; only the hex VALUES were filled in. */
  --action-secondary: #E7F6FF;        /* Color/Action/Secondary (Secondary Button Default) — Figma authoritative */
  --secondary-pressed: #B8E4FF;       /* Color/Action/Secondary Pressed — Figma authoritative */
  --action-disabled: #F4E8E1;         /* Color/Action/Disabled (shared disabled/locked neutral surface) — Figma authoritative */
  --icon-primary: #2A2230;            /* Color/Icon/Primary — Figma authoritative */
  --icon-on-brand: #FFFFFF;           /* Color/Icon/On Brand — Figma authoritative */
  --icon-on-disabled: #766D7D;        /* Color/Icon/On Disabled — Figma authoritative */
  --quest-active-surface: #FFFCF8;     /* Color/Quest/Active Surface — Figma authoritative */
  --quest-active-border: #B8E4FF;      /* Color/Quest/Active Border — Figma authoritative */
  --quest-progress-track: #FBE8D0;     /* Color/Quest/Progress Track — Figma authoritative */
  --quest-progress-fill: #65C0F4;      /* Color/Quest/Progress Fill — Figma authoritative */
  --quest-complete-surface: #E8F6E6;   /* Color/Quest/Complete Surface — Figma authoritative */
  --quest-complete-accent: #75BD70;    /* Color/Quest/Complete Accent — Figma authoritative */
  --quest-complete-border: #75BD70;    /* Color/Quest/Complete Border — Figma authoritative */
  --quest-locked-surface: #F4E8E1;     /* Color/Quest/Locked Surface — Figma authoritative */
  --quest-locked-text: #766D7D;        /* Color/Quest/Locked Text — Figma authoritative */
  --quest-locked-border: #9B6A52;      /* Color/Quest/Locked Border — Figma authoritative */
  --quest-reward: #F6C94C;             /* Color/Quest/Reward — Figma authoritative */

  /* Approved Phase 3 semantic tokens (Reward Chip) — VALUES RESOLVED (v1.1.13). */
  --reward-available-surface: #FFF5C8; /* Color/Reward/Available Surface — Figma authoritative */
  --reward-available-border: #FFE280;  /* Color/Reward/Available Border — Figma authoritative */
  --reward-earned-surface: #E8F6E6;    /* Color/Reward/Earned Surface — Figma authoritative */
  --reward-earned-border: #BFE6B9;     /* Color/Reward/Earned Border — Figma authoritative */
  --reward-locked-surface: #F4E8E1;    /* Color/Reward/Locked Surface — Figma authoritative */
  --reward-locked-border: #9B6A52;     /* Color/Reward/Locked Border — Figma authoritative */
  --reward-glyph: #F6C94C;             /* Color/Reward/Glyph — Figma authoritative */
  --reward-text: #2A2230;              /* Color/Reward/Text — Figma authoritative */
  --reward-locked-text: #766D7D;      /* Color/Reward/Locked Text — Figma authoritative */
  --hud-surface: #FFFCF8;             /* Color/HUD/Surface */
  --hud-border: #B8E4FF;              /* Color/HUD/Border */
  --hud-text: #2A2230;                /* Color/HUD/Text */
  --hud-subtext: #766D7D;             /* Color/HUD/Subtext */
  --hud-progress-track: #FBE8D0;      /* Color/HUD/Progress Track */
  --hud-progress-fill: #65C0F4;       /* Color/HUD/Progress Fill */
  --hud-star: #F6C94C;               /* Color/HUD/Star */
  --hud-star-surface: #FFF5C8;        /* Color/HUD/Star Surface */
  --dialog-surface: #FFFCF8;          /* Color/Dialog/Surface */
  --dialog-border: #FBE8D0;           /* Color/Dialog/Border */
  --dialog-title: #2A2230;            /* Color/Dialog/Title */
  --dialog-body: #766D7D;             /* Color/Dialog/Body */
  --celebration-accent: #F45C92;      /* Color/Dialog/Celebration Accent */
  --parent-gate-accent: #9B6A52;      /* Color/Dialog/Parent Gate Accent */
  --soft-accent: #FFE5EF;             /* Color/Dialog/Soft Accent */
  --birthday-surface: #FFE5EF;        /* Color/Birthday/Surface */
  --birthday-border: #FFA8C6;         /* Color/Birthday/Border */
  --birthday-title: #2A2230;         /* Color/Birthday/Title */
  --birthday-body: #51475B;           /* Color/Birthday/Body (corrected for a11y contrast) */
  --birthday-glyph: #F6C94C;          /* Color/Birthday/Glyph (Sparkle/Gift/Crown/Star) */
  --birthday-finale-accent: #F45C92;  /* Color/Birthday/Finale Accent */
  --replay-surface: #E7F6FF;          /* Color/Birthday/Replay Surface */
  --replay-border: #B8E4FF;           /* Color/Birthday/Replay Border */
  --radius-lg: 28px;                   /* large radius (HUD/Dialog/Birthday CTA surfaces) */
  --radius-pill: 999px;               /* pill radius (inner chips/bars) */
}

/* ---------- responsive device-class reflow (layout logic only) ----------
   Final visual treatment is DESIGN_REQUIRED from the Figma master.
   These rules only adapt spacing/sizing per device class. */
#game[data-device-class="compact-phone"] .hud,
#game[data-device-class="large-phone"] .hud { gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; }
#game[data-device-class="compact-phone"] .hud-brand,
#game[data-device-class="large-phone"] .hud-brand { font-size: clamp(12px, 3.4vw, 16px); padding: 5px 10px; }
#game[data-device-class="compact-phone"] .obj,
#game[data-device-class="large-phone"] .obj { min-width: var(--obj-min); padding: 5px 8px; }
#game[data-device-class="compact-phone"] .obj-label { font-size: 11px; }
#game[data-device-class="compact-phone"] .pip { width: 12px; height: 12px; }
#game[data-device-class="compact-phone"] .card { padding: 18px; }
#game[data-device-class="compact-phone"] .card h1 { font-size: 22px; }
#game[data-device-class="compact-phone"] .card h2 { font-size: 18px; }
#game[data-device-class="compact-phone"] .tada { font-size: clamp(24px, 8vw, 34px); }
/* Tablet/iPad: a touch more breathing room for controls + cards */
#game[data-device-class="tablet"] .joystick,
#game[data-device-class="ipad"] .joystick { width: clamp(130px, 20vw, 200px); height: clamp(130px, 20vw, 200px); }
#game[data-device-class="tablet"] .action-btn,
#game[data-device-class="ipad"] .action-btn { width: clamp(80px, 12vw, 120px); height: clamp(80px, 12vw, 120px); }
/* Desktop 16:9: keep the play field centered with a comfortable max width so the
   world isn't stretched absurdly wide on ultra-wide monitors. */
#game[data-device-class="desktop"] #stage { width: min(100%, 177.78vh); margin: 0 auto; left: 50%; transform: translateX(-50%); }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  pointer-events: none;
  flex-wrap: wrap;
}
.hud-brand {
  font-weight: 800; letter-spacing: .5px;
  background: rgba(255,255,255,.82); color: var(--brown-deep);
  padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow);
  font-size: clamp(14px, 2.2vw, 18px);
}
.objectives { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.obj {
  background: rgba(255,255,255,.82); border-radius: 14px; padding: 6px 10px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; min-width: 120px;
}
.obj-label { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.pips { display: flex; gap: 4px; }
.pip { width: 14px; height: 14px; border-radius: 50%; background: #e7d8c9; box-shadow: inset 0 0 0 2px #fff; }
.pip.done { background: var(--green-deep); }
.badges { display: flex; gap: 8px; }
.badge {
  background: var(--gold); color: #6b4e00; font-weight: 800; font-size: 12px;
  padding: 6px 10px; border-radius: 999px; box-shadow: var(--shadow);
}

/* ---------- prompt ---------- */
.prompt {
  position: absolute; left: 50%; bottom: 14%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92); color: var(--ink);
  padding: 12px 18px; border-radius: 999px; font-weight: 700;
  box-shadow: var(--shadow); font-size: clamp(14px, 2.4vw, 18px);
  animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-6px);} }

/* ---------- touch controls ---------- */
.touch { position: absolute; inset: 0; pointer-events: none; }
.joystick {
  position: absolute; left: 4%; bottom: 6%;
  width: calc(clamp(110px, 22vw, 160px) * var(--control-scale, 1));
  height: calc(clamp(110px, 22vw, 160px) * var(--control-scale, 1));
  border-radius: 50%; background: rgba(255,255,255,.35); border: 3px solid rgba(255,255,255,.6);
  pointer-events: auto; touch-action: none;
}
.stick {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(255,255,255,.92); box-shadow: var(--shadow);
}
.action-btn {
  position: absolute; right: 5%; bottom: 8%;
  width: calc(clamp(72px, 14vw, 104px) * var(--control-scale, 1));
  height: calc(clamp(72px, 14vw, 104px) * var(--control-scale, 1));
  border-radius: 50%; border: none; pointer-events: auto;
  background: var(--gold); color: #6b4e00; font-size: 32px; font-weight: 900;
  box-shadow: var(--shadow);
}
.action-btn:active { transform: scale(.94); }

/* ---------- overlays / modals ---------- */
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(40, 25, 20, .45); padding: 18px; z-index: 20;
}
.card {
  background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; max-width: min(var(--overlay-max-w, 720px), 92vw); width: 100%; text-align: center;
  max-height: 90vh; overflow: auto;
}
.card h1 { margin: 0 0 6px; color: var(--brown-deep); }
.card h2 { margin: 0 0 10px; color: var(--brown-deep); }
.card p { color: var(--ink-soft); line-height: 1.5; }
/* Primary Button — Figma Phase 3 (Primary Button PASS) seam.
   Scoped to primary actions only; do NOT generalize to other components.
   Figma values RESOLVED from the authoritative component (Figma node 14:14) — the source of
   truth, NOT placeholders:
     Play    Default #F45C92  Pressed #D94079  Disabled #FFE5EF
     Parent  Default #B92C63  Pressed #8F214D  Disabled #F4E8E1
   Approved: Play/Parent modes, Default/Pressed/Disabled states, 64px preferred / 56px min
   touch target, Nunito Bold 20/28, pressed scale 0.96, Fast 140ms, disabled quiet. */
.btn {
  --btn-fill-play: #F45C92;        /* token: Color/Action/Primary (Play Default) — Figma authoritative */
  --btn-fill-parent: #B92C63;      /* token: Color/Action/Primary (Parent Default) — Figma authoritative */
  --btn-pressed-play: #D94079;     /* token: Color/Action/Primary Pressed (Play) — Figma authoritative */
  --btn-pressed-parent: #8F214D;  /* token: Color/Action/Primary Pressed (Parent) — Figma authoritative */
  --btn-disabled-play: #FFE5EF;    /* token: Color/Action/Primary Disabled (Play) — Figma authoritative */
  --btn-disabled-parent: #F4E8E1;  /* token: Color/Action/Primary Disabled (Parent) — Figma authoritative */
  --btn-disabled-text: #766D7D;    /* token: Color/Text/On Disabled (Disabled Text) — Figma authoritative */
  --btn-fill: var(--btn-fill-play);
  --btn-pressed: var(--btn-pressed-play);
  --btn-disabled-surface: var(--btn-disabled-play);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 8px 6px 0; padding: 0 22px;
  min-height: 64px; min-width: 64px;      /* approved child touch target (64 preferred / 56 floor) */
  border: none; border-radius: var(--radius, 18px);
  background: var(--btn-fill); color: #fff;
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  font-weight: 700; font-size: 20px; line-height: 28px;   /* approved label type */
  box-shadow: var(--shadow);
  transition: transform 140ms ease-out, background-color 140ms ease-out, opacity 140ms ease-out; /* Fast */
}
/* Secondary Button — Figma Phase 3 (Secondary Button PASS) seam.
   Scoped to secondary/reversible actions (Back/Later/Maybe/Not Now) ONLY.
   Pill geometry, NO elevation, subordinate to Primary. Do NOT generalize to other components.
   VALUES RESOLVED from the authoritative Figma variable export (v1.1.13) — no placeholders remain.
   Approved: Play/Parent modes, Default/Pressed/Disabled states, 64/56px touch, Nunito Bold
   20/28, pressed scale 0.96, Fast 140ms, pill, icon pending INSTANCE_SWAP. */
.btn.secondary {
  --btn2-fill-play: var(--action-secondary);  /* token: Color/Action/Secondary (Play) — Figma authoritative #E7F6FF */
  --btn2-fill-parent: var(--action-secondary);/* token: Color/Action/Secondary (Parent) — same resolved token (parent variant not separately specified) */
  --btn2-fill: var(--btn2-fill-play);
  --btn2-text: var(--ink);                    /* calm dark ink on light fill (accessible, approved base token) */
  --btn2-pressed: var(--secondary-pressed);   /* token: Color/Action/Secondary Pressed — Figma authoritative #B8E4FF */
  --btn2-disabled-fill: var(--action-disabled);/* token: Color/Action/Disabled — Figma authoritative #F4E8E1 */
  --btn2-disabled-text: #766D7D;              /* token: Color/Text/On Disabled — Figma authoritative #766D7D */
  background: var(--btn2-fill); color: var(--btn2-text);
  box-shadow: none;                           /* Secondary: no default elevation */
  border-radius: 999px;                       /* pill geometry */
}
[data-mode="parent"] .btn.secondary { --btn2-fill: var(--btn2-fill-parent); } /* Parent mode-aware fill (seam) */
.btn.secondary:active { transform: scale(0.96); background: var(--btn2-pressed); } /* press scale + stronger sky */
.btn.secondary[disabled], .btn.secondary.is-disabled {
  background: var(--btn2-disabled-fill); color: var(--btn2-disabled-text);
  opacity: 1; cursor: default; box-shadow: none; /* approved disabled tokens; not a duplicate */
}
[data-mode="parent"] .btn { --btn-fill: var(--btn-fill-parent); --btn-pressed: var(--btn-pressed-parent); --btn-disabled-surface: var(--btn-disabled-parent); } /* Parent mode-aware fill/press/disabled (seam) */
.btn:active { transform: scale(0.96); background: var(--btn-pressed); } /* approved press scale + Figma pressed fill */
.btn[disabled], .btn.is-disabled { background: var(--btn-disabled-surface); color: var(--btn-disabled-text); opacity: 1; cursor: default; } /* disabled = Figma light surface + quiet disabled text (#766D7D, visible but quiet) */

/* Icon Control — Figma Phase 3 (Icon Control PASS) seam.
   Scoped to .icon-btn ONLY. 64×64 control / 32×32 glyph. Do NOT generalize to other controls.
   Fill VALUES RESOLVED from the authoritative Figma variable export (v1.1.13); glyphs come from
   Figma INSTANCE_SWAP (vector asset transfer pending). 
   Approved: Play/Parent modes, Default/Pressed/Disabled states, 6 variants, INSTANCE_SWAP "Glyph",
   pressed scale 0.96, Fast 140ms, disabled glyph opacity 0.52 (recognizable, NOT an error state). */
.icon-btn {
  --ic-fill: var(--action-secondary);            /* token: Color/Action/Secondary (Default) */
  --ic-pressed: var(--secondary-pressed);        /* token: Color/Action/Secondary Pressed */
  --ic-disabled-fill: var(--action-disabled);    /* token: Color/Action/Disabled (approved, reused) */
  --ic-glyph: var(--icon-primary);               /* token: Color/Icon/Primary */
  --ic-disabled-glyph: var(--icon-on-disabled);  /* token: Color/Icon/On Disabled */
  width: 64px; height: 64px; padding: 0; border: none;
  border-radius: var(--radius, 18px);            /* large rounded (placeholder radius) */
  background: var(--ic-fill); color: var(--ic-glyph);
  box-shadow: var(--shadow);                     /* floating HUD elevation */
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto;
  transition: transform 140ms ease-out, background-color 140ms ease-out, box-shadow 140ms ease-out; /* Fast */
}
.icon-btn .glyph { width: 32px; height: 32px; display: block; } /* vector glyph slot — INSTANCE_SWAP from Figma; no emoji/unicode/raster stand-in */
.icon-btn:active { transform: scale(0.96); background: var(--ic-pressed); box-shadow: none; } /* pressed: 0.96, no shadow */
.icon-btn[disabled], .icon-btn.is-disabled {
  background: var(--ic-disabled-fill); color: var(--ic-disabled-glyph);
  cursor: default; box-shadow: none;
}
.icon-btn[disabled] .glyph, .icon-btn.is-disabled .glyph { opacity: 0.52; } /* token: opacity/disabled — recognizable, not an error */

/* Quest Card — Figma Phase 3 (Quest Card PASS) seam.
   Scoped to .quest-card ONLY. 360×226 card. Do NOT generalize.
   Fill VALUES RESOLVED from the authoritative Figma variable export (v1.1.13) — no placeholders remain.
   Approved: states Active/Complete/Locked; Title/Progress/Reward/State properties;
   never red / never FAIL / never punishment (Locked). */
.quest-card {
  --qc-surface: var(--quest-active-surface);
  --qc-border: var(--quest-active-border);
  --qc-progress: var(--quest-progress-fill);   /* sky active progress fill */
  --qc-label: var(--ink-soft);
  --qc-reward: var(--quest-reward);
  --qc-track: var(--quest-progress-track);
  width: 360px; max-width: 92vw; min-height: 226px;
  box-sizing: border-box; padding: 20px 22px; gap: 12px;
  border-radius: 28px;                          /* large rounded (placeholder radius) */
  background: var(--qc-surface); border: 3px solid var(--qc-border);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; text-align: left;
}
.quest-card .qc-title { font-family: var(--font); font-weight: 700; font-size: 20px; color: var(--brown-deep); }
.quest-card .qc-progress { font-weight: 800; font-size: 18px; color: var(--qc-label); }
.quest-card .qc-bar { height: 12px; border-radius: 999px; background: var(--qc-track); overflow: hidden; }
.quest-card .qc-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--qc-progress); }
.quest-card .qc-reward { font-weight: 800; color: var(--qc-reward); }
.quest-card.is-complete {
  --qc-surface: var(--quest-complete-surface);
  --qc-border: var(--quest-complete-border);
  --qc-progress: var(--quest-complete-accent);   /* leaf accent */
  --qc-label: var(--quest-complete-accent);      /* Figma authoritative complete accent #75BD70 (replaces base --green-deep) */
}
.quest-card.is-locked {
  --qc-surface: var(--quest-locked-surface);
  --qc-border: var(--quest-locked-border);
  --qc-label: var(--quest-locked-text);
  --qc-track: transparent;                        /* empty progress */
}
.quest-card.is-locked .qc-bar > i { display: none; }

/* Reward Chip — Figma Phase 3 (Reward Chip PASS) seam.
   Scoped to .reward-chip ONLY. ~51px pill, 24px vector glyph, Nunito SemiBold 18px.
   Do NOT generalize. Fill VALUES RESOLVED from the authoritative Figma variable export (v1.1.13);
   glyphs come from Figma INSTANCE_SWAP (vector asset transfer pending).
   Approved: non-interactive display-only badge (Available/Earned/Locked); 24px vector glyph;
   pill; sunshine (available) / leaf (earned) / cocoa (locked, never red); glyph via INSTANCE_SWAP. */
.reward-chip {
  --rc-surface: var(--reward-available-surface);
  --rc-border: var(--reward-available-border);
  --rc-text: var(--reward-text);
  --rc-glyph: var(--reward-glyph);
  display: inline-flex; align-items: center; gap: 8px; /* glyph-to-label spacing */
  height: 51px; padding: 12px 16px; border-radius: 999px; /* pill geometry */
  box-sizing: border-box;
  background: var(--rc-surface); border: 2px solid var(--rc-border);
  color: var(--rc-text);
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  font-weight: 600; font-size: 18px; line-height: 1; /* SemiBold 18px */
  pointer-events: none; user-select: none; /* display-only (no 56/64px touch target) */
}
.reward-chip .glyph { width: 24px; height: 24px; display: block; flex: 0 0 auto; } /* vector glyph slot — INSTANCE_SWAP; no emoji/unicode/raster stand-in */
.reward-chip.is-earned {
  --rc-surface: var(--reward-earned-surface);
  --rc-border: var(--reward-earned-border);
  /* positive completed feeling; no aggressive celebration inside the static chip */
}
.reward-chip.is-locked {
  --rc-surface: var(--reward-locked-surface);
  --rc-border: var(--reward-locked-border);
  --rc-text: var(--reward-locked-text);
  /* never red / never failure / never punishment; softer text */
}
.reward-chip.is-locked .glyph { opacity: 0.52; } /* recognizable at reduced visual intensity (matches disabled convention) */

/* ===== Quest & Rewards surface (Figma Phase 10 APPROVED, page 16_Quest & Rewards) =====
   Full-screen DOM scene (mirrors the Treehouse hub). Reuses the approved Quest Card
   (32:24) + Reward Chip (40:26) components — those tokens/fills are resolved above.
   Structural layout only. Motion: surface reveal ~220ms; state change ~220ms; the
   Reward Chip "earned" glow <=600ms. Reduced motion drops translation/scaling -> ~220ms
   opacity/state only. Phone = TRUE responsive reflow (NOT a scaled desktop). Primary
   action 64px; child-interaction floor 56px. */
.quest {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 0%, var(--pink-soft), var(--cream) 62%), var(--cream);
  overflow: auto;
  animation: q-reveal 220ms ease-out;
}
.quest.hidden { display: none; }
.q-header { text-align: center; margin: 8px 0 14px; }
.q-title { margin: 0; color: var(--brown-deep); font-family: var(--font); font-weight: 800; font-size: clamp(24px, 5vw, 40px); }
.q-sub { margin: 4px 0 0; color: var(--ink-soft); font-weight: 700; font-size: clamp(14px, 3.2vw, 20px); }

.q-body { flex: 1 1 auto; display: grid; gap: 16px; align-content: center; justify-items: center; }
.quest[data-comp="desktop"] .q-body,
.quest[data-comp="tablet"] .q-body { grid-template-columns: minmax(220px, 1fr) 2fr; align-items: center; }
.quest[data-comp="phone"] .q-body { grid-template-columns: 1fr; }

.q-cappy {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.6); border: 3px solid var(--pink); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow);
}
.q-cappy-img { width: clamp(120px, 22vw, 200px); height: auto; }

.q-journey { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 420px; }
.q-journey .quest-card { width: 100%; max-width: 360px; }
.q-journey .reward-chip { align-self: center; } /* display-only (keeps approved 51px + pointer-events:none) */

/* Next Quest Gate — calm, child-controlled. Never a countdown / timer / teleport. */
.next-quest-gate {
  width: 100%; max-width: 360px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.7); border: 2px dashed var(--hud-border);
  text-align: center;
}
.next-quest-gate .nqg-label { margin: 0; color: var(--ink-soft); font-weight: 700; font-size: clamp(14px, 3.2vw, 18px); }
.next-quest-gate.is-ready { border-style: solid; border-color: var(--quest-complete-border); background: rgba(232,246,230,.8); }
.next-quest-gate.is-ready .nqg-label { color: var(--quest-complete-accent); }

.q-footer { display: flex; gap: 12px; justify-content: center; padding: 12px 0 4px; flex-wrap: wrap; }
.q-footer .btn { min-height: 64px; padding: 0 28px; font-size: 18px; } /* primary action 64px (>= 56px floor) */

/* HUD "Quests" button — persistent, available in the meadow. */
.hud-quest-btn {
  margin-left: 8px; align-self: center;
  font-family: var(--font); font-weight: 800; font-size: 16px;
  color: var(--brown-deep); background: var(--action-secondary);
  border: 2px solid var(--hud-border); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; min-height: 48px;
}
.hud-quest-btn:active { background: var(--secondary-pressed); }

/* Phone TRUE responsive reflow (NOT a scaled desktop). Controls >= 56px. */
.quest[data-comp="phone"] .q-body { grid-template-columns: 1fr; }
.quest[data-comp="phone"] .q-footer { flex-direction: column; }
.quest[data-comp="phone"] .q-footer .btn { width: 100%; min-height: 64px; }

/* Calm surface reveal (~220ms) + Reward Chip "earned" glow (<=600ms). */
@keyframes q-reveal { from { opacity: 0; } to { opacity: 1; } }
.reward-chip.is-earned { animation: q-chip-glow 600ms ease-out; }
@keyframes q-chip-glow { from { box-shadow: 0 0 0 0 rgba(117,189,112,.5); } to { box-shadow: 0 0 0 6px rgba(117,189,112,0); } }

/* Reduced motion: replace reveal/scale with ~220ms opacity/state only. Preserve all
   states/actions/states. */
#game.reduced-motion .quest { animation: none; opacity: 1; }
#game.reduced-motion .reward-chip.is-earned { animation: none; }
#game.reduced-motion .btn,
#game.reduced-motion .hud-quest-btn { transition: background-color 220ms ease-out, border-color 220ms ease-out, color 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .quest { animation: none; opacity: 1; }
  .reward-chip.is-earned { animation: none; }
  .btn, .hud-quest-btn { transition: background-color 220ms ease-out, border-color 220ms ease-out, color 220ms ease-out; }
}

/* candle puzzle */
.candles { display: flex; gap: 12px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.candle {
  width: 54px; height: 90px; border-radius: 10px; background: #fff3e0; position: relative;
  box-shadow: var(--shadow); border: 3px solid #f0d9bf; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: center;
}
.candle .flame {
  width: 16px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff3b0, #ffb703 60%, #fb8500);
  margin-top: -14px; opacity: 0; transition: opacity .2s, transform .2s; transform: scale(.6);
}
.candle.lit .flame { opacity: 1; transform: scale(1); }
.candle.preview { box-shadow: 0 0 0 4px var(--gold), var(--shadow); transform: translateY(-6px); }
.candle:disabled { cursor: default; }

/* birthday book */
.book-text {
  white-space: pre-wrap; text-align: left; background: #fff; border-radius: 12px;
  padding: 16px; font-size: 18px; line-height: 1.6; color: var(--ink);
  border: 2px dashed #e7d8c9; margin: 12px 0;
}
.book-edit { width: 100%; min-height: 180px; font-family: inherit; font-size: 16px; border-radius: 12px; border: 2px solid #e7d8c9; padding: 12px; resize: vertical; }

/* finale */
.tada { font-size: clamp(26px, 6vw, 44px); color: var(--brown-deep); font-weight: 900; }
.subtitle { color: var(--ink-soft); }

/* desktop hint */
.deskhint {
  position: absolute; right: 14px; bottom: 12px; color: var(--ink-soft);
  background: rgba(255,255,255,.7); padding: 6px 12px; border-radius: 999px; font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .prompt { animation: none; }
  .candle { transition: none; }
}

/* ===== Phase 3 APPROVED components — HUD Control (47:26), Dialog (49:27), Birthday CTA (53:29) =====
   Scoped to their own classes ONLY. Do NOT generalize to other controls. VALUES RESOLVED
   (v1.1.14), Figma authoritative. Glyphs are Figma vector INSTANCE_SWAP slots (empty — never
   emoji / unicode / raster stand-ins). */

/* ---------- HUD Control (child-facing: next objective + progress + stars only) ---------- */
.hud-control {
  --hc-surface: var(--hud-surface);
  --hc-border: var(--hud-border);
  --hc-text: var(--hud-text);
  --hc-subtext: var(--hud-subtext);
  --hc-track: var(--hud-progress-track);
  --hc-fill: var(--hud-progress-fill);
  --hc-star: var(--hud-star);
  --hc-star-surface: var(--hud-star-surface);
  display: flex; align-items: center; gap: 14px; box-sizing: border-box;
  width: 420px; max-width: calc(100vw - 24px);
  min-height: 100px; padding: 14px 18px;
  background: var(--hc-surface); border: 3px solid var(--hc-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  color: var(--hc-text); font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  pointer-events: none; /* child-facing display-only HUD — not an activation control */
}
.hud-control--expanded { width: 620px; }
.hud-control .hc-quest { font-weight: 800; font-size: 16px; line-height: 1.25; min-width: 0; }
.hud-control .hc-progress { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.hud-control .hc-count { font-weight: 800; font-size: 14px; color: var(--hc-subtext); }
.hud-control .hc-bar { height: 10px; border-radius: var(--radius-pill); background: var(--hc-track); overflow: hidden; }
.hud-control .hc-bar > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--hc-fill); transition: width 140ms ease-out; }
.hud-control .hc-stars { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--hc-subtext); white-space: nowrap; }
.hud-control .hc-star-slot { width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--hc-star-surface); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hud-control .hc-star-slot .glyph { width: 16px; height: 16px; display: block; } /* vector glyph INSTANCE_SWAP slot */
/* compact / large phones: full width, allow wrap */
#game[data-device-class="compact-phone"] .hud-control,
#game[data-device-class="large-phone"] .hud-control { width: auto; flex: 1 1 100%; }

/* ---------- Dialog (modal frame: Info / Celebration / ParentGate) ---------- */
.dialog {
  --dlg-surface: var(--dialog-surface);
  --dlg-border: var(--dialog-border);
  --dlg-title: var(--dialog-title);
  --dlg-body: var(--dialog-body);
  --dlg-accent: var(--celebration-accent);
  background: var(--dlg-surface) !important;
  border: 2px solid var(--dlg-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--dlg-body) !important;
  animation: dlg-in 180ms ease-out; /* entrance bounce/scale — removed under reduced-motion */
}
.dialog h1, .dialog h2 { color: var(--dlg-title) !important; }
.dialog p { color: var(--dlg-body) !important; }
.dialog--celebration { --dlg-accent: var(--celebration-accent); border-color: var(--celebration-accent) !important; }
.dialog--parentGate { --dlg-accent: var(--parent-gate-accent); border-color: var(--parent-gate-accent) !important; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Birthday CTA (GiftEntry / Finale / Replay) ---------- */
.birthday-cta {
  --bcta-surface: var(--birthday-surface);
  --bcta-border: var(--birthday-border);
  --bcta-title: var(--birthday-title);
  --bcta-body: var(--birthday-body);
  --bcta-glyph: var(--birthday-glyph);
  --bcta-finale-accent: var(--birthday-finale-accent);
  --bcta-replay-surface: var(--replay-surface);
  --bcta-replay-border: var(--replay-border);
}
.birthday-cta--giftEntry, .birthday-cta--finale {
  background: var(--bcta-surface) !important;
  border: 2px solid var(--bcta-border) !important;
}
.birthday-cta--giftEntry h1, .birthday-cta--giftEntry h2,
.birthday-cta--finale h1, .birthday-cta--finale h2 { color: var(--bcta-title) !important; }
.birthday-cta--giftEntry p, .birthday-cta--finale p { color: var(--bcta-body) !important; }
/* Replay CTA — a small birthday surface wrapping the replay action (uses approved Primary Button) */
.birthday-cta--replay {
  display: inline-block; padding: 10px 14px; border-radius: var(--radius-lg);
  background: var(--bcta-replay-surface); border: 2px solid var(--bcta-replay-border);
  box-shadow: var(--shadow);
}

/* ===== Birthday Opening (Figma Phase 6 — APPROVED) =====
   Structural layout only. Final visual treatment of the Birthday Opening composition is
   Figma-owned (DESIGN_REQUIRED); these rules adapt spacing/composition per device class and
   honor the phone touch-target rule (full-size 64px Primary Button, never scaled down).
   The Dialog + Birthday CTA components themselves carry the approved tokens. */
.birthday-cta { padding-bottom: max(22px, env(safe-area-inset-bottom)); } /* keep CTA clear of home indicator/browser chrome */
.birthday-cta .bo-grid { display: block; text-align: center; }
.birthday-cta .bo-greeting { margin: 4px 0 10px; }
.birthday-cta .bo-line {
  margin: 8px 0; font-weight: 700; font-size: clamp(15px, 4vw, 18px);
  color: var(--bcta-body); transition: color 140ms ease-out;
}
.birthday-cta .bo-line.bo-latest { color: var(--bcta-title); }
.birthday-cta .bo-gift { display: flex; justify-content: center; }
/* Desktop = true two-column (left greeting+Cappy-facing text, right gift entry). Do NOT
   stretch the phone/tablet single-column layout into desktop — keep each composition intact. */
.birthday-cta[data-bo-comp="desktop"] .bo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; text-align: left;
}
.birthday-cta[data-bo-comp="desktop"] .bo-gift { justify-content: center; }
/* Phone: full-size Primary Button (64px min) — do NOT scale the CTA down to fit the phone.
   A full-width 64px control preserves the approved child touch target (>= 56px floor, 64px for primary). */
#game[data-device-class="compact-phone"] .birthday-cta .btn,
#game[data-device-class="large-phone"] .birthday-cta .btn { width: 100%; min-height: 64px; }
/* Reduced motion: drop the Dialog entrance transition. The opening still unfolds in the same
   logical order with the same state confirmations — only the transition style changes. */
#game.reduced-motion .dialog { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .birthday-cta .bo-line { transition: none; }
}

/* ===== Tifany Treehouse — Personal Home Hub (Figma Phase 8 APPROVED) =====
   Structural layout only. Final visual treatment of the Main Room composition + the
   Candle/Star/Book/Door vectors is Figma-owned (DESIGN_REQUIRED). Cappy uses the GENUINE
   transferred Figma SVG; candle/star/book/door use FUNCTIONAL placeholder pips/slots (the
   same pre-v1.1.28 Cappy placeholder precedent) so the experience is testable now and the
   real vectors drop in later with no code change. Tokens ALIAS base.css primitives — NO
   second palette invented. Motion: calm Cappy idle, candle glow ~600ms, star appear ~360ms,
   book pop ~600ms, door ready ~600ms. Reduced motion drops decorative loops; state +
   confirmation preserved (~220ms state transitions). */
.treehouse {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 50% 0%, var(--pink-soft), var(--cream) 62%), var(--cream);
  overflow: auto;
}
.treehouse.hidden { display: none; }
.th-header { text-align: center; margin: 8px 0 14px; }
.th-title { margin: 0; color: var(--brown-deep); font-family: var(--font); font-weight: 800; font-size: clamp(24px, 5vw, 40px); }
.th-subtitle { margin: 4px 0 2px; color: var(--ink-soft); font-weight: 700; font-size: clamp(14px, 3.2vw, 20px); }
.th-tap { margin: 0; color: var(--ink-soft); font-size: clamp(12px, 2.6vw, 16px); }

.th-body { flex: 1 1 auto; display: grid; gap: 16px; align-content: center; }
/* Desktop/tablet: room = Cappy + destinations grid. Phone = TRUE responsive single column
   (NOT a scaled desktop) with full-width child-sized rows (>= 56px hit zones). */
.treehouse[data-comp="desktop"] .th-body,
.treehouse[data-comp="tablet"] .th-body { grid-template-columns: minmax(220px, 1fr) 2fr; align-items: center; }

.th-cappy {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.6); border: 3px solid var(--pink); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow);
}
.th-cappy-img { width: clamp(120px, 22vw, 200px); height: auto; }
.th-cappy-caption { color: var(--brown-deep); font-weight: 800; font-size: clamp(14px, 3vw, 18px); }

.th-destinations { display: grid; gap: 12px; }
.treehouse[data-comp="desktop"] .th-destinations,
.treehouse[data-comp="tablet"] .th-destinations { grid-template-columns: 1fr 1fr; }
.treehouse[data-comp="phone"] .th-destinations { grid-template-columns: 1fr; }

.th-dest {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: rgba(255,255,255,.82); border: 3px solid var(--pink-soft); border-radius: var(--radius-lg);
  padding: 14px; box-shadow: var(--shadow); cursor: pointer;
  min-height: 64px; /* approved child touch-target floor (56px) for primary-ish regions */
  font-family: var(--font-body, "Nunito", system-ui, sans-serif); color: var(--ink);
  transition: transform 140ms ease-out, border-color 140ms ease-out, background-color 140ms ease-out;
}
.th-dest:active { transform: scale(.97); border-color: var(--pink); }
.th-dest-art { flex: 0 0 auto; display: inline-flex; gap: 5px; align-items: center; }
.th-dest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-dest-label { font-weight: 800; font-size: clamp(15px, 3.4vw, 20px); color: var(--brown-deep); }
.th-dest-hint { font-weight: 600; font-size: clamp(11px, 2.6vw, 14px); color: var(--ink-soft); }

/* Functional placeholder pips/slots (DESIGN_REQUIRED: final Figma vectors). These are UI
   status affordances (holders/sockets/slots), NOT character art. Friends slots stay EMPTY
   until approved Figma characters exist — never emoji/Unicode/stock/AI/programmer art. */
.th-pip { width: 16px; height: 22px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 2px var(--pink-soft); }
.th-pip.lit { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); animation: th-glow 600ms ease-out; }
.th-star { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--pink-soft); }
.th-star.filled { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); animation: th-glow 360ms ease-out; }
.th-slot { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--pink-soft); background: transparent; }
.th-book { width: 26px; height: 20px; border-radius: 4px; background: var(--pink-soft); border: 2px solid var(--pink); }
.th-book.unlocked { background: var(--pink); }
.th-lock { font-size: 11px; font-weight: 800; color: var(--ink-soft); margin-left: 4px; }
.th-door { width: 22px; height: 30px; border-radius: 4px 4px 2px 2px; background: var(--green-deep); border: 2px solid var(--brown); }
.th-door.ready { box-shadow: 0 0 0 3px var(--gold); animation: th-door 600ms ease-out; }
.th-dest--door { border-color: var(--green-deep); } /* the adventure entry — distinct, calm */

@keyframes th-glow { from { transform: scale(.7); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes th-door { from { box-shadow: 0 0 0 0 var(--gold); } to { box-shadow: 0 0 0 3px var(--gold); } }

.th-footer { display: flex; justify-content: center; margin-top: 14px; }

/* Reduced motion: drop decorative loops (glow/door pulse). Preserve state + confirmation;
   keep ~220ms state transitions only. */
#game.reduced-motion .th-pip.lit,
#game.reduced-motion .th-star.filled,
#game.reduced-motion .th-door.ready { animation: none; }
#game.reduced-motion .th-dest { transition: background-color 220ms ease-out, border-color 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .th-pip.lit, .th-star.filled, .th-door.ready { animation: none; }
  .th-dest { transition: background-color 220ms ease-out, border-color 220ms ease-out; }
}

/* ============================================================
   Birthday Book — Persistent Story & Memory Library
   (Figma Phase 9 APPROVED, page 15_Birthday Book, node 6:18)
   Reader set 102:304: desktop 102:100 (1440x900, two-page spread),
   tablet 102:185 (834x1194, single), phone 102:249 (390x844, TRUE reflow).
   Nav controls: 64px preferred, 56px absolute min (including phone compact).
   Tokens ALIAS base.css / existing treehouse primitives — no second palette.
   ============================================================ */
.birthdaybook {
  position: absolute; inset: 0; z-index: 16;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 50% 0%, var(--pink-soft), var(--cream) 62%), var(--cream);
  overflow: auto;
}
.birthdaybook.hidden { display: none; }

.bb-header { text-align: center; margin: 6px 0 12px; }
.bb-title { margin: 0; color: var(--brown-deep); font-family: var(--font); font-weight: 800; font-size: clamp(24px, 5vw, 40px); }
.bb-subtitle { margin: 4px 0 6px; color: var(--ink-soft); font-weight: 700; font-size: clamp(14px, 3.2vw, 20px); }

/* Chapter tabs (Birthday Meadow active; Keep Exploring = locked future preview) */
.bb-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.bb-tab {
  font-family: var(--font-body, "Nunito", system-ui, sans-serif); font-weight: 800;
  font-size: clamp(14px, 2.8vw, 18px); padding: 10px 18px; border-radius: 999px;
  border: 2px solid var(--pink); background: var(--pink-soft); color: var(--brown-deep);
  cursor: default; min-height: 44px; display: inline-flex; align-items: center;
}
.bb-tab.active { background: var(--pink); color: #fff; border-color: var(--pink); }
.bb-tab.locked { background: transparent; border-color: var(--brown); color: var(--ink-soft); cursor: pointer; }
.bb-tab.locked:active { transform: scale(.97); }

.bb-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 8px 0; min-height: 0; }

/* Desktop: two-page spread (pages 2-3). Cream book frame with brown spine. */
.bb-spread {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch;
  width: 100%; max-width: 1100px;
  background: var(--cream); border: 3px solid var(--brown); border-radius: 18px;
  padding: 22px; box-shadow: var(--shadow);
}
.bb-spread .bb-spine { width: 6px; background: var(--brown); border-radius: 4px; }

/* Single page wrapper (cover on desktop, all pages on tablet/phone). */
.bb-page--single, .bb-page--solo {
  background: #fff; border-radius: 14px; border: 2px solid var(--pink-soft);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  width: 100%;
}
.bb-page--solo { max-width: 720px; }
.bb-page--single { max-width: 720px; }

.bb-page {
  background: #fff; border-radius: 14px; border: 2px solid var(--pink-soft);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  min-height: 520px;
}
.bb-chapter { color: var(--ink-soft); font-weight: 800; font-size: clamp(12px, 2.4vw, 14px); letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.bb-page-title { color: var(--brown-deep); font-family: var(--font); font-weight: 800; font-size: clamp(22px, 4vw, 32px); margin: 0; }

/* Illustrations: story (light blue), memory (light green), cover (pink-soft).
   Cappy uses the genuine transferred SVG (rendered as <img> by game.js).
   Supporting elements are functional placeholders built from approved tokens. */
.bb-illustration {
  border-radius: 14px; padding: 18px; flex: 1 1 auto; display: flex;
  align-items: center; justify-content: center; position: relative; min-height: 260px;
}
.bb-illustration--story { background: #d8eef9; border: 2px solid #bfe0f0; }
.bb-illustration--memory { background: #e3f3df; border: 2px solid #c9e6c3; }
.bb-illustration--cover { background: var(--pink-soft); border: 2px solid var(--pink); min-height: 220px; }

/* Story scene: positions Cappy, stars, pond, candle on the light-blue panel. */
.bb-scene { position: relative; width: 100%; height: 100%; min-height: 240px; }
.bb-scene-cappy { position: absolute; left: 6%; bottom: 12%; width: 36%; max-width: 170px; }
.bb-scene-pond { position: absolute; left: 50%; bottom: 14%; width: 30%; height: 28%;
  background: radial-gradient(ellipse at 40% 40%, #bfe1f5 0%, #88c3e3 70%, #5fa9cf 100%);
  border-radius: 50%; box-shadow: inset 0 -4px 6px rgba(255,255,255,.5); }
.bb-scene-candle { position: absolute; right: 8%; bottom: 28%; display: flex; flex-direction: column; align-items: center; }
.bb-scene-candle .body { width: 20px; height: 38px; background: #fff3e0; border: 2px solid var(--brown); border-radius: 4px 4px 2px 2px; }
.bb-scene-candle .flame { width: 14px; height: 20px; background: var(--gold); border-radius: 50% 50% 40% 40%; box-shadow: 0 0 10px var(--gold); }
.bb-scene-candle .holder { width: 32px; height: 5px; background: var(--gold); border-radius: 50%; margin-top: -2px; }
.bb-scene-star { position: absolute; width: 22px; height: 22px; }
.bb-scene-star::before { content: ""; position: absolute; inset: 0; background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bb-scene-star.s { width: 14px; height: 14px; }
.bb-scene-star.pos-a { left: 38%; top: 24%; }
.bb-scene-star.pos-b { left: 48%; top: 14%; }
.bb-scene-star.pos-c { left: 30%; top: 38%; }

/* Memory scene: candle (if found) + N stars (0..3) — truthful to save state. */
.bb-mem { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.bb-mem-candle { display: flex; flex-direction: column; align-items: center; }
.bb-mem-candle .body { width: 24px; height: 46px; background: #fff3e0; border: 2px solid var(--brown); border-radius: 4px 4px 2px 2px; }
.bb-mem-candle .flame { width: 18px; height: 24px; background: var(--gold); border-radius: 50% 50% 40% 40%; box-shadow: 0 0 12px var(--gold); }
.bb-mem-candle .holder { width: 38px; height: 6px; background: var(--gold); border-radius: 50%; margin-top: -2px; }
.bb-mem-candle.empty { opacity: .4; filter: grayscale(.4); }
.bb-mem-candle.empty .flame, .bb-mem-candle.empty .holder { display: none; }
.bb-mem-candle.empty .body { background: #f5efe6; }
.bb-mem-stars { display: inline-flex; gap: 12px; }
.bb-mem-star { width: 28px; height: 28px; position: relative; }
.bb-mem-star::before { content: ""; position: absolute; inset: 0; background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bb-mem-star.empty::before { background: #fff; box-shadow: inset 0 0 0 2px var(--pink-soft); }

/* Cover illustration: simple warm meadow */
.bb-cover-art { text-align: center; color: var(--brown-deep); font-weight: 800; font-size: clamp(20px, 3.6vw, 28px); }

.bb-caption { color: var(--ink); font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  font-weight: 600; font-size: clamp(16px, 3vw, 20px); line-height: 1.5; margin: 0; }

/* Footer navigation — Back Home / Previous / Next. 64px preferred height. */
.bb-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; flex-wrap: wrap;
}
.bb-footer .btn { min-height: 64px; padding: 0 22px; font-size: clamp(16px, 3.2vw, 20px); }
.bb-footer .btn.secondary { min-height: 64px; }
.bb-pages { color: var(--ink-soft); font-weight: 700; font-size: clamp(14px, 2.8vw, 18px); }

/* Composition selectors — show the right container per device class. */
.birthdaybook[data-comp="desktop"] .bb-spread { display: grid; }
.birthdaybook[data-comp="desktop"] .bb-page--solo { display: flex; }
.birthdaybook[data-comp="desktop"] .bb-page--single { display: none; }

.birthdaybook[data-comp="tablet"] .bb-spread,
.birthdaybook[data-comp="phone"] .bb-spread { display: none; }
.birthdaybook[data-comp="tablet"] .bb-page--solo,
.birthdaybook[data-comp="phone"] .bb-page--solo { display: none; }
.birthdaybook[data-comp="tablet"] .bb-page--single,
.birthdaybook[data-comp="phone"] .bb-page--single { display: flex; }

/* Phone TRUE responsive reflow (NOT a scaled desktop). Controls >= 56px. */
.birthdaybook[data-comp="phone"] .bb-page { padding: 16px; min-height: 440px; }
.birthdaybook[data-comp="phone"] .bb-illustration { min-height: 200px; padding: 12px; }
.birthdaybook[data-comp="phone"] .bb-caption { font-size: clamp(15px, 4vw, 18px); }
.birthdaybook[data-comp="phone"] .bb-footer .btn { min-height: 64px; width: 100%; }
.birthdaybook[data-comp="phone"] .bb-footer { flex-direction: column; gap: 10px; }
.birthdaybook[data-comp="phone"] .bb-pages { order: -1; }

/* Tablet: single page, row nav. */
.birthdaybook[data-comp="tablet"] .bb-page--single { max-width: 760px; }

/* Page reveal: gentle opacity + short translation (up to ~360ms). */
.bb-page--reveal { animation: bb-reveal 360ms ease-out; }
@keyframes bb-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Memory confirmation (~360ms). */
.bb-mem-star:not(.empty)::before,
.bb-mem-candle:not(.empty) .flame { animation: bb-glow 360ms ease-out; transform-origin: center; }
@keyframes bb-glow { from { transform: scale(.6); opacity: .4; } to { transform: scale(1); opacity: 1; } }
/* Book unlock reveal (up to ~600ms) — used when the (future) unlock fires. */
.bb-unlock-reveal { animation: bb-unlock 600ms ease-out; }
@keyframes bb-unlock { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Reduced motion: replace translation/page-flip with ~220ms opacity/state only.
   Preserve every page, story, memory, locked/unlocked state, navigation. */
#game.reduced-motion .bb-page--reveal,
#game.reduced-motion .bb-unlock-reveal { animation: none; opacity: 1; transform: none; }
#game.reduced-motion .bb-mem-star:not(.empty)::before,
#game.reduced-motion .bb-mem-candle:not(.empty) .flame { animation: none; }
#game.reduced-motion .bb-tab,
#game.reduced-motion .btn { transition: background-color 220ms ease-out, border-color 220ms ease-out, color 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .bb-page--reveal, .bb-unlock-reveal { animation: none; opacity: 1; transform: none; }
  .bb-mem-star:not(.empty)::before,
  .bb-mem-candle:not(.empty) .flame { animation: none; }
  .bb-tab, .btn { transition: background-color 220ms ease-out, border-color 220ms ease-out, color 220ms ease-out; }
}