*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#152238;font-family:'Segoe UI',Arial,sans-serif;display:flex;flex-direction:column;align-items:center;padding:14px 10px;overflow:auto}
#game{width:800px;flex:0 0 auto}
#hud{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0f1f33;color:#ffd966;padding:9px 14px;border-radius:10px 10px 0 0;border:3px solid #0a1524;border-bottom:none}
#hud-title{font-weight:800;letter-spacing:.5px;text-shadow:0 2px 2px #000;font-size:15px}
#hud-progress{color:#cfe3ff;font-size:14px;flex:1;text-align:center;text-shadow:0 1px 1px #000}
#btn-restart{background:#d33;color:#fff;border:none;border-radius:8px;padding:6px 12px;cursor:pointer;font-weight:700}
#btn-restart:hover{background:#e44}
#stage-box{position:relative;width:800px;height:560px;border:3px solid #0a1524;border-radius:0 0 14px 14px;overflow:hidden;background:#222;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.stage{position:absolute;inset:0;display:none;overflow:hidden}
.stage.active{display:block}

.scene{position:absolute;inset:0}
.sky{position:absolute;left:0;top:0;right:0;height:55%;background:linear-gradient(#6ec6e8,#bde7f6 75%,#eaf9fe)}
.sun{position:absolute;top:26px;left:660px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7c0,#ffd23f 70%,#f2a900);box-shadow:0 0 30px 12px rgba(255,210,63,.45)}
.ground{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(#9aa96a,#6d7f47)}
.road{position:absolute;left:0;right:0;bottom:0;height:20%;background:#555e66}
.road:after{content:"";position:absolute;left:0;right:0;top:50%;height:5px;background:repeating-linear-gradient(90deg,#f2d13a 0 46px,transparent 46px 92px)}

.building{position:absolute;bottom:45%;background:linear-gradient(#9aa7c2,#7b88a8);border-radius:4px 4px 0 0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.15)}
.building:after{content:"";position:absolute;inset:14px 10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 12px,transparent 12px 26px);opacity:.5}
.building.b1{left:30px;width:150px;height:180px}
.building.b2{left:620px;width:150px;height:150px}

.char-holder{position:absolute;z-index:20}

.girl{position:absolute;left:0;top:0;width:64px;height:100px}
.girl .ponytail{position:absolute;left:44px;top:6px;width:11px;height:30px;background:#6b3f1f;border-radius:0 6px 6px 8px;transform:rotate(8deg)}
.girl .hair-back{position:absolute;left:13px;top:6px;width:38px;height:28px;background:#6b3f1f;border-radius:19px 19px 10px 10px}
.girl .head{position:absolute;left:17px;top:10px;width:30px;height:26px;background:#f8c9a0;border-radius:50%}
.girl .hair{position:absolute;left:13px;top:2px;width:38px;height:15px;background:#6b3f1f;border-radius:19px 19px 4px 4px}
.girl .bangs{position:absolute;left:18px;top:8px;width:26px;height:8px;background:#6b3f1f;border-radius:0 0 8px 8px}
.girl .eye{position:absolute;top:18px;width:4px;height:5px;background:#2a1d10;border-radius:50%}
.girl .eye.left{left:24px}
.girl .eye.right{left:36px}
.girl .smile{position:absolute;left:29px;top:29px;width:8px;height:4px;border-bottom:2px solid #b0553a;border-radius:0 0 8px 8px}
.girl .blush{position:absolute;top:23px;width:6px;height:3px;background:#f4a8a8;border-radius:50%}
.girl .blush.left{left:20px}
.girl .blush.right{left:39px}
.girl .dress{position:absolute;left:17px;top:34px;width:30px;height:32px;background:#e0447a;border-radius:12px 12px 5px 5px}
.girl .dress:after{content:"";position:absolute;left:8px;right:8px;top:6px;height:5px;background:#fff;opacity:.85;border-radius:3px}
.girl .arm{position:absolute;top:36px;width:7px;height:22px;background:#f8c9a0;border-radius:4px}
.girl .arm.left{left:11px;transform:rotate(12deg)}
.girl .arm.right{left:47px;transform:rotate(-12deg)}
.girl .leg{position:absolute;top:64px;width:11px;height:24px;background:#3d4ba6;border-radius:0 0 5px 5px}
.girl .leg.left{left:20px}
.girl .leg.right{left:33px}
.girl .shoe{position:absolute;top:86px;width:14px;height:8px;background:#c0392b;border-radius:3px}
.girl .shoe.left{left:18px}
.girl .shoe.right{left:31px}
.girl.flip{transform:scaleX(-1)}
.girl.idle{animation:idleBob .9s ease-in-out infinite alternate}
@keyframes idleBob{from{transform:translateY(0)}to{transform:translateY(-4px)}}

.badguy{position:absolute;left:0;top:0;width:64px;height:104px}
.badguy .head{position:absolute;left:17px;top:12px;width:30px;height:26px;background:#e6b07e;border-radius:50%}
.badguy .beanie{position:absolute;left:13px;top:2px;width:38px;height:13px;background:#39424b;border-radius:19px 19px 3px 3px}
.badguy .beanie:after{content:"";position:absolute;right:-6px;top:-2px;width:8px;height:8px;background:#39424b;border-radius:50%}
.badguy .mask{position:absolute;left:14px;top:19px;width:32px;height:12px;background:#16181c;border-radius:4px}
.badguy .eye{position:absolute;top:21px;width:6px;height:6px;background:#fff;border-radius:50%}
.badguy .eye.left{left:20px}
.badguy .eye.right{left:39px}
.badguy .pupil{position:absolute;top:22px;width:3px;height:3px;background:#c0392b;border-radius:50%}
.badguy .pupil.left{left:23px}
.badguy .pupil.right{left:42px}
.badguy .frown{position:absolute;left:27px;top:34px;width:10px;height:4px;border-top:2px solid #7a3b2a;border-radius:6px 6px 0 0}
.badguy .body{position:absolute;left:14px;top:38px;width:36px;height:36px;background:#2c3340;border-radius:8px}
.badguy .body:after{content:"";position:absolute;left:6px;right:6px;top:8px;height:4px;background:#cfd3d9;opacity:.4;border-radius:2px}
.badguy .arm{position:absolute;top:40px;width:8px;height:24px;background:#2c3340;border-radius:4px}
.badguy .arm.left{left:8px;transform:rotate(15deg)}
.badguy .arm.right{left:48px;transform:rotate(-15deg)}
.badguy .leg{position:absolute;top:72px;width:12px;height:24px;background:#1d222b;border-radius:0 0 5px 5px}
.badguy .leg.left{left:19px}
.badguy .leg.right{left:33px}
.badguy .shoe{position:absolute;top:94px;width:15px;height:7px;background:#111;border-radius:3px}
.badguy .shoe.left{left:17px}
.badguy .shoe.right{left:31px}
.badguy.flip{transform:scaleX(-1)}
.badguy.running{animation:runBob .22s linear infinite alternate}
@keyframes runBob{from{transform:translateY(0)}to{transform:translateY(3px)}}

.sack{position:relative;width:42px;height:36px;background:#a86a2e;border-radius:8px 8px 14px 14px;color:#ffe08a;font-weight:800;text-align:center;line-height:40px;font-size:15px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.sack:before{content:"";position:absolute;top:-7px;left:13px;width:16px;height:9px;background:#d9a14f;border-radius:5px}
.sack.flying{position:absolute;transition:all 1s ease-in}

.coin{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff1a6,#f4c315 55%,#c88909);border:3px solid #9c6b08;color:#8a5c00;font-weight:900;text-align:center;line-height:20px;font-size:13px;box-shadow:0 3px 6px rgba(0,0,0,.35)}
.coin.pick{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(0)}}

.bg-alley .alley-wall{position:absolute;left:0;top:0;right:0;height:34%;background:repeating-linear-gradient(90deg,#b56a4a 0 40px,#a35d40 40px 44px);box-shadow:inset 0 -8px 0 rgba(0,0,0,.15)}
.bg-alley .alley-path{position:absolute;left:0;right:0;bottom:0;height:66%;background:linear-gradient(#d8c9a3,#c6b58c)}
#trail-arrow{position:absolute;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:20px solid #ff2e2e;z-index:30;display:none;animation:bounce .6s infinite alternate;transition:left .25s,top .25s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(10px)}}
#maze-entrance{position:absolute;right:30px;bottom:66px;width:120px;height:150px;display:none}
#maze-entrance.show{display:block}
.tunnel{position:absolute;left:0;bottom:0;width:120px;height:150px;background:radial-gradient(ellipse at 50% 100%,#2b3120,#0c0f08);border:10px solid #7a4a24;border-radius:60px 60px 0 0}
.maze-sign{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:#7a2c1a;color:#ffd966;font-weight:800;padding:4px 12px;border-radius:6px;border:2px solid #f2d13a;letter-spacing:1px;white-space:nowrap}

.bg-maze{background:#1a2b1f}
#maze-canvas{position:absolute;left:20px;top:52px;z-index:1}
#maze-girl-box{position:absolute;z-index:5;transition:left .12s linear,top .12s linear}
.maze-girl{transform:scale(.7);transform-origin:top left}
#maze-gate-box{position:absolute;z-index:6;display:none}
#maze-gate-box.show{display:block}
#maze-warn{position:absolute;top:40px;left:50%;transform:translateX(-50%);background:rgba(160,20,20,.92);color:#fff;font-weight:800;padding:10px 18px;border-radius:10px;z-index:40;opacity:0;pointer-events:none;transition:opacity .3s;text-shadow:0 1px 1px #000}
#maze-warn.show{opacity:1}

.gate{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.gate.open{transform:rotate(-70deg);transform-origin:left center;transition:transform .8s ease}

.bg-keys{background:linear-gradient(#1c2740,#0d1424)}
#keys-arena{position:absolute;left:20px;top:20px;width:760px;height:520px;border:4px solid #3b4b6b;border-radius:14px;background:radial-gradient(circle at 50% 40%,#263a5c,#101a30 70%)}
#keys-hint{position:absolute;top:30px;right:36px;color:#ffd966;font-weight:800;background:rgba(0,0,0,.45);padding:6px 12px;border-radius:8px;z-index:50}
.key{position:absolute;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.key.catch{animation:pop .3s ease}

.bg-fitting{background:linear-gradient(#31415c,#18243a)}
#gate-frame{position:absolute;left:50%;top:70px;transform:translateX(-50%);width:220px;height:260px;border:12px solid #3b4654;border-radius:8px;background:#151b21}
#gate-panel{position:absolute;left:0;top:0;bottom:0;right:0;background:repeating-linear-gradient(90deg,#4b5563 0 10px,#39414c 10px 14px);transform-origin:left center;transition:transform .8s ease;border-radius:0 6px 6px 0;box-shadow:inset -14px 0 20px rgba(0,0,0,.4)}
#gate-panel.open{transform:rotate(-70deg)}
#lock-box{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6}
.lock .shackle{transition:transform .5s ease}
.lock.open .shackle{transform:translateY(8px)}
#fit-msg{position:absolute;left:0;right:0;top:355px;text-align:center;color:#ffd966;font-weight:800;font-size:18px;min-height:26px;text-shadow:0 2px 2px #000}
#key-row{position:absolute;left:0;right:0;bottom:70px;display:flex;justify-content:center;gap:40px;z-index:30}
.key-opt{cursor:pointer;transition:transform .15s;padding:10px;border-radius:14px;background:rgba(255,255,255,.06)}
.key-opt:hover{transform:scale(1.12)}
.key-opt.wrong{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-9px)}}
.key-opt.gone{opacity:.3;pointer-events:none}

.bg-jail{background:linear-gradient(#5a6a7c,#3a4657)}
.jail-wall{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#8b7a66 0 34px,#7d6c59 34px 38px)}
.jail-sign{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#222;color:#ffd966;font-weight:900;padding:6px 18px;border-radius:8px;border:3px solid #f2b705;letter-spacing:2px;z-index:5}
.cell{position:absolute;right:40px;top:90px;width:180px;height:240px;background:#56504a;border:8px solid #333;border-radius:8px;overflow:hidden;z-index:10}
.cell-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#9aa3ad 0 10px,transparent 10px 26px);opacity:0;transition:opacity .6s}
.cell.locked .cell-bars{opacity:1}
.cell-label{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);color:#fff;font-weight:800;font-size:12px;background:#333;padding:2px 8px;border-radius:4px;z-index:5}

.bg-win{background:linear-gradient(#ffd966,#ffb43c)}
.rays{position:absolute;left:50%;top:50%;width:1400px;height:1400px;transform:translate(-50%,-50%);background:repeating-conic-gradient(rgba(255,255,255,.35) 0 8deg,transparent 8deg 16deg);animation:spin 20s linear infinite;opacity:.5}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.win-badge{position:absolute;left:50%;top:110px;transform:translateX(-50%);width:130px;height:130px;z-index:5}
.star-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;background:radial-gradient(circle at 40% 35%,#fff3b0,#ffd23f 60%,#e8a400);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));animation:badgeGlow 1.6s ease-in-out infinite alternate}
@keyframes badgeGlow{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.08)}}
.ribbon{position:absolute;top:98px;width:26px;height:26px;background:#c0392b}
.ribbon.l{left:20px;transform:rotate(45deg)}
.ribbon.r{right:20px;transform:rotate(-45deg)}
.win-title{position:absolute;top:250px;left:0;right:0;text-align:center;font-size:52px;font-weight:900;color:#7a2c1a;text-shadow:0 4px 0 #fff,0 8px 14px rgba(0,0,0,.3);z-index:5}
.win-text{position:absolute;top:330px;left:0;right:0;text-align:center;font-size:20px;font-weight:700;color:#3a2a00;text-shadow:0 1px 0 #fff;z-index:5;line-height:1.5}
.win-coins{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:5}
.win-coins .coin{position:relative;width:34px;height:34px;line-height:28px;font-size:16px;animation:coinPop 1.1s ease-in-out infinite alternate}
@keyframes coinPop{from{transform:translateY(0)}to{transform:translateY(-14px)}}
#confetti{position:absolute;inset:0;overflow:hidden;z-index:4;pointer-events:none}
.confetti{position:absolute;top:-20px;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(620px) rotate(720deg)}}

.bg-home{background:linear-gradient(#16273f,#0b1626)}
#home-out{position:absolute;inset:0}
.home-sky{position:absolute;inset:0;background-color:#16273f;background-image:radial-gradient(2px 2px at 120px 60px,#fff,transparent),radial-gradient(2px 2px at 300px 30px,#fff,transparent),radial-gradient(2px 2px at 520px 90px,#fff,transparent),radial-gradient(2px 2px at 680px 40px,#fff,transparent),radial-gradient(1.5px 1.5px at 220px 130px,#ffe,transparent),radial-gradient(1.5px 1.5px at 420px 150px,#ffe,transparent),radial-gradient(2px 2px at 50px 150px,#fff,transparent)}
.moon{position:absolute;top:40px;right:90px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fffdf0,#f2e6b3);box-shadow:0 0 30px 8px rgba(255,250,200,.35)}
.home-house{position:absolute;right:90px;bottom:120px;width:320px;height:230px;background:#e9dcc6;border-radius:8px 8px 0 0;box-shadow:0 10px 20px rgba(0,0,0,.4)}
.home-roof{position:absolute;left:-24px;top:-70px;width:368px;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:78px solid #8b3a2a}
.home-chimney{position:absolute;top:-56px;left:220px;width:34px;height:60px;background:#7d4a2e}
.home-door{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:64px;height:104px;background:#6b3f1f;border-radius:8px 8px 0 0;border:3px solid #4a2a12}
.home-door:after{content:"";position:absolute;top:44px;right:10px;width:7px;height:7px;background:#f2b705;border-radius:50%}
.home-win{position:absolute;top:40px;left:28px;width:70px;height:60px;background:#ffdf7a;border:6px solid #8b5a2b;border-radius:6px;box-shadow:0 0 24px 6px rgba(255,220,110,.5)}
.home-win2{position:absolute;top:40px;right:28px;width:70px;height:60px;background:#ffdf7a;border:6px solid #8b5a2b;border-radius:6px;box-shadow:0 0 24px 6px rgba(255,220,110,.5)}
.home-bush{position:absolute;bottom:120px;width:90px;height:40px;background:#3e7a3e;border-radius:45px 45px 0 0}
.home-bush.l{left:150px}
.home-bush.r{right:60px}
.home-bush2{position:absolute;bottom:120px;width:70px;height:34px;background:#2f642f;border-radius:35px 35px 0 0}
.home-bush2.l{left:220px}
.home-bush2.r{right:110px}
.home-path{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(#6d7f47,#5c6e3d)}
.home-path:after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:#8a9a5b;opacity:.6}
.home-int{position:absolute;inset:0;display:none;z-index:5}
.home-int.show{display:block}
.home-wall{position:absolute;inset:0;background:linear-gradient(#f3e3c8,#e6d1ae)}
.home-floor{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(#b9825a,#a06a3c)}
.home-rug{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:300px;height:120px;background:#c96f6f;border-radius:50%}
.home-int-win{position:absolute;top:24px;left:30px;width:110px;height:90px;background:#16273f;border:8px solid #8b5a2b;border-radius:8px;box-shadow:inset 0 0 0 3px #ffdf7a,0 0 18px rgba(255,220,110,.4)}
.home-int-win:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:#8b5a2b}
.home-frame{position:absolute;top:30px;right:60px;width:60px;height:70px;background:#fff;border:6px solid #8b5a2b;transform:rotate(4deg)}
.home-table{position:absolute;left:230px;bottom:70px;width:260px;height:120px;background:#7a4a24;border-radius:12px;box-shadow:0 8px 16px rgba(0,0,0,.35)}
.home-table:before{content:"";position:absolute;top:-12px;left:-14px;width:288px;height:14px;background:#8a5a2c;border-radius:8px}
.home-plate{position:absolute;left:300px;bottom:130px;width:120px;height:120px;background:#fff;border:6px solid #ddd;border-radius:50%;box-shadow:0 6px 12px rgba(0,0,0,.25)}
.food{position:absolute;transition:transform .4s,opacity .4s}
.food.gone{transform:scale(0);opacity:0}
.home-cookie{left:340px;bottom:178px;width:34px;height:34px;background:#c98a3d;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.home-cookie:after{content:"";position:absolute;inset:8px;background:#7a4a24;border-radius:50%}
.home-cake{left:368px;bottom:160px;width:34px;height:26px;background:#e0658f;border-radius:4px;border-bottom:6px solid #b04a72}
.home-cake:before{content:"";position:absolute;top:-8px;left:12px;width:10px;height:9px;background:#ffdf7a;border-radius:2px}
.home-apple{left:306px;bottom:178px;width:26px;height:26px;background:#d64541;border-radius:50%}
.home-apple:after{content:"";position:absolute;top:-7px;left:10px;width:8px;height:8px;background:#3e7a3e;border-radius:50% 50% 50% 0}
.home-chair{position:absolute;bottom:70px;width:70px;height:90px;background:#6b3f1f;border-radius:8px}
.home-chair:before{content:"";position:absolute;top:-26px;left:-6px;right:-6px;height:22px;background:#7a4a24;border-radius:8px}
.home-chair.l{left:150px}
.home-chair.r{left:520px}
.home-room{position:absolute;inset:0;display:none;z-index:4}
.home-room.show{display:block}
.home-room-wall{position:absolute;inset:0;background:linear-gradient(#ecd9bd,#dec9a6)}
.home-room-floor{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(#b9825a,#a06a3c)}
.home-couch{position:absolute;left:80px;bottom:100px;width:180px;height:88px;background:#5aa0c9;border-radius:14px;box-shadow:0 8px 14px rgba(0,0,0,.3)}
.home-couch:before{content:"";position:absolute;left:14px;top:8px;right:14px;height:24px;background:#79b8dd;border-radius:10px}
.home-couch:after{content:"";position:absolute;left:0;top:-30px;width:38px;height:70px;background:#4a8bb3;border-radius:12px 12px 0 0}
.home-couch .arm2{position:absolute;right:0;top:-30px;width:38px;height:70px;background:#4a8bb3;border-radius:12px 12px 0 0}
.home-plant{position:absolute;right:150px;bottom:100px;width:90px;height:120px}
.home-plant .pot{position:absolute;bottom:0;left:22px;width:46px;height:38px;background:#b5651d;border-radius:6px 6px 14px 14px}
.home-plant .leaves{position:absolute;bottom:30px;left:4px;width:82px;height:80px;background:#3e7a3e;border-radius:50% 50% 50% 10%}
.home-plant .leaf{position:absolute;width:34px;height:20px;background:#4c9a4c;border-radius:50%}
.home-plant .leaf.a{left:6px;bottom:66px;transform:rotate(-30deg)}
.home-plant .leaf.b{right:6px;bottom:66px;transform:rotate(30deg)}
.home-plant .leaf.c{left:26px;bottom:92px}
.home-curtain{position:absolute;right:40px;top:0;bottom:0;width:80px;background:linear-gradient(90deg,#8b3a5a,#a94f72);box-shadow:inset -10px 0 14px rgba(0,0,0,.25)}
.home-curtain:before{content:"";position:absolute;top:0;left:-14px;width:8px;height:100%;background:#6b2c46}
.home-lamp{position:absolute;left:280px;bottom:100px;width:60px;height:130px}
.home-lamp .stand{position:absolute;bottom:0;left:26px;width:8px;height:100px;background:#8b5a2b}
.home-lamp .base{position:absolute;bottom:0;left:14px;width:32px;height:10px;background:#6b3f1f;border-radius:4px}
.home-lamp .shade{position:absolute;bottom:94px;left:10px;width:40px;height:34px;background:#ffdf7a;border-radius:20px 20px 8px 8px;box-shadow:0 0 18px rgba(255,220,110,.5)}
#hns-hint{position:absolute;top:22px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#ffd966;font-weight:800;padding:8px 16px;border-radius:10px;z-index:40;display:none;white-space:nowrap}
.balloon{position:absolute;z-index:6}
.balloon .b{position:relative;width:34px;height:40px;border-radius:50% 50% 46% 46%;box-shadow:inset -6px -8px 10px rgba(0,0,0,.18),inset 4px 4px 6px rgba(255,255,255,.35)}
.balloon .knot{position:absolute;top:38px;left:13px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid #999}
.balloon .string{position:absolute;top:44px;left:14px;width:0;height:26px;border-left:1.5px dashed rgba(0,0,0,.4)}
.balloon.red .b{background:#e74c3c}
.balloon.blue .b{background:#3498db}
.balloon.green .b{background:#2ecc71}
.balloon.yellow .b{background:#f1c40f}
.balloon.purple .b{background:#9b59b6}
.balloon.pop{animation:popB .3s ease}
@keyframes popB{to{transform:scale(1.6);opacity:0}}
.girl.reveal{animation:popIn .3s ease}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.the-end{position:absolute;inset:0;display:none;z-index:60;pointer-events:none}
.the-end.show{display:block}
.the-end h2{position:absolute;top:110px;left:0;right:0;text-align:center;font-size:60px;color:#ffd966;text-shadow:0 4px 0 #7a2c1a,0 10px 18px rgba(0,0,0,.4)}
.girl.marion .hair,.girl.marion .hair-back,.girl.marion .bangs{background:#e0b04a}
.girl.marion .bun{position:absolute;top:0;width:16px;height:16px;background:#e0b04a;border-radius:50%}
.girl.marion .bun.l{left:9px}
.girl.marion .bun.r{left:39px}
.girl.marion .dress{background:#2e9e8f}
.girl.marion .dress:after{opacity:.7}

.dialog-box{position:absolute;left:40px;right:40px;bottom:22px;z-index:60;background:rgba(12,28,46,.94);color:#fff;border:3px solid #ffd966;border-radius:14px;padding:12px 16px;cursor:pointer;display:none;box-shadow:0 8px 20px rgba(0,0,0,.5)}.dialog-box.show{display:block;animation:dialogIn .25s ease}
@keyframes dialogIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.dialog-name{font-weight:800;color:#ffd966;font-size:14px;margin-bottom:4px}
.dialog-text{font-size:16px;line-height:1.4;min-height:22px}
.dialog-box .typing:after{content:"|";animation:blink .7s infinite}
@keyframes blink{50%{opacity:0}}

.btn-layer{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:70;background:rgba(0,0,0,.25)}
.btn-layer.show{display:flex}
.btn{font-family:inherit;font-size:20px;font-weight:800;color:#fff;background:linear-gradient(#ffb43c,#f08a0c);border:3px solid #fff;border-radius:14px;padding:14px 30px;cursor:pointer;box-shadow:0 6px 0 #b96305,0 10px 20px rgba(0,0,0,.4);text-shadow:0 2px 2px rgba(0,0,0,.35)}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b96305}