:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#fff;background:#071923;--navy:#092d45;--gold:#ffc83d;--green:#15b75b}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{min-width:44px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}.loading{height:100%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 50% 30%,#1e6780,#061823 70%);padding:28px}.brand{font-weight:1000;font-size:clamp(30px,10vw,48px);letter-spacing:-2px;text-shadow:0 4px 0 #052033}.brand span{color:#ff9e2c}.loadbar{width:min(72vw,320px);height:14px;padding:3px;border-radius:99px;background:#06141c}.loadbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#21d66d,#b8f35b);transition:width .2s}.screen{height:100%;position:relative;overflow:hidden;background:#09263b}.setup{overflow:auto;background:radial-gradient(circle at 50% 18%,#267692,#071c2b 65%);padding:20px 18px 34px;text-align:center}.eyebrow{display:inline-flex;padding:7px 12px;border:1px solid #ffffff44;border-radius:99px;background:#061b29aa;font-size:12px;font-weight:900;letter-spacing:1.5px}.setup h1{font-size:32px;line-height:.95;margin:15px 0 6px}.setup h1 span{color:#ff9e2c}.setup p{margin:7px 0;color:#d6e6eb}.avatar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px auto 14px;max-width:430px}.avatar-card{position:relative;height:300px;border:2px solid #ffffff33;border-radius:24px;overflow:hidden;background:linear-gradient(#efc57b,#55331f);padding:0}.avatar-card.selected{border-color:#66f2a1;box-shadow:0 0 0 4px #1ccc7055}.avatar-card img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px #0007)}.avatar-card b{position:absolute;bottom:10px;left:10px;right:10px;background:#071923d9;border-radius:12px;padding:8px}.namebox{display:block;max-width:430px;margin:auto;text-align:left;font-weight:800}.namebox small{display:block;color:#aac7d1;margin:4px 2px 8px;font-weight:500}.namebox input{width:100%;height:52px;border:2px solid #ffffff33;border-radius:15px;background:#fff;color:#102430;padding:0 14px;font-size:18px;outline:none}.namebox input:focus{border-color:#53dc8c}.error{min-height:20px;color:#ffd3cf;font-weight:700;font-size:13px;margin:5px 2px}.primary{border:0;border-radius:18px;background:linear-gradient(#2ad36c,#0b9846);color:#fff;font-weight:1000;padding:0 24px;box-shadow:0 5px #066c32,0 10px 24px #0007}.setup .primary{width:min(100%,430px);height:56px}.map{overflow:auto;background:#071c2b;padding-bottom:28px}.maphead{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#082337e8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff1f}.maphead h1{font-size:19px;margin:0}.maphead small{display:block;color:#8fb3c1}.iconbtn{border:1px solid #ffffff33;border-radius:50%;background:#0b3951;color:#fff;font-size:20px}.mapcontent{padding:14px}.prototype{display:flex;justify-content:center;margin-bottom:12px}.level-card{height:205px;position:relative;overflow:hidden;border-radius:24px;margin-bottom:14px;border:1px solid #ffffff38;box-shadow:0 16px 30px #0007;background-size:cover;background-position:center}.level-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#061722f2)}.level-meta{position:absolute;left:15px;right:15px;bottom:12px;display:flex;align-items:end;justify-content:space-between}.level-meta h2{margin:0;font-size:24px;text-shadow:0 2px 4px #000}.level-meta p{margin:2px 0;color:#d6e7ec;font-size:13px}.stars{color:var(--gold);letter-spacing:2px}.play{border:0;border-radius:15px;padding:0 17px;background:#15a853;color:#fff;font-weight:1000;box-shadow:0 4px #076b34}.game{background-size:cover;background-position:center}.game:before{content:"";position:absolute;inset:0;background:linear-gradient(#06141ca8 0 18%,transparent 43%,#06141c80)}.hud{position:absolute;z-index:8;top:0;left:0;right:0;padding:calc(8px + env(safe-area-inset-top)) 10px 0;display:grid;grid-template-columns:1fr auto;gap:7px}.hudtop{grid-column:1/-1;display:flex;align-items:center;gap:7px}.pill{height:44px;display:flex;align-items:center;gap:6px;padding:0 11px;border:1px solid #ffffff45;border-radius:15px;background:#08283be8;box-shadow:0 4px 12px #0005;font-weight:900}.hudname{flex:1;min-width:0}.hudname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.coin{color:var(--gold)}.progress{grid-column:1/-1;height:10px;border:2px solid #fff5;border-radius:99px;background:#071722;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#21d66d,#e4ed51);width:0;transition:width .25s}.mission{grid-column:1/-1;text-align:center;background:#071d2cdc;border-radius:14px;padding:7px 10px;font-size:13px;font-weight:800}.hero{position:absolute;z-index:4;width:105px;height:205px;left:calc(50% - 52px);bottom:132px;transform-origin:50% 100%;filter:drop-shadow(0 10px 8px #0008);animation:runbob .46s ease-in-out infinite alternate}.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.hero .upper{clip-path:inset(0 0 45% 0);animation:torsosway .46s ease-in-out infinite alternate}.hero .lower{clip-path:inset(45% 0 0 0);transform-origin:50% 48%;animation:stridestep .32s ease-in-out infinite alternate}.hero.jump{animation:jump .55s ease}.hero.duck{animation:duck .55s ease}.shadow{position:absolute;z-index:3;width:92px;height:22px;left:calc(50% - 46px);bottom:127px;border-radius:50%;background:#0007;filter:blur(5px);animation:shadow .46s ease-in-out infinite alternate}.game-stage{position:absolute;inset:0;z-index:3}.obstacle{position:absolute;z-index:5;font-size:54px;top:38%;left:calc(50% - 28px);filter:drop-shadow(0 7px 5px #0008);animation:approach 1.55s linear infinite}.coin-fx{position:absolute;color:#ffd22e;font-size:24px;animation:floatup .7s ease forwards}.controls{position:absolute;z-index:9;bottom:calc(12px + env(safe-area-inset-bottom));left:10px;right:10px;display:flex;gap:9px;justify-content:center}.action{flex:1;max-width:180px;height:62px;border:2px solid #ffffff66;border-radius:20px;background:linear-gradient(#1a5875dd,#0a3048ee);color:#fff;font-weight:1000;font-size:17px;box-shadow:0 6px #061824}.boosters{position:absolute;z-index:9;left:8px;right:8px;bottom:86px;display:flex;gap:6px;justify-content:center}.boost{position:relative;flex:1;max-width:83px;height:51px;border:1px solid #ffffff42;border-radius:14px;background:#082a3edd;color:#fff;padding:2px;font-size:10px;font-weight:900}.boost strong{display:block;font-size:19px}.boost.active{border-color:#68f19c;box-shadow:0 0 16px #4bff9988}.container{position:absolute;z-index:5;top:40%;width:126px;height:78px;border:4px solid #143c62;border-radius:5px;background:linear-gradient(90deg,#1b5f9d,#338ed0 45%,#155388);box-shadow:0 12px 18px #0008,inset 0 0 0 3px #ffffff1f}.container:after{content:"";position:absolute;left:50%;bottom:100%;height:150px;border-left:4px solid #272421}.target{position:absolute;left:calc(50% - 70px);top:59%;width:140px;height:90px;border:4px dashed #70ff99;border-radius:8px;background:#23d66d22;box-shadow:0 0 24px #4dff8eaa}.cheese{position:absolute;z-index:6;left:calc(50% - 43px);bottom:145px;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff49b,#f5bd18 55%,#bd6d00);border:7px solid #f7d455;box-shadow:inset 0 0 0 4px #9e5b00,0 12px 12px #0007;animation:roll .7s linear infinite}.cheese:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#a86104;left:20px;top:17px;box-shadow:28px 9px #a86104,10px 37px #a86104}.lanes{position:absolute;inset:44% 6% 21%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.lane{border-left:2px dashed #ffffff33;border-right:2px dashed #ffffff33}.lane.obstruct:after{content:"🧺";display:block;text-align:center;font-size:54px;animation:approach .95s linear infinite}.result{position:absolute;z-index:20;inset:0;display:grid;place-content:center;text-align:center;padding:24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.result.win{background:#0baf59d9}.result.fail{background:#b51f2bdc}.result .mark{font-size:78px;font-weight:1000}.result h2{font-size:33px;margin:0}.result p{font-size:17px;max-width:300px}.result .hero-mini{height:200px;object-fit:contain;filter:drop-shadow(0 10px 8px #0007);animation:celebrate .75s ease-in-out infinite alternate}.result button{height:54px;border:0;border-radius:17px;margin:5px;background:#fff;color:#0a2a3d;font-weight:1000;padding:0 20px}.pause{position:absolute;z-index:25;inset:0;background:#061722ee;display:grid;place-content:center;text-align:center}.pause button{margin:6px}.settings{padding:25px;background:radial-gradient(circle at 50% 20%,#1b5b72,#071923 65%)}.settings h1{margin-top:70px}.settings .primary{height:52px;width:100%}.settings .iconbtn{position:absolute;top:15px;left:15px}.hintglow{box-shadow:0 0 0 5px #ffe34c,0 0 28px #ffe34c!important}.funny{font-size:42px;animation:celebrate .6s ease-in-out infinite alternate}@keyframes runbob{to{transform:translateY(-8px) rotate(-1deg)}}@keyframes torsosway{to{transform:translate(2px) rotate(1.5deg)}}@keyframes stridestep{0%{transform:skew(-2deg) translate(-2px)}to{transform:skew(3deg) translate(3px)}}@keyframes shadow{to{transform:scale(.88);opacity:.6}}@keyframes jump{50%{transform:translateY(-120px) rotate(4deg)}}@keyframes duck{50%{transform:scaleY(.62) translateY(65px)}}@keyframes approach{0%{transform:translateY(-150px) scale(.45)}to{transform:translateY(280px) scale(1.25)}}@keyframes floatup{to{transform:translateY(-90px);opacity:0}}@keyframes roll{to{transform:rotate(360deg)}}@keyframes celebrate{to{transform:translateY(-12px) rotate(2deg)}}@media(max-height:760px){.avatar-card{height:255px}.hero{height:175px;bottom:128px}.boosters{bottom:82px}.action{height:58px}.mission{padding:5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
