: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}}