:root {
  --blue:#5799d2;
  --blue-deep:#2e6fae;
  --green:#79b86c;
  --green-deep:#4c8c47;
  --yellow:#ffd05a;
  --orange:#f39a55;
  --pink:#ee8fa8;
  --purple:#9a86cf;
  --cream:#fff7e8;
  --paper:#fffdf7;
  --ink:#3f4b55;
  --muted:#73808a;
  --shadow:0 10px 25px rgba(68,83,97,.18);
  --soft-shadow:0 6px 14px rgba(68,83,97,.14);
  --radius:28px;
  --safe-top:max(12px,env(safe-area-inset-top));
  --safe-bottom:max(12px,env(safe-area-inset-bottom));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;overflow-x:hidden;background:linear-gradient(#dff1fc,#fff7e8 55%,#f3e7c9);font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink)}
body{min-height:100dvh;touch-action:manipulation}
button,input,select{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.hidden{display:none!important}
#app{min-height:100dvh;display:flex;align-items:stretch;justify-content:center;padding:var(--safe-top) 14px var(--safe-bottom)}
.screen{width:min(1180px,100%);min-height:calc(100dvh - var(--safe-top) - var(--safe-bottom));display:flex;flex-direction:column;position:relative}
.paper-panel{background:rgba(255,253,247,.94);border:3px solid rgba(255,255,255,.85);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 6px 14px}
.topbar h1{margin:0;font-size:clamp(1.4rem,3.5vw,2.35rem);color:#39546b;text-shadow:0 2px #fff}
.icon-btn,.round-btn{border:0;background:linear-gradient(#fff,#f0eadc);box-shadow:var(--soft-shadow);border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-size:1.65rem;color:var(--ink);transition:transform .15s ease}
.icon-btn:active,.round-btn:active,.btn:active,.profile-card:active,.level-node:active{transform:translateY(3px) scale(.98)}
.btn{border:0;border-radius:22px;padding:14px 24px;min-height:58px;font-weight:900;font-size:1.15rem;box-shadow:0 6px 0 rgba(53,92,121,.18),var(--soft-shadow);transition:transform .15s ease,filter .15s ease;color:#fff}
.btn.primary{background:linear-gradient(#73b4e7,#3e83c2)}
.btn.green{background:linear-gradient(#95cc72,#5fa24f)}
.btn.orange{background:linear-gradient(#ffb565,#ee8243)}
.btn.purple{background:linear-gradient(#b5a0e6,#866fc0)}
.btn.cream{color:var(--ink);background:linear-gradient(#fffdf5,#f4e8cc)}
.btn.danger{background:linear-gradient(#e9988e,#c96f67)}
.btn.small{min-height:44px;padding:10px 16px;font-size:1rem;border-radius:16px}
.btn:disabled{filter:grayscale(.7);opacity:.55;cursor:not-allowed}
.logo{width:min(520px,86vw);margin:auto}
.splash{justify-content:center;align-items:center;text-align:center;gap:22px}
.splash-friends{display:flex;gap:10px;align-items:flex-end;justify-content:center}
.splash-friends img{height:min(260px,34vh);object-fit:contain;filter:drop-shadow(0 10px 12px rgba(60,60,60,.15))}
.loading-path{width:min(420px,75vw);height:18px;background:#eadbb8;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.12)}
.loading-path::after{content:"";display:block;width:35%;height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--orange));border-radius:inherit;animation:loading 1.5s ease-in-out infinite}
@keyframes loading{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.center-title{text-align:center;margin:18px 0 22px;font-size:clamp(2rem,5vw,3.5rem);color:#4b6a7f}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,36px);max-width:900px;margin:auto;width:100%}
.profile-card{border:0;overflow:hidden;padding:0;position:relative;min-height:430px;background:linear-gradient(#fff,#f8efe0);border-radius:34px;box-shadow:var(--shadow);border:4px solid #fff;transition:transform .2s ease}
.profile-card:hover{transform:translateY(-5px)}
.profile-card.serena{background:linear-gradient(#fae7ee,#fff7e9)}
.profile-card.riley{background:linear-gradient(#dff0fa,#f8f4dd)}
.profile-card img{height:330px;width:100%;object-fit:contain;object-position:center bottom;padding-top:14px}
.profile-card .profile-info{padding:10px 18px 22px}
.profile-card h2{font-size:2rem;margin:0 0 6px}
.profile-card.serena h2{color:#d75d84}.profile-card.riley h2{color:#3d84bd}
.star-pill{display:inline-flex;align-items:center;gap:8px;background:#fff8d9;border:2px solid #f1d07c;padding:8px 15px;border-radius:999px;font-weight:900}
.corner-actions{display:flex;gap:10px;justify-content:center;margin:22px 0 6px}
.home-main{flex:1;display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:22px;align-items:stretch}
.hero-card{padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative}
.hero-card:before{content:"";position:absolute;inset:auto -10% -20% -10%;height:55%;background:radial-gradient(ellipse,#8cc474 0,#8cc474 45%,transparent 46%)}
.hero-card img{height:min(430px,55vh);object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 10px 10px rgba(0,0,0,.13))}
.hero-card h2{position:relative;z-index:2;margin:0 0 6px;font-size:clamp(1.7rem,4vw,2.8rem)}
.home-actions{padding:24px;display:flex;flex-direction:column;justify-content:center;gap:18px;background:linear-gradient(145deg,rgba(224,242,253,.96),rgba(255,247,232,.96))}
.home-actions .btn.primary{font-size:clamp(1.6rem,4vw,2.2rem);min-height:84px}
.secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.map-shell{flex:1;padding:10px;overflow:hidden;position:relative}
.map-canvas{position:relative;width:100%;height:100%;min-height:560px;border-radius:24px;overflow:hidden;background:#b9ddf5}
.map-bg{width:100%;height:100%;object-fit:cover}
.map-pin{position:absolute;border:0;border-radius:50%;width:90px;height:90px;background:linear-gradient(#fff,#f2efe5);box-shadow:0 8px 18px rgba(0,0,0,.24);font-size:2.6rem;border:5px solid #fff;animation:breathe 2.2s ease-in-out infinite;display:grid;place-items:center}
.map-pin.shadow{left:22%;top:26%}.map-pin.memory{left:37%;top:21%;filter:grayscale(.8);opacity:.75;animation:none}
.map-label{position:absolute;background:rgba(255,253,247,.93);padding:9px 15px;border-radius:16px;box-shadow:var(--soft-shadow);font-weight:900;white-space:nowrap}
.map-label.shadow{left:18%;top:40%}.map-label.memory{left:33%;top:35%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.reward-glow,.flower-patch{position:absolute;left:46%;top:42%;border:0;background:transparent;font-size:4.4rem;filter:drop-shadow(0 6px 5px rgba(0,0,0,.22))}
.reward-glow{animation:glow 1.1s ease-in-out infinite}
@keyframes glow{0%,100%{transform:scale(.95);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 8px #ffd75c)}50%{transform:scale(1.16);filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 22px #ffd75c)}}
.map-help{position:absolute;right:18px;bottom:18px;background:rgba(255,255,255,.9);border-radius:18px;padding:10px 15px;font-weight:900;box-shadow:var(--soft-shadow)}
.region-layout{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:22px}
.location-card{border:0;border-radius:30px;padding:22px;text-align:left;background:linear-gradient(#f6f4dc,#dff1cd);box-shadow:var(--shadow);min-height:300px;position:relative;overflow:hidden}
.location-card.locked{filter:grayscale(.75);opacity:.72}
.location-card .emoji{font-size:6rem;display:block;margin-bottom:22px}
.location-card h2{font-size:2rem;margin:0 0 8px;color:#4f7f3e}
.progress-track{height:16px;background:#e9ddbd;border-radius:99px;overflow:hidden;margin:14px 0}
.progress-track span{display:block;height:100%;background:linear-gradient(90deg,#7fbd65,#f4c653);border-radius:inherit}
.level-grid{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:18px;padding:24px;max-width:720px;width:100%;margin:auto}
.level-node{aspect-ratio:1;border:0;border-radius:28px;background:linear-gradient(#fff6d7,#f0d59a);box-shadow:0 7px 0 #d1ae69,var(--shadow);font-size:2rem;font-weight:900;color:#6a512a;position:relative}
.level-node.completed:after{content:"★";position:absolute;right:10px;top:7px;color:#f2aa28;font-size:1.25rem}
.level-node.locked{background:linear-gradient(#e8e5df,#c9c6c0);box-shadow:0 7px 0 #aaa7a2,var(--shadow);color:#85827d}
.game-panel{flex:1;display:flex;flex-direction:column;min-height:0;padding:14px}
.game-instruction{text-align:center;font-size:clamp(1.5rem,4vw,2.4rem);margin:4px 0 12px;color:#476b83}
.game-board{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,32px);min-height:440px}
.items-zone,.shadows-zone{background:rgba(255,253,247,.88);border-radius:28px;padding:18px;display:grid;grid-template-columns:repeat(2,minmax(95px,1fr));gap:15px;align-content:center;box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),var(--soft-shadow)}
.shadows-zone{background:rgba(209,230,243,.88)}
.drag-item,.shadow-slot{min-height:112px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;user-select:none;touch-action:none}
.drag-item{background:linear-gradient(#fff,#f7edd7);border:3px solid #fff;box-shadow:var(--soft-shadow);font-size:4.4rem;cursor:grab}
.drag-item span.label{font-size:.9rem;font-weight:900;color:#62727e;margin-top:2px}
.drag-item.matched{opacity:.18;pointer-events:none;transform:scale(.88)}
.shadow-slot{border:4px dashed rgba(63,75,85,.26);background:rgba(255,255,255,.25);font-size:4.6rem}
.shadow-slot .shadow-emoji{filter:brightness(0);opacity:.67}
.shadow-slot.correct{border-style:solid;border-color:#7fb968;background:rgba(220,247,208,.8);animation:pop .45s ease}
.shadow-slot.correct .shadow-emoji{filter:none;opacity:1}
.shadow-slot.hint{animation:hintpulse .7s ease-in-out 3}
@keyframes pop{50%{transform:scale(1.12)}}
@keyframes hintpulse{50%{box-shadow:0 0 0 12px rgba(255,208,90,.55)}}
.drag-ghost{position:fixed;z-index:9999;pointer-events:none;width:100px;height:100px;border-radius:24px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:4.2rem;box-shadow:0 12px 28px rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(1.08)}
.game-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 0;gap:12px}
.stats{background:rgba(255,255,255,.86);padding:10px 16px;border-radius:16px;font-weight:900}
.completion{justify-content:center;align-items:center;text-align:center;gap:18px;padding:28px}
.big-star{font-size:8rem;animation:starIn .8s cubic-bezier(.2,.9,.2,1.2)}
@keyframes starIn{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
.action-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.reveal-stage{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.reveal-card{max-width:700px;padding:30px}
.growing-flower{font-size:10rem;animation:growFlower 1.2s cubic-bezier(.25,.9,.35,1.15)}
@keyframes growFlower{0%{transform:scale(.05) translateY(120px)}60%{transform:scale(1.18) translateY(-10px)}100%{transform:scale(1) translateY(0)}}
.settings-panel{padding:24px;max-width:780px;width:100%;margin:auto}
.setting-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:14px 6px;border-bottom:1px solid #eadfc9}
.setting-row label{font-weight:900;font-size:1.1rem}
.setting-row select{padding:10px 14px;border:2px solid #d8ccb3;border-radius:12px;background:#fff}
.switch{width:62px;height:34px;border:0;border-radius:99px;background:#b6b6b6;position:relative;transition:background .2s}
.switch:after{content:"";width:28px;height:28px;border-radius:50%;background:#fff;position:absolute;left:3px;top:3px;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s}
.switch.on{background:#6fb267}.switch.on:after{transform:translateX(28px)}
.gate-overlay{position:fixed;inset:0;background:rgba(49,61,69,.58);display:grid;place-items:center;z-index:1000;padding:18px}
.gate-card{background:var(--paper);padding:26px;border-radius:26px;box-shadow:var(--shadow);max-width:420px;width:100%;text-align:center}
.gate-card input{width:100%;font-size:1.5rem;text-align:center;padding:12px;border:3px solid #cfd9df;border-radius:14px;margin:12px 0}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#425b6c;color:#fff;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow);z-index:2000;opacity:0;pointer-events:none;transition:.25s}
#toast.show{opacity:1;transform:translate(-50%,0)}
.update-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:1900;background:#315a74;color:#fff;border-radius:18px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:var(--shadow)}
.update-banner button{border:0;border-radius:12px;padding:9px 14px;background:#ffd05a;font-weight:900;color:#513d1d}
.shake{animation:shake .35s ease}
@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1500}.confetti i{position:absolute;top:-20px;font-style:normal;animation:fall 1.8s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@media(max-width:760px){
  #app{padding-left:8px;padding-right:8px}
  .profile-grid{gap:10px}.profile-card{min-height:350px}.profile-card img{height:250px}.profile-card h2{font-size:1.55rem}
  .home-main{grid-template-columns:1fr}.hero-card img{height:290px}.hero-card{min-height:340px}.home-actions{padding:18px}
  .map-canvas{min-height:500px}.map-pin{width:68px;height:68px;font-size:2rem}.map-label{font-size:.8rem}
  .region-layout{grid-template-columns:1fr;padding:12px}.location-card{min-height:220px}
  .game-board{grid-template-columns:1fr 1fr;gap:8px;min-height:420px}.items-zone,.shadows-zone{padding:8px;gap:8px}.drag-item,.shadow-slot{min-height:92px;font-size:3.2rem}.drag-item span.label{font-size:.72rem}
}
@media(max-width:540px) and (orientation:portrait){
  .game-board{grid-template-columns:1fr}.items-zone,.shadows-zone{grid-template-columns:repeat(3,minmax(72px,1fr))}.game-panel{padding:8px}
  .profile-card img{height:210px}.profile-card{min-height:310px}
  .secondary-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}

/* v0.2 Meadow Trail expansion */
.profile-logo{max-height:150px;object-fit:contain;margin:8px auto 0}
.meadow-summary{background:rgba(255,255,255,.72);border:2px solid rgba(255,255,255,.9);border-radius:20px;padding:14px 16px;color:#496274}
.meadow-summary>strong,.meadow-summary>span{display:inline-block;font-size:1.05rem}
.meadow-summary>span{float:right;color:#7d6535}
.meadow-summary small{display:block;color:#657480;font-weight:800;clear:both}
.map-pin.memory{filter:none;opacity:1;animation:breathe 2.2s ease-in-out infinite;background:linear-gradient(#fff8ed,#f6e7f3)}
.map-pin.memory:hover,.map-pin.shadow:hover{filter:brightness(1.06)}
.map-decoration{position:absolute;border:0;background:transparent;font-size:clamp(2.7rem,6vw,4.7rem);filter:drop-shadow(0 6px 5px rgba(0,0,0,.22));transform:translate(-50%,-50%);padding:0;line-height:1;animation:decorationArrive .65s cubic-bezier(.2,.9,.25,1.2)}
.map-decoration:active{transform:translate(-50%,-47%) scale(.96)}
.reward-glow{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;font-size:4.4rem;filter:drop-shadow(0 6px 5px rgba(0,0,0,.22));animation:glow 1.1s ease-in-out infinite;z-index:4}
@keyframes decorationArrive{0%{transform:translate(-50%,-20%) scale(.1);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.meadow-complete-badge{position:absolute;left:50%;top:8%;transform:translateX(-50%);background:rgba(255,248,212,.95);border:3px solid #f1c45a;color:#6d5328;border-radius:999px;padding:9px 18px;font-weight:900;box-shadow:var(--soft-shadow);white-space:nowrap;z-index:3}
.location-card.memory-location{background:linear-gradient(#fff1dd,#e2f2d2)}
.location-card.memory-location h2{color:#9a6a43}
.level-node small{display:block;font-size:.72rem;margin-top:5px;color:#77694f}
.memory-screen{background:radial-gradient(circle at 50% 45%,rgba(248,255,233,.58),transparent 50%)}
.memory-game-panel{justify-content:center}
.memory-board{--memory-cols:4;flex:1;display:grid;grid-template-columns:repeat(var(--memory-cols),minmax(82px,1fr));gap:clamp(8px,1.8vw,16px);align-content:center;justify-content:center;width:min(920px,100%);margin:auto;padding:14px;background:rgba(225,240,204,.68);border:4px solid rgba(255,255,255,.8);border-radius:30px;box-shadow:inset 0 0 0 2px rgba(94,143,72,.13),var(--soft-shadow)}
.memory-card{aspect-ratio:.82;border:0;background:transparent;perspective:900px;padding:0;min-width:0;min-height:95px;touch-action:manipulation}
.memory-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.25,.7,.25,1);border-radius:22px;box-shadow:0 7px 12px rgba(56,84,49,.18)}
.memory-card.flipped .memory-card-inner,.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}
.memory-back,.memory-front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:22px;backface-visibility:hidden;border:3px solid rgba(255,255,255,.94)}
.memory-back{font-size:clamp(2.4rem,7vw,4.4rem);background:linear-gradient(145deg,#8fbd65,#5e914d);color:#fff;text-shadow:0 3px 5px rgba(35,73,28,.24);overflow:hidden}
.memory-back:after{content:"";position:absolute;inset:8px;border:2px dashed rgba(255,255,255,.42);border-radius:16px}
.memory-front{transform:rotateY(180deg);flex-direction:column;gap:3px;background:linear-gradient(#fffdf4,#f8eacb);color:#5c604e}
.memory-front b{font-size:clamp(2.25rem,6vw,4.1rem);font-weight:400;line-height:1}
.memory-front small{font-size:clamp(.62rem,1.5vw,.9rem);font-weight:900;padding:0 4px;text-align:center}
.memory-card.matched .memory-front{background:linear-gradient(#fffceb,#ddf3cc);box-shadow:inset 0 0 0 4px rgba(120,184,93,.45)}
.memory-card.matched{opacity:.9}
.memory-card.hint{animation:memoryHint .65s ease-in-out 3}
@keyframes memoryHint{50%{transform:translateY(-7px) scale(1.04);filter:drop-shadow(0 0 10px #ffd45c)}}
.growing-decoration{font-size:10rem;animation:growFlower 1.2s cubic-bezier(.25,.9,.35,1.15)}

@media(max-width:760px){
  .memory-board{gap:7px;padding:9px;border-radius:22px}
  .memory-card{min-height:76px}.memory-card-inner,.memory-back,.memory-front{border-radius:16px}
  .memory-back:after{inset:5px;border-radius:12px}
  .meadow-complete-badge{top:3%;font-size:.8rem;padding:7px 12px}
}
@media(max-width:540px) and (orientation:portrait){
  .memory-board{grid-template-columns:repeat(3,minmax(70px,1fr))!important;align-content:start;overflow:auto}
  .memory-card{min-height:96px}
  .map-decoration{font-size:2.7rem}
  .map-label.memory{left:29%;top:35%}
}