/* 
 * ඩිජිටල් වෙසක් නගරය (vesak.itv.lk) — Custom Design System CSS
 * Built with reverence by Uvin Vindula (IAMUVIN) — www.iamuvin.com
 * Client: iTV Sri Lanka
 * Version: 1.0 — 2026 Vesak Edition
 * Strictly NO AI Feeling & NO AI Design
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Noto+Sans+Sinhala:wght@400;600;700;800&display=swap');

/* Local Noto Sans Sinhala Offline Fallbacks */
@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-sinhala/NotoSansSinhala-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/noto-sinhala/NotoSansSinhala-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/noto-sinhala/NotoSansSinhala-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Sinhala';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/noto-sinhala/NotoSansSinhala-Bold.woff2') format('woff2');
}

:root {
  --header-height: 90px;

  /* ── Night sky backgrounds ─────────────────────────────── */
  --color-night-deep:     #0D0B2A;   /* Primary background — deep indigo */
  --color-night-mid:      #131040;   /* Slightly lighter — zone backgrounds */
  --color-night-light:    #1A1550;   /* Cards, elevated surfaces */
  --color-night-surface:  #221C65;   /* Hover states, interactive surfaces */

  /* ── Warm light sources ────────────────────────────────── */
  --color-flame:          #F7931A;   /* iTV brand orange — oil lamp flame */
  --color-flame-bright:   #FFA940;   /* Flame highlight / hover */
  --color-flame-dim:      #C4700D;   /* Flame shadow / pressed */
  --color-gold:           #D4A017;   /* Buddhist gold — thorana, borders */
  --color-gold-bright:    #F0C040;   /* Gold highlight */
  --color-saffron:        #FF8C00;   /* Temple saffron — monk robes, lanterns */
  --color-amber:          #FFAD33;   /* Warm lantern light */
  --color-moonlight:      #FFF8E0;   /* Full moon, primary text on dark */

  /* ── Buddhist flag colors ────────────────────────────── */
  --color-buddhist-blue:  #0033CC;   /* Loving-kindness */
  --color-buddhist-yellow:#FFD700;   /* Middle Path */
  --color-buddhist-red:   #CC0000;   /* Blessings of the Dhamma */
  --color-buddhist-white: #F0EDE0;   /* Purity of Dhamma */
  --color-buddhist-orange:#FF8C00;   /* Wisdom of Buddha */

  /* ── Botanical palette ─────────────────────────────────── */
  --color-lotus-pink:     #E8538C;   /* Lotus blossom */
  --color-lotus-light:    #F4A0C0;   /* Lotus petal highlight */
  --color-bodhi-green:    #2E7D32;   /* Bodhi tree / leaves */
  --color-bodhi-light:    #4CAF50;   /* Leaf highlight */
  --color-temple-stone:   #4A3728;   /* Stone wall, dansala background */
  --color-earth:          #6B4226;   /* Clay lamp, earth tones */

  /* ── Special purpose ───────────────────────────────────── */
  --color-poya-moon:      #FFF8E0;   /* Full moon disc */
  --color-moon-glow:      rgba(255,248,224,0.15); /* Moon halo */
  --color-firefly:        rgba(255,240,160,0.8);  /* Firefly particle */
  --color-star:           rgba(255,255,255,0.6);  /* Night sky stars */

  /* ── Text colors ───────────────────────────────────────── */
  --color-text-primary:   #FFF8E0;   /* Moonlight white — headings */
  --color-text-secondary: #C9C0A8;   /* Warm gray — body text */
  --color-text-muted:     #7A7060;   /* Muted — labels, captions */
  --color-text-sinhala:   #FFE8A0;   /* Warm gold for Sinhala display text */

  /* ── Interactive states ────────────────────────────────── */
  --color-focus:          #F7931A;   /* Focus ring — brand orange */
  --color-selected:       rgba(247,147,26,0.15); /* Selection bg */
  --color-border:         rgba(255,255,255,0.08); /* Default border */
  --color-border-warm:    rgba(212,160,23,0.25);  /* Gold border */
  --color-border-glow:    rgba(247,147,26,0.4);   /* Active/hover border */

  /* ── Glow values ───────────────────────────────────────── */
  --glow-flame:    0 0 20px rgba(247,147,26,0.4),
                   0 0 40px rgba(247,147,26,0.2),
                   0 0 80px rgba(247,147,26,0.1);
  --glow-gold:     0 0 16px rgba(212,160,23,0.5),
                   0 0 32px rgba(212,160,23,0.2);
  --glow-moon:     0 0 60px rgba(255,248,224,0.4),
                   0 0 120px rgba(255,248,224,0.15),
                   0 0 240px rgba(255,248,224,0.06);
  --glow-lotus:    0 0 20px rgba(232,83,140,0.4),
                   0 0 40px rgba(232,83,140,0.15);
  --glow-surface:  0 8px 32px rgba(0,0,0,0.4),
                   0 0 1px rgba(255,255,255,0.05);
  --glow-text:     0 2px 4px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 232, 160, 0.5), 0 0 40px rgba(247, 147, 26, 0.25);

  /* ── Fonts ─────────────────────────────────────────────── */
  --font-sinhala:  'Noto Sans Sinhala', 'Iskoola Pota', serif;
  --font-display:  'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* ── Typography Scale ────────────────────────────────── */
  --text-display-xl: clamp(2.5rem, 8vw, 5rem);      /* Gateway title */
  --text-display-lg: clamp(2rem, 6vw, 3.5rem);       /* Zone names */
  --text-display-md: clamp(1.5rem, 4vw, 2.25rem);    /* Story titles */

  --text-sinhala-xl: clamp(2rem, 6vw, 3.5rem);       /* Hero Sinhala */
  --text-sinhala-lg: clamp(1.375rem, 3.5vw, 2rem);   /* Section Sinhala */
  --text-sinhala-md: clamp(1.1rem, 2.5vw, 1.3rem);   /* Body Sinhala */
  --text-sinhala-sm: clamp(0.95rem, 2vw, 1.1rem);    /* Label Sinhala */
  --text-sinhala-xs: clamp(0.85rem, 1.6vw, 0.95rem); /* Micro-caption Sinhala — minimum readable */

  --text-body-lg:    clamp(1rem, 2vw, 1.125rem);
  --text-body-md:    clamp(0.9375rem, 1.8vw, 1rem);
  --text-body-sm:    clamp(0.8125rem, 1.5vw, 0.875rem);

  --text-label:      0.75rem;
  --text-caption:    0.6875rem;
}

/* ── Reset & Base Styles ─────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  background-color: var(--color-night-deep);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ── Custom Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-night-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(247, 147, 26, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-flame);
}

/* ── Utility Classes ────────────────────────────────────────────── */
.sinhala {
  font-family: var(--font-sinhala);
  line-height: 1.8;
  letter-spacing: 0;
  word-break: keep-all;
  font-size: var(--text-sinhala-md);
}

.sinhala-heading {
  font-family: var(--font-sinhala);
  font-weight: 700;
  font-size: var(--text-sinhala-lg);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-text-sinhala);
  text-shadow: var(--glow-text);
  margin-bottom: 1.2rem;
}

.sinhala-desc {
  font-size: var(--text-sinhala-sm);
  color: var(--color-text-secondary);
}

.sinhala-caption {
  font-size: var(--text-sinhala-xs);
  color: var(--color-text-muted);
}

.sinhala-label {
  font-size: var(--text-sinhala-sm);
  color: var(--color-text-secondary);
  display: block;
}

/* ── Layout + typography utilities — extracted from inline styles ── */
.u-text-center   { text-align: center; }
.u-w-full        { width: 100%; }
.u-flex-1        { flex: 1; }
.u-text-shadow   { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }

.u-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.u-label-uppercase {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.u-text-micro-block {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.u-empty-state-msg {
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 5rem;
  font-size: 0.85rem;
}

.text-flame {
  color: var(--color-flame) !important;
}

.sinhala-bold {
  font-weight: 800;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--color-flame);
  color: #0A0A16;
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 9999;
  font-weight: 700;
  transition: top 0.2s ease;
  text-decoration: none;
}
.skip-link:focus {
  top: 15px;
}

.text-capsule-backdrop {
  background: rgba(6, 4, 18, 0.72);
  padding: 0.85rem 1.4rem;
  border-radius: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: block;
  max-width: min(100%, 36rem);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--color-text-primary) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.launch-hint {
  max-width: 340px;
  margin-top: 1.5rem;
  font-size: var(--text-sinhala-sm);
  text-align: center;
}

.glass-card {
  background: linear-gradient(135deg, rgba(12, 9, 36, 0.85) 0%, rgba(6, 4, 18, 0.94) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1px solid rgba(212, 160, 23, 0.45); /* Elegant gold border */
  border-radius: 24px;
  box-shadow: 
    inset 0 0 16px rgba(212, 160, 23, 0.15), /* Glowing inner gold outline */
    0 8px 32px rgba(0, 0, 0, 0.65), /* Deep premium drop shadow */
    0 0 2px rgba(255, 255, 255, 0.1) inset,
    0 0 25px rgba(212, 160, 23, 0.12);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow, border-color;
}

.glass-card:hover {
  border-color: rgba(255, 215, 0, 0.85); /* Radiant gold */
  box-shadow: 
    inset 0 0 24px rgba(255, 215, 0, 0.25), /* Stronger glowing inner outline */
    0 15px 45px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(255, 255, 255, 0.2) inset,
    0 0 45px rgba(255, 215, 0, 0.35); /* Outer gold aura */
  transform: translateY(-4px) translateZ(0);
}

.glass-card-warm {
  background: linear-gradient(135deg, rgba(26, 14, 6, 0.85) 0%, rgba(14, 8, 4, 0.94) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1px solid rgba(247, 147, 26, 0.5); /* Saffron-flame border */
  border-radius: 24px;
  box-shadow: 
    inset 0 0 16px rgba(247, 147, 26, 0.15), /* Glowing inner saffron outline */
    0 8px 32px rgba(0, 0, 0, 0.65),
    0 0 2px rgba(255, 255, 255, 0.1) inset,
    0 0 25px rgba(247, 147, 26, 0.15);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow, border-color;
}

.glass-card-warm:hover {
  border-color: rgba(247, 147, 26, 0.85);
  box-shadow: 
    inset 0 0 24px rgba(247, 147, 26, 0.25),
    0 15px 45px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(255, 255, 255, 0.2) inset,
    0 0 45px rgba(247, 147, 26, 0.4);
  transform: translateY(-4px) translateZ(0);
}

/* ── Luminous Neon SVG Paths ────────────────────────────────────── */
.glowing-neon-path {
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 6px var(--color-flame)) drop-shadow(0 0 15px var(--color-saffron));
  stroke: #fffdeb !important;
  animation: neonBreath 4s ease-in-out infinite alternate;
}
.glowing-gold-path {
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 8px var(--color-gold)) drop-shadow(0 0 20px var(--color-gold-bright));
  stroke: #fffbf0 !important;
  animation: goldBreath 5s ease-in-out infinite alternate;
}
.glowing-white-path {
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px var(--color-moonlight)) drop-shadow(0 0 10px #ffffff);
  stroke: #ffffff !important;
  animation: whiteBreath 3s ease-in-out infinite alternate;
}

@keyframes neonBreath {
  0% { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 4px var(--color-flame)) drop-shadow(0 0 10px var(--color-saffron)); opacity: 0.85; }
  100% { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px var(--color-flame)) drop-shadow(0 0 20px var(--color-saffron)); opacity: 1; }
}
@keyframes goldBreath {
  0% { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 5px var(--color-gold)) drop-shadow(0 0 12px var(--color-gold-bright)); opacity: 0.8; }
  100% { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px var(--color-gold)) drop-shadow(0 0 25px var(--color-gold-bright)); opacity: 1; }
}
@keyframes whiteBreath {
  0% { filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 3px var(--color-moonlight)) drop-shadow(0 0 7px #ffffff); opacity: 0.9; }
  100% { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px var(--color-moonlight)) drop-shadow(0 0 14px #ffffff); opacity: 1; }
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--color-flame);
  color: #0A0A16;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-sm);
  font-weight: 700;
  padding: 0.8rem 1.8rem;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--glow-flame);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--color-flame-bright);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 
    0 0 25px rgba(247, 147, 26, 0.5),
    0 0 45px rgba(247, 147, 26, 0.25);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-primary:active {
  transform: translateY(-1px) scale(0.99);
}

#start-journey-btn {
  animation: floating-btn 3.8s ease-in-out infinite;
  padding: clamp(0.6rem, 1.5vh, 0.8rem) clamp(1.2rem, 3.5vw, 1.8rem) !important;
  font-size: clamp(0.85rem, 1.8vh, 0.95rem) !important;
  margin-top: clamp(0.5rem, 1.5vh, 1.2rem) !important;
}

@keyframes floating-btn {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: var(--glow-flame);
  }
  50% {
    transform: translateY(-6px) scale(1.025);
    box-shadow: 
      0 0 30px rgba(247, 147, 26, 0.65),
      0 0 50px rgba(247, 147, 26, 0.35);
  }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  background: rgba(255, 248, 224, 0.06);
  color: var(--color-moonlight);
  border: 1px solid rgba(255, 248, 224, 0.15);
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-sm);
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-secondary:hover {
  background: rgba(255, 248, 224, 0.12);
  border-color: var(--color-moonlight);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.99);
}

.dharma-wheel {
  display: inline-block;
  margin-right: 8px;
  font-size: 1.1rem;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-secondary:hover .dharma-wheel {
  transform: rotate(360deg);
}

/* ── PERSISTENT UI OVERLAY ─────────────────────────────────────── */
#ui-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

#top-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
  background: rgba(13, 11, 42, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 160, 23, 0.12);
  box-sizing: border-box;
}

/* ── BRAND HEADER — clean logo + gradient title ────────────────────── */
.brand-section {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0; /* allow shrinking inside flex nav */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-section:hover { transform: translateY(-1px); }
.brand-section:hover .itv-logo {
  filter: drop-shadow(0 0 14px rgba(247, 147, 26, 0.7));
  transform: scale(1.03);
}

.itv-logo {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(247, 147, 26, 0.4));
  transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-title {
  font-family: var(--font-sinhala);
  font-size: clamp(1.05rem, 1.25vw, 1.4rem) !important;
  font-weight: 800;
  letter-spacing: 0.3px;
  /* Sinhala has tall vowel marks (උපරිම, ඉස්කෙහෙල්ල) — needs generous
     line-height + small top padding so ascenders never clip. */
  line-height: 1.5;
  white-space: nowrap;
  overflow: visible;
  padding: 4px 0 4px 10px;
  /* Thin gold separator before the title */
  border-left: 1px solid;
  border-image: linear-gradient(180deg, transparent 8%, rgba(212, 160, 23, 0.65) 50%, transparent 92%) 1;
  /* Gradient text — cream → gold → saffron */
  background: linear-gradient(120deg,
    #FFF8E0 0%,
    #FFE8A0 35%,
    #F0C040 55%,
    #FFE8A0 75%,
    #FFF8E0 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Layered glow — soft outer + tight inner for depth */
  filter:
    drop-shadow(0 0 1px rgba(255, 232, 160, 0.6))
    drop-shadow(0 0 12px rgba(255, 232, 160, 0.25))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  animation: brandTitleSheen 9s ease-in-out infinite alternate;
}

@keyframes brandTitleSheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-title { animation: none; }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.action-btn {
  background: rgba(255, 248, 224, 0.05);
  border: 1px solid rgba(255, 248, 224, 0.15);
  color: var(--color-moonlight);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-sinhala);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  text-decoration: none;
}

.action-btn:hover {
  background: rgba(255, 248, 224, 0.12);
  border-color: var(--color-flame);
  box-shadow: 0 0 12px rgba(247, 147, 26, 0.35);
  transform: translateY(-2px);
}

.action-btn.active {
  border-color: var(--color-flame);
  background: rgba(247, 147, 26, 0.15);
  box-shadow: 0 0 10px rgba(247, 147, 26, 0.4);
}

/* Header Action button element styling controls */
.lang-text-short {
  display: none !important;
}

.lang-text-long {
  display: inline !important;
}

.btn-emoji {
  display: inline-flex;
  align-items: center;
}

.btn-text {
  display: inline !important;
}

/* Scroll progress line */
#progress-line {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-flame), var(--color-lotus-pink), var(--color-gold-bright));
  box-shadow: 0 0 12px rgba(247, 147, 26, 0.6);
  width: 0%;
  transition: width 0.1s ease-out;
}

/* Zone Navigator Dots */
#zone-nav {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
}

.zone-dot-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.zone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 248, 224, 0.25);
  border: 1px solid rgba(255, 248, 224, 0.15);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.zone-dot-wrapper:hover .zone-dot {
  background: var(--color-moonlight);
  transform: scale(1.3);
}

.zone-dot-wrapper.active .zone-dot {
  background: var(--color-flame);
  border-color: var(--color-flame);
  transform: scale(1.6);
  animation: dotBreath 2s infinite alternate;
}

@keyframes dotBreath {
  0% {
    box-shadow: 0 0 8px var(--color-flame), 0 0 0 2px rgba(247, 147, 26, 0.2);
  }
  100% {
    box-shadow: 0 0 18px var(--color-flame), 0 0 0 6px rgba(247, 147, 26, 0);
  }
}

.zone-dot-label {
  position: absolute;
  right: 26px;
  font-family: var(--font-sinhala);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  background: rgba(15, 12, 45, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(247, 147, 26, 0.28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(247, 147, 26, 0.08);
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 10;
}

.zone-dot-wrapper:hover .zone-dot-label {
  opacity: 1;
  transform: translateX(0);
}

.zone-dot-wrapper.active .zone-dot-label {
  color: var(--color-text-primary);
  border-color: rgba(247, 147, 26, 0.65);
  box-shadow: 0 6px 25px rgba(247, 147, 26, 0.25), inset 0 0 10px rgba(247, 147, 26, 0.15);
}

/* Mobile Zone Nav dot layout */
@media (max-width: 768px) {
  #zone-nav {
    display: none; /* Hide desktop dots on mobile to prevent clutter */
  }
}

@media (min-width: 769px) {
  .workshop-grid, .pandal-grid, .dansala-grid, .music-grid, .home-grid {
    padding-left: 5rem;
    padding-right: 5rem;
    box-sizing: border-box;
  }
}

/* ── CANVAS LAYERS ────────────────────────────────────────────── */
#canvas-bg, #canvas-fx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#canvas-bg { z-index: 1; }
#canvas-fx { z-index: 2; }

/* ── MAIN SCROLL SNAP CONTAINER ────────────────────────────────── */
#scroll-container {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

.zone {
  width: 100%;
  min-height: 100vh;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: calc(var(--header-height) + 1.5rem) 1.5rem 2.5rem 1.5rem;
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

.zone::before,
.zone::after {
  content: "";
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
  pointer-events: none;
}

.zone--gateway::before,
.zone--gateway::after {
  display: none !important;
}

.zone-inner {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── ZONE 1: ద්වාරය — THE GATEWAY ─────────────────────────────── */
.zone--gateway {
  justify-content: flex-start !important;
  padding-top: calc(var(--header-height) + clamp(1rem, 3vh, 2.5rem)) !important;
  background: 
    linear-gradient(to bottom, 
      var(--color-night-deep) 0%, 
      rgba(13, 11, 42, 0.76) 15%, 
      rgba(13, 11, 42, 0.76) 85%, 
      var(--color-night-deep) 100%
    ), 
    url('assets/images/vesak_hero_bg.webp') no-repeat center center / cover;
}

/* ── Cinematic Moon & Cloud Layers ── */
.moon-container {
  position: absolute;
  top: calc(var(--header-height) + clamp(2rem, 5vh, 4rem));
  right: clamp(2%, 4vw, 8%);
  width: clamp(80px, 18vh, 150px);
  height: clamp(80px, 18vh, 150px);
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

.moon-glow {
  position: absolute;
  top: -12.5%;
  left: -12.5%;
  width: 125%;
  height: 125%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 206, 0.4) 0%, rgba(255, 230, 160, 0.25) 30%, rgba(255, 210, 100, 0.08) 60%, transparent 80%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: lunarCorona 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

.moon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fffdf4 25%, #ffe6a3 60%, #bca160 100%);
  box-shadow: 
    0 0 40px rgba(255, 248, 224, 0.9),
    0 0 80px rgba(255, 241, 197, 0.5),
    inset -18px -18px 36px rgba(135, 96, 25, 0.4),
    inset 12px 12px 24px rgba(255, 255, 255, 0.7);
  overflow: hidden;
  z-index: 2;
  transform: translateZ(10px);
  animation: moonBreathe 12s ease-in-out infinite;
}

.moon-craters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 75% 45%, rgba(135, 96, 25, 0.18) 0%, rgba(135, 96, 25, 0.18) 12%, transparent 22%),
    radial-gradient(circle at 65% 25%, rgba(135, 96, 25, 0.22) 0%, rgba(135, 96, 25, 0.15) 8%, transparent 16%),
    radial-gradient(circle at 80% 20%, rgba(135, 96, 25, 0.15) 0%, rgba(135, 96, 25, 0.1) 6%, transparent 14%),
    radial-gradient(circle at 45% 75%, rgba(135, 96, 25, 0.2) 0%, rgba(135, 96, 25, 0.12) 10%, transparent 20%),
    radial-gradient(circle at 25% 65%, rgba(135, 96, 25, 0.15) 0%, rgba(135, 96, 25, 0.1) 7%, transparent 15%),
    radial-gradient(circle at 55% 55%, rgba(135, 96, 25, 0.12) 0%, rgba(135, 96, 25, 0.08) 12%, transparent 24%),
    radial-gradient(circle at 35% 40%, rgba(135, 96, 25, 0.16) 0%, rgba(135, 96, 25, 0.1) 9%, transparent 18%);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.lunar-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0.55;
  mix-blend-mode: normal;
  pointer-events: none;
}

.cloud-1 {
  top: 30%;
  left: -40px;
  width: 220px;
  height: 35px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45) 50%, transparent);
  z-index: 3;
  transform: translateZ(25px);
  animation: cloudDrift1 45s linear infinite;
}

.cloud-2 {
  top: 50%;
  left: -20px;
  width: 200px;
  height: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 180, 0.35) 50%, transparent);
  z-index: 4;
  transform: translateZ(35px);
  animation: cloudDrift2 65s linear infinite;
}

.thorana-arch {
  width: 100%;
  max-width: clamp(320px, 66vh, 760px) !important; /* Majestic on large screens, scales down gracefully */
  height: auto;
  aspect-ratio: 600 / 325; /* Exact layout bounds matching the new viewBox */
  flex-shrink: 0 !important; /* Lock the aspect ratio, preventing vertical squishing */
  margin-top: clamp(1rem, 2.5vh, 2rem) !important;
  margin-bottom: clamp(0.4rem, 1vh, 0.8rem) !important;
  filter: drop-shadow(0 0 15px rgba(212, 160, 23, 0.15));
}

.zone-1-branding {
  flex-shrink: 0 !important; /* Protect from flex compression to ensure text stays legible */
  margin-bottom: clamp(0.8rem, 1.8vh, 1.2rem) !important;
  background: rgba(6, 4, 18, 0.76);
  padding: clamp(0.8rem, 2vh, 1.4rem) clamp(1rem, 3vw, 2rem) !important;
  border-radius: 24px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212, 160, 23, 0.28);
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.6),
    0 0 1px rgba(255,255,255,0.15) inset,
    0 0 30px rgba(212, 160, 23, 0.06);
  max-width: 640px; /* Perfectly matches the grander Gateway Arch */
  text-align: center;
  width: 90%;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.buddhist-ribbon-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, 
    var(--color-buddhist-blue) 0%, var(--color-buddhist-blue) 16.6%, 
    var(--color-buddhist-yellow) 16.6%, var(--color-buddhist-yellow) 33.3%, 
    var(--color-buddhist-red) 33.3%, var(--color-buddhist-red) 50%, 
    var(--color-buddhist-white) 50%, var(--color-buddhist-white) 66.6%, 
    var(--color-buddhist-orange) 66.6%, var(--color-buddhist-orange) 83.3%, 
    var(--color-buddhist-blue) 83.3%, var(--color-buddhist-blue) 86.6%,
    var(--color-buddhist-yellow) 86.6%, var(--color-buddhist-yellow) 90%,
    var(--color-buddhist-red) 90%, var(--color-buddhist-red) 93.3%,
    var(--color-buddhist-white) 93.3%, var(--color-buddhist-white) 96.6%,
    var(--color-buddhist-orange) 96.6%, var(--color-buddhist-orange) 100%
  );
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.4);
  z-index: 10;
  transform: translateZ(15px);
}

.hero-dharma-wheel-container {
  width: clamp(52px, 7.5vh, 68px) !important;
  height: clamp(52px, 7.5vh, 68px) !important;
  margin: 0 auto clamp(0.5rem, 1.2vh, 0.8rem) auto !important;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: translateZ(20px);
}

.hero-dharma-wheel-container .dharma-wheel {
  width: 100%;
  height: 100%;
  animation: spinWheelSlow 25s linear infinite;
  filter: drop-shadow(0 0 10px rgba(212, 160, 23, 0.6));
}

@keyframes spinWheelSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.text-gateway {
  font-family: var(--font-sinhala);
  font-size: clamp(1.5rem, 3.5vh, 2.2rem) !important;
  font-weight: 800;
  color: var(--color-moonlight);
  text-shadow: var(--glow-text);
  line-height: 1.2 !important;
  text-align: center;
  margin-bottom: clamp(0.2rem, 0.5vh, 0.4rem) !important;
}

.text-gateway-sub {
  font-family: var(--font-sinhala);
  font-size: clamp(0.85rem, 2vh, 1.05rem) !important;
  font-weight: 700;
  color: var(--color-text-sinhala);
  text-shadow: 0 0 10px rgba(255, 232, 160, 0.2);
  margin-bottom: clamp(0.4rem, 1.2vh, 0.8rem) !important;
  text-align: center;
}

.text-welcome {
  font-family: var(--font-sinhala);
  font-size: clamp(0.75rem, 1.6vh, 0.88rem) !important;
  color: var(--color-text-secondary);
  margin-bottom: 0 !important;
  text-align: center;
  line-height: 1.4 !important;
}

/* ── ZONE 2: කූඩු ඉස්කෝලය — THE LANTERN WORKSHOP ─────────────── */
.zone--workshop {
  background: 
    linear-gradient(to bottom, 
      var(--color-night-deep) 0%, 
      rgba(13, 11, 42, 0.76) 15%, 
      rgba(13, 11, 42, 0.76) 85%, 
      var(--color-night-deep) 100%
    ), 
    url('assets/images/vesak_workshop_bg.webp') no-repeat center center / cover;
}

.workshop-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  width: 100%;
  align-items: center;
}

.builder-interface {
  padding: 2.2rem;
  width: 100%;
}

.builder-header {
  border-bottom: 1px solid rgba(255, 248, 224, 0.1);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.builder-steps-indicator {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  position: relative;
}

.step-indicator {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.step-indicator.active {
  background: radial-gradient(circle at 35% 35%, var(--color-gold-bright), var(--color-gold));
  border-color: var(--color-gold-bright);
  color: #0A0A16;
  transform: scale(1.15);
  animation: indicatorBreath 2s infinite alternate;
}

@keyframes indicatorBreath {
  0% {
    box-shadow: 0 0 10px var(--color-gold), 0 0 0 2px rgba(212, 160, 23, 0.2);
  }
  100% {
    box-shadow: 0 0 20px var(--color-gold), 0 0 0 6px rgba(212, 160, 23, 0);
  }
}

.step-panel {
  display: none;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-panel.active {
  display: block;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1.5rem 0;
}

.option-button {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--color-text-secondary);
}

.option-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 160, 23, 0.45);
  transform: translateY(-3px);
  color: var(--color-text-primary);
}

.option-button.selected {
  background: rgba(212, 160, 23, 0.16);
  border-color: var(--color-gold);
  color: var(--color-text-primary);
  transform: scale(1.04);
  box-shadow: 0 0 18px rgba(212, 160, 23, 0.35);
}

.option-icon {
  font-size: 2rem;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.5rem 0;
}

.swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.swatch:hover {
  transform: scale(1.15);
}

.swatch.selected {
  border-color: var(--color-text-primary);
  transform: scale(1.2);
  box-shadow: 0 0 15px currentColor;
}

.swatch.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-weight: bold;
  text-shadow: 0 1px 1px #fff;
  font-size: 0.9rem;
}

.pattern-item {
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-sm);
}

.preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

#kudu-canvas-wrapper {
  position: relative;
  background: radial-gradient(circle, rgba(20,20,50,0.6) 0%, rgba(10,10,30,0.8) 100%);
  border-radius: 24px;
  padding: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--glow-surface);
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.8s ease;
}

#kudu-canvas-wrapper.launching {
  transform: translateY(-150vh) scale(0.2);
  opacity: 0;
}

.input-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  color: var(--color-text-primary);
  font-family: var(--font-sinhala);
  font-size: 16px; /* Prevents auto-zoom on iOS Safari */
  outline: none;
  transition: all 0.3s ease;
  margin: 1rem 0;
}

.input-field:focus {
  border-color: var(--color-saffron);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 14px rgba(255, 140, 0, 0.35);
}

@media (max-width: 1024px) {
  .workshop-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .preview-container {
    order: -1;
  }
}

/* ── ZONE 3: ප්‍රධාන තෝරණය — THE GRAND PANDAL ────────────── */
.zone--pandal {
  background: 
    linear-gradient(to bottom, 
      var(--color-night-deep) 0%, 
      rgba(13, 11, 42, 0.76) 15%, 
      rgba(13, 11, 42, 0.76) 85%, 
      var(--color-night-deep) 100%
    ), 
    url('assets/images/vesak_pandal_bg.webp') no-repeat center center / cover;
}

.pandal-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 4rem;
  width: 100%;
  align-items: center;
}

.pandal-visual-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pandal-svg-container {
  width: 100%;
  max-width: 520px;
  max-height: 72vh;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0 25px rgba(247, 147, 26, 0.15));
  transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.pandal-svg-container svg {
  width: 100%;
  height: auto;
  max-height: 72vh;
  display: block;
}

.pandal-panel-button {
  cursor: pointer;
  transition: all 0.3s ease;
}

.pandal-panel-button:hover {
  filter: brightness(1.3) drop-shadow(0 0 15px rgba(255, 232, 160, 0.6));
}

.pandal-panel-button.visited {
  filter: drop-shadow(0 0 10px rgba(76, 175, 80, 0.5));
}

.pandal-copy {
  padding: 2.2rem;
  flex-shrink: 0;
}

.jataka-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 1.5rem;
}

.jataka-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.jataka-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-flame);
  transform: translateX(8px);
}

.jataka-item:hover .jataka-item-number {
  color: #FFD700;
  text-shadow: 0 0 10px #FFD700, 0 0 20px #FF8C00;
}

.jataka-item.active {
  background: rgba(247, 147, 26, 0.08);
  border-color: var(--color-flame);
}

.jataka-item-number {
  font-family: var(--font-display);
  color: var(--color-flame);
  font-weight: 800;
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.jataka-item-title {
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  flex: 1;
  margin-left: 14px;
}

.jataka-item-status {
  font-family: var(--font-sinhala);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.jataka-item.visited .jataka-item-status {
  color: var(--color-bodhi-light);
}

@media (max-width: 1024px) {
  .pandal-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .pandal-copy {
    max-width: 640px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── ZONE 4: දන්සල — THE GIVING TABLE ──────────────────────────── */
.zone--dansala {
  background: 
    linear-gradient(to bottom, 
      var(--color-night-deep) 0%, 
      rgba(13, 11, 42, 0.76) 15%, 
      rgba(13, 11, 42, 0.76) 85%, 
      var(--color-night-deep) 100%
    ), 
    url('assets/images/vesak_dansala_bg.webp') no-repeat center center / cover;
}

.dansala-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  width: 100%;
  align-items: center;
}

@media (min-width: 1025px) {
  .dansala-grid {
    align-items: stretch;
  }
}

.lamp-wall-card {
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lamp-canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 500px;
  aspect-ratio: 500 / 340;
  display: block;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, #1c1007 0%, #0d0603 100%);
  border: 1.5px solid rgba(247, 147, 26, 0.3);
  box-shadow: 
    inset 0 0 30px rgba(247, 147, 26, 0.08),
    0 15px 35px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(247, 147, 26, 0.12);
  margin: 1.5rem auto 0 auto !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#lamp-canvas:hover {
  border-color: rgba(247, 147, 26, 0.6);
  box-shadow: 
    inset 0 0 45px rgba(247, 147, 26, 0.15),
    0 20px 45px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(247, 147, 26, 0.3);
  transform: translateY(-2px);
}

.lamp-counter-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto 0 auto;
  padding: 8px 24px;
  background: rgba(255, 248, 224, 0.05);
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: 30px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lamp-counter-capsule:hover {
  border-color: var(--color-flame);
  background: rgba(247, 147, 26, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247, 147, 26, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

#total-lamps-count {
  color: var(--color-flame-bright);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 6px;
  text-shadow: 0 0 10px rgba(247, 147, 26, 0.6);
}

.dansala-forms {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1025px) {
  .dansala-forms {
    height: 100%;
  }
  .dansala-forms .form-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.form-box {
  padding: 1.8rem;
}

.charity-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.charity-title {
  color: var(--color-flame-bright);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .dansala-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ── ZONE 5: බක්ති ගී — THE MUSIC STAGE ────────────────────────── */
.zone--music {
  background: 
    linear-gradient(to bottom, 
      var(--color-night-deep) 0%, 
      rgba(13, 11, 42, 0.76) 15%, 
      rgba(13, 11, 42, 0.76) 85%, 
      var(--color-night-deep) 100%
    ), 
    url('assets/images/vesak_music_bg.webp') no-repeat center center / cover;
}

.music-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
  align-items: center;
}

@media (min-width: 1025px) {
  .music-grid {
    align-items: stretch;
  }
}

.stage-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1025px) {
  .stage-wrapper {
    height: 100%;
    justify-content: center;
  }
}

.stage-image-container,
.garden-image-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  border-radius: 24px;
  overflow: hidden;
  border: none;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(212, 160, 23, 0.25),
    0 0 60px rgba(247, 147, 26, 0.15),
    inset 0 0 20px rgba(255, 248, 224, 0.1);
  background: rgba(13, 11, 42, 0.9);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-image-container::before,
.garden-image-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, var(--color-gold) 0%, rgba(212, 160, 23, 0.2) 40%, rgba(247, 147, 26, 0.2) 60%, var(--color-flame) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.stage-image-container:hover,
.garden-image-container:hover {
  transform: scale(1.03) translateY(-5px);
  box-shadow: 
    0 35px 60px -15px rgba(0, 0, 0, 0.9),
    0 0 45px rgba(212, 160, 23, 0.35),
    0 0 80px rgba(247, 147, 26, 0.25),
    inset 0 0 30px rgba(255, 248, 224, 0.2);
}

.stage-realistic-image,
.garden-realistic-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}

.stage-glow-effect,
.garden-glow-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(247, 147, 26, 0.15), transparent 70%);
  mix-blend-mode: color-dodge;
  animation: stageGlowPulse 4s ease-in-out infinite;
}

@keyframes stageGlowPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}

.lyrics-teleprompter {
  margin-top: 1.5rem;
  min-height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(6, 4, 18, 0.72);
  padding: 1.2rem 2.2rem;
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 600px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.reflection-panel {
  max-width: 600px;
  width: 100%;
  margin-top: 1.5rem;
  box-shadow: var(--glow-surface);
}

.lyric-line {
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-md);
  font-weight: 700;
  color: var(--color-text-sinhala);
  text-shadow: var(--glow-text);
  animation: breatheFade 4s ease-in-out infinite;
}

.music-controls {
  padding: 2.2rem;
}

@media (min-width: 1025px) {
  .music-controls {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.playlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 1.5rem 0;
}

@media (min-width: 1025px) {
  .playlist {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.track-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.track-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-flame), var(--color-gold));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.track-item:hover::after,
.track-item.active::after {
  width: 100%;
}

.track-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--color-flame);
  transform: translateX(6px);
  box-shadow: 0 4px 15px rgba(247, 147, 26, 0.15);
}

.track-item.active {
  background: rgba(247, 147, 26, 0.15);
  border-color: var(--color-flame);
  box-shadow: 0 4px 15px rgba(247, 147, 26, 0.2);
}

.track-title {
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
  display: block;
}

/* Artist credit shown beneath the title — italic + muted so it doesn't
   compete with the song name, but stays readable. Empty (e.g. iTV hasn't
   credited yet) → hides via :empty selector. */
.track-artist {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-muted);
  letter-spacing: 0.2px;
  margin-top: 2px;
}
.track-artist:empty { display: none; }

/* Wraps title + artist into a single flex column so the duration sits to the right. */
.track-label {
  flex: 1;
  min-width: 0;
  margin-right: 1rem;
}

.track-duration {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Keyboard focus ring on the now-focusable track items. */
.track-item:focus-visible {
  outline: 2px solid var(--color-flame);
  outline-offset: 2px;
}

/* Loading state — fired when an MP3 is buffering after click. Audio
   controller toggles .loading on .track-item; the spinner replaces the
   normal duration on the right edge until canplay fires.
   Uses ::before (not ::after) because .track-item::after is the existing
   hover/active bottom-border gradient. */
.track-item.loading {
  pointer-events: none;
  opacity: 0.85;
}
.track-item.loading .track-duration { visibility: hidden; }
.track-item.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 18px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(247, 147, 26, 0.25);
  border-top-color: var(--color-flame);
  border-radius: 50%;
  animation: vl-track-spin 0.7s linear infinite;
  z-index: 2;
}
@keyframes vl-track-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .track-item.loading::before { animation-duration: 2.5s; }
}

/* Equalizer Bars styling inside teleprompter */
.equalizer-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-left: 14px;
}

.eq-bar {
  width: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  animation: eqWave 1.2s ease-in-out infinite alternate;
}

.eq-bar:nth-child(1) { height: 18px; animation-delay: -0.4s; }
.eq-bar:nth-child(2) { height: 18px; animation-delay: -0.2s; }
.eq-bar:nth-child(3) { height: 18px; }

@keyframes eqWave {
  0% { height: 4px; }
  100% { height: 18px; }
}

/* Singing Bowl Bell Button deep gold pulse */
#singing-bowl-btn {
  background: rgba(212, 160, 23, 0.08) !important;
  border: 1px solid rgba(212, 160, 23, 0.45) !important;
  color: var(--color-gold-bright) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: bowlGlow 2.5s infinite alternate;
}

#singing-bowl-btn:hover {
  background: rgba(212, 160, 23, 0.16) !important;
  border-color: var(--color-gold-bright) !important;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.35);
}

@keyframes bowlGlow {
  0% {
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.25);
  }
  100% {
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.55), 0 0 0 4px rgba(212, 160, 23, 0.15);
  }
}

@media (max-width: 1024px) {
  .music-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .stage-wrapper {
    order: -1;
  }
}

/* ── ZONE 6: ධර්ම කෙත — THE TEACHING GARDEN ──────────────────── */
.zone--garden {
  background: 
    linear-gradient(to bottom, 
      var(--color-night-deep) 0%, 
      rgba(13, 11, 42, 0.76) 15%, 
      rgba(13, 11, 42, 0.76) 85%, 
      var(--color-night-deep) 100%
    ), 
    url('assets/images/vesak_garden_bg.webp') no-repeat center center / cover;
}

/* ── Zone 6 Layout Architecture (Upper Grid & Lower Scroll) ── */
.garden-heading-wrapper {
  text-align: center;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.sinhala-heading-gradient {
  font-family: var(--font-sinhala);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.3;
  background: linear-gradient(135deg, var(--color-moonlight) 0%, var(--color-gold-bright) 50%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 20px rgba(212, 160, 23, 0.15);
  margin-bottom: 0.5rem;
}

.sacred-divider {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 320px;
  margin: 0.5rem auto 0 auto;
}

.sacred-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-warm) 50%, transparent);
}

.sacred-divider .divider-icon {
  font-size: 1.15rem;
  color: var(--color-gold);
  text-shadow: 0 0 10px rgba(212, 160, 23, 0.6);
  animation: rotateSlow 20s linear infinite;
  display: inline-block;
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.garden-interactive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1025px) {
  .garden-interactive-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: stretch;
  }
}

.garden-visualizer-col {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.meditation-card {
  width: 100%;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow: var(--glow-surface);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1025px) {
  .meditation-card {
    height: 100%;
    padding: 2.5rem 3rem;
  }
}

/* ── Glowing 12-Petalled Lotus & Guides ── */
.meditation-circle {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto !important;
}

.lotus-breath-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(232, 83, 140, 0.25));
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.lotus-breath-svg .lotus-back-layer,
.lotus-breath-svg .lotus-mid-layer,
.lotus-breath-svg .lotus-front-layer {
  transform-origin: 50px 50px;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Breathing animation cycle transforms */
.lotus-breath-svg.inhale .lotus-back-layer { transform: scale(1.3) rotate(6deg); }
.lotus-breath-svg.inhale .lotus-mid-layer { transform: scale(1.2) rotate(-6deg); }
.lotus-breath-svg.inhale .lotus-front-layer { transform: scale(1.1); }
.lotus-breath-svg.inhale {
  filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.55));
}

.lotus-breath-svg.hold .lotus-back-layer { transform: scale(1.32) rotate(8deg); }
.lotus-breath-svg.hold .lotus-mid-layer { transform: scale(1.22) rotate(-8deg); }
.lotus-breath-svg.hold .lotus-front-layer { transform: scale(1.12); }
.lotus-breath-svg.hold {
  filter: drop-shadow(0 0 35px rgba(212, 160, 23, 0.65));
}

.lotus-breath-svg.exhale .lotus-back-layer { transform: scale(1) rotate(0deg); }
.lotus-breath-svg.exhale .lotus-mid-layer { transform: scale(1) rotate(0deg); }
.lotus-breath-svg.exhale .lotus-front-layer { transform: scale(1); }
.lotus-breath-svg.exhale {
  filter: drop-shadow(0 0 15px rgba(232, 83, 140, 0.25));
}

.lotus-breath-svg.rest {
  animation: softHeartbeat 3s ease-in-out infinite;
}

@keyframes softHeartbeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); filter: drop-shadow(0 0 20px rgba(232, 83, 140, 0.35)); }
  100% { transform: scale(1); }
}

.breath-guide-circle {
  transform-origin: 50px 50px;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.lotus-breath-svg.inhale .breath-guide-circle { transform: scale(1.12); }
.lotus-breath-svg.hold .breath-guide-circle { transform: scale(1.14); }
.lotus-breath-svg.exhale .breath-guide-circle { transform: scale(1); }

.prana-orbital-dot {
  transform-origin: 50px 50px;
  animation: orbit 14s linear infinite;
  display: none;
}
.breathing-active .prana-orbital-dot {
  display: block;
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.breath-timer-text {
  position: absolute;
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-sm);
  font-weight: 800;
  color: var(--color-moonlight);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 10px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* ── Guided Active Phase Indicators & Progress Bar ── */
.breath-phase-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin: 1.2rem auto;
}

.phase-pill {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.35;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.phase-pill .sinhala {
  font-size: 0.8rem !important;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.phase-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.phase-pill.active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.15);
}

.phase-pill.active .sinhala {
  color: var(--color-text-primary);
}

.phase-pill.active#phase-inhale {
  border-color: rgba(247, 147, 26, 0.45);
  background: rgba(247, 147, 26, 0.07);
  box-shadow: 0 0 15px rgba(247, 147, 26, 0.12);
}
.phase-pill.active#phase-inhale .phase-pulse {
  background: var(--color-flame);
  animation: pulseScale 1.5s infinite;
}

.phase-pill.active#phase-hold {
  border-color: rgba(212, 160, 23, 0.45);
  background: rgba(212, 160, 23, 0.07);
  box-shadow: 0 0 15px rgba(212, 160, 23, 0.12);
}
.phase-pill.active#phase-hold .phase-pulse {
  background: var(--color-gold);
  animation: pulseScale 1.5s infinite;
}

.phase-pill.active#phase-exhale {
  border-color: rgba(232, 83, 140, 0.45);
  background: rgba(232, 83, 140, 0.07);
  box-shadow: 0 0 15px rgba(232, 83, 140, 0.12);
}
.phase-pill.active#phase-exhale .phase-pulse {
  background: var(--color-lotus-pink);
  animation: pulseScale 1.5s infinite;
}

.phase-pill.active#phase-rest {
  border-color: rgba(76, 175, 80, 0.45);
  background: rgba(76, 175, 80, 0.07);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.12);
}
.phase-pill.active#phase-rest .phase-pulse {
  background: var(--color-bodhi-light);
  animation: pulseScale 1.5s infinite;
}

@keyframes pulseScale {
  0% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
  70% { transform: scale(1.2); box-shadow: 0 0 0 5px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

.breathing-progress-panel {
  width: 100%;
  max-width: 480px;
  margin: 1.2rem auto 0 auto;
}

/* ── Lower Scripture Row Scroll & Typography ── */
.garden-scripture-row {
  width: 100%;
  max-width: 1200px;
  margin: 3.5rem auto 0 auto;
}

.reflection-panel {
  width: 100%;
  max-width: 100% !important;
  background: 
    radial-gradient(circle at 50% -20%, rgba(212, 160, 23, 0.22) 0%, rgba(212, 160, 23, 0) 55%),
    linear-gradient(135deg, rgba(16, 12, 44, 0.9) 0%, rgba(6, 4, 18, 0.98) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1px solid rgba(212, 160, 23, 0.38);
  border-radius: 28px;
  padding: 3rem;
  box-shadow: 
    inset 0 0 32px rgba(212, 160, 23, 0.12),
    0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 50px rgba(212, 160, 23, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reflection-panel:hover {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 
    inset 0 0 40px rgba(255, 215, 0, 0.2),
    0 30px 75px rgba(0, 0, 0, 0.95),
    0 0 65px rgba(255, 215, 0, 0.18);
  transform: translateY(-2px) translateZ(0);
}


.verse-chapter-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: 30px;
  background: rgba(212, 160, 23, 0.08);
  border: 1px solid rgba(212, 160, 23, 0.25);
  box-shadow: 0 2px 12px rgba(212, 160, 23, 0.04);
  margin-bottom: 2rem;
}

.verse-chapter-badge span {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.verse-text-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: fadeIn 0.8s ease;
}

.verse-pali-slate {
  background: rgba(212, 160, 23, 0.03);
  border: 1px solid rgba(212, 160, 23, 0.22);
  box-shadow: 
    inset 0 0 16px rgba(212, 160, 23, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 1.8rem 2.2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.verse-pali-slate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(212, 160, 23, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.verse-pali-si {
  font-family: var(--font-sinhala);
  font-size: clamp(1.5rem, 4.2vw, 1.95rem) !important;
  font-weight: 800;
  line-height: 1.7;
  background: linear-gradient(135deg, #ffffff 10%, var(--color-text-sinhala) 50%, var(--color-gold-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(255, 232, 160, 0.35);
  margin-bottom: 0.4rem;
  letter-spacing: 0.2px;
}

.verse-pali {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.95rem, 2.2vw, 1.2rem) !important;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.8px;
  line-height: 1.6;
  text-shadow: 0 0 15px rgba(240, 192, 64, 0.15);
  margin-bottom: 0.8rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.verse-source-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  margin-top: 0.5rem;
  gap: 8px;
}

.verse-source-label .separator {
  color: rgba(212, 160, 23, 0.3);
}

.verse-translations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  width: 100%;
}

@media (min-width: 769px) {
  .verse-translations-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem;
  }
}

.translation-slate {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  padding: 1.8rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  width: 100%;
  box-shadow: 
    inset 0 0 16px rgba(255, 255, 255, 0.01),
    0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.translation-slate:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(212, 160, 23, 0.22);
  box-shadow: 
    inset 0 0 20px rgba(212, 160, 23, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.translation-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sinhala-badge {
  border-color: rgba(212, 160, 23, 0.22);
  background: rgba(212, 160, 23, 0.04);
}

.english-badge {
  border-color: rgba(255, 232, 160, 0.2);
  background: rgba(255, 232, 160, 0.03);
}

.verse-sinhala {
  font-family: var(--font-sinhala);
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.8;
  background: linear-gradient(135deg, var(--color-moonlight) 0%, var(--color-text-sinhala) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(255, 232, 160, 0.15);
  letter-spacing: 0.1px;
  margin: 0;
  width: 100%;
}

.verse-english {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.8vw, 1.02rem);
  color: var(--color-text-secondary);
  line-height: 1.7;
  letter-spacing: 0.2px;
  margin: 0;
  width: 100%;
}

.bodhi-capsule {
  background: linear-gradient(135deg, rgba(20, 50, 25, 0.35) 0%, rgba(10, 30, 15, 0.55) 100%);
  backdrop-filter: blur(25px) saturate(220%);
  -webkit-backdrop-filter: blur(25px) saturate(220%);
  border: 1px solid rgba(76, 175, 80, 0.45);
  box-shadow: 
    inset 0 0 24px rgba(76, 175, 80, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 30px rgba(76, 175, 80, 0.08);
  border-radius: 24px;
  padding: 1.5rem 2.2rem;
  color: var(--color-moonlight);
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 2.2rem;
  text-align: left;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.bodhi-capsule::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 50%, rgba(76, 175, 80, 0.22), transparent 60%);
  pointer-events: none;
}

.bodhi-capsule::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.04) 30%, 
    rgba(255, 255, 255, 0.08) 50%, 
    rgba(255, 255, 255, 0.04) 70%, 
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

.bodhi-capsule:hover::after {
  animation: shimmer 1.5s ease-out;
}

@keyframes shimmer {
  100% {
    left: 200%;
  }
}

.bodhi-capsule:hover {
  border-color: rgba(255, 215, 0, 0.65); /* Elegant gold-green shift on hover */
  background: linear-gradient(135deg, rgba(20, 50, 25, 0.45) 0%, rgba(10, 30, 15, 0.65) 100%);
  box-shadow: 
    inset 0 0 32px rgba(255, 215, 0, 0.15),
    0 15px 45px rgba(0, 0, 0, 0.7),
    0 0 45px rgba(76, 175, 80, 0.25);
  transform: translateY(-3px) scale(1.005);
}

.bodhi-icon-container {
  position: relative;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bodhi-icon-container::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px dashed rgba(76, 175, 80, 0.55);
  animation: rotateSlow 25s linear infinite;
  pointer-events: none;
}

.bodhi-icon-container::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.25) 0%, transparent 75%);
  border: 1px solid rgba(212, 160, 23, 0.35);
  pointer-events: none;
  box-shadow: inset 0 0 10px rgba(76, 175, 80, 0.3);
}

.bodhi-capsule:hover .bodhi-icon-container::before {
  border-color: rgba(255, 215, 0, 0.75);
  animation-duration: 12s;
}

.bodhi-capsule:hover .bodhi-icon-container::after {
  border-color: rgba(255, 215, 0, 0.65);
}

.bodhi-icon {
  font-size: 2.1rem;
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.7));
  animation: leafSway 4s ease-in-out infinite alternate;
  display: inline-block;
  transform-origin: bottom center;
}

.bodhi-capsule:hover .bodhi-icon {
  animation: leafHeartbeat 1.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
}

@keyframes leafHeartbeat {
  0% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.15) rotate(12deg); }
  100% { transform: scale(1) rotate(-5deg); }
}

.bodhi-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.bodhi-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bodhi-badge {
  font-family: var(--font-sinhala);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-bodhi-light);
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.4);
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.08);
  text-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.bodhi-badge-separator {
  color: rgba(212, 160, 23, 0.45);
  font-size: 0.75rem;
  animation: rotateSlow 20s linear infinite;
}

.bodhi-badge-en {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-gold-bright);
  letter-spacing: 1.2px;
  text-shadow: 0 0 8px rgba(240, 192, 64, 0.2);
}

.bodhi-reflection-text {
  font-family: var(--font-sinhala);
  font-size: clamp(1.1rem, 2.5vw, 1.28rem); /* Breathtakingly clear, high-end display size */
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-moonlight);
  background: linear-gradient(135deg, #ffffff 30%, var(--color-text-sinhala) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  letter-spacing: 0.15px;
  text-shadow: 0 0 20px rgba(255, 232, 160, 0.2);
  transition: all 0.4s ease;
}

.bodhi-capsule:hover .bodhi-reflection-text {
  text-shadow: 0 0 25px rgba(255, 215, 0, 0.35);
}

@keyframes leafSway {
  0% { transform: rotate(-5deg) translateY(0); }
  100% { transform: rotate(10deg) translateY(-2px); }
}

#next-verse-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: normal !important;
  text-align: center;
  line-height: 1.35;
  padding: 0.75rem 1.5rem !important;
  max-width: min(420px, 100%);
  width: auto;
  min-height: 48px;
  border: 1px solid rgba(212, 160, 23, 0.5) !important;
  background: rgba(212, 160, 23, 0.04) !important;
  box-shadow:
    inset 0 0 10px rgba(212, 160, 23, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#next-verse-btn .next-verse-label {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
}

#next-verse-btn .dharma-wheel {
  margin-right: 0 !important; /* gap on the button handles spacing */
  flex-shrink: 0;
  font-size: 1.1rem;
}

#next-verse-btn:hover {
  border-color: rgba(255, 215, 0, 0.85) !important;
  background: rgba(212, 160, 23, 0.12) !important;
  box-shadow: 
    inset 0 0 15px rgba(255, 215, 0, 0.2),
    0 8px 25px rgba(255, 215, 0, 0.25) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

#next-verse-btn .dharma-wheel {
  display: inline-block;
  transition: transform 0.8s ease;
}

#next-verse-btn:hover .dharma-wheel {
  transform: rotate(180deg);
}

/* ── ZONE 7: ඉදිරි ගෙදර — WALK HOME ───────────────────────────── */
.zone--home {
  background: 
    linear-gradient(to bottom, 
      var(--color-night-deep) 0%, 
      rgba(13, 11, 42, 0.76) 15%, 
      rgba(13, 11, 42, 0.76) 85%, 
      var(--color-night-deep) 100%
    ), 
    url('assets/images/vesak_home_bg.webp') no-repeat center center / cover;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
  align-items: center;
}

.stats-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.stat-item {
  padding: 1.8rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-item:hover {
  transform: scale(1.06) translateY(-4px);
  border-color: var(--color-border-glow);
  box-shadow: 0 12px 28px rgba(247, 147, 26, 0.15), var(--glow-flame);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-flame);
  text-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.stat-label {
  font-family: var(--font-sinhala);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Lifetime total subline — small, muted, monospace number for scanability.
   Sits below the today's-count hero number + label. */
.stat-total {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-family: var(--font-sinhala);
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
}
.stat-total strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-flame);
  letter-spacing: 0;
}

.home-countdown-box {
  padding: 2.2rem;
  text-align: center;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 1.5rem 0;
}

.countdown-unit {
  background: #070514;
  border: 1px solid rgba(212, 160, 23, 0.35);
  border-radius: 12px;
  padding: 1rem 0.5rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85), 0 0 8px rgba(212, 160, 23, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.countdown-unit:hover {
  border-color: var(--color-flame);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9), 0 0 18px rgba(247, 147, 26, 0.3);
  transform: translateY(-3px);
}

.countdown-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-amber);
  text-shadow: 0 0 10px rgba(255, 173, 51, 0.7);
}

.countdown-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.credits-footer {
  width: 100%;
  text-align: center;
  padding: 2.2rem 2rem;
  border-top: 1px solid rgba(255, 248, 224, 0.12);
  background: rgba(6, 4, 18, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  margin-top: 4rem;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
}

.credits-footer a {
  color: var(--color-flame);
  text-decoration: none;
  font-weight: 600;
}

.credits-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .home-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ── STORY/MODAL OVERLAYS ─────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 6, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  width: 90%;
  max-width: 780px;
  max-height: 85vh;
  padding: 2.5rem;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary);
  transform: rotate(90deg) scale(1.1);
}

#modal-moral-box {
  border: 1px solid rgba(247, 147, 26, 0.45) !important;
  background: rgba(18, 10, 5, 0.95) !important;
  box-shadow: inset 0 0 15px rgba(247, 147, 26, 0.15), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px;
  transition: all 0.4s ease;
}

#modal-moral-box:hover {
  border-color: var(--color-flame) !important;
  box-shadow: inset 0 0 20px rgba(247, 147, 26, 0.25), 0 4px 25px rgba(247, 147, 26, 0.1) !important;
}

/* Share Preview Content */
.share-preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.share-preview-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(212, 160, 23, 0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), 0 0 15px rgba(212, 160, 23, 0.2);
  transition: all 0.4s ease;
}

.share-preview-img:hover {
  transform: scale(1.01);
  border-color: var(--color-flame);
  box-shadow: 0 15px 35px rgba(0,0,0,0.7), 0 0 25px rgba(247, 147, 26, 0.35);
}

.share-buttons {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  justify-content: center;
}

/* ── STATISTICS DASHBOARD MODAL STYLES ─────────────────────────── */
@keyframes dbPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.db-pulse-dot {
  animation: dbPulse 2s infinite;
}

.db-stat-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.db-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.db-stat-card.visitors:hover { border-color: rgba(0, 188, 255, 0.4) !important; }
.db-stat-card.lamps:hover { border-color: rgba(247, 147, 26, 0.4) !important; }
.db-stat-card.lanterns:hover { border-color: rgba(232, 83, 140, 0.4) !important; }
.db-stat-card.verses:hover { border-color: rgba(76, 175, 80, 0.4) !important; }

/* Scrollbars for dashboard lists */
.db-list-container::-webkit-scrollbar {
  width: 6px;
}
.db-list-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}
.db-list-container::-webkit-scrollbar-thumb {
  background: rgba(247, 147, 26, 0.25);
  border-radius: 3px;
}
.db-list-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* List Item Styles */
.db-list-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
  transition: all 0.25s ease;
}

.db-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.db-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}

.db-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  vertical-align: middle;
}

.db-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  text-align: left;
}

.db-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .db-columns {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  .db-column-card {
    height: 320px !important;
  }
  .db-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .db-meta-info {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .db-meta-info div {
    justify-content: flex-start !important;
  }
  #dashboard-modal-title {
    font-size: 1.4rem !important;
  }
  .db-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .db-stats-grid {
    grid-template-columns: 1fr !important;
  }
  #dashboard-modal-title {
    font-size: 1.2rem !important;
  }
  .modal-box {
    padding: 1.5rem !important;
  }
}

/* ── TOAST NOTIFICATIONS ───────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(26, 21, 80, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-flame);
  color: var(--color-text-primary);
  font-family: var(--font-sinhala);
  font-size: var(--text-sinhala-sm);
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  box-shadow: var(--glow-flame);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

#toast .toast-message-en {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

/* ── ANIMATION KEYFRAMES ───────────────────────────────────────── */
@keyframes moonBreathe {
  0%, 100% { 
    transform: translateZ(10px) scale(1); 
    box-shadow: 
      0 0 40px rgba(255, 248, 224, 0.9),
      0 0 80px rgba(255, 241, 197, 0.5),
      inset -18px -18px 36px rgba(135, 96, 25, 0.4),
      inset 12px 12px 24px rgba(255, 255, 255, 0.7);
  }
  50% { 
    transform: translateZ(10px) scale(1.04); 
    box-shadow: 
      0 0 50px rgba(255, 248, 224, 1.0),
      0 0 100px rgba(255, 241, 197, 0.65),
      inset -18px -18px 36px rgba(135, 96, 25, 0.35),
      inset 12px 12px 24px rgba(255, 255, 255, 0.8);
  }
}

@keyframes lunarCorona {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.05);
    opacity: 0.95;
  }
}

@keyframes cloudDrift1 {
  0% {
    transform: translate3d(-100px, 0, 25px);
  }
  100% {
    transform: translate3d(180px, -10px, 25px);
  }
}

@keyframes cloudDrift2 {
  0% {
    transform: translate3d(140px, 0, 35px);
  }
  100% {
    transform: translate3d(-140px, 10px, 35px);
  }
}

@keyframes breatheFade {
  0% { opacity: 0.4; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.01); }
  100% { opacity: 0.4; transform: scale(0.98); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Guided breathing keyframes */
@keyframes inhalePulse {
  from {
    transform: scale(1);
    fill: #E8538C;
    filter: drop-shadow(0 0 15px rgba(232, 83, 140, 0.45));
  }
  to {
    transform: scale(1.4);
    fill: #FF8C00;
    filter: drop-shadow(0 0 35px rgba(255, 140, 0, 0.85));
  }
}

@keyframes holdPulse {
  from {
    transform: scale(1.4);
    fill: #FF8C00;
    filter: drop-shadow(0 0 35px rgba(255, 140, 0, 0.85));
  }
  to {
    transform: scale(1.42);
    fill: #FF8C00;
    filter: drop-shadow(0 0 35px rgba(255, 140, 0, 0.85));
  }
}

@keyframes exhalePulse {
  from {
    transform: scale(1.42);
    fill: #FF8C00;
    filter: drop-shadow(0 0 35px rgba(255, 140, 0, 0.85));
  }
  to {
    transform: scale(1);
    fill: #E8538C;
    filter: drop-shadow(0 0 15px rgba(232, 83, 140, 0.45));
  }
}

@keyframes restPulse {
  from { transform: scale(1); }
  to { transform: scale(1); }
}

/* Sway animation for lanterns */
.sway-lantern {
  transform-origin: top center;
  animation: lanternSway 6s ease-in-out infinite alternate;
}

@keyframes lanternSway {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

/* ── SMOOTH SCROLL ENTRY REVEALS (GPU HARDWARE-ACCELERATED) ───── */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── WORLD-CLASS MOBILE & TABLET FLUID RESPONSIVENESS OVERRIDES ── */
@media (max-width: 960px) {
  :root {
    --header-height: 60px;
  }

  /* Reduce outer boundaries */
  .zone {
    padding: calc(var(--header-height) + 1rem) 1rem 2rem 1rem !important;
  }
  
  #top-nav {
    height: var(--header-height) !important;
    padding: 0 1rem !important;
  }
  
  .nav-actions {
    gap: 8px !important;
  }
  
  .action-btn {
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
  }

  /* Reposition and scale moon to sit cleanly below header actions */
  .moon-container {
    top: calc(var(--header-height) + 3rem) !important;
    right: 2% !important;
    width: clamp(70px, 15vh, 110px) !important;
    height: clamp(70px, 15vh, 110px) !important;
  }
  
  /* Ensure grids stack neatly */
  .workshop-grid, .pandal-grid, .dansala-grid, .music-grid, .home-grid {
    grid-template-columns: 1fr !important;
    gap: 1.8rem !important;
  }
  
  .builder-interface, .pandal-copy, .lamp-wall-card, .form-box, .music-controls, .reflection-panel, .home-countdown-box {
    padding: 1.5rem 1.1rem !important;
    border-radius: 18px !important;
  }
  
  /* Adjust SVG structures */
  .thorana-arch {
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
  
  .pandal-svg-container {
    max-width: 100% !important;
  }
  
  /* Form components */
  .options-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  
  .option-button {
    padding: 0.7rem 0.5rem !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
  }
  
  .option-icon {
    font-size: 1.5rem !important;
  }
  
  /* Center stage visualizers on mobile */
  .stage-image-container,
  .garden-image-container {
    max-width: 100% !important;
  }
  
  .stage-wrapper {
    order: -1 !important;
  }
  
  .preview-container {
    order: -1 !important;
  }
}

/* Tablet & small-tablet: scale brand down but keep the title visible.
   The hard-hide kicks in much later, only on phone widths (≤480px). */
@media (max-width: 1024px) {
  .itv-logo { height: 38px !important; }
  .brand-title {
    font-size: clamp(0.88rem, 1.6vw, 1.05rem) !important;
    padding-left: 8px;
    letter-spacing: 0.2px;
  }
}

@media (max-width: 700px) {
  .brand-section { gap: 8px; }
  .itv-logo { height: 34px !important; }
  .brand-title {
    font-size: 0.85rem !important;
    /* Drop the gold separator at very tight widths so the title doesn't
       crowd the logo */
    padding-left: 0;
    border: 0 !important;
  }
}

@media (max-width: 480px) {
  .brand-title {
    display: none !important; /* phone: logo alone */
  }
}

@media (max-width: 820px) {
  .lang-text-long {
    display: none !important;
  }
  .lang-text-short {
    display: inline !important;
  }
  .btn-text {
    display: none !important;
  }
  .action-btn {
    padding: 6px 10px !important;
  }
}

@media (max-width: 480px) {
  .zone {
    padding: calc(var(--header-height) + 0.8rem) 0.75rem 1.5rem 0.75rem !important;
  }
  
  .btn-primary, .btn-secondary {
    white-space: normal !important;
    text-align: center !important;
    word-break: break-word !important;
  }

  #kudu-builder-canvas {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 340 / 420 !important;
  }

  #kudu-canvas-wrapper {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Compact cards for Zone 4, 5, 6 on mobile */
  .form-box {
    padding: 1.2rem !important;
  }
  .music-controls {
    padding: 1.5rem 1.2rem !important;
  }
  .lyrics-teleprompter {
    padding: 1rem 1.2rem !important;
  }
  .reflection-panel,
  .meditation-card {
    padding: 1.5rem 1rem !important;
    min-height: auto !important;
  }
  .meditation-circle {
    width: 120px !important;
    height: 120px !important;
    margin: 1.2rem auto !important;
  }
  
  .brand-title {
    display: none !important; /* Hide label to save space on tiny screens */
  }
  
  /* Zone 3: Jataka List compact layouts for tiny viewports */
  .jataka-list {
    gap: 10px !important;
  }
  .jataka-item {
    padding: 0.8rem 1rem !important;
  }
  
  /* Playlist items must fit text comfortably */
  .track-item {
    padding: 0.85rem 0.8rem !important;
  }
  
  .track-title {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }
  
  /* Lantern Builder Options 3 cols can wrap on tiny mobile (e.g. 320px) */
  .options-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Adjust countdown sizes */
  .countdown-grid {
    gap: 8px !important;
  }
  
  .countdown-unit {
    padding: 0.7rem 0.25rem !important;
    border-radius: 8px !important;
  }
  
  .countdown-num {
    font-size: 1.45rem !important;
  }
  
  .countdown-label {
    font-size: 0.65rem !important;
  }
  
  /* Stats grid numbers */
  .stats-card-container {
    gap: 8px !important;
  }
  
  .stat-item {
    padding: 1.2rem 0.5rem !important;
    border-radius: 12px !important;
  }
  
  .stat-number {
    font-size: 1.85rem !important;
  }
  
  .stat-label {
    font-size: 0.78rem !important;
  }
  
  /* Modal responsive controls */
  .modal-box {
    padding: 1.5rem 1rem !important;
    width: 95% !important;
  }
  
  .modal-close {
    top: 0.8rem !important;
    right: 0.8rem !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 360px) {
  .options-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  
  /* Stamp select in step 2 override */
  div.options-grid[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .option-button {
    padding: 0.5rem 0.3rem !important;
    font-size: 0.7rem !important;
  }
  
  .option-icon {
    font-size: 1.2rem !important;
  }
  
  .builder-interface {
    padding: 1rem 0.8rem !important;
  }
}

/* ── 3D Perspective & Preservation Layers ── */
#zone-1,
.preview-container,
.pandal-visual-wrapper,
.stage-wrapper,
.meditation-circle,
.home-countdown-box,
.stat-item {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* 3D Tilt Target Classes */
.thorana-arch,
#kudu-canvas-wrapper,
#pandal-container,
.stage-image-container,
.lotus-breath-svg,
.countdown-grid {
  transform-style: preserve-3d;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Premium Stable Jataka panels Hover Highlight (No skipping/jittering) */
.pandal-panel-button {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
#panel-1 { transform-origin: 160px 180px; }
#panel-2 { transform-origin: 340px 180px; }
#panel-3 { transform-origin: 120px 280px; }
#panel-4 { transform-origin: 380px 280px; }
#panel-5 { transform-origin: 250px 510px; }
#panel-center { transform-origin: 250px 365px; }

.pandal-panel-button:hover {
  filter: brightness(1.35) saturate(1.2) drop-shadow(0 0 20px rgba(247, 147, 26, 0.95)) !important;
  transform: scale(1.04) !important;
}

/* Dangling Lanterns swaying from Gateway Arch */
.dangling-lantern {
  transform-origin: top center;
  animation: naturalSway 8s ease-in-out infinite alternate;
}
@keyframes naturalSway {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* ── Clay Oil Lamps Flickering Realism ── */
.clay-lamp {
  transform-origin: bottom center;
}
.clay-lamp path[fill="#FFEFA6"],
.clay-lamp .glowing-white-path {
  transform-origin: center bottom;
  animation: flameFlicker 2s ease-in-out infinite alternate;
}

@keyframes flameFlicker {
  0% {
    transform: scale(0.96) translate(0.2px, -0.2px);
    opacity: 0.88;
  }
  25% {
    transform: scale(1.04) translate(-0.3px, 0.1px);
    opacity: 0.96;
  }
  50% {
    transform: scale(1.0) translate(0.4px, -0.1px);
    opacity: 0.92;
  }
  75% {
    transform: scale(1.06) translate(-0.1px, -0.4px);
    opacity: 1.0;
  }
}

/* ── Shadwarna Budu-res Divine Aura Breathing ───────────────────── */
.shadwarna-budures {
  animation: buduresBreath 6s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  transform-origin: 250px 325px;
  will-change: transform, opacity;
}

@keyframes buduresBreath {
  0% {
    opacity: 0.6;
    transform: scale(0.95) rotate(0deg);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.03) rotate(2deg);
  }
  100% {
    opacity: 0.6;
    transform: scale(0.95) rotate(0deg);
  }
}

/* ── PREFERS REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .moon, .lotus-breath-svg, .lyric-line, .sway-lantern, .clay-lamp path[fill="#FFEFA6"], .clay-lamp .glowing-white-path {
    animation: none !important;
  }
}



/* ==========================================================================
   ── WIDESCREEN & 4K DISPLAY RESPONSIVE SCALING SYSTEM (PREMIUM UI/UX) ──
   Built to project majestic presence on all monitors up to 4K resolutions.
   ========================================================================== */

/* ── 0. STANDARD LAPTOP & DESKTOP BREAKPOINT (1024px and up) ── */
@media (min-width: 1024px) {
  /* Masthead refinement — laptop scale */
  #top-nav {
    padding: 0 2.5rem !important;
  }
  .brand-section {
    gap: 14px !important;
  }
  .itv-logo {
    height: 50px !important;
  }
  .brand-title {
    font-size: 1.3rem !important;
    padding-left: 14px !important;
    letter-spacing: 0.4px !important;
  }
  .nav-actions {
    gap: 14px !important;
  }
  .action-btn {
    padding: 9px 18px !important;
    font-size: 0.9rem !important;
  }

  /* Expand Zone 1 elements for standard laptops/desktops */
  .thorana-arch {
    max-width: clamp(420px, 55vh, 780px) !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.6rem !important;
  }
  .zone-1-branding {
    max-width: 760px !important;
    padding: 2rem 2.8rem !important;
    margin-bottom: clamp(1rem, 2.2vh, 1.6rem) !important;
    border-radius: 28px !important;
  }
  .hero-dharma-wheel-container {
    width: 78px !important;
    height: 78px !important;
    margin-bottom: 1.1rem !important;
  }
  .text-gateway {
    font-size: clamp(2.2rem, 5vh, 3rem) !important;
    margin-bottom: 0.6rem !important;
  }
  .text-gateway-sub {
    font-size: clamp(1.05rem, 2.2vh, 1.3rem) !important;
    margin-bottom: 1rem !important;
  }
  .text-welcome {
    font-size: clamp(0.92rem, 1.8vh, 1.1rem) !important;
    line-height: 1.55 !important;
  }
  #start-journey-btn {
    font-size: 1.08rem !important;
    padding: 0.9rem 2.1rem !important;
    margin-top: 1.35rem !important;
    border-radius: 14px !important;
  }
}

/* ── 1. WIDESCREEN / FHD LAPTOP BREAKPOINT (1400px and up) ── */
@media (min-width: 1400px) {
  :root {
    /* Proportional typography enlargement for 1080p and widescreen devices */
    --text-display-xl: 3.5rem;
    --text-display-lg: 2.6rem;
    --text-display-md: 1.85rem;

    --text-sinhala-xl: 2.8rem;
    --text-sinhala-lg: 1.65rem;
    --text-sinhala-md: 1.25rem;
    --text-sinhala-sm: 1.05rem;

    --text-body-lg:    1.15rem;
    --text-body-md:    1.05rem;
    --text-body-sm:    0.9rem;
  }

  /* Expand core column container width */
  .zone-inner {
    max-width: 1380px !important;
  }

  /* Zone 1: Gateway Arch scale-up */
  .thorana-arch {
    max-width: clamp(450px, 60vh, 900px) !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.8rem !important;
  }
  .zone-1-branding {
    max-width: 820px !important;
    padding: 2.2rem 3rem !important;
  }
  .hero-dharma-wheel-container {
    width: 86px !important;
    height: 86px !important;
    margin-bottom: 1.2rem !important;
  }
  .text-gateway {
    font-size: clamp(2.4rem, 5.5vh, 3.4rem) !important;
    margin-bottom: 0.8rem !important;
  }
  .text-gateway-sub {
    font-size: clamp(1.15rem, 2.5vh, 1.45rem) !important;
    margin-bottom: 1.2rem !important;
  }
  .text-welcome {
    font-size: clamp(0.98rem, 2vh, 1.15rem) !important;
    line-height: 1.6 !important;
  }
  #start-journey-btn {
    font-size: 1.12rem !important;
    padding: 0.95rem 2.2rem !important;
    margin-top: 1.5rem !important;
    border-radius: 15px !important;
  }

  /* Zone 2: Lantern Customizer Canvas Scale & Margin Buffering */
  #kudu-canvas-wrapper {
    transform: scale(1.15) rotateY(var(--rotateY, 0deg)) rotateX(var(--rotateX, 0deg)) !important;
    margin-top: 3.5rem !important;
    margin-bottom: 3.5rem !important;
  }
  .options-grid {
    gap: 16px !important;
  }
  .option-button {
    padding: 1.2rem !important;
  }

  /* Zone 3: Grand Pandal scale-up */
  .pandal-svg-container {
    max-width: 680px !important;
    flex-shrink: 0;
  }
  .pandal-grid {
    gap: 5rem !important;
  }
  .pandal-copy {
    max-width: 580px !important;
    justify-self: center;
    width: 100%;
    flex-shrink: 0;
  }

  /* Zone 4: Giving Table (Dansala) Canvas Scale & Margins */
  #lamp-canvas {
    max-width: 580px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Zone 5: Bhakti Gee Music Stage scale-up */
  .stage-image-container,
  .garden-image-container {
    max-width: 620px !important;
  }
  .lyrics-teleprompter {
    max-width: 620px !important;
  }
  .lyrics-teleprompter {
    padding: 1.5rem 3rem !important;
  }

  /* Zone 6: Sacred Garden scale-up */
  .garden-interactive-grid {
    max-width: 1200px !important;
  }
  .garden-scripture-row {
    max-width: 1200px !important;
  }
  .reflection-panel,
  .meditation-card {
    padding: 3rem !important;
  }
  .meditation-circle {
    width: 170px !important;
    height: 170px !important;
    margin: 2.2rem auto !important;
  }

  /* Zone 7: Quiet Home countdown scale-up */
  .home-grid {
    gap: 5rem !important;
  }
  .countdown-unit {
    padding: 1.2rem 0.8rem !important;
  }
}

/* ── 2. ULTRA-WIDESCREEN / QHD DESKTOP BREAKPOINT (1900px and up) ── */
@media (min-width: 1900px) {
  :root {
    /* Scale root variables to fill FHD / QHD / 4K canvases organically */
    --text-display-xl: 4.8rem;
    --text-display-lg: 3.5rem;
    --text-display-md: 2.3rem;

    --text-sinhala-xl: 3.8rem;
    --text-sinhala-lg: 2.2rem;
    --text-sinhala-md: 1.35rem;
    --text-sinhala-sm: 1.15rem;

    --text-body-lg:    1.25rem;
    --text-body-md:    1.125rem;
    --text-body-sm:    1.0rem;
  }

  /* Global Inner Column Expansion */
  .zone-inner {
    max-width: 1680px !important;
  }
  .workshop-grid, .pandal-grid, .dansala-grid, .music-grid, .home-grid {
    padding-left: 6.5rem !important;
    padding-right: 6.5rem !important;
  }

  /* Persistent UI Navigation Header scale-up */
  #top-nav {
    height: 110px !important;
    padding: 0 3.5rem !important;
  }
  .brand-section {
    gap: 18px !important;
  }
  .itv-logo {
    height: 60px !important;
  }
  .brand-title {
    font-size: 1.55rem !important;
    padding-left: 18px !important;
    letter-spacing: 0.5px !important;
  }
  .nav-actions {
    gap: 18px !important;
  }
  .action-btn {
    padding: 11px 22px !important;
    font-size: 1rem !important;
    border-radius: 26px !important;
    gap: 10px !important;
  }

  /* Navigator Dots scale-up */
  #zone-nav {
    right: 3.5rem !important;
    gap: 22px !important;
  }
  .zone-dot {
    width: 14px !important;
    height: 14px !important;
  }
  .zone-dot-label {
    font-size: 1.05rem !important;
    right: 32px !important;
    padding: 8px 18px !important;
    border-radius: 24px !important;
  }

  /* Zone 1: Gateway Arch majestic scale-up */
  .thorana-arch {
    max-width: clamp(550px, 60vh, 1150px) !important;
    margin-top: 2rem !important;
    margin-bottom: 1.2rem !important;
  }
  .zone-1-branding {
    max-width: 1080px !important;
    padding: 3rem 4.5rem !important;
    border-radius: 32px !important;
  }
  .hero-dharma-wheel-container {
    width: 105px !important;
    height: 105px !important;
    margin-bottom: 1.6rem !important;
  }
  .text-gateway {
    font-size: clamp(3.2rem, 6.5vh, 4.5rem) !important;
    margin-bottom: 1.2rem !important;
  }
  .text-gateway-sub {
    font-size: clamp(1.4rem, 3vh, 1.85rem) !important;
    margin-bottom: 1.6rem !important;
  }
  .text-welcome {
    font-size: clamp(1.15rem, 2.2vh, 1.35rem) !important;
    line-height: 1.7 !important;
  }
  #start-journey-btn {
    font-size: 1.25rem !important;
    padding: 1.1rem 2.8rem !important;
    margin-top: 2rem !important;
    border-radius: 18px !important;
  }

  /* Zone 2: Lantern Customizer Canvas Scale & safety margins */
  #kudu-canvas-wrapper {
    transform: scale(1.35) rotateY(var(--rotateY, 0deg)) rotateX(var(--rotateX, 0deg)) !important;
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
  }
  .workshop-grid {
    gap: 5rem !important;
  }
  .options-grid {
    gap: 20px !important;
  }
  .option-button {
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }
  .option-icon {
    font-size: 2.5rem !important;
  }

  /* Zone 3: Grand Pandal scale-up */
  .pandal-svg-container {
    max-width: 840px !important;
    flex-shrink: 0;
  }
  .pandal-grid {
    gap: 6rem !important;
  }
  .pandal-copy {
    max-width: 720px !important;
    justify-self: center;
    width: 100%;
    flex-shrink: 0;
  }
  .jataka-list {
    gap: 18px !important;
  }
  .jataka-item {
    padding: 1.4rem 1.8rem !important;
    border-radius: 16px !important;
  }
  .jataka-item-number {
    font-size: 1.3rem !important;
  }

  /* Zone 4: Giving Table (Dansala) Canvas Scale & safety margins */
  #lamp-canvas {
    max-width: 680px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .lamp-counter-capsule {
    padding: 10px 30px !important;
  }
  #total-lamps-count {
    font-size: 1.4rem !important;
  }

  /* Zone 5: Music Stage scale-up */
  .stage-image-container,
  .garden-image-container {
    max-width: 780px !important;
    border-radius: 32px !important;
  }
  .lyrics-teleprompter {
    max-width: 780px !important;
  }
  .lyrics-teleprompter {
    padding: 1.8rem 3.5rem !important;
    border-radius: 24px !important;
  }
  .track-item {
    padding: 1.2rem 1.5rem !important;
    border-radius: 16px !important;
  }

  /* Zone 6: Sacred Garden scale-up */
  .garden-interactive-grid {
    max-width: 1400px !important;
  }
  .garden-scripture-row {
    max-width: 1400px !important;
  }
  .reflection-panel,
  .meditation-card {
    padding: 3.5rem !important;
    border-radius: 32px !important;
  }
  .meditation-circle {
    width: 200px !important;
    height: 200px !important;
    margin: 2.5rem auto !important;
  }

  /* Zone 7: Quiet Home countdown scale-up */
  .home-grid {
    gap: 6rem !important;
  }
  .stat-item {
    padding: 2.5rem 1.5rem !important;
    border-radius: 24px !important;
  }
  .stat-number {
    font-size: 3.8rem !important;
  }
  .countdown-unit {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
  }
  .countdown-num {
    font-size: 2.8rem !important;
  }
  .countdown-label {
    font-size: 0.85rem !important;
  }
}

/* ── 3. EXTREME 4K DISPLAY BREAKPOINT (2800px and up) ── */
@media (min-width: 2800px) {
  :root {
    /* Extreme typography parameters for ultra-high-resolution 4K & 8K canvases */
    --text-display-xl: 6.5rem;
    --text-display-lg: 4.8rem;
    --text-display-md: 3.2rem;

    --text-sinhala-xl: 5.2rem;
    --text-sinhala-lg: 3.2rem;
    --text-sinhala-md: 1.8rem;
    --text-sinhala-sm: 1.5rem;

    --text-body-lg:    1.7rem;
    --text-body-md:    1.5rem;
    --text-body-sm:    1.3rem;
  }

  /* Global Inner Column Expansion for 4K */
  .zone-inner {
    max-width: 2400px !important;
  }
  .workshop-grid, .pandal-grid, .dansala-grid, .music-grid, .home-grid {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }

  /* Navigation Header extreme 4K scale-up */
  #top-nav {
    height: 140px !important;
    padding: 0 5rem !important;
  }
  .brand-section {
    gap: 24px !important;
  }
  .itv-logo {
    height: 78px !important;
  }
  .brand-title {
    font-size: 2rem !important;
    padding-left: 24px !important;
    letter-spacing: 0.6px !important;
  }
  .nav-actions {
    gap: 22px !important;
  }
  .action-btn {
    padding: 14px 28px !important;
    font-size: 1.2rem !important;
    border-radius: 32px !important;
    gap: 12px !important;
  }

  /* Navigation Dots 4K scale-up */
  #zone-nav {
    right: 5rem !important;
    gap: 28px !important;
  }
  .zone-dot {
    width: 18px !important;
    height: 18px !important;
  }
  .zone-dot-label {
    font-size: 1.3rem !important;
    right: 40px !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
  }

  /* Zone 1: Gateway Arch extreme scale-up */
  .thorana-arch {
    max-width: clamp(800px, 60vh, 1600px) !important;
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
  }
  .zone-1-branding {
    max-width: 1600px !important;
    padding: 4rem 6rem !important;
    border-radius: 48px !important;
  }
  .hero-dharma-wheel-container {
    width: 140px !important;
    height: 140px !important;
    margin-bottom: 2.2rem !important;
  }
  .text-gateway {
    font-size: clamp(4.8rem, 8vh, 6.2rem) !important;
    margin-bottom: 1.8rem !important;
  }
  .text-gateway-sub {
    font-size: clamp(2rem, 4vh, 2.6rem) !important;
    margin-bottom: 2.4rem !important;
  }
  .text-welcome {
    font-size: clamp(1.5rem, 3vh, 1.85rem) !important;
    line-height: 1.8 !important;
  }
  #start-journey-btn {
    font-size: 1.65rem !important;
    padding: 1.4rem 3.6rem !important;
    margin-top: 2.5rem !important;
    border-radius: 24px !important;
  }

  /* Zone 2: Lantern Customizer Canvas Scale & 4K overlap protection margins */
  #kudu-canvas-wrapper {
    transform: scale(1.85) rotateY(var(--rotateY, 0deg)) rotateX(var(--rotateX, 0deg)) !important;
    margin-top: 15rem !important;
    margin-bottom: 15rem !important;
  }
  .workshop-grid {
    gap: 8rem !important;
  }
  .options-grid {
    gap: 28px !important;
  }
  .option-button {
    padding: 2rem !important;
    border-radius: 24px !important;
  }
  .option-icon {
    font-size: 3.5rem !important;
  }

  /* Zone 3: Grand Pandal scale-up */
  .pandal-svg-container {
    max-width: 1200px !important;
    flex-shrink: 0;
  }
  .pandal-grid {
    gap: 8rem !important;
  }
  .pandal-copy {
    max-width: 900px !important;
    justify-self: center;
    width: 100%;
    flex-shrink: 0;
  }
  .jataka-list {
    gap: 24px !important;
  }
  .jataka-item {
    padding: 2rem 2.5rem !important;
    border-radius: 24px !important;
  }
  .jataka-item-number {
    font-size: 1.8rem !important;
  }

  /* Zone 4: Giving Table (Dansala) Canvas Scale & 4K overlap protection margins */
  #lamp-canvas {
    max-width: 900px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .lamp-counter-capsule {
    padding: 12px 40px !important;
    border-radius: 40px !important;
  }
  #total-lamps-count {
    font-size: 1.8rem !important;
  }
  .form-box {
    padding: 3rem !important;
    border-radius: 32px !important;
  }

  /* Zone 5: Music Stage scale-up */
  .stage-image-container,
  .garden-image-container {
    max-width: 1100px !important;
    border-radius: 40px !important;
  }
  .lyrics-teleprompter {
    max-width: 1100px !important;
  }
  .lyrics-teleprompter {
    padding: 2.5rem 5rem !important;
    border-radius: 32px !important;
    min-height: 125px !important;
  }
  .track-item {
    padding: 1.6rem 2rem !important;
    border-radius: 20px !important;
  }
  .music-controls {
    padding: 3rem !important;
  }

  /* Zone 6: Sacred Garden scale-up */
  .garden-interactive-grid {
    max-width: 1700px !important;
  }
  .garden-scripture-row {
    max-width: 1700px !important;
  }
  .reflection-panel,
  .meditation-card {
    padding: 4.5rem !important;
    border-radius: 40px !important;
  }
  .meditation-circle {
    width: 220px !important;
    height: 220px !important;
    margin: 3rem auto !important;
  }

  /* Zone 7: Quiet Home countdown scale-up */
  .home-grid {
    gap: 8rem !important;
  }
  .stat-item {
    padding: 3.5rem 2rem !important;
    border-radius: 32px !important;
  }
  .stat-number {
    font-size: 5.2rem !important;
  }
  .countdown-unit {
    padding: 2rem 1.5rem !important;
    border-radius: 20px !important;
  }
  .countdown-num {
    font-size: 4.2rem !important;
  }
  .countdown-label {
    font-size: 1.15rem !important;
  }
  .home-countdown-box {
    padding: 3rem !important;
    border-radius: 32px !important;
  }
}

/* ── Premium Share Section Styles ── */
.share-section-card {
  padding: 3rem 2.5rem;
  margin: 3.5rem auto 0 auto;
  max-width: 860px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

/* Ambient drifting warm background lighting */
.share-section-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(247, 147, 26, 0.04) 0%, transparent 60%);
  pointer-events: none;
  animation: slowShift 20s infinite alternate linear;
}

@keyframes slowShift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(5%, 5%) rotate(10deg); }
}

.share-dharma-wheel {
  width: 76px;
  height: 76px;
  display: block;
  margin: 0 auto 15px auto;
  filter: drop-shadow(0 0 12px rgba(240, 192, 64, 0.45));
  animation: spinWheelSlow 25s infinite linear;
}

.share-section-card h3 {
  font-size: 1.85rem;
  color: var(--color-gold-bright);
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(240, 192, 64, 0.25);
  font-weight: 800;
}

.share-section-card p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  max-width: 680px;
  margin: 0 auto 2.2rem auto;
  line-height: 1.6;
}

.share-buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.01);
}

.share-btn-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}

/* WhatsApp Glowing State */
.share-btn.whatsapp {
  border-color: rgba(37, 211, 102, 0.25);
  color: #25D366;
}
.share-btn.whatsapp:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: rgba(37, 211, 102, 0.65);
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.2), inset 0 0 8px rgba(37, 211, 102, 0.1);
  transform: translateY(-3px);
}

/* Facebook Glowing State */
.share-btn.facebook {
  border-color: rgba(24, 119, 242, 0.25);
  color: #1877F2;
}
.share-btn.facebook:hover {
  background: rgba(24, 119, 242, 0.08);
  border-color: rgba(24, 119, 242, 0.65);
  box-shadow: 0 0 20px rgba(24, 119, 242, 0.2), inset 0 0 8px rgba(24, 119, 242, 0.1);
  transform: translateY(-3px);
}

/* Telegram Glowing State */
.share-btn.telegram {
  border-color: rgba(0, 136, 204, 0.25);
  color: #0088cc;
}
.share-btn.telegram:hover {
  background: rgba(0, 136, 204, 0.08);
  border-color: rgba(0, 136, 204, 0.65);
  box-shadow: 0 0 20px rgba(0, 136, 204, 0.2), inset 0 0 8px rgba(0, 136, 204, 0.1);
  transform: translateY(-3px);
}

/* Copy Link Glowing State */
.share-btn.copy {
  border-color: rgba(240, 192, 64, 0.25);
  color: var(--color-gold-bright);
}
.share-btn.copy:hover {
  background: rgba(240, 192, 64, 0.08);
  border-color: rgba(240, 192, 64, 0.65);
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.25), inset 0 0 8px rgba(240, 192, 64, 0.1);
  transform: translateY(-3px);
}

/* Copy Success Glowing State */
.share-btn.copy.success {
  background: rgba(76, 175, 80, 0.12) !important;
  border-color: #4CAF50 !important;
  color: #4CAF50 !important;
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.25) !important;
}

/* Tablet and Landscape Responsive Columns */
@media (max-width: 768px) {
  .share-buttons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .share-section-card {
    padding: 2rem 1.5rem;
  }
}

/* Mobile Portrait Responsive Columns */
@media (max-width: 480px) {
  .share-buttons-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .share-section-card {
    padding: 1.6rem 1.2rem;
  }
  .share-section-card h3 {
    font-size: 1.5rem;
  }
}

/* ── HEIGHT-BASED RESPONSIVENESS (PREVENTS HEADER CRASHING & VERTICAL SQUISHING) ── */
@media (max-height: 800px) {
  .zone-inner {
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
  }
  .thorana-arch {
    max-width: clamp(260px, 52vh, 520px) !important; /* Scaled up for majestic presence on medium viewports */
    margin-top: 0.8rem !important;
    margin-bottom: 0.4rem !important;
  }
  .zone-1-branding {
    padding: 0.8rem 1.5rem !important;
    margin-bottom: 0.6rem !important;
    max-width: 520px !important;
  }
  #start-journey-btn {
    margin-top: 0.6rem !important;
  }
  
  /* Zone 3: Pandal vertical scaling protections on shorter viewports */
  .pandal-svg-container {
    max-height: 65vh !important;
  }
  .pandal-svg-container svg {
    max-height: 65vh !important;
  }
  .pandal-grid {
    gap: 2rem !important;
  }
  .pandal-copy {
    padding: 1.2rem 1.5rem !important;
  }
  .jataka-list {
    gap: 8px !important;
  }
  .jataka-item {
    padding: 0.75rem 1rem !important;
  }

  /* Zone 4: Clay Lamp Wall & Cards height-based responsiveness */
  .dansala-grid {
    gap: 1.5rem !important;
  }
  #lamp-canvas {
    max-width: 420px !important;
    margin: 0.6rem auto 0 auto !important;
  }
  .lamp-wall-card {
    padding: 1rem 1.2rem !important;
  }
  .lamp-counter-capsule {
    margin: 0.6rem auto 0 auto !important;
    padding: 6px 16px !important;
  }
  .dansala-forms {
    gap: 0.8rem !important;
  }
  .form-box {
    padding: 1.1rem 1.3rem !important;
  }
  .input-field {
    margin: 6px 0 !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.95rem !important;
  }
  .form-box .sinhala-heading {
    margin-bottom: 0.4rem !important;
    font-size: 1.25rem !important;
  }
  .form-box label.sinhala {
    margin-top: 4px !important;
    font-size: 0.82rem !important;
  }

  /* Zone 5: Choir Stage & Playlist height-based responsiveness */
  .music-grid {
    gap: 1.8rem !important;
  }
  .stage-image-container,
  .garden-image-container {
    max-width: 480px !important;
  }
  .lyrics-teleprompter {
    max-width: 480px !important;
  }
  .lyrics-teleprompter {
    margin-top: 0.8rem !important;
    padding: 0.8rem 1.5rem !important;
    min-height: 60px !important;
  }
  .music-controls {
    padding: 1.2rem 1.5rem !important;
  }
  .playlist {
    gap: 8px !important;
    margin: 0.8rem 0 !important;
  }
  .track-item {
    padding: 0.6rem 0.8rem !important;
  }
  .track-title {
    font-size: 0.92rem !important;
  }
  #singing-bowl-btn {
    margin-top: 0.8rem !important;
    padding: 0.65rem 1.2rem !important;
  }

  /* Zone 6: Sacred Garden height-based responsiveness */
  .garden-interactive-grid {
    gap: 1.5rem !important;
  }
  .garden-image-container {
    max-width: 360px !important;
  }
  .meditation-card {
    padding: 1.5rem !important;
  }
  .meditation-circle {
    width: 120px !important;
    height: 120px !important;
    margin: 0.8rem auto !important;
  }
  .breath-phase-dashboard {
    margin: 0.6rem auto !important;
    gap: 8px !important;
  }
  .phase-pill {
    padding: 6px 10px !important;
  }
  .breathing-progress-panel {
    margin-top: 0.6rem !important;
  }
  .reflection-panel {
    padding: 1.8rem 2.2rem !important;
    margin-top: 1.5rem !important;
  }
  .verse-text-container {
    gap: 10px !important;
  }
  .verse-pali-si {
    font-size: 1.25rem !important;
    margin-bottom: 0.15rem !important;
  }
  .verse-pali {
    font-size: 0.95rem !important;
    margin-bottom: 0.2rem !important;
  }
  .verse-sinhala {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }
  .verse-english {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  .meditation-circle {
    width: 100px !important;
    height: 100px !important;
    margin: 0.6rem auto !important;
  }
  .meditation-desc {
    padding: 0.5rem 1rem !important;
    margin-top: 0.5rem !important;
    font-size: 0.85rem !important;
  }
  .meditation-buttons {
    gap: 8px !important;
    margin-top: 0.8rem !important;
  }

  /* Heading & button size micro-adjustments for short viewports */
  .zone-inner > h2.sinhala-heading {
    margin-bottom: 0.8rem !important;
    font-size: 1.45rem !important;
  }
  .btn-primary, .btn-secondary {
    padding: 0.65rem 1.2rem !important;
    font-size: 0.88rem !important;
  }

  /* Story Modal height overrides */
  #story-modal .modal-box {
    padding: 1.5rem !important;
  }
  #story-modal .modal-image-wrapper {
    max-width: 250px !important;
    margin: 0 auto 0.8rem auto !important;
  }
  #story-modal .sinhala-heading {
    margin-bottom: 0.8rem !important;
    font-size: 1.35rem !important;
  }
  #modal-panel-dots {
    margin-bottom: 0.8rem !important;
  }
  #story-modal .modal-text-wrapper {
    min-height: 100px !important;
    gap: 8px !important;
    margin-bottom: 1.2rem !important;
  }
  #modal-text-si {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  #modal-text-en {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  #story-modal .modal-btn-wrapper {
    margin-top: 1.2rem !important;
  }
}

@media (max-height: 640px) {
  .zone-inner {
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  .thorana-arch {
    max-width: clamp(220px, 46vh, 400px) !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0.3rem !important;
  }
  .zone-1-branding {
    padding: 0.6rem 1.2rem !important;
    margin-bottom: 0.5rem !important;
    max-width: 440px !important;
  }
  #start-journey-btn {
    margin-top: 0.4rem !important;
    padding: 0.5rem 1.2rem !important;
    font-size: 0.8rem !important;
  }
  
  /* Zone 3: Pandal vertical scaling protections on extremely short viewports */
  .pandal-svg-container {
    max-height: 55vh !important;
  }
  .pandal-svg-container svg {
    max-height: 55vh !important;
  }
  .pandal-grid {
    gap: 1.2rem !important;
  }
  .pandal-copy {
    padding: 0.9rem 1.2rem !important;
  }
  .jataka-list {
    gap: 6px !important;
  }
  .jataka-item {
    padding: 0.6rem 0.8rem !important;
  }

  /* Zone 4: Clay Lamp Wall & Cards extreme height-based responsiveness */
  .dansala-grid {
    gap: 1rem !important;
  }
  #lamp-canvas {
    max-width: 340px !important;
    margin: 0.4rem auto 0 auto !important;
  }
  .lamp-wall-card {
    padding: 0.8rem 1rem !important;
  }
  .dansala-forms {
    gap: 0.5rem !important;
  }
  .form-box {
    padding: 0.8rem 1rem !important;
  }
  .input-field {
    margin: 4px 0 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.88rem !important;
  }
  .form-box .sinhala-heading {
    margin-bottom: 0.2rem !important;
    font-size: 1.15rem !important;
  }
  .form-box label.sinhala {
    margin-top: 2px !important;
    font-size: 0.78rem !important;
  }

  /* Zone 5: Choir Stage & Playlist extreme height-based responsiveness */
  .music-grid {
    gap: 1rem !important;
  }
  .stage-image-container,
  .garden-image-container {
    max-width: 360px !important;
  }
  .lyrics-teleprompter {
    max-width: 360px !important;
  }
  .lyrics-teleprompter {
    margin-top: 0.6rem !important;
    padding: 0.6rem 1.2rem !important;
    min-height: 50px !important;
  }
  .music-controls {
    padding: 0.8rem 1.2rem !important;
  }
  .playlist {
    gap: 5px !important;
    margin: 0.5rem 0 !important;
  }
  .track-item {
    padding: 0.45rem 0.65rem !important;
  }
  .track-title {
    font-size: 0.85rem !important;
  }
  #singing-bowl-btn {
    margin-top: 0.5rem !important;
    padding: 0.5rem 1rem !important;
  }

  /* Zone 6: Sacred Garden extreme height-based responsiveness */
  .garden-interactive-grid {
    gap: 1rem !important;
  }
  .garden-image-container {
    max-width: 300px !important;
  }
  .meditation-card {
    padding: 1rem !important;
  }
  .meditation-circle {
    width: 90px !important;
    height: 90px !important;
    margin: 0.5rem auto !important;
  }
  .breath-phase-dashboard {
    margin: 0.4rem auto !important;
    gap: 4px !important;
  }
  .phase-pill {
    padding: 4px 8px !important;
  }
  .breathing-progress-panel {
    margin-top: 0.4rem !important;
  }
  .reflection-panel {
    padding: 1.2rem 1.5rem !important;
    margin-top: 1rem !important;
  }
  .verse-text-container {
    gap: 6px !important;
  }
  .verse-pali-si {
    font-size: 1.15rem !important;
    margin-bottom: 0.1rem !important;
  }
  .verse-pali {
    font-size: 0.85rem !important;
    margin-bottom: 0.1rem !important;
  }
  .verse-sinhala {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
  }
  .verse-english {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  .meditation-circle {
    width: 85px !important;
    height: 85px !important;
    margin: 0.4rem auto !important;
  }
  .breath-timer-text {
    font-size: 0.85rem !important;
  }
  .meditation-desc {
    padding: 0.4rem 0.8rem !important;
    margin-top: 0.4rem !important;
    font-size: 0.78rem !important;
  }
  .meditation-buttons {
    gap: 6px !important;
    margin-top: 0.6rem !important;
  }

  /* Heading & button size micro-adjustments for extremely short viewports */
  .zone-inner > h2.sinhala-heading {
    margin-bottom: 0.5rem !important;
    font-size: 1.25rem !important;
  }
  .btn-primary, .btn-secondary {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Story Modal extreme height overrides */
  #story-modal .modal-box {
    padding: 1rem !important;
  }
  #story-modal .modal-image-wrapper {
    max-width: 200px !important;
    margin: 0 auto 0.6rem auto !important;
  }
  #story-modal .sinhala-heading {
    margin-bottom: 0.5rem !important;
    font-size: 1.15rem !important;
  }
  #modal-panel-dots {
    margin-bottom: 0.6rem !important;
  }
  #story-modal .modal-text-wrapper {
    min-height: 80px !important;
    gap: 6px !important;
    margin-bottom: 0.8rem !important;
  }
  #modal-text-si {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  #modal-text-en {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
  #story-modal .modal-btn-wrapper {
    margin-top: 0.8rem !important;
  }
}

/* ==========================================================================
   ── RESPONSIVE PERFECTION PASS ─────────────────────────────────────────────
   Unified responsive coverage from 280px (Galaxy Fold) → 6K (5120px+).
   Built by IAMUVIN — covers the gaps left by the original breakpoint stack.
   ========================================================================== */

/* ── A. MODERN VIEWPORT UNITS (mobile browser chrome handling) ──
   100vh on mobile measures with the URL bar collapsed, causing layout jumps.
   100dvh is the dynamic viewport — adjusts as chrome shows/hides.
   100svh is the small viewport — never overflows. Used here for scroll containers. */
@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
  #canvas-bg,
  #canvas-fx {
    height: 100dvh;
  }
  #scroll-container {
    height: 100dvh;
  }
  .zone {
    min-height: 100dvh;
  }
}

/* ── B. SAFE-AREA-INSET (iPhone notch, Android punch-hole, foldables) ──
   viewport-fit=cover allows content under the notch; padding-env brings it back. */
@supports (padding: env(safe-area-inset-top)) {
  #top-nav {
    padding-left: max(2rem, env(safe-area-inset-left)) !important;
    padding-right: max(2rem, env(safe-area-inset-right)) !important;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-height) + env(safe-area-inset-top)) !important;
  }
  .zone {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }
  #toast {
    bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
  }
  #zone-nav {
    right: max(2rem, env(safe-area-inset-right));
  }
  .modal-close {
    top: max(1.5rem, calc(env(safe-area-inset-top) + 0.5rem));
    right: max(1.5rem, calc(env(safe-area-inset-right) + 0.5rem));
  }
}

/* ── C. TOUCH TARGET FLOOR (WCAG 2.5.5 — 44×44 CSS px minimum) ──
   Apply ONLY on coarse pointers so desktop hover targets remain tight. */
@media (pointer: coarse) {
  .action-btn,
  .btn-primary,
  .btn-secondary,
  .option-button,
  .swatch,
  .zone-dot,
  .modal-close,
  .step-indicator,
  .share-btn,
  .jataka-item,
  .track-item,
  .phase-pill {
    min-height: 44px;
  }
  .zone-dot {
    width: 14px;
    height: 14px;
  }
  .zone-dot-wrapper {
    /* Expand tap area to ≥44×44 on touch devices per WCAG 2.5.5 — visual
       dot stays small (14px) but the wrapper button receives the touch. */
    min-width: 44px;
    min-height: 44px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .swatch {
    min-width: 44px;
  }
  .modal-close {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── D. INPUT FONT-SIZE GUARD (prevents iOS auto-zoom on focus) ──
   iOS Safari zooms when an input <16px is focused. Force 16px on phones. */
@media (max-width: 768px) {
  input,
  textarea,
  select,
  .input-field,
  #card-creator-name {
    font-size: 16px !important;
  }
}

/* ── E. ULTRA-SMALL PHONES (Galaxy Fold front cover ~280px, iPhone SE 1st gen 320px) ── */
@media (max-width: 360px) {
  :root {
    --header-height: 56px;
  }
  #top-nav {
    padding: 0 0.6rem !important;
  }
  .brand-section {
    gap: 6px !important;
  }
  .itv-logo {
    height: 30px !important;
  }
  .nav-actions {
    gap: 4px !important;
  }
  .action-btn {
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 14px !important;
  }
  .moon-container {
    top: calc(var(--header-height) + 1.2rem) !important;
    width: 56px !important;
    height: 56px !important;
    right: 1.5% !important;
  }
  .zone {
    padding: calc(var(--header-height) + 0.6rem) 0.55rem 1.2rem 0.55rem !important;
  }
  .zone-1-branding {
    width: 100% !important;
    padding: 0.7rem 0.85rem !important;
  }
  .text-gateway {
    font-size: clamp(1.2rem, 6vw, 1.5rem) !important;
  }
  .text-gateway-sub {
    font-size: clamp(0.78rem, 3.5vw, 0.9rem) !important;
  }
  .text-welcome {
    font-size: clamp(0.7rem, 3vw, 0.82rem) !important;
  }
  .countdown-grid {
    gap: 5px !important;
  }
  .countdown-num {
    font-size: 1.15rem !important;
  }
  .countdown-label {
    font-size: 0.55rem !important;
  }
  .stat-number {
    font-size: 1.55rem !important;
  }
  .stat-label {
    font-size: 0.7rem !important;
  }
  .builder-interface {
    padding: 0.9rem 0.7rem !important;
  }
  .step-indicator {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
  .options-grid {
    gap: 5px !important;
  }
  .option-button {
    padding: 0.45rem 0.25rem !important;
    border-radius: 8px !important;
  }
  .modal-box {
    width: 96% !important;
    padding: 1.1rem 0.85rem !important;
    max-height: 90vh !important;
  }
  .share-buttons-grid {
    gap: 8px !important;
  }
  .share-btn {
    padding: 0.85rem 0.6rem !important;
    font-size: 0.82rem !important;
  }
}

/* ── F. NAV CONDENSATION SWEET SPOT (380–600px) ──
   Existing rules hide text at 820px; tighten spacing in the gap. */
@media (min-width: 361px) and (max-width: 600px) {
  #top-nav {
    padding: 0 0.85rem !important;
  }
  .nav-actions {
    gap: 6px !important;
  }
  .action-btn {
    padding: 8px 10px !important;
    font-size: 0.76rem !important;
  }
}

/* ── G. TABLET-PORTRAIT SWEET SPOT (601–960px) ──
   Existing stack: <768px mobile rules, 960px grid stacking. Fills the
   awkward iPad-mini portrait / large-phone-landscape band. */
@media (min-width: 601px) and (max-width: 960px) {
  .zone-inner {
    max-width: 720px;
  }
  .zone {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .workshop-grid,
  .pandal-grid,
  .dansala-grid,
  .music-grid,
  .home-grid {
    gap: 2.5rem;
  }
  .builder-interface,
  .pandal-copy,
  .lamp-wall-card,
  .form-box,
  .music-controls,
  .reflection-panel,
  .home-countdown-box,
  .meditation-card {
    padding: 1.75rem;
  }
  .options-grid {
    gap: 10px;
  }
  .stats-card-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .share-buttons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .text-gateway {
    font-size: clamp(2rem, 4.5vw, 2.6rem) !important;
  }
  .text-gateway-sub {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem) !important;
  }
  .moon-container {
    top: calc(var(--header-height) + 2.5rem) !important;
    width: clamp(90px, 14vw, 130px) !important;
    height: clamp(90px, 14vw, 130px) !important;
  }
}

/* ── H. LANDSCAPE PHONE (orientation + low height) ──
   iPhone 14 Pro landscape = 852×393; reduce vertical breathing room and
   collapse stacked grids into side-by-side to use horizontal real estate. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --header-height: 52px;
  }
  .zone {
    min-height: auto;
    padding: calc(var(--header-height) + 0.5rem) 1rem 1rem 1rem !important;
    scroll-snap-align: none;
  }
  .zone-inner {
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
  }
  .moon-container {
    width: 60px !important;
    height: 60px !important;
    top: calc(var(--header-height) + 0.4rem) !important;
  }
  .thorana-arch {
    max-width: clamp(180px, 45vh, 360px) !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.3rem !important;
  }
  .hero-dharma-wheel-container {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0.3rem !important;
  }
  .zone-1-branding {
    padding: 0.5rem 1.2rem !important;
    margin-bottom: 0.4rem !important;
  }
  .text-gateway {
    font-size: 1.25rem !important;
    margin-bottom: 0.2rem !important;
  }
  .text-gateway-sub,
  .text-welcome {
    font-size: 0.8rem !important;
    margin-bottom: 0.2rem !important;
  }
  .workshop-grid,
  .pandal-grid,
  .dansala-grid,
  .music-grid,
  .home-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  .builder-interface,
  .pandal-copy,
  .lamp-wall-card,
  .form-box,
  .music-controls,
  .reflection-panel,
  .home-countdown-box,
  .meditation-card {
    padding: 1rem 1.2rem !important;
    border-radius: 14px !important;
  }
  .meditation-circle {
    width: 90px !important;
    height: 90px !important;
    margin: 0.5rem auto !important;
  }
  .stage-image-container,
  .garden-image-container {
    max-width: 100% !important;
  }
  .modal-box {
    max-height: 92dvh !important;
    padding: 1.2rem 1.5rem !important;
  }
  #scroll-container {
    scroll-snap-type: none;
  }
}

/* ── I. STANDARD LAPTOP SWEET SPOT (1280–1399px) ──
   Sits between the 1024px and 1400px existing breakpoints; smooths the jump. */
@media (min-width: 1280px) and (max-width: 1399px) {
  .zone-inner {
    max-width: 1240px;
  }
  .workshop-grid,
  .pandal-grid,
  .music-grid,
  .home-grid,
  .dansala-grid {
    gap: 3.5rem;
  }
  .text-gateway {
    font-size: clamp(2.4rem, 4.2vh, 2.9rem) !important;
  }
}

/* ── J. WQHD (2560px) — fills the gap between 1900px and 2800px tiers ── */
@media (min-width: 2560px) and (max-width: 2799px) {
  .zone-inner {
    max-width: 2100px !important;
  }
  .thorana-arch {
    max-width: clamp(700px, 60vh, 1400px) !important;
  }
  .zone-1-branding {
    max-width: 1400px !important;
    padding: 3.5rem 5rem !important;
  }
}

/* ── K. 5K / 6K ULTRA-WIDE DISPLAYS (3200px+) ──
   Pro Display XDR (6016×3384), iMac 5K (5120×2880). Existing 2800px cap
   leaves these monitors looking underpopulated. */
@media (min-width: 3200px) {
  :root {
    --text-display-xl: 8rem;
    --text-display-lg: 6rem;
    --text-display-md: 4rem;
    --text-sinhala-xl: 6.4rem;
    --text-sinhala-lg: 4rem;
    --text-sinhala-md: 2.2rem;
    --text-sinhala-sm: 1.8rem;
    --text-body-lg: 2rem;
    --text-body-md: 1.75rem;
    --text-body-sm: 1.5rem;
  }
  .zone-inner {
    max-width: 3000px !important;
  }
  #top-nav {
    height: 158px !important;
    padding: 0 6rem !important;
  }
  .brand-section {
    gap: 28px !important;
  }
  .itv-logo {
    height: 92px !important;
  }
  .brand-title {
    font-size: 2.35rem !important;
    padding-left: 28px !important;
    letter-spacing: 0.7px !important;
  }
  .nav-actions {
    gap: 26px !important;
  }
  .action-btn {
    padding: 16px 32px !important;
    font-size: 1.4rem !important;
    border-radius: 36px !important;
    gap: 14px !important;
  }
  .zone-dot {
    width: 22px !important;
    height: 22px !important;
  }
  .zone-dot-label {
    font-size: 1.55rem !important;
    padding: 12px 28px !important;
  }
  .stat-number {
    font-size: 6.5rem !important;
  }
  .countdown-num {
    font-size: 5.5rem !important;
  }
  .countdown-label {
    font-size: 1.4rem !important;
  }
  .meditation-circle {
    width: 280px !important;
    height: 280px !important;
  }
  .moon-container {
    width: clamp(180px, 14vh, 260px) !important;
    height: clamp(180px, 14vh, 260px) !important;
  }
}

/* ── L. SHARE-BUTTON GRID — smoother breakpoint cascade ──
   Existing: 4→2 at 768px, 2→1 at 480px. Adds intermediate 3-col band. */
@media (min-width: 601px) and (max-width: 900px) {
  .share-buttons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── M. HOVER-INTENT FALLBACK FOR TOUCH ──
   Translation/zone-dot hover-only labels are unreachable on touch devices.
   Force visible labels on coarse pointers so the navigator still works. */
@media (pointer: coarse) {
  .jataka-item:hover {
    transform: none; /* translateX(8px) on tap causes layout shift */
  }
  .track-item:hover {
    transform: none;
  }
  /* Disable parallax tilts that depend on mouse position */
  #kudu-canvas-wrapper,
  .thorana-arch,
  .stage-image-container {
    transform: none !important;
  }
}

/* ── N. PORTRAIT iPAD & MEDIUM TABLETS (961–1199px) ──
   The 1024px stack-flip leaves 961–1024px showing 1fr columns, but
   1025–1199px gets desktop columns without scaled gutters. Tighten. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .zone-inner {
    max-width: 980px;
  }
  .workshop-grid {
    gap: 2.2rem;
  }
  .pandal-grid {
    gap: 2.8rem;
  }
  .music-grid,
  .dansala-grid,
  .home-grid {
    gap: 2.5rem;
  }
}

/* ── O. FOCUS-VISIBLE — keyboard nav clarity across the whole UI ──
   Replaces the default outline with a brand-flame ring that respects radius. */
:focus-visible {
  outline: 2px solid var(--color-flame);
  outline-offset: 3px;
  border-radius: inherit;
}
button:focus-visible,
.action-btn:focus-visible,
.option-button:focus-visible,
.zone-dot:focus-visible {
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.35);
}

/* ── P. CONTENT-VISIBILITY for offscreen zones (CLS + scroll perf) ──
   The 7 zones are heavy. Hint the browser it can skip rendering offscreen
   ones; reserve their slot with contain-intrinsic-size to avoid jumps. */
@supports (content-visibility: auto) {
  .zone:not(.zone--gateway) {
    content-visibility: auto;
    contain-intrinsic-size: 100vw 100dvh;
  }
}

/* ── Q. ANY-HOVER GUARD — removes hover-glow on touch ────────────────
   On phones, hover styles get stuck after tap. Scope decorative hover. */
@media (hover: none) {
  .glass-card:hover,
  .glass-card-warm:hover,
  .stage-image-container:hover,
  .garden-image-container:hover,
  .lamp-counter-capsule:hover,
  #lamp-canvas:hover {
    transform: none;
    box-shadow: inherit;
  }
}

/* ── R. SCROLL-SNAP RELAXATION FOR REDUCED-MOTION USERS ── */
@media (prefers-reduced-motion: reduce) {
  #scroll-container {
    scroll-snap-type: none !important;
  }
  .zone {
    scroll-snap-align: none !important;
  }
}

/* ── T. HERO WIDESCREEN FILL ────────────────────────────────────────
   On widescreens, the existing rules left a thin centered column with
   large empty side margins. Fix by:
   1. Widening zone-inner so the column itself owns more of the viewport.
   2. Growing the branding card to fill that wider column.
   3. Letting the arch grow modestly (width-driven, but height-capped so
      it never eats the card's vertical real estate).
   The arch uses min(<vw>, <vh>, <max>) — vh keeps it from going taller
   than the available stage, vw drives the wider feeling, max prevents
   it from becoming an unreasonable monument on huge displays. */

/* Standard laptop (1200px+) — start filling the void */
@media (min-width: 1200px) {
  .zone--gateway .zone-inner {
    max-width: min(1600px, 94vw) !important;
  }
  .thorana-arch {
    max-width: min(58vw, 56vh, 880px) !important;
    margin-top: clamp(0.8rem, 1.6vh, 1.4rem) !important;
    margin-bottom: clamp(0.4rem, 1vh, 0.8rem) !important;
  }
  .zone-1-branding {
    max-width: min(960px, 80vw) !important;
    width: 100% !important;
    padding: clamp(1.4rem, 2.4vh, 2rem) clamp(2rem, 4vw, 4rem) !important;
  }
}

/* FHD widescreen (1600px+) — card dominates the canvas */
@media (min-width: 1600px) {
  .zone--gateway .zone-inner {
    max-width: min(1800px, 92vw) !important;
  }
  .thorana-arch {
    max-width: min(54vw, 54vh, 1040px) !important;
  }
  .zone-1-branding {
    max-width: min(1180px, 78vw) !important;
    padding: clamp(1.6rem, 2.6vh, 2.2rem) clamp(2.5rem, 4.5vw, 4.5rem) !important;
  }
}

/* QHD (1900px+) — overrides existing 1900px caps that were too narrow */
@media (min-width: 1900px) {
  .zone--gateway .zone-inner {
    max-width: min(2100px, 90vw) !important;
  }
  .thorana-arch {
    max-width: min(50vw, 56vh, 1240px) !important;
    margin-top: 1.4rem !important;
    margin-bottom: 1rem !important;
  }
  .zone-1-branding {
    max-width: min(1380px, 76vw) !important;
    padding: clamp(2rem, 2.8vh, 2.6rem) clamp(3rem, 5vw, 5rem) !important;
  }
}

/* 4K & WQHD (2560px+) — hero owns the screen */
@media (min-width: 2560px) {
  .zone--gateway .zone-inner {
    max-width: min(2800px, 88vw) !important;
  }
  .thorana-arch {
    max-width: min(46vw, 56vh, 1600px) !important;
  }
  .zone-1-branding {
    max-width: min(1820px, 74vw) !important;
    padding: clamp(2.5rem, 3vh, 3.5rem) clamp(4rem, 5vw, 6rem) !important;
  }
}

/* 5K+ (3200px+) — extreme displays */
@media (min-width: 3200px) {
  .thorana-arch {
    max-width: min(44vw, 56vh, 2100px) !important;
  }
  .zone-1-branding {
    max-width: min(2400px, 72vw) !important;
  }
}

/* ── U. ZONE 4 AFFORDANCE — lamp-form hint + empty-input pulse ───────
   The clay-lamp canvas reads as decorative; many users miss that the FORM
   below is the actual lamp-lighting trigger. Add a 1-line bilingual hint
   and a soft saffron pulse on empty inputs to draw the eye. */
.lamp-form-hint {
  font-size: 0.85rem;
  color: var(--color-text-sinhala);
  background: rgba(247, 147, 26, 0.06);
  border: 1px solid rgba(247, 147, 26, 0.22);
  border-left: 3px solid var(--color-flame);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  margin: 0.4rem 0 0.8rem 0;
  line-height: 1.55;
}

.lamp-input-pulse:placeholder-shown:not(:focus) {
  animation: lampInputPulse 3.2s ease-in-out infinite;
}
@keyframes lampInputPulse {
  0%, 100% {
    border-color: var(--color-border);
    box-shadow: 0 0 0 0 rgba(247, 147, 26, 0);
  }
  50% {
    border-color: rgba(247, 147, 26, 0.55);
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lamp-input-pulse:placeholder-shown:not(:focus) {
    animation: none;
    border-color: rgba(247, 147, 26, 0.35);
  }
}

/* ── V. PILGRIMAGE RIBBON ────────────────────────────────────────────
   Thin persistent progress ribbon at the right edge. Seven bands map to
   the seven zones — five Buddhist flag colours, then Bodhi green for the
   meditation garden, then Vesak Poya gold for the walk home. Each band
   unfurls with a clip-path reveal as the user crosses into that zone.
   Mobile (≤768px) collapses to a horizontal bar under #top-nav.
   ──────────────────────────────────────────────────────────────────── */
#pilgrimage-ribbon {
  position: fixed;
  right: 12px;
  top: calc(var(--header-height) + 12px);
  bottom: 12px;
  width: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  z-index: 90;
  border-radius: 4px;
  overflow: visible;
}

.ribbon-band {
  flex: 1;
  background: rgba(255, 248, 224, 0.06);
  border-radius: 3px;
  position: relative;
  transition:
    background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

/* Clip-path reveal: unfurl from top→bottom on desktop, left→right on mobile */
.ribbon-band.lit {
  animation: ribbonUnfurl 0.5s ease-out both;
}

@keyframes ribbonUnfurl {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Buddhist flag colours + Bodhi + Poya gold */
.ribbon-band.lit[data-color="blue"] {
  background: var(--color-buddhist-blue);
  box-shadow: 0 0 8px rgba(0, 51, 204, 0.55), 0 0 18px rgba(0, 51, 204, 0.25);
}
.ribbon-band.lit[data-color="yellow"] {
  background: var(--color-buddhist-yellow);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.55), 0 0 18px rgba(255, 215, 0, 0.3);
}
.ribbon-band.lit[data-color="red"] {
  background: var(--color-buddhist-red);
  box-shadow: 0 0 8px rgba(204, 0, 0, 0.55), 0 0 18px rgba(204, 0, 0, 0.3);
}
.ribbon-band.lit[data-color="white"] {
  background: var(--color-buddhist-white);
  box-shadow: 0 0 8px rgba(240, 237, 224, 0.55), 0 0 18px rgba(240, 237, 224, 0.3);
}
.ribbon-band.lit[data-color="orange"] {
  background: var(--color-buddhist-orange);
  box-shadow: 0 0 8px rgba(255, 140, 0, 0.55), 0 0 18px rgba(255, 140, 0, 0.3);
}
.ribbon-band.lit[data-color="green"] {
  background: var(--color-bodhi-green);
  box-shadow: 0 0 8px rgba(46, 125, 50, 0.6), 0 0 18px rgba(76, 175, 80, 0.35);
}
.ribbon-band.lit[data-color="gold"] {
  background: var(--color-gold-bright);
  box-shadow: 0 0 10px rgba(240, 192, 64, 0.7), 0 0 24px rgba(247, 147, 26, 0.4);
}

/* Mobile (≤768px): swap to a slim horizontal ribbon under the header */
@media (max-width: 768px) {
  #pilgrimage-ribbon {
    top: var(--header-height);
    right: 0;
    left: 0;
    bottom: auto;
    width: auto;
    height: 4px;
    flex-direction: row;
    gap: 2px;
    border-radius: 0;
    padding: 0 2px;
  }

  @keyframes ribbonUnfurl {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}

/* Tiny screens: keep horizontal version but ensure no overlap with nav */
@media (max-width: 360px) {
  #pilgrimage-ribbon {
    top: calc(var(--header-height) + 1px);
    height: 3px;
  }
}

/* Respect reduced-motion: instant colour swap, no unfurl */
@media (prefers-reduced-motion: reduce) {
  .ribbon-band.lit {
    animation: none !important;
    clip-path: none !important;
  }
}

/* Pilgrimage completion modal (used when toast can't host a button) */
#pilgrimage-complete-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 28, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#pilgrimage-complete-modal.show {
  opacity: 1;
  pointer-events: auto;
}
#pilgrimage-complete-modal .pc-card {
  max-width: 460px;
  width: 100%;
  background: linear-gradient(160deg, rgba(26, 21, 80, 0.95), rgba(15, 12, 45, 0.95));
  border: 1px solid var(--color-gold-bright);
  border-radius: 18px;
  padding: 2rem 1.6rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(247, 147, 26, 0.25);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
#pilgrimage-complete-modal.show .pc-card {
  transform: translateY(0) scale(1);
}
#pilgrimage-complete-modal .pc-title {
  font-family: var(--font-sinhala);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}
#pilgrimage-complete-modal .pc-sub {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.4rem;
  line-height: 1.5;
}
#pilgrimage-complete-modal .pc-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
#pilgrimage-complete-modal .pc-btn {
  font-family: var(--font-sinhala);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 30px;
  border: 1px solid var(--color-gold-bright);
  background: linear-gradient(135deg, var(--color-flame), var(--color-gold-bright));
  color: #0A0A0A;
  cursor: pointer;
  min-height: 44px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#pilgrimage-complete-modal .pc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247, 147, 26, 0.5);
}
#pilgrimage-complete-modal .pc-btn.ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: rgba(255, 248, 224, 0.3);
}

/* ── W. UNIFIED ZONE CTA ─────────────────────────────────────────────
   One persistent floating "↓ next zone" button. Adapts label to the
   current zone. Hidden on zone 1 (start-journey-btn covers it) and
   zone 7 (final). Appears 5s after entering a zone; auto-hides when
   the user has scrolled past 80% of that zone (they're about to leave). */
#next-zone-cta {
  position: fixed;
  bottom: clamp(1.2rem, 4vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(26, 21, 80, 0.86), rgba(13, 11, 42, 0.92));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(247, 147, 26, 0.45);
  color: var(--color-text-sinhala);
  font-family: var(--font-sinhala);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(247, 147, 26, 0.22),
    inset 0 0 12px rgba(247, 147, 26, 0.1);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s,
              box-shadow 0.3s;
}

#next-zone-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  animation: nextZoneCtaBob 3.6s ease-in-out infinite;
}

#next-zone-cta:hover {
  border-color: var(--color-flame-bright);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.65),
    0 0 36px rgba(247, 147, 26, 0.4),
    inset 0 0 16px rgba(247, 147, 26, 0.18);
}

#next-zone-cta .next-zone-arrow {
  font-size: 1.1rem;
  color: var(--color-flame);
  animation: nextZoneArrow 1.4s ease-in-out infinite;
}

#next-zone-cta .next-zone-text-en {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  opacity: 0.85;
}

@keyframes nextZoneCtaBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
@keyframes nextZoneArrow {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(3px); opacity: 1; }
}

@media (max-width: 600px) {
  #next-zone-cta {
    padding: 0.6rem 1.05rem;
    font-size: 0.84rem;
    bottom: clamp(0.9rem, 3vh, 1.6rem);
  }
  #next-zone-cta .next-zone-text-en {
    display: none; /* tight phones: keep just the Sinhala + arrow */
  }
}

@media (prefers-reduced-motion: reduce) {
  #next-zone-cta.visible {
    animation: none;
  }
  #next-zone-cta .next-zone-arrow {
    animation: none;
  }
}

/* ── S. PRINT (last resort — keeps wishes/cards printable) ── */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  #canvas-bg,
  #canvas-fx,
  #top-nav,
  #zone-nav,
  #pilgrimage-ribbon,
  #pilgrimage-complete-modal,
  .modal-overlay,
  #toast {
    display: none !important;
  }
  .zone {
    min-height: auto !important;
    page-break-inside: avoid;
  }
  .mini-player { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────
   ZONE 5 IN-COLUMN PLAYER
   Lives inside .stage-wrapper (left column) directly below the lyric
   teleprompter. Same max-width (600px) as the stage image + lyric box
   so all three elements form a vertical stack of equal width. Soft
   border so it reads as a sibling of the lyric box, not a competitor.
   ────────────────────────────────────────────────────────────────── */
.mini-player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 600px;
  margin-top: 0.85rem;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(6, 4, 18, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: var(--color-text-primary);
  box-sizing: border-box;
}

/* Narrow viewports: stack meta on its own row so the title doesn't
   get squeezed between thumb + transport. */
@media (max-width: 520px) {
  .mini-player {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 12px;
  }
  .mini-player .mp-meta { flex-basis: 100%; order: 2; min-width: 0; }
  .mini-player .mp-thumb { order: 1; }
  .mini-player .mp-buttons { order: 3; margin-left: auto; }
}

.mini-player .mp-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 28, 0.55);
  border: 1px solid rgba(212, 160, 23, 0.45);
  box-shadow: 0 0 10px rgba(247, 147, 26, 0.25);
}

.mini-player .mp-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mini-player .mp-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-player .mp-title {
  font-family: var(--font-sinhala);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-sinhala);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Sinhala vowel marks need vertical breathing */
  line-height: 1.5;
  padding-block: 2px;
}

.mini-player .mp-artist {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  margin-top: -2px;
  margin-bottom: 2px;
  font-style: italic;
}
.mini-player .mp-artist:empty { display: none; }

.mini-player .mp-scrub-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-player .mp-time {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 2.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mini-player .mp-scrub {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  margin: 0;
}

.mini-player .mp-scrub::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.mini-player .mp-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6px rgba(247, 147, 26, 0.6);
  cursor: pointer;
}

.mini-player .mp-scrub::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6px rgba(247, 147, 26, 0.6);
  cursor: pointer;
}

.mini-player .mp-scrub:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
}

.mini-player .mp-buttons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mini-player .mp-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 160, 23, 0.35);
  color: var(--color-gold-bright);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}

.mini-player .mp-btn:hover {
  background: rgba(247, 147, 26, 0.18);
  border-color: var(--color-flame);
  transform: scale(1.05);
}

.mini-player .mp-btn:active { transform: scale(0.95); }

.mini-player .mp-btn:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 2px;
}

.mini-player .mp-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.mini-player .mp-btn.mp-play {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.28), rgba(212, 160, 23, 0.2));
  border-color: var(--color-flame);
}

.mini-player .mp-btn.mp-play svg { width: 18px; height: 18px; }

.mini-player .mp-btn.is-playing { box-shadow: 0 0 12px rgba(247, 147, 26, 0.45); }

@media (max-width: 640px) {
  .mini-player {
    bottom: 8px;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 16px;
  }
  .mini-player .mp-thumb { width: 34px; height: 34px; }
  .mini-player .mp-title { font-size: 0.82rem; }
  .mini-player .mp-time { font-size: 0.66rem; min-width: 2em; }
  .mini-player .mp-btn { width: 30px; height: 30px; }
  .mini-player .mp-btn.mp-play { width: 36px; height: 36px; }
}

/* Mid-mobile (480-640): hide the album thumb to give the title + scrubber
   more horizontal room. Phones use full width minus zone padding. */
@media (max-width: 540px) {
  .mini-player {
    width: calc(100% - 14px);
    padding: 8px 10px;
    gap: 8px;
    border-radius: 14px;
  }
  .mini-player .mp-thumb { display: none; }
  .mini-player .mp-meta { gap: 5px; }
  .mini-player .mp-title {
    font-size: 0.82rem;
    line-height: 1.5;
    padding-block: 1px;
  }
  .mini-player .mp-scrub-row { gap: 6px; }
  .mini-player .mp-time { font-size: 0.62rem; min-width: 1.9em; }
}

/* Very narrow phones (≤420): tightest possible */
@media (max-width: 420px) {
  .mini-player {
    padding: 7px 8px;
    gap: 6px;
  }
  .mini-player .mp-title { font-size: 0.78rem; }
  .mini-player .mp-time { font-size: 0.6rem; min-width: 1.7em; }
  .mini-player .mp-buttons { gap: 2px; }
  .mini-player .mp-btn { width: 28px; height: 28px; }
  .mini-player .mp-btn.mp-play { width: 32px; height: 32px; }
  .mini-player .mp-btn svg { width: 13px; height: 13px; }
  .mini-player .mp-btn.mp-play svg { width: 15px; height: 15px; }
}

/* Singing bowl button — bell + label on one line, gap controlled */
#singing-bowl-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.5;
  padding-block: 0.7rem !important;
}
#singing-bowl-btn > span { white-space: normal; }
@media (max-width: 480px) {
  #singing-bowl-btn { font-size: 0.82rem !important; padding: 0.6rem 0.8rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Player is now in normal flow (not absolutely positioned), so no
     translate(-50%) shift is needed — that was for the old centered
     absolute layout. Keep only the button-transition disable. */
  .mini-player .mp-btn { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────
   ZONE 6 BREATHING PAUSE BUTTON + TTS VERSE NARRATION (P2-20)
   ────────────────────────────────────────────────────────────────── */
.btn-meditation-pause {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 28, 0.75);
  border: 1px solid var(--color-gold);
  color: var(--color-gold-bright);
  cursor: pointer;
  padding: 0;
  z-index: 6;
  box-shadow: 0 0 12px rgba(247, 147, 26, 0.35);
  transition: background 0.25s, transform 0.2s, border-color 0.25s;
}

.meditation-circle.is-breathing .btn-meditation-pause {
  display: inline-flex;
}

.btn-meditation-pause:hover {
  background: rgba(247, 147, 26, 0.2);
  border-color: var(--color-flame);
  transform: scale(1.06);
}

.btn-meditation-pause:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 2px;
}

.btn-meditation-pause svg { width: 16px; height: 16px; display: block; }

/* Freeze the lotus + orbit when paused */
.meditation-circle.is-paused .lotus-breath-svg,
.meditation-circle.is-paused .lotus-breath-svg .lotus-back-layer,
.meditation-circle.is-paused .lotus-breath-svg .lotus-mid-layer,
.meditation-circle.is-paused .lotus-breath-svg .lotus-front-layer,
.meditation-circle.is-paused .breath-guide-circle,
.meditation-circle.is-paused .prana-orbital-dot {
  animation-play-state: paused !important;
  transition: none !important;
}

.btn-tts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 6, 28, 0.55);
  border: 1px solid rgba(212, 160, 23, 0.45);
  color: var(--color-gold-bright);
  font-family: var(--font-sinhala);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  vertical-align: middle;
}

.btn-tts:hover {
  background: rgba(247, 147, 26, 0.18);
  border-color: var(--color-flame);
  transform: translateY(-1px);
}

.btn-tts:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 2px;
}

.btn-tts.speaking {
  background: rgba(247, 147, 26, 0.22);
  border-color: var(--color-gold-bright);
  box-shadow: 0 0 14px rgba(247, 147, 26, 0.5);
  animation: ttsPulse 1.4s ease-in-out infinite;
}

@keyframes ttsPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(247, 147, 26, 0.35); }
  50% { box-shadow: 0 0 22px rgba(247, 147, 26, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-tts.speaking { animation: none; }
  .btn-meditation-pause { transition: none; }
}

/* ── BILINGUAL VISIBILITY GATE ───────────────────────────────────────
   Bilingual text wrapped in .lang-si / .lang-en spans is gated by a
   language-mode class set by the inline boot script in <head> (first
   paint) and re-applied by main.js::toggleLanguage(). The class lives
   on BOTH <html> and <body> so the gate works before <body> exists
   during the initial parse — preventing the brief flash where both
   languages render simultaneously. aria-labels intentionally stay
   bilingual so screen readers always get full context. */
html.lang-mode-si .lang-en,
html.lang-mode-en .lang-si,
body.lang-mode-si .lang-en,
body.lang-mode-en .lang-si {
  display: none !important;
}

/* Default-hide .lang-en so Sinhala-first paint never shows both even
   if (a) the JS boot script is blocked, or (b) the class application
   races a slow stylesheet. .lang-si stays visible by default.
   All .lang-en wrappers in this codebase are <span> elements (inline
   by spec), so restoring `display: inline` on activation is safe. */
.lang-en { display: none !important; }
html.lang-mode-en .lang-en,
body.lang-mode-en .lang-en { display: inline !important; }

/* ── X. VESAK CONSTELLATION (P3) ─────────────────────────────────────
   Star sky above the clay-lamp wall in Zone 4. Every lit lamp = one
   deterministically-positioned star. Tap → popover with the wish.
   See js/constellation.js for the renderer + interaction. */

.constellation-wrap {
  padding: 1.2rem 1.3rem 1rem 1.3rem;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: visible; /* let the popover float free */
}

.constellation-header {
  text-align: center;
  margin-bottom: 0.8rem;
}

.constellation-title {
  font-size: clamp(1rem, 1.4vw + 0.6rem, 1.25rem) !important;
  margin-bottom: 0.2rem !important;
  color: var(--color-text-sinhala);
  text-shadow: 0 0 12px rgba(255, 232, 160, 0.25);
}

.constellation-title-en {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7em;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-left: 4px;
}

.constellation-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

.constellation-sub-en {
  font-family: var(--font-body);
  font-size: 0.88em;
  opacity: 0.85;
  margin-left: 4px;
}

.constellation-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: 260px;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(ellipse at top, #110b30, #06051a 65%, #03020c);
  border: 1px solid rgba(247, 147, 26, 0.22);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.6),
    0 4px 18px rgba(0, 0, 0, 0.4);
}

#constellation-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  cursor: crosshair;
  touch-action: manipulation;
}

.constellation-empty[hidden] { display: none !important; }

.constellation-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 1rem;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.constellation-empty-en {
  font-family: var(--font-body);
  font-size: 0.84em;
  opacity: 0.8;
  display: block;
  margin-top: 4px;
}

.constellation-popover {
  position: absolute;
  width: 220px;
  padding: 0.85rem 1rem 0.7rem;
  background: linear-gradient(135deg, rgba(28, 22, 70, 0.96), rgba(13, 11, 42, 0.98));
  border: 1px solid rgba(247, 147, 26, 0.5);
  border-radius: 14px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.7),
    0 0 28px rgba(247, 147, 26, 0.18);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  z-index: 4;
  animation: constellationPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes constellationPopIn {
  from { opacity: 0; transform: scale(0.85) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.constellation-popover[hidden] { display: none; }

.constellation-popover-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.constellation-popover-close:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.constellation-popover-lamp {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 0.3rem;
  filter: drop-shadow(0 0 8px rgba(247, 147, 26, 0.7));
}

.constellation-popover-name {
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-sinhala);
  margin-bottom: 0.4rem;
}

.constellation-popover-wish {
  font-family: var(--font-sinhala);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: 0.5rem;
  max-height: 4.5em;
  overflow-y: auto;
  word-break: break-word;
}

.constellation-popover-hint {
  font-size: 0.66rem;
  text-align: center;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.constellation-popover-hint-en {
  font-family: var(--font-body);
  margin-left: 3px;
}

/* Screen-reader-only live region */
.constellation-a11y {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Mobile */
@media (max-width: 700px) {
  .constellation-stage { height: 180px; }
  .constellation-wrap { padding: 0.9rem 1rem 0.7rem 1rem; }
  .constellation-popover { width: 200px; padding: 0.7rem 0.85rem; }
}

@media (max-width: 360px) {
  .constellation-stage { height: 150px; }
  .constellation-popover { width: 180px; }
  .constellation-title { font-size: 0.95rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .constellation-popover { animation: none; }
}

/* ── Y. DHAMMA ORACLE (P3) ───────────────────────────────────────────
   "Ask the Dhamma a question" → matches a Dhammapada verse from the
   existing data/verses.json. No AI. Pure thematic + keyword scoring. */

.btn-ask-dhamma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.65rem 1.1rem;
  min-height: 48px;
  background: linear-gradient(135deg, rgba(232, 83, 140, 0.16), rgba(76, 175, 80, 0.16));
  border: 1px solid rgba(232, 83, 140, 0.4);
  color: var(--color-text-sinhala);
  font-family: var(--font-sinhala);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s,
              border-color 0.25s;
}

.btn-ask-dhamma:hover {
  border-color: var(--color-lotus-pink);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 83, 140, 0.3);
}

.dhamma-oracle-rationale {
  margin: 1rem auto 0;
  max-width: 720px;
  padding: 0.8rem 1.1rem;
  border-left: 3px solid var(--color-lotus-pink);
  background: rgba(232, 83, 140, 0.06);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  line-height: 1.55;
}

.dhamma-oracle-rationale[hidden] { display: none; }

#dhamma-oracle-modal .modal-box {
  max-width: 540px;
}

#dhamma-oracle-input:focus {
  outline: 2px solid var(--color-lotus-pink);
  outline-offset: 2px;
}

/* ── Z. VESAK JOURNAL + STREAK (P3) ─────────────────────────────────
   Private localStorage diary. Streak badge in top-nav opens the modal. */

.streak-badge {
  background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(247, 147, 26, 0.18));
  border-color: rgba(247, 147, 26, 0.55);
  color: var(--color-flame-bright);
  animation: streakBadgePulse 2.4s ease-in-out infinite;
}

.streak-badge:hover {
  border-color: var(--color-flame-bright);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(247, 147, 26, 0.4);
}

.streak-badge[hidden] { display: none; }

.streak-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin-left: 2px;
}

@keyframes streakBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 147, 26, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(247, 147, 26, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-badge { animation: none; }
}

#vesak-journal-modal .modal-box {
  max-width: 720px;
}

.vj-streak-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.1), rgba(232, 83, 140, 0.08));
  border: 1px solid rgba(247, 147, 26, 0.3);
  border-radius: 16px;
  margin: 1.2rem 0 1.5rem 0;
}

.vj-streak-flame {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 10px rgba(247, 147, 26, 0.6));
  line-height: 1;
}

.vj-streak-stats {
  flex: 1;
  min-width: 0;
}

.vj-streak-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-flame-bright);
  text-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.vj-streak-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.vj-streak-sub {
  font-size: 0.85rem;
  color: var(--color-text-primary);
  margin-top: 6px;
  line-height: 1.4;
}

.vj-section-h {
  font-size: 1rem !important;
  margin: 1.6rem 0 0.6rem 0 !important;
  color: var(--color-text-sinhala) !important;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(212, 160, 23, 0.18);
}

.vj-calendar {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
  margin-bottom: 1rem;
}

.vj-cal-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.15s;
}

.vj-cal-cell.lit {
  background: linear-gradient(135deg, var(--color-flame), var(--color-gold));
  border-color: var(--color-flame-bright);
  box-shadow: 0 0 8px rgba(247, 147, 26, 0.4);
}

.vj-cal-cell.today {
  outline: 2px solid var(--color-moonlight);
  outline-offset: 1px;
}

.vj-cal-cell:hover {
  transform: scale(1.18);
  z-index: 2;
}

.vj-entries-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.vj-entries-list::-webkit-scrollbar { width: 6px; }
.vj-entries-list::-webkit-scrollbar-thumb { background: rgba(247, 147, 26, 0.4); border-radius: 3px; }

.vj-empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
  padding: 1rem 0;
  margin: 0;
}

.vj-entry {
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.vj-entry:hover {
  border-color: rgba(247, 147, 26, 0.35);
}

.vj-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}

.vj-entry-emoji {
  font-size: 1rem;
}

.vj-entry-name {
  flex: 1;
  font-weight: 700;
  color: var(--color-text-sinhala);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vj-entry-ts {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.vj-entry-text {
  font-family: var(--font-sinhala);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-primary);
  padding-left: 1.5rem;
}

.vj-entry-actions {
  margin-top: 0.4rem;
  padding-left: 1.5rem;
}

.vj-copy-btn {
  background: transparent;
  border: 1px solid rgba(247, 147, 26, 0.35);
  color: var(--color-flame-bright);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-family: var(--font-sinhala);
  cursor: pointer;
  transition: all 0.2s;
}

.vj-copy-btn:hover {
  background: rgba(247, 147, 26, 0.1);
  border-color: var(--color-flame);
}

@media (max-width: 600px) {
  .vj-calendar { grid-template-columns: repeat(10, 1fr); }
  .vj-streak-count { font-size: 1.8rem; }
  .vj-streak-flame { font-size: 2rem; }
}

/* ── AA. VESAK CARD STUDIO v2 (P3 — flagship share) ──────────────────
   Single-screen card studio: template stripe + name + wish + ratio on
   the left, live canvas preview on the right (stacked on mobile). */

.cs-box {
  width: 96vw !important;
  max-width: 1280px !important;
  max-height: 96dvh !important;      /* use dvh not vh — iOS Safari safe area */
  padding: 1.5rem 1.5rem 1.25rem !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  box-sizing: border-box;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cs-box {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
  }
}

.cs-header {
  text-align: center;
  margin-bottom: 0.65rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}
.cs-header h2 {
  font-size: clamp(1.15rem, 2vw, 1.65rem) !important;
  margin: 0 0 0.2rem 0 !important;
  background: linear-gradient(135deg, #FFE8A0 0%, #F7931A 50%, #E8538C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 24px rgba(247, 147, 26, 0.2);
}
.cs-subtitle {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.5;
}

.cs-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cs-controls {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow-y: auto;
  padding-right: 8px;
}
.cs-controls::-webkit-scrollbar { width: 6px; }
.cs-controls::-webkit-scrollbar-thumb { background: rgba(247, 147, 26, 0.35); border-radius: 3px; }

.cs-section { display: flex; flex-direction: column; gap: 0.6rem; }
.cs-section-title {
  font-size: 0.82rem !important;
  margin: 0 !important;
  color: var(--color-text-sinhala) !important;
}

.cs-template-stripe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cs-thumb {
  position: relative;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 5px 5px 7px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  min-height: 0;
}
.cs-thumb canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.cs-thumb-label {
  font-family: var(--font-sinhala);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.cs-thumb:hover {
  border-color: rgba(247, 147, 26, 0.45);
  transform: translateY(-2px);
}
.cs-thumb.selected {
  border-color: var(--color-flame);
  box-shadow:
    0 0 0 2px rgba(247, 147, 26, 0.35),
    0 8px 22px rgba(247, 147, 26, 0.25);
}
.cs-thumb.selected .cs-thumb-label {
  color: var(--color-flame-bright);
}

.cs-name-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 147, 26, 0.35);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: var(--color-text-primary);
  font-family: var(--font-sinhala);
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cs-name-input:focus {
  outline: none;
  border-color: var(--color-flame-bright);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.18);
}

.cs-wish-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
}
.cs-wish-list::-webkit-scrollbar { width: 5px; }
.cs-wish-list::-webkit-scrollbar-thumb { background: rgba(232, 83, 140, 0.35); border-radius: 3px; }

.cs-wish {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sinhala);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-primary);
  transition: all 0.18s;
}
.cs-wish:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 160, 23, 0.4);
}
.cs-wish.selected {
  background: rgba(232, 83, 140, 0.12);
  border-color: var(--color-lotus-pink);
  color: var(--color-text-sinhala);
  box-shadow: 0 0 18px rgba(232, 83, 140, 0.18);
}

.cs-ratio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cs-ratio {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.7rem 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  color: var(--color-text-secondary);
  min-height: 64px;        /* minimum touch target */
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cs-ratio:hover { border-color: rgba(247, 147, 26, 0.4); color: var(--color-text-primary); }
.cs-ratio.selected {
  background: rgba(247, 147, 26, 0.12);
  border-color: var(--color-flame);
  color: var(--color-text-sinhala);
}
.cs-ratio-frame {
  display: block;
  background: linear-gradient(135deg, #D4A017, #F7931A);
  border-radius: 3px;
}
.cs-ratio-frame--landscape { width: 36px; height: 22px; }
.cs-ratio-frame--square    { width: 28px; height: 28px; }
.cs-ratio-frame--story     { width: 18px; height: 30px; }
.cs-ratio-label {
  font-family: var(--font-sinhala);
  font-size: 0.78rem;
  font-weight: 700;
}
.cs-ratio-sub {
  font-family: var(--font-display);
  font-size: 0.62rem;
  opacity: 0.7;
}

.cs-preview {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  min-height: 0;
}
.cs-preview-stage {
  flex: 1;
  min-height: 280px;
  background:
    repeating-conic-gradient(rgba(255,255,255,0.015) 0 25%, transparent 0 50%) 0 0 / 18px 18px,
    radial-gradient(ellipse at center, rgba(8,4,16,0.7), rgba(4,2,8,0.95));
  border-radius: 16px;
  border: 1px solid rgba(212, 160, 23, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px;
  position: relative;
  box-sizing: border-box;
}

/* Dynamic aspect-ratios to prevent black dead zones */
.cs-preview-stage[data-format="landscape"] { aspect-ratio: 1200 / 630; }
.cs-preview-stage[data-format="square"]    {
  aspect-ratio: 1 / 1;
  max-width: 320px;        /* square cap — prevents excessive height on desktop/tablet */
  margin: 0 auto;
}
.cs-preview-stage[data-format="story"]     {
  aspect-ratio: 9 / 16;
  max-width: 280px;        /* portrait cap — prevents extreme height on desktop */
  margin: 0 auto;
}

#cs-preview-canvas {
  display: block;
  border-radius: 8px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(247, 147, 26, 0.18);
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
}
.cs-preview-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 248, 224, 0.8);
  background: rgba(8, 4, 22, 0.55);
  border: 1px solid rgba(212, 160, 23, 0.35);
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cs-quick-download {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 147, 26, 0.85);
  color: #0A0A16;
  border: 1px solid rgba(255, 232, 160, 0.6);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 8px 22px rgba(247, 147, 26, 0.35),
    0 0 0 2px rgba(8, 4, 22, 0.5);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.cs-quick-download:hover {
  transform: translateY(-1px) scale(1.05);
  background: #FFAD33;
  box-shadow:
    0 12px 28px rgba(247, 147, 26, 0.55),
    0 0 0 2px rgba(8, 4, 22, 0.6);
}
.cs-quick-download:active { transform: scale(0.96); }

.cs-share-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  border-radius: 10px;
  font-family: var(--font-sinhala);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cs-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.08); }
.cs-btn--primary {
  background: linear-gradient(135deg, #F7931A, #FFAD33);
  color: #0A0A16;
  border-color: var(--color-flame-bright);
  box-shadow: 0 6px 18px rgba(247, 147, 26, 0.4);
}
.cs-btn--primary:hover { box-shadow: 0 10px 26px rgba(247, 147, 26, 0.55); }
.cs-btn--download { border-color: rgba(212, 160, 23, 0.45); color: var(--color-gold-bright); }
.cs-btn--wa { border-color: rgba(37, 211, 102, 0.4); color: #25D366; }
.cs-btn--wa:hover { background: rgba(37, 211, 102, 0.1); }
.cs-btn--tg { border-color: rgba(0, 136, 204, 0.4); color: #4FB8E0; }
.cs-btn--tg:hover { background: rgba(0, 136, 204, 0.1); }
.cs-btn--fb { border-color: rgba(24, 119, 242, 0.4); color: #6CA8F0; }
.cs-btn--fb:hover { background: rgba(24, 119, 242, 0.1); }
.cs-btn--copy { border-color: rgba(212, 160, 23, 0.35); color: var(--color-gold-bright); }

.cs-tip {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .cs-box { max-height: 96vh !important; padding: 1rem 1rem 0.85rem !important; }
  .cs-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .cs-controls { overflow-y: visible; max-height: none; }
  .cs-preview-stage { flex: none; width: 100%; height: auto; min-height: 0; max-height: none; }
  .cs-share-bar { grid-template-columns: repeat(2, 1fr); }
  .cs-header h2 { font-size: 1.15rem !important; }
  .cs-subtitle { font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .cs-template-stripe { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cs-thumb { padding: 4px 4px 6px 4px; }
  .cs-thumb-label { font-size: 0.7rem; }
  .cs-ratio { padding: 0.55rem 0.3rem; }
  .cs-ratio-label { font-size: 0.7rem; }
  .cs-ratio-sub { display: none; }
  .cs-quick-download { width: 34px; height: 34px; font-size: 1rem; }
  .cs-preview-tag { font-size: 0.55rem; padding: 3px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-btn:hover, .cs-thumb:hover { transform: none; }
}

/* ── BB. PREMIUM VESAK GREETING-CARD CTA (Zone 4 trigger tile) ─────
   The "Open Card Studio" tile in the Dansala zone gets editorial
   gold-trimmed treatment so it stands out as the headline action. */
.vesak-card-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 83, 140, 0.10), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(247, 147, 26, 0.10), transparent 50%),
    linear-gradient(155deg, rgba(26, 14, 26, 0.94), rgba(13, 8, 22, 0.98));
  border: 1px solid rgba(255, 215, 0, 0.28) !important;
  box-shadow:
    inset 0 0 30px rgba(212, 160, 23, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(247, 147, 26, 0.08) !important;
}

.vesak-card-cta:hover {
  border-color: rgba(255, 215, 0, 0.5) !important;
  box-shadow:
    inset 0 0 40px rgba(212, 160, 23, 0.14),
    0 16px 48px rgba(0, 0, 0, 0.7),
    0 0 48px rgba(247, 147, 26, 0.18) !important;
}

/* Slow ambient glow drifting in the background */
.vc-bg-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 40%, rgba(247, 147, 26, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(232, 83, 140, 0.06) 0%, transparent 35%);
  animation: vcBgDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes vcBgDrift {
  0%   { transform: translate(-3%, -2%) rotate(0deg); }
  100% { transform: translate(3%, 2%) rotate(8deg); }
}

/* Small gold pill badge at top — "🪷 VESAK 2026" */
.vc-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 999px;
  color: var(--color-gold-bright);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Gradient heading — gold → saffron → lotus pink */
.vc-heading {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #FFE8A0 0%, #F7931A 45%, #E8538C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 30px rgba(247, 147, 26, 0.25);
  margin: 0 0 0.5rem 0 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  line-height: 1.3 !important;
}

/* Decorative divider — gold line + rotating diamond */
.vc-divider {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0.4rem 0 0.8rem 0;
}
.vc-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.6), transparent);
}
.vc-divider-diamond {
  color: var(--color-gold-bright);
  font-size: 0.7rem;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  display: inline-block;
  animation: vcRotate 12s linear infinite;
}
@keyframes vcRotate {
  to { transform: rotate(360deg); }
}

/* Description */
.vc-desc {
  position: relative;
  z-index: 2;
  font-size: 0.82rem !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 0 1rem 0 !important;
}

/* Feature chips: 6 designs · 15 blessings · 3 formats */
.vc-features {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.1rem;
}
.vc-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.55rem 0.3rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 160, 23, 0.22);
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.vc-chip:hover {
  border-color: rgba(255, 215, 0, 0.55);
  background: rgba(212, 160, 23, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.15);
}
.vc-chip-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-gold-bright);
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.vc-chip-label {
  font-family: var(--font-sinhala);
  font-size: 0.68rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* Premium gradient CTA button with shimmer */
.vc-cta-btn {
  position: relative;
  z-index: 2;
  width: 100%;
  background: linear-gradient(135deg, #F7931A 0%, #FFAD33 50%, #FFD700 100%) !important;
  color: #0A0A16 !important;
  border: 1px solid rgba(255, 248, 224, 0.5) !important;
  font-weight: 800 !important;
  padding: 0.95rem 1.4rem !important;
  border-radius: 14px !important;
  letter-spacing: 0.3px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  box-shadow:
    0 0 24px rgba(247, 147, 26, 0.42),
    0 0 48px rgba(247, 147, 26, 0.18),
    inset 0 1px 0 rgba(255, 248, 224, 0.45) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Shimmer sweep across the button on hover */
.vc-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.vc-cta-btn:hover::before { animation: vcShimmer 1.1s ease-out; }
@keyframes vcShimmer {
  0%   { left: -60%; }
  100% { left: 160%; }
}

.vc-cta-btn:hover {
  transform: translateY(-3px) scale(1.015) !important;
  box-shadow:
    0 0 36px rgba(247, 147, 26, 0.6),
    0 0 72px rgba(247, 147, 26, 0.3),
    inset 0 1px 0 rgba(255, 248, 224, 0.6) !important;
}
.vc-cta-btn:active {
  transform: translateY(-1px) scale(1) !important;
}

.vc-cta-icon {
  font-size: 1.1rem;
  animation: vcSparkle 2.8s ease-in-out infinite;
  display: inline-block;
}
@keyframes vcSparkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50%      { transform: scale(1.25) rotate(18deg); opacity: 0.85; }
}

.vc-cta-arrow {
  font-size: 1.05rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}
.vc-cta-btn:hover .vc-cta-arrow {
  transform: translateX(5px);
}

@media (max-width: 600px) {
  .vc-features { gap: 6px; }
  .vc-chip-num { font-size: 1.25rem; }
  .vc-chip-label { font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-bg-glow,
  .vc-divider-diamond,
  .vc-cta-icon,
  .vc-cta-btn::before { animation: none; }
  .vc-cta-btn:hover { transform: none !important; }
}

/* ── CC. BRAND-AUTHENTIC SOCIAL ICONS ───────────────────────────────
   Replace emoji glyphs with proper inline SVG brand marks. Each icon
   inherits color from its parent button so the existing per-brand
   color classes (.share-btn.whatsapp etc.) keep working. */

/* Generic alignment for inline brand SVGs anywhere in the project */
.share-btn-icon svg,
.cs-brand-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.cs-brand-icon svg {
  width: 18px;
  height: 18px;
}
.share-btn-icon,
.cs-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Brand-coloured fills — when the button is at rest, icon uses brand color.
   On hover we already have the per-brand bg/glow rules, so the icon stays
   the same brand color for consistency. */
.share-btn.whatsapp .share-btn-icon { color: #25D366; }
.share-btn.facebook .share-btn-icon { color: #1877F2; }
.share-btn.telegram .share-btn-icon { color: #229ED9; }
.share-btn.copy     .share-btn-icon { color: var(--color-gold-bright); }

/* Card Studio share-bar icons share the same brand colors */
.cs-btn--wa   .cs-brand-icon { color: #25D366; }
.cs-btn--fb   .cs-brand-icon { color: #1877F2; }
.cs-btn--tg   .cs-brand-icon { color: #229ED9; }
.cs-btn--copy .cs-brand-icon { color: var(--color-gold-bright); }

/* Tighten the gap between icon and label inside Card Studio share buttons */
.cs-btn--wa,
.cs-btn--fb,
.cs-btn--tg,
.cs-btn--copy {
  gap: 8px;
}

/* On hover, gently scale the brand icon for tactile feedback */
.share-btn:hover .share-btn-icon,
.cs-btn:hover .cs-brand-icon {
  transform: scale(1.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .share-btn:hover .share-btn-icon,
  .cs-btn:hover .cs-brand-icon { transform: none; }
}

/* ── DD. CREATOR SOCIAL ROW (Zone 7 credits footer) ───────────────── */
.creator-socials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 160, 23, 0.18);
  width: 100%;
}

.creator-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(247, 147, 26, 0.08);
  border: 1px solid rgba(247, 147, 26, 0.35);
  color: var(--color-flame);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;        /* needed for <button> variant */
  font: inherit;          /* reset <button> font */
  line-height: 1;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}
/* Re-apply our font after the reset above */
.creator-social {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
}
.creator-social:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 2px;
}

.creator-social svg {
  display: block;
  flex-shrink: 0;
}

/* Unified brand-orange hover across all platforms */
.creator-social:hover {
  transform: translateY(-2px);
  color: #FFB347;
  background: rgba(247, 147, 26, 0.16);
  border-color: rgba(247, 147, 26, 0.85);
  box-shadow: 0 4px 16px rgba(247, 147, 26, 0.35);
}

/* Mobile: tighter, label can wrap to icon-only on tiniest screens */
@media (max-width: 480px) {
  .creator-socials { gap: 8px; }
  .creator-social { padding: 6px 10px; font-size: 0.72rem; }
}
@media (max-width: 360px) {
  .creator-social-label { display: none; }
  .creator-social { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .creator-social:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   YOUR VESAK LIGHT — viral hero-adjacent feature
   The shareable artifact section. Premium-feel by intent.
   ═══════════════════════════════════════════════════════════════════════ */

.zone--vesak-light {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(247, 147, 26, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-night-deep) 0%, #0A0820 100%);
  min-height: auto;
  padding: clamp(3rem, 8vh, 6rem) 0;
  position: relative;
  overflow: hidden;
}

.vl-zone-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  text-align: center;
}

/* Background cosmic orbs — toned down so they don't compete with content. */
.vl-cosmic-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.vl-cosmic-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.20;
}
.vl-cosmic-orb.vl-orb-1 {
  width: 28vw; height: 28vw; min-width: 200px; min-height: 200px;
  background: radial-gradient(circle, #F7931A 0%, transparent 70%);
  top: -10%; left: -10%;
  animation: vl-orb-float 22s ease-in-out infinite;
}
.vl-cosmic-orb.vl-orb-2 {
  width: 24vw; height: 24vw; min-width: 180px; min-height: 180px;
  background: radial-gradient(circle, #E8538C 0%, transparent 70%);
  bottom: -12%; right: -10%;
  animation: vl-orb-float 26s ease-in-out infinite reverse;
}
@keyframes vl-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(3%, -2%) scale(1.04); }
}

/* Header stack — small badge, gradient heading, sacred divider.
   Matches the visual rhythm of zones 3, 4, 6. */
.vl-heading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.vl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  background: rgba(247, 147, 26, 0.10);
  border: 1px solid rgba(247, 147, 26, 0.30);
  color: var(--color-flame);
  font-size: clamp(0.72rem, 1.5vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vl-badge .sinhala { font-family: var(--font-sinhala); }
.vl-badge-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-flame);
  box-shadow: 0 0 0 0 rgba(247, 147, 26, 0.7);
  animation: vl-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes vl-badge-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(247, 147, 26, 0.7); }
  70%  { box-shadow: 0 0 0 12px rgba(247, 147, 26, 0); }
  100% { box-shadow: 0 0 0 0   rgba(247, 147, 26, 0); }
}

/* Headline now inherits .sinhala-heading-gradient base from styles.css —
   we just tweak size + remove the !important shouting. Matches Dansala
   + Meditation zone headings. */
.vl-headline {
  margin: 0 !important;
  font-size: clamp(1.65rem, 4.5vw, 2.6rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  text-shadow: 0 4px 30px rgba(247, 147, 26, 0.20);
}

/* Glass card that wraps the description + CTA + trust row.
   This is the visual anchor — gives the section the same weight as
   other zones' content cards instead of floating in empty space. */
.vl-card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 640px;
  margin: 0 auto;
}

.vl-sub {
  max-width: 560px;
  margin: 0 !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-align: center;
}

/* Premium CTA — magnetic feel via :hover transform + glow */
.vl-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 1.1rem 2rem;
  font-family: var(--font-sinhala);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  color: #0A0A0A;
  background: linear-gradient(135deg, #FFD700 0%, #F7931A 50%, #FF8C42 100%);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  box-shadow:
    0 12px 40px rgba(247, 147, 26, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}
.vl-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 18px 60px rgba(247, 147, 26, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.vl-cta:active { transform: translateY(-1px) scale(1.01); }
.vl-cta-glow {
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: conic-gradient(from 0deg, #F7931A, #FFD700, #FF8FA3, #F7931A);
  z-index: -1;
  opacity: 0;
  filter: blur(12px);
  animation: vl-cta-glow-spin 6s linear infinite;
  transition: opacity 0.4s ease;
}
.vl-cta:hover .vl-cta-glow { opacity: 0.7; }
@keyframes vl-cta-glow-spin {
  to { transform: rotate(360deg); }
}
.vl-cta-icon { font-size: 1.4em; line-height: 1; }
.vl-cta-arrow {
  font-size: 1.2em;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.vl-cta:hover .vl-cta-arrow { transform: translateX(4px); }

.vl-trust-row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: clamp(0.72rem, 1.4vw, 0.85rem);
  margin-top: 0.5rem;
}
.vl-trust-item { display: inline-flex; align-items: center; gap: 6px; }
.vl-trust-item .sinhala { font-family: var(--font-sinhala); }
.vl-trust-dot { opacity: 0.4; }

@media (max-width: 520px) {
  .vl-trust-row { gap: 6px; font-size: 0.72rem; }
  .vl-trust-dot { display: none; }
  .vl-trust-item { flex-basis: 100%; justify-content: center; }
}

.vl-skip-next {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--font-sinhala);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.3px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.vl-skip-next:hover {
  color: var(--color-flame);
  background: rgba(247, 147, 26, 0.08);
}

/* ── MODAL ─────────────────────────────────────────────────────────── */
.vl-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(6, 4, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-y: auto;
  /* dvh keeps the modal usable when iOS Safari toolbar appears/disappears.
     vh fallback for older browsers. (FIX-7) */
  height: 100vh;
  height: 100dvh;
  padding: clamp(1rem, 4vh, 3rem) clamp(0.75rem, 3vw, 2rem);
  -webkit-overflow-scrolling: touch;
}
.vl-modal.show { display: flex; animation: vl-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes vl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vl-modal-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(135deg, rgba(20, 18, 48, 0.95) 0%, rgba(10, 8, 32, 0.98) 100%);
  border: 1px solid rgba(247, 147, 26, 0.25);
  border-radius: 28px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(247, 147, 26, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: vl-modal-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vl-modal-rise {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.vl-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.vl-modal-close:hover {
  background: rgba(247, 147, 26, 0.15);
  border-color: rgba(247, 147, 26, 0.4);
  color: var(--color-flame);
  transform: rotate(90deg);
}

.vl-modal-title {
  font-size: clamp(1.3rem, 3.5vw, 1.7rem) !important;
  margin: 0 0 0.4rem !important;
  text-align: center;
  background: linear-gradient(135deg, #FFD700, #F7931A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.vl-modal-sub {
  text-align: center;
  margin: 0 0 1.5rem !important;
  color: var(--color-text-secondary);
}

/* ── FORM STAGE ────────────────────────────────────────────────────── */
.vl-form { display: flex; flex-direction: column; gap: 1.2rem; }
.vl-field { display: flex; flex-direction: column; gap: 0.5rem; }
.vl-field .input-field { margin: 0; }
.vl-field select.input-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23F7931A' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.vl-mood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.vl-mood-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.vl-mood-chip input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.vl-mood-chip:hover {
  background: rgba(247, 147, 26, 0.08);
  border-color: rgba(247, 147, 26, 0.35);
  transform: translateY(-1px);
}
.vl-mood-chip:has(input:checked) {
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.18), rgba(255, 215, 0, 0.10));
  border-color: var(--color-flame);
  box-shadow: 0 8px 24px rgba(247, 147, 26, 0.20);
}
.vl-mood-icon { font-size: 1.4rem; }
.vl-mood-label { font-size: 0.95rem; font-weight: 600; }

.vl-submit { margin-top: 0.5rem; }

.vl-shake { animation: vl-shake 0.4s; border-color: var(--color-lotus-pink) !important; }
@keyframes vl-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ── REVEAL STAGE — cinematic ─────────────────────────────────────── */
.vl-stage-reveal { min-height: 360px; }
.vl-reveal-canvas {
  position: relative;
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vl-reveal-rings { position: absolute; inset: 0; pointer-events: none; }
.vl-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(247, 147, 26, 0.4);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.vl-anim-active .vl-ring {
  animation: vl-ring-expand 5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.vl-anim-active .vl-ring-1 { animation-delay: 0s;   border-color: rgba(255, 215, 0, 0.5); }
.vl-anim-active .vl-ring-2 { animation-delay: 0.8s; border-color: rgba(247, 147, 26, 0.5); }
.vl-anim-active .vl-ring-3 { animation-delay: 1.6s; border-color: rgba(232, 83, 140, 0.4); }
@keyframes vl-ring-expand {
  0%   { width: 40px;  height: 40px;  opacity: 0; }
  20%  { opacity: 1; }
  100% { width: 360px; height: 360px; opacity: 0; }
}

.vl-reveal-bodhi,
.vl-reveal-lamp {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 4rem;
  filter: drop-shadow(0 0 20px rgba(247, 147, 26, 0.6));
  transform: translate(-50%, -50%) scale(0);
}
.vl-anim-active .vl-reveal-bodhi { animation: vl-bodhi-bloom 6.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.vl-anim-active .vl-reveal-lamp  { animation: vl-lamp-rise  6.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes vl-bodhi-bloom {
  0%   { transform: translate(-50%, -50%) scale(0)   rotate(-45deg); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.2) rotate(0deg);   opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1)   rotate(0deg);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.4) rotate(45deg);  opacity: 0; }
}
@keyframes vl-lamp-rise {
  0%, 55% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  70%     { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100%    { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.vl-reveal-text {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-flame);
  font-size: 0.95rem;
  letter-spacing: 1px;
  opacity: 0;
  text-align: center;
  width: 100%;
}

/* Skip-animation button — appears 1.5s after the reveal starts so impatient
   users don't sit through the full 6.5s on every reading. */
.vl-skip-reveal {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  color: var(--color-text-secondary);
  font-family: var(--font-sinhala);
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.vl-anim-active .vl-skip-reveal {
  animation: vl-skip-fade-in 0.4s ease 1.5s forwards;
}
@keyframes vl-skip-fade-in {
  to { opacity: 1; pointer-events: auto; }
}
.vl-skip-reveal:hover {
  background: rgba(247, 147, 26, 0.12);
  border-color: rgba(247, 147, 26, 0.35);
  color: var(--color-flame);
}
.vl-anim-active .vl-reveal-text { animation: vl-text-pulse 2s ease-in-out infinite; }
@keyframes vl-text-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ── RESULT CARD — story-format, the shareable artifact ─────────── */
.vl-stage-result { display: flex; flex-direction: column; gap: 1.25rem; align-items: stretch; }

.vl-card {
  --vl-c1: #F7931A;
  --vl-c2: #FFD700;
  --vl-c3: #FFFFFF;
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #1A1530 0%, #0A0820 100%);
  border: 1.5px solid color-mix(in oklab, var(--vl-c1) 35%, transparent);
  border-radius: 22px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  text-align: center;
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.5),
    0 0 60px color-mix(in oklab, var(--vl-c1) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: vl-card-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vl-card-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.vl-card-header {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.vl-card-glyph { color: var(--vl-c2); font-size: 1rem; }
.vl-card-brand { font-family: var(--font-sinhala); }

.vl-card-name-block { margin-bottom: 1rem; }
.vl-card-emoji {
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  line-height: 1;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 4px 12px color-mix(in oklab, var(--vl-c1) 60%, transparent));
}
.vl-card-name {
  font-family: var(--font-sinhala);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 800;
  margin: 0;
  color: var(--vl-c2);
  letter-spacing: 0.5px;
}

.vl-card-parami {
  border-top: 1px solid color-mix(in oklab, var(--vl-c1) 25%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--vl-c1) 25%, transparent);
  padding: 1rem 0;
  margin-bottom: 1rem;
}
.vl-card-parami-si {
  font-family: var(--font-sinhala);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--vl-c1), var(--vl-c2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 0.2rem;
}
.vl-card-parami-en {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}
.vl-card-tagline {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  font-style: italic;
  line-height: 1.5;
}
.vl-card-tagline .lang-si { font-family: var(--font-sinhala); }

.vl-card-essence {
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0 0 1.2rem !important;
}
.vl-card-essence .lang-si { font-family: var(--font-sinhala); }

.vl-card-verse {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--vl-c1);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  text-align: left;
  margin-bottom: 1rem;
}
.vl-card-verse-label {
  margin-bottom: 0.4rem;
  color: var(--vl-c2);
  letter-spacing: 0.5px;
  text-align: center;
}
.vl-card-verse-label .lang-si { font-family: var(--font-sinhala); }
.vl-card-verse-si {
  font-family: var(--font-sinhala);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: 0.4rem;
}
.vl-card-verse-en {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.vl-card-verse-chap {
  text-align: right;
  color: var(--color-text-muted);
}

.vl-card-blessing {
  font-family: var(--font-sinhala);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  line-height: 1.7;
  color: var(--vl-c2);
  padding: 1rem;
  background: linear-gradient(135deg, color-mix(in oklab, var(--vl-c1) 8%, transparent), color-mix(in oklab, var(--vl-c2) 4%, transparent));
  border-radius: 12px;
  margin-bottom: 1rem;
}

.vl-card-palette {
  display: flex; justify-content: center; gap: 14px;
  margin-bottom: 1rem;
}
.vl-orb {
  width: 16px; height: 16px;
  border-radius: 50%;
  animation: vl-orb-breathe 3s ease-in-out infinite;
}
.vl-orb:nth-child(2) { animation-delay: 0.5s; }
.vl-orb:nth-child(3) { animation-delay: 1s; }
@keyframes vl-orb-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

.vl-card-footer {
  text-align: center;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.6rem;
}

.vl-result-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.vl-share-btn {
  font-size: 0.85rem !important;
  padding: 0.7rem 0.5rem !important;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.vl-share-btn .lang-si { font-family: var(--font-sinhala); }
@media (max-width: 480px) {
  .vl-result-actions { grid-template-columns: 1fr; }
}

.vl-permalink-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-family: monospace;
  text-align: center;
}

.vl-try-again {
  background: none;
  border: none;
  color: var(--color-flame);
  font-family: var(--font-sinhala);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem;
  transition: opacity 0.25s ease;
}
.vl-try-again:hover { opacity: 0.7; }

/* ── AR block — model-viewer attached to the result card ─────── */
.vl-ar-block {
  margin-top: 0.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.08), rgba(232, 83, 140, 0.05));
  border: 1.5px solid color-mix(in oklab, var(--vl-c1, #F7931A) 30%, transparent);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vl-ar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sinhala);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  flex-wrap: wrap;
}
.vl-ar-header .lang-si, .vl-ar-header .lang-en { flex: 1 1 auto; }
.vl-ar-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #F7931A, #FFD700);
  color: #0A0A0A;
  border-radius: 100px;
  text-transform: uppercase;
  flex: 0 0 auto;
}

#vl-ar-viewer {
  --poster-color: transparent;
  width: 100%;
  height: 320px;
  background: radial-gradient(ellipse at center bottom,
    color-mix(in oklab, var(--vl-c1, #F7931A) 18%, transparent) 0%,
    transparent 70%);
  border-radius: 14px;
  overflow: hidden;
}

.vl-ar-launch {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-sinhala);
  font-size: 0.85rem;
  font-weight: 700;
  color: #0A0A0A;
  background: linear-gradient(135deg, #FFD700, #F7931A);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(247, 147, 26, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
.vl-ar-launch:hover { transform: translateY(-2px) scale(1.03); }
.vl-ar-launch:active { transform: translateY(0) scale(1); }

.vl-ar-progress {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #F7931A, #FFD700);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.vl-ar-hint {
  margin: 0 !important;
  text-align: center;
  color: var(--color-text-muted) !important;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
}
.vl-ar-hint .lang-si { font-family: var(--font-sinhala); }

/* Mobile portrait */
@media (max-width: 480px) {
  #vl-ar-viewer { height: 280px; }
  .vl-ar-launch { padding: 0.55rem 0.9rem; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-ar-launch:hover { transform: none; }
  #vl-ar-viewer { --auto-rotate-speed: 0; }
}

/* Reduced motion: kill animations, keep static beauty */
@media (prefers-reduced-motion: reduce) {
  .vl-cosmic-orb,
  .vl-badge-pulse,
  .vl-cta-glow,
  .vl-ring,
  .vl-reveal-bodhi,
  .vl-reveal-lamp,
  .vl-reveal-text,
  .vl-orb { animation: none !important; }
  .vl-cta:hover { transform: none; }
}