/* Glossy Cartoon UI: rounded enamel, upper-left reflections and deep rims.
   Visual-only layer: viewport dimensions and input/scroll locks stay in style.css. */
:root{--jelly-top:#83ffff;--jelly-mid:#08dce9;--jelly-bottom:#079fc9;--jelly-rim:#17699d;--jelly-depth:#175b93;--jelly-glow:#c8ffff;--jelly-shadow:inset 2px 3px 4px #ffffffa8,inset -2px -5px 6px #073b6b65,0 3px 0 var(--jelly-depth),0 5px 7px #182e6738}
:is(.icon-button,.big-button,.level-button,.text-button,.settings-action,.settings-social,.settings-toggle,.lobby-play,.lobby-gear,.lobby-avatar,.close-button,.settings-close,.settings-action.exit-game){
  --jelly-shadow:inset 2px 3px 4px #ffffffa8,inset -2px -5px 6px #073b6b65,0 3px 0 var(--jelly-depth),0 5px 7px #182e6738;
  background:radial-gradient(ellipse at 22% 6%,#ffffff9c 0%,#ffffff00 34%),linear-gradient(180deg,var(--jelly-top) 0%,var(--jelly-mid) 42%,var(--jelly-bottom) 100%);
  border-color:var(--jelly-rim);box-shadow:var(--jelly-shadow);color:#fff;
  text-shadow:0 2px 1px #1745709c;transition:filter .12s,transform .12s,box-shadow .12s;
}
:is(.green,.level-button.current,.lobby-play,.settings-toggle,.lobby-avatar){--jelly-top:#d4ff66;--jelly-mid:#95e20e;--jelly-bottom:#5db900;--jelly-rim:#4b8b19;--jelly-depth:#326d26;--jelly-glow:#eeffad}
:is(.pale,.lobby-gear){--jelly-top:#f7feff;--jelly-mid:#afdeef;--jelly-bottom:#6ba7ce;--jelly-rim:#527fa7;--jelly-depth:#41648d}
:is(.close-button,.settings-close,.settings-action.exit-game){--jelly-top:#ffafb4;--jelly-mid:#ff344e;--jelly-bottom:#e60625;--jelly-rim:#a41d45;--jelly-depth:#761b45}
.settings-action.remove-ads{--jelly-top:#f2a0ff;--jelly-mid:#d53bff;--jelly-bottom:#a10be3;--jelly-rim:#7422aa;--jelly-depth:#501783}
.settings-toggle[aria-pressed=false]{--jelly-top:#c8d4f0;--jelly-mid:#8796bc;--jelly-bottom:#5e698c;--jelly-rim:#4b5074;--jelly-depth:#343953;background:radial-gradient(ellipse at 22% 6%,#ffffff85,transparent 34%),linear-gradient(var(--jelly-top),var(--jelly-bottom));box-shadow:var(--jelly-shadow)}
:is(.icon-button,.big-button,.text-button){position:relative}
:is(.icon-button,.big-button,.level-button,.text-button,.lobby-avatar,.lobby-gear,.close-button)::before{content:'';position:absolute;left:10%;top:8%;width:12%;min-width:5px;height:5%;min-height:2px;border-radius:100%;background:#fff;transform:rotate(-32deg);pointer-events:none;opacity:.9}
:is(.settings-action,.settings-social,.settings-toggle,.lobby-play)::before{width:16px;height:6px;box-shadow:0 0 4px #ffffff9c;pointer-events:none}
:is(.settings-action,.settings-social,.lobby-play)::after{content:'';position:absolute;inset:3px 7px auto;height:19%;border-top:2px solid #ffffff73;border-radius:50%;pointer-events:none}
:is(.icon-button,.big-button,.settings-action,.settings-toggle,.settings-close) :is(svg,img.button-icon){filter:drop-shadow(0 2px 1px #17547ba8)}
:is(.close-button,.settings-close){text-shadow:0 2px 1px #891739}
.text-button{border:1px solid var(--jelly-rim);border-radius:14px;padding:10px 18px;margin-top:13px;font-weight:900;box-shadow:var(--jelly-shadow)!important}
:is(.icon-button,.big-button,.level-button,.text-button,.settings-action,.settings-social,.settings-toggle,.lobby-play,.lobby-avatar,.lobby-gear,.close-button,.settings-close):active:not(:disabled){filter:brightness(.94);box-shadow:inset 1px 2px 4px #ffffff75,inset 0 -2px 4px #18396f66,0 1px 0 var(--jelly-depth)!important}
button:disabled{filter:saturate(.35);opacity:.58}
.level-button:disabled{background:linear-gradient(#b6b2e0,#777ba8);border-color:#656598;color:#e5e4f4;box-shadow:inset 0 2px 3px #ffffff57,0 3px 0 #434578}
.level-button:disabled :is(svg,img.button-icon){stroke:#e1e1f0;filter:drop-shadow(0 2px 0 #52547a)}
.level-button small{text-shadow:0 1px 1px #96551a}

/* The same sculpted purple frame for levels, results and information. */
.backdrop{background:#17113fb3}
.panel{background:radial-gradient(ellipse at 20% 0%,#a890ff85,transparent 45%),linear-gradient(#7555ff,#5934ef 65%,#4623c8);border-color:#493098;box-shadow:inset 3px 4px 5px #c4b1ffb3,inset -3px -5px 6px #32167fa8,0 6px 0 #311672,0 16px 35px #14103370;color:#fff}
.panel::before{content:'';position:absolute;top:10px;left:12px;width:12px;height:4px;border-radius:50%;transform:rotate(-35deg);background:white;pointer-events:none}
.panel h1,.settings-info h2{color:#fffde5;-webkit-text-stroke:2px #342264;paint-order:stroke fill;text-shadow:0 3px 0 #321e69}
.panel .eyebrow{color:#d8ceff;text-shadow:0 1px #3d257b}
.panel .subtext{color:#f1ecff}
.reward{background:linear-gradient(#fff9ce,#ffe273);border-color:#c68425;color:#99541b;box-shadow:inset 0 2px 2px white,inset 0 -3px 3px #df9e3377,0 3px 0 #9a592d}
.stars{text-shadow:0 2px 0 #fff393,0 4px 0 #c87919,0 6px 2px #372171}
.stars .empty{color:#a69acb;text-shadow:0 2px 0 #554479}
.settings-card{box-shadow:inset 5px 6px 7px #c3adffb0,inset -5px -7px 8px #3113abb3,0 6px 12px #100b4180}
.settings-title-plate{background:radial-gradient(ellipse at 35% 0%,#ad96ff99,transparent 55%),linear-gradient(#8667ff,#603cf5 70%,#4620c2)}
.settings-toggles{box-shadow:inset 0 4px 6px #20156970,0 2px 1px #a38bff77}
.social-logo{box-shadow:inset 0 3px 3px #ffffff75,inset 0 -3px 4px #1f275d70,0 2px 2px #195a8570}

/* Main-menu controls retain their exact size and positions. */
.lobby-counter,.coin-counter{background:radial-gradient(ellipse at 35% 0%,white,transparent 65%),linear-gradient(#fffefc,#eae5fa 60%,#bcb7db);box-shadow:inset 0 3px 3px white,inset 0 -3px 3px #77749b66,0 3px 0 #657493; border-color:#9295b4}
.lobby-plus{background:radial-gradient(ellipse at 25% 10%,#f4ffc3,transparent 45%),linear-gradient(#b7f55c,#60b90d);box-shadow:inset 0 2px 2px #eeffd1,inset 0 -3px 3px #3c7d29,0 2px 1px #365e5b}
.coin,.lobby-gold,.settings-coin{background:radial-gradient(ellipse at 28% 13%,#fffbd9,transparent 40%),linear-gradient(140deg,#fff270,#ffcc22 55%,#f39713);box-shadow:inset 0 2px 2px #fffaca,inset 0 -3px 3px #c77b1866,0 2px 0 #ba781d}
.lobby-nameplate{background:radial-gradient(ellipse at 35% 0%,#fffbc8a1,transparent 55%),linear-gradient(#ffeb78,#ffc333 55%,#e8971a);box-shadow:inset 0 3px 2px #fff6b5,inset 0 -4px 4px #ae611b55,0 4px 0 #a46928}
.lobby-nav{background:linear-gradient(#87e9ff,#36b6ea 28%,#187bbe);box-shadow:0 -2px 1px #5779a6,inset 0 4px 2px #d3fdff,inset 0 -5px 8px #145b974a}
.lobby-nav button{background:linear-gradient(#c6faff38,transparent 42%,#074f921f);box-shadow:inset 0 2px 1px #f0ffff4d}
.lobby-nav .active{background:linear-gradient(#9ff0ff,#36b7e8 42%,#2785ca);box-shadow:inset 2px 0 3px #cdffff73,inset -2px 0 3px #07519166}
.lobby-nav button>:is(svg,img.button-icon){filter:drop-shadow(0 1px 0 #fff6) drop-shadow(0 3px 1px #214c89)}
.lobby-nav .nav-heart,.lobby-heart :is(svg,img.button-icon){fill:url(#gloss-coral)}
.lobby-nav .nav-shop{fill:url(#gloss-coral)}
.lobby-nav .nav-shop circle,.lobby-nav .nav-collection path+path{fill:url(#gloss-gold)}
.lobby-nav .nav-cards{fill:url(#gloss-blue)}
.lobby-nav .nav-collection{fill:url(#gloss-wood)}
.lobby-avatar :is(svg,img.button-icon){stroke:url(#gloss-gold)}
.lobby-gear :is(svg,img.button-icon){fill:url(#gloss-silver)}
.nav-home-medallion :is(svg,img.button-icon){fill:url(#gloss-lime)}
.lobby-noads span,.ads-icon{background:radial-gradient(ellipse at 30% 10%,#b8dfff,transparent 46%),linear-gradient(#588fea,#214297);box-shadow:inset 0 3px 3px #e5f3ff,inset 0 -4px 5px #16225c,0 3px 2px #295a94}

/* In-game HUD and loading use the same luminous enamel finish. */
#game{background:radial-gradient(ellipse at 25% 10%,#edffff,#caeef8 53%,#9fd0ef)}
#level-number{background:radial-gradient(ellipse at 28% 5%,#e5ffffa8,transparent 45%),linear-gradient(#61efff,#0bcce5 50%,#058fbe);border:1px solid #2084ab;box-shadow:inset 0 2px 2px #ceffff,inset 0 -3px 3px #07588975,0 3px 0 #22799e;text-shadow:0 2px 0 #176c8b}
.tip{background:linear-gradient(#805cf4,#6340d8);box-shadow:inset 0 2px 1px #b198f2,inset 0 -2px 3px #43239680,0 2px 0 #432795;color:#fff;text-shadow:0 1px 1px #36206480}
#time-track{background:#679fb8;box-shadow:inset 0 1px 2px #285c78,0 1px 0 #fff9}
#time-fill{box-shadow:inset 0 1px 1px #d9ffff,inset 0 -1px 1px #166186}

#toast{background:linear-gradient(#8061f3,#5433b6);border:1px solid #372778;box-shadow:inset 0 2px 2px #c5b4ff,0 3px 0 #39257b}
.loading{background:radial-gradient(ellipse at 30% 20%,#caffff,#69d6f5 55%,#479ce5)}
.loading-track{background:#407bbe;border-color:#e5fbff;box-shadow:inset 0 2px 3px #243e77,0 3px 0 #346493}
#loading-fill{background:linear-gradient(#e4ff96,#a2e723 50%,#70bf15);box-shadow:inset 0 2px 1px #f5ffcf,inset 0 -2px 1px #4d8e27}
#loading-text{color:#245a83;text-shadow:0 1px #d4faff}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}

/* Gameplay controls: the same candy finish as the reference settings buttons. */
#hud .icon-button{border:2px solid #126c98;background:radial-gradient(ellipse at 22% 8%,#efffff 0%,#c5ffff95 14%,transparent 37%),linear-gradient(#59f6ff,#06d5ed 45%,#0696c5);box-shadow:inset 2px 3px 3px #dfffffd9,inset -2px -4px 4px #07577ba3,0 4px 0 #155880,0 6px 6px #245d8442}
#hud .icon-button:before{width:9px;height:3px;left:5px;top:5px;box-shadow:0 0 2px #fff}
#hud .icon-button :is(svg,img.button-icon){stroke-width:3.5;filter:drop-shadow(0 2px 1px #176480)}
#hud .icon-button:disabled{background:linear-gradient(#e0eff8,#9ebcce);border-color:#7999ae;box-shadow:inset 1px 2px 2px #fff,0 3px 0 #7894aa;opacity:.65}
#timer-pill{padding:3px 8px;border-radius:13px;background:linear-gradient(#faffff,#c9f0fa);box-shadow:inset 0 2px 1px #fff,0 2px 0 #7eb2cb;color:#235577}
#timer-pill.urgent{color:#da3153}
#rescue-count{color:#397493;text-shadow:0 1px #f5ffff}
#rescue-count b{color:#235577}
#level-number{border-radius:14px;box-shadow:inset 2px 3px 3px #e2ffff,inset -2px -5px 4px #006e9a9c,0 4px 0 #196289,0 6px 7px #265b7a30}

/* Each navigation button uses its own rendered WEBP, including the glossy base. */
.lobby-nav{height:112px;border-top:4px solid #d7faff;background:linear-gradient(#68d8f7,#329bd6);box-shadow:0 -2px 1px #578db6,inset 0 2px 2px #efffff;gap:2px;padding:0 3px}
.lobby-nav button,.lobby-nav button.active{padding:0 0 5px;gap:0;border:0;background:none;box-shadow:none;justify-content:flex-end;overflow:visible}
.lobby-nav .nav-button-art{display:block;width:78px;height:78px;flex:none;object-fit:contain;pointer-events:none;user-select:none}
.lobby-nav .active .nav-button-art{width:94px;height:94px;margin-top:-16px}
.lobby-nav button>span:last-child{position:relative;font-size:13px;line-height:20px;color:#fff;font-weight:900;text-shadow:0 2px 1px #184974}
.lobby-nav .active>span:last-child{font-size:19px;line-height:20px}
.lobby-nav button:active:not(:disabled){box-shadow:none!important;transform:translateY(2px);filter:brightness(.92)}

/* A bounded selector for the complete campaign: no scrolling at any page count. */
.levels-panel{scale:var(--levels-scale,1);transform-origin:center}
.level-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.level-pagination label{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:800}
.level-pagination input{width:62px;min-width:0;padding:6px 2px;text-align:center;font-family:inherit;font-size:16px;font-weight:800;color:#2b5472;background:#f0fcff;border:2px solid #a8d8ee;border-radius:9px;appearance:textfield}
.level-pagination input::-webkit-inner-spin-button,.level-pagination input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.level-pagination button{font-size:28px}
#level-grid{grid-template-rows:repeat(3,1fr);min-height:210px}
#level-grid .level-button{font-size:16px;min-height:55px}

/* Use the real bundled Bold face consistently, including form controls. */
body,body *{font-family:Fredoka,ui-rounded,system-ui,-apple-system,sans-serif!important;font-weight:700!important}

/* No white shine strokes or spots on controls and popup frames. */
button::before,.panel::before,.settings-card::before{content:none!important}
:is(.settings-action,.settings-social,.lobby-play)::after{content:none!important}

/* Full-lives popup: shared purple title, numbered heart icons and green action. */
#lives-screen{z-index:32;padding:0;background:#081b43d9;overflow:hidden}
.lives-card{position:absolute;left:50%;top:50%;width:660px;height:610px;transform:translate(-50%,-50%) scale(var(--lives-scale,.5));transform-origin:center;border:5px solid #4930c0;border-radius:40px;background:linear-gradient(135deg,#765bff,#5634ed);box-shadow:inset 4px 5px 7px #bea9ff99,inset -5px -6px 7px #3113ab99,0 7px 12px #07143870}
.lives-body{position:absolute;inset:70px 9px 10px;border-radius:32px;background:linear-gradient(#f5f2fb,#dedbeb 45%,#d4d0e7);box-shadow:inset 0 5px 5px #fff,inset -3px -3px 5px #aea7cc;display:flex;flex-direction:column;align-items:center;padding:138px 23px 20px}
.lives-hearts{display:flex;justify-content:center;gap:8px;width:100%;height:99px;flex:none}
.life-heart{position:relative;flex:1;min-width:0;height:99px;display:grid;place-items:center}
.life-heart :is(svg,img.button-icon){position:absolute;inset:0;width:100%;height:100%;fill:url(#gloss-coral);stroke:#970f35;stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 3px 1px #75476866)}
.life-heart b{position:relative;top:-1px;font-size:48px;line-height:1;color:#fff;-webkit-text-stroke:5px #681829;paint-order:stroke fill;text-shadow:0 3px 0 #6e172e}
#lives-message{margin:44px 0 48px;font-size:42px;line-height:1.15;color:#4b537c;text-align:center;white-space:nowrap}
#lives-ok{flex:none;width:360px;min-height:116px;margin:0;border-radius:30px;font-size:48px;letter-spacing:0;-webkit-text-stroke:4px #356518;paint-order:stroke fill;text-shadow:0 3px 0 #396921}

/* Center counter symbols independently of the font's baseline and advance. */
.lobby-heart{width:48px;height:48px}
.lobby-heart b{inset:0;display:grid;place-items:center;line-height:1;transform:translateY(-1px)}
.lobby-plus{padding:0;line-height:1}
.lobby-plus :is(svg,img.button-icon){display:block;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:4.8;stroke-linecap:round;filter:none}
.lobby-gold{display:grid;place-items:center;line-height:1}

/* Show loading copy only after the real Fredoka face is ready. */
#loading .brand,#loading-text{visibility:hidden}
#loading.font-ready .brand,#loading.font-ready #loading-text{visibility:visible}
#loading .brand,#loading .brand span,#loading-text{font-family:Fredoka,sans-serif!important;font-weight:700!important}
#loading .brand{line-height:1}
#loading .brand span{letter-spacing:0;-webkit-text-stroke:1.5px #fffde5;text-shadow:0 3px 1px #246779}

#lives-message{margin:35px 0 8px}
#lives-refill{height:40px;margin:0 0 25px;font-size:32px;line-height:40px;color:#4b537c;text-align:center;font-variant-numeric:tabular-nums}

#coins-watch-ad{position:relative;display:block;width:230px;max-width:100%;height:79px;min-height:0;margin:24px auto 8px;padding:0;overflow:hidden;border:1px solid #427630;border-radius:21px;background:#9cd63c;box-shadow:0 3px 3px #203d7580}
#coins-watch-ad::before{display:none}
#coins-watch-ad img{position:absolute;left:-4.542%;top:-18.11%;width:109.083%;height:133.842%;max-width:none;pointer-events:none}
#coins-watch-ad b{position:absolute;inset:0 12.5% 0 60.417%;display:flex;align-items:center;justify-content:center;font-size:36px;line-height:1;letter-spacing:0;color:white;-webkit-text-stroke:3px #35611f;paint-order:stroke fill;text-shadow:0 2px 1px #295325;pointer-events:none}
#lobby-info:has(#coins-watch-ad:not(.hidden)) #lobby-info-ok{display:none}
#coins-ad-feedback{font-size:14px;line-height:1.3;color:white;margin:8px 0}#coins-ad-feedback:empty{display:none}