/* ============================================================
   Sky Pilot — HUD & screens
   Landscape-first, touch-friendly, glass-cockpit vibe.
   ============================================================ */

:root {
  --bg: #0a0e17;
  --panel: rgba(12, 22, 36, 0.72);
  --panel-stroke: rgba(120, 200, 255, 0.18);
  --accent: #4fd1ff;
  --accent-dim: #2a7fa8;
  --green: #6dffb0;
  --amber: #ffcf5a;
  --red: #ff6b6b;
  --text: #e8f4ff;
  --muted: #8aa0b8;
  --font: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
}

.hidden { display: none !important; }

/* ============ SCREENS ============ */
.screen {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: radial-gradient(ellipse at 50% 30%, #16304f 0%, #0a0e17 70%);
  gap: 2.4vmin;
  text-align: center;
}

/* ============ LOGO ============ */
.logo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 11vmin;
  font-weight: 200;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(79, 209, 255, 0.55);
}
.logo.small { font-size: 7vmin; }
.logo span { font-weight: 700; letter-spacing: 0.18em; }
.logo::first-letter, .logo { line-height: 1; }

.sub { color: var(--muted); font-size: 3.2vmin; letter-spacing: 0.3em; text-transform: uppercase; }

/* ============ LOADING ============ */
.load-bar {
  width: 50vmin; height: 1.2vmin;
  background: rgba(255,255,255,0.08);
  border-radius: 1vmin;
  overflow: hidden;
  margin-top: 2vmin;
}
#loadFill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 0.25s ease;
}
#loadText { color: var(--muted); font-size: 2.6vmin; margin-top: 1vmin; }

/* ============ HANGAR (plane select) ============ */
.hangar { width: 100%; max-width: 1100px; }
.hangar h2, .brief h2 {
  color: var(--accent);
  font-weight: 300;
  letter-spacing: 0.25em;
  font-size: 2.6vmin;
  text-transform: uppercase;
  margin-bottom: 1.6vmin;
}
.plane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6vmin;
}
.plane-card {
  background: var(--panel);
  border: 1px solid var(--panel-stroke);
  border-radius: 1.6vmin;
  padding: 2.4vmin 1.6vmin;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vmin;
}
.plane-card:hover, .plane-card:focus { transform: translateY(-3px); border-color: var(--accent); background: rgba(20,40,60,0.85); }
.plane-card.locked { opacity: 0.55; cursor: not-allowed; }
.plane-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.plane-card .pc-icon { font-size: 7vmin; color: var(--text); line-height: 1; }
.plane-card .pc-name { font-size: 2.8vmin; font-weight: 600; letter-spacing: 0.06em; }
.plane-card .pc-class { color: var(--accent); font-size: 2vmin; letter-spacing: 0.2em; text-transform: uppercase; }
.plane-card .pc-lock { color: var(--amber); font-size: 2.4vmin; }
.plane-card .pc-unlock { color: var(--muted); font-size: 2vmin; }
.plane-card .pc-styled { color: var(--accent); font-size: 1.9vmin; letter-spacing: 0.1em; }

/* DEV badge inside plane icon when dev-unlock-all is on */
.pc-dev {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  font-size: 1.4vmin;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #0a0e17;
  background: var(--amber);
  border-radius: 0.4em;
  vertical-align: middle;
}

/* ============ HANGAR SCROLL + CATALOG SECTIONS ============ */
#hangarScroll {
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 1vmin;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}
#hangarScroll::-webkit-scrollbar { width: 8px; }
#hangarScroll::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 8px; }

.catalog-section {
  margin-top: 3vmin;
}
.catalog-section:first-child { margin-top: 0; }
.catalog-section h3 {
  color: var(--accent);
  font-weight: 300;
  letter-spacing: 0.22em;
  font-size: 2.4vmin;
  text-transform: uppercase;
  margin: 0 0 0.4vmin 0;
}
.catalog-section .catalog-sub {
  color: var(--muted);
  font-size: 1.8vmin;
  letter-spacing: 0.1em;
  margin-bottom: 1.4vmin;
}

/* Preview card (non-playable). Same shell as .plane-card but with an image. */
.plane-card.preview {
  cursor: zoom-in;
}
.plane-card.preview .pc-img {
  width: 100%;
  height: 11vmin;
  min-height: 70px;
  object-fit: contain;
  background: linear-gradient(180deg, #eef4fb, #d6e3f0);
  border-radius: 1vmin;
  margin-bottom: 0.4vmin;
}
.plane-card.preview .pc-preview-badge {
  display: inline-block;
  font-size: 1.5vmin;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #0a0e17;
  background: var(--accent);
  border-radius: 0.4em;
  padding: 0.1em 0.6em;
  margin-bottom: 0.4vmin;
}
.plane-card.preview .pc-era {
  color: var(--muted);
  font-size: 1.9vmin;
}
.plane-card.preview .pc-note {
  color: var(--muted);
  font-size: 1.7vmin;
  line-height: 1.4;
  margin-top: 0.4vmin;
}

/* ============ PREVIEW MODAL ============ */
.preview-img {
  width: 100%;
  max-width: 460px;
  border-radius: 1.4vmin;
  background: linear-gradient(180deg, #eef4fb, #d6e3f0);
}
.preview-banner {
  display: inline-block;
  background: rgba(255, 207, 90, 0.15);
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 0.6vmin 2vmin;
  border-radius: 1vmin;
  font-size: 2vmin;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.brief-desc { color: var(--muted); font-size: 2.2vmin; line-height: 1.5; max-width: 56vmin; }

/* ============ LIVERY / STYLE PANEL ============ */
.livery-card { max-width: 760px; }
.livery-section { width: 100%; margin-top: 1vmin; }
.livery-section-title {
  color: var(--accent);
  font-size: 2vmin;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1vmin;
  text-align: left;
  width: 100%;
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1vmin;
  width: 100%;
}
.swatch {
  cursor: pointer;
  border: 1px solid var(--panel-stroke);
  border-radius: 1vmin;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  transition: transform 0.12s, border-color 0.12s;
}
.swatch:hover { transform: translateY(-2px); border-color: var(--accent); }
.swatch.selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
.swatch .sw-preview {
  height: 5vmin;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swatch .sw-name {
  font-size: 1.9vmin;
  padding: 0.6vmin;
  text-align: center;
  background: rgba(0,0,0,0.3);
  letter-spacing: 0.05em;
}

.livery-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.4vmin;
  width: 100%;
}
.livery-field {
  display: flex;
  flex-direction: column;
  gap: 0.5vmin;
  font-size: 2vmin;
  color: var(--muted);
  text-align: left;
}
.livery-field input[type="color"] {
  width: 100%;
  height: 5vmin;
  min-height: 32px;
  border: 1px solid var(--panel-stroke);
  border-radius: 0.8vmin;
  background: transparent;
  cursor: pointer;
}
.livery-field input[type="text"], .livery-field select {
  width: 100%;
  padding: 1vmin;
  border: 1px solid var(--panel-stroke);
  border-radius: 0.8vmin;
  background: rgba(0,0,0,0.3);
  color: var(--text);
  font-size: 2.2vmin;
  font-family: var(--font);
}
.livery-actions {
  display: flex;
  gap: 1.4vmin;
  margin-top: 1.4vmin;
}

.stats-row { display: flex; gap: 3vmin; align-items: center; margin-top: 1vmin; }
.stat label { display: block; color: var(--muted); font-size: 2vmin; letter-spacing: 0.2em; text-transform: uppercase; }
.stat span { font-size: 4vmin; color: var(--green); font-weight: 600; }

.text-btn {
  background: transparent;
  border: 1px solid var(--panel-stroke);
  color: var(--muted);
  padding: 1vmin 2.4vmin;
  border-radius: 1vmin;
  font-size: 2.2vmin;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}
.text-btn:hover { color: var(--text); border-color: var(--accent); }
.text-btn.active { color: #0a0e17; background: var(--amber); border-color: var(--amber); }

.note { color: var(--amber); font-size: 2.2vmin; max-width: 80vmin; line-height: 1.5; }

/* ============ BRIEF ============ */
.brief-card {
  background: var(--panel);
  border: 1px solid var(--panel-stroke);
  border-radius: 2vmin;
  padding: 4vmin 5vmin;
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vmin;
}
.brief-card h2 { font-size: 4vmin; color: var(--text); letter-spacing: 0.1em; }
.brief-card p { color: var(--muted); font-size: 2.4vmin; line-height: 1.5; max-width: 56vmin; }
.plane-icon { font-size: 12vmin; color: var(--accent); }
.brief-stats { display: flex; gap: 3vmin; flex-wrap: wrap; justify-content: center; margin: 1vmin 0; }
.brief-stats .bs { text-align: center; }
.brief-stats .bs label { display: block; color: var(--muted); font-size: 1.8vmin; letter-spacing: 0.2em; text-transform: uppercase; }
.brief-stats .bs span { font-size: 3vmin; color: var(--accent); font-weight: 600; }
.controls-help {
  font-size: 2.1vmin; color: var(--muted);
  line-height: 1.6;
  background: rgba(0,0,0,0.25);
  padding: 1.4vmin 2vmin;
  border-radius: 1vmin;
  border-left: 3px solid var(--accent);
}
.big-btn {
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  color: #06222e;
  border: none;
  padding: 2.4vmin 6vmin;
  border-radius: 1.4vmin;
  font-size: 3.4vmin;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0.6vmin 2vmin rgba(79, 209, 255, 0.35);
  margin-top: 1vmin;
}
.big-btn:active { transform: scale(0.97); }

/* ============ HUD ============ */
#hud {
  position: fixed; inset: 0;
  z-index: 40;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.instr-stack {
  position: absolute;
  top: 4vmin;
  display: flex;
  flex-direction: column;
  gap: 1vmin;
}
.instr-stack.left { left: 4vmin; align-items: flex-start; }
.instr-stack.right { right: 4vmin; align-items: flex-end; }

.instr {
  background: var(--panel);
  border: 1px solid var(--panel-stroke);
  border-radius: 1vmin;
  padding: 0.8vmin 1.6vmin;
  min-width: 16vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.instr-label { color: var(--muted); font-size: 1.7vmin; letter-spacing: 0.25em; text-transform: uppercase; }
.instr-val { font-size: 4.4vmin; font-weight: 700; color: var(--green); line-height: 1.1; }
.instr-unit { color: var(--muted); font-size: 1.8vmin; }
.instr.warn .instr-val { color: var(--amber); }
.instr.alert .instr-val { color: var(--red); }

/* Attitude indicator */
#attitudeWrap {
  position: absolute;
  top: 4vmin; left: 50%;
  transform: translateX(-50%);
  width: 22vmin; height: 22vmin;
  max-width: 220px; max-height: 220px;
  opacity: 0.92;
}
#attitudeWrap canvas { width: 100%; height: 100%; }

/* Throttle bar */
#throttleBar {
  position: absolute;
  right: 4vmin;
  bottom: 14vmin;
  width: 3.2vmin;
  height: 30vmin;
  background: var(--panel);
  border: 1px solid var(--panel-stroke);
  border-radius: 1.6vmin;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
}
#throttleFill {
  width: 100%;
  background: linear-gradient(0deg, var(--green), var(--accent));
  transition: height 0.08s linear;
}
.throttle-label {
  position: absolute;
  bottom: -2.4vmin; left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 1.6vmin;
  letter-spacing: 0.2em;
}

/* Banner / toasts */
.banner {
  position: absolute;
  top: 28vmin; left: 50%;
  transform: translateX(-50%);
  background: rgba(109, 255, 176, 0.12);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 1.4vmin 3vmin;
  border-radius: 1.2vmin;
  font-size: 3.6vmin;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: pop 0.4s ease, fadeOut 0.6s ease 1.6s forwards;
  text-shadow: 0 0 12px rgba(109,255,176,0.5);
}
@keyframes pop { 0% { transform: translateX(-50%) scale(0.6); opacity: 0; } 60% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

/* Objective */
.objective {
  position: absolute;
  top: 26vmin; right: 4vmin;
  background: var(--panel);
  border: 1px solid var(--panel-stroke);
  border-left: 3px solid var(--accent);
  padding: 1vmin 1.8vmin;
  border-radius: 1vmin;
  color: var(--text);
  font-size: 2.2vmin;
  max-width: 30vmin;
}
.objective .obj-label { color: var(--accent); font-size: 1.6vmin; letter-spacing: 0.2em; text-transform: uppercase; display: block; }

/* Top bar buttons */
.top-bar {
  position: absolute;
  top: 4vmin; left: 50%;
  transform: translate(-50%, 28vmin);
  display: flex;
  gap: 1vmin;
  pointer-events: auto;
}
/* place top-bar at very top center instead */
.top-bar { top: 0.6vmin; transform: translateX(-50%); }
.ctrl-btn {
  background: var(--panel);
  border: 1px solid var(--panel-stroke);
  color: var(--muted);
  padding: 1vmin 2vmin;
  border-radius: 1vmin;
  font-size: 2vmin;
  letter-spacing: 0.15em;
  cursor: pointer;
  pointer-events: auto;
}
.ctrl-btn:hover, .ctrl-btn:active { color: var(--accent); border-color: var(--accent); }
.ctrl-btn.active { color: var(--green); border-color: var(--green); }

/* Touch joystick */
#stickZone {
  position: absolute;
  left: 4vmin; bottom: 6vmin;
  width: 24vmin; height: 24vmin;
  border: 2px solid var(--panel-stroke);
  border-radius: 50%;
  background: rgba(12, 22, 36, 0.35);
  pointer-events: auto;
  touch-action: none;
}
#stickKnob {
  position: absolute;
  left: 50%; top: 50%;
  width: 9vmin; height: 9vmin;
  margin: -4.5vmin 0 0 -4.5vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent), var(--accent-dim));
  box-shadow: 0 0.4vmin 1vmin rgba(0,0,0,0.4);
  transition: transform 0.05s linear;
}
.stick-hint {
  position: absolute;
  bottom: -2.4vmin; left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 1.6vmin;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Touch throttle */
#thrZone {
  position: absolute;
  right: 10vmin; bottom: 6vmin;
  width: 14vmin; height: 24vmin;
  border: 2px solid var(--panel-stroke);
  border-radius: 2vmin;
  background: rgba(12, 22, 36, 0.35);
  pointer-events: auto;
  touch-action: none;
  display: flex;
  flex-direction: column-reverse;
}
#thrKnob {
  width: 100%; height: 5vmin;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  border-radius: 1vmin;
  box-shadow: 0 0.4vmin 1vmin rgba(0,0,0,0.4);
}

/* Reticle / center marker */
.reticle {
  position: absolute;
  top: 50%; left: 50%;
  width: 4vmin; height: 4vmin;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.reticle::before, .reticle::after {
  content: ""; position: absolute; background: rgba(255,255,255,0.5);
}
.reticle::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.reticle::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

/* ============ RESULTS ============ */
.res-list { width: 100%; max-width: 50vmin; display: flex; flex-direction: column; gap: 0.8vmin; }
.res-row { display: flex; justify-content: space-between; padding: 1vmin 1.6vmin; background: rgba(0,0,0,0.2); border-radius: 0.8vmin; font-size: 2.4vmin; }
.res-row label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 2vmin; }
.res-row span { color: var(--green); font-weight: 600; }
.res-row.miss span { color: var(--muted); }
.res-total { margin: 1.6vmin 0; }
.res-total label { display: block; color: var(--accent); font-size: 2.2vmin; letter-spacing: 0.25em; text-transform: uppercase; }
.res-total span { font-size: 6vmin; color: var(--green); font-weight: 700; }

/* ============ RESPONSIVE ============ */
@media (max-width: 700px) and (orientation: portrait) {
  /* Encourage landscape but still render */
  .screen::after {
    content: "↻ Rotate to landscape for best experience";
    position: fixed; bottom: 4vmin; left: 50%; transform: translateX(-50%);
    color: var(--amber); font-size: 2.4vmin;
  }
}
@media (min-width: 1200px) {
  .instr-val { font-size: 36px; }
  .banner { font-size: 28px; }
}