/* StarShuttle — visual polish layer. Loaded after style.css: it only refines surfaces, type, motion and
   states; layout stays in style.css. One consistent glass language, one accent system, smooth easing. */

:root {
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --surface: linear-gradient(180deg, rgba(26, 37, 63, 0.74), rgba(10, 16, 30, 0.68));
  --surface-solid: linear-gradient(180deg, rgba(26, 37, 63, 0.97), rgba(11, 17, 31, 0.97));
  --edge: 1px solid rgba(255, 255, 255, 0.09);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --shadow-s: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-l: 0 24px 70px rgba(0, 0, 0, 0.5);
  --blur: blur(16px) saturate(1.3);
}

html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'tnum' 1, 'lnum' 1; }
::selection { background: rgba(94, 200, 255, 0.3); }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 150, 210, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(120, 150, 210, 0.3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(140, 175, 235, 0.5); background-clip: padding-box; }

/* ---- shared glass surfaces ----------------------------------------------- */
.panel, .chip, .gauge.fuel, .hull, .speed, .engine-btn, .stat-chips .sc, .site-line, .steer-hint, .toast {
  background: var(--surface);
  border: var(--edge);
  box-shadow: var(--hi), var(--shadow-s);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.panel { border-radius: 22px; box-shadow: var(--hi), var(--shadow-l); }
.card { background: var(--surface-solid); border: var(--edge); box-shadow: var(--hi), var(--shadow-l); animation: pop 0.38s var(--ease) both; }
@keyframes pop { 0% { transform: translateY(14px) scale(0.965); opacity: 0; } 100% { transform: none; opacity: 1; } }
.modal-bg { animation: fadeIn 0.3s var(--ease); }

/* ---- buttons ----------------------------------------------------------------- */
.btn { min-height: 46px; border-radius: 14px; background: var(--surface); border: var(--edge); box-shadow: var(--hi), 0 4px 14px rgba(0, 0, 0, 0.22); letter-spacing: 0.05em; transition: transform 0.18s var(--ease), filter 0.18s, background 0.2s, border-color 0.2s, box-shadow 0.25s; position: relative; overflow: hidden; }
.btn:hover { background: linear-gradient(180deg, rgba(40, 56, 94, 0.86), rgba(18, 27, 48, 0.8)); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.975); transition-duration: 0.06s; }
.btn.primary { background: linear-gradient(180deg, #4cbaff 0%, #2a85ff 55%, #1f6bff 100%); border-color: rgba(170, 224, 255, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 26px rgba(40, 140, 255, 0.38); text-shadow: 0 1px 0 rgba(0, 40, 110, 0.35); }
.btn.primary:hover { filter: brightness(1.08); background: linear-gradient(180deg, #5cc3ff 0%, #3a90ff 55%, #2b78ff 100%); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-120%); transition: transform 0.7s var(--ease); pointer-events: none; }
.btn.primary:hover::after, .btn.launch:hover::after { transform: translateX(120%); }
.btn.big { min-height: 58px; border-radius: 18px; letter-spacing: 0.1em; }
.btn.launch { background: linear-gradient(180deg, #ffc247 0%, #ff8a2a 55%, #ff6a1f 100%); border-color: rgba(255, 224, 170, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 40px rgba(255, 110, 30, 0.5); text-shadow: 0 1px 0 rgba(255, 220, 160, 0.4); }
.btn[disabled] { opacity: 0.4; filter: saturate(0.6); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #8fd8ff; outline-offset: 3px; border-radius: 12px; }

/* ---- chips / top bar ------------------------------------------------------------ */
.chip { border-radius: 999px; padding: 7px 15px; }
.chip.btn-chip { transition: transform 0.18s var(--ease), background 0.2s, border-color 0.2s; }
.chip.btn-chip:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.22); }
.chip.btn-chip:active { transform: scale(0.96); }
.chip.coins { padding: 7px 18px 7px 14px; }
.chip.coins b { color: #ffe9a6; text-shadow: 0 0 12px rgba(255, 190, 40, 0.35); }
.brand { background: linear-gradient(180deg, #fff, #bfe6ff 80%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(94, 200, 255, 0.3)); }
.brand span { -webkit-text-fill-color: transparent; background: linear-gradient(180deg, #8fdcff, #3fb2ff); -webkit-background-clip: text; background-clip: text; }

/* ---- hangar panel -------------------------------------------------------------------- */
.tabs { padding: 8px; gap: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.12); }
.tab { border-radius: 12px; font-size: 15px; letter-spacing: 0.1em; transition: color 0.2s, background 0.25s var(--ease), box-shadow 0.25s; }
.tab:hover { background: rgba(255, 255, 255, 0.05); }
.tab.active { background: linear-gradient(180deg, rgba(94, 200, 255, 0.24), rgba(94, 200, 255, 0.1)); box-shadow: inset 0 0 0 1px rgba(120, 214, 255, 0.5), 0 0 18px rgba(94, 200, 255, 0.18); }
.panel-body { padding: 12px; gap: 10px; }

.card-up { border-radius: 18px; padding: 13px; background: linear-gradient(180deg, rgba(34, 47, 78, 0.62), rgba(16, 24, 42, 0.62)); border: var(--edge); box-shadow: var(--hi); transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.3s; animation: cardIn 0.45s var(--ease) both; }
.card-up:nth-child(2) { animation-delay: 0.04s; } .card-up:nth-child(3) { animation-delay: 0.08s; } .card-up:nth-child(4) { animation-delay: 0.12s; } .card-up:nth-child(5) { animation-delay: 0.16s; } .card-up:nth-child(6) { animation-delay: 0.2s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card-up:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ic, #5ec8ff) 55%, transparent); box-shadow: var(--hi), 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px color-mix(in srgb, var(--ic, #5ec8ff) 18%, transparent); }
.card-up .ic { border-radius: 15px; background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--ic, #5ec8ff) 38%, transparent), rgba(255, 255, 255, 0.02) 70%); border: 1px solid color-mix(in srgb, var(--ic, #5ec8ff) 35%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--ic, #5ec8ff) 18%, transparent); }
.card-up .nm { font-size: 19px; letter-spacing: 0.04em; }
.card-up .ds { font-size: 14px; margin: 2px 0 8px; }
.pips-row { gap: 10px; margin-bottom: 6px; }
.pips { flex: 1; gap: 2px; flex-wrap: nowrap; }
.pips i { flex: 1; width: auto; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); transition: background 0.3s, box-shadow 0.3s; }
.pips i.on { background: linear-gradient(90deg, color-mix(in srgb, var(--ic, #5ec8ff) 70%, #fff), var(--ic, #5ec8ff)); box-shadow: 0 0 8px color-mix(in srgb, var(--ic, #5ec8ff) 60%, transparent); }
.pips-row .lv { font-size: 12px; letter-spacing: 0.1em; font-weight: 700; }
.card-up .st { font-size: 14px; }
.buy { border-radius: 14px; min-width: 100px; padding: 10px 12px; background: linear-gradient(180deg, #ffc247, #ff8a1f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 20px rgba(255, 140, 30, 0.32); transition: transform 0.18s var(--ease), filter 0.18s, box-shadow 0.25s; }
.buy:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 28px rgba(255, 140, 30, 0.5); }
.buy:active { transform: scale(0.95); }
.buy.cant { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.buy.cant:hover { transform: none; filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.buy.max { background: rgba(67, 224, 139, 0.14); box-shadow: inset 0 0 0 1px rgba(67, 224, 139, 0.45); }
@keyframes cardflash { 0% { box-shadow: var(--hi), 0 0 0 0 color-mix(in srgb, var(--ic, #5ec8ff) 80%, transparent); } 100% { box-shadow: var(--hi), 0 0 0 20px transparent; } }

.dest .hero { height: 104px; border-radius: 0; }
.dest .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 12, 22, 0.75)); }
.dest .hero h3, .dest .hero .pad { position: relative; z-index: 1; }
.dest.current { box-shadow: var(--hi), 0 0 0 1.5px rgba(94, 200, 255, 0.85), 0 0 34px rgba(94, 200, 255, 0.2); }
.dest .prog { height: 6px; }
.dest .prog i { box-shadow: 0 0 10px rgba(94, 200, 255, 0.5); }
.lockline { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #ffd28a; }

.stat-chips .sc { border-radius: 14px; padding: 6px 12px 6px 8px; gap: 9px; animation: cardIn 0.5s var(--ease) both; }
.stat-chips .sc:nth-child(2) { animation-delay: 0.05s; } .stat-chips .sc:nth-child(3) { animation-delay: 0.1s; } .stat-chips .sc:nth-child(4) { animation-delay: 0.15s; } .stat-chips .sc:nth-child(5) { animation-delay: 0.2s; }
.stat-chips .sc svg { box-sizing: content-box; padding: 5px; border-radius: 9px; background: color-mix(in srgb, var(--ic, #5ec8ff) 16%, transparent); font-size: 15px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ic, #5ec8ff) 55%, transparent)); }
.site-line { padding: 5px 16px; }

/* ---- HUD ------------------------------------------------------------------------------- */
.alt-num b { letter-spacing: 0.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.6); }
.alt-num small { color: #8fdcff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.alt-zone { font-size: 13px; letter-spacing: 0.24em; opacity: 0.92; position: relative; padding-top: 6px; }
.alt-zone::before { content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #5ec8ff, transparent); }
.goal-label { font-size: 12px; letter-spacing: 0.18em; font-weight: 700; }
.goal-track { height: 6px; background: rgba(6, 10, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.goal-track i { transition: width 0.25s linear; background: linear-gradient(90deg, #5ec8ff, #ffd77a); box-shadow: 0 0 12px rgba(94, 200, 255, 0.55); }
.goal-track em { width: 14px; height: 14px; margin-left: -7px; background: radial-gradient(circle at 35% 30%, #fff, #bfeaff 60%, #5ec8ff); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 14px rgba(160, 225, 255, 0.9); transition: left 0.25s linear; }

.gauge.fuel { border-radius: 16px; padding: 11px 9px; }
.gtrack { width: 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07); }
.gtrack::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 18%, rgba(0, 0, 0, 0.3) 18% 20%); pointer-events: none; border-radius: 8px; }
.gtrack i { background: linear-gradient(0deg, #ff4a24, #ff9a2e 55%, #ffe05a); box-shadow: 0 0 12px rgba(255, 140, 40, 0.55); }
.gauge.fuel b { letter-spacing: 0.08em; }
.hull { border-radius: 16px; gap: 6px; padding: 9px; }
.hull i { transition: background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-spring); }
.speed { border-radius: 12px; padding: 5px 12px; }
.speed b { font-family: var(--font-head); font-size: 15px; letter-spacing: 0.04em; }

.engine-btn { border-radius: 22px; padding: 12px 22px; border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 0.18s var(--ease), border-color 0.25s, box-shadow 0.3s, background 0.25s; }
.engine-btn:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }
.engine-btn.on { box-shadow: var(--hi), var(--shadow-s), 0 0 28px rgba(67, 224, 139, 0.12); }
.engine-btn.off { box-shadow: var(--hi), var(--shadow-s), 0 0 28px rgba(255, 90, 90, 0.2); }
.eb-light { transition: background 0.2s, box-shadow 0.2s; animation: lightpulse 2s ease-in-out infinite; }
@keyframes lightpulse { 50% { box-shadow: 0 0 22px currentColor; } }
.engine-btn kbd { border-radius: 7px; letter-spacing: 0.08em; }
.steer-hint { border-radius: 99px; font-size: 14px; letter-spacing: 0.08em; }

.banner { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transform: translateY(-16px) scale(0.94); }
.banner .b-title { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(94, 200, 255, 0.35); }
.banner .b-sub { position: relative; display: inline-block; padding: 0 40px; }
.banner .b-sub::before, .banner .b-sub::after { content: ''; position: absolute; top: 50%; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: 0.7; }
.banner .b-sub::before { left: 0; } .banner .b-sub::after { right: 0; transform: scaleX(-1); }
.toast { border-radius: 99px; padding: 7px 18px; animation: toast 1.8s var(--ease) forwards; }
.countdown { text-shadow: 0 0 80px rgba(94, 200, 255, 0.75), 0 6px 30px rgba(0, 0, 0, 0.45); }

.meter-label { font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
.meter-bar { height: 36px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, 0.4); box-shadow: 0 0 40px rgba(94, 200, 255, 0.35), inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 12px 30px rgba(0, 0, 0, 0.3); }
.meter-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 255, 255, 0.07) 24px 25px); pointer-events: none; }
.needle { width: 5px; margin-left: -2.5px; background: linear-gradient(180deg, #fff, #5ec8ff); box-shadow: 0 0 16px #5ec8ff, 0 0 4px #fff; }
.zone.perfect { background: linear-gradient(180deg, #fff, #dff4ff); }

/* ---- title / loading --------------------------------------------------------------------- */
.logo-big { letter-spacing: 0.08em; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.5)); }
.logo-big span { background: linear-gradient(180deg, #ffffff 10%, #8fdcff 55%, #3fb2ff); -webkit-background-clip: text; background-clip: text; }
.tagline { letter-spacing: 0.06em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
#btn-play { animation: pulse 2.6s ease-in-out infinite; }
.loadbar { height: 5px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.loadbar i { background: linear-gradient(90deg, #3fb2ff, #8fdcff 60%, #ffd77a); box-shadow: 0 0 14px rgba(94, 200, 255, 0.7); transition: width 0.4s var(--ease); }

/* ---- modals / settings --------------------------------------------------------------------- */
.card h2 { font-size: 20px; letter-spacing: 0.14em; }
.row { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.row input[type='checkbox'] { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.14); position: relative; cursor: pointer; transition: background 0.25s var(--ease); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); flex: none; }
.row input[type='checkbox']::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.28s var(--ease-spring); }
.row input[type='checkbox']:checked { background: linear-gradient(180deg, #4cbaff, #2a85ff); }
.row input[type='checkbox']:checked::after { transform: translateX(18px); }
.row select { background: rgba(14, 22, 40, 0.9); border-radius: 12px; padding: 8px 12px; cursor: pointer; }

/* ---- results ------------------------------------------------------------------------------------- */
.results > * { animation: cardIn 0.5s var(--ease) both; }
.results > *:nth-child(1) { animation-delay: 0.05s; } .results > *:nth-child(2) { animation-delay: 0.12s; } .results > *:nth-child(3) { animation-delay: 0.18s; }
.results > *:nth-child(4) { animation-delay: 0.26s; } .results > *:nth-child(5) { animation-delay: 0.34s; } .results > *:nth-child(6) { animation-delay: 0.4s; } .results > *:nth-child(7) { animation-delay: 0.46s; }
.res-main b { background: linear-gradient(180deg, #fff 25%, #bfe6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(94, 200, 255, 0.3)); }
.res-badge { text-shadow: 0 0 20px currentColor; }
.res-grid div { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); box-shadow: var(--hi); }
.res-earn { background: radial-gradient(ellipse at center, rgba(255, 201, 51, 0.12), transparent 70%); border-radius: 16px; }

/* ---- feedback overlays ------------------------------------------------------------------------------ */
.hit-flash { background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 40, 30, 0.42)); }

@media (hover: none) { .btn:hover, .card-up:hover, .buy:hover, .chip.btn-chip:hover, .engine-btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- launch timing: press exactly on GO (no meter) ------------------------------------------ */
.boost-hint { position: absolute; left: 0; right: 0; bottom: calc(14vh + var(--safe-b)); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: clamp(16px, 2.8vw, 22px); letter-spacing: 0.08em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); pointer-events: none; }
.boost-hint.show { opacity: 1; transform: none; }
.boost-hint kbd { font-family: var(--font-ui); font-size: 0.8em; padding: 3px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.boost-hint b { font-family: var(--font-head); font-size: 1.5em; color: #6dffb0; text-shadow: 0 0 18px rgba(80, 255, 160, 0.8); animation: lightpulse 1s ease-in-out infinite; }
.boost-hint .bh-touch { display: none; }
@media (pointer: coarse) { .boost-hint .bh-desk { display: none; } .boost-hint .bh-touch { display: inline; } }
.countdown.go { color: #6dffb0; text-shadow: 0 0 70px rgba(80, 255, 160, 0.85), 0 6px 30px rgba(0, 0, 0, 0.45); }
.countdown.go.tick { animation: gopop 0.8s var(--ease) forwards; }
@keyframes gopop { 0% { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: scale(1.12); } 30% { transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }