/* The menu owns its canvas; no starfield work survives entry into gameplay. */
#loading-overlay {
  background: #030303;
  color: #f4f4f4;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  overflow: auto;
  box-sizing: border-box;
  height: 100dvh;
  grid-template-rows: minmax(min-content, 1fr) auto;
  gap: 28px;
  padding: max(28px, env(safe-area-inset-top)) max(clamp(22px, 5vw, 72px), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(clamp(22px, 5vw, 72px), env(safe-area-inset-left));
  isolation: isolate;
  transition: opacity 220ms ease;
}
#menu-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
#loading-overlay::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 0%, rgba(0,0,0,.3) 48%, #000 100%);
}
.menu-top, .menu-bottom {
  position: absolute; left: clamp(22px, 5vw, 72px); right: clamp(22px, 5vw, 72px);
  display: flex; justify-content: space-between; align-items: center;
  color: #777; font: 10px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .15em; text-transform: uppercase;
}
.menu-top { top: 32px; padding-bottom: 16px; border-bottom: 1px solid #ffffff14; }
.menu-top span:first-child { color: #b5b5b5; }
.menu-bottom { position: static; width: 100%; gap: 20px; flex-wrap: wrap; }
.menu-bottom kbd { color: #b7b7b7; font: inherit; letter-spacing: .06em; }
#loading-panel { width: min(400px, calc(100vw - 48px)); margin: 48px 0; text-align: center; }
#loading-title { margin: 0 0 24px; width: min(680px, calc(100vw - 32px)); margin-left: 50%; transform: translateX(-50%); }
.ascii-logo { display: block; width: max-content; margin: auto; text-align: left; white-space: pre; font: normal clamp(7px, 2.1vw, 14px)/1.08 "Courier New", monospace; letter-spacing: 0; color: #eee; text-shadow: 0 0 24px #ffffff18; }
.menu-tagline { margin: 0 0 47px; font: 10px/1.5 ui-monospace, Consolas, monospace; color: #858585; letter-spacing: .3em; text-transform: uppercase; }
#arena-population { min-height: 20px; margin: 0 0 35px; font: 12px/1.5 ui-monospace, Consolas, monospace; color: #888; }
#arena-population[data-state="live"]::before { content: ""; display: inline-block; width: 4px; height: 4px; background: #eee; box-shadow: 0 0 8px #ffffff70; border-radius: 50%; margin: 0 9px 2px 0; }
#player-name-form { display: none; grid-template-columns: 1fr; gap: 12px; margin: 0; text-align: left; }
#player-name-form.visible { display: grid; }
.pilot-label { margin-left: 1px; color: #aaa; font: 10px/1.5 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .19em; }
#player-name-input { box-sizing: border-box; border-radius: 0; outline: none; width: 100%; height: 54px; padding: 0 18px; border: 1px solid #ffffff30; background: #0a0a0ad9; border-radius: 0; color: #fff; font: 15px ui-monospace, Consolas, monospace; transition: border-color 150ms, background 150ms; }
#player-name-input::placeholder { color: #595959; }
#player-name-input:focus { border-color: #d2d2d2; background: #111; box-shadow: 0 0 0 1px #ffffff14; }
#player-name-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 54px; margin-top: 4px; padding: 0 20px; border: 1px solid #fff; border-radius: 0; background: #f0f0f0; color: #080808; font: 600 11px ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; transition: background 150ms, transform 150ms, opacity 150ms; }
#player-name-submit::after { content: "[ ENTER ]"; font: 10px ui-monospace, Consolas, monospace; }
#player-name-submit:not(:disabled):hover { background: #fff; transform: translateY(-1px); }
#player-name-submit:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#player-name-submit:disabled { background: #9c9c9c; color: #333; border-color: #9c9c9c; cursor: not-allowed; opacity: .7; }
#ship-selector { position: relative; min-width: 0; margin: 6px 0 0; padding: 0; border: 0; }
#ship-selector legend { padding: 0; margin-bottom: 10px; }
#ship-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ship-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 66px; padding: 5px 2px; border: 1px solid #ffffff20; border-radius: 0; background: #080808d9; color: #999; cursor: pointer; }
.ship-option:hover { border-color: #ffffff70; background: #151515; color: #eee; }
.ship-option[aria-checked="true"] { border-color: #ddd; background: #191919; color: #fff; box-shadow: inset 0 -2px #ddd; }
.ship-option:focus-visible { outline: 1px solid white; outline-offset: 2px; }
.ship-option-name { white-space: nowrap; font: 10px/1.3 ui-monospace, Consolas, monospace; }
.ship-option-name > span { color: #666; margin-right: 2px; }
.ship-sprite { display: block; flex-shrink: 0; width: 36px; height: 36px; background: url("zubspace_ships.png") no-repeat; background-size: 800% 100%; background-position: calc(var(--ship-index) * 100% / 7) 0; image-rendering: pixelated; }
#ship-preview { position: absolute; z-index: 12; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: min(360px, calc(100vw - 56px)); padding: 18px; border: 1px solid #ffffff50; background: #0a0a0af5; box-shadow: 0 14px 45px #000b; pointer-events: none; }
#ship-preview[hidden] { display: none; }
.ship-sprite-large { width: 108px; height: 108px; }
.ship-preview-number { margin: 0 0 6px; font-size: 9px; letter-spacing: .15em; color: #777; }
#ship-preview h2 { margin: 0 0 8px; font-size: 16px; font-weight: 400; color: #eee; }
.ship-preview-description { margin: 0; font-size: 11px; line-height: 1.6; color: #bbb; }
#loading-overlay[data-device="desktop"] #loading-panel { width: min(440px, calc(100vw - 48px)); margin: 12px 0; }
#loading-overlay[data-device="desktop"] #loading-title { margin-bottom: 18px; }
#loading-overlay[data-device="desktop"] .menu-tagline { margin-bottom: 20px; }
#loading-overlay[data-device="desktop"] #arena-population { margin-bottom: 20px; }
#loading-identity-text { min-height: 16px; margin: 13px 0 0; color: #777; font: 10px/1.5 ui-monospace, Consolas, monospace; }
#loading-panel:not(.launching) #loading-progress-track, #loading-panel:not(.launching) #loading-progress-text { display: none; }
#loading-progress-track { margin-top: 30px; height: 2px; border: 0; background: #ffffff1c; }
#loading-progress-bar { height: 100%; background: #fff; transition: width 150ms; }
#loading-progress-text { margin-top: 12px; color: #999; font: 10px ui-monospace, Consolas, monospace; }
#service-status { color: #777; z-index: 3; }
#service-status[hidden] { display: none; }
@media (max-width: 520px) {
  .menu-top { top: 24px; font-size: 8px; letter-spacing: .1em; }
  .menu-bottom { font-size: 10px; letter-spacing: .05em; }
  .menu-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
  .menu-bottom .menu-meta { align-self: flex-end; }
  .menu-tagline { font-size: 8px; letter-spacing: .22em; }
}
@media (max-height: 650px) {
  #loading-panel { margin: 24px 0; width: min(350px, calc(100vw - 48px)); }
  .menu-tagline { margin-bottom: 25px; }
  #arena-population { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #loading-overlay, #player-name-input, #player-name-submit, #loading-progress-bar { transition: none; }
}

.menu-controls { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-controls-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; color: #aaa; font-size: 14px; line-height: 1.7; letter-spacing: .02em; text-transform: none; }
.menu-controls-text > span { white-space: nowrap; }
.menu-controls-text kbd { color: #ddd; font-weight: 600; }
.menu-controls-text .controls-separator { color: #555; }
#controls-open { padding: 6px 8px; min-height: 44px; max-width: 100%; border: 1px solid transparent; background: transparent; color: #aaa; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 140ms, border-color 140ms; }
.controls-launch-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid #ffffff30; background: #080808; transition: color 140ms, border-color 140ms; }
#controls-open:hover, #controls-open:focus-visible, #controls-open:active { background: #ffffff0b; border-color: #ffffff20; }
#controls-open:hover .controls-launch-icon, #controls-open:focus-visible .controls-launch-icon, #controls-open:active .controls-launch-icon { color: #fff; border-color: #aaa; }
#controls-open:focus-visible, #controls-close:focus-visible, .keyboard-scroll:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
#controls-dialog, #credits-dialog { box-sizing: border-box; width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 30px; border: 1px solid #ffffff45; background: #090909; color: #ddd; font: 12px/1.6 ui-monospace, Consolas, monospace; box-shadow: 0 24px 100px #000; }
#controls-dialog::backdrop, #credits-dialog::backdrop { background: #000c; }
.controls-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.controls-eyebrow { color: #777; font-size: 9px; letter-spacing: .18em; margin: 0 0 8px; }
#controls-title, #credits-title { margin: 0; color: #fff; font-size: 22px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
#controls-close, #credits-close { align-self: flex-start; padding: 8px; border: 0; background: transparent; color: #bbb; font: inherit; cursor: pointer; white-space: nowrap; }
#credits-dialog { width: min(560px, calc(100vw - 32px)); }
.credits-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid #ffffff20; }
.credits-section h3 { color: #eee; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.credits-section p { color: #aaa; font-size: 13px; line-height: 1.9; margin: 10px 0; }
.credits-section strong { color: #ddd; font-weight: 500; }
.credits-section p a { color: inherit; text-decoration-color: #777; text-underline-offset: 4px; }
.credits-section p a:hover { color: #fff; }
.credits-section p a:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.credits-source { display: inline-block; padding: 12px 0; color: #eee; text-underline-offset: 5px; }
#credits-open { border: 0; background: transparent; padding: 0; font: inherit; letter-spacing: inherit; cursor: pointer; }
#credits-open:focus-visible, #credits-close:focus-visible, .credits-source:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
#credits-close { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) { #credits-dialog { padding: 20px; } }
#controls-description { color: #999; margin: 16px 0 28px; }
.keyboard-scroll { overflow-x: auto; padding: 2px 2px 16px; }
.flight-keyboard { display: flex; align-items: flex-end; gap: 22px; min-width: 940px; }
.main-keyboard { flex: 1; display: grid; gap: 8px; }
.keyboard-row { display: flex; gap: 5px; }
.flight-key { box-sizing: border-box; display: flex; flex: 1; min-width: 0; height: 52px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid #ffffff60; border-bottom: 3px solid #ffffff50; border-radius: 3px; background: linear-gradient(#222, #151515); }
.flight-key kbd { font: 13px/1 ui-monospace, Consolas, monospace; color: #fff; }
.key-label { position: relative; color: #bbb; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.key-label::before { content: ""; display: block; width: 1px; height: 5px; margin: -3px auto 3px; background: #777; }
.ghost-key { border-color: #ffffff0d; background: #0d0d0d; }
.wide-key { flex: 1.7; }
.space-key { flex: 6; }
.arrow-keyboard { width: 181px; flex-shrink: 0; padding-bottom: 0; }
.arrow-keyboard > p { color: #888; font-size: 9px; text-align: center; letter-spacing: .2em; margin-bottom: 14px; }
.arrow-top { display: flex; justify-content: center; margin-bottom: 5px; }
.arrow-top .flight-key { flex: none; width: 57px; }
.arrow-keyboard .flight-key { border-color: #ccc; background: #272727; }
.controls-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid #ffffff20; margin-top: 8px; padding-top: 18px; }
.controls-notes p { margin: 0; color: #999; font-size: 10px; }
.controls-notes kbd { display: block; color: #eee; font: 11px/2 ui-monospace, Consolas, monospace; }
.controls-footnote { margin: 22px 0 0; color: #888; font-size: 10px; }
@media (max-width: 700px) {
  #controls-dialog { padding: 20px; }
  #controls-title { font-size: 18px; }
  .controls-notes { grid-template-columns: repeat(2, 1fr); }
  .menu-controls { gap: 9px; }
  .menu-controls-text { max-width: 290px; font-size: 12px; gap: 2px 7px; }
}

#menu-build { flex-shrink: 0; color: #777; font-size: 11px; letter-spacing: .06em; text-transform: none; white-space: nowrap; }

.menu-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 12px; margin-left: auto; color: #555; font-size: 11px; letter-spacing: .03em; text-transform: none; }
.menu-meta a, .menu-meta button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: #aaa; text-decoration: none; }
.menu-meta a:hover, .menu-meta button:hover { color: #fff; }
.menu-meta a:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }
#mobile-join-message { border: 1px solid #ffffff30; background: #090909b3; padding: 22px 16px; }
#mobile-join-title { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; color: #eee; }
#mobile-join-message p { margin: 12px 0 0; color: #999; font-size: 12px; line-height: 1.8; }
#loading-overlay[data-device="mobile"] #loading-identity-text { display: none; }
#loading-overlay[data-device="mobile"] #loading-panel { margin: 28px 0; }
#loading-overlay[data-device="mobile"] .controls-launch-icon { width: 44px; height: 44px; }
#loading-overlay[data-device="mobile"] #controls-close { min-width: 44px; min-height: 44px; }
.keyboard-scroll-hint { display: none; color: #888; font-size: 10px; }
#loading-overlay[data-device="mobile"] .keyboard-scroll-hint { display: block; }
@media (max-width: 520px) {
  #loading-overlay { gap: 20px; }
  #loading-title { width: calc(100vw - 48px); }
  .ascii-logo { font-size: clamp(6px, 2.05vw, 10px); }
  .menu-tagline { margin-bottom: 32px; }
  #arena-population { margin-bottom: 26px; }
  .menu-controls-text { gap: 4px 14px; }
  .menu-controls-text .controls-separator { display: none; }
}
@media (max-height: 550px) and (min-aspect-ratio: 4/3) {
  #loading-overlay { gap: 12px; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #loading-overlay[data-device="mobile"] #loading-panel { margin: 0; }
  #loading-title { margin-bottom: 12px; }
  .ascii-logo { font-size: clamp(7px, 1.3vw, 10px); }
  .menu-tagline { margin-bottom: 16px; }
  #arena-population { margin-bottom: 16px; }
  #mobile-join-message { padding: 12px 16px; }
  #mobile-join-message p { margin-top: 6px; font-size: 11px; }
  #mobile-join-message br { display: none; }
  #controls-open { padding: 3px 6px; }
  #loading-overlay[data-device="mobile"] .controls-launch-icon { width: 36px; height: 36px; }
  .menu-bottom { gap: 12px; }
  .menu-controls-text { font-size: 12px; }
}

/* Readable full keyboard: secondary letters remain visible without competing. */
#controls-dialog { width: min(1320px, calc(100vw - 32px)); cursor: default; }
#controls-description { font-size: 15px; }
.flight-keyboard { min-width: 1150px; }
.flight-key { height: 74px; gap: 3px; }
.flight-key kbd { font-size: 16px; }
.flight-key .key-label { font-size: 12px; white-space: normal; text-align: center; }
.key-label::before { display: none; }
.ghost-key kbd { color: #666; font-size: 13px; }
.escape-row .flight-key { flex: none !important; width: 70px; height: 44px; border-color: #aaa; }
.key-green, .arrow-keyboard .key-green { border-color: #70bb87; background: #122319; }
.key-green kbd, .key-green .key-label { color: #b3edc5; }
.key-yellow { border-color: #c2a752; background: #272313; }
.key-yellow kbd, .key-yellow .key-label { color: #f1da88; }
.key-special { border-color: #648aab; background: #14202b; }
.key-special kbd, .key-special .key-label { color: #b1d7f7; }
.arrow-keyboard { width: 210px; }
.arrow-top .flight-key { flex: none !important; width: 66px; }
#controls-close { min-width: 44px; min-height: 44px; }
.control-icon { display: block; flex-shrink: 0; width: 26px; height: 24px; background-image: url(zubspace_icons.png); image-rendering: pixelated; }
.controls-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; margin: 8px 0 22px; }
.legend-green { color: #b3edc5; }
.legend-yellow { color: #f1da88; }
.legend-special { color: #b1d7f7; }
.controls-notes p, .controls-footnote { font-size: 13px; line-height: 1.7; }
.controls-notes kbd { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  #controls-open, .controls-launch-icon { transition: none; }
}