:root{--blue:#1b72e1;--blue2:#092456;--sky:#6acbff;--gold:#ffcc4d;--cream:#fff9e8;--outline:#081b45}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;height:100dvh;margin:0;overflow:hidden;background:#080d25;color:var(--cream);font-family:ui-rounded,'Trebuchet MS',Verdana,sans-serif}button{border:0;cursor:pointer;font:900 clamp(11px,1.7vw,17px) ui-rounded,'Trebuchet MS',sans-serif;touch-action:none}#game-shell{position:absolute;inset:0;margin:auto;aspect-ratio:16/9;max-width:100vw;max-height:100dvh;width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);background:#142858;overflow:hidden;box-shadow:0 0 0 2px #162b5d,0 24px 95px #0007}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}#game-shell::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0,rgba(0,0,0,.018) 1px,transparent 1px,transparent 3px);z-index:1}.hidden{display:none!important}
#controls{position:absolute;inset:0;pointer-events:none;z-index:4}#dpad{position:absolute;left:3%;bottom:4%;width:min(23%,154px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1%;pointer-events:auto}#dpad .control{border:2px solid #d6eaffaa;background:linear-gradient(145deg,#213d71b8,#071736cc);box-shadow:inset 0 1px 8px #ffffff30,0 3px 1px #050f22ad;color:#edf6ff;border-radius:22%;font-size:clamp(12px,3.2vw,28px);padding:0;user-select:none}#dpad .up{grid-area:1/2}#dpad .left{grid-area:2/1}#dpad .right{grid-area:2/3}#dpad .down{grid-area:3/2}#dpad .pressed,#actions .pressed{background:linear-gradient(#31b6ffeb,#2262c9eb)!important;transform:scale(.94);border-color:#fff!important;box-shadow:0 0 13px #7bd6ffcc!important}#actions{position:absolute;right:3%;bottom:8%;width:23%;display:flex;gap:7%;align-items:flex-end;pointer-events:auto}#actions button{height:auto;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#21427bbf,#071736dc);border:3px solid #d6eaffb0;color:white;box-shadow:inset 0 3px 9px #ffffff35,0 3px 0 #061331a8;position:relative;padding:0;flex:1;min-width:0;user-select:none}#actions .run{transform:translateY(8%)}#actions .run.pressed{transform:translateY(8%) scale(.94)}#actions .jump{flex:1.12}#actions span{font-size:clamp(17px,4.5vw,40px);line-height:1}#actions small{font-size:clamp(9px,1.9vw,17px);position:absolute;bottom:2px;right:12%;color:#b9d8ff}
.top-button{position:absolute;right:1.2%;top:2%;z-index:5;width:6.2%;aspect-ratio:1;border-radius:10px;background:#0c255ecf;color:white;border:2px solid #bde8ff;box-shadow:0 3px 0 #06152a;pointer-events:auto;font-size:clamp(12px,2.1vw,23px)}
.panel{position:absolute;inset:0;z-index:10;background:linear-gradient(145deg,#051934f5,#0c2555f5);overflow:hidden}.cover{position:absolute;inset:-4% 43% -6% -1%;background:linear-gradient(90deg,transparent 61%,#0b2555 100%),url('assets/zippy-cover.webp') center 45%/cover no-repeat;filter:saturate(1.18)}.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,#071d4e19 40%,#071d4e 100%),linear-gradient(0deg,#061a3fce,transparent 24%)}.home-content{position:absolute;inset:0 2% 0 45%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-shadow:0 2px 1px #09132e}h1,h2,p{margin:0}.eyebrow{letter-spacing:.15em;color:#96dcff;font-size:clamp(8px,1.05vw,13px);font-weight:900}h1{font-size:clamp(45px,8.5vw,110px);font-weight:1000;line-height:.96;color:white;text-shadow:4px 4px 0 #034ba5,-2px -2px 0 #0781ed,0 8px 0 #f3a832;letter-spacing:.02em}.spark{font-size:.3em;position:relative;top:-1.3em;color:#ffd250;text-shadow:none}.home-content h2{font-size:clamp(14px,2.15vw,28px);line-height:1.05;margin:4% 0 2%;color:#ffd665;text-shadow:2px 2px #071b43}.tagline{font-size:clamp(9px,1.35vw,16px);color:#e4f6ff}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5%;width:98%}.buttons button:first-child{grid-column:span 2}.panel button:not(.close):not(.tiny){border:2px solid #8bdcff66;border-bottom-color:#061b56;min-height:clamp(30px,5.1vh,52px);padding:5px 10px;border-radius:12px;color:white;background:linear-gradient(#235ba5,#0b2e67);box-shadow:inset 0 2px 4px #ffffff20,0 3px 0 #06152b}.panel button.primary{background:linear-gradient(#ffcc58,#ed852d);border:2px solid #ffe6a2;border-bottom-color:#b15424;color:#132452;text-shadow:none;box-shadow:inset 0 2px 2px #fff9,0 3px 0 #9b4d26;font-size:clamp(12px,1.9vw,21px)}.panel button:active{filter:brightness(1.3);transform:translateY(2px)}.home-bottom{width:98%;display:flex;gap:7px;align-items:center;justify-content:flex-end;margin-top:4%;font-size:clamp(8px,1.1vw,13px)}.home-bottom>span{margin-right:auto;color:#b9deff}.panel .tiny{border:1px solid #b5d9ff70;border-radius:7px;background:#1c3a67b8;color:white;padding:6px;font-size:clamp(8px,1.1vw,12px)}
#levelSelect{background:radial-gradient(circle at 50% 30%,#255d9c,#0b1e4a 78%);padding:2% 3%;display:flex;flex-direction:column}.map-header{display:flex;justify-content:space-between;align-items:center}.map-header h2{font-size:clamp(23px,4vw,50px);color:white;text-shadow:3px 4px #063d78}.panel .close{background:#162b53;color:white;font-size:24px;padding:5px 14px;border-radius:8px}.panel #worldTabs{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:1% 0}.panel #worldTabs button{font-size:clamp(9px,1.4vw,16px);height:clamp(29px,6vh,55px);padding:4px 2px;min-height:0;border-radius:9px;opacity:.67}.panel #worldTabs button.active{background:linear-gradient(#ffce5b,#ff9128);color:#16204b;border-color:white;opacity:1}.panel #worldTabs button.locked{filter:grayscale(1);opacity:.40}#worldInfo{display:flex;justify-content:space-between;align-items:center;color:#e7f8ff;background:#0c214c70;padding:1.25% 2%;border-radius:12px;font-size:clamp(10px,1.5vw,18px)}#worldInfo strong{font-size:clamp(13px,2.1vw,24px);color:#ffcf68}.panel #levelGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2%;flex:1;margin:1.6% 0}.panel #levelGrid button{height:100%;min-height:0!important;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;font-size:clamp(17px,3vw,34px);position:relative}.panel #levelGrid button small{font-size:clamp(7px,1.05vw,12px);color:#c7ddff}.panel #levelGrid button.done{background:linear-gradient(#247f63,#0c5141);border-color:#8bffb1}.panel #levelGrid button.locked{filter:grayscale(1);opacity:.48}.map-bottom{display:flex;align-items:center;justify-content:space-between;gap:3%;font-size:clamp(8px,1.1vw,13px)}.panel #modeToggle{min-height:0;font-size:clamp(8px,1.2vw,13px);padding:4px 10px}
.panel.dialog{inset:9% 26%;z-index:12;padding:2.2% 3%;border:3px solid #7cd8ff;border-radius:24px;box-shadow:0 0 0 120vw #000a,0 10px 0 #081631;display:flex;flex-direction:column;gap:3%;overflow:auto;background:linear-gradient(140deg,#234d8c,#0b234f);align-items:stretch;text-align:center}.dialog h2{font-size:clamp(22px,4.5vw,49px);line-height:1;color:#ffe16c;text-shadow:3px 4px #041538}.dialog p{font-size:clamp(9px,1.3vw,15px);line-height:1.35}.dialog button{flex-shrink:0}.dialog .stars{font-size:clamp(27px,5vw,55px);letter-spacing:12px;color:#ffcd56;text-shadow:2px 3px #543e3a}.dialog #resultStats{display:flex;justify-content:space-around;background:#05193599;border-radius:9px;padding:3%;font-size:clamp(10px,1.5vw,19px)}.dialog #resultHint{color:#bfe8ff;font-size:clamp(8px,1.1vw,14px)}#helpPanel{inset:5% 21%;gap:2%}#helpPanel p{text-align:left}.hint{color:#bde5ff;font-size:clamp(8px,1.05vw,12px)!important}
#toast{position:absolute;top:22%;left:50%;transform:translateX(-50%);z-index:6;background:linear-gradient(#123a7fe8,#071b44ee);border:2px solid #fad35f;color:#fff5ad;border-radius:10px;text-shadow:1px 2px #071b44;box-shadow:0 4px 12px #001b3bbb;padding:10px 20px;font-weight:1000;font-size:clamp(13px,2.2vw,25px);white-space:nowrap;pointer-events:none;animation:pop .23s ease-out}@keyframes pop{from{transform:translateX(-50%) scale(.75);opacity:.1}to{transform:translateX(-50%) scale(1);opacity:1}}
#orientation{display:none;position:fixed;inset:0;z-index:1000;background:radial-gradient(#174a91,#0b193a);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}.rotate{font-size:84px;animation:rotatePhone 2s infinite ease-in-out}#orientation h2{font-size:24px}#orientation p{margin-top:10px;color:#add8ff}@keyframes rotatePhone{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}@media(orientation:portrait) and (max-width:1000px){#orientation{display:flex}#game-shell{visibility:hidden}}@media(min-width:900px){#dpad{max-width:145px}#actions{max-width:190px}.panel.dialog{inset:8% 30%}}@media(max-height:375px){.panel.dialog{inset:2% 24%;padding:1% 2%;gap:1%}.panel.dialog h2{font-size:24px}.panel.dialog button{min-height:27px!important}.home-content h2{margin:2% 0 1%}.buttons{margin-top:2%;gap:4px}.buttons button{min-height:27px!important}.home-bottom{margin-top:2%}#worldInfo{padding:0 2%}.map-header h2{font-size:24px}.panel #worldTabs button{min-height:26px;height:26px}}
/* True edge-to-edge landscape support: modern iPhones are much wider than 16:9.
   The JavaScript camera increases its viewport instead of stretching sprites. */
#game-shell{aspect-ratio:auto;width:100vw;height:100dvh;max-width:none;max-height:none}
#dpad{left:max(3%,calc(env(safe-area-inset-left) + 7px))}
#actions{right:max(3%,calc(env(safe-area-inset-right) + 7px))}
#playHud .top-button{right:max(1.2%,calc(env(safe-area-inset-right) + 3px))}

/* Version 2: reduced iOS gestures; customisable touch targets. */
#game-shell,#controls,#dpad,#actions,[data-key]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
#game-shell.large-controls #dpad{width:min(29%,188px)}
#game-shell.large-controls #actions{width:29%;max-width:220px}
#controls .control,#controls .action{will-change:transform}
@media(max-height:375px){#game-shell.large-controls #dpad{width:min(28%,142px)}#game-shell.large-controls #actions{width:27%;max-width:175px}}

/* V3: Three-thumb-friendly action cluster: run, spark, jump. No overlap on iPhone. */
#actions{width:min(36%,285px);max-width:285px;right:max(2.5%,calc(env(safe-area-inset-right) + 7px));gap:4%;bottom:5.5%;align-items:center}
#actions button{flex:1 1 0;min-width:0;max-width:90px;box-shadow:0 2px 0 #061331a8,inset 0 2px 8px #ffffff30}
#actions .attack{flex:1.05;background:linear-gradient(145deg,#925f31d8,#563975e0);border-color:#ffe4a9df;transform:translateY(-12%)}
#actions .attack span{color:#fff09a;text-shadow:0 0 6px #f5cd43}
#actions .attack.pressed{transform:translateY(-12%) scale(.94)}
#actions .jump{flex:1.12}
#actions .run{transform:translateY(9%)}
#actions small{font-size:clamp(8px,1.25vw,12px);bottom:1px;right:15%}
#actions span{font-size:clamp(18px,3.5vw,32px)}
#game-shell.large-controls #actions{width:min(40%,320px);max-width:320px}
@media(max-height:375px){#actions{width:min(35%,205px);max-width:205px;bottom:3%}#game-shell.large-controls #actions{width:min(40%,240px);max-width:240px}}

/* No surprise attack: the third button lights up when a star is collected. */
#actions .attack{opacity:.65;filter:saturate(.68)}
#actions .attack.ready{opacity:1;filter:saturate(1.15);border-color:#fff6b8;box-shadow:0 0 16px #ffdb5a80,inset 0 2px 8px #ffffff50}

/* V4: compact and highly readable end-of-lives screen; works in iPhone landscape. */
#gameOverPanel .game-over-heart{font-size:clamp(25px,5vw,52px);line-height:1.1;filter:drop-shadow(0 3px 5px #061b4680)}
#gameOverPanel #gameOverStats{background:#102c5899;border:1px solid #a4d6e955;border-radius:9px;padding:6px;margin:0}
@media(max-height:380px){#gameOverPanel{gap:1%!important}#gameOverPanel .game-over-heart{font-size:27px}#gameOverPanel p{margin:3px 0}}

/* V5: two big directional buttons, no misleading up/down buttons. */
#dpad{aspect-ratio:auto;height:auto;width:min(23%,162px);display:flex;align-items:center;justify-content:center;gap:9%;bottom:10%}
#dpad .control{flex:1;aspect-ratio:1;min-width:0;border-radius:25%;font-size:clamp(16px,4vw,34px)}
#game-shell.large-controls #dpad{width:min(28%,205px)}
@media(max-height:380px){#dpad{bottom:12%;width:min(19%,137px)}#game-shell.large-controls #dpad{width:min(25%,180px)}}
.coin-wallet{color:#ffe48b!important;font-weight:1000;background:#9b642d44;padding:4px 8px;border:1px solid #ebba6275;border-radius:30px;white-space:nowrap}
#home .buttons{grid-template-columns:1fr 1fr;gap:6px}
#home .buttons button:first-child{grid-column:span 2}
#home #friendsBtn{grid-column:span 2;background:linear-gradient(135deg,#236456,#166b9d);border-color:#b2ffe1}
#home .home-bottom{gap:4px;margin-top:2.6%}
#home .home-content .tagline{font-size:clamp(8px,1.18vw,14px)}
#friendsPanel{padding:1.4% 2.4%;display:flex;flex-direction:column;gap:1%;background:radial-gradient(ellipse at 45% -15%,#357cba 0%,#18386d 55%,#0b1d40 95%)}
.friends-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:15%;flex:0 0 auto}
.friends-header h2{font-size:clamp(20px,3.4vw,42px);color:#fff4c5;line-height:1.07;text-shadow:2px 3px #071830}
.shop-balance{margin-left:auto;border:1px solid #ffe0929a;background:linear-gradient(#8d5b2a78,#42254f6b);border-radius:11px;display:flex;flex-direction:column;align-items:center;padding:5px 12px;min-width:120px}
.shop-balance small{color:#ffefce;font-weight:800;letter-spacing:.06em;font-size:clamp(7px,1.1vw,11px)}
.shop-balance strong{color:#ffe26d;font-size:clamp(16px,2.45vw,30px)}
.friends-intro{font-size:clamp(8px,1.2vw,14px);color:#caecff;text-align:center;line-height:1.22}
.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2%;flex:1;min-height:0}
.character-card{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;padding:6px 5px 7px;border:2px solid var(--char-color);border-radius:15px;background:linear-gradient(180deg,color-mix(in srgb,var(--char-color) 30%,#0f3264),#0b234e 48%,#0c1a36 100%);box-shadow:inset 0 3px 0 #ffffff26,0 4px 10px #06102c77}
.character-card.selected{box-shadow:0 0 0 2px #fff1c9,inset 0 1px 9px #ffffff44,0 0 18px var(--char-color)}
.character-card.locked>img{filter:saturate(.6) brightness(.85)}
.character-card>img{height:35%;width:auto;max-height:86px;min-height:44px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 3px #05142a80);flex:0 1 auto}
.char-body{width:100%;display:flex;align-items:center;flex-direction:column;gap:2px;text-align:center;justify-content:space-between;flex:1;min-height:0}
.char-name{font-size:clamp(12px,1.95vw,24px);font-weight:1000;color:var(--char-accent);line-height:1.0}
.char-title{font-size:clamp(7px,.99vw,12px);color:#d3eaff}
.char-perk{font-size:clamp(8px,1.1vw,13px);color:#f6fbff;line-height:1.08;min-height:25px;display:flex;align-items:center}
.char-cost{font-size:clamp(9px,1.35vw,15px);color:#ffdb80;font-weight:1000}
.char-req{font-size:clamp(7px,1.05vw,12px);color:#a5d8e7;line-height:1.15;min-height:17px}
#friendsPanel button.char-action{padding:4px 2px!important;min-height:27px!important;width:98%;flex:0 0 auto;font-size:clamp(8px,1.18vw,14px);border-radius:8px;background:linear-gradient(#fccd68,#e88d3d);color:#19274d;border:1px solid #fff2b2;box-shadow:0 3px #55352d}
#friendsPanel button.char-action.chosen{background:linear-gradient(#5fb78a,#1b775a);color:white}
#friendsPanel button.char-action:disabled{cursor:default;opacity:.68;background:#223a60;color:#d3dff1}
#friendsPanel button.char-action:not(:disabled):active{transform:translateY(2px)}
.shop-info{text-align:center;color:#edeeff;font-size:clamp(8px,1.18vw,14px);line-height:1.15;padding:2px 0;min-height:16px}
#friendsPanel.shop-celebrate .character-card.selected{animation:shopGlow .85s ease-out}
@keyframes shopGlow{0%{transform:scale(.93);filter:brightness(1.8)}60%{transform:scale(1.04);filter:brightness(1.3)}100%{transform:scale(1);filter:brightness(1)}}
.result-rewards{background:#062f3e9e;color:#ffe98e;border:1px solid #ffe18a70;border-radius:9px;padding:4px;display:flex;flex-direction:column;font-size:clamp(9px,1.25vw,15px);line-height:1.25}
.result-rewards small{color:#e1f8ee;font-size:clamp(7px,.96vw,11px)}
#resultPanel{inset:3% 23%;gap:1.6%;padding:1.4% 2%}
#resultPanel .stars{font-size:clamp(21px,4.2vw,44px);line-height:1.1}
#resultPanel button{min-height:clamp(26px,4.3vh,42px)!important}
#resultFriendsBtn{color:#ffeacb!important;background:linear-gradient(#247c77,#1d5268)!important}
#friendsPanel .close{font-size:clamp(19px,2.7vw,26px)}
@media(max-height:400px){
 #friendsPanel{gap:.4%;padding:.7% 2%}
 .friends-header{min-height:14%}
 .friends-header h2{font-size:clamp(18px,3vw,27px)}
 .shop-balance{padding:1px 9px}
 .shop-balance strong{font-size:17px}
 .character-card{padding:3px 3px 4px;border-radius:10px}
 .character-card>img{max-height:61px;min-height:36px;height:29%}
 .char-perk{min-height:18px}
 .char-req{min-height:12px}
 #friendsPanel button.char-action{min-height:24px!important}
 #resultPanel{inset:2% 22%;gap:.7%;padding:.8% 1.5%}
 #resultPanel button{min-height:25px!important;padding:2px 6px!important}
 #resultPanel .stars{font-size:22px}
 #resultPanel h2{font-size:23px}
}

/* V5.1: safe, tappable character shop. Stop double-tap smart zoom; keep vertical scroll. */
html{-webkit-text-size-adjust:100%;}
.panel button,.panel .character-card{touch-action:manipulation;-webkit-touch-callout:none;}
#friendsPanel{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;gap:4px;}
#friendsPanel .friends-header,#friendsPanel .friends-intro,#friendsPanel .shop-info{flex:0 0 auto}
#friendsPanel .shop-info{order:0;padding:6px 8px;min-height:31px;display:flex;align-items:center;justify-content:center;font-size:clamp(11px,1.65vw,16px);font-weight:800;border-radius:9px;background:#0c3b67;border:1px solid #a9e4ff70;line-height:1.25}
#friendsPanel .shop-info.warning{background:#523515;color:#fff2b9;border-color:#ffc968}
#friendsPanel .shop-info.success{background:#124d39;color:#d3ffde;border-color:#8feda9}
#friendsPanel .character-grid{order:1;min-height:255px;flex:1 0 255px;align-content:stretch}
#friendsPanel .character-card{overflow:visible;}
#friendsPanel .char-req{font-size:clamp(9px,1.22vw,13px);color:#ffe5b1;line-height:1.16;min-height:24px;display:flex;align-items:center;justify-content:center;}
#friendsPanel .char-perk{font-size:clamp(9px,1.21vw,13px);min-height:28px;}
#friendsPanel button.char-action{min-height:38px!important;padding:5px 3px!important;font-size:clamp(10px,1.35vw,15px);touch-action:manipulation;}
#friendsPanel button.char-action:focus-visible{outline:3px solid #fff0a1;outline-offset:2px;}
/* No sprite scale/filter animation on mobile WebKit: it could cause GPU zoom/stutter. */
#friendsPanel.shop-celebrate .character-card.selected{animation:shopBorder .7s ease-out;}
@keyframes shopBorder{0%{border-color:#ffffff;box-shadow:0 0 12px #fff6a1}100%{border-color:var(--char-color);box-shadow:inset 0 2px 4px #ffffff20}}
@media(max-height:420px){
 #friendsPanel{padding:5px 10px;gap:4px;}
 #friendsPanel .friends-header{min-height:47px;}
 #friendsPanel .friends-header h2{font-size:clamp(18px,2.9vw,28px)}
 #friendsPanel .friends-intro{font-size:clamp(9px,1.2vw,12px)}
 #friendsPanel .shop-info{min-height:29px;padding:4px 7px;font-size:clamp(10px,1.4vw,13px)}
 #friendsPanel .character-grid{min-height:252px;flex-basis:252px;}
 #friendsPanel .character-card>img{height:27%;max-height:67px;min-height:43px}
 #friendsPanel .char-req{min-height:25px}
 #friendsPanel button.char-action{min-height:37px!important}
}
@media(max-width:710px) and (orientation:landscape){
 #friendsPanel .character-grid{grid-template-columns:repeat(2,minmax(0,1fr));min-height:510px;flex-basis:510px;}
 #friendsPanel .character-card>img{height:32%}
}
@media(prefers-reduced-motion:reduce){#friendsPanel.shop-celebrate .character-card.selected{animation:none}}

/* V6: C is always usable; glow communicates charged super attacks. */
#actions .attack{opacity:1;filter:none;border-color:#9bdaff;box-shadow:0 0 9px #68d8ff60,inset 0 2px 5px #ffffff55}
#actions .attack.ready{opacity:1;filter:none;border-color:#d1ebff;box-shadow:0 0 12px #8adaff77,inset 0 2px 5px #ffffff55}
#actions .attack.super{border-color:#ffe18e;box-shadow:0 0 17px #ffc654c9,inset 0 2px 6px #ffffce99}

/* Version 7: five themed realms, up to 30 stages in a scrollable iPhone map */
.panel #worldTabs{grid-template-columns:repeat(5,minmax(0,1fr));flex:0 0 auto;gap:6px}
.panel #levelGrid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(54px,66px);align-content:start;gap:7px;padding:2px 4px 9px;margin:1% 0}
.panel #levelGrid button{height:100%;min-height:0!important;padding:4px 2px!important;font-size:clamp(12px,2vw,22px);gap:3px}
.panel #levelGrid button strong{line-height:1.05;font-weight:1000}
.panel #levelGrid button small{font-size:clamp(8px,1vw,11px);white-space:nowrap;max-width:98%;overflow:hidden;text-overflow:ellipsis}
.panel #levelGrid button.boss-stage{border-color:#ffca78!important;background:linear-gradient(#6f4365,#4d2e49);box-shadow:inset 0 0 8px #ffe4ac4d}
#levelGrid{touch-action:pan-y}
@media(max-width:740px) and (orientation:landscape){.panel #levelGrid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:54px;gap:5px}}
#worldInfo{min-height:34px;gap:8px}#worldInfo span{text-align:right;font-weight:800}


/* Version 8: illustrated world-map backgrounds */
#levelSelect{
  --map-bg:none;
  background:
    linear-gradient(180deg, rgba(6,20,45,.48), rgba(6,19,43,.82)),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), rgba(255,255,255,0) 32%),
    var(--map-bg) center center / cover no-repeat,
    radial-gradient(circle at 50% 30%,#255d9c,#0b1e4a 78%);
}
#levelSelect::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(9,18,39,.28), rgba(9,18,39,.08) 35%, rgba(9,18,39,.18) 65%, rgba(9,18,39,.34));
}
#levelSelect > *{position:relative;z-index:1}
#worldInfo{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 5px 16px rgba(4,10,26,.22)}
#worldInfo em{display:block;font-style:normal;font-weight:700;color:#d6ecff;font-size:clamp(8px,1.05vw,13px);opacity:.96}
.map-header h2,.map-header .eyebrow,#worldInfo strong,#worldInfo span{text-shadow:0 2px 6px rgba(5,12,31,.45)}


/* V8.1: compact volume control with enough touch space on landscape phones. */
#home .home-bottom{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:clamp(3px,.55vw,8px);min-width:0;width:100%;margin-top:2.6%;}
#home #saveSummary{flex:1 1 auto;min-width:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0}
#home .home-bottom .coin-wallet{flex:0 0 auto;padding:3px 6px;white-space:nowrap;}
#home .home-bottom .tiny{flex:0 0 auto;padding:5px 6px;white-space:nowrap;min-height:32px;}
#volumeControl{flex:0 0 clamp(90px,12vw,155px);min-width:0;display:flex;align-items:center;gap:4px;
 border:1px solid #b9d9ff75;border-radius:10px;padding:3px 5px;background:rgba(15,39,83,.82);min-height:32px;color:#ffe29c;font-weight:900;}
#volumeControl span{flex:0 0 auto;font-size:clamp(11px,1.6vw,18px)}
#volumeSlider{flex:1 1 auto;min-width:0;width:100%;height:28px;cursor:pointer;touch-action:pan-x;
 appearance:none;-webkit-appearance:none;background:transparent;margin:0;outline-offset:3px;}
#volumeSlider::-webkit-slider-runnable-track{height:5px;border-radius:6px;background:linear-gradient(90deg,#ffc963,#93cbff);}
#volumeSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid white;border-radius:50%;background:#ffd672;box-shadow:0 2px 5px #061b43;margin-top:-6px;}
#volumeSlider::-moz-range-track{height:5px;border-radius:6px;background:#a9cbff;}
#volumeSlider::-moz-range-thumb{width:18px;height:18px;border:2px solid white;border-radius:50%;background:#ffd672;}
#volumeSlider:focus-visible{outline:2px solid #fbe28e;border-radius:8px}
#volumeValue{flex:0 0 auto;min-width:25px;font-size:clamp(9px,1.2vw,13px);text-align:right;color:#fff0c3}
@media (max-width:740px) and (orientation:landscape){
 #home .home-bottom .tiny{font-size:9px;min-height:30px;padding:3px 4px}
 #volumeControl{flex-basis:90px;padding:2px 3px;gap:2px;min-height:30px}
 #volumeValue{min-width:22px;font-size:9px}
 #home .home-bottom .coin-wallet{font-size:9px;padding:3px 4px}
}


/* V8.2 Cheat mode: unobtrusive in-game super weapon switch */
#superCycleBtn{position:absolute;right:14.5%;bottom:36%;height:clamp(36px,8vh,48px);width:clamp(44px,6.8vw,57px);z-index:5;pointer-events:auto;border:2px solid #ffe8a9;background:linear-gradient(145deg,#4b387dbd,#152f68ec);color:#ffe8a3;border-radius:13px;font-size:clamp(16px,2.2vw,23px);font-weight:1000;box-shadow:0 3px 0 #051024a8,0 0 12px #ffe8ad66;touch-action:manipulation}
#superCycleBtn:active{filter:brightness(1.3);transform:scale(.95)}
#cheatBanner{position:absolute;top:12%;left:50%;transform:translateX(-50%);z-index:12;pointer-events:none;display:flex;flex-direction:column;gap:3px;align-items:center;min-width:35%;max-width:88%;text-align:center;padding:10px 18px;border-radius:14px;border:2px solid #ffe58d;color:#fff;background:linear-gradient(120deg,#25346cf2,#592f7dec);box-shadow:0 10px 30px #0613318a;white-space:normal;text-shadow:0 2px 4px #0a1233;font-size:clamp(11px,2vw,20px)}
#cheatBanner strong{color:#ffe58d;letter-spacing:.05em;font-size:clamp(14px,2.4vw,24px)}
#cheatBanner span{font-weight:900}
#pausePanel .cheat-status{margin:4px 0;max-width:100%;font-size:clamp(9px,1.15vw,14px);line-height:1.2;color:#ffe68f;text-align:center}
@media(max-height:380px){#cheatBanner{top:11%;padding:5px 12px}#superCycleBtn{bottom:34%}}


/* V9 – readable adventure narrative, optional discovery, long-term progression */
#home .buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:2.4%}
#home .buttons #friendsBtn,#home .buttons #albumBtn{grid-column:auto}
#home .buttons button{min-width:0;font-size:clamp(9px,1.38vw,16px);padding:5px 4px}
.quest-ribbon{width:99%;min-height:20px;margin-top:7px;border:1px solid #ffdd7596;border-radius:11px;background:#42336994;color:#ffe7a8;padding:5px 9px;font-size:clamp(9px,1.05vw,12px);font-weight:800}
#levelSelect.world-restored::after{content:'✨';position:absolute;right:5%;top:13%;font-size:clamp(25px,7vw,74px);opacity:.56;pointer-events:none;filter:drop-shadow(0 0 12px #fff6a0)}
#levelSelect.world-restored{background-image:linear-gradient(180deg,rgba(80,55,20,.29),rgba(2,36,33,.65)),var(--map-bg);background-position:center;background-size:cover}
#worldInfo .world-reclaimed{font-size:clamp(9px,1.15vw,14px);font-weight:900;color:#ffe895}
#worldTabs button.restored-tab{box-shadow:inset 0 0 0 2px #ffdf76!important}
#mapAlbumBtn,#legendBtn{font-size:clamp(8px,1vw,12px)!important;padding:3px 6px!important;min-height:29px!important}
#legendBtn.locked{opacity:.56}
.map-bottom{gap:4px}.map-bottom>span:last-of-type{display:none}
#storyPanel{display:flex;align-items:center;justify-content:flex-end;background:#09294e}
#storyPanel .story-art{position:absolute;inset:0;background:center/cover no-repeat;filter:saturate(1.16)}
#storyPanel .story-shade{position:absolute;inset:0;background:linear-gradient(90deg,#06162c04,#07192b52 30%,#071630f4 70%)}
#storyPanel .story-copy{position:relative;width:57%;padding:clamp(10px,2.5vw,38px);display:flex;flex-direction:column;gap:clamp(7px,1.6vh,15px);max-height:94%;overflow-y:auto;overscroll-behavior:contain;text-shadow:1px 2px 2px #040d25}
#storyPanel h2{font-size:clamp(23px,4.3vw,53px);color:#ffe5a2;line-height:1.08;text-shadow:2px 3px #0b2149}
#storyPanel p{font-size:clamp(12px,1.65vw,21px);line-height:1.35;color:#f0fbff;white-space:pre-line}
#storyProgress{color:#ffdc75;font-size:clamp(10px,1.2vw,14px);font-weight:800}
#storyPanel .story-buttons{display:flex;gap:10px}
#storyPanel .story-buttons button{min-height:clamp(31px,6.7vh,54px);flex:1}
#storyPanel .story-buttons button.primary{flex:1.5}
#albumPanel,#legendPanel{padding:1.6% 2.6%;background:linear-gradient(135deg,#0e345e,#123452 45%,#101c3e);display:flex;flex-direction:column;gap:1.4%}
.album-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.album-header h2{font-size:clamp(20px,3.3vw,41px);color:#ffe9a0;text-shadow:2px 2px #102958}
.album-tabs{display:flex;gap:8px;flex:none}
.album-tabs button{flex:1;min-height:32px!important;font-size:clamp(10px,1.3vw,16px)!important}
.album-tabs button.selected{background:linear-gradient(#f7cd66,#c98331)!important;color:#152746!important}
.album-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:4px 2px 18px}
.album-card{position:relative;border:1px solid #b9dfff7d;border-radius:12px;background:#071a34d9;padding:9px;display:flex;flex-direction:column;gap:5px;min-height:120px;font-size:clamp(10px,1.18vw,14px);line-height:1.28}
.album-card img{width:100%;height:clamp(65px,14vh,126px);object-fit:cover;border-radius:8px}
.album-card h3{font-size:clamp(14px,1.8vw,21px);margin:0;color:#ffe5aa}
.album-card p{color:#d6eaff;line-height:1.28;font-size:clamp(9px,1.1vw,14px)}
.album-card strong{color:#f6f9ff}.album-card .album-status{color:#ffda7b;font-weight:900}
.album-card .progress-track{height:7px;border-radius:5px;background:#1d4369;overflow:hidden}
.album-card .progress-track>span{display:block;height:100%;background:linear-gradient(90deg,#7fdbac,#ffdf87)}
#albumPanel .album-card button{min-height:29px!important;padding:4px 7px!important;font-size:clamp(9px,1vw,13px)!important}
#legendGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;flex:1;overflow-y:auto;padding-bottom:10px}
#legendGrid button{min-height:65px!important;font-size:clamp(10px,1.2vw,16px)!important;display:flex;flex-direction:column;justify-content:center;gap:5px}
#legendGrid button small{font-size:clamp(8px,.94vw,12px);color:#ffe7b7}
.legend-intro{font-size:clamp(9px,1.3vw,15px);color:#d9edff;line-height:1.3}
.hint-text{font-size:clamp(10px,1.2vw,14px);color:#ffefa2;background:#102b53;border:1px solid #e8d27b;border-radius:8px;padding:5px}
#resultAlbumBtn{color:#fce9b6!important;min-height:28px!important}
@media(max-height:410px){
 #storyPanel .story-copy{padding:9px 14px;gap:6px}
 #storyPanel h2{font-size:clamp(21px,3vw,35px)}
 #storyPanel p{font-size:clamp(11px,1.3vw,15px)}
 #albumPanel,#legendPanel{padding:6px 12px;gap:4px}
 .album-content{gap:6px}
 .album-card{min-height:116px;padding:5px}
 .album-card img{height:59px}
 #legendGrid{gap:5px}
 #legendGrid button{min-height:61px!important}
 #resultPanel{gap:3px!important}
 #resultPanel #resultAlbumBtn{min-height:26px!important}
 #home .quest-ribbon{margin-top:3px;padding:2px 5px;min-height:16px;font-size:9px}
 #home .home-bottom{margin-top:1%;gap:3px}
 #home .buttons{margin-top:1.4%}
}
@media(max-width:740px) and (orientation:landscape){
 #legendGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #albumPanel .album-content{grid-template-columns:repeat(2,minmax(0,1fr))}
 #storyPanel .story-copy{width:66%}
}

/* V9 touch-friendly album tabs and compact results on landscape phones */
#albumPanel .album-tabs button{padding:3px 5px!important;white-space:nowrap}
#resultPanel{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-height:400px){#albumPanel .album-tabs button{font-size:clamp(8px,1.15vw,13px)!important}}


/* V9.2 · Lumio the Elder Star Guardian · illustrated interactive speech scenes */
#storyPanel{isolation:isolate;align-items:center;justify-content:flex-end;overflow:hidden}
#storyPanel .story-art{z-index:0;filter:saturate(1.06)}
#storyPanel .story-shade{z-index:1;background:linear-gradient(90deg,rgba(4,14,33,.12) 0%,rgba(5,17,37,.23) 27%,rgba(5,15,33,.78) 53%,rgba(4,13,32,.87) 100%)}
#storyPanel .lumio-portrait{position:absolute;z-index:2;left:2%;bottom:-5%;width:43%;height:110%;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;filter:drop-shadow(0 10px 14px #020d2688);animation:lumioHover 4.6s ease-in-out infinite}
#storyPanel .lumio-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;-webkit-mask-image:radial-gradient(ellipse 76% 72% at 52% 51%,#000 65%,transparent 100%);mask-image:radial-gradient(ellipse 76% 72% at 52% 51%,#000 65%,transparent 100%)}
#storyPanel .story-copy{z-index:3;width:61%;max-height:98%;padding:clamp(9px,2.2vw,31px) clamp(10px,2.1vw,31px);gap:clamp(5px,1.15vh,11px);overflow-y:auto;overflow-x:visible;text-shadow:none;justify-content:center}
#storyPanel .story-copy>.eyebrow{font-size:clamp(9px,1.04vw,15px);text-shadow:0 2px 5px #000b;color:#bde8ff}
#storyPanel h2{font-size:clamp(18px,3.15vw,43px);letter-spacing:-.025em;line-height:1.03;text-shadow:0 3px 8px #030b25b0;color:#fff0b8}
#storyPanel .lumio-dialogue{--bubble-fill-125:linear-gradient(155deg,#fffef5,#fdf0d6);--bubble-stroke-125:#f5cf77;position:relative;flex:0 1 auto;display:flex;flex-direction:column;max-height:100%;padding:clamp(9px,1.15vw,16px) clamp(11px,1.45vw,22px);background:var(--bubble-fill-125);border:clamp(2px,.25vw,4px) solid var(--bubble-stroke-125);border-radius:clamp(18px,2vw,28px);color:#152d4e;box-shadow:0 5px 0 #c89641,0 10px 30px #020e2dc9, inset 0 1px 0 rgba(255,255,255,.55);min-height:0;outline:1px solid rgba(255,255,255,.28);outline-offset:-5px}
#storyPanel .lumio-dialogue:before,#storyPanel .lumio-dialogue:after{content:"";position:absolute;pointer-events:none}
#storyPanel .lumio-dialogue:before{top:42%;left:-26px;width:28px;height:26px;background:var(--bubble-stroke-125);clip-path:polygon(0 50%,100% 0,100% 100%);filter:drop-shadow(-2px 2px 2px rgba(11,21,48,.12))}
#storyPanel .lumio-dialogue:after{top:calc(42% + 2px);left:-20px;width:22px;height:20px;background:var(--bubble-fill-125);clip-path:polygon(0 50%,100% 0,100% 100%)}
#storyPanel .lumio-speaker{display:flex;align-items:center;gap:clamp(6px,.8vw,12px);border-bottom:1px solid #dabd80;padding-bottom:clamp(3px,.6vh,6px);min-height:0;flex-shrink:0}
#storyPanel #lumioMood{width:clamp(34px,4.3vw,66px);height:clamp(34px,4.3vw,66px);border-radius:50%;object-fit:cover;border:2px solid #efba4a;box-shadow:0 2px 8px #af792c55}
#storyPanel .lumio-speaker>div{display:flex;flex-direction:column;line-height:1.15}
#storyPanel .lumio-speaker strong{font-size:clamp(14px,1.8vw,25px);color:#234e9f;letter-spacing:.045em}
#storyPanel .lumio-speaker small{font-size:clamp(7px,.85vw,12px);color:#89704a;font-weight:900}
#storyPanel .lumio-mood{margin-left:auto;color:#99783d;font-weight:900;white-space:nowrap;font-size:clamp(8px,1vw,13px)}
#storyPanel #storyText{color:#20334e;line-height:1.37;font-size:clamp(12px,1.46vw,19px);font-weight:700;white-space:normal;text-shadow:none;padding-top:clamp(5px,.75vh,8px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
#storyPanel .story-footer{display:flex;flex-direction:column;gap:clamp(4px,.8vh,9px);flex:0 0 auto}
#storyPanel #storyProgress{font-size:clamp(9px,1.1vw,14px);color:#ffe28b;text-shadow:0 2px 6px #050e23}
#storyPanel .story-buttons{gap:clamp(6px,1vw,12px)}
#storyPanel .story-buttons button{min-height:clamp(34px,6.5vh,53px);touch-action:manipulation}
#storyPanel .story-buttons button.primary{flex:1.55}
@keyframes lumioHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-height:430px){
 #storyPanel .story-copy{width:64%;padding:5px 11px;gap:4px;max-height:100%}
 #storyPanel .lumio-portrait{width:41%;height:107%;bottom:-7%;left:0}
 #storyPanel h2{font-size:clamp(16px,2.6vw,28px)}
 #storyPanel .story-copy>.eyebrow{font-size:clamp(7px,.85vw,12px)}
 #storyPanel .lumio-dialogue{padding:5px 9px;border-radius:12px}
 #storyPanel .lumio-speaker{gap:5px;padding-bottom:2px}
 #storyPanel #lumioMood{width:32px;height:32px}
 #storyPanel .lumio-speaker strong{font-size:clamp(12px,1.55vw,17px)}
 #storyPanel .lumio-speaker small{font-size:8px}
 #storyPanel #storyText{font-size:clamp(11px,1.35vw,14px);line-height:1.28;padding-top:3px}
 #storyPanel .story-buttons button{min-height:31px!important;padding:3px 6px!important}
 #storyPanel #storyProgress{font-size:10px}
}
@media(max-width:740px) and (orientation:landscape){
 #storyPanel .story-copy{width:65%}
 #storyPanel .lumio-portrait{width:40%}
 #storyPanel .lumio-mood{display:none}
}
@media(prefers-reduced-motion:reduce){#storyPanel .lumio-portrait{animation:none}}


/* V9.3: Lumios Sternenturm, mobile-friendly collection hub and cosmetic shop */
#towerPanel{background:linear-gradient(145deg,#082753,#152c63 55%,#101738);padding:1.2% 2%;display:flex;flex-direction:column;gap:1%;}
.tower-header{display:flex;align-items:center;gap:8px;flex:none;min-height:12%;}
.tower-header h2{font-size:clamp(18px,3.3vw,38px);color:#fff0b9;text-shadow:0 3px 8px #020916;line-height:1}
.tower-header .coin-wallet{margin-left:auto}
.tower-body{display:flex;flex:1;min-height:0;gap:1.7%;}
.tower-art{position:relative;width:29%;min-width:155px;min-height:0;background:radial-gradient(circle at 50% 42%,#5479b6,#172d63 66%,#101d46);border:2px solid #f4d68673;border-radius:15px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.tower-art svg{height:84%;width:98%;flex-shrink:1;filter:drop-shadow(0 5px 14px #050d2d88)}
.tower-sky{position:absolute;top:7%;text-align:center;width:100%;color:#ffe7a0;letter-spacing:.5em;font-size:18px;opacity:.5}
.tower-orb{opacity:.22}.tower-glow{opacity:.12}.tower-crown{opacity:.5}
.tower-art[data-stage="1"] .tower-orb,.tower-art[data-stage="2"] .tower-orb{opacity:.55}
.tower-art[data-stage="3"] .tower-orb,.tower-art[data-stage="4"] .tower-orb,.tower-art[data-stage="5"] .tower-orb{opacity:1}
.tower-art[data-stage="2"] .tower-crown,.tower-art[data-stage="3"] .tower-crown,.tower-art[data-stage="4"] .tower-crown,.tower-art[data-stage="5"] .tower-crown{opacity:1;filter:drop-shadow(0 0 7px #fff4b8)}
.tower-art[data-stage="3"] .tower-glow,.tower-art[data-stage="4"] .tower-glow,.tower-art[data-stage="5"] .tower-glow{opacity:1;filter:drop-shadow(0 0 6px #fff4b8)}
.tower-stars{position:absolute;top:12%;font-size:clamp(12px,1.6vw,20px);text-align:center;color:#ffe68e;letter-spacing:4px;opacity:.87}
.tower-guide{position:absolute;bottom:2%;left:3%;right:3%;display:flex;align-items:center;gap:6px;background:#102456d9;border-radius:30px;color:#ffeabb;font-size:clamp(8px,.97vw,13px);padding:5px;font-weight:bold}
.tower-guide img{width:clamp(30px,4vw,48px);height:clamp(30px,4vw,48px);border-radius:50%;object-fit:cover;border:2px solid #ffe28f}
.tower-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px}
.tower-totals{color:#ffe7a9;font-size:clamp(9px,1.05vw,14px);font-weight:900;text-align:center;background:#203866c6;border-radius:9px;padding:4px}
.tower-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;flex:none}
#towerPanel .tower-tabs button{min-height:32px!important;padding:3px!important;font-size:clamp(9px,1.1vw,14px)!important;border-radius:9px}
#towerPanel .tower-tabs button.selected{background:linear-gradient(#fbd879,#d89738)!important;color:#172949!important}
.tower-message{color:#c8e9ff;min-height:19px;max-height:50px;overflow:auto;font-size:clamp(9px,1.08vw,13px);text-align:center;line-height:1.15}
.tower-message.success{color:#99ffd1}.tower-message.warning{color:#ffe3a0}
.tower-content{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;padding:3px 5px 13px;flex:1;min-height:0}
.tower-content article{min-width:0;border:1px solid #b0d8fc7a;border-radius:11px;background:#0b1e44da;padding:9px;display:flex;flex-direction:column;gap:6px;font-size:clamp(10px,1vw,13px);line-height:1.2}
.tower-content h3{color:#ffe6a5;font-size:clamp(13px,1.5vw,19px);margin:0}
.tower-content p{font-size:clamp(10px,1.05vw,13px);color:#d6e9ff;line-height:1.3}
.tower-content strong{color:#dcfff6}.tower-content small{color:#d1cfe3}
.tower-content .progress-track{width:100%;height:6px;background:#23406d;border-radius:5px;overflow:hidden}
.tower-content .progress-track>span{display:block;height:100%;background:linear-gradient(90deg,#f7849c,#ffe6a0)}
#towerPanel .tower-content button{min-height:30px!important;padding:4px!important;font-size:clamp(9px,1.1vw,13px)!important;margin-top:auto}
#towerPanel .tower-content button:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}
.tower-summary{grid-column:1/-1}.tower-counts{display:flex;justify-content:space-around;gap:8px;flex-wrap:wrap;font-size:clamp(10px,1.15vw,14px)}
.tower-shortcuts{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tower-extra{display:grid!important;grid-template-columns:46px minmax(0,1fr);align-items:center}
.extra-emblem{border:2px solid var(--extra-color);border-radius:10px;background:#1e386d;font-size:clamp(23px,3vw,33px);text-align:center;padding:5px}
.tower-extra button{grid-column:1/-1}
.tower-memory{min-height:130px}
.shop-intro{grid-column:1/-1;background:#0f2f58;border:1px solid #91bfd677;border-radius:10px;padding:8px}
.home-collection{color:#fff0ae;font-size:clamp(9px,1.08vw,14px);font-weight:900;line-height:1.14;margin-top:1%}
#home .buttons #towerBtn{grid-column:span 2;background:linear-gradient(#7657aa,#33357c);border-color:#f8e49b}
#levelSelect #mapTowerBtn{color:#fff4c8;background:linear-gradient(#64539d,#30317b)}
#resultTowerBtn{background:linear-gradient(#68509e,#3b2b76)!important}
#albumPanel .album-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x}
#albumPanel .album-tabs button{min-width:100px}
@media(max-height:420px){
 #towerPanel{padding:4px 8px;gap:3px}.tower-header{min-height:39px}.tower-header h2{font-size:clamp(17px,2.5vw,25px)}
 .tower-art{min-width:132px;width:25%}.tower-art svg{height:82%}.tower-guide{font-size:8px;padding:2px}.tower-guide img{width:30px;height:30px}
 .tower-main{gap:3px}.tower-totals{padding:2px}.tower-content{gap:5px;padding:1px 4px 8px}
 .tower-content article{padding:5px;gap:3px}.tower-content h3{font-size:clamp(11px,1.25vw,15px)}
 #towerPanel .tower-content button{min-height:26px!important}
 #home .buttons{gap:4px!important;margin-top:1%!important}
 #home .home-collection{font-size:9px;margin-top:1px}
 #home .buttons button{min-height:26px!important;padding:2px 5px!important;font-size:clamp(9px,1.35vw,14px)}
}
@media(max-width:700px) and (orientation:landscape){.tower-art{width:23%;min-width:120px}.tower-content{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.tower-art *{animation:none!important}}

/* V9.3 soundtrack settings. Accessible from the gear beside music volume and pause. */
#volumeControl .sound-cog{flex:0 0 auto;min-height:26px!important;width:27px;min-width:27px;padding:0!important;border:0!important;border-radius:6px!important;color:#ffe59b!important;background:#304e7d!important;box-shadow:none!important;font-size:15px;line-height:1;cursor:pointer}
#audioSettingsPanel.sound-settings-panel{z-index:31;inset:9% 27%;padding:14px 22px;gap:8px;justify-content:center;border:2px solid #f6d47b;box-shadow:0 10px 35px #000a;overflow:auto}
#audioSettingsPanel h2{color:#ffdc83;line-height:1.1}
#audioSettingsPanel .active-track-name{font-size:clamp(10px,1.35vw,14px);color:#b9e9ff;margin:2px 0 4px;text-align:center}
#audioSettingsPanel .audio-setting-row{display:flex;align-items:center;gap:10px;width:100%;padding:6px 9px;background:#102e5bde;border:1px solid #a3c8ec79;border-radius:9px;color:#fff;font-size:clamp(10px,1.5vw,15px);font-weight:800}
#audioSettingsPanel .audio-setting-row span{min-width:65px}
#audioSettingsPanel .audio-setting-row input{flex:1;min-width:25px;width:100%;touch-action:pan-x;accent-color:#ffcc75}
#audioSettingsPanel .audio-setting-row output{min-width:33px;text-align:right;color:#ffe29c}
#audioSettingsPanel .sound-settings-hint{font-size:clamp(9px,1.2vw,12px);line-height:1.3;text-align:center;color:#d1e2f4}
#audioSettingsPanel button{width:100%;max-width:280px;margin:0 auto}
@media (max-height:440px){#audioSettingsPanel.sound-settings-panel{inset:3% 22%;padding:7px 16px;gap:3px}#audioSettingsPanel .audio-setting-row{padding:2px 8px}#audioSettingsPanel .sound-settings-hint{display:none}}
@media (max-width:620px) and (orientation:landscape){#audioSettingsPanel.sound-settings-panel{inset:3% 11%}#volumeControl .sound-cog{width:24px;min-width:24px}#volumeControl{flex-basis:116px}}

/* V10: separate family saves and responsive phone landscape profile chooser. */
#profilesPanel{background:linear-gradient(120deg,#091935ef,#122c56f5),url('assets/zippy-cover.webp') left center/cover no-repeat;padding:1.2% 3.2%;display:flex;flex-direction:column;gap:1.6%;color:#f9f9f4}
.profile-heading{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.profile-heading h2{font-size:clamp(20px,3.5vw,39px);color:#ffe29b;text-shadow:2px 2px #101f42}
#profilesPanel>p{font-size:clamp(9px,1.3vw,15px);line-height:1.2;flex:0 0 auto}
.profile-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:72px;align-content:start;gap:7px;overflow-y:auto;flex:1;min-height:0;padding:3px;touch-action:pan-y}
.profile-card{display:flex;gap:5px;align-items:center;border:1px solid #8abcf18c;background:#0d3564cc;border-radius:12px;padding:5px;min-width:0}
.profile-card.profile-active{border-color:#ffe2a2;background:#344567d9}
.profile-details{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px}
.profile-details strong{font-size:clamp(11px,1.5vw,18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-details small{font-size:clamp(8px,1vw,12px);color:#d3e5fb}
#profilesPanel .profile-play{min-height:34px!important;background:linear-gradient(#ffd475,#df8f3b)!important;color:#1c2c55!important;font-size:clamp(9px,1.25vw,14px)}
#profilesPanel .profile-action{padding:3px!important;min-height:30px!important;width:29px;flex:0 0 29px;font-size:16px}
.profile-creator{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.profile-creator label{font-size:clamp(9px,1.1vw,14px);font-weight:900}
#newProfileName{flex:1;min-width:0;border:1px solid #99cdf2;border-radius:8px;font-size:16px;padding:6px 9px;background:#ecf6ff;color:#193050;touch-action:manipulation}
#profilesPanel .profile-creator button{min-height:33px!important;padding:4px 11px!important;font-size:clamp(10px,1.3vw,14px)}
.profile-note,#profileCount{font-size:clamp(8px,1vw,12px);color:#c3d7ea;min-height:12px;flex:0 0 auto}
#profilesPanel button:disabled{opacity:.35;cursor:default}
.home-profile-line{display:flex;align-items:center;gap:6px;font-size:clamp(9px,1vw,12px);margin-top:3px}
.home-profile-line span{max-width:62%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#home #profileBtn{border:1px solid #ffe7a0;background:#33466d;color:#ffe6a8;padding:2px 6px;border-radius:7px;font-size:clamp(8px,1vw,12px)}
@media(max-height:390px){#profilesPanel{gap:1%;padding:1% 2%}.profile-heading h2{font-size:22px}.profile-list{gap:4px}.profile-card{padding:3px}.profile-creator input{padding:3px 7px}}
@media(max-width:700px) and (orientation:landscape){.profile-list{grid-template-columns:repeat(1,minmax(0,1fr))}}


/* V10.1: explicit, readable save management for phone and desktop. */
#profilesPanel .profile-card{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;align-content:center;row-gap:3px;padding:5px 7px;min-width:0}
#profilesPanel .profile-details{grid-column:1 / -1;min-width:0}
#profilesPanel .profile-play,#profilesPanel .profile-reset,#profilesPanel .profile-delete{width:100%;min-width:0;padding:4px 3px!important;min-height:30px!important;height:30px;border-radius:7px!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:clamp(9px,1.13vw,12px)!important}
#profilesPanel .profile-reset{background:linear-gradient(#406fa8,#234874)!important;color:#e9f9ff!important;border-color:#a3dbfa!important}
#profilesPanel .profile-delete{background:linear-gradient(#8f404a,#6f2534)!important;color:#fff5f5!important;border-color:#ffb4b4!important}
#profilesPanel .profile-list{grid-auto-rows:99px}
#profilesPanel .profile-empty{grid-column:1/-1;background:#0e3565ba;border:1px solid #ffdc9b;border-radius:12px;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:8px;color:#fff6d4}
#profilesPanel .profile-empty strong{font-size:clamp(14px,2vw,20px)}
#profilesPanel .profile-empty span{font-size:clamp(11px,1.3vw,15px)}
#profilesPanel .profile-note{font-size:clamp(9px,1.16vw,13px);color:#fff2bd;min-height:15px}
#profilesPanel .profile-note[data-status="success"]{color:#9effcb;font-weight:900}
#profilesPanel .profile-note[data-status="warning"]{color:#ffd0ae;font-weight:900}
#profilesPanel #newProfileName:focus{outline:3px solid #ffdc86;outline-offset:1px}
#profilesPanel .profile-card button:focus-visible{outline:3px solid #fff0ac;outline-offset:2px}
@media(max-width:740px) and (orientation:landscape){#profilesPanel .profile-list{grid-template-columns:1fr;grid-auto-rows:100px}}
@media(max-height:370px){#profilesPanel .profile-card{padding:3px 5px}#profilesPanel .profile-list{grid-auto-rows:94px}#profilesPanel .profile-note{font-size:10px}}


/* V10.5 – short, character-driven post-boss cinematic conversations. */
#storyPanel .boss-cutscene-portraits{display:none}
#storyPanel.boss-dialogue-scene .lumio-portrait{display:none}
#storyPanel.boss-dialogue-scene .boss-cutscene-portraits{
 display:block;position:absolute;z-index:2;left:0;top:0;width:53%;height:100%;pointer-events:none;
}
#storyPanel.boss-dialogue-scene .boss-cutscene-portraits:before{
 content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 35% 85%,#e6bf6355,transparent 53%);
}
#storyPanel .boss-cutscene-boss{position:absolute;left:1%;bottom:5%;width:75%;height:86%;display:flex;align-items:end;justify-content:center;transform-origin:60% 85%;filter:drop-shadow(0 9px 14px #081026b7);transition:opacity .18s,filter .18s}
#storyPanel .boss-cutscene-boss img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;object-position:bottom center}
#storyPanel .boss-cutscene-hero{position:absolute;right:10%;bottom:3%;width:25%;height:47%;display:flex;justify-content:center;align-items:end;filter:drop-shadow(0 7px 7px #020e26e8);transition:filter .18s;transform-origin:50% 100%}
#storyPanel .boss-cutscene-hero img{height:100%;max-width:100%;object-fit:contain;object-position:center bottom;image-rendering:auto;transform:scaleX(-1)}
#storyPanel.boss-dialogue-scene[data-speaker="zippy"] .boss-cutscene-boss{filter:brightness(.72) saturate(.85) drop-shadow(0 9px 12px #081026b7)}
#storyPanel.boss-dialogue-scene[data-speaker="boss"] .boss-cutscene-hero{filter:brightness(.68) drop-shadow(0 7px 7px #020e26e8)}
#storyPanel.boss-dialogue-scene .story-copy{width:53%;max-height:100%;gap:clamp(3px,.8vh,10px);padding:clamp(7px,1.2vw,20px) clamp(9px,1.8vw,29px);justify-content:center}
#storyPanel.boss-dialogue-scene h2{font-size:clamp(17px,2.65vw,37px);line-height:1.06}
#storyPanel.boss-dialogue-scene .lumio-dialogue{border-color:#e8c987;flex:0 1 auto}
#storyPanel[data-speaker="lumio"] .lumio-dialogue,#storyPanel[data-speaker="boss"] .lumio-dialogue{--bubble-fill-125:linear-gradient(150deg,#fffdf6,#faeed8)}
#storyPanel[data-speaker="zippy"] .lumio-dialogue{--bubble-fill-125:linear-gradient(150deg,#faffff,#e7f5ff);--bubble-stroke-125:#94d8ff}
#storyPanel[data-speaker="boss"] .lumio-dialogue{--bubble-fill-125:linear-gradient(150deg,#fffaf5,#f4e6dd);--bubble-stroke-125:#ef9b82}
#storyPanel[data-speaker="zippy"] .lumio-dialogue:before{top:auto;left:17%;bottom:-24px;width:30px;height:26px;background:var(--bubble-stroke-125);clip-path:polygon(18% 0,100% 0,36% 100%)}
#storyPanel[data-speaker="zippy"] .lumio-dialogue:after{top:auto;left:calc(17% + 4px);bottom:-18px;width:22px;height:19px;background:var(--bubble-fill-125);clip-path:polygon(18% 0,100% 0,36% 100%)}
#storyPanel.boss-dialogue-scene .lumio-dialogue:before{top:62%}
#storyPanel.boss-dialogue-scene[data-speaker="zippy"] .lumio-dialogue:before{top:auto;bottom:-24px}
#storyPanel.boss-dialogue-scene[data-speaker="zippy"] .lumio-dialogue:after{top:auto;bottom:-18px}
#storyPanel.boss-dialogue-scene #storyText{font-size:clamp(11px,1.39vw,18px);line-height:1.35;max-height:34vh;overflow-y:auto}
#storyPanel.boss-dialogue-scene #storySpeakerName{color:#803f4b}
#storyPanel.boss-dialogue-scene[data-speaker="zippy"] #storySpeakerName{color:#116b9f}
#storyPanel.boss-dialogue-scene #lumioMood{width:clamp(34px,4vw,60px);height:clamp(34px,4vw,60px);object-fit:contain;background:#d4e5ee}
#storyPanel .boss-cutscene-glimmer{position:absolute;left:17%;bottom:2%;font-size:clamp(10px,2.1vw,28px);color:#f9da86;opacity:.58;text-shadow:0 0 12px #fff4b6}
#storyPanel .boss-funke-banner{position:absolute;left:5%;bottom:3%;max-width:80%;border:1px solid #ffe8a3;background:linear-gradient(120deg,#9b7333d9,#49375aca);border-radius:14px;padding:4px 9px;font-size:clamp(10px,1.5vw,19px);font-weight:1000;color:#fff1b6;text-align:center;text-shadow:0 2px 6px #0f1025;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .28s,transform .28s}
#storyPanel.boss-dialogue-scene.worldfunke-released .boss-funke-banner{opacity:1;visibility:visible;transform:translateY(0)}
#storyPanel.boss-dialogue-scene.worldfunke-released .boss-cutscene-portraits:before{background:radial-gradient(ellipse at 42% 60%,#fff7a8b0,transparent 68%)}
#storyPanel.boss-dialogue-scene.worldfunke-released .boss-cutscene-glimmer{opacity:1;color:#fff6a4}
#storyPanel.boss-dialogue-scene.worldfunke-released .story-art{filter:brightness(1.3) saturate(1.26)}
@media(max-height:430px){
 #storyPanel.boss-dialogue-scene .story-copy{padding:5px 9px;gap:3px}
 #storyPanel.boss-dialogue-scene h2{font-size:clamp(15px,2.4vw,24px)}
 #storyPanel.boss-dialogue-scene .lumio-dialogue{padding:4px 8px}
 #storyPanel.boss-dialogue-scene #storyText{font-size:clamp(12px,1.5vw,16px);line-height:1.28;max-height:31vh}
 #storyPanel.boss-dialogue-scene .lumio-speaker{min-height:0;gap:5px;padding-bottom:2px}
 #storyPanel.boss-dialogue-scene #lumioMood{width:28px;height:28px}
 #storyPanel.boss-dialogue-scene .lumio-speaker strong{font-size:clamp(11px,1.7vw,17px)}
 #storyPanel.boss-dialogue-scene .lumio-speaker small{font-size:8px}
 #storyPanel.boss-dialogue-scene .story-buttons button{min-height:30px!important;padding:3px 5px!important}
 #storyPanel.boss-dialogue-scene .boss-cutscene-boss{height:78%;bottom:7%}
}
@media(prefers-reduced-motion:reduce){#storyPanel .boss-cutscene-boss,#storyPanel .boss-cutscene-hero,#storyPanel .boss-funke-banner{transition:none}}

/* V10.6: brief victory beat, no tap required – then automatic boss dialogue. */
.boss-defeat-overlay{position:absolute;inset:0;z-index:8;pointer-events:none;
 display:flex;align-items:center;justify-content:center;flex-direction:column;
 background:radial-gradient(ellipse at 50% 50%,#172449d6,#0611297a 70%);
 text-shadow:1px 3px 3px #06102d;gap:1%;}
.boss-defeat-overlay img{height:min(27%,115px);width:auto;max-width:40%;object-fit:contain;
 filter:drop-shadow(0 2px 13px #ffe396aa);animation:bossVictoryTumble .7s ease-out both}
.boss-defeat-overlay strong{font-size:clamp(16px,3.5vw,45px);color:#ffda73;
 text-align:center;letter-spacing:.05em}
.boss-defeat-overlay span{font-size:clamp(10px,1.4vw,18px);font-weight:900;color:#e1f3ff}
@keyframes bossVictoryTumble{0%{transform:rotate(0deg) translateY(-12px);opacity:1}
 100%{transform:rotate(-9deg) translateY(6px);opacity:.78}}
@media(prefers-reduced-motion:reduce){.boss-defeat-overlay img{animation:none}}

/* V10.7 Brummel-only painterly canyon pilot; collision geometry unchanged. */
#game.brummel-illustrated{image-rendering:auto;}

/* V11.0: compact equipment / contextual tutor; preserve base control geometry */
#starShopPanel,#loadoutPanel{padding:clamp(9px,1.3vw,17px) clamp(12px,2.1vw,26px);overflow-y:auto;gap:9px;background:linear-gradient(150deg,#0a1a41f7,#172f55f8 75%,#21344df0)}
.gameplay-shop-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.gameplay-shop-header h2{font-size:clamp(17px,3vw,37px);margin:0;color:#ffe5a0}.gameplay-shop-header strong{color:#ffe58c;font-size:clamp(12px,2.2vw,25px)}
.gameplay-shop-help,.loadout-footnote{margin:0;color:#d9e8ff;font-size:clamp(10px,1.23vw,15px)}
.feature-grid,.loadout-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1;min-height:0;overflow-y:auto;align-content:start}
.feature-card,.loadout-card{border:1px solid #8ac9f588;border-radius:13px;padding:9px;background:linear-gradient(145deg,#163969dd,#0b2150ee);min-width:0;display:flex;flex-direction:column;gap:4px;color:#ecf6ff}
.feature-card h3,.loadout-card h3{font-size:clamp(10px,1.45vw,19px);margin:0;color:#fff3bd}.feature-card p,.loadout-card p{font-size:clamp(9px,1.08vw,13px);line-height:1.24;margin:0;flex:1;color:#c5dfff}
.feature-card small,.loadout-card small{font-size:clamp(8px,1vw,12px);color:#ffe09b}.feature-card button,.loadout-card button{padding:5px 8px;font-size:clamp(10px,1.1vw,14px);border:1px solid #9ed7ff;border-radius:8px;background:#2760a4;color:white;min-height:26px}
.feature-card button:disabled,.loadout-card button:disabled{opacity:.45}.loadout-card.equipped{border-color:#80eebe;background:linear-gradient(145deg,#184e5b,#12355b)}.feature-notice{min-height:15px;margin:0;color:#ffe4a3;font-size:11px}
.loadout-info{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:clamp(11px,1.6vw,17px);color:#fff2c3}.loadout-footer{display:flex;gap:10px}.loadout-footer button{flex:1;min-height:36px;font-size:clamp(11px,1.6vw,18px)}
#featureQuick{position:absolute;top:18%;right:3%;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:auto}#featureQuick.hidden,#featureQuickList.hidden,#tutorialBubble.hidden{display:none!important}
#featureToggle{border-radius:15px;border:2px solid #c6e6ff;background:#17345fc9;color:white;padding:4px 9px;font-size:clamp(12px,1.6vw,17px);min-width:49px;min-height:34px;box-shadow:0 2px 5px #091634ad}
#featureQuickList{display:flex;flex-direction:column;gap:3px;background:#0c224dd9;border-radius:11px;padding:5px;max-height:min(64vh,220px);overflow-y:auto}
#featureQuickList button{font-size:clamp(10px,1.3vw,14px);min-height:28px;text-align:left;color:white;background:#264e87e8;border:1px solid #91c7f3;border-radius:7px;padding:3px 8px}#featureQuickList button:disabled{opacity:.45}
#tutorialBubble{position:absolute;top:13%;left:21%;right:19%;z-index:29;background:linear-gradient(130deg,#fff4d6,#e2f2ff);color:#16325a;border:3px solid #f6cf74;border-radius:17px;box-shadow:0 6px 22px #050e27db;display:flex;align-items:center;gap:10px;padding:10px;max-height:75%;overflow:auto}
#tutorialBubble img{width:clamp(40px,8vw,83px);height:clamp(42px,8vw,84px);object-fit:contain}#tutorialBubble div{flex:1}#tutorialBubble strong{color:#694396;font-size:clamp(10px,1.2vw,15px)}#tutorialBubble p{font-size:clamp(11px,1.34vw,18px);margin:5px 0;line-height:1.24}#tutorialOk{background:#24599d;color:white;border-radius:10px;padding:6px 13px;font-size:clamp(10px,1.25vw,14px);min-height:30px}
@media(max-height:390px){#starShopPanel,#loadoutPanel{gap:4px}.feature-grid,.loadout-grid{gap:5px}.feature-card,.loadout-card{padding:5px}.gameplay-shop-help{font-size:10px}#tutorialBubble{padding:6px;top:8%;max-height:79%}}
@media(max-width:590px){.feature-grid,.loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#tutorialBubble{left:8%;right:8%}}

/* A concise noninteractive dimmer avoids accidental touches behind Lumio's tips. */
#tutorialScrim{position:absolute;inset:0;z-index:28;background:rgba(5,18,44,.55);pointer-events:auto}
#tutorialScrim.hidden{display:none!important}


/* V11.3: non-obstructive lower notifications + cleaner, modern toast styling */
#toast{top:auto;left:50%;bottom:max(calc(env(safe-area-inset-bottom) + 12px),2.2%);transform:translateX(-50%);z-index:7;width:min(42%,430px);max-width:430px;min-width:220px;padding:8px 16px;border-radius:16px;border:1px solid rgba(255,224,130,.72);background:linear-gradient(180deg,rgba(17,41,84,.94),rgba(9,24,58,.96));box-shadow:0 10px 26px rgba(0,10,28,.42),inset 0 1px 0 rgba(255,255,255,.16);color:#fff6d4;text-shadow:none;font-size:clamp(12px,1.7vw,19px);font-weight:900;letter-spacing:.02em;white-space:normal;line-height:1.18;text-align:center;pointer-events:none;backdrop-filter:blur(4px);animation:toastRise .22s ease-out;}
@keyframes toastRise{from{transform:translateX(-50%) translateY(8px) scale(.96);opacity:.12}to{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
@media(max-width:900px){#toast{width:min(50%,390px);font-size:clamp(11px,2.1vw,16px);padding:7px 14px;bottom:max(calc(env(safe-area-inset-bottom) + 9px),1.6%)}}
@media(max-height:430px){#toast{bottom:max(calc(env(safe-area-inset-bottom) + 7px),1.2%);width:min(44%,350px);font-size:clamp(11px,1.8vw,14px);padding:6px 12px}}


/* V11.3.1 – pause button is a compact HUD bay, no values behind it. */
#playHud .top-button{
 top:3.1%;right:max(1.1%,calc(env(safe-area-inset-right) + 6px));
 width:9.2dvh;height:9.2dvh;aspect-ratio:auto;
 min-width:32px;min-height:32px;max-width:66px;max-height:66px;
 border-radius:11px;border:1px solid rgba(193,226,255,.57);
 background:linear-gradient(155deg,rgba(36,76,134,.95),rgba(12,29,66,.96));
 box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 2px 7px rgba(0,12,35,.29);
 font-size:clamp(14px,2.4dvh,21px);font-weight:900;z-index:5;
}
#playHud .top-button:active{transform:scale(.94);filter:brightness(1.15)}

/* V11.5.1: apply smooth final canvas compositing instead of nearest-neighbor device upscaling. */
canvas#game,canvas#game.brummel-illustrated{image-rendering:auto!important;}
.character-card>img[src*="zippy"]{image-rendering:auto;}

/* V11.12: minimal, thumb-safe pause control, without the old HUD bay look. */
#playHud .top-button{
 top:max(2%,env(safe-area-inset-top));
 right:max(1.2%,calc(env(safe-area-inset-right) + 4px));
 width:clamp(40px,10dvh,46px);height:clamp(40px,10dvh,46px);
 min-width:40px;min-height:40px;max-width:46px;max-height:46px;
 border-radius:50%;border:1px solid rgba(231,246,255,.23);
 background:rgba(9,28,60,.40);
 color:rgba(255,255,255,.95);
 box-shadow:0 1px 5px rgba(6,15,35,.13);
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
 font-size:clamp(14px,2.2dvh,18px);
}
#playHud .top-button:focus-visible{outline:2px solid #ffe9a2;outline-offset:2px}
#pausePanel .pause-stats{
 display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
 gap:5px 7px;padding:3px 0;margin:0;
 font-size:clamp(10px,1.45vw,13px);line-height:1.2;
}
#pausePanel .pause-stats span{
 padding:4px 8px;border-radius:16px;
 background:rgba(12,46,90,.56);color:#f0f7ff;
 white-space:nowrap;
}
@media(max-height:390px){#pausePanel .pause-stats{gap:3px 4px}#pausePanel .pause-stats span{padding:3px 6px}}


/* V11.13 – Invisible Touch. Hit target and visible glass are independent.
   The hit rectangles remain generous for iOS multitouch; only the decorative
   pseudo element is reduced. No invisible touch layer covers the gameplay. */
#game-shell{
  --touch-glass-opacity:.17;
  --touch-outline-opacity:.32;
  --touch-glyph-opacity:.89;
  --touch-visible-inset:15%;
  --touch-dpad-width:clamp(122px,18vw,152px);
  --touch-actions-width:clamp(183px,27vw,233px);
}
#game-shell[data-control-size="compact"]{
  --touch-dpad-width:clamp(108px,15.7vw,132px);
  --touch-actions-width:clamp(165px,24vw,208px);
  --touch-visible-inset:17%;
}
#game-shell[data-control-size="large"]{
  --touch-dpad-width:clamp(148px,21vw,176px);
  --touch-actions-width:clamp(215px,31vw,270px);
  --touch-visible-inset:14%;
}
#game-shell[data-control-visibility="standard"]{
  --touch-glass-opacity:.32;
  --touch-outline-opacity:.53;
  --touch-glyph-opacity:.96;
}
#game-shell[data-control-visibility="clear"]{
  --touch-glass-opacity:.55;
  --touch-outline-opacity:.78;
  --touch-glyph-opacity:1;
}
#game-shell #dpad{
  left:max(2.5%,calc(env(safe-area-inset-left) + 7px));
  bottom:max(5.5%,calc(env(safe-area-inset-bottom) + 8px));
  width:var(--touch-dpad-width);max-width:none;
  display:flex;gap:8%;height:auto;aspect-ratio:auto;
  justify-content:center;align-items:center;
  pointer-events:none; /* only buttons take touches */
}
#game-shell #actions{
  right:max(2.4%,calc(env(safe-area-inset-right) + 8px));
  bottom:max(5%,calc(env(safe-area-inset-bottom) + 8px));
  width:var(--touch-actions-width);max-width:none;
  display:flex;gap:4%;align-items:center;
  pointer-events:none;
}
#game-shell #dpad .control,
#game-shell #actions .action{
  position:relative;
  box-sizing:border-box;
  flex:1 1 0;
  width:auto;min-width:44px;min-height:44px;
  height:auto;max-width:none;
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:50%;
  padding:0;
  text-shadow:0 1px 4px rgba(4,13,30,.78);
  color:rgba(245,252,255,var(--touch-glyph-opacity));
  opacity:1!important;filter:none!important;
  font-weight:900;
  pointer-events:auto;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transform:none;
  transition:none;
}
#game-shell #dpad .control{font-size:clamp(19px,2.7vw,25px)}
#game-shell #dpad .control::before,
#game-shell #actions .action::before{
  content:"";position:absolute;
  inset:var(--touch-visible-inset);
  border-radius:50%;
  pointer-events:none;
  background:rgba(11,33,72,var(--touch-glass-opacity));
  border:1px solid rgba(225,241,255,var(--touch-outline-opacity));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.13),0 1px 3px rgba(0,10,29,.12);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background .16s ease,transform .13s ease,box-shadow .16s ease,border-color .16s ease;
}
#game-shell #actions .run{transform:translateY(5px)}
#game-shell #actions .attack{transform:translateY(-6px)}
#game-shell #actions .jump{transform:translateY(1px);flex:1.13 1 0}
#game-shell #actions .action span,
#game-shell #actions .action small{
  position:relative;top:auto;right:auto;bottom:auto;
  pointer-events:none;z-index:1;
  display:block;line-height:1;
  font-size:clamp(16px,2.5vw,23px);
  color:inherit;
  text-shadow:0 1px 3px rgba(3,14,36,.9);
}
#game-shell #actions .action small{
  margin-top:0;font-size:clamp(10px,1.3vw,12px);
  color:rgba(238,247,255,var(--touch-glyph-opacity));
  letter-spacing:.02em;
}
#game-shell #actions .action.attack span{color:rgba(255,237,156,var(--touch-glyph-opacity))}
#game-shell #actions .action.attack.ready::before{
  border-color:rgba(255,229,161,calc(var(--touch-outline-opacity) + .18));
  background:rgba(96,66,25,var(--touch-glass-opacity));
}
#game-shell #actions .action.attack.super::before{
  border-color:rgba(255,229,158,.85);
  box-shadow:0 0 6px rgba(253,208,91,.31),inset 0 1px 1px rgba(255,255,255,.17);
}
/* Active states highlight only the *visible* face, not the transparent target. */
#game-shell #dpad .control.pressed,
#game-shell #actions .action.pressed{
  border:0!important;background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
}
#game-shell #dpad .control.pressed::before,
#game-shell #actions .action.pressed::before{
  background:rgba(55,151,220,.53);
  border-color:rgba(239,251,255,.9);
  transform:scale(.92);
  box-shadow:0 0 8px rgba(96,205,255,.42),inset 0 1px 3px rgba(255,255,255,.26);
}
#game-shell #actions .action.attack.pressed::before{
  background:rgba(174,126,48,.61);
  box-shadow:0 0 8px rgba(247,202,89,.44);
}
#game-shell #dpad .control:focus-visible,
#game-shell #actions .action:focus-visible{
  outline:2px solid #ffdd8a;outline-offset:-3px;
}
#pausePanel .control-settings-row{display:flex;align-items:stretch;gap:6px;width:100%}
#pausePanel .control-settings-row>button{
  flex:1 1 0;min-width:0;
  padding:5px 3px;
  font-size:clamp(9px,1.15vw,13px);
  white-space:normal;
  min-height:32px;
}
#pausePanel .control-settings-hint{
  font-size:clamp(9px,1vw,11px);line-height:1.15;
  color:rgba(221,237,255,.82);margin:0;
}
@media(max-width:600px){
  #game-shell{--touch-dpad-width:116px;--touch-actions-width:177px}
  #game-shell[data-control-size="compact"]{--touch-dpad-width:106px;--touch-actions-width:165px}
  #game-shell[data-control-size="large"]{--touch-dpad-width:139px;--touch-actions-width:208px}
  #game-shell #dpad .control,#game-shell #actions .action{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  #game-shell #dpad .control::before,#game-shell #actions .action::before{transition:none}
}

/* V11.13: keep the pause/settings overview visible on short landscape phones. */
@media(max-height:450px){
 #pausePanel{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;align-items:stretch;
  gap:3px 7px;padding:7px 12px;overflow-y:auto;
 }
 #pausePanel>.eyebrow,#pausePanel>h2,#pausePanel>.pause-stats,
 #pausePanel>#resumeBtn,#pausePanel>.control-settings-row,
 #pausePanel>.control-settings-hint,#pausePanel>#hintBtn,
 #pausePanel>#hintText,#pausePanel>#cheatStatus{grid-column:1 / -1}
 #pausePanel h2{font-size:clamp(21px,3vw,28px);line-height:1.05;margin:0}
 #pausePanel>.eyebrow{font-size:9px;letter-spacing:.05em}
 #pausePanel>button{min-height:27px!important;max-height:33px;padding:3px 5px;font-size:clamp(9px,1.25vw,12px)}
 #pausePanel .control-settings-row>button{min-height:28px;max-height:31px;padding:3px}
 #pausePanel .control-settings-hint{font-size:9px;text-align:center}
 #pausePanel .pause-stats{gap:3px 4px;font-size:10px}
 #pausePanel .pause-stats span{padding:2px 6px}
 #pausePanel #cheatStatus{font-size:9px;margin:0;line-height:1.1}
}

/* V11.17: redesigned illustrated UI materials to match the new gameplay art. */
canvas#game{image-rendering:auto!important}
#home .cover{filter:saturate(1.12) contrast(1.08) brightness(1.04)}
#home .cover::after{background:linear-gradient(90deg,rgba(8,20,47,.02) 0%,rgba(5,23,52,.22) 62%,#081b3e 100%),linear-gradient(0deg,rgba(8,22,45,.8),transparent 20%)}
#home .home-content h1{letter-spacing:.025em;text-shadow:0 3px 0 #1358a8,2px 6px 0 #0c3167,0 11px 18px rgba(0,9,22,.55)}
#home .home-content h2{color:#ffe6a1;text-shadow:1px 2px 7px rgba(9,15,32,.72)}
#home .buttons button:not(.primary){background:linear-gradient(160deg,rgba(51,118,164,.88),rgba(7,32,78,.96));border-color:rgba(193,240,255,.66);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 3px 9px rgba(0,11,29,.36)}
#home .buttons button.primary{background:linear-gradient(145deg,#fff2b4,#f0ac4d 47%,#d97d32);box-shadow:inset 0 2px 4px rgba(255,255,255,.54),0 3px 0 #90502a,0 5px 12px rgba(9,10,23,.35)}
#levelSelect{background:radial-gradient(circle at 55% 20%,rgba(64,119,158,.92),rgba(12,32,77,.97) 64%,#081b39)}
#levelSelect #worldInfo{background:linear-gradient(120deg,rgba(12,36,79,.72),rgba(22,57,85,.62));box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.panel.dialog{background:linear-gradient(140deg,#285e88,#172b59 52%,#101a3d);border-color:rgba(255,228,159,.82);box-shadow:0 0 0 120vw #000b,0 10px 0 #071428,inset 0 0 22px rgba(139,190,220,.12)}


/* V11.21 – Final Graphical Polish. Unified fantasy-art direction, clear focus,
   good contrast and touch targets retained without changing control hitboxes. */
:root{--v121-gold:#f7d495;--v121-border:rgba(246,221,174,.50);--v121-cold:rgba(188,228,248,.24)}
#game-shell{box-shadow:0 0 0 2px #9ebbe454,0 14px 64px #0008}
#game-shell::after{opacity:.22}
.panel{background:radial-gradient(ellipse at 50% 3%,#23486e70,transparent 50%),linear-gradient(155deg,#0a1a37ee,#081a3cea 62%,#0d2449f0)}
/* Gold-edged parchment/glass panels: one look in all menus. */
.panel:not(#home):not(#levelSelect)::before{content:'';position:absolute;inset:6px;border:1px solid #f1cf8c35;border-radius:14px;pointer-events:none;z-index:0;box-shadow:inset 0 0 29px #f4d08b06}
.panel:not(#home):not(#levelSelect)>*{position:relative;z-index:1}
.panel button:not(.close):not(.tiny){border-color:#e5d6bb87;border-bottom-color:#151735!important;background:linear-gradient(165deg,#437096 0%,#21466f 47%,#0a2349 100%);box-shadow:inset 0 1px 2px #fff7dc49,inset 0 -6px 11px #06132d41,0 2px 0 #07172f,0 3px 9px #050e2350;text-shadow:0 1px 1px #09162e}
.panel button.primary{border-color:#fff0c4!important;border-bottom-color:#ad6127!important;background:linear-gradient(175deg,#ffe9a5,#f5be54 42%,#b97736)!important;color:#172a48!important;text-shadow:0 1px #fff2bacc!important;box-shadow:inset 0 2px 2px #fff9,0 3px 0 #6d3c20,0 4px 18px #f7c56d2c!important}
.panel button:focus-visible{outline:2px solid #fff3bd;outline-offset:2px}
.panel button.close{border:1px solid #ebd4a56e;border-radius:11px;background:linear-gradient(#3b516c,#162b4a);box-shadow:inset 0 1px #ffe7b350}
.panel .eyebrow{color:#f2d49d;letter-spacing:.17em;text-shadow:0 1px 3px #0009}
#home .cover{filter:saturate(1.12) contrast(1.04)}
#home .home-content h1{text-shadow:2px 3px #0b3763,-1px -1px #fff2bd,0 6px #bd7839,0 9px 18px #0007}
#home .home-content h2{color:#ffe0a2;text-shadow:0 2px 3px #091833}
#home .buttons{gap:clamp(5px,.8vw,11px)}
#home .buttons button{letter-spacing:.02em}
#home .tagline{color:#f0e9d9;text-shadow:0 2px 4px #071328}
#levelSelect{border:0;background:linear-gradient(180deg,#071e3ca6,#091933e0 92%),var(--map-bg) center / cover no-repeat,#102346}
#levelSelect::before{box-shadow:inset 0 0 28px #06152c94}
.panel #worldTabs{gap:clamp(3px,.65vw,9px)}
.panel #worldTabs button{position:relative;overflow:hidden;border-radius:11px!important;border:1px solid #f1d39a70!important;box-shadow:inset 0 1px #fff9dc64,0 2px 7px #080c25bb!important;background:linear-gradient(145deg,#2c4259dd,#152848e8)!important;opacity:.84}
.panel #worldTabs button::before{content:'';display:block;position:absolute;width:27px;height:27px;left:4px;top:50%;transform:translateY(-50%);background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.30;pointer-events:none}
.panel #worldTabs button:nth-child(1)::before{background-image:url('assets/v121-brummel-crest.png')}
.panel #worldTabs button:nth-child(2)::before{background-image:url('assets/v121-moorgrim-crest.png')}
.panel #worldTabs button:nth-child(3)::before{background-image:url('assets/v121-glutrax-crest.png')}
.panel #worldTabs button:nth-child(4)::before{background-image:url('assets/v121-schattenklaue-crest.png')}
.panel #worldTabs button:nth-child(5)::before{background-image:url('assets/v121-krawall-crest.png')}
.panel #worldTabs button.active{border-color:#fff1c5!important;color:#fff2cb!important;opacity:1!important;background:linear-gradient(145deg,#846a4b,#2b4166)!important;box-shadow:inset 0 2px #ffe4a06b,0 0 0 1px #edc075,0 4px 15px #0008!important}
.panel #worldTabs button.active::before{opacity:.85}
#worldInfo{border:1px solid #e6c99586;background:linear-gradient(100deg,#071b3dcf,#193354b8);box-shadow:inset 0 1px #fff0d532,0 6px 18px #030b22a6}
#worldInfo strong{color:#fff0c0}
.panel #levelGrid button{border:1px solid #d8d1c292!important;background:linear-gradient(165deg,#30546d,#172e55 62%,#0b2148)!important;box-shadow:inset 0 1px #fff9db46,inset 0 -5px #061c396b,0 4px 13px #0005!important}
.panel #levelGrid button.done{border-color:#abe4b4!important;background:linear-gradient(155deg,#2b7b67,#145242,#0a3938)!important}
.panel #levelGrid button.boss-stage{border-color:#ffd18d!important;background:linear-gradient(155deg,#886052,#513550,#251e3f)!important;box-shadow:inset 0 1px #ffe4ad80,0 0 12px #f7b86533!important}
.panel #levelGrid button.locked{opacity:.58}
#pausePanel,#resultPanel,#friendsPanel,#profilesPanel,#starShopPanel,#towerPanel,#albumPanel,#loadoutPanel{box-shadow:inset 0 0 40px #a2d5f010}
#pausePanel h2,#resultPanel h2,.map-header h2{color:#fff6dd;text-shadow:0 2px #162b4c,0 4px 12px #000b}
#resultPanel .stars{filter:drop-shadow(0 2px 5px #ffd88d50)}
/* Subtle responsive polish; Invisible Touch controls keep unchanged dimensions. */
#actions button,#dpad .control{border-color:#ede8d377;background:linear-gradient(160deg,#263e61a1,#142a4cc1)!important;box-shadow:inset 0 1px 3px #fff8dc45,0 0 0 1px #091a37a6!important}
#actions button.pressed,#dpad .pressed{background:linear-gradient(#39bdf3ed,#2064c2e0)!important;border-color:#fff!important}
#pauseBtn{background:linear-gradient(160deg,#3c5263b8,#132844c9);border:1px solid #f8e2b69c;color:#fff1d2;box-shadow:inset 0 1px #fff5c25b,0 3px 9px #0005}
@media(max-width:680px) and (orientation:landscape){
 #levelSelect #worldTabs button::before{width:18px;height:18px;left:2px;opacity:.20}
 #home .eyebrow{letter-spacing:.07em}
}
@media(prefers-reduced-motion:reduce){.panel button{transition:none!important}}


/* ================================================================
  V11.25 CINEMATIC DIALOGUE SYSTEM – theatrical, interactive scenes.
  Uses existing approved art plus a layered animated Lumio puppet,
  game sprite atlases for Zippy and all five bosses.
  Does not change game physics, dialogue text or save progression.
================================================================ */
#storyPanel.cinematic-v125{--cin-gold:#ffe0a0;--cin-haze:#ffc96f;isolation:isolate}
#storyPanel.cinematic-v125 .lumio-portrait,
#storyPanel.cinematic-v125 .boss-cutscene-portraits{display:none!important}
#storyPanel.cinematic-v125 .story-art{opacity:.29;filter:blur(3px) saturate(1.1);transform:scale(1.1)}
#storyPanel.cinematic-v125 .story-shade{z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(7,13,29,0) 10%,rgba(5,12,29,.18) 41%,rgba(4,12,31,.81) 54%,rgba(4,10,27,.91) 100%)}
#storyPanel.cinematic-v125 .story-copy{z-index:5;width:50%;padding:clamp(6px,1.3vw,18px);gap:clamp(3px,.7vh,8px);max-height:100%;overflow-y:auto}
#storyPanel.cinematic-v125 h2{font-size:clamp(15px,2.32vw,32px);line-height:1.03}
#storyPanel.cinematic-v125 .lumio-dialogue{box-shadow:0 4px 0 #c08d46,0 10px 25px rgba(3,9,24,.67);border-color:var(--cin-gold)}
#storyPanel.cinematic-v125 #storyText{font-size:clamp(11px,1.4vw,18px);line-height:1.31;min-height:0;max-height:32vh;overflow:auto}
#storyPanel.cinematic-v125 .lumio-speaker{min-height:0;gap:5px;padding-bottom:3px}
#storyPanel.cinematic-v125 #lumioMood{width:clamp(25px,3vw,46px);height:clamp(25px,3vw,46px)}
#storyPanel.cinematic-v125 .lumio-speaker strong{font-size:clamp(11px,1.5vw,19px)}
#storyPanel.cinematic-v125 .lumio-speaker small{font-size:clamp(7px,.8vw,11px)}
#storyPanel.cinematic-v125 .story-buttons{gap:clamp(3px,.5vw,9px)}
#storyPanel.cinematic-v125 .story-buttons button{font-size:clamp(8px,1vw,13px)!important;min-height:clamp(29px,5.7vh,39px)!important;padding:3px 4px!important}
#storyPanel.cinematic-v125 .story-buttons #cinAuto125{flex:0 1 23%;color:#e1f8ff;background:linear-gradient(#234b69,#132e53)}
#storyPanel.cinematic-v125 .story-buttons #cinAuto125[aria-pressed="false"]{background:linear-gradient(#30425b,#15293f);color:#c5c9d3}
#storyPanel.cinematic-v125 .story-buttons #storySkipBtn{flex:0 1 30%}
#storyPanel.cinematic-v125 .cin-caption-progress{height:2px;background:#cde3ff48;border-radius:20px;overflow:hidden}
#storyPanel.cinematic-v125 .cin-caption-progress i{display:block;width:0%;height:100%;background:linear-gradient(90deg,#88d8ff,#ffe9a6);transition:width .14s linear;box-shadow:0 0 8px #e6d6ff}
#storyPanel.cinematic-v125 .cinematic-stage{position:absolute;z-index:1;inset:0 auto 0 0;width:56%;overflow:hidden;isolation:isolate;pointer-events:none;background:#0b1c38;--cin-haze:#fff4af;--cin-rim:#d9b976}
#storyPanel .cinematic-stage{display:none}
#storyPanel.cinematic-v125 .cinematic-stage{display:block}
#storyPanel .cin-backdrop{position:absolute;inset:-3% -3%;background:center/cover no-repeat;opacity:.95;animation:cinCamera125 17s ease-in-out infinite alternate;filter:brightness(.77) saturate(1.14)}
#storyPanel .cin-parallax{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,23,50,.12),transparent 28%,rgba(9,14,31,.3) 65%,rgba(3,8,21,.64));mix-blend-mode:multiply}
#storyPanel .cin-stage-glow{position:absolute;inset:-6% -24%;background:radial-gradient(ellipse at 52% 43%,var(--cin-haze),transparent 56%);opacity:.13;animation:cinGlow125 6s ease-in-out infinite alternate}
#storyPanel .cin-stage-ground{position:absolute;left:-10%;right:-10%;height:22%;bottom:-13%;border-top:2px solid #f7e8ba85;background:linear-gradient(180deg,#21394cdd,#071629ea);border-radius:50% 50% 0 0;box-shadow:0 -9px 42px #ffeca224}
#storyPanel .cin-vignette{position:absolute;inset:0;box-shadow:inset 0 0 54px rgba(4,11,28,.66);pointer-events:none}
#storyPanel .cin-hero-puppet{position:absolute;z-index:4;right:0%;bottom:3%;width:27%;height:61%;filter:drop-shadow(0 7px 8px #020a19c9);transform-origin:50% 95%;animation:cinHeroBounce125 3.9s ease-in-out infinite}
#storyPanel .cin-hero-puppet canvas,#storyPanel .cin-hero-puppet img{width:100%;height:100%;object-fit:contain;object-position:bottom center;transform:scaleX(-1)}
#storyPanel .cin-hero-puppet canvas{position:relative;display:none}
#storyPanel .cin-hero-puppet img{position:absolute;inset:0;opacity:1}
#storyPanel .cin-boss-puppet{position:absolute;z-index:3;left:1%;bottom:0;width:68%;height:88%;transform-origin:50% 88%;filter:drop-shadow(0 12px 13px #080b21d5);animation:cinBossBreath125 4.5s ease-in-out infinite}
#storyPanel .cin-boss-puppet canvas,#storyPanel .cin-boss-puppet img{height:100%;width:100%;object-fit:contain;object-position:center bottom}
#storyPanel .cin-boss-puppet canvas{position:relative;display:block}
#storyPanel .cin-boss-puppet img{position:absolute;inset:0;opacity:0}
#storyPanel.cinematic-v125 .cin-lumio-puppet{position:absolute;z-index:3;left:4%;bottom:-16%;height:128%;aspect-ratio:320/485;filter:drop-shadow(0 12px 11px #040c27c4);transform-origin:58% 85%;animation:cinLumioFloat125 4.2s ease-in-out infinite}
#storyPanel .cin-lumio-body,#storyPanel .cin-lumio-head{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
#storyPanel .cin-lumio-head{transform-origin:68% 33%;animation:cinLumioNod125 4.8s ease-in-out infinite}
#storyPanel .cin-staff-ray{position:absolute;left:20%;top:15%;width:26%;aspect-ratio:1;background:radial-gradient(circle,#fff9c1b0,rgba(255,198,81,.42) 22%,transparent 70%);border-radius:50%;mix-blend-mode:screen;animation:cinGlow125 1.7s ease-in-out infinite alternate;pointer-events:none}
#storyPanel .cin-world-spark{position:absolute;z-index:3;left:50%;top:37%;width:48px;height:48px;transform:translate(-50%,-50%) scale(.1);border-radius:50%;background:radial-gradient(circle,#fff6ce, #ffe07c9c 20%,transparent 70%);box-shadow:0 0 34px #fff3a05d;opacity:0}
#storyPanel .cin-world-spark span{display:grid;place-items:center;width:100%;height:100%;font-size:30px;color:#fffbe0;text-shadow:0 0 8px #f9e9a0}
#storyPanel.cinematic-v125.cin-release125 .cin-world-spark{opacity:1;animation:cinSparkRelease125 5s ease-in-out infinite}
#storyPanel .cin-dust{position:absolute;z-index:2;font-size:clamp(14px,2vw,25px);color:#fff1b2;opacity:.75;filter:drop-shadow(0 0 5px #fff09e);animation:cinDrift125 6s ease-in-out infinite}
#storyPanel .cin-dust-one{left:16%;top:17%}.cin-dust-two{left:65%;top:36%;animation-delay:-2.1s!important}.cin-dust-three{left:38%;top:69%;animation-delay:-3.6s!important}
#storyPanel.cinematic-v125[data-speaker="lumio"] .cin-lumio-head{animation-duration:2.5s}
#storyPanel.cinematic-v125[data-speaker="zippy"] .cin-hero-puppet{animation:cinHeroTalk125 .62s ease-in-out infinite alternate;filter:drop-shadow(0 0 12px #86cffa8f)}
#storyPanel.cinematic-v125[data-speaker="boss"] .cin-boss-puppet{animation:cinBossTalk125 1.1s ease-in-out infinite alternate;filter:drop-shadow(0 0 14px var(--cin-rim))}
#storyPanel.cinematic-v125[data-speaker="boss"] .cin-hero-puppet{filter:brightness(.80) drop-shadow(0 6px 8px #060c18)}
#storyPanel.cinematic-v125[data-speaker="zippy"] .cin-boss-puppet{filter:brightness(.85) drop-shadow(0 10px 12px #030b20)}
#storyPanel.cinematic-v125.cin-intro125 .cin-boss-puppet{display:none}
#storyPanel.cinematic-v125.cin-dialog125 .cin-lumio-puppet{display:none}
#storyPanel.cinematic-v125.cin-boss-pre125 .cin-boss-puppet{display:block;opacity:.26;left:20%;width:55%;height:65%;filter:blur(1.5px) brightness(.5)}
#storyPanel.cinematic-v125.cin-boss-pre125 .cin-hero-puppet{right:4%}
#storyPanel.cinematic-v125[data-world="0"] .cinematic-stage{--cin-haze:#ffe6a0;--cin-rim:#ffdf87}
#storyPanel.cinematic-v125[data-world="1"] .cinematic-stage{--cin-haze:#c5ffc1;--cin-rim:#a3eb92}
#storyPanel.cinematic-v125[data-world="2"] .cinematic-stage{--cin-haze:#ffaf78;--cin-rim:#ff9658}
#storyPanel.cinematic-v125[data-world="3"] .cinematic-stage{--cin-haze:#d1bbff;--cin-rim:#b49aff}
#storyPanel.cinematic-v125[data-world="4"] .cinematic-stage{--cin-haze:#ffe2ae;--cin-rim:#ffcc85}
@keyframes cinCamera125{from{transform:translate3d(-1.5%,0,0) scale(1.03)}to{transform:translate3d(2%,0,0) scale(1.12)}}
@keyframes cinLumioFloat125{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes cinLumioNod125{0%,100%{transform:rotate(-1deg) translateY(1px)}50%{transform:rotate(2deg) translateY(-2px)}}
@keyframes cinHeroBounce125{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes cinHeroTalk125{from{transform:translateY(1px) rotate(-2deg) scale(1)}to{transform:translateY(-3px) rotate(1.8deg) scale(1.035)}}
@keyframes cinBossBreath125{from{transform:translateY(1px) scale(1)}50%{transform:translateY(-2px) scale(1.02)}to{transform:translateY(1px) scale(1)}}
@keyframes cinBossTalk125{from{transform:translateY(2px) rotate(-1deg) scale(.99)}to{transform:translateY(-5px) rotate(1.3deg) scale(1.045)}}
@keyframes cinGlow125{from{opacity:.43;transform:scale(.94)}to{opacity:1;transform:scale(1.15)}}
@keyframes cinSparkRelease125{0%{transform:translate(-50%,10%) scale(.4);opacity:.2}36%{transform:translate(-50%,-70%) scale(1.45);opacity:1}75%{transform:translate(-50%,-110%) scale(1);opacity:1}100%{transform:translate(-50%,-155%) scale(.7);opacity:.3}}
@keyframes cinDrift125{0%,100%{transform:translateY(5px) rotate(0deg);opacity:.25}50%{transform:translateY(-16px) rotate(70deg);opacity:.85}}
@media(max-height:430px){
 #storyPanel.cinematic-v125 .story-copy{width:51%;padding:4px 7px;gap:2px}
 #storyPanel.cinematic-v125 h2{font-size:clamp(14px,2.2vw,23px)}
 #storyPanel.cinematic-v125 #storyText{font-size:clamp(10px,1.4vw,14px);line-height:1.22;max-height:29vh}
 #storyPanel.cinematic-v125 .lumio-dialogue{padding:5px 8px;border-radius:14px}
 #storyPanel.cinematic-v125 .story-buttons button{min-height:28px!important}
 #storyPanel.cinematic-v125 .cin-lumio-puppet{height:124%}
}
@media(max-width:740px) and (orientation:landscape){#storyPanel.cinematic-v125 .story-copy{width:52%}#storyPanel.cinematic-v125 .cinematic-stage{width:55%}}
@media(prefers-reduced-motion:reduce){
 #storyPanel.cinematic-v125 .cinematic-stage *,#storyPanel.cinematic-v125 .cinematic-stage *:before{animation:none!important;transition:none!important}
 #storyPanel.cinematic-v125.cin-release125 .cin-world-spark{transform:translate(-50%,-50%) scale(1)!important;opacity:1!important}
}
/* The legacy global panel children rule uses two ID selectors; restore the
   cinematic layer's absolute positioning with an explicit override. */
#storyPanel.cinematic-v125 > .cinematic-stage{position:absolute!important;inset:0 auto 0 0!important;height:100%!important;z-index:2!important;}
#storyPanel.cinematic-v125 > .story-art,#storyPanel.cinematic-v125 > .story-shade{position:absolute!important;inset:0!important;}
#storyPanel.cinematic-v125 > .story-copy{z-index:5!important;}


/* ZIPPY V11.25.3 — Cinematic speech-bubble redesign.
   The tail is an SVG spanning the whole stage and geometrically
   targets the active speaker, not a tiny CSS triangle on the panel. */
#storyPanel.cinematic-v125 .story-copy{
  width:50.5%;
  gap:clamp(5px,1.2vh,12px);
  padding:clamp(7px,1.35vw,20px);
  overflow-x:visible;
}
#storyPanel.cinematic-v125 .lumio-dialogue{
  --dialogue-accent:#e7b653;
  position:relative;
  z-index:6;
  margin:clamp(5px,.75vh,11px) 0 clamp(4px,1vh,12px) clamp(4px,.5vw,8px);
  padding:clamp(10px,1.3vw,20px) clamp(13px,1.7vw,28px)!important;
  border:clamp(3px,.35vw,5px) solid var(--dialogue-accent)!important;
  border-radius:42px 48px 43px 47px / 40px 46px 38px 48px!important;
  outline:2px solid #ffffffa8;
  outline-offset:-8px;
  background:linear-gradient(160deg,#fffff7,#fff6dd 72%,#fcefcf)!important;
  box-shadow:0 5px 0 rgba(120,71,19,.52),0 17px 28px #03142d9c,
             inset 0 3px 8px rgba(255,255,255,.85)!important;
  min-height:clamp(92px,21vh,142px);
  transform:rotate(-.35deg);
  overflow:visible;
}
#storyPanel.cinematic-v125 .lumio-dialogue:before,
#storyPanel.cinematic-v125 .lumio-dialogue:after{display:none!important}
#storyPanel.cinematic-v125 .lumio-speaker{
  flex-shrink:0;
  gap:clamp(4px,.8vw,9px);
  border-bottom:none!important;
  padding:0 0 clamp(2px,.45vh,5px)!important;
}
#storyPanel.cinematic-v125 .lumio-speaker>div{gap:1px}
#storyPanel.cinematic-v125 .lumio-speaker strong{
  display:inline-block;
  width:max-content;
  font-size:clamp(12px,1.55vw,19px);
  padding:2px 10px;
  border:2px solid #d5ab5d;
  border-radius:24px;
  background:linear-gradient(#fff6d2,#ffe7a0);
  color:#225283;
  box-shadow:inset 0 1px #fffefa;
}
#storyPanel.cinematic-v125 .lumio-speaker small{
  padding-left:8px;
  color:#7d6a54;
  font-size:clamp(7px,.8vw,10px)
}
#storyPanel.cinematic-v125 #lumioMood{
  border-radius:50%;
  width:clamp(27px,3.3vw,46px);
  height:clamp(27px,3.3vw,46px);
}
#storyPanel.cinematic-v125 #storyText{
  font-size:clamp(12px,1.52vw,20px);
  font-weight:800;
  line-height:1.32;
  color:#182a48;
  max-height:35vh;
  margin:0;
  padding-top:3px;
  min-height:1.4em;
  overflow:auto;
  text-shadow:none!important;
}
#storyPanel.cinematic-v125 .lumio-mood{
  display:none!important;
}
#storyPanel.cinematic-v125[data-speaker="zippy"] .lumio-dialogue{
  --dialogue-accent:#70bff3;
  background:linear-gradient(160deg,#ffffff,#e8f7ff 80%,#d6ebff)!important;
}
#storyPanel.cinematic-v125[data-speaker="zippy"] .lumio-speaker strong{
  background:linear-gradient(#e1faff,#b3e7ff);
  border-color:#73bef0;
}
#storyPanel.cinematic-v125[data-speaker="boss"] .lumio-dialogue{
  --dialogue-accent:#eab18d;
  background:linear-gradient(155deg,#fffdf6,#fff0e8 80%,#f9e5da)!important;
}
#storyPanel.cinematic-v125[data-speaker="boss"] .lumio-speaker strong{
  background:linear-gradient(#fff2e6,#ffd6c6);
  border-color:#df987e;
  color:#914a44;
}
#storyPanel.cinematic-v125 .cin-speech-tail253{
  display:block!important;
  position:absolute;
  z-index:4;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  filter:drop-shadow(0 5px 4px #07152c88);
}
#storyPanel.cinematic-v125 .cin-speech-tail253 path{
  stroke-linejoin:round;
  stroke-linecap:round;
  stroke-width:4;
  vector-effect:non-scaling-stroke;
}
#storyPanel:not(.cinematic-v125) .cin-speech-tail253{display:none}
#storyPanel.cinematic-v125 .cin-hero-puppet{
  right:2%;
  bottom:5%;
  height:59%;
  width:29%;
}
#storyPanel.cinematic-v125 .cin-hero-puppet canvas{display:none!important}
#storyPanel.cinematic-v125 .cin-hero-puppet img{
  display:block!important;
  opacity:1!important;
  transform:scaleX(-1);
  object-fit:contain;
  object-position:bottom center;
}
#storyPanel.cinematic-v125 .cin-boss-puppet{
  filter:drop-shadow(0 10px 12px #080b21d5)
}
@media(max-height:450px){
 #storyPanel.cinematic-v125 .story-copy{
   width:51%;padding:4px 7px;gap:2px
 }
 #storyPanel.cinematic-v125 .lumio-dialogue{
   min-height:68px;
   border-radius:24px 28px 25px 30px / 24px 28px 25px 27px!important;
   padding:5px 9px!important;
   margin:2px 0 4px 5px;
   outline-offset:-5px
 }
 #storyPanel.cinematic-v125 #storyText{
   font-size:clamp(11px,1.48vw,16px);
   line-height:1.24;
   max-height:29vh
 }
 #storyPanel.cinematic-v125 .lumio-speaker strong{
   font-size:clamp(10px,1.35vw,15px);
   padding:1px 7px
 }
 #storyPanel.cinematic-v125 .lumio-speaker small{font-size:7px}
 #storyPanel.cinematic-v125 .lumio-speaker #lumioMood{
   width:clamp(21px,2.7vw,32px);
   height:clamp(21px,2.7vw,32px)
 }
 #storyPanel.cinematic-v125 .cin-hero-puppet{height:55%}
}
@media(prefers-reduced-motion:reduce){
 #storyPanel.cinematic-v125 .cin-speech-tail253{transition:none!important}
}

/* V11.25.4 — critical hotfix for the broken V11.25.3 dialogue layout.
   An older high-specificity rule `.panel:not(#home):not(#levelSelect)>*`
   was forcing the newly added SVG tail to position:relative. Thus the SVG
   became a >100%-wide flex item and squeezed captions off the right edge.
   Do NOT allow overlays to participate in the story panel's flex layout. */
#storyPanel.cinematic-v125 > svg#cinSpeechTail253{
 position:absolute!important;
 display:block!important;
 inset:0!important;
 top:0!important;left:0!important;right:0!important;bottom:0!important;
 width:100%!important;height:100%!important;
 flex:0 0 auto!important;
 min-width:0!important;max-width:none!important;
 margin:0!important;padding:0!important;
 z-index:4!important;
 overflow:visible!important;
 pointer-events:none!important;
 transform:none!important;
}
#storyPanel.cinematic-v125 > .story-copy{
 position:relative!important;
 z-index:5!important;
 flex:0 0 50.5%!important;
 width:50.5%!important;
 min-width:0!important;
 box-sizing:border-box!important;
 margin:0!important;
 overflow-x:visible!important;
}
#storyPanel.cinematic-v125 .story-copy > #storyTitle,
#storyPanel.cinematic-v125 .story-copy > #storyChapter{
 max-width:100%;overflow-wrap:normal;word-break:normal;
}
#storyPanel.cinematic-v125 .story-copy > .lumio-dialogue{
 width:calc(100% - 10px)!important;
 min-width:0!important;
 box-sizing:border-box!important;
 flex-shrink:1!important;
}
#storyPanel.cinematic-v125 .lumio-dialogue > #storyText{
 width:100%!important;
 max-width:100%!important;
 white-space:normal!important;
 overflow-wrap:break-word!important;
 word-break:normal!important;
 visibility:visible!important;
 opacity:1!important;
 display:block!important;
}
@media(max-width:740px) and (orientation:landscape){
 #storyPanel.cinematic-v125 > .story-copy{width:52%!important;flex-basis:52%!important}
}