:root{color-scheme:dark;font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;font-weight:600;--aqua:#38f9e3;--pink:#ff4fce;--purple:#8a62ff;--night:#080923}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hidden{display:none!important}
#app{position:relative;height:100vh;height:100dvh;min-height:300px;width:100%;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 15%,#2a2072,#0a0b24 72%)}
#game-stage,#game-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,8,30,.24) 0%,transparent 27%,transparent 56%,rgba(4,5,19,.5) 100%)}
#hud{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:4;gap:10px}
.hud-left{display:flex;flex-direction:column;align-items:flex-start}
.world-chip,.stat-chip,.heart-chip,.icon-button{border:1px solid rgba(255,255,255,.19);background:rgba(10,10,40,.53);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 5px 18px rgba(0,0,0,.14)}
.world-chip{border-radius:50px;display:flex;align-items:center;gap:8px;padding:8px 11px;color:#b5fff8;font-size:10px;font-weight:900;letter-spacing:1.1px}
.live-dot{height:7px;width:7px;border-radius:50%;background:#33f4d0;box-shadow:0 0 10px #32efd5}
.big-score{font-size:clamp(32px,9vw,54px);font-weight:1000;letter-spacing:-1.5px;text-shadow:0 4px 16px rgba(0,0,0,.55);line-height:1.12;margin:10px 0 -1px}
.hud-caption{font-size:9px;letter-spacing:2.8px;color:#c8d2fb;font-weight:900}
.hud-right{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;pointer-events:auto}
.stat-chip,.heart-chip{border-radius:14px;min-height:39px;padding:9px 12px;font-size:16px;font-weight:950}
.stat-chip span:first-child{color:#ffe35d;font-size:22px;vertical-align:-1px}
.heart-chip{color:#ff6b99;font-size:14px;letter-spacing:2px;display:flex;align-items:center}
.icon-button{width:41px;height:40px;border-radius:14px;font-size:22px;line-height:1}
.controls{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:15px;right:15px;z-index:5;pointer-events:none;max-width:660px;margin:auto}
.controls-line{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.control-button,.jump-button,.shield-button{pointer-events:auto;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:0 6px 20px rgba(0,0,0,.25);user-select:none}
.control-button{height:72px;width:74px;border-radius:24px;background:rgba(56,249,227,.19);font-size:50px;font-weight:700;line-height:1}
.control-button:active,.jump-button:active{background:rgba(56,249,227,.38);transform:scale(.96)}
.controls-mid{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:95px}
.jump-button{background:rgba(132,92,255,.37);height:52px;border-radius:18px;padding:0 18px;font-size:24px;font-weight:950;white-space:nowrap}
.jump-button span{font-size:10px;letter-spacing:1px;vertical-align:5px}
.shield-button{position:relative;background:rgba(15,14,40,.78);border-radius:15px;min-width:115px;height:43px;display:flex;align-items:center;gap:7px;padding:7px 12px;overflow:hidden}
.shield-button:disabled{opacity:.66}
.shield-button.ready{border-color:#37f9e3;box-shadow:0 0 17px rgba(56,249,227,.25)}
.shield-icon{color:#6bffee;font-size:20px}.shield-text{white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:.4px}
.shield-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.13)}
#shield-fill{display:block;width:0;height:100%;background:#38f9e3;transition:width .2s}
.swipe-tip{font-size:9px;color:#c5c9fa;text-align:center;letter-spacing:1.1px;margin-top:8px;text-shadow:0 1px 6px #090621}
.overlay{position:absolute;inset:0;z-index:10;background:linear-gradient(180deg,rgba(8,8,32,.74),rgba(9,9,35,.57) 33%,rgba(6,7,31,.91));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(env(safe-area-inset-top,0px) + 25px) 20px calc(env(safe-area-inset-bottom,0px) + 24px);overflow-y:auto}
.top-badge{position:absolute;top:calc(env(safe-area-inset-top,0px) + 24px);left:20px;right:20px;color:#dcddff;font-size:10px;letter-spacing:2.2px;font-weight:900}.badge-spark{color:var(--aqua)}
.menu-stack{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.portal-symbol{width:125px;height:125px;border-radius:50%;position:relative;border:13px solid #7fffea;box-shadow:0 0 18px #45ffe9,inset 0 0 20px #40caff,0 0 80px rgba(132,92,255,.9);transform:rotate(-22deg) skew(5deg);margin-bottom:26px;background:radial-gradient(ellipse at 55% 40%,#fe9cfd,#784fff 47%,#25205b 78%)}
.portal-symbol:after{content:"";position:absolute;inset:-25px;border:2px solid rgba(245,175,255,.51);border-radius:50%;transform:scaleX(.68) rotate(-24deg)}
.portal-core{position:absolute;inset:17px;border:1px solid rgba(255,255,255,.6);border-radius:50%;box-shadow:0 0 20px #fff}
h1{font-size:clamp(60px,15vw,95px);font-style:italic;line-height:.78;letter-spacing:-4px;font-weight:1000;margin:0 0 22px;text-shadow:0 7px 20px rgba(0,0,0,.35)}
h1 span{background:linear-gradient(100deg,#3cf9e1 10%,#a8e2ff 50%,#e68dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{font-size:10px;letter-spacing:2.5px;color:#bffcef;font-weight:1000;margin:0 0 16px}
.menu-intro{font-size:14px;line-height:1.6;color:#e4e7ff;font-weight:550;max-width:320px;margin:0 0 25px}
.primary-button{width:100%;max-width:310px;min-height:61px;padding:10px 22px;color:#08182b;background:linear-gradient(110deg,#4bffe3,#94fff0);border:0;border-radius:18px;font-weight:1000;font-size:16px;letter-spacing:1.7px;box-shadow:0 8px 0 #1d958f,0 13px 40px rgba(29,233,208,.22);display:flex;align-items:center;justify-content:center;gap:24px}
.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #1d958f}
.primary-button span{font-size:23px}
.best-line{margin:22px 0 0;font-size:11px;letter-spacing:1px;color:#c6c8ea}.best-line strong{color:#fff;font-size:17px;margin-left:8px}
.tiny-help{font-size:11px;font-weight:500;color:#a4aed4;line-height:1.5;margin:18px 0 0}
.bottom-version{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);color:#858cac;letter-spacing:1px;font-size:8px;font-weight:900}
.modal-overlay{background:rgba(4,6,26,.76);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.modal-card{border:1px solid rgba(255,255,255,.21);background:linear-gradient(145deg,rgba(36,34,90,.94),rgba(11,15,47,.96));width:100%;max-width:375px;padding:35px 28px 32px;border-radius:30px;box-shadow:0 24px 60px #05051f88;display:flex;flex-direction:column;align-items:center}
.modal-eyebrow{font-size:11px;letter-spacing:2.7px;color:var(--aqua);margin-bottom:14px;font-weight:950}.modal-card h2{font-style:italic;font-size:clamp(34px,9vw,48px);letter-spacing:-1px;margin:0 0 10px}.modal-card p{color:#c6c6e6;font-weight:500;font-size:14px;margin:0 0 28px}
.outline-button{margin-top:16px;background:transparent;border:1px solid #6b6a95;border-radius:15px;min-height:47px;padding:9px 16px;font-size:12px;letter-spacing:1.2px;width:100%}
.result-number{font-size:74px;font-weight:1000;line-height:1.05;color:var(--aqua);letter-spacing:-3px}.result-caption{font-size:10px;letter-spacing:2px;color:#b9c6dd}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;margin:28px 0}.result-grid>div{background:rgba(255,255,255,.06);border-radius:15px;padding:15px 8px;display:flex;flex-direction:column;gap:6px}.result-grid span{font-size:9px;letter-spacing:.8px;color:#acb6de}.result-grid strong{font-size:25px}
.world-alert{position:absolute;z-index:6;top:22%;left:12px;right:12px;text-align:center;color:white;text-shadow:0 3px 12px #0e043e;font-size:clamp(16px,5vw,26px);font-weight:1000;letter-spacing:1px;pointer-events:none;animation:appear .4s ease both}@keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.error-overlay{z-index:25;position:absolute;inset:0;background:#0c0c2c;padding:50px 28px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.error-overlay p{font-weight:500;line-height:1.6;color:#c9cbea}
@media (min-width:800px){.menu-stack{transform:scale(1.05)}.controls{bottom:22px}.control-button{width:90px;height:74px}#hud{left:28px;right:28px;top:25px}}
@media (max-height:730px){.portal-symbol{width:80px;height:80px;border-width:9px;margin-bottom:20px}h1{font-size:56px;margin-bottom:15px}.menu-intro{margin-bottom:14px;font-size:12px}.top-badge{font-size:8px}.primary-button{min-height:52px}.tiny-help{margin-top:12px}.bottom-version{font-size:7px}}
@media (max-height:550px){.top-badge,.bottom-version,.tiny-help{display:none}h1{font-size:45px}.portal-symbol{width:65px;height:65px;margin-bottom:10px}.menu-intro{margin-bottom:10px}.controls-line .control-button{height:56px;width:63px}.swipe-tip{display:none}}
@media (prefers-reduced-motion:reduce){.world-alert{animation:none}}

/* Sprint 2: persistent progression, daily goals, and cosmetic hangar. */
.combo-chip{border-radius:10px; padding:6px 9px; background:rgba(255,221,83,.19); border:1px solid #ffe55c; color:#ffe55c; font-size:11px; letter-spacing:.9px; margin-top:7px; font-weight:1000; animation:appear .18s ease both}
.combo-chip span{font-size:16px}
.home-progress{display:grid;grid-template-columns:1fr 1fr;max-width:310px;width:100%;gap:10px;margin:15px 0 7px}
.home-progress>div{border:1px solid rgba(255,255,255,.18);border-radius:15px;background:rgba(16,19,52,.66);display:flex;align-items:center;justify-content:space-between;padding:10px 13px;gap:10px}
.home-progress span{font-size:10px;color:#becae7;letter-spacing:1px}
.home-progress strong{font-size:17px;color:#ffe584}
.hub-button{max-width:310px;width:100%;min-height:49px;margin-top:7px;border:1px solid rgba(107,253,224,.55);border-radius:15px;background:rgba(67,252,221,.14);color:#d3fff7;font-size:12px;letter-spacing:.8px;font-weight:950;display:flex;align-items:center;justify-content:center;gap:12px}
.hub-button span{font-size:20px}
.hub-panel{border-radius:26px;width:min(100%,470px);background:linear-gradient(155deg,#24235b,#0d1230);border:1px solid rgba(255,255,255,.2);padding:24px 18px 22px;box-shadow:0 20px 54px #03041577;display:flex;flex-direction:column;align-items:stretch;text-align:left;margin:auto}
.hub-panel .modal-eyebrow{text-align:center;margin-bottom:7px}
.hub-panel h2{text-align:center;font-size:34px;margin:0 0 6px;font-style:italic;letter-spacing:-1px}
.hub-balance{text-align:center;color:#ffdf72;margin:0 0 15px;font-size:13px}.hub-balance strong{font-size:19px}
.hub-panel h3{font-size:11px;letter-spacing:2px;color:#67ffe7;margin:14px 0 9px}
.hub-hint{font-size:11px;line-height:1.55;font-weight:500;color:#b9c1df;margin:0 0 9px}
.mission-list,.skin-list{display:flex;flex-direction:column;gap:7px}
.mission-card,.skin-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;display:flex;align-items:center;gap:11px;justify-content:space-between}
.mission-main{flex:1;min-width:0}.mission-main strong{display:block;font-size:12px}.mission-main small{display:block;color:#b9c9ea;font-size:11px;margin-top:4px;font-weight:500}
.mission-track{height:4px;border-radius:10px;background:#393960;overflow:hidden;margin-top:9px}.mission-track>div{height:100%;background:linear-gradient(90deg,#39eedc,#d5ff8c);border-radius:10px}
.mission-reward{color:#ffe985;font-size:12px;white-space:nowrap;font-weight:900}
.skin-glyph{height:35px;min-width:35px;border:2px solid rgba(255,255,255,.35);border-radius:11px;background:var(--skin-color);box-shadow:0 0 16px var(--skin-color)}
.skin-info{flex:1;font-size:12px}.skin-info small{display:block;color:#b9c9ea;font-weight:500;font-size:10px;margin-top:4px}
.skin-buy{border:1px solid #91eadb;border-radius:10px;background:rgba(44,246,207,.15);color:#e9fffb;font-size:11px;padding:9px 12px;white-space:nowrap;font-weight:900}
.skin-buy:disabled{opacity:.5;cursor:not-allowed}.skin-card.is-equipped{border-color:#47fadd}
.reward-summary{font-size:11px!important;color:#ffeb8c!important;margin:-6px 0 18px!important;line-height:1.45!important}
#hangar-overlay{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 14px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
#hangar-overlay .outline-button{margin-top:22px}
@media(max-height:730px){.home-progress{margin:9px 0 4px}.hub-button{min-height:42px}.best-line{margin-top:11px}.hub-panel{padding:18px 15px}}

/* Sprint 3: one-thumb slide, optional turbo, in-game tutorial, sound preference. */
.controls-mid{flex:1;min-width:0;max-width:218px;gap:7px}
.ability-row,.action-row{width:100%;display:flex;align-items:stretch;gap:6px}
.ability-row>button,.action-row>button{flex:1;min-width:0;width:50%}
.ability-row .shield-button,.boost-button{pointer-events:auto;position:relative;background:rgba(15,14,40,.83);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(15px);border-radius:12px;height:42px;display:flex;align-items:center;justify-content:center;padding:5px 5px;overflow:hidden;font-size:9px;box-shadow:0 6px 20px rgba(0,0,0,.24);white-space:nowrap}
.ability-row .shield-button:disabled,.boost-button:disabled{opacity:.67}
.boost-button.ready{border-color:#ffe783;box-shadow:0 0 17px rgba(255,221,83,.28)}
#boost-fill{display:block;width:0;height:100%;background:#ffe066;transition:width .2s}
.boost-text{font-size:9px;font-weight:950;letter-spacing:0}
.action-row .jump-button,.slide-button{pointer-events:auto;background:rgba(132,92,255,.44);height:49px;border:1px solid rgba(255,255,255,.22);border-radius:15px;padding:0 3px;font-size:22px;font-weight:950;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.24);line-height:1}
.action-row .slide-button{background:rgba(44,188,228,.28)}
.action-row .jump-button span,.slide-button span{font-size:9px;letter-spacing:.3px;vertical-align:3px}
.action-row .jump-button:active,.slide-button:active,.slide-button.sliding{background:rgba(84,252,216,.43);transform:scale(.97)}
.sound-button{background:transparent;border:1px solid #696a94;border-radius:12px;color:#c5ccdf;font-size:10px;letter-spacing:1px;margin-top:10px;padding:9px 18px}
.tutorial-card{max-width:390px;padding:23px 20px}
.tutorial-card h2{font-size:31px}
.tutorial-card p{font-size:12px;line-height:1.45;margin:4px 0 15px}
.tutorial-grid{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;margin:8px 0 18px}
.tutorial-grid>div{border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.06);padding:11px 6px;display:flex;align-items:center;flex-direction:column;gap:5px}
.tutorial-grid strong{font-size:25px;color:#6afde8}.tutorial-grid span{font-size:10px;color:#cdd5ee;font-weight:650}
@media(max-width:375px){.controls{left:8px;right:8px}.controls-line{gap:6px}.control-button{width:56px;height:65px;border-radius:16px;font-size:41px}.action-row .jump-button span,.slide-button span{font-size:8px}.boost-text,.shield-text{font-size:8px}}
@media(max-height:730px){.sound-button{padding:5px 12px;font-size:9px}.controls{bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}}

/* Sprint 4: transparent portal perks, Sprint 5: long-term, non-paywalled progress. */
.world-perk{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#f8db76;margin:6px 0 0 5px;text-shadow:0 2px 8px #0b082d}
.milestone-list{display:flex;flex-direction:column;gap:7px}
.milestone-card{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;display:flex;align-items:center;gap:9px}
.milestone-card.is-complete{border-color:rgba(77,247,213,.46)}
.world-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.world-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:12px 10px;display:flex;flex-direction:column;gap:5px}
.world-card strong{font-size:11px;color:#f4f6ff}
.world-card small{font-size:10px;color:#bec6e4;font-weight:500;line-height:1.3}
.world-card.is-seen{border-color:rgba(98,255,226,.55)}
@media(max-width:360px){.world-card{padding:10px 7px}.milestone-card{padding:9px}.milestone-card .mission-reward{font-size:10px}}

/* Sprint 7: timed magnet feedback and easy-to-read countdown. */
.magnet-chip{margin-top:7px;padding:6px 11px;background:rgba(255,89,220,.18);border:1px solid rgba(255,132,230,.86);border-radius:12px;color:#ffd2f6;letter-spacing:.7px;font-size:11px;font-weight:900;box-shadow:0 0 12px rgba(255,80,220,.16)}
.magnet-chip span{font-size:14px;margin-left:5px;color:#fff}

/* Sprint 6: prevent text selection during touch gestures on the playing field. */
#game-stage, #game-stage canvas{user-select:none;-webkit-user-select:none}