:root {
  --bg: #8fe6ff;
  --panel: #081720;
  --panel-2: #102635;
  --text: #f5fbfc;
  --muted: #8fa8b0;
  --accent: #00ced1;
  --accent-2: #4ce7cf;
  --danger: #ff5f68;
  --warning: #ffd86b;
  --success: #75ef9a;
  --line: rgba(255,255,255,.09);
  --shadow: 0 24px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,238,157,.34), transparent 18rem),
    radial-gradient(circle at 84% 6%, rgba(255,167,118,.22), transparent 19rem),
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.58), transparent 20rem),
    linear-gradient(180deg, #79ddff 0%, #98ebff 32%, #bff5ff 62%, #dbfbff 100%);
}
button, select, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(100%, 980px);
  height: 100svh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:44px;
  gap: 8px;
  flex: 0 0 auto;
}
.brand {
  color:#12435d;
  text-decoration:none;
  font-weight:800;
  letter-spacing:-.02em;
  display:flex;
  gap:10px;
  align-items:center;
}
.brand-dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ffb347;
  box-shadow:0 0 18px rgba(255,179,71,.75);
}
.top-actions { display:flex; gap:8px; }
.icon-btn {
  width:40px;
  height:40px;
  border:1px solid rgba(28,117,155,.18);
  color:#12435d;
  background:rgba(255,255,255,.42);
  border-radius:14px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight: 800;
}
.icon-btn:active { transform:scale(.96); }

.game-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border:1px solid rgba(255,255,255,.36);
  background:linear-gradient(180deg, rgba(126,224,255,.60), rgba(112,211,244,.54) 45%, rgba(82,186,227,.46) 100%);
  border-radius:26px;
  box-shadow:0 24px 70px rgba(40,97,133,.18);
  overflow:hidden;
  padding: 12px;
  backdrop-filter: blur(10px);
}
.hero-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 10px;
}
.hero-copy { min-width:0; }
.hero-kicker {
  font-size:10px;
  letter-spacing:.18em;
  font-weight:900;
  color:#ff9f47;
}
.hero-title {
  margin:3px 0 2px;
  font-size:clamp(24px, 5vw, 34px);
  line-height:.95;
  letter-spacing:-.06em;
  font-weight:900;
  background:linear-gradient(180deg, #ffffff 0%, #ffe67e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub {
  margin:0;
  font-size:12px;
  color:#2e6780;
  font-weight:700;
}
.hero-badge {
  flex:0 0 auto;
  align-self:flex-start;
  border-radius:999px;
  padding:9px 12px;
  font-size:11px;
  font-weight:900;
  color:#fff4c5;
  border:1px solid rgba(255,216,107,.22);
  background:linear-gradient(135deg, rgba(255,201,76,.16), rgba(255,95,104,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.history-wrap { display:flex; align-items:center; gap:12px; min-height:34px; flex:0 0 auto; margin-bottom:2px; }
.eyebrow, .status-kicker, .settings-kicker, .result-eyebrow {
  font-size:11px;
  letter-spacing:.14em;
  color:var(--muted);
  font-weight:800;
}
.eyebrow { flex:0 0 auto; }
.history {
  display:flex;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:2px 0;
}
.history::-webkit-scrollbar { display:none; }
.history-pill {
  min-width:40px;
  height:28px;
  padding:0 10px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.28);
  font-size:12px;
  font-weight:800;
  color:#2a6077;
}
.history-pill.hot { color:var(--accent-2); border-color:rgba(76,231,207,.24); background:rgba(76,231,207,.08); }
.history-empty { color:#6f8790; font-size:12px; }

.flight-stage {
  position:relative;
  flex: 1 1 auto;
  min-height: 0;
  margin:8px 0 10px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.40);
  isolation:isolate;
  background: linear-gradient(180deg, #75e0ff 0%, #98ebff 33%, #c9f7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -56px 96px rgba(255,181,98,.16);
}
.sky-base {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.42), transparent 12%),
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.22), transparent 18%),
    linear-gradient(180deg, #68d6ff 0%, #8ce6ff 42%, #cbf7ff 100%);
}
.sun-glow {
  position:absolute;
  width: 190px;
  height: 190px;
  right: -40px;
  top: -36px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,237,151,.95) 0%, rgba(255,203,93,.9) 32%, rgba(255,198,110,.2) 62%, transparent 76%);
  filter: blur(2px);
  z-index:0;
}
.sky-track {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
}
.cloud, .flyby {
  position:absolute;
  left:110%;
  top:var(--top, 25%);
  animation-name: flyby;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.sky-track.moving .cloud,
.sky-track.moving .flyby { animation-play-state: running; }
.cloud {
  width: var(--size, 120px);
  height: calc(var(--size, 120px) * 0.42);
  border-radius:999px;
  background: #fff7ff;
  box-shadow: inset 0 -10px 0 rgba(168,219,255,.38), 0 8px 14px rgba(34,95,133,.12);
  opacity: .92;
}
.cloud::before,
.cloud::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}
.cloud::before {
  width: 42%;
  aspect-ratio:1;
  left: 13%;
  bottom: 38%;
}
.cloud::after {
  width: 32%;
  aspect-ratio:1;
  right: 16%;
  bottom: 44%;
}
.cloud.back {
  opacity:.75;
  filter: saturate(.92);
}
.cloud.front {
  opacity:.96;
}

.cloud.tint-peach { background: #fff2ea; }
.cloud.tint-blue { background: #eef9ff; }
.cloud.long { height: calc(var(--size, 120px) * 0.34); }
.cloud.puff { height: calc(var(--size, 120px) * 0.48); }
.flyby {
  width: var(--size, 18px);
  height: var(--size, 18px);
  opacity:.86;
}
.flyby::before,
.flyby::after {
  content:"";
  position:absolute;
}
.flyby.star::before {
  inset:0;
  background:#fff9d5;
  clip-path: polygon(50% 0%, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0% 50%, 36% 36%);
  box-shadow: 0 0 12px rgba(255,255,255,.8);
}
.flyby.star::after {
  width: 40px;
  height: 3px;
  top: 50%;
  right: 70%;
  transform: translateY(-50%);
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8));
}
.flyby.balloon::before {
  inset: 0;
  border-radius: 50% 50% 48% 48%;
  background: #ff8a80;
  box-shadow: inset -5px -8px 0 rgba(182,53,44,.18);
}
.flyby.balloon::after {
  width:2px;
  height: 18px;
  left: 50%;
  top: 90%;
  transform: translateX(-50%);
  background: rgba(107,85,40,.55);
}
.cloud.long { height: calc(var(--size, 120px) * 0.34); }
.cloud.long::before { width: 34%; left: 9%; bottom: 34%; }
.cloud.long::after { width: 28%; right: 10%; bottom: 37%; }
.cloud.puffy::before { width: 48%; left: 10%; bottom: 42%; }
.cloud.puffy::after { width: 38%; right: 10%; bottom: 47%; }
.cloud.tiny { opacity: .8; filter: saturate(.95); }

.flyby.bird {
  width: var(--size, 24px);
  height: calc(var(--size, 24px) * .5);
}
.flyby.bird::before,
.flyby.bird::after {
  content:"";
  position:absolute;
  top: 30%;
  width: 52%;
  height: 52%;
  border: 3px solid #2d6787;
  border-bottom: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 999px 999px 0 0;
}
.flyby.bird::before {
  left: -2%;
  transform: rotate(-12deg);
}
.flyby.bird::after {
  right: -2%;
  transform: rotate(12deg);
}
@keyframes flyby {
  from { transform: translateX(0); }
  to   { transform: translateX(-175vw); }
}
.speed-lines {
  position:absolute;
  inset:0;
  opacity:0;
  z-index:2;
  pointer-events:none;
  transition:opacity .25s ease;
  animation-play-state: paused;
}
.speed-lines.slow {
  background-image: repeating-linear-gradient(-14deg, rgba(255,255,255,.0) 0 20px, rgba(255,255,255,.18) 20px 22px, rgba(255,255,255,0) 22px 70px);
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  animation: streakDrift 2.6s linear infinite;
}
.speed-lines.fast {
  background-image: repeating-linear-gradient(-14deg, rgba(255,255,255,0) 0 26px, rgba(255,255,255,.22) 26px 28px, rgba(255,255,255,0) 28px 88px);
  background-size: 320px 320px;
  animation: streakDrift 1.5s linear infinite;
}
.flight-stage.active .speed-lines {
  opacity: 1;
  animation-play-state: running;
}

.flight-stage.launching .sun-glow {
  transform: scale(1.1);
  filter: blur(1px) saturate(1.08);
}
.flight-stage.launching .speed-lines,
.flight-stage.in-flight .speed-lines { opacity: 1; animation-play-state: running; }
.flight-stage.launching { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -50px 100px rgba(255,120,74,.12), 0 10px 30px rgba(0,0,0,.14); }
@keyframes streakDrift {
  from { background-position: 0 0; }
  to { background-position: -260px 0; }
}
.sky-fade {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 18%, rgba(10,90,134,.06) 48%, rgba(5,41,61,.18) 100%),
    linear-gradient(180deg, rgba(4,10,20,.05), rgba(4,10,20,.05) 26%, rgba(4,10,20,.12) 76%, rgba(4,10,20,.24));
  z-index:2;
}
.counter-block {
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-width:min(72vw, 260px);
  padding:10px 16px 12px;
  border-radius:20px;
  background:rgba(255,255,255,.30);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(10px);
  box-shadow:0 10px 28px rgba(52,119,151,.10);
  z-index:8;
  pointer-events:none;
}
.counter-label {
  font-size:12px;
  font-weight:900;
  color:#2a637b;
  letter-spacing:.24em;
  margin-bottom:8px;
  text-shadow: 0 4px 18px rgba(0,0,0,.24);
}
.counter {
  font-size:clamp(54px, 12vw, 88px);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.08em;
  text-shadow:0 8px 20px rgba(0,0,0,.12);
}
.counter-sub {
  margin-top:4px;
  font-size:11px;
  color:#275e76;
  text-shadow:none;
  font-weight:800;
}
.plane {
  position:absolute;
  left:50%;
  bottom:-24%;
  width:clamp(160px, 34vw, 270px);
  z-index:5;
  transform: translate(-50%,0) rotate(-1deg) scale(.95);
  transform-origin:center;
  will-change:transform, opacity, left, bottom;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.18));
  transition:
    left 3.35s cubic-bezier(.12,.96,.18,1),
    bottom 3.35s cubic-bezier(.12,.96,.18,1),
    transform 3.35s cubic-bezier(.12,.96,.18,1),
    opacity .45s ease;
}
.plane img {
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;
}
.propeller {
  display:none !important; display:none !important; }
.air-trail {
  position:absolute;
  left: -24%;
  top: 43%;
  width: 42%;
  height: 26%;
  pointer-events:none;
  z-index: -1;
  opacity: 0;
}
.trail, .puff {
  position:absolute;
  display:block;
}
.trail {
  left: 0;
  height: 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.68), rgba(255,228,170,.1));
  filter: blur(3px);
  transform-origin:right center;
}
.trail-1 { top: 16%; width: 82%; }
.trail-2 { top: 43%; width: 100%; height: 12px; }
.trail-3 { top: 70%; width: 72%; }
.puff {
  width: 20px;
  height: 20px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,.34) 45%, rgba(255,255,255,0) 72%);
  filter: blur(2.5px);
}
.puff-1 { left: 12%; top: 2%; }
.puff-2 { left: 24%; bottom: -6%; }
.plane.takeoff .air-trail,
.plane.airborne .air-trail,
.plane.cruising .air-trail {
  opacity: .9;
}
.plane.takeoff .trail,
.plane.airborne .trail,
.plane.cruising .trail { animation: trailWave 1.1s ease-in-out infinite; }
.plane.takeoff .trail-2,
.plane.airborne .trail-2,
.plane.cruising .trail-2 { animation-delay: -.15s; }
.plane.takeoff .trail-3,
.plane.airborne .trail-3,
.plane.cruising .trail-3 { animation-delay: -.3s; }
.plane.takeoff .puff,
.plane.airborne .puff,
.plane.cruising .puff { animation: puffDrift 1.6s ease-out infinite; }
.plane.takeoff .puff-2,
.plane.airborne .puff-2,
.plane.cruising .puff-2 { animation-delay: -.8s; }
@keyframes trailWave {
  0% { transform: scaleX(.82) translateX(2px); opacity:.25; }
  50% { transform: scaleX(1) translateX(-2px); opacity:.74; }
  100% { transform: scaleX(.86) translateX(3px); opacity:.28; }
}
@keyframes puffDrift {
  0% { transform: translate(0,0) scale(.55); opacity:0; }
  20% { opacity:.55; }
  100% { transform: translate(-26px,-5px) scale(1.1); opacity:0; }
}
.plane-glow {
  position:absolute;
  inset:auto auto 12% 16%;
  width: 58%;
  height: 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,225,72,.22), rgba(255,117,77,.24), rgba(255,255,255,0));
  filter: blur(15px);
  transform: rotate(4deg);
  z-index: -1;
  opacity: .8;
}
.plane.takeoff,
.plane.airborne {
  left: 50%;
  bottom: 31%;
  transform: translate(-50%, 0) rotate(-2deg) scale(1.04);
}
.plane.cruising { animation: planeHover 2.5s ease-in-out infinite; }
.plane.cruising img { animation: planeBodyFloat 2.5s ease-in-out infinite; }
.plane.cruising .plane-glow { animation: planeGlowFloat 2.5s ease-in-out infinite; }
@keyframes planeHover {
  0%   { margin-top: 0; margin-left: 0; }
  20%  { margin-top: -3px; margin-left: 2px; }
  50%  { margin-top: -10px; margin-left: -2px; }
  75%  { margin-top: -5px; margin-left: 3px; }
  100% { margin-top: -1px; margin-left: 0; }
}
@keyframes planeBodyFloat {
  0%   { transform: translateY(0) rotate(.4deg) scale(1); }
  20%  { transform: translateY(-2px) rotate(-1deg) scale(1.006); }
  50%  { transform: translateY(-5px) rotate(-1.8deg) scale(1.012); }
  75%  { transform: translateY(-2px) rotate(-.6deg) scale(1.005); }
  100% { transform: translateY(0) rotate(.55deg) scale(1); }
}
@keyframes planeGlowFloat {
  0%,100% { opacity: .78; transform: rotate(4deg) scale(1); }
  50% { opacity: .98; transform: rotate(6deg) scale(1.06); }
}
.countdown {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:8;
  background:rgba(17,105,155,.18);
  backdrop-filter:blur(4px);
  font-size:118px;
  font-weight:900;
  letter-spacing:-.08em;
}
.countdown.pop { animation:pop .42s ease; }
@keyframes pop { 0%{ transform:scale(.7); opacity:.2;} 60%{ transform:scale(1.08);opacity:1;} 100%{transform:scale(1);opacity:1;} }

.status-panel {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 4px 10px;
  gap: 12px;
  flex:0 0 auto;
}
.status-text { font-size:15px; font-weight:750; margin-top:4px; }
.risk-badge {
  border:1px solid rgba(255,216,107,.22);
  background:rgba(255,216,107,.07);
  color:var(--warning);
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  white-space: nowrap;
}
.action-btn {
  width:100%;
  min-height:68px;
  border:0;
  border-radius:20px;
  cursor:pointer;
  color:#1d1100;
  background:linear-gradient(135deg, #ffe67e, #ffb84d 54%, #ff8b63 100%);
  box-shadow:0 14px 32px rgba(255,166,77,.26);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:transform .12s ease, filter .15s ease, background .2s ease;
  flex: 0 0 auto;
}
.action-btn:hover { filter:brightness(1.04); }
.action-btn:active { transform:scale(.985); }
.action-btn #actionMain { font-weight:900; font-size:21px; letter-spacing:-.025em; }
.action-btn #actionSub { font-weight:700; font-size:11px; margin-top:3px; opacity:.66; }
.action-btn.cashout { background:linear-gradient(135deg, #82ffd0, #54e4b7); color:#063124; box-shadow:0 14px 32px rgba(84,228,183,.22); }
.action-btn.locked { background:#19313a; color:#81a2ac; box-shadow:none; cursor:default; }
.action-btn.next { background:linear-gradient(135deg, #77f0a0, #48d889); color:#03170b; }
.bottom-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#6f8992;
  font-size:10px;
  font-weight:600;
  padding:10px 2px 1px;
  flex:0 0 auto;
}
.bottom-row strong { color:#a6bdc6; }
.mini-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overlay {
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(1,8,11,.74);
  backdrop-filter:blur(14px);
}
.hidden { display:none !important; }
.sheet-card {
  width:min(100%, 480px);
  border-radius:28px;
  background:linear-gradient(180deg, #102a33, #071a21);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 90px rgba(0,0,0,.55);
}
.result-card {
  position:relative;
  padding:18px 22px 22px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,234,141,.18), transparent 34%),
    linear-gradient(180deg, #2c2746 0%, #121d2a 40%, #08151d 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.result-card.success {
  background:
    radial-gradient(circle at 50% -8%, rgba(130,255,208,.18), transparent 34%),
    linear-gradient(180deg, #1c3841 0%, #10262f 44%, #08151d 100%);
}
.result-card.fail {
  background:
    radial-gradient(circle at 50% -8%, rgba(255,110,107,.18), transparent 34%),
    linear-gradient(180deg, #452738 0%, #271723 44%, #10131b 100%);
}
.result-topshine {
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:84px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  pointer-events:none;
}
.result-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.result-banner-tag,
.result-banner-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  border-radius:999px;
  padding:0 12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.result-banner-tag {
  color:#fff5c8;
  background:linear-gradient(135deg, rgba(255,210,98,.18), rgba(255,152,84,.14));
  border:1px solid rgba(255,214,121,.16);
}
.result-banner-chip {
  color:#b9e9f0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.result-icon {
  margin:2px auto 10px;
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.16);
  font-size:34px;
}
.result-card.success .result-icon {
  background:linear-gradient(180deg, rgba(130,255,208,.18), rgba(130,255,208,.08));
}
.result-card.fail .result-icon {
  background:linear-gradient(180deg, rgba(255,110,107,.18), rgba(255,110,107,.08));
}
.result-card h2 { font-size:29px; margin:6px 0 10px; letter-spacing:-.05em; }
.result-score-wrap {
  margin: 0 auto;
  width:min(100%, 290px);
  border-radius:24px;
  padding:16px 12px 14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.result-value { font-size:100px; line-height:.88; font-weight:900; letter-spacing:-.08em; color:var(--accent-2); }
.result-unit { margin-top:8px; font-size:12px; letter-spacing:.15em; font-weight:900; color:#bed1d5; }
.result-detail { color:#b6c8cf; font-size:13px; line-height:1.6; margin:18px auto 22px; max-width:340px; }
.primary-btn {
  width:100%;
  min-height:58px;
  border:0;
  border-radius:17px;
  background:linear-gradient(135deg, #ffe67e, #ffb84d 54%, #ff8b63 100%);
  color:#1d1100;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(255,166,77,.18);
}
.settings-card, .info-card {
  padding:14px 20px 20px;
  max-height:min(720px, 92svh);
  overflow:auto;
}
.sheet-handle { width:44px; height:5px; border-radius:999px; background:rgba(255,255,255,.12); margin:0 auto 13px; }
.settings-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:15px; border-bottom:1px solid var(--line); }
.settings-head h2 { margin:4px 0 0; font-size:23px; letter-spacing:-.04em; }
.setting-row, .toggle-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 1px; border-bottom:1px solid var(--line); }
.setting-row strong, .toggle-row strong { display:block; font-size:14px; }
.setting-row small, .toggle-row small { display:block; color:#78929a; font-size:11px; line-height:1.5; margin-top:4px; max-width:290px; }
.setting-row select { background:#102d36; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:10px 30px 10px 12px; }
.setting-column { display:block; }
.setting-column input[type="range"] { width:100%; margin:18px 0 4px; accent-color:var(--accent); }
.range-labels { display:flex; justify-content:space-between; color:#68838c; font-size:10px; padding:0 3px; }
.toggle-row input { width:20px; height:20px; accent-color:var(--accent); }
.ghost-btn {
  width:100%;
  min-height:48px;
  margin:18px 0 10px;
  border-radius:14px;
  border:1px solid rgba(255,95,104,.18);
  color:#ff858c;
  background:rgba(255,95,104,.055);
  font-weight:800;
  cursor:pointer;
}
.info-list { display:grid; gap:12px; padding-top:16px; }
.rule {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);
}
.rule > span {
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(0,206,209,.12);
  color:var(--accent-2);
  font-size:12px;
  font-weight:900;
}
.rule p { margin:2px 0 0; color:#b4c6cb; font-size:12px; line-height:1.5; }



@media (max-width: 700px) {
  html, body {
    background: linear-gradient(180deg, #68d6ff 0%, #91e8ff 38%, #c9f7ff 100%);
  }

  .app-shell {
    width:100%;
    height:100svh;
    padding:0;
    gap:0;
  }

  .topbar {
    position:absolute;
    top:calc(env(safe-area-inset-top) + 8px);
    right:10px;
    z-index:30;
    min-height:0;
    margin:0;
  }

  .game-card {
    width:100%;
    height:100svh;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
    background:transparent;
    backdrop-filter:none;
  }

  .flight-stage {
    position:absolute;
    inset:0;
    width:100vw;
    height:100svh;
    margin:0;
    border:0;
    border-radius:0;
    z-index:0;
  }

  .hero-bar {
    position:absolute;
    top:calc(env(safe-area-inset-top) + 58px);
    left:14px;
    right:14px;
    z-index:12;
    padding:0;
  }

  .hero-badge { display:none; }
  .hero-title { font-size:26px; }
  .hero-sub { color:#245f78; }

  .history-wrap {
    position:absolute;
    top:calc(env(safe-area-inset-top) + 122px);
    left:14px;
    right:14px;
    z-index:12;
    margin:0;
  }

  .history-pill {
    background:rgba(255,255,255,.55);
    border-color:rgba(255,255,255,.5);
  }

  .counter-block {
    top:calc(env(safe-area-inset-top) + 166px);
    z-index:15;
  }

  .status-panel {
    position:absolute;
    left:12px;
    right:12px;
    bottom:calc(env(safe-area-inset-bottom) + 86px);
    z-index:14;
    padding:0 2px;
  }

  .action-btn {
    position:absolute;
    left:10px;
    right:10px;
    bottom:calc(env(safe-area-inset-bottom) + 10px);
    width:auto;
    z-index:15;
  }

  .bottom-row { display:none; }

  .plane {
    width:clamp(150px, 43vw, 235px);
  }

  .plane.takeoff,
  .plane.airborne {
    bottom:31%;
  }
}

@media (max-height: 760px) {
  .counter { font-size:72px; }
  .counter-sub { font-size:12px; }
  .action-btn { min-height:62px; }
  .bottom-row { display:none; }
  .plane.takeoff,
  .plane.airborne { bottom: 28%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

.topbar { text-shadow: 0 2px 8px rgba(0,0,0,.08); }
.brand { color:#10314a; }
.icon-btn { background:rgba(255,255,255,.32); border:1px solid rgba(255,255,255,.42); color:#15415a; backdrop-filter: blur(8px); }

.brand { display:none; }


/* === V16 PREFLIGHT / FLIGHT POLISH === */
.flight-stage {
  --flight-x: 0px;
  --flight-y: 0px;
  --flight-rot: -2deg;
  --flight-scale: 1.04;
}

.preflight-panel {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(26px, 7vh, 56px) 18px 120px;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .65s ease, transform .8s cubic-bezier(.18,.85,.2,1), filter .65s ease;
}
.preflight-panel::before {
  content: "";
  position: absolute;
  inset: 7% 10% auto;
  height: 58%;
  border-radius: 36px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.48), rgba(255,255,255,.16) 42%, rgba(255,255,255,.03) 70%, transparent 75%);
  filter: blur(8px);
  z-index: -1;
}
.preflight-logo-shell {
  width: clamp(72px, 15vw, 112px);
  aspect-ratio: 1;
  padding: 5px;
  border-radius: 28%;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 16px 34px rgba(37,118,151,.16), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  animation: preflightLogoFloat 3.2s ease-in-out infinite;
}
.preflight-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24%;
}
.preflight-kicker {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 900;
  color: #24718f;
}
.preflight-title {
  margin-top: 4px;
  font-size: clamp(27px, 6vw, 48px);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 20px rgba(31,113,150,.20);
}
.preflight-sub {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 750;
  color: #2d718d;
}
.preflight-chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.preflight-chips span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.50);
  background: rgba(255,255,255,.30);
  color: #215f79;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
}
.preflight-hint {
  margin-top: 15px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(35,96,120,.82);
}
.preflight-hint strong { color: #15536d; }
@keyframes preflightLogoFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}
.flight-stage.launching .preflight-panel,
.flight-stage.in-flight .preflight-panel {
  opacity: 0;
  transform: translateY(-34px) scale(.94);
  filter: blur(5px);
}

/* Hide the gameplay counter before takeoff, then park it safely at the top. */
.flight-stage:not(.launching):not(.in-flight) .counter-block { opacity: 0; transform: translateX(-50%) translateY(-12px); }
.counter-block {
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1), background .35s ease;
}
.flight-stage.launching .counter-block,
.flight-stage.in-flight .counter-block {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Cinematic transition from pre-flight to air. */
.launch-wipe {
  position: absolute;
  inset: -20%;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transform: translateY(65%) rotate(-7deg);
  background: linear-gradient(180deg, transparent 25%, rgba(255,255,255,.34) 47%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.18) 56%, transparent 72%);
}
.flight-stage.launching .launch-wipe { animation: launchWipe 1.25s ease-out .25s both; }
@keyframes launchWipe {
  0% { opacity: 0; transform: translateY(65%) rotate(-7deg); }
  30% { opacity: .7; }
  100% { opacity: 0; transform: translateY(-75%) rotate(-7deg); }
}
.flight-stage.launching .sky-base { animation: launchSky 3.2s ease-out both; }
@keyframes launchSky {
  0% { filter: saturate(.82) brightness(.93); transform: scale(1.06); }
  45% { filter: saturate(1.18) brightness(1.08); }
  100% { filter: saturate(1) brightness(1); transform: scale(1); }
}

/* Dynamic movement is driven by JS variables; keep the plane away from the top counter. */
.plane.airborne,
.plane.cruising {
  left: 50%;
  bottom: 28%;
  transform: translate(calc(-50% + var(--flight-x)), var(--flight-y)) rotate(var(--flight-rot)) scale(var(--flight-scale));
  transition: opacity .45s ease;
  animation: none !important;
}
.plane.cruising img {
  animation: planeMicroFloat 1.9s ease-in-out infinite !important;
}
@keyframes planeMicroFloat {
  0%,100% { transform: translateY(0) rotate(.4deg) scale(1); }
  25% { transform: translateY(-3px) rotate(-1.2deg) scale(1.007); }
  50% { transform: translateY(-7px) rotate(-2deg) scale(1.014); }
  75% { transform: translateY(-2px) rotate(-.5deg) scale(1.005); }
}

/* Engine-running visual vibration without adding a separate propeller overlay. */
.plane.engine-on img { filter: saturate(1.04) drop-shadow(0 0 1px rgba(255,255,255,.3)); }

/* Preflight button gets a more obvious start-state. */
.flight-stage:not(.launching):not(.in-flight) ~ .status-panel + .action-btn {
  background: linear-gradient(135deg, #fff07a, #ffb34d 52%, #ff835f);
  color: #321600;
  box-shadow: 0 16px 36px rgba(255,153,71,.28), inset 0 1px 0 rgba(255,255,255,.5);
}

@media (max-width: 700px) {
  .preflight-panel { padding-top: max(70px, 11vh); padding-bottom: 110px; }
  .preflight-title { font-size: clamp(29px, 9vw, 42px); }
  .preflight-sub { max-width: 280px; }
  .counter-block { top: max(82px, calc(env(safe-area-inset-top) + 72px)); }
  .plane.airborne,
  .plane.cruising { bottom: 25%; }
}

@media (max-height: 720px) {
  .preflight-panel { padding-top: 35px; }
  .preflight-logo-shell { width: 66px; }
  .preflight-title { font-size: 28px; }
  .preflight-hint { display: none; }
}
/* === END V16 === */


/* === V18 MOBILE CLEANUP === */
@media (max-width: 700px) {
  /* On phones, start immediately with the sky/game instead of duplicate headings. */
  .hero-bar,
  .history-wrap {
    display: none !important;
  }

  .game-card {
    padding-top: 8px;
  }

  .flight-stage {
    margin-top: 0;
  }
}
/* === END V17 === */