:root{
  --teal:#0F4C5C;
  --teal-deep:#0A343F;
  --turquoise:#2EC4B6;
  --gold:#D4AF37;
  --cream:#FFF8ED;
  --rose:#F2B8B0;
  --ink:#1E2E30;
  --shadow-hard: 6px 6px 0 rgba(15,76,92,0.85);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent;}
html{scroll-behavior:smooth;}
body{ font-family:'Nunito', sans-serif; background: var(--cream); color: var(--ink); min-height:100dvh; overflow-x:hidden; position:relative; cursor:default; }
h1,h2,h3{ font-family:'Cormorant Garamond', serif; font-weight:700; }
.script{ font-family:'Caveat', cursive; }
button, input, textarea{ font-family:inherit; }
::selection{ background: var(--turquoise); color:#fff; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============ STAGES ============ */
.stage{
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 7vh 5vw 5vh;
  opacity:0; pointer-events:none;
  transform: translateY(18px) scale(.97);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;
}
.stage.active{ opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }
.stage-bg-a{ background: radial-gradient(circle at 50% 15%, #DFF6F1 0%, var(--cream) 60%); }
.stage-bg-b{ background: radial-gradient(ellipse 90% 70% at 50% 20%, #123B47 0%, var(--teal-deep) 100%); color:#fff; }
.stage::before{ content:''; position:absolute; inset:14px; border:2px solid rgba(212,175,55,.35); border-radius:22px; pointer-events:none; }

/* ============ BUTTONS ============ */
.pill-btn{
  font-weight:800; font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  border:3px solid var(--teal); background: var(--turquoise); color:#fff;
  padding: .85rem 2.1rem; border-radius: 999px; cursor:pointer;
  box-shadow: var(--shadow-hard); transition: transform .15s ease, box-shadow .15s ease;
  touch-action: manipulation;
}
.pill-btn:hover{ transform: translate(-2px,-2px); box-shadow: 9px 9px 0 rgba(15,76,92,0.85); }
.pill-btn:active{ transform: translate(1px,1px); box-shadow: 3px 3px 0 rgba(15,76,92,0.85); }
.pill-btn.gold{ background: var(--gold); color:#3a2e05; }
.pill-btn.ghost{ background: transparent; color: var(--teal); }
.pill-btn.ghost-light{ background: transparent; color:#fff; border-color:#fff; }
.pill-btn:disabled{ opacity:.4; cursor:not-allowed; }
.pill-btn:focus-visible, .quiz-opt:focus-visible, .flip-card:focus-visible, input:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

.headline{ font-size: clamp(1.8rem, 5.2vw, 3.2rem); line-height:1.15; max-width: 20ch; }
.sub{ font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight:700; opacity:.85; max-width: 36ch; }
.stack{ display:flex; flex-direction:column; gap:1.2rem; align-items:center; max-width:640px; width:100%; position:relative; z-index:3; }
.row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; }
.eyebrow{ font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.75rem; color:var(--turquoise); }

.dots{ position:fixed; top:1.1rem; left:50%; transform:translateX(-50%); display:flex; gap:.4rem; z-index:50; flex-wrap:wrap; justify-content:center; max-width:90vw; }
.dots span{ width:7px; height:7px; border-radius:50%; background: rgba(15,76,92,.2); transition: all .3s; }
.dots span.on{ background: var(--turquoise); width:20px; border-radius:6px; }
@media(max-width:400px){ .dots span{ width:5px; height:5px; } .dots span.on{ width:14px; } }

.sticker{ position:absolute; font-size: 2rem; opacity:.85; animation: bob 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes bob{ 0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); } 50%{ transform: translateY(-14px) rotate(var(--r,0deg)); } }

.music-toggle{ position:fixed; top:1.1rem; right:1.1rem; z-index:60; width:44px; height:44px; border-radius:50%; border:3px solid var(--teal); background:#fff; font-size:1.15rem; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 3px 3px 0 rgba(15,76,92,.85); }

/* ============ AMBIENT PETALS ============ */
.ambient-petals{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.ambient-petal{ position:absolute; top:-40px; font-size:1.15rem; opacity:.45; will-change:transform; animation: petalDrift linear infinite; }
@keyframes petalDrift{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); }
  100%{ transform: translateY(115vh) translateX(var(--dx,20px)) rotate(360deg); }
}

/* ============ CURSOR SPARKLE / TOUCH BURST ============ */
.sparkle-dot{ position:fixed; z-index:90; width:6px; height:6px; border-radius:50%; background:var(--gold); pointer-events:none; opacity:.9; animation: sparkleFade .7s ease-out forwards; }
@keyframes sparkleFade{ to{ opacity:0; transform: translateY(-16px) scale(.3); } }
.touch-burst{ position:fixed; z-index:90; font-size:1.1rem; pointer-events:none; opacity:.95; animation: burstFade .6s ease-out forwards; }
@keyframes burstFade{ to{ opacity:0; transform: translateY(-24px) scale(1.4); } }

/* ============ ACHIEVEMENT TOAST ============ */
#achievementToast{
  position:fixed; top:66px; left:50%; z-index:150;
  transform:translate(-50%,-140%);
  background: var(--teal); color:#fff; font-weight:800; font-size:.9rem;
  padding:.65rem 1.2rem; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap;
}
#achievementToast.show{ transform:translate(-50%,0); }

/* ============ SIGNATURE TRANSITIONS ============ */
.curtain-panel{ position:fixed; top:0; width:52%; height:100%; background: var(--teal-deep); z-index:200; pointer-events:none; }
.curtain-left{ left:0; transform:translateX(-100%); }
.curtain-right{ right:0; transform:translateX(100%); }
.ripple-overlay{ position:fixed; inset:0; background: var(--teal-deep); z-index:200; pointer-events:none; clip-path: circle(0% at 50% 50%); }
.petal-burst-layer{ position:fixed; inset:0; z-index:130; pointer-events:none; overflow:hidden; }

/* ============ GALLERY ============ */
.gallery-grid{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; max-width:680px; }
.gallery-item{ width:135px; }
.gallery-frame{ width:135px; height:165px; border-radius:16px; border:4px solid #fff; box-shadow: var(--shadow-hard); overflow:hidden; background:#eee; transition: transform .25s ease; }
.gallery-item:hover .gallery-frame{ transform: translateY(-6px) rotate(-1deg); }
.gallery-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:2rem; background:#fff8; }
.gallery-cap{ font-family:'Caveat'; font-size:1.1rem; margin-top:.3rem; color:var(--teal); }

/* ============ FLIP CARDS ============ */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap:0.8rem; max-width:640px; width:100%; }
.flip-card{ perspective:1200px; height:140px; cursor:pointer; }
.flip-inner{ position:relative; width:100%; height:100%; transition: transform .7s cubic-bezier(.34,1.56,.64,1); transform-style:preserve-3d; }
.flip-card:hover .flip-inner{ transform: rotateY(8deg) scale(1.02); }
.flip-card.flipped .flip-inner{ transform: rotateY(180deg); }
.flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:18px; border:3px solid var(--teal); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; padding:.8rem; box-shadow: 4px 4px 0 rgba(15,76,92,.4); }
.flip-front{ background:#fff; font-size:2rem; }
.flip-front small{ font-size:.68rem; font-weight:800; color:var(--teal); opacity:.7; }
.flip-back{ background: var(--turquoise); color:#fff; transform: rotateY(180deg); font-weight:800; font-size: clamp(.78rem,2.2vw,.92rem); }

/* ============ QUIZ ============ */
.quiz-options{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; max-width:420px; width:100%; }
.quiz-opt{ font-weight:800; border:3px solid var(--teal); background:#fff; border-radius:14px; padding:.8rem; cursor:pointer; transition: all .2s; }
.quiz-opt:hover{ background: var(--rose); }
.quiz-opt.correct{ background: var(--turquoise); color:#fff; }
.quiz-opt.wrong{ background:#eee; opacity:.5; }
.quiz-feedback{ font-weight:800; min-height:1.6em; color: var(--teal); }

/* ============ FORTUNE / COMPLIMENT ============ */
.compliment-box{ background:#fff; border:3px solid var(--teal); border-radius:20px; padding:1.5rem; max-width:420px; width:100%; min-height:100px; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-hard); font-family:'Cormorant Garamond'; font-size:1.3rem; font-weight:700; color:var(--teal); transition:opacity .2s; }

/* ============ CLOCKS ============ */
.clock-row{ display:flex; gap:2rem; justify-content:center; }
.clock-col{ display:flex; flex-direction:column; gap:.2rem; align-items:center; }
.plane-fly{ font-size:2.2rem; animation: planeFly 6s ease-in-out infinite; }
@keyframes planeFly{ 0%,100%{ transform:translateX(-30px) rotate(-10deg); } 50%{ transform:translateX(30px) rotate(10deg); } }

/* ============ LOCK SCREEN ============ */
.lock-input{ font-weight:800; font-size:1.3rem; letter-spacing:.2rem; text-align:center; border:3px solid var(--teal); border-radius:14px; padding:.8rem 1.2rem; width:min(80vw,240px); background:#fff; color:var(--teal); }
.lock-input.shake{ animation: shake .45s; }
@keyframes shake{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(3px);} 30%,50%,70%{transform:translateX(-8px);} 40%,60%{transform:translateX(8px);} }
.lock-note{ position:relative; background:#fff; border:2px dashed var(--gold); border-radius:14px; padding:.8rem 1.1rem; font-family:'Caveat'; font-size:1.2rem; color:var(--teal); transform:rotate(-2deg); box-shadow: 3px 4px 8px rgba(0,0,0,.12); }
.lock-key{ font-size:2.6rem; animation: keyGlow 2.4s ease-in-out infinite; }
@keyframes keyGlow{ 0%,100%{ filter:drop-shadow(0 0 2px var(--gold)); transform:rotate(-4deg);} 50%{ filter:drop-shadow(0 0 12px var(--gold)); transform:rotate(4deg);} }

/* ============================================================
   MAGICAL LILIOM NIGHT GARDEN (preserved from original)
============================================================ */
:root { --lil-dark: #030818; --lil-pink1: #ff6eb4; --lil-pink2: #ffadd4; --lil-pink3: #ffe0f0; --lil-stem: #1a7a5e; --lil-leaf: #1fb87e; --lil-light1: #ff8fd4; --lil-light2: #39c6d6; }
.bouquet-stage { position:fixed !important; top:0 !important; left:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; padding:0 !important; margin:0 !important; overflow:hidden !important; background:#030818 !important; z-index:40; }
.bouquet-stage::before { display:none !important; }
.magic-garden { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:4vh 20px 3vh; box-sizing:border-box; overflow:hidden; z-index:2; }
.lil-night { position:absolute; top:0; left:0; width:100%; height:100%; background-image:radial-gradient(ellipse at top, transparent 0%, var(--lil-dark)), radial-gradient(ellipse at bottom, var(--lil-dark), rgba(145,233,255,.15)), repeating-linear-gradient(220deg, #000 0px, #000 19px, transparent 19px, transparent 22px), repeating-linear-gradient(189deg, #000 0px, #000 19px, transparent 19px, transparent 22px), repeating-linear-gradient(148deg, #000 0px, #000 19px, transparent 19px, transparent 22px), linear-gradient(90deg, #00fffa, #f0f0f0); filter:blur(.1vmin); pointer-events:none; z-index:1; }
.garden-title-overlay { position:relative; top:0; left:0; transform:none; text-align:center; z-index:50; width:100%; max-width:600px; margin-top:1vh; animation:garden-title-appear 1.2s 0.3s cubic-bezier(0.2,0.8,0.2,1) both; }
.garden-eyebrow { font-family:'Cormorant Garamond',serif; font-size:clamp(0.9rem,2.5vw,1.2rem); color:#ffadd4; letter-spacing:.2em; text-transform:uppercase; margin:0 0 .4rem; text-shadow:0 0 12px rgba(255,173,212,0.5); }
.garden-headline { font-family:'Cormorant Garamond',serif; font-weight:700; font-size:clamp(1.35rem,3.8vw,2.5rem); color:#fff; text-shadow:0 0 25px rgba(255,110,180,0.7),0 2px 10px rgba(0,0,0,0.8); margin:0; line-height:1.25; }
@keyframes garden-title-appear { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
.garden-btn-overlay { position:relative; bottom:0; left:0; transform:none; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; z-index:50; width:100%; max-width:520px; animation:garden-title-appear 1s 0.6s cubic-bezier(0.2,0.8,0.2,1) both; }
.garden-btn { border:none; cursor:pointer; font-family:'Nunito',sans-serif; font-size:clamp(0.88rem,2.2vw,1.05rem); font-weight:800; padding:13px 30px; border-radius:999px; transition:transform .2s ease,box-shadow .2s ease; white-space:nowrap; touch-action:manipulation; }
.garden-btn:hover{transform:scale(1.05)}
.garden-btn--primary{background:linear-gradient(135deg,#e8174b,#c0003c);color:#fff;box-shadow:0 4px 24px rgba(200,0,60,0.55)}
.garden-btn--ghost{background:rgba(20,20,30,0.75);color:#fff;border:1px solid rgba(255,255,255,0.3);backdrop-filter:blur(8px);box-shadow:0 4px 18px rgba(0,0,0,0.4)}
.liliom-scene{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;pointer-events:none}
.liliom-flowers{position:relative;transform:scale(0.9)}
.liliom{position:absolute;bottom:8vmin;transform-origin:bottom center;z-index:10;--fl-speed:0.8s}
.liliom--1{left:50%;transform:translateX(-50%);animation:lil-moving-1 4s linear infinite}
.liliom--2{left:62%;transform:rotate(20deg);animation:lil-moving-2 4s linear infinite}
.liliom--3{left:35%;transform:rotate(-18deg);animation:lil-moving-3 4s linear infinite}
@keyframes lil-moving-1{0%,100%{transform:translateX(-50%) rotate(2deg)}50%{transform:translateX(-50%) rotate(-2deg)}}
@keyframes lil-moving-2{0%,100%{transform:rotate(18deg)}50%{transform:rotate(14deg)}}
@keyframes lil-moving-3{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-20deg) rotateY(-10deg)}}
.liliom__leafs{position:relative;animation:lil-bloom 2s backwards}
.liliom__leafs--1{animation-delay:1.1s}
.liliom__leafs--2{animation-delay:1.4s}
.liliom__leafs--3{animation-delay:1.7s}
.liliom__leafs::after{content:'';position:absolute;left:0;top:0;transform:translate(-50%,-100%);width:8vmin;height:8vmin;background-color:#ff88cc;filter:blur(8vmin)}
@keyframes lil-bloom{0%{transform:scale(0)}}
.liliom__leaf{position:absolute;bottom:0;left:50%;width:7vmin;height:10vmin;border-radius:51% 49% 47% 53%/44% 45% 55% 69%;transform-origin:bottom center;opacity:.9;box-shadow:inset 0 0 2vmin rgba(255,255,255,.5)}
.liliom--1 .liliom__leaf,.liliom--2 .liliom__leaf,.liliom--3 .liliom__leaf{background-color:#ffadd4;background-image:linear-gradient(to top,#c0286a,#ffadd4)}
.liliom__leaf--1{transform:translate(-10%,1%) rotateY(40deg) rotateX(-50deg)}
.liliom__leaf--2{transform:translate(-50%,-4%) rotateX(40deg)}
.liliom__leaf--3{transform:translate(-90%,0%) rotateY(45deg) rotateX(50deg)}
.liliom__leaf--4{width:7vmin;height:7vmin;transform-origin:bottom left;border-radius:4vmin 10vmin 4vmin 4vmin;transform:translate(-0%,18%) rotateX(70deg) rotate(-43deg);background-image:linear-gradient(to top,#8b1a58,#ffadd4);z-index:1;opacity:.8}
.liliom__white-circle{position:absolute;left:-3vmin;top:-2.5vmin;width:8vmin;height:3.5vmin;border-radius:50%;background:#fff;box-shadow:0 0 6px #ffccee}
.liliom__white-circle::after{content:'';position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:60%;height:60%;border-radius:inherit;background:radial-gradient(circle,#ffee55,#ffc700)}
.liliom__line{height:50vmin;width:1.4vmin;background-image:linear-gradient(to left,rgba(0,0,0,.2),transparent,rgba(255,255,255,.2)),linear-gradient(to top,transparent 10%,var(--lil-stem),var(--lil-leaf));box-shadow:inset 0 0 2px rgba(0,0,0,.5);animation:lil-stem-grow 4s backwards}
.liliom--1 .liliom__line{height:65vmin}
.liliom--2 .liliom__line{height:54vmin;animation-delay:.4s}
.liliom--3 .liliom__line{animation-delay:.8s}
@keyframes lil-stem-grow{0%{height:0;border-radius:1vmin}}
.liliom__line__leaf{--w:6vmin;--h:calc(var(--w) + 2vmin);position:absolute;top:20%;left:90%;width:var(--w);height:var(--h);border-top-right-radius:var(--h);border-bottom-left-radius:var(--h);background-image:linear-gradient(to top,rgba(20,117,50,.4),var(--lil-leaf))}
.liliom__line__leaf--1{transform:rotate(70deg) rotateY(30deg);animation:lil-leaf-r var(--fl-speed) 1.6s backwards}
.liliom__line__leaf--2{top:45%;transform:rotate(70deg) rotateY(30deg);animation:lil-leaf-r var(--fl-speed) 1.4s backwards}
.liliom__line__leaf--3,.liliom__line__leaf--4,.liliom__line__leaf--6{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--h);border-bottom-right-radius:var(--h);left:-420%;top:12%;transform:rotate(-70deg) rotateY(30deg)}
.liliom__line__leaf--3{animation:lil-leaf-l var(--fl-speed) 1.2s backwards}
.liliom__line__leaf--4{top:40%;animation:lil-leaf-l var(--fl-speed) 1.0s backwards}
.liliom__line__leaf--5{top:0;transform-origin:left;transform:rotate(70deg) rotateY(30deg) scale(.6);animation:lil-leaf-r var(--fl-speed) 1.8s backwards}
.liliom__line__leaf--6{top:-2%;left:-410%;transform-origin:right;transform:rotate(-70deg) rotateY(30deg) scale(.6);animation:lil-leaf-l var(--fl-speed) 2.0s backwards}
@keyframes lil-leaf-r{0%{transform-origin:left;transform:rotate(70deg) rotateY(30deg) scale(0)}}
@keyframes lil-leaf-l{0%{transform-origin:right;transform:rotate(-70deg) rotateY(30deg) scale(0)}}
.liliom__light{position:absolute;bottom:0;width:.9vmin;height:.9vmin;background-color:#ffc8dc;border-radius:50%;filter:blur(.2vmin);animation:lil-light 4s linear infinite backwards}
.liliom__light:nth-child(odd){background-color:var(--lil-light2)}
.liliom__light--1{left:-2vmin;animation-delay:1s}
.liliom__light--2{left:3vmin;animation-delay:.5s}
.liliom__light--3{left:-5vmin;animation-delay:.3s}
.liliom__light--4{left:5vmin;animation-delay:.9s}
.liliom__light--5{left:-1vmin;animation-delay:1.5s}
.liliom__light--6{left:-4vmin;animation-delay:3s}
.liliom__light--7{left:3vmin;animation-delay:2s}
.liliom__light--8{left:-5vmin;animation-delay:3.5s}
@keyframes lil-light{0%{opacity:0;transform:translateY(0)}25%{opacity:1;transform:translateY(-5vmin) translateX(-2vmin)}50%{opacity:1;transform:translateY(-15vmin) translateX(2vmin);filter:blur(.2vmin)}75%{transform:translateY(-20vmin) translateX(-2vmin);filter:blur(.2vmin)}100%{transform:translateY(-30vmin);opacity:0;filter:blur(1vmin)}}
.lil-growing-grass{animation:lil-grow-grass 1s 2s backwards}
@keyframes lil-grow-grass{0%{transform:scale(0)}}
.lil-grass{--c:#1fb87e;--line-w:1.4vmin;position:absolute;bottom:10vmin;left:-6vmin;display:flex;flex-direction:column;align-items:flex-end;z-index:20;transform-origin:bottom center;transform:rotate(-48deg) rotateY(40deg)}
.lil-grass--1{animation:lil-grass-sway 2s linear infinite}
.lil-grass--2{left:3vmin;bottom:8vmin;transform:scale(.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);opacity:.8;z-index:0;animation:lil-grass-sway2 1.5s linear infinite}
@keyframes lil-grass-sway{0%,100%{transform:rotate(-48deg) rotateY(40deg)}50%{transform:rotate(-50deg) rotateY(40deg)}}
@keyframes lil-grass-sway2{0%,100%{transform:scale(.5) rotate(75deg) rotateX(10deg) rotateY(-200deg)}50%{transform:scale(.5) rotate(79deg) rotateX(10deg) rotateY(-200deg)}}
.lil-grass--top{width:6vmin;height:9vmin;border-top-right-radius:100%;border-right:var(--line-w) solid var(--c);transform-origin:bottom center;transform:rotate(-2deg)}
.lil-grass--bottom{margin-top:-2px;width:var(--line-w);height:22vmin;background-image:linear-gradient(to top,transparent,var(--c))}
.lil-grass__leaf{--size:9vmin;position:absolute;z-index:100;width:calc(var(--size)*2.1);height:var(--size);border-top-left-radius:var(--size);border-top-right-radius:var(--size);background-image:linear-gradient(to top,transparent,transparent 30%,var(--c))}
.lil-grass__leaf--1{top:-6%;left:30%;--size:5vmin;transform:rotate(-20deg);animation:lil-grass-l1 2s 2.6s backwards}
.lil-grass__leaf--2{top:-5%;left:-110%;--size:5vmin;transform:rotate(10deg);animation:lil-grass-l2 2s 2.4s linear backwards}
.lil-grass__leaf--3{top:5%;left:60%;--size:7vmin;transform:rotate(-18deg) rotateX(-20deg);animation:lil-grass-l1 2s 2.2s linear backwards}
.lil-grass__leaf--4{top:6%;left:-135%;--size:7vmin;transform:rotate(2deg);animation:lil-grass-l2 2s 2s linear backwards}
.lil-grass__leaf--5{top:20%;left:60%;--size:9vmin;transform:rotate(-24deg) rotateX(-20deg);animation:lil-grass-l1 2s 1.8s linear backwards}
.lil-grass__leaf--6{top:22%;left:-180%;--size:9vmin;transform:rotate(10deg);animation:lil-grass-l2 2s 1.6s linear backwards}
.lil-grass__leaf--7{top:39%;left:70%;--size:9vmin;transform:rotate(-10deg);animation:lil-grass-l1 2s 1.4s linear backwards}
.lil-grass__leaf--8{top:40%;left:-215%;--size:10vmin;transform:rotate(10deg);animation:lil-grass-l2 2s 1.2s linear backwards}
@keyframes lil-grass-l1{0%{transform-origin:bottom left;transform:rotate(-20deg) scale(0)}}
@keyframes lil-grass-l2{0%{transform-origin:bottom right;transform:rotate(10deg) scale(0)}}
.lil-grass__overlay{position:absolute;top:-10%;right:0;width:100%;height:100%;background:rgba(0,0,0,.55);filter:blur(1.5vmin);z-index:100}
.lil-g-long{--c:#1fb87e;position:absolute;bottom:8vmin;left:-2vmin;transform-origin:bottom center;transform:rotate(-30deg) rotateY(-20deg);display:flex;flex-direction:column;align-items:flex-end;animation:lil-g-long-sway 3s linear infinite}
@keyframes lil-g-long-sway{0%,100%{transform:rotate(-30deg) rotateY(-20deg)}50%{transform:rotate(-32deg) rotateY(-20deg)}}
.lil-g-long__top{width:3vmin;height:5vmin;border-top-right-radius:100%;border-right:.6vmin solid var(--c);transform:translate(-.6vmin,1vmin)}
.lil-g-long__bottom{width:1.8vmin;height:45vmin;transform-origin:bottom center;background-image:linear-gradient(to top,transparent 30%,var(--c));clip-path:polygon(35% 0,65% 1%,100% 100%,0% 100%)}
.lil-g-right{position:absolute;bottom:5vmin;left:-2vmin;transform-origin:bottom left;transform:rotate(20deg)}
.lil-g-right .lil-leaf{width:28vmin;height:45vmin;border-top-left-radius:100%;border-left:1.8vmin solid #0e8c78;background-image:linear-gradient(to bottom,transparent,var(--lil-dark) 60%);-webkit-mask-image:linear-gradient(to top,transparent 30%,#0e8c78 60%)}
.lil-g-right--1{animation:lil-gr1 2.5s linear infinite}
.lil-g-right--2{left:4vmin;transform:rotateY(-180deg);animation:lil-gr2 3s linear infinite}
.lil-g-right--2 .lil-leaf{height:70vmin;filter:blur(.3vmin);opacity:.8}
@keyframes lil-gr1{0%,100%{transform:rotate(20deg)}50%{transform:rotate(24deg) rotateX(-20deg)}}
@keyframes lil-gr2{0%,100%{transform:rotateY(-180deg) rotate(0deg) rotateX(-20deg)}50%{transform:rotateY(-180deg) rotate(6deg) rotateX(-20deg)}}
.lil-g-fr{position:absolute;bottom:-3vmin;left:1vmin;transform-origin:bottom left;z-index:10;animation:lil-gfr-sway 2s linear infinite}
@keyframes lil-gfr-sway{0%,100%{transform:rotate(2deg)}50%{transform:rotate(4deg)}}
.lil-g-fr .lil-leaf{width:28vmin;height:45vmin;border-top-left-radius:100%;border-left:1.8vmin solid #0e8c78;-webkit-mask-image:linear-gradient(to top,transparent 25%,#0e8c78 50%);position:relative;z-index:1}
.lil-g-fr__leaf{position:absolute;top:0;left:0;width:9vmin;height:9vmin;border-radius:100% 0 0 100%/100% 100% 0 0;background-image:linear-gradient(to bottom left,transparent,var(--lil-dark) 98%),linear-gradient(to bottom right,#23f0ff 45%,transparent 50%);-webkit-mask-image:linear-gradient(135deg,#1fb87e 40%,transparent 50%)}
.lil-g-fr__leaf--1{left:18vmin;transform:rotate(45deg);animation:lil-gfr-l1 .5s 5.2s linear backwards}
.lil-g-fr__leaf--2{left:10vmin;top:-6vmin;transform:rotate(25deg) rotateY(-180deg);animation:lil-gfr-l2 .5s 5s linear backwards}
.lil-g-fr__leaf--3{left:13vmin;top:5vmin;transform:rotate(55deg);animation:lil-gfr-l1 .5s 4.8s linear backwards}
.lil-g-fr__leaf--4{left:4vmin;top:-2vmin;transform:rotate(25deg) rotateY(-180deg);animation:lil-gfr-l2 .5s 4.6s linear backwards}
.lil-g-fr__leaf--5{left:8vmin;top:13vmin;transform:rotate(55deg);animation:lil-gfr-l1 .5s 4.4s linear backwards}
.lil-g-fr__leaf--6{left:0;top:5vmin;transform:rotate(25deg) rotateY(-180deg);animation:lil-gfr-l2 .5s 4.2s linear backwards}
.lil-g-fr__leaf--7{left:3vmin;top:20vmin;transform:rotate(45deg);animation:lil-gfr-l1 .5s 4s linear backwards}
.lil-g-fr__leaf--8{left:-3vmin;top:13vmin;transform:rotate(15deg) rotateY(-180deg);animation:lil-gfr-l2 .5s 3.8s linear backwards}
@keyframes lil-gfr-l1{0%{transform-origin:left;transform:rotate(45deg) scale(0)}}
@keyframes lil-gfr-l2{0%{transform-origin:right;transform:rotate(25deg) rotateY(-180deg) scale(0)}}
.lil-long-g{position:absolute;bottom:22vmin;left:-40vmin;transform-origin:bottom left}
.lil-long-g--1{bottom:0;transform:scale(.8) rotate(-5deg)}
.lil-long-g--2{bottom:-3vmin;left:-32vmin;transform-origin:center;transform:scale(.6) rotateX(60deg)}
.lil-long-g--3{left:-15vmin;bottom:0}
.lil-long-g--4{left:23vmin;bottom:-3vmin;transform-origin:center;transform:scale(.6) rotateX(60deg)}
.lil-long-g--5{left:40vmin;bottom:0;transform:scale(.8) rotate(2deg)}
.lil-leaf{--w:14vmin;--h:38vmin;--c:#1fb87e;position:absolute;bottom:0;width:var(--w);height:var(--h);border-top-left-radius:100%;border-left:1.8vmin solid var(--c);-webkit-mask-image:linear-gradient(to top,transparent 20%,var(--lil-dark));transform-origin:bottom center}
.lil-leaf--0{left:2vmin;animation:lil-l1 4s linear infinite}
.lil-leaf--1{--w:4vmin;--h:56vmin;animation:lil-l1 4s linear infinite}
.lil-leaf--2{--w:9vmin;--h:38vmin;left:-.5vmin;bottom:4vmin;transform-origin:bottom left;transform:rotateY(-180deg);animation:lil-l2 3s linear infinite}
.lil-leaf--3{--w:4vmin;--h:28vmin;left:-1vmin;bottom:3vmin;transform-origin:bottom left;transform:rotate(-10deg) rotateY(-180deg);animation:lil-l3 3s linear infinite}
@keyframes lil-l1{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}
@keyframes lil-l2{0%,100%{transform:rotateY(-180deg) rotate(5deg)}50%{transform:rotateY(-180deg) rotate(0deg) scale(1.1)}}
@keyframes lil-l3{0%,100%{transform:rotate(-10deg) rotateY(-180deg)}50%{transform:rotate(-20deg) rotateY(-180deg)}}
.lil-grow-ans{animation:lil-grow 2s var(--d) backwards}
@keyframes lil-grow{0%{transform:scale(0);opacity:0}}
.magic-garden.not-loaded *{animation-play-state:paused!important}

/* ============ TRICK YES/NO ============ */
.trick-box{ position:relative; width:min(90vw,420px); height:220px; border:3px dashed var(--teal); border-radius:20px; background:#fff8; overflow:hidden; touch-action:none; }
.trick-btn{ position:absolute; transition: top .2s cubic-bezier(.34,1.56,.64,1), left .2s cubic-bezier(.34,1.56,.64,1); }
.trick-progress{ font-size:.85rem; font-weight:700; opacity:.7; }

/* ============ FRIENDSHIP METER ============ */
.meter-scene{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.meter-emoji-wrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.meter-emoji{ font-size:4rem; transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .3s ease; display:inline-block; }
.meter-hearts{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); pointer-events:none; }
.meter-bubble{ background:var(--teal); color:#fff; padding:.5rem 1.2rem; border-radius:999px; font-weight:800; font-size:.9rem; transition:background .4s ease, transform .2s ease; transform-origin:bottom center; }
.meter-track-wrap{ display:flex; align-items:center; gap:.8rem; }
.meter-end-emoji{ font-size:1.5rem; }
input[type=range]{ width:min(70vw,280px); accent-color: var(--turquoise); height:8px; }
.meter-label{ font-weight:800; color:var(--teal); min-height:1.4em; }
@keyframes meterHeart { 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-40px) scale(.4);opacity:0} }
.meter-heart-fly { position:absolute; font-size:1.2rem; animation:meterHeart .9s ease-out forwards; pointer-events:none; }

/* ============ SLINGSHOT BASKETBALL ============ */
.sling-arena { position:absolute; inset:0; display:flex; flex-direction:column; }
#gameCanvas { width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; }
.sling-ui { position:absolute; inset:0; pointer-events:none; }
.sling-hud { position:absolute; top:12px; left:50%; transform:translateX(-50%); background:rgba(10,52,63,.75); color:#fff; padding:.4rem 1.1rem; border-radius:999px; font-weight:800; font-size:.88rem; display:flex; gap:1.4rem; }
.sling-hint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); color:#DFF6F1; font-size:.76rem; font-weight:700; text-align:center; width:90%; opacity:.9; }
.sling-continue{ position:absolute; bottom:60px; left:50%; transform:translateX(-50%); z-index:10; padding:.55rem 1.4rem; font-size:.9rem; white-space:nowrap; }
.stage-fullbleed{ padding:0; align-items:stretch; justify-content:stretch; }
.stage-fullbleed::before{ display:none; }
.bball-wrap{ position:relative; width:100%; height:100%; overflow:hidden; background:linear-gradient(180deg,#123B47,#0A343F); }
.bball-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bball-msg-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; text-align:center; padding:6vh 6vw; background:rgba(10,52,63,.55); opacity:0; pointer-events:none; transition:opacity .5s ease; }
.bball-msg-overlay.show{ opacity:1; pointer-events:auto; }
.bball-msg-text{ color:#fff; font-family:'Cormorant Garamond'; font-weight:700; font-size:clamp(1.3rem,3.4vw,1.9rem); max-width:26ch; }
.bball-celebration{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; padding:6vh 6vw; background:linear-gradient(180deg,#0F4C5C,#0A343F); color:#fff; }
.bball-celebration .sub{ color:#DFF6F1; }

/* ============ PUZZLE ============ */
.puzzle-board{ display:grid; grid-template-columns: repeat(3, 1fr); gap:5px; width: min(92vw, 420px); aspect-ratio:1; border:5px solid var(--teal); border-radius:14px; overflow:hidden; box-shadow: var(--shadow-hard); }
.puzzle-piece{ background-image: url('assets/puzzle.jpg'); background-size:300% 300%; cursor:pointer; transition: outline .15s, transform .15s; outline: 3px solid transparent; outline-offset:-3px; }
.puzzle-piece.selected{ outline: 4px solid var(--gold); transform:scale(.94); }
@media (min-width:900px){ .puzzle-board{ width:min(46vw, 460px); } }

/* ============ ENVELOPES ============ */
.env-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap:.9rem; width:100%; max-width:520px; }
.env-card{ background:#fff; border:3px solid var(--teal); border-radius:16px; padding:1rem .6rem; cursor:pointer; box-shadow: 4px 4px 0 rgba(15,76,92,.4); font-weight:800; font-size:.88rem; color:var(--teal); transition: transform .2s; }
.env-card:hover{ transform: translateY(-3px); }
.env-card:active{ transform: scale(.96); }

/* ============ LOADER ============ */
.loader-bar{ width:min(80vw,240px); height:6px; background:rgba(15,76,92,.2); border-radius:99px; overflow:hidden; }
.loader-fill{ height:100%; width:0%; background:var(--turquoise); border-radius:99px; transition:width .4s ease; }

/* ============ FINAL LETTER ============ */
.letter{ background:#fff; border:3px solid var(--teal); border-radius:20px; padding: 1.8rem; max-width:520px; box-shadow: var(--shadow-hard); font-size: clamp(1.05rem,2.6vw,1.3rem); line-height:1.6; text-align:left; }
.firefly{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 2px var(--gold); opacity:0; animation: fireflyPulse 3.2s ease-in-out infinite; }
@keyframes fireflyPulse{ 0%,100%{ opacity:0; transform:translateY(0);} 50%{ opacity:.9; transform:translateY(-18px);} }

footer.credit{ position:fixed; bottom: .5rem; left:0; right:0; text-align:center; font-size:.72rem; font-weight:800; color: var(--teal); opacity:.5; z-index:40; pointer-events:none; }
.heartbeat{ display:inline-block; animation: beat 1.1s ease-in-out infinite; }
@keyframes beat{ 0%,100%{ transform:scale(1);} 25%{ transform:scale(1.2);} 40%{ transform:scale(1);} 60%{ transform:scale(1.1);} }

.egg{ position:fixed; font-size:1.6rem; cursor:pointer; opacity:.85; z-index:45; }
.egg-msg{ position:fixed; z-index:70; background:var(--teal); color:#fff; padding:.6rem 1rem; border-radius:14px; font-weight:700; font-size:.85rem; max-width:220px; opacity:0; transform:translateY(8px); transition:all .3s; pointer-events:none; }
.egg-msg.show{ opacity:1; transform:translateY(0); }
#nameFlowers{ position:fixed; inset:0; pointer-events:none; z-index:80; }

/* ===== NEW STAGES: SUNRISE ===== */
.stage-sunrise{ background:linear-gradient(180deg,#0a1628 0%,#1a3a52 40%,#2a5a72 100%); color:#fff; }
.stage-sunrise::before{ border-color:rgba(255,200,100,0.3); }
.sunrise-arena{ position:relative; width:min(90vw,360px); height:320px; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#0f1f3a 0%,#1e4a6e 60%,#2d6a8f 100%); box-shadow:0 20px 60px rgba(0,0,0,.4); touch-action:none; }
.sunrise-sky{ position:absolute; inset:0; }
.sunrise-sun{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:80px; height:80px; background:radial-gradient(circle at 35% 35%,#ffeaa7,#fdcb6e,#e17055); border-radius:50%; box-shadow:0 0 40px rgba(253,203,110,.6),0 0 80px rgba(253,203,110,.3); cursor:grab; touch-action:none; z-index:10; transition:box-shadow .3s; }
.sunrise-sun.active{ cursor:grabbing; }
.sun-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.2rem; opacity:0; transition:opacity .3s; }
.sunrise-sun.risen .sun-face{ opacity:1; }
.sunrise-rays{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:0; height:0; opacity:0; transition:all 1s ease; pointer-events:none; }
.sunrise-rays.show{ width:360px; height:360px; opacity:1; }
.sunrise-rays::before,.sunrise-rays::after{ content:''; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(255,200,100,0.12) 0deg 8deg,transparent 8deg 16deg); animation:sunRotate 20s linear infinite; }
@keyframes sunRotate{ to{transform:rotate(360deg)} }
.sunrise-horizon{ position:absolute; bottom:0; left:0; right:0; height:90px; background:linear-gradient(180deg,transparent,#1a3c2f 40%,#0f2e1f 100%); }
.sunrise-city{ position:absolute; bottom:20px; left:0; right:0; height:40px; background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.4)); }
.sunrise-city::after{ content:'🏙️'; position:absolute; bottom:0; left:10%; font-size:1.8rem; opacity:.4; }
.sunrise-city::before{ content:'🏘️'; position:absolute; bottom:0; right:15%; font-size:1.4rem; opacity:.3; }
.sunrise-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 100%,rgba(255,200,100,0.3),transparent 70%); opacity:0; transition:opacity 1.5s; pointer-events:none; }
.sunrise-glow.show{ opacity:1; }
.sunrise-birds{ position:absolute; inset:0; pointer-events:none; }
.sunrise-bird{ position:absolute; font-size:1.2rem; opacity:0; animation:birdFly 8s linear infinite; }
@keyframes birdFly{ 0%{transform:translateX(-20px) translateY(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateX(420px) translateY(-30px);opacity:0} }

/* ===== NEW STAGES: CAT CAFE ===== */
.cat-scene{ width:min(90vw,340px); }
.cat-room{ position:relative; background:#f8e8d8; border-radius:24px; padding:20px 20px 10px; box-shadow:var(--shadow-hard); border:3px solid var(--teal); min-height:260px; }
.cat-window{ position:absolute; top:12px; right:16px; width:60px; height:40px; background:#b3d9ff; border-radius:8px; border:3px solid #a0b8c8; overflow:hidden; }
.cat-sun{ position:absolute; top:4px; right:4px; width:12px; height:12px; background:#ffd93d; border-radius:50%; box-shadow:0 0 10px #ffd93d; }
.cat-cloud{ position:absolute; top:8px; left:6px; width:20px; height:10px; background:rgba(255,255,255,.7); border-radius:99px; }
.cat-cloud::after{ content:''; position:absolute; top:-4px; left:6px; width:12px; height:12px; background:rgba(255,255,255,.7); border-radius:50%; }
.cat-bed{ position:absolute; bottom:10px; right:16px; width:50px; height:16px; background:#b8a0c8; border-radius:99px; opacity:.4; }
.cat{ position:relative; width:120px; height:140px; margin:10px auto; cursor:pointer; touch-action:manipulation; transition:transform .15s ease; }
.cat:active{ transform:scale(.95); }
.cat-head{ position:relative; width:80px; height:70px; background:#f8a0b8; border-radius:50% 50% 40% 40%; margin:0 auto; box-shadow:inset -8px -8px 20px rgba(180,60,100,.3); }
.cat-ear{ position:absolute; top:-10px; width:20px; height:22px; background:#f8a0b8; border-radius:50% 50% 0 50%; transform:rotate(-20deg); }
.cat-ear.left{ left:4px; }
.cat-ear.right{ right:4px; transform:rotate(20deg) scaleX(-1); }
.cat-ear::after{ content:''; position:absolute; top:4px; left:4px; width:12px; height:14px; background:#ffb6c9; border-radius:50% 50% 0 50%; }
.cat-eye{ position:absolute; top:20px; width:16px; height:18px; background:#fff; border-radius:50%; }
.cat-eye.left{ left:14px; }
.cat-eye.right{ right:14px; }
.cat-pupil{ width:8px; height:12px; background:#2d1b0a; border-radius:50%; margin:3px auto; transition:height .2s; }
.cat:active .cat-pupil{ height:4px; }
.cat-nose{ position:absolute; top:36px; left:50%; transform:translateX(-50%); width:8px; height:6px; background:#ff8a9c; border-radius:50%; }
.cat-mouth{ position:absolute; top:42px; left:50%; transform:translateX(-50%); width:12px; height:6px; border-bottom:2px solid #b86a7a; border-radius:0 0 50% 50%; }
.cat-body{ width:70px; height:50px; background:#f8a0b8; border-radius:50% 50% 40% 40%; margin:-10px auto 0; box-shadow:inset 0 -8px 20px rgba(180,60,100,.2); }
.cat-tail{ position:absolute; bottom:0; right:-10px; width:10px; height:40px; background:#f8a0b8; border-radius:0 0 50% 50%; transform-origin:bottom; transform:rotate(20deg); transition:transform .3s; }
.cat:active .cat-tail{ transform:rotate(-20deg); }
.cat-paw{ position:absolute; bottom:-6px; width:18px; height:12px; background:#f8a0b8; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.1); }
.cat-paw.left{ left:20px; }
.cat-paw.right{ right:20px; }
.cat-paw::after{ content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:6px; height:4px; background:#ffb6c9; border-radius:50%; }
.cat-hearts{ position:absolute; inset:0; pointer-events:none; }
.cat-heart{ position:absolute; font-size:1.4rem; animation:heartFloat 1.2s ease-out forwards; }
@keyframes heartFloat{ 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-80px) scale(0.5);opacity:0} }
.cat-purr{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-size:1.6rem; opacity:0; transition:all .3s; }
.cat-purr.active{ opacity:1; animation:purrPulse .4s ease-in-out infinite alternate; }
@keyframes purrPulse{ 0%{transform:translateX(-50%) scale(1)} 100%{transform:translateX(-50%) scale(1.1)} }
.cat-counter{ font-weight:800; font-size:1rem; color:var(--teal); margin-top:6px; }

/* ===== NEW STAGES: 20/20 EXAM ===== */
.exam-paper{ background:#fdfaf0; border:4px solid #3d2b1f; border-radius:16px; padding:18px 16px; max-width:400px; width:100%; box-shadow:var(--shadow-hard); font-family:'Cormorant Garamond',serif; position:relative; transition:transform .4s ease; }
.exam-paper.crumple{ animation:crumple .6s ease forwards; }
@keyframes crumple{ 0%{transform:scale(1) rotate(0)} 30%{transform:scale(.9) rotate(-4deg)} 60%{transform:scale(.85) rotate(6deg)} 100%{transform:scale(.3) rotate(10deg);opacity:0} }
.exam-header{ display:flex; justify-content:space-between; font-weight:600; font-size:.8rem; color:#5a4a3a; border-bottom:2px dashed #d4c8b0; padding-bottom:6px; margin-bottom:10px; }
.exam-score{ font-size:2rem; font-weight:800; text-align:center; color:var(--teal); font-family:'Nunito',sans-serif; }
.exam-question{ font-size:1.1rem; font-weight:700; margin:12px 0; min-height:2.4em; color:#1e1e1e; }
.exam-options{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.exam-opt{ border:2px solid #3d2b1f; background:#fff; border-radius:12px; padding:10px; font-weight:700; cursor:pointer; transition:all .2s; touch-action:manipulation; }
.exam-opt:active{ transform:scale(.94); }
.exam-opt.correct{ background:#2ecc71; color:#fff; border-color:#2ecc71; }
.exam-opt.wrong{ background:#e74c3c; color:#fff; border-color:#e74c3c; }
.exam-mark{ text-align:center; font-size:3rem; min-height:3rem; margin-top:6px; }
#examFeedback{ min-height:2.2em; }

/* ===== NEW STAGES: SPAIN DREAM ===== */
.stage-spain{ background:linear-gradient(180deg,#fdf0e0 0%,#f4d4b8 60%,#e8c4a0 100%); }
.stage-spain::before{ border-color:rgba(200,120,60,0.3); }
.spain-scene{ position:relative; width:min(90vw,360px); height:300px; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#87CEEB 0%,#f4d4b8 70%,#e8c4a0 100%); box-shadow:var(--shadow-hard); border:3px solid var(--teal); }
.spain-sky{ position:absolute; inset:0; }
.spain-sun{ position:absolute; top:12px; right:20px; width:30px; height:30px; background:#ffd93d; border-radius:50%; box-shadow:0 0 30px #ffd93d; }
.spain-clouds{ position:absolute; top:20px; left:10px; width:60px; height:20px; background:rgba(255,255,255,.7); border-radius:99px; animation:cloudMove 12s linear infinite; }
.spain-clouds::after{ content:''; position:absolute; top:-10px; left:15px; width:30px; height:30px; background:rgba(255,255,255,.7); border-radius:50%; }
@keyframes cloudMove{ 0%{transform:translateX(0)} 50%{transform:translateX(40px)} 100%{transform:translateX(0)} }
.spain-landmark{ position:absolute; bottom:40px; left:50%; transform:translateX(-50%); }
.sagrada{ width:40px; height:60px; background:#d4a373; border-radius:4px 4px 0 0; position:relative; }
.sagrada::before{ content:''; position:absolute; top:-20px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:25px solid transparent; border-right:25px solid transparent; border-bottom:25px solid #d4a373; }
.sagrada::after{ content:''; position:absolute; top:6px; left:4px; width:8px; height:12px; background:#e9c46a; border-radius:2px; box-shadow:12px 0 0 #e9c46a, 6px 16px 0 #e9c46a, 18px 16px 0 #e9c46a; }
.spain-suitcase{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:70px; height:50px; background:#8B4513; border-radius:8px 8px 4px 4px; box-shadow:0 4px 10px rgba(0,0,0,.3); transition:all .5s ease; z-index:5; }
.suitcase-lid{ position:absolute; top:-12px; left:4px; width:62px; height:14px; background:#7a3b10; border-radius:4px 4px 0 0; transition:transform .5s ease; transform-origin:bottom; }
.suitcase-lid.open{ transform:rotateX(-100deg); }
.suitcase-body{ position:absolute; inset:6px 4px; background:#6b340e; border-radius:2px; }
.suitcase-items{ position:absolute; inset:0; display:flex; flex-wrap:wrap; gap:2px; padding:4px; align-content:flex-start; }
.suitcase-item{ font-size:1rem; background:rgba(255,255,255,.8); border-radius:4px; padding:0 4px; line-height:1.4; }
.spain-items-float{ position:absolute; inset:0; pointer-events:none; z-index:10; }
.spain-float-item{ position:absolute; font-size:1.8rem; cursor:pointer; pointer-events:auto; animation:floatItem 4s ease-in-out infinite; touch-action:manipulation; transition:transform .3s; }
.spain-float-item:active{ transform:scale(1.3); }
@keyframes floatItem{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(8deg)} }
.spain-postcard{ position:absolute; inset:10%; background:rgba(255,248,235,.95); border-radius:16px; border:4px solid #d4a373; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; box-shadow:0 8px 30px rgba(0,0,0,.3); z-index:20; opacity:0; transform:scale(.8); transition:all .6s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.spain-postcard.show{ opacity:1; transform:scale(1); pointer-events:auto; }
.spain-postcard h3{ font-family:'Caveat'; font-size:1.6rem; color:#8B4513; }
.spain-postcard p{ font-size:.9rem; color:#5a3a2a; }

/* ===== NEW STAGES: TURKISH MELODY ===== */
.stage-melody{ background:linear-gradient(180deg,#1a1040 0%,#2d1b69 40%,#4a2d7a 100%); color:#fff; }
.stage-melody::before{ border-color:rgba(180,140,220,0.3); }
.melody-scene{ position:relative; width:min(90vw,360px); height:280px; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#0d0a20,#1a0f40); box-shadow:0 20px 60px rgba(0,0,0,.6); border:2px solid rgba(180,140,220,.3); }
.melody-disc{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; background:radial-gradient(circle at 30% 30%,#333,#111); border-radius:50%; box-shadow:0 0 0 6px #2a1a4a,0 0 30px rgba(180,140,220,.3); animation:spinDisc 4s linear infinite; }
@keyframes spinDisc{ to{transform:translate(-50%,-50%) rotate(360deg)} }
.disc-label{ position:absolute; inset:20%; background:radial-gradient(circle at 30% 30%,#f8a0b8,#c0607a); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:800; color:#fff; text-align:center; line-height:1.2; font-family:'Nunito',sans-serif; }
.melody-arm{ position:absolute; top:10px; right:20px; width:40px; height:4px; background:linear-gradient(90deg,#888,#ccc); transform-origin:right center; transform:rotate(-20deg); border-radius:2px; }
.melody-arm::after{ content:''; position:absolute; right:-4px; top:-4px; width:10px; height:10px; background:#ccc; border-radius:50%; }
.melody-waves{ position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:4px; height:40px; align-items:flex-end; padding:0 12px; }
.melody-bar{ width:6px; background:linear-gradient(to top,#b8a9d4,#d4af37); border-radius:4px; transition:height .15s ease; }
.melody-lyric{ position:absolute; bottom:70px; left:50%; transform:translateX(-50%); font-family:'Caveat',cursive; font-size:1.1rem; color:#d4af37; text-shadow:0 0 20px rgba(212,175,55,.3); text-align:center; width:80%; opacity:.7; transition:opacity .5s; }
.melody-notes{ position:absolute; inset:0; pointer-events:none; }
.melody-note{ position:absolute; font-size:1.6rem; cursor:pointer; pointer-events:auto; animation:noteFloat 5s linear infinite; touch-action:manipulation; transition:transform .2s; }
.melody-note:active{ transform:scale(1.4); }
@keyframes noteFloat{ 0%{transform:translateY(0) rotate(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-120px) rotate(20deg);opacity:0} }
.melody-note-popped{ animation:notePop .4s ease forwards; }
@keyframes notePop{ 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }

/* ============ RESPONSIVE TWEAKS ============ */
@media(max-width:480px){
  .gallery-item{ width:110px; }
  .gallery-frame{ width:110px; height:140px; }
  .card-grid{ grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
  .flip-card{ height:110px; }
  .exam-options{ grid-template-columns:1fr; }
  .spain-scene{ height:240px; }
  .melody-scene{ height:220px; }
}

/* ===== NEW BASKETBALL GAME STYLES ===== */
.sling-hud .swish-progress {
  background: rgba(255,215,0,0.2);
  padding: 0 10px;
  border-radius: 99px;
  font-weight: 800;
}
.sling-hud .swish-progress b {
  color: #ffd93d;
}

/* Power Meter */
.power-meter-wrap {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 100px;
  background: rgba(0,0,0,0.4);
  border-radius: 99px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.power-meter-wrap.show {
  opacity: 1;
}
.power-meter-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, #ffd93d, #ff6b6b);
  border-radius: 99px;
  transition: height 0.05s linear;
}

/* Hoop glow when aiming */
.hoop-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.3), transparent 70%);
  width: 80px;
  height: 80px;
  top: calc(28% - 40px);
  left: calc(82% - 40px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}
.hoop-glow.active {
  opacity: 1;
}

/* Defender speech bubble */
.defender-bubble {
  position: absolute;
  top: 10%;
  left: 10%;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(-10px);
  z-index: 10;
  white-space: nowrap;
}
.defender-bubble.show {
  opacity: 1;
  transform: translateY(0);
}

/* Celebration overlay for 3 swishes */
.bball-win-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(10,52,63,0.7);
  backdrop-filter: blur(4px);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.bball-win-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.bball-win-overlay h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  color: #ffd93d;
  text-shadow: 0 0 30px rgba(255,215,0,0.5);
}
.bball-win-overlay p {
  color: #fff;
  font-size: 1.2rem;
}

/* ============ EDIT VIDEO STAGE ============ */
/* Wrap fills the fixed-positioned stage absolutely, works on all devices incl. iOS Safari */
.edit-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.edit-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  /* iOS Safari: force hardware acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* Transition overlay: puzzle image fades in on top of video at end */
.edit-video-transition {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.edit-video-transition.show {
  opacity: 1;
}
.edit-transition-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Mobile tap-to-play overlay */
.edit-tap-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0,0,0,0.55);
  opacity: 1;
  transition: opacity 0.5s ease;
  cursor: pointer;
}
.edit-tap-overlay.hide {
  opacity: 0;
  pointer-events: none;
}
.edit-tap-icon {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.15);
  border: 3px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  transition: transform 0.2s;
}
.edit-tap-overlay:active .edit-tap-icon {
  transform: scale(0.9);
}
.edit-tap-text {
  color: rgba(255,255,255,0.85);
  font-weight: 800;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
  letter-spacing: 0.05em;
}
/* Skip button for edit video */
.edit-skip-btn {
  position: absolute;
  bottom: 24px;
  right: 20px;
  z-index: 10;
  padding: .5rem 1.2rem;
  font-size: .88rem;
}
@media(max-width:480px) {
  .edit-tap-icon { width: 66px; height: 66px; font-size: 1.8rem; }
  .edit-skip-btn { bottom: 16px; right: 12px; }
}