*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#090b1a;color:#f8fafc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}
button{font:inherit;color:inherit}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:#090b1a;touch-action:none}
.screen,.ui,.modal,.toast{position:fixed;z-index:3}
.screen{inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(124,58,237,.3),transparent 34%),linear-gradient(135deg,#070817,#11183a);text-align:center}
.screen.active{display:flex}
.logo{animation:rise .8s cubic-bezier(.2,.9,.2,1) both}.logo h1{margin:18px 0 8px;font-size:clamp(42px,9vw,86px);line-height:.9;font-weight:950}.logo span{color:#67e8f9}.logo p{margin:0;color:#cbd5e1;font-weight:800}
.logo-orb{width:118px;height:118px;margin:auto;border-radius:36px;background:conic-gradient(from 120deg,#67e8f9,#a78bfa,#f0abfc,#67e8f9);box-shadow:0 0 60px rgba(103,232,249,.45),inset 0 0 24px rgba(255,255,255,.45);animation:float 3s ease-in-out infinite}
.loadbar{position:absolute;bottom:12%;width:min(360px,70vw);height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.loadbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#67e8f9,#f0abfc);animation:load 1.2s ease forwards}
.ui{inset:0;display:grid;grid-template-rows:auto 1fr;pointer-events:none;padding:12px clamp(10px,2.4vw,24px)}
.topbar{height:62px;display:flex;align-items:center;gap:12px;pointer-events:auto}
.titleBlock{min-width:0;display:flex;flex-direction:column;padding:8px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(15,23,42,.42);backdrop-filter:blur(16px);box-shadow:0 12px 36px rgba(0,0,0,.18)}
.titleBlock strong{font-size:16px}.titleBlock span{font-size:11px;color:#cbd5e1;font-weight:800}
.wallet{margin-left:auto;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:rgba(15,23,42,.42);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);font-weight:950}.coin{color:#facc15;text-shadow:0 0 18px #facc15}
.icon-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.09);backdrop-filter:blur(16px);font-size:22px;font-weight:950;box-shadow:0 10px 28px rgba(0,0,0,.18);cursor:pointer}
.icon-btn:active,.bigBtn:active,.power:active,.pauseFab:active,.modalActions button:active{transform:scale(.96)}
.panelView{display:none;pointer-events:auto;align-self:center;justify-self:center;width:min(1040px,100%);max-height:calc(100dvh - 88px);overflow:auto;scrollbar-width:none}.panelView::-webkit-scrollbar{display:none}.panelView.active{display:block;animation:panelIn .35s cubic-bezier(.2,.9,.2,1) both}
.hero{display:grid;grid-template-columns:1fr 190px;gap:20px;align-items:center;padding:24px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:linear-gradient(135deg,rgba(15,23,42,.72),rgba(88,28,135,.38));backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1)}
.hero h2{margin:0;font-size:clamp(36px,7vw,74px);line-height:.9;font-weight:950}.hero p{max-width:600px;color:#dbeafe;font-weight:800;line-height:1.55}.hero-prism{height:170px;border-radius:42px;background:conic-gradient(from 40deg,#67e8f9,#a78bfa,#f0abfc,#facc15,#67e8f9);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 60px rgba(103,232,249,.36),inset 0 0 34px rgba(255,255,255,.38);animation:spinFloat 7s ease-in-out infinite}
.menuGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.bigBtn{min-height:118px;padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(15,23,42,.56);backdrop-filter:blur(16px);text-align:left;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.2);transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.bigBtn:hover{transform:translateY(-3px);background:rgba(30,41,59,.72);box-shadow:0 20px 48px rgba(0,0,0,.28)}.bigBtn.primary{background:linear-gradient(135deg,rgba(6,182,212,.7),rgba(147,51,234,.58))}
.bigBtn span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.14);margin-bottom:14px}.bigBtn b{display:block;font-size:18px}.bigBtn small{display:block;color:#cbd5e1;font-weight:800;margin-top:4px}
.chapterTabs{display:flex;gap:8px;margin-bottom:12px;overflow:auto}.chapterTabs button{border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(15,23,42,.56);padding:9px 13px;font-weight:950;cursor:pointer;white-space:nowrap}.chapterTabs button.active{background:#67e8f9;color:#062033}
.levelGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(15,23,42,.48);backdrop-filter:blur(18px)}
.levelTile{aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-weight:950;cursor:pointer;position:relative;overflow:hidden}.levelTile.locked{opacity:.35;cursor:not-allowed}.levelTile.done{background:linear-gradient(135deg,rgba(6,182,212,.5),rgba(147,51,234,.35))}.levelTile small{position:absolute;bottom:5px;font-size:10px;color:#facc15}
.gameHud{align-self:stretch;justify-self:stretch;width:100%;max-height:none;display:none;grid-template-rows:auto auto 1fr auto}.gameHud.active{display:grid;pointer-events:none}.statsStrip{justify-self:center;display:flex;gap:8px;pointer-events:auto}.statsStrip div{min-width:86px;text-align:center;padding:8px 10px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.44);backdrop-filter:blur(16px)}.statsStrip small{display:block;color:#94a3b8;text-transform:uppercase;font-size:10px;font-weight:950}.statsStrip b{font-size:18px}
.objective{justify-self:center;margin-top:8px;padding:9px 14px;border-radius:999px;background:rgba(15,23,42,.44);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);font-weight:900;text-align:center}
.powerBar{align-self:end;justify-self:center;display:flex;gap:7px;pointer-events:auto;padding-bottom:4px}.power{width:74px;height:64px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(15,23,42,.58);backdrop-filter:blur(16px);display:grid;grid-template-rows:1fr auto;place-items:center;position:relative;cursor:pointer}.power b{font-size:19px}.power span{font-size:10px;color:#dbeafe;font-weight:900}.power small{position:absolute;top:5px;right:7px;color:#facc15;font-weight:950}.power.disabled{opacity:.42}
.pauseFab{position:absolute;right:20px;top:84px;width:46px;height:46px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(15,23,42,.54);backdrop-filter:blur(16px);font-weight:950;pointer-events:auto;cursor:pointer}
.modal{inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.62);backdrop-filter:blur(10px)}.modal.hidden{display:none}.modalCard{width:min(92vw,430px);padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(30,41,59,.95));box-shadow:0 32px 90px rgba(0,0,0,.42);text-align:center;animation:pop .32s cubic-bezier(.2,1.2,.2,1) both}.modalCard h2{margin:0 0 8px;font-size:34px}.modalCard p{color:#cbd5e1;font-weight:800;line-height:1.45}.modalStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.modalStats div{padding:10px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:950}.modalStats small{display:block;color:#94a3b8;font-size:10px;text-transform:uppercase}.modalActions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.modalActions button{border:0;border-radius:12px;padding:11px 15px;background:#67e8f9;color:#062033;font-weight:950;cursor:pointer}.modalActions button.secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.12)}
.toast{left:50%;bottom:20px;transform:translateX(-50%) translateY(18px);z-index:8;opacity:0;padding:11px 16px;border-radius:999px;background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);font-weight:950;transition:.25s ease}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes load{to{width:100%}}@keyframes rise{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translateY(-12px) rotate(5deg)}}@keyframes spinFloat{50%{transform:translateY(-10px) rotate(18deg)}}@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media(max-width:820px){.ui{padding:10px}.topbar{height:54px}.hero{grid-template-columns:1fr;padding:18px}.hero-prism{display:none}.menuGrid{grid-template-columns:1fr 1fr}.levelGrid{grid-template-columns:repeat(5,1fr)}.statsStrip{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:6px}.statsStrip div{min-width:0;padding:7px 4px}.powerBar{width:100%;overflow:auto;justify-content:flex-start;padding:0 0 6px}.power{min-width:66px;width:66px;height:58px}.pauseFab{top:66px;right:10px}}
@media(max-width:520px){.menuGrid{grid-template-columns:1fr}.levelGrid{grid-template-columns:repeat(4,1fr)}.wallet b{max-width:58px;overflow:hidden}.objective{font-size:12px;border-radius:12px}.modalStats{grid-template-columns:1fr}}