@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Nunito:wght@700;900&display=swap');
:root{--ink:#081127;--cyan:#4ff8ff;--lime:#7dff59;--blue:#128ee9;--purple:#9d5cff;--pink:#ff4fbc;--panel:rgba(6,19,46,.9);--edge:rgba(255,255,255,.2)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#06132c;color:#fff;font-family:Nunito,system-ui,sans-serif}button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff;outline-offset:4px}#bg{position:fixed;inset:0;width:100%;height:100%;background:linear-gradient(#134eaa,#04a4ce 58%,#175ec1)}#bg:after{content:""}.screen{position:fixed;inset:0;display:none}.screen.active{display:flex}.square,.orb,.play,.text-button,.back{filter:drop-shadow(0 6px 0 rgba(0,0,0,.28));transition:transform .12s,filter .12s}.square:hover,.orb:hover,.play:hover,.text-button:hover,.back:hover{transform:translateY(-3px);filter:drop-shadow(0 9px 0 rgba(0,0,0,.3))}.square:active,.orb:active,.play:active,.text-button:active,.back:active{transform:translateY(3px);filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}.mini{width:54px;height:54px;border-radius:13px;border:4px solid #fff;background:linear-gradient(145deg,#25ccfa,#0873d5);box-shadow:inset 0 -7px 0 rgba(0,0,0,.16);font-size:25px;font-weight:900}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:max(22px,env(safe-area-inset-top)) 28px;z-index:3}.top-actions{display:flex;gap:14px}.hero{margin:auto;width:min(900px,92vw);display:flex;flex-direction:column;align-items:center;z-index:2}.eyebrow{margin:0 0 4px;letter-spacing:.36em;font-size:11px;font-weight:900;color:#b8faff;text-shadow:0 2px #075e89}h1{font:clamp(52px,8.7vw,108px)/.7 'Black Ops One',Impact,sans-serif;letter-spacing:.03em;text-align:center;margin:12px 0 34px;transform:skew(-3deg);text-shadow:0 5px 0 #0a572c,0 9px 0 #07381d,0 13px 18px rgba(0,0,0,.4);-webkit-text-stroke:3px #fff}h1 span{display:block;background:linear-gradient(#b5ff6a 10%,#39ed59 52%,#11b958 53%,#3bf9bd);-webkit-background-clip:text;background-clip:text;color:transparent}h1 span+span{font-size:.77em;margin-top:.2em;background-image:linear-gradient(#77fbff,#22c6ff 48%,#0877e4 50%,#35a6ff)}.primary-actions{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,70px)}.play{position:relative;width:clamp(124px,18vw,184px);aspect-ratio:1;border-radius:50%;border:8px solid #fff;background:linear-gradient(145deg,#9cff58,#22ce45);box-shadow:inset 0 -15px 0 rgba(0,0,0,.18),0 0 0 7px #16883d}.play-triangle{position:absolute;left:39%;top:29%;width:0;height:0;border-top:39px solid transparent;border-bottom:39px solid transparent;border-left:61px solid #fff;filter:drop-shadow(0 5px 0 rgba(0,0,0,.24))}.pulse-ring{position:absolute;inset:-16px;border:3px solid rgba(255,255,255,.7);border-radius:50%;animation:pulse 1.6s infinite}@keyframes pulse{to{transform:scale(1.25);opacity:0}}.orb{width:clamp(86px,11vw,118px);aspect-ratio:1;border:6px solid #fff;border-radius:26%;background:linear-gradient(145deg,#905bff,#5133c9);box-shadow:inset 0 -10px 0 rgba(0,0,0,.2);position:relative}.orb canvas{width:70%;height:70%}.orb small{position:absolute;left:50%;transform:translateX(-50%);bottom:-27px;font-size:11px;font-weight:900;letter-spacing:.12em;text-shadow:0 2px 2px #000}.level-orb{background:linear-gradient(145deg,#ffb441,#e7446c);font-size:44px}.level-card{margin-top:42px;width:min(570px,90vw);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:15px;background:rgba(4,35,83,.58);border:2px solid rgba(255,255,255,.22);box-shadow:inset 0 0 18px rgba(41,234,255,.12);border-radius:16px;padding:11px 16px;backdrop-filter:blur(8px)}.level-card>div:first-child{display:grid;grid-template-columns:auto 1fr;gap:0 9px}.level-card small{grid-column:2;color:#9fefff;font-size:10px;letter-spacing:.08em}.difficulty-dot{grid-row:1/3;width:22px;height:22px;border-radius:6px;background:#ffcd46;border:3px solid #fff;align-self:center}.progress,.run-progress{height:11px;border-radius:9px;background:rgba(0,0,0,.38);box-shadow:inset 0 2px 3px #000;overflow:hidden}.progress span,.run-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#7dff59,#4ff8ff);transition:width .4s}.level-card b{font-size:11px}footer{position:absolute;left:26px;right:26px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;z-index:3}footer button{background:none;font-size:17px;font-weight:900;text-shadow:0 2px #063c72}footer button:first-child{color:#fff379}footer button:last-child{color:#ff7dd3}footer p{font-size:9px;letter-spacing:.18em;color:#b0eaff}.panel-screen{background:radial-gradient(circle at 50% 18%,#164fac,#06142d 70%);flex-direction:column;overflow:auto}.panel-screen header{height:104px;min-height:104px;display:flex;align-items:center;gap:18px;padding:20px 4vw;border-bottom:2px solid rgba(255,255,255,.12);background:rgba(3,11,31,.42)}.panel-screen header>div{flex:1}.panel-screen header p,.modal-card>p,.overlay-card>p{margin:0;color:var(--cyan);letter-spacing:.25em;font-size:11px;font-weight:900}.panel-screen h2,.modal-card h2,.overlay-card h2{font:36px/1 'Black Ops One';margin:4px 0}.back{width:58px;height:58px;border-radius:15px;border:4px solid #fff;background:#e5546d;font-size:52px;line-height:40px}.custom-layout{display:grid;grid-template-columns:minmax(300px,.85fr) 1.5fr;gap:28px;width:min(1180px,94vw);margin:26px auto}.icon-stage{min-height:510px;display:flex;align-items:center;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(38,107,205,.42),rgba(4,18,47,.9));border:2px solid var(--edge);border-radius:26px;box-shadow:inset 0 0 40px rgba(49,245,255,.1)}#bigIcon{width:min(330px,80%);height:auto;filter:drop-shadow(0 18px 15px rgba(0,0,0,.35))}.icon-name{font:22px 'Black Ops One';margin:8px 0 18px}.text-button{padding:12px 22px;border:3px solid #fff;border-radius:10px;background:linear-gradient(#27d6ef,#087ed0);box-shadow:inset 0 -5px rgba(0,0,0,.16);font-weight:900;letter-spacing:.07em}.custom-options{background:rgba(5,19,48,.82);border:2px solid var(--edge);border-radius:26px;padding:22px}.tabs{display:flex;gap:9px;overflow:auto;padding-bottom:12px}.tabs button{min-width:66px;height:49px;border-radius:10px;background:#153d78;border:2px solid rgba(255,255,255,.22);font-size:23px}.tabs button.selected{background:#b8761e;border-color:#fff;box-shadow:inset 0 -5px rgba(0,0,0,.2)}.shape-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;min-height:180px}.shape-grid button{aspect-ratio:1;background:#0b285a;border:2px solid rgba(255,255,255,.16);border-radius:10px;padding:7px}.shape-grid button.selected{border:4px solid #ffe65b;background:#20468c}.shape-grid canvas{width:100%;height:100%}.custom-options h3{font-size:11px;letter-spacing:.2em;color:#8ddfff;margin:20px 0 9px}.color-grid,.trail-grid{display:flex;flex-wrap:wrap;gap:10px}.color-grid button{width:43px;height:43px;border-radius:9px;border:3px solid rgba(255,255,255,.5);box-shadow:inset 0 -6px rgba(0,0,0,.18)}.color-grid button.selected,.trail-grid button.selected{outline:3px solid #ffe95e;outline-offset:2px}.trail-grid button{min-width:74px;padding:10px;border-radius:9px;background:#173d78;border:2px solid #ffffff44}.game-hud{position:absolute;left:18px;right:18px;top:max(16px,env(safe-area-inset-top));display:flex;align-items:center;gap:15px;z-index:4}.game-hud .run-progress{flex:1;height:14px}.game-hud b{width:45px}.game-message{position:absolute;left:50%;top:27%;transform:translateX(-50%);text-align:center;text-shadow:0 5px 0 rgba(0,0,0,.35);pointer-events:none;transition:opacity .3s}.game-message p{letter-spacing:.3em;font-weight:900}.game-message h2{font:clamp(32px,7vw,70px) 'Black Ops One';margin:0}.game-message small{letter-spacing:.15em}.hidden{display:none!important}.overlay-card,.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,88vw);background:linear-gradient(145deg,rgba(13,55,121,.97),rgba(5,17,44,.98));border:4px solid #fff;border-radius:24px;padding:30px;text-align:center;box-shadow:0 20px 50px #0009;z-index:8}.overlay-card button{display:block;width:100%;margin-top:12px}.result-stats{display:flex;justify-content:space-around;margin:22px 0;color:#8cecff}.result-stats b{display:block;color:#fff;font-size:25px}.modal{position:fixed;inset:0;background:rgba(1,7,20,.75);backdrop-filter:blur(9px);z-index:20}.modal-card{text-align:left}.modal-card h2{font-size:32px}.close{position:absolute;right:14px;top:10px;background:none;font-size:36px}.modal-card ul{padding-left:20px;line-height:1.8}.modal-card label{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.modal-card input[type=range]{width:55%}.level-choice{display:flex;width:100%;align-items:center;justify-content:space-between;padding:15px;margin:12px 0;background:#123c7d;border:2px solid #ffffff44;border-radius:12px}.locked{opacity:.45}.setting-value{color:#65f7ff}.toggle{min-width:80px}.about-copy{line-height:1.65;color:#d2edff}#gameCanvas{width:100%;height:100%;touch-action:none}
@media(max-width:700px){.topbar{padding:16px}.mini{width:47px;height:47px}.eyebrow{font-size:8px}.hero{transform:translateY(-2vh)}h1{font-size:51px;margin-bottom:30px}.primary-actions{gap:23px}.play{width:124px}.play-triangle{border-top-width:28px;border-bottom-width:28px;border-left-width:44px}.orb{width:78px;border-width:5px}.level-card{grid-template-columns:1fr auto;margin-top:40px}.level-card .progress{grid-row:2;grid-column:1/3}.level-card b{grid-column:2;grid-row:1}footer button span{display:none}.custom-layout{display:block}.icon-stage{min-height:320px;margin-bottom:18px}.icon-stage canvas{width:210px}.shape-grid{grid-template-columns:repeat(4,1fr)}.custom-options{padding:15px}.panel-screen header{height:84px;min-height:84px}.panel-screen h2{font-size:27px}.back{width:48px;height:48px}.modal-card{padding:24px}.game-hud{top:12px}}
@media(max-height:650px) and (orientation:landscape){h1{font-size:48px;margin:4px 0 14px}.eyebrow{display:none}.play{width:105px}.orb{width:74px}.level-card{margin-top:28px}.hero{transform:translateY(-8px)}footer{bottom:8px}.topbar{padding:10px}.mini{width:43px;height:43px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}