:root { color-scheme: dark; }
html, body {
  margin: 0; height: 100%; background: #070a12; color: #e8eef6;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
/* The canvas is sized by game.js (layout()): a 16:9 stage in landscape, the
   full available area in portrait. #stage's bottom inset is set to the height
   of the touch bar so the two never overlap. */
#stage { position: fixed; inset: 0; display: grid; place-items: center; }
#game { display: block; background: #0b1020; cursor: pointer; }
#touch { position: fixed; left: 0; right: 0; bottom: 0; display: none; gap: 10px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: #070a12; }
#touch button {
  flex: 1; padding: 16px 0; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px;
  letter-spacing: .08em; color: #fff; background: #1f4d8f;
}
#btn-abort { background: #a1262b; flex: .7; }
@media (pointer: coarse) { #touch { display: flex; } }

/* Airport picker: an HTML overlay so the search box gets a real keyboard on
   phones and the list scrolls natively. Sits above the canvas and touch bar. */
#appick { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px 12px; background: rgba(4,7,14,.72); }
#appick[hidden] { display: none; }
.ap-panel { width: min(520px, 100%); max-height: calc(100% - 5vh); display: flex; flex-direction: column; background: #0d1426; border: 1px solid rgba(31,177,201,.4); border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.65); overflow: hidden; }
.ap-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 0; }
.ap-title { font-weight: 700; letter-spacing: .14em; color: #1fb1c9; font-size: 12px; }
#ap-close { border: 0; background: transparent; color: #a9bbd3; font: inherit; font-size: 16px; cursor: pointer; padding: 4px 8px; }
#ap-search { margin: 10px 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: #070a12; color: #e8eef6; font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text; }
#ap-search:focus { border-color: #1fb1c9; }
#ap-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#ap-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
#ap-list li:hover { background: rgba(255,255,255,.05); }
#ap-list li.cur { background: rgba(31,177,201,.2); }
#ap-list li .code { color: #1fb1c9; font-weight: 700; min-width: 4ch; }
#ap-list li .name { flex: 1; color: #e8eef6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ap-list li .place { color: #a9bbd3; font-size: 11px; white-space: nowrap; }
#ap-list li.sel .name::after { content: '  ✓'; color: #2fd37a; }
#ap-list li.empty { color: #a9bbd3; cursor: default; justify-content: center; padding: 20px; }
.ap-hint { padding: 8px 14px 10px; font-size: 10px; color: #a9bbd3; text-align: center; border-top: 1px solid rgba(255,255,255,.07); }
@media (pointer: coarse) { .ap-hint { display: none; } #ap-list li { padding: 12px 10px; } }
@media (max-width: 420px) { #ap-list li .clim { display: none; } #ap-list li { font-size: 12px; } }
#ap-list li.short .name { color: #8a94a3; }
#ap-list li.short .place { color: #ff8a8a; }
#touch button.idle { opacity: .35; }
#btn-abort.neutral { background: #2b3a55; }

/* High scores: list and the entry form (shown only when a run qualifies) */
#hs { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px 12px; background: rgba(4,7,14,.72); }
#hs[hidden] { display: none; }
#hs-entry { margin: 8px 14px 4px; padding: 12px; border-radius: 10px; background: rgba(31,177,201,.12); border: 1px solid rgba(31,177,201,.35); }
#hs-entry p { margin: 0 0 10px; font-size: 13px; color: #e8eef6; }
#hs-nick { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: #070a12; color: #e8eef6; font: inherit; font-size: 16px; outline: none; -webkit-user-select: text; user-select: text; }
#hs-nick:focus { border-color: #1fb1c9; }
.hs-pow { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; color: #e8eef6; cursor: pointer; }
.hs-pow input { width: 18px; height: 18px; accent-color: #1fb1c9; }
#hs-pow-state { color: #7dffb3; font-size: 12px; }
#hs-submit { width: 100%; padding: 12px; border: 0; border-radius: 8px; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .08em; color: #fff; background: #1f4d8f; cursor: pointer; }
#hs-submit:disabled { opacity: .4; cursor: default; }
#hs-status { min-height: 16px; margin-top: 8px; font-size: 12px; color: #ff8a8a; }
#hs-list { list-style: none; margin: 0; padding: 4px 8px 8px; }
#hs-list li { display: grid; grid-template-columns: 2.2em 1fr auto 5em; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 7px; font-size: 13px; }
#hs-list li:nth-child(odd) { background: rgba(255,255,255,.04); }
#hs-list li.me { background: rgba(125,255,179,.16); outline: 1px solid rgba(125,255,179,.5); }
#hs-list li .rank { color: #1fb1c9; font-weight: 700; }
#hs-list li .nick { color: #e8eef6; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hs-list li .meta { color: #a9bbd3; font-size: 11px; white-space: nowrap; }
#hs-list li .when { color: #8fa3bf; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#hs-list li .score { color: #ffd166; font-weight: 700; text-align: right; }
#hs-list li.empty { display: block; text-align: center; color: #a9bbd3; padding: 18px; }
#hs-list { max-height: 48vh; overflow-y: auto; touch-action: pan-y; }
/* High-score list: comfortable to read on a desktop, still compact on a phone */
.hs-panel { width: min(680px, 100%); }
#hs .ap-title { font-size: 15px; }
#hs-entry p { font-size: 15px; }
#hs-list li { font-size: 17px; padding: 10px 14px; gap: 14px; grid-template-columns: 2.6em 1fr auto auto 5.5em; }
#hs-list li .meta { font-size: 14px; }
#hs-list li .rank { font-size: 15px; }
#hs .ap-hint { font-size: 12px; }
/* phones: two lines per row, the date under the name */
@media (max-width: 600px) { #hs-list li { font-size: 14px; padding: 8px 10px; gap: 2px 10px; grid-template-columns: 2em 1fr 4.5em; } #hs-list li .meta { display: none; } #hs-list li .when { grid-column: 2 / 4; grid-row: 2; font-size: 11px; } #hs-entry p { font-size: 13px; } }
@media (max-width: 600px) { #hs .ap-title { font-size: 12px; letter-spacing: .12em; } }

/* The way back to the website: a quiet logo link on the title, menu, help and
   end screens, hidden while a takeoff is in progress. The confirm box that ESC
   or HOME opens mid-game offers the same exit. */
#site-home { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 7px; border-radius: 9px; background: rgba(7,10,18,.78); border: 1px solid rgba(255,255,255,.08); color: #a9bbd3; text-decoration: none; font-size: 12px; letter-spacing: .02em; opacity: .9; transition: opacity .15s, color .15s; }
#site-home:hover, #site-home:focus-visible { opacity: 1; color: #e8eef6; outline: none; border-color: rgba(31,177,201,.5); }
#site-home img { width: 22px; height: 22px; display: block; }
#site-home b { font-weight: 700; }
#site-home[hidden] { display: none; }