/* SkyEnthusiast: a flight-deck palette. Colours follow the cockpit display
   convention: green = normal/match, amber = caution/close, cyan = something
   you can select, magenta = the active item. Type is B612, the typeface
   Airbus commissioned for cockpit screens. */

@font-face {
  font-family: 'B612';
  src: url('fonts/b612-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'B612';
  src: url('fonts/b612-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --panel: #0e1925;
  --display: #142536;
  --display-2: #1a2e43;
  --bezel: #2a425a;
  --ink: #e6edf2;
  --muted: #93a7b8;
  --green: #3fd47f;
  --amber: #f2a63e;
  --cyan: #5ad4e6;
  --magenta: #e466da;
  --radius-s: 4px;
  --radius-m: 8px;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 2.25rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: 'B612', system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
}

a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #9ae6f1; }

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--display); padding: .5rem 1rem; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--bezel);
  background: var(--panel);
}
.site-header__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.wordmark {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark__sky { color: var(--cyan); }
.nav {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: var(--step--1);
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  padding: .35rem 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--magenta); }

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.narrow { max-width: 760px; margin: 0 auto; }

h1, h2, h3 { line-height: 1.2; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: var(--step-3); letter-spacing: -0.02em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { max-width: 68ch; }
.lede { color: var(--muted); font-size: var(--step-1); line-height: 1.45; margin-top: 0; }

/* Game header */
.game__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1.25rem;
}
.game__title { margin: 0; }
.game__number { color: var(--magenta); }
.game__meta {
  display: flex;
  gap: .75rem;
  align-items: center;
  color: var(--muted);
  font-size: var(--step--1);
}
.badge {
  border: 1px solid var(--bezel);
  border-radius: 999px;
  padding: .1rem .6rem;
}
.badge--weekend { border-color: var(--amber); color: var(--amber); }
.icon-btn {
  background: none;
  border: 1px solid var(--bezel);
  color: var(--ink);
  border-radius: 999px;
  font: inherit;
  font-size: var(--step--1);
  padding: .2rem .7rem;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--cyan); }

/* Guess box */
.guess-form { position: relative; margin-bottom: 1.5rem; }
.guess-form label { display: block; color: var(--muted); font-size: var(--step--1); margin-bottom: .35rem; }
.guess-input {
  width: 100%;
  font: inherit;
  font-size: var(--step-1);
  color: var(--ink);
  background: var(--display);
  border: 2px solid var(--bezel);
  border-radius: var(--radius-m);
  padding: .8rem 1rem;
}
.guess-input::placeholder { color: #5f7488; }
.guess-input:focus { outline: none; border-color: var(--cyan); }
.options {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: .25rem;
  list-style: none;
  background: var(--display-2);
  border: 1px solid var(--bezel);
  border-radius: var(--radius-m);
  box-shadow: 0 12px 32px rgba(3, 9, 15, .6);
  max-height: 22rem;
  overflow-y: auto;
}
.opt {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.opt--active, .opt:hover { background: #24405c; }
.opt__code { color: var(--cyan); font-size: var(--step--1); }
.opt--empty { color: var(--muted); cursor: default; }
.opt--empty:hover { background: none; }

/* Guesses */
.guesses { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.guess__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin-bottom: .4rem;
}
.guess__name { color: var(--ink); text-decoration: none; font-weight: 700; }
.guess__name:hover { color: var(--cyan); }
.guess__family { color: var(--amber); font-size: var(--step--1); }

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.tile {
  background: var(--display);
  border: 1px solid var(--bezel);
  border-top: 3px solid var(--bezel);
  border-radius: var(--radius-s);
  padding: .45rem .5rem .55rem;
  min-height: 4.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: tile-in .45s ease-out both;
}
.tile__label { color: var(--muted); font-size: .6875rem; line-height: 1.2; }
.tile__value { font-weight: 700; font-size: .875rem; line-height: 1.25; overflow-wrap: anywhere; }
.tile__dir { margin-left: .3em; font-size: .75em; }
.tile--hit { border-top-color: var(--green); background: #12301f; }
.tile--hit .tile__value { color: var(--green); }
.tile--hit .tile__value::before { content: '✓ '; }
.tile--near { border-top-color: var(--amber); background: #33270f; }
.tile--near .tile__value { color: var(--amber); }
.tile--near .tile__value::before { content: '≈ '; }
.tile--miss .tile__value { color: var(--ink); }

@keyframes tile-in {
  from { transform: rotateX(80deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.guess:not(:first-child) .tile { animation: none; }

@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  h1 { font-size: 1.75rem; }
  .site-header__inner { flex-wrap: wrap; row-gap: .25rem; padding-bottom: .25rem; }
  .nav { width: 100%; gap: 1.1rem; }
  main { padding-top: 1.5rem; }
}
.game__meta { flex-wrap: wrap; }
.game__meta > * { white-space: nowrap; }

/* Result */
.result {
  margin: 0 0 2rem;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--display);
  border: 1px solid var(--bezel);
  border-left: 4px solid var(--magenta);
  border-radius: var(--radius-m);
}
.result__verdict { color: var(--muted); margin: 0 0 .25rem; }
.result__verdict:focus { outline: none; }
.result__name { font-size: var(--step-3); margin-bottom: .75rem; }
.result__name a { color: var(--ink); text-decoration: none; }
.result__name a:hover { color: var(--cyan); }
.result__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1.25rem;
}
.result__facts dt { color: var(--muted); font-size: var(--step--1); }
.result__facts dd { margin: 0; font-weight: 700; }
@media (max-width: 560px) { .result__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .result__name { font-size: 1.75rem; } }
.result__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.result__next { color: var(--muted); font-size: var(--step--1); margin: 1rem 0 0; }
.share-fallback { white-space: pre-wrap; background: var(--panel); padding: .75rem; border-radius: var(--radius-s); }

.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  background: var(--display-2);
  border: 1px solid var(--bezel);
  border-radius: var(--radius-s);
  padding: .6rem 1rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--cyan); color: var(--ink); }
.btn--primary { background: var(--cyan); color: #06222a; border-color: var(--cyan); }
.btn--primary:hover { background: #8de5f1; color: #06222a; }

/* Dialogs */
dialog {
  background: var(--display);
  color: var(--ink);
  border: 1px solid var(--bezel);
  border-radius: var(--radius-m);
  padding: 1.5rem;
  max-width: min(32rem, calc(100vw - 2rem));
  width: 100%;
}
dialog::backdrop { background: rgba(4, 10, 16, .75); }
.dialog__close { float: right; }
.help-legend { list-style: none; padding: 0; display: grid; gap: .5rem; }
.help-legend .tile { min-height: 0; flex-direction: row; gap: .75rem; align-items: center; animation: none; justify-content: flex-start; }
.help-legend .tile__value { flex: 0 0 auto; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1rem 0 1.25rem; text-align: center; }
.stats dt { color: var(--muted); font-size: .75rem; order: 2; }
.stats div { display: flex; flex-direction: column; }
.stats dd { margin: 0; font-size: var(--step-2); font-weight: 700; }
.dist__title { font-size: var(--step-0); color: var(--muted); font-weight: 400; }
.dist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dist li { display: grid; grid-template-columns: 1.25rem 1fr 2rem; align-items: center; gap: .5rem; }
.dist__n, .dist__v { font-size: var(--step--1); color: var(--muted); }
.dist__bar { height: 12px; width: var(--w); background: var(--cyan); border-radius: 0 4px 4px 0; }
.dist__bar--today { background: var(--magenta); }

/* Explorer */
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1rem; }
.toolbar input, .toolbar select {
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--display);
  border: 1px solid var(--bezel);
  border-radius: var(--radius-s);
  padding: .55rem .75rem;
}
.toolbar input { flex: 1 1 14rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--bezel); border-radius: var(--radius-m); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid #20354a; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
thead th { color: var(--muted); font-weight: 400; background: var(--display); position: sticky; top: 0; }
thead th button { all: unset; cursor: pointer; }
thead th button:hover, thead th[aria-sort] button { color: var(--ink); }
thead th button:focus-visible { outline: 2px solid var(--magenta); }
tbody tr:hover { background: #13283b; }
tbody a { color: var(--ink); text-decoration: none; font-weight: 700; }
tbody a:hover { color: var(--cyan); }
.count-note { color: var(--muted); font-size: var(--step--1); }

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--bezel);
  border: 1px solid var(--bezel);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin: 1.5rem 0 2rem;
}
.spec div { background: var(--display); padding: .9rem 1rem; }
.spec dt { color: var(--muted); font-size: var(--step--1); }
.spec dd { margin: .15rem 0 0; font-size: var(--step-1); font-weight: 700; }
.spec dd small { display: block; color: var(--muted); font-weight: 400; font-size: var(--step--1); }

.crumbs { font-size: var(--step--1); color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); }

.link-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.link-list a {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid var(--bezel);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step--1);
}
.link-list a:hover { border-color: var(--cyan); }

.callout {
  border-left: 4px solid var(--magenta);
  background: var(--display);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  margin: 2rem 0;
}
.callout p { margin: 0 0 .75rem; }

/* Rankings: single-series bars, one hue, values labelled. */
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 2.5rem 3rem; margin-top: 2rem; }
.rank__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.rank__row { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; font-size: var(--step--1); }
.rank__row a { color: var(--ink); text-decoration: none; }
.rank__row a:hover { color: var(--cyan); }
.rank__value { color: var(--muted); font-variant-numeric: tabular-nums; }
.rank__bar { grid-column: 1 / -1; height: 8px; background: var(--display); border-radius: 0 4px 4px 0; }
.rank__bar span { display: block; height: 100%; width: var(--w); background: var(--cyan); border-radius: 0 4px 4px 0; }
.rank__note { color: var(--muted); font-size: var(--step--1); margin-top: -.25rem; }

/* Compare */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
.vs__col { background: var(--display); border: 1px solid var(--bezel); border-radius: var(--radius-m); padding: 1rem 1.25rem; }
.vs__col h2 { font-size: var(--step-1); }
.vs table td, .vs table th { padding: .45rem 0; border-color: #20354a; white-space: normal; }
.vs .more { color: var(--green); }
@media (max-width: 560px) { .vs { grid-template-columns: 1fr; } }

.cmp { width: 100%; margin: 1.5rem 0 2rem; }
.cmp th { color: var(--muted); font-weight: 400; }
.cmp td { font-weight: 700; }
.cmp td.lead { color: var(--green); }
.cmp td.lead::after { content: ' ●'; font-size: .7em; }

.site-footer {
  border-top: 1px solid var(--bezel);
  color: var(--muted);
  font-size: var(--step--1);
}
.site-footer__inner { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .tile { animation: none; }
}

/* Keep the aircraft name visible while scrolling wide tables on phones. */
[data-explorer] th:first-child,
[data-explorer] td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
}
[data-explorer] thead th:first-child { background: var(--display); z-index: 2; }
.table-wrap > .cmp { margin: 0; }
.cmp th, .cmp td { white-space: normal; }

/* Practice filters */
.toolbar--compact { margin: 0 0 1.25rem; }
.toolbar--compact label { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--step--1); }

/* "Keep flying" block under the daily result */
.result__more { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bezel); }
.result__more p { color: var(--muted); font-size: var(--step--1); margin: 0 0 .6rem; }

/* Higher or lower */
.hl-score { color: var(--magenta); }
.hl-question { font-size: var(--step-1); line-height: 1.4; min-height: 2.8em; margin: 0 0 1rem; }
.hl-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.hl-card {
  background: var(--display);
  border: 1px solid var(--bezel);
  border-top: 3px solid var(--bezel);
  border-radius: var(--radius-m);
  padding: 1rem 1.1rem 1.2rem;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
}
.hl-card__maker { color: var(--muted); font-size: var(--step--1); margin: 0; }
.hl-card__name { font-size: var(--step-2); margin: .1rem 0 auto; }
.hl-card__name a { color: var(--ink); text-decoration: none; }
.hl-card__name a:hover { color: var(--cyan); }
.hl-card__label { color: var(--muted); font-size: var(--step--1); margin: 1rem 0 0; }
.hl-card__value { font-size: var(--step-3); font-weight: 700; margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hl-card--hidden { border-top-color: var(--magenta); }
.hl-card--hidden .hl-card__value { color: var(--magenta); }
.hl-card--right { border-top-color: var(--green); background: #12301f; }
.hl-card--right .hl-card__value { color: var(--green); }
.hl-card--wrong { border-top-color: #ff6b6b; background: #3a1a1e; }
.hl-card--wrong .hl-card__value { color: #ff8a8a; }
.hl-card--right .hl-card__value, .hl-card--wrong .hl-card__value { animation: tile-in .4s ease-out both; }
.hl-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hl-btn { font-size: var(--step-0); padding: .9rem 1rem; }
.hl-btn:disabled { opacity: .5; cursor: default; }
.hl-hint { margin-top: 1rem; }
.hl-over__fact { margin: 0 0 1rem; }
@media (max-width: 560px) {
  .hl-board { gap: .6rem; }
  .hl-card { min-height: 9.5rem; padding: .8rem .85rem 1rem; }
  .hl-card__name { font-size: var(--step-1); }
  .hl-card__value { font-size: 1.75rem; }
  .hl-hint { display: none; }
  .nav { flex-wrap: wrap; row-gap: .1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-card__value { animation: none !important; }
}

[hidden] { display: none !important; }

/* Today's flight plan */
.plan__section { font-size: var(--step-0); color: var(--muted); font-weight: 400; margin: 2rem 0 .75rem; }
.plan__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.plan-card a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--display);
  border: 1px solid var(--bezel);
  border-left: 4px solid var(--magenta);
  border-radius: var(--radius-m);
  color: var(--ink);
  text-decoration: none;
}
.plan-card a:hover { border-color: var(--cyan); border-left-color: var(--cyan); color: var(--ink); }
.plan-card__title { font-weight: 700; font-size: var(--step-1); }
.plan-card__desc { grid-column: 1; color: var(--muted); font-size: var(--step--1); }
.plan-card__status { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--step--1); color: var(--magenta); white-space: nowrap; }
.plan-card[data-state='done'] a { border-left-color: var(--green); }
.plan-card[data-state='done'] .plan-card__status { color: var(--green); }
.plan-card[data-state='done'] .plan-card__status::before { content: '✓ '; }
.plan-card[data-state='missed'] a { border-left-color: var(--muted); }
.plan-card[data-state='missed'] .plan-card__status { color: var(--muted); }
.plan-card[data-state='started'] .plan-card__status { color: var(--amber); }
.plan-card--free a { border-left-color: var(--cyan); }
.plan-card--free .plan-card__status { color: var(--muted); }
@media (max-width: 560px) {
  .plan-card a { grid-template-columns: 1fr; }
  .plan-card__status { grid-column: 1; grid-row: auto; margin-top: .35rem; }
}

/* Runway diagram: an aerodrome-chart look */
.chart {
  margin: 0 0 1.5rem;
  background:
    linear-gradient(var(--bezel) 1px, transparent 1px) 0 0 / 12.5% 12.5%,
    linear-gradient(90deg, var(--bezel) 1px, transparent 1px) 0 0 / 12.5% 12.5%,
    #0b1520;
  background-blend-mode: normal;
  border: 1px solid var(--bezel);
  border-radius: var(--radius-m);
  aspect-ratio: 1;
  max-height: 460px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.chart svg { width: 100%; height: 100%; display: block; }
.chart .rw { stroke: #dfe7ee; stroke-linecap: butt; }
.chart .rw-cl { stroke: #0b1520; stroke-linecap: butt; }
.chart .rw-id { fill: var(--cyan); font-family: 'B612', sans-serif; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.chart .rw-note { fill: var(--muted); font-family: 'B612', sans-serif; }
.chart .rw-scale { stroke: var(--muted); }
.chart .rw-north { fill: var(--magenta); }
.chart-credit { margin-top: 2rem; }
@media (min-width: 561px) { .chart { max-width: 460px; } }

.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 560px) { .tiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile--plain { border-top-color: var(--cyan); }
.tile--plain .tile__value { color: var(--cyan); }
.tile--plain .tile__value::before { content: none; }
.opt__sub { display: block; color: var(--muted); font-size: var(--step--1); }

/* "▲ try later": tells the player which way to go next */
.tile__hint { font-size: .6875rem; line-height: 1.2; color: var(--magenta); margin-top: .2rem; white-space: nowrap; }
.tile--near .tile__hint { color: var(--amber); }
.help-legend .tile__hint { flex: 0 0 auto; margin-top: 0; }

.prose h2 { font-size: var(--step-1); margin-top: 2rem; }
.prose p { line-height: 1.65; }

/* Beta label */
.beta {
  font-size: .6875rem;
  font-weight: 700;
  vertical-align: middle;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: .05rem .45rem;
  margin-left: .25rem;
  letter-spacing: 0;
}
.plan__links { margin: .9rem 0 0; font-size: var(--step--1); color: var(--muted); }
.install-tip { margin-top: 2rem; }

/* Timeline */
.tl-axis { color: var(--muted); font-size: var(--step--1); margin: 0 0 .5rem; }
.tl-list { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .5rem; }
.tl-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto auto;
  align-items: center;
  gap: .75rem;
  padding: .65rem .8rem;
  background: var(--display);
  border: 1px solid var(--bezel);
  border-left: 4px solid var(--bezel);
  border-radius: var(--radius-m);
}
.tl-row--hit { border-left-color: var(--green); background: #12301f; }
.tl-row--miss { border-left-color: var(--bezel); }
.tl-pos { color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.tl-name { font-weight: 700; line-height: 1.25; }
.tl-maker { display: block; font-weight: 400; color: var(--muted); font-size: var(--step--1); }
.tl-year { color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-lock { color: var(--green); font-weight: 700; min-width: 1.5rem; text-align: center; }
.tl-moves { display: flex; gap: .35rem; }
.tl-moves .icon-btn { padding: .35rem .7rem; font-size: .875rem; }
.tl-moves .icon-btn:disabled { opacity: .3; cursor: default; }
.tl-submit { margin: .5rem 0 1.5rem; }
.tl-answer { padding-left: 1.4rem; margin: .5rem 0 1.25rem; }
.tl-answer li { margin: .2rem 0; }

/* Odd one out */
.odd-round { margin-bottom: 1.75rem; }
.odd-round__title { font-size: var(--step-0); color: var(--muted); font-weight: 400; margin-bottom: .6rem; }
.odd-ok { color: var(--green); font-weight: 700; margin-left: .4rem; }
.odd-no { color: #ff8a8a; font-weight: 700; margin-left: .4rem; }
.odd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.odd-opt {
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--display);
  border: 1px solid var(--bezel);
  border-top: 3px solid var(--bezel);
  border-radius: var(--radius-m);
  padding: .8rem .9rem;
  min-height: 4.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.odd-opt:hover:not(:disabled) { border-color: var(--cyan); }
.odd-opt:disabled { cursor: default; }
.odd-opt__maker { color: var(--muted); font-size: var(--step--1); }
.odd-opt__name { font-weight: 700; font-size: var(--step-1); line-height: 1.2; }
.odd-opt--answer { border-top-color: var(--green); background: #12301f; }
.odd-opt--answer .odd-opt__name { color: var(--green); }
.odd-opt--wrong { border-top-color: #ff6b6b; background: #3a1a1e; }
.odd-reason { margin: .6rem 0 0; color: var(--muted); }

/* Archive */
.arch-day { margin-bottom: 1.5rem; }
.arch-day__title { font-size: var(--step-0); margin-bottom: .5rem; }
.arch-games { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.arch-game {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem .7rem;
  background: var(--display);
  border: 1px solid var(--bezel);
  border-top: 3px solid var(--magenta);
  border-radius: var(--radius-s);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 700;
}
.arch-game:hover { border-color: var(--cyan); color: var(--ink); }
.arch-game__status { font-weight: 400; color: var(--muted); }
.arch-game--done { border-top-color: var(--green); }
.arch-game--done .arch-game__status { color: var(--green); }
.arch-game--missed { border-top-color: var(--bezel); }
.arch-game--started { border-top-color: var(--amber); }
@media (max-width: 560px) { .arch-games { grid-template-columns: 1fr 1fr; } }

/* Logbook */
.badges { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .75rem; }
.badge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .9rem 1rem 1rem;
  background: var(--display);
  border: 1px dashed var(--bezel);
  border-radius: var(--radius-m);
  color: var(--muted);
}
.badge-card--earned { border-style: solid; border-color: var(--green); color: var(--ink); background: #12301f; }
.badge-card__mark { position: absolute; top: .7rem; right: .9rem; color: var(--green); font-weight: 700; }
.badge-card__name { font-weight: 700; font-size: var(--step-0); }
.badge-card--earned .badge-card__name { color: var(--green); }
.badge-card__desc { font-size: var(--step--1); }
.badge-card__prog { height: 6px; background: var(--panel); border-radius: 0 3px 3px 0; margin-top: .4rem; }
.badge-card__prog span { display: block; height: 100%; width: var(--w); background: var(--cyan); border-radius: 0 3px 3px 0; }
.badge-card__count { font-size: .75rem; }

/* Airport pages */
.chart--page { max-width: 100%; margin: 1.5rem 0; }
@media (min-width: 561px) { .chart--page { max-width: 520px; } }
.table-wrap + h2, .table-wrap + .count-note { margin-top: 2rem; }
.odd-opt { justify-content: center; min-height: 4rem; }

/* One-line instructions above each game */
.howto { color: var(--muted); font-size: var(--step--1); margin: -.25rem 0 1.1rem; }

/* Flight plan: start button, next button, score card */
.plan-start { margin: 0 0 1.25rem; }
.btn--start { font-size: var(--step-0); padding: .85rem 1.4rem; background: var(--magenta); border-color: var(--magenta); color: #2a0b27; }
.btn--start:hover { background: #ef93e8; color: #2a0b27; }
.btn--next { background: var(--magenta); border-color: var(--magenta); color: #2a0b27; }
.btn--next:hover { background: #ef93e8; color: #2a0b27; }
.score-card {
  background: var(--display);
  border: 1px solid var(--bezel);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-m);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.5rem;
}
.score-card__title { font-size: var(--step-1); margin: 0 0 .6rem; }
.score-card__pts { color: var(--green); }
.score-card__list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .3rem; font-size: var(--step--1); }
.score-card__list li { display: flex; justify-content: space-between; color: var(--muted); border-bottom: 1px solid #20354a; padding-bottom: .3rem; }

/* Phones: one compact header row; the menu scrolls sideways */
@media (max-width: 560px) {
  .site-header__inner { flex-wrap: nowrap; gap: .9rem; padding: .6rem 1rem; }
  .wordmark { font-size: 1.05rem; }
  .nav {
    width: auto;
    flex-wrap: nowrap;
    gap: .9rem;
    font-size: .8125rem;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 1.5rem;
  }
  main { padding-top: 1.1rem; }
  .crumbs { margin-bottom: .6rem; }
}

/* Departure board on the home page */
.board {
  background: #0a121b;
  border: 1px solid var(--bezel);
  border-radius: var(--radius-m);
  padding: .4rem;
  display: grid;
  gap: .35rem;
}
.board__row {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .75rem .85rem;
  border-radius: var(--radius-s);
  background: var(--display);
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.board__row:hover { background: #1b3147; color: var(--ink); border-left-color: var(--cyan); }
.board__flight { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.board__game { display: flex; flex-direction: column; min-width: 0; }
.board__name { font-weight: 700; }
.board__desc { color: var(--muted); font-size: var(--step--1); }
.flap { display: inline-flex; gap: 2px; }
.flap__c {
  display: inline-grid;
  place-items: center;
  min-width: .95em;
  height: 1.55em;
  padding: 0 .08em;
  font-weight: 700;
  font-size: .8125rem;
  color: var(--magenta);
  background: linear-gradient(#0c1621 0 49%, #000 49% 51%, #0c1621 51%);
  border-radius: 2px;
  animation: flap-in .32s ease-out both;
}
.flap__c--gap { background: none; min-width: .4em; }
.board__row[data-state='started'] .flap__c { color: var(--amber); }
.board__row[data-state='done'] .flap__c { color: var(--green); }
.board__row[data-state='partial'] .flap__c { color: var(--amber); }
.board__row[data-state='missed'] .flap__c { color: var(--muted); }
@keyframes flap-in { from { transform: rotateX(90deg); opacity: .2; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) {
  .board__row { grid-template-columns: 1fr auto; gap: .3rem .6rem; }
  .board__flight { grid-column: 1 / -1; font-size: .75rem; }
  .board__desc { display: none; }
  .flap__c { font-size: .6875rem; }
}

/* Rank */
.rank {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem 1rem;
  align-items: center;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--bezel);
  border-radius: var(--radius-m);
}
.rank__label { color: var(--muted); font-size: var(--step--1); }
.rank__name { font-weight: 700; color: var(--cyan); justify-self: end; }
.rank__bar { grid-column: 1 / -1; height: 6px; background: var(--display); border-radius: 0 3px 3px 0; }
.rank__bar span { display: block; height: 100%; width: var(--w); background: var(--cyan); border-radius: 0 3px 3px 0; }
.rank__next { grid-column: 1 / -1; color: var(--muted); font-size: var(--step--1); }

/* Hints */
.hint-box { margin: -.5rem 0 1.25rem; }
.hint { margin: 0 0 .5rem; padding: .55rem .8rem; background: #33270f; border-left: 3px solid var(--amber); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--ink); }
.hint-btn { border-color: var(--amber); color: var(--amber); }
.hint-btn:hover { color: var(--ink); }
.freeze-note { margin: 1rem 0 0; }

/* The landing moment above a winning result: one short animation */
.touchdown { height: 46px; margin: -.25rem 0 .5rem; }
.touchdown svg { width: 100%; max-width: 320px; height: 100%; overflow: visible; }
.touchdown__rwy { stroke: #dfe7ee; stroke-width: 6; }
.touchdown__cl { stroke: var(--display); stroke-width: 1.2; stroke-dasharray: 8 6; }
.touchdown__plane { fill: var(--green); animation: touchdown 1.4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes touchdown {
  0% { transform: translate(-10px, 8px); opacity: 0; }
  20% { opacity: 1; }
  70% { transform: translate(180px, 44px); }
  100% { transform: translate(250px, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .touchdown__plane { animation: none; transform: translate(250px, 44px); }
  .flap__c { animation: none; }
}

/* Learn */
.learn-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; }
.learn-list a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.2rem;
  background: var(--display);
  border: 1px solid var(--bezel);
  border-left: 4px solid var(--cyan);
  border-radius: var(--radius-m);
  color: var(--ink);
  text-decoration: none;
}
.learn-list a:hover { border-color: var(--cyan); color: var(--ink); }
.learn-list__title { font-weight: 700; font-size: var(--step-1); }
.learn-list__desc { color: var(--muted); font-size: var(--step--1); }
.glossary { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; }
.glossary div { padding-bottom: 1rem; border-bottom: 1px solid #20354a; scroll-margin-top: 1rem; }
.glossary div:target { background: #13283b; outline: 1px solid var(--cyan); outline-offset: 6px; border-radius: 2px; }
.glossary dt { font-weight: 700; font-size: var(--step-1); }
.glossary dd { margin: .3rem 0 0; color: var(--ink); line-height: 1.6; }
a.term { color: inherit; text-decoration: underline dotted var(--cyan); text-underline-offset: 4px; }
a.term:hover { color: var(--cyan); }

/* "41% of players solved it" line in results */
.crowd { margin: -.25rem 0 .9rem; color: var(--cyan); font-size: var(--step--1); }

/* Test yourself (aircraft pages) */
.quiz { margin: 2rem 0; padding: 1.1rem 1.25rem 1.25rem; background: var(--display); border: 1px solid var(--bezel); border-radius: var(--radius-m); }
.quiz h2 { margin-top: 0; }
.quiz__q { padding: .75rem 0; border-top: 1px solid #20354a; }
.quiz__text { margin: 0 0 .6rem; }
.quiz__n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .5rem; border-radius: 50%; background: var(--panel); color: var(--magenta); font-weight: 700; font-size: .8125rem; }
.quiz__btns { display: flex; gap: .5rem; }
.quiz__btns .btn:disabled { opacity: .45; cursor: default; }
.quiz__reveal { margin: .6rem 0 0; font-size: var(--step--1); }
.quiz__q--right .quiz__reveal { color: var(--green); }
.quiz__q--wrong .quiz__reveal { color: #ff8a8a; }
.quiz__score { margin: .75rem 0 0; font-weight: 700; }