html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  background-color: #000;
}

body,
canvas {
  /* Tells iOS we handle all touches manually, disables native browser panning/zooming */
  touch-action: none;

  /* Disables text selection and magnifier glass */
  -webkit-user-select: none;
  user-select: none;

  /* Disables the default tap highlight color on iOS */
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: transparent;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-touch-callout: none;
}

body > canvas {
  display: block;
  position: fixed;
  background-color: #000;
  /* Pin to all four edges to force full-bleed on iOS PWA */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Prevent default browser focus outlines on all interactive elements */
a,
button,
input,
select,
textarea {
  outline: none;
}

/* Prevent text selection and default tap highlights on interactive elements */
.btn,
.mobile-btn,
.sub-btn,
.color-swatch,
.customization-input {
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard */

  /* Disables the blue/gray highlight box that appears on tap in mobile browsers */
  -webkit-tap-highlight-color: transparent;

  /* Prevents the browser from showing the "Copy/Paste" callout on long-press */
  -webkit-touch-callout: none;
}

#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
  padding: 30px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
  z-index: 100;
}

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#pause-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 500;
  backdrop-filter: blur(5px);
}

/* Covered by the full map (minimap.js): no blur to redraw */
#pause-overlay.under-map {
  backdrop-filter: none;
}

#pause-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.pause-metadata {
  position: relative;
  z-index: 2;
}

#pause-overlay h1 {
  font-size: 48px;
  margin-bottom: 10px;
  letter-spacing: 5px;
  font-weight: 300;
}

.btn {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05)
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0 24px;
  height: 42px;
  font-size: 16px;
  font-weight: 600;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  cursor: pointer;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}

.btn:focus {
  outline: none;
}

.btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.1)
  );
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.customization-box {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 24px 16px 24px;
  border-radius: 12px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 280px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.customization-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.customization-label {
  font-size: 10px;
  color: white;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-bottom: 6px;
}

.customization-input {
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0 12px;
  height: 38px;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

select.customization-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.customization-input:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.customization-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

.customization-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  transition: opacity 0.2s;
}

.customization-input:focus::placeholder {
  opacity: 0;
}

/* --- Pause menu: Flight / Settings tabs --- */
.pause-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.pause-tab {
  position: relative;
  flex: 1;
  white-space: nowrap;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.pause-tab:hover {
  color: #fff;
}

.pause-tab.active {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
}

/* Both panels share one grid cell, so the box is as tall as the taller
   panel and switching tabs doesn't change its height. */
.pause-panels {
  display: grid;
}

.pause-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  visibility: hidden;
}

.pause-panel.active {
  visibility: visible;
}

/* Many controls inside have `transition: all`, which would also fade their
   visibility and leave the old tab showing through for ~0.25s. */
.pause-panel:not(.active) * {
  transition: none;
}

/* The plane buttons span the panel */
.pause-panel .customization-row {
  align-items: stretch;
}

/* A setting: title and subtitle on the left, its control on the right */
.pause-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

label.pause-row {
  cursor: pointer;
}

.pause-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pause-row-title {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
}

.pause-row-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

#song-title-text {
  color: #3498db;
}

.pause-row .customization-input {
  width: 110px;
  flex: none;
}

/* On/off switch (a styled checkbox) */
.pause-switch {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pause-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.pause-switch:checked {
  background: rgba(255, 215, 0, 0.35);
}

.pause-switch:checked::after {
  transform: translateX(16px);
  background: #ffd700;
}

.pause-switch:focus-visible {
  outline: 2px solid rgba(255, 215, 0, 0.6);
  outline-offset: 2px;
}

.pause-credit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.pause-credit a {
  color: #3498db;
  text-decoration: none;
}

/* Hide number input spinners */
input[type='number'].customization-input::-webkit-inner-spin-button,
input[type='number'].customization-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'].customization-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.color-picker-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 4px 0;
}

.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.8);
}

.color-swatch.active {
  border: 3px solid #fff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.customization-footer {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.customization-footer .btn {
  margin-top: 0;
  width: 100%;
}

#cockpit-ui {
  position: absolute;
  top: 20px;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    135deg,
    rgba(25, 25, 30, 0.5),
    rgba(10, 10, 15, 0.7)
  );
  padding: 12px 24px;
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 150;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  box-sizing: border-box;

  /* Make entire HUD interactive with clean hover state */
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;

  /* Eliminate webapp behaviors (selection, tap highlight, long-press callouts) */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#cockpit-ui:hover {
  background: linear-gradient(
    135deg,
    rgba(35, 35, 40, 0.6),
    rgba(20, 20, 25, 0.8)
  ) !important;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.cockpit-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  column-gap: 25px;
  row-gap: 8px;
}

.cockpit-module {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cockpit-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  width: 38px;
  text-align: right;
}

.cockpit-value {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  min-width: 60px;
}

#flight-status {
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 1ch;
  text-indent: 1ch;
  text-transform: uppercase;
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  display: inline-block;
  width: 120px;
}

#cockpit-status-panel {
  /* Inherits interactivity from #cockpit-ui */
}

#debug-menu {
  position: absolute;
  top: 70px;
  left: 20px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: monospace;
  display: none;
  z-index: 100;
  pointer-events: auto;
  width: 380px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  font-size: 11px;
  box-sizing: border-box;
}

#debug-menu::-webkit-scrollbar {
  width: 4px;
}

#debug-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.debug-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.debug-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.debug-section {
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.debug-section:first-child {
  padding-top: 0;
  border-top: none;
}

#debug-telemetry {
  position: absolute;
  top: 100px;
  right: 30px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  font-family: monospace;
  display: none;
  z-index: 100;
  pointer-events: none;
  font-size: 11px;
  min-width: 260px;
  white-space: nowrap;
}

#debug-menu button {
  background: #444;
  color: white;
  border: none;
  padding: 2px 5px;
  margin: 1px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 10px;
}

#debug-menu button.active {
  background: #ffd700;
  color: black;
}

/* Mobile Controls Redesign */
#mobile-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  z-index: 200;
  touch-action: none;
}

.mobile-btn {
  flex: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}

.mobile-btn:focus {
  outline: none;
}

.mobile-btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  opacity: 0.9;
}

.mobile-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.mobile-btn.active {
  background: #ffd700;
  color: #000;
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.menu-container {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.menu-container .mobile-btn {
  width: 100%;
}

/* The throttle (game-ui.js): drag the knob to set the target speed.
   --thr is the target as a fraction of the plane's top speed, --stall the
   speed the plane starts to sink below. */
#throttle-container {
  grid-column: span 2;
}

#throttle {
  --thr: 0;
  --stall: 0.11;
  --knob-w: 68px;
  --pad: 6px;
  position: relative;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  transition: opacity 0.6s ease;
}

/* Left alone, it fades back (game-ui.js) */
#throttle.idle {
  opacity: 0.45;
  transition: opacity 1.5s ease;
}

#throttle .throttle-stall {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(
    var(--pad) + var(--knob-w) / 2 + var(--stall) *
      (100% - var(--knob-w) - 2 * var(--pad))
  );
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 120, 80, 0.28) 0 6px,
    transparent 6px 12px
  );
}

#throttle.no-stall .throttle-stall {
  display: none;
}

#throttle .throttle-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(
    var(--pad) + var(--knob-w) / 2 + var(--thr) *
      (100% - var(--knob-w) - 2 * var(--pad))
  );
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0),
    rgba(255, 215, 0, 0.16)
  );
}

/* Tag: whoever's it gets a gold stretch past the usual top speed, from
   --boost-from (the usual top speed as a fraction of the boosted one) */
#throttle .throttle-boost {
  --boost-from: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(
    var(--pad) + var(--knob-w) / 2 + var(--boost-from) *
      (100% - var(--knob-w) - 2 * var(--pad))
  );
  background:
    repeating-linear-gradient(
      60deg,
      rgba(255, 255, 255, 0.14) 0 4px,
      transparent 4px 10px
    ),
    linear-gradient(90deg, rgba(240, 170, 0, 0.45), rgba(255, 205, 0, 0.75));
  border-left: 2px solid #ffd700;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#throttle.boosted .throttle-boost {
  opacity: 1;
  animation: throttle-boost-shimmer 2.4s ease-in-out infinite;
}

@keyframes throttle-boost-shimmer {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  #throttle.boosted .throttle-boost {
    animation: none;
  }
}

#throttle.boosted .throttle-max {
  color: rgba(42, 33, 18, 0.8);
}

/* The knob in the gold: lit up */
#throttle.in-boost .throttle-knob {
  border-color: rgba(255, 215, 0, 0.9);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 14px 2px rgba(255, 215, 0, 0.75);
}

/* As the boost comes and goes, the knob glides to its new place */
#throttle.boost-change .throttle-knob {
  transition:
    left 0.7s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

#throttle.boost-change .throttle-fill {
  transition: width 0.7s ease;
}

#throttle .throttle-ticks {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35) 0 1px,
    transparent 1px 10%
  );
}

#throttle .throttle-max {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font:
    700 10px 'Inter',
    sans-serif;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.55);
}

#throttle .throttle-knob {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(var(--pad) + var(--thr) * (100% - var(--knob-w) - 2 * var(--pad)));
  width: var(--knob-w);
  box-sizing: border-box;
  border-radius: 9px;
  background: rgba(28, 24, 36, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #ffd700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

#throttle .throttle-knob b {
  font-size: 17px;
}

#throttle .throttle-knob small {
  font-size: 9px;
  letter-spacing: 1px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.7);
}

/* Slow flight: amber where the plane sinks, red where it falls */
#throttle .throttle-knob {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

#throttle.amber .throttle-knob {
  background: rgba(214, 182, 110, 0.92);
  color: #2a2112;
}

#throttle.amber .throttle-knob small {
  color: rgba(42, 33, 18, 0.75);
}

#throttle.red .throttle-knob {
  background: rgba(196, 64, 52, 0.92);
  color: #fff;
}

#throttle.red .throttle-knob small {
  color: rgba(255, 255, 255, 0.8);
}

/* The Sub-Menu Animation: opacity and transform live on each .sub-btn rather
   than on the parent .menu-items, because an ancestor with opacity < 1 forms a
   CSS Backdrop Root that blocks descendant backdrop-filter blur until the
   fade-in finishes. */
.menu-items {
  position: absolute;
  bottom: 60px;
  /* Reduced from 75px to close the 15px gap */
  display: flex;
  flex-direction: column;
  gap: 15px;
  pointer-events: none;
  width: 100%;
  /* Match trigger button width */
  padding-bottom: 15px;
  /* Maintain visual gap while ensuring container covers the space */
}

.menu-container.expanded .menu-items {
  pointer-events: auto;
}

/* The Chevron Rotation */
#chevron-icon {
  transition: transform 0.4s ease;
}

.menu-container.expanded #chevron-icon {
  transform: rotate(180deg);
}

.sub-btn {
  width: 100%;
  height: 60px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}

.menu-container.expanded .sub-btn {
  opacity: 1;
  transform: translateY(0);
}

.sub-btn[hidden] {
  display: none;
}

.sub-btn:focus {
  outline: none;
}

.menu-container.expanded .sub-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.sub-btn.active {
  color: #ffd700;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
}

.menu-container.expanded .sub-btn:disabled,
.scheme-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1a 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  color: white;
  transition:
    opacity 0.8s ease-out,
    visibility 0.8s;
}

.loading-content {
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 60px 40px 80px 40px;
  border-radius: 24px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  max-width: 450px;
  width: 90%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 420px;
}

/* The title, START and the HUD's status are written as plain words (so
   search engines and screen readers read them) and spaced out here: a
   monospace space (1ch) plus the letter spacing either side of it */
.loading-title {
  --title-spacing: calc(1ch + 24px);
  font-size: 32px;
  font-weight: 200;
  font-family: var(--font-mono);
  letter-spacing: var(--title-spacing);
  line-height: 1.6;
  /* Balances the spacing after the last letter */
  margin: 0 0 0 var(--title-spacing);
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
}

.loading-bar-container {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin: 20px 0;
  overflow: hidden;
}

#loading-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.8);
  transition: width 0.4s ease;
}

#loading-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

/* Splash Screen Transitions */
:root {
  --splash-intro-duration: 0.4s;
  --splash-crossfade-duration: 1.2s;
  --font-mono:
    ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
}

.splash-fade-item {
  transition: opacity var(--splash-intro-duration) ease-in-out;
  will-change: opacity;
}

#splash-interactive-area.crossfading .splash-fade-item {
  transition-duration: var(--splash-crossfade-duration);
}

.splash-fade-item.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* Delay visibility: hidden until the opacity transition is done */
  transition:
    opacity var(--splash-intro-duration) ease-in-out,
    visibility 0s var(--splash-intro-duration);
}

#splash-interactive-area.crossfading .splash-fade-item.hidden {
  transition:
    opacity var(--splash-crossfade-duration) ease-in-out,
    visibility 0s var(--splash-crossfade-duration);
}

.splash-fade-item.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  /* visibility: visible should happen immediately */
  transition:
    opacity var(--splash-intro-duration) ease-in-out,
    visibility 0s 0s;
}

#splash-interactive-area.crossfading .splash-fade-item.visible {
  transition:
    opacity var(--splash-crossfade-duration) ease-in-out,
    visibility 0s 0s;
}

#splash-interactive-area {
  display: grid;
  grid-template-areas: 'overlap';
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  margin-top: 30px;
  min-height: 80px; /* Ensure space for content */
}

#splash-progress-container,
#splash-btn-container {
  grid-area: overlap;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#begin-btn {
  margin-top: 0;
  /* A space (about a quarter em in system fonts) and the button's 2px either
     side of it. The narrower right padding takes back the extra spacing after
     the last letter, so the button keeps its width. */
  --start-spacing: calc(0.25em + 4px);
  letter-spacing: var(--start-spacing);
  padding-right: calc(26px - var(--start-spacing));
  text-transform: uppercase;
  animation: pulse 2s infinite;
  border-color: var(--accent-color, rgba(255, 255, 255, 0.3));
  transition: all 0.3s ease;
}

/* Title screen music toggle: sets whether START begins with music. Turning it
   off dims the music credit. */
#splash-music-toggle {
  margin-top: 22px;
  width: 36px;
  height: 36px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

#splash-music-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#splash-music-toggle[aria-pressed='false'] {
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.12);
}

#splash-music-toggle[aria-pressed='true'] .music-off-icon,
#splash-music-toggle[aria-pressed='false'] .music-on-icon {
  display: none;
}

/* A quiet link under the title screen's controls, for anyone who wants to
   know more before playing */
#splash-about-link {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

#splash-about-link:hover,
#splash-about-link:focus-visible {
  color: rgba(255, 255, 255, 0.8);
}

#loading-music-attribution {
  transition: opacity 0.3s ease;
}

#loading-music-attribution.dimmed {
  opacity: 0.4;
}

#loading-music-attribution.dimmed a {
  color: rgba(255, 255, 255, 0.6) !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--accent-glow, rgba(255, 255, 255, 0.2));
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }

  #cockpit-ui {
    top: env(safe-area-inset-top, 0px);
    bottom: auto;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    justify-content: center;
    padding: 5px 10px;
  }

  @media (max-width: 500px) {
    #cockpit-ui {
      padding: 4px 8px;
      gap: 10px;
    }

    .cockpit-grid {
      column-gap: 12px;
      row-gap: 4px;
    }

    .cockpit-label {
      width: 28px;
      font-size: 8px;
    }

    .cockpit-value {
      font-size: 11px;
      min-width: 45px;
    }

    #flight-status {
      font-size: 10px;
      width: 100px;
    }
  }

  .loading-content {
    padding: 40px 20px;
  }

  .loading-title {
    --title-spacing: calc(1ch + 12px);
    font-size: 24px;
  }
}

/* Control Scheme Toggle */
#control-scheme-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.scheme-btn-group {
  display: flex;
  gap: 4px;
  flex: 1;
}

.scheme-btn {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 5px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}

.scheme-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.scheme-btn:focus {
  outline: none;
}

.scheme-btn.active {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.5);
  color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

/* The chosen plane's handling: a label and a bar per stat (--v, 0 to 1) */
.plane-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.plane-stats[hidden] {
  display: none;
}

.plane-stat-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.plane-stat-bar i {
  display: block;
  height: 100%;
  width: calc(var(--v, 0) * 100%);
  background: rgba(255, 215, 0, 0.6);
  transition: width 0.3s ease;
}

/* Virtual Joystick */
#virtual-joystick-base {
  position: fixed;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.15s ease-out;
}

#virtual-joystick-stick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.joystick-hidden {
  opacity: 0;
}

.joystick-visible {
  opacity: 1;
}

.version-tag {
  position: absolute;
  bottom: 24px;
  right: 30px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  z-index: 100;
}

.loading-content .version-tag {
  position: static;
  display: block;
  min-height: 14px;
  line-height: 14px;
  font-size: 11px;
  margin-top: 12px;
  margin-bottom: -10px;
  color: rgba(255, 255, 255, 0.4);
}

.pause-footer {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0;
  font-family: inherit;
  letter-spacing: 0.5px;
  pointer-events: none;
  user-select: none;
}

.pause-footer .version-tag {
  position: static;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.pause-footer a {
  pointer-events: auto;
  white-space: nowrap;
  color: #3498db;
  text-decoration: none;
}

/* Minimap CSS overlay styled with glassmorphism to look premium */
#minimap-container {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 180px;
  height: 180px; /* Exact 1:1 match with canvas size */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 150;
  overflow: hidden;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

#minimap-header {
  position: absolute; /* Overlay header absolutely at the top of the map */
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: rgba(0, 0, 0, 0.45); /* Elegant translucent dark HUD overlay */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  user-select: none;
  z-index: 10;
}

#minimap-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  display: block;
  z-index: 1;
}

.minimap-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 4px;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition:
    background 0.2s,
    border-color 0.2s;
  padding: 0;
  margin: 0;
  outline: none;
}

.minimap-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.minimap-btn:focus {
  outline: none;
}

/* Position overrides for mobile screens to prevent clipping */
@media (max-width: 768px) {
  #debug-telemetry {
    display: none !important;
  }
}

/* ============================================================
   ACHIEVEMENT TOAST NOTIFICATIONS
   ============================================================ */

#achievement-toast-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: max(env(safe-area-inset-top, 12px), 12px);
  pointer-events: none;
}

.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.15);
  color: white;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  opacity: 0;
  transform: translateY(-40px) scale(0.95);
  transition: none;
  pointer-events: auto;
  max-width: 340px;
}

.achievement-toast-visible {
  animation: toast-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.achievement-toast-exit {
  animation: toast-exit 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
}

.achievement-toast-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.achievement-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.achievement-toast-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 215, 0, 0.9);
  text-transform: uppercase;
}

.achievement-toast-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   ACHIEVEMENTS OVERLAY
   ============================================================ */

#achievements-overlay,
#people-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  flex-direction: column;
  align-items: center;
  color: white;
  z-index: 510;
  backdrop-filter: blur(6px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.achievements-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  padding: max(24px, env(safe-area-inset-top, 24px)) 20px
    max(40px, env(safe-area-inset-bottom, 40px)) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: auto;
}

.achievements-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.achievements-title {
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
}

.achievements-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.achievements-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.achievements-progress {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.achievements-stats {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  margin-bottom: 16px;
  font-family: monospace;
}

#achievements-grid,
#people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

/* Fly together (multiplayer.js) */
/* The Together tab's dot while you're in a room */
.fly-tab-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ed957;
  box-shadow: 0 0 6px #7ed957;
}

.fly-tab-dot[hidden] {
  display: none;
}

/* "Room CODE" and the share link on one row, so a full room fits in the
   Flight tab's height */
.fly-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.fly-room-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fly-room-head .fly-or {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
}

.fly-room-head .fly-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.fly-room-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.fly-room-actions .fly-btn {
  flex: 1;
  height: 38px;
}

/* Play a game: one tile a game, in the room list's place while choosing
   (multiplayer.js) */
.fly-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.fly-games[hidden],
.fly-players[hidden] {
  display: none;
}

.fly-game {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fly-game:hover {
  border-color: #ffc23d;
  background: rgba(255, 194, 61, 0.12);
}

.fly-game-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.fly-game-rule {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.3;
}

#fly-tag-btn.open {
  border-color: #ffc23d;
}

/* Out of a room the tab is shorter than the others: three tight groups
   (name, start a flight, join one) split the spare space evenly between them */
#fly-solo {
  flex: 1;
  justify-content: space-between;
}

.fly-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* In a room the sections sit a little closer, and the tag rule right
   under its button */
#fly-room {
  gap: 8px;
}

/* Your own row: tap your name to change it */
.fly-self {
  cursor: text;
}

.fly-self-name {
  box-sizing: border-box;
  width: 100%;
  height: 18px;
  padding: 0;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  /* Same size as the other names; the viewport's maximum-scale stops
     iOS zooming in on focus */
  font-size: inherit;
  line-height: 17px;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.fly-self-name:focus {
  border-bottom: 1px solid #ffd700;
}

.fly-self-note::after {
  content: ' ✎';
}

.fly-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

.fly-field input,
.fly-join-row input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  font-size: 16px;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.fly-field input:focus,
.fly-join-row input:focus {
  border-color: rgba(255, 255, 255, 0.55);
}

.fly-join-row input {
  letter-spacing: 4px;
  text-transform: uppercase;
}

.fly-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.fly-section[hidden] {
  display: none;
}

.fly-join-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.fly-btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

#fly-invite-btn,
#fly-bots-btn {
  width: 100%;
}

.fly-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.fly-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.fly-btn-quiet {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.fly-or {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.fly-room-code {
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4px;
  -webkit-user-select: text;
  user-select: text;
}

.fly-players {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.fly-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 3px 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
}

.fly-player[hidden] {
  display: none;
}

.fly-player-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* A faint ring, as in the room chip, so the black livery shows */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.fly-player-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fly-player-name {
  min-width: 0;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fly-player-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  padding-right: 8px;
}

.fly-player .fly-btn {
  flex-shrink: 0;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* Fly to: a square button with a plane in it */
.fly-player .fly-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 34px;
  padding: 0;
}

/* Same size as Fly to, but not shown */
.fly-player .fly-btn-spacer {
  visibility: hidden;
}

/* "it", "paused": small and grey under the name */
.fly-player-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.fly-bots-row[hidden] {
  display: none;
}

.fly-bots-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0 4px 0 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.fly-status:empty {
  display: none;
}

.fly-status {
  min-height: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  letter-spacing: 0.5px;
}

/* People cards (people-screen.js): an achievement card with a face */
.person-card-face {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  background: #f2d9a6;
  border: 2px solid #2b1d16;
  border-radius: 6px;
}
.achievement-card.locked .person-card-face {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   ACHIEVEMENT CARDS
   ============================================================ */

.achievement-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all 0.25s ease;
}

.achievement-card.unlocked {
  background: rgba(255, 215, 0, 0.06);
  border-color: rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.06);
}

.achievement-card.locked .achievement-card-emoji {
  filter: grayscale(1) opacity(0.3);
}

.achievement-card-emoji {
  font-size: 30px;
  line-height: 1;
}

.achievement-card-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
}

.achievement-card.locked .achievement-card-title {
  color: rgba(255, 255, 255, 0.35);
}

.achievement-card-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  line-height: 1.3;
}

.achievement-card.locked .achievement-card-hint {
  display: none;
}

/* Lock icon indicator for locked cards */
.achievement-card.locked::after {
  content: '🔒';
  font-size: 10px;
  opacity: 0.35;
  margin-top: -2px;
}

/* Reset button at bottom of achievements overlay */
.achievements-reset-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  padding: 0 16px;
  height: 32px;
  font-size: 10px;
  font-weight: 600;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.25s ease;
  letter-spacing: 3px;
  margin-top: 8px;
  outline: none;
}

.achievements-reset-btn:active {
  background: rgba(200, 50, 50, 0.15);
  border-color: rgba(200, 50, 50, 0.4);
  color: rgba(255, 100, 100, 0.8);
  transform: scale(0.97);
}

.achievements-reset-btn.confirming {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.6);
  color: #ff6b6b;
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.3);
  letter-spacing: 1.5px;
}

.achievements-reset-btn.confirming:hover {
  background: rgba(220, 53, 69, 0.3);
  border-color: rgba(220, 53, 69, 0.8);
  color: #ff8585;
}

/* ============================================================
   PAUSE MENU ACTION BUTTONS (MAP & ACHIEVEMENTS)
   ============================================================ */

.pause-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.pause-icon-btn,
#achievements-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  padding: 0 16px;
  height: 36px;
  margin-top: 0;
  font-size: 12px;
  font-weight: 600;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 1px;
  flex: 1;
  min-width: 0;
  width: auto;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pause-icon-btn:hover,
#achievements-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.pause-icon-btn:active,
#achievements-btn:active {
  transform: scale(0.98);
}

/* Responsive: 3 columns on wider screens */
@media (min-width: 600px) {
  #achievements-grid,
  #people-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .achievements-content {
    max-width: 600px;
  }
}

/* ============================================================
   FULLSCREEN WORLD MAP OVERLAY
   ============================================================ */

#fullscreen-map-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #090e17;
  z-index: 520;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#fullscreen-map-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}

#fullscreen-map-canvas.dragging {
  cursor: grabbing;
}

.fullscreen-map-header {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 520px;
  height: 48px;
  background: rgba(15, 20, 32, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 20;
  pointer-events: auto;
  box-sizing: border-box;
}

.fullscreen-map-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fullscreen-map-title {
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
}

.fullscreen-map-coords {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 11px;
  color: #ffd700;
  letter-spacing: 0.5px;
}

/* Center on plane: bottom right above the resume bar, its right edge
   lined up with the bar's */
.fullscreen-map-recenter-btn {
  position: absolute;
  right: calc(50% - min(45%, 250px));
  bottom: 104px;
  width: 52px;
  height: 52px;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(15, 20, 32, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fullscreen-map-recenter-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.fullscreen-map-recenter-btn svg .fill {
  fill: currentColor;
  stroke: none;
}

.fullscreen-map-recenter-btn:active {
  transform: scale(0.95);
}

/* Back to flying: where the flight controls sit (#mobile-controls), so
   it's in thumb reach on phones */
.fullscreen-map-resume-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  height: 56px;
  margin: 0;
  background: rgba(15, 20, 32, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 20;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fullscreen-map-resume-btn:hover {
  transform: translateX(-50%) translateY(-2px);
}

.fullscreen-map-resume-btn:active {
  transform: translateX(-50%) scale(0.98);
}

/* The pin's "Warp here" / "Set waypoint" panel (minimap.js), above the resume bar */
.fullscreen-map-warp {
  position: absolute;
  bottom: 104px;
  /* From the resume bar's left edge to the center-on-plane button */
  left: calc(50% - min(45%, 250px));
  right: calc(50% - min(45%, 250px) + 62px);
  justify-content: space-between;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 20, 32, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 8px 8px 8px 14px;
  z-index: 20;
  pointer-events: auto;
  white-space: nowrap;
}

/* The place's name, its coordinates and who's there, one per line */
.fullscreen-map-warp-place {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fullscreen-map-warp-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.fullscreen-map-warp-coords {
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.fullscreen-map-warp-people {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.fullscreen-map-warp-btn {
  background: #ffd700;
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  min-height: 44px;
  padding: 0 18px;
  font:
    600 14px Inter,
    -apple-system,
    sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.fullscreen-map-warp-btn:hover {
  background: #ffe34d;
}

.fullscreen-map-warp-btn.secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.fullscreen-map-warp-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* The hint makes way for the pin panel */
#fullscreen-map-overlay:has(#fullscreen-map-warp:not([hidden]))
  .fullscreen-map-hint {
  display: none;
}

/* hidden overrides the panel's own display: flex */
.fullscreen-map-warp[hidden],
.fullscreen-map-warp [hidden] {
  display: none;
}

.fullscreen-map-warp-cancel {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}

.fullscreen-map-warp-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Narrow screens: the coordinates get their own line */
@media (max-width: 600px) {
  .fullscreen-map-warp {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* The place takes its own lines above the buttons */
  .fullscreen-map-warp-place {
    flex-basis: 100%;
    align-items: center;
    text-align: center;
  }
  .fullscreen-map-warp-btn {
    flex: 1;
    padding: 0 10px;
  }
}

.fullscreen-map-hint {
  position: absolute;
  bottom: 112px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.5px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

@media (max-width: 600px) {
  .fullscreen-map-hint {
    display: none;
  }
}

/* The waypoint marker (waypoint.js): a small gold diamond over the spot,
   or a chevron at the screen's edge pointing the way, with the distance.
   Placed by a translate on the container; --waypoint-angle turns the chevron. */
#waypoint-indicator {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 140;
  pointer-events: none;
  will-change: transform;
}

#waypoint-indicator[hidden] {
  display: none;
}

.waypoint-mark {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -6px 0 0 -6px;
  border: 2px solid rgba(255, 215, 0, 0.85);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

#waypoint-indicator.offscreen .waypoint-mark {
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(var(--waypoint-angle, 0rad)) rotate(45deg);
}

.waypoint-distance {
  position: absolute;
  top: 10px;
  left: 0;
  transform: translateX(-50%);
  font:
    600 10px Inter,
    -apple-system,
    sans-serif;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

/* Friends flying with you (multiplayer.js): a dot in their livery colour
   with their name and distance, over their plane when it's far off and at
   the screen's edge (a chevron pointing the way) when it's out of view.
   Placed like the waypoint marker; --friend-angle turns the chevron. */
/* A soft glow round the screen's edge while scoring in tag (multiplayer.js):
   faint when within 800 m of whoever's it, brighter within 300 m */
#tag-glow {
  position: fixed;
  inset: 0;
  z-index: 138;
  pointer-events: none;
  box-shadow:
    inset 0 0 90px 10px rgba(255, 196, 64, 0.55),
    inset 0 0 22px rgba(255, 214, 102, 0.45);
  opacity: 0;
  transition: opacity 0.8s ease;
}

#tag-glow[data-level='far'] {
  opacity: 0.4;
}

#tag-glow[data-level='near'] {
  opacity: 1;
}

/* A race's countdown, big in the middle of the sky (multiplayer.js) */
#race-count {
  position: fixed;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  z-index: 140;
  pointer-events: none;
  color: #fff;
  font:
    700 64px Inter,
    -apple-system,
    sans-serif;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

#race-count[hidden] {
  display: none;
}

#race-count.race-go {
  color: #ffc23d;
}

#race-count.race-pop {
  animation: race-pop 0.35s ease-out;
}

@keyframes race-pop {
  from {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #race-count.race-pop {
    animation: none;
  }
}

#friend-markers {
  position: fixed;
  inset: 0;
  z-index: 139;
  pointer-events: none;
}

.friend-marker {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.friend-marker[hidden] {
  display: none;
}

.friend-mark {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -5px 0 0 -5px;
  border: 2px solid var(--friend-color, #fff);
  border-radius: 50%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

.friend-marker.offscreen .friend-mark {
  border-radius: 0;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(var(--friend-angle, 0rad)) rotate(45deg);
}

.friend-marker:not(.offscreen) .friend-mark {
  display: none;
}

.friend-text {
  position: absolute;
  top: 9px;
  left: 0;
  transform: translateX(var(--friend-shift, -50%));
  font:
    600 10px Inter,
    -apple-system,
    sans-serif;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.friend-marker:not(.offscreen) .friend-text {
  top: 0;
  transform: translate(var(--friend-shift, -50%), -100%);
}

.friend-it {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: #e8505b;
  color: #fff;
  text-shadow: none;
}

.friend-paused {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  text-shadow: none;
}

/* Who's it, in a game of tag (multiplayer.js). Sits centered right below
   the cockpit HUD, tracking its bottom edge without hardcoded offsets */
#tag-chip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 151;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font:
    600 12px Inter,
    -apple-system,
    sans-serif;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}

#tag-chip.mine {
  background: rgba(232, 80, 91, 0.85);
}

#tag-chip[hidden] {
  display: none;
}

/* The room you're flying in (multiplayer.js): a dot per plane and the code,
   under the HUD's left edge. Tapping it opens the room in the pause menu. */
.room-chip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 151;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font:
    600 12px Inter,
    -apple-system,
    sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.room-chip[hidden] {
  display: none;
}

/* A flight with bots has no code: just the dots */
#room-chip-code:empty {
  display: none;
}

/* The connection dropped: dimmed while getting back in */
.room-chip.room-chip-down {
  color: rgba(255, 255, 255, 0.6);
  border-style: dashed;
}

.room-chip-dots {
  display: flex;
  gap: 3px;
}

.room-chip-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* So the black livery still shows */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@media (max-width: 1024px) {
  .room-chip {
    left: max(12px, env(safe-area-inset-left, 0px));
  }
}

/* No room beside the tag chip on a phone: the tag chip says enough */
@media (max-width: 560px) {
  #cockpit-ui:has(#tag-chip:not([hidden])) .room-chip {
    display: none;
  }
}

/* The job you're on (jobs.js), in place of the cockpit readout's
   CHILL-FLIGHT line */
#job-hud {
  grid-column: span 3;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
  margin-top: 4px;
  min-width: 0;
}
#job-hud[hidden] {
  display: none;
}
#job-hud .cockpit-label {
  width: auto;
}
#job-hud .cockpit-value {
  min-width: 0;
}
.job-hud-auto {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #e74c3c;
}
.job-hud-auto[hidden] {
  display: none;
}
.job-hud-cargo {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* The dialog box (dialog.js): a pixel-art face and their words, above the
   throttle buttons. Tapping it shows more. */
#npc-dialog {
  position: fixed;
  left: 50%;
  bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px 18px;
  background: rgba(24, 18, 14, 0.9);
  border: 2px solid #e8c48a;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family:
    'Inter',
    -apple-system,
    sans-serif;
  z-index: 300;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#npc-dialog[hidden] {
  display: none;
}
/* A whole number of screen pixels per face pixel keeps them square */
#npc-portrait {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background: #f2d9a6;
  border: 2px solid #2b1d16;
  border-radius: 6px;
}
@media (max-width: 480px) {
  #npc-portrait {
    width: 64px;
    height: 64px;
  }
}
.npc-dialog-body {
  flex: 1;
  min-width: 0;
}
.npc-dialog-name {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #e8c48a;
}
.npc-dialog-text {
  min-height: 2.8em;
  font-size: 15px;
  line-height: 1.4;
}
.npc-dialog-choices {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.npc-dialog-choices[hidden],
#npc-dialog.asking .npc-dialog-next {
  display: none;
}
.npc-dialog-choices button {
  padding: 8px 14px;
  border: 1px solid #e8c48a;
  border-radius: 6px;
  background: rgba(232, 196, 138, 0.12);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.npc-dialog-choices button:hover {
  background: rgba(232, 196, 138, 0.28);
}
.npc-dialog-next {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 10px;
  color: #e8c48a;
  animation: npc-next-bob 1s ease-in-out infinite;
}
@keyframes npc-next-bob {
  50% {
    transform: translateY(3px);
  }
}

/* Zen (zen.js): hides the HUD and buttons but not the menus (pause,
   achievements, map) or the touch joystick. visibility, like ?ui=0 below, so
   layout and scripts are unaffected. */
body.zen
  :is(
    #ui-layer,
    #cockpit-ui,
    #waypoint-indicator,
    #friend-markers,
    #tag-chip,
    #tag-glow,
    #mobile-controls,
    #achievement-toast-container,
    #debug-menu,
    #debug-telemetry
  ),
body.zen
  :is(
    #ui-layer,
    #cockpit-ui,
    #waypoint-indicator,
    #friend-markers,
    #tag-chip,
    #tag-glow,
    #mobile-controls,
    #achievement-toast-container,
    #debug-menu,
    #debug-telemetry
  )
  * {
  visibility: hidden !important;
}
/* Also see-through, so nothing flashes back while a button's own transition
   (some transition all, visibility included) runs out after the fade below */
body.zen
  :is(
    #ui-layer,
    #cockpit-ui,
    #waypoint-indicator,
    #friend-markers,
    #tag-chip,
    #tag-glow,
    #mobile-controls,
    #achievement-toast-container,
    #debug-menu,
    #debug-telemetry
  ) {
  opacity: 0 !important;
}

/* Zen turning on in flight (zen.js): the HUD fades away, a group at a time,
   before the zen class hides it. */
body.zen-fading
  :is(
    #ui-layer,
    #cockpit-ui,
    #waypoint-indicator,
    #friend-markers,
    #tag-chip,
    #tag-glow,
    #mobile-controls,
    #achievement-toast-container,
    #debug-menu,
    #debug-telemetry
  ) {
  opacity: 0 !important;
  transition: opacity 1.4s ease !important;
}
body.zen-fading #mobile-controls {
  transition-delay: 0.25s !important;
}
body.zen-fading :is(#cockpit-ui, #waypoint-indicator, #friend-markers) {
  transition-delay: 0.5s !important;
}

/* How to leave zen: one line high in the sky that fades in, holds and fades
   out by itself (zen.js) */
#zen-hint {
  position: fixed;
  top: 17%;
  left: 0;
  right: 0;
  padding: 0 24px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
}
#zen-hint b {
  font-weight: 700;
}
#zen-hint.show {
  visibility: visible;
  animation: zen-hint 5.6s ease 0.4s both;
}
@keyframes zen-hint {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  11% {
    opacity: 1;
    transform: none;
  }
  73% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 768px) {
  #zen-hint {
    top: 15%;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #zen-hint.show {
    animation-name: zen-hint-still;
  }
  @keyframes zen-hint-still {
    0%,
    100% {
      opacity: 0;
    }
    11%,
    73% {
      opacity: 1;
    }
  }
}

/* ?ui=0: nothing on screen but the game view, for clean screenshots and
   recordings. visibility (not display) keeps layout and scripts unaffected;
   the renderer's canvas is the body's direct child. */
body.ui-hidden * {
  visibility: hidden !important;
}
body.ui-hidden > canvas {
  visibility: visible !important;
}
/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(./inter-latin-400-normal-CyCys3Eg.woff) format('woff');
}/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(./inter-latin-600-normal-CiBQ2DWP.woff) format('woff');
}/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./inter-latin-700-normal-Yt3aPRUw.woff2) format('woff2'), url(./inter-latin-700-normal-BLAVimhd.woff) format('woff');
}