:root {
  --bg: #0a0f08;
  --olive: #232c1c;
  --olive-2: #2f3a24;
  --amber: #f2b544;
  --amber-strong: #ffcf6b;
  --red: #d9432b;
  --paper: #eef1e6;
  --muted: #9aa48c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  /* see collapse-chrome below */
  color: var(--paper);
  font-family: 'Bahnschrift', 'Segoe UI', system-ui, -apple-system, sans-serif;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

/* iPhone Safari cannot put a canvas into native fullscreen. In immersive
   mode the document gets a tiny scroll runway solely to invite Safari to
   collapse its chrome; the game itself remains fixed to the visible viewport
   and never moves with that scroll. */
html.collapse-chrome,
html.collapse-chrome body {
  overflow-y: auto;
  min-height: calc(100% + 120px);
}

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  /* --app-height is measured from VisualViewport. That is the only viewport
     Safari updates while its address bar animates, so the canvas always fills
     the actually visible game area without stretching behind browser UI. */
  height: var(--app-height, 100dvh);
  background: #000;
  overflow: hidden;
}

canvas#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Fullscreen gate (start screen) ---------- */
/* Secondary treatment: it sits directly above Decolar, and Decolar stays
   disabled until this one has been used, so the eye should land here first
   without it outshouting the primary action. */
.ghostBtn {
  background: rgba(20, 26, 15, 0.55) !important;
  border: 1px solid rgba(242, 181, 68, 0.5) !important;
  color: var(--amber-strong) !important;
  box-shadow: none !important;
}
.ghostBtn:hover { background: rgba(35, 44, 28, 0.85) !important; }
.fsIcon { width: 18px; height: 18px; flex-shrink: 0; display: block; }
/* one icon or the other, never both */
.ghostBtn .fsExit,
.ghostBtn.isFull .fsEnter { display: none; }
.ghostBtn.isFull .fsExit { display: block; }
/* once the gate is satisfied it is just an exit toggle, so calm it right down */
.ghostBtn.isFull { opacity: 0.55; }
/* .overlay is a flex column with no gap and .primaryBtn carries no margin, so
   two stacked buttons sat edge to edge with literally zero pixels between
   them. This is the separation. */
.ghostBtn { margin-bottom: 14px; }

.fsHint {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--amber);
  opacity: 0.9;
}
.fsHint.hidden { display: none; }
#fullscreenBtn.hidden, #installBtn.hidden, #installHint.hidden { display: none; }

/* ---------- Overlays (menus) ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(60, 75, 45, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(5, 9, 4, 0.94), rgba(5, 9, 4, 0.98));
  z-index: 20;
}
.overlay.hidden { display: none; }

.overlay.withArt {
  background:
    radial-gradient(ellipse 46% 78% at 50% 50%, rgba(4, 6, 4, 0.86) 0%, rgba(4, 6, 4, 0.6) 50%, rgba(4, 6, 4, 0.18) 82%, rgba(4, 6, 4, 0) 100%),
    linear-gradient(180deg, rgba(3, 5, 3, 0.4) 0%, rgba(3, 5, 3, 0.05) 18%, rgba(3, 5, 3, 0.05) 78%, rgba(3, 5, 3, 0.55) 100%),
    url('assets/fundo.png');
  background-size: cover;
  background-position: center 42%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--amber);
  border: 1px solid rgba(242, 181, 68, 0.45);
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(20, 16, 6, 0.45);
  margin-bottom: 14px;
}
.badgeIcon { width: 30px; height: 12px; color: var(--amber-strong); flex-shrink: 0; }
.badge.defeat {
  color: var(--red);
  border-color: rgba(217, 67, 43, 0.5);
  background: rgba(217, 67, 43, 0.1);
}

#startScreen h1, #resultScreen h1 {
  font-size: clamp(28px, 6vw, 52px);
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

.subtitle {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight: 600;
}
.subtitle .vs { color: var(--red); font-weight: 800; margin: 0 6px; }

.desc {
  max-width: 480px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 26px;
}
.descbr { display: none; }

.primaryBtn {
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, var(--amber-strong), var(--amber));
  color: #241a05;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 34px;
  border-radius: 12px;
  box-shadow: 0 6px 0 #a4791f, 0 10px 24px rgba(0,0,0,0.5);
  letter-spacing: 0.02em;
  transition: transform 0.08s ease;
}
.primaryBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a4791f, 0 6px 14px rgba(0,0,0,0.5); }
/* Decolar sits disabled until the fullscreen gate is satisfied, so this has to
   read as deliberately locked rather than as a broken button. */
.primaryBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.55);
  box-shadow: none;
  transform: none;
}
.planeIcon { width: 18px; height: 18px; opacity: 0.75; flex-shrink: 0; }

.legend {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  max-width: 520px;
}
.chip {
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 10px;
  border-radius: 999px;
}
.chip kbd {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
  color: var(--paper);
}

.statsRow {
  display: flex;
  gap: 28px;
  margin: 22px 0 30px;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.statVal { font-size: clamp(24px, 5vw, 36px); font-weight: 800; color: var(--amber-strong); }
.statLabel { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }

/* ---------- Rotate hint ---------- */
#rotateHint {
  z-index: 40;
  display: none;
  background: rgba(4, 7, 3, 0.97);
}
.rotateIcon {
  font-size: 46px;
  animation: rotatePulse 1.6s ease-in-out infinite;
  margin-bottom: 14px;
}
@keyframes rotatePulse {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
#rotateHint p { max-width: 260px; color: var(--muted); font-size: 14px; }

body.is-touch.orientation-portrait #rotateHint { display: flex; }
body.is-touch.orientation-portrait #startScreen,
body.is-touch.orientation-portrait #resultScreen,
body.is-touch.orientation-portrait #touchControls { display: none !important; }

/* ---------- Touch controls ---------- */
.touchOnly { display: none; }
body.is-touch .touchOnly.chip { display: inline-flex; }
body.is-touch:not(.orientation-portrait) #touchControls.active { display: block; }

body:not(.is-touch) .chip.touchOnly { display: none; }
body.is-touch .desc { display: none; }

#touchControls {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  display: none;
}

.stick-zone {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 34vw;
  max-width: 190px;
  height: 34vw;
  max-height: 190px;
  pointer-events: auto;
  touch-action: none;
}
.stick-base {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px dashed rgba(238, 241, 230, 0.4);
  background: radial-gradient(circle at 40% 35%, rgba(60,70,50,0.55), rgba(10,14,8,0.55) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(1px);
}
.stick-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(238, 241, 230, 0.45);
}
.stick-knob {
  position: absolute;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4b5a3a, #1c2414 75%);
  border: 1px solid rgba(238,241,230,0.5);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  left: 31%;
  top: 31%;
  transition: none;
}

.fire-zone {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 22vw;
  max-width: 108px;
  height: 22vw;
  max-height: 108px;
  border-radius: 50%;
  border: 2px dashed rgba(217, 67, 43, 0.65);
  background: radial-gradient(circle at 40% 35%, rgba(90,30,20,0.55), rgba(10,6,5,0.6) 70%);
  color: rgba(255, 214, 190, 0.85);
  pointer-events: auto;
  touch-action: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fire-zone:active, .fire-zone.pressed {
  background: radial-gradient(circle at 40% 35%, rgba(217,67,43,0.65), rgba(60,10,5,0.7) 70%);
  color: #ffe3d6;
}
.fire-icon { width: 44%; height: 44%; }

/* Compact phones need a smaller control footprint than tablets while keeping
   both controls comfortably inside the safe area. */
@media (max-width: 480px) {
  .overlay { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
  #startScreen h1, #resultScreen h1 { font-size: clamp(27px, 9vw, 38px); }
  .subtitle { font-size: 13px; }
  .primaryBtn { font-size: 15px; padding: 12px 24px; }
  .legend { max-width: 330px; margin-top: 18px; }
  .stick-zone { width: clamp(106px, 31vw, 148px); height: clamp(106px, 31vw, 148px); }
  .fire-zone { width: clamp(76px, 20vw, 96px); height: clamp(76px, 20vw, 96px); }
}

@media (min-width: 700px) {
  .desc { font-size: 14px; }
}

/* ---------- Short viewports (a phone held landscape) ----------
   The only breakpoint here used to be min-width:700px, which a phone in
   landscape MATCHES -- it is 844px wide -- so it was being handed the
   large-screen layout while its real constraint was 390px of HEIGHT. These
   are keyed on height instead, and collapse the vertical rhythm so the whole
   menu fits without the buttons piling into each other. */
@media (max-height: 460px) {
  .overlay { padding: 10px 16px; gap: 0; }
  .badge { font-size: 9px; padding: 3px 9px; margin-bottom: 4px; }
  .badgeIcon { width: 22px; height: 9px; }
  .overlay h1 { font-size: 30px; margin: 2px 0 1px; }
  .subtitle { font-size: 12px; margin: 0 0 6px; }
  .desc { display: none; }
  .primaryBtn { font-size: 14px; padding: 9px 22px; border-radius: 10px; }
  .ghostBtn { font-size: 13px; padding: 7px 18px; }
  .fsIcon, .planeIcon { width: 15px; height: 15px; }
  .fsHint { font-size: 10px; margin-top: 5px; }
  .legend { margin-top: 8px; gap: 4px 6px; }
  .chip { font-size: 9px; padding: 2px 7px; }
  .statsRow { margin: 6px 0; gap: 18px; }
  .statVal { font-size: 22px; }
  .statLabel { font-size: 9px; }
  .overlay .rotateIcon { font-size: 34px; }
}

/* Anything really short drops the legend entirely rather than overflowing. */
@media (max-height: 380px) {
  .legend { display: none; }
  .overlay h1 { font-size: 24px; }
  .stick-zone { bottom: max(10px, env(safe-area-inset-bottom)); }
  .fire-zone { bottom: max(12px, env(safe-area-inset-bottom)); }
}