/* Retro arcade backdrop; the existing cabinet keeps its responsive columns. */
#login.overlay,
#lobby.overlay {
  background-color: #05070d;
  background-image:
    linear-gradient(rgba(3, 7, 15, 0.22), rgba(3, 7, 15, 0.22)),
    url('/images/lobby-chase-retro.webp');
  /* One continuous image fills the screen, including behind every column. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: none;
}
/*
 * A phone gets the 960px cut: under half the bytes, and a phone screen is
 * under 960 CSS px on its long edge anyway. A media query rather than
 * body.touch on purpose — the class is set by script after the first paint
 * may already have started the download, and a phone fetching both images is
 * the opposite of the point. The masters are PNGs in docs/design/art/.
 */
@media (max-width: 960px), (max-height: 540px) {
  #login.overlay,
  #lobby.overlay {
    background-image:
      linear-gradient(rgba(3, 7, 15, 0.22), rgba(3, 7, 15, 0.22)),
      url('/images/lobby-chase-retro-960.webp');
  }
}

#login .panel.cabinet,
#lobby .panel.cabinet {
  height: min(850px, 92dvh);
  max-height: 92dvh;
  background: transparent;
  border-color: rgba(154, 206, 233, 0.24);
  border-radius: 16px;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.45);
}

#login .cab-marquee,
#lobby .cab-marquee {
  min-height: clamp(200px, 32dvh, 340px);
  padding: clamp(24px, 3vw, 48px);
  border-bottom: 1px solid rgba(154, 206, 233, 0.3);
  background: linear-gradient(90deg, rgba(3, 8, 17, 0.48), rgba(3, 8, 17, 0.12) 60%, transparent);
  text-align: left;
}

#login .cab-marquee { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
#lobby .cab-marquee { align-items: flex-end; }

/* Controls occupy the upper-right header area on both lobby screens. */
#login .cab-marquee,
#lobby .cab-marquee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 20px 32px;
  align-items: end;
}
#login .cab-title,
#lobby .cab-title { grid-column: 1; min-width: 0; }
#login .cab-title { grid-row: 1 / span 2; }
#lobby #lobby-clock { grid-column: 1; justify-self: start; }
#login .flight-controls,
#lobby .flight-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  width: 100%;
  min-width: 0;
  padding: 18px 20px;
  text-align: left;
  background: rgba(5, 11, 21, 0.55);
  border: 1px solid rgba(154, 206, 233, 0.24);
  border-radius: 10px;
}
#login .flight-controls summary,
#lobby .flight-controls summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
#login .flight-controls summary::-webkit-details-marker,
#lobby .flight-controls summary::-webkit-details-marker { display: none; }
#login .flight-controls summary::after,
#lobby .flight-controls summary::after { content: '+'; color: var(--accent); font-size: 16px; }
#login .flight-controls[open] summary::after,
#lobby .flight-controls[open] summary::after { content: '−'; }
#login .flight-controls:not([open]) summary,
#lobby .flight-controls:not([open]) summary { border-bottom: none; margin: 0; padding-bottom: 0; }
#login .flight-controls summary:focus-visible,
#lobby .flight-controls summary:focus-visible { outline: 2px solid #a9f9e7; outline-offset: 3px; }
#login .flight-controls .home-controls,
#lobby .flight-controls .home-controls { margin-bottom: 0; }
#login .flight-controls .cr-keys div,
#lobby .flight-controls .cr-keys div { font-size: 11px; margin-bottom: 7px; line-height: 1.5; }
#login .flight-controls .cr-note,
#lobby .flight-controls .cr-note { font-size: 10px; line-height: 1.6; margin: 12px 0 0; }

.flight-kicker {
  color: #a3d6e0;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

#login .panel.cabinet h1 {
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: 0.025em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}
#login .panel.cabinet h1 span { display: block; }
#login .panel.cabinet h1.brand-title {
  margin: 0;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}
#login .brand-logo {
  display: block;
  width: min(100%, 340px);
  height: auto;
  opacity: 0.86;
}
#login .cab-marquee .sub { color: #cfdae8; letter-spacing: 2px; line-height: 1.6; }
#lobby .cab-marquee h2 { font-size: clamp(24px, 3vw, 42px); letter-spacing: 1px; }
#lobby .cab-marquee .sub { color: #cfdae8; line-height: 1.6; }
#lobby #lobby-clock { padding: 18px 22px; border: 1px solid rgba(77, 226, 192, 0.3); border-radius: 10px; background: rgba(4, 16, 23, 0.66); }

#login .cab-col,
#lobby .cab-col { background: rgba(5, 11, 21, 0.55); padding: clamp(20px, 2.3vw, 32px); }
#login .cab-sub,
#lobby .lobby-head { color: #a5b9d1; }
#login .cab-copy { color: #a5b9d1; }
#login .cab-form .tabs { border-radius: 8px; overflow: hidden; }
#login .cab-form .tab { background: rgba(8, 13, 24, 0.62); }
#login .cab-form .tab.active { background: rgba(77, 226, 192, 0.84); }
#login .cab-form .tab.active:hover { background: rgba(77, 226, 192, 0.9); }
#login #login-name,
#login #login-pass,
#lobby #lobby-chat-input { border-radius: 8px; background: rgba(255, 255, 255, 0.045); }
#login #login-name { font-size: 18px; letter-spacing: 2px; }
#login #login-btn { border-radius: 8px; padding: 17px 0; letter-spacing: 5px; background: rgba(77, 226, 192, 0.84); }
#login .swatch { width: 32px; height: 32px; border-radius: 6px; }
#login .swatch.active { box-shadow: 0 0 14px rgba(77, 226, 192, 0.25); }
#lobby .lobby-pilot { border-radius: 6px; }
#lobby .cab-meta .lobby-settings div { background: rgba(8, 13, 24, 0.52); }
#login button:focus-visible,
#lobby button:focus-visible,
#login input:focus-visible,
#lobby input:focus-visible { outline: 2px solid #a9f9e7; outline-offset: 3px; }

/* Tablets and phones already use a single scrolling cabinet document. */
body.pads #login,
body.pads #lobby { --dim: #a3b3cd; }
body.pads #login .panel.cabinet,
body.pads #lobby .panel.cabinet {
  height: auto;
  max-height: none;
  width: min(94vw, 100%);
  max-width: 100%;
  margin: 3dvh auto;
  overflow: hidden;
}
body.pads #login .cab-col,
body.pads #lobby .cab-col { overflow: visible; }
body.pads #lobby .cab-marquee { align-items: flex-start; text-align: left; }
body.pads #login .swatch { width: 44px; height: 44px; }
body.pads #login #login-colour { min-height: 44px; }
body.pads #lobby #lobby-chat-input { font-size: 16px; }
body.pads #login .flight-controls summary,
body.pads #lobby .flight-controls summary { min-height: 44px; }
body.pads #login .flight-controls,
body.pads #lobby .flight-controls { padding: 10px 16px; }
body.pads #login .flight-controls .cr-pad b,
body.pads #lobby .flight-controls .cr-pad b { font-size: 12px; letter-spacing: 1px; }
body.pads #login .flight-controls .cr-pad span,
body.pads #lobby .flight-controls .cr-pad span,
body.pads #login .flight-controls .cr-note,
body.pads #lobby .flight-controls .cr-note { font-size: 12px; color: #afbed3; }

@media (min-width: 761px) {
  body:not(.pads) #login .panel.cabinet { height: auto; }
  body:not(.pads) #login .cab-marquee,
  body:not(.pads) #lobby .cab-marquee {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    min-height: clamp(160px, 22dvh, 240px);
    padding: 24px 32px;
  }
  body:not(.pads) #login .flight-controls .cr-keys,
  body:not(.pads) #lobby .flight-controls .cr-keys {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }
  body:not(.pads) #login .flight-controls .cr-keys div,
  body:not(.pads) #lobby .flight-controls .cr-keys div {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0;
  }
}

@media (max-width: 1000px), (max-height: 620px) {
  body:not(.pads) #login .panel.cabinet,
  body:not(.pads) #lobby .panel.cabinet {
    height: auto;
    max-height: none;
    margin: 3dvh auto;
  }
  body:not(.pads) #login .cab-col,
  body:not(.pads) #lobby .cab-col { overflow: visible; }
}

/* Short screens retain room for the form; narrow screens scroll as one page. */
@media (max-height: 650px) and (min-width: 761px) {
  #login .cab-marquee,
  #lobby .cab-marquee { min-height: 140px; padding: 20px 28px; }
  #login .panel.cabinet h1 { font-size: 36px; }
  .flight-kicker { margin-bottom: 10px; }
}

@media (max-width: 760px) {
  #login.overlay,
  #lobby.overlay { background-position: 60% center; }
  #login .panel.cabinet,
  #lobby .panel.cabinet { height: auto; max-height: none; max-width: 94vw; margin: 3dvh auto; overflow: visible; }
  #login .cab-marquee,
  #lobby .cab-marquee { min-height: 240px; padding: 26px 22px; border-radius: 16px 16px 0 0; }
  #login .cab-marquee,
  #lobby .cab-marquee { grid-template-columns: minmax(0, 1fr); }
  #login .cab-title { grid-row: auto; }
  #login .flight-controls,
  #lobby .flight-controls { grid-column: 1; grid-row: auto; }
  #login .cab-col,
  #lobby .cab-col { overflow: visible; }
  #login .cab-marquee .sub { font-size: 10px; letter-spacing: 1px; }
  #login .panel.cabinet h1 { font-size: 44px; }
  #lobby #lobby-clock { padding: 14px; }
  #login .cab-col:last-child,
  #lobby .cab-col:last-child { border-radius: 0 0 16px 16px; }
}

/*
 * Phones in portrait: Launch has to be on the first screen, not under it.
 * The room comes from above the form — the page margin, the header padding,
 * the empty band built into the wordmark, and a slimmer Controls bar (still a
 * 44px touch target, just without padding around it) — and from laying the
 * colour swatches out in two rows instead of three.
 *
 * body.touch is phones only (main.js, detectDevice): tablets and narrow
 * desktop windows keep their layout. The width test leaves a phone held
 * sideways alone too.
 */
@media (max-width: 760px) {
  body.touch #login .panel.cabinet { margin-top: 8px; }
  body.touch #login .cab-marquee { min-height: 0; padding: 10px 18px 14px; row-gap: 10px; }
  /* The wordmark PNG is ~24% empty above the lettering and ~17% below it:
     crop to the lettering instead of laying the page out around the air. */
  body.touch #login .brand-logo { aspect-ratio: 1774 / 560; object-fit: cover; object-position: 50% 60%; }
  body.touch #login .flight-controls { padding: 0 14px; }
  body.touch #login .cab-form { padding-top: 14px; }
  /* Six across, sized to the column: two rows for the twelve colours, ~35-44px each. */
  body.touch #login #colour-swatches {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  body.touch #login .swatch { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; }
}

/*
 * High scores in a dialog, phones only — main.js moves #arcade into
 * #scores-dialog there. Everywhere else the board keeps its column and none
 * of this shows.
 */
#scores-btn { display: none; }
body.touch #login .cab-board { display: none; }
body.touch #login #scores-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 0;
  min-height: 44px;
  letter-spacing: 4px;
  color: var(--accent);
  background: transparent;
  border-color: rgba(77, 226, 192, 0.45);
}
/* Outside Pilot mode main.js hides the board, so there is nothing to open. */
body.touch #login:has(#arcade.hidden) #scores-btn { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  /* The board's half of the two-column phone layout is empty now. */
  body.touch #login .cab-form { grid-column: 1 / -1; }
}

#scores-dialog {
  width: min(92vw, 420px);
  max-height: 86dvh;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: rgba(5, 11, 21, 0.96);
  border: 1px solid rgba(154, 206, 233, 0.3);
  border-radius: 14px;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.6);
}
#scores-dialog::backdrop { background: rgba(2, 5, 10, 0.72); }
#scores-dialog .scores-body { position: relative; padding: 20px 18px 16px; }
#login #scores-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 16px;
  color: #a5b9d1;
  background: none;
  border: none;
}
body.touch #login #scores-dialog #arcade { margin-top: 0; padding-top: 0; }

/*
 * A phone held sideways: the shape itch.io's mobile player locks to, and the
 * one the game itself needs.
 *
 * Everything above lays the login out as a portrait page — a header of logo
 * and controls, then the form — and on a phone held sideways that header
 * alone filled the 360-430px of height. Launch started below the bottom edge
 * of the screen, and the only way to it was to scroll a page that gave no sign
 * it scrolled; inside itch's frame, not reliably at all. You could not start
 * the game.
 *
 * Sideways it is two panes, sized to the screen: logo and controls on the
 * left, the form on the right. Each pane scrolls on its own if it has to, and
 * Launch is pinned to the foot of the form pane, so it is on screen whatever
 * else is — including under itch's own toolbar on the shortest phones.
 */
@media (orientation: landscape) and (max-height: 560px) {
  body.touch #login.overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
  }
  body.touch #login .panel.cabinet {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border: none;
    border-radius: 0;
    overflow: hidden;
  }

  /* Left pane: who we are and how to fly. */
  body.touch #login .cab-marquee {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: none;
    border-right: 1px solid rgba(154, 206, 233, 0.3);
    border-radius: 0;
  }
  body.touch #login .cab-title { grid-row: auto; }
  body.touch #login .brand-logo { width: min(100%, 300px); }
  body.touch #login .flight-controls { grid-column: auto; grid-row: auto; padding: 0 12px; }

  /* Right pane: the form, with Launch held at its foot. */
  body.touch #login .cab-form {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    padding: 12px 14px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* A field brought into view — picking a room focuses the password box —
       lands above the pinned Launch, not behind it. */
    scroll-padding-bottom: 72px;
    border: none;
    border-radius: 0;
  }
  /* The pane is a flex column (cabinet.css) and now a fixed height, so once
     its content outgrows it — the private-room list does — flexbox shrinks
     the children to fit rather than letting the pane scroll. The tab strip,
     being overflow: hidden, shrank to nothing and the room list was drawn
     over it: no way back to Pilot. Nothing in here may shrink; it scrolls. */
  body.touch #login .cab-form > * { flex-shrink: 0; }
  body.touch #login .cab-form .tabs { margin-bottom: 10px; }
  body.touch #login .cab-form .tab { min-height: 40px; padding: 10px 4px; }
  body.touch #login .cab-form label { margin-bottom: 8px; }
  body.touch #login #login-name { padding: 10px 12px; font-size: 16px; }
  body.touch #login #colour-swatches {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 34px));
    gap: 5px;
  }
  body.touch #login .swatch { width: 100%; max-width: 34px; height: auto; aspect-ratio: 1; }
  body.touch #login #login-colour { min-height: 34px; }

  /* Launch and High scores share the bottom row; an error shows just above. */
  body.touch #login #login-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 8px;
    align-content: start;
  }
  body.touch #login #login-form > * { grid-column: 1 / -1; }
  body.touch #login #login-error { order: 1; margin: 0; }
  body.touch #login #login-btn,
  body.touch #login #scores-btn {
    order: 2;
    position: sticky;
    bottom: 0;
    z-index: 1;
    min-height: 48px;
    margin: 6px 0 0;
    padding: 12px 0;
  }
  body.touch #login #login-btn {
    grid-column: 1;
    /* The usual Launch is translucent, which pinned over the form let the
       swatches show through it. The same colour, laid over the page's dark
       instead of over whatever happens to scroll beneath. */
    background: linear-gradient(rgba(77, 226, 192, 0.84), rgba(77, 226, 192, 0.84)), #05101a;
    /* Whatever scrolls beneath it reads as beneath it. */
    box-shadow: 0 -12px 14px -4px rgba(5, 11, 21, 0.92);
  }
  body.touch #login #scores-btn {
    grid-column: 2;
    letter-spacing: 2px;
    background: rgba(5, 11, 21, 0.94);
  }
  body.touch #login:has(#arcade.hidden) #login-btn { grid-column: 1 / -1; }
}