*,*::before,*::after{touch-action:manipulation}

:root{
  --grad:linear-gradient(90deg,#d9367a,#7c4de8);
  --grad2:linear-gradient(135deg,#ffb23f,#f2672e);
  --ink:#2a1f4a; --paper:#fff8ef; --soft:#f6ecff; --muted:#6b5f86;
  --shadow:0 5px 12px rgba(124,77,232,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#2a1f4a;color:var(--ink);font-family:Onest,system-ui,sans-serif;overflow:hidden;overscroll-behavior:none}
[hidden]{display:none!important}
#app{position:fixed;inset:0;user-select:none;-webkit-user-select:none;touch-action:none}
canvas{position:absolute;left:0;display:block}
h1,h2,h3,.title{font-family:"Montserrat Alternates",Onest,sans-serif}

/* HUD */
#hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}
#hearts{display:flex;gap:2px}
#hearts img{width:30px;height:auto;transition:transform .2s,opacity .2s}
#hearts img.off{opacity:.25;filter:grayscale(1)}
.chip{display:flex;align-items:center;gap:5px;background:rgba(42,31,74,.72);border:1px solid rgba(255,255,255,.25);padding:4px 10px;border-radius:999px;font-size:15px;}
.chip img{height:20px}
#hud .sp{flex:1}
#bossbar{display:flex;align-items:center;gap:6px}
#bossbar i{width:14px;height:14px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 2px #fff inset}
#bossbar i.off{background:transparent}
.iconbtn{pointer-events:auto;border:0;width:40px;height:40px;border-radius:50%;background:rgba(42,31,74,.6);color:#fff;font-size:18px;border:1px solid rgba(255,255,255,.3);cursor:pointer}

/* controls */
#ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 14px calc(14px + env(safe-area-inset-bottom));pointer-events:none}
.pad{display:flex;gap:12px;align-items:flex-end;pointer-events:auto}
.btn{width:70px;height:70px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(42,31,74,.35);;color:#fff;font-size:28px;display:grid;place-items:center;touch-action:none;cursor:pointer;font-family:inherit;padding:0;position:relative}
.btn.on{transform:scale(.92);background:rgba(255,255,255,.3)}
.btn.jump{width:84px;height:84px;background:var(--grad);border:0;box-shadow:var(--shadow);font-size:34px}
.btn.power{background:var(--grad2);border:0;box-shadow:0 5px 12px rgba(242,103,46,.4)}
.btn.power.glow{animation:glow 1s infinite}
.btn.sw{width:58px;height:58px;overflow:hidden;background:#fff;border:3px solid #fff}
.btn.sw img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.btn small{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.btn.coach{animation:coach 1s infinite;z-index:2}
@keyframes coach{0%{box-shadow:0 0 0 0 rgba(255,209,102,.9)}70%{box-shadow:0 0 0 18px rgba(255,209,102,0)}100%{box-shadow:0 0 0 0 rgba(255,209,102,0)}}
@media (pointer:coarse){.btn.coach::after{content:'👆';position:absolute;left:50%;top:62%;font-size:34px;pointer-events:none;animation:tap .9s infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}}
@keyframes tap{0%,100%{transform:translate(-20%,14px) scale(1)}50%{transform:translate(-20%,2px) scale(.88)}}
@keyframes glow{50%{box-shadow:0 0 0 10px rgba(255,200,80,.45),0 0 30px #ffd166}}
@media (hover:hover) and (pointer:fine){#ctrl{display:none}}
@media (max-width:480px){#ctrl{padding-left:8px;padding-right:8px}.pad{gap:7px}.btn{width:56px;height:56px;font-size:22px}.btn.jump{width:66px;height:66px;font-size:28px}.btn.sw{width:48px;height:48px}.chip{font-size:13px;padding:3px 8px}#hearts img{width:24px}}
#kbd{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(42,31,74,.55);padding:6px 14px;border-radius:999px;pointer-events:none;white-space:nowrap}
@media not all and (hover:hover) and (pointer:fine){#kbd{display:none}}

/* toast */
#toast{position:absolute;left:50%;top:calc(62px + env(safe-area-inset-top));transform:translateX(-50%);max-width:min(560px,92vw);background:#fff;color:var(--ink);padding:10px 16px;border-radius:16px;font-weight:600;font-size:15px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.3);text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(4px)}

/* screens */
.screen{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:radial-gradient(circle at 20% 0%,#ffe2f0 0,transparent 45%),radial-gradient(circle at 100% 30%,#e7dcff 0,transparent 50%),var(--paper);z-index:5}
.wrap{max-width:760px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom))}
.logo{font-size:clamp(30px,7vw,48px);line-height:1.02;margin:6px 0 6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.lead{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 18px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:var(--grad);color:#fff;font:700 18px Onest,sans-serif;padding:15px 30px;box-shadow:var(--shadow);cursor:pointer;text-decoration:none}
.cta.alt{background:#fff;color:#7c4de8;box-shadow:0 0 0 2px #e3d6ff inset}
.cta.gold{background:var(--grad2);box-shadow:0 5px 12px rgba(242,103,46,.35)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.heroes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.hcard{background:#fff;border-radius:20px;padding:12px 12px 14px;box-shadow:0 6px 20px rgba(80,50,140,.12);text-align:center}
.hcard .pic{height:140px;display:grid;place-items:end center;background:linear-gradient(180deg,#f6ecff,#ffe9f2);border-radius:14px;margin-bottom:8px;overflow:hidden}
.hcard .pic img{max-height:132px;max-width:100%}
.hcard h3{margin:2px 0 4px;font-size:20px}
.pw{display:inline-block;background:var(--grad2);color:#fff;font-weight:700;font-size:13px;padding:3px 10px;border-radius:999px;margin-bottom:6px}
.hcard p{margin:0;font-size:14px;color:var(--muted);line-height:1.4}
.soon{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 18px}
.soon span{background:#fff;border:1px dashed #cdbdf0;color:#8b7bb0;border-radius:999px;padding:4px 10px;font-size:13px}
details{background:#fff;border-radius:18px;padding:12px 16px;box-shadow:0 6px 20px rgba(80,50,140,.1);margin:0 0 18px}
summary{font-weight:700;cursor:pointer;font-size:17px}
.rules{margin:10px 0 2px;padding:0;list-style:none;display:grid;gap:8px}
.rules li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.rules b.k{flex:none;min-width:34px;height:30px;padding:0 6px;border-radius:9px;display:grid;place-items:center;background:var(--soft);font-size:16px}
.tip{font-size:13px;color:var(--muted);margin-top:14px}
.small{font-size:13px;color:var(--muted)}
#rot{display:none;background:#fff3d6;border-radius:12px;padding:8px 12px;font-size:14px;margin:0 0 12px}
@media (orientation:portrait) and (max-width:700px){#rot{display:block}}

/* final */
#final .scene{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(60,30,120,.25);aspect-ratio:16/9;background:#cfe}
#final canvas{position:absolute;inset:0;width:100%;height:100%}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.stat{background:#fff;border-radius:14px;padding:8px 14px;font-weight:700;box-shadow:0 4px 12px rgba(80,50,140,.1);display:flex;align-items:center;gap:6px}
.stat img{height:22px}
.donate{background:#fff;border-radius:20px;padding:16px;box-shadow:0 6px 20px rgba(80,50,140,.12);margin:16px 0}
.donate p{margin:0 0 12px;line-height:1.5}
#pause{background:rgba(42,31,74,.75);display:grid;place-items:center}
#pause .box{background:var(--paper);border-radius:22px;padding:22px;display:grid;gap:10px;min-width:260px;text-align:center}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .45s;z-index:4}
#fade.on{opacity:1}
#loading{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:700;z-index:9;background:#2a1f4a}

/* ---- game-like menu ---- */
#menu{background:#2a1f4a;overflow:hidden;touch-action:manipulation}
#menu::before{content:"";position:absolute;inset:0;background:var(--menubg,none) center 70%/cover no-repeat;filter:saturate(1.1)}
#menu::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,31,74,.72) 0%,rgba(42,31,74,.15) 45%,rgba(42,31,74,.55) 100%)}
#menu>.mtop{position:relative;z-index:6}
#menu>.stage{z-index:3}
.mright{position:absolute;top:calc(14px + env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:flex;gap:10px;align-items:center}
.mtop{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(14px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}
.glogo{font:800 clamp(30px,7.2vmin,64px)/.95 "Montserrat Alternates",Onest,sans-serif;color:#fff;-webkit-text-stroke:2px #2a1f4a;paint-order:stroke fill;text-shadow:3px 0 0 #2a1f4a,-3px 0 0 #2a1f4a,0 3px 0 #2a1f4a,0 -3px 0 #2a1f4a,2px 2px 0 #2a1f4a,-2px 2px 0 #2a1f4a,2px -2px 0 #2a1f4a,-2px -2px 0 #2a1f4a,0 4px 0 #2a1f4a;letter-spacing:.5px}
.glogo span{color:#ffd166}
.msub{display:inline-block;margin-top:10px;background:#fff;color:#7c4de8;font-weight:700;font-size:clamp(12px,2.6vmin,16px);padding:5px 12px;border-radius:999px;border:2px solid #2a1f4a;box-shadow:0 3px 0 #2a1f4a}
.round{width:48px;height:48px;border-radius:50%;border:3px solid #2a1f4a;background:#ffd166;color:#2a1f4a;font:800 24px "Montserrat Alternates",sans-serif;box-shadow:0 4px 0 #2a1f4a;cursor:pointer;flex:none}
.round.sm{width:40px;height:40px;font-size:18px;background:#fff}
.round:active{transform:translateY(3px);box-shadow:0 1px 0 #2a1f4a}
.stage{position:absolute;left:0;right:0;bottom:0;height:64%;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,30px);padding:0 2vw calc(7vh + env(safe-area-inset-bottom))}
.mhero{position:relative;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-family:inherit}
.mhero img{height:min(46vh,24vw);width:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35));will-change:transform;animation:bob 2.4s ease-in-out infinite;transition:transform .2s}
.mhero[data-h="shp"] img{animation-delay:-.8s;height:min(42vh,22vw)}
.mhero.boss img{height:min(48vh,25vw);animation-delay:-1.6s}
.mhero:hover img,.mhero.open img{transform:scale(1.06) translateY(-4px)}
@keyframes bob{50%{translate:0 -8px}}
.tag{margin-top:-6px;background:#fff;color:#2a1f4a;font-weight:800;font-size:clamp(12px,2.4vmin,16px);padding:4px 12px;border-radius:999px;border:2px solid #2a1f4a;box-shadow:0 3px 0 #2a1f4a}
.boss .tag{background:#ff6b8a;color:#fff}
.tag{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.tag small{font-size:clamp(10px,1.8vmin,13px);font-weight:600;opacity:.85;white-space:nowrap}
.mhero{cursor:default}
.tipsteps small{font-size:12px;font-weight:600;opacity:.7}
.mhero.boss .pop{left:auto;right:62%;bottom:auto;top:12%;transform:translate(0,8px) scale(.9)}
.mhero.boss:hover .pop,.mhero.boss.open .pop{transform:translate(0,0) scale(1)}
#iosTip{position:fixed;inset:0;z-index:30;background:rgba(20,12,40,.7);display:grid;place-items:center;padding:16px}
#iosTip[hidden]{display:none}
.tipbox{background:var(--paper);border:4px solid #2a1f4a;border-radius:22px;padding:18px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:320px;text-align:center;font-weight:700;color:#2a1f4a}
.tiph{font:800 20px "Montserrat Alternates",sans-serif}
.tipsteps{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:7px;align-self:stretch}
.tipsteps li{display:flex;align-items:center;gap:12px;font-size:16px;text-align:left}
.tipkey.ok{background:#e3f8ea;color:#1f9d55}
#iosTip .tipbox{max-height:calc(100vh - 32px);overflow-y:auto}
@media (max-height:480px){#iosTip .tipbox{padding:10px 18px;gap:4px}.tipsteps{gap:3px}.tipsteps li{font-size:14px}#iosTip .tipkey{width:28px;height:28px;font-size:15px}.tiph{font-size:17px}.tipsmall{display:none}}
.tiprow{display:flex;align-items:center;gap:10px;font-size:18px}
.tipkey{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#e8f0ff;border:2px solid #2a1f4a;font-size:22px;color:#1a6cff}
.tiparrow{font-size:20px;opacity:.5}
.tipsmall{font-size:13px;font-weight:600;opacity:.7}
.pop{position:absolute;bottom:calc(100% - 10px);left:50%;transform:translate(-50%,8px) scale(.9);opacity:0;pointer-events:none;width:max-content;max-width:200px;background:#fff;border:3px solid #2a1f4a;border-radius:16px;padding:8px 12px;box-shadow:0 5px 0 #2a1f4a;font-size:14px;line-height:1.3;color:#2a1f4a;transition:.18s;z-index:3;text-align:center}
.pop b{display:block;font:800 16px "Montserrat Alternates",sans-serif;color:#d9367a;margin-bottom:2px}
.pop::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:10px solid transparent;border-top-color:#2a1f4a}
.mhero:hover .pop,.mhero.open .pop{opacity:1;transform:translate(-50%,0) scale(1)}
.mid .msub{margin:0;text-align:center;line-height:1.2;border-radius:16px;font-size:clamp(11px,2.2vmin,15px)}
.mid{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 clamp(6px,3vw,40px);align-self:center}
.playbig{width:clamp(84px,19vmin,128px);height:clamp(84px,19vmin,128px);border-radius:50%;border:4px solid #2a1f4a;background:var(--grad);color:#fff;font-size:clamp(34px,8vmin,54px);box-shadow:0 7px 0 #2a1f4a,0 0 0 8px rgba(255,255,255,.25);cursor:pointer;padding-left:8px;animation:pulse 1.6s ease-in-out infinite}
.playbig:active{transform:translateY(5px);box-shadow:0 2px 0 #2a1f4a}
@keyframes pulse{50%{box-shadow:0 7px 0 #2a1f4a,0 0 0 16px rgba(255,255,255,.12)}}
.playlbl{font:800 clamp(18px,4vmin,26px) "Montserrat Alternates",sans-serif;color:#fff;text-shadow:3px 0 0 #2a1f4a,-3px 0 0 #2a1f4a,0 3px 0 #2a1f4a,0 -3px 0 #2a1f4a,2px 2px 0 #2a1f4a,-2px 2px 0 #2a1f4a,2px -2px 0 #2a1f4a,-2px -2px 0 #2a1f4a,0 5px 0 #2a1f4a}
.soonchip{margin-top:8px;background:rgba(42,31,74,.75);color:#fff;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
@media (orientation:portrait){.stage{height:58%;flex-wrap:wrap;align-content:flex-end;row-gap:10px}.mid{order:-1;flex-basis:100%;margin-bottom:8px}.mhero img{height:min(30vh,30vw)}.mhero[data-h="shp"] img{height:min(28vh,28vw)}.mhero.boss img{height:min(31vh,31vw)}}

/* drawer */
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--paper);z-index:8;transform:translateX(105%);transition:transform .3s ease;box-shadow:-10px 0 30px rgba(0,0,0,.35);overflow-y:auto;padding:calc(16px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));border-left:4px solid #2a1f4a}
.drawer.open{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dhead h2{margin:0;font-size:24px;color:#2a1f4a}
.irules{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.irules li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;line-height:1.3}
.irules .k{flex:none;min-width:46px;height:40px;padding:0 6px;border-radius:12px;display:grid;place-items:center;background:#fff;border:2px solid #2a1f4a;box-shadow:0 3px 0 #2a1f4a;font-size:18px}
.ikeys{margin-top:16px;font-size:14px;color:var(--muted)}
.iabout{font-size:13px;color:var(--muted);line-height:1.45}

/* rotate */
#rotate{display:none;position:fixed;inset:0;z-index:20;background:#2a1f4a;color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
#rotate .phone{width:60px;height:100px;border:5px solid #fff;border-radius:14px;position:relative;animation:rot 2s ease-in-out infinite}
#rotate .phone::after{content:"";position:absolute;bottom:6px;left:50%;width:14px;height:4px;border-radius:2px;background:#fff;transform:translateX(-50%)}
@keyframes rot{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
#rotate .rt{font:800 24px "Montserrat Alternates",sans-serif}
.linkbtn{background:none;border:0;color:#cdbdf0;text-decoration:underline;font:500 15px Onest,sans-serif;cursor:pointer}
@media (orientation:portrait) and (pointer:coarse){body:not(.vert) #rotate{display:flex}}

/* final buttons */
.donate .cta{width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2 .cta{width:100%;padding-left:10px;padding-right:10px}

/* final splash */
#final{overflow:hidden;background:#2a1f4a;touch-action:manipulation}
#final .fscene{position:absolute;inset:0}
#final .fscene canvas{position:absolute;inset:0;width:100%;height:100%}
#final .ftop{position:absolute;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top)) 16px 30px;text-align:center;background:linear-gradient(180deg,rgba(42,31,74,.7),rgba(42,31,74,0))}
#final .ftitle{font:800 clamp(30px,8vmin,60px)/1 "Montserrat Alternates",sans-serif;color:#ffd166;text-shadow:3px 0 0 #2a1f4a,-3px 0 0 #2a1f4a,0 3px 0 #2a1f4a,0 -3px 0 #2a1f4a,2px 2px 0 #2a1f4a,-2px 2px 0 #2a1f4a,2px -2px 0 #2a1f4a,-2px -2px 0 #2a1f4a,0 4px 0 #2a1f4a}
#final .fsub{color:#fff;font-weight:700;font-size:clamp(13px,2.6vmin,17px);margin-top:6px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
#final .stats{justify-content:center;margin:8px 0 0}
#final .stat{padding:4px 12px;font-size:14px;border:2px solid #2a1f4a;box-shadow:0 3px 0 #2a1f4a}
#final .fbot{position:absolute;left:0;right:0;bottom:0;padding:30px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(42,31,74,.75),rgba(42,31,74,0));display:grid;gap:8px;max-width:640px;margin:0 auto}
#final .fbot .cta{width:100%;padding:12px 10px;font-size:16px;border:3px solid #2a1f4a;box-shadow:0 4px 0 #2a1f4a}
#final .fbot .cta.alt{box-shadow:0 4px 0 #2a1f4a}
#final.fam .fbot{display:flex;justify-content:center;align-items:center;gap:8px;background:none;padding:0 10px calc(8px + env(safe-area-inset-bottom))}
#final.fam .fbot .row2{display:flex;gap:8px}
#final.fam .fbot .cta{width:auto;padding:7px 14px;font-size:14px;white-space:nowrap}

#ctrl.bonus .pad:last-child{visibility:hidden}
#ctrl.knead .pad:last-child{display:none}
#ctrl.hug{display:none!important}
#ctrl.knead .pad:first-child{position:fixed;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;pointer-events:none}
#ctrl.knead .btn{width:104px;height:104px;font-size:0;pointer-events:auto;position:relative;background:rgba(124,77,232,.55);border-color:#fff}
#ctrl.knead .btn::before{content:'🐾';font-size:46px}
#ctrl.knead .btn[data-k="right"]::before{display:inline-block;transform:scaleX(-1)}
#ctrl.fly .pad:first-child{visibility:hidden}
#ctrl.fly .btn.sw,#ctrl.fly .btn.power{display:none}
#ctrl.fly .btn.jump{width:96px;height:96px;font-size:40px}
.minibtn{border:3px solid #2a1f4a;background:var(--grad2);color:#fff;font:800 clamp(15px,3vmin,19px) Onest,sans-serif;padding:9px 16px;text-shadow:0 2px 0 rgba(42,31,74,.5);animation:wig 2.5s ease-in-out infinite;border-radius:999px;box-shadow:0 4px 0 #2a1f4a;cursor:pointer;white-space:nowrap}
.minibtn:active{transform:translateY(3px);box-shadow:0 1px 0 #2a1f4a}
#minis{background:#2a1f4a;overflow:hidden;display:flex;flex-direction:column}
#minis::before{content:"";position:absolute;inset:0;background:var(--menubg,none) center/cover;filter:blur(3px) brightness(.45)}
#minis>*{position:relative}
.mtopbar{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.mtopbar h2{margin:0;flex:1;font:800 clamp(24px,5vmin,34px) "Montserrat Alternates",sans-serif;color:#fff;text-shadow:2px 0 0 #2a1f4a,-2px 0 0 #2a1f4a,0 2px 0 #2a1f4a,0 -2px 0 #2a1f4a,0 4px 0 #2a1f4a}
.mprog{background:#ffd166;border:3px solid #2a1f4a;box-shadow:0 3px 0 #2a1f4a;border-radius:999px;padding:4px 12px;font-weight:800;color:#2a1f4a}
.mhint{color:#fff;opacity:.85;font-weight:600;font-size:14px;padding:6px max(16px,env(safe-area-inset-left)) 0}
.track{flex:1;display:flex;align-items:center;gap:34px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:10px max(24px,env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.gcard{flex:none;width:clamp(190px,26vw,240px);min-height:min(78%,330px);scroll-snap-align:center;background:#fff;border:4px solid #2a1f4a;border-radius:24px;box-shadow:0 7px 0 #2a1f4a;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;position:relative;color:#2a1f4a}
.gcard:not(:last-child)::after{content:"➜";position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-size:22px;color:#ffd166;text-shadow:0 2px 0 #2a1f4a}
.gnum{position:absolute;top:-14px;left:-12px;width:36px;height:36px;border-radius:50%;background:#7c4de8;color:#fff;border:3px solid #2a1f4a;display:grid;place-items:center;font-weight:800}
.gpic{width:clamp(70px,16vmin,100px);height:clamp(70px,16vmin,100px);border-radius:50%;border:4px solid #2a1f4a;overflow:hidden;background:#f1e8ff;display:grid;place-items:center}
.gpic img{width:100%;height:100%;object-fit:cover}
.gpic span{font:800 38px "Montserrat Alternates",sans-serif;color:#b9a8dd}
.gcard h3{margin:4px 0 0;font:800 17px "Montserrat Alternates",sans-serif}
.gcard .who{font-size:13px;color:var(--muted)}
.ggoal{margin-top:auto;background:#fff6dc;border:2px dashed #e7b84a;border-radius:12px;padding:6px 8px;font-size:13px;font-weight:600;line-height:1.3;width:100%}
.ggoal b{display:block;font-size:11px;letter-spacing:.5px;color:#b07b00}
.gbtn{width:100%;border:3px solid #2a1f4a;border-radius:999px;padding:9px;font:800 15px Onest,sans-serif;box-shadow:0 4px 0 #2a1f4a;cursor:pointer;background:var(--grad);color:#fff;margin-top:6px}
.gbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #2a1f4a}
.gbtn[disabled]{background:#ece6f7;color:#8b7bb0;cursor:default;box-shadow:0 2px 0 #2a1f4a}
.gcard.done .gnum{background:#2bb673}
.gcard.done{box-shadow:0 7px 0 #2a1f4a,0 0 0 5px #2bb673}
.gcard.locked{filter:grayscale(.6);opacity:.82}
.gcard.locked .gpic{background:#ddd}
.gpic.ic{border:0;background:none!important;position:relative;overflow:visible}
.gpic.ic img{border-radius:50%}
.gpic .glock{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:20px;background:#fff;border:3px solid #2a1f4a;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}
.gcard.cur{box-shadow:0 7px 0 #2a1f4a,0 0 0 6px #ffd166}
.gcard.prize{background:linear-gradient(180deg,#fff,#fff3cf)}
.mgoal{font-weight:700;color:#7c4de8;text-align:center}
#mres .box .row2{width:100%}
@media (max-height:480px){#mres .box{padding:12px 18px;gap:6px}#mres .box img{width:64px!important;height:64px!important}#mres .ftitle{font-size:26px!important}#mres .cta{padding:9px 14px;font-size:15px}}
.track{padding-top:22px!important}
#mres{background:rgba(42,31,74,.8);display:grid;place-items:center}
#mres .box{background:var(--paper);border:4px solid #2a1f4a;box-shadow:0 6px 0 #2a1f4a;border-radius:24px;padding:20px;display:grid;gap:10px;justify-items:center;min-width:280px;text-align:center}
#mres .ftitle{font:800 34px "Montserrat Alternates",sans-serif;color:#d9367a}
#mres .cta{width:100%}
@keyframes wig{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-4deg) scale(1.05)}90%{transform:rotate(4deg) scale(1.05)}95%{transform:rotate(-2deg)}}
@media (max-width:600px){.mtop{padding-top:calc(64px + env(safe-area-inset-top))}}
/* mini track compact */
.track{align-items:center!important;padding-top:26px!important}
.gcard{min-height:0!important;padding:10px 12px 12px!important;gap:2px!important}
.gpic{width:clamp(54px,13vmin,90px)!important;height:clamp(54px,13vmin,90px)!important}
.gcard h3{font-size:clamp(14px,3.4vmin,17px)!important}
.ggoal{margin-top:6px!important}
@media (max-height:480px){.mhint{display:none}.mtopbar{padding-top:calc(8px + env(safe-area-inset-top))}.gcard .who{display:none}.gbtn{padding:7px}}

/* ---- Shprotik mini-game ---- */
#shp{background:#2a1f4a;overflow:hidden;touch-action:manipulation}
#shp::before{content:"";position:absolute;inset:-30px;background:var(--sbg,none) center/cover;filter:blur(18px) brightness(.5)}
.shp-scene{position:absolute;left:50%;bottom:0;top:auto;transform:translateX(-50%);width:max(100vw,177.78vh);aspect-ratio:16/9;background:var(--sbg,none) center/cover;overflow:hidden}
.shp-cat{position:absolute;bottom:12%;height:30%;transform:translateX(-50%);transition:left 1.1s ease-in-out;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));z-index:3}
.shp-cat.shp_push{height:24%}.shp-cat.shp_yay{height:33%}
.bath .shp-cat{bottom:11%}
.bath .shp-cat.ride{bottom:13%;transition:left 2.2s ease-in-out}
.shp-bridge{position:absolute;left:41.5%;width:20%;bottom:9.5%;height:auto;transform:translateY(-260%);opacity:0;transition:transform .5s cubic-bezier(.5,1.6,.5,1),opacity .2s;z-index:2}
.shp-bridge.drop{transform:none;opacity:1}
.bath .shp-bridge{display:none}
.shp-raft{position:absolute;left:30%;bottom:4%;width:20%;aspect-ratio:526/323;background:none;z-index:2;transition:left 2.2s ease-in-out;display:none}
.bath .shp-raft{display:block}
.shp-raft.go{left:55%}
.shp-sack{position:absolute;right:6%;bottom:12%;height:30%;animation:pop .6s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.shp-top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:12px;display:flex;align-items:center;gap:12px;z-index:5}
.shp-prog{display:flex;gap:6px}
.shp-prog i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;background:rgba(255,255,255,.75);color:#2a1f4a;border:2px solid #2a1f4a}
.shp-prog i.ok{background:#2bb673;color:#fff}.shp-prog i.cur{background:#ffd166}
.shp-panel{position:absolute;right:max(12px,env(safe-area-inset-right));top:calc(52px + env(safe-area-inset-top));bottom:12px;width:min(470px,calc(100vw - 24px));overflow-y:auto;background:var(--paper);border:3px solid #2a1f4a;box-shadow:0 6px 0 #2a1f4a;border-radius:22px;padding:14px 16px;z-index:6;color:#2a1f4a}
.shp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.shp-head h3{margin:0;font:800 18px "Montserrat Alternates",sans-serif}
.shp-hint{border:2px solid #2a1f4a;background:#ffd166;border-radius:999px;font:700 13px Onest,sans-serif;padding:6px 10px;cursor:pointer;white-space:nowrap;color:#2a1f4a}
.shp-hint[disabled]{opacity:.5}
.shp-rule{margin:0 0 10px;font-size:14px;line-height:1.45}
.shp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.shp-check{padding:10px 20px;font-size:16px;border:3px solid #2a1f4a;box-shadow:0 4px 0 #2a1f4a}
.shp-msg{min-height:20px;margin-top:8px;font-weight:700;font-size:14px;line-height:1.35}
.shp-msg.bad{color:#d9367a}.shp-msg.good{color:#6b3fd4}
.sum{font-weight:800;font-size:16px}
.crates{display:flex;flex-wrap:wrap;gap:8px}
.crate{position:relative;width:76px;border:0;background:none;padding:0;cursor:pointer;transition:transform .15s}
.crate img{width:100%;display:block}
.crate span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font:800 22px "Montserrat Alternates",sans-serif;color:#2a1f4a}
.crate.on{transform:translateY(-6px)}.crate.on img{filter:drop-shadow(0 0 0 #7c4de8) drop-shadow(0 0 6px #7c4de8)}
.clues{margin:0 0 6px;padding-left:0;list-style:none;display:grid;gap:5px;font-size:13.5px;line-height:1.3}
.clues code{display:inline-block;background:#2a1f4a;color:#ffd166;border-radius:6px;padding:2px 6px;margin-right:6px;font:800 14px monospace;letter-spacing:2px}
ol.clues.small{list-style:decimal;padding-left:20px}
.wheels{display:flex;gap:8px}
.wheel{display:flex;flex-direction:column;align-items:center;background:#2a1f4a;border-radius:12px;padding:2px 4px}
.wheel button{background:none;border:0;color:#ffd166;font-size:16px;cursor:pointer;padding:2px 10px}
.wheel span{background:#fff8ef;border-radius:6px;width:40px;text-align:center;font:800 26px monospace;color:#2a1f4a}
.tokens,.seats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.tk,.seat{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-family:inherit;color:#2a1f4a;padding:0}
.tk small,.seat small{font-size:11px;font-weight:700}
.tok{width:44px;height:44px;border-radius:50%;background:var(--c);border:3px solid #2a1f4a;display:grid;place-items:center;color:#fff;font:800 20px "Montserrat Alternates",sans-serif;overflow:hidden}
.tok img{width:100%;height:100%;object-fit:cover}
.tk.on .tok{box-shadow:0 0 0 4px #ffd166;transform:translateY(-3px)}
.seat{width:66px;min-height:96px;justify-content:flex-end;position:relative}
.seat .sb{width:66px;display:block;margin-top:2px}
.seat em{font-style:normal;font-weight:800;color:#b9a8dd;width:44px;height:44px;border:3px dashed #cdbdf0;border-radius:50%;display:grid;place-items:center}
.tip{font-size:12px;color:var(--muted)}
.garland{display:flex;justify-content:space-between;gap:4px;padding:14px 6px 6px;background:linear-gradient(#2a1f4a,#2a1f4a) center 10px/100% 3px no-repeat}
.bulb{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0}
.bulb i{width:36px;height:46px;border-radius:50% 50% 45% 45%;background:#c9c4d3;border:3px solid #2a1f4a;transition:.2s}
.bulb.on i{background:var(--c);box-shadow:0 0 16px var(--c),0 0 30px var(--c)}
.bulb small{font-weight:800;font-size:12px;color:#2a1f4a}
.river{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:6px;align-items:stretch;min-height:120px}
.bank{background:#e9dcc6;border:2px solid #b89b6e;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px}
.bank button,.cg{border:0;background:none;cursor:pointer;padding:0}
.rit{display:flex;flex-direction:column;align-items:center;gap:1px;font-weight:700;font-size:11px;color:#2a1f4a}
.rit i{width:40px;height:40px;border-radius:50%;background:#fff;border:3px solid #2a1f4a;display:grid;place-items:center;overflow:hidden;box-sizing:border-box}
.rit i img{width:78%;height:78%;object-fit:contain}
.rit i.ic{border:0;background:none}.rit i.ic img{width:100%;height:100%}
#shp button{-webkit-tap-highlight-color:transparent}#shp button:focus:not(:focus-visible){outline:none}
.tok:has(img){background:transparent;border:0}
.raftbox .rc{border:0!important}
.water{background:linear-gradient(#7fd3ff,#3aa7e6);border-radius:12px;position:relative;overflow:hidden}
.raftbox{position:absolute;bottom:6px;width:62%;transition:left .6s ease;display:flex;flex-direction:column;align-items:center}
.raftbox.L{left:2%}.raftbox.R{left:36%}
.raftbox .rf{width:100%;display:block}
.raftbox .rc{position:absolute;bottom:52%;left:4%;width:42%;border-radius:50%;border:2px solid #2a1f4a}
.raftbox .cg{position:absolute;bottom:60%;right:-6%}
.raftbox .cg small{display:none}
.shp-next{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;background:var(--paper);border:3px solid #2a1f4a;box-shadow:0 6px 0 #2a1f4a;border-radius:22px;padding:18px 26px;text-align:center;font-weight:800;font-size:20px;display:grid;gap:12px;animation:pop .4s}
.shp-end{position:absolute;inset:0;background:rgba(42,31,74,.6);display:grid;place-items:center;z-index:8}
.shp-end .box{background:var(--paper);border:4px solid #2a1f4a;box-shadow:0 6px 0 #2a1f4a;border-radius:24px;padding:18px;display:grid;gap:10px;justify-items:center;text-align:center;max-width:380px;line-height:1.45}
.shp-end img{width:96px;height:96px;border-radius:20px;border:3px solid #2a1f4a}
.shp-end .row2{width:100%}
@media (orientation:portrait){.shp-scene{top:0;transform:translateX(-50%);width:100vw}.shp-panel{top:auto;left:12px;right:12px;width:auto;max-height:calc(100vh - 56.25vw - 20px);bottom:12px}.shp-top{top:calc(56.25vw + 8px)}.shp-panel{top:calc(56.25vw + 52px)}}
@media (max-height:480px) and (orientation:landscape){.shp-panel{padding:10px 12px}.shp-rule{font-size:13px;margin-bottom:6px}.crate{width:60px}.crate span{font-size:18px}.clues{font-size:12px;gap:3px}.seat{width:56px;min-height:80px}.seat .sb{width:56px}.tok{width:36px;height:36px}.bulb i{width:28px;height:36px}}
.goal{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font:800 20px "Montserrat Alternates",sans-serif;margin:2px 0 10px}
.goal em{font-style:normal;opacity:.6}
.slot{display:inline-grid;place-items:center;width:34px;height:34px;border:2px dashed #2a1f4a;border-radius:9px;font:800 17px Onest,sans-serif;font-style:normal;background:rgba(255,255,255,.6)}
.slot.on{border-style:solid;background:#ffd166}
.sum.ok{color:#2bb673}
.goal .demo{display:inline-flex;align-items:center;gap:3px;font:700 15px Onest,sans-serif;background:rgba(42,31,74,.08);padding:4px 10px;border-radius:999px}
.goal .demo i{width:12px;height:16px;border-radius:50% 50% 45% 45%;background:#bbb;border:2px solid #2a1f4a;animation:dblink 1.6s infinite}
.goal .demo i.on{animation-delay:.0s}
@keyframes dblink{0%,40%{background:#bbb}50%,90%{background:#ffd166;box-shadow:0 0 8px #ffd166}}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;font-weight:700;margin-bottom:8px;opacity:.85}
.clues.code{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));font-size:17px}
.clues.code li{display:flex;align-items:center;gap:4px}
.clues.icons{font-size:14px;font-weight:700;gap:6px}
.clues.icons li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.clues.icons small{font-weight:600;opacity:.6;font-size:11.5px}
.clues.icons .tok.sm{width:28px;height:28px;font-size:13px;border-width:2px}
.clues.rv img{height:30px;width:30px;object-fit:contain;border-radius:50%;background:#fff;border:2px solid #2a1f4a;box-sizing:border-box}
.clues.rv img.ic{border:0;background:none}
.poke{position:relative}
.shp-panel{bottom:auto;max-height:calc(100% - 64px - env(safe-area-inset-top))}
@media (min-width:1100px) and (min-height:700px){.shp-panel{zoom:1.4;width:min(470px,calc(42vw / 1.4))}.shp-top{zoom:1.3}}
@media (orientation:portrait){.shp-panel{bottom:12px;max-height:none}}
@media (max-height:480px) and (orientation:landscape){.pile{height:92px}.pile img{height:26px}.wheel .wi{width:20px;height:20px}.clues.icons{grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12.5px}.clues.icons .tok.sm{width:24px;height:24px}.clues.icons small{display:none}.legend{margin-bottom:4px}.goal{font-size:17px;margin-bottom:6px}.clues.rv{grid-template-columns:1fr 1fr}.clues.rv img{width:26px;height:26px}}
.poke::after{content:'👆';position:absolute;left:50%;top:55%;font-size:32px;pointer-events:none;animation:tap .9s infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:3}
.goal .gi{height:30px;width:30px;object-fit:contain}
.pile{position:relative;height:118px;background:rgba(42,31,74,.07);border:2px dashed rgba(42,31,74,.3);border-radius:16px;margin-bottom:4px}
.pile img{position:absolute;width:15%;max-width:46px;height:34px;object-fit:contain}
.wheel .wi{width:26px;height:26px;object-fit:contain;display:block;margin:0 auto 2px}
.lockbox{position:relative;width:86px;flex:none}
.lockbox img{width:100%;display:block;transition:clip-path .4s}
.lockdig{position:absolute;left:19%;width:64%;top:60%;height:19%;display:flex;gap:3%;}
.lockdig span{flex:1;background:#f6e7c8;border-radius:4px;display:grid;place-items:center;font:800 15px monospace;color:#2a1f4a}
.lockbox.open{animation:unlock .6s}
@keyframes unlock{30%{transform:rotate(-8deg)}60%{transform:rotate(6deg) translateY(-4px)}100%{transform:none}}
@media (max-height:480px) and (orientation:landscape){.lockbox{width:64px}.lockdig span{font-size:11px}}

#shpBody>.shp-colL,#shpBody>.shp-colR{min-width:0}
@media (max-height:500px) and (orientation:landscape){
  .shp-panel{width:min(640px,calc(100vw - 290px));bottom:10px}
  .shp-colR .tip{display:none}
  .river{min-height:0}.bank{gap:2px;padding:4px}.rit i{width:32px;height:32px;border-width:2px}.rit small{font-size:10px}
  .tok{width:38px;height:38px}
  .shp-check{padding:7px 14px;font-size:14px;box-shadow:0 3px 0 #2a1f4a}.shp-head{margin-bottom:2px}.shp-msg{margin-top:4px;min-height:0}
  .water{min-height:96px}.raftbox .rf{max-height:60px;object-fit:contain}
  .seat{width:50px;min-height:66px}.seat .sb{width:50px}.seat em{width:34px;height:34px}.seats,.tokens{margin:3px 0;flex-wrap:nowrap;gap:4px}.tk small{font-size:9.5px}
  #shpBody.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:start}
  #shpBody.split .shp-colR .shp-row{margin-top:6px}
  .pile{height:84px}
}

.bpill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:3px solid #2a1f4a;box-shadow:0 3px 0 #2a1f4a;border-radius:16px;padding:2px 10px 2px 4px;cursor:pointer;color:#2a1f4a;font:800 15px Onest,sans-serif}
.bpill canvas,#house canvas{position:static}
.bpill canvas{width:48px;height:36px;border:2px solid #2a1f4a;display:block;background:linear-gradient(#bfe3ff,#e9f6ff);border-radius:8px}
.bpill span{white-space:nowrap;display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.bbar{display:block;width:64px;height:6px;border-radius:3px;background:#e7ddf7;overflow:hidden;font-style:normal}
.bbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e0703f,#ffd166)}
#house{position:fixed;inset:0;z-index:30;background:rgba(20,12,40,.7);display:grid;place-items:center;padding:16px}
#house[hidden]{display:none}
#house .hbox{flex-direction:column!important;background:var(--paper);border:4px solid #2a1f4a;box-shadow:0 6px 0 #2a1f4a;border-radius:22px;padding:14px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#2a1f4a;max-height:calc(100vh - 32px)}
#house h3{margin:0;font:800 22px "Montserrat Alternates",sans-serif}
#house canvas{height:min(315px,48vh,45vw);width:auto;aspect-ratio:4/3;background:#bfe3ff;border-radius:14px;border:2px solid #2a1f4a}
#houseTxt{font-weight:700;font-size:16px}
.hsm{font-size:12.5px;font-weight:600;opacity:.7}
.bgain{margin-top:4px;font-weight:800;font-size:16px;color:#c2541f}
#ver{position:fixed;left:calc(8px + env(safe-area-inset-left,0px));bottom:calc(4px + env(safe-area-inset-bottom,0px));font:600 10px Onest,sans-serif;color:rgba(255,255,255,.6);pointer-events:none;z-index:5}

.backsite{position:absolute;top:calc(14px + env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));z-index:9;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#2a1f4a;text-decoration:none;font:800 clamp(15px,3vmin,19px) Onest,sans-serif;padding:9px 16px;border-radius:999px;border:3px solid #2a1f4a;box-shadow:0 4px 0 #2a1f4a;white-space:nowrap}
.backsite:hover{background:#ffd166}
.backsite:active{transform:translateY(3px);box-shadow:0 1px 0 #2a1f4a}
@media (max-width:600px){.backsite{font-size:14px;padding:7px 12px}}
.mres-line{font-size:20px;font-weight:700}
.pause-h{margin:0 0 6px}
.mres-face{width:110px;height:110px;border-radius:50%}

[data-aud]{position:relative}
[data-aud].off{filter:grayscale(1);opacity:.7}
[data-aud].off::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:3px;margin-top:-1.5px;background:#ff3d6e;border-radius:2px;transform:rotate(-45deg);box-shadow:0 0 0 1px #fff}
.audbar{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:8px;z-index:9}
.audbar .round.sm{width:44px;height:44px;font-size:20px;padding:0;line-height:1}
#minis>.audbar{position:absolute}