/* Alpine Air - dark alpine UI, built for a phone held in landscape. */
:root {
  --bg: #0a1522;
  --bg-2: #0f2136;
  --ink: #eaf4ff;
  --ink-dim: #93b2ce;
  --ink-faint: #5d7893;
  --line: rgba(143, 190, 235, 0.16);
  --surface: rgba(18, 38, 60, 0.72);
  --surface-2: rgba(28, 54, 82, 0.6);
  --accent: #6fc6ff;
  --gold: #ffd44d;
  --good: #3fd07a;
  --bad: #f2603c;
  --pad: 16px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior: none;
  /* `none` here would block touch scrolling in every menu, because touch-action
     is resolved across ancestors. Only the game canvas wants that. */
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}

#stage {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none;   /* the game reads raw drags; no panning or zooming */
}

#overlay { position: fixed; inset: 0; pointer-events: none; }
#overlay .screen { pointer-events: auto; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-r))
           calc(var(--pad) + var(--safe-b)) calc(var(--pad) + var(--safe-l));
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(60, 130, 190, 0.28), transparent 62%),
    linear-gradient(170deg, #0c1c2e 0%, #0a1522 52%, #071019 100%);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.screen[hidden] { display: none !important; }

/* ---------- Title ---------- */
#screen-title { align-items: center; text-align: center; }
/* Auto margins rather than justify-content: center - the same reason .panel
   uses them. Both centre a short title, but a centred flex column that
   overflows clips at the TOP, and the part that goes out of reach is the logo.
   Auto margins collapse to zero instead, so the screen simply scrolls from the
   top like everything else. */
.title-inner {
  margin: auto; width: min(620px, 94%);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.brand-mark { width: 74px; height: 46px; filter: drop-shadow(0 6px 18px rgba(90, 170, 240, 0.35)); }
.brand h1 {
  margin: 6px 0 0; font-size: clamp(30px, 7vw, 48px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, #ffffff, #9fd2f5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline {
  margin: 4px 0 0; font-size: 11px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--ink-faint);
}

.menu { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* auto-fit rather than a fixed two columns: a landscape phone gets two rows of
   two, a narrow portrait screen falls back to one column on its own, and
   neither needs a breakpoint that a future button could outgrow. */
.menu-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
/* Flex, not auto-fit: auto-fit sizes the TRACKS to the container, so a 620px
   row fits five 102px tracks and the three buttons that exist would sit in the
   first three of them, leaving a hole. Flex grow divides the row between the
   items that are actually there, and wraps instead of shrinking them below
   their label. */
.menu-more { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-more .btn { flex: 1 1 102px; }

.btn {
  appearance: none; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink);
  padding: 13px 18px; font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: scale(0.975); background: var(--surface-2); }
.btn[disabled] { opacity: .42; }
.btn-title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.btn-sub { font-size: 12px; color: var(--ink-dim); }
.btn-primary {
  background: linear-gradient(135deg, #2f80c9, #1b5c95);
  border-color: rgba(160, 215, 255, 0.4);
  box-shadow: 0 8px 26px rgba(30, 110, 180, 0.35);
}
.btn-primary .btn-sub { color: #cfe8fb; }
.btn-ghost { background: transparent; text-align: center; align-items: center; font-size: 14px; color: var(--ink-dim); padding: 11px; }

.footnote { margin: 2px 0 0; font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }

/* ---------- Headers ---------- */
.screen-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex: 0 0 auto; }
.screen-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.icon-btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); width: 38px; height: 38px; border-radius: 11px;
  font-size: 17px; line-height: 1; flex: 0 0 auto;
}
.icon-btn:active { background: var(--surface-2); }

/* ---------- Hill cards ---------- */
/* A flat sequence of headings and cards laid out as a grid: one column on a
   phone in portrait, two in landscape. With a catalogue this long, a single
   column means four screens of scrolling to reach the ski flying hills. */
.hill-list {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  width: min(900px, 100%); margin: 0 auto; align-content: start;
}
.hill-group {
  grid-column: 1 / -1;
  margin: 10px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hill-group:first-child { margin-top: 0; }
@media (min-width: 620px) { .hill-list { grid-template-columns: 1fr 1fr; } }
.hill {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: 1px solid var(--line); border-radius: 15px; background: var(--surface);
  padding: 13px 15px; color: var(--ink); font: inherit; text-align: left;
  transition: transform .12s ease, border-color .16s ease;
}
.hill:active { transform: scale(0.985); }
.hill.locked { opacity: .5; }
.hill-badge {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: linear-gradient(140deg, rgba(120, 200, 255, .22), rgba(40, 90, 140, .3));
  border: 1px solid var(--line);
}
.hill-main { flex: 1 1 auto; min-width: 0; }
.hill-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 7px; }
.hill-meta { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.hill-rec { font-size: 11px; color: var(--gold); margin-top: 3px; letter-spacing: .02em; }
.hill-lock { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }

/* ---------- Panels ---------- */
/* Panels are top-aligned and scroll; the actions stay pinned so the primary
   button is always reachable on a short landscape screen. */
/* Flex, so the panel can sit in the middle of a tall screen. The :not([hidden])
   is load-bearing: a bare #screen-panel rule outranks .screen[hidden] on
   specificity and the menus stop hiding. */
#screen-panel:not([hidden]) { display: flex; flex-direction: column; }
.panel {
  width: min(900px, 100%);
  /* Auto margins rather than justify-content: center. Both centre a short
     panel, but auto margins collapse to zero once the content is taller than
     the screen, where centring would push the top of it out of reach. A 4:3
     tablet has enough spare height for this to matter. */
  margin: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.cols { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.cols > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 620px) { .cols { grid-template-columns: 1fr 1fr; } }
.panel h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.panel h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.card {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  padding: 14px 16px;
}

.big-dist { display: flex; align-items: baseline; gap: 8px; }
.big-dist b { font-size: clamp(40px, 11vw, 62px); font-weight: 800; letter-spacing: -0.04em; line-height: .95; }
.big-dist span { font-size: 15px; color: var(--ink-dim); }
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tag.good { background: rgba(63, 208, 122, .16); color: var(--good); }
.tag.bad { background: rgba(242, 96, 60, .16); color: var(--bad); }
.tag.gold { background: rgba(255, 212, 77, .16); color: var(--gold); }

.judges { display: flex; gap: 6px; }
.judge {
  flex: 1; text-align: center; padding: 6px 2px; border-radius: 9px;
  background: rgba(255,255,255,.05); font-weight: 700; font-size: 13px;
}
.judge.drop { opacity: .38; font-weight: 500; }

.rows { display: flex; flex-direction: column; gap: 5px; }
.row { display: flex; justify-content: space-between; font-size: 13px; }
.row span:first-child { color: var(--ink-dim); }
.row b { font-variant-numeric: tabular-nums; }
.row.total { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 3px; font-size: 16px; }
.row.total b { font-size: 20px; }

.board {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 42vh; overflow-y: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%);
}
.board .r {
  display: grid; grid-template-columns: 26px 22px 1fr auto auto;
  gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px;
  font-size: 13px; background: rgba(255,255,255,.035);
}
.board .r.me { background: rgba(111, 198, 255, .17); outline: 1px solid rgba(111,198,255,.35); }
/* The rival is marked, not highlighted: the player's own row is the one the
   eye should land on first, and two competing highlights beat each other. */
.board .r.rival { background: rgba(255, 212, 77, .08); }
.board .r.rival .nm { color: var(--gold); }
.form { margin-left: 6px; font-size: 10px; vertical-align: 1px; }
.form.up { color: #5fd08a; }
.form.down { color: #f2603c; }
.board .r .pos { color: var(--ink-faint); font-weight: 700; text-align: right; }
.board .r .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .r .dd { color: var(--ink-dim); font-variant-numeric: tabular-nums; font-size: 12px; }
.board .r .pt { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }

.actions {
  /* Wraps because the result panel's row grew: Menu, Share, Watch, Challenge
     and the primary do not all fit across a narrow landscape phone, and a
     squeezed primary button is worse than a second row. */
  display: flex; flex-wrap: wrap; gap: 9px; position: sticky; bottom: 0; z-index: 2;
  padding: 8px 0 calc(2px + var(--safe-b));
  background: linear-gradient(180deg, rgba(8,17,28,0) 0%, rgba(8,17,28,.85) 38%, rgba(8,17,28,.96) 100%);
}
.actions .btn { flex: 1; text-align: center; align-items: center; }
.actions .btn-ghost { flex: 0 0 auto; padding-inline: 20px; }
.stat-line {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-dim);
}
.stat-line b { color: var(--ink); font-weight: 700; }

.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.toggle:last-of-type { border-bottom: 0; }

/* Difficulty tiers: a five-way pick that still reads on a narrow phone. */
.tiers { display: flex; flex-direction: column; gap: 6px; }
.tier {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--ink); font: inherit; transition: background .15s ease, border-color .15s ease;
}
.tier:hover { background: rgba(255,255,255,.07); }
.tier.on { background: rgba(111,198,255,.17); border-color: rgba(111,198,255,.55); }
.tier-name { font-weight: 700; font-size: 14px; }
.tier.on .tier-name { color: var(--accent, #6fc6ff); }
.tier-hint { color: var(--ink-dim); font-size: 12px; line-height: 1.35; }
.switch {
  appearance: none; width: 48px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid var(--line); position: relative;
  transition: background .18s ease;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #dbeaf7; transition: transform .18s ease;
}
.switch:checked { background: rgba(63, 208, 122, .55); }
.switch:checked::after { transform: translateX(20px); }

.hint { font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin: 0; }
.field {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: rgba(8, 17, 28, .6); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; resize: none;
}
.field:focus { outline: none; border-color: var(--accent); }
.field::placeholder { color: var(--ink-faint); }

/* Flight coach (roadmap 5.3): the angle you held against the best line
   available, and what the gap between them was worth. */
.coach-chart { width: 100%; height: auto; display: block; border-radius: 10px;
  background: rgba(255,255,255,.03); }
.coach-key { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
  font-size: 12px; color: var(--ink-dim); }
.coach-key i { display: inline-block; width: 16px; height: 3px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle; font-style: normal; }
.loss { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.loss:last-child { border-bottom: 0; }
.loss b { font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; }
.loss p { margin: 3px 0 0; font-size: 12px; color: var(--ink-dim); }

/* A challenge code is read aloud and typed in by hand, so it is set wide and
   monospaced: the alphabet already excludes O/0 and I/1, and the tracking
   keeps the rest from running together. */
.code-field, .code-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .22em; text-align: center; font-weight: 800;
}
.code-field { font-size: 26px; text-transform: uppercase; }
.code-box {
  font-size: clamp(28px, 8vw, 40px); padding: 14px 8px; border-radius: 12px;
  background: rgba(111, 198, 255, .14); border: 1px solid rgba(111, 198, 255, .35);
  color: var(--accent);
}
.hint b { color: var(--ink); font-weight: 600; }

/* Short landscape phones: tighten everything up. */
@media (max-height: 460px) {
  :root { --pad: 10px; }
  .brand-mark { width: 52px; height: 32px; }
  .brand h1 { font-size: 27px; }
  .btn { padding: 9px 14px; border-radius: 12px; }
  .btn-title { font-size: 14px; }
  .btn-sub { font-size: 11px; }
  .menu, .menu-main, .menu-more { gap: 7px; }
  .title-inner { gap: 10px; }
  .card { padding: 10px 13px; border-radius: 13px; }
  .panel { gap: 8px; }
  .big-dist b { font-size: 38px; }
  .board { max-height: 38vh; }
  .hill { padding: 9px 12px; }
  .hill-badge { width: 44px; height: 44px; font-size: 13px; }
}

/* Landscape-only prompt for the browser build. Hidden unless a narrow screen
   is actually held in portrait, so it never appears on a desktop window that
   happens to be tall, nor on a tablet where the game is perfectly playable. */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 80;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 24px; text-align: center;
    background: linear-gradient(170deg, #0c1c2e 0%, #0a1522 52%, #071019 100%);
    color: var(--ink);
  }
  #rotate p { margin: 0; max-width: 22em; }
  #rotate .hint { margin-top: 6px; }
  .rotate-icon {
    font-size: 54px; line-height: 1; color: var(--accent); margin-bottom: 10px;
    transform: rotate(0deg); animation: rotate-hint 2.4s ease-in-out infinite;
  }
}
@keyframes rotate-hint {
  0%, 30% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

/* Brief, non-blocking feedback - used by the share flow, which otherwise has
   no way to say whether anything happened. */
#toast {
  position: fixed; left: 50%; bottom: calc(22px + var(--safe-b, 0px));
  transform: translate(-50%, 14px);
  background: rgba(10, 22, 36, .96); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .18s ease, transform .18s ease;
  max-width: min(90vw, 420px); text-align: center;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Suit picker. A swatch shows the three colours a suit actually is, so the
   grid reads without having to imagine the jumper wearing it. */
.suits { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.suit {
  appearance: none; font: inherit; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: background .15s ease, border-color .15s ease;
}
.suit:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.suit.on { background: rgba(111,198,255,.17); border-color: rgba(111,198,255,.6); }
.suit.locked { opacity: .5; cursor: default; }
.suit-swatch {
  position: relative; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.35);
}
.suit-swatch i { position: absolute; left: 50%; top: 22%; width: 8px; height: 62%;
  transform: translateX(-50%); border-radius: 2px; }
.suit-swatch u { position: absolute; left: 50%; top: -5px; width: 13px; height: 13px;
  transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(0,0,0,.3); }
.suit-name { font-size: 12px; font-weight: 700; }
.suit.on .suit-name { color: var(--accent); }
.suit-need { font-size: 10px; line-height: 1.25; color: var(--ink-dim); text-align: center; }

/* Maker's credit under the wordmark. Quiet on purpose - it sits with the
   tagline rather than competing with it. */
.byline {
  margin: 2px 0 0; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}