/* One stylesheet for every page. Dark, big touch targets, no framework. */
:root {
  --ink: #e8e2d9;
  --dim: #9b9288;
  --bg: #12100f;
  --panel: #1c1917;
  --line: #2f2a26;
  --blood: #8c1c13;
  --good: #3f7d3f;
  --gold: #c8a34a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2 { font-weight: 600; letter-spacing: .02em; margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 52px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
button:active { transform: translateY(1px); }
button.small { width: auto; min-height: 0; padding: 7px 12px; font-size: 14px; border-radius: 8px; }
button.primary { background: var(--blood); border-color: #a82a1f; text-align: center; font-weight: 600; }

input, select, textarea {
  font: inherit;
  color: inherit;
  background: #17140f;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  width: 100%;
}

/* --- player: map screen --------------------------------------------------- */
.screen { display: flex; flex-direction: column; height: 100%; }

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.bar .grow { flex: 1; min-width: 0; }
.bar .step { color: var(--dim); font-size: 13px; }
.bar h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#map { flex: 1; background: #0b0a09; }

.foot {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.dist { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dist small { font-size: 15px; font-weight: 400; color: var(--dim); }
.note { color: var(--dim); font-size: 14px; }
.note.hot { color: var(--gold); font-weight: 600; }

/* The target: a radar ping at the centre of the search circle. Drawn in CSS so
   there is no image file, and animated because movement is the only thing that
   finds a marker across a dark field. The circle itself is a Leaflet circle in
   metres — it has to shrink and grow with the zoom, a fixed pixel ring would
   promise a precision that neither GPS nor a hand-placed marker has. */
.ping { position: relative; width: 18px; height: 18px; }
.ping i {
  position: absolute; inset: 0; border-radius: 50%;
  background: #ff3b2f; box-shadow: 0 0 10px #ff3b2f;
}
.ping::before, .ping::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #ff3b2f;
  animation: ping 2.4s ease-out infinite;
}
.ping::after { animation-delay: 1.2s; }
@keyframes ping {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(5.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ping::before, .ping::after { animation: none; opacity: .5; }
}
.leaflet-container { background: #0b0a09; }
.leaflet-control-attribution { display: none; }
.leaflet-bar a { background: var(--panel); color: var(--ink); border-color: var(--line); }

/* --- player: question screen --------------------------------------------- */
.card {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.place { color: var(--gold); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.question { font-size: 21px; line-height: 1.35; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choices button.wrong { border-color: var(--blood); animation: shake .35s; }
.choices button.right { border-color: var(--good); background: #1d2c1d; }
@keyframes shake {
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.verdict { min-height: 24px; font-weight: 600; }
.verdict.bad { color: #e0736a; }
.verdict.ok { color: #8fd18f; }

/* The voice button. A phone will not autoplay before the page is tapped, so this
   is the only thing that starts the keeper — it has to read as a play control at
   a glance. The triangle is drawn with borders rather than a glyph, because ▶
   turns into a coloured emoji on some Android builds. */
button.speak { display: flex; align-items: center; gap: 12px; }
button.speak .icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--blood);
  display: grid; place-items: center;
}
button.speak .icon::before {
  content: '';
  display: block;
  margin-left: 3px;                 /* optical centre: a triangle sits left-heavy */
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #f3e9e7;
}
button.speak.playing .icon { background: var(--good); }

/* --- admin ---------------------------------------------------------------- */
.admin { max-width: 900px; margin: 0 auto; padding: 18px 16px 60px; }
.admin h1 { font-size: 22px; margin-bottom: 4px; }
.admin .hint { color: var(--dim); font-size: 14px; margin: 0 0 18px; }
.station {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.station header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.station header .no {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blood);
  font-weight: 700; font-size: 14px;
}
.station header .slug { color: var(--dim); font-size: 13px; font-family: ui-monospace, monospace; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 4px; }
.choice-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.choice-row input[type=radio] { width: auto; flex: none; }
.sticky {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 0;
  background: linear-gradient(transparent, var(--bg) 40%);
}
.saved { color: #8fd18f; font-size: 14px; }
.events { font-family: ui-monospace, monospace; font-size: 12px; color: var(--dim); }
.events div { padding: 2px 0; border-bottom: 1px solid var(--line); }