/* =====================================================================
 *  style.css — giao diện & hoạt ảnh (tối ưu cho cả PC lẫn điện thoại)
 * ===================================================================== */
:root {
  --cyan: #00ffff;
  --font: 'Times New Roman', Times, 'Liberation Serif', 'Noto Serif', serif;
  --script: 'Times New Roman', Times, 'Liberation Serif', 'Noto Serif', serif;
  /* Mắt: 160px trên PC, 100px trên điện thoại, tự co theo chiều cao màn hình */
  --eye: clamp(60px, min(26.7vw, 19vh), 160px);
  --gk: .75;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 600px) { :root { --gk: .5; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--font);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* overflow: clip — khung không thể bị cuộn lệch (kể cả khi trình duyệt tự cuộn tới nút) */
#stage { position: fixed; inset: 0; overflow: hidden; overflow: clip; cursor: pointer; isolation: isolate; background: #000; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--font); color: #9ff; }

/* ---------------------------------------------------------------
 *  Nền từng cảnh
 * --------------------------------------------------------------- */
#bg, #bg .bg, #bg .flash { position: absolute; inset: 0; pointer-events: none; }
#bg { z-index: 0; --art-h: 88vh; }
#bg .bg { opacity: 0; transition: opacity 1.4s ease-in-out; }
#bg .bg.on { opacity: 1; }
.bg[data-bg="pink"] {
  background: linear-gradient(135deg, rgba(255, 105, 180, .4) 0%, rgba(255, 20, 147, .1) 30%, transparent 70%);
  transition-duration: 3s !important;
}
.bg[data-bg="want"] { background: radial-gradient(ellipse 90% 50% at 50% 100%, rgba(20, 44, 96, .28), transparent 70%); }
.bg[data-bg="health"] {
  background:
    linear-gradient(to right, rgba(16, 30, 73, .55) 0%, rgba(12, 22, 62, .34) 4%, rgba(7, 12, 34, .16) 11%, transparent 22%),
    radial-gradient(ellipse at bottom, rgba(50, 27, 53, .35) 0%, rgba(9, 10, 15, .06) 100%);
}
.bg[data-bg="beauty"] {
  background:
    radial-gradient(ellipse 55vw 45vh at 50% 51%, rgba(116, 74, 156, .14) 0%, rgba(37, 21, 63, .12) 56%, transparent 95%),
    radial-gradient(circle at 5% 80%, rgba(248, 153, 202, .17), transparent 43%),
    radial-gradient(circle at 95% 74%, rgba(160, 130, 236, .17), transparent 44%),
    radial-gradient(ellipse at bottom, rgba(50, 27, 53, .35) 0%, rgba(9, 10, 15, .06) 100%);
}
.bg[data-bg="smile"] {
  background:
    radial-gradient(ellipse 48vw 42vh at 50% 54%, rgba(255, 209, 150, .12), transparent 80%),
    radial-gradient(circle at 9% 77%, rgba(255, 174, 180, .18), transparent 49%),
    radial-gradient(circle at 91% 77%, rgba(150, 205, 255, .16), transparent 48%),
    radial-gradient(ellipse at bottom, rgba(50, 27, 53, .35) 0%, rgba(9, 10, 15, .06) 100%);
}
.bg[data-bg="clover"] {
  background:
    radial-gradient(circle at 50% 52%, rgba(126, 255, 146, .19) 0%, rgba(87, 236, 109, .12) 18%, rgba(28, 72, 34, .1) 42%, transparent 72%),
    radial-gradient(circle at 18% 78%, rgba(74, 255, 136, .12), transparent 45%),
    radial-gradient(circle at 82% 24%, rgba(157, 255, 187, .1), transparent 40%);
}
.bg[data-bg="luck"] { background: linear-gradient(90deg, #092515 0%, #06180d 25%, #020805 65%, #010403 100%); }
.bg[data-bg="question"] { background: radial-gradient(circle at 50% 22%, rgba(56, 155, 255, .16) 0%, rgba(21, 85, 180, .09) 22%, transparent 62%); }
.bg[data-bg="final"] {
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(255, 90, 160, .35), transparent 70%),
    radial-gradient(90% 70% at 50% 0%, rgba(120, 80, 255, .18), transparent 70%),
    linear-gradient(#0c0616, #05030a);
}
/* Ánh vàng lóe từ đáy (cảnh 20/10) và ánh xanh thay dần (cảnh "nên là tớ muốn") */
.flash { opacity: 0; z-index: 3; }
.flash-gold {
  background: linear-gradient(to top, rgba(255, 207, 83, .52) 0%, rgba(255, 210, 93, .32) calc(var(--art-h) * .16), rgba(255, 222, 132, .13) calc(var(--art-h) * .29), rgba(255, 229, 153, 0) calc(var(--art-h) * .43));
  transition: opacity 1.7s ease-in-out;
}
.flash-gold.on { opacity: 1; transition: opacity .55s ease-out; }
.flash-blue {
  background: linear-gradient(to top, rgba(47, 136, 245, .64) 0%, rgba(83, 176, 251, .4) calc(var(--art-h) * .34), rgba(133, 206, 255, .14) calc(var(--art-h) * .54), transparent calc(var(--art-h) * .75));
  transition: opacity 1.4s ease-in-out;
}
.flash-blue.on { opacity: 1; }
@media (max-width: 600px) and (orientation: portrait) { #bg { --art-h: 56vh; } }

#fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }

/* ---------------------------------------------------------------
 *  Lớp trang trí chung
 * --------------------------------------------------------------- */
#decor { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.decor {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.decor.on { opacity: 1; visibility: visible; transition: opacity 1.1s ease, visibility 0s; }
.decor:not(.on) * { animation-play-state: paused !important; }
.decor svg { overflow: visible; }
.decor .pop { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s); }
.decor.on .pop { transform: scale(1); }
.art-wrap { position: absolute; pointer-events: none; }
.art-wrap img, .art-wrap > svg { display: block; width: auto; object-fit: contain; object-position: right bottom; -webkit-user-drag: none; }
.art .ln { fill: none; stroke: #f6f2ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; }
.art .ln.ghost { opacity: .35; stroke-width: 1; }
.art .ln.faint { opacity: .4; }
.decor.on .art .ln { animation: draw 2.6s cubic-bezier(.45, .05, .3, 1) var(--d, 0s) forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shimmer { 0% { opacity: .22; transform: scale(.75) rotate(-8deg); } 100% { opacity: 1; transform: scale(1.25) rotate(8deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heartPop { 0% { opacity: 0; transform: scale(.2); } 75% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.13); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 60% { transform: scale(1); } }

.glint { position: absolute; line-height: 1; color: #fff4dd; text-shadow: 0 0 14px rgba(255, 219, 172, .65); animation: shimmer 2.3s ease-in-out var(--d, 0s) infinite alternate; }
.glint.blue { color: #e6f4ff; text-shadow: 0 0 12px rgba(120, 190, 255, .8); }

/* Bướm vẽ nét */
.butterfly { position: absolute; opacity: 0; }
.decor.on .butterfly { animation: floatButterfly 5s ease-in-out 1.2s infinite, appear 1s 1s both; }
.butterfly svg { width: 100%; display: block; filter: drop-shadow(0 0 10px rgba(255, 211, 244, .22)); }
.butterfly .wings { transform-origin: 50% 55%; transform-box: fill-box; animation: wingFlap .85s ease-in-out infinite alternate; }
.butterfly .wings path { fill: rgba(255, 215, 245, .14); stroke: #f6c8ff; stroke-width: 2.2; stroke-linejoin: round; }
.butterfly .body { fill: none; stroke: #ffe6ff; stroke-width: 2.6; stroke-linecap: round; }
@keyframes wingFlap { from { transform: scaleX(.82); } to { transform: scaleX(1.08); } }
@keyframes appear { from { opacity: 0; } to { opacity: .92; } }
@keyframes floatButterfly { 0%, 100% { transform: translate(0, 0) rotate(-5deg); } 45% { transform: translate(21px, -30px) rotate(8deg); } 75% { transform: translate(6px, -16px) rotate(0deg); } }

/* ---------- "cho tớ xin tiền mua ghế": ghế phác thảo nét trắng ---------- */
.d-chair .chair-glow {
  position: absolute; right: 2vw; bottom: -10vh; width: min(52vw, 640px); height: 90vh; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 210, 120, .14), rgba(255, 190, 90, .05) 50%, transparent 72%);
  filter: blur(10px);
}
.d-chair .chair-art {
  right: 9vw; bottom: 4vh; opacity: 0;
  clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0);
  transition: opacity 1.2s ease .3s, clip-path 2.6s cubic-bezier(.45, .05, .3, 1) .3s, -webkit-clip-path 2.6s cubic-bezier(.45, .05, .3, 1) .3s;
  filter: drop-shadow(0 0 2px rgba(110, 60, 0, .8)) drop-shadow(0 0 8px rgba(255, 200, 60, .5));
}
.d-chair.on .chair-art { opacity: 1; clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
.d-chair .chair-art img { height: 82vh; max-width: 46vw; animation: chairFloat 5s ease-in-out 3s infinite; }
@keyframes chairFloat { 0%, 100% { transform: translateY(0) rotate(0deg); filter: brightness(1); } 50% { transform: translateY(-8px) rotate(-.6deg); filter: brightness(1.12); } }
.d-chair .cash { position: absolute; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 215, 120, .55)); animation: shimmer 2.4s ease-in-out var(--d) infinite alternate; }
@media (max-width: 600px) and (orientation: portrait) {
  .d-chair .chair-glow { left: 50%; right: auto; translate: -50% 0; width: 110vw; height: 60vh; bottom: -8vh; }
  .d-chair .chair-art { right: auto; left: 50%; translate: -50% 0; bottom: 3vh; }
  .d-chair .chair-art img { height: 50vh; max-width: 86vw; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .d-chair .chair-art { right: 7vw; bottom: 3vh; }
  .d-chair .chair-art img { height: 90vh; }
}

/* ---------- 20/10: hai cô gái áo dài + đồng cỏ hoa ---------- */
.d-date { --art-h: 88vh; }
.d-date .date-art {
  right: 2vw; bottom: 0; opacity: 0; transform: translateY(24px);
  transition: opacity 3s ease-in-out .8s, transform 3s ease-out .8s;
  filter: drop-shadow(0 0 2px rgba(110, 60, 0, .8)) drop-shadow(0 0 8px rgba(255, 200, 60, .5));
}
.d-date .date-art img, .d-date .date-art > svg { height: var(--art-h); max-width: var(--art-w, 62vw); }
.d-date.on .date-art { opacity: 1; transform: none; }
.d-date .date-art .ln { stroke: #fff4dc; }
.d-date .meadow {
  position: absolute; left: 0; bottom: 0; overflow: visible; opacity: 0;
  transition: opacity 2s ease-in-out .6s;
  filter: drop-shadow(0 0 2px rgba(110, 60, 0, .8)) drop-shadow(0 0 8px rgba(255, 200, 60, .4));
}
.d-date.on .meadow { opacity: 1; }
.meadow .blade { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.meadow .net { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.d-date.on .meadow .net { animation: draw 3s ease-out var(--d, 0s) forwards; }
.meadow .lac { animation: gio 3.4s ease-in-out infinite alternate; }
@keyframes gio { from { transform: rotate(calc(var(--a, 2deg) * -1)); } to { transform: rotate(var(--a, 2deg)); } }
@media (max-width: 600px) and (orientation: portrait) {
  .d-date { --art-h: 56vh; --art-w: 84vw; }
  .d-date .date-art { right: -2vw; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .d-date { --art-h: 94vh; --art-w: 58vw; }
}
@media (max-width: 600px) {
  .d-date .meadow { filter: drop-shadow(0 0 2px rgba(255, 201, 92, .35)); }
}
.lite .d-date .meadow { filter: none; }

/* ---------- "nên là tớ muốn": pha lê, chòm sao ---------- */
.d-want .orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(160, 205, 255, .13); }
.d-want .o1 { width: 80vmax; height: 80vmax; right: -52vmax; top: -50vmax; }
.d-want .o2 { width: 70vmax; height: 70vmax; left: -46vmax; bottom: -42vmax; }
.d-want .constel { position: absolute; width: min(42vw, 320px); }
.d-want .constel path { fill: none; stroke: rgba(190, 225, 255, .5); stroke-width: 1.3; stroke-dasharray: 2 6; stroke-linecap: round; animation: dashFlow 24s linear infinite; }
.d-want .constel circle { fill: #e6f6ff; filter: drop-shadow(0 0 4px #9fd2ff); }
.d-want .constel.a { left: -3vw; top: 26%; }
.d-want .constel.b { right: -3vw; bottom: 18%; transform: scaleX(-1) rotate(8deg); }
@keyframes dashFlow { to { stroke-dashoffset: -200; } }
.d-want .aurora { position: absolute; left: -10%; right: -10%; bottom: -12%; height: 46%; background: radial-gradient(ellipse at 50% 100%, rgba(70, 140, 255, .18), transparent 70%); filter: blur(14px); }
.d-want .ribbons { position: absolute; left: 0; bottom: calc(var(--safe-b) + 2vh); width: 100%; height: 26vh; }
.d-want .ribbons path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 340 120; animation: dashFlow 18s linear infinite; }
.d-want .r1 { stroke: rgba(160, 210, 255, .35); }
.d-want .r2 { stroke: rgba(190, 170, 255, .25); animation-duration: 26s !important; }
.d-want .r3 { stroke: rgba(150, 240, 255, .22); animation-direction: reverse !important; }
.d-want .oracle {
  position: absolute; left: 50%; bottom: calc(var(--safe-b) + 11vh);
  width: clamp(110px, 22vmin, 220px); aspect-ratio: 1; translate: -50% 0;
  animation: float 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(110, 190, 255, .55));
}
.d-want .oracle svg { width: 100%; height: 100%; }
.oracle .o-outer { fill: none; stroke: rgba(170, 220, 255, .65); stroke-width: 1.8; stroke-dasharray: 1 8; stroke-linecap: round; transform-origin: 110px 110px; animation: spin 40s linear infinite; }
.oracle .o-orbit { fill: none; stroke: rgba(175, 228, 255, .6); stroke-width: 1.3; }
.oracle .o-orbit.two { stroke: rgba(175, 228, 255, .38); }
.oracle .o-glass { fill: url(#gGlass); stroke: rgba(220, 250, 255, .8); stroke-width: 1.5; }
.oracle .o-light { fill: url(#gLight); transform-origin: 110px 110px; animation: oracleGlow 2.8s ease-in-out infinite; }
.oracle .o-spark { fill: #fff; animation: oracleGlow 2s ease-in-out infinite; }
@keyframes oracleGlow { 50% { opacity: .55; transform: scale(.92); } }
.d-want .mini { position: absolute; color: #cfe8ff; text-shadow: 0 0 8px #9fd2ff; animation: shimmer 2.6s ease-in-out infinite alternate; }
.d-want .mini.a { left: 26%; bottom: 6%; font-size: 18px; }
.d-want .mini.b { right: 16%; top: 34%; font-size: 12px; animation-delay: -1s; }
.d-want .mini.c { left: 10%; top: 18%; font-size: 14px; animation-delay: -1.8s; }

/* ---------- sức khỏe: cô gái ôm trái tim ---------- */
.d-health .red-glow {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 68vw 76vh at 90% 55%, rgba(255, 72, 76, .38) 0%, rgba(255, 64, 70, .29) 12%, rgba(245, 48, 60, .21) 26%, rgba(225, 36, 50, .14) 44%, rgba(205, 22, 38, .08) 62%, rgba(185, 12, 28, 0) 100%);
}
.d-health .health-art {
  left: var(--hx, 78%); bottom: 0; transform: translateX(-50%) scale(.97); transform-origin: 50% 100%;
  opacity: 0; transition: opacity 1.7s ease-in-out, transform 5s ease-out;
}
.d-health .health-art img, .d-health .health-art > svg { height: var(--hh, 86vh); max-width: 70vw; object-position: center bottom; }
.d-health.on .health-art { opacity: .97; transform: translateX(-50%) scale(1.03); }
.health-art .heart-pulse {
  position: absolute; left: 53%; top: 62.5%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 40, 60, .55), rgba(255, 30, 60, .18) 45%, transparent 70%);
  mix-blend-mode: screen; animation: beat 1.15s ease-in-out infinite;
}
.health-art.is-svg .heart-pulse { left: 50%; top: 87%; }
.health-art .red-heart { transform-box: fill-box; transform-origin: center; animation: beat 1.15s ease-in-out infinite; }
.d-health .h-ring {
  position: absolute; left: 4%; top: 64%; width: clamp(60px, 12vmin, 110px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 140, 170, .2); box-shadow: inset 0 0 22px rgba(255, 100, 140, .1), 0 0 18px rgba(255, 100, 140, .08);
  display: grid; place-items: center;
}
.d-health .h-ring svg { width: 52%; fill: rgba(255, 120, 150, .16); stroke: rgba(255, 175, 195, .75); stroke-width: 3; animation: beat 1.15s ease-in-out infinite; }
.d-health .h-ecg { position: absolute; left: 3vw; bottom: calc(var(--safe-b) + 12vh); width: min(46vw, 420px); height: clamp(40px, 8vh, 80px); }
.h-ecg path { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.h-ecg .base { stroke: rgba(255, 160, 180, .38); stroke-width: 1.4; }
.h-ecg .pulse { stroke: #ffb0c4; stroke-width: 2.4; stroke-dasharray: .16 1.2; animation: ecg 2.3s linear infinite; filter: drop-shadow(0 0 5px #ff4d7d); }
@keyframes ecg { from { stroke-dashoffset: .16; } to { stroke-dashoffset: -1.04; } }
.d-health .birds { position: absolute; left: 14%; top: 27%; width: min(32vw, 220px); fill: none; stroke: rgba(225, 228, 255, .55); stroke-width: 1.6; stroke-linecap: round; animation: float 6s ease-in-out infinite; }
.d-health .butterfly { width: clamp(28px, 5vmin, 46px); }
.d-health .hb1 { left: 9%; top: 45%; }
.d-health .hb2 { left: 38%; top: 54%; }
.d-health .speck {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background: #ffd7de; box-shadow: 0 0 6px rgba(255, 170, 190, .8);
  animation: speck var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes speck { from { opacity: .15; transform: translateY(6px); } to { opacity: .9; transform: translateY(-10px); } }
@media (max-width: 600px) {
  .d-health .red-glow { background: radial-gradient(ellipse 82vw 48vh at 80% 72%, rgba(255, 72, 76, .36) 0%, rgba(255, 64, 70, .26) 14%, rgba(240, 44, 58, .18) 32%, rgba(210, 26, 42, .1) 56%, rgba(185, 12, 28, 0) 100%); }
  .d-health .health-art { --hx: 68%; --hh: 56vh; }
  .d-health .h-ecg { width: 52vw; bottom: calc(var(--safe-b) + 11vh); }
}

/* ---------- xinh đẹp: vòng sáng, cành hoa, bướm ---------- */
.d-beauty .ring {
  position: absolute; left: 50%; top: 52%; width: min(70vw, 770px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(249, 202, 239, .22);
  box-shadow: 0 0 48px rgba(230, 153, 224, .095), inset 0 0 54px rgba(225, 150, 231, .07);
  transform: translate(-50%, -50%) scale(.85); opacity: 0;
  transition: transform 1.8s var(--ease), opacity 1.5s ease;
}
.d-beauty.on .ring { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.d-beauty .ring::before, .d-beauty .ring::after {
  content: '✧'; position: absolute; color: rgba(255, 231, 187, .92); font-size: 28px;
  text-shadow: 0 0 16px rgba(255, 216, 161, .65); animation: shimmer 2.8s ease-in-out infinite alternate;
}
.d-beauty .ring::before { left: 12%; top: 15%; }
.d-beauty .ring::after { right: 10%; bottom: 16%; animation-delay: 1.1s; }
.d-beauty .w-floral { position: absolute; bottom: -12px; width: min(32vw, 390px); height: min(83vh, 720px); }
.d-beauty .w-floral.left { left: -15px; }
.d-beauty .w-floral.right { right: -15px; }
.d-beauty .w-floral svg { display: block; width: 100%; height: 100%; }
.w-branch { fill: none; stroke: var(--tint); stroke-width: 1.7; opacity: .75; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.d-beauty.on .w-branch { animation: draw 2s var(--ease) var(--d) both; }
.w-bloom { opacity: 0; transform: scale(.12) rotate(-22deg); transform-origin: 0 0; }
.d-beauty.on .w-bloom { animation: flowerOpen 1s cubic-bezier(.16, 1, .3, 1) var(--d) forwards; }
.w-bloom ellipse { fill: rgba(245, 192, 232, .13); stroke: var(--tint); stroke-width: 1.65; }
.w-core { fill: #ffe6a8; }
.w-leaf { stroke: #a4d8cb; stroke-width: 1.6; fill: rgba(126, 224, 190, .07); opacity: 0; transform-box: fill-box; transform-origin: center; }
.d-beauty.on .w-leaf { animation: leafIn .85s cubic-bezier(.16, 1, .3, 1) var(--d) forwards; }
@keyframes flowerOpen { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes leafIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.d-beauty .big-lotus { position: absolute; width: min(26vw, 210px); fill: none; stroke: rgba(240, 205, 255, .42); stroke-width: 1.3; filter: drop-shadow(0 0 6px rgba(230, 170, 255, .4)); animation: spin 60s linear infinite; }
.d-beauty .big-lotus.l { left: -9vw; top: 28%; }
.d-beauty .big-lotus.r { right: -9vw; top: 60%; animation-direction: reverse; }
.d-beauty .hill { position: absolute; left: 14%; width: 72%; bottom: 0; height: 21vh; }
.d-beauty .hill .rim { fill: none; stroke: rgba(240, 196, 255, .55); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(213, 140, 255, .8)); }
.d-beauty .butterfly { width: clamp(65px, 8vw, 115px); }
.d-beauty .bl { left: 13%; top: 36%; }
.d-beauty .br { right: 13%; top: 27%; }
.d-beauty.on .br { animation-delay: 1.8s, 1.3s; }
.d-beauty .b-petal { position: absolute; top: 0; line-height: 1; opacity: .85; text-shadow: 0 0 8px currentColor; animation: petalFall var(--t) linear var(--d) infinite; }
@keyframes petalFall { from { transform: translate(0, -8vh) rotate(0deg); } to { transform: translate(var(--drift), 108vh) rotate(360deg); } }
@media (max-width: 600px) {
  .d-beauty .w-floral { width: 39vw; height: 58vh; bottom: -14px; }
  .d-beauty .w-floral.left { left: -24px; }
  .d-beauty .w-floral.right { right: -24px; }
  .d-beauty .ring { width: 95vw; top: 50%; }
  .d-beauty .butterfly { width: 55px; }
  .d-beauty .bl { left: 5%; top: 32%; }
  .d-beauty .br { right: 3%; top: 37%; }
  .d-beauty .hill { left: 0; width: 100%; height: 17vh; }
}

/* ---------- nụ cười: nàng tiên cá, đĩa than, hoa ---------- */
.d-smile .warm-halo {
  position: absolute; left: 50%; top: 56%; width: min(76vw, 780px); height: min(65vh, 580px); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 224, 167, .11) 0%, rgba(255, 187, 205, .055) 48%, transparent 77%);
  animation: breatheWarm 5s ease-in-out infinite alternate;
}
@keyframes breatheWarm { from { opacity: .7; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
/* Quầng sáng xanh dương nhạt mờ sau lưng nhân vật */
.d-smile .smile-aura {
  position: absolute; right: -7vw; bottom: -14vh; width: min(56vw, 680px); height: min(96vh, 760px); border-radius: 50%;
  background:
    radial-gradient(ellipse 47% 50% at 56% 57%, rgba(150, 208, 255, .32), rgba(120, 180, 255, .1) 52%, transparent 88%),
    radial-gradient(ellipse 51% 65% at 60% 64%, rgba(140, 190, 255, .14), transparent 85%);
  filter: blur(14px); opacity: 0; transform: scale(.83);
  transition: opacity 1.8s ease, transform 3s var(--ease);
}
.d-smile.on .smile-aura { opacity: 1; transform: scale(1); }
.d-smile.no-art .smile-aura { display: none; }
.d-smile .smile-art {
  right: 6vw; bottom: -1.8vh; z-index: 2; opacity: 0;
  transform: translate3d(16px, 22px, 0) scale(.95); transform-origin: bottom right;
  transition: opacity 1.15s ease-out .14s, transform 1.65s cubic-bezier(.2, 1, .25, 1);
  filter: drop-shadow(0 0 22px rgba(140, 200, 255, .28));
}
.d-smile .smile-art img {
  height: min(79vh, 780px); max-width: 46vw; object-position: center bottom; animation: mermaid 6s ease-in-out infinite;
  /* làm mờ mép trái của phần nền biển trong ảnh */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%);
  mask-image: linear-gradient(to right, transparent 0%, #000 20%);
}
.d-smile.on .smile-art { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
@keyframes mermaid { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(.6deg); } }
.d-smile .ornament { position: absolute; width: min(29vw, 300px); height: min(45vh, 410px); bottom: 4%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d-smile .ornament.left { left: 3%; }
.d-smile .ornament.right { right: 3%; transform: scaleX(-1); }
.d-smile:not(.no-art) .ornament.right { display: none; }
.ornament .trail { stroke: rgba(255, 222, 176, .63); stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.d-smile.on .ornament .trail { animation: draw 1.7s ease-out .22s forwards; }
.ornament .o-heart { fill: rgba(255, 184, 197, .14); stroke: #ffc4d1; stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.ornament .o-star { stroke: #ffe7b9; stroke-width: 2.4; transform-box: fill-box; transform-origin: center; opacity: 0; }
.d-smile.on .ornament .o-heart { animation: heartPop 1.2s .5s both; }
.d-smile.on .ornament .o-heart.sm { animation-delay: .8s; }
.d-smile.on .ornament .o-star { animation: heartPop .8s 1.1s both; }
.d-smile .f-heart { position: absolute; line-height: 1; color: #ffccd8; text-shadow: 0 0 12px rgba(255, 177, 202, .64); animation: floatHeart 4.8s ease-in-out var(--d) infinite alternate; }
@keyframes floatHeart { from { opacity: .23; transform: translateY(13px) rotate(-15deg) scale(.8); } to { opacity: .94; transform: translateY(-26px) rotate(12deg) scale(1.05); } }
.d-smile .vinyl {
  position: absolute; left: 21vw; bottom: calc(var(--safe-b) + 16vh); width: clamp(76px, 14vmin, 150px); aspect-ratio: 1;
  filter: drop-shadow(0 0 14px rgba(255, 140, 190, .35));
}
.d-smile .vinyl svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-smile .disc { animation: spin 3.6s linear infinite; }
.d-smile .tonearm { transform-origin: 186px 20px; animation: arm 2.4s ease-in-out infinite; }
@keyframes arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
.d-smile .polaroid {
  position: absolute; left: 4vw; top: 30vh; z-index: 3;
  width: clamp(100px, 16vmin, 180px); padding: 7px 7px 0; background: #fffaf6; border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 160, 200, .25);
  transform-origin: 50% -10%; animation: swing 5s ease-in-out infinite;
}
.d-smile .polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.d-smile .polaroid figcaption { font-family: var(--script); color: #b0476f; text-align: center; font-size: clamp(12px, 2vmin, 18px); padding: 5px 2px 7px; }
@keyframes swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-1deg); } }

/* Hoa hồng phấn mọc lên (CSS) */
.kflowers { position: absolute; right: 1vw; bottom: 0; width: min(20vw, 250px); height: min(46vh, 430px); z-index: 1; }
.kf { position: absolute; bottom: 0; transform-origin: 50% 100%; }
.kf.k1 { left: 22%; --h: 78%; animation: sway1 4s ease-in-out infinite alternate; }
.kf.k2 { left: 52%; --h: 60%; animation: sway2 4.7s ease-in-out infinite alternate; }
.kf.k3 { left: 80%; --h: 68%; animation: sway3 4.2s ease-in-out infinite alternate; }
.kflowers .kf { height: 100%; }
@keyframes sway1 { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes sway2 { from { transform: rotate(8deg); } to { transform: rotate(15deg); } }
@keyframes sway3 { from { transform: rotate(-14deg); } to { transform: rotate(-6deg); } }
.kf-stem {
  position: absolute; bottom: 0; left: 0; width: max(4px, 1.1vmin); height: var(--h); translate: -50% 0; border-radius: 4px;
  background: linear-gradient(to left, rgba(0, 0, 0, .2), transparent, rgba(255, 255, 255, .2)), linear-gradient(to top, transparent 6%, #8d2f66, #ff8fc8);
  transform-origin: 50% 100%; transform: scaleY(0);
}
.d-smile.on .kf-stem { animation: grow 2.4s cubic-bezier(.2, .8, .2, 1) .3s forwards; }
.kf.k2 .kf-stem { animation-delay: .55s !important; }
.kf.k3 .kf-stem { animation-delay: .75s !important; }
@keyframes grow { to { transform: scaleY(1); } }
.kf-stem .lf {
  position: absolute; width: max(18px, 5.5vmin); height: max(24px, 7.5vmin); left: 90%; top: 30%;
  border-top-right-radius: 100%; border-bottom-left-radius: 100%;
  background: linear-gradient(to top, rgba(140, 40, 100, .45), #ff9fd0);
  transform-origin: 0 100%; transform: rotate(70deg) scale(0);
}
.kf-stem .lf:nth-child(2) { left: auto; right: 90%; top: 52%; transform-origin: 100% 100%; border-radius: 0; border-top-left-radius: 100%; border-bottom-right-radius: 100%; transform: rotate(-70deg) scale(0); }
.kf-stem .lf:nth-child(3) { top: 12%; }
.d-smile.on .kf-stem .lf { animation: leafR .7s ease-out 1.8s forwards; }
.d-smile.on .kf-stem .lf:nth-child(2) { animation-name: leafL; animation-delay: 2s; }
.d-smile.on .kf-stem .lf:nth-child(3) { animation-delay: 2.2s; }
@keyframes leafR { to { transform: rotate(70deg) scale(.75); } }
@keyframes leafL { to { transform: rotate(-70deg) scale(.75); } }
.kf-head { position: absolute; left: 0; bottom: var(--h); width: 0; height: 0; transform: scale(0); }
.d-smile.on .kf-head { animation: bloom 1.6s cubic-bezier(.3, 1.3, .5, 1) 2.2s forwards; }
.kf.k2 .kf-head { animation-delay: 2.5s !important; }
.kf.k3 .kf-head { animation-delay: 2.8s !important; }
@keyframes bloom { to { transform: scale(1); } }
.kf-head .pt {
  position: absolute; bottom: 0; left: 0; width: max(22px, 6.5vmin); height: max(30px, 9vmin);
  border-radius: 51% 49% 47% 53% / 44% 45% 55% 69%;
  background: linear-gradient(to top, #d9468f, #ffd3ea); box-shadow: inset 0 0 2vmin rgba(255, 255, 255, .5);
  transform-origin: 50% 100%; opacity: .92;
}
.kf-head .p1 { transform: translateX(-50%) rotate(-38deg); }
.kf-head .p2 { transform: translateX(-50%) rotate(-12deg) scale(.95); }
.kf-head .p3 { transform: translateX(-50%) rotate(12deg) scale(.95); }
.kf-head .p4 { transform: translateX(-50%) rotate(38deg); }
.kf-head .ctr {
  position: absolute; left: 0; bottom: max(22px, 6.6vmin); width: max(24px, 7.5vmin); height: max(10px, 3.2vmin);
  translate: -50% 0; border-radius: 50%; background: #fff;
}
.kf-head .ctr::after { content: ''; position: absolute; left: 50%; top: 45%; width: 60%; height: 60%; translate: -50% -50%; border-radius: 50%; background: linear-gradient(90deg, #ffeb12, #ffce00); }
.kf-head::after { content: ''; position: absolute; left: 0; bottom: max(26px, 8vmin); width: max(26px, 8vmin); aspect-ratio: 1; translate: -50% 50%; border-radius: 50%; background: #ff9fd6; filter: blur(max(12px, 4vmin)); opacity: .7; }
.kf-head .lights i { position: absolute; bottom: 30px; width: 6px; height: 6px; border-radius: 50%; background: #fffb8a; filter: blur(1px); opacity: 0; animation: lightUp 3.8s linear infinite; }
.kf-head .lights i:nth-child(odd) { background: #ffb3e0; }
.kf-head .lights i:nth-child(1) { left: -14px; animation-delay: 1s; }
.kf-head .lights i:nth-child(2) { left: 10px; animation-delay: .5s; }
.kf-head .lights i:nth-child(3) { left: -22px; animation-delay: .3s; }
.kf-head .lights i:nth-child(4) { left: 20px; animation-delay: .9s; }
.kf-head .lights i:nth-child(5) { left: -4px; animation-delay: 1.5s; }
.kf-head .lights i:nth-child(6) { left: 4px; animation-delay: 2.6s; }
@keyframes lightUp { 0%, 100% { opacity: 0; transform: translate(0, 0) scale(.7); } 35% { opacity: .9; } 75% { opacity: .35; transform: translate(26px, -60px) scale(1.2); } }
@media (max-width: 600px) {
  .d-smile .smile-aura { right: -24vw; bottom: -10vh; width: 100vw; height: 64vh; }
  .d-smile .smile-art { right: -4vw; }
  .d-smile .smile-art img { height: 50vh; max-width: 66vw; }
  .d-smile .vinyl { left: 7vw; bottom: calc(var(--safe-b) + 24vh); width: 64px; }
  .d-smile .ornament { width: 33vw; height: 38vh; bottom: 9%; }
  .kflowers { width: 26vw; height: 30vh; right: -2vw; }
  .d-smile .polaroid { top: 26vh; }
}

/* ---------- cỏ 4 lá ---------- */
.d-clover .space-glow {
  position: absolute; inset: -12%;
  background:
    radial-gradient(circle at 50% 52%, rgba(90, 255, 125, .22) 0%, rgba(90, 255, 125, .15) 10%, rgba(38, 115, 49, .09) 32%, transparent 62%),
    radial-gradient(circle at 50% 52%, rgba(168, 255, 178, .13) 0%, transparent 38%);
  animation: cloverSpace 5.8s ease-in-out infinite alternate;
}
.d-clover .halo {
  position: absolute; left: 50%; top: 57%; width: min(72vw, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 255, 160, .2) 0%, rgba(91, 228, 111, .11) 28%, rgba(38, 112, 51, .05) 50%, transparent 72%);
  filter: blur(8px); animation: cloverBreath 4.9s ease-in-out infinite alternate;
}
.d-clover .aura-ring {
  position: absolute; left: 50%; top: 57%; width: min(46vw, 470px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(182, 255, 189, .18); box-shadow: 0 0 28px rgba(111, 255, 138, .16), inset 0 0 32px rgba(111, 255, 138, .08);
  animation: cloverRing 3.6s ease-in-out infinite alternate; transition: opacity .8s ease;
}
@keyframes cloverSpace { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.03); } }
@keyframes cloverBreath { from { opacity: .72; transform: translate(-50%, -50%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } }
@keyframes cloverRing { from { opacity: .45; transform: translate(-50%, -50%) scale(.92); } to { opacity: .95; transform: translate(-50%, -50%) scale(1.04); } }
.d-clover .lucky-clover {
  position: absolute; left: 50%; top: 57%; width: min(29vw, 320px); height: auto;
  transform: translate(-50%, -50%) scale(.82); opacity: 0;
  filter: drop-shadow(0 0 18px rgba(104, 255, 128, .45)) drop-shadow(0 0 44px rgba(86, 224, 109, .2));
  transition: opacity 1.1s ease .18s, transform 1.3s var(--ease) .12s, left 1.3s var(--ease), top 1.3s var(--ease);
}
.d-clover.on .lucky-clover { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.c-stem { fill: none; stroke: #69f18a; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(105, 241, 138, .36)); }
.c-leaf { fill: url(#gLeaf); stroke: rgba(226, 255, 232, .58); stroke-width: 2.6; transform-box: fill-box; transform-origin: center; animation: leafPulse 3.1s ease-in-out infinite; }
.c-leaf.l2 { animation-delay: .35s; }
.c-leaf.l3 { animation-delay: .7s; }
.c-leaf.l4 { animation-delay: 1.05s; }
.c-shine { fill: none; stroke: rgba(236, 255, 240, .42); stroke-width: 2.1; stroke-linecap: round; }
.c-core { fill: #ecffef; opacity: .95; }
@keyframes leafPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.045) rotate(1.2deg); } }
.d-clover .c-speck { position: absolute; line-height: 1; color: #c7ffd0; text-shadow: 0 0 12px rgba(151, 255, 173, .86), 0 0 26px rgba(104, 255, 128, .34); animation: shimmer 2.4s ease-in-out var(--d) infinite alternate; transition: opacity .6s; }
/* "nè cầm lấy đi": cỏ 4 lá bay tới cạnh mắt phải của Tiny */
#stage[data-scene="take"] .d-clover .lucky-clover {
  left: calc(50% + var(--eye) * 1.75); top: calc(49% + var(--eye) * .5);
  transform: translate(-50%, -50%) scale(.45);
}
#stage[data-scene="take"] .d-clover .aura-ring, #stage[data-scene="take"] .d-clover .c-speck { opacity: 0; }
@media (max-width: 600px) {
  .d-clover .lucky-clover { width: min(58vw, 255px); top: 58%; }
  .d-clover .halo { width: 84vw; top: 58%; }
  .d-clover .aura-ring { width: 58vw; top: 58%; }
  #stage[data-scene="take"] .d-clover .lucky-clover { left: calc(50% + var(--eye) * 1.5); top: calc(50% - 9vh + var(--eye)); transform: translate(-50%, -50%) scale(.5); }
}

/* ---------- may mắn: tia sáng xanh từ cạnh trái ---------- */
.d-luck .ambient {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 76% 78% at 0% 48%, rgba(116, 255, 161, .53) 0%, rgba(48, 193, 97, .26) 35%, rgba(8, 56, 26, .11) 67%, transparent 94%),
    linear-gradient(90deg, rgba(66, 236, 121, .2) 0%, rgba(25, 123, 58, .08) 40%, transparent 74%);
}
.d-luck .rays {
  position: absolute; left: -4%; top: -12%; width: 94%; height: 125%;
  background:
    radial-gradient(ellipse 46% 65% at 0% 48%, rgba(206, 255, 221, .52), rgba(99, 255, 151, .29) 30%, transparent 85%),
    conic-gradient(from -72deg at 0% 49%, transparent 0deg 7deg, rgba(152, 255, 190, .21) 12deg, transparent 21deg 27deg, rgba(188, 255, 209, .33) 32deg, transparent 42deg 48deg, rgba(108, 255, 168, .22) 54deg, transparent 66deg 72deg, rgba(153, 255, 184, .26) 78deg, transparent 90deg 360deg);
  filter: blur(8px); mix-blend-mode: screen; opacity: 0; transform: translateX(-16px);
  transition: opacity 1.8s ease, transform 1.8s ease;
}
.d-luck.on .rays { opacity: 1; transform: none; animation: rayBreath 6s ease-in-out 1.8s infinite alternate; }
@keyframes rayBreath { from { opacity: 1; } to { opacity: .72; } }
.d-luck .bg-clover {
  position: absolute; left: 75%; top: 63%; width: min(23vw, 240px); transform: translate(-50%, -50%) rotate(-14deg);
  opacity: 0; transition: opacity 1.5s ease .3s;
  filter: drop-shadow(0 0 14px rgba(110, 255, 162, .54)) drop-shadow(0 0 38px rgba(58, 237, 118, .32));
}
.d-luck.on .bg-clover { opacity: .45; }
.d-luck .bg-clover .c-stem { stroke: #8dffab; }
.d-luck .bg-clover .c-leaf { fill: url(#gLeafBg); }
@media (max-width: 600px) {
  .d-luck .bg-clover { left: 61%; top: 74%; width: min(53vw, 222px); }
  .d-luck.on .bg-clover { opacity: .55; }
}

/* ---------- câu hỏi: ánh xanh từ trên xuống ---------- */
.d-question .q-haze { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(55, 132, 255, .1) 0%, rgba(23, 49, 110, .05) 24%, transparent 60%); }
.d-question .q-glow {
  position: absolute; left: 50%; top: 21%; width: min(96vw, 1120px); height: min(76vh, 700px); border-radius: 50%;
  transform: translate(-50%, -50%) scale(.68); opacity: 0;
  background: radial-gradient(ellipse at center, rgba(196, 235, 255, .58) 0%, rgba(113, 195, 255, .38) 14%, rgba(56, 132, 255, .24) 28%, rgba(18, 69, 185, .12) 45%, transparent 72%);
  filter: blur(26px); transition: opacity 1.08s ease .7s, transform 1.08s var(--ease) .7s;
}
.d-question.on .q-glow { opacity: .85; transform: translate(-50%, -50%) scale(1); }
.d-question .q-rays {
  position: absolute; inset: -8%; opacity: 0; transform: scale(1.08);
  background:
    radial-gradient(circle at 50% 10%, rgba(210, 240, 255, .22) 0%, transparent 24%),
    conic-gradient(from 258deg at 50% 10%, transparent 0deg 17deg, rgba(108, 198, 255, .22) 22deg, transparent 33deg 42deg, rgba(57, 140, 255, .2) 48deg, transparent 58deg 64deg, rgba(129, 214, 255, .18) 69deg, transparent 80deg 360deg);
  filter: blur(15px); transition: opacity 1.2s ease .7s, transform 1.2s ease .7s;
}
.d-question.on .q-rays { opacity: .96; transform: scale(1); }
.d-question .q-star {
  position: absolute; right: 12%; top: calc(var(--safe-t) + 9vh); font-size: clamp(22px, 4vmin, 40px);
  color: #fff6d0; text-shadow: 0 0 10px #ffd27a, 0 0 26px rgba(255, 200, 100, .8);
  animation: shimmer 3s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------------
 *  Robot Tiny
 * --------------------------------------------------------------- */
#tiny {
  position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts, 1));
  transition: transform 1.5s cubic-bezier(.2, .8, .2, 1);
}
.tiny-eyes { display: flex; align-items: center; gap: calc(var(--eye) * var(--gk)); }
.eye { position: relative; width: var(--eye); height: var(--eye); transition: transform .9s var(--ease); }
.eye-box {
  position: absolute; inset: 0; border-radius: 25%; overflow: hidden;
  background: var(--cyan);
  box-shadow:
    0 0 calc(var(--eye) * .19) calc(var(--eye) * .0625) rgba(0, 255, 255, .6),
    0 0 calc(var(--eye) * .375) calc(var(--eye) * .125) rgba(0, 255, 255, .4),
    inset 0 0 calc(var(--eye) * .19) rgba(255, 255, 255, .9);
  transform: scaleY(1); transform-origin: center;
  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), opacity .3s ease;
}
.lite .eye-box {
  box-shadow: 0 0 calc(var(--eye) * .22) calc(var(--eye) * .06) rgba(0, 255, 255, .55), inset 0 0 calc(var(--eye) * .19) rgba(255, 255, 255, .9);
}
#tiny.mood-hidden .eye-box { transform: scaleY(0); }
#tiny.blink .eye-box { transform: scaleY(.05); transition: transform .1s ease-in-out; }

/* Nét mắt nhắm / cười / >_< */
.eye-arc {
  position: absolute; left: 0; top: 26.875%; width: 100%; height: 43.75%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 calc(var(--eye) * .044) rgba(0, 255, 255, .92)) drop-shadow(0 0 calc(var(--eye) * .094) rgba(69, 217, 255, .57));
}
.eye-arc path { fill: none; stroke: #9cffff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s ease; }

/* "nên là tớ muốn": nhắm mắt, quay đầu sang trái */
#tiny.mood-want .eye-box { transform: scaleY(.05); opacity: 0; transition: transform .25s ease-in, opacity .2s ease .22s; }
#tiny.mood-want .arc-closed { opacity: 1; transition-delay: .3s; }
#tiny.mood-want .eye.left .eye-arc { animation: arcL .42s ease-out .5s both; }
#tiny.mood-want .eye.right .eye-arc { animation: arcR .42s ease-out .5s both; }
@keyframes arcL { from { transform: translateY(4%) scaleX(.38); } to { transform: translateY(4%) scaleX(.456); } }
@keyframes arcR { from { transform: translateY(6%) scaleX(.64); } to { transform: translateY(6%) scaleX(.768); } }
/* "sức khỏe": nhắm 1 mắt, mắt kia mở lại */
#tiny.mood-health .eye.left .eye-box { transform: scaleY(.05); opacity: 0; transition: transform .2s, opacity .15s .15s; }
#tiny.mood-health .eye.left .arc-closed { opacity: 1; }
#tiny.mood-health .eye.left .eye-arc { transform: translateY(4%) scaleX(.456); }
#tiny.mood-health .eye.right .eye-box { animation: reopen .64s var(--ease) both; }
#tiny.mood-health.blink .eye.right .eye-box { animation: none; }
@keyframes reopen { 0% { transform: scaleY(.05); filter: brightness(1.05); } 45% { transform: scaleY(.42); } 100% { transform: scaleY(1); filter: brightness(1); } }
/* "nè cầm lấy đi": >_< */
#tiny.mood-squint .eye-box { transform: scaleY(.05); opacity: 0; transition: transform .2s, opacity .15s .15s; }
#tiny.mood-squint .arc-squint { opacity: 1; transition-delay: .15s; }
/* nháy 1 mắt (cảnh câu hỏi) */
#tiny.winking .eye.left .eye-box { transform: scaleY(.05); opacity: 0; transition: transform .12s, opacity .1s .08s; }
#tiny.winking .eye.left .arc-closed { opacity: 1; }
#tiny.winking .eye.left .eye-arc { transform: scaleX(.6); }

/* Má hồng //// */
.blush {
  position: absolute; left: 50%; top: calc(var(--eye) * 1.094); transform: translateX(-50%); white-space: nowrap;
  font: 700 calc(var(--eye) * .15) var(--font); letter-spacing: 2px; color: rgba(255, 105, 180, .8);
  opacity: 0; transition: opacity 1.5s ease-in-out .5s;
}
#tiny.cheeks .blush { opacity: 1; }
#tiny.cheeks-soft .blush { opacity: .95; color: rgba(255, 163, 191, .8); }

/* Mắt long lanh (cảnh cuối) */
.shine { position: absolute; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .6s ease; box-shadow: 0 0 10px rgba(255, 255, 255, .9); }
.shine.a { left: 18%; top: 16%; width: 30%; height: 30%; }
.shine.b { left: 64%; top: 62%; width: 14%; height: 14%; }
.shine.c { left: 58%; top: 74%; width: 6%; height: 6%; }
#tiny.sparkle .shine { opacity: .95; }
#tiny.sparkle .eye-box { background: radial-gradient(circle at 45% 40%, #b8ffff 0%, #3ff6ff 55%, #14d8ee 100%); }

/* Tư thế mắt từng cảnh */
#tiny.pose-love { --ts: 1.15; }
#tiny.pose-want { --tx: -11vw; --ty: 7px; --ts: 1.04; }
#tiny.pose-want .tiny-eyes { gap: calc(var(--eye) * .51); }
#tiny.pose-want .eye.left { transform: translate(calc(var(--eye) * -.02), calc(var(--eye) * .03)); transition-duration: .42s; }
#tiny.pose-want .eye.right { transform: translate(calc(var(--eye) * -.375), calc(var(--eye) * .056)); transition-duration: 1.12s; }
#tiny.pose-health { --tx: -7.6vw; --ty: 4px; --ts: 1.02; }
#tiny.pose-health .tiny-eyes { gap: calc(var(--eye) * .59); }
#tiny.pose-health .eye.left { transform: translate(calc(var(--eye) * .044), calc(var(--eye) * .025)); transition-duration: .72s; }
#tiny.pose-health .eye.right { transform: translate(calc(var(--eye) * -.16), calc(var(--eye) * .02)); transition-duration: .72s; }
#tiny.pose-clover { --ty: -1vh; --ts: .96; }
#tiny.pose-ask { --tx: -16vw; --ty: 2vh; --ts: .95; }
#tiny.pose-final { --ty: -36vh; --ts: .55; }
#tiny.bob .eye.left { animation: bobA 3.6s ease-in-out infinite; }
#tiny.bob .eye.right { animation: bobB 3.9s ease-in-out infinite; }
@keyframes bobA { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-1px, -3px) rotate(-1.1deg); } }
@keyframes bobB { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(1px, -2px) rotate(1.1deg); } }
@media (max-width: 600px) {
  #tiny.pose-love { --ts: 1.05; }
  #tiny.pose-want { --tx: -10vw; --ty: 4px; --ts: 1.02; }
  #tiny.pose-want .tiny-eyes { gap: calc(var(--eye) * .58); }
  #tiny.pose-want .eye.left { transform: translate(calc(var(--eye) * -.01), calc(var(--eye) * .03)); }
  #tiny.pose-want .eye.right { transform: translate(calc(var(--eye) * -.36), calc(var(--eye) * .06)); }
  #tiny.pose-health { --tx: -6.8vw; --ty: 2px; --ts: 1.01; }
  #tiny.pose-health .tiny-eyes { gap: calc(var(--eye) * .42); }
  #tiny.pose-health .eye.left { transform: translate(calc(var(--eye) * .04), calc(var(--eye) * .02)); }
  #tiny.pose-health .eye.right { transform: translate(calc(var(--eye) * -.14), calc(var(--eye) * .02)); }
  #tiny.pose-clover { --ty: -9vh; --ts: .73; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #tiny.pose-ask { --tx: 0px; --ty: -15vh; --ts: .85; }
}

/* ---------------------------------------------------------------
 *  Lời thoại
 * --------------------------------------------------------------- */
.caption {
  position: absolute; left: 0; width: 100%; z-index: 10; padding: 0 16px; text-align: center; pointer-events: none;
  font-family: var(--font); font-weight: 400; color: #fff; letter-spacing: 2px; line-height: 1.3;
  text-shadow: 0 0 20px rgba(255, 255, 255, .9), 0 0 40px rgba(0, 255, 255, .6);
  opacity: 0; transition: opacity .7s ease-in-out, transform .7s var(--ease);
}
.caption.on { opacity: 1; }
.cap-hello { top: 50%; transform: translateY(-50%); font-size: 4rem; }
.cap-intro { bottom: 15%; font-size: 3rem; }
.cap-mission, .cap-chair { top: 15%; font-size: 2.5rem; }
.cap-wow { bottom: 15%; font-size: 3.5rem; }
.cap-wow.on { animation: wobble 3s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.cap-date { top: 10%; width: 66%; font-size: 2.4rem; color: #ffb6c1; text-shadow: 0 0 15px #ff69b4; line-height: 1.35; }
.cap-want { top: 15%; font-size: 3rem; color: #dff8ff; text-shadow: 0 0 18px rgba(180, 245, 255, .95), 0 0 36px rgba(125, 215, 255, .55); }
.cap-health { top: 12%; font-size: 2.75rem; color: #f4fbff; text-shadow: 0 0 16px rgba(255, 255, 255, .92), 0 0 34px rgba(130, 225, 255, .48); }
.cap-beauty, .cap-smile, .cap-clover, .cap-take, .cap-luck, .cap-question {
  top: 11.5%; font-size: clamp(1.9rem, 3.2vw, 3.2rem); line-height: 1.42; letter-spacing: .04em; transform: translateY(12px);
}
.caption.on.cap-beauty, .caption.on.cap-smile, .caption.on.cap-clover, .caption.on.cap-take,
.caption.on.cap-luck, .caption.on.cap-question { transform: translateY(0); }
.cap-beauty { color: #ffe0ef; text-shadow: 0 0 15px rgba(255, 176, 210, .86), 0 0 36px rgba(234, 137, 221, .36); }
.cap-smile { color: #fff0db; text-shadow: 0 0 15px rgba(255, 224, 165, .86), 0 0 36px rgba(255, 163, 176, .36); }
.cap-clover, .cap-take, .cap-luck { color: #f2fff1; text-shadow: 0 0 15px rgba(218, 255, 216, .92), 0 0 32px rgba(101, 255, 140, .36), 0 0 54px rgba(61, 214, 100, .18); }
.cap-question { color: #e9f3ff; text-shadow: 0 0 15px rgba(200, 230, 255, .85), 0 0 34px rgba(90, 160, 255, .4); }
.caption.accent-green .hl { color: #70ff82; text-shadow: 0 0 13px rgba(111, 255, 138, .95), 0 0 31px rgba(60, 220, 110, .66), 0 0 56px rgba(75, 255, 120, .28); }
.caption.accent-blue .hl { color: #8fd0ff; text-shadow: 0 0 14px rgba(120, 200, 255, .95), 0 0 32px rgba(60, 140, 255, .6); }
@media (max-width: 600px) {
  .caption { letter-spacing: 1px; padding: 0 12px; }
  .cap-hello { font-size: 2.4rem; }
  .cap-intro { font-size: 2rem; }
  .cap-mission, .cap-chair { font-size: 1.5rem; }
  .cap-wow { font-size: 2rem; }
  .cap-date { top: 11%; width: 100%; font-size: 1.5rem; line-height: 1.42; }
  .cap-want { font-size: 1.8rem; }
  .cap-health { font-size: 1.45rem; }
  .cap-beauty, .cap-smile { top: 12%; font-size: 1.6rem; line-height: 1.45; letter-spacing: .5px; padding: 0 18px; }
  .cap-clover, .cap-take, .cap-luck, .cap-question { top: 11%; font-size: 1.5rem; line-height: 1.48; letter-spacing: .5px; padding: 0 16px; }
}

/* Lời bài hát (cảnh nụ cười): nằm cạnh đĩa nhạc, mỗi câu hiện lên rồi mờ đi */
#lyrics {
  position: absolute; left: 37vw; bottom: calc(var(--safe-b) + 13vh); z-index: 9;
  width: 22vw; height: 4.6em; pointer-events: none;
  font-family: var(--font); font-size: clamp(15px, 1.1vw + 7px, 24px); line-height: 1.45; letter-spacing: 1px; text-align: center;
  opacity: 0; transition: opacity .8s ease;
}
#lyrics.on { opacity: 1; }
#lyrics .ly {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  color: #fff8f2; text-shadow: 0 0 10px rgba(255, 255, 255, .75), 0 0 24px rgba(255, 170, 210, .45);
  opacity: 0; transform: translateY(12px); filter: blur(5px);
  transition: opacity .7s ease, transform .7s var(--ease), filter .7s ease;
}
#lyrics .ly.show { opacity: 1; transform: none; filter: none; }
#lyrics .ly.gone { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
@media (max-width: 600px) and (orientation: portrait) {
  #lyrics { left: 3vw; width: 54vw; bottom: calc(var(--safe-b) + 11vh); font-size: 15px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #lyrics { left: 33vw; width: 28vw; bottom: 5vh; font-size: 13px; }
}

/* Quầng sáng & nhịp nhún của mắt theo nhạc (JS cập nhật) */
.tiny-glow {
  position: absolute; left: 50%; top: 50%; width: calc(var(--eye) * 4.2); height: calc(var(--eye) * 2.4);
  translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(0, 255, 255, .28), rgba(0, 200, 255, .1) 55%, transparent);
}
.tiny-pulse { will-change: transform; }

/* ---------------------------------------------------------------
 *  Nút góc trên
 * --------------------------------------------------------------- */
#toolbar { position: absolute; top: calc(var(--safe-t) + 12px); right: calc(var(--safe-r) + 12px); z-index: 20; display: flex; gap: 8px; }
.tb {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #dffcff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .6; transition: opacity .2s, background .2s;
}
.tb:hover, .tb:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); }
.tb:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb .i-off, .tb.muted .i-on { display: none; }
.tb.muted .i-off { display: block; }

/* ---------------------------------------------------------------
 *  Cảnh cuối
 * --------------------------------------------------------------- */
#final {
  z-index: 7; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--safe-t) + 22vh) calc(var(--safe-r) + 18px) calc(var(--safe-b) + 11vh) calc(var(--safe-l) + 18px);
}
.final-card { max-width: 640px; }
.final-card > * { opacity: 0; }
#final.on .final-card > * { animation: rise 1s var(--ease) calc(var(--i) * .28s + .5s) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.f-kicker { font-size: clamp(13px, .5vw + 11px, 16px); letter-spacing: .3em; color: #ffc6e2; margin-bottom: .6em; }
.f-head {
  font-family: var(--script); font-style: italic; font-weight: 700; line-height: 1.05; font-size: clamp(42px, 9.5vmin, 100px);
  background: linear-gradient(180deg, #fff6dc, #ffd27a 45%, #ff9fc8); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 200, 120, .45)); padding: 0 .1em;
}
.f-hl { white-space: nowrap; }
.f-sub { margin-top: .5em; font-size: clamp(13px, .6vw + 10px, 17px); letter-spacing: .22em; color: #ffe6b0; text-transform: uppercase; }
.f-msg { margin-top: 1.4em; font-size: clamp(14px, .55vw + 11px, 18px); line-height: 1.75; color: #f2ecff; white-space: pre-line; text-shadow: 0 0 10px rgba(200, 160, 255, .35); }
.f-sign { margin-top: 1.2em; font-family: var(--script); font-style: italic; font-size: clamp(20px, 3.4vmin, 30px); color: #ffb8d9; }
.f-replay {
  margin-top: 1.8em; padding: .7em 1.4em; border-radius: 999px; cursor: pointer; pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .07); color: #fff;
  font-size: 14px; letter-spacing: .08em; transition: background .2s, transform .2s;
}
.f-replay:hover { background: rgba(255, 255, 255, .14); }
.f-replay:active { transform: scale(.96); }
.f-replay:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------------------------------------------------------------
 *  Màn hình thấp (điện thoại xoay ngang)
 * --------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .caption { letter-spacing: 2px; }
  .cap-hello { font-size: 2.2rem; }
  .cap-intro, .cap-wow { font-size: 1.7rem; bottom: 9%; }
  .cap-mission, .cap-chair, .cap-want, .cap-health, .cap-date { top: 6%; font-size: 1.4rem; }
  .cap-date { width: 60%; }
  .cap-beauty, .cap-smile, .cap-clover, .cap-take, .cap-luck, .cap-question { top: 5%; font-size: 1.25rem; line-height: 1.35; }
  #tiny.pose-clover { --ty: -20vh; --ts: .72; }
  .d-health .health-art { --hh: 92vh; }
  .d-smile .smile-art img { height: 88vh; }
  .d-clover .lucky-clover { width: 30vh; top: 66%; }
  .d-clover .halo, .d-clover .aura-ring { top: 66%; }
  #stage[data-scene="take"] .d-clover .lucky-clover { top: calc(30% + var(--eye) * .5); }
  #final { padding-top: calc(var(--safe-t) + 21vh); padding-bottom: calc(var(--safe-b) + 10px); align-items: flex-start; overflow-y: auto; }
  .final-card { max-width: 720px; }
  .f-kicker { margin-bottom: .2em; }
  .f-head { font-size: clamp(30px, 13vh, 60px); }
  .f-sub { margin-top: .2em; }
  .f-msg { margin-top: .6em; font-size: 12px; line-height: 1.55; }
  .f-sign { margin-top: .4em; font-size: 20px; }
  .f-replay { margin-top: .7em; padding: .5em 1.2em; }
}

/* Người dùng chọn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .butterfly, .d-beauty .b-petal, .d-question .q-rays { animation: none !important; }
  .cap-wow.on { animation: none; }
}