:root {
  --u: 4px;            /* 1% of the game width, set from JS */
  --gw: 100vw;         /* game width, set from JS */
  --ink: #1b2b45;
  --font: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #2c3d5c, #121a29 70%);
  font-family: var(--font);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
#game {
  position: fixed; inset: 0; overflow: hidden;
  background: #9fd6f2;
}
#gl, #streaks { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#streaks { pointer-events: none; }
#ui { position: absolute; pointer-events: none; color: #fff;
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); }
.layer { position: absolute; inset: 0; display: none; }
.layer.on { display: block; }
button { font-family: var(--font); border: 0; cursor: pointer; pointer-events: auto; color: #fff; padding: 0; background: none; }

.stroke { -webkit-text-stroke: calc(var(--u) * .45) var(--ink); paint-order: stroke fill; }

/* ------------------------------------------------------------- icons */
.coin-ico {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3a8 0 12%, #ffd23d 30%, #f0a417 72%, #c47a0c 100%);
  box-shadow: inset 0 0 0 .08em #d18910, 0 .05em 0 rgba(0,0,0,.25);
  vertical-align: -0.12em;
}
.coin-ico::after {
  content: '$'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .62em; color: #f3a51a; text-shadow: 0 .04em 0 #9b5c06; -webkit-text-stroke: 0;
}
.gem-ico {
  display: inline-block; width: 1em; height: 1.08em; flex: none; vertical-align: -0.15em;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: linear-gradient(160deg, #d6f3ff 0 25%, #49b6ff 45%, #1f6fe0 100%);
}
.coin-ico.small, .gem-ico.small { width: .9em; height: .9em; }

/* ------------------------------------------------------------- top bar */
#topbar .pill {
  position: absolute; top: calc(var(--u) * 17); height: calc(var(--u) * 6.4);
  display: flex; align-items: center; border-radius: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 7.6);
  -webkit-text-stroke: calc(var(--u) * .35) #6a3d05; paint-order: stroke fill;
}
.coin-pill { left: calc(var(--u) * 4); min-width: calc(var(--u) * 19);
  background: linear-gradient(#ffcc4d, #f29a1c); box-shadow: inset 0 -.25em 0 rgba(0,0,0,.12), 0 calc(var(--u)*.6) 0 #a65f0b; }
.coin-pill .coin-ico { position: absolute; left: calc(var(--u) * -1.5); font-size: calc(var(--u) * 8.4); }
.gem-pill { left: calc(var(--u) * 28); min-width: calc(var(--u) * 19); -webkit-text-stroke-color: #0d3a80 !important;
  background: linear-gradient(#57a8ff, #2565e0); box-shadow: inset 0 -.25em 0 rgba(0,0,0,.12), 0 calc(var(--u)*.6) 0 #123e8f; }
.gem-pill .gem-ico { position: absolute; left: calc(var(--u) * -1.2); font-size: calc(var(--u) * 7.4); filter: drop-shadow(0 .05em 0 #0d3a80); }
.gem-pill .plus { position: absolute; right: calc(var(--u) * -2.2); width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6);
  border-radius: 50%; background: #39c84a; border: calc(var(--u)*.45) solid #fff; display: grid; place-items: center;
  font-size: calc(var(--u) * 3.6); line-height: 1; -webkit-text-stroke: 0; }
#coinPill.bump { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.12); } }
.gear { position: absolute; right: calc(var(--u) * 3.4); top: calc(var(--u) * 16); width: calc(var(--u) * 10); height: calc(var(--u) * 10);
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6cc0ff, #2a7be8 70%); border: calc(var(--u)*.5) solid #fff;
  box-shadow: 0 calc(var(--u)*.6) 0 #1b4ea0; padding: calc(var(--u) * 1.6); }
.gear svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------- menu */
#planeBanner { position: absolute; left: calc(var(--u) * 19); top: calc(var(--u) * 33); width: calc(var(--u) * 52); height: calc(var(--u) * 13.5); }
#planeBanner .plank {
  position: absolute; left: calc(var(--u) * 10); right: 0; top: 0; bottom: 0; border-radius: calc(var(--u) * 1.4);
  background: linear-gradient(#c79458, #a87338 60%, #95622c); border: calc(var(--u)*.55) solid #4a2d12;
  box-shadow: inset 0 0 0 calc(var(--u)*.4) rgba(255,220,160,.25), 0 calc(var(--u)*.6) 0 rgba(0,0,0,.35);
  display: grid; place-items: center; padding-left: calc(var(--u) * 11); text-align: center;
  font-size: calc(var(--u) * 3.4); color: #4a2a0e; line-height: 1.1; letter-spacing: .03em;
}
#bannerImg { position: absolute; left: calc(var(--u) * -1); top: calc(var(--u) * -2.5); width: calc(var(--u) * 22); height: calc(var(--u) * 17); z-index: 2; object-fit: contain; filter: drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*.4) rgba(0,0,0,.35)); }
#stageTag { position: absolute; left: 0; right: 0; top: calc(var(--u) * 48.5); text-align: center; font-size: calc(var(--u) * 2.8);
  -webkit-text-stroke: calc(var(--u) * .35) rgba(20,30,50,.85); paint-order: stroke fill; opacity: .95; }

.side { position: absolute; top: calc(var(--u) * 50); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.side.left { left: calc(var(--u) * 2.5); }
.side.right { right: calc(var(--u) * 2.5); align-items: center; }
.icon-btn { position: relative; width: calc(var(--u) * 17); height: calc(var(--u) * 17); filter: drop-shadow(0 calc(var(--u)*.7) 0 rgba(0,0,0,.3)); transition: transform .12s; }
.icon-btn:active, .card .upg:active, .green-btn:active, .red-btn:active { transform: scale(.93); }
.icon-btn svg { width: 100%; height: 100%; }
.badge-x { position: absolute; right: calc(var(--u) * -1); top: calc(var(--u) * -1); font-size: calc(var(--u) * 4); -webkit-text-stroke: calc(var(--u)*.4) var(--ink); paint-order: stroke fill; }
.badge-count { position: absolute; left: calc(var(--u) * -0.5); bottom: calc(var(--u) * -1); font-size: calc(var(--u) * 3); -webkit-text-stroke: calc(var(--u)*.4) var(--ink); paint-order: stroke fill; }
.icon-btn.used { filter: grayscale(.8) brightness(.9); }
.chest .timer { position: absolute; left: 50%; bottom: calc(var(--u) * -6); transform: translateX(-50%); white-space: nowrap;
  background: linear-gradient(#3b7fe6, #2457c4); border: calc(var(--u)*.45) solid #fff; border-radius: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .6) calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.4); box-shadow: 0 calc(var(--u)*.5) 0 #173e8a; }
.chest.ready svg { animation: wiggle 1.2s infinite; }
.chest.ready .timer { background: linear-gradient(#5bdc4f, #2fa832); box-shadow: 0 calc(var(--u)*.5) 0 #1d6e21; }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
.rocket { margin-top: calc(var(--u) * 6); }
.rocket .unlock { position: absolute; left: 50%; bottom: calc(var(--u) * -6.5); transform: translateX(-50%); white-space: nowrap;
  background: linear-gradient(#c24cf2, #8a25d6); border: calc(var(--u)*.45) solid #fff; border-radius: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .5) calc(var(--u) * 2.2); font-size: calc(var(--u) * 3.2); box-shadow: 0 calc(var(--u)*.5) 0 #5a1592;
  -webkit-text-stroke: calc(var(--u)*.3) #3a0d63; paint-order: stroke fill; }
.rocket.armed .unlock { background: linear-gradient(#5bdc4f, #2fa832); box-shadow: 0 calc(var(--u)*.5) 0 #1d6e21; -webkit-text-stroke-color: #0d4a12; }
.rocket.armed svg { animation: wiggle 1.2s infinite; }

#tapToFly { position: absolute; left: 0; right: 0; top: calc(var(--u) * 99); text-align: center; font-size: calc(var(--u) * 8.4);
  -webkit-text-stroke: calc(var(--u) * .9) #1d2b44; paint-order: stroke fill; letter-spacing: .02em;
  text-shadow: 0 calc(var(--u)*.6) 0 rgba(0,0,0,.25); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }

#cards { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 13); display: flex; justify-content: center; gap: calc(var(--u) * 5); pointer-events: auto; }
.card { width: calc(var(--u) * 25.5); background: #fff; border-radius: calc(var(--u) * 1.8); padding: calc(var(--u) * .9);
  box-shadow: 0 calc(var(--u)*.8) 0 rgba(0,0,0,.25); position: relative; }
.card-head { background: linear-gradient(#4a5568, #364152); border-radius: calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0 0;
  height: calc(var(--u) * 5.6); display: flex; align-items: center; padding-left: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.7); }
.card-head .lvl { position: absolute; right: calc(var(--u) * -1.6); top: calc(var(--u) * -2.2); width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4);
  border-radius: 50%; background: #2c3648; border: calc(var(--u)*.55) solid #fff; display: grid; place-items: center; font-size: calc(var(--u) * 3.2); font-weight: normal; }
.card-art { position: relative; height: calc(var(--u) * 24); overflow: hidden; border-radius: 0 0 calc(var(--u) * .6) calc(var(--u) * .6); }
.card-art svg { width: 100%; height: 100%; display: block; }
.next-part { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--u) * .5) calc(var(--u) * .4); text-align: center;
  background: rgba(20, 50, 110, .78); font-size: calc(var(--u) * 1.85); line-height: 1.15; letter-spacing: .02em; }
.mult-label { position: absolute; left: 0; right: 0; top: calc(var(--u) * 3); text-align: center; font-size: calc(var(--u) * 7.2); color: #ffd23d;
  -webkit-text-stroke: calc(var(--u)*.7) #9a5a06; paint-order: stroke fill; transform: rotate(-8deg); }
.pips { display: flex; gap: calc(var(--u) * .9); margin: calc(var(--u) * 1.1) 0; }
.pips i { flex: 1; height: calc(var(--u) * 3.2); background: #cfd3d8; border-radius: calc(var(--u) * .4); }
.card.runway .pips i.on { background: #58cf43; }
.card.plane .pips i.on { background: #3b8ff0; }
.card.income .pips i.on { background: #f07438; }
.card .upg { width: 100%; height: calc(var(--u) * 11); border-radius: calc(var(--u) * .8); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * .4); font-size: calc(var(--u) * 3.2); -webkit-text-stroke: calc(var(--u)*.3) rgba(0,0,0,.25); paint-order: stroke fill; transition: transform .1s, filter .2s; }
.card .upg em { font-style: normal; display: flex; align-items: center; gap: calc(var(--u) * .7); font-size: calc(var(--u) * 3.2); }
.card.runway .upg { background: linear-gradient(#9de582, #6dcc56); }
.card.plane .upg { background: linear-gradient(#97c6ff, #5c9ff0); }
.card.income .upg { background: linear-gradient(#ffad86, #f4825a); }
.card.poor .upg { filter: saturate(.45) brightness(1.08); }
.card.poor .upg span, .card.poor .upg em { opacity: .75; }
.card.flash { animation: cardflash .45s; }
@keyframes cardflash { 30% { transform: scale(1.08) translateY(calc(var(--u) * -1.5)); } }

/* ------------------------------------------------------------- launch */
.red-btn { position: absolute; left: 50%; bottom: calc(var(--u) * 26); transform: translateX(-50%); width: calc(var(--u) * 21); height: calc(var(--u) * 9);
  background: linear-gradient(#ff4a43, #d81f1f); border-radius: calc(var(--u) * 1.4); border: calc(var(--u)*.5) solid #fff;
  box-shadow: 0 calc(var(--u)*.6) 0 #7d0f0f; font-size: calc(var(--u) * 4.2); }
.red-btn:active { transform: translateX(-50%) scale(.93); }
#releaseHint { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-size: calc(var(--u) * 4.6);
  -webkit-text-stroke: calc(var(--u)*.55) #1d2b44; paint-order: stroke fill; opacity: 0; transition: opacity .2s; }
#launchUi.aim #releaseHint { opacity: 1; animation: pulse .8s infinite; }

/* ------------------------------------------------------------- HUD */
#speedo { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 16); width: calc(var(--u) * 21); height: calc(var(--u) * 21);
  filter: drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*.6) rgba(0,0,0,.3)); }
#speedo svg { width: 100%; height: 100%; }
#needle { transform-origin: 60px 60px; transition: transform .1s linear; }
#speedNum { position: absolute; left: 0; right: 0; top: 55%; text-align: center; font-size: calc(var(--u) * 4.4); color: #5dff6a; line-height: 1;
  -webkit-text-stroke: calc(var(--u)*.5) #0c2a4a; paint-order: stroke fill; }
#speedUnit { position: absolute; left: 0; right: 0; top: 76%; text-align: center; font-size: calc(var(--u) * 2.3); -webkit-text-stroke: calc(var(--u)*.3) #0c2a4a; paint-order: stroke fill; }
#pauseBtn { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 39.5); width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5);
  border-radius: calc(var(--u) * 2); background: rgba(255,255,255,.28); display: flex; gap: calc(var(--u) * 1.6); align-items: center; justify-content: center; }
#pauseBtn i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 5); background: #fff; border-radius: calc(var(--u) * .4); }
#progress { position: absolute; right: calc(var(--u) * 5.5); top: calc(var(--u) * 16.5); width: calc(var(--u) * 6.8); height: calc(var(--u) * 60); }
#progress .tube { position: absolute; inset: 0; border-radius: calc(var(--u) * 3.4); background: rgba(255,255,255,.25);
  border: calc(var(--u)*.6) solid rgba(255,255,255,.85); overflow: hidden; box-shadow: inset 0 0 calc(var(--u)*1.2) rgba(0,40,90,.25); }
#progress .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(90deg, #2d68e8, #4d9cff 60%, #2d68e8); }
#progress .flag { position: absolute; left: calc(var(--u) * .6); right: calc(var(--u) * .6); top: calc(var(--u) * .6); height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 2.8) calc(var(--u) * 2.8) 0 0;
  background: repeating-conic-gradient(#222 0 25%, #fff 0 50%) 0 0 / calc(var(--u) * 2.8) calc(var(--u) * 2.5); }
#bestMark { position: absolute; left: calc(var(--u) * .6); right: calc(var(--u) * -4); height: 0; display: none; }
#bestMark::before { content: ''; position: absolute; left: 0; right: calc(var(--u) * 4); top: calc(var(--u) * -.35); height: calc(var(--u) * .7); background: #ffd21f; }
#bestMark i { position: absolute; right: 0; top: calc(var(--u) * -2.2); width: 0; height: 0;
  border-top: calc(var(--u) * 2.2) solid transparent; border-bottom: calc(var(--u) * 2.2) solid transparent; border-right: calc(var(--u) * 3.6) solid #ffd21f;
  filter: drop-shadow(0 0 calc(var(--u)*.2) rgba(0,0,0,.4)); }
#progPlane { position: absolute; left: 50%; width: calc(var(--u) * 9); margin-left: calc(var(--u) * -4.5); transform: translateY(-50%); text-align: center; }
#progPlane svg { width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5); display: block; margin: 0 auto; filter: drop-shadow(0 calc(var(--u)*.3) 0 rgba(0,0,0,.25)); }
#progPct { display: block; margin-top: calc(var(--u) * -.6); font-size: calc(var(--u) * 3.2); color: #2a6cf0; -webkit-text-stroke: calc(var(--u)*.55) #fff; paint-order: stroke fill; }
#distLabel { position: absolute; transform: translate(-50%, -100%); font-size: calc(var(--u) * 3.6); white-space: nowrap;
  -webkit-text-stroke: calc(var(--u)*.45) rgba(30,30,30,.55); paint-order: stroke fill; }
#stallWarn { position: absolute; left: 0; right: 0; top: calc(var(--u) * 52); text-align: center; font-size: calc(var(--u) * 6); color: #ff3b2f;
  -webkit-text-stroke: calc(var(--u)*.6) #fff; paint-order: stroke fill; display: none; animation: blink .3s infinite; }
#fuelWarn { position: absolute; left: calc(var(--u) * 15); top: calc(var(--u) * 41); font-size: calc(var(--u) * 3.4); color: #ff5a4a;
  -webkit-text-stroke: calc(var(--u)*.45) #fff; paint-order: stroke fill; display: none; animation: blink .6s infinite; }
@keyframes blink { 50% { opacity: .3; } }
#joy { position: absolute; width: calc(var(--u) * 32); height: calc(var(--u) * 32); margin: calc(var(--u) * -16) 0 0 calc(var(--u) * -16);
  border-radius: 50%; border: calc(var(--u)*.7) solid rgba(255,255,255,.9); display: none; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 11.5); height: calc(var(--u) * 11.5); margin: calc(var(--u) * -5.75) 0 0 calc(var(--u) * -5.75);
  border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 calc(var(--u)*1) rgba(0,0,0,.15); }

/* PERFECT! etc */
#bigText { pointer-events: none; }
#bigText .word { position: absolute; left: 0; right: 0; top: calc(var(--u) * 30); text-align: center; white-space: nowrap; }
#bigText .word span { display: inline-block; font-size: calc(var(--u) * 12); color: #fff; -webkit-text-stroke: calc(var(--u) * 1.1) #2468e0; paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 1.1) 0 #2ad15a, 0 calc(var(--u) * 1.6) 0 rgba(0,0,0,.25); animation: letterIn .5s cubic-bezier(.3,1.8,.5,1) both; }
#bigText .word.small span { font-size: calc(var(--u) * 9); }
#bigText .word.crash span { color: #ffdf3a; -webkit-text-stroke-color: #b3150f; text-shadow: 0 calc(var(--u) * 1.1) 0 #6b0d08, 0 calc(var(--u) * 1.6) 0 rgba(0,0,0,.3); }
#bigText .word.out { animation: wordOut .5s ease-in forwards; }
@keyframes letterIn { from { transform: translateY(calc(var(--u) * 8)) scale(.2) rotate(-20deg); opacity: 0; } }
@keyframes wordOut { to { transform: translateY(calc(var(--u) * -10)) scale(1.1); opacity: 0; } }

/* ------------------------------------------------------------- report */
#report { pointer-events: none; }
#reportTitle { position: absolute; left: 0; right: 0; top: calc(var(--u) * 31); text-align: center; }
#reportTitle span { position: relative; z-index: 2; display: inline-block; font-family: 'Luckiest Guy', var(--font); font-size: calc(var(--u) * 10.5);
  color: #ffc22c; background: linear-gradient(#ffef7a, #ffbf2a 50%, #ff8a1a); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 0 #6b2f0c) drop-shadow(calc(var(--u)*.45) 0 0 #6b2f0c) drop-shadow(calc(var(--u)*-.45) 0 0 #6b2f0c) drop-shadow(0 calc(var(--u)*.45) 0 #6b2f0c) drop-shadow(0 calc(var(--u)*-.45) 0 #6b2f0c) drop-shadow(0 calc(var(--u)*.8) 0 #6b2f0c);
  animation: titleIn .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes titleIn { from { transform: scale(.3); opacity: 0; } }
#reportTitle .puffs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; }
#reportTitle .puffs i { position: absolute; width: calc(var(--u) * 14); height: calc(var(--u) * 10); border-radius: 50%; background: #fff;
  box-shadow: inset 0 calc(var(--u) * -1.4) 0 #d8e6f2; animation: puff 1.1s ease-out forwards; }
#reportTitle .puffs i:nth-child(1) { left: calc(var(--u) * -40); top: calc(var(--u) * -2); }
#reportTitle .puffs i:nth-child(2) { left: calc(var(--u) * -24); top: calc(var(--u) * -9); width: calc(var(--u) * 18); }
#reportTitle .puffs i:nth-child(3) { left: calc(var(--u) * -6); top: calc(var(--u) * 1); width: calc(var(--u) * 20); }
#reportTitle .puffs i:nth-child(4) { left: calc(var(--u) * 12); top: calc(var(--u) * -8); width: calc(var(--u) * 16); }
#reportTitle .puffs i:nth-child(5) { left: calc(var(--u) * 26); top: calc(var(--u) * -1); }
@keyframes puff { 0% { transform: scale(.2); opacity: 1; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
#newRecord { position: absolute; left: 0; right: 0; top: calc(var(--u) * 45); text-align: center; font-size: calc(var(--u) * 5); color: #5dff6a;
  -webkit-text-stroke: calc(var(--u)*.6) #0b4a1a; paint-order: stroke fill; display: none; animation: pulse 1s infinite; }
#reportPanel { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(calc(var(--u) * 90), calc(100% - var(--u) * 10)); top: calc(var(--u) * 52.5);
  background: linear-gradient(#2140c0, #18309e); border: calc(var(--u) * .9) solid #3d74ff; outline: calc(var(--u) * .6) solid #0b1a5e;
  border-radius: calc(var(--u) * 3.6); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); box-shadow: 0 calc(var(--u)*1.2) 0 rgba(0,0,0,.3);
  transform-origin: 50% 0; animation: panelIn .45s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes panelIn { from { transform: scaleY(.1) scaleX(.6); opacity: 0; } }
#reportPanel .row { display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 10.5); font-size: calc(var(--u) * 3.5); }
#reportPanel .row.dist { background: #2e57e0; border-radius: calc(var(--u) * 2); padding: 0 calc(var(--u) * 3); }
#reportPanel .row .label { flex: 1; -webkit-text-stroke: calc(var(--u)*.35) #0b1a5e; paint-order: stroke fill; }
#reportPanel .row .val { font-size: calc(var(--u) * 5.6); color: #ffd52e; -webkit-text-stroke: calc(var(--u)*.55) #4a2a00; paint-order: stroke fill; }
#reportPanel .row .coin-ico { font-size: calc(var(--u) * 4.8); }
#reportPanel .pin { width: calc(var(--u) * 6); height: calc(var(--u) * 8); flex: none; }
#reportPanel .x { width: calc(var(--u) * 7); height: calc(var(--u) * 7); flex: none; }
#reportPanel .dash { border-top: calc(var(--u) * .7) dashed #3d6af0; margin: calc(var(--u) * 2.2) calc(var(--u) * 1); }
#reportPanel .row.mult { padding: 0 calc(var(--u) * 1); opacity: 0; transform: translateX(-20%); transition: all .35s cubic-bezier(.3,1.5,.5,1); }
#reportPanel .row.mult .label { color: #5ce9ff; }
#reportPanel .row.mult .val { color: #4dff58; font-size: calc(var(--u) * 7.6); -webkit-text-stroke-color: #0b4a1a; }
#reportPanel .chev { font-size: calc(var(--u) * 8); color: #2fc5ff; margin-left: calc(var(--u) * -1); }
#reportPanel .row.bonus { height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * 10); display: none; }
#reportPanel .row.bonus .label { color: #ffd0ff; font-size: calc(var(--u) * 3); }
#reportPanel .row.bonus .val { color: #ff9cf4; font-size: calc(var(--u) * 5); -webkit-text-stroke-color: #4a0b45; }
#reportPanel .row.show { opacity: 1; transform: none; }
#reportPanel .total { text-align: center; margin-top: calc(var(--u) * 1.4); }
#reportPanel .total .label { display: block; font-size: calc(var(--u) * 6); color: rgba(255,255,255,.18); letter-spacing: .05em; }
#reportPanel .total .val { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 9.5); color: #ffd52e;
  -webkit-text-stroke: calc(var(--u)*.8) #4a2a00; paint-order: stroke fill; opacity: 0; transform: scale(.4); transition: all .4s cubic-bezier(.3,1.7,.5,1); }
#reportPanel .total.show .label { color: rgba(255,255,255,.75); }
#reportPanel .total.show .val { opacity: 1; transform: none; }
#stageClear { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 46); text-align: center; font-size: calc(var(--u) * 7); color: #ffe14d;
  -webkit-text-stroke: calc(var(--u)*.8) #6b2f0c; paint-order: stroke fill; display: none; animation: pulse 1s infinite; }
.green-btn { position: absolute; left: 50%; bottom: calc(var(--u) * 26); transform: translateX(-50%); min-width: calc(var(--u) * 46); height: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 6); background: linear-gradient(#7ef05a, #34b52e); border: calc(var(--u)*.7) solid #fff; border-radius: calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u)*1) 0 #1d6e21; font-size: calc(var(--u) * 6.4); -webkit-text-stroke: calc(var(--u)*.6) #0d4a12; paint-order: stroke fill;
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.green-btn.show { opacity: 1; pointer-events: auto; animation: pulseBtn 1.1s infinite; }
@keyframes pulseBtn { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.07); } }
.green-btn:active { transform: translateX(-50%) scale(.93); }

/* ------------------------------------------------------------- evolution */
#evolve { text-align: center; }
#evolve .evo-title { position: absolute; left: 0; right: 0; top: calc(var(--u) * 22); font-family: 'Luckiest Guy', var(--font); font-size: calc(var(--u) * 13);
  color: #fff; -webkit-text-stroke: calc(var(--u) * 1) #7a2bd6; paint-order: stroke fill; text-shadow: 0 calc(var(--u)*1.2) 0 #4a1590; animation: titleIn .7s cubic-bezier(.3,1.6,.5,1) both; }
#evolve .evo-names { position: absolute; left: 0; right: 0; top: calc(var(--u) * 40); font-size: calc(var(--u) * 4.6); display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 3);
  -webkit-text-stroke: calc(var(--u)*.5) var(--ink); paint-order: stroke fill; }
#evolve .evo-names b { color: #ffd23d; font-size: calc(var(--u) * 6); }
#evolve .evo-names #evoTo { color: #7dff6a; }
#evolve .evo-stats { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(calc(var(--u) * 72), calc(100% - var(--u) * 10)); bottom: calc(var(--u) * 46); background: rgba(16,30,80,.75);
  border: calc(var(--u)*.6) solid #3d74ff; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 2.5); font-size: calc(var(--u) * 3.6); line-height: 1.6; }
#evolve .evo-stats b { color: #7dff6a; }
#evolve .green-btn { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------- modal */
#modal { background: rgba(8, 14, 30, .55); pointer-events: auto; }
#modal .sheet { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(calc(var(--u) * 88), calc(100% - var(--u) * 12)); top: 50%; transform: translateY(-50%);
  background: linear-gradient(#2a4fd6, #1b36a8); border: calc(var(--u) * .9) solid #5b8cff; outline: calc(var(--u) * .6) solid #0b1a5e;
  border-radius: calc(var(--u) * 4); padding: calc(var(--u) * 4); max-height: 82%; overflow: auto; animation: panelIn .35s cubic-bezier(.3,1.5,.5,1) both; }
#modal .sheet-title { text-align: center; font-family: 'Luckiest Guy', var(--font); font-size: calc(var(--u) * 7.5); color: #ffd23d;
  -webkit-text-stroke: calc(var(--u)*.7) #5a2a08; paint-order: stroke fill; margin-bottom: calc(var(--u) * 3); }
#modal .close { position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * -2); width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%;
  background: linear-gradient(#ff5a4f, #d72a22); border: calc(var(--u)*.6) solid #fff; font-size: calc(var(--u) * 4.4); box-shadow: 0 calc(var(--u)*.5) 0 #7d0f0f; }
.sheet-body { font-size: calc(var(--u) * 3.8); }
.opt { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.1); border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2); -webkit-text-stroke: calc(var(--u)*.3) #0b1a5e; paint-order: stroke fill; }
.toggle { width: calc(var(--u) * 15); height: calc(var(--u) * 7.5); border-radius: calc(var(--u) * 4); background: #8a94a8; position: relative; border: calc(var(--u)*.5) solid #fff; }
.toggle::after { content: ''; position: absolute; top: calc(var(--u) * .4); left: calc(var(--u) * .5); width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); border-radius: 50%; background: #fff; transition: left .2s; }
.toggle.on { background: #3fcf3a; }
.toggle.on::after { left: calc(var(--u) * 7.5); }
.sheet-btn { display: block; width: 100%; height: calc(var(--u) * 11); margin-top: calc(var(--u) * 2.4); border-radius: calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 4.6); border: calc(var(--u)*.6) solid #fff; -webkit-text-stroke: calc(var(--u)*.45) rgba(0,0,0,.35); paint-order: stroke fill; }
.sheet-btn.green { background: linear-gradient(#7ef05a, #34b52e); box-shadow: 0 calc(var(--u)*.7) 0 #1d6e21; }
.sheet-btn.red { background: linear-gradient(#ff5a4f, #d72a22); box-shadow: 0 calc(var(--u)*.7) 0 #7d0f0f; }
.sheet-btn.blue { background: linear-gradient(#58a8ff, #2a6ce8); box-shadow: 0 calc(var(--u)*.7) 0 #173e8a; }
.small-note { font-size: calc(var(--u) * 2.8); opacity: .8; text-align: center; margin-top: calc(var(--u) * 2.4); line-height: 1.4; -webkit-text-stroke: 0; }
.hangar-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); }
.hangar-item { background: rgba(255,255,255,.12); border-radius: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.6); text-align: center; position: relative;
  border: calc(var(--u)*.5) solid transparent; font-size: calc(var(--u) * 3); }
.hangar-item.current { border-color: #ffd23d; background: rgba(255,210,61,.18); }
.hangar-item img { width: 100%; aspect-ratio: 1.3; object-fit: contain; display: block; }
.hangar-item.locked img { filter: brightness(0) opacity(.45); }
.hangar-item .nm { -webkit-text-stroke: calc(var(--u)*.35) #0b1a5e; paint-order: stroke fill; }
.hangar-item .st { font-size: calc(var(--u) * 2.4); opacity: .85; }

#toast { position: absolute; left: 50%; top: calc(var(--u) * 60); transform: translate(-50%, 0); padding: calc(var(--u) * 2) calc(var(--u) * 4);
  background: rgba(14, 24, 52, .85); border-radius: calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.8); white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; }
#toast.on { opacity: 1; transform: translate(-50%, calc(var(--u) * -2)); }
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flycoin { position: absolute; font-size: calc(var(--u) * 6); transition: transform .7s cubic-bezier(.5,-0.3,.6,1), opacity .7s; }
.confetti { position: absolute; top: -5%; width: calc(var(--u) * 1.6); height: calc(var(--u) * 2.6); animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(115vh) rotate(720deg); } }
#fade { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
#fade.on { opacity: 1; }
#fade.dark { background: #0d1424; }
#loading { position: absolute; inset: 0; background: #2f8fdc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 4);
  font-size: calc(var(--u) * 5); -webkit-text-stroke: calc(var(--u)*.5) #123e8f; paint-order: stroke fill; transition: opacity .4s; pointer-events: auto; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .spin { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; border: calc(var(--u) * 2) solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* stacking: overlays always above the HUD/menu layers */
#report, #evolve { z-index: 4; }
#modal { z-index: 10; }
#fx { z-index: 12; }
#toast { z-index: 14; }
#fade { z-index: 20; }
#loading { z-index: 30; }

/* ------------------------------------------------------------- landscape
   (phones on their side, tablets, desktop): same pieces, re-arranged so the
   UI fits a short, wide screen. */
body.landscape #topbar .pill { top: calc(var(--u) * 3); }
body.landscape .gear { top: calc(var(--u) * 2.5); }
body.landscape #planeBanner { left: calc(50% - var(--u) * 26); top: calc(var(--u) * 2); }
body.landscape #stageTag { top: calc(var(--u) * 16.5); }
body.landscape .side { top: calc(var(--u) * 14); }
body.landscape #tapToFly { top: calc(var(--u) * 34); }
body.landscape #cards { bottom: calc(var(--u) * 3); left: calc(var(--u) * 3); right: auto; justify-content: flex-start; gap: calc(var(--u) * 3.5); }
body.landscape #tapToFly { left: auto; right: 0; width: 60%; }
body.landscape #speedo { top: calc(var(--u) * 3); }
body.landscape #pauseBtn { top: calc(var(--u) * 26); }
body.landscape #progress { top: calc(var(--u) * 3); height: min(calc(var(--u) * 60), calc(100% - var(--u) * 12)); }
body.landscape #fuelWarn { top: calc(var(--u) * 28); }
body.landscape #stallWarn { top: calc(var(--u) * 40); }
body.landscape #bigText .word { top: calc(var(--u) * 12); }
body.landscape .red-btn { bottom: calc(var(--u) * 4); }
body.landscape #releaseHint { top: 14%; }
body.landscape #reportTitle { top: calc(var(--u) * 2); }
body.landscape #newRecord { top: calc(var(--u) * 14.5); }
body.landscape #reportPanel { top: calc(var(--u) * 21); width: min(calc(var(--u) * 100), calc(100% - var(--u) * 10)); }
body.landscape #stageClear { bottom: auto; top: calc(var(--u) * 80); }
body.landscape .green-btn { bottom: calc(var(--u) * 3); }
body.landscape #evolve .evo-title { top: calc(var(--u) * 2); }
body.landscape #evolve .evo-names { top: calc(var(--u) * 18); }
body.landscape #evolve .evo-stats { bottom: auto; top: calc(var(--u) * 27); }
body.landscape #toast { top: 50%; }
body.landscape #modal .sheet { max-height: 92%; }

/* ------------------------------------------------- year + place badge */
#eraPlate {
  position: absolute; left: 50%; top: calc(var(--u) * 2.4); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: calc(var(--u) * .2);
  padding: calc(var(--u) * .9) calc(var(--u) * 5.2) calc(var(--u) * 1.1);
  background: linear-gradient(#f7edd2, #e6d2a2 70%, #d8bf86);
  border: calc(var(--u) * .5) solid #5e3f1e; border-radius: calc(var(--u) * 1.4);
  box-shadow: inset 0 0 0 calc(var(--u) * .35) #caa660, inset 0 calc(var(--u) * -.6) 0 rgba(90,60,20,.18), 0 calc(var(--u) * .7) 0 rgba(0,0,0,.35);
  color: #3a240f; white-space: nowrap; z-index: 5; transition: transform .12s;
}
#eraPlate.on { display: flex; }
#eraPlate:active { transform: translateX(-50%) scale(.96); }
#eraPlate::before, #eraPlate::after { content: ''; position: absolute; top: 50%; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3);
  margin-top: calc(var(--u) * -.65); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3dc9c, #8a6224); box-shadow: 0 0 0 calc(var(--u)*.15) #5e3f1e; }
#eraPlate::before { left: calc(var(--u) * 1.6); }
#eraPlate::after { right: calc(var(--u) * 1.6); }
#eraPlate .yr { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: calc(var(--u) * 6.2); line-height: .95; letter-spacing: .02em; }
#eraPlate .pl { font-size: calc(var(--u) * 2.25); letter-spacing: .08em; color: #5a3a18; }
#eraPlate .chev { position: absolute; right: calc(var(--u) * 3.6); top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 2.4); color: #8a6224; }
#eraPlate.flash { animation: plateFlash .9s ease-out; }
@keyframes plateFlash { 0% { box-shadow: 0 0 0 calc(var(--u)*1.6) rgba(255,230,140,.9), 0 calc(var(--u) * .7) 0 rgba(0,0,0,.35); } 100% { } }
body.landscape #eraPlate { top: calc(var(--u) * 1.4); }
body.landscape #planeBanner { top: calc(var(--u) * 14.5); }
body.landscape #stageTag { top: calc(var(--u) * 29); }
body.landscape .side { top: calc(var(--u) * 24); }

/* ------------------------------------------------------- chapter intro */
#intro { background: radial-gradient(ellipse at center, rgba(30,22,12,.45), rgba(10,8,4,.78)); pointer-events: auto; }
#intro .paper {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(calc(var(--u) * 90), calc(100% - var(--u) * 8)); max-height: calc(100% - var(--u) * 8); overflow-y: auto;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,90,40,.035) 0 2px, transparent 2px 5px),
    linear-gradient(#f3e8cb, #e9d8ad);
  color: #2b1d0e; border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 5);
  box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(0,0,0,.5), inset 0 0 calc(var(--u) * 6) rgba(120,80,30,.25);
  text-align: center; font-family: 'Playfair Display', Georgia, serif; animation: paperIn .55s cubic-bezier(.2,1.3,.4,1);
}
@keyframes paperIn { from { transform: translate(-50%, -40%) rotate(-3deg); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
.intro-date { font-family: 'Special Elite', monospace; letter-spacing: .2em; font-size: calc(var(--u) * 2.5); color: #6b4a24; }
.intro-year { font-weight: 900; font-size: calc(var(--u) * 15); line-height: 1.05; margin-top: calc(var(--u) * .2); color: #2b1a0a; }
.intro-place { font-family: 'Lilita One', sans-serif; font-size: calc(var(--u) * 3.6); letter-spacing: .07em; color: #7a4416; }
.intro-title { font-style: italic; font-weight: 700; font-size: calc(var(--u) * 4.4); margin-top: calc(var(--u) * 2); border-top: 1px solid rgba(80,50,20,.35); border-bottom: 1px solid rgba(80,50,20,.35); padding: calc(var(--u) * .6) 0; }
.intro-who { font-family: 'Lilita One', sans-serif; font-size: calc(var(--u) * 2.4); letter-spacing: .06em; color: #5a4630; margin-top: calc(var(--u) * 1.2); }
.intro-story { font-family: Georgia, 'Times New Roman', serif; font-size: calc(var(--u) * 2.85); line-height: 1.45; text-align: left; margin: calc(var(--u) * 2.2) 0 calc(var(--u) * 2.4); color: #2e2214; }
.intro-quote { font-family: 'Special Elite', monospace; font-size: calc(var(--u) * 2.35); line-height: 1.45; text-align: left;
  background: #fbf4de; border: 1px solid rgba(90,60,20,.3); border-left: calc(var(--u) * .9) solid #b8862e; padding: calc(var(--u) * 2) calc(var(--u) * 2.4); color: #2a2016; }
.intro-quote.telegram { background: #f9f1d6; border-left-color: #c9a33a; }
.intro-quote .hd { display: block; font-size: calc(var(--u) * 1.9); letter-spacing: .14em; color: #8a6224; margin-bottom: calc(var(--u) * 1); }
.intro-quote .sg { display: block; text-align: right; margin-top: calc(var(--u) * 1); }
#introBtn { position: relative; left: auto; bottom: auto; transform: none; margin: calc(var(--u) * 3.4) auto 0; display: flex; opacity: 1; pointer-events: auto; animation: introPulse 1.1s ease-in-out infinite; }
@keyframes introPulse { 50% { transform: scale(1.05); } }

/* ------------------------------------------------------- chapter list */
.chapter-list { display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); }
.chapter { display: grid; grid-template-columns: calc(var(--u) * 17) 1fr; align-items: center; gap: calc(var(--u) * 2);
  background: rgba(255,255,255,.1); border: calc(var(--u)*.45) solid transparent; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
  text-align: left; width: 100%; }
.chapter.current { border-color: #ffd23d; background: rgba(255,210,61,.16); }
.chapter.locked { opacity: .55; }
.chapter img { width: 100%; aspect-ratio: 1.3; object-fit: contain; }
.chapter.locked img { filter: brightness(0) opacity(.5); }
.chapter .yr { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: calc(var(--u) * 5.2); line-height: 1; color: #ffe39a; }
.chapter .pl { font-size: calc(var(--u) * 2.6); letter-spacing: .04em; }
.chapter .ac { font-size: calc(var(--u) * 2.1); opacity: .85; }
.chapter .st { font-size: calc(var(--u) * 2); color: #7dff6a; }
.chapter.locked .st { color: #ffb0a0; }

/* --------------------------------------------- history line on the report */
#repHistory { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(calc(var(--u) * 86), calc(100% - var(--u) * 10));
  bottom: calc(var(--u) * 54); text-align: center; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700;
  font-size: calc(var(--u) * 3); color: #fff4d6; text-shadow: 0 calc(var(--u)*.3) calc(var(--u)*.6) rgba(0,0,0,.6); display: none; }
body.landscape #repHistory { bottom: auto; top: calc(var(--u) * 72); }
.next-part .beyond { color: #ffd23d; }
/* the report title takes the top of a landscape screen */
body.landscape.reporting #eraPlate { display: none; }

/* the 1903 lift-off photograph */
#gl { transition: filter .5s ease-out; }
#gl.photo { filter: grayscale(1) sepia(.45) contrast(1.12) brightness(1.06); transition: filter .05s; }
.card-thumb { position: absolute; left: 4%; top: 2%; width: 92%; height: 78%; object-fit: contain; filter: drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*.3) rgba(0,0,0,.3)); }
/* keep the prompt in the sky, above the plane on its strip */
body:not(.landscape) #tapToFly { top: calc(var(--u) * 64); }