@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('./assets/fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./assets/fonts/manrope-latin.woff2') format('woff2'); }

:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; color: #e6edf7; background: #000; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body { display: grid; place-items: center; min-height: 100svh; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 1px solid #d3e4ff; outline-offset: 5px; }
[hidden] { display: none !important; }

/* One composition on every device. All unused pixels stay exactly black. */
.playfield { position: relative; isolation: isolate; container-type: inline-size; width: min(100vw, calc(100dvh * .55)); height: min(100dvh, calc(100vw / .55)); aspect-ratio: 11 / 20; overflow: hidden; touch-action: none; background: #02040a; }
canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.viewport-grain { pointer-events: none; position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.18' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }

.main-menu { position: absolute; inset: 0; z-index: 5; transition: opacity .32s ease; }
.main-menu.leaving { opacity: 0; pointer-events: none; }
.menu-whisper { position: absolute; top: 60%; width: 100%; margin: 0; text-align: center; font-size: 1.95cqw; letter-spacing: .21em; color: #7e8c9f; }
.menu-title { position: absolute; top: 49%; left: 0; width: 100%; margin: 0; text-align: center; padding-left: .38em; font: 300 15cqw / 1.15 'Manrope', sans-serif; letter-spacing: .38em; color: #ecf0fb; text-shadow: 0 0 28px #bbccff24; }
.play-button { position: absolute; top: 68%; left: 25%; width: 50%; min-height: 48px; height: 11.8cqw; padding-left: .28em; background: #11182828; border: 1px solid #ced9ed65; border-radius: 100px; font-size: 3.1cqw; font-weight: 400; letter-spacing: .28em; transition: background .2s, border-color .2s, box-shadow .2s; }
.play-button:hover { background: #bccdff12; border-color: #d6e4ffbd; box-shadow: 0 0 28px #9aaeff12; }
.play-button:active { background: #c6d4ff1c; }

.hud { position: absolute; z-index: 4; top: 3%; left: 6.1%; right: 3.2%; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; transition: opacity .3s; }
.playfield[data-state="starting"] .hud { opacity: .35; }
.playfield[data-state="over"] .run-stats, .playfield[data-state="paused"] .run-stats { opacity: .2; }
.distance { display: flex; align-items: baseline; gap: .3em; font-family: 'Manrope', sans-serif; font-size: 5.8cqw; font-weight: 400; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #e7edf8; text-shadow: 0 1px 7px #000b; }
.distance .unit { font-size: .66em; letter-spacing: 0; color: #cad4e3; }
.light-count { display: flex; align-items: center; gap: .6em; font-size: 2.4cqw; font-variant-numeric: tabular-nums; color: #8b98aa; margin-top: 5px; text-shadow: 0 0 10px #01040a; }
.collected-label { font-size: 1.65cqw; letter-spacing: .12em; }
.light-meter { position: absolute; z-index: 2; left: 50%; width: 18cqw; transform: translate(-50%, -100%); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.light-meter[data-visible="true"] { opacity: .9; }
.light-meter-label { display: block; text-align: center; font-size: 1.65cqw; letter-spacing: .2em; color: #b7c6d6; margin-bottom: 1.5cqw; text-shadow: 0 1px 4px #000; }
.light-meter-track { height: .9cqw; min-height: 3px; border-radius: 99px; background: #c5d8ed1f; box-shadow: 0 0 0 1px #07101a, 0 1px 9px #0008; overflow: hidden; }
.light-meter-fill { height: 100%; width: 100%; transform: scaleX(.75); transform-origin: left; border-radius: inherit; background: #dfedff; box-shadow: 0 0 7px #c7e0ff70; transition: transform .25s ease-out, background .3s; }
.light-meter[data-level="low"] .light-meter-fill { background: #d9c4a8; }
.light-meter[data-level="critical"] .light-meter-fill { background: #efb786; }
.light-symbol { color: #ffdb9f; font-size: 1.2em; text-shadow: 0 0 13px #ffd28a70; }
.utilities { display: flex; gap: 1px; pointer-events: auto; }
.icon-button { background: transparent; border: 0; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; opacity: .7; transition: opacity .2s, background .2s; padding: 13px; }
.icon-button:hover { opacity: 1; background: #9dadce10; }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: #d1dbeb; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sound-off, [aria-pressed="true"] .sound-on { display: none; }
[aria-pressed="true"] .sound-off { display: block; }

.instruction { position: absolute; bottom: 11%; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 1; transition: opacity .55s; text-shadow: 0 0 16px #01030a, 0 1px 5px #000; }
.instruction.faded { opacity: 0; }
#instruction-text { font-size: 2.65cqw; letter-spacing: .23em; color: #e1e8f6; }
#instruction-sub { font-size: 2.3cqw; color: #a0aec8; letter-spacing: .06em; margin-top: 10px; }

.state-overlay { position: absolute; z-index: 3; inset: 0; background: linear-gradient(#0307109c, #040916df 45%, #030711ce); display: flex; align-items: center; justify-content: center; animation: arrive .28s ease both; }
.result-panel, .pause-panel { width: 76%; text-align: center; padding-bottom: 1%; }
.result-kicker { font-size: 2cqw; letter-spacing: .25em; color: #a6b3ce; }
#death-reason { margin-bottom: 3cqw; color: #8290a4; }
.playfield[data-death="extinction"] .state-overlay { background: #000000e8; animation-duration: .7s; }
.result-panel h1, .pause-panel h1 { font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 6.3cqw; letter-spacing: .17em; margin: 0 0 8cqw; padding-left: .17em; color: #e9edf9; }
.pause-panel h1 { font-size: 9cqw; letter-spacing: -.02em; margin-top: 18px; padding-left: 0; }
.result-distance { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 13cqw; line-height: 1.2; letter-spacing: -.04em; color: #e5eefc; }
.result-distance > span:last-child { font-size: .3em; color: #a7b7ce; letter-spacing: 0; }
.result-caption { font-size: 1.85cqw; letter-spacing: .19em; color: #899fbd; margin-top: 10px; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #889dc82b; border-bottom: 1px solid #889dc82b; padding: 5.5cqw 0; margin: 8cqw 0; }
.result-stats > div + div { border-left: 1px solid #899dc01a; }
.result-label { display: block; font-size: 1.85cqw; letter-spacing: .18em; color: #9aa9c1; margin-bottom: 10px; }
.result-stats strong { font-size: 4.3cqw; font-weight: 400; color: #d4e0f3; font-variant-numeric: tabular-nums; }
.result-spark { color: #f6d191; font-size: .78em; }
.primary-button { width: 100%; height: 12.5cqw; min-height: 48px; border: 1px solid #b2c2dd77; border-radius: 100px; background: #11182d28; font-size: 2.9cqw; font-weight: 400; letter-spacing: .22em; color: #e7efff; transition: background .2s, border-color .2s; }
.primary-button span { display: inline-block; margin-left: 20px; font-size: 16px; }
.primary-button:hover { background: #b5cbff17; border-color: #c9d9f4b0; }
.primary-button:active { transform: translateY(1px); }
.share-button { width:100%; min-height:44px; margin-top:2cqw; border:1px solid #889dc84d; border-radius:100px; background:#b5cbff0a; color:#d4e0f3; font-size:2.5cqw; letter-spacing:.16em; }
.share-button:hover { background:#b5cbff17; border-color:#c9d9f4b0; }
.share-note { margin:1.5cqw 0 0; color:#9aa9c1; font-size:2.1cqw; }
.state-overlay { overflow-y:auto; }
.result-panel { margin-block:auto; padding-block:3cqw; }
.reward-ad { width: 100%; margin-top: 2cqw; color: #d9f1ff; }
.ad-status { font-size: 2.5cqw; color: #b8cbdc; margin: 2cqw 0; }
button:disabled { opacity: .45; cursor: default; }
.restart-note { font-size: 2.1cqw; color: #96a8c4; margin-top: 16px; letter-spacing: .06em; }
.text-button { border: 0; background: none; padding: 16px; min-height: 44px; margin-top: 8px; font-size: 2.1cqw; letter-spacing: .2em; color: #aab8d0; }
.text-button:hover { color: #eef3ff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 500px) { .icon-button { width: 34px; height: 34px; padding: 9px; }.result-stats { margin: 5cqw 0; padding: 4cqw 0; }.restart-note { margin-top: 10px; }.text-button { margin-top: 0; padding: 8px; min-height: 32px; }.result-panel h1 { margin-bottom: 6cqw; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Cosmetic gallery shares the same black-letterboxed canonical composition. */
.menu-shop {position:absolute;top:84%;left:25%;width:50%;margin:0;font-size:3cqw;color:#d3ddee}
.menu-balance {position:absolute;top:91%;width:100%;text-align:center;font-size:3cqw;letter-spacing:.09em;color:#d9caaf}
.shop-panel {position:absolute;inset:0;z-index:8;animation:arrive .25s ease;pointer-events:none;background:linear-gradient(#02050ce8,transparent 19%,transparent 40%,#03060ded 52%)}
.playfield.shop-open {touch-action:pan-y}
.shop-heading {position:absolute;top:2%;left:5%;right:5%;height:8%;display:flex;align-items:center;justify-content:space-between;font-size:2.5cqw;letter-spacing:.18em}
.shop-heading .text-button {margin:0;padding:10px 0;font-size:2.5cqw;pointer-events:auto}
.shop-wallet {color:#e1d0b5;font-size:3cqw;letter-spacing:0;font-variant-numeric:tabular-nums}
.shop-tabs {position:absolute;top:11%;left:7%;right:7%;display:flex;border-bottom:1px solid #778baa30;pointer-events:auto}
.shop-tabs button {flex:1;min-height:44px;padding:10px 0;background:none;border:0;border-bottom:1px solid transparent;letter-spacing:.2em;font-size:2.8cqw;color:#8d9ab3}
.shop-tabs [aria-selected="true"] {border-color:#c5d9fb;color:#eef5ff}
.shop-detail {position:absolute;top:41%;left:9%;right:9%;text-align:center}
#shop-rarity {font-size:2cqw;letter-spacing:.2em;color:#a2b1cb}
.shop-detail h2 {font:300 7cqw/1.15 'Manrope',sans-serif;letter-spacing:.04em;margin:2cqw 0}
.shop-detail p {font-size:2.7cqw;line-height:1.6;color:#aab8cf;margin:0 auto;max-width:95%}
.shop-items {position:absolute;top:57%;bottom:16%;left:7%;right:7%;display:grid;grid-template-columns:1fr 1fr;gap:2cqw;overflow:auto;align-content:start;pointer-events:auto;touch-action:pan-y;padding:3px;scrollbar-width:thin;scrollbar-color:#536178 #060a12;overscroll-behavior:contain}
.cosmetic-card {min-height:65px;display:grid;grid-template-columns:30% 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;gap:1px 3%;padding:3cqw 2cqw;border:1px solid #7589aa30;border-radius:10px;background:#0a1020b3;color:#d6e0f1}
.cosmetic-card[aria-pressed="true"] {border-color:#a2bce59c;background:#131d32cc}
.cosmetic-card-name {font-size:2.8cqw;align-self:end}.cosmetic-card-status {font-size:2cqw;letter-spacing:.06em;color:#a7b5cd;align-self:start;margin-top:4px}
.cosmetic-icon {grid-row:1/3;width:7cqw;height:7cqw;max-width:35px;max-height:35px;justify-self:center;border:1px solid var(--item-color);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--item-color) 14%,#10192a 62%,#000);box-shadow:0 0 14px color-mix(in srgb,var(--item-color),transparent 70%)}
.cosmetic-icon[data-form="prism"],.cosmetic-icon[data-form="crystal"] {border-radius:2px;transform:rotate(45deg) scale(.8)}
.cosmetic-icon[data-form="star"],.cosmetic-icon[data-form="electric"] {clip-path:polygon(50% 0,60% 32%,92% 12%,70% 43%,100% 50%,68% 62%,87% 90%,58% 72%,50% 100%,37% 70%,8% 90%,29% 58%,0 50%,31% 37%,12% 10%,41% 30%)}
.cosmetic-icon[data-form="void"],.cosmetic-icon[data-form="eclipse"] {background:#020309;box-shadow:0 0 10px var(--item-color),inset 2px 0 3px var(--item-color)}
.cosmetic-icon[data-form="liquid"],.cosmetic-icon[data-form="classic"],.cosmetic-icon[data-form="obsidian"],.cosmetic-icon[data-form="magma"] {border-radius:40% 60% 35% 65%}
.shop-footer {position:absolute;bottom:2%;left:9%;right:9%;pointer-events:auto;text-align:center}
.shop-footer p {font-size:2cqw;line-height:1.4;color:#8797b2;margin:2.5cqw 0 0}
.shop-footer button:disabled {cursor:default;opacity:.55}
.result-wallet {display:flex;justify-content:space-between;align-items:center;margin:-3cqw 0 5cqw;font-size:2.1cqw;letter-spacing:.12em;color:#9faec7}
.result-wallet>span {font-size:3.4cqw;letter-spacing:0;color:#e5d2ad}
@media(max-width:360px){.shop-detail p{font-size:3cqw}.shop-items{top:58%}.cosmetic-card-name{font-size:3.1cqw}.cosmetic-card-status{font-size:2.4cqw}}
.orb-colors {position:absolute;top:54%;left:9%;right:9%;display:grid;grid-template-columns:1fr 1fr;gap:1cqw 3cqw;pointer-events:auto;align-items:center}
.orb-colors label {display:flex;align-items:center;gap:2cqw;color:#c5d3e8;font-size:2.2cqw;letter-spacing:.12em}
.orb-colors input {appearance:none;-webkit-appearance:none;width:44px;height:44px;padding:7px;flex-shrink:0;border:1px solid #9aafcc55;border-radius:50%;background:#090f1c;cursor:pointer;touch-action:manipulation}
.orb-colors input::-webkit-color-swatch-wrapper {padding:0}
.orb-colors input::-webkit-color-swatch {border:0;border-radius:50%}
.orb-colors input::-moz-color-swatch {border:0;border-radius:50%}
.orb-colors button {min-height:44px;padding:4px;background:none;border:0;color:#adbdd5;font-size:2cqw;letter-spacing:.1em}
.orb-colors>span {grid-column:1/-1;text-align:center;color:#8799b5;font-size:2cqw}
.editing-orbs .shop-detail {top:41%}
.editing-orbs .shop-items {top:57%}
.orb-tabs {position:absolute;top:17%;left:15%;right:15%;display:flex;pointer-events:auto}
.orb-tabs button {flex:1;min-height:44px;background:none;border:0;color:#8c9bb3;font-size:2.3cqw;letter-spacing:.16em}
.orb-tabs [aria-selected="true"] {color:#f0f5ff;text-shadow:0 0 14px #adceff70}
.orb-color-target {display:grid;grid-template-columns:1fr 44px;align-items:center;justify-content:center;gap:0 1cqw}
.orb-color-target input[type="text"] {grid-column:1/-1;width:100%;height:27px;padding:3px;text-align:center;border:1px solid #9aafcc30;border-radius:5px;font:11px monospace;letter-spacing:.06em;color:#dce8f9;user-select:text;touch-action:auto}
.orb-color-target .match-color {grid-column:1/-1;min-height:28px;padding:3px;font-size:2cqw}
.orb-color-target [aria-pressed="true"] {color:#fff;border-bottom:1px solid #e6efff}
.color-presets {grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:.5cqw;margin:1cqw 0}
.color-presets .color-preset {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;font-size:1.9cqw;min-height:44px;padding:2px;border:1px solid transparent;border-radius:8px;letter-spacing:0}
.color-preset>span:first-child {width:4.5cqw;height:4.5cqw;border-radius:50%;background:var(--swatch);box-shadow:0 0 9px color-mix(in srgb,var(--swatch),transparent 75%)}
.color-presets [aria-pressed="true"] {border-color:#9caece70;background:#a1b7de12}
#reset-orb-colors {grid-column:1/-1;min-height:32px}
.editing-orbs[data-orb-section="colors"] .orb-colors {top:53%;bottom:8%;overflow:auto;align-content:start;overscroll-behavior:contain;touch-action:pan-y}
.cosmetic-icon[data-form^="trail-"] {height:2px;border:0;border-radius:50%;transform:rotate(-25deg);background:var(--item-color);box-shadow:0 0 7px var(--item-color)}
.cosmetic-icon[data-form="trail-stardust"] {border-top:2px dotted var(--item-color);background:none;box-shadow:none}
.cosmetic-icon[data-form="trail-wisp"] {height:7px;opacity:.65;filter:blur(1px)}
@media(max-width:360px){.orb-colors{left:7%;right:7%;gap:1cqw}.orb-colors input{width:40px;height:44px}.orb-tabs{left:10%;right:10%}.color-presets .color-preset{min-height:44px}}
.reward-offer { margin:0 0 4cqw; padding:4cqw 3cqw 3cqw; border:1px solid #abcfff30; border-radius:3cqw; background:radial-gradient(ellipse at 50% 0%, #88cfff15, #09121c99 75%); }
.reward-symbol { display:block; color:#e5f6ff; font-size:6cqw; line-height:1; margin-bottom:2cqw; text-shadow:0 0 18px #8bd3ff90; }
.reward-eyebrow { font-size:1.8cqw; letter-spacing:.18em; color:#93aab9; }
.reward-offer h2 { font-size:3.5cqw; font-weight:400; letter-spacing:.02em; margin:2cqw 0; color:#f0f7ff; }
.reward-offer p { font-size:2.15cqw; color:#9dacbd; margin:0 0 3cqw; }
.reward-offer .reward-ad { background:#b7deff12; border:1px solid #b7deff55; border-radius:1.6cqw; padding:3cqw 1cqw; margin:0; font:inherit; font-size:2.3cqw; letter-spacing:.1em; cursor:pointer; }
.result-panel:has(.reward-offer:not([hidden])) h1 { margin-bottom:4cqw; }
.preview-controls { position:fixed; z-index:100; top:8px; left:50%; transform:translateX(-50%); display:flex; gap:6px; align-items:center; padding:7px; border:1px solid #526274; border-radius:8px; background:#0b111eee; color:#bac9db; font:10px system-ui; white-space:nowrap; }
.preview-controls button, .preview-ad button { color:#eaf6ff; background:#26384d; border:1px solid #68829c; border-radius:5px; padding:8px; cursor:pointer; }
.preview-ad { position:fixed; z-index:200; inset:0; display:grid; place-content:center; gap:16px; text-align:center; background:#060a12fa; color:#eaf6ff; font:15px system-ui; padding:24px; }
.preview-ad p { color:#96a9bc; max-width:300px; line-height:1.6; }

/* iOS needs prefixed selection/callout suppression on the touched content. */
.playfield, .playfield * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Journey panels retain the game's dark, luminous composition. */
.play-mode-caption{position:absolute;top:75%;width:100%;text-align:center;font-size:2cqw;letter-spacing:.22em;color:#9baecb}
.journey-menu{position:absolute;top:77%;left:10%;right:10%;display:flex;justify-content:center;gap:3cqw}
.journey-menu button,.token-actions button{min-height:40px;border:1px solid #8facce40;border-radius:24px;background:#0b142080;color:#d9eaff;font-size:2.4cqw;letter-spacing:.08em;padding:8px 14px}
.journey-panel{position:absolute;inset:0;z-index:12;background:radial-gradient(ellipse at 80% 0%,#12273c,#03070e 55%);padding:4cqw 7cqw 10cqw;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin;color:#d9e7f7}
.journey-open{touch-action:pan-y}
.journey-panel header{display:flex;align-items:center;justify-content:space-between;font-size:2.4cqw;letter-spacing:.2em}
.journey-panel header button{font-size:2.5cqw;padding-left:0}
.journey-panel h2{font:300 8cqw/1.15 Manrope,sans-serif;letter-spacing:-.025em;margin:5cqw 0}
.journey-panel h3{font-size:4cqw;font-weight:400;margin:2cqw 0}
.journey-panel p{font-size:3cqw;line-height:1.7;color:#a6bad0}
.journey-panel .journey-eyebrow{font-size:2.2cqw;letter-spacing:.17em;color:#97c4df}
.journey-card{padding:5cqw;margin:4cqw 0;border:1px solid #8daed62b;border-radius:14px;background:linear-gradient(130deg,#90caff09,transparent)}
.journey-card button,.journey-launch{min-height:44px;width:100%;padding:10px;border:1px solid #a5cced65;border-radius:24px;background:#a9d5ff0a;color:#e0efff;font-size:2.7cqw;letter-spacing:.08em}
.journey-card progress{display:block;width:100%;height:5px;margin:3cqw 0 5cqw;accent-color:#a4dcff}
.journey-record{display:flex;justify-content:space-between;padding:4cqw;border-bottom:1px solid #9ab3d32b;font-size:3.5cqw}
.journey-status{position:absolute;bottom:8%;width:100%;text-align:center;pointer-events:none;color:#b7d7e9;font-size:2.4cqw;letter-spacing:.1em;text-shadow:0 1px 8px #000}
.journey-result{font-size:2.7cqw;line-height:1.5;color:#b5d9e9;margin:3cqw 0}
.token-actions{display:flex;gap:2cqw;margin:3cqw 0}.token-actions button{flex:1;font-size:2.3cqw}
.journey-panel[hidden],.token-actions[hidden],.journey-status[hidden]{display:none}
#account-controls label{display:block;font-size:3cqw;color:#b8cee5;margin:5cqw 0}
#account-controls input{display:block;width:100%;margin:3cqw 0;padding:12px;background:#060b15;border:1px solid #94bde750;color:#fff;border-radius:8px;font:16px sans-serif;user-select:text;touch-action:manipulation}
.reward-choice{display:flex;justify-content:center;gap:2cqw;margin:2cqw 0}
.reward-choice button{min-height:36px;padding:6px 10px;border:1px solid #8facce40;border-radius:22px;background:transparent;color:#98afc9;font-size:2.3cqw}
.reward-choice [aria-pressed="true"]{color:#e4f4ff;border-color:#b1dafa}
/* Give primary play, modes and utility actions their own breathing room. */
.menu-top-actions{position:absolute;top:5%;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between}
.menu-top-actions button{min-height:44px;padding:10px 14px;border:1px solid #9ab9dc38;border-radius:24px;background:#0a14204d;color:#bfd2e7;font-size:2.5cqw;letter-spacing:.12em}
#daily-open{width:46px;height:46px;padding:11px;display:grid;place-items:center}
#daily-open svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.menu-title{top:46%}.menu-whisper{top:57%}.play-button{top:64%}
.play-mode-caption{top:73.5%;pointer-events:none}
.journey-menu{top:77%;left:22%;right:22%}.journey-menu button{width:100%;min-height:44px}
.menu-shop,.menu-missions{position:absolute;top:86%;width:35%;margin:0;padding:10px;min-height:44px;font-size:2.6cqw}
.menu-shop{left:15%}.menu-missions{left:50%}.menu-balance{top:95%;font-size:2.6cqw}
.journey-panel[data-tab="modes"] h2{font-size:6.7cqw;margin:3cqw 0 6cqw}
.journey-panel[data-tab="modes"] .journey-card{padding:4cqw 5cqw;margin:3cqw 0}
.journey-panel[data-tab="modes"] .journey-card p{margin:2cqw 0 4cqw}
.mode-default{font-size:2cqw;letter-spacing:.1em;color:#95c4df;margin-left:2cqw;vertical-align:middle}
/* Celestial navigation: light, orbital marks and a connected chapter path. */
.journey-panel{background:radial-gradient(circle at 84% 12%,#215d8236,transparent 36%),radial-gradient(circle at 12% 80%,#452b6730,transparent 45%),#02050b}
.journey-panel:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle at 19px 37px,#abd9ff 0 1px,transparent 1.4px),radial-gradient(circle at 78px 93px,#b4dfff88 0 .7px,transparent 1.2px);background-size:137px 191px,173px 127px}
.journey-panel header,#journey-content{position:relative}
.journey-panel h2{font-size:7cqw;letter-spacing:-.025em}.journey-panel header{color:#91b4c8}
.celestial-sigil{--a:#95deff;position:relative;display:inline-block;width:64px;height:64px;flex:0 0 64px;filter:drop-shadow(0 0 10px #61bfff42)}
.celestial-sigil i,.celestial-sigil b,.celestial-sigil em{position:absolute;display:block;border-radius:50%;font-style:normal}
.celestial-sigil i{inset:5px;border:1px solid #9ed9ff65;transform:rotate(-35deg) scaleY(.53)}
.celestial-sigil b{width:10px;height:10px;top:17px;left:8px;background:white;box-shadow:0 0 12px 4px var(--a)}
.celestial-sigil em{width:7px;height:7px;bottom:17px;right:9px;background:white;box-shadow:0 0 12px 3px var(--a)}
.celestial-sigil.shattered i{inset:18px;border-radius:25% 50% 20% 40%;background:linear-gradient(135deg,#a9d9ea,#15273c 60%);transform:rotate(25deg);box-shadow:20px 12px 0 -8px #7594b4,-22px -8px 0 -9px #bdd9e9}
.celestial-sigil.shattered b,.celestial-sigil.shattered em{width:4px;height:4px}
.celestial-sigil.gravity{--a:#b9a0ff}.celestial-sigil.gravity i{inset:13px;border:2px solid #b9a0ff;transform:rotate(-35deg) scaleY(.65);box-shadow:0 0 0 5px #ad99ff15,0 0 0 12px #ad99ff12}
.celestial-sigil.eclipse i{inset:13px;transform:none;background:#01030a;border:0;box-shadow:4px -2px 0 1px #c8e8ff,7px -3px 15px #89bfff7a}
.celestial-sigil.eclipse b,.celestial-sigil.eclipse em{display:none}
.celestial-sigil.resonance i{inset:8px;transform:rotate(-25deg) scaleY(.75);box-shadow:0 0 0 6px #83dfff28,0 0 0 13px #83dfff12}
.celestial-sigil.constellation i{transform:rotate(35deg);border-radius:0;inset:18px;border-color:#93d8ff80;box-shadow:0 0 15px #79c8ff20}
.journey-panel[data-tab="modes"] .mode-tile{min-height:130px;display:grid;grid-template-columns:80px 1fr;align-items:center;border:0;border-bottom:1px solid #8bd5ff30;border-radius:0;background:linear-gradient(90deg,#78bfff09,transparent);padding:5cqw 3cqw;margin:5cqw 0}
.mode-tile .celestial-sigil{grid-row:1/3}.mode-tile h3{font-weight:300;font-size:4.7cqw}.mode-tile button{border:0;background:none;text-align:left;padding:0;font-size:2.5cqw;min-height:40px;color:#9cc7e1}
.constellation-path{position:relative;margin-top:6cqw}.constellation-path:before{content:'';position:absolute;top:35px;bottom:35px;left:32px;width:1px;background:linear-gradient(#b6eaff90,#89b9ee20)}
.chapter-node{position:relative;display:flex;align-items:center;gap:4cqw;width:100%;min-height:87px;margin:2cqw 0;padding:8px 0;border:0;border-bottom:1px solid #7bc5ff15;background:transparent;color:#d8f1ff;text-align:left}
.chapter-copy{display:flex;flex-direction:column;gap:5px}.chapter-copy strong{font-size:4cqw;font-weight:400}.chapter-copy small{font-size:2cqw;letter-spacing:.13em;color:#91b6ce}.chapter-arrow{margin-left:auto;font-size:5cqw;padding-right:8px;color:#b3e7ff}
.chapter-node:disabled{opacity:.4}.chapter-node:not(:disabled):hover{background:#8bd7ff0a}
.chapter-progress{position:absolute;top:14%;left:17%;right:17%;pointer-events:none;text-align:center;color:#b1d9eb;font-size:2cqw;letter-spacing:.16em}
#chapter-track{height:2px;background:#9ed6f12e;position:relative;margin:12px 0 10px}
#chapter-fill{display:block;height:100%;width:100%;background:#d9faff;box-shadow:0 0 8px #89e3ff;transform-origin:left}
#chapter-track b{position:absolute;right:-5px;top:-8px;font-size:16px;color:#e7fbff}
#chapter-destination{font-size:1.8cqw;color:#8daeba}.chapter-progress[hidden]{display:none}
.mastery-mission{border-color:#d1b78266;background:radial-gradient(ellipse at top right,#c99c4420,transparent 70%)}
.journey-panel[data-tab="account"] #journey-content>.celestial-sigil{display:block;margin:8cqw auto;width:64px}

.menu-tutorial { position:absolute; top:39%; left:25%; width:50%; min-height:44px; font-size:2.7cqw; letter-spacing:.15em; color:#d3e6ff; }
.tutorial-panel { position:absolute; inset:0; z-index:6; pointer-events:none; opacity:1; transition:opacity .7s ease; }
.tutorial-panel.leaving { opacity:0; }
.practice-arrival #hud, .practice-arrival #journey-status { animation:practice-ui-arrive 1.2s ease both; }
.practice-arrival #instruction { animation:practice-ui-arrive 1.2s ease; }
@keyframes practice-ui-arrive { from { opacity:0; } to { opacity:1; } }
.tutorial-panel button { pointer-events:auto; }
#tutorial-back { position:absolute; top:3%; left:5%; min-height:44px; font-size:2.8cqw; }
.tutorial-copy { position:absolute; top:76%; left:7%; width:86%; text-align:center; text-shadow:0 2px 8px #000; background:radial-gradient(ellipse, #000c, transparent); }
#tutorial-count { font-size:2.4cqw; letter-spacing:.16em; color:#9cb5cf; }
#tutorial-title { font-size:4.8cqw; font-weight:400; margin:1cqw 0; }
#tutorial-title:focus { outline:none; }
#tutorial-copy { font-size:2.8cqw; line-height:1.45; color:#c9d6e8; margin:1.5cqw 0; }
.tutorial-safe { position:absolute; top:5%; right:5%; text-align:right; font-size:2cqw; letter-spacing:.1em; color:#8fa9c3; }