.modal-backdrop[hidden] { display: none; }

:root { --ink: #24345d; --cream: #fff8e7; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body { color: var(--ink); font-family: Arial, Helvetica, sans-serif; background: #7bdcff; }
button { font: inherit; }
.game-shell { min-height: 100vh; display: flex; flex-direction: column; background: #7bdcff; }
.hud { height: 76px; flex: 0 0 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 30px; background: rgba(255,255,255,.96); border-bottom: 5px solid #d2edff; position: relative; z-index: 20; box-shadow: 0 4px 0 rgba(36,52,93,.08); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .04em; font-size: 19px; }
.brand b { color: #ff507c; }.heart { display: grid; place-items: center; width: 38px; height: 38px; color: white; font-size: 22px; background: #ff527b; border-radius: 50%; box-shadow: inset 0 -4px rgba(159,28,66,.18); }
.journey { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .16em; font-weight: 900; }
.progress { width: 220px; height: 12px; padding: 2px; border-radius: 10px; background: #dce7ef; box-shadow: inset 0 2px 2px #bdcbd5; }
.progress i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg,#ff507c,#ffb32c); transition: width .25s; }
.sound { justify-self: end; border: 0; background: #edf6fb; color: var(--ink); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px; }
.game-viewport { flex: 1; min-height: 480px; position: relative; overflow: hidden; background: linear-gradient(#64cdf7 0%, #a8e9ff 55%, #ecfcff 100%); }
.world { position: absolute; left: 0; top: 0; width: 3500px; height: 100%; transition: transform .08s linear; will-change: transform; }
.sky-glow { position: absolute; width: 350px; height: 350px; border-radius: 50%; background: rgba(255,255,255,.28); filter: blur(14px); left: 70px; top: -170px; }
.cloud { position: absolute; top: 90px; width: 130px; height: 34px; border-radius: 50px; background: rgba(255,255,255,.9); filter: drop-shadow(0 5px 0 rgba(71,152,198,.08)); }
.cloud i { position: absolute; display:block; background: inherit; border-radius: 50%; width: 55px; height: 55px; top:-22px; left:20px; }.cloud i:nth-child(2){width:75px;height:75px;left:48px;top:-40px}.cloud i:nth-child(3){left:88px;top:-12px}.cloud-1{top:145px;transform:scale(.72)}.cloud-2{top:55px;transform:scale(.88)}
.hills { position: absolute; bottom: 126px; left: 0; width: 100%; height: 280px; opacity: .55; background: radial-gradient(ellipse at 9% 100%,#72d68a 0 11%,transparent 11.5%),radial-gradient(ellipse at 31% 100%,#65cc83 0 14%,transparent 14.5%),radial-gradient(ellipse at 58% 100%,#78dd91 0 12%,transparent 12.5%),radial-gradient(ellipse at 82% 100%,#62c77d 0 16%,transparent 16.5%); background-size:1200px 280px; }
.hills.near { height: 190px; bottom: 105px; opacity: 1; background-size: 950px 220px; filter: saturate(1.15); }
.tree { position:absolute; bottom:108px; width:55px;height:170px; z-index:2}.tree i{position:absolute;left:22px;bottom:0;width:22px;height:100px;background:#9a5b3d;border-radius:8px}.tree-top{position:absolute;left:-37px;top:-5px;width:130px;height:130px;border-radius:48% 52% 45% 55%;background:#35a968;box-shadow:inset -14px -15px #218a55, inset 16px 15px #66cc83}.tree-top.t1{transform:scale(.8);background:#47b66c}
.bush{position:absolute;bottom:111px;width:130px;height:64px;border-radius:70px 70px 15px 15px;background:#41b963;box-shadow:inset 0 -12px #29984a;z-index:3}.bush:before,.bush:after{content:"";position:absolute;background:inherit;border-radius:50%;width:74px;height:74px;top:-28px;left:12px}.bush:after{left:56px;top:-18px}
.ground { position:absolute; bottom:0; width:100%; height:120px; background: linear-gradient(#a76a35 0 13%,#cc8749 13% 100%); box-shadow: inset 0 8px #704627; z-index:5; }
.ground:after{content:"";position:absolute;inset:22px 0 0;background-image:radial-gradient(#9c5f30 1.5px,transparent 2px);background-size:28px 25px;opacity:.55}.grass{height:22px;background:linear-gradient(#4fd262 0 35%,#2da84a 36%);clip-path:polygon(0 25%,1% 0,2% 38%,3% 8%,4% 40%,5% 0,6% 34%,7% 12%,8% 40%,9% 0,10% 35%,100% 35%,100% 100%,0 100%)}
.memory-marker{position:absolute;bottom:113px;z-index:7;width:110px;text-align:center;transform:translateX(-50%)}.marker-label{display:inline-block;background:white;border:3px solid var(--ink);border-radius:8px;padding:4px 7px;font-size:9px;letter-spacing:.12em;font-weight:900;box-shadow:0 3px rgba(36,52,93,.15)}.marker-heart{width:58px;height:58px;margin:9px auto 0;display:grid;place-items:center;background:#ff527b;color:white;border:5px solid white;border-radius:50%;font-size:30px;filter:drop-shadow(0 4px 0 rgba(38,48,75,.2));animation:bob 1.5s ease-in-out infinite}.marker-date{background:#26385f;color:white;font-size:8px;font-weight:900;letter-spacing:.09em;padding:5px;border-radius:5px;margin-top:5px}.memory-marker.visited .marker-heart{background:#28b77a}.memory-marker.visited .marker-label:after{content:" ✓";color:#20a76e}
.player{position:absolute;bottom:108px;width:70px;height:118px;z-index:10;transform:translateX(-50%)}.head{position:absolute;width:52px;height:53px;left:10px;top:2px;border-radius:50%;background:#f3bd90;border:3px solid #523b48;z-index:3;box-shadow:inset 12px 9px #5a3540}.head:before{content:"";position:absolute;left:5px;top:-8px;width:43px;height:23px;background:#5a3540;border-radius:50% 55% 30% 20%}.head i{position:absolute;width:5px;height:8px;border-radius:50%;background:#26385f;right:10px;top:22px}.head b{position:absolute;width:9px;height:4px;border-bottom:2px solid #9a4e55;border-radius:50%;right:6px;top:34px}.ponytail{position:absolute;left:-3px;top:17px;width:28px;height:47px;border-radius:60% 15% 60% 40%;background:#50313b;transform:rotate(18deg)}.body{position:absolute;left:13px;top:48px;width:45px;height:47px;border-radius:15px 15px 6px 6px;background:#ff6289;border:3px solid #523b48;z-index:2}.body:after{content:"";position:absolute;right:-23px;top:7px;width:27px;height:11px;border:3px solid #523b48;border-left:0;background:#f3bd90;border-radius:0 10px 10px 0}.body span{position:absolute;left:12px;top:11px;color:white}.body span:after{content:"♥"}.leg{position:absolute;bottom:1px;width:15px;height:29px;background:#354d83;border:3px solid #523b48;border-radius:4px}.leg.one{left:17px}.leg.two{left:41px}.leg:after{content:"";position:absolute;bottom:-5px;left:-5px;width:22px;height:9px;border-radius:8px;background:#fff;border:3px solid #523b48}.shadow{position:absolute;bottom:-7px;left:5px;width:63px;height:13px;border-radius:50%;background:rgba(31,67,60,.2);z-index:-1}.walking .body{animation:hop .32s ease-in-out infinite alternate}.walking .leg.one{animation:walk .32s linear infinite alternate}.walking .leg.two{animation:walk .32s linear infinite alternate-reverse}
.start-sign,.finish-sign{position:absolute;bottom:118px;z-index:6;background:#fff0c8;border:4px solid #71472d;box-shadow:inset 0 0 0 3px #d69d51,0 4px rgba(0,0,0,.15);padding:10px 18px;text-align:center;font-size:11px;font-weight:900;letter-spacing:.1em}.start-sign{left:35px}.finish-sign{left:3320px}.start-sign:after,.finish-sign:after{content:"";position:absolute;width:8px;height:50px;background:#71472d;left:50%;top:100%}.start-sign small,.finish-sign small{font-size:8px;color:#b46a43}
.instructions{position:absolute;z-index:15;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);padding:9px 14px;border-radius:13px;box-shadow:0 4px 0 rgba(36,52,93,.15);font-size:11px;font-weight:700}.instructions kbd{min-width:25px;padding:4px;text-align:center;background:#e8f1f6;border:1px solid #b4c5d0;border-bottom-width:3px;border-radius:5px;font-weight:900}.instructions span:last-child{margin-left:4px}.mobile-controls{display:none;position:absolute;z-index:15;bottom:20px;left:20px;right:20px;justify-content:space-between}.mobile-controls button{width:62px;height:62px;border-radius:50%;border:3px solid white;background:rgba(36,52,93,.78);color:white;font-size:28px;box-shadow:0 5px rgba(22,35,70,.35);touch-action:none}
.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(31,42,76,.72);backdrop-filter:blur(6px);animation:fade .2s ease}.memory-card{--accent:#ff527b;position:relative;width:min(820px,95vw);min-height:450px;display:grid;grid-template-columns:1fr 1.05fr;gap:42px;padding:42px;background:var(--cream);border:6px solid white;border-radius:28px;box-shadow:0 28px 70px rgba(13,24,57,.35),inset 0 0 0 3px #eadfc8;animation:pop .28s cubic-bezier(.2,1.4,.5,1)}.close{position:absolute;right:17px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:#e9ddc8;color:#695f59;font-size:29px;line-height:35px;cursor:pointer;z-index:3}.photo-wrap{position:relative;align-self:center;height:335px;padding:13px 13px 43px;background:white;transform:rotate(-2deg);box-shadow:0 9px 22px rgba(58,46,40,.18)}.photo-wrap img,.photo-fallback{position:absolute;left:13px;right:13px;top:13px;bottom:43px;width:calc(100% - 26px);height:calc(100% - 56px);object-fit:cover}.photo-fallback{display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,var(--accent),#ffd27f);color:white}.photo-fallback span{font-size:72px;filter:drop-shadow(0 5px rgba(0,0,0,.12))}.photo-fallback small{font-weight:900;line-height:1.5;letter-spacing:.06em;text-transform:uppercase}.tape{position:absolute;width:95px;height:28px;left:50%;top:-16px;transform:translateX(-50%) rotate(2deg);background:rgba(255,221,125,.74)}.memory-copy{align-self:center}.eyebrow{font-size:11px!important;color:var(--accent)!important;letter-spacing:.2em;font-weight:900;text-transform:uppercase;margin:0 0 10px!important}.memory-copy h1{font-family:Georgia,serif;font-size:48px;line-height:.98;margin:0;color:#26385f;letter-spacing:-.04em}.memory-copy>p{font-family:Georgia,serif;font-size:17px;line-height:1.7;color:#5c6172}.squiggle{margin:17px 0;color:var(--accent);letter-spacing:.3em}.continue{margin-top:8px;border:0;border-radius:12px;background:var(--accent);color:white;padding:13px 18px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--accent),#000 25%)}.continue span{margin-left:15px}
@keyframes bob{50%{transform:translateY(-8px)}}@keyframes hop{to{transform:translateY(-4px)}}@keyframes walk{to{transform:rotate(20deg)}}@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.88)}}
@media(max-width:700px){.hud{height:64px;flex-basis:64px;padding:0 14px;grid-template-columns:1fr auto}.brand{font-size:14px}.heart{width:31px;height:31px}.journey{display:none}.game-viewport{min-height:400px}.instructions{display:none}.mobile-controls{display:flex}.memory-card{grid-template-columns:1fr;gap:20px;padding:25px;max-height:90vh;overflow:auto}.photo-wrap{height:230px;margin:10px 15px 0}.memory-copy h1{font-size:36px}.memory-copy>p{font-size:15px}.close{position:fixed;right:7vw;top:7vh}.sound{width:34px;height:34px}.world{height:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}