/* Petit Avion — everything is sized off vmin so the same layout works on a
   small phone in landscape, a tablet, and a desktop browser. */

/* Fredoka Bold, SIL Open Font License (fredoka-OFL.txt), in place of Fabrice's copy's Bubble Bobble
   (personal use only). */
@font-face {
  font-family: "Fredoka";
  src: url("fredoka-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --sky: #78c8ff;
  --grass: #28b43c;
  --ink: #143046;
  --pad: 22vmin;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0d2333;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  /* A child's palm will drag, long-press and double-tap across the screen. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.hidden { display: none !important; }

/* ------------------------------------------------------------------ stage */

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  display: block;
  background: var(--sky);
}

/* ------------------------------------------------------------------ pads */

#controls {
  position: fixed;
  inset: 0;
  pointer-events: none;
  touch-action: none;
}

#stage, #game { touch-action: none; }

.pad {
  position: absolute;
  /* touch-action is NOT inherited, so the rule on <body> never reached these.
     Without it the browser is free to reinterpret a drifting thumb as a pan and
     fire pointercancel, which dropped the throttle mid-flight. */
  touch-action: none;
  bottom: calc(2vmin + var(--safe-b));
  width: var(--pad);
  height: var(--pad);
  min-width: 78px;
  min-height: 78px;
  max-width: 190px;
  max-height: 190px;
  border-radius: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--pad) * 0.5);
  line-height: 1;
  color: #fff;
  background: rgba(20, 48, 70, 0.34);
  border: 0.7vmin solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0.6vmin 0 rgba(0, 0, 0, 0.22);
  pointer-events: auto;
  transition: transform 60ms ease, background-color 60ms ease;
}

.pad.held {
  background: rgba(20, 48, 70, 0.62);
  transform: scale(0.94);
}

#pad-left  { left: calc(2vmin + var(--safe-l)); }
#pad-right { left: calc(2vmin + var(--safe-l) + var(--pad) + 2vmin); }

#pad-up {
  right: calc(2vmin + var(--safe-r));
  width: calc(var(--pad) * 1.35);
  height: calc(var(--pad) * 1.35);
  min-width: 104px;
  min-height: 104px;
  max-width: 240px;
  max-height: 240px;
  border-radius: 50%;
  font-size: calc(var(--pad) * 0.62);
  background: rgba(220, 60, 60, 0.55);
  border-color: rgba(255, 255, 255, 0.9);
}

#pad-up.held { background: rgba(220, 60, 60, 0.85); }

/* On a narrow portrait screen the two move pads would collide with the go pad. */
@media (orientation: portrait) {
  :root { --pad: 17vmin; }
  #pad-up { bottom: calc(2vmin + var(--safe-b)); }
}

/* ------------------------------------------------------------- overlays */

#screen-title,
#screen-paused,
#screen-win {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
}

#screen-title {
  background: linear-gradient(180deg, var(--sky) 0%, #a8dcff 62%, var(--grass) 62%, #1e9a32 100%);
}

#screen-paused,
#screen-win {
  background: rgba(10, 35, 55, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.panel {
  text-align: center;
  max-width: 92vw;
  max-height: 100%;
  overflow: auto;
}

.plane-mark {
  display: inline-block; /* only the plane turns: a turned full-width block stuck out and made the panel scroll sideways */
  font-size: 13vmin;
  line-height: 1;
  transform: rotate(-12deg);
  filter: drop-shadow(0 0.5vmin 0 rgba(0, 0, 0, 0.15));
}

h1 {
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: 11vmin;
  margin: 1vmin 0 3vmin;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0.7vmin 0 #2a6c9e, 0 1.4vmin 1.6vmin rgba(0, 0, 0, 0.25);
}

.panel.win {
  background: #fff;
  border-radius: 4vmin;
  padding: 5vmin 6vmin;
  box-shadow: 0 1.5vmin 4vmin rgba(0, 0, 0, 0.35);
}

.panel.win h2.pause { color: #24506e; font-size: 10vmin; }

.panel.win h2 {
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: 13vmin;
  margin: 0;
  color: #dc3c3c;
}

.sub {
  font-size: 4.4vmin;
  font-weight: 800;
  color: #4678ff;
  margin: 1.5vmin 0 0;
}

.sub.small { font-size: 3.4vmin; }

/* ------------------------------------------------------------- buttons */

.big-btn {
  display: block;
  width: 100%;
  margin: 2.5vmin auto 0;
  padding: 2.6vmin 6vmin;
  min-height: 68px;
  font: inherit;
  font-size: 5.4vmin;
  font-weight: 800;
  color: #fff;
  background: #28b43c;
  border: none;
  border-bottom: 1.1vmin solid rgba(0, 0, 0, 0.28);
  border-radius: 3vmin;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 70ms ease;
}

.big-btn:active { transform: translateY(0.6vmin); border-bottom-width: 0.5vmin; }

.big-btn.go { background: #28b43c; }
.big-btn.plain { background: #7b8fa3; width: auto; padding: 2.6vmin 4vmin; }

.row {
  display: flex;
  gap: 2.5vmin;
  align-items: stretch;
  justify-content: center;
  margin-top: 1vmin;
}

.row .big-btn { margin-top: 2.5vmin; }

.corner-btn {
  position: absolute;
  top: calc(2vmin + env(safe-area-inset-top, 0px));
  right: calc(2vmin + var(--safe-r));
  width: 12vmin;
  height: 12vmin;
  min-width: 52px;
  min-height: 52px;
  max-width: 76px;
  max-height: 76px;
  font-size: 5vmin;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

/* Language switch on the title screen (AJ-Group Games), top left, opposite the sound button: for the grown-ups. */
.ajg-langs {
  position: absolute;
  top: calc(2vmin + env(safe-area-inset-top, 0px));
  left: calc(2vmin + env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  pointer-events: auto;
}
.ajg-langs svg { display: block; margin-right: 4px; opacity: 0.7; }
.ajg-langs button {
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 5px 9px;
  font: 700 15px/1 "Fredoka", system-ui, sans-serif;
  color: var(--ink);
  opacity: 0.6;
  cursor: pointer;
  touch-action: manipulation;
}
.ajg-langs button:hover { opacity: 1; }
.ajg-langs button[aria-pressed="true"] { opacity: 1; background: #ffd23f; }

/* ------------------------------------------------------------- text bits */

.how {
  display: flex;
  flex-direction: column;
  gap: 1vmin;
  margin: 4vmin 0 0;
  font-size: 3.2vmin;
  font-weight: 700;
  color: #10405f;
}

#sw-warning {
  margin: 2.5vmin auto 0;
  max-width: 70vmin;
  padding: 2vmin 3vmin;
  background: #fff3cd;
  border: 1px solid #e0c56b;
  border-radius: 2.5vmin;
  font-size: 3vmin;
  line-height: 1.4;
  color: #6b4e00;
}

#version {
  position: absolute;
  right: calc(2vmin + var(--safe-r));
  bottom: calc(1.5vmin + var(--safe-b));
  font-size: 2.6vmin;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

/* Who first imagined the game: small, at the foot of the title screen, clear of the version number. */
#credit {
  position: absolute;
  left: 14vmin;
  right: 14vmin;
  bottom: calc(1.5vmin + var(--safe-b));
  margin: 0;
  text-align: center;
  font-size: max(11px, 2.6vmin);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
#credit strong { font-weight: 800; }

/* Desktop: vmin-based type gets silly on a wide monitor. */
@media (min-width: 900px) and (min-height: 620px) {
  h1 { font-size: 76px; }
  .plane-mark { font-size: 84px; }
  .big-btn { font-size: 30px; max-width: 460px; }
  .how { font-size: 18px; }
  .panel.win h2.pause { color: #24506e; font-size: 10vmin; }

.panel.win h2 { font-size: 88px; }
  .sub { font-size: 28px; }
  .sub.small { font-size: 22px; }
  #version { font-size: 14px; }
  #credit { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .big-btn, .pad { transition: none; }
}