:root{--sky1:#4aa3f0;--sky2:#cfeaff;--sun:#ffe94a;--hill:rgba(70,150,80,.55);--hill2:rgba(50,120,65,.8);--stars:0;--panel:#cfcfcf;--hi:#fff;--lo:#5a5a5a;--tx:#3b3b3b;--slot:#8b8b8b;--slotx:#fff;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sky1:#070b24;--sky2:#2a3a7a;--sun:#e8ecff;--hill:rgba(20,60,70,.7);--hill2:rgba(12,40,55,.9);--stars:1;--panel:#3a3a3a;--hi:#6b6b6b;--lo:#1c1c1c;--tx:#eee;--slot:#1f1f1f;--slotx:#ffe27a}}
:root[data-theme="dark"]{--sky1:#070b24;--sky2:#2a3a7a;--sun:#e8ecff;--hill:rgba(20,60,70,.7);--hill2:rgba(12,40,55,.9);--stars:1;--panel:#3a3a3a;--hi:#6b6b6b;--lo:#1c1c1c;--tx:#eee;--slot:#1f1f1f;--slotx:#ffe27a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Vazirmatn,Tahoma,sans-serif;background:var(--sky1);color:var(--tx)}
canvas{image-rendering:pixelated;display:block}
.sky{position:fixed;inset:0;background:linear-gradient(var(--sky1),var(--sky2));z-index:-3}
.stars{position:fixed;top:0;left:0;width:3px;height:3px;opacity:var(--stars);z-index:-2}
.sun{position:fixed;top:9%;left:10%;width:56px;height:56px;background:var(--sun);box-shadow:0 0 0 8px rgba(255,255,255,.25),0 0 0 18px rgba(255,255,255,.12);z-index:-2}
.cloud{position:fixed;width:24px;height:24px;background:#fff;opacity:.92;z-index:-2;box-shadow:24px 0 #fff,48px 0 #fff,72px 0 #fff,24px -24px #fff,48px -24px #fff,0 6px 0 -0px rgba(0,0,0,.06);animation:drift 70s linear infinite}
@keyframes drift{from{transform:translateX(-140px)}to{transform:translateX(110vw)}}
.hill{position:fixed;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom,0px));height:130px;background:var(--hill);z-index:-1;clip-path:polygon(0 100%,0 60%,12% 60%,12% 40%,28% 40%,28% 22%,42% 22%,42% 48%,58% 48%,58% 62%,75% 62%,75% 34%,90% 34%,90% 52%,100% 52%,100% 100%)}
.hill.b{height:90px;background:var(--hill2);clip-path:polygon(0 100%,0 40%,18% 40%,18% 62%,34% 62%,34% 30%,52% 30%,52% 55%,70% 55%,70% 38%,86% 38%,86% 66%,100% 66%,100% 100%)}
.ground{position:fixed;left:0;right:0;bottom:0;height:calc(96px + env(safe-area-inset-bottom,0px));z-index:0;box-shadow:0 -4px 0 rgba(0,0,0,.25)}
.grass,.dirt{height:48px;background-size:48px 48px;image-rendering:pixelated}
.dirt{height:calc(48px + env(safe-area-inset-bottom,0px))}
.page{display:none;min-height:100dvh;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px 130px;position:relative;overflow:hidden}
.page.on{display:flex;animation:fade .5s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.gold{background:linear-gradient(#fff6b0,#ffd028 50%,#c98a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(3px 3px 0 #3a2400)}
h1{margin:0 0 6px;font-size:clamp(30px,9vw,50px);font-weight:800;text-align:center;line-height:1.3}
.sub{color:#fff;text-shadow:2px 2px 0 #2b2b2b;margin:0 0 22px;text-align:center;font-weight:800}
.stage{position:relative;display:grid;place-items:center;width:240px;height:200px}
.rays{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:repeating-conic-gradient(rgba(255,236,140,.6) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 68%);mask:radial-gradient(circle,#000 8%,transparent 68%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chest{position:relative;background:none;border:0;padding:0;cursor:pointer;animation:bob 1.6s steps(2) infinite;filter:drop-shadow(0 0 14px rgba(255,214,70,.85)) drop-shadow(0 8px 0 rgba(0,0,0,.3))}
.chest:hover{filter:drop-shadow(0 0 24px #ffe27a) drop-shadow(0 8px 0 rgba(0,0,0,.3)) brightness(1.12)}
@keyframes bob{50%{transform:translateY(-10px)}}
.spk{position:absolute;width:8px;height:8px;background:#fff3a0;transform:rotate(45deg);box-shadow:0 0 8px 2px #ffd028;animation:tw 1.6s steps(4) infinite}
@keyframes tw{0%,100%{opacity:0;scale:.3}50%{opacity:1;scale:1.3}}
.hint{margin-top:18px;padding:8px 18px;color:#ffe27a;font-weight:800;background:rgba(0,0,0,.45);border:3px solid #c8962b;text-shadow:2px 2px 0 #000;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
.mob{position:absolute;bottom:calc(96px + env(safe-area-inset-bottom,0px));animation:bob 2.2s steps(2) infinite;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.28))}
.m1{left:4%}.m2{right:4%;animation-delay:.6s}.m3{right:30%;bottom:calc(150px + env(safe-area-inset-bottom,0px));animation-delay:1.1s}
.tree{position:absolute;bottom:calc(96px + env(safe-area-inset-bottom,0px));filter:drop-shadow(4px 4px 0 rgba(0,0,0,.2))}
.t1{left:27%}.t2{right:22%}
.panel{background:var(--panel);border:4px solid #000;box-shadow:inset 4px 4px 0 var(--hi),inset -4px -4px 0 var(--lo)}
.card{width:100%;max-width:440px;margin:14px 8px;padding:22px 18px;text-align:center;position:relative;z-index:1;overflow:hidden;
box-shadow:inset 4px 4px 0 var(--hi),inset -4px -4px 0 var(--lo),0 0 0 4px #e0b030,0 0 0 8px #000,0 0 44px 10px rgba(255,210,70,.4)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);transform:translateX(-130%);animation:glint 4s 1s infinite;pointer-events:none}
@keyframes glint{60%,100%{transform:translateX(130%)}}
.cn{position:absolute;width:12px;height:12px;background:#ffd028;border:3px solid #000;transform:rotate(45deg)}
.cn.a{top:6px;right:6px}.cn.b{top:6px;left:6px}.cn.c{bottom:6px;right:6px}.cn.d{bottom:6px;left:6px}
.ribbon{display:inline-block;padding:8px 28px;background:linear-gradient(#e0443a,#a8231b);border:4px solid #000;box-shadow:inset 3px 3px 0 #ff8a7e,inset -3px -3px 0 #7a1510,0 5px 0 rgba(0,0,0,.3)}
.ribbon h2{margin:0;font-size:24px;font-weight:800}
.fig{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:16px 0 4px}
.fig canvas{filter:drop-shadow(3px 4px 0 rgba(0,0,0,.3))}
.who{font-size:32px;font-weight:800;margin:6px 0 2px}
.slot{background:var(--slot);border:4px solid #000;box-shadow:inset 3px 3px 0 var(--lo),inset -3px -3px 0 var(--hi);padding:10px 12px;margin:10px 0;text-align:right;color:var(--slotx);font-weight:800;display:flex;gap:12px;align-items:center}
@media (prefers-color-scheme:light){.slot{color:#fff;text-shadow:1px 1px 0 #333}}
.note{margin:12px 0;line-height:1.9}
.mc{font:inherit;font-weight:800;color:#fff;background:#7d7d7d;border:4px solid #000;box-shadow:inset 4px 4px 0 #b9b9b9,inset -4px -4px 0 #4a4a4a;padding:10px 24px;text-shadow:2px 2px #3f3f3f;cursor:pointer}
.mc:hover{filter:brightness(1.15)}.mc:focus-visible,.chest:focus-visible{outline:4px solid #ffe94a}
.mc.g{background:#3d8f2f;box-shadow:inset 4px 4px 0 #8fe27c,inset -4px -4px 0 #256018}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.toast{margin-top:12px;font-weight:800;min-height:28px}
.balloon{position:fixed;bottom:-130px;z-index:5;pointer-events:none;animation:rise linear forwards}
.balloon .b{width:46px;height:58px;background-image:linear-gradient(135deg,rgba(255,255,255,.6),transparent 32%,rgba(0,0,0,.2));clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%)}
.balloon .k{width:8px;height:6px;margin:0 auto;background:inherit}
.balloon .s{width:2px;height:36px;background:rgba(255,255,255,.85);margin:0 auto}
@keyframes rise{to{transform:translateY(-135vh)}}
#fw{position:fixed;inset:0;z-index:6;pointer-events:none}
@media (prefers-reduced-motion:reduce){.chest,.mob,.cloud,.hint,.rays,.spk,.card::after{animation:none}}