/* Far Out: additions to style.css */

.stage-intro { margin-top: 2rem; }
.stage-intro .big {
  display: block;
  margin: 0.5rem 0 1.25rem;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.stage-intro p { max-width: 26rem; }
.stage-intro .lead { margin-top: 0.5rem; }
.peek .timer { max-width: 26rem; margin: 1.25rem 0 0.75rem; }
.stage-intro .solid { margin-top: 1.5rem; padding: 0.75rem 1.5rem; font-size: 1.0625rem; }
.stage-intro .fine { margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); }

/* the clock for the current link */
.timer { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; }
.timer__track { flex: 1; height: 6px; background: var(--paper-2); border: 1px solid var(--rule); }
.timer__bar {
  display: block;
  height: 100%;
  width: calc(var(--left, 1) * 100%);
  background: var(--ink);
}
.timer--low .timer__bar { background: var(--accent); }
.timer__label { min-width: 2.25rem; text-align: right; font: 0.9375rem var(--mono); }
.timer--low .timer__label { color: var(--accent); font-weight: 700; }

/* the front screen: today's word, or a practice round */
.launch { display: flex; flex-direction: column; align-items: center; margin-top: 1.25rem; text-align: center; }
.launch__eyebrow { font: 12px var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.launch__artbox { margin: 0.5rem 0 0.25rem; color: var(--ink); }
.launch__art { display: block; width: 14.5rem; height: auto; max-width: 70vw; }
.launch__title { font: 700 2rem/1.15 var(--serif); letter-spacing: -0.01em; margin-top: 0.25rem; }
.launch__lead { max-width: 28rem; margin-top: 0.6rem; color: var(--muted); }
.launch__label { margin: 1.5rem 0 0.4rem; font: 12px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.launch__go { margin-top: 2rem; padding: 0.9rem 2.25rem; font-size: 1.125rem; min-width: 15rem; }
.launch__fine { max-width: 24rem; margin-top: 0.9rem; font-size: 0.875rem; color: var(--muted); }
/* the bar across the top while practising: says so, and leads back to the daily word or result */
.practicebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.9rem 0 0; padding: 0.45rem 0.75rem; background: var(--paper-2); border: 1px solid var(--rule); }
.practicebar__tag { font: 12px var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.practicebar__back { font-size: 0.9375rem; white-space: nowrap; }
.practicebar + .launch, .practicebar + .result, .practicebar + .play, .practicebar + .stage-intro { margin-top: 1rem; }
@media (max-width: 34rem) { .launch__title { font-size: 1.75rem; } .launch__go { width: 100%; } }

/* the tier strip: four tiers side by side, one cell per link */
.tier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: -0.5rem 0 1rem; }
.tier__seg { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tier__cells { display: flex; gap: 2px; }
.tier__cell { flex: 1; height: 8px; background: var(--paper-2); border: 1px solid var(--rule); box-sizing: border-box; }
.tier__cell.is-done { background: var(--ink); border-color: var(--ink); opacity: 0.45; }
.tier__seg--now .tier__cell.is-done { opacity: 1; }
.tier__cell.is-next { border-color: var(--ink); }
.tier__name, .tier__secs { font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tier__seg--now .tier__name { color: var(--ink); font-weight: 700; }
.tier__seg--now .tier__secs { color: var(--ink); }
.tier--up .tier__seg--now .tier__name, .tier--up .tier__seg--now .tier__secs { color: var(--accent); }

.word__tag--leap { color: var(--muted); }
.word--big .word__tag--leap { color: var(--accent); font-weight: 700; }

.score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
}
.score__num { font-size: 4rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.score__of { color: var(--muted); font-size: 1.25rem; }

.parts { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }
.part { display: grid; grid-template-columns: 4.5rem 1fr 3.5rem; align-items: center; gap: 0.75rem; }
.part__name { font: 0.8125rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.part__track { height: 10px; background: var(--paper-2); border: 1px solid var(--rule); }
.part__bar { display: block; height: 100%; width: var(--w); background: var(--ink); }
.part__n { font: 0.875rem var(--mono); text-align: right; }

.result .actions { margin-top: 1.25rem; }

/* on Far Out the result is the whole page, so it needs no rule of its own under the masthead */
#stage > .result { margin-top: 1.5rem; padding-top: 0; border-top: 0; }

/* ---- the dark star-chart theme (Far Out only; the shared style.css stays light) ---- */

body.far {
  --paper: #15120e;
  --paper-2: #211c16;
  --ink: #ece4d3;
  --muted: #a39984;
  --rule: #3a3329;
  --accent: #e0694d;
  --accent-ink: #15120e;
  --ok: #8fbf86;
  --good: #eec33f;   /* a good leap: yellow */
  --great: #e5483f;  /* a great leap: red (and the top of the rank scale) */
  color-scheme: dark;
}
body.far .masthead { border-bottom: 1px solid var(--ink); }
body.far dialog { border-color: var(--ink); }
body.far dialog::backdrop { background: rgb(0 0 0 / 0.7); }

.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* the countdown to tomorrow's word, under the result */
.countdown { margin-top: 1.5rem; text-align: center; font: 12px var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.countdown__time { margin-left: 0.4rem; font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; color: var(--ink); }

/* the "did you mean" words in the note under the input */
.entry__pick { font: inherit; font-weight: 700; color: var(--ink); padding: 0.25rem 0.15rem; }

/* ---- the credits page, and the link to it under the game ---- */

.credits { padding-bottom: 3rem; }
.credits section { margin-top: 1.75rem; }
.credits h2 { font: 700 1.125rem var(--serif); margin-bottom: 0.4rem; }
.credits p + p { margin-top: 0.5rem; }
.credits p, .credits li { color: var(--muted); }
.credits a { color: var(--ink); }
.credits code { font: 0.875em var(--mono); color: var(--ink); }
.site-foot { margin: 2.5rem auto 1rem; text-align: center; font: 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.site-foot a, .site-foot__link { color: var(--muted); display: inline-block; padding: 0.8rem 0.5rem; }   /* a big enough area to tap */
.site-foot a:hover, .site-foot__link:hover { color: var(--ink); }
.site-foot__link { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.site-foot span { margin: 0 0.1rem; color: var(--muted); }
@media (max-width: 34rem) { body:has(.peek) .site-foot { display: none; } }   /* nothing to tap away to during the 10-second read */

/* ---- the feedback form ---- */

.fb { display: grid; gap: 0.9rem; margin-top: 1rem; }
.fb__field { display: grid; gap: 0.3rem; font: 0.8125rem var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.fb__hint { text-transform: none; opacity: 0.8; }
.fb select, .fb textarea, .fb input[type="email"] {
  font: 1rem var(--serif); color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 0; padding: 0.5rem 0.6rem; width: 100%; box-sizing: border-box;
}
.fb textarea { resize: vertical; }
.fb select:focus, .fb textarea:focus, .fb input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.fb__note { font: 12px var(--mono); color: var(--muted); }
.fb__row { display: flex; align-items: center; gap: 1rem; }
#feedbackStatus { font: 0.8125rem var(--mono); color: var(--muted); }

/* ---- the stats dialog ---- */

.masthead__tools { display: flex; gap: 1.25rem; }
.stats__empty { color: var(--muted); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0 1.5rem; }
.stat b { display: block; font: 700 1.75rem/1.1 var(--serif); }
.stat span { font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stats__label { margin: 0 0 0.5rem; font: 11px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.spreadrow { display: grid; grid-template-columns: 6.5rem 1fr 1.5rem; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.spreadrow__name { font: 12px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.spreadrow__track { display: block; height: 9px; background: var(--paper-2); border: 1px solid var(--rule); }
.spreadrow__track i { display: block; height: 100%; }
.spreadrow__n { font: 12px var(--mono); text-align: right; }

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

.play { display: flex; flex-direction: column; }
.play .tier { margin: 1rem 0 0; }
.play .entry { margin: 0.25rem 0 0; }

.orbit { display: block; width: 100%; height: auto; margin: 0.25rem 0 0; }
.orbit__ring { fill: none; stroke: var(--ink); stroke-opacity: 0.2; }
.orbit__ring--edge { stroke-opacity: 0.32; }
.orbit__tick { fill: var(--ink); fill-opacity: 0.6; font: 10px var(--mono); letter-spacing: 0.08em; }
.orbit__path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.orbit__dot { fill: var(--ink); }
.orbit__dot--good { fill: var(--good); }
.orbit__dot--great { fill: var(--great); }
/* a halo in the page colour behind each word, so route lines pass behind the text instead of through it */
.orbit__word { fill: var(--ink); font: 12.5px var(--serif); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
.orbit__word--start { font-size: 15px; font-weight: 700; }
.orbit__word--good { fill: var(--good); }
.orbit__word--great { fill: var(--great); font-weight: 700; }
.orbit__word--start { font-size: 15px; font-weight: 700; }

/* the chart replaces the vertical trail on this page */
body.far .result .orbit { margin: 0 auto 1rem; max-width: 26rem; }

/* ---- the score so far, in the corner of the chart ---- */

.chartbox { display: grid; grid-template-columns: minmax(0, 1fr) 8.25rem; column-gap: 0.75rem; align-items: start; }
.chartbox > .hud { grid-column: 2; grid-row: 1; }
.chartbox > .orbit { grid-column: 1; grid-row: 1; }
/* on a wide screen the chart is centred on the page, with the score panel in a column of its own
   to the right and an empty column of the same width to the left to balance it, so the start word
   sits in the middle of the page and no chart word can run under the panel */
@media (min-width: 50rem) {
  .chartbox { grid-template-columns: 8.25rem minmax(0, 30rem) 8.25rem; width: 48rem; position: relative; left: 50%; transform: translateX(-50%); }
  .chartbox > .hud { grid-column: 3; }
  .chartbox > .orbit { grid-column: 2; }
}
.hud { width: 100%; padding: 0.25rem 0 0; text-align: right; font-family: var(--mono); }

/* on a narrow screen the panel is a small line under the chart, at the right, instead of a column beside
   it: with the keyboard up only a slice of the screen is visible, so the chart gets the room and the
   score sits just above the input */
@media (max-width: 34rem) {
  .chartbox { grid-template-columns: 1fr; }
  .chartbox > .hud, .chartbox > .orbit { grid-column: 1; }
  .chartbox > .orbit { grid-row: 1; }
  .chartbox > .hud { grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.1rem 0.7rem; text-align: right; padding: 0.1rem 0 0; }
  .hud__label { display: none; }
  .hud__score { font-size: 1.375rem; }
  .hud__rows { display: none; }
  .hud__gain, .hud__tier { margin-top: 0; font-size: 0.75rem; min-height: 0; }
  .hud__cap { margin-top: 0; }
}
.hud__label { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.hud__score { font: 700 2.25rem/1 var(--serif); letter-spacing: -0.02em; }
.hud__rows { margin-top: 0.4rem; font-size: 11px; line-height: 1.55; letter-spacing: 0.04em; color: var(--muted); }
.hud__rows div { display: flex; justify-content: space-between; gap: 0.5rem; }
.hud__rows b { color: var(--ink); font-weight: 400; }
.hud__gain { margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; min-height: 1.1em; }
.hud__gain small { font-size: 11px; letter-spacing: 0.1em; margin-left: 0.25rem; }
.gain--ok { color: var(--ink); }
.gain--good { color: var(--good); }
.gain--great { color: var(--great); }
.hud__tier { margin-top: 0.15rem; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .hud__gain--new, .hud__tier--new { animation: hud-pop 0.45s ease-out; }
  @keyframes hud-pop { from { opacity: 0; transform: translateY(6px) scale(1.25); } }
}

/* ---- rank titles ---- */

.hud__rank { margin-top: 0.15rem; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--tone, var(--ink)); }
@media (max-width: 34rem) { .hud__rank { margin-top: 0; } }

.rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: -0.25rem 0 1rem; }
.rank__name { font: 700 1.375rem var(--serif); color: var(--tone, var(--ink)); }
.rank__next { font: 0.8125rem var(--mono); letter-spacing: 0.04em; color: var(--muted); }

.part--boost .part__track { background: none; border-color: transparent; }
.part--boost .part__name, .part--boost .part__n { color: var(--good); }

.part--bonus { grid-template-columns: 1fr auto; }
.part--bonus .part__name { white-space: nowrap; }
.part--bonus .part__name, .part--bonus .part__n { color: var(--accent); }

.orbit__shift { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1; }

.part--held { grid-template-columns: 1fr auto; }
.part--held .part__name, .part--held .part__n { color: var(--muted); }
.hud__cap { margin-top: 0.4rem; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }

/* ---- the rank ladder on the result screen ---- */

.ladder { position: relative; margin: 1.1rem 0 1.5rem; padding-top: 1.7rem; }
.ladder__steps { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; }
.step { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.step__bar { display: block; height: 9px; background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; }
/* each rank has its own tone (--tone, set from the script): white at the bottom, shading to red at the top */
/* inside a step the fill shades from this rank's tone to the next one's, so the whole ladder reads
   as one gradient; the gradient is sized to the whole step, so a part-filled step shows its first part */
.step__bar i {
  display: block; height: 100%; width: var(--w);
  background: linear-gradient(to right, var(--tone), var(--tone-next, var(--tone)));
  background-size: calc(100% / max(var(--frac, 1), 0.01)) 100%; background-repeat: no-repeat;
}
.step__name { font: 11px var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.step--done .step__name { color: var(--tone); }
.step--now .step__name { color: var(--tone); font-weight: 700; }
.step__at { font: 11px var(--mono); color: var(--muted); }
.ladder__pin {
  position: absolute; top: 0; transform: translateX(-50%); padding: 0 0.3rem;
  font: 700 0.875rem var(--mono); color: var(--tone, var(--ink)); background: var(--paper);
}
.ladder__pin::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--tone, var(--ink));
}
@media (max-width: 34rem) {
  .ladder__steps { gap: 3px; }
  .step__name { font-size: 8.5px; letter-spacing: -0.02em; }   /* six rank names across a phone: "Pathfinder" has to fit its step */
  .step__at { font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* one continuous fill: each step waits for the one before it (--delay) and runs for its share (--dur) */
  .step__bar i { animation: ladder-fill var(--dur, 0s) linear var(--delay, 0s) backwards; }
  .ladder__pin { animation: ladder-pin var(--dur, 0s) linear; }
  @keyframes ladder-fill { from { width: 0; } }
  @keyframes ladder-pin { from { left: 3%; } }
}

.part__sub { display: block; margin-top: 0.1rem; font: 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.result__label { margin-top: 1.25rem; font: 12px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.result__label + .result__route { margin-top: 0.25rem; }

/* a long chain makes a long row of dots on the share card; let it wrap instead of pushing the page wider */
.result__card { overflow-wrap: anywhere; }

.stage-loading { margin: 3rem 0; text-align: center; color: var(--muted); letter-spacing: 0.08em; font-size: 0.85rem; }

.replaybar { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 0.25rem 0 0.75rem; }
.replay { padding: 0.6rem 0.9rem; }   /* a big enough area to tap */
.replay__controls { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 0.3rem; }
.replay__controls[hidden] { display: none; }
.replay__row { display: flex; align-items: center; gap: 0.75rem; }
.replay__name { width: 4.5rem; color: var(--muted); font: 11px var(--mono); letter-spacing: 0.1em; }
.replay__range { flex: 1; min-width: 0; accent-color: var(--ink); }
.replay__value { min-width: 3.2rem; text-align: right; color: var(--muted); font: 12px var(--mono); letter-spacing: 0.04em; }