:root { color-scheme: dark; font-family: Inter, ui-rounded, "Segoe UI", sans-serif; --ink:#f6f8ff; --muted:#9aa7c4; --blue:#77a7ff; --violet:#9c7cff; --panel:rgba(25,34,59,.78); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#090d19; overflow-x:hidden; }
body.event-mode{background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--event-primary) 35%,transparent),transparent 48%),linear-gradient(#07101dcc,#07101dcc),var(--event-art-image,linear-gradient(transparent,transparent)) center/cover fixed,var(--event-bg);}
body[data-theme="ocean"]{--blue:#4edbd1;--violet:#4f8deb}body[data-theme="sunset"]{--blue:#ff9b69;--violet:#d65ea8}body[data-theme="forest"]{--blue:#72d39a;--violet:#b2ca68}
button { font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #b9d2ff; outline-offset:3px; }
.connection-status { position:fixed; z-index:30; top:max(8px,env(safe-area-inset-top)); left:50%; transform:translate(-50%,-18px); padding:5px 11px; border-radius:20px; background:#244b42; color:#bff4dc; font-size:10px; opacity:0; pointer-events:none; transition:.25s; }.connection-status.offline { transform:translate(-50%,0); opacity:1; background:#5b3040; color:#ffd0db; }
.app-shell { width:min(100%,520px); min-height:100vh; margin:auto; background:radial-gradient(circle at 50% -10%,#25365f 0,#10182c 36%,#090d19 85%); position:relative; overflow:hidden; box-shadow:0 0 80px #000; }
.screen { display:none; min-height:100vh; padding:max(18px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom)); }
.screen.active { display:block; animation:fade .3s ease; }
@keyframes fade { from { opacity:0; transform:translateY(5px); } }
.topbar { height:70px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; }
.hero { height:98px; padding:8px 5px 0; }
.eyebrow { margin:0; letter-spacing:.28em; font-size:10px; color:#9fb4dc; font-weight:700; }
h1 { margin:2px 0 0; font-size:42px; letter-spacing:.05em; line-height:1; background:linear-gradient(120deg,#fff,#8db7ff 60%,#b995ff); color:transparent; background-clip:text; }
h2 { margin:0; font-size:18px; }
.round-button { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); font-size:24px; cursor:pointer; backdrop-filter:blur(10px); }
.round-button:active { transform:scale(.94); }
.top-actions { display:flex; gap:7px; }
#game-screen .topbar { display:grid; grid-template-columns:95px 1fr 95px; } #game-screen .top-actions { justify-content:flex-end; }
.progress-card { border:1px solid rgba(255,255,255,.09); background:var(--panel); padding:15px 17px; border-radius:19px; backdrop-filter:blur(16px); position:relative; z-index:2; }
.progress-card>div:first-child { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
.progress-card strong { color:var(--ink); }
.progress-track { height:4px; background:#27314c; border-radius:4px; margin-top:12px; overflow:hidden; }
.progress-track i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--blue),var(--violet)); box-shadow:0 0 10px var(--blue); transition:width .35s ease; }
.play-current{width:100%;margin-top:12px;padding:10px 12px;border:1px solid #718bc055;border-radius:12px;background:#263554;color:#dce8ff;font-size:11px;font-weight:800}.play-current:active{transform:scale(.985)}
.resume-card{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;margin-top:12px;padding:12px 12px 12px 15px;border:1px solid #52699a;border-radius:17px;background:linear-gradient(120deg,#21365e,#322a5d);box-shadow:0 10px 28px #0004}.resume-card[hidden]{display:none}.resume-card div{display:grid;gap:3px}.resume-card small{color:#9db3dc;font-size:8px;letter-spacing:.13em}.resume-card strong{font-size:13px}.resume-card button{border:0;border-radius:11px;padding:9px 12px;background:#7197ee;font-size:11px;font-weight:800}.resume-card .resume-dismiss{padding:7px 9px;background:transparent;color:#96a4c1;font-size:18px}
.world { position:relative; min-height:730px; padding:35px 18px 70px; }
/* An ascending route: physical positions, not a reversed button grid. */
#map-screen.active{display:flex;flex-direction:column;height:100dvh;min-height:0;padding-bottom:max(12px,env(safe-area-inset-bottom));animation:none}
#map-screen .hero{height:78px;flex:none;padding:0 5px}
#map-screen .hero h1{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:32px;letter-spacing:.12em;background:none;color:#eef5ff}
#map-screen .hero .eyebrow{font-size:9px;letter-spacing:.18em}
#map-screen .progress-card{flex:none;background:transparent;border:0;padding:10px 6px 12px;backdrop-filter:none}
#map-screen .progress-track{height:3px;margin-top:9px}
#map-screen .progress-track i{background:#78dccc}
#map-screen .play-current{background:#f1ce8b;color:#262b3b;border:0;font-size:13px;padding:13px;border-radius:14px;margin-top:14px;box-shadow:0 4px 0 #9d7843,0 8px 22px #e5b05d15}
#map-screen .resume-card{flex:none;margin:0 0 8px;padding:8px 10px}
.map-direction{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 5px;color:#9eacc7;font-size:10px;flex:none}
.map-direction button{background:transparent;border:0;color:#c1d5f5;font-size:10px;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
#map-screen .world{flex:1;min-height:120px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#34445f transparent;padding:0;margin:0 -10px;background:radial-gradient(ellipse at 25% 70%,#21465a44,transparent 55%);mask-image:linear-gradient(transparent,#000 25px,#000 calc(100% - 20px),transparent)}
#map-screen .level-path{display:block;position:relative;width:100%;background-image:radial-gradient(circle at 17px 23px,#adc9e52b 1px,transparent 1.5px),radial-gradient(circle at 80px 92px,#adc9e51c 1px,transparent 1.5px);background-size:109px 173px,157px 211px}
#map-screen .level-path:before{display:none}
.map-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#455773;stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.map-trail .travelled{stroke:#78dccc;stroke-dasharray:none;stroke-width:3;filter:drop-shadow(0 0 5px #78dccc44)}
.map-stop{position:absolute;transform:translate(-50%,-50%);width:104px;height:112px;background:none;border:0;padding:0;display:flex;align-items:center;flex-direction:column;justify-content:center;cursor:pointer;z-index:1}
.map-orbit{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:23px;background:linear-gradient(145deg,#3b547a,#263953);border:1px solid #7996bf;box-shadow:0 6px 0 #142137,0 10px 24px #0006,inset 0 1px #ffffff20;transform:rotate(-9deg)}
.map-orbit b{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:25px;transform:rotate(9deg)}
.map-orbit i{position:absolute;right:-4px;bottom:-4px;border-radius:50%;width:20px;height:20px;font-style:normal;font-size:12px;background:#23344c;display:grid;place-items:center;border:1px solid #5e7899}
.map-stop small{margin-top:12px;white-space:nowrap;font-size:10px;color:#adbeda}
.map-stop.completed .map-orbit{background:linear-gradient(145deg,#397c7d,#224b59);border-color:#83daca;box-shadow:0 6px 0 #122f3b,0 8px 22px #0005}
.map-stop.completed .map-orbit i{background:#8be2c9;color:#173642;border:0}
.map-stop.completed small{color:#f1ce8b;letter-spacing:3px;font-size:13px}
.map-stop.current{z-index:2}
.map-stop.current .map-orbit{width:76px;height:76px;border-radius:27px;color:#252d40;background:linear-gradient(145deg,#fff0c7,#edbc69);border:2px solid #fff0c7;box-shadow:0 7px 0 #8b6942,0 0 0 9px #ecc98412,0 0 0 19px #ecc98408,0 14px 36px #0008}
.map-stop.current em{position:absolute;top:-32px;font-size:10px;font-style:normal;white-space:nowrap;background:#f2ce8b;color:#2a3040;padding:5px 11px;border-radius:8px}
.map-stop.current small{color:#f2ce8b}
.map-stop.locked{cursor:default}
.map-stop.locked .map-orbit{background:#1c2a43;border-color:#405673;box-shadow:0 5px 0 #101a2d;color:#a8b8ce}
.map-stop.distant .map-orbit{width:42px;height:42px;border-radius:16px;background:#172237;border:1px solid #36465f;box-shadow:none;color:#8494ac}
.map-stop.distant .map-orbit b{font-size:16px}
.map-stop.distant small{font-size:9px;color:#74849d}
.map-stop.nearby .map-orbit{background:#273c58;border-color:#6883a5;color:#c5d5e9}
.map-discovery{position:absolute;top:112px;display:flex;align-items:center;justify-content:center;gap:7px;min-width:150px;pointer-events:none;color:#aabdd5;font-size:11px;white-space:nowrap}
.map-discovery>svg{width:31px;height:31px;fill:currentColor;flex:none;opacity:.65}
.map-discovery>span{text-align:left}
.map-discovery small{display:block!important;margin:3px 0 0!important;letter-spacing:0!important;font-size:9px!important;color:#8899b5!important}
.map-stop.completed .map-discovery{color:#88dece}
.map-stop.current .map-discovery{color:#f1ce8b}
.map-stop.current .map-discovery>svg{opacity:1}
.map-stop.distant{opacity:.64}
#map-screen .level-path{background-image:radial-gradient(ellipse at 85% 40%,#6776ae12,transparent 55%),radial-gradient(circle at 17px 23px,#adc9e52b 1px,transparent 1.5px);background-size:100% 780px,109px 173px}
#map-screen .hero .eyebrow{letter-spacing:.03em;text-transform:none}
#map-screen .bottom-nav button.active{color:#f1ce8b}
#map-screen .map-direction button{border:1px solid #526785;border-radius:20px;padding:0 12px;text-decoration:none}
@media(max-height:700px){#map-screen .hero{height:55px}#map-screen .progress-card{padding-top:4px;padding-bottom:5px}#map-screen .play-current{margin-top:8px;padding:10px}.map-direction{padding:3px 5px}}
.map-stop:not(:disabled):active .map-orbit{translate:0 3px}
.map-summit{position:absolute;top:18px;left:0;width:100%;text-align:center;color:#9fb3d2;font-size:34px}
.map-summit small{display:block;font-size:11px;margin-top:6px}
#map-screen .bottom-nav{position:relative;left:auto;bottom:auto;transform:none;width:100%;flex:none;margin-top:10px;border-radius:20px}
@media(min-width:700px){#map-screen.active{height:calc(100dvh - 40px)}}
#map-screen .bottom-nav button { min-height:44px; }
.bottom-nav { position:sticky; z-index:6; bottom:10px; display:grid; grid-template-columns:repeat(6,1fr); padding:8px 4px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(17,25,44,.92); backdrop-filter:blur(18px); box-shadow:0 12px 40px #0008; }.bottom-nav button { border:0; background:none; color:#71809e; display:grid; gap:3px; justify-items:center; cursor:pointer; font-size:8px; }.bottom-nav b { font-size:18px; }.bottom-nav .active { color:#91b7ff; }
.glow { position:absolute; width:230px; height:230px; filter:blur(65px); border-radius:50%; opacity:.13; }
.glow-one { background:#377dff; top:100px; left:-100px; }.glow-two { background:#9a63ff; top:410px; right:-130px; }
.level-path { display:grid; grid-template-columns:repeat(3,1fr); gap:26px 34px; align-items:center; position:relative; }
.level-path:before { content:""; position:absolute; inset:25px 17% 30px; background:linear-gradient(90deg,transparent 47%,rgba(132,158,215,.2) 49%,rgba(132,158,215,.2) 51%,transparent 53%); z-index:0; }
.level-node { width:70px; height:70px; justify-self:center; border-radius:25px; border:1px solid rgba(255,255,255,.21); background:linear-gradient(145deg,#80b7ff,#5e76e9); box-shadow:0 10px 28px rgba(63,105,219,.35),inset 0 1px #fff8; cursor:pointer; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(45deg); }
.level-node>* { transform:rotate(-45deg); }.level-node span { font-size:21px; font-weight:800; line-height:1; }.level-node small { font-size:8px; margin-top:5px; color:#e8efff; }
.level-node:nth-child(6n+2) { transform:translateY(18px) rotate(45deg); }.level-node:nth-child(6n+3) { transform:translateY(44px) rotate(45deg); }.level-node:nth-child(6n+4) { transform:translateY(44px) rotate(45deg); }.level-node:nth-child(6n+5) { transform:translateY(18px) rotate(45deg); }
.level-node.medium { background:linear-gradient(145deg,#79d4d0,#4b84bd); }.level-node.hard { background:linear-gradient(145deg,#bd86ff,#7457d4); }.level-node.hardcore { background:linear-gradient(145deg,#ff8a83,#c84076); }
.level-node.locked { background:#20283c; color:#61708d; border-color:#2f3952; box-shadow:none; }
.level-node.current{outline:3px solid #d9e7ff;outline-offset:5px;animation:current-level 1.8s ease-in-out infinite}@keyframes current-level{50%{outline-color:#9b81ff;box-shadow:0 10px 34px #775cff88,inset 0 1px #fff8}}
.title-center { text-align:center; }.badge { display:inline-block; margin-top:5px; padding:3px 9px; border-radius:20px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#9ff1d5; background:#185041; }.badge.medium{color:#9fe9f1;background:#164650}.badge.hard{color:#d5bcff;background:#412a68}.badge.hardcore{color:#ffc1cf;background:#61273b}.theme-label{display:block;margin-top:4px;color:#8392b3;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 22px; }
.stats div { text-align:center; padding:10px 4px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.06); }.stats small { display:block; font-size:8px; letter-spacing:.14em; color:#71809e; }.stats strong { font-size:16px; }
.pvp-live{margin:-12px 0 10px;padding:8px 12px;border:1px solid #445375;border-radius:12px;background:#202b45;color:#b9c8e5;text-align:center;font-size:11px;transition:.2s}.pvp-live.connected{border-color:#38675f;color:#acf1db}.pvp-live.reconnecting{border-color:#745742;color:#ffd5a9}.pvp-live.urgent{border-color:#8c4761;background:#392238;color:#ffc0d1;animation:available-pulse 1s ease-in-out infinite}.pvp-live.forfeit{border-color:#3b745b;color:#aaf0ca}
.board-stage { width:100%; height:min(60dvh,calc(100dvh - 370px),640px); min-height:260px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:28px; background:radial-gradient(circle,rgba(99,132,205,.13),transparent 70%); touch-action:none; cursor:grab; }
.board-stage:active { cursor:grabbing; }
.board { width:92%; height:92%; flex:none; overflow:visible; transform-origin:center; }
.shape-backdrop path { fill:url(#shape-gradient); opacity:.055; stroke:#91a8e5; stroke-width:2; transition:opacity .7s,filter .7s; }
.arrow-vector { cursor:pointer; transform-box:fill-box; transform-origin:center; }
.arrow-vector { pointer-events:none; }
.arrow-hit { fill:none; stroke:transparent; stroke-width:48; stroke-linecap:round; stroke-linejoin:round; pointer-events:stroke; }
.arrow-line { fill:none; stroke:var(--event-primary,#83adff); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
.arrow-head { fill:#f0f5ff; stroke:#f0f5ff; stroke-width:2; }
.departing .arrow-head{filter:drop-shadow(0 0 9px #d7edff88)}
.precise-time,#time{font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.03em}
.shield-explainer{border-left:2px solid #f1ce8b;padding:8px 14px;margin:0 0 18px;color:#f1ce8b}.shield-explainer p{font-size:12px;color:#acbad2;line-height:1.6}.oauth-pending button:disabled{opacity:.5}.oauth-pending{margin-bottom:25px}
#time{font-size:clamp(12px,3.7vw,17px)}
.ranking-link{display:block;margin:0 auto 16px;background:transparent;border:0;color:#d8c190;text-decoration:underline;text-underline-offset:5px;min-height:40px;cursor:pointer}
.record-tabs{display:flex;gap:8px;margin:16px 0}.record-tabs button{flex:1;padding:10px;border:1px solid #465574;background:transparent;border-radius:10px}.record-tabs .selected{border-color:#f1ce8b;color:#f1ce8b}
#level-records{width:min(94vw,470px);box-sizing:border-box}#level-records .leaderboard article{padding:12px 8px;gap:5px;font-size:12px}#records-list{max-height:45vh;overflow:auto}
#result-record{font-variant-numeric:tabular-nums;color:#f1ce8b}
.zoom-controls button:disabled{opacity:.35;cursor:default}
.map-trail{stroke-dasharray:none;stroke-width:1.2}.map-trail .travelled{stroke-width:1.8}.constellation-star{stroke:#d4e6ff;stroke-width:2;filter:none}
#map-screen .map-orbit{border-radius:50%;transform:none;box-shadow:0 0 0 6px #7ba3d00a;background:#1b2a43}
#map-screen .map-orbit b{transform:none;font-weight:600}
#map-screen .map-stop.completed .map-orbit{background:#153d49;box-shadow:0 0 22px #78dccc19}
#map-screen .map-stop.current .map-orbit{border-radius:50%;background:#f1ce8b;box-shadow:0 0 0 9px #f1ce8b0e,0 0 42px #f1ce8b26}
#map-screen .map-stop.distant .map-orbit{border:0;background:none;box-shadow:none;color:#6a7a98}
.tone-1 .arrow-line { stroke:var(--event-secondary,#a47eff); }.tone-1 .arrow-head { stroke:#f4efff; }.tone-2 .arrow-line { stroke:color-mix(in srgb,var(--event-primary,#70d5d2) 58%,var(--event-secondary,#70d5d2)); }.tone-2 .arrow-head { stroke:#e9ffff; }
.arrow-vector.available .arrow-line { animation:available-pulse 1.35s ease-in-out infinite; }
.arrow-vector.tutorial-target .arrow-line{stroke:#ffe28a;filter:drop-shadow(0 0 11px #ffd970);animation:tutorial-target 1s ease-in-out infinite}@keyframes tutorial-target{50%{stroke-width:14;filter:drop-shadow(0 0 18px #ffe38d)}}
@keyframes available-pulse { 50% { filter:drop-shadow(0 0 7px rgba(213,235,255,.9)); stroke-opacity:.72; } }
@media(hover:hover) and (pointer:fine){.arrow-vector:hover .arrow-line { filter:drop-shadow(0 0 8px currentColor); }}.arrow-vector.collision { animation:shake .35s; }.arrow-vector.collision .arrow-line { stroke:#ff5578; }
.zoom-controls { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; position:relative; z-index:3; }.zoom-controls button { height:38px; min-width:42px; padding:0 13px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.05); color:#a8b6d3; cursor:pointer; }.zoom-controls button:first-child,.zoom-controls button:last-child { font-size:22px; }.zoom-controls span { color:#eef3ff; font-weight:700; }
@keyframes shake { 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
.hint { text-align:center; color:#7f8dab; font-size:12px; line-height:1.65; margin:14px 0; }
.practice-coach{margin:-10px 0 12px;padding:10px 14px;border:1px solid #796b45;border-radius:14px;background:#29263a;color:#ffe6a5;text-align:center;font-size:12px;line-height:1.45;box-shadow:0 8px 24px #0004}
@media(max-width:699px){.zoom-controls{display:none}.practice-coach{margin-top:-14px}}
.result-overlay { position:absolute; inset:0; z-index:10; background:rgba(5,8,16,.75); backdrop-filter:blur(13px); display:flex; align-items:flex-end; visibility:hidden; opacity:0; transition:.25s; }.result-overlay.visible { visibility:visible; opacity:1; }
.victory .shape-backdrop path { opacity:.7; stroke-width:0;filter:none;fill:#779cda; }
.victory .shape-backdrop{filter:drop-shadow(0 0 20px #779cda55)}
.victory .board-stage,.victory .zoom-controls,.victory>.hint,.victory>#level-ranking,.victory>.topbar,.victory>.stats,.victory>.pvp-live{visibility:hidden;pointer-events:none}
#result-figure{display:none;position:absolute;top:12px;left:18px;right:18px;align-items:center;justify-content:center;pointer-events:none;color:#97baf1;filter:drop-shadow(0 0 20px #779cda33)}
.victory #result-figure{display:flex}#result-figure svg{width:100%;height:100%;max-width:420px;fill:currentColor}
.result-navigation{display:flex;gap:10px}.result-navigation>button{flex:1;min-width:0;padding-left:8px;padding-right:8px}
.victory .result-overlay { background:linear-gradient(180deg,transparent 15%,rgba(5,8,16,.12) 50%,rgba(5,8,16,.72)); backdrop-filter:none; }
.victory .result-card { background:linear-gradient(180deg,rgba(24,34,58,.82),rgba(12,18,32,.96)); }
.result-card { width:100%; padding:42px 28px max(32px,env(safe-area-inset-bottom)); border-radius:34px 34px 0 0; text-align:center; background:linear-gradient(180deg,#202b48,#11182a); border-top:1px solid rgba(255,255,255,.15); transform:translateY(30px); transition:.3s; }.visible .result-card { transform:none; }
.result-icon { display:grid; place-items:center; width:76px; height:76px; margin:-82px auto 15px; border-radius:50%; font-size:38px; background:linear-gradient(145deg,#80b7ff,#8964df); box-shadow:0 12px 45px #526ed777; }.result-stars { color:#ffd66e; font-size:29px; letter-spacing:5px; min-height:35px; margin:5px; }.result-card p:not(.result-stars) { color:var(--muted); font-size:13px; }
.primary,.secondary { width:100%; min-height:52px; margin-top:10px; border-radius:16px; border:0; cursor:pointer; font-weight:700; }.primary { background:linear-gradient(110deg,#6b9df6,#8e69e5); box-shadow:0 9px 24px #5067c744; }.secondary { background:transparent; border:1px solid #39445f; color:#aeb9d0; }
dialog { width:min(calc(100% - 36px),420px); border:1px solid #384562; border-radius:28px; padding:28px; color:var(--ink); background:#151e33; text-align:center; box-shadow:0 30px 100px #000; } dialog::backdrop { background:#050812cc; backdrop-filter:blur(7px); }.tutorial-icon { display:grid;place-items:center;width:76px;height:76px;margin:8px auto 18px;border-radius:25px;background:linear-gradient(145deg,#2e4879,#3a2f6e);font-size:44px;color:#b7ceff;box-shadow:inset 0 1px #ffffff24,0 13px 35px #0005; } dialog p { color:var(--muted); line-height:1.55; font-size:14px; }
.tutorial-skip{position:absolute;top:14px;right:16px;border:0;background:transparent;color:#8493b1;font-size:11px}.tutorial-dots{display:flex;justify-content:center;gap:7px;margin:22px 0}.tutorial-dots i{width:7px;height:7px;border-radius:50%;background:#3a4560;transition:.2s}.tutorial-dots i.active{width:22px;border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--violet))}.tutorial-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:9px}.tutorial-actions button{margin:0}
.pause-note{display:inline-block;margin:8px 0 14px;padding:5px 10px;border-radius:20px;background:#253e49;color:#a9edda;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.pause-note[hidden]{display:none}
.audio-options { display:grid; gap:10px; margin:24px 0 8px; }.audio-option { width:100%; min-height:56px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; border:1px solid #394765; border-radius:16px; background:#202b45; cursor:pointer; }.audio-option strong { min-width:58px; padding:6px 10px; border-radius:20px; color:#aef0d8; background:#1d594a; font-size:12px; }.audio-option[aria-pressed="false"] strong { color:#9aa7c4; background:#30394e; }
.language-setting{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,1.25fr);align-items:center;gap:12px;margin:10px 0 16px;padding:12px 17px;border:1px solid #394765;border-radius:16px;background:#202b45;text-align:left;color:#dce7fa;font-size:13px}.language-setting select{min-width:0;width:100%;padding:10px 28px 10px 10px;border:1px solid #52617e;border-radius:11px;background:#11192b;color:#eef3ff;font:inherit}.language-setting span,.audio-option span{min-width:0;overflow-wrap:anywhere}.audio-option{height:auto;padding-block:10px;gap:12px}.audio-option strong{flex:0 0 auto}.primary,.secondary,.play-current,.bottom-nav button,.meta-list button{height:auto;min-height:42px;white-space:normal;overflow-wrap:anywhere;line-height:1.25}.title-center{min-width:0}.title-center h2,.theme-label{overflow-wrap:anywhere}.bottom-nav span{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center;line-height:1.15}
.notification-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 4px 6px;padding-left:12px;border-left:2px solid #34415e}.notification-options .compact{min-height:48px;padding-inline:10px;font-size:11px}.notification-options .compact strong{min-width:42px;padding-inline:7px;font-size:10px}.notification-options .compact:disabled{opacity:.48}
html[dir="rtl"] .language-setting,html[dir="rtl"] .meta-dialog{text-align:right}html[dir="rtl"] .topbar,html[dir="rtl"] .progress-card,html[dir="rtl"] .meta-list article,html[dir="rtl"] .profile-hero{direction:rtl}html[dir="rtl"] .map-discovery>span{text-align:right}html[dir="rtl"] .dialog-toolbar{justify-content:flex-start}html[dir="rtl"] .tutorial-skip{right:auto;left:16px}
@media(max-width:360px){.language-setting,.notification-options{grid-template-columns:1fr}.bottom-nav{gap:0}.bottom-nav button{padding-inline:1px;font-size:7px}.audio-option{padding-inline:12px}.audio-option strong{min-width:48px}}
.meta-dialog { max-height:min(84vh,720px); overflow:auto; text-align:left; }.meta-dialog h2 { font-size:25px; margin:5px 0 18px; }.meta-balance { display:flex; justify-content:space-between; margin:12px 0 18px; padding:13px 15px; border-radius:14px; background:#202b45; color:#aebad3; }.meta-balance strong { color:#ffd879; }.meta-list { display:grid; gap:9px; }.meta-list article { display:flex; align-items:center; gap:12px; padding:14px; border-radius:15px; background:#202a42; border:1px solid #303c59; }.meta-list article>div { flex:1; }.meta-list small,.profile-hero small,.achievement-grid small { display:block; margin-top:5px; color:#8897b5; font-size:11px; }.meta-list button { border:0; padding:8px 10px; border-radius:10px; background:#745fd1; font-size:11px; }.meta-list button:disabled { background:#30384d; color:#68748e; }.meta-progress { height:4px; margin-top:9px; overflow:hidden; border-radius:4px; background:#303b55; }.meta-progress i { display:block;height:100%;background:linear-gradient(90deg,#71d5d1,#9c7cff); }.leaderboard article { display:grid; grid-template-columns:36px 1fr auto; }.leaderboard .me { border-color:#836fe2;background:#2a2850; }.meta-note { text-align:center;font-size:11px!important; }.profile-hero { display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#334b7a,#352d68); }.profile-hero>span { display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#89adff;font-size:24px; }.profile-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 20px; }.profile-stats div { text-align:center;padding:12px 4px;border-radius:13px;background:#202a42; }.profile-stats small { display:block;color:#8290aa;font-size:9px; }.achievement-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.achievement-grid article { min-height:110px;padding:13px;border-radius:15px;background:#1b2338;opacity:.45; }.achievement-grid article.unlocked { opacity:1;border:1px solid #7563cd; }.achievement-grid span { display:block;font-size:25px;margin-bottom:7px; }.event-art { height:190px;display:grid;place-items:center;position:relative;margin:10px 0 18px;border-radius:22px;background:radial-gradient(circle,color-mix(in srgb,var(--event-secondary) 48%,transparent),transparent 60%),var(--event-bg);font-size:84px;color:var(--event-primary); }.event-art span,.event-art i { position:absolute;font-size:28px;color:var(--event-secondary); }.event-art span{top:28px;left:48px}.event-art i{right:52px;bottom:35px}.meta-dialog>.secondary { margin-top:12px; }
.pvp-versus { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:22px 0;padding:20px;border-radius:22px;background:linear-gradient(135deg,#253d68,#39285f); }.pvp-versus span { display:grid;place-items:center;width:62px;height:62px;margin:auto;border-radius:50%;background:#80a8ff;font-size:30px; }.pvp-versus span:last-child { background:#9d70e5; }.pvp-versus b { color:#ccd8f0; }
.league-card { display:flex;align-items:center;gap:13px;margin:12px 0 18px;padding:14px;border:1px solid #485a84;border-radius:16px;background:linear-gradient(135deg,#202d4b,#29244e); }.league-card>span { display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:#806de0;color:#fff;font-size:22px; }.league-card>div { flex:1;min-width:0; }.league-card small { display:block;margin-top:4px;color:#9dabc6;font-size:10px; }.league-card.compact { margin-top:0; }
.streak-calendar { display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 8px; }.streak-calendar div { display:grid;place-items:center;gap:3px;padding:9px 2px;border:1px solid #303b58;border-radius:12px;background:#192238;color:#8290aa; }.streak-calendar div.claimed { border-color:#4cae91;background:#193d3b;color:#bdf6df; }.streak-calendar div.next { border-color:#d99d4b;background:#45351f;color:#ffe0a6;box-shadow:0 0 16px #e7a74522; }.streak-calendar small { font-size:9px; }.streak-hint { margin:0 0 18px;text-align:center;color:#8f9db8;font-size:10px; }
.shop-preview-status{margin:-8px 0 12px!important;padding:9px 11px;border-radius:11px;background:#19243b;color:#91a5c8!important;text-align:center;font-size:10px!important}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop-grid article{display:grid;gap:9px;padding:11px;border:1px solid #303b57;border-radius:16px;background:#1d263d;transition:border-color .2s,transform .2s}.shop-grid article.active{border-color:var(--violet);box-shadow:inset 0 0 18px #795fff22}.shop-grid article.previewing{border-color:var(--swatch-a);transform:translateY(-2px);box-shadow:0 8px 24px color-mix(in srgb,var(--swatch-a) 20%,transparent)}.theme-swatch{height:58px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--swatch-a),var(--swatch-b));box-shadow:inset 0 1px #fff5}.shop-grid .theme-swatch span{font-size:30px;color:white;text-shadow:0 2px 8px #0006}.shop-card-actions{display:grid;gap:5px}.shop-grid button,.iap-card button{padding:8px;border:0;border-radius:9px;background:#6653bd;color:white}.shop-grid .preview-button{background:#29344e;color:#bdc9df}.shop-grid button:disabled,.iap-card button:disabled{background:#30394e;color:#8994aa}.iap-card{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:15px;border-radius:15px;background:#202a42}.iap-card small{display:block;margin-top:4px;color:#8190ad}
@media (min-width:700px) { body{padding:20px}.app-shell{min-height:calc(100vh - 40px);border-radius:32px}.screen{min-height:calc(100vh - 40px)} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.profile-actions{display:grid;gap:8px}.transfer-code{display:block;min-height:28px;margin:12px 0;padding:13px;border-radius:12px;background:#11182a;color:#9fe3df;text-align:center;font-weight:800;letter-spacing:2px}.transfer-input{display:grid;gap:7px;margin:14px 0;color:var(--muted);font-size:12px}.transfer-input input{padding:13px;border:1px solid #3a4663;border-radius:12px;background:#11182a;color:white;text-transform:uppercase;letter-spacing:1px}
.achievement-summary{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding:15px;border:1px solid #374564;border-radius:18px;background:linear-gradient(135deg,#263553,#29264d)}.achievement-summary>div:last-child{display:grid;gap:5px}.achievement-summary small{color:var(--muted);font-size:11px}.achievement-ring{--achievement-percent:0;display:grid;place-items:center;align-content:center;flex:0 0 72px;height:72px;border-radius:50%;background:radial-gradient(circle at center,#202a42 56%,transparent 58%),conic-gradient(#7bdad4 calc(var(--achievement-percent)*1%),#39435b 0)}.achievement-ring strong{font-size:22px}.achievement-ring small{margin:0}.achievement-list{display:grid;gap:9px}.achievement-list article{display:grid;grid-template-columns:42px 1fr 38px;align-items:center;gap:10px;padding:13px;border:1px solid #303c59;border-radius:16px;background:#1b2338;opacity:.72}.achievement-list article.unlocked{border-color:#7563cd;background:linear-gradient(135deg,#242d49,#302955);opacity:1}.achievement-list article>span{font-size:28px;text-align:center}.achievement-list article>div{min-width:0}.achievement-list article b{display:block}.achievement-list article p{margin:4px 0 0;color:#9ba8c2;font-size:11px}.achievement-list article>i{color:#8fded8;font-style:normal;font-size:12px;font-weight:800;text-align:right}.achievement-list .achievement-category{margin:0 0 3px;color:#7888a8;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.achievement-list .meta-progress{margin-top:8px}.achievement-list .meta-progress+small{margin-top:5px;color:#7888a8}.achievement-back{width:100%;margin-top:12px}
.daily-cycle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.daily-cycle>div{display:grid;gap:5px;padding:13px;border:1px solid #34415f;border-radius:14px;background:#182138}.daily-cycle small{color:#7f8eaa;font-size:9px;letter-spacing:.1em}.daily-cycle strong{color:#9fe3df;font-size:15px;font-variant-numeric:tabular-nums}
.reward-toasts{position:fixed;z-index:200;top:max(14px,env(safe-area-inset-top));left:50%;width:min(calc(100% - 24px),430px);transform:translateX(-50%);pointer-events:none}.reward-toasts article{display:flex;align-items:center;gap:13px;padding:13px 16px;border:1px solid rgba(159,227,223,.55);border-radius:18px;background:linear-gradient(135deg,rgba(31,46,73,.98),rgba(53,40,91,.98));box-shadow:0 16px 50px rgba(0,0,0,.45),0 0 28px rgba(117,99,205,.22);opacity:0;transform:translateY(-24px) scale(.96);transition:opacity .28s ease,transform .28s ease}.reward-toasts article.visible{opacity:1;transform:translateY(0) scale(1)}.reward-toasts article>span{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:15px;background:linear-gradient(135deg,#6ddbd4,#9578ff);color:#10182c;font-size:25px}.reward-toasts article>div{display:grid;gap:2px}.reward-toasts small{color:#8fded8;font-size:9px;font-weight:800;letter-spacing:.12em}.reward-toasts b{font-size:15px}.reward-toasts em{color:#ffd879;font-size:11px;font-style:normal}
@media (prefers-reduced-motion:reduce){.reward-toasts article{transition:none;transform:none}}
.data-actions{display:grid;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid #303a55}.button-link{box-sizing:border-box;text-align:center;text-decoration:none}.danger{width:100%;padding:13px;border:1px solid #813f55;border-radius:12px;background:#3b1f2a;color:#ffb7c8;font-weight:700}
.legal-page{min-height:100vh;padding:24px;background:#09101f;color:#edf3ff}.legal-card{max-width:720px;margin:0 auto;padding:clamp(22px,5vw,48px);border:1px solid #2d3955;border-radius:28px;background:#131d32;box-shadow:0 24px 80px #0007}.legal-card h1{font-size:clamp(30px,7vw,46px)}.legal-card h2{margin-top:28px;font-size:19px}.legal-card p{color:#afbdd7;line-height:1.65}.legal-card .button-link{display:block;margin-top:30px}
.event-archive{display:grid;gap:9px}.event-archive article{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid #303c59;border-radius:15px;background:#1b253c}.event-archive article>div{flex:1}.event-archive small{display:block;margin-top:5px;color:#8e9cba;font-size:10px}.event-archive button{padding:8px 11px;border:0;border-radius:10px;background:#705ed0}.empty-event{padding:18px;border:1px dashed #35425f;border-radius:18px;text-align:center}
#active-event{display:grid;gap:14px}.active-event-card{padding:14px;border:1px solid #34415f;border-radius:20px;background:#182238}.active-event-card h2{margin-top:0}.active-event-card .event-art{height:150px;margin-bottom:14px;font-size:68px}.active-event-card .event-art span,.active-event-card .event-art i{font-size:24px}
.identity-form{display:grid;gap:10px;margin:12px 0 16px;padding:13px;border-radius:15px;background:#1b2338}.identity-form label{display:grid;gap:6px;color:#aebad3;font-size:11px}.identity-form input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #35415e;border-radius:11px;background:#10182a;color:#fff;font:inherit}.avatar-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.avatar-picker button{min-width:0;padding:8px 2px;border:1px solid #35415e;border-radius:9px;background:#222d47}.avatar-picker button.selected{border-color:#86b1ff;background:#3b4773;box-shadow:0 0 0 2px rgba(121,169,255,.18)}
.leaderboard .own-rank{margin-top:12px;border-top:2px solid #806de0}.board-total{margin:0 0 8px;text-align:right;color:#8594b1;font-size:10px}
:root{--atlas-night:#101a32;--atlas-mist:#bacbe5;--atlas-ice:#70d6d3;--atlas-gold:#edcf82;--atlas-paper:#edf3ff}
#chapter-nav{display:flex;gap:8px;overflow:auto;padding:8px 20px 12px;flex-shrink:0}
#chapter-nav button{flex:0 0 auto;text-align:left;border:1px solid #728aad44;border-radius:12px;padding:10px 14px;background:#14213c;color:var(--atlas-paper);font:inherit;font-size:13px;min-height:54px}
#chapter-nav button small{display:block;color:var(--atlas-mist);font-size:10px;margin-top:5px}
#chapter-nav button.selected{border-color:var(--atlas-ice);box-shadow:inset 3px 0 var(--atlas-ice)}
#chapter-nav button:disabled{opacity:.55;filter:blur(.25px)}
.chapter-unknown{display:grid;place-items:center;min-width:70px;color:var(--atlas-mist)}
.chapter-clouds{position:absolute;top:0;left:0;right:0;height:120px;display:grid;place-content:center;text-align:center;color:#c3d1ea;background:radial-gradient(ellipse at 20% 0,#91a9cd55,transparent 65%),radial-gradient(ellipse at 80% 15%,#8294ba55,transparent 70%);font-size:44px;pointer-events:none}
.chapter-clouds small{font-size:11px}
.map-stop[data-position$="30"] .map-orbit,.map-stop[data-position="60"] .map-orbit,.map-stop[data-position="90"] .map-orbit{border-color:var(--atlas-gold)}
#chapter-nav{scrollbar-width:none}#chapter-nav::-webkit-scrollbar{display:none}
.map-stop.chapter-final .map-orbit{border-color:var(--atlas-gold)}
.pilot-card{display:flex;align-items:center;gap:20px;min-width:0;padding:22px 12px;background:radial-gradient(ellipse at 20% 50%,#243960,transparent 75%);text-align:left}
.pilot-avatar{position:relative;display:grid;place-items:center;width:76px;height:76px;flex:0 0 76px;border:3px solid var(--pilot-frame,#506280);border-radius:50%;box-shadow:0 0 0 7px color-mix(in srgb,var(--pilot-frame,#506280) 15%,transparent);font-size:36px}
.pilot-avatar i{position:absolute;top:-32px;color:#ebcb79;font-size:32px;font-style:normal}
.pilot-card>div{min-width:0}.pilot-card strong{display:block;color:var(--pilot-name,#eef3ff);font-size:21px;overflow-wrap:anywhere}.pilot-card small{display:block;color:#acbed9;margin-top:6px;font-size:12px}
.wardrobe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wardrobe-grid article{display:flex;flex-direction:column;gap:8px;padding:16px 12px;border:1px solid #354765;border-radius:14px;background:#11182a}.wardrobe-grid article p{font-size:12px;line-height:1.5;color:#acbed9;flex:1;margin:0}.wardrobe-grid article small{color:#6bd3ce;font-size:11px}.wardrobe-grid button{font-size:12px;padding:10px 5px}.wardrobe-sample{height:65px;display:grid;place-items:center;color:var(--sample);font-size:27px}.wardrobe-grid article b{font-size:14px}
.club-card,.invite-panel{margin-top:24px;padding:20px 14px;border-top:1px solid #52628a;text-align:left}.club-card p,.invite-panel p,#weekly-league>p{line-height:1.6;font-size:14px}.invite-panel label{display:grid;gap:8px;margin-top:18px}.invite-panel input{background:#11182a;color:#eef3ff;border:1px solid #52628a;padding:14px;border-radius:10px}.invite-image{width:100%;max-width:320px;display:block;margin:18px auto;border-radius:12px}.invite-link{overflow-wrap:anywhere;color:#6bd3ce}.daily-bonus{color:#ebcb79;font-size:13px;line-height:1.5}
.league-rows article{display:flex;gap:10px;align-items:center;border-bottom:1px solid #354765}.league-rows .pilot-card{flex:1;gap:10px;padding:16px 0}.league-rows .pilot-avatar{width:36px;height:36px;flex-basis:36px;font-size:20px}.league-rows .pilot-card strong{font-size:14px}.league-rows article>span{font-size:12px}.league-rows small{display:block}.league-rows .pilot-avatar i{top:-18px;font-size:20px}
dialog.arena-intro{width:min(520px,calc(100% - 32px));max-height:90dvh;padding:28px 20px;background:#11182a;color:#eef3ff;border:1px solid #52628a;border-radius:24px;text-align:center}.arena-intro::backdrop{background:#060b18ed}.arena-pilots .pilot-card{animation:pilot-enter .45s ease-out both}.arena-pilots .pilot-card:last-child{animation-delay:.15s}.arena-vs{color:#6bd3ce;font-size:24px}.arena-count{display:block;font-size:62px;line-height:1.4;color:#ebcb79;margin-top:20px}.arena-intro p{font-size:13px;color:#acbed9;line-height:1.6}
@keyframes pilot-enter{from{opacity:0;transform:translateX(-25px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.arena-pilots .pilot-card{animation:none}}
.pilot-card[data-frame="frame_aurora"] .pilot-avatar{border-style:double;border-width:7px;box-shadow:0 0 18px #6bd3ce40}
.pilot-card[data-frame="pve100"] .pilot-avatar{border-radius:24%;border-style:dashed}
.pilot-card[data-frame="pve500"] .pilot-avatar{border-radius:24%;border-width:5px;box-shadow:0 0 20px #ebcb7930}
.pilot-card[data-frame="streak7"] .pilot-avatar{border-style:dotted;border-width:5px}
.pilot-card[data-frame^="season_"] .pilot-avatar{border-radius:30% 30% 50% 50%;border-width:5px}
.pilot-card[data-frame^="club_"] .pilot-avatar{border-style:double;border-width:6px}
#arena-mini .pilot-card{padding:6px 18px;gap:12px;justify-content:center;background:none}#arena-mini .pilot-avatar{width:30px;height:30px;flex-basis:30px;font-size:18px}#arena-mini .pilot-card strong{font-size:13px}#arena-mini .pilot-card small{font-size:10px;margin-top:1px}
/* Keep conditional actions absent even when their component uses display:flex. */
#level-ranking[hidden], #rewarded-retry[hidden], #buy-shield[hidden], #arena-mini[hidden] { display:none; }
.fixed-close-dialog[open] { display:flex; flex-direction:column; padding:0; overflow:hidden; max-height:min(84dvh,720px); }
.dialog-toolbar { flex:0 0 auto; display:flex; justify-content:flex-end; padding:10px 14px 6px; background:#151e32; border-bottom:1px solid #303c59; }
.dialog-toolbar .dialog-close { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #46516b; border-radius:50%; background:#222e46; color:#eef3ff; font:30px/1 system-ui; cursor:pointer; }
.dialog-close:focus-visible { outline:2px solid #79a9ff; outline-offset:2px; }
.dialog-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 28px 28px; }
.dialog-scroll > .secondary { margin-top:16px; }
@media(max-width:380px) { .dialog-scroll { padding:16px 18px 22px; } }
/* The playfield owns the remaining portrait viewport. */
#game-screen.active{display:flex;flex-direction:column;height:100dvh;min-height:0;padding-bottom:env(safe-area-inset-bottom);animation:none}
#game-screen>.topbar,#game-screen>.stats{flex:none}
#game-screen .board-stage{flex:1;min-height:0;height:auto;border-radius:0}
#game-screen>.hint,#game-screen>#level-ranking{display:none!important}
#board-stage,#board-stage *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#board-stage:focus{outline:none}
@media(pointer:coarse){.arrow-line,.departing .arrow-head{filter:none!important}}