@font-face { font-family: 'Archivo Black'; src: url(fonts/archivo-black-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Oswald'; font-weight: 600; src: url(fonts/oswald-latin-600-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Oswald'; font-weight: 700; src: url(fonts/oswald-latin-700-normal.woff2) format('woff2'); font-display: swap; }
:root {
  --ink: #03060c; --glass: rgba(14, 20, 32, .58); --glass2: rgba(22, 30, 46, .72); --edge: rgba(190, 215, 255, .22);
  --rust: #d2622c; --rustD: #8f3519; --cream: #f1ebdd; --muted: #93a0b4; --cyan: #4fe0ff; --cyanS: #9be9ff; --gold: #ffc65c;
  --holo: linear-gradient(115deg, #ff8be0 0%, #ffe08a 22%, #8affc8 45%, #7ec8ff 68%, #c79bff 88%, #ff8be0 100%);
  --h: 'Archivo Black', 'Arial Black', Impact, sans-serif; --c: 'Oswald', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--cream); font-family: var(--h); overflow: hidden; }
body { display: flex; justify-content: center; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
img { -webkit-user-drag: none; }
.app { position: relative; width: 100%; max-width: 430px; height: 100dvh; display: flex; flex-direction: column; background: var(--ink); overflow: hidden; user-select: none; -webkit-user-select: none; }
@media (min-width: 600px) { .app { height: min(100dvh, 900px); margin-top: max(0px, calc((100dvh - 900px) / 2)); border-radius: 26px; box-shadow: 0 0 0 10px #0b0f18, 0 30px 80px #000c; } }
.stars { display: none; }

/* Photoreal backdrop */
.sky { position: absolute; inset: 0; pointer-events: none; background: #000 center bottom / auto 146% no-repeat; transition: background-image .6s; }
.sky.earth { background-image: url(art/bg-earth.webp); }
.sky.moon { background-image: url(art/bg-moon.webp); background-size: auto 140%; }
.sky.mars { background-image: url(art/bg-mars.webp); background-size: auto 132%; }
.sky-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%); }

/* HUD */
.hud { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(14px + env(safe-area-inset-top)) 18px 0; }
.tag { flex: 0 0 auto; max-width: 58%; }
.wordmark { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--h); font-size: 15px; line-height: 1; letter-spacing: 3.2px; margin-bottom: 8px;
  filter: drop-shadow(0 0 10px rgba(160, 190, 255, .55)) drop-shadow(0 2px 6px #000a); }
.wordmark .wm-apex, .wordmark .wm-orbit {
  background: var(--holo); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holoShift 5s linear infinite; }
.wordmark .wm-orbit { letter-spacing: 3.6px; }
.tag-sector { white-space: nowrap; font-size: 28px; line-height: 1; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 12px #000a; }
.tag-name { font-family: var(--c); font-weight: 700; font-size: 13px; letter-spacing: 2.2px; margin-top: 6px; color: #e8edf5; }
.fuel { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.fuel-line { display: flex; align-items: baseline; gap: 7px; }
.fuel-num { white-space: nowrap; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 12px #000a; }
.fuel-label { font-family: var(--h); font-size: 17px; color: #fff; }
.fuel-rate { font-family: var(--c); font-weight: 700; font-size: 19px; color: var(--cyan); letter-spacing: .6px; margin-top: 5px; text-shadow: 0 0 12px #4fe0ff66; }
.mult-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--c); font-weight: 700; font-size: 12px; letter-spacing: 1px; color: var(--cyanS);
  padding: 4px 9px 4px 6px; border: 1px solid #4fe0ff66; border-radius: 6px; background: rgba(10, 40, 60, .45); backdrop-filter: blur(6px); box-shadow: 0 0 14px #4fe0ff22 inset; }
.mult-chip svg { width: 18px; height: 18px; color: var(--cyan); }
.mult-chip span { font-family: var(--h); font-size: 13px; color: #fff; }
.mult-chip[hidden] { display: none; }

/* Stage */
.stage { position: relative; flex: 1 1 auto; min-height: 180px; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.tapzone { position: relative; left: 9%; width: min(80vw, 300px, 27dvh, calc(100cqh - 46px)); aspect-ratio: 1; display: grid; place-items: center; touch-action: none; -webkit-touch-callout: none; }
.orbit { position: absolute; inset: 6%; border-radius: 50%; border: 2px dashed rgba(235, 242, 255, .7); animation: spin 80s linear infinite; pointer-events: none; }
.app[data-tier="5"] .orbit, .app[data-tier="6"] .orbit { inset: -2%; border: 1.5px solid #4fe0ff55; animation: none;
  background: radial-gradient(circle, transparent 69.5%, #4fe0ff33 70%, transparent 70.6%),
    linear-gradient(#4fe0ff44, #4fe0ff44) center / 1px 100% no-repeat, linear-gradient(90deg, #4fe0ff44, #4fe0ff44) center / 100% 1px no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 23%); mask: radial-gradient(circle, transparent 22%, #000 23%); }
.station { position: relative; width: 100%; height: 100%; display: block; transition: transform .08s; }
.station-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(var(--sc, 1)); filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
  animation: appear .3s ease-out; pointer-events: none; }
.station-img.snap { animation: snap .34s cubic-bezier(.2, 1.6, .4, 1); }
.station.dock .station-img { animation: dock .32s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes snap { 0% { opacity: .2; scale: .82; filter: brightness(2.2) drop-shadow(0 0 30px #9be9ff); } 60% { opacity: 1; scale: 1.06; } 100% { scale: 1; } }
@keyframes dock { 0% { scale: 1; } 35% { scale: 1.05; filter: brightness(1.35) drop-shadow(0 0 18px rgba(155,233,255,.7)); } 100% { scale: 1; } }
.tapzone:active .station, .station.hit { transform: scale(.95); }
.station.hit .station-img { filter: drop-shadow(0 0 22px rgba(120, 220, 255, .55)) brightness(1.12); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes appear { from { opacity: 0; scale: .9; } }
.tap-hint { position: relative; z-index: 2; margin-top: 2px; font-family: var(--c); font-weight: 700; font-size: 19px; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 8px #000; pointer-events: none; display: flex; align-items: center; gap: 10px; }
.tap-hint .dash { width: 0; height: 1px; background: #4fe0ff99; }
.app[data-tier="5"] .tap-hint .dash, .app[data-tier="6"] .tap-hint .dash { width: 52px; }
.tap-power { font-family: var(--c); font-weight: 600; font-size: 12px; color: var(--cyanS); letter-spacing: 1.2px; margin-top: 1px; opacity: .8; pointer-events: none; }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pop { position: absolute; font-size: 22px; color: #fff; text-shadow: 0 0 12px #4fe0ffaa, 0 2px 6px #000; animation: pop .9s ease-out forwards; white-space: nowrap; }
.spark { position: absolute; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: spark .6s ease-out forwards; }
@keyframes pop { 0% { transform: translate(-50%, 0) scale(.7); opacity: 0; } 15% { opacity: 1; transform: translate(-50%, -12px) scale(1.1); } 100% { transform: translate(-50%, -80px) scale(1); opacity: 0; } }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* Smoked-glass MODULES console */
.panel { position: relative; z-index: 4; margin: 0 12px calc(12px + env(safe-area-inset-bottom)); padding: 6px 10px 10px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 38, 56, .62), rgba(10, 14, 24, .78)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--edge); box-shadow: 0 10px 40px #000b, inset 0 1px 0 rgba(255,255,255,.12); }
.tabs { display: flex; justify-content: center; gap: 22px; padding: 4px 0 8px; }
.tab { font-family: var(--c); font-weight: 700; font-size: 14px; letter-spacing: 2.4px; color: #8693a8; padding: 2px 2px 5px; border-bottom: 2px solid transparent; }
.tab.active { color: #fff; border-image: var(--holo) 1; text-shadow: 0 0 10px #9be9ff66; }
.list { max-height: min(322px, 39dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.list::-webkit-scrollbar { display: none; }
.list[hidden] { display: none; }

.mod { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-height: 70px; border-radius: 14px; flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(40, 50, 72, .55), rgba(16, 22, 36, .7)); border: 1px solid rgba(160, 190, 230, .16); transition: opacity .2s, filter .2s, box-shadow .2s; }
.mod:not(.can):not(.locked):not(.depot-row) { opacity: .74; filter: saturate(.7); }
.mod.can { border-color: rgba(120, 220, 255, .55); box-shadow: 0 0 0 1px rgba(120, 220, 255, .18), 0 0 18px rgba(79, 224, 255, .16), inset 0 0 24px rgba(79, 224, 255, .07); }
.mod.best { border-color: transparent; background: linear-gradient(180deg, rgba(48, 44, 40, .75), rgba(20, 20, 30, .82)) padding-box, linear-gradient(160deg, #ffd27a, #ff9a3c 40%, #ffe7a8 70%, #ffb44d) border-box;
  border: 1.5px solid transparent; box-shadow: 0 0 22px rgba(255, 180, 80, .3), inset 0 0 22px rgba(255, 190, 90, .08); }
.badge { position: absolute; top: -1px; left: 10px; font-family: var(--c); font-weight: 700; font-size: 10px; letter-spacing: 1.2px; padding: 1px 7px; border-radius: 0 0 6px 6px; display: none; }
.mod.can .badge { display: block; color: #032; background: linear-gradient(90deg, #7ff3ff, #8affc8); box-shadow: 0 0 10px #4fe0ff88; }
.mod.best .badge { color: #2a1500; background: linear-gradient(90deg, #ffe08a, #ffb44d); box-shadow: 0 0 10px #ffb44d99; }
.well { position: relative; flex: 0 0 56px; height: 56px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 70%, rgba(79,224,255,.35), rgba(5,12,24,.9) 70%);
  box-shadow: inset 0 0 0 1px rgba(140, 210, 255, .3), inset 0 -10px 18px rgba(79, 224, 255, .18), 0 0 14px rgba(79, 224, 255, .12); }
.well img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: lighten; }
.mod-main { flex: 1; min-width: 0; }
.mod-name { font-family: var(--h); font-size: 16px; line-height: 1.05; letter-spacing: .4px; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-lv { font-family: var(--c); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: 1px; color: #b8c4d6; margin-top: 2px; }
.mod-rate { font-family: var(--c); font-weight: 700; font-size: 13.5px; line-height: 1.25; letter-spacing: .6px; color: var(--cyan); margin-top: 1px; text-shadow: 0 0 10px #4fe0ff55; white-space: nowrap; }
.mod-rate small { font-size: 11px; color: var(--cyanS); opacity: .85; margin-left: 4px; }
.gauge { display: flex; gap: 2px; margin-top: 4px; max-width: 120px; }
.gauge i { flex: 1; height: 5px; border-radius: 2px; background: rgba(255,255,255,.12); }
.gauge i.on { background: linear-gradient(90deg, #ff7a3c, #ffc65c); box-shadow: 0 0 5px #ffb44d88; }
.gauge i.on:nth-child(n+5) { background: linear-gradient(90deg, #ffc65c, #f4ff7a); }
.gauge i.on:nth-child(n+8) { background: linear-gradient(90deg, #8affc8, #4fe0ff); box-shadow: 0 0 5px #4fe0ff88; }

/* Holographic buy button */
.buy { position: relative; flex: 0 0 auto; min-width: 108px; height: 50px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #1a2234, #0b111c) padding-box, var(--holo) border-box; background-size: 100% 100%, 220% 100%; border: 2.5px solid transparent;
  font-family: var(--h); font-size: 22px; color: #fff; letter-spacing: .3px; box-shadow: 0 0 16px rgba(190, 160, 255, .35), 0 0 6px rgba(120, 230, 255, .3); animation: holoShift 5s linear infinite; transition: transform .06s; }
.buy::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 3.2s ease-in-out infinite; }
.buy .pump { width: 22px; height: 22px; flex: 0 0 auto; }
.buy:active { transform: scale(.95); }
.buy:disabled { cursor: default; filter: saturate(.35) brightness(.78); box-shadow: none; animation: none; }
.buy:disabled::after { display: none; }
@keyframes holoShift { to { background-position: 0 0, 220% 0; } }
@keyframes sheen { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }

/* Locked teaser */
.mod.locked { opacity: 1; border-style: dashed; border-color: rgba(140, 180, 230, .3); background: rgba(10, 14, 24, .55); min-height: 54px; padding-top: 5px; padding-bottom: 5px; }
.mod.locked .well { height: 44px; flex-basis: 56px; }
.mod.locked .well img { filter: brightness(.22) blur(1.5px) grayscale(.4); }
.mod.locked .lock { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; color: var(--cyan); filter: drop-shadow(0 0 6px #4fe0ff); }
.mod.locked .mod-name { font-size: 18px; letter-spacing: 3px; color: #dfe8f5; }
.mod.locked .mod-lv { font-size: 11px; letter-spacing: 1.4px; color: #9fb0c6; }
.mod.pulse { animation: rowflash .45s; }
@keyframes rowflash { 40% { box-shadow: 0 0 30px rgba(140, 230, 255, .7); } }

/* Mid/late: dense tile row */
.list.tiles { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; scroll-snap-type: x proximity; gap: 7px; padding: 10px 2px 4px; }
.list.tiles .mod { flex: 0 0 calc((100% - 21px) / 3.6); min-width: 88px; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 6px 7px; min-height: 0; text-align: center; scroll-snap-align: start; }
.list.tiles .mod.locked .well, .list.tiles .well { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1.25; border-radius: 10px; }
.list.tiles .mod-name { font-size: 11.5px; white-space: normal; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; justify-content: center; letter-spacing: .2px; }
.list.tiles .mod-lv { font-size: 11px; margin-top: 2px; color: var(--cyanS); }
.list.tiles .mod-rate { font-size: 12px; }
.list.tiles .mod-rate small { display: none; }
.list.tiles .gauge { max-width: none; margin: 5px 2px 0; }
.list.tiles .gauge i { height: 4px; }
.list.tiles .buy { min-width: 0; width: 100%; height: 44px; font-size: 15.5px; padding: 0 3px; gap: 3px; letter-spacing: 0; border-radius: 11px; border-width: 2px; }
.list.tiles .buy.long { font-size: 13px; }
.buy.long { font-size: 18px; }
.list.tiles .buy .pump { width: 14px; height: 14px; }
.list.tiles .badge { left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9.5px; }
.list.tiles .mod.locked { justify-content: center; }
.list.tiles .mod.locked .mod-name { font-size: 15px; min-height: 0; }
.list.tiles .mod.locked .mod-lv { font-size: 9.5px; line-height: 1.3; color: #9fb0c6; letter-spacing: .8px; }

/* Launch bar */
.launch { position: relative; display: block; width: 100%; height: 60px; margin-top: 10px; border-radius: 16px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #121a28, #070b14) padding-box, linear-gradient(90deg, #6a7b96, #a8b8d0, #6a7b96) border-box; border: 2px solid transparent; box-shadow: inset 0 2px 10px #000a; }
.launch-fill { position: absolute; inset: 3px auto 3px 3px; width: 0%; max-width: calc(100% - 6px); border-radius: 12px; transition: width .25s;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 45%), linear-gradient(90deg, #6e2a10, #b8501f 55%, #e07a3c); box-shadow: 0 0 18px rgba(224, 122, 60, .45); }
.launch.holo { background: linear-gradient(180deg, #121a28, #070b14) padding-box, var(--holo) border-box; box-shadow: inset 0 2px 10px #000a, 0 0 18px rgba(170, 160, 255, .35); }
.launch.holo .launch-fill { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%), linear-gradient(90deg, #3a6cff, #4fe0ff 25%, #8affc8 45%, #ffe08a 65%, #ff8be0 85%, #c79bff);
  background-size: 100% 100%, 200% 100%; animation: holoShift 6s linear infinite; box-shadow: 0 0 22px rgba(140, 200, 255, .5); }
.launch-text { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; height: 100%; font-size: 24px; letter-spacing: 1.5px; text-shadow: 0 2px 6px #000c; }
.lsep { width: 0; }
.launch.ready { cursor: pointer; animation: readyPulse 1.1s ease-in-out infinite; }
.launch.ready .launch-fill { max-width: none; }
.launch:disabled { cursor: default; }
@keyframes readyPulse { 50% { box-shadow: inset 0 2px 10px #000a, 0 0 36px rgba(200, 170, 255, .85); filter: brightness(1.15); } }

/* Depot */
.depot .mod { min-height: 72px; }
.depot .mod-name { white-space: normal; font-size: 15px; }
.depot .mod-lv { font-size: 12px; line-height: 1.25; letter-spacing: .4px; }
.depot .buy { min-width: 92px; height: 46px; font-family: var(--c); font-size: 14px; letter-spacing: 1.4px; }
.depot-note { font-family: var(--c); font-weight: 600; font-size: 12px; letter-spacing: .5px; color: var(--muted); padding: 4px 4px 2px; line-height: 1.35; }
.star { color: var(--gold); text-shadow: none; }

/* Overlays */
.overlay { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(2, 5, 12, .72); backdrop-filter: blur(6px); }
.overlay[hidden] { display: none; }
.modal { width: 84%; color: #fff; padding: 24px 18px 18px; text-align: center; border-radius: 20px; animation: rise .3s ease-out;
  background: linear-gradient(180deg, rgba(34, 44, 64, .85), rgba(12, 16, 28, .92)) padding-box, var(--holo) border-box; border: 2px solid transparent; box-shadow: 0 20px 60px #000c; }
.modal-brand { font-family: var(--h); font-size: 13px; letter-spacing: 4px; margin-bottom: 10px;
  background: var(--holo); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holoShift 5s linear infinite; filter: drop-shadow(0 0 8px rgba(160,190,255,.4)); }
.modal-kicker { font-family: var(--c); font-weight: 700; letter-spacing: 2px; font-size: 14px; color: var(--cyan); }
.modal-big { font-size: 44px; margin: 10px 0 4px; }
.modal-sub { font-family: var(--c); font-weight: 600; font-size: 13px; letter-spacing: .8px; color: #aab6c8; margin-bottom: 16px; line-height: 1.4; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.btn { position: relative; font-size: 17px; letter-spacing: 1px; padding: 13px 16px; border-radius: 14px; overflow: hidden; }
.btn.holo { color: #0b1220; background: var(--holo); background-size: 220% 100%; animation: holoShift 5s linear infinite; box-shadow: 0 0 20px rgba(180, 160, 255, .45), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.15); }
.btn.holo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 3.2s ease-in-out infinite; }
.btn.ghost { color: #e8f6ff; background: rgba(20, 30, 48, .7) padding-box, linear-gradient(120deg, #7ec8ff, #c79bff) border-box; border: 1.5px solid transparent; }
.btn.wide { width: 100%; margin-top: 10px; font-size: 19px; }
.modal .btn { width: 100%; }

.launchseq { background: transparent; backdrop-filter: none; pointer-events: all; }
.count { font-size: 120px; color: #fff; text-shadow: 0 0 30px #4fe0ff, 0 6px 0 #0008; animation: countpop .5s ease-out; }
@keyframes countpop { from { transform: scale(1.6); opacity: 0; } }
.flash { position: absolute; inset: 0; background: #eaf8ff; opacity: 0; pointer-events: none; }
.launchseq.boom .flash { animation: flash .7s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.app.shake { animation: shake .09s linear infinite; }
@keyframes shake { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 2px); } }
.station.liftoff { animation: liftoff 1.3s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes liftoff { to { transform: translateY(-120vh) scale(.6); } }
.trail { position: absolute; left: 50%; width: 34px; margin-left: -17px; top: 55%; height: 0; background: linear-gradient(#fff, #7fdcff 30%, #c79bff 60%, transparent); border-radius: 17px; animation: trail 1.3s ease-in forwards; z-index: 0; filter: blur(3px); }
@keyframes trail { to { height: 120vh; top: -20%; opacity: .2; } }

.share { align-items: start; overflow-y: auto; background: rgba(2, 5, 12, .92); }
.share-inner { width: 100%; padding: 16px 18px 24px; display: flex; flex-direction: column; align-items: center; animation: rise .35s ease-out; }
.share-head { font-family: var(--c); font-weight: 700; font-size: 14px; letter-spacing: 1.4px; color: var(--cyan); margin-bottom: 10px; text-align: center; }
.card-img { width: 100%; max-width: 330px; border-radius: 16px; box-shadow: 0 12px 40px #000c, 0 0 30px rgba(170, 160, 255, .25); display: block; }
.cmdr { margin-top: 12px; font-family: var(--c); font-weight: 700; letter-spacing: 1.4px; font-size: 13px; color: #b8c4d6; display: flex; gap: 8px; align-items: center; }
.cmdr input { font: inherit; font-family: var(--h); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; width: 160px; background: none; border: 0; border-bottom: 2px solid var(--cyan); color: #fff; padding: 4px 2px; outline: none; }
.share-btns { display: flex; gap: 8px; margin-top: 12px; width: 100%; max-width: 330px; }
.share-btns .btn { flex: 1; font-size: 14px; padding: 12px 6px; }
.share-inner .btn.wide { max-width: 330px; }
.share-note { font-family: var(--c); font-weight: 600; font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 16px; letter-spacing: .5px; }

.toast { position: absolute; left: 50%; top: 128px; transform: translateX(-50%) translateY(10px); color: #fff; font-family: var(--c); font-weight: 700; letter-spacing: 1.2px; font-size: 14px;
  padding: 8px 14px; border-radius: 10px; opacity: 0; transition: .25s; z-index: 60; pointer-events: none; white-space: nowrap;
  background: rgba(14, 22, 38, .85) padding-box, var(--holo) border-box; border: 1.5px solid transparent; backdrop-filter: blur(8px); }
.toast.on { opacity: 1; transform: translateX(-50%); }
.dev { position: absolute; top: 150px; right: 6px; z-index: 45; display: flex; flex-direction: column; gap: 4px; }
.dev button { font-family: var(--c); font-size: 10px; background: #000a; border: 1px solid var(--cyan); color: var(--cyan); padding: 4px 6px; border-radius: 3px; }
.dev[hidden] { display: none; }
@media (max-height: 740px) {
  .tapzone { width: min(80vw, 300px, 25dvh); } .tap-hint { font-size: 16px; } .hud { padding-top: calc(10px + env(safe-area-inset-top)); }
  .mod { min-height: 68px; padding: 6px 9px; } .well { flex-basis: 52px; height: 52px; } .buy { height: 46px; font-size: 19px; min-width: 100px; }
  .launch { height: 52px; } .wordmark { font-size: 13px; letter-spacing: 2.6px; margin-bottom: 6px; } .tag-sector { font-size: 24px; } .fuel-num { font-size: 26px; } .list { max-height: min(260px, 36dvh); }
  .list.tiles .buy { height: 40px; } .list.tiles .mod-rate { display: none; }
}
@media (prefers-reduced-motion: reduce) { .orbit, .station-img, .buy, .buy::after, .btn.holo, .launch.holo .launch-fill { animation: none; } }

/* Living station canvas (crew, tugs, salvage pad, refinery, canisters) */
.live { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.station { translate: 0 0; will-change: translate; }
.tapzone.holding .station-img { filter: drop-shadow(0 0 22px rgba(120, 220, 255, .5)) brightness(1.08); }
.app.auto .tap-hint { color: var(--cyanS); text-shadow: 0 0 12px #4fe0ff88, 0 2px 8px #000; }

/* Salvage → refinery flow readout */
.flow { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 7px; row-gap: 1px; margin: 2px 0 2px; padding: 3px 10px 4px;
  font-family: var(--c); font-weight: 700; font-size: 11.5px; letter-spacing: 1px; color: #c9d6e6; pointer-events: none;
  background: rgba(6, 10, 20, .55); border: 1px solid rgba(150, 200, 255, .2); border-radius: 8px; backdrop-filter: blur(4px); }
.flow b { font-family: var(--h); font-weight: 400; font-size: 11.5px; color: #fff; letter-spacing: .3px; }
.flow .fl-arrow { color: #ffb44d; }
.flow .fl-state { flex-basis: 100%; text-align: center; font-size: 10px; letter-spacing: 1.4px; color: #8affc8; }
.flow.limit { border-color: rgba(255, 154, 92, .55); }
.flow.limit .fl-b, .flow.limit .fl-b b { color: #ffb27a; }
.flow.limit .fl-state { color: #ffc65c; }
.flow.jam { border-color: #ff6a4a; box-shadow: 0 0 14px rgba(255, 90, 60, .35); animation: jamPulse .9s ease-in-out infinite; }
.flow.jam .fl-state { color: #ff8a6a; }
@keyframes jamPulse { 50% { box-shadow: 0 0 22px rgba(255, 90, 60, .6); } }

/* BOTTLENECK module: the refinery step that is holding salvage back */
.mod.neck { border-color: transparent; background: linear-gradient(180deg, rgba(56, 34, 28, .8), rgba(22, 16, 20, .85)) padding-box, linear-gradient(160deg, #ff6a4a, #ffb44d 50%, #ff6a4a) border-box;
  border: 1.5px solid transparent; box-shadow: 0 0 22px rgba(255, 110, 60, .35); opacity: 1 !important; filter: none !important; }
.mod.neck .badge { display: block; color: #2a0a00; background: linear-gradient(90deg, #ff8a5c, #ffc65c); box-shadow: 0 0 10px #ff7a4a99; animation: neckBlink 1s ease-in-out infinite; }
@keyframes neckBlink { 50% { filter: brightness(1.3); } }
.mod[data-role="refine"] .mod-rate { color: #ffc65c; text-shadow: 0 0 10px #ffb44d44; }

/* Vertical console fit on ~390px phones */
.mod { gap: 10px; padding-top: 13px; }
.list { max-height: min(300px, 34dvh); }
.tabs { padding: 4px 0 6px; }
.mod-name { font-size: 14.5px; overflow: visible; text-overflow: clip; }
.buy { min-width: 96px; padding: 0 12px; font-size: 21px; }
.buy.long { font-size: 18px; }
.well { flex-basis: 52px; height: 52px; }
.mod-rate { font-size: 12.5px; }
.mod-rate small { font-size: 10.5px; margin-left: 3px; }
@media (max-height: 740px) { .flow { font-size: 10.5px; padding: 2px 8px 3px; } .flow .fl-state { font-size: 9px; } .buy { min-width: 92px; } }
@media (prefers-reduced-motion: reduce) { .station-img.snap, .station.dock .station-img { animation: none; } }