* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #8fc4e8;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* on a touch screen nothing pans or zooms: the whole page is the transmitter */
body.touch, body.touch canvas { touch-action: none; }
button { touch-action: manipulation; }

canvas { display: block; }

/* Nothing is drawn over the flight — question 15 says the plane is the only
   thing on screen. The start card and the fade are the only overlays, and both
   of them live between flights. */

#fade {
  position: fixed;
  inset: 0;
  background: #dcecf7;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 5;
}

#fade.on { opacity: 1; }

#start {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  background: radial-gradient(circle at 50% 30%, #bfe0f4 0%, #7ba8c9 55%, #3f6480 100%);
  color: #12303f;
}

#start.hidden { display: none; }

#start h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 68px);
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 4px 0 #2b556e, 0 10px 30px rgba(10, 40, 60, 0.45);
}

#start .tag {
  margin: 10px 0 26px;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 600;
  color: #1d4257;
}

#start .keys {
  list-style: none;
  margin: 0;
  padding: 18px 26px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  line-height: 2;
  font-size: clamp(13px, 1.6vw, 16px);
  text-align: left;
}

#start .keys b {
  display: inline-block;
  min-width: 26px;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 6px;
  background: #12303f;
  color: #fff;
  text-align: center;
  font-size: 0.92em;
}

#start .note {
  max-width: 520px;
  margin: 22px 0 0;
  font-size: clamp(12px, 1.5vw, 15px);
  line-height: 1.6;
  color: #1d4257;
}

#startBtn {
  margin-top: 28px;
  padding: 16px 44px;
  border: 0;
  border-radius: 999px;
  background: #e8543f;
  color: #fff;
  font: inherit;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 6px 0 #a83526;
}

#startBtn:active { transform: translateY(3px); box-shadow: 0 3px 0 #a83526; }

/* ---------- battery bar, shop button, landing message ---------- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#hud.hidden, #shop.hidden { display: none; }

#barWrap {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: clamp(140px, calc(100vw - 580px), 360px);   /* clear of the shop button */
  text-align: center;
  text-shadow: 0 1px 6px rgba(10, 30, 45, 0.6);
}

#barNote { white-space: nowrap; }

#barWrap .label, #barNote {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
}

#bar {
  height: 16px;
  margin: 5px 0 4px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(10, 30, 45, 0.45);
  overflow: hidden;
}

#barFill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: #5fd35a;
}

#bar.low { animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { border-color: #e8543f; } }

#shopBtn {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  pointer-events: auto;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: #e8543f;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 4px 0 #a83526;
}

#shopBtn .coins {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.5px;
}

#toast {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translate(-50%, -6px);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(10, 30, 45, 0.7);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#toast.on { opacity: 1; transform: translate(-50%, 0); }

#shop {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(18, 48, 63, 0.82);
  text-align: center;
}

#shop h2 { margin: 0; font-size: 34px; letter-spacing: 3px; }
#shop .shopCoins { margin: 8px 0 22px; font-size: 17px; }

#shop .item {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(460px, 90vw);
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #12303f;
  text-align: left;
}

#shop .item > div { flex: 1; }
#shop .name { font-size: 19px; font-weight: 700; }
#shop .desc { margin-top: 4px; font-size: 14px; }

#buyTank, #shopClose {
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

#buyTank { background: #e8543f; color: #fff; }
#buyTank:disabled { background: #b9c3c8; color: #eef2f4; cursor: default; }

#shop .how { max-width: 440px; margin: 18px 0 0; font-size: 13px; line-height: 1.6; opacity: 0.85; }
#shopClose { margin-top: 22px; background: #fff; color: #12303f; }

/* ---------- the transmitter, on a touch screen ----------
   Keys only on a keyboard; on an iPad body gets .touch and this lot appears.
   The right thumb is the stick (pitch and roll, the same two axes as the
   arrows), the left thumb has SLOW (E), CAMERA (C) and RUNWAY (R). The
   bottom-left corner is kept clear for the site's back link. */

.touchOnly, #pad { display: none; }
body.touch .touchOnly { display: block; }
body.touch .desk { display: none; }
body.touch #pad { display: block; }

#pad {
  position: absolute;
  inset: 0;
}

#stickZone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  pointer-events: auto;
  touch-action: none;
}

/* the stick rests in the corner, and jumps to wherever your thumb lands */
#stickBase {
  position: absolute;
  right: calc(44px + env(safe-area-inset-right));
  bottom: calc(44px + env(safe-area-inset-bottom));
  width: 140px;
  height: 140px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(10, 30, 45, 0.3);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

#stickBase.live { opacity: 1; transition: none; }

#stickKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: #e8543f;
  box-shadow: 0 4px 0 #a83526, 0 4px 14px rgba(10, 30, 45, 0.4);
}

#slowBtn, .padBtn {
  position: absolute;
  left: calc(24px + env(safe-area-inset-left));
  pointer-events: auto;
  touch-action: none;
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 6px rgba(10, 30, 45, 0.6);
  background: rgba(10, 30, 45, 0.4);
  -webkit-user-select: none;
  user-select: none;
}

#slowBtn {
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 96px;
  height: 96px;
  border-radius: 50%;
  font-size: 17px;
}

.padBtn {
  width: 110px;
  height: 48px;
  border-radius: 999px;
  font-size: 13px;
}

#camBtn { bottom: calc(196px + env(safe-area-inset-bottom)); }
#runwayBtn { bottom: calc(256px + env(safe-area-inset-bottom)); }

#slowBtn.on, .padBtn.on { background: #e8543f; border-color: #fff; }

/* a tall start card on a short screen scrolls instead of being cut off */
body.touch #start {
  justify-content: flex-start;
  overflow-y: auto;
  touch-action: pan-y;
  padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
}
body.touch #start h1 { margin-top: auto; }
body.touch #startBtn { margin-bottom: auto; }