:root {
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
  --content-safe-top: 0px;
  --content-safe-bottom: 0px;
  --app-width: 390px;
  --app-height: 844px;
  --panel-max: 520px;
  --ui-scale: 1;
  --bg: #05050a;
  --panel: #090b12;
  --text: #fff;
  --muted: #8d91a1;
  --line: rgba(255,255,255,.11);
  --rocket-accent: #63e8ff;
  --rocket-glow: #5ecbff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #000; color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
body { min-height: 100svh; min-height: 100dvh; }
button, input { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
[hidden], .hidden { display: none !important; }

.app-shell { position: relative; width: 100%; height: var(--app-height, 100dvh); min-height: 100svh; overflow: hidden; background: var(--bg); }
.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.is-active { display: block; }
.protected-top { padding-top: calc(10px + var(--safe-top) + var(--content-safe-top)); }
.rocket-visual { display: block; position: relative; width: 146px; height: auto; aspect-ratio: 420 / 760; max-width: 100%; pointer-events: none; filter: drop-shadow(0 24px 34px color-mix(in srgb, var(--rocket-glow) 28%, transparent)); }

.primary-btn, .secondary-btn, .reward-chip, .share-premium-btn { min-height: 54px; border-radius: 19px; font-weight: 900; letter-spacing: .02em; transition: transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease; }
.primary-btn:active, .secondary-btn:active, .reward-chip:active, .share-premium-btn:active { transform: scale(.985); }
.primary-btn { background: linear-gradient(135deg, #fff, #edf7ff 42%, #f0e7ff); color: #07090f; box-shadow: 0 18px 46px rgba(125,203,255,.18), inset 0 1px 0 rgba(255,255,255,.96); }
.secondary-btn { background: linear-gradient(145deg, rgba(28,31,45,.94), rgba(11,12,19,.98)); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.reward-chip, .share-premium-btn { display: grid; align-content: center; justify-items: center; text-align: center; padding: 10px 16px; background: linear-gradient(120deg, rgba(24,31,46,.95), rgba(22,16,40,.97)); border: 1px solid rgba(130,215,255,.26); color: #fff; box-shadow: inset 0 0 34px rgba(99,209,255,.06), 0 10px 34px rgba(0,0,0,.16); }
.reward-chip b, .share-premium-btn b { display: block; width: 100%; text-align: center; font-size: 12px; line-height: 1.15; }
.reward-chip span, .share-premium-btn span { display: block; width: 100%; margin-top: 4px; text-align: center; color: #b8c3d5; font-size: 10px; font-weight: 700; line-height: 1.25; }
.reward-chip.full, .share-premium-btn { width: 100%; }
.icon-btn { width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,11,17,.68); backdrop-filter: blur(16px); font-weight: 900; font-size: 16px; }
.text-btn { min-height: 44px; padding: 12px; background: transparent; color: #94a0b5; font-size: 10px; letter-spacing: .08em; }

/* Loading */
.loading-screen { background: radial-gradient(circle at 50% 34%, #1b3470, #101739 26%, #080b14 68%, #020204); text-align: center; }
.loading-screen.is-active { display: grid; grid-template-rows: auto auto minmax(180px, 1fr) auto auto auto; align-content: center; justify-items: center; gap: 9px; padding: calc(26px + var(--safe-top)) 18px calc(24px + var(--safe-bottom)); }
.load-space { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.load-space i { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .28; animation: orbDrift 8s ease-in-out infinite; }
.load-space i:nth-child(1) { width: 180px; height: 180px; left: -40px; top: 18%; background: #2de7ff; }
.load-space i:nth-child(2) { width: 220px; height: 220px; right: -70px; top: 22%; background: #7b5cff; animation-delay: -2s; }
.load-space i:nth-child(3) { width: 170px; height: 170px; left: 30%; bottom: 4%; background: #ff56a6; animation-delay: -4s; }
.load-space i:nth-child(4) { width: 150px; height: 2px; left: -20%; top: 22%; background: linear-gradient(90deg, transparent, #fff, #84ebff); transform: rotate(-18deg); filter: drop-shadow(0 0 10px #8af3ff); animation: homeComet 7s linear infinite 1s; }
.loading-lockup { position: relative; z-index: 2; }
.loading-lockup span { display: block; font-size: 8px; letter-spacing: .30em; color: #8da1bd; }
.loading-lockup strong { display: block; margin-top: 5px; font-size: clamp(34px, 9vw, 68px); line-height: .9; letter-spacing: -.075em; }
.loading-lockup small { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .08em; color: #9fadbf; }
.loading-badges { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.loading-badges span { height: 26px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: 8px; letter-spacing: .15em; color: #d9edff; }
.loading-rocket-wrap { position: relative; z-index: 2; width: 220px; height: 300px; display: grid; place-items: center; animation: rocketHover 1.8s ease-in-out infinite; }
.loading-orbit-ring { position: absolute; width: 198px; height: 198px; border: 1px solid rgba(119,221,255,.22); border-radius: 50%; transform: rotateX(68deg); box-shadow: 0 0 45px rgba(102,205,255,.17); animation: ringSpin 4.4s linear infinite; }
.loading-orbit-ring.orbit-2 { width: 150px; height: 150px; border-color: rgba(255,122,208,.18); animation-duration: 5.6s; }
.loading-rocket { width: 168px; max-height: 100%; filter: drop-shadow(0 30px 46px color-mix(in srgb, var(--rocket-glow) 34%, transparent)); }
.loading-status { position: relative; z-index: 2; display: grid; gap: 6px; }
.loading-status b { min-height: 16px; font-size: 10px; letter-spacing: .16em; }
.loading-status span { font-size: 10px; color: #7f90a8; }
.loader-track { z-index: 2; width: min(72vw, 320px); height: 4px; background: rgba(255,255,255,.09); border-radius: 999px; overflow: hidden; }
.loader-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7af1ff, #fff, #b26cff); box-shadow: 0 0 18px #72eaff; transition: width .18s linear; }
#loader-percent { z-index: 2; font-size: 10px; color: #a8b7cb; letter-spacing: .12em; }

/* Home */
.home-screen { background: radial-gradient(circle at 50% 36%, #17265a, #0d122d 28%, #06070e 70%, #020203); }
.home-screen:before { content: ""; position: absolute; left: 50%; top: 28%; width: min(90vw, 560px); height: min(90vw, 560px); transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--rocket-glow) 16%, transparent), transparent 68%); filter: blur(18px); }
.home-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .24; animation: orbDrift 9s ease-in-out infinite; }
.orb.a { width: 240px; height: 240px; left: -84px; top: 18%; background: #29d8ff; }
.orb.b { width: 270px; height: 270px; right: -110px; top: 36%; background: #8a54ff; animation-delay: -2s; }
.orb.c { width: 190px; height: 190px; left: 34%; bottom: -84px; background: #ff4faf; animation-delay: -5s; }
.comet { position: absolute; left: -30%; top: 16%; width: 190px; height: 2px; background: linear-gradient(90deg, transparent, #fff, #7be9ff); transform: rotate(-20deg); filter: drop-shadow(0 0 10px #8af3ff); animation: homeComet 8s linear infinite 1.5s; }
.topbar { position: absolute; z-index: 20; inset: 0 0 auto; min-height: calc(62px + var(--safe-top) + var(--content-safe-top)); display: grid; grid-template-columns: 44px minmax(0,1fr) minmax(82px,98px); align-items: center; gap: 8px; padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); }
.brand-lockup { text-align: center; line-height: .95; }
.brand-lockup strong { display: block; font-size: clamp(17px,4.7vw,21px); letter-spacing: -.05em; }
.brand-lockup span { display: block; margin-top: 4px; font-size: 7px; letter-spacing: .22em; color: #7f8aa0; }
.currency-pill { justify-self: end; height: 42px; padding: 0 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(11,13,23,.67); backdrop-filter: blur(16px); font-size: 12px; font-weight: 900; }
.currency-pill span { color: #ffd34f; }
.home-main { position: relative; z-index: 3; height: 100%; width: min(100%, var(--panel-max)); margin: 0 auto; padding: calc(66px + var(--safe-top) + var(--content-safe-top)) max(12px,var(--safe-right)) calc(10px + var(--safe-bottom)) max(12px,var(--safe-left)); display: grid; grid-template-rows: auto auto minmax(100px,1fr) auto auto auto auto auto; gap: clamp(6px,1svh,9px); overflow: hidden; }
.viral-strip { display: inline-flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; height: 25px; padding: 0 11px; border-radius: 999px; background: rgba(10,12,20,.58); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(14px); }
.viral-strip b, .viral-strip span, .viral-strip i { font-size: 8px; white-space: nowrap; }
.viral-strip b { letter-spacing: .14em; }
.viral-strip span { color: #8c97ab; }
.viral-strip i { color: #59647a; font-style: normal; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #5cf0a5; box-shadow: 0 0 11px #5cf0a5; animation: livePulse 1s infinite; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--rocket-accent); font-size: 7px; letter-spacing: .13em; }
.hero-copy h1 { margin: 7px 0 0; max-width: 9ch; font-size: clamp(28px,8.5vw,44px); line-height: .84; letter-spacing: -.08em; }
.home-rocket { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.home-rocket:before { content: ""; position: absolute; left: 50%; top: 54%; width: min(72vw,420px); height: min(19vw,88px); transform: translate(-50%,-50%) rotate(-8deg); border: 1px solid color-mix(in srgb,var(--rocket-accent) 16%,transparent); border-radius: 50%; }
.rocket-halo { position: absolute; width: min(60vw,300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--rocket-glow) 28%,transparent),transparent 62%); filter: blur(14px); animation: haloPulse 2.8s ease-in-out infinite; }
.rocket-ring { position: absolute; width: min(52vw,288px); height: min(12vw,56px); border: 1px solid color-mix(in srgb,var(--rocket-accent) 24%,transparent); border-radius: 50%; transform: rotate(-12deg); }
.ring-a { animation: ringFloat 3.6s ease-in-out infinite; }
.ring-b { transform: rotate(17deg) scale(.78); opacity: .55; animation: ringFloat 4.6s ease-in-out infinite reverse; }
#home-rocket-visual { position: relative; z-index: 2; top: -5px; display: grid; place-items: center; width: 100%; height: 100%; animation: rocketHover 2.3s ease-in-out infinite; }
.home-rocket .rocket-visual { width: auto; height: min(100%,250px); max-width: min(42vw,170px); }
.floating-coin { position: absolute; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 25%,#fff7b1,#ffc74a 46%,#9d5a09); border: 2px solid #ffe481; color: #553007; font-size: 10px; font-weight: 950; box-shadow: 0 0 12px rgba(255,199,74,.32); }
.coin-a { left: 19%; top: 48%; animation: coinFloat 3s ease-in-out infinite; }
.coin-b { right: 18%; top: 34%; animation: coinFloat 3.8s ease-in-out infinite -1.4s; }
.coin-c { right: 21%; bottom: 21%; transform: scale(.72); animation: coinFloat 2.7s ease-in-out infinite -.8s; }
.home-statline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.best-readout, .rocket-readout { min-width: 0; padding: 10px 12px; border-radius: 17px; background: linear-gradient(160deg,rgba(20,24,39,.84),rgba(8,10,16,.88)); border: 1px solid rgba(255,255,255,.08); }
.best-readout span, .rocket-readout span { display: block; font-size: 7px; letter-spacing: .16em; color: #7f8a9d; }
.best-readout strong, .rocket-readout strong { display: block; margin-top: 4px; font-size: clamp(13px,4vw,16px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-path-card { min-height: 46px; padding: 7px 12px; display: grid; grid-template-columns: auto minmax(50px,1fr) auto; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb,var(--rocket-accent) 28%,rgba(255,255,255,.08)); border-radius: 17px; background: linear-gradient(120deg,rgba(18,26,43,.9),rgba(21,13,36,.92)); text-align: left; }
.home-path-card small { display: block; color: #8492a8; font-size: 6px; letter-spacing: .14em; }
.home-path-card b { display: block; margin-top: 2px; font-size: 11px; color: var(--rocket-accent); }
.home-path-card > strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: #aab6c9; font-size: 7px; letter-spacing: .06em; }
.path-card-progress { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.path-card-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--rocket-accent),#fff,#a45dff); box-shadow: 0 0 12px var(--rocket-glow); }
.launch-btn { width: 100%; min-height: 49px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.launch-btn b { font-size: 15px; }
.launch-btn span { font-size: 9px; color: #2d3341; letter-spacing: .08em; }
.launch-btn:after { content: "→"; font-size: 16px; }
#prelaunch-ad-btn { min-height: 47px; }
.home-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.home-nav button { position: relative; min-height: 50px; padding: 9px 11px 8px; overflow: hidden; text-align: left; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(155deg,rgba(18,22,36,.92),rgba(8,9,14,.97)); }
.home-nav button:before { content: ""; position: absolute; right: -20px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--rocket-glow) 18%,transparent),transparent 64%); }
.home-nav b { display: block; font-size: 10px; }
.home-nav small { display: block; margin-top: 1px; color: #8994a8; font-size: 6px; letter-spacing: .08em; }
.nav-glyph { display: block; margin-bottom: 3px; color: var(--rocket-accent); font-size: 13px; }

/* Gameplay */
.game-screen { background: #000; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.game-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%,transparent 38%,rgba(0,0,0,.14) 70%,rgba(0,0,0,.46)); }
.game-hud { position: absolute; z-index: 8; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding-left: max(16px,var(--safe-left)); padding-right: max(16px,var(--safe-right)); pointer-events: none; }
.hud-block { width: max-content; min-width: 88px; margin-top: 15px; padding: 10px 12px; border-radius: 16px; background: rgba(7,10,18,.38); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.hud-block span { display: block; color: rgba(255,255,255,.52); font-size: 8px; letter-spacing: .15em; }
.hud-block strong { display: block; margin-top: 4px; font-size: 20px; letter-spacing: -.05em; }
.hud-right { justify-self: end; text-align: right; }
.hud-streak { margin-top: 16px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(12,10,24,.6); backdrop-filter: blur(12px); font-size: 14px; font-weight: 950; }
.fuel-gauge { position: absolute; z-index: 9; left: max(16px,var(--safe-left)); bottom: calc(18px + var(--safe-bottom)); width: min(138px,36vw); min-width: 114px; padding: 12px; border-radius: 22px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(145deg,rgba(7,10,18,.9),rgba(17,22,36,.86)); backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0,0,0,.28); transition: border-color .25s, box-shadow .25s; }
.fuel-gauge > span { display: block; color: #9db1c8; font-size: 8px; letter-spacing: .16em; }
.fuel-gauge strong { display: block; margin-top: 4px; font-size: 18px; letter-spacing: -.05em; }
.fuel-gauge > i { display: block; height: 10px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.fuel-gauge em { display: block; width: 100%; height: 100%; transform-origin: left; border-radius: inherit; background: linear-gradient(90deg,#ff3e68,#ffbe55 32%,#fff18b 62%,#6df3ff); box-shadow: 0 0 12px rgba(255,238,131,.3); transition: transform .12s linear; }
.fuel-gauge.critical { border-color: rgba(255,73,104,.65); box-shadow: 0 0 34px rgba(255,42,83,.22); animation: fuelCritical .8s ease-in-out infinite; }
.fuel-gauge.empty { background: rgba(30,5,13,.92); }
.boost-btn { position: absolute; z-index: 9; right: max(16px,var(--safe-right)); bottom: calc(18px + var(--safe-bottom)); width: 102px; height: 102px; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.24); background: radial-gradient(circle at 38% 28%,rgba(56,86,126,.96),rgba(8,9,17,.92)); backdrop-filter: blur(14px); font-size: 11px; font-weight: 950; box-shadow: 0 0 36px rgba(92,214,255,.18); }
.boost-btn span, .boost-btn small { position: relative; z-index: 2; display: block; text-align: center; }
.boost-btn span { margin-top: 20px; font-size: 12px; letter-spacing: .10em; }
.boost-btn small { margin-top: 2px; color: #b7c3d7; font-size: 8px; letter-spacing: .12em; }
.boost-btn i { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 8px; transform-origin: left; border-radius: 999px; background: linear-gradient(90deg,#6feaff,#fff,#8f55ff); box-shadow: 0 0 12px #71eaff; }
.drag-hint { position: absolute; z-index: 8; left: 50%; bottom: calc(48px + var(--safe-bottom)); transform: translateX(-50%); color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .18em; transition: opacity .4s; }
.context-reward { position: absolute; z-index: 12; left: 50%; bottom: calc(132px + var(--safe-bottom)); width: min(calc(100vw - 32px),340px); transform: translateX(-50%); padding: 15px 18px; border: 1px solid rgba(130,220,255,.26); border-radius: 22px; background: linear-gradient(145deg,rgba(10,15,28,.96),rgba(20,10,33,.96)); backdrop-filter: blur(18px); box-shadow: 0 18px 70px rgba(0,0,0,.55), 0 0 28px rgba(92,218,255,.12); }
.context-reward b { display: block; font-size: 13px; }
.context-reward span { display: block; margin-top: 4px; color: #b4c0d2; font-size: 10px; }
.game-event { position: absolute; z-index: 10; top: 24%; left: 50%; width: min(88vw,480px); transform: translateX(-50%) translateY(8px); padding: 10px 14px; border: 1px solid transparent; border-radius: 999px; opacity: 0; color: #fff; text-align: center; text-shadow: 0 2px 20px #000; font-size: 12px; font-weight: 950; letter-spacing: .06em; transition: opacity .3s, transform .3s; pointer-events: none; }
.game-event.show { opacity: 1; transform: translateX(-50%) translateY(0); border-color: rgba(255,255,255,.12); background: rgba(4,6,12,.54); backdrop-filter: blur(12px); }

/* Shared panels */
.panel-screen { background: radial-gradient(circle at 50% 20%,#12172b,#090b12 42%,#040507); }
.panel-screen:before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--rocket-glow) 8%,transparent),transparent 34%); }
.panel-header { position: absolute; z-index: 20; inset: 0 0 auto; min-height: calc(80px + var(--safe-top) + var(--content-safe-top)); display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 10px; padding-left: max(18px,var(--safe-left)); padding-right: max(18px,var(--safe-right)); }
.back-btn { width: 42px; height: 42px; border-radius: 14px; background: rgba(10,11,17,.68); border: 1px solid rgba(255,255,255,.12); font-size: 24px; }
.panel-header span { color: #7f8a9f; font-size: 8px; letter-spacing: .18em; }
.panel-header h2 { margin: 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(23px,7vw,28px); letter-spacing: -.05em; }
.header-balance { justify-self: end; color: #ffd555 !important; font-size: 11px !important; font-weight: 900; }
.panel-content { position: relative; width: min(100%,var(--panel-max)); height: 100%; margin: 0 auto; padding: calc(94px + var(--safe-top) + var(--content-safe-top)) max(18px,var(--safe-right)) calc(24px + var(--safe-bottom)) max(18px,var(--safe-left)); overflow: auto; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.panel-content::-webkit-scrollbar { display: none; }
.feature-card { position: relative; width: 100%; margin-bottom: 12px; padding: 19px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 25px; background: linear-gradient(145deg,rgba(20,24,39,.86),rgba(8,9,15,.9)); box-shadow: 0 24px 80px rgba(0,0,0,.24); }
.feature-glow:before { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -84px; border-radius: 50%; background: radial-gradient(circle,#6ee9ff33,transparent 70%); }
.card-kicker { display: block; color: #7f8aa0; font-size: 8px; letter-spacing: .18em; }
.feature-card h3 { margin: 8px 0; font-size: 28px; letter-spacing: -.055em; }
.feature-card p { color: #9aa4b5; font-size: 11px; line-height: 1.5; }
.feature-card input { width: 100%; height: 52px; margin: 8px 0 9px; padding: 0 15px; outline: none; border: 1px solid var(--line); border-radius: 16px; background: #070913; font-size: 11px; letter-spacing: .05em; }
.or-line { margin: 13px 0; color: #59647a; text-align: center; font-size: 8px; }
.or-line:before, .or-line:after { content: ""; display: inline-block; width: 32%; height: 1px; margin: 0 8px; background: #252c3c; vertical-align: middle; }
.progress { height: 7px; overflow: hidden; border-radius: 20px; background: #1e2431; }
.progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6feaff,#fff,#a65cff); box-shadow: 0 0 14px #6feaff; }
.member-list { display: grid; gap: 8px; margin: 13px 0; }
.member { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: #080a13; }
.member b { font-size: 11px; }
.member span { color: #7d879b; font-size: 9px; }

/* Garage */
.garage-main { position: relative; width: min(100%,var(--panel-max)); height: 100%; margin: 0 auto; padding: calc(88px + var(--safe-top) + var(--content-safe-top)) max(18px,var(--safe-right)) calc(14px + var(--safe-bottom)) max(18px,var(--safe-left)); display: grid; grid-template-rows: minmax(220px,1fr) auto auto auto auto auto; align-content: start; justify-items: center; gap: 9px; overflow: hidden; }
.garage-stage { position: relative; width: 100%; height: 100%; min-height: 220px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 28px; background: linear-gradient(180deg,rgba(14,18,31,.74),rgba(6,8,14,.46)); }
.garage-stage:before, .garage-stage:after { content: ""; position: absolute; bottom: 20%; border: 1px solid color-mix(in srgb,var(--rocket-accent) 23%,transparent); border-radius: 50%; transform: rotate(-10deg); }
.garage-stage:before { width: min(66vw,420px); height: min(17vw,96px); }
.garage-stage:after { width: min(54vw,340px); height: min(12vw,66px); bottom: 14%; }
.garage-aura { position: absolute; width: min(84vw,540px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--rocket-glow) 28%,transparent),transparent 66%); filter: blur(14px); animation: haloPulse 2.6s ease-in-out infinite; }
.garage-rocket { position: relative; z-index: 2; width: 100%; height: 100%; display: grid; place-items: center; }
.garage-rocket .rocket-visual { width: auto; height: min(100%,350px); max-width: min(56vw,205px); animation: rocketHover 2.5s ease-in-out infinite; }
.garage-feature-tag { z-index: 3; width: min(100%,430px); padding: 8px 12px; border: 1px solid color-mix(in srgb,var(--rocket-accent) 36%,rgba(255,255,255,.1)); border-radius: 15px; background: rgba(6,8,15,.8); color: #aab7c9; text-align: center; font-size: 8px; line-height: 1.3; letter-spacing: .05em; }
.garage-feature-tag b { display: block; margin-bottom: 3px; color: var(--rocket-accent); font-size: 10px; }
.rocket-meta { min-height: 100px; max-width: 560px; text-align: center; }
.rocket-meta .rarity { color: var(--rocket-accent); font-size: 8px; letter-spacing: .19em; }
.rocket-meta h3 { margin: 4px 0; font-size: clamp(26px,8vw,34px); letter-spacing: -.055em; }
.rocket-meta p { max-width: 430px; margin: 4px auto 0; color: #a0a8b8; font-size: 10px; line-height: 1.4; }
.feature-line { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 8px; color: #c9d5e7; font-size: 8px; }
.feature-line i { width: 6px; height: 6px; border-radius: 50%; background: var(--rocket-accent); box-shadow: 0 0 9px var(--rocket-glow); }
.rocket-dots { display: flex; gap: 8px; }
.rocket-dots i { width: 6px; height: 6px; border-radius: 50%; background: #363d4d; }
.rocket-dots i.active { background: var(--rocket-accent); box-shadow: 0 0 12px var(--rocket-glow); transform: scale(1.55); }
.garage-actions { width: 100%; max-width: 540px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.garage-actions.single { grid-template-columns: 1fr; justify-items: center; }
.garage-actions.single #buy-rocket-btn { width: min(100%,330px); }
.swipe-row { width: 100%; max-width: 540px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; color: #687389; text-align: center; font-size: 8px; letter-spacing: .15em; }
.swipe-row button { height: 42px; border-radius: 14px; border: 1px solid var(--line); background: #0c0e17; font-size: 24px; }

/* Rocket Path */
.challenge-content { max-width: 650px; }
.path-hero { min-height: 190px; display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 8px; margin-bottom: 10px; padding: 12px 16px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--rocket-accent) 24%,rgba(255,255,255,.08)); border-radius: 28px; background: radial-gradient(circle at 20% 45%,color-mix(in srgb,var(--rocket-glow) 20%,transparent),transparent 45%),linear-gradient(140deg,#11172a,#0a0913); }
.challenge-rocket-preview { height: 170px; display: grid; place-items: center; }
.challenge-rocket-visual { width: auto; height: 100%; max-width: 116px; animation: rocketHover 2.4s ease-in-out infinite; }
.path-hero h3 { margin: 5px 0 3px; font-size: clamp(27px,8vw,42px); letter-spacing: -.06em; }
.path-hero p { margin: 0 0 10px; color: #bdc9da; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.path-hero strong { display: inline-flex; min-height: 25px; align-items: center; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb,var(--rocket-accent) 14%,rgba(255,255,255,.04)); color: var(--rocket-accent); font-size: 8px; letter-spacing: .11em; }
.challenge-intro { margin-bottom: 12px; padding: 15px 17px; border: 1px solid rgba(111,232,255,.16); border-radius: 21px; background: linear-gradient(135deg,rgba(35,33,71,.72),rgba(8,11,23,.8)); }
.challenge-intro b { display: block; font-size: 14px; }
.challenge-intro span { display: block; margin-top: 5px; color: #98a5b9; font-size: 10px; line-height: 1.4; }
.mission { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.mission h4 { margin: 0 0 5px; font-size: 12px; }
.mission p { margin: 0; color: #7f8a9e; font-size: 9px; }
.mission strong { font-size: 10px; white-space: nowrap; }
.mission-bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 8px; background: #1c2230; }
.mission-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#62e9ff,#a664ff); }
.mission.done { border-color: rgba(103,255,167,.28); box-shadow: inset 0 0 30px rgba(75,255,150,.04); }
.mission.done strong { color: #68ffa6; }
.invite-pilots-btn { width: 100%; display: grid; align-content: center; padding: 8px 14px; }
.invite-pilots-btn b { font-size: 13px; }
.invite-pilots-btn span { margin-top: 3px; color: #374054; font-size: 9px; }

/* Leaderboard */
.leaderboard-podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 9px; align-items: end; margin: 4px 0 16px; }
.podium-card { position: relative; min-width: 0; min-height: 128px; padding: 16px 9px 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: linear-gradient(150deg,rgba(23,27,43,.94),rgba(7,8,14,.98)); text-align: center; }
.podium-card.first { min-height: 150px; border-color: rgba(255,216,82,.3); box-shadow: 0 0 36px rgba(255,199,72,.1); }
.podium-rank { position: absolute; top: 10px; left: 10px; min-width: 28px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.08); color: #9eabc1; font-size: 8px; }
.podium-card .medal { display: block; margin-top: 8px; font-size: 24px; }
.podium-card b { display: block; margin-top: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
.podium-card strong { display: block; margin-top: 4px; font-size: 13px; }
.podium-card small { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 6px; color: #8a96aa; font-size: 7px; }
.rank-live { height: 28px; display: flex; justify-content: center; align-items: center; gap: 7px; margin: 10px 3px; border: 1px solid rgba(255,255,255,.06); border-radius: 999px; background: rgba(255,255,255,.04); color: #7d899f; font-size: 8px; letter-spacing: .14em; }
.leaderboard-list { display: grid; gap: 8px; }
.rank-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; padding: 13px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: linear-gradient(145deg,#0b0e18,#07080e); }
.rank-row.me { border-color: rgba(102,232,255,.38); }
.rank-row .pos { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); font-size: 10px; }
.rank-copy b { font-size: 11px; }
.rank-copy small { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #6f7a8d; font-size: 8px; }
.rank-score { padding-left: 10px; font-size: 12px; }
.platform-logo { width: 14px; height: 14px; display: inline-grid; place-items: center; flex: 0 0 14px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 950; }
.platform-logo.telegram { background: #229ed9; }
.platform-logo.facebook { background: #1877f2; }
.platform-logo svg { width: 8px; height: 8px; fill: #fff; }

/* Result, unlock and sharing */
.modal-layer { position: absolute; z-index: 50; inset: 0; display: grid; place-items: center; padding: calc(14px + var(--safe-top)) max(14px,var(--safe-right)) calc(14px + var(--safe-bottom)) max(14px,var(--safe-left)); background: rgba(3,4,8,.8); backdrop-filter: blur(22px); touch-action: none; }
.result-card { position: relative; width: min(100%,500px); max-height: calc(var(--app-height) - 28px); padding: 17px; overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 34px; background: linear-gradient(180deg,rgba(18,24,43,.98),rgba(9,11,20,.99)); box-shadow: 0 35px 120px rgba(0,0,0,.76),0 0 60px rgba(91,213,255,.08); text-align: center; scrollbar-width: none; }
.result-card::-webkit-scrollbar { display: none; }
.result-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.result-kicker, .result-cycle { color: #9facc0; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.result-cycle b { color: #fff; }
.result-hero { position: relative; min-height: 155px; display: grid; place-items: center; margin-bottom: 7px; }
.result-hero-glow { position: absolute; inset: 8px 50px auto; height: 130px; background: radial-gradient(circle,color-mix(in srgb,var(--rocket-glow) 22%,transparent),transparent 68%); filter: blur(20px); }
.result-rocket-preview { position: relative; z-index: 2; width: 100%; height: 155px; display: grid; place-items: center; }
.result-rocket-visual { width: auto; height: 100%; max-width: 105px; }
.result-badge { position: absolute; z-index: 3; left: 50%; bottom: 0; min-height: 26px; padding: 0 13px; display: flex; align-items: center; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.07); color: #9ccdf1; font-size: 8px; font-weight: 900; letter-spacing: .16em; white-space: nowrap; }
.result-label { margin: 2px 0 0; color: #7f8a9d; font-size: 9px; letter-spacing: .16em; }
.result-card h2 { margin: 6px 0 4px; font-size: clamp(42px,12vw,64px); line-height: .95; letter-spacing: -.08em; }
.result-cause { max-width: 330px; margin: 0 auto 12px; color: #eef3ff; font-size: 12px; line-height: 1.35; }
.result-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 10px; }
.result-stats > div { padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.055); }
.result-stats span { display: block; margin-bottom: 5px; color: #7d899d; font-size: 8px; }
.result-stats b { font-size: 14px; }
.result-actions-primary { display: grid; gap: 9px; }
#revive-btn { min-height: 66px; display: grid; visibility: visible; opacity: 1; color: #fff; }
#revive-btn b, #revive-btn span { display: block; width: 100%; text-align: center; }
.result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 9px; }
.share-premium-btn { min-height: 62px; margin-top: 9px; background: linear-gradient(100deg,rgba(24,44,73,.97),rgba(47,22,65,.98) 52%,rgba(16,22,35,.98)); }
.unlock-card { position: relative; width: min(100%,500px); max-height: calc(var(--app-height) - 28px); padding: 24px 20px 20px; overflow: hidden auto; border: 1px solid color-mix(in srgb,var(--rocket-accent) 45%,rgba(255,255,255,.1)); border-radius: 36px; background: radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--rocket-glow) 25%,transparent),transparent 43%),linear-gradient(180deg,#14172a,#080a12); text-align: center; box-shadow: 0 35px 120px #000,0 0 80px color-mix(in srgb,var(--rocket-glow) 16%,transparent); }
.unlock-kicker { position: relative; z-index: 2; color: var(--rocket-accent); font-size: 10px; font-weight: 950; letter-spacing: .18em; }
.unlock-rays { position: absolute; left: 50%; top: 42%; width: 360px; height: 360px; transform: translate(-50%,-50%); background: repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rocket-accent) 12%,transparent) 0 6deg,transparent 6deg 18deg); border-radius: 50%; animation: unlockSpin 18s linear infinite; }
.unlock-rocket-preview { position: relative; z-index: 2; height: min(40vh,330px); display: grid; place-items: center; margin: 8px 0 -6px; }
.unlock-rocket-visual { width: auto; height: 100%; max-width: 190px; animation: unlockFloat 1.7s ease-in-out infinite; filter: drop-shadow(0 30px 55px var(--rocket-glow)); }
.unlock-card p { position: relative; z-index: 2; margin: 0; color: #a9b6ca; font-size: 9px; letter-spacing: .18em; }
.unlock-card h2 { position: relative; z-index: 2; margin: 5px 0 4px; font-size: clamp(42px,13vw,64px); letter-spacing: -.075em; }
.unlock-card > strong { position: relative; z-index: 2; display: block; color: var(--rocket-accent); font-size: 12px; letter-spacing: .1em; }
.unlock-actions { position: relative; z-index: 2; display: grid; gap: 9px; margin-top: 18px; }
.share-card-modal { width: min(94vw,450px); max-height: calc(var(--app-height) - 24px); padding: 2px; overflow: auto; text-align: center; scrollbar-width: none; }
.share-card-modal::-webkit-scrollbar { display: none; }
.share-sheet-head { padding: 4px 8px 12px; }
.share-sheet-head span { color: #90a0b8; font-size: 9px; letter-spacing: .18em; }
.share-sheet-head h3 { margin: 7px 0 6px; font-size: 26px; letter-spacing: -.06em; }
.share-sheet-head p { max-width: 320px; margin: 0 auto; color: #9aa7b7; font-size: 11px; line-height: 1.45; }
.share-card-frame { position: relative; }
.share-card-modal canvas { display: block; width: 100%; height: auto; max-height: 70svh; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: #05070d; box-shadow: 0 25px 100px #000; }
.share-live-pill { position: absolute; top: 16px; right: 16px; height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; background: rgba(5,7,13,.8); font-size: 10px; font-weight: 900; }
.share-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #ff4b73; box-shadow: 0 0 8px #ff4b73; animation: livePulse 1s infinite; }
.share-actions { display: grid; gap: 8px; margin-top: 12px; }
.toast { position: absolute; z-index: 90; left: 50%; bottom: calc(24px + var(--safe-bottom)); width: max-content; max-width: min(90vw,420px); min-height: 44px; display: grid; place-items: center; transform: translateX(-50%); padding: 11px 16px; border-radius: 15px; background: #f4f8ff; color: #070a10; box-shadow: 0 12px 45px #000; text-align: center; white-space: normal; font-size: 10px; font-weight: 900; line-height: 1.3; }

/* Deterministic layout modes */
html[data-viewport="compact"] .brand-lockup strong { font-size: 16px; }
html[data-viewport="compact"] .hero-copy h1 { font-size: 28px; }
html[data-viewport="compact"] .home-path-card > strong { max-width: 90px; }
html[data-viewport="compact"] .garage-actions { grid-template-columns: 1fr; }
html[data-viewport="compact"] .fuel-gauge { width: 108px; min-width: 108px; padding: 10px; }
html[data-viewport="compact"] .boost-btn { width: 92px; height: 92px; border-radius: 24px; }
html[data-viewport="compact"] .boost-btn span { margin-top: 16px; }

html[data-height="short"] .topbar { min-height: calc(54px + var(--safe-top) + var(--content-safe-top)); }
html[data-height="short"] .home-main { padding-top: calc(56px + var(--safe-top) + var(--content-safe-top)); grid-template-rows: auto auto minmax(74px,1fr) auto auto auto auto auto; gap: 5px; }
html[data-height="short"] .viral-strip { height: 21px; }
html[data-height="short"] .eyebrow { min-height: 18px; font-size: 6px; }
html[data-height="short"] .hero-copy h1 { margin-top: 4px; font-size: 24px; }
html[data-height="short"] .home-rocket .rocket-visual { height: min(100%,160px); max-width: 98px; }
html[data-height="short"] .floating-coin { display: none; }
html[data-height="short"] .best-readout, html[data-height="short"] .rocket-readout { padding: 7px 9px; }
html[data-height="short"] .home-path-card { min-height: 38px; padding-block: 5px; }
html[data-height="short"] .launch-btn, html[data-height="short"] #prelaunch-ad-btn { min-height: 41px; }
html[data-height="short"] .home-nav button { min-height: 38px; padding-block: 6px; }
html[data-height="short"] .nav-glyph { display: none; }
html[data-height="short"] .garage-main { padding-top: calc(76px + var(--safe-top) + var(--content-safe-top)); grid-template-rows: minmax(138px,1fr) auto auto auto auto auto; gap: 6px; }
html[data-height="short"] .garage-stage { min-height: 138px; }
html[data-height="short"] .garage-feature-tag { padding: 5px 9px; font-size: 7px; }
html[data-height="short"] .garage-feature-tag b { display: inline; margin-right: 6px; font-size: 8px; }
html[data-height="short"] .rocket-meta { min-height: 74px; }
html[data-height="short"] .result-card { padding: 13px; }
html[data-height="short"] .result-hero { min-height: 120px; }
html[data-height="short"] .result-rocket-preview { height: 120px; }
html[data-height="short"] .result-card h2 { font-size: 44px; }
html[data-height="short"] .unlock-rocket-preview { height: 220px; }

@media (min-width: 700px) {
  .home-main { padding-left: 6vw; padding-right: 6vw; }
  .home-rocket .rocket-visual { height: min(100%,330px); max-width: 190px; }
  .panel-content { width: min(780px,100%); }
  .garage-main { max-width: 860px; }
  .garage-rocket .rocket-visual { height: min(100%,420px); max-width: 240px; }
  .result-card { padding: 24px; }
}

@media (orientation: landscape) and (min-width: 560px) {
  .home-main { padding-top: calc(68px + var(--safe-top) + var(--content-safe-top)); grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(70px,1fr) auto auto auto; column-gap: 20px; }
  .viral-strip { grid-column: 1; grid-row: 1; align-self: start; }
  .hero-copy { grid-column: 1; grid-row: 2; }
  .home-path-card { grid-column: 1; grid-row: 3; align-self: end; }
  .launch-btn { grid-column: 1; grid-row: 4; }
  #prelaunch-ad-btn { grid-column: 1; grid-row: 5; }
  .home-rocket { grid-column: 2; grid-row: 1 / 4; min-height: 150px; }
  .home-statline { grid-column: 2; grid-row: 4; }
  .home-nav { position: static; grid-column: 2; grid-row: 5 / 7; width: 100%; align-self: end; }
  .hero-copy h1 { font-size: 38px; }
  .garage-main { grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr auto auto auto auto; column-gap: 22px; }
  .garage-stage { grid-row: 1 / 6; }
  .garage-feature-tag, .rocket-meta, .rocket-dots, .garage-actions, .swipe-row { grid-column: 2; }
  .modal-layer { padding-left: max(18px,var(--safe-left)); padding-right: max(18px,var(--safe-right)); }
}

@keyframes ringSpin { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes rocketHover { 50% { transform: translateY(-9px) rotate(.7deg); } }
@keyframes orbDrift { 50% { transform: translate(35px,-25px) scale(1.12); } }
@keyframes homeComet { 0%,72% { transform: translate(-10vw,0) rotate(-20deg); opacity: 0; } 76% { opacity: 1; } 100% { transform: translate(150vw,38vh) rotate(-20deg); opacity: 0; } }
@keyframes livePulse { 50% { opacity: .42; transform: scale(.74); } }
@keyframes haloPulse { 50% { transform: scale(1.09); opacity: .72; } }
@keyframes ringFloat { 50% { transform: rotate(-4deg) scale(1.05); } }
@keyframes coinFloat { 50% { transform: translateY(-13px) rotateY(180deg); } }
@keyframes fuelCritical { 50% { box-shadow: 0 0 48px rgba(255,42,83,.42); } }
@keyframes unlockSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes unlockFloat { 50% { transform: translateY(-13px) scale(1.035); } }