:root{--card:rgba(255,255,255,0.08);--card2:rgba(255,255,255,0.12);--text:rgba(255,255,255,0.92);--muted:rgba(255,255,255,0.74);--accent:#38bdf8;--radius:18px;--stroke:#2b1b73;--playTop:#78f669;--playBottom:#24ba54;--levelsTop:#78e8ff;--levelsBottom:#26a6ed;--app-height:100vh;--app-width:100vw;}
*{box-sizing:border-box;}
html,body{width:100%;height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 600px at 70% 0%,#1e293b,#0b1020);color:var(--text);overflow:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:auto;}
body{position:fixed;inset:0;}
body.appBooting #app{opacity:0;pointer-events:none;}
button{font:inherit;cursor:pointer;}
.hidden{display:none!important;}
#app,#app *{-webkit-tap-highlight-color:transparent;}
#app{width:100%;height:var(--app-height);display:flex;align-items:stretch;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));position:relative;min-height:0;min-width:0;overflow:hidden;}
#app[data-active-screen="levels"]{align-items:stretch;overflow:hidden;}
.screen{width:min(1100px,100%);height:100%;max-height:100%;min-height:0;min-width:0;background:var(--card);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,0.35);overflow:hidden;}
.fitStageHost{position:relative;z-index:2;width:100%;height:100%;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;padding:0;}
.fitStage{position:absolute;left:0;top:0;min-width:0;min-height:0;transform-origin:top left;transform:translate3d(var(--fit-stage-x,0px),var(--fit-stage-y,0px),0) scale(var(--fit-stage-scale,1));will-change:transform;}
.menuStage{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:block;overflow:hidden;}
.levelsStage{width:1040px;height:760px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:20px;}
.gameStage{width:1040px;height:760px;display:flex;min-width:0;min-height:0;}
.rewardStage{width:640px;height:760px;display:flex;align-items:center;justify-content:center;padding:0;}

#app img,#app canvas,#app button,#app [role="button"],#app .imgWrap{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
#app img{-webkit-user-drag:none;user-drag:none;pointer-events:none;}

[data-screen="menu"]{position:relative;isolation:isolate;height:100%;min-height:0;display:block;padding:0;background:
  radial-gradient(950px 520px at 18% 16%,rgba(255,255,255,.36),transparent 70%),
  radial-gradient(760px 420px at 86% 12%,rgba(125,211,252,.42),transparent 68%),
  radial-gradient(760px 520px at 80% 84%,rgba(45,212,191,.26),transparent 72%),
  radial-gradient(520px 320px at 10% 84%,rgba(250,204,21,.2),transparent 72%),
  linear-gradient(160deg,#7359ff 0%,#6684ff 32%,#57b6ff 67%,#60d9cb 100%);
}
.menuScene{position:absolute;inset:0;pointer-events:none;}
.menuScene::before,.menuScene::after{content:"";position:absolute;border-radius:999px;}
.menuScene::before{width:280px;height:280px;left:2%;bottom:8%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.45),rgba(255,255,255,0));}
.menuScene::after{width:210px;height:210px;right:7%;top:7%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.32),rgba(255,255,255,0));}
.menuFloat{position:absolute;border-radius:20px;opacity:.34;filter:drop-shadow(0 10px 16px rgba(7,21,66,.25));}
.menuFloat.one{width:66px;height:66px;left:14%;top:24%;transform:rotate(18deg);background:linear-gradient(135deg,#fef9c3,#f59e0b);}
.menuFloat.two{width:56px;height:56px;right:11%;top:26%;border-radius:50%;background:linear-gradient(135deg,#fca5a5,#fb7185);}
.menuFloat.three{width:74px;height:46px;left:11%;bottom:26%;transform:rotate(-14deg);background:linear-gradient(135deg,#a7f3d0,#34d399);}
.menuFloat.four{width:48px;height:48px;right:16%;bottom:24%;transform:rotate(14deg);background:linear-gradient(135deg,#bfdbfe,#818cf8);}

.menuContent{position:absolute;left:0;top:0;z-index:2;width:500px;max-width:none;max-height:none;min-width:0;display:grid;grid-auto-rows:max-content;align-content:start;justify-items:center;gap:16px;text-align:center;overflow:visible;padding:0 0 34px;margin:0;transform-origin:top left;transform:translate3d(var(--menu-content-x,0px),var(--menu-content-y,0px),0) scale(var(--menu-content-scale,1));will-change:transform;}
.logoBlock{width:100%;display:grid;grid-auto-rows:max-content;gap:10px;justify-items:center;}
.menuEyebrow{margin:0;padding:8px 16px;border-radius:999px;background:rgba(24,44,126,.26);border:2px solid rgba(255,255,255,.42);font-weight:800;letter-spacing:.3px;font-size:12px;box-shadow:0 8px 16px rgba(18,35,112,.24);}
.menuTitle{margin:0;max-width:480px;font-size:64px;font-weight:1000;line-height:.95;color:#f8fbff;-webkit-text-stroke:3px var(--stroke);text-shadow:0 7px 0 rgba(33,28,103,.5),0 16px 26px rgba(7,21,66,.4);text-wrap:balance;}

.menuMeta{margin:2px 0 0;font-size:12px;font-weight:700;color:rgba(255,255,255,.78);letter-spacing:.2px;}
.menuSubtitle{margin:0;font-size:15px;font-weight:700;color:rgba(247,251,255,.96);text-shadow:0 2px 8px rgba(22,34,95,.38);}

.heroCard{position:relative;width:500px;max-width:none;margin:0 auto;padding:16px;border-radius:32px;background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(228,242,255,.94));box-shadow:0 18px 34px rgba(7,21,66,.35),inset 0 0 0 3px rgba(255,255,255,.72);display:flex;justify-content:center;}
.heroCard.hasCustomHeroCard{width:360px;max-width:none;padding:18px 18px 20px;background:transparent;box-shadow:none;border-radius:0;}
.heroFrame{display:grid;grid-template-columns:1fr 10px 1fr;gap:12px;align-items:stretch;width:100%;background:linear-gradient(180deg,#71b4ff,#4b87ff);padding:12px;border-radius:20px;box-shadow:inset 0 -4px 0 rgba(16,54,143,.34);position:relative;overflow:hidden;}
.heroCustomImage{position:absolute;inset:12px;border-radius:14px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;object-position:center center;z-index:2;padding:8px;background:radial-gradient(circle at top,rgba(255,255,255,.26),rgba(255,255,255,.08) 42%,rgba(5,14,38,.18) 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);}
.heroDivider{border-radius:99px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.8)0 6px,rgba(255,255,255,.15)6px 12px);}
.heroImage{position:relative;min-height:150px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#7dd3fc,#bae6fd 52%,#bbf7d0);}
.heroSun,.heroHill,.heroTree{position:absolute;display:block;}
.heroSun{width:30px;height:30px;border-radius:50%;right:20px;top:14px;background:#fde047;box-shadow:0 0 0 8px rgba(253,224,71,.35);}
.heroSun.shifted{right:28px;top:20px;}
.heroHill{left:-5%;right:-5%;height:52%;bottom:-24%;border-radius:50%;background:#22c55e;}
.heroTree{width:30px;height:56px;left:38%;bottom:28%;background:linear-gradient(180deg,#16a34a,#15803d);clip-path:polygon(50% 0,100% 45%,79% 45%,100% 100%,0 100%,21% 45%,0 45%);}
.heroTree.alt{left:48%;height:62px;}
.heroHintBubble{position:absolute;right:-6px;bottom:-10px;padding:8px 12px;border-radius:999px;background:#f43f5e;color:#fff;font-size:13px;font-weight:900;border:2px solid rgba(255,255,255,.8);box-shadow:0 8px 16px rgba(190,24,93,.4);}

.menuActions{width:420px;max-width:none;display:flex;flex-direction:column;gap:10px;margin:4px auto 0;}
.btn{border:none;border-radius:18px;padding:14px 14px;background:rgba(56,189,248,0.18);color:var(--text);font-weight:900;transition:transform .08s ease,background .12s ease,box-shadow .12s ease,filter .12s ease;outline:none;}
.btn:hover{background:rgba(56,189,248,0.25);transform:translateY(-2px);filter:brightness(1.04);}
.btn:active{transform:translateY(2px) scale(.985);}
.btn.secondary{background:rgba(255,255,255,0.10);}
.btn.secondary:hover{background:rgba(255,255,255,0.14);}
.btn.tertiary{background:rgba(31,41,83,.16);color:#dbe7ff;border:1px solid rgba(188,208,255,.35);}
.btn.tertiary:hover{background:rgba(45,62,120,.24);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btnCta{font-size:32px;padding:18px 16px;border-radius:24px;background:linear-gradient(180deg,var(--playTop),var(--playBottom));color:#fff;-webkit-text-stroke:1.2px rgba(10,95,46,.9);text-shadow:0 2px 0 rgba(8,91,42,.45);box-shadow:0 10px 0 #14883c,0 20px 24px rgba(22,91,47,.34),inset 0 3px 0 rgba(255,255,255,.55);border:3px solid var(--stroke);}
.btnCta:hover{background:linear-gradient(180deg,#8eff85,#26c45a);box-shadow:0 8px 0 #14883c,0 18px 24px rgba(22,91,47,.34),inset 0 3px 0 rgba(255,255,255,.62);}
.btnSecondaryLarge{font-size:25px;padding:16px 14px;border-radius:22px;background:linear-gradient(180deg,var(--levelsTop),var(--levelsBottom));color:#ffffff;-webkit-text-stroke:1px rgba(7,71,110,.9);text-shadow:0 2px 0 rgba(8,73,124,.45);box-shadow:0 8px 0 #146fa5,0 16px 24px rgba(11,60,92,.30),inset 0 3px 0 rgba(255,255,255,.58);border:3px solid var(--stroke);}
.btnSecondaryLarge:hover{background:linear-gradient(180deg,#98f4ff,#37b6f3);box-shadow:0 6px 0 #146fa5,0 14px 22px rgba(11,60,92,.3),inset 0 3px 0 rgba(255,255,255,.64);}

.gearBtn{position:absolute;left:16px;top:16px;z-index:3;width:56px;height:56px;border:none;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(224,238,255,.2));backdrop-filter:blur(5px);display:grid;place-items:center;border:3px solid rgba(43,27,115,.75);box-shadow:0 10px 20px rgba(7,21,66,.35);}
.gearBtn svg{width:28px;height:28px;fill:#fff;filter:drop-shadow(0 1px 0 rgba(42,35,108,.7));}
.gearBtn:hover{transform:translateY(-2px) rotate(12deg);background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(224,238,255,.32));} 
.gearBtn:active{transform:translateY(1px) scale(.97);}
.profileBtn{left:auto;right:16px;}
.profileBtn:hover{transform:translateY(-2px) scale(1.02);}
.profileBtn svg{width:26px;height:26px;}

.header{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(0,0,0,0.25);border-bottom:1px solid rgba(255,255,255,0.12);}
.brand{font-weight:900;display:flex;align-items:center;gap:10px;}
.badge{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(56,189,248,0.20);}
.meta{display:flex;gap:12px;color:var(--muted);font-size:14px;flex-wrap:wrap;}
.content{padding:18px;}
.card{background:var(--card2);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);padding:16px;}
.small{font-size:13px;color:var(--muted);}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.toggle{display:flex;gap:10px;align-items:center;}
.pillRow{display:flex;gap:10px;flex-wrap:wrap;}
.pill{border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.06);color:var(--text);padding:10px 12px;border-radius:999px;font-weight:900;}
.pill:hover{background:rgba(255,255,255,0.16);transform:translateY(-1px);}
.pill:active{transform:translateY(1px) scale(.98);}
.pill.active{border-color:rgba(56,189,248,0.75);box-shadow:0 0 0 6px rgba(56,189,248,0.14);}

.modalOverlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;}
.modalBackdrop{position:absolute;inset:0;background:rgba(18,12,56,.52);backdrop-filter:blur(4px);}
.modalCard{--fit-base-width:460px;width:var(--fit-base-width);max-width:none;max-height:none;border-radius:24px;padding:20px;background:linear-gradient(180deg,#fff8f0,#f0f6ff);color:#1c2a52;border:3px solid rgba(80,93,170,.35);box-shadow:0 22px 40px rgba(0,0,0,.36);position:relative;z-index:1;overflow:visible;}
.modalHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.modalHeader h2{margin:0;font-size:28px;color:#304b9d;}
.modalBody{display:flex;flex-direction:column;gap:14px;}
.modalClose{width:34px;height:34px;border:none;border-radius:50%;background:rgba(83,112,212,.16);color:#2e4896;font-size:24px;line-height:1;flex:0 0 auto;}
.modalClose:hover{background:rgba(83,112,212,.28);}
.modalClose:active{transform:scale(.94);}
.btnCol{display:flex;flex-direction:column;gap:10px;}
.modalActions{display:flex;flex-direction:column;gap:10px;}
.modalActions .btn{width:100%;}

.settingsCard{--fit-base-width:400px;width:var(--fit-base-width);padding:0;background:#f8fbff;color:#10204f;border:0;box-shadow:0 18px 38px rgba(10,28,88,.32);overflow:hidden;}
.settingsHeader{margin:0;padding:14px 16px;background:linear-gradient(180deg,#5d7dff,#4363e7);}
.settingsHeader h2{color:#fff;font-size:28px;line-height:1;text-shadow:none;}
.settingsCard .modalClose{width:40px;height:40px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.54);color:#fff;font-size:30px;box-shadow:none;}
.settingsCard .modalClose:hover{background:rgba(255,255,255,.32);}
.settingsBody{gap:14px;padding:16px 16px 18px;}
.settingsSoundRow,.settingsLanguageRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,#ffffff,#edf4ff);border:1px solid rgba(91,121,227,.28);}
.settingsSoundRow label,.settingsLanguageRow span{font-size:20px;font-weight:900;color:#16327b;}
.settingsCard input[type="checkbox"]{width:26px;height:26px;accent-color:#4a67ea;cursor:pointer;}
.languageSwitch{display:inline-grid;grid-template-columns:repeat(2,minmax(60px,1fr));padding:4px;border-radius:999px;background:linear-gradient(180deg,#d8e6ff,#eef4ff);border:1px solid rgba(74,103,234,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.78);}
.languageSwitchBtn{border:none;min-width:60px;padding:10px 14px;border-radius:999px;background:transparent;color:#3354aa;font-size:15px;font-weight:1000;letter-spacing:.04em;transition:background .14s ease,color .14s ease,transform .08s ease,box-shadow .14s ease;}
.languageSwitchBtn:hover{background:rgba(76,106,229,.12);transform:none;filter:none;}
.languageSwitchBtn.is-active{background:linear-gradient(180deg,#637fff,#4065f1);color:#fff;box-shadow:0 8px 14px rgba(64,101,241,.24), inset 0 1px 0 rgba(255,255,255,.35);}
.languageSwitchBtn:active{transform:scale(.98);}
.settingsActions{margin-top:4px;gap:12px;}
.settingsActions .btn{padding:14px 16px;border-radius:16px;font-size:20px;font-weight:900;border:none;box-shadow:0 8px 16px rgba(22,53,143,.22);}
.settingsActions .btn.secondary{background:linear-gradient(180deg,#77deff,#43befe);color:#06306a;}
.settingsActions .btn.secondary:hover{filter:brightness(1.04);}
.settingsActions #btnSettingsRestart{background:linear-gradient(180deg,#66de7e,#38c85d);color:#083e1a;}

.settingsActions #btnSettingsRestart:hover{filter:brightness(1.04);}

.profileCard{--fit-base-width:560px;width:var(--fit-base-width);padding:0;border:0;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#fdfbff,#eef4ff);box-shadow:0 20px 42px rgba(14,34,102,.34);}
.profileHeader{margin:0;padding:16px 18px;background:linear-gradient(160deg,#5b7bff,#3ab7ff);}
.profileHeader h2{color:#fff;font-size:30px;text-shadow:0 2px 0 rgba(19,45,130,.35);}
.profileHeader .modalClose{width:40px;height:40px;font-size:28px;background:rgba(255,255,255,.24);border:2px solid rgba(255,255,255,.52);color:#fff;}
.profileBody{padding:16px;gap:14px;}
.profileHero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(180px,220px);gap:14px;align-items:center;padding:14px;border-radius:20px;background:linear-gradient(150deg,#ffffff,#e8f1ff);border:1px solid rgba(80,119,223,.24);}
.profileAvatar{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;font-size:40px;background:linear-gradient(150deg,#fef08a,#f59e0b);box-shadow:0 10px 20px rgba(217,119,6,.25),inset 0 2px 0 rgba(255,255,255,.6);}
.profileMainLabel{margin:0;font-size:13px;font-weight:900;color:#4d67a8;letter-spacing:.04em;text-transform:uppercase;}
.profilePointsValue{font-size:44px;line-height:1;font-weight:1000;color:#164cb6;text-shadow:0 2px 0 rgba(255,255,255,.7);}
.profileLeaderboardCard{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:132px;padding:16px 18px;border-radius:20px;background:linear-gradient(155deg,#4f76ff,#3cc0ff);color:#fff;box-shadow:0 16px 28px rgba(29,78,216,.24), inset 0 1px 0 rgba(255,255,255,.32);}
.profileLeaderboardLabel{margin:0;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(236,245,255,.92);}
.profileLeaderboardValue{font-size:42px;line-height:1;font-weight:1000;color:#fff;text-shadow:0 4px 16px rgba(16,35,111,.34);}
.profileRankHint{margin:0;color:rgba(240,247,255,.9);}
.profileProgressWrap{padding:12px;border-radius:16px;background:linear-gradient(180deg,#fff,#eef5ff);border:1px solid rgba(98,122,201,.24);}
.profileProgressHead{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:800;color:#33539b;margin-bottom:8px;}
.profileProgressBar{height:12px;border-radius:999px;background:rgba(59,130,246,.18);overflow:hidden;}
.profileProgressBar span{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .2s ease;}
.profileStatsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.profileStatCard{padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,#ffffff,#edf4ff);border:1px solid rgba(96,123,207,.24);display:flex;flex-direction:column;gap:6px;}
.profileStatCard span{font-size:12px;font-weight:800;color:#5b73ae;}
.profileStatCard strong{font-size:24px;line-height:1;color:#1d3f8f;}

@media (max-width:640px){
  .profileCard{width:min(380px,100%);}
  .profileHeader h2{font-size:26px;}
  .profileHero{grid-template-columns:1fr;text-align:center;}
  .profileAvatar{margin:0 auto;}
  .profileLeaderboardCard{min-height:0;}
  .profileStatsGrid{grid-template-columns:1fr;}
}

@media (max-width:600px){
  .settingsCard{width:min(360px,100%);}
  .settingsHeader{padding:12px 14px;}
  .settingsHeader h2{font-size:24px;}
  .settingsCard .modalClose{width:36px;height:36px;font-size:26px;}
  .settingsBody{padding:13px 14px 16px;gap:12px;}
  .settingsSoundRow,.settingsLanguageRow{padding:10px 12px;}
  .settingsSoundRow label,.settingsLanguageRow span{font-size:18px;}
  .languageSwitchBtn{min-width:54px;padding:9px 12px;font-size:14px;}
  .settingsActions{margin-top:3px;gap:11px;}
  .settingsActions .btn{padding:13px 14px;font-size:18px;}
}

.gameWrap{display:flex;flex-direction:column;gap:14px;min-height:0;}
.gameGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;min-height:0;min-width:0;height:100%;align-items:stretch;}
.imgWrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,0.25);background:rgba(9,15,43,0.5);touch-action:manipulation;box-shadow:inset 0 0 0 3px rgba(255,255,255,0.08),0 12px 24px rgba(8,13,38,0.35);}
.imgWrap img{width:100%;height:100%;display:block;object-fit:contain;object-position:center center;user-select:none;-webkit-user-drag:none;}
.imgWrap canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
[data-screen="levels"]{position:relative;isolation:isolate;display:block;align-self:stretch;min-height:0;height:100%;max-height:none;overflow:hidden;padding:0;background:
  radial-gradient(980px 420px at 50% -8%,rgba(255,255,255,.3),transparent 72%),
  radial-gradient(760px 380px at 96% 14%,rgba(129,140,248,.28),transparent 74%),
  radial-gradient(700px 340px at 6% 92%,rgba(45,212,191,.24),transparent 74%),
  linear-gradient(155deg,#352c85 0%,#2d3b9a 34%,#2d63bb 66%,#2c8bc9 100%);
}
[data-screen="levels"]::before,[data-screen="levels"]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;}
[data-screen="levels"]::before{background:repeating-conic-gradient(from -20deg at 50% 0,rgba(255,255,255,.14) 0deg 7deg,rgba(255,255,255,0) 7deg 18deg);opacity:.24;mix-blend-mode:screen;}
[data-screen="levels"]::after{background:radial-gradient(560px 220px at 50% 8%,rgba(255,255,255,.24),transparent 80%);opacity:.45;}
.levelsScene{position:absolute;inset:0;pointer-events:none;z-index:0;}
.levelsBubble{position:absolute;border-radius:50%;filter:blur(1px);opacity:.46;}
.levelsBubble.one{width:250px;height:250px;left:-78px;bottom:76px;background:radial-gradient(circle at 35% 35%,rgba(254,240,138,.8),transparent 72%);}
.levelsBubble.two{width:190px;height:190px;right:1%;top:9%;background:radial-gradient(circle at 35% 35%,rgba(244,114,182,.66),transparent 72%);}
.levelsBubble.three{width:220px;height:220px;right:-74px;bottom:4%;background:radial-gradient(circle at 35% 35%,rgba(165,180,252,.7),transparent 72%);}
.levelsBubble.four{width:160px;height:160px;left:14%;top:20%;background:radial-gradient(circle at 35% 35%,rgba(253,186,116,.56),transparent 72%);}
.levelsTopBar,.levelsGridWrap{position:relative;z-index:1;}
.levelsTopBar{flex:0 0 auto;flex-shrink:0;}
.levelsTopBar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;background:linear-gradient(180deg,rgba(17,37,119,.56),rgba(12,26,89,.44));backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.28);box-shadow:0 16px 30px rgba(8,16,56,.28);}
.levelBackBtn{width:48px;height:48px;border:none;border-radius:16px;background:linear-gradient(180deg,#ffffff,#dbeafe);color:#1f3f90;font-size:24px;font-weight:900;border:2px solid rgba(255,255,255,.62);box-shadow:0 8px 14px rgba(8,26,74,.2);transition:transform .16s ease,filter .16s ease;}
.levelBackBtn:hover{filter:brightness(1.04);transform:translateY(-1px);}
.levelBackBtn:active{transform:translateY(1px) scale(.98);}
.levelsTitleWrap{display:flex;flex-direction:column;gap:2px;}
.levelsEyebrow{margin:0;color:rgba(211,230,255,.86);font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;}
.levelsTitle{margin:0;font-size:34px;line-height:1;color:#ffffff;text-shadow:0 4px 12px rgba(6,14,52,.45);}
.levelsSubtitle{margin:0;color:rgba(232,244,255,.94);font-size:14px;font-weight:800;letter-spacing:.25px;}
.levelsMeta{justify-self:end;padding:10px 14px;border-radius:14px;background:rgba(13,31,98,.3);border:1px solid rgba(255,255,255,.3);color:rgba(248,252,255,.98);line-height:1.3;display:flex;flex-direction:column;gap:4px;min-width:190px;}
.levelsMetaMain{font-weight:900;font-size:13px;}
.levelsMetaSub{font-size:11px;opacity:.86;}
.levelsGridWrap{margin-top:12px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px;border-radius:24px;background:linear-gradient(180deg,rgba(13,27,87,.44),rgba(12,23,73,.35));border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 28px rgba(8,17,58,.24);}
.levelsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;}
.levelBtn{position:relative;border:none;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(237,246,255,.92));padding:0;color:#1f2f65;font-weight:950;display:flex;flex-direction:column;overflow:hidden;text-align:left;box-shadow:0 14px 28px rgba(7,21,66,.28),inset 0 0 0 2px rgba(255,255,255,.62);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;cursor:pointer;}
.levelBtn.is-unlocked:hover,.levelBtn.is-completed:hover,.levelBtn.is-ad-unlocked:hover{transform:translateY(-4px);filter:brightness(1.04);box-shadow:0 20px 34px rgba(7,21,66,.34),inset 0 0 0 2px rgba(255,255,255,.7);}
.levelBtn.is-unlocked:active,.levelBtn.is-completed:active,.levelBtn.is-ad-unlocked:active{transform:translateY(1px) scale(.988);}
.levelBtn.is-locked{cursor:default;}
.levelPreview{position:relative;aspect-ratio:4/3;border-radius:18px 18px 0 0;overflow:hidden;background:linear-gradient(150deg,#bfdbfe,#e2e8f0);}
.levelPreview::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 45%);z-index:1;pointer-events:none;}
.levelPreview img{width:100%;height:100%;object-fit:cover;display:block;}
.levelPlaceholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:rgba(29,78,216,.45);background:radial-gradient(140px 80px at 68% 24%,rgba(255,255,255,.7),rgba(255,255,255,0)),linear-gradient(160deg,rgba(219,234,254,.94),rgba(191,219,254,.82));}
.placeholderIcon{font-size:34px;}
.placeholderLabel{font-size:12px;letter-spacing:.4px;font-weight:800;text-transform:uppercase;opacity:.72;}
.levelBody{display:flex;align-items:center;justify-content:space-between;padding:12px;gap:10px;}
.lvlNum{font-size:20px;font-weight:1000;color:#234493;}
.lvlStatus{font-size:12px;padding:6px 10px;border-radius:999px;font-weight:900;letter-spacing:.2px;}
.levelBtn.is-unlocked .lvlStatus{background:rgba(59,130,246,.14);color:#1e40af;}
.levelBtn.is-completed .lvlStatus{background:rgba(34,197,94,.16);color:#166534;}
.levelBtn.is-locked{background:linear-gradient(180deg,rgba(199,210,254,.78),rgba(191,219,254,.68));box-shadow:0 10px 20px rgba(30,41,59,.2),inset 0 0 0 2px rgba(255,255,255,.45);}
.levelBtn.is-locked .levelPreview::after{content:"";position:absolute;inset:0;background:rgba(15,23,42,.56);z-index:1;}
.levelBtn.is-locked .lvlNum,.levelBtn.is-locked .lvlStatus{color:#334155;}
.previewStatusOverlay{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 10px;border-radius:10px;font-size:11px;font-weight:900;letter-spacing:.2px;text-transform:uppercase;backdrop-filter:blur(2px);z-index:2;text-align:left;}
.previewStatusOverlay.is-completed{background:rgba(22,163,74,.82);color:#ecfdf5;}
.previewStatusOverlay.is-locked{background:rgba(15,23,42,.74);color:#e2e8f0;}
.previewStatusOverlay.is-unlocked{background:rgba(37,99,235,.72);color:#eff6ff;}
.previewBadge{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.74);color:#f8fafc;font-size:14px;border:1px solid rgba(255,255,255,.45);z-index:2;}
.previewBadge.is-ad{background:linear-gradient(180deg,#f59e0b,#ef4444);}
.unlockBadge{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:linear-gradient(180deg,#f59e0b,#ef4444);color:#fff6f8;font-size:11px;font-weight:900;border:1px solid rgba(255,255,255,.45);z-index:2;display:inline-flex;align-items:center;gap:6px;}
.unlockBadge .adIcon{font-size:12px;}
.levelBtn.is-ad-unlocked .lvlStatus{background:rgba(244,63,94,.14);color:#9f1239;}
.unlockCard{--fit-base-width:460px;border-color:rgba(244,114,182,.45);background:linear-gradient(180deg,#fff7ef,#fdf2f8);}
.unlockMedia{height:104px;border-radius:16px;background:linear-gradient(140deg,#f59e0b,#f43f5e);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:14px;}
.unlockMediaGlow{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.42),rgba(255,255,255,0) 66%);}
.unlockMediaIcon{position:relative;font-size:38px;filter:drop-shadow(0 6px 12px rgba(95,19,29,.3));}
.unlockHint{margin:0;color:#4760a8;line-height:1.35;}
.unlockStatus{margin:0;padding:8px 10px;border-radius:10px;background:rgba(99,102,241,.12);color:#2f3f82;border:1px solid rgba(99,102,241,.3);}
.unlockStatus.is-error{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.38);color:#9f1239;}
.unlockStatus.is-success{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.35);color:#166534;}

[data-screen="menu"].hasCustomBg,[data-screen="game"].hasCustomBg{background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;}
[data-screen="menu"].hasCustomBg{background-image:var(--custom-menu-bg)!important;}
[data-screen="menu"]::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(170deg,rgba(9,20,56,.26),rgba(8,18,48,.48));opacity:0;transition:opacity .2s ease;}
[data-screen="menu"].hasCustomBg::before{opacity:1;}
.heroFrame.hasCustomHero{display:block;width:220px;max-width:none;aspect-ratio:2/3;margin:0 auto;padding:12px;border-radius:24px;box-shadow:inset 0 -4px 0 rgba(16,54,143,.34),0 16px 28px rgba(10,27,86,.22);}
.heroFrame.hasCustomHero .heroCustomImage{position:relative;inset:auto;display:block;width:100%;height:100%;padding:10px;object-fit:contain;object-position:center center;background:radial-gradient(circle at top,rgba(255,255,255,.32),rgba(255,255,255,.1) 42%,rgba(5,14,38,.18) 100%);}
.heroFrame.hasCustomHero .heroImage,.heroFrame.hasCustomHero .heroDivider{display:none;}
@media (max-width:850px){.gameGrid{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));} .levelsGrid{grid-template-columns:repeat(2,minmax(0,1fr));} .levelsTopBar{grid-template-columns:auto 1fr;} .levelsMeta{grid-column:1/-1;justify-self:stretch;text-align:center;} }
@media (max-width:640px){
  [data-screen="menu"]{height:100%;min-height:0;} 
  [data-screen="levels"]{height:100%;max-height:none;padding:0;}
  .menuContent{width:468px;padding:82px 0 38px;gap:14px;}
  .menuTitle{max-width:440px;font-size:42px;}
  .heroImage{min-height:120px;}
  .heroCard.hasCustomHeroCard{width:300px;padding:16px;background:transparent;box-shadow:none;border-radius:0;}
  .heroFrame.hasCustomHero{width:210px;}
  .btnCta{font-size:26px;}
  .btnSecondaryLarge{font-size:21px;}
}
@media (max-width:520px){.levelsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .levelsTitle{font-size:28px;} .levelsSubtitle{font-size:13px;} .levelBackBtn{width:44px;height:44px;} .levelsMeta{padding:8px 10px;min-width:0;} .levelsMetaMain{font-size:12px;} .levelsMetaSub{font-size:10px;} .levelsGridWrap{padding:10px;}}

.heroCloud{position:absolute;left:12%;top:26%;width:44px;height:18px;border-radius:999px;background:rgba(255,255,255,.78);filter:drop-shadow(0 4px 2px rgba(77,98,165,.25));}
.heroCloud::before,.heroCloud::after{content:"";position:absolute;background:rgba(255,255,255,.85);border-radius:50%;}
.heroCloud::before{width:18px;height:18px;left:6px;top:-8px;}
.heroCloud::after{width:16px;height:16px;left:20px;top:-6px;}
.heroCloud.shifted{left:18%;top:24%;}
.heroDiffMark{position:absolute;left:62%;top:44%;width:32px;height:32px;border-radius:50%;border:4px solid rgba(255,255,255,.94);box-shadow:0 0 0 4px rgba(244,63,94,.85),0 6px 10px rgba(0,0,0,.2);}
.heroDiffMark.shifted{left:57%;top:38%;}

[data-screen="game"].hasCustomBg{background-image:var(--custom-game-bg)!important;}
[data-screen="game"].hasCustomBg::after{background:
  linear-gradient(180deg,rgba(4,12,34,.2),rgba(5,14,39,.42)),
  radial-gradient(180px 130px at 10% 74%,rgba(244,244,255,.17),transparent 72%),
  radial-gradient(220px 180px at 88% 68%,rgba(187,247,208,.14),transparent 74%),
  radial-gradient(190px 150px at 34% 88%,rgba(196,181,253,.16),transparent 72%);
  opacity:.92;
}

[data-screen="game"]{position:relative;isolation:isolate;height:100%;min-height:0;display:block;background:
  radial-gradient(1050px 560px at 12% -2%,rgba(255,255,255,.24),transparent 72%),
  radial-gradient(820px 470px at 92% 14%,rgba(129,140,248,.24),transparent 70%),
  radial-gradient(900px 540px at 52% 108%,rgba(45,212,191,.2),transparent 74%),
  radial-gradient(500px 320px at 52% 38%,rgba(255,255,255,.08),transparent 72%),
  linear-gradient(160deg,#44339f 0%,#2f4fb7 38%,#2a8bb5 100%);
}
[data-screen="game"]::before,
[data-screen="game"]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;}
[data-screen="game"]::before{background:
  repeating-conic-gradient(from -20deg at 50% 14%,rgba(255,255,255,.13) 0deg 10deg,rgba(255,255,255,0) 10deg 26deg),
  radial-gradient(620px 200px at 50% 14%,rgba(255,255,255,.18),transparent 78%);
  mix-blend-mode:screen;
  opacity:.22;
}
[data-screen="game"]::after{background:
  radial-gradient(180px 130px at 10% 74%,rgba(244,244,255,.17),transparent 72%),
  radial-gradient(220px 180px at 88% 68%,rgba(187,247,208,.14),transparent 74%),
  radial-gradient(190px 150px at 34% 88%,rgba(196,181,253,.16),transparent 72%);
  opacity:.82;
}
.gameBgDecor{position:absolute;inset:0;pointer-events:none;z-index:0;}
.gameBgDecor::before{content:"";position:absolute;left:8%;right:8%;top:26%;height:120px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0));filter:blur(3px);opacity:.45;}
.gameBlob{position:absolute;border-radius:999px;filter:blur(1px);opacity:.34;}
.gameBlob.one{width:240px;height:240px;left:-70px;top:110px;background:radial-gradient(circle at 32% 34%,rgba(253,224,71,.78),transparent 70%);}
.gameBlob.two{width:280px;height:280px;right:-90px;bottom:70px;background:radial-gradient(circle at 35% 35%,rgba(196,181,253,.72),transparent 70%);}
.gameBlob.three{width:190px;height:190px;right:18%;top:43%;background:radial-gradient(circle at 35% 35%,rgba(134,239,172,.7),transparent 70%);}
.gameWrap{position:relative;z-index:1;flex:1 1 auto;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;align-content:stretch;min-height:0;width:100%;height:100%;padding:84px 18px 18px;}
.gameGearBtn{left:16px;top:16px;right:auto;z-index:4;width:56px;height:56px;border-radius:20px;}
.gameGearBtn svg{width:24px;height:24px;}

.gameHud{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:22px;background:rgba(8,13,38,.42);border:1px solid rgba(255,255,255,.28);box-shadow:0 16px 32px rgba(6,9,32,.32);backdrop-filter:blur(7px);width:min(760px,calc(100% - 120px));max-width:760px;margin:0 auto;}
.hudMain,.hudProgressRow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.hudLevel{font-size:34px;font-weight:1000;letter-spacing:.3px;padding:4px 12px;border-radius:16px;color:#fff9ff;text-shadow:0 2px 0 rgba(26,32,93,.6);}
.hudLives{display:flex;gap:7px;align-items:center;}
.lifeDot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);}
.lifeDot.alive{background:linear-gradient(180deg,rgba(251,113,133,.95),rgba(225,29,72,.92));box-shadow:0 4px 10px rgba(190,24,93,.45);}
.lifeDot.lost{opacity:.45;filter:saturate(.1);}
.livesCount{display:inline-flex;align-items:center;padding:0 10px;height:30px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);font-weight:800;font-size:13px;color:rgba(248,250,255,.95);}

.hudDiffs{display:flex;gap:7px;flex-wrap:wrap;}
.diffDot{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:900;border:2px solid rgba(255,255,255,.4);font-size:0;color:transparent;}
.diffDot.todo{background:rgba(255,255,255,.15);}
.diffDot.done{background:linear-gradient(180deg,#4ade80,#22c55e);border-color:rgba(187,247,208,.95);box-shadow:0 0 0 2px rgba(34,197,94,.25);}
.hudTimer{font-weight:800;color:rgba(232,243,255,.95);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);}
.gameFrame{position:relative;min-height:0;padding:12px;border-radius:24px;background:
  linear-gradient(180deg,rgba(245,250,255,.28),rgba(220,235,255,.08) 44%,rgba(180,220,255,.06));
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 18px 34px rgba(8,14,44,.4);
  backdrop-filter:blur(2px);
}
.gameFrame::before{content:"";position:absolute;inset:8px;border-radius:18px;border:1px solid rgba(208,231,255,.34);background:linear-gradient(180deg,rgba(9,21,57,.28),rgba(7,13,39,.16));pointer-events:none;}
.gameFrame .gameGrid{position:relative;z-index:1;min-height:0;height:100%;}
.imgWrap::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .18s ease;background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 35%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.12) 65%,rgba(255,255,255,0) 100%);transform:translateX(-100%);}
[data-screen="game"].is-loading-level .gameFrame{pointer-events:none;}
[data-screen="game"].is-loading-level .imgWrap img,
[data-screen="game"].is-loading-level .imgWrap canvas{opacity:0;transition:opacity .18s ease;}
[data-screen="game"].is-loading-level .imgWrap::after{opacity:1;animation:levelLoadingShimmer 1.1s linear infinite;}
[data-screen="game"].is-loading-level .gameHud,
[data-screen="game"].is-loading-level .gameHintText,
[data-screen="game"].is-loading-level .gameHintActionWrap{opacity:.72;transition:opacity .18s ease;}
.imgWrap img,
.imgWrap canvas,
.gameHud,
.gameHintText,
.gameHintActionWrap{transition:opacity .18s ease;}
.gameHintActionWrap{display:flex;justify-content:center;padding:4px 0 0;min-height:0;}
.hintBtn{padding:16px 28px;border-radius:20px;font-size:26px;align-self:center;background:linear-gradient(180deg,#fbbf24,#f97316);border:3px solid rgba(126,55,6,.55);box-shadow:0 10px 18px rgba(12,25,68,.28),inset 0 3px 0 rgba(255,255,255,.45);color:#fff9ef;text-shadow:0 2px 0 rgba(124,45,18,.5);position:relative;}
.hintBtn:hover{background:linear-gradient(180deg,#fcd34d,#fb923c);}
.hintBtn:active{box-shadow:0 5px 12px rgba(12,25,68,.24),inset 0 2px 0 rgba(255,255,255,.4);}
.hintBtn.adMode{background:linear-gradient(180deg,#f43f5e,#e11d48);border-color:rgba(136,19,55,.7);box-shadow:0 10px 18px rgba(136,19,55,.35),inset 0 3px 0 rgba(255,255,255,.35);}
.gameHintText{text-align:center;color:rgba(255,255,255,.92);font-weight:700;}
.loseCard{width:min(470px,100%);text-align:center;padding:44px 26px 28px;background:
  radial-gradient(150px 90px at 12% 16%,rgba(255,255,255,.62),transparent 72%),
  radial-gradient(170px 110px at 88% 8%,rgba(253,186,116,.45),transparent 72%),
  linear-gradient(170deg,#fff6d8,#ffe8ef 45%,#e4f0ff 100%);
  border:2px solid rgba(224,115,157,.48);
  box-shadow:0 20px 36px rgba(31,17,68,.28);
  isolation:isolate;
}
.loseBadge{position:absolute;left:50%;top:-28px;transform:translateX(-50%) rotate(-4deg);width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;background:linear-gradient(180deg,#fb7185,#e11d48);color:#fff;border:3px solid #fff;box-shadow:0 9px 18px rgba(225,29,72,.32),0 0 0 1px rgba(190,24,93,.16);}
.loseHeader{justify-content:center;margin-bottom:4px;}
.loseHeader h2{font-size:34px;color:#c02662;text-shadow:0 2px 0 rgba(255,255,255,.65);}
.loseText{margin:0;color:#4f3c6f;font-weight:800;line-height:1.45;}
.loseCard .modalBody{gap:18px;}
.loseCard .modalActions{margin-top:2px;gap:14px;}
.btnLoseSkip{font-size:22px;padding:16px 18px;border-radius:20px;background:linear-gradient(180deg,#fb7185,#e11d48);border:2px solid rgba(140,20,60,.48);box-shadow:0 10px 16px rgba(136,19,55,.26),inset 0 2px 0 rgba(255,255,255,.4);color:#fff5f7;text-shadow:0 2px 0 rgba(136,19,55,.35);}
.btnLoseSkip:hover{background:linear-gradient(180deg,#fda4af,#f43f5e);}
.btnLoseSecondary{background:linear-gradient(180deg,#ffffff,#eef4ff);color:#29407d;border:2px solid rgba(69,98,182,.3);font-weight:900;font-size:20px;padding:14px 18px;border-radius:18px;box-shadow:0 8px 14px rgba(58,85,160,.18),inset 0 2px 0 rgba(255,255,255,.75);text-shadow:none;}
.btnLoseSecondary:hover{background:linear-gradient(180deg,#ffffff,#e4ecff);}
.btnLoseSecondary:active{box-shadow:0 4px 10px rgba(58,85,160,.16),inset 0 1px 0 rgba(255,255,255,.7);transform:translateY(1px);}
.loseStatus{min-height:22px;margin:4px 0 0;color:#334a8e;font-weight:800;}
.loseStatus.is-error{color:#b91c1c;}
.loseStatus.is-success{color:#0f766e;}

[data-screen="complete"] .content{display:flex;justify-content:center;}

.completeCard{position:relative;width:min(520px,100%);text-align:center;padding:42px 24px 24px;background:
  radial-gradient(150px 90px at 12% 16%,rgba(255,255,255,.58),transparent 72%),
  radial-gradient(190px 110px at 88% 10%,rgba(125,211,252,.44),transparent 72%),
  linear-gradient(168deg,#fff9da,#f9edff 48%,#e2f2ff 100%);
  color:#1f2f65;border:2px solid rgba(102,130,210,.38);box-shadow:0 20px 36px rgba(9,20,64,.22);
}
.completeBadge{position:absolute;left:50%;top:-30px;transform:translateX(-50%) rotate(-6deg);width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;border:4px solid #fff;box-shadow:0 12px 22px rgba(30,64,175,.35);}
.completeBadge{background:linear-gradient(180deg,#f59e0b,#ea580c);}
.completeText{margin:2px 0 10px;color:#4b3f73;font-weight:800;line-height:1.45;}
.completeActions{gap:10px;}

.btnCompleteNext{font-size:22px;padding:16px 18px;border-radius:20px;background:linear-gradient(180deg,#fbbf24,#f97316);border:3px solid rgba(124,45,18,.46);box-shadow:0 8px 0 #c2410c,0 15px 18px rgba(124,45,18,.28),inset 0 2px 0 rgba(255,255,255,.45);color:#fff8f0;text-shadow:0 2px 0 rgba(124,45,18,.45);}
.btnCompleteNext:hover{background:linear-gradient(180deg,#fcd34d,#fb923c);}
.btnCompleteBack{background:rgba(54,70,128,.12);color:#42528f;border:1px solid rgba(80,105,177,.34);font-weight:800;}

.completeMeta{min-height:36px;display:flex;align-items:center;justify-content:center;color:#233b7d;font-weight:900;}
.completeMeta.hasTime{min-height:0;margin:2px auto 10px;padding:8px 16px;border-radius:999px;background:linear-gradient(180deg,rgba(59,130,246,.16),rgba(14,116,144,.2));border:1px solid rgba(49,95,198,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);font-size:18px;}

@keyframes levelLoadingShimmer{
  from{transform:translateX(-100%);}
  to{transform:translateX(100%);}
}

@media (max-width:850px){
  .hudProgressRow{align-items:flex-start;}
  .hintBtn{width:min(380px,100%);font-size:23px;}
}

@media (max-width:640px){
  [data-screen="game"]{height:100%;min-height:0;}
  .gameWrap{padding:72px 12px 12px;}
  .gameGearBtn{left:14px;top:10px;right:auto;width:46px;height:46px;border-radius:16px;}
  .gameHud{padding:12px;width:min(560px,calc(100% - 64px));}
  .hudMain{flex-direction:column;align-items:flex-start;}
  .hudLives{width:100%;}
  .hudLevel{font-size:28px;padding-left:0;}
  .hudTimer{width:100%;text-align:center;}
  .gameGrid{gap:10px;}
  .hintBtn{font-size:21px;padding:14px 22px;}
}


#btnHintPrimary.freeMode{
  background:linear-gradient(180deg,#60a5fa,#3b82f6);
  border-color:rgba(30,64,175,.58);
  box-shadow:0 8px 0 #1d4ed8,0 14px 18px rgba(30,64,175,.3),inset 0 3px 0 rgba(255,255,255,.35);
  text-shadow:0 2px 0 rgba(30,64,175,.52);
}
#btnHintPrimary.adMode{
  background:linear-gradient(180deg,#f59e0b,#d97706);
  border-color:rgba(146,64,14,.58);
  box-shadow:0 10px 18px rgba(146,64,14,.3),inset 0 3px 0 rgba(255,255,255,.35);
  position:relative;
  padding-right:38px;
}
#btnHintPrimary.adMode::after{
  content:"🎬";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
}

[data-screen="reward"]{background:rgba(7,18,44,.22);backdrop-filter:blur(2px);border-color:rgba(255,255,255,.2);box-shadow:0 18px 42px rgba(3,8,24,.32);}
[data-screen="reward"] .content{display:flex;justify-content:center;align-items:center;min-height:0;height:100%;padding:22px;}
.rewardCard{position:relative;width:600px;max-width:none;max-height:none;padding:28px 24px 24px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(237,245,255,.9));border:1px solid rgba(120,150,240,.3);border-radius:30px;box-shadow:0 24px 48px rgba(17,38,109,.2),inset 0 1px 0 rgba(255,255,255,.82);overflow:visible;}
.rewardBurst{position:absolute;inset:-52% -8% auto;height:240px;background:radial-gradient(circle at center,rgba(56,189,248,.23),rgba(56,189,248,0));pointer-events:none;}
.rewardTitle{margin:8px 0 6px;font-size:34px;color:#163f8c;position:relative;z-index:1;}
.rewardStatus{min-height:22px;font-weight:800;color:#3056a0;position:relative;z-index:1;}
.rewardHero{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:8px;}
.rewardPanel{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;align-items:center;}
.rewardLabel{margin:2px 0 0;font-weight:900;color:#2f4e92;letter-spacing:.02em;}
.rewardValue{font-size:48px;font-weight:900;color:#0f4dbb;text-shadow:0 2px 0 rgba(255,255,255,.55);}
.rewardValue.is-final{color:#0b6d42;}
.rewardIllustration{width:min(300px,100%);height:128px;border-radius:18px;border:1px solid rgba(122,146,219,.24);background:linear-gradient(145deg,rgba(130,190,255,.2),rgba(253,224,71,.16));box-shadow:inset 0 1px 0 rgba(255,255,255,.55);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.rewardIllustrationImg{width:100%;height:100%;object-fit:cover;display:block;}
.rewardIllustrationFallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px;background:radial-gradient(circle at 50% 20%,rgba(253,224,71,.34),transparent 56%),linear-gradient(170deg,rgba(59,130,246,.22),rgba(16,185,129,.16));}
.rewardWheelWrap{position:relative;z-index:1;width:220px;height:220px;margin:10px auto 18px;display:flex;align-items:center;justify-content:center;}
.rewardWheel{width:100%;height:100%;border-radius:50%;border:5px solid rgba(28,63,152,.35);box-shadow:0 16px 28px rgba(20,39,105,.22),inset 0 0 0 6px rgba(255,255,255,.5);background:conic-gradient(#bfdbfe 0deg 60deg,#fef08a 60deg 120deg,#93c5fd 120deg 180deg,#fde68a 180deg 240deg,#a5b4fc 240deg 300deg,#fdba74 300deg 360deg);transition:transform 2.4s cubic-bezier(.12,.88,.22,1);position:relative;overflow:hidden;}
.rewardWheel::after{content:"";position:absolute;inset:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#fff,#e2e8f0);border:2px solid rgba(71,101,183,.35);box-shadow:0 4px 10px rgba(44,65,135,.24);}
.rewardWheelLabels{position:absolute;inset:0;}
.rewardWheelSectorLabel{position:absolute;left:50%;top:50%;transform-origin:center;display:block;font-weight:900;color:#1f3d8b;text-shadow:0 1px 0 rgba(255,255,255,.6);font-size:19px;}
.rewardWheelPointer{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:0;border-bottom:20px solid #ef4444;filter:drop-shadow(0 3px 2px rgba(100,15,15,.3));z-index:2;}
.rewardAdStatus{min-height:20px;margin:0;color:#9a3412;font-weight:700;}
.rewardActions,.rewardActionsFinal{width:100%;max-width:460px;gap:12px;margin-top:14px;}
.rewardActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;}
.rewardActions .btnRewardLuck,
.rewardActions .btnRewardClaim{
  margin:0;
  min-height:62px;
  border-radius:20px;
  padding:14px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.05;
  letter-spacing:.01em;
}
.btnRewardLuck{
  width:100%;
  min-height:74px;
  font-size:20px;
  font-weight:900;
  color:#f4ffe8;
  background:linear-gradient(180deg,#8bff80,#3ad764 56%,#1cbf59);
  border:2px solid rgba(16,120,52,.52);
  box-shadow:0 8px 0 #179447,0 14px 20px rgba(22,101,52,.34),inset 0 2px 0 rgba(255,255,255,.45),0 0 20px rgba(109,255,112,.3);
  text-shadow:0 2px 0 rgba(16,92,43,.55);
  flex-direction:column;
  gap:6px;
  line-height:1.05;
  white-space:pre-line;
}
.rewardLuckCopy{display:block;white-space:pre-line;line-height:1.12;}
.rewardLuckAdTag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(12,80,38,.28);
  border:1px solid rgba(223,255,233,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.rewardLuckAdIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  border-radius:4px;
  font-size:9px;
  background:rgba(237,255,243,.95);
  color:#166534;
  text-shadow:none;
}
.rewardLuckAdText{
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.btnRewardLuck:hover{filter:saturate(1.08) brightness(1.03);box-shadow:0 7px 0 #15843f,0 14px 22px rgba(22,101,52,.38),inset 0 2px 0 rgba(255,255,255,.55),0 0 24px rgba(129,255,135,.4);transform:translateY(-1px);}
.btnRewardLuck:active{transform:translateY(1px);box-shadow:0 5px 0 #15843f,0 8px 14px rgba(22,101,52,.34),inset 0 2px 0 rgba(255,255,255,.4),0 0 14px rgba(109,255,112,.25);}
.btnRewardClaim{
  width:100%;
  font-size:20px;
  font-weight:800;
  color:#e8efff;
  background:linear-gradient(180deg,#7a89b3,#64739f);
  border:2px solid rgba(71,85,124,.45);
  box-shadow:0 5px 0 #4c587d,0 10px 14px rgba(31,41,70,.2),inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow:0 1px 0 rgba(30,41,59,.45);
}
.btnRewardClaim:hover{filter:brightness(1.02);box-shadow:0 4px 0 #445172,0 9px 14px rgba(31,41,70,.24),inset 0 1px 0 rgba(255,255,255,.34);}
.rewardMultiplierValue{font-size:56px;font-weight:900;color:#9a3412;text-shadow:0 6px 18px rgba(217,119,6,.24);}
.rewardResultChips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.rewardChip{padding:9px 14px;border-radius:999px;background:rgba(59,130,246,.13);color:#1d4ed8;font-weight:900;border:1px solid rgba(59,130,246,.28);}
.rewardChip.is-main{background:rgba(34,197,94,.15);color:#166534;border-color:rgba(21,128,61,.34);}
@media (max-width:560px){.rewardTitle{font-size:28px;} .rewardValue{font-size:42px;} .rewardMultiplierValue{font-size:48px;} .rewardWheelWrap{width:190px;height:190px;margin-bottom:14px;} .rewardActions,.rewardActionsFinal{gap:12px;} .rewardActions{grid-template-columns:1fr;max-width:380px;}  .rewardActions .btnRewardLuck,.rewardActions .btnRewardClaim{min-height:58px;font-size:20px;} .btnRewardLuck{min-height:70px;}}

[data-screen="menu"],
[data-screen="game"],
[data-screen="reward"]{min-width:0;min-height:0;}
.gameFrame,.gameHud,.gameHintText,.gameHintActionWrap,.levelsTopBar,.levelsGridWrap,.menuActions,.heroCard,.logoBlock{min-width:0;}
.gameHintText{align-self:center;max-width:min(760px,100%);text-align:center;}
.gameFrame{flex:1 1 auto;}
.levelsGridWrap,[data-allow-scroll="true"]{overscroll-behavior:contain;}

.menuStageHost,.levelsStageHost,.gameStageHost,.rewardStageHost{position:relative;z-index:2;}
.menuStageHost{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;}

@media (max-width:640px){
  .menuStage{width:100%;height:100%;}
  .levelsStage{width:980px;height:720px;padding:14px;}
  .gameStage{width:980px;height:720px;}
  .rewardStage{width:600px;height:720px;}
}

@media (max-height:740px){
  .menuStage{height:100%;}
  .menuContent{padding-bottom:30px;}
  .levelsStage{height:700px;}
  .gameStage{height:700px;}
  .rewardStage{height:700px;}
}

/* Mobile-only layout rebalance: keep desktop untouched */
@media (max-width:640px){
  #app{padding:calc(6px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(6px + env(safe-area-inset-left,0px));}
  .screen{width:100%;border-radius:16px;}

  /* Game screen */
  .gameStage{width:390px;height:820px;}
  .gameWrap{padding:62px 10px 10px;gap:8px;grid-template-rows:auto auto minmax(0,1fr) auto;}
  .gameGearBtn{left:10px;top:10px;width:40px;height:40px;border-radius:14px;}
  .gameGearBtn svg{width:20px;height:20px;}
  .gameHud{width:calc(100% - 48px);max-width:none;margin:0 auto;padding:8px 10px;gap:6px;border-radius:18px;}
  .hudMain{flex-wrap:nowrap;align-items:center;gap:8px;}
  .hudProgressRow{gap:8px;align-items:center;}
  .hudLevel{font-size:22px;padding:2px 8px;border-radius:12px;}
  .hudLives{gap:5px;flex-wrap:wrap;justify-content:flex-end;}
  .lifeDot{width:22px;height:22px;font-size:12px;}
  .livesCount{height:24px;padding:0 8px;font-size:11px;}
  .diffDot{width:18px;height:18px;}
  .hudTimer{padding:3px 8px;font-size:11px;}
  .gameHintText{font-size:12px;line-height:1.25;max-width:100%;}
  .gameFrame{padding:8px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 12px 22px rgba(8,14,44,.34);}
  .gameFrame::before{inset:6px;border-radius:14px;}
  .gameGrid{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;}
  .imgWrap{border-radius:14px;}
  .hintBtn{width:min(260px,100%);font-size:18px;padding:11px 16px;border-radius:16px;border-width:2px;}
  .gameHintActionWrap{padding-top:2px;}

  /* Levels screen */
  .levelsStage{width:390px;height:820px;padding:8px;}
  .levelsTopBar{gap:8px;padding:10px 10px 9px;border-radius:16px;box-shadow:0 10px 18px rgba(8,16,56,.22);}
  .levelBackBtn{width:38px;height:38px;border-radius:12px;font-size:20px;}
  .levelsTitleWrap{gap:1px;}
  .levelsEyebrow{font-size:10px;letter-spacing:.5px;}
  .levelsTitle{font-size:24px;}
  .levelsSubtitle{font-size:12px;}
  .levelsMeta{padding:7px 8px;border-radius:12px;min-width:0;gap:2px;}
  .levelsMetaMain{font-size:11px;}
  .levelsMetaSub{font-size:10px;}
  .levelsGridWrap{margin-top:8px;padding:8px;border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 18px rgba(8,17,58,.18);}
  .levelsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .levelBtn{border-radius:18px;box-shadow:0 10px 18px rgba(7,21,66,.22),inset 0 0 0 2px rgba(255,255,255,.56);}
  .levelPreview{border-radius:14px 14px 0 0;}
  .levelBtn .levelMeta{padding:8px 9px 9px;}
  .lvlNum{font-size:17px;}
  .lvlStatus{font-size:10px;padding:5px 8px;}

  /* Profile modal */
  .modalOverlay{padding:8px;}
  .profileCard{width:min(360px,100%);height:min(620px,calc(var(--app-height,100vh) - 16px));border-radius:22px;display:flex;flex-direction:column;overflow:hidden;}
  .profileHeader{padding:12px 14px;}
  .profileHeader h2{font-size:22px;}
  .profileHeader .modalClose{width:34px;height:34px;font-size:24px;}
  .profileBody{padding:12px;gap:10px;flex:1 1 auto;min-height:0;overflow:auto;}
  .profileHero{grid-template-columns:auto minmax(0,1fr);gap:10px;text-align:left;padding:12px;border-radius:16px;}
  .profileAvatar{width:56px;height:56px;border-radius:16px;font-size:30px;margin:0;}
  .profileMainLabel{font-size:11px;}
  .profilePointsValue{font-size:32px;}
  .profileLeaderboardCard{grid-column:1/-1;min-height:0;padding:10px 12px;border-radius:16px;gap:4px;}
  .profileLeaderboardLabel{font-size:11px;}
  .profileLeaderboardValue{font-size:28px;}
  .profileRankHint{font-size:12px;}
  .profileProgressWrap{padding:10px;border-radius:14px;}
  .profileProgressHead{font-size:12px;margin-bottom:6px;}
  .profileProgressBar{height:10px;}
  .profileStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .profileStatCard{padding:8px 10px;border-radius:12px;gap:4px;}
  .profileStatCard span{font-size:11px;}
  .profileStatCard strong{font-size:18px;}
}

@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  #app{padding:calc(6px + env(safe-area-inset-top,0px)) calc(6px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(6px + env(safe-area-inset-left,0px));}

  /* Mobile landscape: use width instead of wasted height */
  .gameStage{width:820px;height:390px;}
  .gameWrap{padding:52px 10px 8px;gap:6px;}
  .gameGearBtn{left:10px;top:8px;width:36px;height:36px;border-radius:12px;}
  .gameGearBtn svg{width:18px;height:18px;}
  .gameHud{width:calc(100% - 42px);padding:7px 10px;gap:5px;border-radius:16px;}
  .hudMain,.hudProgressRow{flex-wrap:nowrap;gap:8px;}
  .hudLevel{font-size:20px;padding:2px 8px;}
  .hudLives{margin-left:auto;}
  .lifeDot{width:20px;height:20px;font-size:11px;}
  .livesCount{height:22px;font-size:10px;}
  .diffDot{width:16px;height:16px;}
  .hudTimer{font-size:10px;}
  .gameHintText{font-size:11px;line-height:1.2;}
  .gameFrame{padding:7px;border-radius:16px;}
  .gameFrame::before{inset:5px;border-radius:12px;}
  .gameGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr;gap:8px;}
  .hintBtn{width:min(220px,100%);font-size:16px;padding:10px 14px;border-radius:14px;}

  .levelsStage{width:820px;height:390px;padding:8px;}
  .levelsTopBar{grid-template-columns:auto 1fr auto;gap:8px;padding:8px 10px;border-radius:14px;}
  .levelBackBtn{width:36px;height:36px;border-radius:12px;font-size:18px;}
  .levelsEyebrow{font-size:9px;}
  .levelsTitle{font-size:22px;}
  .levelsSubtitle{font-size:11px;}
  .levelsMeta{grid-column:auto;padding:6px 8px;min-width:150px;align-self:stretch;justify-content:center;}
  .levelsMetaMain{font-size:11px;}
  .levelsMetaSub{font-size:10px;}
  .levelsGridWrap{margin-top:8px;padding:8px;border-radius:16px;}
  .levelsGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}

  .profileCard{width:min(520px,calc(var(--app-width,100vw) - 16px));height:min(340px,calc(var(--app-height,100vh) - 12px));border-radius:20px;display:flex;flex-direction:column;overflow:hidden;}
  .profileHeader{padding:10px 12px;}
  .profileHeader h2{font-size:20px;}
  .profileBody{padding:10px;gap:8px;flex:1 1 auto;min-height:0;overflow:auto;}
  .profileHero{grid-template-columns:auto minmax(0,1fr) minmax(150px,180px);gap:10px;padding:10px;}
  .profileAvatar{width:48px;height:48px;font-size:26px;}
  .profilePointsValue{font-size:28px;}
  .profileLeaderboardCard{padding:8px 10px;border-radius:14px;}
  .profileLeaderboardValue{font-size:24px;}
  .profileStatsGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
  .profileStatCard{padding:7px 8px;gap:3px;}
  .profileStatCard span{font-size:10px;}
  .profileStatCard strong{font-size:16px;}
}