:root { --ink:#31533c; --cream:#fff9e9; --coral:#e95745; --yellow:#f4b83f; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; overscroll-behavior:none; }
body { font-family:"Trebuchet MS", Arial, sans-serif; color:var(--ink); background:#d9efb2; }
button { font:inherit; }
button:focus-visible { outline:4px solid #2874bd; outline-offset:3px; }
.loading-screen { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:18px; padding:24px; background:radial-gradient(circle at 50% 30%,#fffce8,#dff0a8 70%); text-align:center; }
.loading-lady { width:125px; height:125px; display:grid; place-items:center; border-radius:50%; background:#fff8d5; box-shadow:0 12px 35px #56813940; animation:float 1.1s ease-in-out infinite alternate; }
.loading-lady img { width:76%; height:76%; object-fit:contain; }
.loading-screen h1 { margin:0; font-size:clamp(1.25rem,4vw,2rem); }
.loading-screen p { margin:0; font-weight:900; }
.progress { width:min(390px,78vw); height:20px; border:4px solid white; border-radius:30px; background:#b5cd83; overflow:hidden; box-shadow:0 3px 0 #729052; }
.progress span { display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#ef5b46,#f6bd3e); transition:width .1s; }
.app { position:relative; min-height:100vh; overflow:hidden; background:linear-gradient(180deg,var(--sky,#dff1a7),var(--ground,#8bc86a)); isolation:isolate; }
.app::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.35; background-image:radial-gradient(circle at 10% 20%,#fff 0 3px,transparent 4px),radial-gradient(circle at 86% 38%,#fff8 0 4px,transparent 5px),linear-gradient(155deg,transparent 70%,#316b3c33 70% 72%,transparent 72%); background-size:110px 100px,160px 140px,220px 160px; }
.top-actions { position:fixed; z-index:20; top:18px; right:20px; display:flex; gap:10px; }
.icon-button,.home-button { width:50px; height:50px; display:grid; place-items:center; border:3px solid #fff; border-radius:50%; background:#315c41; color:#fff; font-size:1.4rem; box-shadow:0 4px 0 #24442f,0 7px 16px #254e3540; cursor:pointer; }
.icon-button:active,.home-button:active { translate:0 3px; box-shadow:0 1px 0 #24442f; }
.home-card,.finish-card { width:min(720px,calc(100% - 30px)); min-height:calc(100vh - 30px); margin:15px auto; padding:clamp(36px,6vh,70px) 30px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; border:6px solid #fff8d7; border-radius:45px; background:#fff9e9e8; box-shadow:0 22px 60px #2d5c3145,inset 0 0 0 4px #eecb6d; }
.title-kicker { color:#8b6a2c; text-transform:uppercase; letter-spacing:.16em; font-weight:900; font-size:.78rem; }
.home-card h1,.finish-card h1 { margin:9px 0 8px; color:#d84b3d; font-family:Georgia,serif; font-size:clamp(2.25rem,7vw,4.8rem); line-height:.87; text-shadow:0 3px #fff,0 6px #e9c359; }
.home-card h1 span { color:#315c41; font-size:.54em; letter-spacing:.04em; }
.hero-lady { height:min(27vh,205px); width:100%; position:relative; display:grid; place-items:center; }
.hero-lady::before { content:""; position:absolute; width:210px; height:50px; bottom:8px; border-radius:50%; background:#75a94d45; filter:blur(3px); }
.hero-lady img { position:relative; height:82%; width:38%; max-width:230px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 12px 6px #395b3150); animation:float 1.7s ease-in-out infinite alternate; }
.flower { position:absolute; font-size:clamp(2rem,5vw,3.2rem); animation:sway 2s ease-in-out infinite alternate; }.flower-a{left:12%;bottom:8%}.flower-b{right:13%;top:13%;animation-delay:.5s}
.play-button { position:relative; z-index:3; min-width:225px; margin-top:4px; padding:8px 9px 8px 28px; display:flex; justify-content:space-between; align-items:center; gap:25px; border:4px solid white; border-radius:40px; color:white; background:linear-gradient(#f26951,#db4539); box-shadow:0 6px 0 #a8332d,0 10px 25px #bd3c3b50; font-size:1.25rem; font-weight:900; letter-spacing:.08em; cursor:pointer; }
.play-button b { width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#dc4a3c;font-size:1.5rem; }
.play-button:hover { filter:brightness(1.07); transform:scale(1.025); }.play-button:active{transform:translateY(4px);box-shadow:0 2px 0 #a8332d}
.home-text { max-width:560px; margin:25px 0 6px; font-size:1.05rem; line-height:1.55; font-weight:700; }
.replace-note { margin:auto 0 0; padding-top:24px; color:#66775e; font-size:.78rem; }
.decor { position:fixed; z-index:-1; inset:auto 0 0; height:75px; display:flex; justify-content:space-around; align-items:end; font-size:clamp(2rem,5vw,4rem); opacity:.8; }
.game-shell { width:min(1200px,calc(100% - 24px)); margin:0 auto; padding:16px 0 25px; }
.game-header { min-height:68px; padding:0 130px 0 0; display:flex; align-items:center; gap:15px; }
.game-header p,.game-header h1 { margin:0; }.game-header p{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;opacity:.8}.game-header h1{font-family:Georgia,serif;font-size:clamp(1.5rem,3vw,2.3rem);color:#234b34}
.home-button { position:static; flex:0 0 auto; }
.restart-button { margin-left:auto; padding:10px 16px; border:0; border-radius:25px; color:#31533c; background:#fff9e9; font-weight:900; box-shadow:0 3px 0 #b39d62; cursor:pointer; }
.level-dots { display:flex; justify-content:center; gap:9px; margin:-5px 0 4px; }.level-dots span{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#ffffff70;border:2px solid #fff;color:#5d774a;font-size:.78rem;font-weight:900}.level-dots .active{background:#e95543;color:#fff;transform:scale(1.18)}.level-dots .done{background:#3d8152;color:white}
.mission { text-align:center; margin:6px 0 12px; font-weight:900; }
.play-area { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:20px; align-items:center; }
.maze-wrap { position:relative; width:100%; max-height:calc(100vh - 155px); display:flex; justify-content:center; }
.maze { position:relative; display:grid; width:min(100%,900px); max-height:calc(100vh - 170px); border:8px solid #70482f; border-radius:18px; overflow:hidden; background:#f5eac0; box-shadow:0 14px 32px #29482f55,inset 0 0 20px #553f2520; }
.maze .wall { background:linear-gradient(135deg,#477a42,#315c37); box-shadow:inset 0 0 0 2px #659553,inset 3px 3px 5px #a0bd6d40; }
.maze .path { background:#f4e5b6; box-shadow:inset 0 0 9px #8d704325; }
.screen-game[style*="55"] .maze .wall { background:linear-gradient(135deg,#548a3f,#2d5934); }
.goal,.player { position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); z-index:4; transition:left .16s ease,top .16s ease; }
.goal { font-size:clamp(1.15rem,3vw,2.45rem); filter:drop-shadow(0 2px 1px white); animation:pulse 1.2s infinite alternate; }
.player img { width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 2px 1px #0004);transition:transform .18s; }
.player.dir-up img{transform:rotate(0deg)}.player.dir-right img{transform:rotate(90deg)}.player.dir-down img{transform:rotate(180deg)}.player.dir-left img{transform:rotate(-90deg)}.player.moving img{animation:walk .18s ease-in-out infinite alternate}
.controls { padding:18px 12px; text-align:center; border:3px solid #fff7d4; border-radius:30px; background:#fff9e9d9; box-shadow:0 8px 22px #2d59343d; }.controls p{margin:0 0 12px;font-weight:900;font-size:.9rem}.controls small{display:block;margin-top:12px;line-height:1.35;color:#5d6e55}
.control-grid { display:grid; grid-template:repeat(2,57px)/repeat(3,57px); justify-content:center; gap:6px; }.control-grid button{border:3px solid white;border-radius:17px;background:#e85443;color:white;font-size:1.25rem;box-shadow:0 4px 0 #a83830;cursor:pointer;touch-action:manipulation}.control-grid button:active{translate:0 3px;box-shadow:0 1px 0 #a83830}.control-grid .up{grid-column:2}.control-grid .left{grid-row:2;grid-column:1}.control-grid .down{grid-row:2;grid-column:2}.control-grid .right{grid-row:2;grid-column:3}
.victory { position:absolute; inset:8%; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:6px solid white; border-radius:36px; background:#fff8d8f5; box-shadow:0 15px 60px #142f2570; animation:pop .35s ease-out; }.victory-stars{font-size:2rem}.victory h2{margin:4px;color:#d84b3d;font-family:Georgia,serif;font-size:clamp(2.4rem,7vw,5rem)}.victory p{margin:0 0 18px;font-weight:900}.victory button{padding:13px 22px;border:0;border-radius:28px;background:#3d8050;color:white;font-weight:900;font-size:1.05rem;box-shadow:0 5px 0 #285c38;cursor:pointer}.victory button span{padding-left:12px}
.finish-card { justify-content:center; }.finish-card .medal{width:85px;height:85px;display:grid;place-items:center;border-radius:50%;background:#f6bf3e;border:7px solid white;color:white;font-size:3rem;box-shadow:0 5px 0 #b67c25}.finish-card img{height:180px;width:220px;object-fit:contain;animation:float 1s infinite alternate}.finish-card>p:not(.title-kicker){font-size:1.15rem;font-weight:900}.text-button{margin-top:18px;border:0;background:none;color:#315c41;text-decoration:underline;font-weight:900;cursor:pointer}
@keyframes float{to{transform:translateY(-10px) rotate(2deg)}}@keyframes sway{to{transform:rotate(12deg) scale(1.05)}}@keyframes pulse{to{transform:translate(-50%,-50%) scale(1.16)}}@keyframes walk{to{translate:0 -5px;scale:1.03}}@keyframes pop{from{opacity:0;transform:scale(.75)}}
@media(max-width:780px){.top-actions{top:9px;right:9px}.icon-button,.home-button{width:44px;height:44px}.game-shell{padding-top:8px}.game-header{padding-right:95px;min-height:54px}.restart-button span{display:none}.play-area{display:flex;flex-direction:column;gap:10px}.maze-wrap{max-height:none}.maze{max-height:58vh}.controls{padding:8px 14px}.controls p,.controls small{display:none}.control-grid{grid-template:repeat(2,47px)/repeat(3,47px)}.mission{margin:4px 0 7px}.level-dots{margin:0}.home-card{padding-inline:18px}.replace-note{padding-top:14px}}
@media(max-height:650px) and (orientation:landscape){.game-shell{padding-top:4px}.game-header{position:absolute;z-index:12;left:18px;top:8px}.game-header>div{display:none}.level-dots,.mission{display:none}.play-area{height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 155px;padding:4px 0}.maze{max-height:97vh;width:auto}.controls{padding:12px 5px}.control-grid{grid-template:repeat(2,48px)/repeat(3,48px)}.controls p{display:block}.home-card{min-height:calc(100vh - 12px);margin:6px auto;padding-top:20px}.hero-lady{height:31vh}.home-text{margin:12px 0 3px}.replace-note{padding-top:7px}.finish-card{min-height:calc(100vh - 12px);margin:6px auto}.finish-card img{height:120px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}