/* ==============================================================
   Geomeister - nautical-chart instrument panel
   ink / paper / magenta (target) / cyan (your fix) / amber (score)
   ============================================================== */

:root {
  --ink:        #0a1620;
  --ink-2:      #12222e;
  --ink-3:      #1b3040;
  --paper:      #e9dfc8;
  --muted:      #8da2ae;
  --magenta:    #e4407f;
  --cyan:       #4fc3d9;
  --amber:      #f0b24b;

  --bar-top:    64px;
  --bar-bottom: 60px;

  --display: 'IBM Plex Sans Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; }

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

.sheet {
  position: relative;
  height: 100%;
  height: 100dvh;      /* tracks mobile browser chrome; 100% is the fallback */
  overflow: hidden;
}

/* -- Panorama ------------------------------------------------ */

.pano { position: absolute; inset: 0; background: var(--ink-2); }

.pano__frame { position: absolute; inset: 0; }

.pano__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Soft blend under the opaque bars. Never intercepts pointer events. */
.pano__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(to bottom, rgba(10,22,32,.55) 0, rgba(10,22,32,0) 120px),
    linear-gradient(to top,    rgba(10,22,32,.45) 0, rgba(10,22,32,0) 110px);
}

/* -- Chrome bars (these double as the cover over the embed UI) -- */

.bar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  background: var(--ink);          /* opaque: that is the point */
  color: var(--paper);
}

.bar--top {
  top: 0;
  height: var(--bar-top);
  justify-content: space-between;
  border-bottom: 1px solid rgba(233,223,200,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.bar--bottom {
  bottom: 0;
  height: var(--bar-bottom);
  justify-content: space-between;
  border-top: 1px solid rgba(233,223,200,.22);
  box-shadow: 0 -10px 26px rgba(0,0,0,.45);
}

.bar__group { display: flex; align-items: center; gap: 12px; min-width: 0; }

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rule { width: 22px; height: 1px; background: rgba(233,223,200,.4); }

.coordline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.readout__label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.readout__value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 20px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}

.lbl-short { display: none; }

.credit, .hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hint { color: rgba(141,162,174,.66); }

.linkbtn {
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.linkbtn:hover { color: var(--paper); }
a.linkbtn { text-decoration: underline; text-underline-offset: 3px; }

/* -- Signature: the graduated round scale -------------------- */
/* A chart distance-scale. Each cell is one round; the bar rising
   from the neatline is that round's score out of 5,000.        */

.scale {
  display: flex;
  align-items: flex-end;
  height: 38px;
  border-bottom: 1px solid rgba(233,223,200,.45);
}

.station {
  position: relative;
  width: 46px;
  height: 100%;
  border-left: 1px solid rgba(233,223,200,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.station:last-child { border-right: 1px solid rgba(233,223,200,.45); }

.station__fill {
  width: 100%;
  height: calc(var(--fill, 0) * 30px);
  background: linear-gradient(to top, rgba(240,178,75,.85), rgba(240,178,75,.3));
  transition: height .6s var(--ease);
}

.station__num {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(141,162,174,.75);
}

.station.is-current { background: rgba(228,64,127,.1); }
.station.is-current .station__num { color: var(--magenta); }
.station.is-current::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--magenta);
}

/* -- Guess panel --------------------------------------------- */

/* Anchored bottom-left, not bottom-right, to leave the embed's own compass
   and zoom controls uncovered. The compass is a fair aid - it gives heading,
   never position, and reading the sun against north is the kind of inference
   the game should reward. Freeing the whole corner rather than threading the
   panel around the controls keeps this robust to wherever Google puts
   them. */
.guess {
  position: absolute;
  left: 16px;
  bottom: calc(var(--bar-bottom) + 16px);
  z-index: 30;
  width: 320px;
  background: rgba(10,22,32,.94);
  border: 1px solid rgba(233,223,200,.25);
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: width .28s var(--ease);
}

.guess.is-open { width: min(560px, 46vw); }

.guess__map {
  height: 210px;
  background: var(--ink-2);
  transition: height .28s var(--ease);
}
.guess.is-open .guess__map { height: min(420px, 48vh); }

.guess__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.guess__toggle:hover { color: var(--paper); }

.guess__toggle-icon {
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-right-width: 3px;
  border-bottom-width: 3px;
}
.guess.is-open .guess__toggle-icon { border-width: 3px 1px 1px 3px; }

/* -- Buttons -------------------------------------------------- */

.btn {
  border: 1px solid transparent;
  padding: 11px 16px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .18s var(--ease), color .18s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--magenta); color: #fff; }
.btn--primary:hover { background: #f2588f; }
.btn--primary:disabled {
  background: transparent;
  border-color: rgba(233,223,200,.28);
  color: rgba(141,162,174,.8);
  cursor: default;
  transform: none;
}
.btn--lg { padding: 15px 30px; font-size: 14px; }

/* -- Curtains (start / result / summary) ---------------------- */

.curtain {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(27,48,64,.97), rgba(10,22,32,.99));
}
.curtain.is-visible { display: flex; animation: rise .45s var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.card {
  width: min(520px, 100%);
  border: 1px solid rgba(233,223,200,.24);
  background: rgba(10,22,32,.7);
  padding: 40px;
  text-align: left;
}
.card--wide { width: min(640px, 100%); }

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--magenta);
}

.display {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 76px);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.lede {
  margin: 0 0 28px;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(233,223,200,.78);
}

.specs {
  display: flex;
  gap: 34px;
  margin: 0 0 32px;
  padding: 18px 0;
  border-top: 1px solid rgba(233,223,200,.2);
  border-bottom: 1px solid rgba(233,223,200,.2);
}
.specs dt {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.specs dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--paper);
}

/* -- Result plot ---------------------------------------------- */

.curtain--result { padding: 0; }

.plot {
  display: grid;
  grid-template-columns: 1fr 380px;
  width: 100%;
  height: 100%;
}

.plot__map { min-height: 0; background: var(--ink-2); }

.plot__data {
  padding: 44px 40px;
  border-left: 1px solid rgba(233,223,200,.22);
  background: var(--ink);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.scoreline { margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; }
.scoreline__value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 62px;
  line-height: 1;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.scoreline__unit {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.scoreline--hero .scoreline__value { font-size: clamp(64px, 13vw, 108px); }

.meter {
  height: 3px;
  background: rgba(233,223,200,.16);
  margin-bottom: 34px;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--amber);
  transition: width .8s var(--ease);
}

.fields { margin: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.field--wide { grid-column: 1 / -1; }
.fields dt {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.fields dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.35;
  color: var(--paper);
}
.fields .field__sub { margin-top: 5px; font-size: 12px; color: var(--muted); }

.plot__data .btn { margin-top: 34px; }

/* -- Final log ------------------------------------------------ */

.verdict {
  margin: 0 0 28px;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(233,223,200,.78);
}

.log { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid rgba(233,223,200,.2); }
.log li {
  display: grid;
  grid-template-columns: 44px 1fr 120px 76px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(233,223,200,.12);
  font-family: var(--mono);
  font-size: 13px;
}
.log__n { color: var(--magenta); font-size: 11px; letter-spacing: .1em; }
.log__place { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__dist { color: var(--muted); text-align: right; }
.log__pts { color: var(--amber); text-align: right; font-weight: 600; }

.progress {
  margin: -14px 0 30px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
}

/* -- Stats and the trend chart -------------------------------- */

.bar__links { display: flex; align-items: center; gap: 18px; }

.subhead {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.disclose {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid rgba(233,223,200,.2);
  border-bottom: 1px solid rgba(233,223,200,.2);
  padding: 13px 2px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.disclose:hover { color: var(--paper); }
.disclose__mark {
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .2s var(--ease);
}
.disclose[aria-expanded="true"] .disclose__mark { transform: rotate(90deg); }

.chart { position: relative; margin: 20px 0 4px; }
.chart[hidden] { display: none; }
.chart__plot svg { width: 100%; height: auto; display: block; overflow: visible; }

.chart__grid { stroke: rgba(233,223,200,.12); stroke-width: 1; }
.chart__tick {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
}
.chart__band { fill: rgba(141,162,174,.16); }
.chart__line { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { fill: var(--amber); stroke: var(--ink); stroke-width: 2; }
.chart__cursor { stroke: rgba(233,223,200,.35); stroke-width: 1; stroke-dasharray: 2 4; }
.chart__hit { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
#chartSurface { cursor: crosshair; }

.chart__tip {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s var(--ease);
  background: var(--ink-3);
  border: 1px solid rgba(233,223,200,.28);
  padding: 6px 9px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper);
}
.chart__tip b { color: var(--amber); font-weight: 600; }
.chart__tip span { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }

.chart__caption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--muted);
}
.chart__empty { margin: 0; color: var(--muted); font-size: 13px; }

.runs {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  max-height: 232px;
  overflow-y: auto;
}
.runs li {
  display: grid;
  grid-template-columns: 52px 1fr 96px 74px;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid rgba(233,223,200,.12);
  font-family: var(--mono);
  font-size: 12px;
}
.runs .run__n { color: var(--magenta); font-size: 10px; letter-spacing: .1em; }
.runs .run__when { color: var(--muted); }
.runs .run__km { color: var(--muted); text-align: right; }
.runs .run__score { color: var(--amber); text-align: right; font-weight: 600; }

.rowbtns { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* -- Leaflet overrides ---------------------------------------- */

.leaflet-container {
  background: #0d1c26;
  font-family: var(--mono);
  cursor: crosshair;
}
.leaflet-control-attribution {
  background: rgba(10,22,32,.8) !important;
  color: var(--muted) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-bar a {
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(233,223,200,.25);
}
.leaflet-bar a:hover { background: var(--ink-3); color: var(--paper); }

.pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px rgba(233,223,200,.6);
}
.pin--guess  { background: var(--cyan); }
.pin--target { background: var(--magenta); }

/* -- Responsive ----------------------------------------------- */

@media (max-width: 900px) {
  .scale { display: none; }
  .hint { display: none; }

  /* The bar carries an attribution and three controls; at this width the
     full labels cannot fit, so the short ones take over. */
  .lbl-long { display: none; }
  .lbl-short { display: inline; }

  .bar { gap: 10px; padding: 0 12px; }
  .wordmark { font-size: 15px; letter-spacing: .1em; }
  .rule { display: none; }
  .readout__label { display: none; }
  .readout__value { font-size: 17px; }
  .bar__links { gap: 14px; }

  .plot { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; }
  .plot__data { border-left: 0; border-top: 1px solid rgba(233,223,200,.22); padding: 26px 20px; }
  .scoreline__value { font-size: 46px; }
  .fields { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .card { padding: 26px 20px; }
  .subhead { font-size: 27px; }

  /* Four figures will not sit on one line on a phone. */
  .specs { flex-wrap: wrap; gap: 18px 26px; }
  .specs dd { font-size: 17px; }

  /* Still leaves a right-hand gutter clear so the compass survives on a
     phone, where the panel would otherwise span the full width. */
  .guess { left: 12px; right: 92px; width: auto; }
  .guess.is-open { width: auto; }
  .guess__map { height: 168px; }
  .guess.is-open .guess__map { height: min(300px, 38vh); }

  .log li { grid-template-columns: 30px 1fr 84px; }
  .log__dist { display: none; }

  .runs { max-height: 40vh; }
  .runs li { grid-template-columns: 38px 1fr 76px; gap: 10px; }
  .runs .run__km { display: none; }

  .rowbtns { flex-direction: column; align-items: stretch; gap: 14px; }
  .rowbtns .btn { width: 100%; }
  .chart__tip { font-size: 10px; }
}

/* Very narrow. The credit stays: it stands in for the Google logo the bar
   covers, so it is the last thing that should be dropped. Measured at this
   width it fits alongside the short labels with room to spare. */
@media (max-width: 430px) {
  .bar { gap: 8px; padding: 0 10px; }
  .bar__links { gap: 11px; }
  .credit { flex: 0 1 auto; min-width: 0; }
  .btn--lg { padding: 14px 20px; font-size: 13px; }
  .display { font-size: clamp(38px, 13vw, 54px); }
  .guess { right: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}