/* The hangar: brand bar, three-column launch layout and the starter fleet.
   The centre column stacks caption, callsign, ship, PLAY and link status, so
   the ship stays on the optical centre of the viewport at every width. */

.hangar {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 0 4.3vw 24px;
  overflow: hidden;
}

.space-backdrop, .menu-vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
/* The starting sector's artwork is applied by renderMaps(); no URL lives here.
   inset is pulled in past the edges (rather than a transform: scale) so the
   blur's soft edge falls outside the viewport instead of inside it. */
/* The hangar's top corners, level with the wordmark rule: SETTINGS left, DISCOVER right. */
.hangar-corner { position: absolute; top: 24px; left: 4.3vw; z-index: 1; display: flex; gap: 8px; }
.hangar-corner-right { left: auto; right: 4.3vw; }
/* Server ping badges (destination card and gallery): colour follows quality. */
.destination-ping, .sector-ping { --ping: #8ea6bd; }
[data-quality='good'].destination-ping, [data-quality='good'].sector-ping { --ping: #78ddb5; }
[data-quality='fair'].destination-ping, [data-quality='fair'].sector-ping { --ping: #f2c46d; }
[data-quality='poor'].destination-ping, [data-quality='poor'].sector-ping { --ping: #ff8a66; }
.region-code {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding: 2px 4px;
  border: 1px solid #7ea6c055;
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #d9ecfa;
}
.space-backdrop { inset: -3%; background: #08111f center/cover no-repeat; transition: background-image .4s; filter: blur(4px); }
.menu-vignette {
  z-index: -1;
  background:
    linear-gradient(90deg, #050b16a8, #050b1620 45%, #050b1680),
    linear-gradient(0deg, #060c17 0%, #060c1799 22%, transparent 68%, #060c1755);
}

/* --- Brand bar --------------------------------------------------------- */

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2.5vw, 44px);
  flex-shrink: 0;
  height: 132px;
}
.topbar::before, .topbar::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, #92badf52);
}
.topbar::after { transform: scaleX(-1); }
.nebula-brand { display: block; width: clamp(220px, 29vw, 380px); line-height: 0; }
.nebula-brand img { display: block; width: 100%; height: auto; }

/* --- Three-column layout ----------------------------------------------- */

.menu-layout {
  display: grid;
  grid-template-columns: minmax(190px, 248px) minmax(0, 1fr) minmax(175px, 225px);
  align-items: center;
  gap: clamp(22px, 4vw, 72px);
  flex: 1;
  width: 100%;
  max-width: 1660px;
  margin: auto;
  padding: 25px 0 18px;
}

/* --- Left: game modes -------------------------------------------------- */

/* A radio group of mode cards: the mode's artwork fills the card, with the
   name and tagline over it and the free seats in the bottom-left corner. */
.menu-modes { align-self: center; padding-bottom: 0; }
/* Same type as the CHOOSE YOUR ORIGIN heading (.fleet-heading). */
.mode-label { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: var(--label-sm); letter-spacing: 1.5px; color: #a4b7ce; }
.mode-label span:last-child { color: #4f6680; }
/* Four cards fill the height three 112px cards (and their gaps) used to, so the
   column, the tallest in the hangar, never pushes the page into scrolling. */
.modes { display: flex; flex-direction: column; gap: 8px; }
.mode-card {
  --mode-color: #80e3fa;
  position: relative;
  display: block;
  width: 100%;
  height: 99px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #07121e;
  text-align: left;
  transition: border-color .25s, box-shadow .25s;
}
.mode-card:hover { border-color: color-mix(in srgb, var(--mode-color) 45%, transparent); }
.mode-card.selected {
  border-color: color-mix(in srgb, var(--mode-color) 70%, transparent);
  box-shadow: 0 8px 32px #0004, 0 0 26px color-mix(in srgb, var(--mode-color) 16%, transparent);
}
/* Artwork, or a tint in the mode's colour until (or unless) it arrives. */
.mode-art {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--mode-color) 28%, transparent), transparent 70%), #0a1523;
  pointer-events: none;
}
.mode-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .55; transition: opacity .25s, transform .35s; }
.mode-card:hover .mode-art img { opacity: .75; transform: scale(1.035); }
.mode-card.selected .mode-art img { opacity: .9; }
/* A dark wash from the left keeps the text legible on any artwork. */
.mode-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #040a14e6 0%, #040a14a6 45%, #040a1426 100%), linear-gradient(0deg, #040a14b3 0%, transparent 45%); }
.mode-card.selected::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 0;
  width: 2px;
  height: 30px;
  background: var(--mode-color);
  box-shadow: 0 0 16px var(--mode-color);
}
.mode-copy { position: absolute; top: 15px; left: 15px; right: 15px; text-shadow: 0 1px 6px #000c; }
.mode-copy strong { display: block; font-size: var(--label-md); font-weight: 500; letter-spacing: 1.4px; color: #cfdceb; transition: color .25s; }
.mode-card.selected .mode-copy strong { color: #ffffff; }
.mode-copy small { display: block; margin-top: 5px; overflow: hidden; font-size: var(--label-sm); line-height: 1.4; color: #b3c4d6; white-space: nowrap; text-overflow: ellipsis; }
.mode-live { position: absolute; left: 15px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 8px; letter-spacing: 1px; color: #9fb3c8; text-shadow: 0 1px 4px #000c; white-space: nowrap; }
.mode-live.active { color: #9fe3c4; }
.mode-live i { width: 5px; height: 5px; border-radius: 50%; background: #78ddb5; box-shadow: 0 0 8px #5ddaad; animation: mode-live 1.8s ease-in-out infinite; }
@keyframes mode-live { 50% { opacity: .45; } }

/* --- Centre: callsign, ship and launch --------------------------------- */

.menu-launch {
  align-self: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding-bottom: 5px;
}

.stage-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: -38px;
  margin-bottom: 14px;
  font-size: 14px;
  letter-spacing: 2.6px;
  color: #91acc5;
  white-space: nowrap;
}
.caption-rule { width: 26px; height: 1px; background: #47677f; }
#sector-name { display: inline-flex; align-items: center; gap: 11px; }
#sector-name b { font-weight: 500; color: var(--mode-color); text-shadow: 0 0 18px color-mix(in srgb, var(--mode-color) 45%, transparent); }

/*
 * The callsign reads as a simple label over the artwork: a soft crossfaded
 * fill with no card edges, just the single rule under the input itself.
 */
.pilot-tag {
  --tag-fade: radial-gradient(112% 155% at 50% 50%, #000 0%, #000 44%, #000000a8 72%, transparent 100%);
  position: relative;
  z-index: 1;
  width: min(330px, 82%);
  margin-bottom: -6px;
  padding: 13px 22px 15px;
  background: linear-gradient(180deg, #01050c73, #0206107d);
  mask-image: var(--tag-fade);
  -webkit-mask-image: var(--tag-fade);
  text-align: center;
}
.pilot-tag input {
  width: 100%;
  min-width: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid #7ea6c033;
  background: none;
  color: #f1f8ff;
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: .4px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.pilot-tag input::placeholder { font-family: var(--font-ui); font-size: 16px; color: #93a9b8; }
.pilot-tag input:focus-visible { outline: none; }
.pilot-tag:focus-within input { border-bottom-color: #88d4ff; box-shadow: 0 6px 18px -10px #73caff; }

.ship-stage {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 210px;
  max-height: 470px;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 20px #0006);
  /* The hero is painted once per selection; the slow hover is composited. */
  animation: hero-bob 4.8s ease-in-out infinite alternate;
}
@keyframes hero-bob { from { transform: translateY(-1%); } to { transform: translateY(1%); } }
.stage-orbit {
  position: absolute;
  top: 59%;
  left: 4%;
  width: 92%;
  height: 25%;
  border: 1px solid #84cbf035;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.stage-orbit::before {
  content: '';
  position: absolute;
  inset: 10px 18px;
  border: 1px dashed #84cbf025;
  border-radius: 50%;
}

.menu-launch > .play-button {
  width: min(440px, 100%);
  height: 76px;
  margin: 9px 0 0;
  padding: 0 31px;
  border-radius: 5px;
  box-shadow: 0 8px 40px #4daee42b;
  font-size: 25px;
  letter-spacing: 8px;
  text-indent: 8px;
}
.menu-launch > .play-button.compact { font-size: 19px; letter-spacing: 2px; text-indent: 0; }
/* Launch art still downloading: a dark track the PLAY gradient fills as bytes land. */
.menu-launch > .play-button.is-downloading {
  --progress: 0%;
  opacity: 1;
  cursor: progress;
  border-color: #3b7ea8;
  background: linear-gradient(110deg, #2c6f9c, #3f93c4) no-repeat 0 0 / var(--progress) 100%, #0b1b2a;
  box-shadow: none;
  color: #dff4ff;
  font-size: 18px;
  letter-spacing: 3px;
  text-indent: 3px;
  font-variant-numeric: tabular-nums;
  transition: background-size .3s ease;
}
.menu-launch .inline-error { max-width: 440px; line-height: 1.6; text-align: center; }
/* Label/value pairs spaced apart rather than joined by separators. */
.last-flight { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin-top: 14px; font-size: 10px; line-height: 1.7; color: #b5cddd; }
.last-flight b { margin-left: 6px; font-weight: 600; color: #e6f3fc; }
.last-flight strong { color: var(--gold); font-weight: 500; white-space: nowrap; }
.last-flight + .last-flight { margin-top: 6px; color: #94a9c4; }

/* --- Right: selected ship and destination ------------------------------ */

.menu-details { align-self: center; min-width: 0; padding-bottom: 30px; }
.selected-ship-info h1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 11px;
  font-size: 35px;
  font-weight: 500;
  letter-spacing: -1px;
}
.selected-ship-info h1 span {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: #5f7d99;
}
.selected-ship-info p { margin: 0 0 21px; font-size: 11px; line-height: 1.8; color: #8da3ba; }
.menu-details .ship-specs { width: 100%; gap: 12px; }
.menu-details .spec { grid-template-columns: 74px 1fr; }
.menu-details .ship-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 16px; }
.menu-details .text-button { font-size: var(--label-sm); }

.map-heading {
  display: flex;
  justify-content: space-between;
  margin-top: 27px;
  font-size: 7px;
  letter-spacing: 1px;
  color: #8fa5bd;
}
.map-heading span:last-child { color: #4f6680; }
.map-options { margin-top: 10px; }
.destination-card {
  position: relative;
  width: 100%;
  height: 116px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sector-color), transparent 50%);
  border-radius: 4px;
  background: #07121f;
  text-align: left;
}
.destination-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--map-image) center/cover;
  opacity: .68;
  transition: opacity .2s;
}
.destination-card:hover::before { opacity: .88; }
.destination-card:disabled { cursor: default; opacity: .6; }
.destination-card > strong, .destination-card > small { position: relative; display: block; }
.destination-card > strong { font-size: 13px; font-weight: 500; text-shadow: 0 2px 8px #000; }
.destination-foot { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.destination-card small { margin-top: 5px; font-size: var(--label-sm); letter-spacing: 1px; color: #cfe0ee; text-shadow: 0 2px 6px #000; }
.change-sector {
  font-size: 7px;
  letter-spacing: 1.2px;
  color: var(--sector-color);
  text-shadow: 0 2px 6px #000;
}

/* Region code, signal bars and ping. */
.destination-ping, .sector-ping { display: inline-flex; align-items: center; gap: 6px; text-shadow: 0 1px 6px #000; }
.destination-ping .region-code, .sector-ping .region-code { background: #07111cbb; }
.region-signal { display: flex; align-items: flex-end; gap: 2px; height: 12px; filter: drop-shadow(0 1px 3px #000); }
.region-signal i { width: 3px; border-radius: 1px; background: #8fa9c055; }
.region-signal i:nth-child(1) { height: 4px; } .region-signal i:nth-child(2) { height: 8px; } .region-signal i:nth-child(3) { height: 12px; }
.region-signal i.on { background: var(--ping); box-shadow: 0 0 6px var(--ping); }
.region-ping { font-size: var(--label-sm); font-weight: 500; letter-spacing: .6px; font-variant-numeric: tabular-nums; color: var(--ping); }
.sector-ping { position: absolute; z-index: 1; left: 9px; bottom: 9px; padding: 4px 6px; border: 1px solid #aacde13d; border-radius: 3px; background: #07111cbb; }
.sector-ping .region-code { padding: 0 2px; border: 0; background: none; }

/* Sector gallery inside the destination dialog. */
.sector-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; padding: 10px 0 7px; }
.sector-option {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #7693b13b;
  border-radius: 6px;
  background: #0b1625;
  text-align: left;
}
.sector-option:hover, .sector-option.selected { border-color: var(--sector-color); box-shadow: 0 0 24px #76b7ed12; }
.sector-option.selected .sector-copy strong { color: var(--sector-color); }
.sector-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #050b16; }
.sector-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #04091277, transparent 60%);
  pointer-events: none;
}
.sector-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s, opacity .4s; }
/* Thumbnails still streaming in the background shimmer until their bytes land. */
.sector-art.is-loading img { opacity: 0; }
.sector-art.is-loading {
  background: linear-gradient(100deg, #07101d 30%, #12233a 50%, #07101d 70%) 0 0 / 250% 100%;
  animation: sector-shimmer 1.3s linear infinite;
}
@keyframes sector-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.sector-option:hover img { transform: scale(1.04); }
.sector-code, .sector-selected {
  position: absolute;
  z-index: 1;
  padding: 5px 6px;
  border: 1px solid #aacde13d;
  border-radius: 3px;
  background: #07111cbb;
  font-size: 7px;
  letter-spacing: 1px;
}
.sector-code { top: 9px; left: 9px; color: #c3daec; }
.sector-selected { right: 9px; bottom: 9px; color: var(--sector-color); }
.sector-copy { padding: 13px 12px 15px; }
.sector-copy strong { display: block; font-size: 13px; font-weight: 500; color: #dce9f5; }
.sector-copy small { display: block; margin-top: 6px; font-size: var(--label-md); line-height: 1.6; color: #8ba4bc; }

/* --- Starter fleet ----------------------------------------------------- */

.fleet-section { max-width: 1120px; width: 100%; margin: 20px auto 0; }
.fleet-wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 21px;
  padding: 8px 22px;
  border: 1px solid #d9be7b24;
  border-radius: 30px;
  background: #101b2773;
}
.fleet-wallet strong { font-size: 21px; font-weight: 500; color: #f0d9a4; }
.fleet-wallet > span:last-child { font-size: var(--label-sm); letter-spacing: var(--track-md); color: #b9ad8e; }

.fleet-heading {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 13px;
  font-size: var(--label-sm);
  letter-spacing: 1.5px;
  color: #a4b7ce;
}
.fleet-note { margin-left: auto; font-size: var(--label-md); letter-spacing: .4px; color: #667d98; text-transform: none; }

.fleet-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fleet-card {
  position: relative;
  display: flex;
  align-items: center;
  height: 112px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #7693b129;
  border-radius: 5px;
  background: linear-gradient(120deg, #15233799, #0b142077);
  text-align: left;
}
.fleet-card:hover { border-color: #88b9de8c; background: #213c5355; }
.fleet-card.selected {
  border-color: #93d8ff96;
  background: linear-gradient(100deg, #24435e88, #101c2c99);
  box-shadow: 0 0 25px #2581bb10;
}
.fleet-card.selected::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 2px;
  background: #a5e3ff;
  box-shadow: 0 0 15px #72d1fb;
}
.fleet-card canvas { flex-shrink: 0; width: 80px; height: 87px; object-fit: contain; }
.fleet-card.locked canvas { opacity: .65; }
.fleet-card > div { position: relative; }
.fleet-index { position: absolute; top: 9px; right: 9px; font-size: 7px; letter-spacing: 1px; color: #63819e; }
.fleet-card h3 { margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .5px; }
.fleet-card p { margin: 0; font-size: var(--label-sm); letter-spacing: .4px; color: #758ca4; }
.ship-price { margin-top: 9px; font-size: var(--label-sm); color: #d7bd87; }
.ship-owned { margin-top: 9px; font-size: 7px; letter-spacing: 1px; color: #8ccdc8; }

/* --- Label typography -------------------------------------------------- */

/* Labels, captions and buttons share the in-game HUD face and weight.
   Sentences and small index numbers stay in the UI face for legibility. */
.mode-label, .mode-card strong, .mode-card small, .mode-live, .stage-caption, .pilot-tag input::placeholder,
.last-flight, .menu-details .spec > span, .menu-details .text-button, .map-heading,
.destination-card strong, .destination-card small, .change-sector, .sector-code, .sector-selected, .region-code,
.sector-copy strong, .fleet-wallet > span:last-child, .fleet-heading > span:first-child,
.fleet-card p, .ship-price, .ship-owned {
  font-family: var(--font-display);
  font-weight: 500;
}

/* --- Screen transitions ------------------------------------------------ */

.hangar.crossfade-enter { animation: hangar-in .8s ease-in-out both; pointer-events: none; }
#arena.crossfade-exit { animation: arena-out .8s ease-in-out both; pointer-events: none; }
@keyframes hangar-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes arena-out { from { opacity: 1; } to { opacity: 0; } }

/* --- Responsive -------------------------------------------------------- */

@media (min-width: 1600px) {
  .ship-stage { max-height: 500px; }
  .fleet-card { height: 118px; }
  .fleet-card canvas { width: 92px; height: 92px; }
  .fleet-card h3 { font-size: 13px; }
}
@media (max-width: 1150px) {
  .menu-layout { grid-template-columns: 190px minmax(0, 1fr) 180px; gap: 23px; }
  .mode-card { height: 93px; }
  .stage-caption { font-size: 12px; letter-spacing: 1.8px; gap: 8px; }
  .fleet-card canvas { width: 65px; height: 73px; }
  .fleet-card p { font-size: 7px; }
}
@media (max-width: 900px) {
  .hangar { padding: 0 22px 20px; overflow: hidden auto; }
  .sector-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-layout { grid-template-columns: 155px minmax(0, 1fr) 155px; gap: 14px; padding-top: 22px; }
  .ship-stage { max-height: 330px; }
  .menu-layout { grid-template-columns: 165px minmax(0, 1fr) 155px; }
  .mode-card { height: 86px; }
  .mode-copy { top: 12px; left: 11px; right: 11px; }
  .mode-copy strong { font-size: var(--label-sm); letter-spacing: 1px; }
  .mode-live { left: 11px; bottom: 10px; }
  .selected-ship-info h1 { font-size: 29px; }
  .selected-ship-info h1 span { font-size: 15px; }
  .selected-ship-info p { font-size: 10px; }
  .menu-details .spec { grid-template-columns: 60px 1fr; gap: 6px; }
  .menu-details .text-button { font-size: 7px; }
  .pilot-tag { width: 88%; padding: 10px 14px 12px; }
  .pilot-tag input { font-size: 18px; }
  .pilot-tag input::placeholder { font-size: 13px; }
  .stage-caption { flex-wrap: wrap; line-height: 1.6; white-space: normal; }
  .menu-launch > .play-button { height: 65px; padding: 0 19px; font-size: 21px; }
  .fleet-card { flex-direction: column; height: 144px; align-items: center; }
  .fleet-card canvas { width: 85px; height: 76px; }
  .fleet-card > div { padding: 0; text-align: center; }
  .ship-price { font-size: 7px; }
}
@media (max-width: 680px) {
  .menu-layout { grid-template-columns: 126px minmax(0, 1fr); gap: 17px; }
  .menu-modes { padding-bottom: 0; }
  .mode-card { height: 74px; }
  .mode-copy small { display: none; }
  .ship-stage { max-height: 300px; }
  .menu-details {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 22px;
    padding: 15px 0 0;
    border-top: 1px solid var(--line);
  }
  .selected-ship-info { grid-row: span 2; }
  .selected-ship-info p { max-width: 250px; margin-bottom: 0; }
  .menu-details .ship-actions { margin: 0; }
  .map-heading { grid-column: 1 / -1; margin: 5px 0 -5px; }
  .map-options { grid-column: 1 / -1; margin: 0; }
  .fleet-grid { grid-template-columns: repeat(5, minmax(115px, 1fr)); padding-bottom: 10px; overflow-x: auto; }
  .fleet-section { margin-top: 17px; }
}
@media (max-width: 560px) {
  .sector-gallery { gap: 10px; }
  .sector-copy { padding: 10px; }
  .sector-copy strong { font-size: 12px; }
  .sector-copy small { font-size: var(--label-sm); }
  .topbar { height: 100px; gap: 10px; }
  .nebula-brand { width: min(62vw, 280px); }
  /* SETTINGS and DISCOVER turn into a stack of icons beside the wordmark; the labels stay for screen readers. */
  .hangar-corner { top: 16px; flex-direction: column; }
  .hangar-corner .corner-button { padding: 7px; }
  .hangar-corner .corner-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fleet-wallet { margin-bottom: 16px; }
  .menu-layout { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding-top: 20px; }
  .mode-card { height: 66px; }
  .mode-copy { top: 10px; left: 9px; right: 9px; }
  .mode-copy strong { letter-spacing: .7px; }
  .mode-live { left: 9px; bottom: 9px; }
  .ship-stage { max-height: 260px; }
  .stage-caption { gap: 6px; font-size: 11px; letter-spacing: 1.4px; }
  .caption-rule { width: 16px; }
  .pilot-tag { width: 94%; padding: 9px 10px 11px; }
  .pilot-tag input { font-size: 17px; }
  .pilot-tag input::placeholder { font-size: 12px; }
  .menu-launch > .play-button { height: 61px; padding: 0 15px; font-size: 20px; letter-spacing: 5px; text-indent: 5px; }
  .last-flight { font-size: var(--label-sm); }
  .last-flight strong { display: block; margin: 3px 0 0; }
}
/* Height-based compaction is declared last so it wins over the width blocks. */
/* Short windows (laptops at 1366x768 and below, or a half-height browser). */
@media (max-height: 850px) and (min-width: 901px) {
  .topbar { height: 106px; }
  .nebula-brand { width: clamp(220px, 25vw, 310px); }
  .fleet-wallet { margin-bottom: 14px; padding-top: 6px; padding-bottom: 6px; }
  .menu-layout { gap: 32px; padding-top: 18px; }
  .stage-caption { margin-bottom: 10px; }
  .pilot-tag { padding: 10px 18px 12px; }
  .ship-stage { max-height: 340px; }
  .menu-launch > .play-button { height: 66px; }
  .menu-modes, .menu-details { padding-bottom: 0; }
  .map-heading { margin-top: 20px; }
  .fleet-section { margin-top: 9px; }
  .fleet-card { height: 94px; }
  .fleet-card canvas { width: 72px; height: 78px; }
}
@media (max-height: 760px) {
  .topbar { height: 84px; }
  .menu-layout { padding: 14px 0 12px; }
  .stage-caption { margin-bottom: 9px; }
  .pilot-tag { padding: 9px 16px 11px; }
  .pilot-tag input { font-size: 18px; }
  .ship-stage { min-height: 170px; }
  .menu-launch > .play-button { height: 58px; font-size: 21px; }
  .fleet-wallet { margin-bottom: 10px; }
  .fleet-section { margin-top: 6px; }
  .fleet-card { height: 86px; }
  .fleet-card canvas { width: 62px; height: 68px; }
}
/* Short and wide (the phone app lays out at about 1300x590): the 25vw logo would
   outgrow the 84px bar and run into the caption below it. */
@media (max-height: 760px) and (min-width: 901px) {
  .nebula-brand { width: clamp(220px, 20vw, 240px); }
}
@media (max-height: 660px) {
  .hangar { overflow: hidden auto; } /* Down only: the backdrop reaches past the sides on purpose. */
}
@media (prefers-reduced-motion: reduce) {
  .hangar.crossfade-enter, #arena.crossfade-exit { animation: none; }
}
/* Android app: the hangar keeps clear of the camera cutout (see tokens.css), and the
   origins open in a dialog from a tap on the ship (app.js), so the hangar fits the
   screen without scrolling; a hint just over PLAY says so. */
.ship-hint { display: none; }
html.is-app .ship-hint { display: block; position: absolute; right: 0; bottom: 4px; left: 0; margin: 0; font-family: var(--font-display); font-size: var(--label-sm); font-weight: 500; letter-spacing: var(--track-md); text-align: center; color: #8fb3cf; pointer-events: none; }
html.is-app .ship-stage { cursor: pointer; }
html.is-app .hangar .fleet-heading, html.is-app .hangar .fleet-grid { display: none; }
html.is-app .hangar { padding-left: calc(4.3vw + var(--cutout-left)); padding-right: calc(4.3vw + var(--cutout-right)); }
html.is-app .hangar-corner { left: calc(4.3vw + var(--cutout-left)); }
html.is-app .hangar-corner-right { left: auto; right: calc(4.3vw + var(--cutout-right)); }
/* The app's hangar is exactly one screen and never scrolls: the mode cards (the
   tallest column) and the spacing round the edges give up the last few pixels. */
html.is-app, html.is-app body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.is-app .hangar { height: 100svh; min-height: 0; padding-bottom: 12px; overflow: hidden; }
html.is-app .menu-layout { padding: 10px 0 6px; }
html.is-app .mode-card { height: 76px; }
html.is-app .mode-copy { top: 12px; }
html.is-app .mode-live { bottom: 10px; }
html.is-app .fleet-wallet { margin-bottom: 0; }