@font-face{font-family:"Dancing Script";src:url("assets/DancingScript.ttf") format("truetype");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("assets/BeVietnamPro-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("assets/BeVietnamPro-SemiBold.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}

:root{
  color-scheme:light;
  --paper:#fff9f2;
  --paper-deep:#fff0e2;
  --line:#efd9c6;
  --ink:#3f2a3c;
  --ink-soft:#7a5a6e;
  --coral:#ff7a66;
  --coral-deep:#e2554a;
  --coral-soft:#ffe3da;
  --rose:#e8578c;
  --teal:#5aa9b8;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --script:"Dancing Script",cursive;
  --ease:cubic-bezier(.22,.8,.22,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --slow:1.6s;
}

/* The day goes by as Nga reads: golden afternoon, sunset, dusk, then a starry night.
   The island keeps its colours; a tint (--dim, --dim-c) lays the light of each hour over it. */
body,body[data-phase="day"]{
  --bg:#ffe2c2;
  --dim:0;--dim-c:#1c1d4a;
  --cf:#f9dcc6;--cf-s:#f1c8ad;--cf-t:#fde9da;--cn:#f2bfa3;--cn-s:#e2a487;--cn-t:#f8d2bd;
  --label:#7a4a5e;
  --hwin:#bfe3f0;--bulb:#fff6df;--lamp-on:0;--beam:0;--stars:0;
  --cloud:#fff;--cloud-shade:#ffe1d6;--cloud-o:.85;
  --sun-y:0;--sun-o:1;--sunset-o:0;--moon-o:0;
}
body[data-phase="sunset"]{
  --bg:#ffc4a8;
  --dim:.14;--dim-c:#ff5a4a;
  --cf:#f6b4a2;--cf-s:#ec9f8e;--cf-t:#fcc9b8;--cn:#e8968c;--cn-s:#d77d78;--cn-t:#f2ae9f;
  --cloud:#ffe4d8;--cloud-shade:#ffbfae;--cloud-o:.8;
  --sun-y:15dvh;--sun-o:1;--sunset-o:1;--moon-o:0;
}
body[data-phase="dusk"]{
  --bg:#c9a0c4;
  --dim:.28;--dim-c:#3b2c7a;
  --cf:#a993c8;--cf-s:#9580b8;--cf-t:#bba8d6;--cn:#7f6aae;--cn-s:#6a579a;--cn-t:#9481bf;
  --hwin:#ffd98a;--bulb:#ffe08a;--lamp-on:.8;--beam:.6;--stars:.4;
  --cloud:#e6d4f0;--cloud-shade:#c3acdf;--cloud-o:.6;
  --sun-y:32dvh;--sun-o:0;--sunset-o:1;--moon-o:0;
}
body[data-phase="night"]{
  --bg:#262857;
  --dim:.44;--dim-c:#161a5a;
  --cf:#3f3e75;--cf-s:#34336a;--cf-t:#4a4983;--cn:#2d2c5c;--cn-s:#242352;--cn-t:#383768;
  --hwin:#ffd27a;--bulb:#ffe28a;--lamp-on:1;--beam:1;--stars:1;
  --cloud:#6a68a4;--cloud-shade:#4d4b86;--cloud-o:.5;
  --sun-y:36dvh;--sun-o:0;--sunset-o:0;--moon-o:1;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0}
body{min-height:100vh;min-height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Be Vietnam Pro",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:pan-y pinch-zoom;overscroll-behavior:none;transition:background-color var(--slow) ease}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px}
::selection{background:var(--coral);color:#fff}
p{margin:0}

/* Sky: four gradients cross-fade, with a sun that sets behind the city and a moon that rises. */
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.sky-layer{position:absolute;inset:0;opacity:0;transition:opacity var(--slow) var(--ease)}
.sky--day{opacity:1;background:linear-gradient(180deg,#ffc79c 0,#ffdcb8 38%,#fff0df 72%,#ffe6cf 100%)}
.sky--sunset{background:linear-gradient(180deg,#ff8f86 0,#ffa58f 30%,#ffc9a6 62%,#ffe0c4 100%)}
.sky--dusk{background:linear-gradient(180deg,#5f5aa8 0,#9a7fc0 34%,#e3a3bd 70%,#ffc2b0 100%)}
.sky--night{background:linear-gradient(180deg,#141842 0,#262a5e 40%,#3f3a78 75%,#5a4888 100%)}
body[data-phase="sunset"] .sky--sunset,body[data-phase="dusk"] .sky--dusk,body[data-phase="night"] .sky--night{opacity:1}

.stars{position:absolute;inset:0 0 35%;opacity:var(--stars);transition:opacity var(--slow) ease}
.star{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;opacity:.35;animation:star-twinkle var(--d) ease-in-out var(--delay) infinite alternate}
.star--big{background:none;box-shadow:none;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background-color:#fff}
@keyframes star-twinkle{to{opacity:1}}

.sun{position:absolute;left:66%;top:9dvh;width:min(30vmin,190px);aspect-ratio:1;margin-left:min(-15vmin,-95px);border-radius:50%;background:radial-gradient(circle,#fff7d6 0 30%,#ffe08f 31% 45%,#ffd27a00 46%);opacity:var(--sun-o);transform:translateY(var(--sun-y));transition:transform 2.2s var(--ease),opacity var(--slow) ease}
.sun:before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,#ffd99a99 0,#ffd99a00 62%)}
.sun:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#ffd8a8 0 30%,#ff8a6a 31% 45%,#ff8a6a00 46%);opacity:var(--sunset-o);transition:opacity var(--slow) ease}
.moon{position:absolute;left:78%;top:7dvh;width:min(11vmin,70px);aspect-ratio:1;border-radius:50%;box-shadow:inset calc(min(11vmin,70px) * -.26) calc(min(11vmin,70px) * .12) 0 0 #fff1c9;filter:drop-shadow(0 0 14px #fff1c980);opacity:var(--moon-o);transform:translateY(calc((1 - var(--moon-o)) * 30px)) rotate(-12deg);transition:opacity 2s ease,transform 2.4s var(--ease)}

.cloud{position:absolute;width:var(--w);height:calc(var(--w)*.34);border-radius:999px;background:var(--cloud);opacity:var(--cloud-o);transition:background-color var(--slow) ease,opacity var(--slow) ease;animation:cloud-drift var(--t) linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud:before{left:16%;bottom:30%;width:44%;height:130%}
.cloud:after{left:46%;bottom:22%;width:34%;height:100%}
.cloud--a{--w:120px;--t:80s;top:7%;left:-20%}
.cloud--b{--w:80px;--t:100s;top:24%;left:-30%;animation-delay:-45s}
.cloud--c{--w:150px;--t:120s;top:44%;left:-30%;animation-delay:-80s}
@keyframes cloud-drift{to{transform:translateX(150vw)}}

/* The map: a floating island in isometric view, on three layers (city behind, island, clouds in front). */
.scene{position:fixed;z-index:2;left:0;right:0;top:0;height:54dvh;display:flex;align-items:center;justify-content:center;padding:max(8px,env(safe-area-inset-top)) 8px 3dvh;transform:scale(var(--fit,1));transform-origin:50% 0;transition:transform .7s var(--ease)}
.stage{--mx:0;--my:0;position:relative;flex:1 1 auto;width:100%;height:100%;max-width:540px}
.layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.layer svg{display:block;width:100%;height:100%;overflow:visible}
.layer--city,.layer--front{pointer-events:none}
.layer--city{transform:translate(calc(var(--mx) * -7px),calc(var(--my) * -4px))}
.layer--island{transform:perspective(1000px) rotateX(calc(var(--my) * -4deg)) rotateY(calc(var(--mx) * 5deg)) translate(calc(var(--mx) * 3px),calc(var(--my) * 2px));will-change:transform;animation:island-drift 9s ease-in-out infinite alternate}
.layer--front{transform:translate(calc(var(--mx) * 14px),calc(var(--my) * 8px))}
body.has-tilt .layer--island{animation:none}
@keyframes island-drift{from{transform:perspective(1000px) rotateX(2deg) rotateY(-3deg) translateY(1px)}to{transform:perspective(1000px) rotateX(-1deg) rotateY(3deg) translateY(-4px)}}

/* Distant city */
.cf-f{fill:var(--cf)}.cf-s{fill:var(--cf-s);stroke:var(--cf-s)}.cf-t{fill:var(--cf-t)}
.cn-f{fill:var(--cn)}.cn-s{fill:var(--cn-s);stroke:var(--cn-s)}.cn-t{fill:var(--cn-t)}
.cf-f,.cf-s,.cf-t,.cn-f,.cn-s,.cn-t{transition:fill var(--slow) ease,stroke var(--slow) ease}
.win{fill:#ffd98a;opacity:0;transition:opacity .8s ease var(--wd)}
body[data-phase="dusk"] .win.is-early,body[data-phase="night"] .win{opacity:.95}
body[data-phase="night"] .win--far{opacity:.6}
.spire-light{fill:#ff6b6b;opacity:var(--lamp-on);transition:opacity var(--slow) ease;animation:blink 1.6s steps(2,jump-none) infinite}
@keyframes blink{50%{fill:#ff6b6b00}}

/* Clouds around the island */
.cloud-puff{fill:var(--cloud)}
.cloud-shade{fill:var(--cloud-shade)}
.cloud-puff,.cloud-shade{transition:fill var(--slow) ease}
.cloud-g{animation:cloud-bob 7s ease-in-out infinite alternate}
.cloud-g--back{opacity:.9}
.cloud-g--b{animation-duration:9s;animation-delay:-3s}
.cloud-g--c{animation-duration:8s;animation-delay:-5s}
@keyframes cloud-bob{to{translate:6px -2px}}

/* Island body */
.tile{fill:#eef2d8}
.tile-rim{stroke:#fffbe9;stroke-width:1.6;stroke-opacity:.8}
.stone{fill:#e7b892}
.stone-r{fill:#c38a6c}
.park{fill:#cde6a6}
.park-in{fill:#dcefbd}
.path-stone{stroke:#e9e1c7}
.flowerbed{fill:#ff8fb1}
.fl-a{fill:#ff8fb1}.fl-b{fill:#ffd36b}.fl-c{fill:#fff}
.river-bed{stroke:#6aaac3;stroke-width:27;stroke-linecap:round;fill:#6aaac3}
.river{stroke:#a6dbec;stroke-width:21;stroke-linecap:round;fill:#a6dbec}
circle.river,circle.river-bed{stroke:none}
.river-shine{stroke:#f2fbfe;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:7 12;animation:river-flow 5s linear infinite}
@keyframes river-flow{to{stroke-dashoffset:-95}}
.lily{fill:#8cc77a}
.road-curb{stroke:#d3c4a6;stroke-width:17;stroke-linecap:round}
.road-edge{stroke:#ebe0c8;stroke-width:17;stroke-linecap:round}
.road{stroke:#fffdf8;stroke-width:13;stroke-linecap:round}
.road-dash{stroke:#f7b39a;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:6 7}
.route-done{stroke:var(--coral);stroke-width:4.2;stroke-linecap:round;stroke-opacity:.92}
.shade{fill:#6b3f3a;fill-opacity:.15}
.fall-streak{stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:6 10;opacity:.85;animation:fall 1.1s linear infinite}
@keyframes fall{to{stroke-dashoffset:-32}}

/* Night tint: a copy of each shape, filled with the hour's colour. Lit things are drawn after it. */
.dim-ground,.dim{opacity:var(--dim);transition:opacity var(--slow) ease;pointer-events:none}
.dim-ground *{fill:var(--dim-c)!important;transition:fill var(--slow) ease}
.dim *:not([fill="none"]){fill:var(--dim-c)!important}
.dim *{stroke:var(--dim-c)!important}
.lamp-pool{fill:url(#gPool);opacity:var(--lamp-on);transition:opacity var(--slow) ease}
.lamp-halo{fill:url(#gLamp);opacity:var(--lamp-on);transition:opacity var(--slow) ease}

.stop{cursor:pointer}
.stop-glow{opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.stop-glow.is-here{opacity:1}
.landmark{transform-box:fill-box;transform-origin:50% 100%}
.stop.just-arrived .landmark{animation:land-hop .7s var(--bounce)}
@keyframes land-hop{40%{scale:1.06 .94}70%{scale:.97 1.04}}

/* Map pins */
.pin-bob{animation:pin-bob 3s ease-in-out infinite}
.pin:nth-child(2) .pin-bob{animation-delay:-1s}
.pin:nth-child(3) .pin-bob{animation-delay:-2s}
@keyframes pin-bob{50%{transform:translateY(-3px)}}
.pin-shadow{fill:#3f2a3c;opacity:.14}
.pin-bg,.pin-tail{fill:#fffaf4;transition:fill .4s ease}
.pin-bg{stroke:#f3dccb;stroke-width:1}
.pin-text{font-family:var(--script);font-weight:700;font-size:16.5px;text-anchor:middle;fill:var(--label);transition:fill .4s ease}
.pin.is-here .pin-bg,.pin.is-here .pin-tail{fill:var(--coral)}
.pin.is-here .pin-bg{stroke:var(--coral-deep)}
.pin.is-here .pin-text{fill:#fff}
.pin.just-arrived .pin-bob{animation:pin-pop .6s var(--bounce),pin-bob 3s ease-in-out .6s infinite}
@keyframes pin-pop{40%{transform:translateY(-8px) scale(1.08)}}

/* Nga's house */
.house-l{fill:#ffe4d3}.house-r{fill:#f4c1a9}.house-t{fill:#ff957c}
.roof-in{fill:#ef7e68}
.trim{fill:#fff}
.rail{stroke:#fff;stroke-width:1.2}
.planter{fill:#c98a6a}
.bloom{fill:#ff6f91}.bloom-y{fill:#ffd36b}
.awning{fill:#ff9d86}
.door{fill:#e07a68}
.knob{fill:#ffd36b}
.tank{fill:#e3e8f1}.tank-top{fill:#f7f9fc}.tank-leg{stroke:#a9b1c2;stroke-width:1.4}
.pot{fill:#c98a6a}.bush{fill:#8fc57a}.bush-b{fill:#a9d68f}
.house-win{fill:var(--hwin);transition:fill var(--slow) ease}
body[data-phase="dusk"] .house-win,body[data-phase="night"] .house-win{filter:drop-shadow(0 0 3px #ffd27a)}
.mullion{stroke:#fff;stroke-opacity:.85;stroke-width:1.2}
.heart-sign{fill:#ff6f91}
/* Bánh canh stall */
.wood-l{fill:#e6b386}.wood-r{fill:#c9946b}.wood-t{fill:#f3cda4}
.band{fill:#ff8a73}
.plank{stroke:#c08660;stroke-width:.8}
.post{stroke:#b98d70;stroke-width:2.2;stroke-linecap:round}
.canopy-l{fill:#f26f5c}.canopy-r{fill:#d9584b}.canopy-t{fill:#ff8a73}
.stripe{fill:#fff4ea}
.valance{fill:#ff8a73}.valance-r{fill:#e2604f}
.stool-r-l{fill:#f26b61}.stool-r-r{fill:#d4504a}.stool-r-t{fill:#ff8a80}.stool-r-hole{fill:#c9433e}
.stool-b-l{fill:#6e9be0}.stool-b-r{fill:#5482c8}.stool-b-t{fill:#8fb8f0}.stool-b-hole{fill:#4a74b8}
.bowl{fill:#fff}
.bowl-shade{fill:#e9eef8}
.bowl-foot{fill:#d9dfec}
.bowl-band{stroke:#7fa7e0;stroke-width:2.4}
.broth{fill:#f5a15f}
.noodle{stroke:#fff2d9;stroke-width:1.6;stroke-linecap:round}
.scallion{fill:#6fbf5e}
.claw{fill:#f2604e}
.steam{stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-opacity:.85;animation:steam 2.8s ease-in-out infinite}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-8px)}}
.bulb{fill:#fff3d6;transition:fill var(--slow) ease}
body[data-phase="dusk"] .bulb,body[data-phase="night"] .bulb{fill:#ffd36b;filter:drop-shadow(0 0 2.5px #ffd36b)}
/* Sữa chua dẻo cart */
.cart-l{fill:#c2e8dc}.cart-r{fill:#9fd3c4}.cart-t{fill:#e3f6ef}
.cart-stripe{fill:#fff;opacity:.9}
.wheel{fill:#5d4e6e}.hub{fill:#e6ddf0}
.handle{stroke:#9c8fa8;stroke-width:2.2;stroke-linecap:round}
.parasol{fill:#ffa3c0}.parasol-shade{fill:#f283a7}.parasol-rib{stroke:#e8789c;stroke-width:1.2}.finial{fill:#ff6f91}
.cube{fill:#fff8ee;stroke:#f3dcc6;stroke-width:.8}
.cup{fill:url(#gCup);stroke:#e4d6f3;stroke-width:1.2}
.syrup{stroke:#ff7fa6;stroke-width:2.2;stroke-linecap:round}
.spoon{stroke:#e2dcee;stroke-width:2.2;stroke-linecap:round}.spoon-head{fill:#e9e4f2}
.twinkle{fill:#fff;animation:twinkle 2.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes twinkle{from{opacity:.2;transform:scale(.7)}to{opacity:1;transform:scale(1.15) rotate(20deg)}}
.face{fill:#5b2a45}
.face-line{stroke:#5b2a45;stroke-width:1.4;stroke-linecap:round}
.blush{fill:#ff8fb8;fill-opacity:.8}
/* Trees and lamps */
.trunk{fill:#b88a68}.tree-c{fill:#77ad65}.tree-a{fill:#9ccb7e}.tree-b{fill:#c7e6a3}
.lamp-base{fill:#8e81a0}.lamp-post{fill:#a395ae}.lamp-arm{stroke:#a395ae;stroke-width:2;stroke-linecap:round}
.lamp-bulb{fill:var(--bulb);transition:fill var(--slow) ease}

/* The scooter: mình driving, Nga on the back. */
.scooter{pointer-events:none}
.scooter-shadow{fill:#3f2a3c;opacity:.2}
.scooter-bob{animation:idle-bob 1.4s ease-in-out infinite}
.scooter.is-driving .scooter-bob{animation:drive-bob .18s linear infinite}
@keyframes idle-bob{50%{transform:translateY(-.8px)}}
@keyframes drive-bob{50%{transform:translateY(-1.1px)}}
.beam{fill:url(#gBeam);opacity:var(--beam);transition:opacity var(--slow) ease}
.tyre{fill:#3f3350}
.rim{fill:#d9d2e6}
.spoke{stroke:#d9d2e6;stroke-width:1.2;transform-box:fill-box;transform-origin:center}
.scooter.is-driving .spoke{animation:spin .35s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.body-paint{fill:#ff7a66}
.body-shine{stroke:#ffd0c4;stroke-width:1.6;stroke-linecap:round}
.seat{fill:#6e3f33}
.floor{fill:#5d4a63}
.fender{stroke:#ff7a66;stroke-width:2.6;stroke-linecap:round}
.bar{stroke:#5d4a63;stroke-width:1.8;stroke-linecap:round}
.basket{fill:#d9a46f}
.headlight{fill:#fff3b0}
.skin{fill:#ffd7bf}
.hair{fill:#5a3a3a}
.me-shirt{fill:#5a8fd6}
.me-arm{stroke:#5a8fd6;stroke-width:2.6;stroke-linecap:round}
.me-helmet{fill:#3e5aa8}
.visor{stroke:#cfe0ff;stroke-width:1.4;stroke-linecap:round}
.nga-shirt{fill:#ff9ebb}
.nga-arm{stroke:#ff9ebb;stroke-width:2.4;stroke-linecap:round}
.nga-helmet{fill:#ff6f91}
.helmet-heart{fill:#fff}
.leg{stroke:#4d3f5c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.leg--nga{stroke:#6a5478}
.trail-heart{fill:#ff8fab}

/* Bougainvillea petals drift down behind the card; tap one for a little note. */
.petals{position:fixed;z-index:3;inset:0;overflow:hidden;pointer-events:none}
.petal{position:absolute;left:var(--x);top:calc(var(--s) * -1 - 20px);width:var(--s);height:var(--s);pointer-events:auto;cursor:pointer;animation:petal-fall var(--d) linear var(--delay) infinite}
.petal:before{content:"";position:absolute;inset:-12px}
.petal i{position:absolute;inset:0;background:linear-gradient(140deg,var(--c1),var(--c2));-webkit-mask:var(--flower) center/contain no-repeat;mask:var(--flower) center/contain no-repeat;animation:petal-sway calc(var(--d) / 4) ease-in-out infinite alternate}
.petal--near i{filter:blur(1.2px)}
.petal--far{opacity:.65}
.petal b{position:absolute;left:50%;top:50%;width:18%;height:18%;margin:-9% 0 0 -9%;border-radius:50%;background:#fff6c8;box-shadow:0 0 0 1px #ffe08a}
:root{--flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -22 44 44'%3E%3Cg id='p'%3E%3Cpath d='M0 0C-9-3-13-11-10-17C-7-22 0-21 0-21C0-21 7-22 10-17C13-11 9-3 0 0Z'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(120)'/%3E%3Cuse href='%23p' transform='rotate(240)'/%3E%3C/svg%3E")}
@keyframes petal-fall{to{transform:translate3d(var(--drift),calc(100dvh + var(--s) + 60px),0)}}
@keyframes petal-sway{from{transform:translateX(calc(var(--sway) * -1)) rotate(-25deg) scale(1,.9)}to{transform:translateX(var(--sway)) rotate(35deg) scale(.9,1)}}
.pop{position:fixed;z-index:4;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);pointer-events:none}
.pop i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;background:var(--c);-webkit-mask:var(--flower) center/contain no-repeat;mask:var(--flower) center/contain no-repeat;animation:pop-bit .6s ease-out forwards}
@keyframes pop-bit{to{transform:rotate(var(--a)) translateY(calc(var(--s) * -1)) rotate(180deg) scale(.4);opacity:0}}

.pop-message{position:fixed;z-index:6;left:var(--x,50%);top:var(--y,40%);width:max-content;max-width:min(260px,80vw);padding:10px 16px;border-radius:18px;background:var(--paper);color:var(--rose);font-family:var(--script);font-weight:700;font-size:1.3rem;line-height:1.2;text-align:center;box-shadow:0 10px 30px #3f2a3c33,0 0 0 1.5px var(--line);transform:translate(-50%,-100%) scale(.7);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .35s var(--bounce)}
.pop-message:after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;background:var(--paper);border-radius:0 0 4px 0;box-shadow:1.5px 1.5px 0 var(--line);transform:rotate(45deg)}
.pop-message.is-visible{opacity:1;transform:translate(-50%,-100%) translateY(-10px) scale(1)}

/* The card is a ticket: airmail stripe on top, a perforated tear line with notches above the buttons. */
.card{position:fixed;z-index:5;left:0;right:0;bottom:0;display:flex;filter:drop-shadow(0 -6px 22px #3f2a3c2e)}
.card-paper{--ny:-40px;position:relative;display:flex;flex-direction:column;width:100%;min-height:46dvh;max-height:62dvh;padding:28px max(22px,env(safe-area-inset-left) + 18px) max(14px,env(safe-area-inset-bottom) + 8px) max(22px,env(safe-area-inset-right) + 18px);background:linear-gradient(180deg,var(--paper) 0,var(--paper) 70%,var(--paper-deep) 100%);border-radius:30px 30px 0 0;overflow:hidden;text-align:center;-webkit-mask:radial-gradient(circle 13px at 0 var(--ny),#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 13px at 100% var(--ny),#0000 96%,#000) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle 13px at 0 var(--ny),#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 13px at 100% var(--ny),#0000 96%,#000) 100% 0/51% 100% no-repeat}
.card-paper:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(-45deg,var(--coral) 0 12px,var(--paper) 12px 18px,var(--teal) 18px 30px,var(--paper) 30px 36px)}
.card-body{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;gap:9px;padding:4px 2px}
.card-body::-webkit-scrollbar{display:none}
.card-body>:first-child{margin-top:auto}
.card-body:after{content:"";margin-top:auto}
.card-body>*{transition:opacity .35s ease,transform .45s var(--ease)}
.card-body.is-leaving>*{opacity:0;transform:translateY(8px);transition-duration:.18s}

.card-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-deep)}
.card-eyebrow:before,.card-eyebrow:after{content:"";width:22px;height:1.5px;border-radius:2px;background:currentColor;opacity:.45}
.card-title{margin:0;max-width:17ch;font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,7.6vw,2.4rem);line-height:1.16;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.card-title .word{display:inline-block;animation:word-in .75s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 60ms)}
.card-title .script{font-family:var(--script);font-weight:700;font-size:1.22em;line-height:.9;letter-spacing:0;color:var(--rose)}
@keyframes word-in{from{opacity:0;transform:translateY(.4em) rotate(-3deg);filter:blur(4px)}}
.card-note{max-width:32ch;font-size:.94rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}

.place{position:relative;display:grid;justify-items:start;gap:2px;width:100%;max-width:340px;margin-top:4px;padding:12px 14px 13px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 20px #e2554a14;text-align:left}
.place:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--coral)}
.place-name{font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--ink)}
.place-address{font-size:.8rem;line-height:1.45;color:var(--ink-soft)}
.place-hours{font-size:.78rem;font-weight:600;color:var(--teal)}
.place-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.place-links .pill-link{padding:6px 12px;font-size:.76rem}
.pill-link{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border-radius:999px;background:var(--coral-soft);color:var(--coral-deep);font-weight:600;font-size:.8rem;text-decoration:none;transition:background .2s ease,transform .2s var(--ease)}
.pill-link--soft{background:#e4f2f4;color:#3c7f8c}
.pill-link:hover{filter:brightness(.97)}
.pill-link:active{transform:scale(.96)}

.ticket{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:350px;margin-top:2px;padding:10px 12px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 20px #e2554a14}
.ticket-meta{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:0 0 4px;padding:0 0 8px;border-bottom:1.5px dashed var(--line)}
.ticket-meta div{display:grid;gap:1px}
.ticket-meta div+div{border-left:1px solid var(--line)}
.ticket-meta dt{font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.8}
.ticket-meta dd{margin:0;font-family:var(--serif);font-weight:700;font-size:.92rem;color:var(--ink)}
.route-list{position:relative;width:100%;margin:2px 0 4px;padding:0;list-style:none;text-align:left}
.route-list:before{content:"";position:absolute;left:13px;top:16px;bottom:16px;border-left:2.5px dotted #f5b4a6}
.route-item{position:relative;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;width:100%;padding:2px 6px 2px 0;border:0;border-radius:12px;background:none;text-align:left;transition:background .2s ease}
.route-item:hover{background:#ffe3da80}
.route-num{display:grid;place-items:center;width:26px;height:26px;margin-left:1px;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--serif);font-weight:700;font-size:.85rem;box-shadow:0 2.5px 0 var(--coral-deep)}
.route-text{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:7px;min-width:0;line-height:1.3}
.route-text b{font-weight:600;font-size:.86rem;color:var(--ink)}
.route-text small{font-size:.74rem;color:var(--ink-soft)}
.ticket .pill-link{margin-top:6px}
.stamp{position:absolute;right:2px;bottom:44px;display:grid;place-items:center;width:86px;height:86px;border-radius:50%;border:3px solid var(--rose);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5.5px var(--rose);color:var(--rose);font-family:var(--serif);font-weight:700;font-size:.95rem;line-height:1.1;text-align:center;text-transform:uppercase;letter-spacing:.06em;background:#fff9f266;opacity:0;transform:rotate(-14deg);pointer-events:none}
.stamp span{max-width:62px}
.stamp.is-stamped{animation:stamp-in .5s cubic-bezier(.3,1.4,.5,1) forwards}
.stamp.is-set{opacity:.92;transform:rotate(-14deg)}
@keyframes stamp-in{0%{opacity:0;transform:rotate(-24deg) scale(2.4)}60%{opacity:.95;transform:rotate(-12deg) scale(.92)}100%{opacity:.92;transform:rotate(-14deg) scale(1)}}
.ticket.is-thumped{animation:thump .4s ease-out .22s}
@keyframes thump{30%{transform:translateY(3px) scale(.99)}}

.perforation{position:relative;z-index:1;flex:none;height:0;margin:14px -10px 0;border-top:2px dashed var(--line)}
.card-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;margin-top:14px}
.btn{position:relative;min-height:48px;padding:12px 22px;border:0;border-radius:999px;font-weight:600;font-size:.95rem;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn--main{min-width:156px;color:#fff;background:linear-gradient(180deg,#ff9f86 0,#ff7a66 55%,#f2604e 100%);box-shadow:0 5px 0 var(--coral-deep),0 14px 24px #e2554a47;text-shadow:0 1px 0 #c2433a80}
.btn--main:before{content:"";position:absolute;left:16%;right:16%;top:5px;height:36%;border-radius:999px;background:linear-gradient(180deg,#ffffffa6,#fff0);pointer-events:none}
.btn--main:active{transform:translateY(4px);box-shadow:0 1px 0 var(--coral-deep),0 6px 14px #e2554a40}
.btn--ghost{background:#fff;color:var(--coral-deep);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 #f4e3d4}
.btn--ghost:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--line),0 1px 0 #f4e3d4}
.btn--main.is-wiggle{animation:wiggle 2.4s ease-in-out 1.2s infinite}
@keyframes wiggle{0%,72%,100%{transform:none}76%{transform:rotate(-3deg) scale(1.03)}82%{transform:rotate(3deg) scale(1.03)}88%{transform:rotate(-2deg)}}

.dots{position:relative;z-index:1;display:flex;justify-content:center;gap:7px;margin-top:14px}
.dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#f3d3c6;transition:width .35s var(--ease),background .35s ease}
.dot:after{content:"";position:absolute;inset:-9px -4px}
.dot.is-active{width:24px;background:var(--coral)}
.card-hint{position:relative;z-index:1;margin-top:10px;font-size:.74rem;color:var(--coral)}

.confetti-bit{position:fixed;z-index:7;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);pointer-events:none;background:var(--c)}
.confetti-bit--flower{-webkit-mask:var(--flower) center/contain no-repeat;mask:var(--flower) center/contain no-repeat}
.confetti-bit--heart{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -29 32 30'%3E%3Cpath d='M0 0C-4-4-15-11-15-19C-15-25-10-28-6-28C-3-28-1-26 0-24C1-26 3-28 6-28C10-28 15-25 15-19C15-11 4-4 0 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -29 32 30'%3E%3Cpath d='M0 0C-4-4-15-11-15-19C-15-25-10-28-6-28C-3-28-1-26 0-24C1-26 3-28 6-28C10-28 15-25 15-19C15-11 4-4 0 0Z'/%3E%3C/svg%3E") center/contain no-repeat}

.no-script{position:fixed;z-index:9;left:50%;bottom:20px;transform:translateX(-50%);padding:10px 16px;border-radius:14px;background:#fff;color:var(--coral-deep)}

/* Wide screens and phones held sideways: map on the left, ticket on the right. */
@media (min-width:900px),(orientation:landscape) and (max-height:560px){
  .scene{right:auto;bottom:0;height:auto;width:calc(100% - min(440px,38vw) - clamp(28px,5vw,80px));padding:5vh 2vw 5vh 4vw}
  .stage{max-width:none;max-height:92vh}
  .card{left:auto;right:clamp(28px,5vw,80px);top:50%;bottom:auto;transform:translateY(-50%);width:min(440px,38vw);filter:drop-shadow(0 22px 40px #3f2a3c33)}
  .card-paper{min-height:min(500px,84dvh);max-height:88dvh;padding:40px 30px 22px;border-radius:26px}
  .sun{left:34%}
  .moon{left:12%;top:10dvh}
}
@media (orientation:landscape) and (max-height:560px){
  .card-paper{min-height:0;padding:24px 24px 12px}
  .card-title{font-size:1.8rem}
  .card-actions{margin-top:10px}
  .dots{margin-top:10px}
  .card-hint{display:none}
}
@media (max-width:899px) and (orientation:portrait){
  body[data-chapter="5"] .card-paper{max-height:78dvh;padding-top:22px}
  body[data-chapter="5"] .card-body{gap:7px}
  body[data-chapter="5"] .card-title{font-size:1.65rem}
  body[data-chapter="5"] .card-note{font-size:.88rem;line-height:1.5}
}
@media (max-width:899px) and (max-height:700px) and (orientation:portrait){
  .scene{height:50dvh}
  .card-paper{min-height:50dvh;max-height:74dvh;padding-top:24px}
  body[data-chapter="5"] .card-paper{max-height:86dvh}
  .card-title{font-size:1.75rem}
  .card-note{font-size:.88rem}
  .card-hint{display:none}
}

@media (max-width:380px){
  .place-links .pill-link{padding:6px 10px;font-size:.74rem}
}

body.is-paused *,body.is-paused *:before,body.is-paused *:after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .cloud,.cloud-g,.star,.river-shine,.fall-streak,.steam,.twinkle,.spire-light,.scooter-bob,.scooter.is-driving .spoke,.pin-bob,.layer--island,.btn--main.is-wiggle,.ticket.is-thumped{animation:none}
  .petal,.petal i{animation-duration:0s;animation-iteration-count:1}
  .card-title .word{animation:none}
  .stamp.is-stamped{animation:none;opacity:.92;transform:rotate(-14deg)}
  .sun,.moon,.sky-layer,.win{transition-duration:.01s}
  .layer--city,.layer--island,.layer--front{transform:none}
}