/* ============================================================
   styles.css
   Single source of truth for all visual styling.
   No styles should exist in index.html.
   Modules (chores.js, spanish.js) may inject their
   own scoped styles — that is acceptable.

   TABLE OF CONTENTS
   ─────────────────────────────────────────────
    1.  Root Variables                        ~L13
    2.  Global Reset                          ~L102
    2b. Global Utility Layer                  ~L154
    3.  App Wrapper + Space Background        ~L1059
    4.  Header                                ~L1479
    5.  Profile Section                       ~L1624
    5b. Color Picker                          ~L1866
    6.  Rewards Bar                           ~L1963
    7.  Main Content                          ~L2060
    8.  Planet Dashboard                      ~L2086
    9.  Bottom Nav                            ~L2421
   10.  Section Pages                         ~L2582
   11.  Modal                                 ~L2644
   12.  Badge Collection Modal                ~L2742
   13.  Voice Status                          ~L2960
   14.  Loading Screen                        ~L3003
   15.  Landscape Warning                     ~L3095
   16.  Responsive Adjustments                ~L3122
   17.  Accessibility                         ~L3167
   17b. Server Banner                         ~L3190
   18.  Star Opacity (weather-controlled)     ~L3248
   19.  Print                                 ~L3258
   20.  Chores Module                         ~L3272
   21.  Lists Module                          ~L3842
   22.  Stories Module                        ~L4239
   23.  Spain Quest — Spanish Module          ~L4997
   24.  World / Planet Earth Module           ~L7413
   25.  Weather Module                        ~L8673
   26.  Ask Module                            ~L8816
   27.  Background System + Dashboard Tiles   ~L9189
   28.  Discovery Lab (scene + drawer)        ~L9474
   29.  Games Module (chess + checkers)       ~L9595
   24x. Spanish Scene Environment             ~L10448
   24z. Journey Map Overlay                   ~L12851
   24aa.Session Screen (overlay, slide, words, activity beats)  ~L13587
        Mute Button
   24ab.Session Screen — Horizontal Card Slider (story beats)   ~L14012
        Cards slide horizontally. 60px right-edge peek shows next card.
        Companion is fixed overlay position, not on individual cards.
   30.  Spain Quest — Games                                      ~L14409
   ─────────────────────────────────────────────
   Total: ~14,900+ lines | ~1,550 selectors
============================================================ */


/* =============================================
   1. ROOT VARIABLES
============================================= */

:root {
  /* ── Profile accent (set dynamically by profiles.js) ── */
  --profile-accent:       #a855f7;
  --profile-accent-rgb:   168, 85, 247;
  --profile-accent-dark:  #7c3aed;
  --profile-accent-glow:  rgba(168, 85, 247, 0.5);
  --profile-accent-soft:  rgba(168, 85, 247, 0.15);

  /* ── 12-color palette — aligned to design system ── */
  --picker-orange:        #ff6b35;
  --picker-red:           #ff4757;
  --picker-pink:          #ff69b4;
  --picker-amber:         #ffbe00;
  --picker-mint:          #00ff88;
  --picker-green:         #3ddc84;
  --picker-sky:           #00cfff;
  --picker-ocean:         #00b4d8;
  --picker-purple:        #a855f7;
  --picker-violet:        #7c3aed;
  --picker-hot-pink:      #ff3cac;
  --picker-silver:        #c8d6e5;

  /* ── UI chrome gradient ── */
  --chrome-gradient: linear-gradient(
    90deg,
    #00cfff 0%,
    #a855f7 50%,
    #ff3cac 100%
  );

  /* ── Moon silver — used for label text ── */
  --color-moon-silver: #c8d6e5;

  /* ── Brand gold ── */
  --color-gold:           #ffd700;
  --color-gold-dim:       rgba(255, 215, 0, 0.5);
  --color-gold-soft:      rgba(255, 215, 0, 0.12);

  /* ── Space navy backgrounds ── */
  --color-bg-deep:        #0d0d1a;
  --color-bg-mid:         #111128;
  --color-bg-dark:        #0a0a2e;

  /* ── Semantic colors ── */
  --color-success:        #00ff88;
  --color-success-glow:   rgba(0, 255, 136, 0.4);
  --color-danger:         #ff4757;
  --color-danger-glow:    rgba(255, 71, 87, 0.4);

  /* ── Text ── */
  --color-text-light:     #ffffff;
  --color-text-muted:     rgba(255, 255, 255, 0.70);
  --color-text-dimmer:    rgba(255, 255, 255, 0.50);

  /* ── Frosted glass surfaces ── */
  --color-surface-low:    rgba(255, 255, 255, 0.04);
  --color-surface-mid:    rgba(255, 255, 255, 0.07);
  --color-surface-high:   rgba(255, 255, 255, 0.12);
  --color-border:         rgba(255, 255, 255, 0.12);
  --color-border-bright:  rgba(255, 255, 255, 0.25);

  /* ── Nav bar height ── */
  --nav-btn-h:           clamp(72px, 6.5vh, 125px);
  --nav-h:               calc(var(--nav-btn-h) + 22px);

  /* ── Planet dashboard tile geometry ── */
  --dash-tile-gap:       10px;
  --dash-planet-size:    80px;

  /* ── Spacing ── */
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;

  /* ── Radius ── */
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:    0.15s ease;
  --transition-normal:  0.25s ease;
  --transition-bounce:  0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Theme palette variables (home page hero banner) ── */
:root {
  --t9: #001D39;   --t9-rgb: 0, 29, 57;
  --t8: #0A4174;   --t7: #2a5a85;   --t6: #4E8EA2;
  --t5: #6EA2B3;   --t4: #7BBDE8;
  --t3: #b1d3e6;   --t2: #BDD8E9;   --t1: #d8e8f2;
  --t7-rgb: 42, 90, 133;
  --title: #2a5a85;  --title-rgb: 42, 90, 133;
  --metal: 200, 210, 225;  --metal-dark: 160, 175, 195;
}

[data-theme="pastel"] {
  --t9: #2D2045; --t9-rgb: 45, 32, 69; --t8: #8EADD4; --t7: #F4A0B8;
  --t6: #B8A0E0; --t5: #A0D8D0; --t4: #F8D8A0;
  --t3: #ede4f3; --t2: #f2ecf8; --t1: #faf6fc; --t7-rgb: 244, 160, 184;
  --title: #9A5878; --title-rgb: 154, 88, 120;
  --metal: 184, 160, 224; --metal-dark: 150, 130, 190;
}

[data-theme="carnival"] {
  --t9: #2A0838; --t9-rgb: 42, 8, 56; --t8: #50D8D0; --t7: #F0A0D0;
  --t6: #E0A020; --t5: #F0E850; --t4: #C8B0E8;
  --t3: #ede0f3; --t2: #f0e8f5; --t1: #f8f0fa; --t7-rgb: 240, 160, 208;
  --title: #B860A0; --title-rgb: 184, 96, 160;
  --metal: 224, 180, 40; --metal-dark: 190, 150, 20;
}
[data-theme="carnival"] .hero-banner,
[data-theme="carnival"] .nav-btn-home {
  background:
    radial-gradient(ellipse 50% 40% at 75% 30%, rgba(240, 160, 208, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 20% 70%, rgba(224, 180, 40, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 0%, transparent 55%, #2A0838 95%),
    conic-gradient(from 40deg at 65% 60%, #F0A0D0 0deg, #F0E850 50deg, #C0E840 100deg, #50D8D0 155deg, #E0A020 210deg, #C8B0E8 280deg, #F0A0D0 360deg);
}

[data-theme="gummy"] {
  --t9: #4A0A0A; --t9-rgb: 74, 10, 10; --t8: #02A7CD; --t7: #BA1515;
  --t6: #F9640F; --t5: #F8DA00; --t4: #70C321;
  --t3: #e0d8c8; --t2: #ede8da; --t1: #f5f2ea; --t7-rgb: 186, 21, 21;
  --title: #BA1515; --title-rgb: 186, 21, 21;
  --metal: 248, 218, 0; --metal-dark: 210, 180, 0;
}
[data-theme="gummy"] .hero-banner,
[data-theme="gummy"] .nav-btn-home {
  background:
    radial-gradient(ellipse 50% 40% at 75% 30%, rgba(186, 21, 21, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 20% 70%, rgba(248, 218, 0, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 0%, transparent 55%, #4A0A0A 95%),
    conic-gradient(from 40deg at 65% 60%, #BA1515 0deg, #F9640F 60deg, #F8DA00 120deg, #70C321 180deg, #02A7CD 250deg, #BA1515 360deg);
}

[data-theme="spring"] {
  --t9: #003D3D; --t9-rgb: 0, 61, 61; --t8: #008080; --t7: #00E56B;
  --t6: #00CED1; --t5: #95FF00; --t4: #7FFFD4;
  --t3: #cdf2e6; --t2: #d8f5ec; --t1: #eafaf5; --t7-rgb: 0, 229, 107;
  --title: #008848; --title-rgb: 0, 136, 72;
  --metal: 149, 255, 0; --metal-dark: 100, 210, 0;
}

[data-theme="blue"] {
  --t9: #001D39; --t9-rgb: 0, 29, 57; --t8: #0A4174; --t7: #2a5a85;
  --t6: #4E8EA2; --t5: #6EA2B3; --t4: #7BBDE8;
  --t3: #b1d3e6; --t2: #BDD8E9; --t1: #d8e8f2; --t7-rgb: 42, 90, 133;
  --title: #2a5a85; --title-rgb: 42, 90, 133;
  --metal: 200, 210, 225; --metal-dark: 160, 175, 195;
}

[data-theme="mystic"] {
  --t9: #0B1320; --t9-rgb: 11, 19, 32; --t8: #0EA5A4; --t7: #7E22CE;
  --t6: #A78BFA; --t5: #0EA5A4; --t4: #E2E8F0;
  --t3: #d8dce8; --t2: #e8ecf2; --t1: #f0f2f8; --t7-rgb: 126, 34, 206;
  --title: #7E22CE; --title-rgb: 126, 34, 206;
  --metal: 14, 165, 164; --metal-dark: 10, 130, 130;
}

[data-theme="dusk"] {
  --t9: #1A2A3A; --t9-rgb: 26, 42, 58; --t8: #5A3A5A; --t7: #D8809A;
  --t6: #4A9098; --t5: #8A5070; --t4: #E8B0C0;
  --t3: #d0c8d0; --t2: #e4dce4; --t1: #f2eef2; --t7-rgb: 216, 128, 154;
  --title: #A85878; --title-rgb: 168, 88, 120;
  --metal: 74, 144, 152; --metal-dark: 50, 115, 125;
}

[data-theme="ivy"] {
  --t9: #4A0060; --t9-rgb: 74, 0, 96; --t8: #7B0090; --t7: #B830C0;
  --t6: #E400FF; --t5: #FFAF2E; --t4: #FFC870;
  --t3: #f3e0cd; --t2: #f5e4d5; --t1: #faf0ea; --t7-rgb: 184, 48, 192;
  --title: #9A20A8; --title-rgb: 154, 32, 168;
  --metal: 218, 255, 23; --metal-dark: 180, 215, 10;
}

[data-theme="bold"] {
  --t9: #0A0A0A; --t9-rgb: 10, 10, 10; --t8: #4A7A6A; --t7: #D63384;
  --t6: #C8E020; --t5: #4A7A6A; --t4: #F2F0EA;
  --t3: #e0ddd8; --t2: #eceae6; --t1: #f5f4f0; --t7-rgb: 214, 51, 132;
  --title: #D63384; --title-rgb: 214, 51, 132;
  --metal: 200, 224, 32; --metal-dark: 160, 190, 20;
}

[data-theme="harvest"] {
  --t9: #09201B; --t9-rgb: 9, 32, 27; --t8: #1B7754; --t7: #EB5C37;
  --t6: #F9B122; --t5: #1B7754; --t4: #ECDFAB;
  --t3: #ddd8c8; --t2: #eae6d8; --t1: #f4f2e8; --t7-rgb: 235, 92, 55;
  --title: #D04828; --title-rgb: 208, 72, 40;
  --metal: 249, 177, 34; --metal-dark: 210, 150, 20;
}

[data-theme="coffee"] {
  --t9: #0C1519; --t9-rgb: 12, 21, 25; --t8: #162127; --t7: #CF9D7B;
  --t6: #724B39; --t5: #3A3534; --t4: #E0C8B0;
  --t3: #d0c8c0; --t2: #e2ddd8; --t1: #f0ece8; --t7-rgb: 207, 157, 123;
  --title: #8A5A38; --title-rgb: 138, 90, 56;
  --metal: 207, 157, 123; --metal-dark: 170, 120, 85;
}

[data-theme="luxe"] {
  --t9: #202020; --t9-rgb: 32, 32, 32; --t8: #333533; --t7: #FFD100;
  --t6: #FFEE32; --t5: #D6D6D6; --t4: #FFE680;
  --t3: #d8d8d0; --t2: #e8e8e2; --t1: #f2f2ee; --t7-rgb: 255, 209, 0;
  --title: #484838; --title-rgb: 72, 72, 56;
  --metal: 255, 209, 0; --metal-dark: 220, 180, 0;
}

/* ── Hero banner keyframes ── */
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  50% { transform: translateY(-60px) scale(1.2); }
}

@keyframes float-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  50% { transform: translate(15px, -80px) scale(1.4); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


/* =============================================
   2. GLOBAL RESET
============================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-deep);
  font-family: 'Nunito', sans-serif;
  touch-action: manipulation;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: 'Nunito', sans-serif;
}

input,
textarea,
select {
  font-family: 'Nunito', sans-serif;
}


/* =============================================
   2b. GLOBAL UTILITY LAYER
   ─────────────────────────────────────────────
   Single source of truth for all shared
   structural patterns. Module sections (20+)
   extend these — they never redefine them.

   Sub-sections:
     2b-1  Layout shells
     2b-2  Surface & glass cards
     2b-3  Chrome line
     2b-4  Buttons
     2b-5  Pills & badges
     2b-6  Modal overlays
     2b-7  Progress bars
     2b-8  Scrollbar hiding
     2b-9  Animations
     2b-10 Typography utilities
============================================= */


/* ─────────────────────────────────────────────
   2b-1  LAYOUT SHELLS
   ─────────────────────────────────────────────
   Every section page follows the same three-
   layer shell:
     .section-layout   — outer fixed frame
     .section-header   — sticky top bar
     .section-body     — scrollable middle
     .section-footer   — fixed bottom action bar

   Modules override padding, gap, and
   background where needed. Structure is shared.
───────────────────────────────────────────── */

.section-layout {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 10%,
      rgba(10, 10, 80, 0.9) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%,
      rgba(10, 40, 80, 0.8) 0%, transparent 60%),
    linear-gradient(160deg,
      var(--color-bg-dark)  0%,
      var(--color-bg-mid)  50%,
      var(--color-bg-deep) 100%);
  padding-bottom: 110px; /* clear bottom nav */
}

.section-header {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  background: rgba(5, 5, 25, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: var(--space-md) var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* position: relative removed — sticky takes precedence.
     ::after chrome line works fine with sticky. */
}

/* Chrome line sits on the bottom edge
   of every section header automatically */
.section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.85;
}

.section-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  -webkit-overflow-scrolling: touch;
  /* scrollbar hidden via .hide-scrollbar
     — apply both classes together */
}

.section-footer {
  flex-shrink: 0;
  background: rgba(5, 5, 25, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

/* Section title — used inside .section-body */
.section-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 400;
  color: var(--color-text-light);
  margin: 0 0 var(--space-sm);
  text-shadow:
    0 0 20px rgba(var(--profile-accent-rgb), 0.5),
    1px 1px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.3px;
  line-height: 1.1;
}

/* Section subtitle — sits below .section-title */
.section-subtitle {
  font-size: clamp(11px, 1.6vw, 13px);
  color: var(--color-moon-silver);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.70;
}


/* ─────────────────────────────────────────────
   2b-2  SURFACE & GLASS CARDS
   ─────────────────────────────────────────────
   Three surface levels matching the root
   --color-surface-* variables.

   .glass-card        — base frosted card
   .glass-card-mid    — slightly more opaque
   .glass-card-high   — most opaque surface

   Combine with .chrome-card (2b-3) to add
   the chrome top line automatically.
───────────────────────────────────────────── */

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-card-mid {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-card-high {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Shine layer — top highlight on any card.
   Add .shine-layer to get the inner top glow.
   Uses ::before so it must sit above
   any existing ::before on the element.
   Prefer adding this to a child wrapper
   if the card already uses ::before. */
.shine-layer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  border-radius: inherit;
  border-bottom-left-radius: 60%;
  border-bottom-right-radius: 60%;
  pointer-events: none;
  z-index: 0;
}


/* ─────────────────────────────────────────────
   2b-3  CHROME LINE
   ─────────────────────────────────────────────
   Adds the rainbow chrome gradient as a 2px
   top border via ::before.

   .chrome-card   — card gets chrome top line
   .chrome-line   — standalone element
                    (replaces .badge-modal-chrome-line)

   Usage:
     <div class="glass-card chrome-card">
     OR
     <div class="chrome-line"></div>

   Override gradient per-card:
     style="--card-chrome: linear-gradient(...)"
   Override opacity:
     style="--card-chrome-opacity: 0.8"
───────────────────────────────────────────── */

.chrome-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--card-chrome, var(--chrome-gradient));
  opacity: var(--card-chrome-opacity, 0.5);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Standalone chrome line element */
.chrome-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.85;
  border-radius: inherit;
}


/* ─────────────────────────────────────────────
   2b-4  BUTTONS
   ─────────────────────────────────────────────
   Base class + color variants.
   All 3D push-down buttons extend .btn.

   Usage:
     <button class="btn btn-primary">Go</button>
     <button class="btn btn-ghost">Cancel</button>

   The push-down depth and spring-back are
   defined once here. Color, gradient, and
   glow are in each variant.

   Size modifiers:
     .btn-sm   — compact (inside cards/chips)
     .btn-lg   — large (primary page actions)
───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 400;
  color: var(--color-text-light);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition:
    transform  var(--transition-bounce),
    box-shadow var(--transition-fast),
    opacity    var(--transition-fast);
  position: relative;
  overflow: hidden;
}

/* Push down on press */
.btn:active {
  transform: translateY(4px);
}

/* Disabled state — one rule for every button */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* ── Size modifiers ── */

.btn-sm {
  padding: 7px 14px;
  font-size: clamp(12px, 1.6vw, 14px);
  border-radius: var(--radius-sm);
  gap: 5px;
}

.btn-lg {
  padding: 18px 32px;
  font-size: clamp(18px, 2.8vw, 26px);
  border-radius: var(--radius-lg);
  gap: 10px;
  min-height: 64px;
  width: 100%;
  justify-content: center;
}

/* ── Color variants ── */

.btn-primary {
  background: linear-gradient(145deg,
    rgba(168, 85, 247, 0.85),
    rgba(124, 58, 237, 0.80));
  border: 1px solid rgba(168, 85, 247, 0.40);
  box-shadow:
    0 6px 0 rgba(80, 20, 160, 0.70),
    0 10px 24px rgba(168, 85, 247, 0.40);
}
.btn-primary:active {
  box-shadow:
    0 2px 0 rgba(80, 20, 160, 0.70),
    0 4px 10px rgba(168, 85, 247, 0.30);
}

.btn-success {
  background: linear-gradient(145deg,
    rgba(0, 255, 136, 0.80),
    rgba(0, 180, 90, 0.75));
  border: 1px solid rgba(0, 255, 136, 0.35);
  box-shadow:
    0 6px 0 rgba(0, 120, 60, 0.70),
    0 10px 24px rgba(0, 255, 136, 0.35);
}
.btn-success:active {
  box-shadow:
    0 2px 0 rgba(0, 120, 60, 0.70),
    0 4px 10px rgba(0, 255, 136, 0.25);
}

.btn-danger {
  background: linear-gradient(145deg,
    rgba(255, 71, 87, 0.80),
    rgba(200, 30, 50, 0.75));
  border: 1px solid rgba(255, 71, 87, 0.35);
  box-shadow:
    0 6px 0 rgba(140, 10, 30, 0.70),
    0 10px 24px rgba(255, 71, 87, 0.35);
}
.btn-danger:active {
  box-shadow:
    0 2px 0 rgba(140, 10, 30, 0.70),
    0 4px 10px rgba(255, 71, 87, 0.25);
}

.btn-blue {
  background: linear-gradient(145deg,
    rgba(0, 207, 255, 0.80),
    rgba(0, 140, 200, 0.75));
  border: 1px solid rgba(0, 207, 255, 0.35);
  box-shadow:
    0 6px 0 rgba(0, 80, 140, 0.70),
    0 10px 24px rgba(0, 207, 255, 0.35);
}
.btn-blue:active {
  box-shadow:
    0 2px 0 rgba(0, 80, 140, 0.70),
    0 4px 10px rgba(0, 207, 255, 0.25);
}

.btn-gold {
  background: linear-gradient(145deg,
    rgba(255, 215, 0, 0.80),
    rgba(245, 158, 11, 0.75));
  border: 1px solid rgba(255, 215, 0, 0.40);
  color: #ffffff;
  box-shadow:
    0 6px 0 rgba(160, 110, 0, 0.60),
    0 10px 24px rgba(255, 215, 0, 0.30);
}
.btn-gold:active {
  box-shadow:
    0 2px 0 rgba(160, 110, 0, 0.60),
    0 4px 10px rgba(255, 215, 0, 0.20);
}

.btn-pink {
  background: linear-gradient(145deg,
    rgba(255, 61, 172, 0.80),
    rgba(200, 20, 120, 0.75));
  border: 1px solid rgba(255, 61, 172, 0.35);
  box-shadow:
    0 6px 0 rgba(140, 10, 80, 0.70),
    0 10px 24px rgba(255, 61, 172, 0.35);
}
.btn-pink:active {
  box-shadow:
    0 2px 0 rgba(140, 10, 80, 0.70),
    0 4px 10px rgba(255, 61, 172, 0.25);
}

.btn-chrome {
  background: linear-gradient(135deg,
    #00cfff, #a855f7, #ff3dac);
  border: none;
  box-shadow:
    0 6px 0 rgba(80, 0, 120, 0.50),
    0 10px 24px rgba(168, 85, 247, 0.40);
}
.btn-chrome:active {
  box-shadow:
    0 2px 0 rgba(80, 0, 120, 0.50),
    0 4px 10px rgba(168, 85, 247, 0.30);
}

/* Glass — translucent frosted button */
.btn-glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9);
}
.btn-glass:active {
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(1px) scale(0.97);
}

/* Accent — uses current profile color */
.btn-accent {
  background: var(--profile-accent);
  border: none;
  box-shadow:
    0 6px 0 var(--profile-accent-dark),
    0 10px 24px var(--profile-accent-glow);
}
.btn-accent:active {
  box-shadow:
    0 2px 0 var(--profile-accent-dark),
    0 4px 10px var(--profile-accent-glow);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-moon-silver);
  box-shadow: none;
}
.btn-ghost:active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  transform: scale(0.96);
}

/* ── Icon button — circular ── */

.btn-icon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: none;
}
.btn-icon:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

/* ── SVG icon system (icons.js) ── */

.mc-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Audio action button — icon-only, clean floating shape */
.mc-audio-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.1s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mc-audio-btn:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.14);
}

/* Active / playing state — profile accent */
.mc-audio-btn.is-active {
  color: var(--profile-accent);
  background: rgba(var(--profile-accent-rgb), 0.15);
  border-color: rgba(var(--profile-accent-rgb), 0.35);
  box-shadow: 0 0 12px rgba(var(--profile-accent-rgb), 0.25);
}

/* Mic variant — warm tint */
.mc-audio-btn.mc-mic-btn {
  background: linear-gradient(145deg,
    rgba(255, 71, 87, 0.15), rgba(200, 30, 50, 0.10));
  border-color: rgba(255, 71, 87, 0.25);
}
.mc-audio-btn.mc-mic-btn.is-active {
  color: #ff4757;
  background: linear-gradient(145deg,
    rgba(255, 71, 87, 0.30), rgba(200, 30, 50, 0.25));
  border-color: rgba(255, 71, 87, 0.45);
  box-shadow: 0 0 14px rgba(255, 71, 87, 0.3);
  animation: mc-mic-pulse 1.5s ease-in-out infinite;
}

@keyframes mc-mic-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 71, 87, 0.3); }
  50%      { box-shadow: 0 0 22px rgba(255, 71, 87, 0.5); }
}


/* ─────────────────────────────────────────────
   2b-5  PILLS & BADGES
   ─────────────────────────────────────────────
   Base pill shape. Color variants extend it.

   Usage:
     <span class="pill pill-success">+10 pts</span>
     <span class="pill pill-accent">Week 1</span>
───────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 400;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}

.pill-sm {
  padding: 2px 10px;
  font-size: clamp(10px, 1.3vw, 12px);
}

.pill-lg {
  padding: 7px 18px;
  font-size: clamp(14px, 1.9vw, 18px);
}

/* Color variants */

.pill-accent {
  background: var(--profile-accent);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 3px 0 var(--profile-accent-dark),
              0 6px 20px var(--profile-accent-glow);
}

.pill-success {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.30);
  color: var(--color-success);
  text-shadow: 0 0 8px var(--color-success-glow);
}

.pill-danger {
  background: rgba(255, 71, 87, 0.12);
  border-color: rgba(255, 71, 87, 0.30);
  color: var(--color-danger);
}

.pill-blue {
  background: rgba(0, 207, 255, 0.12);
  border-color: rgba(0, 207, 255, 0.30);
  color: rgba(0, 207, 255, 0.95);
}

.pill-gold {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.35);
  color: rgba(255, 215, 0, 0.95);
}

.pill-chrome {
  background: linear-gradient(135deg, #00cfff, #a855f7);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

.pill-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--color-moon-silver);
}

.pill-orange {
  background: rgba(255, 107, 53, 0.15);
  border-color: rgba(255, 107, 53, 0.35);
  color: rgba(255, 107, 53, 0.95);
}


/* ─────────────────────────────────────────────
   2b-6  MODAL OVERLAYS
   ─────────────────────────────────────────────
   Shared overlay shell. z-index intentionally
   NOT set here — each modal sets its own
   stacking level in its module section.

   Usage:
     <div class="modal-overlay"> ... </div>

   For animated open/close add .modal-open
   and .modal-closing via JS.
───────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.modal-open {
  opacity: 1;
  pointer-events: all;
}

.modal-overlay.modal-closing {
  opacity: 0;
  pointer-events: none;
}

/* Modal box — the card inside the overlay */
.modal-box {
  background: linear-gradient(145deg,
    rgba(15, 15, 50, 0.97),
    rgba(8,   8, 35, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vh, 40px) clamp(20px, 4vw, 36px);
  width: 90%;
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.60),
    0 24px 60px rgba(0, 0, 0, 0.70);
  transform: scale(0.88);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.modal-open .modal-box {
  transform: scale(1);
}

/* Modal close button — top right corner */
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 71, 87, 0.15);
  border: 1px solid rgba(255, 71, 87, 0.35);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(255, 71, 87, 0.90);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.modal-close-btn:active {
  transform: scale(0.88);
  background: rgba(255, 71, 87, 0.30);
}


/* ─────────────────────────────────────────────
   2b-7  PROGRESS BARS
   ─────────────────────────────────────────────
   Track + fill. Width of fill is always set
   via inline style (data-driven) — that never
   moves to CSS.

   Usage:
     <div class="progress-track">
       <div class="progress-fill"
            style="width: 60%"></div>
     </div>

   Size modifier:
     .progress-track-sm   — 6px tall
     .progress-track-md   — 14px tall (default)
     .progress-track-lg   — 24px tall
───────────────────────────────────────────── */

.progress-track {
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-full);
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.40);
}

.progress-track-sm { height: 6px; }
.progress-track-lg { height: clamp(16px, 2.5vw, 24px); }

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg,
    var(--profile-accent), #00cfff);
  box-shadow:
    0 0 14px var(--profile-accent-glow),
    0 0 28px rgba(0, 207, 255, 0.40);
  transition: width 0.55s cubic-bezier(0.4, 2, 0.6, 1);
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on the fill */
.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.40) 50%,
    transparent 100%
  );
  animation: shimmer-slide 1.8s infinite;
  border-radius: var(--radius-full);
}

/* Plain fill — no shimmer, no glow.
   Use inside locked/secondary contexts. */
.progress-fill-plain {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #00cfff, #a855f7);
  transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.50);
}

/* Renamed to avoid conflict with hero shimmer (line ~287) */
@keyframes shimmer-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%);  }
}


/* ─────────────────────────────────────────────
   2b-8  SCROLLBAR HIDING
   ─────────────────────────────────────────────
   Apply to any scrollable container.

   Usage:
     <div class="hide-scrollbar">
───────────────────────────────────────────── */

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}


/* ─────────────────────────────────────────────
   2b-9  ANIMATIONS
   ─────────────────────────────────────────────
   All shared @keyframes live here.
   Module-specific animations stay in their
   own sections only if they are genuinely
   unique (e.g. sq-shake, shimmer, twinkle).

   Utility animation classes:
     .anim-float-sm    — subtle hover (-4px)
     .anim-float-md    — medium hover (-8px)
     .anim-float-lg    — large hover (-12px)
     .anim-fade-up     — fade in from below
     .anim-pop-in      — scale in from small
     .anim-pulse-glow  — glow pulse
───────────────────────────────────────────── */

/* ── Float ── */

@keyframes float-sm {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-4px); }
}

@keyframes float-md {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-8px); }
}

@keyframes float-lg {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-12px); }
}

.anim-float-sm { animation: float-sm 3s ease-in-out infinite; }
.anim-float-md { animation: float-md 3s ease-in-out infinite; }
.anim-float-lg { animation: float-lg 3s ease-in-out infinite; }

/* ── Fade up ── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.anim-fade-up { animation: fade-up 0.3s ease both; }

/* ── Pop in ── */

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.80); }
  to   { opacity: 1; transform: scale(1);    }
}

.anim-pop-in {
  animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Shake ── */

@keyframes shake {
  0%, 100% { transform: translateX(0);    }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px);  }
}

.anim-shake { animation: shake 0.3s ease; }

/* ── Pulse glow — for active/listening states ── */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-color, rgba(168, 85, 247, 0.5));
  }
  50% {
    box-shadow: 0 0 0 14px var(--glow-color, rgba(168, 85, 247, 0));
  }
}

.anim-pulse-glow {
  animation: pulse-glow 1.1s ease-in-out infinite;
}


/* ─────────────────────────────────────────────
   2b-10 TYPOGRAPHY UTILITIES
   ─────────────────────────────────────────────
   Shared text patterns used across modules.
   Not a full type scale — just the patterns
   that appear 3+ times.
───────────────────────────────────────────── */

/* Fredoka heading — module/card titles */
.text-heading {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 400;
  color: var(--color-text-light);
  line-height: 1.1;
  text-shadow:
    0 0 20px rgba(var(--profile-accent-rgb), 0.5),
    1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Large display heading — word of day, quiz question */
.text-display {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 400;
  color: var(--color-text-light);
  text-shadow: 0 0 20px rgba(var(--profile-accent-rgb), 0.5);
  line-height: 1;
}

/* Moon silver label text */
.text-label {
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 800;
  color: var(--color-moon-silver);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Body text inside cards */
.text-body {
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
}

/* Muted / secondary text */
.text-muted {
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 700;
  color: var(--color-moon-silver);
  line-height: 1.5;
}

/* Accent colored text — uses current profile */
.text-accent {
  color: var(--profile-accent);
  text-shadow: 0 0 10px var(--profile-accent-glow);
}

/* Success green */
.text-success {
  color: var(--color-success);
  text-shadow: 0 0 8px var(--color-success-glow);
}

/* Danger red */
.text-danger {
  color: var(--color-danger);
}

/* =============================================
   3. APP WRAPPER + SPACE BACKGROUND
============================================= */

#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 20% 10%,  rgba(10, 10,  80, 0.9) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%,  rgba(10, 40,  80, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%,  rgba(5,  5,   30, 1.0) 0%, transparent 100%),
    linear-gradient(160deg,
      var(--color-bg-dark)  0%,
      var(--color-bg-mid)  50%,
      var(--color-bg-deep) 100%
    );
  position: relative;
  overflow: hidden;
}

/* ── Layer 1: Star field ── */
#app::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at  4%  6%,  rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(1px 1px at  9% 18%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 14%  3%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 32%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 11%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 47%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 22%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 43%  8%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 38%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 16%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 52%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 65%  4%,  rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 28%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 42%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 14%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 58%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 24%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 67%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 55%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 72%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 88%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 64%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 79%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 93%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 68%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 84%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 73%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 91%,  rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 62%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 77%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 95%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 69%,  rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 83%,  rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 97%,  rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 78%,  rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 35%,  rgba(255,255,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 33% 60%,  rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 20%,  rgba(255,255,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at 67% 75%,  rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 84% 40%,  rgba(255,255,255,1.00) 0%, transparent 100%),
    radial-gradient(2px 2px at  8% 90%,  rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 75% 55%,  rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(3px 3px at 22% 25%,  rgba(255,220,100,1.00) 0%, transparent 100%),
    radial-gradient(3px 3px at 55% 80%,  rgba(255,220,100,0.95) 0%, transparent 100%),
    radial-gradient(3px 3px at 78% 15%,  rgba(255,220,100,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 42% 50%,  rgba(255,220,100,0.85) 0%, transparent 100%),
    radial-gradient(3px 3px at 10% 40%,  rgba(255,220,100,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 60%,  rgba(255,220,100,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 10%,  rgba(180,210,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 12% 45%,  rgba(180,210,255,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 35%,  rgba(180,210,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 85%,  rgba(180,210,255,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 70%  5%,  rgba(180,210,255,0.90) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%   { opacity: 0.65; transform: scale(1);    }
  100% { opacity: 1.00; transform: scale(1.01); }
}

/* ── Layer 2: Moon + planet ── */
#space-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#space-decorations::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 38%,
    rgba(255, 248, 210, 0.22) 0%,
    rgba(255, 235, 160, 0.14) 35%,
    rgba(220, 195, 120, 0.07) 60%,
    transparent 100%
  );
  box-shadow:
    inset -24px -24px 50px rgba(0, 0, 0, 0.25),
    0 0 100px rgba(255, 235, 160, 0.14),
    0 0 200px rgba(255, 235, 160, 0.07);
  animation: moon-glow 9s ease-in-out infinite alternate;
}

#space-decorations::after {
  content: '';
  position: absolute;
  bottom: 140px;
  left: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    rgba(120, 90, 220, 0.26) 0%,
    rgba(90,  65, 195, 0.16) 45%,
    rgba(55,  35, 140, 0.07) 75%,
    transparent 100%
  );
  box-shadow:
    inset -12px -12px 24px rgba(0, 0, 0, 0.4),
    0 0 50px rgba(110, 80, 210, 0.18),
    0 0 0 22px rgba(130, 105, 230, 0.09),
    0 0 0 23px rgba(130, 105, 230, 0.05),
    0 0 0 44px rgba(130, 105, 230, 0.05),
    0 0 0 45px rgba(130, 105, 230, 0.02);
  animation: planet-drift 13s ease-in-out infinite alternate;
}

@keyframes moon-glow {
  0%   { opacity: 0.75; transform: scale(1)    translateY(0);    }
  100% { opacity: 1.00; transform: scale(1.04) translateY(-10px);}
}

@keyframes planet-drift {
  0%   { opacity: 0.70; transform: scale(1)    translateY(0);    }
  100% { opacity: 1.00; transform: scale(1.05) translateY(-14px);}
}

/* ── Layer 3: Nebula ── */
#nebula-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 500px 250px at 15% 30%,
      rgba(var(--profile-accent-rgb), 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 350px 350px at 85% 65%,
      rgba(80, 40, 180, 0.09) 0%, transparent 70%),
    radial-gradient(ellipse 300px 200px at 50% 85%,
      rgba(0, 100, 180, 0.07) 0%, transparent 70%);
  transition: background 0.6s ease;
}

/* ── Layer 4: Shooting stars ── */

#shooting-star {
  position: absolute;
  width: 200px;
  height: 3px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent            0%,
    rgba(255,240,180,0.0) 10%,
    rgba(255,240,180,0.55) 50%,
    rgba(255,255,220,0.95) 82%,
    rgba(255,255,255,1.0) 100%
  );
  border-radius: 3px;
  filter: blur(0.4px);
  opacity: 0;
  top:  8%;
  left: -210px;
  animation: shooting-star-cycle 12s ease-in-out infinite;
  animation-delay: 1.5s;
}

#shooting-star::before {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 240, 1);
  box-shadow:
    0 0  8px 3px rgba(255, 255, 200, 1.0),
    0 0 18px 6px rgba(255, 240, 150, 0.7),
    0 0 32px 10px rgba(255, 220, 100, 0.3);
}

#shooting-star::after {
  content: '✦';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-size: 14px;
  color: rgba(255, 255, 200, 0.9);
  text-shadow: 0 0 8px rgba(255, 240, 150, 1);
  animation: star-sparkle-a 12s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes shooting-star-cycle {
  0% {
    opacity: 0; top: 8%; left: -210px;
    transform: translateX(0) translateY(0) rotate(-20deg) scaleX(0.2);
  }
  3% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(-20deg) scaleX(1);
  }
  16% {
    opacity: 0.9;
    transform: translateX(780px) translateY(284px) rotate(-20deg) scaleX(1);
  }
  19% {
    opacity: 0;
    transform: translateX(980px) translateY(357px) rotate(-20deg) scaleX(0.3);
  }
  19.1% {
    opacity: 0; top: 8%; left: -210px;
    transform: translateX(0) translateY(0) rotate(-20deg) scaleX(0.2);
  }
  38% {
    opacity: 0; top: 42%; left: -210px;
    transform: translateX(0) translateY(0) rotate(-12deg) scaleX(0.2);
  }
  41% {
    opacity: 0.85;
    transform: translateX(0) translateY(0) rotate(-12deg) scaleX(1);
  }
  54% {
    opacity: 0;
    transform: translateX(1050px) translateY(223px) rotate(-12deg) scaleX(0.3);
  }
  54.1% {
    opacity: 0; top: 42%; left: -210px;
    transform: translateX(0) translateY(0) rotate(-12deg) scaleX(0.2);
  }
  72% {
    opacity: 0; top: 15%; left: calc(100% + 10px);
    transform: translateX(0) translateY(0) rotate(-20deg) scaleX(-0.2);
  }
  75% {
    opacity: 0.90;
    transform: translateX(0) translateY(0) rotate(-20deg) scaleX(-1);
  }
  88% {
    opacity: 0;
    transform: translateX(-820px) translateY(299px) rotate(-20deg) scaleX(-1);
  }
  88.1% {
    opacity: 0; top: 8%; left: -210px;
    transform: translateX(0) translateY(0) rotate(-20deg) scaleX(0.2);
  }
  100% {
    opacity: 0; top: 8%; left: -210px;
    transform: translateX(0) translateY(0) rotate(-20deg) scaleX(0.2);
  }
}

@keyframes star-sparkle-a {
  0%,  15% { transform: translateY(-50%) scale(0); opacity: 0; }
  17%       { transform: translateY(-50%) scale(1.5); opacity: 1; }
  20%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  52%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  54%       { transform: translateY(-50%) scale(1.3); opacity: 0.9; }
  57%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  86%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  88%       { transform: translateY(-50%) scale(1.2); opacity: 0.8; }
  91%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  100%      { transform: translateY(-50%) scale(0);   opacity: 0; }
}

#shooting-star-2 {
  position: absolute;
  width: 170px;
  height: 2.5px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent             0%,
    rgba(180,220,255,0.0)  10%,
    rgba(180,220,255,0.50) 50%,
    rgba(215,235,255,0.92) 82%,
    rgba(240,248,255,1.0) 100%
  );
  border-radius: 3px;
  filter: blur(0.4px);
  opacity: 0;
  top:  62%;
  left: -185px;
  animation: shooting-star-cycle-2 15s ease-in-out infinite;
  animation-delay: 5s;
}

#shooting-star-2::before {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(235, 248, 255, 1);
  box-shadow:
    0 0  7px 3px rgba(200, 235, 255, 1.0),
    0 0 16px 5px rgba(160, 210, 255, 0.7),
    0 0 28px 8px rgba(120, 180, 255, 0.3);
}

#shooting-star-2::after {
  content: '✦';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-size: 12px;
  color: rgba(220, 240, 255, 0.9);
  text-shadow: 0 0 8px rgba(180, 220, 255, 1);
  animation: star-sparkle-b 15s ease-in-out infinite;
  animation-delay: 5s;
}

@keyframes shooting-star-cycle-2 {
  0% {
    opacity: 0; top: 62%; left: -185px;
    transform: translateX(0) translateY(0) rotate(-8deg) scaleX(0.2);
  }
  4% {
    opacity: 0.80;
    transform: translateX(0) translateY(0) rotate(-8deg) scaleX(1);
  }
  18% {
    opacity: 0;
    transform: translateX(1100px) translateY(154px) rotate(-8deg) scaleX(0.3);
  }
  18.1% {
    opacity: 0; top: 62%; left: -185px;
    transform: translateX(0) translateY(0) rotate(-8deg) scaleX(0.2);
  }
  40% {
    opacity: 0; top: 20%; left: calc(100% + 5px);
    transform: translateX(0) translateY(0) rotate(-16deg) scaleX(-0.2);
  }
  44% {
    opacity: 0.75;
    transform: translateX(0) translateY(0) rotate(-16deg) scaleX(-1);
  }
  57% {
    opacity: 0;
    transform: translateX(-900px) translateY(257px) rotate(-16deg) scaleX(-1);
  }
  57.1% {
    opacity: 0; top: 20%; left: calc(100% + 5px);
    transform: translateX(0) translateY(0) rotate(-16deg) scaleX(-0.2);
  }
  75% {
    opacity: 0; top: 5%; left: -185px;
    transform: translateX(0) translateY(0) rotate(-25deg) scaleX(0.2);
  }
  79% {
    opacity: 0.85;
    transform: translateX(0) translateY(0) rotate(-25deg) scaleX(1);
  }
  91% {
    opacity: 0;
    transform: translateX(850px) translateY(397px) rotate(-25deg) scaleX(0.3);
  }
  91.1% {
    opacity: 0; top: 62%; left: -185px;
    transform: translateX(0) translateY(0) rotate(-8deg) scaleX(0.2);
  }
  100% {
    opacity: 0; top: 62%; left: -185px;
    transform: translateX(0) translateY(0) rotate(-8deg) scaleX(0.2);
  }
}

@keyframes star-sparkle-b {
  0%,  16% { transform: translateY(-50%) scale(0); opacity: 0; }
  18%       { transform: translateY(-50%) scale(1.4); opacity: 0.9; }
  21%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  55%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  57%       { transform: translateY(-50%) scale(1.2); opacity: 0.8; }
  60%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  89%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  91%       { transform: translateY(-50%) scale(1.3); opacity: 0.9; }
  94%       { transform: translateY(-50%) scale(0);   opacity: 0; }
  100%      { transform: translateY(-50%) scale(0);   opacity: 0; }
}



/* ── Profile Carousel ── */
#profile-carousel {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(200px, 30vh, 300px);
  /* Extra horizontal padding so side cards peek out */
  padding: 0 clamp(8px, 2vw, 20px);
}

/* ── Profile Card (each card) ── */
.profile-card {
  position: absolute;
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 2vw, 18px);
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vh, 32px) clamp(18px, 3vw, 28px);
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(8px);
  /* Transition for carousel rotation */
  transition:
    transform     0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity       0.45s ease,
    z-index       0s,
    border-color  0.3s ease,
    background    0.3s ease,
    box-shadow    0.3s ease;
  width: clamp(340px, 72vw, 570px);
  height: clamp(160px, 24vh, 240px);
}

/* Glass shine — bright highlight sweeping across top-left */
.profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 70%
  );
  border-radius: var(--radius-lg) var(--radius-lg) 50% 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Carousel Positions ── */

/* Center card — front, full size, elevated with 3D pop */
.profile-card[data-pos="center"] {
  z-index: 3;
  /* Slight scale-up + Y lift for 3D "hovering" feel */
  transform: translateX(0) translateY(-4px) scale(1.02);
  opacity: 1;
  /* Gradient border via background trick: accent fades to transparent */
  border-color: transparent;
  border-width: 1.5px;
  background:
    /* Inner fill — solid dark so back cards don't bleed through */
    linear-gradient(
      145deg,
      rgba(20, 20, 55, 0.97) 0%,
      rgba(10, 10, 35, 0.99) 100%
    ) padding-box,
    /* Border gradient — accent fades to subtle white */
    linear-gradient(
      145deg,
      var(--profile-accent, rgba(255,255,255,0.20)) 0%,
      rgba(var(--profile-accent-rgb, 168,85,247), 0.3) 50%,
      rgba(255, 255, 255, 0.06) 100%
    ) border-box;
  box-shadow:
    /* Accent glow — top edge catch light */
    0 -2px 20px rgba(var(--profile-accent-rgb, 168,85,247), 0.25),
    /* Wider ambient glow */
    0 0 30px var(--profile-accent-glow, transparent),
    /* 3D depth shadow underneath */
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3),
    /* Spread shadow on sides to mask back card edges */
    -18px 0 26px 12px rgba(5, 5, 20, 0.85),
    18px 0 26px 12px rgba(5, 5, 20, 0.85),
    /* Inner glow */
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 8px var(--profile-accent-soft, transparent);
}

/* Left card — behind, shifted further toward left edge */
.profile-card[data-pos="left"] {
  z-index: 1;
  transform: translateX(clamp(-260px, -50vw, -175px)) scale(0.82);
  opacity: 0.45;
  /* Mirror layout: avatar goes to the left side so it peeks out */
  flex-direction: row-reverse;
}

/* Right card — behind, shifted further toward right edge */
.profile-card[data-pos="right"] {
  z-index: 1;
  transform: translateX(clamp(175px, 50vw, 260px)) scale(0.82);
  opacity: 0.45;
}

/* Ring pulse on center card */
.profile-card[data-pos="center"]::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  border: 1px solid var(--profile-accent, transparent);
  opacity: 0;
  animation: profile-ring-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes profile-ring-pulse {
  0%   { opacity: 0.5; transform: scale(1);    }
  100% { opacity: 0;   transform: scale(1.03); }
}

/* Press feedback on back cards */
.profile-card[data-pos="left"]:active,
.profile-card[data-pos="right"]:active {
  opacity: 0.75;
  transition: opacity 0.1s ease;
}

/* ── Card Info Section (name + stats) ── */
.profile-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vh, 28px);
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Profile name — centered above stats */
.profile-card-info .profile-name {
  text-align: center;
}

/* ── Card Stats Row ── */
.profile-card-stats {
  display: flex;
  gap: clamp(10px, 2vw, 18px);
  /* Shift stats row right to center under name */
  padding-left: clamp(12px, 2.5vw, 24px);
}

.card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.card-stat:active {
  background: rgba(255, 255, 255, 0.1);
}

/* Icon with number overlaid */
.card-stat-icon {
  font-size: clamp(36px, 6.5vw, 54px);
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
  line-height: 1;
}
.card-stat-icon--svg {
  font-size: unset;
  filter: drop-shadow(0 2px 4px rgba(255, 200, 0, 0.4));
}
.card-stat-icon--svg svg {
  width: clamp(56px, 10vw, 86px);
  height: clamp(56px, 10vw, 86px);
  display: block;
}

.card-stat-value {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(15px, 2.8vw, 24px);
  color: #fff;
  text-shadow:
    0 0 6px rgba(0,0,0,0.9),
    0 1px 2px rgba(0,0,0,0.8);
  line-height: 1;
  /* Centered below icon, overlapping ~15% upward */
  margin-top: clamp(-10px, -1.5vw, -6px);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ── Avatar area — uncropped character that fills card height ── */
.profile-avatar-circle {
  /* No circle clip — let the PNG breathe */
  width:  clamp(100px, 18vw, 160px);
  height: 100%;
  border-radius: 0;
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  margin-right: clamp(2px, 0.5vw, 6px);
  position: relative;
  z-index: 1;
}

.profile-avatar-circle svg,
.profile-avatar-circle img {
  /* Fill most of the card's vertical space — 20% larger */
  height: 115%;
  width: auto;
  max-width: 120%;
  display: block;
  object-fit: contain;
  /* Subtle drop shadow to lift character off the card */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Active avatar — float animation only, no circle glow */
.profile-card[data-pos="center"] .profile-avatar-circle {
  animation: avatar-float 3s ease-in-out infinite;
}

@keyframes avatar-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-3px); }
}

/* Profile name — 30% larger, centered above stats */
.profile-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(29px, 5vw, 46px);
  color: var(--color-text-light);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}


/* =============================================
   5b. COLOR PICKER
============================================= */

#color-picker-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: clamp(10px, 1.5vh, 16px) clamp(14px, 2.5vw, 24px);
  background: rgba(5, 5, 25, 0.75);
  border: 2px solid var(--color-border-bright);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  animation: slide-down 0.25s ease;
}

#color-picker-panel.open { display: flex; }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

#color-picker-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 2vw, 18px);
  color: var(--color-moon-silver);
  text-shadow: 0 0 10px var(--color-gold-dim);
}

#color-picker-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.5vw, 12px);
  justify-items: center;
  width: 100%;
}

.color-swatch {
  width:  clamp(32px, 5vw, 46px);
  height: clamp(32px, 5vw, 46px);
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition:
    transform    var(--transition-bounce),
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  position: relative;
  flex-shrink: 0;
}

.color-swatch:active {
  transform: scale(0.88);
}

.color-swatch.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 16px currentColor;
  transform: scale(1.18);
}

.color-swatch.selected::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1.8vw, 16px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

#color-picker-close {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 16px);
  color: var(--color-moon-silver);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  transition:
    color       var(--transition-fast),
    background  var(--transition-fast);
}

#color-picker-close:active {
  color: var(--color-text-light);
  background: var(--color-surface-high);
}


/* =============================================
   5b. AVATAR EDITOR
   (was previously injected as a <style> tag by profiles.js)
============================================= */

#avatar-editor-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.avatar-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 5, 0.75);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.avatar-editor-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.avatar-editor-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 88vh;
  background: rgba(var(--t9-rgb), 0.82);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-bottom: none;
  border-top-color: rgba(255, 255, 255, 0.45);
  border-radius: 24px 24px 0 0;
  padding: 0 20px 40px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
}
.avatar-editor-panel::before {
  display: none; /* neon stripe removed — graduated border replaces it */
}
.avatar-editor-panel.open {
  transform: translateY(0);
  pointer-events: all;
}

.avatar-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  position: sticky;
  top: 0;
  background: rgba(var(--t9-rgb), 0.85);
  z-index: 1;
}
.avatar-editor-title {
  font-family: 'Fredoka One', sans-serif;
  font-size: 22px;
  color: white;
  letter-spacing: 0.5px;
}
.avatar-editor-close {
  background: rgba(var(--title-rgb), 0.1);
  border: 1px solid rgba(var(--title-rgb), 0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: rgba(200,214,229,0.8);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.avatar-editor-close:active {
  background: rgba(var(--title-rgb), 0.2);
}

.avatar-editor-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0 20px;
}
.avatar-editor-preview-circle {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: none;
  overflow: visible;
  transition: box-shadow 0.3s ease;
}
.avatar-editor-preview-circle svg,
.avatar-editor-preview-circle img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.avatar-editor-preview-name {
  font-family: 'Fredoka One', sans-serif;
  font-size: 20px;
  color: white;
}

.avatar-editor-section-label {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: rgba(var(--title-rgb), 0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 18px 0 10px;
}
.avatar-editor-section-label.hidden,
.avatar-skin-row.hidden {
  display: none !important;
}

/* ── Character grid — 4 columns ── */
.avatar-char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.avatar-char-btn {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 8px 4px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color 0.2s, background 0.2s;
}
.avatar-char-btn.selected {
  border-color: var(--title);
  background: rgba(var(--title-rgb), 0.15);
}
.avatar-char-btn:active { transform: scale(0.95); }
.avatar-char-thumb {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.avatar-char-thumb svg,
.avatar-char-thumb img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.avatar-char-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 1.2;
}

/* ── Skin tone row ── */
.avatar-skin-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.avatar-skin-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  outline: none;
  flex-shrink: 0;
}
.avatar-skin-btn.selected {
  border-color: var(--profile-accent, #a855f7);
  transform: scale(1.18);
}
.avatar-skin-btn:active { transform: scale(0.92); }

/* ── Color grid — 6 columns ── */
.avatar-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.avatar-color-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  outline: none;
  max-width: 44px;
  justify-self: center;
}
.avatar-color-btn.selected {
  border-color: white;
  transform: scale(1.20);
  box-shadow: 0 0 12px currentColor !important;
}
.avatar-color-btn:active { transform: scale(0.90); }

/* ── Theme picker grid — 6 columns ── */
.avatar-theme-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.avatar-theme-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  outline: none;
  max-width: 44px;
  justify-self: center;
}
.avatar-theme-btn.selected {
  border-color: white;
  transform: scale(1.20);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}
.avatar-theme-btn:active { transform: scale(0.90); }

/* ── Age range grid — 4 columns ── */
.avatar-age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.avatar-age-btn {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 4px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.avatar-age-btn.selected {
  border-color: var(--title);
  background: rgba(var(--title-rgb), 0.15);
}
.avatar-age-btn:active { transform: scale(0.95); }
.avatar-age-emoji {
  font-size: 22px;
  line-height: 1;
}
.avatar-age-label {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.2;
}

/* ── Name input ── */
.avatar-name-row { display: flex; }
.avatar-name-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 14px 16px;
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.avatar-name-input:focus {
  border-color: var(--title);
}
.avatar-name-input::placeholder {
  color: rgba(200,214,229,0.3);
}

/* ── Save button ── */
.avatar-save-btn {
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  background: rgba(var(--title-rgb), 0.25);
  border: 2px solid rgba(var(--title-rgb), 0.4);
  border-radius: 14px;
  color: white;
  font-family: 'Fredoka One', sans-serif;
  font-size: 18px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(var(--t9-rgb), 0.3);
}
.avatar-save-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}


/* =============================================
   6. REWARDS BAR — now integrated into profile cards
============================================= */

/* Legacy rewards-bar kept hidden for back-compat references */
#rewards-bar {
  display: none !important;
}


/* =============================================
   7. MAIN CONTENT
============================================= */

#main-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}

#main-content::-webkit-scrollbar { display: none; }
#main-content { scrollbar-width: none; }

.scroll-spacer {
  height: 32px;
  flex-shrink: 0;
}


/* =============================================
   8. PLANET DASHBOARD
   ─────────────────────────────────────────────
   Replaces the orbital solar system.
   #planet-dashboard fills #main-content.
   Two faint orbit rings sit as background
   decoration behind a 2-column tile grid.
   Each tile has a planet swatch + text label.
============================================= */

#planet-dashboard {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  overflow: hidden;
}

/* ── Faint orbit ring decorations ── */
.dash-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dash-orbit-ring--inner {
  width:  260px;
  height: 260px;
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.04),
    inset 0 0 20px rgba(168, 85, 247, 0.02);
}

.dash-orbit-ring--outer {
  width:  480px;
  height: 480px;
  box-shadow:
    0 0 30px rgba(0, 207, 255, 0.03),
    inset 0 0 30px rgba(0, 207, 255, 0.02);
}

/* ── Tile grid — 2 columns, 3 rows ── */
.dash-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--dash-tile-gap);
  position: relative;
  z-index: 2;
  flex: 1;
  height: 100%;
}

/* ── Individual planet tile ── */
.planet-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 16px 10px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform      var(--transition-bounce),
    background     var(--transition-normal),
    border-color   var(--transition-normal),
    box-shadow     var(--transition-normal);
  text-align: center;
  font-family: 'Nunito', sans-serif;
}

/* Shine layer */
.planet-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  border-radius: 20px 20px 50% 50%;
  pointer-events: none;
  z-index: 0;
}

.planet-tile:active {
  transform: scale(0.93);
  background: var(--profile-accent-soft);
  border-color: var(--profile-accent);
  box-shadow:
    0 0 16px var(--profile-accent-glow),
    inset 0 0 10px var(--profile-accent-soft);
}

/* Coming soon tile — non-interactive */
.planet-tile--coming-soon {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ── Planet swatch circle ── */
.planet-tile-swatch {
  width:  var(--dash-planet-size);
  height: var(--dash-planet-size);
  border-radius: 50%;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
  z-index: 1;
}

/* Shine on every swatch */
.planet-tile-swatch::after {
  content: '';
  position: absolute;
  top: 4%; left: 10%;
  width: 55%; height: 42%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 40% 35%,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.10) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Tile text block ── */
.planet-tile-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  z-index: 1;
  align-items: center;
}

.planet-tile-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.5vw, 22px);
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.1;
}

.planet-tile-sub {
  font-size: clamp(10px, 1.4vw, 13px);
  color: rgba(200, 214, 229, 0.55);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder swatch for coming-soon tile */
.pt-placeholder {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

/* ── Mercury — Ask Questions ── */
.pt-mercury {
  background: radial-gradient(
    circle at 35% 30%,
    #c8bdb0 0%, #9e9088 35%, #7a6e68 65%, #5c5250 100%
  );
  box-shadow:
    inset -6px -6px 14px rgba(0, 0, 0, 0.55),
    inset  3px  3px  8px rgba(255, 255, 255, 0.06),
    0 0 20px rgba(180, 160, 140, 0.35),
    0 0 40px rgba(180, 160, 140, 0.15);
}

/* ── Venus — Lessons ── */
.pt-venus {
  background: radial-gradient(
    circle at 35% 30%,
    #fff3c4 0%, #f5d67a 30%, #e8a830 60%, #c47820 85%, #8a4a10 100%
  );
  box-shadow:
    inset -6px -6px 14px rgba(0, 0, 0, 0.35),
    inset  3px  3px  8px rgba(255, 255, 200, 0.14),
    0 0 22px rgba(245, 210, 100, 0.50),
    0 0 44px rgba(245, 180,  50, 0.22);
}

/* ── Earth — Explore ── */
.pt-earth {
  background: radial-gradient(
    circle at 35% 30%,
    #90d0ff 0%, #1e90e0 30%, #0a60b0 60%, #083880 85%, #051c50 100%
  );
  box-shadow:
    inset -6px -6px 14px rgba(0, 0, 0, 0.50),
    inset  3px  3px  8px rgba(150, 220, 255, 0.12),
    0 0 22px rgba(30, 140, 220, 0.50),
    0 0 44px rgba(10,  80, 200, 0.22);
  overflow: hidden;
}

/* Green landmasses */
.pt-earth::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 38% 22% at 38% 42%, rgba(40,160,60,0.65) 0%, transparent 100%),
    radial-gradient(ellipse 18% 28% at 68% 35%, rgba(50,170,50,0.55) 0%, transparent 100%),
    radial-gradient(ellipse 22% 14% at 25% 68%, rgba(45,155,55,0.50) 0%, transparent 100%),
    radial-gradient(ellipse 14% 18% at 72% 65%, rgba(40,150,50,0.45) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── Jupiter — Chores ── */
.pt-jupiter {
  background: radial-gradient(
    circle at 35% 30%,
    #f5e0c0 0%, #e8c080 20%, #d4904a 40%,
    #c07030 55%, #a85020 70%, #8a3810 85%, #6a2408 100%
  );
  box-shadow:
    inset -6px -6px 14px rgba(0, 0, 0, 0.40),
    inset  3px  3px  8px rgba(255, 240, 200, 0.10),
    0 0 24px rgba(210, 140,  60, 0.45),
    0 0 48px rgba(200, 100,  20, 0.20);
}

/* Jupiter bands */
.pt-jupiter::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    180deg,
    transparent         0px,
    transparent         6px,
    rgba(0,0,0,0.12)    6px,
    rgba(0,0,0,0.12)    9px,
    transparent         9px,
    transparent        15px,
    rgba(255,220,160,0.10) 15px,
    rgba(255,220,160,0.10) 18px
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Mars — Spanish ── */
.pt-mars {
  background: radial-gradient(
    circle at 35% 30%,
    #ff9f7a 0%, #e05a30 30%, #c03a18 60%, #8a2010 85%, #5c1008 100%
  );
  box-shadow:
    inset -6px -6px 14px rgba(0, 0, 0, 0.50),
    inset  3px  3px  8px rgba(255, 180, 140, 0.10),
    0 0 22px rgba(220,  80,  30, 0.50),
    0 0 44px rgba(200,  50,  10, 0.22);
}

/* ── Saturn — Notes ── */
.pt-saturn {
  background: radial-gradient(
    circle at 35% 30%,
    #fff0c0 0%, #f0d070 25%, #d4a830 55%, #a87820 80%, #7a5010 100%
  );
  box-shadow:
    inset -6px -6px 14px rgba(0, 0, 0, 0.38),
    inset  3px  3px  8px rgba(255, 250, 200, 0.12),
    0 0 24px rgba(230, 180,  50, 0.45),
    0 0 48px rgba(210, 150,  20, 0.20);
  overflow: visible !important;
}

/* Saturn ring */
.pt-saturn::before {
  content: '';
  position: absolute;
  width:  158%;
  height: 32%;
  border-radius: 50%;
  background: linear-gradient(
    105deg,
    rgba(210,170,60,0.0)   0%,
    rgba(210,170,60,0.55) 20%,
    rgba(255,220,100,0.80) 50%,
    rgba(210,170,60,0.55) 80%,
    rgba(210,170,60,0.0)  100%
  );
  box-shadow: 0 0 8px rgba(240,200,80,0.30);
  transform: rotateX(75deg) rotateZ(-15deg);
  z-index: 0;
  pointer-events: none;
  top:  32%;
  left: -29%;
}

/* ── Neptune — Games ── */
.pt-neptune {
  background: radial-gradient(
    circle at 35% 30%,
    #a0c8ff 0%, #4080e0 25%, #1850c0 55%, #0c2e90 80%, #061860 100%
  );
  box-shadow:
    inset -6px -6px 14px rgba(0, 0, 0, 0.55),
    inset  3px  3px  8px rgba(160, 200, 255, 0.12),
    0 0 22px rgba(40, 100, 220, 0.50),
    0 0 44px rgba(20,  60, 180, 0.22);
}

/* =============================================
   9. BOTTOM NAV
============================================= */

#bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 600;
  display: none;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 0 16px;
  flex-shrink: 0;
  border-top: none;
  gap: 8px;
}

/* Old chrome gradients removed — glass nav buttons are self-styled */

/* Nav is outside #app — display controlled by inline JS in router.js */

.nav-btn {
  flex: 1;
  height: var(--nav-btn-h);
  border-radius: 24px;
  /* Graduated border — bright top/left, dark bottom/right */
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.45);
  border-left-color: rgba(255, 255, 255, 0.35);
  border-bottom-color: rgba(0, 0, 0, 0.12);
  border-right-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  /* Raised glass — outer shadow + inner bezel for glass thickness */
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    /* Inner bezel — glass thickness */
    inset 0 0 0 3px rgba(255, 255, 255, 0.06),
    inset 0 2px 0 3px rgba(255, 255, 255, 0.12),
    inset 0 3px 6px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top shine reflection */
.nav-btn::before {
  content: '';
  position: absolute;
  inset: 2px 12px auto 12px;
  height: 40%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.2s ease;
}

/* Remove old prismatic overlay — clean glass doesn't need it */
.nav-btn::after {
  display: none;
}

/* Tap feedback — subtle inset, no scale (scale causes SVG jump at this size) */
.nav-btn:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06);
  border-top-color: rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.nav-btn:active::before {
  opacity: 0;
}

/* Nav icon sizing — percentage of button to avoid overflow clipping issues */
.nav-icon {
  width: 65%;
  height: 65%;
}

/* Home button — conic gradient, larger, same glass recipe */
.nav-btn-home {
  flex: none;
  width: calc(var(--nav-btn-h) * 1.28);
  height: calc(var(--nav-btn-h) * 1.28);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-bottom-color: rgba(0, 0, 0, 0.12);
  background:
    radial-gradient(ellipse 50% 40% at 75% 30%, rgba(var(--t7-rgb), 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 20% 70%, rgba(var(--metal), 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 0%, transparent 55%, var(--t9) 95%),
    conic-gradient(
      from 40deg at 65% 60%,
      var(--t7) 0deg, var(--t5) 55deg, var(--t4) 115deg,
      var(--t6) 175deg, var(--t8) 235deg, var(--t9) 305deg, var(--t7) 360deg
    );
  box-shadow:
    0 8px 24px rgba(var(--t7-rgb), 0.25),
    0 2px 8px rgba(0, 0, 0, 0.1),
    /* Inner bezel — glass thickness */
    inset 0 0 0 3px rgba(255, 255, 255, 0.06),
    inset 0 2px 0 3px rgba(255, 255, 255, 0.12),
    inset 0 3px 6px rgba(255, 255, 255, 0.15);
}

.nav-btn-home .nav-icon {
  width: 70%;
  height: 70%;
}

/* Active section — pressed/inset with theme tint */
.nav-btn--active {
  background: rgba(var(--title-rgb), 0.18);
  border-color: rgba(var(--title-rgb), 0.3);
  border-top-color: rgba(0, 0, 0, 0.1);
  border-left-color: rgba(0, 0, 0, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  border-right-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.06);
}
/* Hide top shine on pressed state */
.nav-btn--active::before {
  opacity: 0;
}
/* Home button keeps its gradient when active — just add pressed shadow on top */
.nav-btn-home.nav-btn--active {
  background:
    radial-gradient(ellipse 50% 40% at 75% 30%, rgba(var(--t7-rgb), 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 20% 70%, rgba(var(--metal), 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 0%, transparent 55%, var(--t9) 95%),
    conic-gradient(
      from 40deg at 65% 60%,
      var(--t7) 0deg, var(--t5) 55deg, var(--t4) 115deg,
      var(--t6) 175deg, var(--t8) 235deg, var(--t9) 305deg, var(--t7) 360deg
    );
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 3px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Old nav-btn-icon and nav-btn-label — no longer used */
.nav-btn-icon { display: none; }
.nav-btn-label { display: none; }


/* =============================================
   10. SECTION PAGES
============================================= */

.section {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 110px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(10, 10, 80, 0.9) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(10, 40, 80, 0.8) 0%, transparent 60%),
    linear-gradient(160deg,
      var(--color-bg-dark)  0%,
      var(--color-bg-mid)  50%,
      var(--color-bg-deep) 100%
    );
}

.section-back-btn { display: none; }

/* Override .section defaults for glass-migrated sections.
   .section has position:fixed, z-index:500, and dark background.
   Glass sections live inside #app-glass and must be transparent + normal flow. */
#chores-section {
  position: relative;
  z-index: 2; /* above mountains (z-index: 1) */
  background: transparent;
  padding-bottom: 110px;
}

#chores-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

#chores-container .chores-module {
  margin-top: 0;
}

#lists-section {
  position: relative;
  z-index: 2;
  background: transparent;
  overflow: hidden;
  padding-bottom: 0;
  height: calc(100vh - var(--nav-h) - 16px);
}

#lists-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#lists-container .lists-module {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#world-section {
  position: relative;
  z-index: 2;
  background: transparent;
  overflow: hidden;
  padding-bottom: 0;
  height: calc(100vh - var(--nav-h) - 16px);
}

#spanish-section {
  background:
    radial-gradient(ellipse at 20% 10%,
      rgba(10,10,80,0.9) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%,
      rgba(10,40,80,0.8) 0%, transparent 60%),
    linear-gradient(160deg,
      #0a0a2e 0%, #111128 50%, #0d0d1a 100%);
}

#spain-quest-app {
  min-height: calc(100vh - 60px);
  background: transparent;
  display: flex;
  flex-direction: column;
}

#lists-container {
  width: 100%;
  margin: 0;
  padding: 0;
}


/* =============================================
   11. MODAL
============================================= */

#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#modal-box {
  background: linear-gradient(
    145deg,
    rgba(15, 15, 50, 0.97),
    rgba(8,   8, 35, 0.97)
  );
  border: 2px solid var(--profile-accent);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vh, 40px) clamp(20px, 4vw, 36px);
  width: 90%;
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow:
    0 0 0 1px var(--profile-accent-glow),
    0 0 40px  var(--profile-accent-glow),
    0 24px 60px rgba(0, 0, 0, 0.7);
  transform: scale(0.85);
  transition:
    transform    0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.4s ease,
    box-shadow   0.4s ease;
  backdrop-filter: blur(16px);
}

#modal-overlay.open #modal-box { transform: scale(1); }

#modal-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.8vw, 34px);
  color: var(--color-moon-silver);
  text-align: center;
  margin-bottom: 10px;
  text-shadow:
    0 0 20px var(--color-gold-dim),
    1px 1px 6px rgba(0, 0, 0, 0.5);
}

#modal-body {
  color: rgba(255, 255, 255, 0.90);
  font-size: clamp(14px, 2.4vw, 20px);
  font-weight: 600;
  text-align: center;
  line-height: 1.65;
  margin-bottom: 28px;
}

#modal-close {
  display: block;
  width: 100%;
  padding: clamp(14px, 2.5vh, 20px);
  background: var(--profile-accent);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Fredoka One', cursive;
  font-size: clamp(17px, 3vw, 26px);
  color: var(--color-text-light);
  cursor: pointer;
  box-shadow:
    0 6px 0   var(--profile-accent-dark),
    0 10px 24px var(--profile-accent-glow);
  transition:
    transform  var(--transition-bounce),
    box-shadow var(--transition-fast);
}

#modal-close:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0   var(--profile-accent-dark),
    0 4px 10px var(--profile-accent-glow);
}


/* =============================================
   12. BADGE COLLECTION MODAL
============================================= */

#badge-collection-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#badge-collection-modal.badge-modal--open {
  opacity: 1;
  pointer-events: all;
}

.badge-modal-box {
  background: linear-gradient(
    160deg,
    #0f0f32 0%,
    #0a0a22 60%,
    #080818 100%
  );
  border-radius: 28px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 520px;
  max-height: 82vh;
  overflow-y: auto;
  position: relative;
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
  transform: scale(0.88);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-modal-box::-webkit-scrollbar { display: none; }

#badge-collection-modal.badge-modal--open .badge-modal-box {
  transform: scale(1);
}

#badge-collection-modal.badge-modal--closing {
  opacity: 0;
}

/* Chrome top line */
.badge-modal-chrome-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  border-radius: 28px 28px 0 0;
  opacity: 0.9;
}

.badge-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.badge-modal-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.5vw, 30px);
  color: #ffffff;
  text-shadow:
    0 0 20px rgba(168, 85, 247, 0.5),
    1px 1px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
}

.badge-modal-subtitle {
  font-size: clamp(12px, 1.8vw, 15px);
  color: var(--color-moon-silver);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Badge grid — 2 columns */
.badge-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.badge-modal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 16px 12px 14px;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Earned badge — chrome border glow */
.badge-modal-item--earned {
  border-color: transparent;
  background:
    linear-gradient(#0f0f32, #0f0f32) padding-box,
    var(--chrome-gradient) border-box;
  box-shadow:
    0 0 16px rgba(168, 85, 247, 0.15),
    inset 0 0 8px rgba(168, 85, 247, 0.05);
}

/* Locked badge — greyed out */
.badge-modal-item--locked {
  opacity: 0.65;
}

.badge-modal-emoji {
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Locked emoji — greyscale */
.badge-modal-emoji--locked {
  filter: grayscale(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.badge-modal-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 2vw, 16px);
  color: #ffffff;
  line-height: 1.2;
}

.badge-modal-label--locked {
  color: var(--color-moon-silver);
  opacity: 0.7;
}

.badge-modal-desc {
  font-size: clamp(10px, 1.4vw, 12px);
  color: rgba(200, 214, 229, 0.60);
  font-weight: 700;
  line-height: 1.4;
}

/* Progress bar for locked badges */
.badge-modal-progress-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 2px;
}

.badge-modal-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #00cfff, #a855f7);
  transition: width 0.6s ease;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
}

.badge-modal-status {
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 800;
  letter-spacing: 0.3px;
}

.badge-modal-status--earned {
  color: var(--color-success);
  text-shadow: 0 0 8px var(--color-success-glow);
}

.badge-modal-status--locked {
  color: rgba(200, 214, 229, 0.45);
}

/* Close button */
.badge-modal-close {
  display: block;
  width: 100%;
  padding: clamp(12px, 2vh, 18px);
  background: linear-gradient(135deg, #00cfff, #a855f7);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.5vw, 22px);
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 5px 0 rgba(0, 80, 140, 0.7),
    0 8px 20px rgba(168, 85, 247, 0.4);
  transition:
    transform  var(--transition-bounce),
    box-shadow var(--transition-fast);
  letter-spacing: 0.3px;
}

.badge-modal-close:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 rgba(0, 80, 140, 0.7),
    0 3px 8px rgba(168, 85, 247, 0.3);
}


/* =============================================
   13. VOICE STATUS
============================================= */

#voice-status {
  position: fixed;
  bottom: clamp(70px, 10vh, 100px);
  right: 20px;
  z-index: 100;
  background: rgba(5, 5, 25, 0.85);
  border: 2px solid var(--profile-accent);
  border-radius: var(--radius-full);
  padding: clamp(8px, 1.5vh, 14px) clamp(14px, 2.5vw, 22px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 1.8vw, 15px);
  color: var(--color-text-light);
  font-weight: 700;
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  box-shadow: 0 0 16px var(--profile-accent-glow);
}

#voice-status.visible { opacity: 1; }

#voice-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 10px var(--color-success-glow);
  animation: pulse-dot 1.1s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.5); opacity: 0.6; }
}


/* =============================================
   14. LOADING SCREEN
============================================= */

#loading-screen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%,
      rgba(20, 10, 80, 0.9) 0%, transparent 60%),
    linear-gradient(160deg,
      var(--color-bg-dark),
      var(--color-bg-deep));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 28px);
  transition: opacity 0.5s ease;
}

#loading-screen.hide {
  opacity: 0;
  pointer-events: none;
}

.loading-emoji {
  font-size: clamp(70px, 12vw, 110px);
  animation: pop 0.9s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 24px rgba(168, 85, 247, 0.7));
}

.loading-logo {
  width: clamp(70px, 12vw, 110px);
  height: clamp(70px, 12vw, 110px);
  border-radius: 16px;
}

@keyframes pop {
  from { transform: scale(0.88) rotate(-6deg); }
  to   { transform: scale(1.12) rotate( 6deg); }
}

.loading-text {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(26px, 5vw, 44px);
  color: var(--color-moon-silver);
  text-shadow:
    0 0 30px var(--color-gold-dim),
    2px 2px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.loading-dots {
  display: flex;
  gap: clamp(10px, 2vw, 16px);
}

.loading-dot {
  width:  clamp(14px, 2.5vw, 20px);
  height: clamp(14px, 2.5vw, 20px);
  border-radius: 50%;
  animation: dot-bounce 1.3s ease-in-out infinite;
}

.loading-dot:nth-child(1) {
  background: var(--picker-orange);
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.7);
  animation-delay: 0.0s;
}
.loading-dot:nth-child(2) {
  background: var(--picker-amber);
  box-shadow: 0 0 10px rgba(255, 190, 0, 0.7);
  animation-delay: 0.2s;
}
.loading-dot:nth-child(3) {
  background: var(--picker-mint);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
  animation-delay: 0.4s;
}
.loading-dot:nth-child(4) {
  background: var(--picker-sky);
  box-shadow: 0 0 10px rgba(0, 207, 255, 0.7);
  animation-delay: 0.6s;
}
.loading-dot:nth-child(5) {
  background: var(--picker-purple);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
  animation-delay: 0.8s;
}

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.4; }
  40%            { transform: scale(1.25); opacity: 1;   }
}

/* Section loading indicator — shown while lazy-loading scripts */
.section-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
  height: 100%;
  min-height: 300px;
}
.section-loading-dot {
  width:  clamp(14px, 2.5vw, 20px);
  height: clamp(14px, 2.5vw, 20px);
  border-radius: 50%;
  animation: dot-bounce 1.3s ease-in-out infinite;
}
.section-loading-dot:nth-child(1) {
  background: var(--picker-orange);
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.7);
  animation-delay: 0.0s;
}
.section-loading-dot:nth-child(2) {
  background: var(--picker-amber);
  box-shadow: 0 0 10px rgba(255, 190, 0, 0.7);
  animation-delay: 0.2s;
}
.section-loading-dot:nth-child(3) {
  background: var(--picker-mint);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
  animation-delay: 0.4s;
}


/* =============================================
   15. LANDSCAPE WARNING
============================================= */

#landscape-warning {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-deep);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  font-family: 'Fredoka One', cursive;
  color: var(--color-moon-silver);
  font-size: clamp(20px, 5vw, 32px);
  text-align: center;
  padding: 24px;
  text-shadow: 0 0 20px var(--color-gold-dim);
}

@media (orientation: landscape) and (max-height: 500px) {
  #landscape-warning { display: flex !important; }
}


/* =============================================
   16. RESPONSIVE ADJUSTMENTS
============================================= */

@media (max-height: 700px) {
  .profile-avatar-circle {
    width:  44px;
    height: 44px;
  }

  #profile-carousel  { height: 140px; }
  .profile-card      { height: 110px; padding: 10px 12px; }
  .card-stat-icon    { font-size: 22px; }
  .card-stat-value   { font-size: 12px; }
  :root {
    --dash-tile-gap:    6px;
    --dash-planet-size: 56px;
  }

  #planet-dashboard { padding: 6px 8px 8px; }
}

@media (max-width: 480px) {
  :root {
    --dash-tile-gap:    8px;
    --dash-planet-size: 64px;
  }
}

@media (min-width: 768px) {
  :root {
    --dash-tile-gap:    12px;
    --dash-planet-size: 88px;
  }
}

@media (min-width: 1080px) {
  #app { max-width: 1080px; margin: 0 auto; }
}


/* =============================================
   17. ACCESSIBILITY
============================================= */

:focus-visible {
  outline: 4px solid var(--profile-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  1ms !important;
    transition-duration: 1ms !important;
  }
}

@media (prefers-contrast: high) {
  .planet, .nav-btn, .profile-card {
    border: 3px solid var(--color-text-light);
  }
}


/* =============================================
   17b. SERVER BANNER
============================================= */

#server-banner {
  position: relative;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 71, 87, 0.15);
  border-bottom: 2px solid rgba(255, 71, 87, 0.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.server-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.server-banner-text {
  flex: 1;
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 700;
  color: var(--color-moon-silver);
  line-height: 1.4;
}

.server-banner-dismiss {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-text-light);
  background: rgba(255, 71, 87, 0.40);
  border: 1.5px solid rgba(255, 71, 87, 0.60);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background  var(--transition-fast),
    transform   var(--transition-bounce);
}

.server-banner-dismiss:active {
  transform: scale(0.92);
  background: rgba(255, 71, 87, 0.60);
}

.server-banner-hiding {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}


/* =============================================
   18. STAR OPACITY — weather controlled
============================================= */

#app::before {
  opacity: var(--star-opacity, 0.75);
  transition: opacity 2s ease;
}


/* =============================================
   19. PRINT
============================================= */

@media print {
  #bottom-nav, #modal-overlay,
  #voice-status, #loading-screen {
    display: none !important;
  }
  body { background: white; }
}



/* ============================================================
   20. CHORES MODULE
   ─────────────────────────────────────────────────────────────
   Utilities used from Section 2b:
     .section-header   — sticky header shell
     .section-title    — module title
     .section-subtitle — date subtitle
     .section-body     — scrollable content area
     .hide-scrollbar   — scrollbar hiding
     .progress-track / .progress-track-lg / .progress-fill
     .glass-card       — chore-item and reward-item base
     .pill / .pill-*   — points badges and reward costs
     .btn / .btn-*     — all buttons
     .modal-overlay / .modal-box — confirm and customize modals
     .text-heading / .text-body / .text-muted / .text-label
     .chrome-line      — chrome top line inside modals
   ============================================================ */

/* ── 20.1 Module wrapper ── */
.chores-module {
  font-family: 'Nunito', sans-serif;
  position: relative;
  max-width: 100%;
  /* No background — inherits theme gradient from body */
}

/* ── 20.3 Glass banner — shared base for section headers ── */
.glass-banner {
  position: relative;
  height: 260px;
  border-radius: 24px;
  margin: 16px 16px 0;
  background:
    radial-gradient(ellipse 50% 40% at 75% 30%, rgba(var(--t7-rgb), 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 20% 70%, rgba(var(--metal), 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 0%, transparent 55%, var(--t9) 95%),
    conic-gradient(
      from 40deg at 65% 60%,
      var(--t7) 0deg, var(--t5) 55deg, var(--t4) 115deg,
      var(--t6) 175deg, var(--t8) 235deg, var(--t9) 305deg, var(--t7) 360deg
    );
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid rgba(var(--metal), 0.35);
  border-left-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  border-right-color: rgba(0, 0, 0, 0.15);
  box-shadow:
    inset 0 8px 20px rgba(0, 0, 0, 0.2),
    inset 6px 0 16px rgba(0, 0, 0, 0.12),
    inset 0 -6px 16px rgba(255, 248, 235, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 24px;
  flex-shrink: 0;
}
.glass-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(var(--metal), 0.12) 0%, transparent 100%);
  border-radius: 24px 24px 0 0;
  z-index: 0;
  pointer-events: none;
}
.glass-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 12%),
    radial-gradient(circle at 80% 15%, rgba(255, 220, 160, 0.06) 0%, transparent 30%),
    radial-gradient(circle at 15% 85%, rgba(180, 220, 255, 0.04) 0%, transparent 25%);
  pointer-events: none;
  z-index: 0;
}

/* Shared banner child patterns */
.glass-banner-watermark {
  position: absolute;
  width: 518px;
  height: 518px;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
.glass-banner-watermark svg,
.glass-banner-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.glass-banner-avatar {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 216px;
  height: 216px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
}
.glass-banner-avatar img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.glass-banner-title {
  position: absolute;
  right: 14%;
  top: 33%;
  font-size: 81px;
  font-weight: 800;
  font-family: sans-serif;
  letter-spacing: -1px;
  color: white;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.2);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
  z-index: 3;
}

/* ── Chores banner — extends .glass-banner ── */
/* Trophy watermark — specific positioning for chores */
.chores-banner-trophy {
  right: 4%;
  top: 63%;
  transform: translateY(-50%) scaleX(-1) rotate(-40deg);
}

/* Settings button — positioned in the glass content pane top-right */
.chores-banner-settings {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
}
.chores-banner-settings:active {
  background: rgba(255, 255, 255, 0.2);
}

.chores-banner-progress {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 19px;  /* 16 * 1.2 */
  border-radius: 10px;
  z-index: 2;
  background: rgba(0,0,0,0.2);
  overflow: hidden;
}

.chores-banner-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  transition: width 0.3s ease;
}

.chores-banner-label {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
}

/* ── 20.4 Glass tabs row ── */
.chores-tabs-row {
  display: flex;
  justify-content: center;
  padding: 0 16px 32px;  /* 2x bottom padding for spacing to first chore */
}

/* Glass tabs component — shared recipe from prototype */
.glass-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  background: rgba(var(--t9-rgb), 0.3);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius: 28px;  /* rounded rectangle like nav buttons */
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
}

.glass-tabs-indicator {
  position: absolute;
  top: 50%;
  left: 8px;
  height: calc(100% - 0px);
  transform: translateY(-50%);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  /* Outer border */
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    /* Outer shadow — lightened */
    0 6px 20px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 0 12px rgba(var(--title-rgb), 0.1),
    /* Inner bezel — creates the glass thickness / double-border look */
    inset 0 0 0 3px rgba(255, 255, 255, 0.06),
    inset 0 2px 0 3px rgba(255, 255, 255, 0.12),
    /* Top inner highlight — bright reflection line */
    inset 0 3px 6px rgba(255, 255, 255, 0.15);
  transition:
    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.glass-tab {
  padding: 22px 34px;
  border-radius: 22px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  z-index: 2;
}

.glass-tab:active { transform: scale(0.95); }

.glass-tab.selected {
  color: white;
  transform: scale(1.05);
}

/* Glass toggle — for chore checkboxes */
.glass-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex-shrink: 0;
}

.glass-toggle-track {
  position: relative;
  width: 72px;
  height: 38px;
  border-radius: 999px;
  background: rgba(var(--t9-rgb), 0.4);
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
}

.glass-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.15);
  transition:
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* ON state */
.glass-toggle.on .glass-toggle-track {
  background: rgba(var(--title-rgb), 0.3);
  border-color: rgba(var(--title-rgb), 0.35);
  border-top-color: rgba(var(--title-rgb), 0.4);
}

.glass-toggle.on .glass-toggle-knob {
  left: calc(100% - 31px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(var(--title-rgb), 0.3);
}

/* Size variants */
.glass-toggle.sm .glass-toggle-track { width: 52px; height: 28px; }
.glass-toggle.sm .glass-toggle-knob { width: 20px; height: 20px; top: 2px; left: 2px; }
.glass-toggle.sm.on .glass-toggle-knob { left: calc(100% - 22px); }

/* ── 20.5 Content pane — inset glass ── */
/* Stretches from below hero banner to above nav bar with consistent gaps.
   Banner: 260px + 16px top margin = 276px. Gap: 48px top & bottom.
   Nav: var(--nav-h) + 16px bottom offset. */
.chores-content-pane {
  position: relative;
  margin: 52px 55px 0;
  padding: 24px 16px;
  /* Fill space between banner and nav bar */
  height: calc(100vh - 276px - 52px - var(--nav-h) - 16px - 52px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Warm-grey glass tint — not pure white, reads as a surface */
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 24px;
  /* Visible fine border — precise edge like reference */
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    /* Outer lift shadow */
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    /* Subtle inner top highlight — pane catches light */
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.chores-content-pane::-webkit-scrollbar { display: none; }
.chores-content-pane { scrollbar-width: none; }

/* ── 20.7 Voice section ── */
.voice-section {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: clamp(10px,1.8vw,16px) clamp(14px,2.5vw,20px);
  margin-bottom: clamp(14px,2.5vw,22px);
  flex-wrap: wrap;
  backdrop-filter: blur(8px);
}

/* ── Voice btn — shape from .mc-audio-btn ── */

@keyframes pulse-mic {
  0%   { box-shadow: 0 4px 0 rgba(140,20,20,0.8), 0 0 0 0    rgba(255,71,87,0.5); }
  50%  { box-shadow: 0 4px 0 rgba(140,20,20,0.8), 0 0 0 14px rgba(255,71,87,0);   }
  100% { box-shadow: 0 4px 0 rgba(140,20,20,0.8), 0 0 0 0    rgba(255,71,87,0.5); }
}

.voice-status {
  flex: 1;
  font-size: clamp(12px,1.8vw,16px);
  font-weight: 700;
  color: var(--color-moon-silver);
  min-width: 140px;
}

.voice-status--error  { color: var(--color-danger); }
.voice-status--active {
  color: var(--color-success);
  text-shadow: 0 0 8px rgba(0,255,136,0.6);
}
.voice-status--idle   { color: rgba(200,214,229,0.50); }

.voice-toast {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(0,0,0,0.82);
  border: 1.5px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 7px 18px;
  border-radius: 9999px;
  font-size: clamp(11px,1.6vw,14px);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 998;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* ── 20.8 Action buttons ──
   .btn .btn-ghost provides base.
   Chores-specific sizing tweak only. */
.chores-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px,2.5vw,20px);
}

.chores-action-btn {
  font-size: clamp(12px,1.7vw,15px);
  padding: clamp(7px,1.2vw,11px) clamp(12px,2vw,18px);
}

/* ── 20.9 Chore list ── */
.chores-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 92%;
}

/* Chore item — glass card with points activation button */
.chore-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  /* Less opaque than before — let pane surface show through */
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(0, 0, 0, 0.05);
  box-shadow:
    /* Real shadow cast onto pane surface — key depth cue */
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06),
    /* Inner top highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.chore-item.completed {
  background: rgba(var(--title-rgb), 0.15);
  border-color: rgba(var(--title-rgb), 0.25);
}

.chore-icon {
  font-size: 54px;  /* 36 * 1.5 */
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.chore-label {
  flex: 1;
  font-size: 34px;  /* 21 * 1.6 */
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  transition: color 0.2s;
  letter-spacing: 0.2px;
}
.chore-item.completed .chore-label {
  color: rgba(0, 0, 0, 0.35);
}

/* Points activation button */
.chore-points-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;  /* fixed width — all buttons same size */
  padding: 18px 32px;
  border-radius: 20px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  /* More matte/opaque than the bars — mixed material contrast */
  background: rgba(240, 238, 235, 0.5);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.55);
  font-family: sans-serif;
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
  flex-shrink: 0;
}
/* Completed — pressed/tinted */
.chore-item.completed .chore-points-btn {
  background: rgba(var(--title-rgb), 0.2);
  border-color: rgba(var(--title-rgb), 0.3);
  border-top-color: rgba(0, 0, 0, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}

/* Inline star icon in points buttons */
.pts-star {
  width: 43px;
  height: 43px;
  vertical-align: middle;
  margin-left: 2px;
  flex-shrink: 0;
}

/* Cooldown state on points button — muted, smaller text for timer */
.chore-points-btn.cooldown {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: none;
}

/* ── 20.10 All done banner ── */
.chores-all-done {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  color: #fff;
  text-align: center;
  border-radius: 20px;
  padding: clamp(14px,2.5vw,22px);
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px,2.8vw,26px);
  font-weight: 400;
  margin-bottom: clamp(16px,3vw,24px);
  animation: pop-in 0.45s cubic-bezier(.34,1.56,.64,1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── 20.11 Rewards pane ── */
/* ── 20.11 Rewards pane ── */
.rewards-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.rewards-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 92%;
}

/* Reward + milestone items reuse .chore-item styling via shared classes.
   These selectors handle state variants only. */

.reward-item {
  cursor: default;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.reward-item.unlockable {
  cursor: pointer;
}

.reward-item.unlockable:active {
  transform: scale(0.97);
}

.reward-item.on-cooldown {
  opacity: 0.6;
}

/* ── 20.12 Milestones pane ── */
.milestones-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.milestones-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 92%;
}

/* Milestone items reuse .chore-item via shared classes */
.milestone-item {
  transition: background 0.2s ease, border-color 0.2s ease;
}

.milestone-item.completed {
  background: rgba(var(--title-rgb), 0.15);
  border-color: rgba(var(--title-rgb), 0.25);
}

.milestones-trophy-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.milestones-trophy-divider::before,
.milestones-trophy-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.milestones-trophy-divider .text-label {
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.4);
  font-size: 24px;
  font-weight: 600;
}

/* cooldown input in customize modal */
.chores-customize-input--cooldown {
  width: 80px;
  padding: 12px;
  text-align: center;
}

/* ── 20.13 Reward toast ── */
.reward-toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(var(--t9-rgb), 0.6);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  color: #fff;
  padding: clamp(14px,2.5vw,20px) clamp(24px,4vw,36px);
  border-radius: 20px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(15px,2.5vw,22px);
  font-weight: 400;
  z-index: 9999;
  border: 1.5px solid rgba(255,255,255,0.2);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transition:
    transform 0.4s cubic-bezier(.34,1.56,.64,1),
    opacity 0.3s;
  opacity: 0;
  text-align: center;
}

.reward-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── 20.13 Confirm dialog ──
   .modal-overlay + .modal-box provide structure.
   Only z-index and chores-specific decoration here. */
#chores-confirm-dialog.modal-overlay {
  z-index: 20000;
}

.chores-confirm-box {
  text-align: center;
  /* Light glass — matches customize modal */
  background: rgba(245, 243, 240, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.chores-confirm-stars {
  display: none; /* stars don't work on light background */
}

.chores-confirm-icon {
  font-size: 52px;
  margin-bottom: 14px;
  position: relative;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.1));
}

.chores-confirm-message {
  margin-bottom: 28px;
  position: relative;
  color: rgba(0, 0, 0, 0.65);
}

.chores-confirm-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  position: relative;
}

/* ── 20.14 Customize modal ──
   Nav-bar influenced: glass surface, chrome accents, SVG icons */
#chores-customize-modal.modal-overlay {
  z-index: 10000;
}

.chores-customize-modal {
  max-width: 840px;
  width: 94%;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 44px 40px;
  /* Override dark modal-box — liquid glass treatment */
  background: rgba(245, 243, 240, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.chores-customize-modal::-webkit-scrollbar { display: none; }

/* ── Title row with SVG gear ── */
.cm-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.cm-title-icon {
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 4vw, 36px);
  flex-shrink: 0;
}

.cm-title-icon svg {
  width: 100%;
  height: 100%;
  color: rgba(0, 0, 0, 0.25);
  stroke: currentColor;
}

.chores-customize-title {
  margin: 0;
  font-size: clamp(22px, 3.5vw, 30px);
  color: rgba(0, 0, 0, 0.5);
}

/* ── Column headers ── */
.cm-col-headers {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 4px;
}

.cm-col-header {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(11px, 1.8vw, 14px);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Star SVG inside column header */
.cm-col-header .pts-star {
  width: 32px;
  height: 32px;
}

/* Match spacers/headers to input widths via data-col */
.cm-col-headers [data-col="icon"]     { width: 60px; flex-shrink: 0; }
.cm-col-headers [data-col="label"]    { flex: 1; }
.cm-col-headers [data-col="points"],
.cm-col-headers [data-col="cost"]     { width: 80px; flex-shrink: 0; }
.cm-col-headers [data-col="cooldown"] { width: 80px; flex-shrink: 0; }
.cm-col-headers [data-col="remove"]   { width: 44px; flex-shrink: 0; }

/* ── Item rows ── */
.chores-customize-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.chores-customize-input {
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.7);
  font-family: 'Nunito', sans-serif;
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 700;
  outline: none;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chores-customize-input:focus {
  border-color: rgba(var(--title-rgb), 0.4);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 0 0 3px rgba(var(--title-rgb), 0.12);
}

.chores-customize-input--icon {
  width: 60px;
  text-align: center;
  font-size: clamp(22px, 3.5vw, 28px);
  padding: 10px;
}

.chores-customize-input--label {
  flex: 1;
  padding: 12px 16px;
}

.chores-customize-input--points {
  width: 80px;
  padding: 12px;
  text-align: center;
}

/* ── Remove button: minimal red circle with "−" ── */
.cm-remove-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 71, 87, 0.25);
  background: rgba(255, 71, 87, 0.08);
  color: rgba(220, 50, 60, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.cm-remove-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cm-remove-btn:active {
  transform: scale(0.9);
  background: rgba(255, 71, 87, 0.15);
  border-color: rgba(255, 71, 87, 0.4);
}

/* ── Add button: chrome gradient circle ── */
.cm-add-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: conic-gradient(from 40deg, var(--t7), var(--t5), var(--t4), var(--t6), var(--t8), var(--t7));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 16px auto 0;
  box-shadow:
    0 4px 0 rgba(var(--t9-rgb), 0.4),
    0 8px 20px rgba(var(--t9-rgb), 0.25);
  transition: all 0.15s ease;
  position: relative;
}

.cm-add-btn::before {
  content: '';
  position: absolute;
  top: 2px; left: 10%; right: 10%;
  height: 40%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.30), transparent);
  border-radius: 50%;
  pointer-events: none;
}

.cm-add-icon svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.cm-add-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 rgba(var(--t9-rgb), 0.4),
    0 4px 10px rgba(var(--t9-rgb), 0.2);
}

/* ── Footer: centered icon buttons ── */
.chores-customize-footer {
  display: flex;
  gap: 18px;
  margin-top: 32px;
  justify-content: center;
}

.cm-footer-btn {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.15s ease;
}

/* Shine layer */
.cm-footer-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.3), transparent);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}

.cm-footer-btn svg {
  width: 24px;
  height: 24px;
}

.cm-footer-btn:active {
  transform: scale(0.92);
  background: rgba(0, 0, 0, 0.06);
}

/* Save: theme gradient background */
.cm-footer-btn--save {
  background: conic-gradient(from 40deg, var(--t7), var(--t5), var(--t4), var(--t6), var(--t8), var(--t7));
  border: none;
  color: #fff;
  box-shadow:
    0 4px 0 rgba(var(--t9-rgb), 0.4),
    0 8px 16px rgba(var(--t9-rgb), 0.25);
}

.cm-footer-btn--save:active {
  transform: translateY(2px) scale(0.96);
  box-shadow:
    0 2px 0 rgba(var(--t9-rgb), 0.4),
    0 4px 8px rgba(var(--t9-rgb), 0.2);
}

/* Reset: subtle accent */
.cm-footer-btn--reset {
  color: rgba(0, 160, 200, 0.7);
  border-color: rgba(0, 160, 200, 0.2);
}

/* Wipe trophies: warning orange */
.cm-footer-btn--wipe {
  color: rgba(240, 140, 0, 0.8);
  border-color: rgba(240, 140, 0, 0.25);
}

/* Close: subtle red */
.cm-footer-btn--close {
  color: rgba(220, 50, 60, 0.6);
  border-color: rgba(220, 50, 60, 0.15);
}

/* ── 20.15 Responsive ── */
@media (max-width: 480px) {
  .chores-title      { font-size: 20px; }
  .chore-label       { font-size: 24px; }
}



/* ============================================================
   21. LISTS MODULE
   ============================================================ */

/* ── 21.1 Wrapper ── */
.lists-module {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background: transparent;
  flex: 1;
  min-height: 0;
}

/* ── 21.1b Planner banner — extends .glass-banner ── */
.planner-banner-watermark {
  right: 4%;
  top: 58%;
  transform: translateY(-50%) rotate(25deg);
}

/* ── 21.1c Planner glass panes ── */
.planner-calendar-pane {
  position: relative;
  margin: 24px 55px 0;
  padding: 16px 16px;
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}

.planner-lists-pane {
  position: relative;
  margin: 16px 55px 0;
  padding: 24px 16px;
  flex: 1;
  min-height: 0;
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.planner-lists-pane::-webkit-scrollbar { display: none; }

/* ── 21.2 Planner tabs row ── */
.planner-lists-tabs-row {
  display: flex;
  justify-content: center;
  padding: 0 0 24px;
}

/* ── 21.5 Content area ── */
.lists-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── 21.7 Add item row ── */
.lists-add-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.lists-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 14px 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  outline: none;
  transition:
    border-color 0.2s ease,
    background   0.2s ease,
    box-shadow   0.2s ease;
  user-select: text;
  -webkit-user-select: text;
}

.lists-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

.lists-input:focus {
  border-color: var(--profile-accent);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 3px var(--profile-accent-soft);
}

/* ── 21.8 Add button ── */
.lists-add-btn {
  border-radius: 16px;
  padding: 14px 20px;
  background: rgba(240, 238, 235, 0.5);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.55);
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: background 0.15s ease, transform 0.15s ease;
}
.lists-add-btn:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.06);
}

/* ── 21.9 Empty state ── */
.lists-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  text-align: center;
}

.lists-empty-emoji {
  font-size: 56px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.lists-empty-title {
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.55);
}

.lists-empty-subtitle {
  max-width: 280px;
  line-height: 1.5;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.35);
}

/* ── 21.11 Items list ── */
.lists-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 21.12 Single item — glass card style ── */
.lists-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(0, 0, 0, 0.05);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    background   0.2s ease,
    border-color 0.2s ease,
    opacity      0.2s ease,
    transform    0.2s ease;
  animation: lists-item-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 100%;
}

@keyframes lists-item-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.lists-item.done {
  background: rgba(var(--title-rgb), 0.15);
  border-color: rgba(var(--title-rgb), 0.25);
  opacity: 0.65;
}

/* ── 21.12b Item emoji ── */
.lists-item-emoji {
  font-size: 40px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  line-height: 1;
}

/* ── 21.13 Tick button ── */
.lists-item-tick {
  width:  32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition:
    background   0.2s ease,
    border-color 0.2s ease,
    transform    0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: transparent;
}

.lists-item-tick:active { transform: scale(0.85); }

.lists-item.done .lists-item-tick {
  background: rgba(var(--title-rgb), 0.25);
  border-color: rgba(var(--title-rgb), 0.5);
  color: rgba(0, 0, 0, 0.5);
}

/* ── 21.14 Item text ── */
.lists-item-text {
  flex: 1;
  font-size: 28px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.3;
  word-break: break-word;
  transition: color 0.2s ease;
  user-select: text;
  -webkit-user-select: text;
}

.lists-item.done .lists-item-text {
  color: rgba(0, 0, 0, 0.35);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.2);
}

/* ── 21.15 Delete button ── */
.lists-item-delete {
  width:  32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition:
    background   0.2s ease,
    border-color 0.2s ease,
    transform    0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: rgba(0, 0, 0, 0.3);
}

.lists-item-delete:active {
  transform: scale(0.85);
  background: rgba(255, 71, 87, 0.15);
  border-color: rgba(255, 71, 87, 0.4);
  color: rgba(255, 71, 87, 0.8);
}

/* ── 21.16 Done items toggle ── */
.lists-done-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  color: rgba(0, 0, 0, 0.4);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: opacity 0.2s ease;
}

.lists-done-toggle:active { opacity: 0.7; }

.lists-done-toggle-arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}

.lists-done-toggle.open .lists-done-toggle-arrow {
  transform: rotate(90deg);
}

/* ── 21.17 Done items list ── */
.lists-done-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lists-done-items[hidden] { display: none; }

/* ── 21.18 Toast ── */
.lists-toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(var(--t9-rgb), 0.6);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 12px 24px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 18px);
  color: #ffffff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 900;
  transition:
    opacity   0.3s ease,
    transform 0.4s cubic-bezier(.34,1.56,.64,1);
}

.lists-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 21.19 Responsive ── */
@media (max-width: 480px) {
  .lists-item-text { font-size: 20px; }
  .lists-item-emoji { font-size: 32px; }
}


/* ── 21.20 Planner scroll area — holds calendar + lists ── */
/* planner-scroll-area no longer used — layout handled by panes */


/* ── 21.21 Calendar navigation bar — single row: title + today + month strip ── */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 14px;
}

.cal-nav-title {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.6vw, 29px);
  color: rgba(0, 0, 0, 0.7);
  text-align: left;
  letter-spacing: 0.3px;
  transition: color 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.cal-nav-title:active {
  color: var(--profile-accent);
}

.cal-nav-today {
  background: rgba(var(--profile-accent-rgb), 0.15);
  border: 1.5px solid rgba(var(--profile-accent-rgb), 0.3);
  border-radius: 9999px;
  padding: 4px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 800;
  color: var(--profile-accent);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.cal-nav-today:active {
  background: rgba(var(--profile-accent-rgb), 0.25);
}


/* ── 21.22 Month view grid ── */
.cal-month-view {
  padding: 0 12px 8px;
}

.cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 0 4px 6px;
}

.cal-day-header {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 800;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 0 4px;
}

.cal-day {
  min-height: clamp(55px, 9vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 4px 3px 2px 6px;
  gap: 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
}

/* Empty cells (before/after month days) get no border */
.cal-day--empty {
  border-color: transparent;
}

.cal-day:active {
  transform: scale(0.92);
}

.cal-day--empty {
  cursor: default;
  border-color: transparent;
}

.cal-day--today {
  background: rgba(var(--profile-accent-rgb), 0.15);
  border-color: rgba(var(--profile-accent-rgb), 0.4);
}

.cal-day--today .cal-day-num {
  color: var(--profile-accent);
  font-weight: 900;
}

.cal-day--selected {
  background: var(--profile-accent);
  border-color: var(--profile-accent);
}

.cal-day--selected .cal-day-num {
  color: #ffffff;
  font-weight: 900;
}

.cal-day--selected .cal-pill {
  background: rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
}

.cal-day-num {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(18px, 3.15vw, 25px);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1;
}

.cal-inds {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* Event pill bars on day cells */
.cal-pill {
  display: block;
  width: 100%;
  padding: 1px 4px;
  border-radius: 4px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(7px, 1vw, 9px);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(0, 0, 0, 0.7);
}

.cal-pill--holiday  { background: rgba(255,170,30,0.8); color: #1a1a2e; }
.cal-pill--shared   { background: rgba(var(--profile-accent-rgb),0.4); color: white; }
.cal-pill--personal { background: rgba(0, 0, 0, 0.08); }

/* Indicator dots — kept for modal event rows */
.cal-ind {
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.cal-ind--holiday {
  background: rgba(255,190,50,0.85);
  box-shadow: 0 0 4px rgba(255,190,0,0.5);
}

.cal-ind--personal {
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 3px rgba(255,255,255,0.3);
}

.cal-ind--shared {
  background: var(--profile-accent);
  box-shadow: 0 0 4px rgba(var(--profile-accent-rgb), 0.6);
}


/* ── 21.23 Year view grid ── */
.cal-year-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 16px 16px;
}

.cal-year-month {
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  padding: 8px 6px 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cal-year-month:active {
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--profile-accent);
}

.cal-year-month--current {
  border-color: rgba(var(--profile-accent-rgb), 0.4);
  background: rgba(var(--profile-accent-rgb), 0.06);
}

.cal-year-month-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(11px, 1.6vw, 13px);
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.cal-year-month--current .cal-year-month-label {
  color: var(--profile-accent);
}

.cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-mini-day {
  text-align: center;
  font-size: 7px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.25);
  line-height: 1.8;
  font-family: 'Nunito', sans-serif;
}

.cal-mini-day--num {
  color: rgba(0, 0, 0, 0.4);
}

.cal-mini-day--today {
  color: var(--profile-accent);
  font-weight: 900;
  text-shadow: 0 0 6px rgba(var(--profile-accent-rgb), 0.6);
}


/* ── 21.24 Month strip — inline in nav, fills remaining space ── */
.cal-month-strip {
  flex: 1;
  min-width: 0;
  max-width: 480px; /* ~5 pills visible, rest scroll */
  margin-left: auto; /* push to right, centering in remaining space */
  margin-right: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cal-month-strip::-webkit-scrollbar {
  display: none;
}

.cal-month-strip-inner {
  display: flex;
  gap: 6px;
  min-width: max-content;
}

.cal-strip-month {
  padding: 9px 24px;
  border-radius: 9999px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight: 800;
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.cal-strip-month:active {
  background: rgba(0, 0, 0, 0.08);
}

.cal-strip-month--active {
  background: rgba(var(--profile-accent-rgb), 0.15);
  border-color: rgba(var(--profile-accent-rgb), 0.4);
  color: var(--profile-accent);
}


/* ── 21.25 Calendar day modal ── */
#cal-day-modal { z-index: 10000; }

.cal-modal {
  max-width: 700px;
  width: 94%;
  padding: 0 0 24px;
  /* Override dark .modal-box bg with light glass */
  background: rgba(245, 243, 240, 0.92);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 16px;
}

.cal-modal-date {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cal-modal-dayname {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 800;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-modal-daynum {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 4vw, 32px);
  color: rgba(0, 0, 0, 0.7);
}

.cal-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.cal-modal-close:active {
  background: rgba(0, 0, 0, 0.08);
}

.cal-modal-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 28px 16px;
  max-height: 300px;
  overflow-y: auto;
}

.cal-modal-empty {
  font-size: clamp(15px, 2.2vw, 18px);
  color: rgba(0, 0, 0, 0.35);
  font-weight: 700;
  padding: 8px 0;
}

.cal-modal-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.03);
}

/* Larger indicators inside modal event rows */
.cal-modal-event .cal-ind {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  flex-shrink: 0;
}

.cal-modal-event-text {
  flex: 1;
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.3;
}

.cal-modal-event--holiday .cal-modal-event-text {
  color: rgba(0, 0, 0, 0.45);
}

.cal-modal-range {
  font-size: 0.8em;
  opacity: 0.6;
  font-weight: 600;
}

.cal-modal-event-edit,
.cal-modal-event-delete {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.4);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cal-modal-event-edit:active {
  background: rgba(var(--profile-accent-rgb), 0.1);
  border-color: var(--profile-accent);
  color: var(--profile-accent);
}

.cal-modal-event-delete:active {
  background: rgba(255,71,87,0.15);
  border-color: rgba(255,71,87,0.5);
  color: rgba(255,71,87,0.8);
}

/* Inline edit input — used in both modal and old panel */
.cal-event-inline-edit {
  flex: 1;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid var(--profile-accent);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 1.9vw, 15px);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  outline: none;
}

.cal-modal-add-row {
  display: flex;
  gap: 8px;
  padding: 0 28px;
  align-items: stretch;
}

.cal-modal-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  outline: none;
  transition: border-color 0.15s ease;
}

.cal-modal-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

.cal-modal-input:focus {
  border-color: var(--profile-accent);
  box-shadow: 0 0 0 2px var(--profile-accent-soft);
}

.cal-modal-add-btn {
  border-radius: var(--radius-sm) !important;
  padding: 14px 22px !important;
  font-size: clamp(20px, 3vw, 26px) !important;
  min-width: 48px;
}

.cal-modal-options {
  display: flex;
  gap: 16px;
  padding: 14px 28px 0;
  flex-wrap: wrap;
}

.cal-modal-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.cal-modal-opt input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--profile-accent);
  cursor: pointer;
}

.cal-modal-opt span {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
}

.cal-modal-duration {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px 0;
  justify-content: center;
}

.cal-modal-dur-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.45);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.cal-modal-dur-btn:active {
  background: rgba(0, 0, 0, 0.08);
  border-color: var(--profile-accent);
}

.cal-modal-dur-val {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--profile-accent);
  min-width: 70px;
  text-align: center;
}


/* ── 21.26 Planner divider between calendar and lists ── */
.planner-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 10px;
}

.planner-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.1) 70%,
    transparent
  );
}

.planner-divider-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 14px);
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.5px;
  white-space: nowrap;
}


/* ── 21.26 (removed — old sticky tabs replaced by glass tabs in .planner-lists-pane) ── */



/* ============================================================
   22. STORIES MODULE
   ============================================================ */

/* ── 22.1 Section wrapper ── */
#lessons-section {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(10,10,80,0.9)  0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(10,40,80,0.8)  0%, transparent 60%),
    linear-gradient(160deg, #0a0a2e 0%, #111128 50%, #0d0d1a 100%);
  flex-direction: column;
  padding-bottom: 110px;
}

#lessons-section.visible { display: flex; }

/* ── 22.2 Header — extends .section-header ── */
.stories-header {
  padding: 20px 24px 0;
  gap: 10px;
}

.stories-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── 22.3 Header title — extends .section-title ── */
.stories-header-title {
  font-size: clamp(24px, 3.5vw, 36px);
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow:
    0 0 20px rgba(168,85,247,0.6),
    2px 2px 0 rgba(0,0,0,0.4);
}

/* ── 22.4 Tab nav ── */
.stories-tab-nav {
  display: flex;
  gap: 6px;
}

.stories-tab-btn {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 8px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 16px);
  color: var(--color-moon-silver);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.stories-tab-btn:active { transform: scale(0.95); }

.stories-tab-btn.active {
  background: rgba(168,85,247,0.15);
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(168,85,247,0.3);
}

/* ── 22.5 Content area — extends .section-body .hide-scrollbar ── */
.stories-content {
  padding: 24px 24px 16px;
}

/* ── 22.6 Section sub-headings ── */
.stories-section-heading {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 2.8vw, 24px);
  color: #ffffff;
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(168,85,247,0.4);
}

.stories-section-heading--sm {
  font-size: clamp(16px, 2.2vw, 20px);
}

/* ── 22.7 Theme grid ── */
.stories-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* ── 22.8 Theme card — extends .glass-card ── */
.stories-theme-card {
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.stories-theme-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  opacity: 0.5;
  border-radius: 2px;
}

.stories-theme-card:active { transform: scale(0.95); }

.stories-theme-card.selected {
  border-color: #a855f7;
  background: rgba(168,85,247,0.18);
  box-shadow: 0 0 18px rgba(168,85,247,0.35);
}

.stories-theme-card.selected::after {
  content: attr(data-order);
  position: absolute;
  top: 6px; right: 8px;
  background: #a855f7;
  color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  line-height: 20px;
  text-align: center;
}

.stories-theme-emoji {
  font-size: clamp(32px, 5vw, 44px);
  display: block;
  margin-bottom: 8px;
}

.stories-theme-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 15px);
  color: #ffffff;
}

/* Theme color accents */
.st-space::before      { background: linear-gradient(90deg, #00cfff, #a855f7); }
.st-dragon::before     { background: linear-gradient(90deg, #ff6b35, #ffd700); }
.st-ocean::before      { background: linear-gradient(90deg, #00cfff, #00ff88); }
.st-jungle::before     { background: linear-gradient(90deg, #00ff88, #ffd700); }
.st-robot::before      { background: linear-gradient(90deg, #00cfff, #a855f7); }
.st-princess::before   { background: linear-gradient(90deg, #ff3dac, #a855f7); }
.st-dino::before       { background: linear-gradient(90deg, #00ff88, #ff6b35); }
.st-pirate::before     { background: linear-gradient(90deg, #ffd700, #ff6b35); }
.st-superhero::before  { background: linear-gradient(90deg, #ff4757, #a855f7); }
.st-magic::before      { background: linear-gradient(90deg, #a855f7, #ff3dac); }
.st-sports::before     { background: linear-gradient(90deg, #00ff88, #00cfff); }
.st-ninja::before      { background: linear-gradient(90deg, #a855f7, #0a0a2e); }
.st-unicorn::before    { background: linear-gradient(90deg, #ff3dac, #ffd700); }
.st-volcano::before    { background: linear-gradient(90deg, #ff4757, #ff6b35); }
.st-underwater::before { background: linear-gradient(90deg, #00cfff, #a855f7); }
.st-arctic::before     { background: linear-gradient(90deg, #00cfff, #e0e0ff); }
.st-safari::before     { background: linear-gradient(90deg, #ffd700, #ff6b35); }
.st-timetravel::before { background: linear-gradient(90deg, #a855f7, #00cfff); }
.st-candy::before      { background: linear-gradient(90deg, #ff3dac, #ffd700); }
.st-haunted::before    { background: linear-gradient(90deg, #a855f7, #ff4757); }
.st-farm::before       { background: linear-gradient(90deg, #00ff88, #ffd700); }
.st-city::before       { background: linear-gradient(90deg, #00cfff, #a855f7); }
.st-custom::before     { background: linear-gradient(90deg, #ffd700, #ff3dac); }

/* ── 22.9 Selection bar ── */
.stories-selection-bar {
  background: rgba(168,85,247,0.10);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── 22.10 Selection label — extends .text-label ── */
/* .stories-selection-label — text-label provides uppercase, moon-silver, letter-spacing */

.stories-selection-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── 22.11 Selection tag — extends .pill ── */
.stories-selection-tag {
  background: rgba(168,85,247,0.20);
  border: 1px solid rgba(168,85,247,0.40);
  color: #ffffff;
}

/* ── 22.12 Selection empty — extends .text-muted ── */
.stories-selection-empty {
  font-size: 13px;
}

/* ── 22.13 Language controls ── */
.stories-lang-label-heading {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(15px, 2vw, 18px);
  color: #ffffff;
  margin-bottom: 10px;
}

.stories-lang-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.stories-lang-btn {
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 99px;
  padding: 8px 18px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-moon-silver);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stories-lang-btn:active { transform: scale(0.95); }

.stories-lang-btn.active {
  background: rgba(168,85,247,0.20);
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(168,85,247,0.3);
}

/* ── 22.14 Language badge — extends .pill .pill-gold ── */
.stories-lang-badge {
  /* pill-gold provides gold color — no overrides needed */
}

/* ── 22.15 Custom theme input ── */
.stories-custom-input-wrap {
  display: none;
  margin-bottom: 16px;
  gap: 10px;
  align-items: center;
}

.stories-custom-input-wrap.visible { display: flex; }

.stories-custom-input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(168,85,247,0.35);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 600;
  color: #ffffff;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.stories-custom-input::placeholder { color: rgba(255,255,255,0.35); }

.stories-custom-input:focus {
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 16px rgba(168,85,247,0.2);
}

/* ── 22.16 Actions row ── */
.stories-actions-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* ── 22.17 Generate button — full width, own row ── */
.stories-generate-btn {
  width: 100%;
  font-size: clamp(18px, 2.6vw, 24px);
  min-height: 60px;
  justify-content: center;
  border-radius: 16px;
  padding: 16px 24px;
}

/* ── 22.18 Random button — secondary, own row ── */
.stories-random-btn {
  font-size: clamp(15px, 2vw, 18px);
  border-radius: 16px;
  padding: 12px 20px;
  white-space: nowrap;
  min-height: 48px;
}

/* ── 22.18b Actions row — stacked layout ── */
.stories-actions-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
}

/* ── 22.19 Story / Lesson display ── */
.stories-story-display {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(168,85,247,0.20);
  border-radius: 24px;
  padding: 28px 28px 20px;
  position: relative;
  overflow: hidden;
  animation: anim-fade-up 0.4s ease;
  margin-bottom: 16px;
}

.stories-story-display.no-animate {
  animation: none;
}

.stories-story-display--lesson {
  border-color: rgba(0,207,255,0.25);
}

.stories-story-display::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.7;
}

.stories-display-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 3vw, 28px);
  color: #ffffff;
  text-shadow: 0 0 12px rgba(168,85,247,0.4);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── 22.20 Story text — extends .text-body ── */
.stories-story-text {
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.8;
  margin-bottom: 20px;
}

.stories-story-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ── 22.21 Continue input ── */
.stories-continue-wrap {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: flex-end;
}

.stories-continue-input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(168,85,247,0.25);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: #ffffff;
  outline: none;
  resize: none;
  min-height: 48px;
  max-height: 100px;
  -webkit-user-select: text;
  user-select: text;
  scrollbar-width: none;
}

.stories-continue-input::placeholder { color: rgba(255,255,255,0.35); }

.stories-continue-input:focus {
  border-color: rgba(168,85,247,0.5);
  box-shadow: 0 0 12px rgba(168,85,247,0.2);
}

/* ── 22.22 Loading states ── */
.stories-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
  text-align: center;
  animation: anim-fade-up 0.3s ease;
}

.stories-continue-loading { padding: 20px; }
.stories-inline-error     { padding: 16px; }

.stories-loading-emoji {
  font-size: 56px;
  animation: stories-spin 2s linear infinite;
}

@keyframes stories-spin {
  0%   { transform: rotate(0deg)   scale(1);   }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1);   }
}

/* ── 22.23 Output box — fills remaining panel space, internal scroll ── */
.stories-output-box {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border: 2px dashed rgba(168, 85, 247, 0.45);
  border-radius: 20px;
  margin: 0 12px;
  background: rgba(255, 255, 255, 0.04);
  scrollbar-width: none;
  box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.06);
}

.stories-output-box::-webkit-scrollbar {
  display: none;
}

.stories-output-box:not(:empty) {
  border: 1px solid rgba(168, 85, 247, 0.50);
  box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.08),
              0 0 20px rgba(168, 85, 247, 0.10);
}

/* View containers — flex columns so output box fills remaining space */
#stories-generate-view,
#stories-lesson-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 16px;
  padding-bottom: 8px;
}

/* ── 22.24 Lesson tab — subject grid ── */
.stories-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* ── 22.25 Subject card — extends .glass-card ── */
.stories-subject-card {
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.stories-subject-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #00cfff, #a855f7);
  opacity: 0.5;
}

.stories-subject-card:active { transform: scale(0.96); }

.stories-subject-card.selected {
  border-color: #00cfff;
  background: rgba(0,207,255,0.15);
  box-shadow: 0 0 18px rgba(0,207,255,0.30);
}

.stories-subject-emoji {
  font-size: clamp(32px, 5vw, 44px);
  display: block;
  margin-bottom: 8px;
}

.stories-subject-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 15px);
  color: #ffffff;
}

/* ── 22.26 Topic chips ── */
.stories-topics-wrap {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  animation: anim-fade-up 0.3s ease;
}

.stories-topics-wrap.visible { display: flex; }

.stories-topics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stories-topic-chip {
  background: rgba(0,207,255,0.10);
  border: 2px solid rgba(0,207,255,0.20);
  border-radius: 99px;
  padding: 10px 18px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stories-topic-chip:active { transform: scale(0.95); }

.stories-topic-chip.selected {
  background: rgba(0,207,255,0.25);
  border-color: #00cfff;
  box-shadow: 0 0 12px rgba(0,207,255,0.30);
}

.stories-custom-topic-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

.stories-custom-topic-input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(0,207,255,0.30);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  color: #ffffff;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.stories-custom-topic-input::placeholder { color: rgba(255,255,255,0.35); }

.stories-custom-topic-input:focus {
  border-color: rgba(0,207,255,0.55);
  box-shadow: 0 0 14px rgba(0,207,255,0.20);
}

/* ── 22.27 Lesson button — extends .btn .btn-blue ── */
.stories-lesson-btn {
  width: 100%;
  font-size: clamp(18px, 2.8vw, 26px);
  justify-content: center;
  border-radius: 18px;
  padding: 18px 24px;
  margin-bottom: 24px;
}

/* ── 22.28 Saved tab — empty state ── */
.stories-saved-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 14px;
}

.stories-saved-empty-emoji {
  font-size: 64px;
  opacity: 0.6;
}

/* ── 22.29 Saved empty title — extends .text-heading ── */
.stories-saved-empty-title {
  font-size: clamp(20px, 3vw, 28px);
}

/* ── 22.30 Saved empty sub — extends .text-muted ── */
.stories-saved-empty-sub {
  max-width: 320px;
  line-height: 1.6;
}

.stories-saved-highlight {
  color: var(--color-success);
}

/* ── 22.31 Saved filter — extends .pill .pill-ghost ── */
.stories-saved-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.stories-saved-filter-btn.active {
  border-color: #a855f7;
  color: #ffffff;
  background: rgba(168,85,247,0.15);
}

.stories-saved-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 22.32 Saved cards ── */
.stories-saved-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(168,85,247,0.20);
  border-radius: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stories-saved-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  opacity: 0.5;
}

.stories-saved-card.type-story::before {
  background: linear-gradient(90deg, #a855f7, #ff3dac);
}

.stories-saved-card.type-lesson::before {
  background: linear-gradient(90deg, #00cfff, #a855f7);
}

.stories-saved-card:active {
  transform: scale(0.98);
  border-color: rgba(168,85,247,0.4);
}

.stories-saved-card-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.2vw, 20px);
  color: #ffffff;
  margin-bottom: 6px;
  padding-right: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 22.33 Saved type badge — extends .pill ── */
.stories-saved-type-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.stories-saved-type-badge.story {
  background: rgba(168,85,247,0.20);
  color: rgba(168,85,247,0.9);
  border: 1px solid rgba(168,85,247,0.30);
}

.stories-saved-type-badge.lesson {
  background: rgba(0,207,255,0.15);
  color: rgba(0,207,255,0.9);
  border: 1px solid rgba(0,207,255,0.25);
}

.stories-saved-card-preview {
  font-size: clamp(13px, 1.8vw, 15px);
  color: var(--color-moon-silver);
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.stories-saved-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stories-saved-card-date {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ── 22.34 Saved delete — extends .btn-icon ── */
.stories-saved-delete {
  width: 30px;
  height: 30px;
  background: rgba(255,71,87,0.15);
  border: 1px solid rgba(255,71,87,0.30);
  color: rgba(255,71,87,0.9);
  flex-shrink: 0;
}

.stories-saved-delete:active {
  background: rgba(255,71,87,0.30);
  transform: scale(0.9);
}

/* ── 22.35 Shared action button — extends .btn ── */
.stories-action-btn {
  font-size: clamp(13px, 1.8vw, 16px);
}

/* ── 22.36 Ghost saved state ── */
.stories-btn-ghost--saved {
  opacity: 0.6;
  cursor: default;
}

/* ============================================================
   23. SPAIN QUEST — SPANISH MODULE
   ============================================================ */

/* ── CSS Variables ───────────────────────────────────────── */

#spain-quest-app {
  --sq-moon-silver: #c8d6e5;
  --sq-radius-sm:   12px;
  --sq-radius-md:   18px;
  --sq-radius-lg:   24px;
  --sq-radius-xl:   32px;
}

/* ── Reset ───────────────────────────────────────────────── */

#spain-quest-app * {
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}

/* ── App wrapper ─────────────────────────────────────────── */

#spain-quest-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  color: #ffffff;
  overflow: hidden;
}

/* ── Quest header ────────────────────────────────────────── */

.sq-quest-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5,5,25,0.45);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 16px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sq-quest-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.8;
}

.sq-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sq-header-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.5vw, 36px);
  color: #ffffff;
  text-shadow:
    0 0 20px var(--profile-accent-glow, rgba(168,85,247,0.6)),
    2px 2px 0 rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
  line-height: 1;
}

.sq-week-theme-title {
  font-size: clamp(14px, 2vw, 18px);
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  padding: 10px 16px 12px;
  letter-spacing: 0.3px;
  text-shadow: 0 0 12px var(--profile-accent-glow, rgba(168,85,247,0.4));
  position: relative;
}

.sq-week-theme-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--chrome-gradient);
  opacity: 0.6;
  border-radius: 2px;
}

/* ── Stat pill — extends .pill.glass-card-mid ────────────── */

.sq-stat-pill {
  backdrop-filter: blur(8px);
  white-space: nowrap;
  font-size: clamp(13px, 2vw, 18px);
}

.sq-stat-pill span:first-child {
  font-size: clamp(16px, 2.5vw, 22px);
}

/* ── Week selector ───────────────────────────────────────── */

.sq-week-selector-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sq-week-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
  flex: 1;
}

.sq-week-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 99px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.10);
  color: var(--sq-moon-silver);
  transition: all 0.2s ease;
  flex-shrink: 0;
  user-select: none;
}

.sq-week-pill:active { transform: scale(0.94); }

.sq-week-pill.active {
  background: var(--profile-accent-soft, rgba(168,85,247,0.15));
  border-color: var(--profile-accent, #a855f7);
  color: #ffffff;
  box-shadow:
    0 0 16px var(--profile-accent-glow, rgba(168,85,247,0.4)),
    0 4px 12px rgba(0,0,0,0.3);
}

.sq-week-pill.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.sq-week-pill.locked:active { transform: none; }

.sq-week-arrow {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sq-moon-silver);
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sq-week-arrow:active {
  background: rgba(255,255,255,0.13);
  transform: scale(0.9);
}

/* ── Tab nav ─────────────────────────────────────────────── */

.sq-tab-nav {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.sq-tab-nav::-webkit-scrollbar { display: none; }

.sq-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: var(--sq-radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.10);
  color: var(--sq-moon-silver);
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.9vw, 17px);
  cursor: pointer;
  white-space: nowrap;
  flex: 1;
  transition: all 0.2s ease;
  user-select: none;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.sq-tab-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom, rgba(255,255,255,0.06), transparent
  );
  border-radius: var(--sq-radius-sm) var(--sq-radius-sm) 60% 60%;
  pointer-events: none;
}

.sq-tab-btn .tab-icon {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.sq-tab-btn span:last-child {
  position: relative;
  z-index: 1;
}

.sq-tab-btn:active {
  transform: scale(0.88) translateY(2px);
}

.sq-tab-btn.active {
  background: var(--profile-accent-soft, rgba(168,85,247,0.15));
  border-color: var(--profile-accent, #a855f7);
  color: #ffffff;
  box-shadow: 0 0 12px var(--profile-accent-glow, rgba(168,85,247,0.3));
}

/* ── Scrollable content area ─────────────────────────────── */

.sq-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 24px 120px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sq-content::-webkit-scrollbar { display: none; }

.sq-tab-content {
  animation: fade-up 0.25s ease;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

/* ── Card — extends .glass-card.chrome-card ──────────────── */

.sq-card {
  padding: 32px;
  margin-bottom: 24px;
}

/* ── Card header — extends .text-heading ─────────────────── */

.sq-card-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Feedback ────────────────────────────────────────────── */

.sq-feedback {
  min-height: 28px;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--sq-radius-sm);
  transition: all 0.3s ease;
  color: var(--sq-moon-silver);
}

/* ── Mic button ──────────────────────────────────────────── */

.sq-mic-btn {
  background: linear-gradient(145deg,
    rgba(255,71,87,0.80), rgba(200,30,50,0.75));
  border: 1px solid rgba(255,71,87,0.35);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 0 rgba(140,10,30,0.6),
    0 6px 16px rgba(255,71,87,0.3);
  flex-shrink: 0;
}

.sq-mic-btn:active {
  transform: scale(0.90) translateY(3px);
  box-shadow:
    0 1px 0 rgba(140,10,30,0.6),
    0 2px 8px rgba(255,71,87,0.2);
}

/* ── Done state for craft complete btn ───────────────────── */

.btn-success.done {
  background: linear-gradient(145deg,
    rgba(0,255,136,0.80), rgba(0,180,90,0.75));
  box-shadow:
    0 2px 0 rgba(0,120,60,0.7),
    0 4px 16px rgba(0,255,136,0.3);
  opacity: 0.85;
}

/* ── Home view ───────────────────────────────────────────── */

.sq-home-welcome {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(26px, 4vw, 40px);
  color: #ffffff;
  text-shadow: 0 0 16px var(--profile-accent-glow, rgba(168,85,247,0.5));
  text-align: center;
  padding: 24px 16px 16px;
}

/* Hero — extends .glass-card-mid.chrome-card */
.sq-home-hero {
  padding: 48px 36px;
  margin-bottom: 28px;
  text-align: center;
}

.sq-home-hero-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(28px, 4vw, 42px);
  color: #ffffff;
  text-shadow: 0 0 16px var(--profile-accent-glow, rgba(168,85,247,0.5));
  margin-bottom: 20px;
}

/* Hero line — extends .text-muted */
.sq-home-hero-line {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.5;
  margin-bottom: 8px;
}

.sq-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

/* Badge — extends .pill.pill-chrome */
.sq-badge {
  font-size: clamp(12px, 1.8vw, 15px);
}

/* ── Home grid ───────────────────────────────────────────── */

.sq-home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.sq-home-tile {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-lg);
  padding: 36px 20px 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sq-home-tile:active {
  transform: translateY(3px) scale(0.97);
  border-color: var(--profile-accent, #a855f7);
  box-shadow: 0 0 16px var(--profile-accent-glow, rgba(168,85,247,0.4));
}

.sq-home-tile .tile-icon {
  font-size: clamp(48px, 7vw, 72px);
  display: block;
  margin-bottom: 14px;
  filter: drop-shadow(
    0 0 8px var(--profile-accent-glow, rgba(168,85,247,0.4))
  );
}

.sq-home-tile .tile-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 2.5vw, 24px);
  color: #ffffff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

/* ── Word of the day — extends .glass-card-mid.chrome-card ─ */

.sq-wod-card {
  padding: 48px 36px;
  text-align: center;
}

.sq-wod-emoji {
  font-size: clamp(60px, 10vw, 90px);
  margin-bottom: 16px;
  display: block;
}

.sq-wod-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(42px, 7vw, 68px);
  color: #ffffff;
  text-shadow: 0 0 20px var(--profile-accent-glow, rgba(168,85,247,0.5));
  margin-bottom: 8px;
}

.sq-wod-eng {
  font-size: clamp(20px, 3vw, 28px);
  color: var(--sq-moon-silver);
  font-weight: 700;
  margin-bottom: 8px;
}

.sq-wod-phonet {
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--profile-accent, rgba(168,85,247,0.9));
  font-style: italic;
  margin-bottom: 24px;
}

.sq-wod-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ── Vocab view ──────────────────────────────────────────── */

.sq-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

/* Word chip — extends .glass-card.chrome-card */
.sq-word-chip {
  padding: 10px 10px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.sq-word-chip:active {
  transform: scale(0.96);
  border-color: var(--profile-accent, #a855f7);
  box-shadow: 0 0 14px var(--profile-accent-glow, rgba(168,85,247,0.4));
}

.sq-word-chip .wc-emoji { font-size: 28px; margin-bottom: 4px; }

/* Word chip image tiles — replace emoji for nouns/adjectives */
.wc-img-wrap {
  position: relative;
  width: 162px;
  height: 162px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.wc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.wc-img--loaded { opacity: 1; }

.wc-img-fallback {
  position: relative;
  z-index: 1;
  font-size: 52px;
  line-height: 162px;
  text-align: center;
  width: 100%;
  display: block;
  transition: opacity 0.3s ease;
}

.sq-word-chip .wc-art {
  font-size: 11px;
  color: rgba(255,71,87,0.9);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sq-word-chip .wc-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(15px, 2.2vw, 19px);
  color: #ffffff;
}

.sq-word-chip .wc-phon {
  font-size: 11px;
  color: var(--profile-accent, rgba(168,85,247,0.9));
  font-style: italic;
}

.sq-word-chip .wc-eng {
  font-size: 12px;
  color: var(--sq-moon-silver);
  font-weight: 700;
}

.sq-word-chip .wc-btns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Compact btn size inside vocab / verb / phrase contexts */
.sq-word-chip .btn,
.sq-verb-card  .btn,
.sq-phrase-card .btn {
  padding: 7px 14px;
  font-size: 13px;
}

.sq-verb-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-lg);
  padding: 18px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.sq-verb-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.6;
}

.sq-verb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.sq-verb-header-emoji { font-size: 32px; }

.sq-verb-header-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.sq-verb-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 2.8vw, 24px);
  color: #ffffff;
  text-shadow: 0 0 12px var(--profile-accent-glow, rgba(168,85,247,0.5));
}

/* Verb eng — extends .text-muted */
.sq-verb-eng {
  font-size: clamp(12px, 1.8vw, 15px);
  margin-bottom: 12px;
}

/* Conj row — extends .glass-card-mid */
.sq-conj-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  border-radius: var(--sq-radius-sm);
  padding: 10px 14px;
}

.sq-conj-pron {
  font-weight: 800;
  color: var(--sq-moon-silver);
  min-width: 52px;
  font-size: clamp(13px, 1.8vw, 15px);
}

.sq-conj-form {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.4vw, 20px);
  color: #ffffff;
  flex: 1;
}

.sq-conj-eng {
  font-size: clamp(11px, 1.6vw, 13px);
  color: var(--profile-accent, rgba(168,85,247,0.8));
}

.sq-conj-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.sq-conj-row .btn { padding: 5px 10px; font-size: 12px; }

.sq-phrase-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-lg);
  padding: 18px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.sq-phrase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.5;
}

.sq-phrase-emoji { font-size: 28px; margin-bottom: 8px; }

.sq-phrase-sp {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(15px, 2.2vw, 20px);
  color: #ffffff;
  margin-bottom: 5px;
}

.sq-phrase-en {
  font-size: clamp(12px, 1.8vw, 15px);
  color: var(--sq-moon-silver);
  font-weight: 700;
  margin-bottom: 4px;
}

.sq-phrase-phon {
  font-size: clamp(11px, 1.5vw, 13px);
  color: var(--profile-accent, rgba(168,85,247,0.8));
  font-style: italic;
}

.sq-phrase-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── 7-Day plan view ─────────────────────────────────────── */

.sq-day-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sq-day-card {
  border-radius: var(--sq-radius-lg);
  padding: 28px 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.sq-day-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.6;
  border-radius: 2px;
}

.sq-day-card.complete::before {
  background: linear-gradient(90deg, #00ff88, #00cfff);
}
.sq-day-card.available::before {
  background: var(--chrome-gradient);
}
.sq-day-card.locked::before {
  background: rgba(255,255,255,0.1);
}

.sq-day-card.complete  { border-color: rgba(0,255,136,0.35); }
.sq-day-card.available { border-color: var(--profile-accent, rgba(168,85,247,0.35)); }
.sq-day-card.locked    { opacity: 0.55; cursor: default; }

.sq-day-card:active:not(.locked) {
  transform: translateY(3px) scale(0.98);
}

.sq-day-emoji {
  font-size: 48px;
  flex-shrink: 0;
  filter: drop-shadow(
    0 0 8px var(--profile-accent-glow, rgba(168,85,247,0.4))
  );
}

.sq-day-body   { flex: 1; min-width: 0; }
.sq-day-action { flex-shrink: 0; }

/* Day num — extends .text-label */
.sq-day-num { margin-bottom: 10px; }

.sq-day-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 2.5vw, 24px);
  color: #ffffff;
  margin-bottom: 8px;
}

/* Day focus — extends .text-muted */
.sq-day-focus { margin-bottom: 12px; }

.sq-day-status-complete {
  color: #00ff88;
  font-weight: 800;
  font-size: 15px;
}

.sq-day-status-available {
  color: var(--profile-accent, rgba(168,85,247,0.9));
  font-weight: 700;
  font-size: 14px;
}

/* ── Games view — extends .glass-card ───────────────────── */

.sq-game-card {
  padding: 36px 32px;
  margin-bottom: 24px;
}

.sq-game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.5;
}

/* Game header — extends .text-heading */
.sq-game-header { margin-bottom: 10px; }

/* Game desc — extends .text-muted */
.sq-game-desc {
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 20px;
}

/* ── I Spy game ──────────────────────────────────────────── */

/* I Spy prompt — extends .glass-card-mid */
.sq-ispy-prompt {
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
}

/* I Spy prompt label — extends .text-muted */
.sq-ispy-prompt-label {
  font-size: clamp(13px, 1.8vw, 15px);
  margin-bottom: 4px;
}

.sq-ispy-prompt-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.5vw, 32px);
  color: #ffffff;
  text-shadow: 0 0 16px rgba(0,207,255,0.5);
}

.sq-ispy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.sq-ispy-item {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-md);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 28px;
}

.sq-ispy-item:active { transform: scale(0.92); }

.sq-ispy-item.found {
  background: rgba(0,255,136,0.15);
  border-color: #00ff88;
  box-shadow: 0 0 12px rgba(0,255,136,0.4);
}

.sq-ispy-item.wrong {
  background: rgba(255,71,87,0.15);
  border-color: #ff4757;
  animation: shake 0.3s ease;
}

.sq-ispy-item .ispy-word {
  font-size: 12px;
  font-weight: 800;
  color: var(--sq-moon-silver);
  margin-top: 6px;
}

/* ── Matching game ───────────────────────────────────────── */

.sq-match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.sq-match-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sq-match-item {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-md);
  padding: 12px 14px;
  cursor: pointer;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 17px);
  color: #ffffff;
  text-align: center;
  transition: all 0.2s ease;
}

.sq-match-item:active { transform: scale(0.96); }

.sq-match-item.selected {
  border-color: #00cfff;
  background: rgba(0,207,255,0.15);
  box-shadow: 0 0 12px rgba(0,207,255,0.4);
}

.sq-match-item.matched {
  border-color: #00ff88;
  background: rgba(0,255,136,0.15);
  color: #00ff88;
  cursor: default;
}

.sq-match-item.wrong {
  border-color: #ff4757;
  background: rgba(255,71,87,0.15);
  animation: shake 0.3s ease;
}

/* ── Race game ───────────────────────────────────────────── */

.sq-race-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(36px, 6vw, 56px);
  color: #ffffff;
  text-shadow: 0 0 24px var(--profile-accent-glow, rgba(168,85,247,0.6));
  text-align: center;
  margin: 16px 0;
}

.sq-race-result { text-align: center; padding: 24px; }
.sq-vp-result   { text-align: center; padding: 24px; }

.sq-race-trophy { font-size: 48px; }
.sq-vp-icon     { font-size: 48px; }

/* Race / VP title — extends .text-heading */
.sq-race-title { margin: 8px 0; }
.sq-vp-title   { margin: 8px 0; }

/* Race avg / instruction — extends .text-muted */
.sq-race-avg         { margin: 8px 0; }
.sq-race-instruction { margin-bottom: 18px; }

.sq-race-pts {
  font-family: 'Fredoka One', cursive;
  font-size: 16px;
  color: #00ff88;
  margin-bottom: 16px;
}

/* Race / VP word label — extends .text-label */
.sq-race-word-label { margin-bottom: 8px; }
.sq-vp-word-label   { margin-bottom: 8px; }

.sq-vp-score {
  font-size: 15px;
  color: #00ff88;
  font-weight: 800;
  margin-bottom: 16px;
}

/* VP english — extends .text-muted */
.sq-vp-english {
  font-size: clamp(14px, 2vw, 17px);
  margin-bottom: 6px;
}

.sq-vp-mystery {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(30px, 5vw, 44px);
  color: #ffffff;
  text-shadow: 0 0 20px var(--profile-accent-glow, rgba(168,85,247,0.5));
  margin: 8px 0 6px;
}

.sq-vp-instruction {
  font-size: 13px;
  color: var(--profile-accent, rgba(168,85,247,0.8));
  font-style: italic;
  margin-bottom: 18px;
}

.sq-vp-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ── Quiz view ───────────────────────────────────────────── */

.sq-quiz-intro-icon {
  font-size: 56px;
  margin-bottom: 14px;
}

/* Quiz intro title — extends .text-heading */
.sq-quiz-intro-title { margin-bottom: 8px; }

/* Quiz intro sub — extends .text-muted */
.sq-quiz-intro-sub {
  font-size: clamp(13px, 1.8vw, 16px);
  margin-bottom: 24px;
}

.sq-quiz-intro-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}

.sq-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* .sq-quiz-counter — extends .text-label — text-label handles typography */

.sq-quiz-score {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 18px);
  color: #ffffff;
}

.sq-quiz-prompt {
  text-align: center;
  padding: 16px 10px 8px;
}

/* Quiz prompt label — extends .text-muted */
.sq-quiz-prompt-label {
  font-size: clamp(13px, 1.8vw, 15px);
  margin-bottom: 10px;
}

.sq-quiz-question {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(36px, 5vw, 56px);
  color: #ffffff;
  text-shadow: 0 0 20px var(--profile-accent-glow, rgba(168,85,247,0.5));
  text-align: center;
  margin: 24px 0 32px;
}

.sq-quiz-options { margin-top: 16px; }

.sq-quiz-option {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-md);
  padding: 24px 28px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 2.8vw, 28px);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  margin-bottom: 16px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sq-quiz-option:hover:not(:disabled) {
  border-color: var(--profile-accent, rgba(168,85,247,0.5));
  background: rgba(168,85,247,0.12);
  transform: translateX(5px);
}

.sq-quiz-option.correct {
  background: rgba(0,255,136,0.15);
  border-color: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 16px rgba(0,255,136,0.4);
}

.sq-quiz-option.wrong {
  background: rgba(255,71,87,0.15);
  border-color: #ff4757;
  color: #ff4757;
}

.sq-quiz-letter {
  background: rgba(255,255,255,0.13);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Quiz results ────────────────────────────────────────── */

.sq-quiz-results-medal { font-size: 72px; margin-bottom: 12px; }

/* Quiz results msg — extends .text-heading */
.sq-quiz-results-msg { margin-bottom: 8px; }

.sq-quiz-results-score {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(40px, 7vw, 60px);
  color: #ffffff;
  text-shadow: 0 0 24px var(--profile-accent-glow, rgba(168,85,247,0.5));
  margin: 12px 0;
}

/* Quiz results pct — extends .text-muted */
.sq-quiz-results-pct {
  font-size: clamp(14px, 2vw, 17px);
  margin-bottom: 16px;
}

.sq-quiz-results-pts {
  background: linear-gradient(135deg,
    rgba(0,207,255,0.15), rgba(168,85,247,0.15));
  border: 1px solid var(--profile-accent, rgba(168,85,247,0.3));
  border-radius: var(--sq-radius-lg);
  padding: 16px;
  margin-bottom: 20px;
}

/* Quiz results pts label — extends .text-heading */
.sq-quiz-results-pts-label {
  text-shadow: 0 0 16px var(--profile-accent-glow, rgba(168,85,247,0.4));
}

.sq-quiz-results-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.sq-quiz-review {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.sq-quiz-review:last-child { border-bottom: none; }

.sq-quiz-review-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sq-quiz-review-icon { font-size: 20px; flex-shrink: 0; }

.sq-quiz-review-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(15px, 2vw, 18px);
  color: #ffffff;
  margin-bottom: 3px;
}

/* Quiz review ans — extends .text-muted */
.sq-quiz-review-ans { font-size: 13px; }

.sq-quiz-review-wrong { color: #ff4757; }

/* ── Flashcard view ──────────────────────────────────────── */

.sq-flashcard-wrap {
  perspective: 900px;
  width: 600px;
  max-width: 100%;
  margin: 0 auto 32px;
}

.sq-flashcard {
  width: 100%;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  cursor: pointer;
  border-radius: var(--sq-radius-xl);
}

.sq-flashcard.flipped { transform: rotateY(180deg); }

.sq-flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--sq-radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  overflow: hidden;
}

.sq-flashcard-face::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
}

.sq-fc-front {
  background: linear-gradient(145deg,
    rgba(168,85,247,0.30), rgba(80,20,160,0.25));
  border: 1px solid rgba(168,85,247,0.35);
}
.sq-fc-front::before {
  background: var(--chrome-gradient);
}

.sq-fc-back {
  background: linear-gradient(145deg,
    rgba(0,207,255,0.25), rgba(0,80,140,0.20));
  border: 1px solid rgba(0,207,255,0.35);
  transform: rotateY(180deg);
}
.sq-fc-back::before {
  background: var(--chrome-gradient);
}

/* FC cat — extends .text-label */
.sq-fc-cat { margin-bottom: 16px; }

.sq-fc-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(42px, 6vw, 64px);
  color: #ffffff;
  text-shadow: 0 0 20px var(--profile-accent-glow, rgba(168,85,247,0.5));
}

.sq-fc-hint {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
}

.sq-fc-eng {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(30px, 4.5vw, 46px);
  color: #ffffff;
  text-align: center;
}

.sq-fc-counter { text-align: center; margin-bottom: 14px; }

/* FC counter label — extends .text-muted */
.sq-fc-counter-label { font-size: clamp(13px, 1.8vw, 15px); }

.sq-fc-controls {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.sq-fc-filter-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ── Crafts view — extends .glass-card ──────────────────── */

.sq-craft-card {
  padding: 20px;
  margin-bottom: 16px;
}

.sq-craft-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.sq-craft-header-emoji { font-size: 36px; }

.sq-craft-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.4vw, 21px);
  color: #ffffff;
  margin-bottom: 6px;
}

.sq-craft-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Craft badge — extends .pill.pill-accent */
.sq-craft-badge { font-size: 12px; }

.sq-craft-section-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 16px);
  color: #ffffff;
  margin-bottom: 8px;
}

.sq-craft-steps { counter-reset: steps; }

.sq-craft-step {
  counter-increment: steps;
  margin-bottom: 8px;
  padding: 10px 14px 10px 42px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--sq-radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: clamp(13px, 1.8vw, 15px);
  color: rgba(255,255,255,0.90);
  position: relative;
}

.sq-craft-step::before {
  content: counter(steps);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--chrome-gradient);
  color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
}

.sq-craft-materials {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sq-craft-materials li {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--sq-moon-silver);
  font-weight: 700;
}

.sq-craft-footer { text-align: center; margin-top: 16px; }

/* ── Videos view — extends .glass-card ──────────────────── */

.sq-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.sq-video-card {
  border-radius: var(--sq-radius-lg);
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}

.sq-video-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.6;
  z-index: 1;
}

.sq-video-card iframe {
  width: 100%;
  height: 200px;
  border: none;
  display: block;
}

.sq-video-info { padding: 14px 16px; }

.sq-video-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 17px);
  color: #ffffff;
  margin-bottom: 4px;
}

/* Video desc — extends .text-muted */
.sq-video-desc { margin-bottom: 12px; }

.sq-video-more-resources {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Day detail modal ────────────────────────────────────── */

/* Overlay — extends .modal-overlay */
.sq-day-modal-overlay { z-index: 2000; }

/* Modal box — extends .modal-box.hide-scrollbar */
.sq-day-modal {
  padding: 40px 36px;
  max-width: 820px;
  width: 96%;
  max-height: 90vh;
  overflow-y: auto;
}

.sq-day-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--chrome-gradient);
  border-radius: var(--sq-radius-xl) var(--sq-radius-xl) 0 0;
  opacity: 0.8;
}

.sq-modal-day-emoji {
  text-align: center;
  font-size: 72px;
  margin-bottom: 14px;
}

.sq-modal-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(26px, 4vw, 36px);
  color: #ffffff;
  text-shadow: 0 0 16px var(--profile-accent-glow,
    rgba(168,85,247,0.5));
  text-align: center;
  margin-bottom: 6px;
  padding-right: 40px;
}

.sq-modal-subtitle {
  text-align: center;
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--profile-accent, rgba(168,85,247,0.9));
  font-weight: 700;
  margin-bottom: 28px;
}

.sq-modal-section-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(19px, 2.8vw, 24px);
  color: #ffffff;
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sq-tip {
  background: rgba(0,255,136,0.08);
  border-left: 4px solid #00ff88;
  border-radius: 0 var(--sq-radius-sm) var(--sq-radius-sm) 0;
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: clamp(16px, 2.3vw, 20px);
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  line-height: 1.5;
}

/* Modal activity — extends .glass-card-mid */
.sq-modal-activity {
  padding: 18px 20px;
  font-size: clamp(16px, 2.3vw, 20px);
  color: rgba(255,255,255,0.88);
  line-height: 1.65;
  font-weight: 600;
}

.sq-modal-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.sq-modal-complete {
  text-align: center;
  margin-top: 28px;
}

.sq-modal-complete-text {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(24px, 3.4vw, 30px);
  color: #00ff88;
  text-shadow: 0 0 16px rgba(0,255,136,0.4);
}

/* Word pill — extends .pill */

.sq-word-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--profile-accent,
    rgba(168,85,247,0.30));
  padding: 12px 20px;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 700;
  border-radius: 999px;
  margin: 0;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
  color: rgba(255, 255, 255, 0.90);    /* ← ADD THIS */
}

.sq-word-pill:active {
  transform: scale(0.94);
  border-color: var(--profile-accent, rgba(168,85,247,0.6));
  box-shadow: 0 0 10px var(--profile-accent-glow,
    rgba(168,85,247,0.3));
}

/* ── Word pill — heard state ─────────────────────────────── */

.sq-word-pill.heard {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.40);
  color: rgba(0, 255, 136, 0.90);
}

/* ── Story panels — teaser + resolution ─────────────────── */

.sq-modal-story-teaser,
.sq-modal-story-resolution {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--sq-radius-md, 12px);
  margin-bottom: 24px;
  line-height: 1.65;
}

.sq-modal-story-teaser {
  background: rgba(0, 207, 255, 0.08);
  border: 1px solid rgba(0, 207, 255, 0.22);
}

.sq-modal-story-resolution {
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.22);
  margin-top: 20px;
}

.sq-modal-story-companion {
  font-size: 44px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.sq-modal-story-text {
  font-size: clamp(16px, 2.3vw, 20px);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  font-style: italic;
  line-height: 1.65;
}

/* ── Hook progress checklist ────────────────────────────── */

.sq-modal-hook-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.sq-hook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--sq-radius-sm, 8px);
  font-size: clamp(16px, 2.3vw, 20px);
  color: rgba(255, 255, 255, 0.70);
  font-weight: 600;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.sq-hook-row.met {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.25);
  color: rgba(255, 255, 255, 0.92);
}

.sq-hook-count {
  font-size: clamp(13px, 1.9vw, 16px);
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
  white-space: nowrap;
  margin-left: 12px;
  flex-shrink: 0;
}

.sq-hook-row.met .sq-hook-count {
  color: rgba(0, 255, 136, 0.70);
}

/* ── Hook missing — shown when completion blocked ────────── */

.sq-modal-hook-missing {
  background: rgba(255, 71, 87, 0.06);
  border: 1px solid rgba(255, 71, 87, 0.20);
  border-radius: var(--sq-radius-md, 12px);
  padding: 18px 20px;
  margin-top: 12px;
}

.sq-modal-missing-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.3vw, 20px);
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: 12px;
}

.sq-modal-missing-item {
  font-size: clamp(15px, 2.2vw, 18px);
  color: rgba(255, 200, 200, 0.85);
  font-weight: 600;
  padding: 6px 0;
  line-height: 1.5;
}

/* ── Quiz + self-report buttons in modal ────────────────── */

.sq-modal-quiz-btn,
.sq-modal-self-report-btn,
.sq-modal-voice-btn,
.sq-modal-game-btn {
  width: 100%;
  margin-bottom: 14px;
  font-size: clamp(17px, 2.5vw, 22px);
  padding: 18px 24px;
  justify-content: center;
}

/* ── Day card — ready to complete state ─────────────────── */

.sq-day-status-ready {
  font-size: clamp(11px, 1.6vw, 13px);
  color: #00ff88;
  font-weight: 700;
  text-align: right;
  line-height: 1.4;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* ── Resources ───────────────────────────────────────────── */

.sq-resources-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ── Locked week ─────────────────────────────────────────── */

.sq-locked-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 16px;
}

.sq-locked-moon {
  font-size: 80px;
  filter: drop-shadow(
    0 0 20px var(--profile-accent-glow, rgba(168,85,247,0.3))
  );
}

/* Locked title — extends .text-heading */
/* Locked sub — extends .text-muted */
.sq-locked-sub {
  max-width: 360px;
  line-height: 1.6;
  font-size: clamp(13px, 2vw, 17px);
}

/* Locked progress — extends .glass-card-mid */
.sq-locked-progress {
  padding: 16px 24px;
  margin-top: 8px;
}

/* Locked progress label — extends .text-muted */
.sq-locked-progress-label { margin-bottom: 8px; }

/* ── Animation — sq-bounce kept, others use 2b keyframes ── */

@keyframes sq-bounce {
  0%, 100% { transform: translateY(0)     scale(1);    }
  50%       { transform: translateY(-6px) scale(1.06); }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
  .sq-word-grid  { grid-template-columns: repeat(2, 1fr); }
  .sq-home-grid  { grid-template-columns: repeat(2, 1fr); }
  .sq-match-grid { grid-template-columns: 1fr 1fr; }
  .sq-video-grid { grid-template-columns: 1fr; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .sq-home-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 901px) {
  .sq-home-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Young mode home grid — 2 columns, larger tiles ─────── */

.sq-home-grid--young {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sq-home-grid--young .sq-home-tile {
  min-height: 220px;
  padding: 40px 20px 34px;
}

.sq-home-grid--young .tile-icon {
  font-size: clamp(56px, 9vw, 80px);
}

.sq-home-grid--young .tile-name {
  font-size: clamp(22px, 3vw, 28px);
}

/* Young mode welcome — larger, simpler */
.sq-home-welcome--young {
  font-size: clamp(36px, 6vw, 56px);
  padding: 32px 16px 20px;
}

/* ── Young vocab grid — same as middle ─────────────────── */

.sq-word-grid--young {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

/* ── Middle mode conjugation collapse ───────────────────── */

.sq-conj-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--sq-radius-sm);
  color: var(--profile-accent, rgba(168,85,247,0.9));
  font-family: 'Nunito', sans-serif;
  font-size: clamp(12px, 1.8vw, 14px);
  font-weight: 800;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 0;
  transition: all 0.2s ease;
  display: block;
  width: 100%;
  text-align: left;
}

.sq-conj-toggle:active {
  background: rgba(255,255,255,0.05);
}

.sq-conj-toggle--open {
  margin-bottom: 4px;
}

/* Collapsed by default — open class added by toggle onclick */
.sq-conj-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sq-conj-body--open {
  max-height: 600px;
}

/* ── Young mode verb cards ───────────────────────────────── */

.sq-young-verb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.sq-young-verb-card {
  padding: 24px 16px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-radius: var(--sq-radius-lg);
}

.sq-young-verb-emoji {
  font-size: clamp(44px, 7vw, 60px);
  margin-bottom: 4px;
}

.sq-young-verb-form {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(24px, 3.5vw, 32px);
  color: #ffffff;
  text-shadow: 0 0 12px var(--profile-accent-glow,
    rgba(168,85,247,0.5));
}

.sq-young-verb-eng {
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--sq-moon-silver);
  font-weight: 700;
  margin-bottom: 8px;
}

.sq-young-verb-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.sq-young-verb-btns .btn {
  width: 100%;
  padding: 12px 16px;
  font-size: clamp(14px, 2vw, 17px);
  justify-content: center;
}

/* ── Young mode phrase cards ─────────────────────────────── */

.sq-young-phrase-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sq-young-phrase-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.sq-young-phrase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.5;
}

.sq-young-phrase-emoji {
  font-size: clamp(32px, 5vw, 44px);
  flex-shrink: 0;
}

.sq-young-phrase-body {
  flex: 1;
  min-width: 0;
}

.sq-young-phrase-sp {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.4vw, 22px);
  color: #ffffff;
  margin-bottom: 4px;
}

.sq-young-phrase-en {
  font-size: clamp(12px, 1.8vw, 15px);
  color: var(--sq-moon-silver);
  font-weight: 700;
}

.sq-young-phrase-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.sq-young-phrase-btns .btn {
  padding: 10px 16px;
  font-size: clamp(16px, 2.2vw, 20px);
}

.sq-young-phrase-feedback {
  position: absolute;
  bottom: 4px;
  left: 76px;
  right: 90px;
  font-size: 11px;
  padding: 2px 6px;
}

/* ── Young mode flashcard sizing ────────────────────────── */

.sq-fc-word--young {
  font-size: clamp(32px, 5vw, 48px);
  text-align: center;
  line-height: 1.2;
}

.sq-fc-eng--young {
  font-size: clamp(36px, 5.5vw, 54px);
  text-align: center;
}

.sq-fc-hint--young {
  font-size: clamp(14px, 2vw, 17px);
  margin-top: 20px;
}

.sq-fc-controls--young {
  justify-content: center;
  gap: 20px;
}

/* sq-fc-hear-btn--young — shape from .mc-audio-btn */

/* ── Young quiz intro ────────────────────────────────────── */

.sq-quiz-young-icon {
  font-size: clamp(64px, 10vw, 88px);
  margin-bottom: 16px;
}

.sq-quiz-young-btn-wrap {
  margin-top: 28px;
}

.sq-quiz-young-start-btn {
  font-size: clamp(20px, 3vw, 26px);
  padding: 20px 48px;
}

/* ── Young mode game cards ───────────────────────────────── */

.sq-game-card--young {
  padding: 40px 32px 36px;
}

.sq-game-desc--young {
  font-size: clamp(18px, 2.5vw, 22px);
  margin-bottom: 24px;
}

/* ── Word Spotter ────────────────────────────────────────── */

.sq-wordspotter-clue {
  text-align: center;
  padding: 20px 16px 16px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--sq-radius-lg);
}

.sq-wordspotter-clue-label {
  font-size: clamp(14px, 2vw, 17px);
  color: var(--sq-moon-silver);
  font-weight: 700;
  margin-bottom: 8px;
}

.sq-wordspotter-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(40px, 6vw, 60px);
  color: #ffffff;
  text-shadow: 0 0 20px var(--profile-accent-glow,
    rgba(168,85,247,0.5));
}

.sq-wordspotter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 12px;
}

.sq-wordspotter-item {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: var(--sq-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(56px, 9vw, 80px);
  cursor: pointer;
  min-height: 140px;
  transition: all 0.2s ease;
  user-select: none;
}

.sq-wordspotter-item:active {
  transform: scale(0.92);
  border-color: var(--profile-accent, #a855f7);
  box-shadow: 0 0 20px var(--profile-accent-glow,
    rgba(168,85,247,0.4));
}

/* ── Star Catcher ────────────────────────────────────────── */

.sq-starcatcher-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.sq-starcatcher-prompt-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 2.5vw, 22px);
  color: #ffffff;
}

.sq-starcatcher-rehear {
  flex-shrink: 0;
}

.sq-starcatcher-field {
  position: relative;
  height: 320px;
  overflow: hidden;
  border-radius: var(--sq-radius-lg);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
}

.sq-starcatcher-star {
  position: absolute;
  top: -90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  animation: star-fall linear infinite;
  user-select: none;
  transition: transform 0.15s ease;
}

.sq-starcatcher-star:active {
  transform: scale(1.2);
}

.sq-starcatcher-star-emoji {
  font-size: clamp(52px, 8vw, 72px);
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.6));
  display: block;
}

@keyframes star-fall {
  0%   { transform: translateY(0);     opacity: 1; }
  88%  { transform: translateY(380px); opacity: 1; }
  100% { transform: translateY(420px); opacity: 0; }
}

/* ── Send It! (legacy block removed — see consolidated section below) ── */

/* ── Young feedback states ───────────────────────────────── */
/* Used by youngFeedback() utility for all young games */

.sq-young-found {
  background: rgba(0,255,136,0.15) !important;
  border-color: #00ff88 !important;
  box-shadow: 0 0 20px rgba(0,255,136,0.4) !important;
}

.sq-young-wrong {
  background: rgba(255,71,87,0.15) !important;
  border-color: #ff4757 !important;
  animation: shake 0.3s ease !important;
}

/* ── Young Voice Practice ────────────────────────────────── */

.sq-vp-young-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  gap: 8px;
}

.sq-vp-young-emoji {
  font-size: clamp(80px, 13vw, 110px);
  line-height: 1;
  filter: drop-shadow(
    0 0 16px var(--profile-accent-glow, rgba(168,85,247,0.4))
  );
}

.sq-vp-young-english {
  font-size: clamp(18px, 2.5vw, 22px);
  color: var(--sq-moon-silver);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ── Star Catcher controls ───────────────────────────────── */

.sq-starcatcher-controls {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.sq-starcatcher-stop-btn {
  padding: 8px 18px;
  font-size: clamp(13px, 1.8vw, 15px);
}

/* ── Echo game ───────────────────────────────────────────── */

.sq-echo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 8px;
  gap: 12px;
}

.sq-echo-counter {
  width: 100%;
  text-align: center;
}

.sq-echo-progress {
  margin-top: 8px;
  width: 100%;
}

.sq-echo-stop-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.sq-echo-stop-btn {
  padding: 8px 18px;
  font-size: clamp(13px, 1.8vw, 15px);
}

.sq-echo-emoji {
  font-size: clamp(90px, 14vw, 120px);
  line-height: 1;
  filter: drop-shadow(
    0 0 20px var(--profile-accent-glow,
    rgba(168,85,247,0.4))
  );
  margin: 8px 0;
}

.sq-echo-controls {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.sq-echo-hear-btn {
  padding: 14px 28px;
  font-size: clamp(16px, 2.2vw, 20px);
}

.sq-echo-mic-btn {
  width: 72px;
  height: 72px;
  font-size: 32px;
}

.sq-echo-skip-btn {
  font-size: clamp(14px, 2vw, 17px);
  padding: 10px 20px;
  margin-top: 4px;
}

.sq-echo-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  gap: 12px;
  text-align: center;
}

.sq-echo-result-icon {
  font-size: clamp(56px, 9vw, 80px);
}

/* Echo result title — extends .text-heading */
.sq-echo-result-title { margin-bottom: 4px; }

.sq-echo-result-score {
  font-size: clamp(16px, 2.2vw, 20px);
  color: #00ff88;
  font-weight: 800;
  margin-bottom: 8px;
}

/* ============================================================
   SECTION 24. — WORLD / PLANET EARTH MODULE
   Phase 24 (updated Phase 26)

   24-1   World section shell + space background
   24-2   Atmosphere glow ring + vignette
   24-3   Below-map space fill + fog transition
   24-4   Top bar — two-panel layout (continent grid + layer columns)
   24-5   SVG map container + pan/zoom wrapper + edge vignette
   24-6   Country path states
   24-7   Geographic feature layer marker styles
   24-8   Bottom bar — permanent fixture (idle + active states)
   24-9   Bottom bar left panel — flag + tabs + speak
   24-10  Bottom bar right panel — name + scrollable content
   24-11  Story panel within bar
   24-12  Read-aloud button states
   24-13  Wildlife grid
   24-14  Floating buttons — random + reset + zoom cluster
   24-15  Climate zone fills
   ============================================================ */

/* ── 24-1  World section shell + space background ────────── */

.world-section {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent; /* space bg moved to .world-globe-pane */
  display: flex;
  flex-direction: column;
}

/* Glass pane containing the dark space + globe — inset from edges */
.world-globe-pane {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 16px 16px 0;  /* match banner's 16px side margins */
  border-radius: 24px;
  overflow: hidden;
  /* Glass treatment */
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  /* Glass pane with subtle space-themed gradient — light enough to not clash */
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(25,45,80,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(40,30,80,0.08) 0%, transparent 60%),
    rgba(210, 205, 200, 0.08);
}

/* Starfield — hidden for fresh rebuild */
.world-globe-pane::before {
  display: none !important;
}
.world-globe-pane_OLD_starfield::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Softer starfield — reduced opacity for lighter space */
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 40%  8%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 88%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 82%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 90%, rgba(255,255,255,0.20) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 10%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 48% 45%, rgba(200,210,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 55%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 72%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 22%, rgba(255,255,255,0.35) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── 24-2  Atmosphere glow ring + vignette ───────────────── */

/* All globe effects stripped for fresh rebuild */
.world-atmosphere,
.world-map-fog,
.world-space-fill,
.world-viewport-vignette {
  display: none !important;
}

.world-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 78% 74% at 50% 52%,
      transparent 54%,
      rgba(30,140,255,0.07) 62%,
      rgba(40,200,160,0.10) 70%,
      rgba(20,100,200,0.06) 78%,
      transparent 86%
    );
  pointer-events: none;
}

/* ── 24-3  Below-map space fill + fog transition ─────────── */

.world-map-fog {
  position: absolute;
  left: 0;
  right: 0;
  height: 160px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(16,24,48,0)    0%,
    rgba(16,24,48,0.45) 35%,
    rgba(16,24,48,0.75) 65%,
    rgba(16,24,48,0.9)  100%
  );
}

.world-space-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 40% at 30% 30%, rgba(20,10,50,0.6)  0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 70% 60%, rgba(10,20,55,0.5)  0%, transparent 70%),
    radial-gradient(1px   1px   at 15% 20%, rgba(255,255,255,0.70)  0%, transparent 100%),
    radial-gradient(1px   1px   at 35% 55%, rgba(255,255,255,0.50)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,0.80)  0%, transparent 100%),
    radial-gradient(1px   1px   at 72% 70%, rgba(255,255,255,0.40)  0%, transparent 100%),
    radial-gradient(1px   1px   at 88% 35%, rgba(255,255,255,0.60)  0%, transparent 100%),
    radial-gradient(1px   1px   at 42% 80%, rgba(255,255,255,0.50)  0%, transparent 100%),
    radial-gradient(1px   1px   at  8% 60%, rgba(255,255,255,0.40)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 45%, rgba(200,210,255,0.55)  0%, transparent 100%),
    radial-gradient(1px   1px   at 25% 90%, rgba(255,255,255,0.35)  0%, transparent 100%),
    radial-gradient(1px   1px   at 80% 10%, rgba(255,255,255,0.45)  0%, transparent 100%);
  background-color: transparent;
}

.world-space-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 35% at 20% 50%, rgba(80,20,120,0.18)  0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 75% 70%, rgba(20,50,130,0.20)  0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 20%, rgba(30,80,160,0.12)  0%, transparent 70%),
    radial-gradient(ellipse 50% 25% at 85% 15%, rgba(60,20,100,0.14)  0%, transparent 70%);
}

/* ── 24-4  Asymmetric glass banner ───────────────────────── */

/* Override glass-banner base for asymmetric shape */
.world-banner {
  /* Asymmetric taper: ~20% full-height left, steep angle to thicker strip (~42%) */
  clip-path: polygon(
    0 0,             /* top-left */
    100% 0,          /* top-right */
    100% 42%,        /* right edge — thicker strip (~109px) */
    28% 42%,         /* taper starts at 28% */
    20% 100%,        /* bottom of taper — 20% full-height section */
    0 100%           /* bottom-left full height */
  );
  z-index: 30;
  margin-bottom: 0;
}

/* Title in the slim right strip */
.world-banner-title {
  position: absolute;
  right: 10%;
  top: 6%;
  font-size: 60px;
  font-weight: 800;
  font-family: sans-serif;
  letter-spacing: -1px;
  color: white;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.2);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
  z-index: 3;
}

/* ── 24-4b  Floating tile shelf ─────────────────────────── */

.world-tile-shelf {
  position: relative;
  z-index: 31;  /* above banner (z-index: 30) so tiles overlap into banner area */
  margin: -140px 16px 0;
  padding: 0 4px 8px;
  /* No background/border/shadow on the shelf itself — rows handle their own glass */
  background: none;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

/* Staggered tile rows — inline-flex so pane shrinks to fit content, right-aligned */
.world-tile-row {
  display: inline-flex;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  margin-bottom: 4px;
  float: right;       /* right-justify the pane itself */
  clear: both;
}

/* Fixed tile width — all rows match */
.world-tile-row .world-tile {
  flex: 0 0 auto;
  width: 72px;
  min-width: 0;
  padding: 6px 2px;
}

/* ── All tiles — identical structure ─────────────────────── */

.world-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition:
    background   0.18s ease,
    border-color 0.18s ease,
    transform    0.15s ease,
    box-shadow   0.18s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 0;
  padding: 4px 2px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.world-tile:hover {
  background: rgba(255, 255, 255, 0.38);
  transform: translateY(-1px);
}

.world-tile:active {
  transform: scale(0.95);
}

.world-tile.is-active {
  background: rgba(var(--profile-accent-rgb), 0.22);
  border-color: rgba(var(--profile-accent-rgb), 0.65);
  box-shadow: 0 0 12px rgba(var(--profile-accent-rgb), 0.30);
}

.world-tile.is-phase2 {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

.world-tile.is-soon {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.world-tile--reserved {
  opacity: 0.10;
  cursor: default;
  pointer-events: none;
  border-style: dashed;
}

.world-tile-emoji {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.world-tile-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 2px;
  text-align: center;
}

.world-tile.is-active .world-tile-label {
  color: rgba(0, 0, 0, 0.7);
}

/* ── 24-5  SVG map container + pan/zoom + edge vignette ──── */

.world-viewport {
  position: absolute;
  inset: 0;  /* fills the globe pane */
  overflow: hidden;
  z-index: 2;
  cursor: grab;
}

.world-viewport:active {
  cursor: grabbing;
}


/* Left + right edge fade — softens map distortion at edges */
.world-viewport-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(to right,
      rgba(16,24,48,0.45) 0%,
      rgba(16,24,48,0.15) 6%,
      transparent         14%,
      transparent         86%,
      rgba(16,24,48,0.15) 94%,
      rgba(16,24,48,0.45) 100%
    );
}

.world-pan-zoom {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  transition: none;
}

.world-pan-zoom.is-animating {
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}

.world-map-svg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

/* ── 24-6  Country path states ───────────────────────────── */

.world-map-svg .country {
  fill: rgba(40,80,140,0.65);
  stroke: rgba(100,160,255,0.25);
  stroke-width: 0;
  transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
  cursor: pointer;
}

.world-map-svg .country:hover {
  fill: rgba(60,120,200,0.80);
  stroke: rgba(140,200,255,0.55);
  stroke-width: 0.5;
  filter: drop-shadow(0 0 4px rgba(100,180,255,0.45));
}

.world-map-svg .country.is-highlighted {
  fill: rgba(var(--profile-accent-rgb),0.40);
  stroke: var(--profile-accent-soft);
  stroke-width: 0.6;
}

.world-map-svg .country.is-tapped {
  fill: rgba(var(--profile-accent-rgb),0.55);
  stroke: var(--profile-accent);
  stroke-width: 0.7;
  filter: drop-shadow(0 0 6px rgba(var(--profile-accent-rgb),0.6));
}

.world-map-svg .country.is-dimmed {
  fill: rgba(25,55,100,0.45);
  stroke: rgba(80,130,200,0.15);
}

/* FIX 8 — continent highlight state (required by FIX 5) */
.world-map-svg .country.is-continent-highlight {
  fill: rgba(var(--profile-accent-rgb), 0.28);
  stroke: rgba(var(--profile-accent-rgb), 0.50);
  stroke-width: 0.4;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.world-map-svg .country.is-continent-highlight:hover {
  fill: rgba(var(--profile-accent-rgb), 0.45);
  stroke: rgba(var(--profile-accent-rgb), 0.70);
  stroke-width: 0.5;
}

.world-map-svg .ocean {
  fill: rgba(8,20,55,0.70);
}

/* Graticule lines — nearly invisible, just a hint of grid */
.world-map-svg .graticule {
  fill: none;
  stroke: rgba(80,130,200,0.02);
  stroke-width: 0;
}

/* NOTE: .world-map-svg .equator rule removed — element does not exist in SVG */

/* ── 24-7  Feature marker styles ─────────────────────────── */

.world-feature-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.22s ease;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.world-feature-marker:hover {
  transform: translate(-50%, -50%) scale(1.28);
  z-index: 11;
}

.world-feature-marker.is-tapped {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 12;
}

.world-feature-marker.layer-hidden {
  opacity: 0;
  pointer-events: none;
}

.world-feature-marker--sm { width: 24px; height: 24px; font-size: 14px; }
.world-feature-marker--md { width: 30px; height: 30px; font-size: 18px; }
.world-feature-marker--lg { width: 38px; height: 38px; font-size: 22px; }

.world-feature-marker--volcano {
  background: radial-gradient(circle, rgba(255,80,20,0.30) 0%, rgba(200,40,10,0.10) 70%);
  box-shadow: 0 0 0 1.5px rgba(255,100,30,0.55), 0 0 8px rgba(255,60,10,0.35);
}
.world-feature-marker--volcano:hover,
.world-feature-marker--volcano.is-tapped {
  box-shadow: 0 0 0 2px rgba(255,120,40,0.80), 0 0 14px rgba(255,80,20,0.60);
}

.world-feature-marker--coral {
  background: radial-gradient(circle, rgba(255,160,80,0.25) 0%, rgba(255,100,60,0.08) 70%);
  box-shadow: 0 0 0 1.5px rgba(255,170,90,0.50), 0 0 7px rgba(255,130,60,0.30);
}
.world-feature-marker--coral:hover,
.world-feature-marker--coral.is-tapped {
  box-shadow: 0 0 0 2px rgba(255,180,100,0.75), 0 0 12px rgba(255,140,70,0.55);
}

.world-feature-marker--rainforest {
  background: radial-gradient(circle, rgba(40,200,80,0.25) 0%, rgba(20,140,50,0.08) 70%);
  box-shadow: 0 0 0 1.5px rgba(60,210,90,0.50), 0 0 7px rgba(30,170,60,0.30);
}
.world-feature-marker--rainforest:hover,
.world-feature-marker--rainforest.is-tapped {
  box-shadow: 0 0 0 2px rgba(70,220,100,0.75), 0 0 12px rgba(40,180,70,0.55);
}

.world-feature-marker--river {
  background: radial-gradient(circle, rgba(60,160,255,0.25) 0%, rgba(30,100,200,0.08) 70%);
  box-shadow: 0 0 0 1.5px rgba(80,170,255,0.50), 0 0 7px rgba(50,130,220,0.30);
}
.world-feature-marker--river:hover,
.world-feature-marker--river.is-tapped {
  box-shadow: 0 0 0 2px rgba(100,185,255,0.75), 0 0 12px rgba(60,150,240,0.55);
}

.world-feature-marker--mountain {
  background: radial-gradient(circle, rgba(180,160,140,0.25) 0%, rgba(120,100,80,0.08) 70%);
  box-shadow: 0 0 0 1.5px rgba(190,170,150,0.50), 0 0 7px rgba(150,130,110,0.30);
}
.world-feature-marker--mountain:hover,
.world-feature-marker--mountain.is-tapped {
  box-shadow: 0 0 0 2px rgba(200,180,160,0.75), 0 0 12px rgba(160,140,120,0.55);
}

.world-feature-marker--desert {
  background: radial-gradient(circle, rgba(255,210,80,0.25) 0%, rgba(220,160,40,0.08) 70%);
  box-shadow: 0 0 0 1.5px rgba(255,215,90,0.50), 0 0 7px rgba(230,170,50,0.30);
}
.world-feature-marker--desert:hover,
.world-feature-marker--desert.is-tapped {
  box-shadow: 0 0 0 2px rgba(255,220,100,0.75), 0 0 12px rgba(240,180,60,0.55);
}

.world-feature-marker--lake {
  background: radial-gradient(circle, rgba(80,200,220,0.25) 0%, rgba(40,150,180,0.08) 70%);
  box-shadow: 0 0 0 1.5px rgba(90,210,230,0.50), 0 0 7px rgba(50,160,190,0.30);
}
.world-feature-marker--lake:hover,
.world-feature-marker--lake.is-tapped {
  box-shadow: 0 0 0 2px rgba(100,220,240,0.75), 0 0 12px rgba(60,170,200,0.55);
}

.world-feature-marker--ocean {
  background: radial-gradient(circle, rgba(30,80,200,0.25) 0%, rgba(10,40,140,0.08) 70%);
  box-shadow: 0 0 0 1.5px rgba(50,100,220,0.50), 0 0 7px rgba(20,60,170,0.30);
}
.world-feature-marker--ocean:hover,
.world-feature-marker--ocean.is-tapped {
  box-shadow: 0 0 0 2px rgba(60,120,240,0.75), 0 0 12px rgba(30,80,200,0.55);
}

.world-feature-marker--record {
  background: radial-gradient(circle, rgba(255,215,0,0.30) 0%, rgba(200,160,0,0.10) 70%);
  box-shadow: 0 0 0 1.5px rgba(255,220,30,0.60), 0 0 8px rgba(220,180,0,0.40);
}
.world-feature-marker--record:hover,
.world-feature-marker--record.is-tapped {
  box-shadow: 0 0 0 2px rgba(255,225,50,0.85), 0 0 14px rgba(240,190,10,0.65);
}

.world-feature-marker--ancient {
  background: radial-gradient(circle, rgba(200,160,100,0.28) 0%, rgba(150,110,60,0.09) 70%);
  box-shadow: 0 0 0 1.5px rgba(210,170,110,0.52), 0 0 7px rgba(160,120,70,0.32);
}
.world-feature-marker--ancient:hover,
.world-feature-marker--ancient.is-tapped {
  box-shadow: 0 0 0 2px rgba(220,180,120,0.78), 0 0 12px rgba(170,130,80,0.58);
}

.world-feature-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.world-feature-marker:hover .world-feature-label {
  opacity: 1;
}

/* ── 24-8  Bottom bar — permanent 200px fixture ──────────── */

.world-bottom-bar {
  position: relative;
  flex-shrink: 0;
  margin: 16px 16px 0;  /* match banner's 16px side margins */
  height: 200px;
  z-index: 25;
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

/* ── Idle state — full width ─────────────────────────────── */

.world-bar-idle {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
}

.world-idle-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Empty — centred prompt */
.world-idle-content--empty {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Continent only */
.world-idle-content--continent {
  flex-direction: column;
  gap: 8px;
}

/* Layer only */
.world-idle-content--layer {
  flex-direction: column;
  gap: 8px;
}

/* Both continent + layer — horizontal split */
.world-idle-content--split {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.world-idle-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 4px 0;
}

.world-idle-divider {
  flex: 0 0 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 16px;
  align-self: stretch;
}

.world-idle-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.world-idle-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.world-idle-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-idle-ask-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--profile-accent);
  background: rgba(var(--profile-accent-rgb),0.12);
  border: 1px solid rgba(var(--profile-accent-rgb),0.35);
  border-radius: 14px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.world-idle-ask-btn:hover {
  background: rgba(var(--profile-accent-rgb),0.22);
  border-color: rgba(var(--profile-accent-rgb),0.60);
}

.world-idle-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.world-idle-stat {
  font-size: 11px;
  font-weight: 500;
  color: rgba(200,220,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 3px 10px;
  white-space: nowrap;
}

.world-idle-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.world-idle-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  font-size: 11px;
  font-weight: 500;
  color: rgba(220,235,255,0.75);
  white-space: nowrap;
}

.world-idle-prompt-icon {
  font-size: 28px;
  line-height: 1;
}

.world-idle-prompt-text {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
}

/* ── Active state — horizontal split ─────────────────────── */

.world-bar-active {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* ── 24-9  Bottom bar left panel ─────────────────────────── */

.world-bar-left {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 12px 12px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  gap: 0;
  min-width: 0;
}

.world-bar-flag {
  font-size: 52px;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
}

/* Tab row — three emoji pills horizontal */
.world-bar-tabs {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 100%;
  justify-content: center;
}

.world-bar-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  cursor: pointer;
  transition:
    background   0.15s ease,
    border-color 0.15s ease,
    color        0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.world-bar-tab span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.8;
}

.world-bar-tab:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
}

.world-bar-tab.is-active {
  background: rgba(var(--profile-accent-rgb),0.18);
  border-color: rgba(var(--profile-accent-rgb),0.50);
  color: var(--profile-accent);
}

/* Speak button — full width of left panel */
.world-bar-speak-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background   0.15s ease,
    color        0.15s ease,
    border-color 0.15s ease;
}

.world-bar-speak-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

.world-bar-speak-btn.is-speaking {
  background: rgba(var(--profile-accent-rgb),0.18);
  border-color: rgba(var(--profile-accent-rgb),0.55);
  color: var(--profile-accent);
  animation: world-speak-pulse 1.2s ease-in-out infinite;
}

.world-bar-speak-icon  { font-size: 16px; line-height: 1; }

/* Wave animation — shown when speaking */
.world-bar-speak-btn .world-speak-wave             { display: none; align-items: center; gap: 2px; height: 14px; }
.world-bar-speak-btn.is-speaking .world-speak-wave { display: flex; }

/* ── 24-10  Bottom bar right panel ───────────────────────── */

.world-bar-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.world-bar-right-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.world-bar-right-title-block {
  flex: 1;
  min-width: 0;
}

.world-bar-name {
  font-size: 20px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-bar-subtitle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.world-bar-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
  min-height: 44px;
  min-width: 44px;
}

.world-bar-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}

/* Scrollable content area */
.world-bar-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.world-bar-content::-webkit-scrollbar       { width: 3px; }
.world-bar-content::-webkit-scrollbar-track { background: transparent; }
.world-bar-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.world-bar-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.world-modal-fact {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

.world-bar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 0;
}

.world-bar-no-content {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.35);
  text-align: center;
  padding: 16px 0;
  font-style: italic;
}

/* ── Shared spinner ──────────────────────────────────────── */

.world-modal-loading-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--profile-accent);
  animation: world-spin 0.75s linear infinite;
}

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

.world-modal-loading-text {
  font-size: 12px;
  color: rgba(180,200,255,0.55);
}

/* ── 24-11  Story panel within bar ───────────────────────── */

.world-bar-story {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.world-story-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  line-height: 1.3;
  margin-bottom: 4px;
}

.world-story-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(210,225,255,0.82);
  margin: 0;
}

.world-story-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.world-story-loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--profile-accent);
  animation: world-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.world-story-loading-text {
  font-size: 12px;
  color: rgba(180,200,255,0.55);
}

/* ── 24-12  Read-aloud wave animation ────────────────────── */

@keyframes world-speak-pulse {
  0%, 100% { box-shadow: 0 0  8px rgba(var(--profile-accent-rgb),0.25); }
  50%       { box-shadow: 0 0 18px rgba(var(--profile-accent-rgb),0.55); }
}

.world-speak-wave-bar {
  width: 2px;
  border-radius: 1px;
  background: var(--profile-accent);
  animation: world-wave-bar 0.8s ease-in-out infinite;
}

.world-speak-wave-bar:nth-child(1) { height: 4px;  animation-delay: 0.00s; }
.world-speak-wave-bar:nth-child(2) { height: 9px;  animation-delay: 0.10s; }
.world-speak-wave-bar:nth-child(3) { height: 14px; animation-delay: 0.20s; }
.world-speak-wave-bar:nth-child(4) { height: 9px;  animation-delay: 0.30s; }
.world-speak-wave-bar:nth-child(5) { height: 4px;  animation-delay: 0.40s; }

@keyframes world-wave-bar {
  0%, 100% { transform: scaleY(0.4); }
  50%       { transform: scaleY(1.0); }
}

/* ── 24-13  Wildlife grid ────────────────────────────────── */

.world-wildlife-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.world-wildlife-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  transition: background 0.15s ease;
}

.world-wildlife-card:hover {
  background: rgba(255,255,255,0.09);
}

.world-wildlife-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.world-wildlife-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(220,235,255,0.88);
  line-height: 1.3;
}

/* ── 24-14  Floating buttons ─────────────────────────────── */

/*
  Layout at 1080×1920 with 200px bottom bar + 96px nav:
  Bottom bar top edge = screen bottom - 96 - 200 = screen bottom - 296px
  Floating buttons must sit above that: bottom >= 306px (296 + 10 gap)

  Zoom cluster:   bottom: 306px  right: 16px
  Reset btn:      bottom: 362px  right: 16px  (306 + 48px cluster + 8px gap)
  Random btn:     bottom: 306px  left:  16px
*/

.world-random-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  background: rgba(240, 238, 235, 0.5);
  color: rgba(0, 0, 0, 0.55);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition:
    background   0.18s ease,
    transform    0.15s ease;
}

.world-random-btn:hover {
  background: rgba(240, 238, 235, 0.65);
  transform: translateY(-1px);
}

.world-random-btn:active { transform: scale(0.95); }

.world-random-btn-icon {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}

.world-random-btn-icon.is-spinning {
  transform: rotate(360deg);
}

.world-zoom-cluster {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(240, 238, 235, 0.5);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.world-zoom-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.world-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

.world-zoom-btn:active {
  background: rgba(0, 0, 0, 0.1);
}

.world-zoom-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.world-zoom-btn:disabled:hover {
  background: transparent;
}

.world-zoom-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.04em;
  min-width: 40px;
  text-align: center;
  flex-shrink: 0;
}

/* Reset — above zoom cluster
   Zoom cluster total height: 40px btn + 4px padding × 2 = 48px
   bottom: 306 + 48 + 8 gap = 362px                              */
.world-reset-btn {
  position: absolute;
  bottom: 72px;
  right: 16px;
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  background: rgba(240, 238, 235, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition:
    background   0.15s ease,
    transform    0.15s ease;
}

.world-reset-btn:hover {
  background: rgba(240, 238, 235, 0.65);
}

.world-reset-btn:active {
  transform: scale(0.95);
}

/* ── 24-15  Climate zone fills ───────────────────────────── */

.world-map-svg .climate-tropical    { fill: rgba(40,200,80,0.28);   }
.world-map-svg .climate-dry         { fill: rgba(255,200,60,0.28);  }
.world-map-svg .climate-temperate   { fill: rgba(60,180,120,0.28);  }
.world-map-svg .climate-continental { fill: rgba(80,140,200,0.28);  }
.world-map-svg .climate-polar       { fill: rgba(180,220,255,0.35); }
.world-map-svg .climate-highland    { fill: rgba(160,140,120,0.28); }
.world-map-svg .climate-oceanic     { fill: rgba(60,160,210,0.28);  }

.world-map-svg .country.climate-tropical:hover    { fill: rgba(40,220,90,0.50);   }
.world-map-svg .country.climate-dry:hover         { fill: rgba(255,210,70,0.50);  }
.world-map-svg .country.climate-temperate:hover   { fill: rgba(70,200,140,0.50);  }
.world-map-svg .country.climate-continental:hover { fill: rgba(90,155,220,0.50);  }
.world-map-svg .country.climate-polar:hover       { fill: rgba(190,230,255,0.55); }
.world-map-svg .country.climate-highland:hover    { fill: rgba(170,155,135,0.50); }
.world-map-svg .country.climate-oceanic:hover     { fill: rgba(70,175,225,0.50);  }

/* ── Responsive tweaks ───────────────────────────────────── */

@media (max-width: 380px) {
  .world-tile-emoji  { font-size: 15px; }
  .world-tile-label  { font-size: 7px;  }
  .world-bar-name    { font-size: 17px; }
  .world-bar-flag    { font-size: 42px; }
  .world-random-btn  { font-size: 13px; padding: 10px 14px; }
}

@media (min-width: 600px) {
  .world-tile-emoji  { font-size: 20px; }
  .world-tile-label  { font-size: 9px;  }
  .world-bar-name    { font-size: 22px; }
  .world-bar-flag    { font-size: 58px; }
  .world-modal-fact  { font-size: 14px; }
}

/* ============================================================
   25. WEATHER MODULE
   ============================================================ */

/* ── 25.2 Modal body ── */
.weather-modal-body {
  text-align: center;
}

/* ── 25.3 City — extends .text-label ── */
.weather-modal-city {
  margin-bottom: 12px;
}

/* ── 25.4 Condition emoji ── */
.weather-modal-emoji {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 8px;
}

/* ── 25.5 Temperature ── */
.weather-modal-temp {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(52px, 10vw, 72px);
  color: #ffffff;
  text-shadow: 0 0 24px rgba(168,85,247,0.5);
  line-height: 1;
  margin-bottom: 4px;
}

/* ── 25.6 Condition label ── */
.weather-modal-condition {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 3.5vw, 28px);
  color: #ffffff;
  margin-bottom: 8px;
}

/* ── 25.7 Condition message — extends .text-muted ── */
.weather-modal-message {
  margin-bottom: 16px;
}

/* ── 25.8 Stats row ── */
.weather-modal-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px 20px;
  margin-bottom: 4px;
}

/* ── 25.9 Stat label — extends .text-label ── */
/* text-label provides uppercase, moon-silver, letter-spacing */

/* ── 25.10 Stat value ── */
.weather-stat-value {
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
  color: #ffffff;
}

/* ── 25.11 Stat divider ── */
.weather-stat-divider {
  width: 1px;
  background: rgba(255,255,255,0.15);
  align-self: stretch;
}

/* ── 25.12 Forecast row ── */
.weather-forecast-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ── 25.13 Forecast card — extends .glass-card ── */
.weather-forecast-card {
  padding: 14px 18px;
  text-align: center;
  flex: 1;
  min-width: 80px;
}

/* ── 25.14 Forecast day — extends .text-label ── */
/* text-label provides uppercase, moon-silver, letter-spacing */
.weather-forecast-day {
  margin-bottom: 8px;
}

/* ── 25.15 Forecast emoji ── */
.weather-forecast-emoji {
  font-size: 28px;
  margin-bottom: 6px;
}

/* ── 25.16 Forecast temps ── */
.weather-forecast-high {
  font-family: 'Fredoka One', cursive;
  font-size: 16px;
  color: #ffffff;
}

.weather-forecast-low {
  font-size: 12px;
  color: var(--color-moon-silver);
  font-weight: 700;
}

/* ============================================================
   26. ASK MODULE
   ============================================================ */

/* ── 26.1 Section wrapper ── */
#ask-section {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 10%,
      rgba(10,10,80,0.9) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%,
      rgba(10,40,80,0.8) 0%, transparent 60%),
    linear-gradient(160deg,
      #0a0a2e 0%, #111128 50%, #0d0d1a 100%);
  flex-direction: column;
  padding-bottom: 110px;
}

#ask-section.visible { display: flex; }

/* ── 26.2 Header — extends .section-header ── */
.ask-header {
  padding: 20px 24px 16px;
  gap: 6px;
}

.ask-header-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── 26.3 Header title — extends .section-title ── */
/* section-title provides Fredoka, size base, white, shadow.
   No overrides needed — purple shadow matches app standard  */

/* ── 26.4 Header subtitle ── */
.ask-header-sub {
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-moon-silver);
  font-weight: 700;
}

/* ── 26.5 Clear button ── */
.ask-clear-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,71,87,0.15);
  border: 1px solid rgba(255,71,87,0.35);
  border-radius: 99px;
  padding: 8px 16px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.6vw, 14px);
  color: rgba(255,71,87,0.9);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ask-clear-btn:active {
  background: rgba(255,71,87,0.30);
  transform: scale(0.95);
}

/* ── 26.6 Conversation area — extends .section-body .hide-scrollbar ── */
.ask-conversation {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
}

/* ── 26.7 Empty state ── */
.ask-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 24px;
  text-align: center;
  gap: 16px;
}

.ask-empty-emoji {
  font-size: clamp(60px, 10vw, 90px);
  filter: drop-shadow(0 0 20px rgba(0,207,255,0.4));
  animation: ask-float 3s ease-in-out infinite;
}

@keyframes ask-float {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-10px); }
}

/* ── 26.8 Empty title — extends .text-heading ── */
.ask-empty-title {
  font-size: clamp(22px, 3.5vw, 32px);
}

/* ── 26.9 Empty sub — extends .text-muted ── */
.ask-empty-sub {
  font-size: clamp(13px, 2vw, 17px);
  max-width: 400px;
  line-height: 1.6;
}

/* ── 26.10 Suggestion chips ── */
.ask-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.ask-suggestion-chip {
  background: var(--profile-accent-soft);
  border: 1px solid var(--profile-accent);
  border-radius: 99px;
  padding: 10px 18px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.ask-suggestion-chip:active {
  transform: scale(0.95);
  background: var(--profile-accent);
  box-shadow: 0 0 16px var(--profile-accent-glow);
}

/* ── 26.11 Messages ── */
.ask-message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 100%;
}

.ask-message.user { flex-direction: row-reverse; }

/* ── 26.12 Avatars ── */
.ask-avatar {
  width: clamp(36px, 5vw, 48px);
  height: clamp(36px, 5vw, 48px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2.8vw, 26px);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}

.ask-avatar.user-avatar {
  background: var(--profile-accent-soft);
  border-color: var(--profile-accent);
  box-shadow: 0 0 12px var(--profile-accent-glow);
}

.ask-avatar.ai-avatar {
  background: rgba(0,207,255,0.15);
  border-color: rgba(0,207,255,0.40);
  box-shadow: 0 0 12px rgba(0,207,255,0.25);
}

/* ── 26.13 Bubbles ── */
.ask-bubble {
  max-width: 75%;
  padding: 14px 18px;
  border-radius: 20px;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  position: relative;
}

.ask-message.user .ask-bubble {
  background: var(--profile-accent-soft);
  border: 1px solid var(--profile-accent);
  border-radius: 20px 4px 20px 20px;
  color: #ffffff;
  text-align: right;
}

.ask-message.ai .ask-bubble {
  background: rgba(0,207,255,0.10);
  border: 1px solid rgba(0,207,255,0.25);
  border-radius: 4px 20px 20px 20px;
  color: #ffffff;
  text-align: left;
}

/* ── 26.14 Read-aloud button — position only, shape from .mc-audio-btn ── */
.ask-read-btn {
  margin-top: 10px;
}

/* ── 26.15 Loading indicator ── */
.ask-loading-bubble {
  background: rgba(0,207,255,0.10);
  border: 1px solid rgba(0,207,255,0.25);
  border-radius: 4px 20px 20px 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ask-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,207,255,0.7);
  animation: ask-dot-bounce 1.2s ease-in-out infinite;
}

.ask-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.ask-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ask-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1.2); opacity: 1;   }
}

.ask-loading-text {
  font-size: clamp(13px, 1.8vw, 15px);
  color: rgba(0,207,255,0.8);
  font-weight: 700;
  font-style: italic;
}

/* ── 26.16 Input area ── */
.ask-input-area {
  flex-shrink: 0;
  padding: 16px 24px 20px;
  background: rgba(5,5,25,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ask-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.ask-text-input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 14px 18px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 600;
  color: #ffffff;
  resize: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 52px;
  max-height: 120px;
  overflow-y: auto;
  scrollbar-width: none;
  line-height: 1.4;
  -webkit-user-select: text;
  user-select: text;
}

.ask-text-input::-webkit-scrollbar { display: none; }

.ask-text-input::placeholder {
  color: rgba(255,255,255,0.35);
  font-weight: 600;
}

.ask-text-input:focus {
  border-color: var(--profile-accent);
  box-shadow: 0 0 16px var(--profile-accent-soft);
  background: rgba(255,255,255,0.10);
}

/* ── 26.17 Send button — extends .btn .btn-accent ── */
.ask-send-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 22px;
  padding: 0;
  flex-shrink: 0;
}

/* ── 26.18 Mic button — shape from .mc-audio-btn ── */

/* ── 26.19 Character counter ── */
.ask-char-count {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  text-align: right;
  padding-right: 4px;
}

.ask-char-count.near-limit {
  color: rgba(255,107,53,0.8);
}


/* ============================================================
   SECTION 27. — BACKGROUND SYSTEM + DASHBOARD TILES
   
   ============================================================ */

/* ── 27a  Star field base ─────────────────────────────────── */

/*
  Three pseudo-element layers of stars using box-shadow.
  Generated as a fixed background on body::before / body::after
  and a third layer on a dedicated .star-layer element
  injected by the background init below.

  We use body[data-section] to tint the nebula glow per section.
*/

body {
  background-color: #080d1a;
  position: relative;
  overflow-x: hidden;
}

/* Star layer 1 — tiny, dense */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 8%,  rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 62%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 80%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 44%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 12%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 55%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 33%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  70%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 90%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 95%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 68%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 85%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 48%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 22%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 42%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 18%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 92%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 72%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 7%  35%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 5%,  rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 58%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 30%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 48%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 3%  88%, rgba(255,255,255,0.35) 0%, transparent 100%);
  animation: twinkle-a 60s ease-in-out infinite alternate;
}

/* Star layer 2 — slightly larger, sparser */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 8%  20%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 65%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 30%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 58% 82%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 12%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 50%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 95% 28%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 78%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 33% 45%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 15%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 62% 60%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 88%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,0.70) 0%, transparent 100%);
  animation: twinkle-b 80s ease-in-out infinite alternate;
}

/* Comet streak — repositioned below tile grid */
#app::before {
  content: '';
  position: fixed;
  top: 72%;
  left: -5%;
  width: 45%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.18) 60%,
    transparent 100%
  );
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}

/* ── 27b  Twinkle animations ──────────────────────────────── */

@keyframes twinkle-a {
  0%   { opacity: 0.7; }
  25%  { opacity: 1.0; }
  50%  { opacity: 0.8; }
  75%  { opacity: 0.95; }
  100% { opacity: 0.75; }
}

@keyframes twinkle-b {
  0%   { opacity: 0.6; }
  30%  { opacity: 0.9; }
  60%  { opacity: 0.7; }
  100% { opacity: 1.0; }
}

/* ── 27c  Nebula glow — base + per-section tints ─────────── */

/* Base nebula — always present */
#app {
  position: relative;
  z-index: 1;
}

#app::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background 1.2s ease;

  /* Default (dashboard) — deep purple + blue */
  background:
    radial-gradient(ellipse 80% 50% at 20% 110%,  rgba(88,  56, 180, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% -10%,  rgba(40,  80, 200, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50%  50%,  rgba(60,  40, 140, 0.08) 0%, transparent 100%);
}

/* #app::after dashboard override removed — #app is hidden on dashboard */

/* Level Up — warm gold + amber */
body[data-section="chores"] #app::after {
  background:
    radial-gradient(ellipse 80% 50% at 10% 110%,  rgba(220, 160,  20, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% -10%,  rgba(200, 100,  10, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50%  50%,  rgba(160,  80,  10, 0.08) 0%, transparent 100%);
}

/* Español — warm coral + orange */
body[data-section="spanish"] #app::after {
  background:
    radial-gradient(ellipse 80% 50% at 15% 110%,  rgba(220,  80,  50, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% -10%,  rgba(200, 120,  30, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50%  50%,  rgba(160,  60,  20, 0.08) 0%, transparent 100%);
}

/* Discovery Lab — cyan + teal */
body[data-section="ask"] #app::after,
body[data-section="lessons"] #app::after {
  background:
    radial-gradient(ellipse 80% 50% at 10% 110%,  rgba( 20, 180, 200, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% -10%,  rgba( 10, 140, 160, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50%  50%,  rgba( 10, 100, 120, 0.08) 0%, transparent 100%);
}

/* Planner — soft lavender + pink */
body[data-section="lists"] #app::after {
  background:
    radial-gradient(ellipse 80% 50% at 20% 110%,  rgba(160,  80, 220, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% -10%,  rgba(200,  80, 160, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50%  50%,  rgba(140,  60, 180, 0.08) 0%, transparent 100%);
}

/* Atlas — earth green + blue */
body[data-section="world"] #app::after {
  background:
    radial-gradient(ellipse 80% 50% at 10% 110%,  rgba( 40, 160,  80, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% -10%,  rgba( 20, 100, 180, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50%  50%,  rgba( 20, 120,  60, 0.08) 0%, transparent 100%);
}

/* Game Zone — hot pink + purple */
body[data-section="games"] #app::after {
  background:
    radial-gradient(ellipse 80% 50% at 15% 110%,  rgba(220,  40, 160, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% -10%,  rgba(140,  20, 220, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50%  50%,  rgba(180,  20, 140, 0.08) 0%, transparent 100%);
}

/* ── 27d  All content sits above background layers ───────── */

#main-content {
  position: relative;
  z-index: 2;
}


/* ── 27e  Dashboard tiles ─────────────────────────────────── */

/* #dashboard is now a top-level container — layout defined in section 27b */

.dash-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 49px;
}

.dash-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 240px;
  position: relative;
  overflow: hidden;
}

.dash-tile:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.dash-tile-emoji {
  font-size: 56px;
  line-height: 1;
  display: block;
}

.dash-tile-name {
  font-family: 'Fredoka One', cursive;
  font-size: 39px;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}

/* ── Peeking tile — object rises from bottom ── */
.dash-tile--peek {
  justify-content: flex-start;
  padding-top: 24px;
  padding-bottom: 0;
}

.dash-tile-peek {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(40%);
  width: 90%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* Emoji peeking — oversized emoji rising from bottom */
.dash-tile-peek--emoji {
  font-size: 120px;
  line-height: 1;
  width: auto;
  transform: translateX(-50%) translateY(20%);
}

.dash-tile-peek--emoji-globe {
  font-size: 250px;
  transform: translateX(-50%) translateY(45%);
}

.dash-tile-peek--emoji-telescope {
  font-size: 160px;
  left: 40%;
  transform: translateX(-50%) translateY(20%) scaleX(-1);
}

/* Planner calendar — shift down a touch */
.dash-tile-peek--calendar {
  transform: translateX(-50%) translateY(45%);
}

.dash-tile-peek--img {
  left: 60%;
  width: 55%;
  transform: translateX(-50%) translateY(25%);
  object-fit: contain;
  opacity: 0.55;
}

/* =============================================
   27b. HERO BANNER + CARD GRID (home redesign)
============================================= */

/* ── Container mutual exclusion ──
   Three top-level containers: #dashboard, #app (old dark), #app-glass (new glass).
   Only one is visible at a time, driven by body[data-section]. */
body[data-section="dashboard"] #app { display: none; }
body[data-section="dashboard"] #app-glass { display: none; }
body:not([data-section="dashboard"]) #dashboard { display: none; }

/* Glass-migrated sections show #app-glass, hide #app */
body[data-section="chores"] #app { display: none !important; }
body[data-section="chores"] #app-glass { display: flex !important; }
body[data-section="games"] #app { display: none !important; }
body[data-section="games"] #app-glass { display: flex !important; }
body[data-section="lists"] #app { display: none !important; }
body[data-section="lists"] #app-glass { display: flex !important; }
body[data-section="world"] #app { display: none !important; }
body[data-section="world"] #app-glass { display: flex !important; }

#games-section {
  position: relative;
  z-index: 2;
  background: transparent;
  overflow: hidden;
  padding-bottom: 0;
  height: calc(100vh - var(--nav-h) - 16px);
}
#games-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* By default #app-glass is hidden */
#app-glass {
  display: none;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  /* Match #dashboard: simple vertical gradient, NOT conic */
  background: linear-gradient(180deg, var(--t2), var(--t3));
  padding-bottom: calc(var(--nav-h) + 60px);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#app-glass::-webkit-scrollbar { display: none; }
#app-glass { scrollbar-width: none; }

/* ── Dashboard container — owns the full viewport ── */
#dashboard {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--t2), var(--t3));
  padding-bottom: calc(var(--nav-h) + 60px);
}

/* ── Hero Banner ── */
.hero-banner {
  margin: clamp(8px, 1.5%, 16px);
  height: clamp(420px, 39vh, 746px);
  border-radius: 24px;
  position: relative;
  padding: clamp(24px, 4.6%, 50px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 40% at 75% 30%, rgba(var(--t7-rgb), 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 20% 70%, rgba(var(--metal), 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 0%, transparent 55%, var(--t9) 95%),
    conic-gradient(
      from 40deg at 65% 60%,
      var(--t7) 0deg, var(--t5) 55deg, var(--t4) 115deg,
      var(--t6) 175deg, var(--t8) 235deg, var(--t9) 305deg, var(--t7) 360deg
    );
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid rgba(var(--metal), 0.35);
  border-left-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  border-right-color: rgba(0, 0, 0, 0.15);
  box-shadow:
    inset 0 8px 20px rgba(0, 0, 0, 0.2),
    inset 6px 0 16px rgba(0, 0, 0, 0.12),
    inset 0 -6px 16px rgba(255, 248, 235, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.25);
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(var(--metal), 0.12) 0%, transparent 100%);
  border-radius: 24px 24px 0 0;
  z-index: 0;
  pointer-events: none;
}

.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 12%),
    radial-gradient(circle at 80% 15%, rgba(255, 220, 160, 0.06) 0%, transparent 30%),
    radial-gradient(circle at 15% 85%, rgba(180, 220, 255, 0.04) 0%, transparent 25%);
  pointer-events: none;
  z-index: 0;
}

/* ── Floating particles ── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--metal), 0.8) 0%, rgba(var(--metal), 0) 70%);
}

.particle:nth-child(1) { width: 6px; height: 6px; top: 30%; left: 15%; animation: float 6s ease-in-out infinite; }
.particle:nth-child(2) { width: 4px; height: 4px; top: 50%; left: 70%; animation: float-drift 8s ease-in-out 1s infinite; }
.particle:nth-child(3) { width: 5px; height: 5px; top: 25%; left: 85%; animation: float 7s ease-in-out 2s infinite; }
.particle:nth-child(4) { width: 3px; height: 3px; top: 60%; left: 40%; animation: float-drift 9s ease-in-out 3s infinite; }
.particle:nth-child(5) { width: 5px; height: 5px; top: 45%; left: 55%; animation: float 5s ease-in-out 0.5s infinite; }
.particle:nth-child(6) { width: 4px; height: 4px; top: 15%; left: 45%; animation: float-drift 7s ease-in-out 4s infinite; }
.particle:nth-child(7) { width: 3px; height: 3px; top: 70%; left: 25%; animation: float 8s ease-in-out 2.5s infinite; }

/* ── Hero name ── */
.hero-name {
  position: absolute;
  top: 95px;
  left: 50px;
  transform: translateY(-50%);
  font-family: sans-serif;
  font-size: 79px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  display: inline-block;
  z-index: 1;
}

.hero-name::after {
  content: attr(data-name);
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.6) 45%,
    rgba(var(--metal), 0.15) 50%,
    rgba(255, 255, 255, 0.6) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s ease-in-out infinite;
  pointer-events: none;
}

/* ── Hero weather ── */
.hero-weather {
  position: absolute;
  top: 40px;
  right: 40px;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  z-index: 1;
}

.hero-weather-icon {
  font-size: 36px;
  line-height: 1;
  margin-top: 2px;
  margin-right: -2px;
  opacity: 0.85;
}

.hero-weather-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.hero-weather-temp {
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.hero-weather-date {
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* ── Hero cards ── */
.hero-card {
  width: clamp(380px, 56%, 580px);
  height: clamp(200px, 43%, 320px);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  position: absolute;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Smooth carousel transitions */
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              z-index 0s;
}

/* Primary hero card */
.hero-card-1 {
  top: clamp(120px, 25.5%, 190px);
  left: clamp(24px, 4.8%, 50px);
  z-index: 3;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 248, 240, 0.83) 50%, rgba(255, 255, 255, 0.8) 100%);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-left-color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(var(--t9-rgb), 0.1);
  border-right-color: rgba(var(--t9-rgb), 0.06);
  box-shadow:
    0 16px 48px rgba(var(--t9-rgb), 0.25),
    0 6px 16px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 10px 18px rgba(var(--t9-rgb), 0.15),
    inset 8px 0 14px rgba(var(--t9-rgb), 0.1),
    inset 0 -8px 14px rgba(255, 248, 235, 0.4),
    inset -5px 0 10px rgba(255, 245, 225, 0.25),
    inset 0 0 8px rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Mountain silhouette behind avatar */
.hero-card-1::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: -20px; right: -20px;
  height: 240px;
  background: rgba(var(--t7-rgb), 0.3);
  clip-path: polygon(0% 100%, 0% 65%, 15% 30%, 35% 70%, 55% 15%, 75% 55%, 100% 25%, 100% 100%);
  z-index: 0;
}

/* Shimmer sweep on primary card */
.hero-card-1::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.3) 45%, rgba(var(--metal), 0.08) 50%, rgba(255, 255, 255, 0.3) 55%, transparent 60%),
    radial-gradient(circle at 85% 20%, rgba(255, 200, 120, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 15% 80%, rgba(255, 190, 120, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 95% 5%, rgba(255, 245, 220, 0.5) 0%, rgba(255, 240, 210, 0.2) 25%, transparent 50%);
  background-size: 200% 100%, auto, auto, auto;
  animation: shimmer 6s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
  border-radius: 20px;
}

/* Avatar area in hero card */
.hero-card .profile-avatar {
  flex: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
}

.hero-card .profile-avatar img {
  height: 108%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Stats column in hero card */
.hero-card .profile-stats {
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  padding-right: 24px;
  transition: opacity 0.15s ease;
}

.hero-card .stat-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hero-card .stat-icon {
  width: 77px;
  height: 77px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) saturate(1.8) brightness(1.1);
}

.hero-card .stat-value {
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #333;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Secondary hero cards */
.hero-card-2 {
  top: clamp(140px, 28.8%, 215px);
  left: 24%;
  z-index: 2;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px) saturate(1.2) brightness(0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.2) brightness(0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
}

.hero-card-3 {
  top: clamp(155px, 32.2%, 240px);
  left: 40%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(1.1) brightness(0.85);
  -webkit-backdrop-filter: blur(20px) saturate(1.1) brightness(0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
}

/* Secondary card avatars */
.hero-card-2 .profile-avatar-circle,
.hero-card-3 .profile-avatar-circle {
  width: auto;
  height: 65%;
  margin-right: 18px;
  opacity: 0.5;
  align-self: center;
}

.hero-card-2 .profile-avatar-circle img,
.hero-card-3 .profile-avatar-circle img {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* ── Card Grid ──
   Negative margin pulls cards up to overlap the bottom of hero-banner.
   Normal flow so cards contribute to scroll height. */
.card-grid {
  position: relative;
  z-index: 2;
  margin: clamp(-120px, -10vh, -60px) 35px 0;
  display: grid;
  grid-template-columns: repeat(2, clamp(300px, 43vw, 461px));
  grid-template-rows: repeat(3, clamp(200px, 28vw, 301px));
  justify-content: space-evenly;
  gap: clamp(28px, 4.5vw, 76px) 0;  /* row gap only — space-evenly handles columns */
}

.grid-card {
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.45);
  border-left-color: rgba(255, 255, 255, 0.35);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  border-right-color: rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 32px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* Pressed — inset shadow, no scale */
.grid-card:active {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06);
  border-top-color: rgba(0, 0, 0, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Top shine — replaces old corner glow */
.grid-card::before {
  content: '';
  position: absolute;
  inset: 2px 16px auto 16px;
  height: 35%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.15s ease;
}
.grid-card:active::before {
  opacity: 0;
}

.grid-card-name {
  font-family: sans-serif;
  font-size: 63px;
  font-weight: 600;
  color: var(--title);
  position: relative;
  z-index: 5;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(var(--t7-rgb), 0.25), 0 1px 0 rgba(255, 255, 255, 0.3);
  /* Glass-on-glass title panel — full width */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  width: 100%;
  padding: 8px 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.grid-card-peek {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(30%);
  font-size: 245px;
  opacity: 1;
  z-index: 2;
}

.grid-card-peek--img {
  position: absolute;
  bottom: 0;
  right: 10%;
  transform: translateY(20%);
  height: 131%;
  opacity: 1;
  z-index: 2;
}

/* Frosted overlay — sits between images and title for a "behind glass" effect */
.grid-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: 3;
  pointer-events: none;
}

.grid-card-peek--svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(35%);
  width: 122%;
  opacity: 1;
  z-index: 4;
}

/* ── Mountains backdrop ── */
.mountains {
  z-index: 1;
  position: fixed;
  bottom: calc(var(--nav-h) + 130px);
  left: -80px;
  right: -80px;
  pointer-events: none;
}

.mountains img {
  width: 100%;
  display: block;
  filter: contrast(1.3) brightness(1.18) drop-shadow(0 -6px 16px rgba(0, 0, 0, 0.32)) drop-shadow(0 -2px 6px rgba(var(--metal), 0.15));
  transform: scaleY(1.32);
  transform-origin: bottom center;
}

/* Remove old planet tile styles */
.planet-tile,
.planet-tile-swatch,
.planet-tile-text,
.planet-tile-name,
.planet-tile-sub,
.pt-mercury, .pt-venus, .pt-earth,
.pt-jupiter, .pt-mars, .pt-saturn,
.pt-neptune, .pt-placeholder,
.dash-orbit-ring,
#planet-dashboard {
  /* neutralised — markup removed, these rules are inert */
  display: none;
}

/* ============================================================
   SECTION 28. — Discovery Lab (immersive scene + drawer)
   Background image scene with tap targets over landmarks.
   Drawer slides up for Ask / Stories / Lessons / Saved.
   ============================================================ */

/* Lab section layout */
#lab-section {
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Disable nebula tint — scene image is self-contained */
body[data-section="lab"] #app::after {
  background: none;
}

/* ── Scene container ── */

.lab-scene-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url('/media/scene_images/lab-scene.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ── Tap target base ── */

/* ── Lab Dock Bar ── */
/* Mirrors .sq-home-dock / .sq-dock-btn exactly */

.lab-home-dock {
  position: absolute;
  bottom: calc(var(--nav-h) + 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  gap: 20px;
  padding: 10px 28px;
  background: rgba(0, 0, 0, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lab-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 22px;
  min-width: 88px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.lab-dock-btn:active {
  transform: scale(0.92);
  filter: brightness(1.3);
}

.lab-dock-icon {
  width: 47px;
  height: 47px;
  flex-shrink: 0;
}

.lab-dock-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.60);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Ask — warm blue (same as sq Words) */
.lab-dock-btn--ask {
  background: rgba(80, 160, 255, 0.12);
  border-color: rgba(80, 160, 255, 0.25);
}
.lab-dock-btn--ask .lab-dock-icon { color: rgba(120, 190, 255, 0.95); }
.lab-dock-btn--ask .lab-dock-label { color: rgba(140, 200, 255, 0.95); }

/* Stories — amber/gold (same as sq Study) */
.lab-dock-btn--stories {
  background: rgba(255, 190, 50, 0.12);
  border-color: rgba(255, 190, 50, 0.25);
}
.lab-dock-btn--stories .lab-dock-icon { color: rgba(255, 210, 100, 0.95); }
.lab-dock-btn--stories .lab-dock-label { color: rgba(255, 215, 120, 0.95); }

/* Lessons — soft purple (same as sq Games) */
.lab-dock-btn--lessons {
  background: rgba(180, 120, 255, 0.12);
  border-color: rgba(180, 120, 255, 0.25);
}
.lab-dock-btn--lessons .lab-dock-icon { color: rgba(200, 160, 255, 0.95); }
.lab-dock-btn--lessons .lab-dock-label { color: rgba(210, 170, 255, 0.95); }

/* Saved — soft green (same as sq Map) */
.lab-dock-btn--saved {
  background: rgba(80, 220, 140, 0.12);
  border-color: rgba(80, 220, 140, 0.25);
}
.lab-dock-btn--saved .lab-dock-icon { color: rgba(120, 235, 170, 0.95); }
.lab-dock-btn--saved .lab-dock-label { color: rgba(130, 240, 180, 0.95); }

/* ── Particles (firefly motes) ── */

.lab-scene-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.lab-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 210, 100, 0.7);
  box-shadow: 0 0 6px rgba(255, 210, 100, 0.5);
  animation: lab-particle-float 8s ease-in-out infinite;
}

.lab-particle--1 { left: 15%; top: 40%; animation-delay: 0s; }
.lab-particle--2 { left: 45%; top: 25%; animation-delay: 1.5s; }
.lab-particle--3 { left: 70%; top: 55%; animation-delay: 3s; }
.lab-particle--4 { left: 30%; top: 65%; animation-delay: 4.5s; }
.lab-particle--5 { left: 80%; top: 35%; animation-delay: 2s; }
.lab-particle--6 { left: 55%; top: 70%; animation-delay: 5.5s; }

@keyframes lab-particle-float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-12px) translateX(6px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-6px) translateX(-4px);
    opacity: 0.5;
  }
  75% {
    transform: translateY(-18px) translateX(3px);
    opacity: 0.9;
  }
}


/* ── Backdrop (drawer dim) ── */

.lab-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lab-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Drawer ── */

.lab-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 85%;
  z-index: 25;
  background: rgba(30, 22, 14, 0.97);
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}

.lab-drawer--open {
  transform: translateY(0);
  pointer-events: auto;
}

.lab-drawer-top-edge {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 1;
  pointer-events: none;
}

.lab-drawer-top-edge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lab-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lab-drawer-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lab-drawer-emoji {
  font-size: clamp(22px, 3vw, 30px);
}

.lab-drawer-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 3vw, 28px);
  color: #ffffff;
  letter-spacing: 0.3px;
}

.lab-drawer-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.lab-drawer-close:active {
  background: rgba(255, 255, 255, 0.15);
}

.lab-drawer-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 16px calc(var(--nav-h, 147px) + 16px);
}

/* Ask layout inside drawer — fill height, pin input to bottom */
.lab-drawer-content .ask-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lab-drawer-content .ask-conversation {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ============================================================
   29. GAMES MODULE
   ─────────────────────────────────────────────────────────────
   Utilities used from Section 2b:
     .section-layout / .section-header / .section-body
     .btn / .btn-ghost / .btn-primary / .btn-pink
     .glass-card / .glass-card-mid / .chrome-card
     .pill / .pill-ghost
     .hide-scrollbar
     .anim-pop-in / .anim-fade-up
   ============================================================ */

/* ── 29.1  Section shell (migrated to #app-glass) ────────── */

/* #games-section and #games-container overrides are in the
   glass container rules section above. */

.games-module {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ── 29.1b  Glass game classes ───────────────────────────── */

/* Games banner — extends .glass-banner */
.games-banner {
  flex-shrink: 0;
}

/* Watermark — specific positioning for games */
.games-banner-watermark {
  right: 4%;
  top: 55%;
  transform: translateY(-50%) rotate(15deg);
}

.games-content-pane {
  position: relative;
  margin: 52px 55px 0;
  padding: 24px 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}
.games-content-pane::-webkit-scrollbar { display: none; }
.games-content-pane { scrollbar-width: none; }

/* Small glass pane for chess/checkers controls (no flex:1, auto height) */
.games-controls-pane {
  position: relative;
  margin: 16px 55px 0;
  padding: 24px 16px 16px;
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Bottom glass pane — thin, single-row status bar */
.games-bottom-pane {
  position: relative;
  margin: 0 55px 16px;
  padding: 10px 16px;
  background: rgba(210, 205, 200, 0.14);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
/* Status label fills left side */
.games-bottom-pane .games-status-label {
  flex: 1;
  text-align: left;
  padding: 0;
  font-size: 20px;
}
/* Action buttons — chore-points-btn style */
.games-bottom-pane .game-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  background: rgba(240, 238, 235, 0.5);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.55);
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.games-bottom-pane .game-action-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

/* Board area — centered vertically between top and bottom panes */
.games-board-section {
  margin: 0 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

.games-back-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 10px 20px;
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.games-back-pill:active {
  background: rgba(255, 255, 255, 0.2);
}

/* New Game pill — mirrors back pill on right side */
.games-new-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
}

/* Status row — label left, hint right, below board */
.games-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
}
.games-status-row .games-status-label {
  padding: 0;
  text-align: left;
}

/* Hint pill — matches back pill style */
.games-hint-pill {
  padding: 10px 20px;
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.games-hint-pill:active {
  background: rgba(255, 255, 255, 0.2);
}

.games-status-label {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.55);
  padding: 8px 0;
}

/* Lobby grid — glass card treatment */
.games-lobby-grid-glass {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 8px 0;
}

.games-lobby-card-glass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  min-height: 240px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(0, 0, 0, 0.05);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.games-lobby-card-glass:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.35);
}

.games-lobby-card-glass .games-lobby-card-emoji {
  font-size: 64px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.games-lobby-card-glass .games-lobby-card-name {
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}
.games-lobby-card-glass .games-lobby-card-desc {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.4);
  font-weight: 600;
}
.games-lobby-card-glass .games-lobby-card-badge {
  margin-top: 4px;
}
.games-lobby-card-glass .pill {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Coming soon — dark text for glass pane */
.games-lobby-coming-glass {
  text-align: center;
  padding: 20px 0 8px;
}
.games-lobby-coming-glass .games-lobby-coming-label {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.games-lobby-coming-glass .games-lobby-coming-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.games-lobby-coming-glass .pill {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Difficulty tabs row */
.games-difficulty-tabs {
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
}

/* ── 29.2  Layout shell (legacy — kept for transition) ─── */

.games-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 10%,
      rgba(220, 40, 160, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%,
      rgba(140, 20, 220, 0.12) 0%, transparent 55%),
    linear-gradient(160deg, #0a0a2e 0%, #111128 50%, #0d0d1a 100%);
}

/* ── 29.3  Header ────────────────────────────────────────── */

.games-header {
  flex-shrink: 0;
  position: relative;
  background: rgba(5, 5, 25, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 16px 20px 14px;
}

.games-header-chrome {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--chrome-gradient);
  opacity: 0.85;
}

.games-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.games-header-emoji {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(255, 61, 172, 0.5));
}

.games-header-text {
  flex: 1;
  min-width: 0;
}

.games-header-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.5vw, 32px);
  color: #ffffff;
  line-height: 1.1;
  text-shadow:
    0 0 20px rgba(255, 61, 172, 0.5),
    2px 2px 0 rgba(0, 0, 0, 0.4);
}

.games-header-sub {
  font-size: clamp(12px, 1.8vw, 15px);
  color: var(--color-moon-silver);
  font-weight: 700;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 29.4  Back + hint header buttons ───────────────────── */

.games-back-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 15px);
  color: var(--color-moon-silver);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background  var(--transition-fast),
    color       var(--transition-fast),
    transform   var(--transition-bounce);
  min-height: 44px;
}

.games-back-btn:active {
  transform: scale(0.93);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.games-hint-btn {
  background: rgba(255, 215, 0, 0.12);
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(11px, 1.6vw, 14px);
  color: rgba(255, 215, 0, 0.9);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background  var(--transition-fast),
    transform   var(--transition-bounce);
  min-height: 44px;
}

.games-hint-btn:active {
  transform: scale(0.93);
  background: rgba(255, 215, 0, 0.25);
}

/* ── 29.5  Scrollable body ───────────────────────────────── */

.games-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* ── 29.6  Lobby grid ────────────────────────────────────── */

.games-lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 700px;
}

/* ── 29.7  Lobby game card ───────────────────────────────── */

.games-lobby-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 20px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xl);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background     var(--transition-normal),
    border-color   var(--transition-normal),
    transform      var(--transition-bounce),
    box-shadow     var(--transition-normal);
  text-align: center;
  min-height: 260px;
}

.games-lobby-card:active {
  transform: scale(0.96);
  border-color: rgba(255, 61, 172, 0.55);
  box-shadow:
    0 0 30px rgba(255, 61, 172, 0.25),
    inset 0 0 16px rgba(255, 61, 172, 0.08);
}

/* Shine layer */
.games-lobby-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  border-radius: var(--radius-xl) var(--radius-xl) 60% 60%;
  pointer-events: none;
}

/* Glow blobs per game */
.games-lobby-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-xl);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.games-lobby-card:hover .games-lobby-card-glow,
.games-lobby-card:active .games-lobby-card-glow {
  opacity: 1;
}

.games-lobby-card-glow--chess {
  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(168, 85, 247, 0.15) 0%,
    transparent 70%
  );
}

.games-lobby-card-glow--checkers {
  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(255, 61, 172, 0.15) 0%,
    transparent 70%
  );
}

.games-lobby-card-emoji {
  font-size: clamp(52px, 9vw, 80px);
  line-height: 1;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 16px rgba(255, 61, 172, 0.4));
}
.games-lobby-card-emoji img {
  width: clamp(104px, 18vw, 160px);
  height: clamp(104px, 18vw, 160px);
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.games-lobby-card-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 3.5vw, 30px);
  color: #ffffff;
  line-height: 1.1;
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 16px rgba(255, 61, 172, 0.4),
    2px 2px 0 rgba(0, 0, 0, 0.3);
}

.games-lobby-card-desc {
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-moon-silver);
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  max-width: 180px;
}

.games-lobby-card-badge {
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

/* ── 29.8  Lobby coming soon strip ──────────────────────── */

.games-lobby-coming {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0 8px;
  width: 100%;
}

.games-lobby-coming-label {
  font-size: clamp(11px, 1.6vw, 14px);
  color: rgba(200, 214, 229, 0.45);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.games-lobby-coming-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 29.9  Captured pieces row ───────────────────────────── */

.games-captures-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 814px;
  margin-bottom: 12px; /* space between captures and board */
}

.games-captures {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 64px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.games-captures-label {
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  color: rgba(0, 0, 0, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 10px;
  white-space: nowrap;
}

.games-capture-piece {
  font-size: clamp(36px, 6vw, 52px);
  line-height: 1;
  opacity: 1;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols2', sans-serif;
}

/* Checkers captures are emoji circles — smaller than chess text pieces */
[id^="checkers-caps"] .games-capture-piece {
  font-size: clamp(20px, 3.5vw, 28px);
}

/* Captured computer pieces — white */
.games-capture-piece--computer {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Captured player pieces — conic gradient */
.games-capture-piece--player {
  background: conic-gradient(from 40deg, var(--t7), var(--t5), var(--t4), var(--t6), var(--t8), var(--t7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.games-captures-empty {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.2);
  font-weight: 700;
  font-style: italic;
}

/* ── 29.10  Board wrapper ────────────────────────────────── */

.games-board-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  justify-content: center;
}

.games-board-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* ── 29.11  Coordinate labels ────────────────────────────── */

.games-chess-coords-left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 4px 0 0;
  /* Height matches board — set implicitly by flex alignment */
  align-self: stretch;
}

.games-chess-coords-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 2px 0 0;
}

.games-coord {
  font-size: clamp(9px, 1.2vw, 12px);
  font-weight: 800;
  color: rgba(200, 214, 229, 0.40);
  text-align: center;
  line-height: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 29.12  Chess board ──────────────────────────────────── */

.games-chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(180, 185, 195, 0.5);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── 29.13  Chess cells ──────────────────────────────────── */

.games-chess-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background   var(--transition-fast),
    box-shadow   var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
}

/* Light squares — clean white with subtle warmth */
.games-chess-cell--light {
  background: rgba(255, 255, 255, 0.95);
}

/* Dark squares — solid blue-grey with inner bevel for tile depth */
.games-chess-cell--dark {
  background: linear-gradient(160deg, #b8bcc8 0%, #a8aebb 50%, #9ea4b4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Selected — light blue highlight border (like reference image) */
.games-chess-cell--selected {
  box-shadow: inset 0 0 0 3px rgba(80, 180, 240, 0.7);
}

/* Legal move target — subtle blue tint */
.games-chess-cell--legal {
  background: rgba(80, 180, 240, 0.15) !important;
}

.games-chess-cell--legal.games-chess-cell--light {
  background: rgba(80, 180, 240, 0.2) !important;
}

/* Last move — FROM square: dashed border */
.games-chess-cell--last-from {
  box-shadow: inset 0 0 0 2px rgba(80, 180, 240, 0.5);
}
.games-chess-cell--last-from::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(80, 180, 240, 0.4);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

/* Last move — TO square: solid blue border */
.games-chess-cell--last-to {
  box-shadow: inset 0 0 0 3px rgba(80, 180, 240, 0.6);
}

/* Hint — soft blue pulse */
.games-chess-cell--hint {
  box-shadow:
    inset 0 0 0 3px rgba(80, 180, 240, 0.7),
    inset 0 0 12px rgba(80, 180, 240, 0.2);
  animation: games-hint-pulse 1s ease-in-out infinite;
}

@keyframes games-hint-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 3px rgba(80, 180, 240, 0.5),
      inset 0 0 8px rgba(80, 180, 240, 0.15);
  }
  50% {
    box-shadow:
      inset 0 0 0 3px rgba(80, 180, 240, 0.8),
      inset 0 0 16px rgba(80, 180, 240, 0.3);
  }
}

/* ── 29.14  Chess pieces ─────────────────────────────────── */

.games-chess-piece {
  font-size: clamp(24px, 4.6vw, 48px);
  line-height: 1;
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  /* Force text rendering so ♟ doesn't become a color emoji on macOS */
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols2', sans-serif;
  -webkit-font-feature-settings: "liga" 0;
}

/* User's pieces — theme conic gradient fill */
.games-chess-piece--white {
  background: conic-gradient(from 40deg, var(--t7), var(--t5), var(--t4), var(--t6), var(--t8), var(--t7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

/* Computer's pieces — clean white */
.games-chess-piece--black {
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

/* ── 29.15  Legal move dot ───────────────────────────────── */

.games-chess-dot {
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0, 207, 255, 0.70);
  box-shadow:
    0 0 8px rgba(0, 207, 255, 0.60),
    0 0 16px rgba(0, 207, 255, 0.30);
  pointer-events: none;
  z-index: 1;
}

/* ── 29.16  Checkers board ───────────────────────────────── */

.games-checkers-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(180, 185, 195, 0.5);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ── 29.17  Checkers cells ───────────────────────────────── */

.games-checkers-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background   var(--transition-fast),
    box-shadow   var(--transition-fast);
}

/* Light squares — clean white with subtle warmth */
.games-checkers-cell--light {
  background: rgba(255, 255, 255, 0.95);
}

/* Dark squares — solid blue-grey with inner bevel for tile depth */
.games-checkers-cell--dark {
  background: linear-gradient(160deg, #b8bcc8 0%, #a8aebb 50%, #9ea4b4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

/* Selected — light blue highlight border */
.games-checkers-cell--selected {
  box-shadow: inset 0 0 0 3px rgba(80, 180, 240, 0.7);
}

/* Legal move target — subtle blue tint */
.games-checkers-cell--legal {
  background: rgba(80, 180, 240, 0.15) !important;
}

/* Last move — FROM square: dashed border */
.games-checkers-cell--last-from {
  box-shadow: inset 0 0 0 2px rgba(80, 180, 240, 0.5);
}
.games-checkers-cell--last-from::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(80, 180, 240, 0.4);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

/* Last move — TO square: solid blue border */
.games-checkers-cell--last-to {
  box-shadow: inset 0 0 0 3px rgba(80, 180, 240, 0.6);
}

/* Hint — soft blue pulse */
.games-checkers-cell--hint {
  box-shadow:
    inset 0 0 0 3px rgba(80, 180, 240, 0.7),
    inset 0 0 12px rgba(80, 180, 240, 0.2);
  animation: games-hint-pulse 1s ease-in-out infinite;
}

/* ── 29.18  Checkers pieces ──────────────────────────────── */

.games-checkers-piece {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 2.8vw, 24px);
  line-height: 1;
  pointer-events: none;
  transition: transform var(--transition-bounce);
}

/* User's pieces — theme conic gradient */
.games-checkers-piece--red {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.3) 0%, transparent 60%),
    conic-gradient(from 40deg, var(--t7), var(--t5), var(--t4), var(--t6), var(--t8), var(--t7));
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

/* Computer's pieces — soft grey-white */
.games-checkers-piece--black {
  background: radial-gradient(
    circle at 35% 30%,
    #ffffff 0%,
    #e0e4ee 50%,
    #c0c8d8 100%
  );
  border: 2px solid rgba(200, 205, 215, 0.7);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* King — subtle gold border */
.games-checkers-piece--king {
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(255, 215, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.6);
}

.games-checkers-piece--king.games-checkers-piece--red {
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 0 4px rgba(255, 215, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

.games-checkers-piece--king.games-checkers-piece--black {
  color: rgba(255, 215, 0, 0.85);
  text-shadow:
    0 0 4px rgba(255, 215, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ── 29.19  Controls row ─────────────────────────────────── */

.games-controls-row {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 740px;
  justify-content: center;
}

.games-ctrl-btn {
  flex: 1;
  max-width: 240px;
  font-size: clamp(14px, 2vw, 17px);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  min-height: 54px;
}

/* Dark text when inside glass panes */
.games-controls-pane .games-ctrl-btn,
.games-bottom-pane .games-ctrl-btn {
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.15);
}
.games-controls-pane .games-ctrl-btn:active,
.games-bottom-pane .games-ctrl-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

/* ── 29.20  Thinking overlay on board ────────────────────── */

.games-thinking-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 6px;
  pointer-events: none;
}

/* ── 29.21  Responsive ───────────────────────────────────── */

@media (max-width: 480px) {
  .games-lobby-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .games-lobby-card {
    padding: 24px 12px 20px;
    min-height: 200px;
    gap: 8px;
  }

  .games-lobby-card-desc {
    display: none;
  }

  .games-board-wrap {
    gap: 3px;
  }

  .games-body {
    padding: 8px 12px 12px;
    gap: 10px;
  }

  .games-controls-row {
    gap: 8px;
  }

  .games-ctrl-btn {
    font-size: 13px;
    padding: 12px 10px;
  }
}

@media (min-width: 600px) {
  .games-chess-piece {
    font-size: clamp(30px, 5.5vw, 56px);
  }

  .games-checkers-piece {
    font-size: clamp(18px, 3vw, 28px);
  }
}

/* ── 29.22  Difficulty bar ───────────────────────────────── */

.games-difficulty-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px 12px;
}

.games-diff-seg {
  display: flex;
  flex-direction: row;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.games-diff-btn {
  flex: 1;
  padding: 8px 20px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 15px);
  color: rgba(200, 214, 229, 0.60);
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition:
    background  var(--transition-fast),
    color       var(--transition-fast);
  min-height: 44px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.games-diff-btn:last-child {
  border-right: none;
}

.games-diff-btn:active {
  background: rgba(255, 255, 255, 0.08);
}

.games-diff-btn--active {
  background: var(--profile-accent);
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.20);
}

/* Responsive — tighten padding on small screens */
@media (max-width: 480px) {
  .games-difficulty-bar {
    padding: 8px 12px 10px;
  }

  .games-diff-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ── 29.x  Jigsaw Puzzle + Maze ──────────────────────────── */

.games-lobby-card-glow--puzzle {
  background:
    radial-gradient(ellipse at 30% 30%,
      rgba(0, 200, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%,
      rgba(255, 61, 172, 0.15) 0%, transparent 60%);
}

/* Theme picker grid */
.puzzle-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 700px;
  padding: 8px 0 20px;
}

.puzzle-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-bounce);
}

.puzzle-theme-card:active {
  transform: scale(0.96);
  border-color: rgba(0, 200, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.puzzle-theme-preview {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.puzzle-theme-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 1.8vw, 15px);
  color: #ffffff;
}

/* Puzzle game body */
.puzzle-game-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 12px;
  gap: 8px;
  position: relative;
}

/* Board wrapper — centers and constrains the board */
.puzzle-board-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

/* The puzzle grid */
.puzzle-board {
  display: grid;
  width: 100%;
  max-height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
}

/* Individual cell */
.puzzle-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  transition: background-color 0.15s;
}

.puzzle-cell--placed {
  border-color: transparent;
}

.puzzle-cell--highlight {
  background-color: rgba(0, 255, 100, 0.25);
  box-shadow: inset 0 0 20px rgba(0, 255, 100, 0.3);
}

.puzzle-cell--snap {
  animation: puzzleSnap 0.3s ease-out;
}

@keyframes puzzleSnap {
  0%   { transform: scale(1.15); }
  50%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Completed board — remove cell borders for seamless image */
.puzzle-board--complete .puzzle-cell {
  border-color: transparent;
}

.puzzle-board--complete {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

/* Reference image overlay */
.puzzle-ref-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}

.puzzle-ref-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Piece tray */
.puzzle-tray {
  flex-shrink: 0;
  height: 180px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  touch-action: pan-y;
}

.puzzle-tray-piece {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  cursor: grab;
  touch-action: none;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.puzzle-tray-piece:active {
  cursor: grabbing;
}

.puzzle-tray-piece--dragging {
  opacity: 0.2;
  transform: scale(0.9);
}

/* Floating piece during drag */
.puzzle-floater {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 4px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.3);
  opacity: 0.9;
}

/* Confetti — now handled by canvas-confetti library via ConfettiEffects */

/* Maze lobby glow */
.games-lobby-card-glow--maze {
  background:
    radial-gradient(ellipse at 30% 70%,
      rgba(0, 255, 100, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%,
      rgba(100, 80, 255, 0.18) 0%, transparent 60%);
}

/* Maze body */
.maze-body {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.maze-canvas {
  border-radius: 20px;
  touch-action: none;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .puzzle-theme-grid {
    gap: 10px;
  }

  .puzzle-tray {
    height: 140px;
  }

  .puzzle-tray-piece {
    width: 52px;
    height: 52px;
  }
}

/* ============================================================
   SECTION 24x. — SPANISH SCENE ENVIRONMENT
   24a  Scene container + layer stack
   24b  Sky layer
   24c  Background trees
   24d  Mist bands
   24e  Midground clearing
   24f  Foreground
   24g  Location base styles (shared)
   24h  Location: Word Tree
   24i  Location: Mochi's Log
   24j  Location: Crystal Pool
   24k  Location: Stone Circle
   24l  Location: Game Grove
   24m  Mochi character + states
   24n  Ambient animations
   24o  World progression states
   24p  Drawer
   24q  Drawer transitions
   24r  Backdrop
   24s  Scene HUD
   24t  Celebration / welcome moment
============================================================ */

/* ── 24a  Scene container ─────────────────────────────────── */

#spain-quest-app {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h)); /* full viewport minus nav bar */
  overflow: hidden;
  background: transparent;
}

.sq-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sq-layer {
  position: absolute;
  width: 100%;
  left: 0;
}

/* ── 24b  Sky layer ───────────────────────────────────────── */

.sq-layer-sky {
  top: 0;
  height: 44%;
  background: linear-gradient(
    180deg,
    #0a1a0f 0%,       /* deep jungle night at crown */
    #0d2a18 20%,
    #1a4a28 45%,
    #2a6a3a 65%,
    #3d8a4a 80%,
    #5aaa5a 92%,
    #7acc6a 100%      /* warm bright jungle green at horizon */
  );
  z-index: 1;
  overflow: visible;  /* allow games orbs to float here */
}

.sq-sun {
  position: absolute;
  bottom: 18%;
  left: 42%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fffde0 20%,
    #ffe566 55%,
    #ffb830 80%,
    transparent 100%
  );
  box-shadow:
    0 0 80px 30px rgba(255, 210, 50, 0.55),
    0 0 160px 80px rgba(255, 180, 0, 0.22),
    0 0 300px 120px rgba(255, 140, 0, 0.08);
  animation: sq-sun-pulse 8s ease-in-out infinite;
}

/* Sunray shafts through canopy */
.sq-sun::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 220, 80, 0.04) 8deg,
    transparent 16deg,
    rgba(255, 220, 80, 0.04) 24deg,
    transparent 32deg,
    rgba(255, 220, 80, 0.04) 40deg,
    transparent 48deg,
    rgba(255, 220, 80, 0.04) 56deg,
    transparent 64deg,
    rgba(255, 220, 80, 0.04) 72deg,
    transparent 80deg,
    rgba(255, 220, 80, 0.04) 88deg,
    transparent 96deg,
    rgba(255, 220, 80, 0.04) 104deg,
    transparent 360deg
  );
  border-radius: 50%;
  pointer-events: none;
  animation: sq-sun-pulse 8s ease-in-out infinite reverse;
}

.sq-cloud {
  position: absolute;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.10);
  filter: blur(12px);
}

.sq-cloud--1 {
  width: 320px;
  height: 50px;
  top: 15%;
  left: 5%;
  animation: sq-cloud-drift 22s linear infinite;
}

.sq-cloud--2 {
  width: 240px;
  height: 40px;
  top: 30%;
  right: 5%;
  animation: sq-cloud-drift 30s linear infinite reverse;
}

.sq-cloud--3 {
  width: 180px;
  height: 35px;
  top: 45%;
  left: 30%;
  opacity: 0.6;
  animation: sq-cloud-drift 18s linear infinite;
  animation-delay: -8s;
}

/* ── 24c  Background trees — dense jungle canopy ─────────── */

.sq-layer-bg-trees {
  top: 24%;
  height: 38%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0;
  overflow: hidden;
  /* Slight blur for atmospheric depth */
  filter: blur(0.8px) brightness(0.72);
}

.sq-bg-tree {
  position: relative;
  flex-shrink: 0;
  animation: sq-tree-sway 6s ease-in-out infinite;
  /* Heavy jungle canopy — wide spreading crown */
  border-radius: 48% 48% 12% 12%;
}

/* Two-layer gradient per tree — depth within canopy */
.sq-bg-tree::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 70% 60% at 50% 35%,
    rgba(30, 80, 20, 0.55) 0%,
    transparent 100%
  );
}

/* Warm rim light at crown peak — light filtering from above */
.sq-bg-tree::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(120, 200, 60, 0.18) 0%,
    transparent 70%
  );
}

/* Individual tree sizes — varied but all broad jungle crowns */
.sq-bg-tree--1 {
  width: 17%;
  height: 72%;
  background: linear-gradient(180deg, #0d2a0d 0%, #061406 100%);
  animation-delay: 0s;
}

.sq-bg-tree--2 {
  width: 20%;
  height: 95%;
  background: linear-gradient(180deg, #0f300f 0%, #071507 100%);
  animation-delay: 0.9s;
  border-radius: 45% 45% 10% 10%;
}

.sq-bg-tree--3 {
  width: 16%;
  height: 80%;
  background: linear-gradient(180deg, #0c280c 0%, #061306 100%);
  animation-delay: 1.8s;
}

.sq-bg-tree--4 {
  width: 22%;
  height: 100%;
  background: linear-gradient(180deg, #102e10 0%, #071607 100%);
  animation-delay: 0.4s;
  border-radius: 50% 50% 8% 8%;
}

.sq-bg-tree--5 {
  width: 18%;
  height: 88%;
  background: linear-gradient(180deg, #0e2c0e 0%, #071407 100%);
  animation-delay: 1.3s;
}

.sq-bg-tree--6 {
  width: 15%;
  height: 75%;
  background: linear-gradient(180deg, #0b260b 0%, #061206 100%);
  animation-delay: 2.1s;
}

.sq-bg-tree--7 {
  width: 21%;
  height: 92%;
  background: linear-gradient(180deg, #0f2e0f 0%, #071507 100%);
  animation-delay: 0.6s;
  border-radius: 46% 46% 10% 10%;
}

.sq-bg-tree--8 {
  width: 16%;
  height: 78%;
  background: linear-gradient(180deg, #0d2a0d 0%, #061306 100%);
  animation-delay: 1.5s;
}

/* ── 24d  Mist bands ──────────────────────────────────────── */

.sq-layer-mist {
  top: 36%;             /* 691px */
  height: 14%;
  z-index: 3;
  pointer-events: none;
}

.sq-mist-band {
  position: absolute;
  width: 120%;
  left: -10%;
  border-radius: 50%;
  background: rgba(200, 230, 255, 0.08);
  filter: blur(20px);
}

.sq-mist-band--1 {
  height: 80px;
  top: 10%;
  animation: sq-mist-drift 15s ease-in-out infinite;
}

.sq-mist-band--2 {
  height: 60px;
  top: 50%;
  animation: sq-mist-drift 20s ease-in-out infinite reverse;
  opacity: 0.6;
}

/* ── 24e  Midground clearing ──────────────────────────────── */

/* ── 24e  Midground clearing ──────────────────────────────── */

.sq-layer-mid {
  top: 34%;
  height: 56%;
  z-index: 4;
  /* Warm jungle ground — earthy, lit from above */
  background:
    radial-gradient(
      ellipse 90% 30% at 50% 100%,
      rgba(20, 55, 10, 0.90) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 60% 20% at 30% 90%,
      rgba(40, 80, 10, 0.50) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 50% 15% at 70% 85%,
      rgba(10, 60, 20, 0.45) 0%,
      transparent 100%
    );
}

/* Atmospheric jungle haze layer */
.sq-layer-jungle-haze {
  top: 30%;
  height: 12%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(80, 160, 60, 0.06) 40%,
    rgba(60, 140, 40, 0.10) 70%,
    transparent 100%
  );
  filter: blur(16px);
}

/* Progression elements */
.sq-week2-path { display: none; }
.sq-clearing-flowers .sq-flower { opacity: 0; transition: opacity 0.8s; }

/* Progression elements — hidden by default */
.sq-week2-path    { display: none; }
.sq-clearing-flowers .sq-flower { opacity: 0; transition: opacity 0.8s; }

/* ── 24f  Foreground ──────────────────────────────────────── */

.sq-layer-fg {
  bottom: 0;
  height: 16%;          /* 307px */
  z-index: 5;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 40, 5, 0.85) 40%,
    rgba(5, 25, 3, 0.95) 100%
  );
  pointer-events: none;
}

.sq-grass-tuft {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 80px;
  background: radial-gradient(
    ellipse at bottom,
    #1a5c0a, #0a2a04
  );
  border-radius: 50% 50% 0 0;
}

.sq-grass-tuft--1 { left: 3%;  height: 90px; }
.sq-grass-tuft--2 { left: 25%; height: 70px; }
.sq-grass-tuft--3 { left: 55%; height: 85px; }
.sq-grass-tuft--4 { right: 5%; height: 75px; }

.sq-fern {
  position: absolute;
  bottom: 5%;
  font-size: 64px;
  opacity: 0.85;
  animation: sq-tree-sway 7s ease-in-out infinite;
}

.sq-fern--1 { left: 0%;  animation-delay: 0.5s; }
.sq-fern--2 { right: 1%; animation-delay: 1.5s; }

/* ── 24g  Location base styles ────────────────────────────── */

.sq-location {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
}

.sq-location:active {
  transform: scale(0.94);
}

.sq-loc-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(100, 255, 120, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 0.4s;
}

.sq-loc-glow--primary {
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    rgba(255, 200, 50, 0.22) 0%,
    transparent 70%
  );
}

.sq-loc-marker {
  font-size: 36px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s, transform 0.5s;
  margin-top: 4px;
}

.sq-loc-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.90);
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(100, 255, 120, 0.4);
  margin-top: 6px;
  letter-spacing: 0.02em;
  text-align: center;
}

.sq-loc-label--primary {
  font-size: 36px;
  color: rgba(255, 235, 150, 0.95);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(255, 220, 50, 0.5);
}

.sq-location[data-state="active"] .sq-loc-glow {
  animation: sq-glow-pulse 2.5s ease-in-out infinite;
}

.sq-location[data-state="complete"] .sq-loc-marker {
  opacity: 1;
  transform: scale(1);
}

/* ── 24h  Location: Word Tree ─────────────────────────────── */

.sq-loc-word-tree {
  left: -2%;
  top: -18%;           /* bleeds up into sky layer */
  width: 300px;
  overflow: visible;
  z-index: 6;          /* above mid layer — foreground tree */
}

.sq-loc-tree-trunk {
  width: 64px;
  height: 200px;
  background: linear-gradient(
    180deg,
    #3a1e08 0%,
    #2a1405 40%,
    #1e0e03 100%
  );
  border-radius: 12px 12px 6px 6px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-shadow:
    6px 0 16px rgba(0, 0, 0, 0.5),
    -4px 0 10px rgba(0, 0, 0, 0.3);
}

/* Bark texture lines */
.sq-trunk-bark {
  position: absolute;
  left: 15%;
  right: 15%;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.25);
}

.sq-trunk-bark--1 { top: 25%; }
.sq-trunk-bark--2 { top: 55%; }

/* Roots spreading at base */
.sq-tree-roots {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 40px;
  z-index: 0;
}

.sq-tree-root {
  position: absolute;
  bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, #2a1405, #1a0c03);
  border-radius: 4px;
}

.sq-tree-root--l {
  width: 70px;
  left: 10px;
  transform: rotate(-25deg);
  transform-origin: top right;
}

.sq-tree-root--r {
  width: 70px;
  right: 10px;
  transform: rotate(25deg);
  transform-origin: top left;
}

/* Main canopy — massive, two-layer depth */
.sq-loc-tree-canopy {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 280px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sq-tree-sway 5s ease-in-out infinite;
  overflow: visible;
  background:
    radial-gradient(ellipse 65% 55% at 40% 45%, #2a8a18 0%, transparent 65%),
    radial-gradient(ellipse 90% 85% at 50% 55%, #1a6b10 30%, #0e4a08 70%, transparent 100%);
  box-shadow:
    0 0 60px rgba(40, 160, 20, 0.18),
    inset 0 -20px 40px rgba(0, 0, 0, 0.25);
}

/* Inner canopy depth layer */
.sq-canopy-inner {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(60, 180, 30, 0.20) 0%,
    rgba(20, 100, 10, 0.10) 60%,
    transparent 100%
  );
}

.sq-loc-leaf {
  position: absolute;
  font-size: 40px;
  animation: sq-leaf-flutter 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.sq-loc-leaf--1 { top: 18%; left: 10%;  animation-delay: 0s;   }
.sq-loc-leaf--2 { top: 55%; left: 60%;  animation-delay: 0.8s; font-size: 32px; }
.sq-loc-leaf--3 { top: 30%; left: 68%;  animation-delay: 1.6s; font-size: 28px; }
.sq-loc-leaf--4 { top: 68%; left: 20%;  animation-delay: 1.1s; font-size: 36px; }

/* Hanging vines */
.sq-vine {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(30, 100, 10, 0.80) 0%,
    rgba(20, 70, 5, 0.60) 60%,
    transparent 100%
  );
  animation: sq-tree-sway 7s ease-in-out infinite;
}

.sq-vine--1 {
  height: 120px;
  top: 160px;
  left: 38%;
  animation-delay: 0.3s;
}

.sq-vine--2 {
  height: 90px;
  top: 170px;
  left: 55%;
  animation-delay: 1.1s;
}

.sq-vine--3 {
  height: 140px;
  top: 155px;
  left: 22%;
  animation-delay: 0.7s;
}

/* ── 24i  Location: Mochi's Log ───────────────────────────── */

.sq-loc-mochi-log {
  left: 44%;
  top: 14%;
  transform: translateX(-50%);
  width: 380px;
  align-items: center;
}

.sq-log {
  position: relative;
  width: 340px;
  height: 80px;
  margin-top: 0;
}

.sq-log-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    #6b3c14 0%,
    #3a1d08 55%,
    #2a1005 100%
  );
  border-radius: 40px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.75),
    inset 0 3px 0 rgba(150, 90, 30, 0.55),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

.sq-log-moss {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 24px;
  background: linear-gradient(
    180deg,
    rgba(50, 160, 20, 0.80),
    transparent
  );
  border-radius: 50%;
  filter: blur(3px);
}

/* ── 24j  Location: Crystal Pool ─────────────────────────── */

.sq-loc-crystal-pool {
  right: -4%;
  top: 28%;
  width: 360px;
}

/* Pool glow — large ambient light */
.sq-loc-glow--pool {
  width: 400px;
  height: 200px;
  background: radial-gradient(
    ellipse,
    rgba(0, 200, 220, 0.18) 0%,
    transparent 70%
  );
  top: 60%;
}

/* Waterfall coming from above */
.sq-waterfall {
  position: absolute;
  top: -80px;
  right: 60px;
  width: 40px;
  height: 100px;
  overflow: hidden;
}

.sq-waterfall-stream {
  position: absolute;
  width: 6px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(140, 220, 255, 0.70) 30%,
    rgba(80, 180, 255, 0.85) 70%,
    transparent 100%
  );
  animation: sq-waterfall-flow 1.2s linear infinite;
}

.sq-waterfall-stream--1 { left: 4px;  animation-delay: 0s; }
.sq-waterfall-stream--2 { left: 16px; animation-delay: 0.4s; width: 4px; opacity: 0.7; }

@keyframes sq-waterfall-flow {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.sq-pool {
  position: relative;
  width: 340px;
  height: 180px;
}

.sq-pool-surface {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      ellipse 40% 50% at 45% 45%,
      rgba(0, 180, 220, 0.85) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse,
      rgba(0, 140, 200, 0.70) 0%,
      rgba(0, 80, 140, 0.88) 55%,
      rgba(0, 30, 60, 0.96) 100%
    );
  border-radius: 50%;
  box-shadow:
    0 0 70px rgba(0, 200, 240, 0.45),
    0 0 140px rgba(0, 160, 220, 0.18),
    inset 0 0 50px rgba(0, 200, 255, 0.22),
    inset 0 -10px 30px rgba(0, 0, 40, 0.40);
  position: relative;
  overflow: hidden;
}

/* Deep water centre */
.sq-pool-depth {
  position: absolute;
  top: 25%;
  left: 20%;
  right: 20%;
  bottom: 15%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(0, 20, 60, 0.55) 0%,
    transparent 100%
  );
}

.sq-pool-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 2px solid rgba(180, 240, 255, 0.50);
  animation: sq-ripple 4s ease-out infinite;
}

.sq-pool-ripple--1 { width: 70px;   height: 35px;  animation-delay: 0s;   }
.sq-pool-ripple--2 { width: 150px;  height: 75px;  animation-delay: 1.3s; }
.sq-pool-ripple--3 { width: 260px;  height: 130px; animation-delay: 2.6s; }

.sq-pool-fish {
  position: absolute;
  font-size: 26px;
  animation: sq-fish-drift 9s linear infinite;
  opacity: 0.88;
}

.sq-pool-fish--1 { top: 28%; animation-delay: 0s;  animation-duration: 10s; }
.sq-pool-fish--2 { top: 52%; animation-delay: 3.5s; animation-duration: 12s; font-size: 20px; }
.sq-pool-fish--3 { top: 18%; animation-delay: 7s;  animation-duration: 9s;  font-size: 22px; }

@keyframes sq-fish-drift {
  0%   { transform: translateX(-30px); opacity: 0;    }
  8%   { opacity: 0.88; }
  92%  { opacity: 0.88; }
  100% { transform: translateX(320px); opacity: 0;    }
}

/* Lily pads */
.sq-pool-lilypad {
  position: absolute;
  font-size: 28px;
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.sq-pool-lilypad--1 { top: 15%; left: 12%;  }
.sq-pool-lilypad--2 { top: 58%; left: 62%;  font-size: 22px; opacity: 0.70; }
.sq-pool-lilypad--3 { top: 38%; right: 8%;  font-size: 24px; }

/* ── 24k  Location: Rock Formation ───────────────────────── */

.sq-loc-stone-circle {
  right: 1%;
  top: 0%;
  width: 240px;
}

/* Amber glow behind rocks */
.sq-loc-glow--amber {
  width: 280px;
  height: 280px;
  background: radial-gradient(
    circle,
    rgba(255, 140, 20, 0.14) 0%,
    transparent 70%
  );
}

.sq-stones {
  position: relative;
  width: 220px;
  height: 260px;
}

/* Amber glow at base of formation */
.sq-stone-base-glow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 140, 30, 0.22) 0%,
    transparent 70%
  );
  filter: blur(8px);
  z-index: 0;
}

.sq-stone {
  position: absolute;
  border-radius: 28% 28% 18% 18%;
  z-index: 1;
}

/* Left flanking boulder */
.sq-stone--1 {
  width: 70px;
  height: 120px;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    160deg,
    #5a5a52 0%,
    #3a3a30 40%,
    #252520 100%
  );
  box-shadow:
    4px 0 16px rgba(0, 0, 0, 0.55),
    inset 2px 2px 0 rgba(255, 255, 255, 0.06);
  border-radius: 30% 25% 18% 22%;
}

/* Central dominant spire */
.sq-stone--2 {
  width: 100px;
  height: 240px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: linear-gradient(
    175deg,
    #6a6a60 0%,
    #484840 25%,
    #333328 60%,
    #1e1e18 100%
  );
  border-radius: 22% 22% 12% 12%;
  box-shadow:
    0 0 40px rgba(255, 140, 30, 0.14),
    6px 0 20px rgba(0, 0, 0, 0.65),
    inset 3px 3px 0 rgba(255, 255, 255, 0.07),
    inset -2px 0 8px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* Spire carved face — textured surface */
.sq-spire-face {
  position: absolute;
  top: 15%;
  left: 20%;
  right: 20%;
  bottom: 10%;
  background: linear-gradient(
    180deg,
    rgba(255, 160, 40, 0.08) 0%,
    rgba(255, 120, 20, 0.05) 50%,
    transparent 100%
  );
  border-left: 1px solid rgba(255, 180, 60, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.20);
}

/* Moss on spire */
.sq-spire-moss {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(30, 100, 10, 0.35) 100%
  );
}

/* Right flanking boulder */
.sq-stone--3 {
  width: 65px;
  height: 110px;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    160deg,
    #525248 0%,
    #363630 40%,
    #22221e 100%
  );
  box-shadow:
    -4px 0 14px rgba(0, 0, 0, 0.50),
    inset 2px 2px 0 rgba(255, 255, 255, 0.05);
  border-radius: 25% 30% 20% 18%;
}

/* Carved glyph on spire */
.sq-stone-glyph {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 52px;
  filter:
    drop-shadow(0 0 16px rgba(255, 180, 40, 1.0))
    drop-shadow(0 0 30px rgba(255, 140, 20, 0.70));
  animation: sq-glyph-pulse 3s ease-in-out infinite;
  z-index: 3;
}

/* ── 24l  Location: Game Grove ────────────────────────────── */

.sq-loc-game-grove {
  left: 2%;
  top: 8%;
  width: 220px;
}

.sq-grove {
  position: relative;
  width: 200px;
  height: 180px;
}

.sq-grove-tree {
  position: absolute;
  bottom: 0;
  background: #0a1a0a;
  border-radius: 50% 50% 0 0;
}

.sq-grove-tree--1 { width: 80px;  height: 150px; left: 0;   }
.sq-grove-tree--2 { width: 95px;  height: 180px; left: 55px; }
.sq-grove-tree--3 { width: 75px;  height: 140px; right: 0;  }

.sq-grove-orb {
  position: absolute;
  font-size: 52px;
  opacity: 0.55;
  animation: sq-orb-float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 220, 50, 0.7));
  transition: opacity 0.8s;
}

.sq-grove-orb--1 { top: 8%;  left: 10%;  animation-delay: 0s;   }
.sq-grove-orb--2 { top: 20%; left: 44%;  animation-delay: 0.7s; }
.sq-grove-orb--3 { top: 3%;  right: 5%;  animation-delay: 1.4s; }

/* ── 24m  Mochi character ─────────────────────────────────── */

/* ── 24m  Character image (Mochi / Pixel) ────────────────── */

.sq-mochi {
  display: block;
  width: 320px;
  height: 320px;
  object-fit: contain;
  object-position: bottom center;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.65));
}

/* ── State animations ── */

.sq-mochi[data-state="waiting"] {
  animation: sq-char-breathe 4s ease-in-out infinite;
}

.sq-mochi[data-state="waving"] {
  animation: sq-char-wave 0.6s ease-in-out 5;
}

.sq-mochi[data-state="sleeping"] {
  animation: sq-char-sleep 5s ease-in-out infinite;
}

.sq-mochi[data-state="celebrating"] {
  animation: sq-char-celebrate 0.35s ease-in-out 6;
}

.sq-mochi[data-state="crowned"] {
  animation: sq-char-crowned 3s ease-in-out infinite;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.65))
          drop-shadow(0 0 28px rgba(255, 200, 50, 0.50));
}

.sq-mochi[data-state="beckoning"] {
  animation: sq-char-beckon 1.4s ease-in-out infinite;
}

.sq-mochi[data-state="looking-left"] {
  transform: scaleX(-1);
  transition: transform 0.25s ease;
}

.sq-mochi[data-state="looking-right"] {
  transform: scaleX(1);
  transition: transform 0.25s ease;
}

/* Pixel sleeping — powered down */
#spain-quest-app[data-theme="space"] .sq-mochi[data-state="sleeping"] {
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.65))
          brightness(0.35) saturate(0.2);
}

/* ── Character state keyframes ── */

@keyframes sq-char-breathe {
  0%, 100% { transform: translateY(0)    scale(1);      }
  50%       { transform: translateY(-6px) scale(1.015); }
}

@keyframes sq-char-wave {
  0%, 100% { transform: rotate(0deg)   translateY(0);    }
  25%       { transform: rotate(4deg)  translateY(-4px); }
  75%       { transform: rotate(-4deg) translateY(-4px); }
}

@keyframes sq-char-sleep {
  0%, 100% { transform: translateY(0)    rotate(0deg);   }
  50%       { transform: translateY(4px)  rotate(1.5deg); }
}

@keyframes sq-char-celebrate {
  0%, 100% { transform: translateY(0)     scale(1);    }
  50%       { transform: translateY(-20px) scale(1.06); }
}

@keyframes sq-char-crowned {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-6px); }
}

@keyframes sq-char-beckon {
  0%, 100% { transform: translateY(0)    scale(1);     }
  50%       { transform: translateY(-8px) scale(1.02); }
}

/* ── 24n  Ambient animations ──────────────────────────────── */

@keyframes sq-sun-pulse {
  0%, 100% { box-shadow: 0 0 60px 20px rgba(255,220,50,0.5), 0 0 120px 60px rgba(255,200,0,0.2); }
  50%       { box-shadow: 0 0 80px 30px rgba(255,220,50,0.7), 0 0 160px 80px rgba(255,200,0,0.3); }
}

@keyframes sq-cloud-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(40px); }
  100% { transform: translateX(0); }
}

@keyframes sq-tree-sway {
  0%, 100% { transform: rotate(0deg);    transform-origin: bottom center; }
  25%       { transform: rotate(1.5deg); transform-origin: bottom center; }
  75%       { transform: rotate(-1deg);  transform-origin: bottom center; }
}

@keyframes sq-mist-drift {
  0%, 100% { transform: translateX(0); opacity: 0.08; }
  50%       { transform: translateX(30px); opacity: 0.14; }
}

@keyframes sq-leaf-flutter {
  0%, 100% { transform: rotate(0deg) scale(1);    }
  33%       { transform: rotate(8deg) scale(1.05); }
  66%       { transform: rotate(-6deg) scale(0.96); }
}

@keyframes sq-ripple {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

@keyframes sq-pool-shimmer {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%       { opacity: 1.0; transform: scale(1.1); }
}

@keyframes sq-glyph-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,200,50,0.8)); }
  50%       { filter: drop-shadow(0 0 20px rgba(255,200,50,1.0)); }
}

@keyframes sq-orb-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-12px); }
}

@keyframes sq-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1);    }
  50%       { opacity: 1.0; transform: translate(-50%,-50%) scale(1.15); }
}

@keyframes sq-mochi-breathe {
  0%, 100% { transform: translateX(-50%) scaleY(1);    }
  50%       { transform: translateX(-50%) scaleY(1.03); }
}

@keyframes sq-mochi-wave {
  0%, 100% { transform: rotate(20deg);  }
  50%       { transform: rotate(-30deg); }
}

@keyframes sq-mochi-beckon {
  0%, 100% { transform: rotate(20deg);  }
  50%       { transform: rotate(-10deg); }
}

@keyframes sq-mochi-sleep-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg);   }
  50%       { transform: translateX(-50%) rotate(3deg);  }
}

@keyframes sq-mochi-zzz-float {
  0%   { transform: translateY(0)    scale(1.0); opacity: 1; }
  100% { transform: translateY(-30px) scale(0.7); opacity: 0; }
}

@keyframes sq-mochi-celebrate {
  0%, 100% { transform: translateX(-50%) translateY(0);    }
  50%       { transform: translateX(-50%) translateY(-16px); }
}

/* ── 24o  World progression states ───────────────────────── */

/* Day 1 — first flower blooms */
.sq-scene[data-days-complete="1"] .sq-flower--1,
.sq-scene[data-days-complete="2"] .sq-flower--1,
.sq-scene[data-days-complete="2"] .sq-flower--2,
.sq-scene[data-days-complete="3"] .sq-flower--1,
.sq-scene[data-days-complete="3"] .sq-flower--2,
.sq-scene[data-days-complete="3"] .sq-flower--3,
.sq-scene[data-days-complete="4"] .sq-flower--1,
.sq-scene[data-days-complete="4"] .sq-flower--2,
.sq-scene[data-days-complete="4"] .sq-flower--3,
.sq-scene[data-days-complete="4"] .sq-flower--4,
.sq-scene[data-days-complete="5"] .sq-flower--1,
.sq-scene[data-days-complete="5"] .sq-flower--2,
.sq-scene[data-days-complete="5"] .sq-flower--3,
.sq-scene[data-days-complete="5"] .sq-flower--4,
.sq-scene[data-days-complete="5"] .sq-flower--5,
.sq-scene[data-days-complete="6"] .sq-flower--1,
.sq-scene[data-days-complete="6"] .sq-flower--2,
.sq-scene[data-days-complete="6"] .sq-flower--3,
.sq-scene[data-days-complete="6"] .sq-flower--4,
.sq-scene[data-days-complete="6"] .sq-flower--5,
.sq-scene[data-days-complete="7"] .sq-flower--1,
.sq-scene[data-days-complete="7"] .sq-flower--2,
.sq-scene[data-days-complete="7"] .sq-flower--3,
.sq-scene[data-days-complete="7"] .sq-flower--4,
.sq-scene[data-days-complete="7"] .sq-flower--5 {
  opacity: 1;
}

/* Day 3 — Game Grove orbs fully lit */
.sq-scene[data-days-complete="3"] .sq-grove-orb,
.sq-scene[data-days-complete="4"] .sq-grove-orb,
.sq-scene[data-days-complete="5"] .sq-grove-orb,
.sq-scene[data-days-complete="6"] .sq-grove-orb,
.sq-scene[data-days-complete="7"] .sq-grove-orb {
  opacity: 1;
}

/* Day 5 — path to Week 2 appears */
.sq-scene[data-days-complete="5"] .sq-week2-path,
.sq-scene[data-days-complete="6"] .sq-week2-path,
.sq-scene[data-days-complete="7"] .sq-week2-path {
  display: block;
}

/* Week 1 complete — warm golden light overlay */
.sq-scene[data-days-complete="7"] {
  filter: brightness(1.08) saturate(1.1);
}

/* ── 24p  Drawer ──────────────────────────────────────────── */

.sq-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 87%;
  background: rgba(8, 18, 8, 0.97);
  border-radius: 28px 28px 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Start off-screen */
  transform: translateY(100%);
  will-change: transform;
}

.sq-drawer-top-edge {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 42px;
  pointer-events: none;
  z-index: 1;
}

.sq-drawer-top-edge svg {
  width: 100%;
  height: 100%;
}

.sq-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 16px;
  border-bottom: 1px solid rgba(100, 200, 100, 0.12);
  flex-shrink: 0;
  min-height: 80px;
}

.sq-drawer-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sq-drawer-emoji {
  font-size: 40px;
}

.sq-drawer-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 40px;
  color: rgba(180, 255, 180, 0.95);
  text-shadow: 0 0 20px rgba(100, 255, 100, 0.4);
}

.sq-drawer-close {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(100, 200, 100, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(200, 255, 200, 0.8);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.sq-drawer-close:active {
  transform: scale(0.90);
  background: rgba(255, 255, 255, 0.14);
}

.sq-drawer-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 20px 40px;
  -webkit-overflow-scrolling: touch;
}

/* ── 24q  Drawer transitions ──────────────────────────────── */

.sq-drawer--open {
  transform: translateY(0);
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Closing: faster, ease-in */
.sq-drawer:not(.sq-drawer--open) {
  transition: transform 280ms ease-in;
}

/* ── 24r  Backdrop ────────────────────────────────────────── */

.sq-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10;
  pointer-events: none;
  transition: background 300ms ease;
}

.sq-backdrop--visible {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

/* ── 24s  Top info bar + Bottom dock ──────────────────────── */

/* ── Top info header ── */
.sq-home-header {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.sq-home-week-label {
  font-family: 'Fredoka One', cursive;
  font-weight: 400;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.sq-home-progress {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sq-progress-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.sq-progress-dot--done {
  background: rgba(255, 200, 60, 0.85);
  border-color: rgba(255, 220, 100, 0.60);
  box-shadow: 0 0 6px rgba(255, 200, 60, 0.40);
}

/* ── Bottom dock ── */
.sq-home-dock {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  gap: 20px;
  padding: 10px 28px;
  background: rgba(0, 0, 0, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sq-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 22px;
  min-width: 88px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.sq-dock-btn:active {
  transform: scale(0.92);
  filter: brightness(1.3);
}

.sq-dock-icon {
  width: 47px;
  height: 47px;
  flex-shrink: 0;
}

.sq-dock-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.60);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── Per-button color tints ── */
/* Words — warm blue */
.sq-dock-btn--words {
  background: rgba(80, 160, 255, 0.12);
  border-color: rgba(80, 160, 255, 0.25);
}
.sq-dock-btn--words .sq-dock-icon { color: rgba(120, 190, 255, 0.95); }
.sq-dock-btn--words .sq-dock-label { color: rgba(140, 200, 255, 0.95); }

/* Study — amber/gold */
.sq-dock-btn--study {
  background: rgba(255, 190, 50, 0.12);
  border-color: rgba(255, 190, 50, 0.25);
}
.sq-dock-btn--study .sq-dock-icon { color: rgba(255, 210, 100, 0.95); }
.sq-dock-btn--study .sq-dock-label { color: rgba(255, 215, 120, 0.95); }

/* Games — soft purple */
.sq-dock-btn--games {
  background: rgba(180, 120, 255, 0.12);
  border-color: rgba(180, 120, 255, 0.25);
}
.sq-dock-btn--games .sq-dock-icon { color: rgba(200, 160, 255, 0.95); }
.sq-dock-btn--games .sq-dock-label { color: rgba(210, 170, 255, 0.95); }

/* Map — soft green */
.sq-dock-btn--map {
  background: rgba(80, 220, 140, 0.12);
  border-color: rgba(80, 220, 140, 0.25);
}
.sq-dock-btn--map .sq-dock-icon { color: rgba(120, 235, 170, 0.95); }
.sq-dock-btn--map .sq-dock-label { color: rgba(130, 240, 180, 0.95); }

/* ── 24t  Clearing flowers (positioned) ──────────────────── */

.sq-clearing-flowers {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  pointer-events: none;
}

.sq-flower {
  position: absolute;
  font-size: 40px;
  transition: opacity 0.8s ease;
}

.sq-flower--1 { bottom: 20px; left: 30%;  font-size: 36px; }
.sq-flower--2 { bottom: 40px; left: 45%;  font-size: 44px; }
.sq-flower--3 { bottom: 15px; right: 28%; font-size: 38px; }
.sq-flower--4 { bottom: 50px; left: 20%;  font-size: 32px; }
.sq-flower--5 { bottom: 30px; right: 18%; font-size: 42px; }

.sq-week2-path {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.sq-path-line {
  width: 4px;
  height: 80px;
  background: linear-gradient(
    180deg,
    rgba(100, 200, 100, 0.6),
    transparent
  );
  margin: 0 auto 8px;
  border-radius: 2px;
}

.sq-path-label {
  font-family: 'Nunito', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: rgba(150, 255, 150, 0.7);
  text-shadow: 0 0 10px rgba(100, 200, 100, 0.5);
}

/* ── 24u  Day Modal ───────────────────────────────────────── */

.sq-day-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.70);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 280ms ease;
  padding-bottom: var(--nav-h); /* nav bar height */
}

.sq-day-modal-overlay.modal-open {
  opacity: 1;
}

.sq-day-modal {
  width: 100%;
  max-width: 740px;
  max-height: 88vh;
  background: rgba(8, 18, 8, 0.97);
  border-radius: 28px 28px 0 0;
  border-top: 2px solid rgba(100, 200, 100, 0.20);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 28px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  scrollbar-width: none;
}

.sq-day-modal::-webkit-scrollbar {
  display: none;
}

/* Close button */
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(100, 200, 100, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(200, 255, 200, 0.8);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.18s, transform 0.15s;
  line-height: 1;
}

.modal-close-btn:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.14);
}

/* ── Story teaser ── */

.sq-modal-story-teaser {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(20, 60, 20, 0.55);
  border: 1px solid rgba(100, 200, 100, 0.20);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 4px;
}

.sq-modal-story-companion {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(100, 255, 120, 0.35));
}

.sq-modal-story-text {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 700;
  color: rgba(200, 255, 200, 0.92);
  line-height: 1.55;
  font-style: italic;
}

/* ── Story resolution — same shape, warmer tone ── */

.sq-modal-story-resolution {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(40, 60, 10, 0.65);
  border: 1px solid rgba(180, 255, 100, 0.25);
  border-radius: 18px;
  padding: 18px 20px;
  margin-top: 4px;
}

.sq-modal-story-resolution .sq-modal-story-companion {
  filter: drop-shadow(0 0 12px rgba(200, 255, 80, 0.50));
}

.sq-modal-story-resolution .sq-modal-story-text {
  color: rgba(220, 255, 160, 0.95);
}

/* ── Modal header ── */

.sq-modal-day-emoji {
  font-size: 56px;
  text-align: center;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(100, 255, 120, 0.35));
  margin-top: 4px;
}

.sq-modal-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(26px, 4vw, 38px);
  color: rgba(180, 255, 180, 0.95);
  text-align: center;
  line-height: 1.1;
  text-shadow:
    0 0 20px rgba(100, 255, 100, 0.35),
    2px 2px 0 rgba(0, 0, 0, 0.4);
}

.sq-modal-subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  color: rgba(160, 220, 160, 0.80);
  text-align: center;
}

/* ── Section labels ── */

.sq-modal-section-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.4vw, 22px);
  color: rgba(140, 220, 140, 0.85);
  letter-spacing: 0.03em;
  margin-top: 4px;
}

/* ── Activity block ── */

.sq-modal-activity {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  color: rgba(220, 240, 220, 0.90);
  line-height: 1.55;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Tips ── */

.sq-tip {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 1.9vw, 17px);
  font-weight: 700;
  color: rgba(200, 230, 200, 0.80);
  line-height: 1.5;
  padding: 10px 16px;
  border-left: 3px solid rgba(100, 200, 100, 0.40);
  background: rgba(100, 200, 100, 0.05);
  border-radius: 0 10px 10px 0;
}

/* ── Today's words ── */

.sq-modal-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sq-word-pill {
  background: rgba(0, 180, 160, 0.14);
  border: 1.5px solid rgba(0, 200, 180, 0.30);
  border-radius: 99px;
  padding: 10px 20px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(180, 255, 240, 0.88);
  cursor: pointer;
  transition:
    background  0.18s ease,
    border-color 0.18s ease,
    transform   0.12s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.sq-word-pill:active {
  transform: scale(0.93);
}

.sq-word-pill.heard {
  background: rgba(0, 200, 140, 0.22);
  border-color: rgba(0, 220, 160, 0.55);
  color: rgba(160, 255, 210, 0.95);
}

/* ── Hook progress checklist ── */

.sq-modal-hook-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sq-hook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 1.9vw, 17px);
  font-weight: 700;
  color: rgba(180, 200, 180, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px 16px;
  transition: border-color 0.2s, background 0.2s;
}

.sq-hook-row.met {
  color: rgba(160, 255, 180, 0.90);
  background: rgba(0, 200, 100, 0.08);
  border-color: rgba(0, 200, 100, 0.22);
}

.sq-hook-count {
  font-size: clamp(12px, 1.6vw, 15px);
  color: rgba(160, 200, 160, 0.65);
  font-weight: 800;
  margin-left: 8px;
  white-space: nowrap;
}

.sq-hook-row.met .sq-hook-count {
  color: rgba(120, 220, 140, 0.80);
}

/* ── Quiz + self-report + practice activity buttons ── */

.sq-modal-quiz-btn {
  width: 100%;
}

.sq-modal-self-report-btn {
  width: 100%;
}

.sq-modal-voice-btn,
.sq-modal-game-btn {
  width: 100%;
}

/* ── Complete / missing block ── */

.sq-modal-complete {
  margin-top: 8px;
}

.sq-modal-complete-text {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 3vw, 28px);
  color: rgba(200, 255, 160, 0.95);
  text-align: center;
  padding: 20px;
  background: rgba(0, 180, 80, 0.12);
  border: 1px solid rgba(0, 200, 100, 0.25);
  border-radius: 16px;
  text-shadow: 0 0 16px rgba(100, 255, 120, 0.40);
}

.sq-modal-hook-missing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: rgba(255, 160, 20, 0.08);
  border: 1px solid rgba(255, 180, 40, 0.20);
  border-radius: 14px;
}

.sq-modal-missing-label {
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 800;
  color: rgba(255, 200, 100, 0.70);
  margin-bottom: 4px;
}

.sq-modal-missing-item {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 1.9vw, 17px);
  font-weight: 700;
  color: rgba(255, 210, 130, 0.85);
  line-height: 1.4;
}
/* ── 24v  Games tab bar ───────────────────────────────────── */

.sq-games-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

.sq-games-tabs-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.sq-games-tab-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sq-games-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition:
    background  0.18s ease,
    border-color 0.18s ease,
    transform   0.12s ease;
  min-height: 72px;
}

.sq-games-tab:active {
  transform: scale(0.93);
}

.sq-games-tab--active {
  background: var(--sq-tab-active-bg,   rgba(100, 200, 100, 0.18));
  border-color: var(--sq-tab-active-border, rgba(100, 200, 100, 0.55));
  box-shadow: 0 0 12px var(--sq-tab-active-glow, rgba(100, 200, 100, 0.20));
}

.sq-games-tab-emoji {
  font-size: 28px;
  line-height: 1;
}

.sq-games-tab-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(11px, 1.6vw, 14px);
  color: rgba(220, 240, 220, 0.85);
  text-align: center;
  line-height: 1.1;
}

.sq-games-tab--active .sq-games-tab-name {
  color: var(--sq-tab-active-text, rgba(160, 255, 160, 0.95));
}

/* Content area — flex container, vertically centers all game content */
.sq-games-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Pick prompt */
.sq-games-pick-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 24px;
  opacity: 0.60;
}

.sq-games-pick-emoji {
  font-size: 48px;
}

.sq-games-pick-text {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 2.8vw, 24px);
  color: rgba(200, 240, 200, 0.80);
  text-align: center;
}

/* Start screen */
.sq-games-start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px 40px;
  text-align: center;
}

.sq-games-start-emoji {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 0 16px var(--sq-glow, rgba(100, 255, 120, 0.35)));
}

.sq-games-start-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--sq-title-color, rgba(180, 255, 180, 0.95));
  text-shadow: 0 0 20px var(--sq-glow, rgba(100, 255, 120, 0.30));
  line-height: 1.1;
}

.sq-games-start-desc {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 700;
  color: rgba(200, 230, 200, 0.80);
  max-width: 340px;
  line-height: 1.5;
}

.sq-games-start-btn {
  margin-top: 8px;
  min-width: 180px;
  font-size: clamp(18px, 2.6vw, 24px);
  padding: 18px 36px;
}

/* ── 24u addition — story previously / teaser / resolution ── */

.sq-modal-story-previously {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 12px 12px 0;
}

.sq-modal-story-previously .sq-modal-story-companion {
  font-size: 22px;
  flex-shrink: 0;
  opacity: 0.6;
}

.sq-modal-story-text--previously {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  white-space: pre-line;
}

.sq-modal-story-teaser {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.07);
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 0 12px 12px 0;
}

.sq-modal-story-teaser .sq-modal-story-companion {
  font-size: 26px;
  flex-shrink: 0;
}

.sq-modal-story-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-line;
}

/* ── Collapsible story section ── */
.sq-modal-story-wrap {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.sq-modal-story-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  text-align: left;
}

.sq-modal-story-toggle:hover {
  background: rgba(255,255,255,0.09);
}

.sq-modal-story-toggle-label {
  flex: 1;
  font-weight: 500;
}

.sq-modal-story-toggle-chevron {
  font-size: 18px;
  transition: transform 0.25s ease;
  display: inline-block;
}

.sq-modal-story-wrap--open .sq-modal-story-toggle-chevron {
  transform: rotate(90deg);
}

.sq-modal-story-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.sq-modal-story-wrap--open .sq-modal-story-body {
  max-height: 1000px;
}

.sq-modal-story-resolution {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  margin-top: 16px;
  background: rgba(255, 215, 0, 0.06);
  border-left: 2px solid rgba(255, 215, 0, 0.30);
  border-radius: 0 12px 12px 0;
}

.sq-modal-story-resolution .sq-modal-story-companion {
  font-size: 26px;
  flex-shrink: 0;
}

/* ── 24w  Compact drawer ──────────────────────────────────── */

.sq-drawer--compact {
  height: 52%;
}

/* ── Study view tabs (Flashcards / Quiz) ── */
.sq-study-tabs {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--sq-drawer-divider, rgba(255, 255, 255, 0.10));
  margin-bottom: 12px;
}

.sq-study-tab {
  flex: 1;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.sq-study-tab--active {
  background: var(--sq-tab-active-bg, rgba(100, 200, 100, 0.18));
  border-color: var(--sq-tab-active-border, rgba(100, 200, 100, 0.55));
  color: var(--sq-tab-active-text, rgba(160, 255, 160, 0.95));
  box-shadow: 0 0 12px var(--sq-tab-active-glow, rgba(100, 200, 100, 0.20));
}

/* ── 24x  Per-theme variables ─────────────────────────────── */

/*
  jungle — ages 3–5 — Mochi's world
  Warm greens, amber, golden light.
*/
#spain-quest-app[data-theme="jungle"] {
  --sq-drawer-bg:           rgba(8, 18, 8, 0.97);
  --sq-drawer-border:       rgba(100, 200, 100, 0.20);
  --sq-drawer-title-color:  rgba(180, 255, 180, 0.95);
  --sq-drawer-title-glow:   rgba(100, 255, 100, 0.40);
  --sq-drawer-close-border: rgba(100, 200, 100, 0.30);
  --sq-drawer-divider:      rgba(100, 200, 100, 0.12);
  --sq-header-label-color:  rgba(255, 220, 140, 0.95);
  --sq-dot-done-bg:         rgba(255, 200, 60, 0.85);
  --sq-dot-done-border:     rgba(255, 220, 100, 0.60);
  --sq-dot-done-glow:       rgba(255, 200, 60, 0.40);
  --sq-glow:                rgba(100, 255, 120, 0.35);
  --sq-title-color:         rgba(180, 255, 180, 0.95);
  --sq-tab-active-bg:       rgba(100, 200, 100, 0.18);
  --sq-tab-active-border:   rgba(100, 200, 100, 0.55);
  --sq-tab-active-glow:     rgba(100, 200, 100, 0.20);
  --sq-tab-active-text:     rgba(160, 255, 160, 0.95);
  --sq-btn-primary-bg:      linear-gradient(145deg, rgba(60, 180, 60, 0.85), rgba(30, 120, 30, 0.80));
  --sq-btn-primary-border:  rgba(80, 200, 80, 0.60);
  --sq-btn-primary-shadow:  rgba(60, 180, 60, 0.35);
}

/*
  space — ages 5+ — Pixel's world
  Deep blue, cyan, electric purple.
*/
#spain-quest-app[data-theme="space"] {
  --sq-drawer-bg:           rgba(4, 8, 28, 0.97);
  --sq-drawer-border:       rgba(0, 180, 255, 0.20);
  --sq-drawer-title-color:  rgba(140, 220, 255, 0.95);
  --sq-drawer-title-glow:   rgba(0, 200, 255, 0.40);
  --sq-drawer-close-border: rgba(0, 180, 255, 0.30);
  --sq-drawer-divider:      rgba(0, 180, 255, 0.12);
  --sq-header-label-color:  rgba(140, 220, 255, 0.95);
  --sq-dot-done-bg:         rgba(0, 200, 255, 0.85);
  --sq-dot-done-border:     rgba(0, 220, 255, 0.60);
  --sq-dot-done-glow:       rgba(0, 200, 255, 0.40);
  --sq-glow:                rgba(0, 200, 255, 0.35);
  --sq-title-color:         rgba(140, 220, 255, 0.95);
  --sq-tab-active-bg:       rgba(0, 160, 255, 0.18);
  --sq-tab-active-border:   rgba(0, 180, 255, 0.55);
  --sq-tab-active-glow:     rgba(0, 180, 255, 0.20);
  --sq-tab-active-text:     rgba(140, 220, 255, 0.95);
  --sq-btn-primary-bg:      linear-gradient(145deg, rgba(0, 140, 220, 0.85), rgba(0, 80, 180, 0.80));
  --sq-btn-primary-border:  rgba(0, 180, 255, 0.60);
  --sq-btn-primary-shadow:  rgba(0, 160, 255, 0.35);
}

/* Wire the variables into the actual elements */

#spain-quest-app[data-theme] .sq-drawer,
#spain-quest-app[data-theme] .sq-drawer.sq-drawer--open {
  background: var(--sq-drawer-bg, rgba(8, 18, 8, 0.97));
  border-top-color: var(--sq-drawer-border, rgba(100, 200, 100, 0.20));
}

#spain-quest-app .sq-drawer-header {
  border-bottom-color: var(--sq-drawer-divider, rgba(100, 200, 100, 0.12));
}

#spain-quest-app .sq-drawer-title {
  color: var(--sq-drawer-title-color, rgba(180, 255, 180, 0.95));
  text-shadow: 0 0 20px var(--sq-drawer-title-glow, rgba(100, 255, 100, 0.40));
}

#spain-quest-app .sq-drawer-close {
  border-color: var(--sq-drawer-close-border, rgba(100, 200, 100, 0.30));
}

/* ── Theme-wired header ── */
#spain-quest-app[data-theme] .sq-home-week-label {
  color: var(--sq-header-label-color, rgba(255, 255, 255, 0.88));
}
#spain-quest-app[data-theme] .sq-progress-dot--done {
  background: var(--sq-dot-done-bg, rgba(255, 200, 60, 0.85));
  border-color: var(--sq-dot-done-border, rgba(255, 220, 100, 0.60));
  box-shadow: 0 0 6px var(--sq-dot-done-glow, rgba(255, 200, 60, 0.40));
}

#spain-quest-app .sq-games-start-name {
  color: var(--sq-title-color, rgba(180, 255, 180, 0.95));
  text-shadow: 0 0 20px var(--sq-glow, rgba(100, 255, 120, 0.30));
}

#spain-quest-app .sq-games-start-emoji {
  filter: drop-shadow(0 0 16px var(--sq-glow, rgba(100, 255, 120, 0.35)));
}

/* Space theme — sky gradient override */
#spain-quest-app[data-theme="space"] .sq-layer-sky {
  background: linear-gradient(
    180deg,
    #000510 0%,
    #020820 30%,
    #041540 60%,
    #062060 80%,
    #0a3070 100%
  );
}

/* Space theme — bg trees become distant planet silhouettes */
#spain-quest-app[data-theme="space"] .sq-bg-tree {
  background: #020818;
  border-radius: 50%;
}

/* Space theme — mist becomes nebula haze */
#spain-quest-app[data-theme="space"] .sq-mist-band {
  background: rgba(0, 100, 200, 0.10);
}

/* Space theme — pool becomes blue-white star field tint */
#spain-quest-app[data-theme="space"] .sq-pool-surface {
  background: radial-gradient(
    ellipse,
    rgba(140, 220, 255, 0.6) 0%,
    rgba(20, 80, 180, 0.8) 60%,
    rgba(5, 20, 60, 0.9) 100%
  );
  box-shadow:
    0 0 30px rgba(0, 180, 255, 0.4),
    inset 0 0 20px rgba(0, 140, 255, 0.3);
}

/* Space theme — drawer modal story teaser uses space blue */
#spain-quest-app[data-theme="space"] ~ * .sq-modal-story-teaser,
.sq-day-modal-overlay[data-theme="space"] .sq-modal-story-teaser {
  background: rgba(10, 20, 60, 0.65);
  border-color: rgba(0, 180, 255, 0.20);
}

#spain-quest-app[data-theme="space"] ~ * .sq-modal-story-resolution,
.sq-day-modal-overlay[data-theme="space"] .sq-modal-story-resolution {
  background: rgba(5, 15, 50, 0.75);
  border-color: rgba(80, 180, 255, 0.25);
}

/* ── 24y  Background image system ────────────────────────── */

/*
  When a data-theme is active on #sq-scene, the Midjourney
  background image replaces all CSS-drawn layers.
  CSS-drawn layers are hidden. Tap targets float above the image.
  Character image is absolutely positioned over its painted platform.
*/

/* ── Background images — default (fallback for weeks without a generated bg) ── */

#sq-scene[data-theme="jungle"] {
  background-image: url('/media/scene_images/jungle-scene.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#sq-scene[data-theme="space"] {
  background-image: url('/media/scene_images/pixel-scene.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ── Weekly scene backgrounds ──
   Applied via inline style by spanish-scene.js setWorldState().
   JS tries to load /media/scene_images/{theme}-w{N}.jpg — if it exists,
   sets it as inline background-image (overrides the default above).
   If the file doesn't exist, the default theme background stays.
*/

/* ── Hide all CSS-drawn layers when image is active ── */

#sq-scene[data-theme] .sq-layer-sky,
#sq-scene[data-theme] .sq-layer-bg-trees,
#sq-scene[data-theme] .sq-layer-jungle-haze,
#sq-scene[data-theme] .sq-layer-mist,
#sq-scene[data-theme] .sq-layer-mid,
#sq-scene[data-theme] .sq-layer-fg {
  display: none;
}

/* ── Old tap target styles removed — replaced by bottom dock ── */

/* ============================================================
   SECTION 24z — JOURNEY MAP OVERLAY
   Full-screen map overlay triggered by tapping #sq-hud-week.
   Map image (<img>) contained between shelf and blueprint zones.
   Themed overlay bg color-matched to map edges; CSS mask feathers
   the image into the bg so shelf/blueprint blend seamlessly.
   12 absolutely-positioned nodes over painted locations.
   Node positions are placeholders — set DEBUG_NODES = false
   in spanish-scene.js once real positions are measured.
============================================================ */

/* ── Overlay container ── */

.sq-journey-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  /* Slide up from bottom */
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

/* Themed backgrounds — color-matched to map edge tones */
.sq-journey-map-overlay--jungle {
  background: #0c1e0a;
}

.sq-journey-map-overlay--space {
  background: #0a1020;
}

.sq-journey-map-overlay--open {
  transform: translateY(0);
}

/* ── Map image — contained between shelf and blueprint zones ── */

.sq-journey-map-img {
  position: absolute;
  /* Near-full: 30px buffers top/bottom — shelf/blueprint float over map edges */
  top: 30px;
  bottom: 30px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100% - 60px);
  object-fit: contain;
  object-position: center;
  pointer-events: auto;
  /* Feather edges where shelf (~80px) and blueprint (~120px) overlap */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, black 4%, black 94%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, black 4%, black 94%, transparent 100%);
}

/* ── Vignette — subtle side darkening only (top/bottom handled by img mask) ── */

.sq-journey-map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,  rgba(0,0,0,0.20) 0%, transparent 12%),
    linear-gradient(270deg, rgba(0,0,0,0.20) 0%, transparent 12%);
}

/* ── Close button ── */

.sq-journey-map-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 60;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.30);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.90);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s, transform 0.12s;
}

.sq-journey-map-close:active {
  transform: scale(0.90);
  background: rgba(0, 0, 0, 0.75);
}

/* ── Journey title bar ── */

.sq-journey-map-title {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 10px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Don't overlap close button */
  max-width: calc(100% - 140px);
}

.sq-journey-map-title-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.sq-journey-map-title-text {
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.90);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Nodes layer ── */

.sq-journey-nodes-layer {
  position: absolute;
  /* JS positions this layer to match the rendered map image bounds */
  z-index: 10;
  pointer-events: none; /* nodes handle their own events */
}

/* ── Individual node ── */

.sq-journey-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sq-journey-node[data-tappable="true"] {
  cursor: pointer;
}

/* Node inner circle */
.sq-journey-node-inner {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sq-journey-node[data-tappable="true"]:active .sq-journey-node-inner {
  transform: scale(0.90);
}

/* ── Complete state ── */

.sq-journey-node--complete .sq-journey-node-inner {
  background: rgba(255, 200, 50, 0.20);
  border: 2.5px solid rgba(255, 200, 50, 0.80);
  box-shadow:
    0 0 16px rgba(255, 200, 50, 0.45),
    0 0 32px rgba(255, 200, 50, 0.18),
    inset 0 0 10px rgba(255, 200, 50, 0.10);
}

.sq-journey-node--complete .sq-journey-node-emoji {
  font-size: 30px;
  filter: drop-shadow(0 0 6px rgba(255, 220, 80, 0.60));
}

.sq-journey-node--complete .sq-journey-node-check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(80, 200, 80, 0.90);
  border: 2px solid rgba(0, 0, 0, 0.40);
  font-size: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
}

/* ── Current state ── */

.sq-journey-node--current .sq-journey-node-inner {
  background: rgba(255, 255, 255, 0.15);
  border: 2.5px solid rgba(255, 255, 255, 0.80);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.40),
    0 0 40px rgba(255, 255, 255, 0.15);
}

.sq-journey-node--current .sq-journey-node-emoji {
  font-size: 30px;
}

/* Pulsing ring around current node */
.sq-journey-node-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.50);
  animation: sq-node-pulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes sq-node-pulse {
  0%   { transform: scale(1);    opacity: 0.70; }
  100% { transform: scale(1.55); opacity: 0;    }
}

/* ── Locked state ── */

.sq-journey-node--locked .sq-journey-node-inner {
  background: rgba(0, 0, 0, 0.40);
  border: 2px solid rgba(255, 255, 255, 0.15);
  opacity: 0.45;
}

.sq-journey-node--locked .sq-journey-node-emoji {
  font-size: 24px;
  filter: grayscale(1) brightness(0.5);
}

/* ── Selected state ── */

.sq-journey-node--selected .sq-journey-node-inner {
  transform: scale(1.15);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.60),
    0 0 24px rgba(255, 255, 255, 0.40);
}

/* ── Node label ── */

.sq-journey-node-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.sq-journey-node-num {
  font-family: 'Fredoka One', cursive;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

.sq-journey-node-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.80);
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 0  10px rgba(0, 0, 0, 0.70);
  text-align: center;
  max-width: 100px;
  line-height: 1.2;
  /* Truncate very long names */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sq-journey-node--locked .sq-journey-node-label {
  opacity: 0.35;
}

/* ── Debug mode — bright outlines + coordinate readout ── */

.sq-journey-node--debug .sq-journey-node-inner {
  outline: 2px solid red !important;
  outline-offset: 2px;
}

.sq-journey-debug-label {
  font-family: monospace;
  font-size: 11px;
  color: red;
  background: rgba(0, 0, 0, 0.75);
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  margin-top: 2px;
}

/* ── Info panel — slides up from bottom ── */

.sq-journey-info-panel {
  position: absolute;
  bottom: 200px; /* above arc blueprint */
  left: 0;
  right: 0;
  z-index: 55;
  transform: translateY(calc(100% + 200px)); /* fully offscreen when hidden */
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  visibility: hidden; /* fully hidden until opened */
}

.sq-journey-info-panel--open {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.sq-journey-info-inner {
  margin: 0 16px 16px;
  background: transparent;
  border: 2.5px dashed rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sq-journey-info-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sq-journey-info-emoji {
  font-size: 44px;
  line-height: 1;
  flex-shrink: 0;
}

.sq-journey-info-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sq-journey-info-week {
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

.sq-journey-info-name {
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70);
  line-height: 1.1;
}

.sq-journey-info-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: rgba(220, 220, 220, 0.80);
  line-height: 1.55;
}

.sq-journey-info-status {
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  align-self: flex-start;
}

.sq-journey-info-status--complete {
  background: rgba(80, 200, 80, 0.18);
  border: 1px solid rgba(80, 200, 80, 0.40);
  color: rgba(160, 255, 160, 0.95);
}

.sq-journey-info-status--current {
  background: rgba(255, 220, 80, 0.15);
  border: 1px solid rgba(255, 220, 80, 0.40);
  color: rgba(255, 240, 160, 0.95);
}

/* ── Theme tints on info panel ── */
/* Info panel uses same dashed border as blueprint slots — no theme override needed */

/* ── Collection shelf — top of journey map ── */
/* Shows all earned pieces (larger) + collectibles (smaller) across all arcs */

.sq-collection-shelf {
  position: absolute;
  top: 24px;
  left: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  /* Semi-transparent + blur — floats over map edge */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-radius: 18px;
}

.sq-collection-shelf--empty {
  padding: 16px 20px;
  align-items: center;
  justify-content: center;
}

.sq-collection-shelf-empty {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  line-height: 1.4;
}

.sq-collection-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Subtle fade on edges when scrollable */
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}

.sq-collection-row::-webkit-scrollbar { display: none; }

/* Pieces — larger, gold border */
.sq-collection-item--piece {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 2px solid rgba(255, 200, 50, 0.50);
  background: rgba(255, 200, 50, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sq-collection-item--piece img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.40));
}

/* Collectibles — smaller, simpler frame */
.sq-collection-item--collectible {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sq-collection-item--collectible img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* ── Arc blueprint — bottom of journey map ── */
/* Shows current arc build: icon on left, 6 silhouette slots that fill in */

.sq-arc-blueprint {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 20px;
  /* Semi-transparent + blur — floats over map edge */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-radius: 18px;
}

.sq-blueprint-name {
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.80);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sq-blueprint-slots {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.sq-blueprint-slot {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: 2.5px dashed rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.sq-blueprint-slot img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  /* Unearned: bright ghost silhouette — clearly visible on dark bg */
  opacity: 0.6;
  filter: grayscale(1) brightness(2.5) contrast(0.5);
  transition: all 0.4s ease;
}

/* Earned slot — solid border, full color */
.sq-blueprint-slot--earned {
  border-style: solid;
  border-color: rgba(255, 200, 50, 0.45);
  background: rgba(255, 200, 50, 0.06);
}

.sq-blueprint-slot--earned img {
  opacity: 1;
  filter: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.40));
}

/* ── Theme tints on collection elements ── */
/* Shelf/blueprint are borderless — tints only on inner items */

.sq-journey-map-overlay--jungle .sq-blueprint-slot--earned {
  border-color: rgba(100, 200, 100, 0.50);
  background: rgba(100, 200, 100, 0.06);
}

.sq-journey-map-overlay--space .sq-blueprint-slot--earned {
  border-color: rgba(0, 180, 255, 0.45);
  background: rgba(0, 180, 255, 0.06);
}

/* ── Jungle theme — node complete state warm tint ── */

.sq-journey-map-overlay--jungle .sq-journey-node--complete .sq-journey-node-inner {
  background: rgba(100, 220, 80, 0.18);
  border-color: rgba(120, 240, 80, 0.75);
  box-shadow:
    0 0 16px rgba(100, 220, 80, 0.40),
    0 0 32px rgba(80, 200, 60, 0.18);
}

/* ── Space theme — node complete state cyan tint ── */

.sq-journey-map-overlay--space .sq-journey-node--complete .sq-journey-node-inner {
  background: rgba(0, 180, 255, 0.18);
  border-color: rgba(0, 200, 255, 0.75);
  box-shadow:
    0 0 16px rgba(0, 200, 255, 0.40),
    0 0 32px rgba(0, 160, 220, 0.18);
}

/* ── Space theme — current node cyan pulse ── */

.sq-journey-map-overlay--space .sq-journey-node--current .sq-journey-node-inner {
  background: rgba(0, 160, 255, 0.15);
  border-color: rgba(0, 200, 255, 0.80);
  box-shadow:
    0 0 20px rgba(0, 200, 255, 0.40),
    0 0 40px rgba(0, 160, 220, 0.15);
}

.sq-journey-map-overlay--space .sq-journey-node-pulse {
  border-color: rgba(0, 200, 255, 0.50);
}

/* ── Old tap target positions removed — replaced by bottom dock ── */

/* ══════════════════════════════════════════════════════════
   CHARACTER IMAGE — positioned over painted platform
   ══════════════════════════════════════════════════════════ */

/*
  Override .sq-mochi to be absolutely positioned when inside
  a themed scene. 24m defines display/size/filter — we only
  add position here.
*/

#sq-scene[data-theme] .sq-mochi {
  position: absolute;
  z-index: 11;
  /* Sizing — slightly smaller than 24m default to fit platform */
  width:  260px;
  height: 260px;
  pointer-events: auto;
  cursor: pointer;
}

/* Jungle — Mochi on the mossy log */
#sq-scene[data-theme="jungle"] .sq-mochi {
  left:   13%;
  bottom:    21%;
  transform: translateX(-50%);
}

/* Space — Pixel on the landing pad */
#sq-scene[data-theme="space"] .sq-mochi {
  left:   20%;
  bottom:    16%;
  transform: translateX(-50%);
}

/* ── State transform overrides — must not fight position ── */

/*
  24m uses transform for look states (scaleX).
  We compose translateX(-50%) with scaleX so they don't
  clobber each other.
*/

#sq-scene[data-theme] .sq-mochi[data-state="looking-left"] {
  transform: translateX(-50%) scaleX(-1);
}

#sq-scene[data-theme] .sq-mochi[data-state="looking-right"] {
  transform: translateX(-50%) scaleX(1);
}

/* ── Breathing animation stays — translateY composited ── */

/*
  sq-char-breathe uses translateY. Since we set translateX(-50%)
  via inline position, the keyframe's translateY stacks on top
  cleanly — no conflict.
*/

/* ══════════════════════════════════════════════════════════
   AMBIENT PARTICLES — float above image on both themes
   ══════════════════════════════════════════════════════════ */

.sq-scene-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  overflow: hidden;
}

.sq-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: sq-particle-rise 8s ease-in-out infinite;
}

/* Jungle particles — warm golden motes */
#sq-scene[data-theme="jungle"] .sq-particle {
  background: radial-gradient(circle, rgba(255, 220, 80, 0.80) 0%, transparent 70%);
  width: 8px;
  height: 8px;
}

/* Space particles — cool cyan sparks */
#sq-scene[data-theme="space"] .sq-particle {
  background: radial-gradient(circle, rgba(0, 220, 255, 0.80) 0%, transparent 70%);
  width: 6px;
  height: 6px;
}

/* Staggered positions — spread across scene width */
.sq-particle--1 { left: 12%; bottom: 30%; animation-delay: 0s;   animation-duration: 7s;  }
.sq-particle--2 { left: 28%; bottom: 45%; animation-delay: 1.4s; animation-duration: 9s;  }
.sq-particle--3 { left: 50%; bottom: 25%; animation-delay: 2.8s; animation-duration: 6s;  }
.sq-particle--4 { left: 68%; bottom: 40%; animation-delay: 0.7s; animation-duration: 8s;  }
.sq-particle--5 { left: 82%; bottom: 35%; animation-delay: 2.1s; animation-duration: 10s; }
.sq-particle--6 { left: 42%; bottom: 55%; animation-delay: 3.5s; animation-duration: 7s;  }

@keyframes sq-particle-rise {
  0%   { transform: translateY(0)     scale(1.0); opacity: 0;    }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(-180px) scale(0.4); opacity: 0;   }
}

/* ── Vignette over image — keeps edges dark, content readable ── */

#sq-scene[data-theme]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    /* Top edge darkening — HUD area stays readable */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.40) 0%,
      transparent 20%
    ),
    /* Bottom edge darkening — drawer sits here */
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.55) 0%,
      transparent 25%
    ),
    /* Left edge */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 18%
    ),
    /* Right edge */
    linear-gradient(
      270deg,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 18%
    );
}

/* ── Story text rhythm — short paragraphs ── */
.sq-modal-story-text p,
.sq-modal-story-text--previously p {
  margin: 0 0 0.5em 0;
}

.sq-modal-story-text:empty,
.sq-modal-story-text--previously:empty {
  display: none;
}

/* ============================================================
   24aa — SESSION SCREEN
   ============================================================ */

/* ── Overlay ── */

.sq-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.97);
  opacity: 0;
  transition: opacity 0.35s ease;
  overflow: hidden;
}

.sq-session-overlay--open {
  opacity: 1;
}

.sq-session-overlay--exit {
  opacity: 0;
  pointer-events: none;
}

/* jungle tint */
.sq-session-overlay--jungle {
  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(10, 40, 10, 0.98) 0%,
    rgba(0, 0, 0, 0.99) 100%
  );
}

/* space tint */
.sq-session-overlay--space {
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(5, 10, 40, 0.98) 0%,
    rgba(0, 0, 0, 0.99) 100%
  );
}

/* ── Slide base ── */

.sq-session-slide {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 32px 40px;
  box-sizing: border-box;
  animation: sq-session-slide-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sq-session-slide--exit {
  animation: sq-session-slide-out 0.28s ease-in both;
}

@keyframes sq-session-slide-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sq-session-slide-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-18px); }
}

/* ── Close button ── */

.sq-session-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  z-index: 10;
}

.sq-session-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ── Progress pips (words / activity beats) ── */

.sq-session-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.sq-session-pip {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s;
}

.sq-session-pip.active {
  background: rgba(255, 255, 255, 0.75);
}

.sq-session-pip.done {
  background: rgba(0, 255, 136, 0.6);
}

/* ── Companion image (words / activity beats) ── */

.sq-session-companion {
  margin-top: -48px;
  position: relative;
  z-index: 2;
}

.sq-session-companion-img {
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
  animation: sq-companion-float 4s ease-in-out infinite;
}

.sq-session-companion--large .sq-session-companion-img {
  width: 140px;
  height: 140px;
}

.sq-session-companion--small .sq-session-companion-img {
  width: 80px;
  height: 80px;
}

@keyframes sq-companion-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Eyebrow label ── */

.sq-session-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
  flex-shrink: 0;
}

.sq-session-eyebrow--gold {
  color: rgba(255, 215, 0, 0.85);
}

/* ── Story scroll area (legacy single-page path) ── */

.sq-session-story-scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  min-height: 0;
  margin-bottom: 24px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.sq-session-story-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sq-session-para {
  font-size: 19px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  text-align: left;
}

/* ── Continue button (words / activity beats) ── */

.sq-session-continue {
  flex-shrink: 0;
  width: 100%;
  max-width: 340px;
  font-size: 17px;
  padding: 16px 24px;
  border-radius: 16px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sq-session-continue--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.sq-session-continue--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Words beat ── */

.sq-session-words-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 8px 0;
}

/* Base word row — starts invisible for cascade reveal */
.sq-session-word {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}

/* Hidden: cascades in from below */
.sq-session-word--hidden {
  opacity: 0;
  transform: translateY(18px);
  transition: none;
}

/* Revealed: fade + spring slide up */
.sq-session-word--revealed {
  opacity: 1;
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(0, 255, 136, 0.25);
}

/* Pop: brief scale bounce tied to audio */
.sq-session-word--pop {
  transform: translateY(0) scale(1.06);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sq-session-word-text {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.sq-session-word-check {
  font-size: 16px;
  color: rgba(0, 255, 136, 0.9);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s 0.2s, transform 0.3s 0.2s;
  margin-left: auto;
}

.sq-session-word--revealed .sq-session-word-check {
  opacity: 1;
  transform: scale(1);
}

.sq-session-words-all {
  text-align: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  padding: 24px 0;
}

/* Word beat image */
.sq-session-word-img {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sq-session-word-img--loaded {
  opacity: 1;
}

.sq-session-word-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
}

.sq-session-word-english {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* ── Activity beat ── */

.sq-session-slide--activity {
  justify-content: flex-start;
  gap: 0;
}

.sq-session-activity-companion {
  margin-top: 4px;
  margin-bottom: 8px;
}

.sq-session-activity-day {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
}

.sq-session-activity-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.25;
}

.sq-session-activity-focus {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-bottom: 16px;
}

.sq-session-activity-brief {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.sq-session-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 20px;
}

.sq-session-tip {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* ── Break beat (end of half 1, kick to home) ── */

.sq-session-slide--break {
  justify-content: center;
  gap: 12px;
}

.sq-break-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-align: center;
}

.sq-break-subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 420px;
  margin: 0 auto 24px;
  white-space: pre-line;
}

/* ── Debrief beat (reward screen after 3 games) ── */

.sq-session-slide--debrief {
  justify-content: flex-start;
  gap: 0;
  padding-top: 60px;
}

.sq-debrief-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
}

.sq-debrief-text {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 400px;
  margin: 4px auto 8px;
}

.sq-debrief-day {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin-bottom: 24px;
}

.sq-debrief-games {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 28px;
}

.sq-debrief-game {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
}

.sq-debrief-check {
  font-size: 18px;
  color: #4ade80;
  flex-shrink: 0;
}

.sq-debrief-game-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}

.sq-debrief-replay {
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Resolution beat ── */

.sq-session-slide--resolution {
  justify-content: center;
}


/* ============================================================
   24ab — SESSION SCREEN: HORIZONTAL CARD SLIDER
   Story beats (origin / previously / teaser / resolution)
   Each beat renders as a horizontal strip of full-bleed cards.
   • Right ~60px of viewport shows the edge of the next card
   • Cards advance on right-tap or left-swipe
   • Companion is fixed in the overlay (not on cards)
   • Audio + karaoke fire per card via JS index tracking
   ============================================================ */

/* ── Story slide container ── */

.sq-session-slide--story {
  padding: 0;
  max-width: 100%;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
}

/* ── Close button — raised z-index over cards ── */

.sq-session-slide--story .sq-session-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.20);
}

/* ── Beat-level pips (which beat within the arc) ── */

.sq-session-beat-pips {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 40;
  pointer-events: none;
  flex-shrink: 0;
}

.sq-session-beat-pip {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s, width 0.3s;
  width: 20px;
}

.sq-session-beat-pip.active {
  background: rgba(255, 255, 255, 0.65);
  width: 28px;
}

.sq-session-beat-pip.done {
  background: rgba(0, 255, 136, 0.55);
  width: 20px;
}

/* ── Viewport: clips cards, preserves 60px right-edge peek ── */

.sq-card-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── Track: flex row of cards, driven by JS translateX ── */

.sq-card-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  will-change: transform;
  transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sq-card-track--instant {
  transition: none !important;
}

/* ── Each story card — full-bleed storybook page ── */

.sq-story-card {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ── Card image — top 52% ── */

.sq-story-card-img-wrap {
  position: relative;
  flex: 0 0 55%;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.20);
}

/* Gradient dissolve — image melts into text area */
.sq-story-card-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.92) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Theme-tinted dissolve — image melts into the themed background */
.sq-session-overlay--jungle .sq-story-card-img-wrap::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(6, 28, 6, 0.95) 100%);
}
.sq-session-overlay--space .sq-story-card-img-wrap::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(4, 8, 30, 0.95) 100%);
}

.sq-story-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: block;
}

.sq-story-card-img--loaded {
  opacity: 1;
}

/* Loading shimmer */
.sq-story-card-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.09) 40%,
    rgba(255, 255, 255, 0.03) 80%
  );
  background-size: 200% 100%;
  animation: sq-shimmer 1.6s ease-in-out infinite;
}

@keyframes sq-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Card body — text area below image ── */

.sq-story-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Bottom pad clears companion + CTA */
  padding: 16px 28px 80px 28px;
  overflow: hidden;
  box-sizing: border-box;
}

.sq-story-card-text {
  width: 100%;
  overflow: hidden;
}

/* ── Karaoke text (paragraphs inside sq-story-card-text) ── */

.sq-story-card-text .sq-session-para {
  font-size: clamp(20px, 4.2vw, 28px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  margin: 0 0 12px;
}

/* Jungle — larger, warmer, bolder (ages 3-5) */
.sq-session-overlay--jungle .sq-story-card-text .sq-session-para {
  font-size: clamp(22px, 4.8vw, 32px);
  line-height: 1.8;
  font-weight: 700;
}

/* Space — standard (ages 5+) */
.sq-session-overlay--space .sq-story-card-text .sq-session-para {
  font-size: clamp(20px, 4.0vw, 27px);
  line-height: 1.7;
  font-weight: 600;
}

/* ── Karaoke word spans ── */

.sq-kw {
  display: inline;
  border-radius: 4px;
  transition:
    color      0.03s ease,
    background 0.03s ease,
    opacity    0.03s ease;
}

.sq-kw--past {
  color: rgba(255, 255, 255, 0.38);
}

.sq-kw--active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 0 2px;
}

/* Jungle — warm amber highlight */
.sq-session-overlay--jungle .sq-kw--active {
  color: rgba(255, 240, 160, 1.0);
  background: rgba(255, 200, 60, 0.18);
}

/* Space — cool cyan highlight */
.sq-session-overlay--space .sq-kw--active {
  color: rgba(160, 240, 255, 1.0);
  background: rgba(0, 200, 255, 0.14);
}

/* ── Sub-beat pips (1 of N within current beat) ── */

.sq-card-subpips {
  position: absolute;
  bottom: 82px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 20;
  pointer-events: none;
}

.sq-card-subpip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: all 300ms ease;
}

.sq-card-subpip.active {
  width: 20px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.88);
}

.sq-card-subpip.done {
  background: rgba(255, 255, 255, 0.48);
}

/* Theme pip colours */
.sq-session-overlay--jungle .sq-card-subpip.done  { background: rgba(100, 255, 120, 0.65); }
.sq-session-overlay--jungle .sq-card-subpip.active { background: rgba(160, 255, 160, 0.90); }
.sq-session-overlay--space  .sq-card-subpip.done  { background: rgba(0, 200, 255, 0.65); }
.sq-session-overlay--space  .sq-card-subpip.active { background: rgba(140, 220, 255, 0.90); }

/* ── Pulse arrow (non-final cards) ── */

.sq-card-arrow {
  position: absolute;
  bottom: 26px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: sq-arrow-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 20;
}

@keyframes sq-arrow-pulse {
  0%, 100% { transform: translateX(0);   opacity: 0.65; }
  50%       { transform: translateX(5px); opacity: 1.0;  }
}

/* ── Final CTA button (last card of a beat) ── */

.sq-card-cta {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 3.4vw, 20px);
  letter-spacing: 0.02em;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.40);
  animation: sq-cta-float 3s ease-in-out infinite;
  z-index: 35; /* must exceed .sq-tap-zone z-index of 25 */
}

.sq-card-cta--final.btn-success {
  background: linear-gradient(145deg, rgba(60, 200, 80, 0.92), rgba(30, 140, 50, 0.88));
  border: 1.5px solid rgba(80, 220, 100, 0.65);
  box-shadow:
    0 6px 24px rgba(40, 180, 60, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  color: #fff;
}

.sq-card-cta--final.btn-primary {
  background: linear-gradient(145deg, rgba(0, 160, 240, 0.92), rgba(0, 80, 200, 0.88));
  border: 1.5px solid rgba(0, 200, 255, 0.65);
  box-shadow:
    0 6px 24px rgba(0, 160, 240, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  color: #fff;
}

.sq-card-cta:active {
  transform: translateX(-50%) scale(0.95);
  animation: none;
}

@keyframes sq-cta-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-5px); }
}

/* ── Companion — fixed overlay corner, persists across card turns ── */

.sq-story-companion {
  position: absolute;
  bottom: 18px;
  left: 14px;
  z-index: 30;
  pointer-events: none;
}

.sq-story-companion-img {
  width: clamp(70px, 14vw, 96px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  animation: sq-companion-float 4s ease-in-out infinite;
}

/* Crossfade on companion state swap */
.sq-story-companion--swap {
  opacity: 0;
  transition: opacity 120ms ease;
}

/* Tap zones removed — navigation is handled by a coordinate-based
   click listener on the slide itself. These divs remain in HTML
   for potential future visual indicators but must never intercept events. */
.sq-tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none; /* click handler on slide handles navigation */
  -webkit-tap-highlight-color: transparent;
}

.sq-tap-zone--back { left: 0; width: 20%; }
.sq-tap-zone--fwd  { right: 0; width: 70%; }

/* Eyebrow label inside card body */
.sq-story-card-body .sq-session-eyebrow {
  margin-bottom: 12px;
}

/* ── Language toggle button ── */
.sq-lang-toggle {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s, color 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sq-lang-toggle:active {
  background: rgba(255, 255, 255, 0.15);
}

.sq-lang-toggle--es {
  color: rgba(255, 200, 80, 0.95);
  border-color: rgba(255, 200, 80, 0.35);
}

/* ============================================================
   30. SPAIN QUEST — GAMES
   ─────────────────────────────────────────────────────────────
   30.1   Word image tiles (emoji fallback → AI image swap-in)
   30.2   Round badge
   30.3   Completion screen
   30.4   Companion — ambient corner
   30.5   Story-mode game overlay
   30.6   Games shell
   30.7   Start screen companion
   30.8   Per-game elements
            I Spy · Star Catcher · Send It! · Matching
            Echo · Voice Practice
   30.9   Quiz — question screen, options, results
   30.10  Responsive adjustments
   30.11  Universal control button
   ─────────────────────────────────────────────────────────────
   Depends on: Section 23 Spain Quest variables + utilities
   ============================================================ */

/* ── 30.1  Word image tiles ──────────────────────────────── */

.sq-game-tile-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sq-radius-md, 18px);
  overflow: hidden;
  min-height: 60px;
}

.sq-game-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sq-game-tile-img--loaded {
  opacity: 1;
}

.sq-game-tile-fallback {
  position: relative;
  z-index: 1;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ── 30.2  Round badge ───────────────────────────────────── */

.sq-game-round-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full, 9999px);
  padding: 4px 14px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-moon-silver, #c8d6e5);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* ── 30.3  Completion screen ─────────────────────────────── */

.sq-game-completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px 28px;
  text-align: center;
  animation: anim-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.sq-game-completion-companion {
  width: clamp(80px, 18vw, 120px);
  height: clamp(80px, 18vw, 120px);
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
  animation: anim-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.sq-game-completion-msg {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 3.5vw, 28px);
  color: #ffffff;
  text-shadow:
    0 0 20px var(--profile-accent-glow, rgba(168, 85, 247, 0.5)),
    2px 2px 0 rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.sq-game-completion-score {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(32px, 6vw, 48px);
  color: #ffffff;
  line-height: 1;
}

.sq-game-completion-pts {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 800;
  color: var(--color-gold, #ffd700);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

.sq-game-completion-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.sq-game-completion-done {
  margin-top: 4px;
  min-width: 180px;
}

/* ── 30.4  Companion — ambient corner ───────────────────── */

.sq-games-companion-corner {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  pointer-events: none;
}

.sq-games-companion-ambient {
  width: clamp(44px, 8vw, 64px);
  height: clamp(44px, 8vw, 64px);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── 30.5  Story-mode game overlay ──────────────────────── */

/*
 * The game hook screen has been removed.
 * launchFromStory() now renders the game directly and plays
 * the hook text as companion voice audio.
 * The companion uses .sq-game-companion--intro to animate in.
 */

.sq-session-slide--game-active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  max-width: 100%;
}

.sq-game-overlay-companion {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  pointer-events: none;
}

.sq-game-companion-ambient {
  width: clamp(48px, 9vw, 72px);
  height: clamp(48px, 9vw, 72px);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Companion entrance animation: grows in from small, peaks, settles */
.sq-game-companion--intro {
  animation: sq-companion-intro 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sq-companion-intro {
  0%   { transform: scale(0.2) translateY(16px); opacity: 0; }
  35%  { transform: scale(1.6) translateY(-8px);  opacity: 1; }
  65%  { transform: scale(1.3) translateY(0);     opacity: 1; }
  100% { transform: scale(1.0) translateY(0);     opacity: 1; }
}

.sq-game-overlay-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* ── 30.6  Games shell ───────────────────────────────────── */

.sq-games-shell { position: relative; }

/* ── 30.7  Start screen companion ───────────────────────── */

.sq-games-start-companion {
  width: clamp(64px, 14vw, 100px);
  height: clamp(64px, 14vw, 100px);
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  animation: anim-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  margin-bottom: 4px;
}

/* ── 30.8  Per-game elements ─────────────────────────────── */

/* ┈ I Spy ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ */

.sq-ispy-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}

/* Prompt card: ¿Dónde está... + big Spanish word + phonetic + hear btn */
.sq-ispy-prompt {
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
}

.sq-ispy-prompt-label {
  font-size: clamp(13px, 1.8vw, 15px);
  margin-bottom: 4px;
}

/* Large Spanish word — primary reading target */
.sq-ispy-prompt-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 16px rgba(0, 207, 255, 0.5);
  line-height: 1.1;
  margin: 4px 0 2px;
  letter-spacing: 0.01em;
}

/* Phonetic hint line below the Spanish word */
.sq-ispy-prompt-phonetic {
  font-size: clamp(13px, 2.2vw, 17px);
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* 4-column fixed grid for 8 image options */
.sq-ispy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.sq-ispy-item {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--sq-radius-md, 18px);
  padding: 4px 4px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sq-ispy-item:active { transform: scale(0.92); }

.sq-ispy-item .sq-game-tile-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--sq-radius-sm, 12px);
}

.sq-ispy-item .ispy-word {
  font-size: 12px;
  font-weight: 800;
  color: var(--sq-moon-silver, #c8d6e5);
  margin-top: 6px;
}

.sq-ispy-item.found {
  background: rgba(0, 255, 136, 0.15);
  border-color: #00ff88;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

.sq-ispy-item.wrong {
  background: rgba(255, 71, 87, 0.15);
  border-color: #ff4757;
  animation: shake 0.3s ease;
}

/* ┈ Star Catcher ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ */

/* Single compact bar: badge | prompt | 🔊 | Pause — one flex row */
.sq-starcatcher-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 6px;
}

.sq-starcatcher-prompt-label {
  flex: 1;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 2.2vw, 16px);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sq-starcatcher-rehear {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 16px;
  min-height: 38px;
}

.sq-starcatcher-pause-btn {
  flex-shrink: 0;
  font-weight: 800;
  background: var(--profile-accent, #a855f7);
  color: #ffffff;
  border: none;
  cursor: pointer;
}

/* Fall field — large play area */
.sq-starcatcher-field {
  position: relative;
  height: clamp(490px, 80vw, 580px);
  overflow: hidden;
  border-radius: var(--sq-radius-lg, 20px);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

/* Falling star — sized for easy tapping */
.sq-starcatcher-star {
  position: absolute;
  top: -160px;
  width: clamp(120px, 24vw, 160px);
  height: clamp(120px, 24vw, 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  animation: star-fall linear infinite;
  user-select: none;
  transition: transform 0.15s ease;
}

.sq-starcatcher-star:active { transform: scale(1.2); }

.sq-starcatcher-star .sq-game-tile-img-wrap {
  width: 100%;
  height: 100%;
  min-height: unset;
  border-radius: var(--sq-radius-md, 18px);
}

@keyframes star-fall {
  0%   { transform: translateY(0);     opacity: 1; }
  88%  { transform: translateY(600px); opacity: 1; }
  100% { transform: translateY(640px); opacity: 0; }
}

/* ┈ Send It! ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ */
/* Layout: build progress (top) → character drop zone → tiles (bottom/thumb zone) */

.sq-sendit-scene {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sq-sendit-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

.sq-sendit-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 4px;
}

.sq-sendit-prompt-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 3.5vw, 28px);
  color: #ffffff;
}

/* Stage: vertical layout — character above tiles, both anchored low */
.sq-sendit-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

/* ── Drop zone: character as target ── */
.sq-sendit-dropzone-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sq-sendit-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 38vw, 220px);
  min-height: clamp(160px, 38vw, 220px);
  border: 3px dashed rgba(255, 255, 255, 0.20);
  border-radius: var(--sq-radius-xl, 28px);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
  gap: 10px;
  padding: 16px;
  animation: sendit-pulse 2.5s ease-in-out infinite;
}

/* Drag started — light up the target */
.sq-sendit-dropzone--active {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

/* Hovering over drop zone — character gets excited */
.sq-sendit-dropzone--hover {
  border-color: var(--profile-accent, #a855f7);
  background: rgba(168, 85, 247, 0.12);
  border-style: solid;
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.3);
  animation: none;
}

.sq-sendit-character-img {
  width: clamp(100px, 22vw, 140px);
  height: clamp(100px, 22vw, 140px);
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease;
}

.sq-sendit-dropzone--hover .sq-sendit-character-img {
  transform: scale(1.1);
}

.sq-sendit-character-label {
  font-size: clamp(13px, 2vw, 16px);
  color: var(--sq-moon-silver, #c8d6e5);
  font-weight: 700;
  text-align: center;
}

/* ── Draggable tiles — bottom row (thumb zone) ── */
.sq-sendit-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding-bottom: 12px;
}

.sq-sendit-item {
  width: clamp(110px, 24vw, 150px);
  height: clamp(110px, 24vw, 150px);
  min-height: unset;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.10);
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--sq-radius-lg, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  touch-action: none;
}

.sq-sendit-item:active { border-color: var(--profile-accent, #a855f7); }

.sq-sendit-item .sq-game-tile-img-wrap {
  width: 100%;
  height: 100%;
  min-height: unset;
  border-radius: inherit;
}

/* Ghost — left behind while clone is dragged */
.sq-sendit-item--ghost {
  opacity: 0.30;
  border-style: dashed;
}

/* Spring-back animation on miss/wrong */
.sq-sendit-item--springback {
  animation: sendit-springback 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sendit-springback {
  0%   { transform: translateY(-12px) scale(0.9); opacity: 0.5; }
  50%  { transform: translateY(4px) scale(1.05); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Absorbed into character on correct answer */
.sq-sendit-item--absorbed {
  transform: scale(0) translateY(-60px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating clone that follows the finger */
.sq-sendit-item--dragging {
  position: fixed;
  z-index: 9000;
  pointer-events: none;
  width: clamp(110px, 24vw, 150px);
  height: clamp(110px, 24vw, 150px);
  background: rgba(255, 255, 255, 0.18);
  border: 2.5px solid var(--profile-accent, #a855f7);
  border-radius: var(--sq-radius-lg, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  opacity: 0.92;
}

/* ── Drop zone pulse ── */
@keyframes sendit-pulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.20); }
  50%      { border-color: rgba(255, 255, 255, 0.35); }
}

/* ── Build progress bar ── */
.sq-sendit-build {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--sq-radius-md, 18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sq-sendit-build--compact {
  padding: 10px 16px;
  flex-direction: row;
  gap: 14px;
}

.sq-sendit-build-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(16px, 2.8vw, 22px);
  color: var(--sq-moon-silver, #c8d6e5);
  white-space: nowrap;
}

.sq-sendit-build-slots {
  display: flex;
  gap: 10px;
}

.sq-sendit-slot {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
}

.sq-sendit-slot-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  opacity: 0.15;
  filter: grayscale(1) brightness(0.6);
  transition: all 0.4s ease;
}

/* Earned piece — filled, colored, no longer dashed */
.sq-sendit-slot--earned {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.sq-sendit-slot--earned .sq-sendit-slot-img {
  opacity: 1;
  filter: none;
}

/* ── Reward / completion screens ── */
.sq-sendit-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 8px;
  text-align: center;
}

.sq-sendit-reward-companion {
  width: clamp(72px, 14vw, 100px);
  height: clamp(72px, 14vw, 100px);
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  animation: anim-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.sq-sendit-reward-msg {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 3vw, 24px);
  color: #ffffff;
}

.sq-sendit-reward-score {
  font-size: clamp(14px, 2vw, 18px);
  color: var(--sq-moon-silver, #c8d6e5);
  font-weight: 700;
}

.sq-sendit-reward-pts {
  font-size: clamp(13px, 1.8vw, 16px);
  color: #ffd700;
  font-weight: 700;
}

/* Piece reveal moment */
.sq-sendit-reward-piece-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sq-radius-lg, 24px);
}

.sq-sendit-reward-piece-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--profile-accent, #a855f7);
}

.sq-sendit-reward-piece-img {
  width: clamp(100px, 22vw, 140px);
  height: clamp(100px, 22vw, 140px);
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.sq-sendit-reward-piece--pop {
  animation: sendit-piece-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.3s;
}

@keyframes sendit-piece-pop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.sq-sendit-reward-piece-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 18px);
  color: #ffffff;
}

/* ── Feedback line ── */
.sq-feedback--correct { color: #00ff88; }
.sq-feedback--wrong   { color: #ff4757; }

/* ┈ Matching ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ */

.sq-match-instruction {
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-moon-silver, #c8d6e5);
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}

.sq-match-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  margin: 14px 0;
  align-items: start;
}

.sq-match-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Base card — shared by both sides */
.sq-match-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--sq-radius-md, 18px);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
  overflow: hidden;
  min-height: 90px;
}

.sq-match-card:hover:not(.matched):not(.wrong) {
  transform: scale(1.03);
  background: rgba(255, 255, 255, 0.10);
}

.sq-match-card.selected {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.18);
  transform: scale(1.04);
}

.sq-match-card.matched {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.12);
  opacity: 0.65;
  pointer-events: none;
}

.sq-match-card.wrong {
  border-color: #ff4757;
  background: rgba(255, 71, 87, 0.12);
  animation: shake 0.3s ease;
}

/* Left card: square image fills card width, Spanish word label below */
.sq-match-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sq-match-card-img .sq-game-tile-img-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 0;
}

.sq-match-card-img .sq-game-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sq-match-card-word {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 2.2vw, 15px);
  color: #ffffff;
  text-align: center;
  padding: 5px 6px 6px;
  line-height: 1.2;
}

/* Right card: English text centred, min-height matches left card visual weight */
.sq-match-card--en {
  min-height: 90px;
  padding: 14px 12px;
}

.sq-match-card-en {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(12px, 2.2vw, 15px);
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
}

.sq-match-score {
  text-align: center;
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-moon-silver, #c8d6e5);
  font-weight: 700;
  margin-top: 8px;
}

/* ┈ Echo ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ */

.sq-echo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 8px;
  gap: 12px;
}

.sq-echo-counter {
  width: 100%;
  text-align: center;
}

.sq-echo-progress {
  margin-top: 6px;
}

.sq-echo-stop-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.sq-echo-stop-btn {
  font-size: clamp(12px, 1.8vw, 14px);
  padding: 6px 14px;
}

/* Image tile — large enough to be a meaningful comprehension anchor */
.sq-echo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 38vw, 240px);
  height: clamp(160px, 38vw, 240px);
  margin: 4px auto;
  border-radius: var(--sq-radius-lg, 24px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
}

.sq-echo-tile .sq-game-tile-img-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  min-height: unset;
  border-radius: 0;
}

.sq-echo-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.sq-echo-mic-btn {
  font-size: 24px;
}

.sq-echo-skip-btn {
  font-size: clamp(13px, 1.8vw, 15px);
  opacity: 0.75;
}

.sq-echo-result-bonus {
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  color: var(--color-gold, #ffd700);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  margin-top: 4px;
}

/* ┈ Voice Practice ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ */

.sq-vp-round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  animation: anim-fade-up 0.25s ease both;
}

/* English cue — primary large heading, not a subtitle */
.sq-vp-english {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(28px, 5.5vw, 42px);
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  margin: 6px 0 10px;
  line-height: 1.1;
}

.sq-vp-instruction {
  font-size: 13px;
  color: var(--profile-accent, rgba(168, 85, 247, 0.8));
  font-style: italic;
  margin-bottom: 4px;
}

/* Image tile — large enough to anchor comprehension */
.sq-vp-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 38vw, 240px);
  height: clamp(160px, 38vw, 240px);
  margin: 0 auto;
  border-radius: var(--sq-radius-lg, 24px);
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

.sq-vp-tile .sq-game-tile-img-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  min-height: unset;
  border-radius: 0;
}

.sq-vp-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.sq-vp-bonus {
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  color: var(--color-gold, #ffd700);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  margin-top: 4px;
}

/* ── 30.9  Quiz ───────────────────────────────────────────── */

.sq-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sq-quiz-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.sq-quiz-score {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(14px, 2vw, 18px);
  color: #ffffff;
}

/* Companion images */
.sq-quiz-companion-ambient {
  width: clamp(40px, 8vw, 60px);
  height: clamp(40px, 8vw, 60px);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sq-quiz-intro-companion,
.sq-quiz-companion-ambient {
  display: block;
  margin: 0 auto 8px;
}

.sq-quiz-results-companion {
  width: clamp(80px, 18vw, 120px);
  height: clamp(80px, 18vw, 120px);
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
  margin-bottom: 4px;
  animation: anim-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Question prompt */
.sq-quiz-prompt {
  text-align: center;
  padding: 16px 10px 8px;
}

.sq-quiz-prompt-label {
  font-size: clamp(13px, 1.8vw, 15px);
  margin-bottom: 10px;
}

.sq-quiz-question {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(36px, 5vw, 56px);
  color: #ffffff;
  text-shadow: 0 0 20px var(--profile-accent-glow, rgba(168, 85, 247, 0.5));
  text-align: center;
  margin: 24px 0 32px;
}

/* Text options (phrases) — full-width buttons */
.sq-quiz-options { margin-top: 16px; }

.sq-quiz-option {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--sq-radius-md, 18px);
  padding: 24px 28px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(20px, 2.8vw, 28px);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  margin-bottom: 16px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sq-quiz-option:hover:not(:disabled) {
  border-color: var(--profile-accent, rgba(168, 85, 247, 0.5));
  background: rgba(168, 85, 247, 0.12);
  transform: translateX(5px);
}

.sq-quiz-option.correct {
  background: rgba(0, 255, 136, 0.15);
  border-color: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.4);
}

.sq-quiz-option.wrong {
  background: rgba(255, 71, 87, 0.15);
  border-color: #ff4757;
  color: #ff4757;
}

.sq-quiz-letter {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Image tile options — 2×2 grid for noun/adj questions */
.sq-quiz-options--tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.sq-quiz-option--tile {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 14px;
  min-height: unset;
  text-align: center;
  position: relative;
  margin-bottom: 0;
}

.sq-quiz-option--tile:hover:not(:disabled) {
  transform: scale(1.03);
}

.sq-quiz-option--tile .sq-quiz-letter {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.sq-quiz-tile-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 130px;
}

.sq-quiz-tile-wrap .sq-game-tile-img-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: var(--sq-radius-md, 18px);
}

.sq-quiz-tile-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(13px, 1.9vw, 16px);
  color: #ffffff;
  line-height: 1.2;
}

.sq-quiz-option--tile.correct .sq-quiz-tile-wrap {
  outline: 3px solid #00ff88;
  border-radius: var(--sq-radius-md, 18px);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.4);
}

.sq-quiz-option--tile.wrong .sq-quiz-tile-wrap {
  outline: 3px solid #ff4757;
  border-radius: var(--sq-radius-md, 18px);
}

/* Results screen */
.sq-quiz-results-pts-breakdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-moon-silver, #c8d6e5);
  font-weight: 700;
  margin-bottom: 6px;
}

.sq-quiz-bonus {
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  color: var(--color-gold, #ffd700);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

/* ── 30.10  Responsive adjustments ──────────────────────── */

@media (max-width: 480px) {
  /* Companion sizes */
  .sq-game-completion-companion { width: 72px;  height: 72px;  }
  .sq-games-companion-corner    { top: 8px;     right: 10px;   }
  .sq-games-companion-ambient   { width: 38px;  height: 38px;  }
  .sq-quiz-companion-ambient    { width: 34px;  height: 34px;  }
  .sq-quiz-results-companion    { width: 64px;  height: 64px;  }

  /* Echo / Voice tiles */
  .sq-echo-tile,
  .sq-vp-tile {
    width: 120px;
    height: 120px;
  }

  /* I Spy grid */
  .sq-ispy-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  /* Story card — full bleed on small screens too */
  .sq-story-card {
    flex: 0 0 100%;
    width: 100%;
  }

  .sq-story-card-body {
    padding: 12px 20px 72px 20px;
  }

  .sq-card-cta {
    font-size: 15px;
    padding: 13px 26px;
    bottom: 16px;
  }

  .sq-story-companion-img {
    width: 58px;
  }

  .sq-card-subpips {
    bottom: 70px;
  }
}

/* ── 30.11  Universal game control button ────────────────── */

.sq-game-ctrl-btn {
  padding: 12px 24px;
  font-size: clamp(14px, 2vw, 17px);
  border-radius: var(--radius-full, 9999px);
  font-weight: 800;
  min-height: 48px;
}

/* ============================================================
   31. SLEEP SCREEN
   ============================================================ */

#sleep-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

#sleep-overlay.sleep-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── WebGL canvas background ── */
.sleep-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Content cluster (clock + temp) ── */
.sleep-content {
  position: relative;
  z-index: 2;
  text-align: center;
  transition: transform 4s ease-in-out;
  will-change: transform;
}

/* ── Glass card ── */
.sleep-card {
  padding: 40px 56px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sleep-time {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(55px, 11.5vw, 92px);
  font-weight: 800;
  color: rgba(180, 210, 210, 0.22);
  letter-spacing: 2px;
  line-height: 1;
}

.sleep-date {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 600;
  color: rgba(150, 195, 190, 0.14);
  margin-top: 6px;
  letter-spacing: 1px;
}

.sleep-temp {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(23px, 4.6vw, 37px);
  font-weight: 700;
  color: rgba(150, 195, 190, 0.14);
  margin-top: 24px;
  min-height: 1.2em;
}

.sleep-forecast {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 4.6vw, 36px);
  margin-top: 16px;
}

.sleep-forecast-day {
  text-align: center;
}

.sleep-forecast-name {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 2.9vw, 18px);
  font-weight: 700;
  color: rgba(150, 195, 190, 0.13);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sleep-forecast-emoji {
  font-size: clamp(21px, 4vw, 32px);
  margin: 4px 0;
  opacity: 0.14;
}

.sleep-forecast-temps {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 600;
  color: rgba(150, 195, 190, 0.10);
}

/* ── Lock message ── */
.sleep-lock-msg {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(18px, 4vw, 26px);
  color: rgba(39, 233, 183, 0);
  transition: color 0.5s ease;
  z-index: 3;
  pointer-events: none;
}

.sleep-lock-msg.sleep-msg-visible {
  color: rgba(39, 233, 183, 0.30);
}

/* ── Parent override zone (invisible, top-right) ── */
.sleep-parent-zone {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  z-index: 4;
}

/* ============================================================
   32. AUTH GATE
   ============================================================ */

#auth-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(8, 8, 28, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
}

.auth-gate-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: clamp(32px, 6vw, 48px);
  width: min(360px, 85vw);
  text-align: center;
  backdrop-filter: blur(20px);
}

.auth-gate-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.auth-gate-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(22px, 4vw, 28px);
  color: #fff;
  margin-bottom: 24px;
}

.auth-gate-input-row {
  position: relative;
  width: 100%;
}

.auth-gate-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  opacity: 0.6;
}

.auth-gate-input {
  width: 100%;
  padding: 14px 44px 14px 16px;
  font-size: 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: center;
  letter-spacing: 4px;
  outline: none;
  box-sizing: border-box;
}

.auth-gate-input:focus {
  border-color: var(--profile-accent, #a855f7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.auth-gate-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 1px;
}

.auth-gate-error {
  color: #ff4757;
  font-size: 14px;
  font-weight: 700;
  min-height: 20px;
  margin: 10px 0;
}

.auth-gate-btn {
  width: 100%;
  padding: 14px;
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  color: #fff;
  background: var(--profile-accent, #a855f7);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.auth-gate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-gate-btn:active:not(:disabled) {
  opacity: 0.8;
}

/* ============================================================
   PARENT GATE — PIN pad for kid-proofing settings
   ============================================================ */
#parent-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(8, 8, 28, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#parent-gate-overlay.parent-gate-open {
  opacity: 1;
  pointer-events: all;
}

.parent-gate-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px 24px 24px;
  width: min(340px, 85vw);
  text-align: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#parent-gate-overlay.parent-gate-open .parent-gate-card {
  transform: scale(1);
}

.parent-gate-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.parent-gate-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}
.parent-gate-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.parent-gate-dot.filled {
  background: var(--profile-accent, #a855f7);
  border-color: var(--profile-accent, #a855f7);
}

.parent-gate-error {
  color: #ff4757;
  font-size: 14px;
  font-weight: 700;
  min-height: 24px;
  line-height: 24px;
  letter-spacing: 4px;
}

.parent-gate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
  justify-items: center;
}
.parent-gate-key {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 28px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.parent-gate-key:active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.92);
}
.parent-gate-fn {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.45);
}

@keyframes parent-gate-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-12px); }
  40%      { transform: translateX(10px); }
  60%      { transform: translateX(-8px); }
  80%      { transform: translateX(6px); }
}
.parent-gate-shake {
  animation: parent-gate-shake 0.4s ease;
}