:root{--ink:#263e36;--ink-soft:#6b786f;--bg:#fbf7ef;--paper:#fffef9;--green:#276851;--green-dark:#1c503f;--orange:#eeaa73;--line:#e9e5d9;--font:'Be Vietnam Pro',sans-serif;--display:'Baloo 2',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.65 var(--font);background-image:radial-gradient(#d4ddd2 0.65px,transparent .65px);background-size:24px 24px}button,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #ecad70;outline-offset:3px}
.site-shell{max-width:1400px;margin:0 auto;min-height:100vh;padding:0 clamp(22px,4vw,64px);display:flex;flex-direction:column}.topbar{height:100px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:8px;font:800 34px/1 var(--display);letter-spacing:-1.8px}.brand-mark{width:49px;height:49px;background:#e8eedf;border:1.5px solid #adc7b4;border-radius:17px;display:grid;place-items:center;transform:rotate(-9deg)}.brand-mark svg{width:35px;height:35px}.brand-stop{color:#dd915b}.topbar-note{display:flex;align-items:center;gap:10px;color:#63786b;font-size:12px;font-weight:700}.pulse-dot{width:9px;height:9px;border-radius:100%;background:#65af70;box-shadow:0 0 0 5px #66b07126}
.main-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);grid-template-areas:'intro scene' 'form scene';gap:18px clamp(28px,5.6vw,90px);align-items:start;padding:60px 0 52px;flex:1}.intro{grid-area:intro}.kicker{display:inline-flex;gap:10px;align-items:center;font-size:10px;font-weight:800;letter-spacing:2px;color:#537961}.kicker-star{font-size:22px;color:#dd945e;line-height:1}.intro h1{font:800 clamp(53px,5.5vw,86px)/.96 var(--display);letter-spacing:-2.8px;margin:22px 0 18px}.intro h1 em{color:#e99e69;font-style:normal}.intro>p{font-size:14px;color:#66746a;margin:0 0 10px}
.form-card{grid-area:form;background:var(--paper);border:1.5px solid #e6e8db;border-radius:23px;box-shadow:0 18px 60px #3b483317,0 4px 0 #e5e9dc;overflow:hidden;max-width:620px;width:100%}.panel-heading{display:flex;align-items:center;gap:9px;padding:17px 25px;border-bottom:1px solid #edf0e7;color:#325646;font-weight:800;font-size:13px}.panel-spark{color:#e6a06c;font-size:25px;line-height:0}.panel-stage{margin-left:auto;color:#9ba69d;letter-spacing:1px;font-size:10px}.stage{padding:23px 25px 25px}.field-label{display:block;font-size:12px;font-weight:800;color:#345344;margin-bottom:10px}.question-box{border:1.5px solid #e2e9dd;border-radius:15px;background:#fafcf6;overflow:hidden;transition:.2s}.question-box:focus-within{border-color:#8fac9b;box-shadow:0 0 0 4px #a1c6ae22}.question-box textarea{background:transparent;border:0;resize:vertical;min-height:94px;width:100%;padding:14px 15px 5px;outline:none;color:#294235;font-size:12px;line-height:1.8}.question-box textarea::placeholder{color:#a0aea4}.question-tools{padding:0 12px 9px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a0ada2}.subtle-button{padding:2px 4px;border:0;background:transparent;color:#54816b;font-size:11px;font-weight:700}.subtle-button:hover{text-decoration:underline}.compact-field{margin-top:18px}.tone-choices{display:flex;flex-wrap:wrap;gap:7px}.chip{background:#fff;border:1.5px solid #e8eae1;border-radius:99px;padding:7px 11px;color:#6e7d71;font-size:10px;font-weight:700;transition:.2s}.chip:hover{border-color:#adbfad}.chip.selected{background:#e8f1e5;border-color:#80a58b;color:#275a43;box-shadow:inset 0 0 0 .5px #80a58b}.amount-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.amount{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 8px;border-radius:13px;border:1.5px solid #e7eae2;background:#fffefb;color:#506657;transition:.2s}.amount span{font-size:22px}.amount strong{font:800 20px var(--display)}.amount:hover{transform:translateY(-2px)}.amount.selected{border-color:#3f8667;background:#eaf3e8;box-shadow:inset 0 0 0 1px #438768}.turnstile-container{margin:15px 0}.error-message{color:#a52c2c;background:#fff0ed;border:1px solid #f4b6ae;border-radius:10px;padding:10px;font-size:11px}.main-button{border:0;width:100%;margin-top:21px;background:var(--green);border-radius:13px;color:#fff;display:flex;align-items:center;justify-content:center;gap:13px;padding:14px 18px;font-weight:800;font-size:12px;box-shadow:0 4px 0 #174633;transition:transform .15s,background .15s}.main-button:not(:disabled):hover{background:var(--green-dark);transform:translateY(-2px)}.main-button span{font-size:19px;font-weight:500;line-height:1}.panel-footnote{text-align:center;color:#9aa69a;font-size:9px;margin:12px 0 0}.stage-note{margin:0 0 13px;font-size:12px;color:#768477}
.payment-plead{margin:0 0 14px;padding:12px 14px;border-radius:17px;border:1.5px solid #e7ddcb;background:linear-gradient(180deg,#f9f3e8,#efe3d3);box-shadow:0 10px 20px #412d160d}
.payment-plead img{width:min(100%,430px);margin:0 auto;height:auto}
html[data-theme=dark] .payment-plead{background:linear-gradient(180deg,#332d29,#29221f);border-color:#5f5047}.payment-layout{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:19px;align-items:start}.qr-wrap{background:#fff;border:1px solid #e8eee6;border-radius:16px;padding:9px;box-shadow:0 5px 18px #2a533b10}.qr-wrap img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.payment-details{min-width:0}.money-number{font:800 30px/1.2 var(--display);color:#2c7c58;margin:1px 0 11px}.detail-line{display:flex;align-items:center;justify-content:space-between;gap:7px;border-bottom:1px dashed #e4e9e1;padding:6px 0;font-size:10px}.detail-line>span{color:#78887c;white-space:nowrap}.detail-line strong{font-size:10px;text-align:right;overflow-wrap:anywhere;max-width:65%}.copy-icon{border:0;background:transparent;color:#497c5f;font-size:17px;font-weight:800;vertical-align:middle;padding:0 0 0 3px}.payment-code{margin-top:11px;background:#f1f5e8;border-radius:10px;padding:8px 10px}.payment-code>span{font-size:9px;color:#728d79}.payment-code>div{display:flex;align-items:center;justify-content:space-between;gap:6px}.payment-code strong{font:800 14px var(--display);letter-spacing:.8px;overflow-wrap:anywhere}.important-note{font-size:10px;font-weight:700;color:#a26239;background:#fff3e7;border:1px solid #f5dac3;padding:8px 11px;border-radius:9px;margin:14px 0}.payment-status{display:flex;gap:10px;align-items:center;background:#eaf3e9;border-radius:11px;padding:11px 13px;color:#39634e;font-weight:800;font-size:12px}.mini-loader{width:15px;height:15px;border:2px solid #9cc7a9;border-top-color:#2c805a;border-radius:100%;animation:spin 1s linear infinite}.help-note{margin:8px 0;color:#94a095;font-size:10px}.stage-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px}.outline-button{border:1.5px solid #d5e3d5;border-radius:11px;background:#fff;color:#476551;padding:9px 14px;font-size:11px;font-weight:800}.outline-button:not(:disabled):hover{background:#edf4ec}.plain-button{border:0;background:none;color:#678271;padding:9px 5px;font-size:11px;font-weight:700}.plain-button:hover{text-decoration:underline}.thank-you{display:flex;align-items:center;gap:9px;background:#e6f3e3;border:1px solid #cfe6ce;color:#397653;border-radius:13px;padding:12px 13px;font-size:11px;margin:0 0 16px}.thank-you span{font-size:17px;color:#ec9d6e}.advice-paper{position:relative;background:#faf4e7;border:1px solid #e8d9c1;border-radius:16px;padding:23px 22px 14px;min-height:150px}.paper-label{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#af825b}.advice-paper p{font-size:12px;line-height:2;white-space:pre-wrap;margin:15px 0;color:#455747}.signature{display:block;text-align:right;font:800 17px var(--display);color:#956e51}.stage#stage-advice .main-button{margin-top:16px}
.story-scene{grid-area:scene;align-self:stretch;min-height:730px;position:relative;overflow:hidden;background:#dcebd9;border:1.5px solid #bed5bc;border-radius:27px;box-shadow:0 18px 45px #365a3920;isolation:isolate;display:flex;flex-direction:column}.story-scene:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#f6fbec 1.5px,transparent 1.5px);background-size:25px 25px;opacity:.4;pointer-events:none;z-index:-1}.scene-heading{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;padding:25px 30px;font-size:10px;letter-spacing:2px;font-weight:800;color:#5d7b62}.scene-heart{font-size:23px;color:#ecaa78;letter-spacing:0;transform:rotate(-15deg)}.scene-world{position:relative;flex:1;min-height:550px}.sky-circle{position:absolute;right:11%;top:4%;width:260px;height:260px;border-radius:100%;background:#f5e6bb;box-shadow:0 0 0 35px #f5e6bb30}.doodle{position:absolute;color:#fffdf0;font-family:var(--display);font-weight:800;pointer-events:none}.star-a{top:15%;left:11%;font-size:44px;color:#f2bd81;transform:rotate(14deg)}.star-b{top:25%;right:9%;font-size:27px;color:#fffef1}.star-c{top:0;left:40%;font-size:35px;color:#8eb6a3}.cloud{position:absolute;width:60px;height:21px;background:#f3f6e9;border-radius:99px;opacity:.75}.cloud:before,.cloud:after{content:'';position:absolute;border-radius:50%;background:inherit}.cloud:before{width:31px;height:31px;left:8px;bottom:0}.cloud:after{width:25px;height:25px;right:7px;bottom:0}.cloud-a{left:31%;top:11%;transform:scale(.8)}.cloud-b{right:9%;top:30%;transform:scale(.6)}.sidewalk{position:absolute;left:-20%;right:-20%;bottom:0;height:115px;background:#c4d9ba;border-top:5px solid #89ae95;border-radius:50% 50% 0 0/30% 30% 0 0}.sidewalk:after{content:'';position:absolute;left:0;right:0;bottom:13px;height:2px;background:repeating-linear-gradient(90deg,transparent 0 36px,#b1caaa 37px 72px)}.food-stall{position:absolute;width:58%;max-width:360px;right:0%;bottom:66px;z-index:3;filter:drop-shadow(0 15px 0 #436e4430)}.scene-actor{position:absolute;width:45%;max-width:250px;left:6%;bottom:59px;z-index:5;transform-origin:50% 100%;transition:transform .65s ease}.scene-actor img{width:100%;height:auto;filter:drop-shadow(0 14px 0 #477b5430)}.actor-fed{display:none} .scene-bubble{position:absolute;left:4%;top:16%;z-index:6;background:#fffdfa;border:2px solid #3d6953;color:#325e49;font:800 15px var(--display);border-radius:19px 20px 20px 3px;padding:10px 18px;box-shadow:5px 5px 0 #bcd4b9;transform:rotate(-5deg);transition:opacity .2s;white-space:pre-line;line-height:1.35}.scene-dog-bubble{position:absolute;left:29%;bottom:24%;z-index:8;background:#fff3dd;border:2px solid #5b7a61;color:#45634f;font:800 12px var(--display);border-radius:18px 18px 18px 4px;padding:7px 12px;box-shadow:4px 4px 0 #bcd4b9;transform:rotate(4deg);max-width:130px}.coin-spark{position:absolute;left:36%;bottom:37%;font-size:36px;color:#e8a66b;z-index:8;opacity:0}.coin-two{left:55%;bottom:44%;font-size:27px}.scene-bottom{position:relative;z-index:8;padding:22px 29px 25px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #bcd1b9;background:#ecf4e7;color:#51745d}.scene-story{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700}.scene-status-dot{width:9px;height:9px;border-radius:50%;background:#e4a26a;box-shadow:0 0 0 4px #f7ddc3}.scene-dog-ui{display:flex;align-items:center;gap:8px;min-width:0}.scene-dog-meter{font-size:10px;font-weight:800;color:#61806d;white-space:nowrap}.scene-dog-progress{width:72px;height:8px;border-radius:999px;background:#d4e2d3;overflow:hidden;box-shadow:inset 0 0 0 1px #bfd1c0}.scene-dog-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#efb06e,#7bbc8b)}.story-scene[data-mood=waiting] .scene-bubble{transform:rotate(3deg)}.story-scene[data-mood=waiting] .scene-dog-bubble{transform:rotate(-3deg)}.story-scene[data-mood=waiting] .coin-one{animation:coinBounce 2.1s ease-in-out infinite}.story-scene[data-mood=walking] .scene-actor{animation:walkToFood 3.1s ease-in-out forwards}.story-scene[data-mood=walking] .scene-actor img{animation:actorBob .34s ease-in-out infinite alternate}.story-scene[data-mood=walking] .coin-one,.story-scene[data-mood=walking] .coin-two{animation:coinBurst 1.8s .2s ease-in-out infinite}.story-scene[data-mood=walking] .scene-bubble{opacity:0}.story-scene[data-mood=walking] .scene-dog-bubble{opacity:0}.story-scene[data-mood=fed] .scene-actor{transform:translateX(78%) scale(.9)}.story-scene[data-mood=fed] .actor-hungry{display:none}.story-scene[data-mood=fed] .actor-fed{display:block;animation:happyHop 2s ease-in-out infinite}.story-scene[data-mood=fed] .coin-one,.story-scene[data-mood=fed] .coin-two{animation:coinBurst 2.2s ease-in-out infinite}.story-scene[data-mood=fed] .scene-bubble{left:9%;top:25%;transform:rotate(-8deg);opacity:1}.story-scene[data-mood=fed] .scene-dog-bubble{left:34%;bottom:26%;opacity:1}
.scene-dog{position:absolute;width:min(24%,136px);left:33%;bottom:34px;z-index:7;transform:translateX(-8%) scale(var(--dog-scale,.82));transform-origin:50% 100%;opacity:.99}
.scene-dog img{width:100%;height:auto;filter:drop-shadow(0 10px 0 #2f544030)}
.story-scene{--dog-scale:.82}
.story-scene[data-mood=hungry] .scene-dog,.story-scene[data-mood=waiting] .scene-dog{animation:dogShiver 2.8s ease-in-out infinite}
.story-scene[data-mood=standing] .scene-dog{animation:dogLookUp 1.1s ease-in-out infinite alternate}
.story-scene[data-mood=running] .scene-dog{animation:dogCheer .55s ease-in-out infinite alternate}
.story-scene[data-mood=fed] .scene-dog{animation:dogHappy 1.9s ease-in-out infinite}
@keyframes dogShiver{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-2px) rotate(-1deg)}75%{transform:translateY(1px) rotate(1deg)}}
@keyframes dogLookUp{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)}}
@keyframes dogCheer{from{transform:translateY(0) scale(1)}to{transform:translateY(-6px) scale(1.03)}}
@keyframes dogHappy{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.advice-paper p{margin:0 0 16px}.advice-paper p:last-of-type{margin-bottom:0}.advice-paper strong{font-weight:800}
.footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 23px;gap:16px;color:#95a197;font-size:10px}.footer span:first-child{font-weight:800;color:#6e8373}.toast{position:fixed;bottom:22px;right:22px;z-index:30;background:#234a37;color:white;box-shadow:0 10px 32px #21362930;border-radius:13px;padding:12px 17px;font-size:12px;font-weight:700;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes coinBounce{0%,100%{opacity:0;transform:translateY(15px) scale(.8)}50%{opacity:1;transform:translateY(-20px) scale(1.1)}}@keyframes coinBurst{0%,100%{opacity:0;transform:translateY(8px) rotate(0)}40%{opacity:1;transform:translateY(-36px) rotate(40deg)}}@keyframes actorBob{to{transform:translateY(-9px) rotate(3deg)}}@keyframes happyHop{50%{transform:translateY(-10px)}}@keyframes walkToFood{0%{transform:translateX(0) scale(1)}20%{transform:translateX(15%) scale(.98) rotate(3deg)}60%{transform:translateX(56%) scale(.92) rotate(-2deg)}100%{transform:translateX(78%) scale(.9)}}
@media(max-width:1120px){.main-grid{gap:18px 30px}.intro h1{font-size:clamp(49px,6.1vw,72px)}.story-scene{min-height:690px}.payment-layout{grid-template-columns:180px 1fr;gap:12px}.scene-world{min-height:520px}.scene-actor{width:46%}.food-stall{width:59%}}
@media(max-width:850px){.site-shell{padding:0 22px}.topbar{height:80px}.main-grid{grid-template-columns:1fr;grid-template-areas:'intro' 'scene' 'form';gap:22px;padding:34px 0 44px}.intro{text-align:center}.intro h1{font-size:clamp(53px,9vw,78px);margin:13px 0}.intro>p{font-size:12px}.story-scene{min-height:430px;max-width:650px;width:100%;margin:auto}.scene-world{min-height:350px}.food-stall{max-width:255px;width:46%;right:8%;bottom:47px}.scene-actor{width:34%;max-width:185px;left:17%;bottom:45px}.scene-dog{width:18%;left:39%;bottom:32px}.sky-circle{width:190px;height:190px;right:19%;top:0}.scene-bubble{left:9%;top:8%;font-size:13px}.scene-dog-bubble{left:35%;bottom:23%;font-size:11px;max-width:100px;padding:6px 10px}.sidewalk{height:75px}.scene-heading{padding:15px 23px}.scene-bottom{padding:14px 23px}.form-card{margin:auto;max-width:650px}.footer{padding:16px 0}}
@media(max-width:520px){.brand{font-size:28px}.brand-mark{width:42px;height:42px}.topbar-note{font-size:10px}.intro h1{font-size:clamp(51px,13vw,68px)}.kicker{font-size:9px;letter-spacing:1.2px}.site-shell{padding:0 16px}.story-scene{min-height:350px;border-radius:21px}.scene-world{min-height:270px}.scene-bubble{font-size:11px;padding:7px 10px;left:5%;top:6%}.scene-dog-bubble{left:38%;bottom:20%;font-size:9px;max-width:74px;padding:5px 8px}.food-stall{width:52%;right:1%;bottom:33px}.scene-actor{width:43%;left:6%;bottom:31px}.sidewalk{height:57px}.sky-circle{width:140px;height:140px}.star-a{font-size:31px;left:15%}.scene-heading{padding:12px 17px}.scene-bottom{padding:12px 17px}.scene-story{font-size:10px}.scene-heart{font-size:18px}.form-card{border-radius:19px}.panel-heading{padding:14px 16px}.stage{padding:20px 16px}.payment-layout{grid-template-columns:1fr;gap:13px}.qr-wrap{width:min(230px,82%);margin:auto}.payment-details{padding:0 2px}.money-number{text-align:center}.amount{gap:7px;padding:8px 5px}.amount span{font-size:21px}.amount strong{font-size:18px}.chip{font-size:9px;padding:7px 9px}.footer{flex-direction:column;gap:3px;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.story-scene[data-mood=walking] .scene-actor{transform:translateX(78%) scale(.9)}}

/* Chuyển động game 2D: không dùng phối cảnh 3D để tránh lỗi cắt lớp ảnh trên GPU/trình duyệt. */
.scene-world{isolation:isolate}
.food-stall{animation:shopBreathing 5.2s ease-in-out infinite;transform-origin:50% 90%}
.sky-circle{animation:sunLight 7s ease-in-out infinite}
.cloud-a{animation:cloudFloatA 9s ease-in-out infinite alternate}
.cloud-b{animation:cloudFloatB 12s ease-in-out infinite alternate}
.star-a{animation:twinkle 5s ease-in-out infinite}
.star-b{animation:twinkle 3.6s 1.2s ease-in-out infinite}
.scene-heart{animation:heartBeat 4.2s ease-in-out infinite}
.story-scene[data-mood=hungry] .scene-bubble,.story-scene[data-mood=waiting] .scene-bubble{animation:speechFloat 3.8s ease-in-out infinite}
.story-scene[data-mood=fed] .scene-bubble{animation:speechFloat 3.2s ease-in-out infinite}
@keyframes idleCharacter2D{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes shopBreathing{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-.6deg)}}
@keyframes sunLight{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.075);opacity:.72}}
@keyframes cloudFloatA{from{transform:scale(.8) translateX(-18px)}to{transform:scale(.8) translateX(22px)}}
@keyframes cloudFloatB{from{transform:scale(.6) translateX(15px)}to{transform:scale(.6) translateX(-18px)}}
@keyframes twinkle{0%,100%{opacity:.65;scale:1}50%{opacity:1;scale:1.16}}
@keyframes heartBeat{0%,100%{transform:rotate(-15deg) scale(1)}45%{transform:rotate(-15deg) scale(1.16)}52%{transform:rotate(-15deg) scale(1)}}
@keyframes speechFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* V4 — Trời mưa, chế độ tối và nhân vật kiểu game với từng tư thế riêng. */
.site-shell{position:relative;z-index:2}
.story-scene{background:linear-gradient(148deg,#d9e9e4 0%,#bad6d9 61%,#bcd8c3 100%)}
.sidewalk:before{content:'';position:absolute;left:24%;bottom:13px;width:52%;height:20px;background:#e4f4e45e;border-radius:50%;box-shadow:0 0 0 2px #92b3a130;animation:rainPuddle 3.3s ease-in-out infinite}
@keyframes rainPuddle{0%,100%{transform:scaleX(.96);opacity:.4}50%{transform:scaleX(1.09);opacity:.76}}
.topbar-actions{display:flex;align-items:center;gap:19px}
.theme-toggle{border:1.5px solid #cadbd1;color:#375c4a;background:#f0f5ed;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;box-shadow:0 3px 0 #c4d5ca;transition:background .2s,transform .2s}
.theme-toggle:hover{transform:translateY(-2px);background:#e7efe9}
.theme-toggle span{font-size:23px;line-height:1}
.intro h1{margin-top:0}
.weather{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden;isolation:isolate}
.rain-field{position:absolute;inset:0;opacity:.53}
.rain-drop{display:block;position:absolute;left:var(--x);top:-15vh;width:1.6px;height:var(--length);border-radius:20px;background:linear-gradient(180deg,transparent,#799fb0 65%,#bad4dd);opacity:.65;transform:rotate(12deg);animation:rainSweep var(--duration) linear var(--delay) infinite;will-change:transform}
.storm-flash{position:absolute;inset:0;background:radial-gradient(circle at 79% 14%,#fff 0%,#e9f3ff 42%,#fff 100%);opacity:0;animation:stormFlash 12.5s linear infinite}
.storm-bolt{position:absolute;right:7%;top:5%;height:190px;width:120px;opacity:0;filter:drop-shadow(0 0 25px #fefbd5);transform:rotate(12deg);animation:boltFlash 12.5s linear infinite}
@keyframes rainSweep{0%{transform:translate3d(9vw,-18vh,0) rotate(12deg)}100%{transform:translate3d(-12vw,119vh,0) rotate(12deg)}}
@keyframes stormFlash{0%,76%,77.5%,78.5%,80%,100%{opacity:0}76.5%{opacity:.065}78%{opacity:.16}79%{opacity:.09}}
@keyframes boltFlash{0%,76%,77.5%,78.5%,80%,100%{opacity:0}76.5%{opacity:.55}78%{opacity:.8}79%{opacity:.4}}
.scene-actor{transition:none;transform-origin:50% 100%}
.scene-actor img{display:none}
.story-scene[data-mood=hungry] .actor-seated,.story-scene[data-mood=waiting] .actor-seated,.story-scene[data-mood=standing] .actor-standing,.story-scene[data-mood=running] .actor-running,.story-scene[data-mood=fed] .actor-fed{display:block}
.story-scene[data-mood=hungry] .actor-seated,.story-scene[data-mood=waiting] .actor-seated{animation:idleCharacter2D 3.4s ease-in-out infinite;transform-origin:50% 75%}
.story-scene[data-mood=standing] .scene-actor{animation:standFromGround .72s cubic-bezier(.2,.9,.24,1) both}
.story-scene[data-mood=running] .scene-actor{animation:runToShop 2.85s linear both}
.story-scene[data-mood=running] .actor-running{animation:actorBob .18s ease-in-out infinite alternate}
.story-scene[data-mood=standing] .scene-bubble{animation:speechFloat 1.8s ease-in-out infinite}
.story-scene[data-mood=running] .scene-bubble{opacity:0}
.story-scene[data-mood=running] .coin-one,.story-scene[data-mood=running] .coin-two{animation:coinBurst 1s ease-in-out infinite}
.run-dust{position:absolute;bottom:57px;left:17%;width:26px;height:16px;border-radius:100%;background:#fff7e5;box-shadow:16px 3px 0 -4px #e2c79d,31px -2px 0 -7px #fff7e5;z-index:4;opacity:0}
.story-scene[data-mood=running] .dust-one{animation:runDust 2.8s ease-out both}
.story-scene[data-mood=running] .dust-two{animation:runDust 2.8s .16s ease-out both}
@keyframes standFromGround{0%{transform:translateY(19px) scale(.97,.74)}55%{transform:translateY(-23px) scale(1.05,1.09)}100%{transform:translateY(-3px) scale(1)}}
@keyframes runToShop{0%{transform:translateX(0) translateY(-3px) scale(1)}30%{transform:translateX(23%) translateY(-7px) scale(.97)}70%{transform:translateX(63%) translateY(-5px) scale(.93)}100%{transform:translateX(78%) translateY(0) scale(.9)}}
@keyframes runDust{0%{opacity:0;transform:translateX(0) scale(.4)}25%{opacity:.9}80%{opacity:.5}100%{opacity:0;transform:translateX(170px) scale(1.6)}}

/* Dark Mode: đổi cả thẻ nội dung, biểu mẫu và góc phố, không chỉ đổi màu nền. */
html[data-theme=dark]{color-scheme:dark;--bg:#101e24;--paper:#1b2d32;--ink:#eaf3eb;--ink-soft:#b1c6c1;--green:#3d9272;--green-dark:#317858;--line:#31434a}
html[data-theme=dark] body{background-color:var(--bg);background-image:radial-gradient(#4b626b .65px,transparent .65px)}
html[data-theme=dark] .brand,html[data-theme=dark] .intro{color:#eef6ed}
html[data-theme=dark] .topbar-note,html[data-theme=dark] .intro>p{color:#aebfb9}
html[data-theme=dark] .topbar{border-color:#34484e}
html[data-theme=dark] .theme-toggle{color:#f6d59a;border-color:#4d6670;background:#30444c;box-shadow:0 3px 0 #1a3039}
html[data-theme=dark] .form-card{border-color:#34504b;background:var(--paper);box-shadow:0 18px 50px #070f1480,0 4px 0 #304c48}
html[data-theme=dark] .panel-heading{color:#c8e7d1;border-color:#344a47}
html[data-theme=dark] .panel-stage{color:#839e96}
html[data-theme=dark] .field-label{color:#c7e5cf}
html[data-theme=dark] .question-box{border-color:#3f625b;background:#203839}
html[data-theme=dark] .question-box:focus-within{border-color:#72a78b;box-shadow:0 0 0 4px #72a78b24}
html[data-theme=dark] .question-box textarea{color:#e9f3ec}
html[data-theme=dark] .question-box textarea::placeholder{color:#9ab3ab}
html[data-theme=dark] .question-tools{color:#8ca79b}
html[data-theme=dark] .subtle-button{color:#a8dbb5}
html[data-theme=dark] .chip,html[data-theme=dark] .amount{background:#253c3b;border-color:#466059;color:#ceddd2}
html[data-theme=dark] .chip.selected,html[data-theme=dark] .amount.selected{background:#2e5847;border-color:#74b18c;color:#e4f8e8;box-shadow:inset 0 0 0 1px #598b72}
html[data-theme=dark] .main-button{box-shadow:0 4px 0 #17412e}
html[data-theme=dark] .qr-wrap{background:#fefdf7;border-color:#587a69}
html[data-theme=dark] .money-number{color:#8bd4a1}
html[data-theme=dark] .stage-note,html[data-theme=dark] .help-note,html[data-theme=dark] .detail-line>span{color:#a2b9aa}
html[data-theme=dark] .detail-line{border-color:#435a53}
html[data-theme=dark] .detail-line strong{color:#ecf2eb}
html[data-theme=dark] .copy-icon{color:#8ec99e}
html[data-theme=dark] .payment-code{background:#29473c}
html[data-theme=dark] .payment-code>span{color:#a1c9ad}
html[data-theme=dark] .payment-status{background:#264839;color:#bcf0cb}
html[data-theme=dark] .important-note{background:#443827;border-color:#745d3a;color:#f0c994}
html[data-theme=dark] .outline-button{background:#233c38;color:#d3eed7;border-color:#416953}
html[data-theme=dark] .outline-button:hover{background:#2d4b40}
html[data-theme=dark] .plain-button{color:#a1ceb2}
html[data-theme=dark] .thank-you{background:#244a3b;border-color:#3d7955;color:#b6e7be}
html[data-theme=dark] .advice-paper{background:#302e2a;border-color:#625342}
html[data-theme=dark] .advice-paper p{color:#eee8d9}
html[data-theme=dark] .signature{color:#dcb18d}
html[data-theme=dark] .error-message{background:#482b29;border-color:#865349;color:#f6c7bf}
html[data-theme=dark] .story-scene{background:#264d56;border-color:#416f6e;box-shadow:0 24px 45px #07131777}
html[data-theme=dark] .scene-heading{color:#bbdacc}
html[data-theme=dark] .scene-bottom{background:#23423e;border-color:#426e64;color:#bee3c5}
html[data-theme=dark] .scene-dog-meter{color:#c3dcc8}
html[data-theme=dark] .scene-dog-progress{background:#314f46;box-shadow:inset 0 0 0 1px #48685b}
html[data-theme=dark] .scene-bubble{background:#223c3c;border-color:#a0cbb5;color:#e5f3e2;box-shadow:5px 5px 0 #153339}
html[data-theme=dark] .sky-circle{background:#b9ccd0;box-shadow:0 0 0 35px #a4c2bd25}
html[data-theme=dark] .cloud{background:#527782;opacity:.75}
html[data-theme=dark] .sidewalk{background:#416960;border-color:#648c71}
html[data-theme=dark] .rain-field{opacity:.78}
html[data-theme=dark] .rain-drop{background:linear-gradient(180deg,transparent,#b5d6f6 60%,#d4edff)}
html[data-theme=dark] .storm-flash{background:radial-gradient(circle at 79% 14%,#fff 0%,#b7c8e6 46%,#8cabdb 100%)}

@media(max-width:520px){.topbar-actions{gap:9px}.topbar-note{display:none}.theme-toggle{width:38px;height:38px;border-radius:12px}.storm-bolt{right:1%;width:67px;height:120px}.run-dust{bottom:30px}}
@media(prefers-reduced-motion:reduce){.weather{display:none}.story-scene[data-mood=standing] .scene-actor,.story-scene[data-mood=running] .scene-actor{transform:translateX(78%) scale(.9)}}

/* V5 — Tùy chọn số tiền và bố cục sân khấu không bị cắt ở cạnh hay vượt chiều cao. */
.amount-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.amount{gap:6px;padding:10px 4px;min-width:0}
.amount strong{font-size:18px}
.amount[data-amount=custom] strong{font-size:16px}
.amount[data-amount=custom] span{font:800 22px var(--display)}
.custom-amount-field{display:flex;flex-direction:column;gap:7px;margin-top:12px;padding:12px;border:1.5px solid #cfe0d2;border-radius:13px;background:#f3f8f0}
.custom-amount-field label{font-size:11px;font-weight:800;color:#365948}
.custom-amount-field input{width:100%;min-width:0;border:1.5px solid #bcd2c1;border-radius:9px;background:#fffefb;color:#294235;padding:10px 12px;font:700 15px var(--font);outline-offset:2px}
.custom-amount-field input:focus{outline:2px solid #80ae91}
.custom-amount-field input[aria-invalid=true]{border-color:#c65d4f;outline-color:#c65d4f}
.field-error{margin:0;color:#a52c2c;font-size:10px;font-weight:700}
html[data-theme=dark] .custom-amount-field{background:#244139;border-color:#3c6754}
html[data-theme=dark] .custom-amount-field label{color:#c7e5cf}
html[data-theme=dark] .custom-amount-field input{background:#1b3333;color:#ecf3ec;border-color:#527665}
html[data-theme=dark] .field-error{color:#f1ada5}

.story-scene{height:clamp(480px,calc(100svh - 155px),600px);min-height:0;align-self:start}
.scene-world{min-height:0;overflow:hidden}
.sky-circle{z-index:0;width:min(45%,245px);height:auto;aspect-ratio:1;right:12%;top:5%}
.sidewalk{z-index:1}
.food-stall{width:min(52%,270px);max-width:none;right:2.5%;bottom:35px;z-index:3}
.scene-actor{width:min(43%,235px);max-width:none;left:6%;bottom:40px;z-index:5}
.scene-bubble{max-width:58%;top:18%;z-index:6}
@media(max-width:850px){
  .story-scene{height:430px;min-height:0}
  .scene-world{min-height:0}
  .food-stall{width:min(46%,250px);right:9%;bottom:38px}
  .scene-actor{width:min(35%,180px);left:14%;bottom:40px}
  .sky-circle{width:min(37%,180px);right:19%;top:2%}
  .scene-bubble{top:12%}
}
@media(max-width:520px){
  .story-scene{height:clamp(305px,87vw,385px)}
  .food-stall{width:min(51%,225px);right:2%;bottom:24px}
  .scene-actor{width:min(42%,195px);left:6%;bottom:24px}
  .sky-circle{width:38%;right:14%}
  .scene-bubble{max-width:53%;top:10%;font-size:11px}
  .amount{padding:9px 3px;gap:4px}
  .amount span{font-size:19px}
  .amount strong{font-size:16px}
  .amount[data-amount=custom] strong{font-size:14px}
}

/* V6 — nhận lời khuyên trước; ủng hộ hoàn toàn tùy chọn. */
#donation-tools{margin-top:18px;padding-top:2px}
#donation-tools .compact-field{margin-top:0}
.resume-payment{display:block;width:100%;margin-top:15px}

/* V7 — Gợi ý Mệnh Tinh sau lời khuyên; 10k là mức ủng hộ mặc định. */
.friend-bonus{margin-top:14px;padding:14px 15px;border:1.5px solid #e7cfaa;background:linear-gradient(115deg,#fff6e5,#faece3);border-radius:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.friend-grid{display:grid;grid-template-columns:1fr;gap:0}
.friend-copy{min-width:0;flex:1}.friend-eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:9px;letter-spacing:1.4px;font-weight:800;color:#a5664b}.friend-tag{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;background:#2f785d;color:#fff;font-size:9px;letter-spacing:.3px;box-shadow:inset 0 0 0 1px #205740}
.friend-copy p{font:800 13px/1.4 var(--font);color:#544032;margin:5px 0 2px}.friend-copy>span:last-child{font-size:10px;color:#866f5a}
.friend-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;padding:10px 12px;border-radius:10px;background:#2a6e55;color:white;font-size:11px;font-weight:800;transition:transform .16s,background .16s;white-space:nowrap}
.friend-link:hover{background:#20553f;transform:translateY(-2px)}.friend-link>span{font-size:16px;line-height:1}
html[data-theme=dark] .friend-bonus{background:linear-gradient(120deg,#3d3730,#332e2c);border-color:#705744}
html[data-theme=dark] .friend-eyebrow{color:#efb68f}
html[data-theme=dark] .friend-tag{background:#4a9878;box-shadow:inset 0 0 0 1px #7fd1ab;color:#f4fff8}
html[data-theme=dark] .friend-copy p{color:#f4e6d4}
html[data-theme=dark] .friend-copy>span:last-child{color:#dbbda6}
html[data-theme=dark] .friend-link{background:#3c876a}
html[data-theme=dark] .friend-link:hover{background:#55a081}
@media(max-width:520px){.friend-bonus{flex-wrap:wrap;gap:10px}.friend-link{width:100%}.payment-plead{padding:10px 10px 8px}}


/* V8 — CTA luôn một dòng, không mũi tên; co chữ theo kích thước màn hình. */
#create-order.donate-button {
  white-space: nowrap;
  flex-wrap: nowrap;
  min-width: 0;
  padding-inline: 7px;
  gap: 0;
  font-size: clamp(10px, 3.6vw, 12px);
  letter-spacing: -0.16px;
  line-height: 1.3;
}

@media(max-width:520px){.scene-dog-ui{gap:6px}.scene-dog-meter{font-size:9px}.scene-dog-progress{width:54px;height:7px}}

/* V11 · New six-stage dog and persistent feeding progress. */
.story-scene{--dog-scale:.88}
.scene-dog{left:37%;bottom:28px;width:clamp(92px,20%,154px);max-width:154px;z-index:7;transform:scale(var(--dog-scale));transform-origin:center bottom;pointer-events:none;transition:width .6s,transform .7s}
.scene-dog img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 0 #2f544031)}
/* Keep scale within the animation keyframes so animations never undo size increases. */
@keyframes dogShiver{0%,100%{transform:scale(var(--dog-scale)) rotate(-1deg)}45%{transform:translateY(-2px) scale(var(--dog-scale)) rotate(1deg)}}
@keyframes dogLookUp{from{transform:scale(var(--dog-scale)) rotate(-2deg)}to{transform:translateY(-4px) scale(var(--dog-scale)) rotate(2deg)}}
@keyframes dogCheer{from{transform:translateY(0) scale(var(--dog-scale))}to{transform:translateY(-7px) scale(var(--dog-scale))}}
@keyframes dogHappy{0%,100%{transform:translateY(0) scale(var(--dog-scale)) rotate(-1deg)}50%{transform:translateY(-6px) scale(var(--dog-scale)) rotate(3deg)}}
.scene-bottom{padding:12px 20px;gap:12px;align-items:center;flex-wrap:wrap}
.scene-dog-ui{flex:1;min-width:200px;justify-content:flex-end;flex-wrap:wrap;gap:7px 9px}
.scene-dog-meter{font-size:11px;font-weight:900;white-space:nowrap}
.scene-dog-progress{height:9px;min-width:72px;max-width:105px;flex:1}
.scene-dog-next{font-size:10px;font-weight:700;color:#6d8978;white-space:nowrap}
.dog-feed-note{position:relative;z-index:9;margin:0;padding:9px 14px 12px;text-align:center;background:#f7eed9;color:#72583b;font-weight:800;font-size:11px;line-height:1.5;border-top:1px solid #dbdfc5}
html[data-theme=dark] .dog-feed-note{background:#293c38;color:#e0be8c;border-color:#416055}
html[data-theme=dark] .scene-dog-next{color:#a4c9b2}
@media(max-width:850px){.scene-dog{left:38%;bottom:28px;width:clamp(95px,19%,150px)}}
@media(max-width:520px){.scene-dog{left:41%;bottom:17px;width:clamp(82px,24%,116px)}.scene-bottom{padding:10px 12px;gap:8px}.scene-dog-ui{min-width:100%;justify-content:space-between;gap:5px}.scene-dog-meter{font-size:10px}.scene-dog-progress{min-width:45px;max-width:75px}.scene-dog-next{font-size:9px}.dog-feed-note{font-size:10px;padding:8px 10px 9px}}
@media(prefers-reduced-motion:reduce){.scene-dog{animation:none!important;transform:scale(var(--dog-scale))!important}}

/* Keep the speech bubble clear of Xin's face on narrow screens. */
@media(max-width:520px){.scene-bubble{top:1%;left:2%;padding:5px 8px;font-size:10px;max-width:55%}}
/* Soft sparkle only when donations actually unlock a new stage. */
.story-scene.dog-levelup .scene-dog img{animation:dogLevelUp .95s ease-in-out both}
@keyframes dogLevelUp{0%{filter:drop-shadow(0 10px 0 #2f544031);transform:scale(.84)}45%{filter:drop-shadow(0 0 15px #ffd16e);transform:scale(1.18) rotate(-7deg)}75%{filter:drop-shadow(0 0 12px #ffe8a6);transform:scale(1.05) rotate(5deg)}100%{filter:drop-shadow(0 10px 0 #2f544031);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.story-scene.dog-levelup .scene-dog img{animation:none!important}}
/* On very small screens the speech bubble overlaps Xin's face; the story footer
   already conveys the same state, so hide only this decorative bubble. */
@media(max-width:520px){.story-scene .scene-bubble{display:none}}

.extra-bonus{border-color:#d8d8c2;background:linear-gradient(120deg,#eef7ea,#f8f4df)}
html[data-theme=dark] .extra-bonus{background:linear-gradient(120deg,#2d3930,#3a3b2e);border-color:#59634d}
@media(max-width:520px){.scene-dog-bubble{display:block}}


/* V14 — speech floats above the heads, even on narrow phones. */
.story-scene .scene-world .scene-bubble {
  display:block; top:1.2%; left:4%; right:auto; bottom:auto;
  width:min(54%,300px); max-width:none; padding:9px 12px;
  font-size:clamp(10px,1vw,14px); line-height:1.25;
  white-space:pre-line; overflow-wrap:break-word; transform:rotate(-2deg);
  z-index:9;
}
.story-scene[data-mood=fed] .scene-world .scene-bubble {top:2%;left:4%}
@media(max-width:850px){
  .story-scene .scene-world .scene-bubble {top:2%;left:4%;max-width:none;width:52%;font-size:12px;padding:7px 10px}
}
@media(max-width:520px){
  .story-scene .scene-world .scene-bubble {display:block;top:1%;left:2%;width:56%;max-width:205px;font-size:9px;line-height:1.14;padding:5px 7px;letter-spacing:-.12px}
  .story-scene[data-mood=fed] .scene-world .scene-bubble{top:1%;left:2%}
}
/* Cute matching illustrated icons, without system emoji variations. */
.friend-eyebrow{display:inline-flex;align-items:center;gap:7px;letter-spacing:1.1px}
.friend-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #e6c9a1;border-radius:10px;background:#fff2d9;flex-shrink:0}
.friend-icon svg{width:22px;height:22px;display:block}
.friend-icon-gold{background:#fff0c1;border-color:#e7cb7b}
.friend-icon-baby{background:#e5f3ef;border-color:#b4d5ca}
html[data-theme=dark] .friend-icon{background:#504035;border-color:#846448}
html[data-theme=dark] .friend-icon-gold{background:#604f31}
html[data-theme=dark] .friend-icon-baby{background:#31554e}
/* Hidden bonus sections must remain hidden until advice arrives. */
[hidden]{display:none!important}
.friend-grid a.friend-link{position:relative;z-index:3;pointer-events:auto}
.friend-grid a.friend-link:focus-visible{outline:3px solid #d9a94a;outline-offset:3px}

/* New sparrow: animated separate wings + lively floating flight. */
.sky-bird{position:fixed;top:8vh;left:6vw;width:104px;z-index:20;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;user-select:none;animation:birdCruise 16s linear infinite;filter:drop-shadow(0 8px 9px #09181933)}
.sky-bird:focus-visible{outline:3px solid #deb46f;border-radius:20px}
.bird-flight{display:block;transform-origin:50% 70%;animation:birdBob 1.3s ease-in-out infinite alternate;will-change:transform}
.bird-svg{display:block;width:100%;overflow:visible}
.bird-wing{transform-box:fill-box;transform-origin:50% 78%;will-change:transform}
.bird-wing-back{animation:birdWingBack .33s ease-in-out infinite alternate}
.bird-wing-front{animation:birdWingFront .33s ease-in-out infinite alternate-reverse}
.bird-tap-hint{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:800 9px var(--font);background:#fff8e9;border:1px solid #d6b884;border-radius:99px;padding:4px 8px;color:#5c654f;white-space:nowrap;box-shadow:0 4px 10px #13252120;pointer-events:none}
.sky-bird.is-stumbling,.sky-bird.is-fallen{animation:none!important}
.sky-bird.is-stumbling .bird-flight{animation:birdStumble 1.4s ease-in-out both}
.sky-bird.is-fallen .bird-flight{animation:birdFinalFall 1.02s cubic-bezier(.2,.6,.32,1) both}
.sky-bird.is-fallen .bird-wing{animation:none;transform:rotate(14deg)}
.sky-bird.is-fallen{cursor:default}
@keyframes birdWingBack{0%{transform:rotate(-33deg) scaleY(.85)}100%{transform:rotate(30deg) scaleY(1.12)}}
@keyframes birdWingFront{0%{transform:rotate(-31deg) scaleY(.86)}100%{transform:rotate(29deg) scaleY(1.1)}}
@keyframes birdBob{0%{transform:translateY(-5px)}100%{transform:translateY(5px)}}
@keyframes birdCruise{
  0%{transform:translate(0,0) rotate(-2deg)}
  16%{transform:translate(calc(var(--bird-travel-x,65vw) * .3),5vh) rotate(5deg)}
  34%{transform:translate(calc(var(--bird-travel-x,65vw) * .75),-2vh) rotate(-2deg)}
  52%{transform:translate(var(--bird-travel-x,65vw),10vh) rotate(5deg)}
  72%{transform:translate(calc(var(--bird-travel-x,65vw) * .52),22vh) rotate(-4deg)}
  87%{transform:translate(calc(var(--bird-travel-x,65vw) * .16),13vh) rotate(3deg)}
  100%{transform:translate(0,0) rotate(-2deg)}
}
@keyframes birdStumble{
  0%{transform:translateY(0) rotate(0deg)}
  36%{transform:translateY(var(--bird-drop,180px)) rotate(95deg)}
  49%{transform:translateY(calc(var(--bird-drop,180px) - 12px)) rotate(80deg)}
  62%{transform:translateY(var(--bird-drop,180px)) rotate(90deg)}
  83%{transform:translateY(-15px) rotate(-13deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@keyframes birdFinalFall{
  0%{transform:translateY(0) rotate(0deg)}
  75%{transform:translateY(var(--bird-drop,180px)) rotate(98deg)}
  90%{transform:translateY(calc(var(--bird-drop,180px) - 7px)) rotate(90deg)}
  100%{transform:translateY(var(--bird-drop,180px)) rotate(94deg)}
}
@media(max-width:520px){.sky-bird{top:7vh;left:4vw;width:70px}.bird-tap-hint{font-size:8px;padding:3px 6px}}
@media(prefers-reduced-motion:reduce){
 .sky-bird,.bird-flight,.bird-wing{animation:none!important}
 .sky-bird.is-fallen .bird-flight{transform:translateY(var(--bird-drop,90px)) rotate(95deg)}
}
html[data-theme=dark] .bird-tap-hint{background:#2d4140;color:#ecdfbf;border-color:#677c69}

/* Final responsive scene geometry: give the characters and speech separate vertical space. */
@media(max-width:520px){
 .story-scene{height:clamp(405px,112vw,485px)}
 .sky-bird{left:53vw;top:5vh}
 .bird-tap-hint{opacity:0;transition:opacity .15s ease}
 .sky-bird:hover .bird-tap-hint,.sky-bird:focus-visible .bird-tap-hint{opacity:1}
}
@media(min-width:521px) and (max-width:850px){.story-scene{height:535px}}
/* V14 final visual polish. */
.sky-bird{left:32vw;top:6vh;--bird-travel-x:50vw}
.bird-wing-back{transform-origin:100% 86%}
.bird-wing-front{transform-origin:4% 86%}
@media(min-width:521px) and (max-width:850px){.sky-bird{left:25vw;--bird-travel-x:55vw}}
@media(max-width:520px){
 .sky-bird{left:53vw;top:5vh;--bird-travel-x:-46vw}
 .story-scene .scene-world .scene-bubble{font-size:10px}
}

/* V15 — image upload, paste and preview inside the single-page question flow. */
.question-helpers{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.image-add-btn{display:inline-flex;align-items:center;gap:5px;color:#388765;font-weight:800}
.image-add-btn:disabled{opacity:.45}
.image-preview{margin-top:11px;border:1.5px dashed #c3d6c3;background:#f3f8ee;border-radius:13px;padding:9px;display:flex;align-items:center;gap:10px}
.image-preview[hidden],.image-error[hidden]{display:none!important}
.image-preview img{width:68px;height:64px;object-fit:cover;border-radius:9px;border:1px solid #dce5d8;background:#fff}
.image-preview-meta{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.image-preview-meta strong{font-size:11px;color:#375b44}
.image-preview-meta small{font-size:10px;color:#829a86}
.image-remove{border:0;border-radius:8px;width:28px;height:28px;flex:0 0 28px;font-size:19px;background:#e4eddf;color:#456f55;cursor:pointer}
.image-error{font-size:11px;color:#b34840;padding:7px 2px}
html[data-theme=dark] .image-preview{background:#223d36;border-color:#4b735e}
html[data-theme=dark] .image-preview-meta strong{color:#d5ead6}
html[data-theme=dark] .image-preview-meta small{color:#a0baa9}
html[data-theme=dark] .image-remove{background:#3c5b4b;color:#d9eedf}
@media(max-width:520px){.question-helpers{gap:6px}.image-preview img{width:56px;height:54px}}

/* V17 · Tiny, transparent support note and accessible one-page policies */
.support-disclosure{margin:12px 3px 0;color:#728878;font-size:10px;line-height:1.65;text-align:center;max-width:100%;overflow-wrap:break-word}
.support-disclosure>span{color:#ce875d;font-size:13px;margin-right:4px}
.payment-disclosure{margin:8px 3px 14px;text-align:left}
.legal-footer{margin-top:auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 0 25px;border-top:1px solid var(--line);font-size:10px;color:#849688}
.legal-footer nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.legal-link{padding:5px 0;border:0;background:transparent;color:#46745b;font:700 11px var(--font);cursor:pointer;text-decoration:underline;text-decoration-color:#8aa998;text-underline-offset:3px}
.legal-link:hover{color:#24583e}
.legal-dialog{width:min(560px,calc(100% - 32px));max-height:min(85dvh,780px);padding:0;border:1.5px solid #c9dccb;border-radius:23px;background:#fdfcf4;color:#2c4736;box-shadow:0 25px 80px #0e1e18a6;overflow:auto}
.legal-dialog::backdrop{background:#0e201bc4;backdrop-filter:blur(6px)}
.legal-panel{padding:23px clamp(17px,4vw,27px) 22px}
.legal-dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:1px solid #e0e9da;padding-bottom:12px}
.legal-eyebrow{color:#b38d65;letter-spacing:1.5px;font-size:9px;font-weight:800}
.legal-dialog h2{font:800 clamp(22px,5vw,29px)/1.25 var(--display);margin:4px 0 0}
.legal-close{width:32px;height:32px;flex:0 0 auto;background:#eef4ea;color:#365a45;border:1px solid #d8e6d8;border-radius:50%;font:700 22px/1 var(--display)}
.legal-dialog-body{font-size:12px;line-height:1.9;color:#4d6755;max-height:60dvh;overflow:auto;overscroll-behavior:contain}
.legal-dialog-body p{margin:15px 0 11px}
.legal-dialog-body ul{padding-left:19px;margin:10px 0}
.legal-dialog-body li{margin-bottom:9px}
.legal-dialog-body strong{color:#305441}
.legal-done{width:100%;border:0;border-radius:12px;background:var(--green);color:white;font:800 12px var(--font);padding:12px;margin-top:13px}
.legal-done:hover{filter:brightness(1.08)}
html[data-theme=dark] .support-disclosure{color:#9cb9ac}
html[data-theme=dark] .legal-footer{border-color:#334f48;color:#98b4a8}
html[data-theme=dark] .legal-link{color:#a6dac0;text-decoration-color:#779b8a}
html[data-theme=dark] .legal-dialog{background:#1d3232;border-color:#47685c;color:#e8f2e8}
html[data-theme=dark] .legal-dialog-heading{border-color:#3b5751}
html[data-theme=dark] .legal-dialog-body{color:#c4d9cc}
html[data-theme=dark] .legal-dialog-body strong{color:#e4f5e9}
html[data-theme=dark] .legal-close{background:#294a42;border-color:#517463;color:#d5ecdd}
@media(max-width:600px){.legal-footer{flex-direction:column;gap:5px;text-align:center;padding:16px 0 22px}.legal-footer nav{justify-content:center}.legal-dialog{max-height:90dvh}.legal-dialog-body{max-height:65dvh}}

/* V20 — Show exactly the user's prompt above the free AI advice. */
.advice-question{margin-bottom:13px;padding:13px 15px;background:#edf5ee;border:1px solid #cbded0;border-radius:14px}
.advice-question-label{display:flex;gap:6px;align-items:center;font-size:10px;letter-spacing:1.15px;font-weight:800;color:#3d7a5e}
.advice-question p{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:7px 0 0;color:#344c40;font-weight:600}
html[data-theme=dark] .advice-question{background:#273e39;border-color:#41665b}
html[data-theme=dark] .advice-question-label{color:#9cdbb7}
html[data-theme=dark] .advice-question p{color:#e0efe4}

/* V20 — Light butterfly game character; separate from the bird's counter and flight. */
.sky-butterfly{position:fixed;left:10vw;top:24vh;width:85px;z-index:18;display:block;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;user-select:none;animation:butterflyCruise 20s linear infinite;--butterfly-travel-x:72vw;filter:drop-shadow(0 7px 10px #40234e24)}
.sky-butterfly:focus-visible{outline:3px solid #d89ad2;border-radius:19px}
.butterfly-flight{display:block;transform-origin:50% 64%;animation:butterflyBob 1.55s ease-in-out infinite alternate;will-change:transform}
.butterfly-svg{display:block;width:100%;height:auto;overflow:visible}
.butterfly-wing{transform-box:fill-box;will-change:transform}
.butterfly-wing-left{transform-origin:100% 49%;animation:butterflyWingLeft .42s ease-in-out infinite alternate}
.butterfly-wing-right{transform-origin:0% 49%;animation:butterflyWingRight .42s ease-in-out infinite alternate}
.butterfly-tap-hint{position:absolute;left:50%;top:100%;transform:translateX(-50%);padding:4px 8px;background:#ffeffb;border:1px solid #cd9fc7;border-radius:999px;box-shadow:0 4px 12px #40204a20;color:#754474;font:800 9px var(--font);white-space:nowrap;pointer-events:none}
@keyframes butterflyWingLeft{from{transform:scaleX(.42) rotate(-8deg)}to{transform:scaleX(1) rotate(6deg)}}
@keyframes butterflyWingRight{from{transform:scaleX(.42) rotate(8deg)}to{transform:scaleX(1) rotate(-6deg)}}
@keyframes butterflyBob{from{transform:translateY(-6px) rotate(-4deg)}to{transform:translateY(7px) rotate(5deg)}}
@keyframes butterflyCruise{0%,100%{transform:translate(0,0) rotate(0deg)}15%{transform:translate(calc(var(--butterfly-travel-x) * .32),-6vh) rotate(-9deg)}35%{transform:translate(calc(var(--butterfly-travel-x) * .76),8vh) rotate(5deg)}55%{transform:translate(var(--butterfly-travel-x),-5vh) rotate(-6deg)}74%{transform:translate(calc(var(--butterfly-travel-x) * .58),11vh) rotate(7deg)}90%{transform:translate(calc(var(--butterfly-travel-x) * .12),2vh) rotate(-4deg)}}
.sky-butterfly.is-stumbling,.sky-butterfly.is-fallen{animation:none!important}
.sky-butterfly.is-stumbling .butterfly-flight{animation:butterflyStumble 1.4s ease-in-out both}
.sky-butterfly.is-fallen .butterfly-flight{animation:butterflyFinalFall 1.03s cubic-bezier(.2,.6,.3,1) both}
.sky-butterfly.is-fallen .butterfly-wing{animation:none;transform:scaleX(.62) rotate(14deg)}
.sky-butterfly.is-fallen{cursor:default}
@keyframes butterflyStumble{0%{transform:translateY(0) rotate(0)}37%{transform:translateY(var(--butterfly-drop,180px)) rotate(110deg)}52%{transform:translateY(calc(var(--butterfly-drop,180px) - 11px)) rotate(91deg)}65%{transform:translateY(var(--butterfly-drop,180px)) rotate(101deg)}84%{transform:translateY(-13px) rotate(-14deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes butterflyFinalFall{0%{transform:translateY(0) rotate(0)}76%{transform:translateY(var(--butterfly-drop,180px)) rotate(112deg)}89%{transform:translateY(calc(var(--butterfly-drop,180px) - 7px)) rotate(92deg)}100%{transform:translateY(var(--butterfly-drop,180px)) rotate(104deg)}}
@media(max-width:850px){.sky-butterfly{left:9vw;top:19vh;width:75px;--butterfly-travel-x:68vw}}
@media(max-width:520px){.sky-butterfly{left:12vw;top:21vh;width:60px;--butterfly-travel-x:53vw}.butterfly-tap-hint{font-size:8px;opacity:0;transition:opacity .15s}.sky-butterfly:hover .butterfly-tap-hint,.sky-butterfly:focus-visible .butterfly-tap-hint{opacity:1}}
html[data-theme=dark] .butterfly-tap-hint{background:#38273d;border-color:#9f7eaa;color:#f2d4ee}
@media(prefers-reduced-motion:reduce){.sky-butterfly,.butterfly-flight,.butterfly-wing{animation:none!important}.sky-butterfly.is-fallen .butterfly-flight{transform:translateY(var(--butterfly-drop,90px)) rotate(104deg)}}
/* Keep the butterfly in the illustrated sky, away from the main headline. */
@media(min-width:851px){.sky-butterfly{left:79vw;top:21vh;--butterfly-travel-x:-24vw}}
@media(min-width:521px) and (max-width:850px){.sky-butterfly{left:75vw;top:31vh;--butterfly-travel-x:-40vw}}
@media(max-width:520px){.sky-butterfly{left:66vw;top:37vh;--butterfly-travel-x:-40vw}}

/* V21: Chim ngủ 60 giây có đồng hồ hiện rõ trên desktop/mobile, sau đó vươn dậy bay tiếp. */
.sky-bird.is-fallen:disabled{opacity:1}
.sky-bird.is-fallen .bird-tap-hint{opacity:1!important;background:#fff5db;color:#7b5a3b;border-color:#cfb78c;box-shadow:0 3px 12px #2d352e33;font-variant-numeric:tabular-nums}
html[data-theme=dark] .sky-bird.is-fallen .bird-tap-hint{background:#35463c;color:#fce5bc;border-color:#8f8465}
.sky-bird.is-waking{animation:none!important;cursor:default}
.sky-bird.is-waking .bird-flight{animation:birdWakeUp 1.1s cubic-bezier(.22,.8,.26,1) both}
@keyframes birdWakeUp{
  0%{transform:translateY(var(--bird-drop,180px)) rotate(94deg)}
  38%{transform:translateY(calc(var(--bird-drop,180px) * .5)) rotate(36deg)}
  70%{transform:translateY(-11px) rotate(-11deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.sky-bird.is-waking .bird-flight{animation:none!important}}

/* V22 — Góc phố tương tác: truyện 3 chặng + mini game ảo. */
.playground{padding:10px 0 56px;position:relative;z-index:2}
.playground-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 20px}
.playground-eyebrow,.play-kicker,.game-label{display:block;color:#7f906e;font-size:10px;font-weight:900;letter-spacing:1.1px}
.playground-heading h2{font:800 clamp(29px,3.1vw,45px)/1.08 var(--display);margin:9px 0 6px;letter-spacing:-.8px;color:var(--ink)}
.playground-heading h2 em{font-style:normal;color:#d68c60}
.playground-heading p{font-size:12px;color:var(--ink-soft);margin:0}
.playground-free{border:1px solid #a6c7ac;border-radius:99px;padding:7px 13px;background:#eaf3e5;color:#377b5c;white-space:nowrap;font-weight:900;font-size:10px;letter-spacing:.4px}
.playground-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px;align-items:stretch}
.play-card{min-width:0;padding:22px 23px 24px;border-radius:24px;border:1.5px solid #dfdfd0;background:#fffdf7;box-shadow:0 15px 40px #3e483110}
.story-card{background:linear-gradient(145deg,#fff9ec 0%,#fffdf8 63%);border-color:#eadbc4}
.mini-card{background:linear-gradient(145deg,#eef5ef,#fcfdf7 72%);border-color:#d4e3d5}
.play-card-top{display:flex;gap:12px;align-items:center;min-width:0}
.play-icon{flex-shrink:0;width:49px;height:49px;border-radius:15px;background:#f4dfbd;display:grid;place-items:center;font-size:26px;box-shadow:inset 0 -3px 0 #d6b795}
.mini-card .play-icon{background:#cfe4d5;box-shadow:inset 0 -3px 0 #a7ceb4}
.play-card-top>div{min-width:0;flex:1}
.play-card h3{font:800 22px/1.08 var(--display);margin:5px 0 0;color:#344f41}
.play-flag{flex-shrink:0;padding:5px 8px;background:#fff2d5;border:1px solid #e5d5ae;border-radius:7px;font-size:8px;font-weight:900;white-space:nowrap;color:#9a6b3c}
.mini-card .play-flag{color:#417454;background:#e6f3e6;border-color:#c1ddc6}
.play-desc{font-size:11px;line-height:1.75;color:#778277;margin:14px 0 17px}
.story-setup,.story-inplay{min-height:234px}
.story-scenarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.story-scenario{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:15px 6px 12px;border-radius:13px;border:1.5px solid #e9d8bf;background:#fffdf8;color:#435c4b;transition:background .2s,transform .2s,border-color .2s;text-align:center}
.story-scenario:hover{background:#ffedcf;transform:translateY(-3px);border-color:#cba575}
.story-scenario>span{font-size:29px}
.story-scenario strong{font:800 12px var(--font)}
.story-scenario small{color:#8b8d75;font-size:10px}
.story-progress-head,.mini-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;font-weight:900;letter-spacing:.55px;color:#8e7e62}
.play-text-button{border:0;background:transparent;color:#6b9377;font-size:10px;font-weight:800;padding:5px 0;white-space:nowrap}
.play-text-button:hover{text-decoration:underline}
.story-progress{width:100%;height:7px;background:#f1e7d2;border-radius:99px;overflow:hidden;margin:7px 0 16px}
.story-progress>span{display:block;background:linear-gradient(90deg,#f0aa70,#80b691);height:100%;width:0;border-radius:inherit;transition:width .28s}
.story-narrative{display:flex;gap:10px;padding:15px 15px 14px;background:#fff2dd;border:1px solid #f3e0bb;border-radius:15px;box-shadow:3px 4px 0 #e9ddc54d}
.story-narrative-icon{font-size:18px;color:#c88857;line-height:1.2}
.story-narrative p{margin:0;color:#665540;font:650 12px/1.75 var(--font)}
.story-question{font-weight:800;font-size:12px;margin:16px 0 9px;color:#46634f}
.story-choices{display:grid;grid-template-columns:1fr;gap:8px}
.story-choice{display:flex;gap:11px;align-items:center;text-align:left;padding:10px 12px;background:#fff;border:1.5px solid #e9e5db;border-radius:11px;color:#42614f;font-weight:700;font-size:11px;transition:transform .15s,background .15s,border-color .15s}
.story-choice:hover{transform:translateX(3px);background:#eff7ea;border-color:#abc5a6}
.story-choice-num{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:8px;background:#e8eede;color:#508168;font-weight:900}
.story-complete{margin-top:13px;padding:17px;background:#edf5e7;border:1px dashed #a7bca0;border-radius:14px;text-align:center}
.story-done-mark{display:block;font-size:26px;line-height:1;color:#c98d55}
.story-complete strong{display:block;color:#467350;font-size:13px;margin:8px 0 3px}
.story-complete p{font-size:11px;color:#70816f;margin:4px 0 12px}
.play-primary,.play-secondary{border:0;border-radius:11px;background:#2c7659;color:#fff;padding:11px 16px;min-height:41px;font-size:11px;font-weight:900}
.play-primary{width:100%}.play-primary:hover,.play-secondary:hover{background:#235941}
.play-primary:disabled{opacity:.6;cursor:wait}
.story-complete p.play-help{font-size:10px;color:#7e887f;margin:11px 0 0;line-height:1.55}
.play-turnstile{display:flex;justify-content:center;max-width:100%;overflow:hidden;margin:11px auto}
.story-ending{margin-top:15px;background:#f7f0df;border:1px solid #e6d9b9;border-radius:15px;padding:15px 16px}
.story-ending-text{white-space:pre-line;font-size:12px;line-height:1.85;color:#54624d;margin:10px 0 15px}
.story-ending .play-secondary{background:#6e8e64}
.play-error{margin:12px 0 0;padding:10px 12px;border:1px solid #d9a69b;border-radius:9px;color:#aa4232;background:#fff1ed;font-size:11px}
.mini-selector{display:flex;gap:7px;margin:2px 0 17px}
.mini-mode{flex:1;min-width:0;border:1px solid #d7e4d8;background:#f9fcf5;color:#567961;border-radius:11px;padding:9px 5px;font-size:10px;font-weight:800;white-space:nowrap}
.mini-mode:hover{background:#edf4e8}
.mini-mode.active{background:#347957;color:#fff;border-color:#347957;box-shadow:0 3px 0 #24553b}
.mini-progress-head{color:#627c6b;letter-spacing:0;margin:0 0 8px}
.mini-progress-head>span{font-size:10px;line-height:1.3}
.mini-progress-head strong{color:#367557;font-size:13px;white-space:nowrap}
.mini-arena{height:212px;position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,#bfdfd5 0%,#cde7d7 60%,#ecf0c8 100%);border:1.5px solid #b6d0c2;isolation:isolate}
.mini-arena:before{content:'✳';position:absolute;left:12%;top:10%;font-size:21px;color:#fff8d9;opacity:.7}
.mini-arena:after{content:'✦';position:absolute;right:15%;top:17%;font-size:22px;color:#fff9da;opacity:.8}
.mini-cloud{position:absolute;top:23px;left:40%;width:65px;height:17px;border-radius:99px;background:#f7fdf0bf;filter:blur(.4px)}
.mini-cloud-b{left:69%;top:39px;transform:scale(.7)}
.mini-hill{position:absolute;bottom:-38px;left:-10%;width:125%;height:87px;border-radius:50% 55% 0 0;background:#8db79a;box-shadow:0 -10px 0 #a3c7a3bb}
.mini-target{position:absolute;left:57%;top:51%;z-index:2;width:58px;height:58px;transform:translate(-50%,-50%);border:2px solid #fff1bc;background:#fff2cd;border-radius:50%;font-size:35px;box-shadow:0 5px 0 #729b76,0 10px 21px #4265472e;transition:left .18s,top .18s,transform .18s}
.mini-target:hover{transform:translate(-50%,-50%) scale(1.12)}
.mini-target:active{transform:translate(-50%,-50%) scale(.9)}
.mini-target.is-butterfly{border-color:#f4d1e8;background:#fff3fa;animation:miniFlutter .7s ease-in-out infinite alternate}
@keyframes miniFlutter{from{rotate:-8deg}to{rotate:8deg}}
.mini-cups{position:absolute;z-index:2;inset:35px 10px 35px;display:flex;justify-content:center;align-items:center;gap:10px}
.mini-cups>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:43px;padding:10px 14px;background:#f8f4d6d9;border:2px solid #f8f8d5;border-radius:14px;box-shadow:0 7px 0 #88a489;transition:transform .15s}
.mini-cups>button:hover{transform:translateY(-4px);background:#fff6d3}
.mini-cups small{font-size:10px;color:#4d705e;font-weight:800}
.mini-arena.is-complete{box-shadow:inset 0 0 0 3px #f6cb7b}
.mini-arena.is-complete .mini-confetti{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 24% 30%,#fcdf87 0 5px,transparent 6px),radial-gradient(circle at 78% 44%,#eea987 0 5px,transparent 6px),radial-gradient(circle at 44% 72%,#fbe6ad 0 5px,transparent 6px),radial-gradient(circle at 88% 14%,#e99dc2 0 4px,transparent 5px)}
.mini-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:9px 0 14px}
.mini-message{font-size:10px;color:#60846b;font-weight:700;line-height:1.55}
.mini-achievements{border-top:1px dashed #cbdcc9;padding-top:14px}
.mini-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.mini-badge{display:inline-flex;gap:5px;padding:6px 9px;border:1px solid #d4e2d5;border-radius:99px;background:#fff;color:#617868;font-size:10px;font-weight:800}
.mini-badge.locked{opacity:.5;filter:grayscale(1)}
.mini-badge.unlocked{color:#467454;background:#ecf6e4;border-color:#afd4a7}
html[data-theme=dark] .playground-free{background:#29483a;color:#b5edca;border-color:#407657}
html[data-theme=dark] .play-card,html[data-theme=dark] .story-card{background:linear-gradient(145deg,#302f2c,#242e2e);border-color:#59604f}
html[data-theme=dark] .mini-card{background:linear-gradient(145deg,#253e36,#213232);border-color:#45665a}
html[data-theme=dark] .play-card h3{color:#e7ead9}
html[data-theme=dark] .play-desc,html[data-theme=dark] .playground-heading p{color:#b7cbbd}
html[data-theme=dark] .play-flag{background:#3b433a;border-color:#5d6b51;color:#e7bd83}
html[data-theme=dark] .story-scenario,html[data-theme=dark] .story-choice{background:#303e37;border-color:#506756;color:#e4eedd}
html[data-theme=dark] .story-scenario:hover,html[data-theme=dark] .story-choice:hover{background:#415b49}
html[data-theme=dark] .story-scenario small{color:#b5bba5}
html[data-theme=dark] .story-narrative{background:#413a2e;border-color:#756548}
html[data-theme=dark] .story-narrative p{color:#f0e3c7}
html[data-theme=dark] .story-question{color:#c7dfc6}
html[data-theme=dark] .story-complete{background:#304637;border-color:#637a5d}
html[data-theme=dark] .story-complete strong{color:#d5f0c6}
html[data-theme=dark] .story-complete p{color:#bdcdb7}
html[data-theme=dark] .story-ending{background:#353b30;border-color:#5b6b4d}
html[data-theme=dark] .story-ending-text{color:#e3ead9}
html[data-theme=dark] .mini-mode{background:#2c4238;border-color:#4b705c;color:#c9e3cb}
html[data-theme=dark] .mini-mode.active{background:#4d936c;border-color:#4d936c;color:#fff}
html[data-theme=dark] .mini-progress-head{color:#b9d7c3}
html[data-theme=dark] .mini-message{color:#b4d2bb}
html[data-theme=dark] .mini-badge{background:#2b4337;border-color:#4b6656;color:#c6dfcc}
html[data-theme=dark] .mini-badge.unlocked{background:#376049;color:#e5f8e4}
@media(max-width:900px){.playground-grid{grid-template-columns:1fr}.playground{max-width:700px;width:100%;margin:auto}.play-card{padding:20px}.story-setup,.story-inplay{min-height:0}}
@media(max-width:520px){.playground{padding:0 0 35px}.playground-heading{display:block;margin-bottom:16px}.playground-heading h2{font-size:32px}.playground-free{display:inline-block;margin-top:12px;font-size:9px}.play-card{padding:17px 14px;border-radius:18px}.play-card-top{gap:9px}.play-card h3{font-size:20px}.play-icon{width:43px;height:43px;font-size:23px}.play-flag{font-size:7px;padding:5px}.story-scenarios{gap:6px}.story-scenario{padding:12px 3px 10px}.story-scenario>span{font-size:24px}.story-scenario strong{font-size:10px;line-height:1.4}.story-scenario small{font-size:9px}.playground-grid{gap:14px}.mini-mode{font-size:9px;padding:9px 2px}.mini-arena{height:195px}.mini-cups>button{font-size:35px;padding:10px 9px}.playground-heading p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.mini-target.is-butterfly{animation:none}}

.playground-jump{display:inline-flex;gap:9px;align-items:center;margin-top:13px;padding:9px 13px;border:1px solid #d2dfc5;background:#eff5e7;border-radius:999px;color:#4a8060;font-weight:800;font-size:11px;transition:transform .15s,background .15s}
.playground-jump:hover{transform:translateY(-2px);background:#e2efd8}
html[data-theme=dark] .playground-jump{color:#c0edca;border-color:#4b7056;background:#2b4537}
@media(max-width:520px){.playground-jump{font-size:10px;padding:8px 11px}}

/* V23 — Góc phố tiến hóa: tất cả đạo cụ là thế giới hoạt hình, không phải cứu trợ thật. */
.street-evolution{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.street-prop{position:absolute;display:block;opacity:0;pointer-events:none;max-width:none;height:auto;transform:translateY(13px) scale(.96);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 6px 4px #31544722)}
.street-prop-tree{width:22%;min-width:60px;max-width:142px;left:-2%;bottom:7%;}
.street-prop-lantern{width:14%;min-width:40px;max-width:84px;left:46%;bottom:10%;}
.street-prop-awning{width:49%;max-width:300px;right:3%;bottom:26%;}
.street-prop-house{width:35%;max-width:195px;right:31%;bottom:27%;}
.street-prop-festival{width:94%;left:3%;top:4%;}
.story-scene:is([data-world-level="2"],[data-world-level="3"],[data-world-level="4"],[data-world-level="5"],[data-world-level="6"]) .street-prop-tree,
.story-scene:is([data-world-level="3"],[data-world-level="4"],[data-world-level="5"],[data-world-level="6"]) .street-prop-lantern,
.story-scene:is([data-world-level="4"],[data-world-level="5"],[data-world-level="6"]) .street-prop-awning,
.story-scene:is([data-world-level="5"],[data-world-level="6"]) .street-prop-house,
.story-scene[data-world-level="6"] .street-prop-festival{opacity:1;transform:translateY(0) scale(1)}
.street-evolution-panel{position:relative;z-index:10;padding:11px 19px 10px;background:#f0f7eb;border-top:1px solid #c8dfc6;display:flex;flex-direction:column;gap:7px}
.street-evolution-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.street-evolution-kicker{font:900 9px/1.3 var(--font);letter-spacing:1.1px;color:#668c68;white-space:nowrap}
.street-evolution-head strong{font:800 11px/1.35 var(--display);color:#326c50;text-align:right}
.street-evolution-bar{height:6px;background:#d5e5d3;border-radius:99px;overflow:hidden;border:1px solid #c8dbc7}
.street-evolution-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#8bc89c,#ecbb75);border-radius:99px;transition:width .8s ease}
.street-evolution-bottom{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;font-size:9px;line-height:1.4;color:#688270;font-weight:700}
.street-evolution-virtual{font-size:9px;color:#899c8b;font-weight:600}
.story-scene.street-levelup .street-evolution-head strong{animation:streetCongrats 1.1s ease-out}
@keyframes streetCongrats{0%,100%{transform:scale(1)}30%{transform:scale(1.1);color:#ca8b45}}
html[data-theme=dark] .street-evolution-panel{background:#243c35;border-color:#426652}
html[data-theme=dark] .street-evolution-kicker{color:#a3ccae}
html[data-theme=dark] .street-evolution-head strong{color:#d6f1d8}
html[data-theme=dark] .street-evolution-bar{background:#385448;border-color:#4a6854}
html[data-theme=dark] .street-evolution-bottom{color:#c0dbc5}
html[data-theme=dark] .street-evolution-virtual{color:#a6bba8}
html[data-theme=dark] .street-prop-lantern{filter:drop-shadow(0 0 12px #ffde886b)}
@media(max-width:850px){
  .street-prop-tree{width:21%;left:0;bottom:7%}
  .street-prop-lantern{left:46%;bottom:9%}
  .street-prop-house{right:31%;bottom:29%}
  .street-prop-awning{right:5%;bottom:26%}
}
@media(max-width:520px){
  .street-prop-tree{width:23%;left:-3%;bottom:6%;min-width:48px}
  .street-prop-lantern{width:13%;min-width:30px;left:43%;bottom:9%}
  .street-prop-house{width:37%;right:27%;bottom:30%}
  .street-prop-awning{width:50%;right:1%;bottom:27%}
  .street-prop-festival{width:100%;left:0;top:3%}
  .street-evolution-panel{padding:9px 12px;gap:6px}
  .street-evolution-kicker{font-size:8px;letter-spacing:.6px}
  .street-evolution-head strong{font-size:10px}
  .street-evolution-bottom{font-size:8px}
  .street-evolution-virtual{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .street-prop,.street-evolution-bar span{transition:none!important}
  .story-scene.street-levelup .street-evolution-head strong{animation:none!important}
}