/* ============================================================
   Spelcomponenten — "Stations zoeken op de Spoorkaart"
   Visuele leidraad: .context/design-pick/approved-mock/index.html
   ============================================================ */

.app {
  width: 100%;
  max-width: 460px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 10px)
           calc(env(safe-area-inset-right) + 12px)
           calc(env(safe-area-inset-bottom) + 12px)
           calc(env(safe-area-inset-left) + 12px);
  gap: 10px;
}

/* ── Topbalk ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ns-logo {
  width: 30px; height: 30px; flex: none;
  border-radius: 7px;
  background: #ffd200;
  display: grid; place-items: center;
  box-shadow: var(--shadow-button);
}
.ns-logo svg { width: 22px; height: 22px; display: block; }
.brand h1 {
  font-size: 0.96rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-deep);
  letter-spacing: var(--letter-spacing-display);
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icon-btn {
  flex: none;
  width: 44px; height: 44px;
  border: none;
  border-radius: var(--radius-round);
  background: var(--surface-panel-card);
  color: var(--color-brown-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.2s ease;
}
.icon-btn:hover { background: var(--surface-panel-card-bright); }
.icon-btn:active { transform: rotate(-180deg); }
.icon-btn svg { width: 20px; height: 20px; }

/* ── Promptkaart ─────────────────────────────────────────── */
.prompt {
  background: var(--surface-panel-card);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prompt-main { min-width: 0; }
.prompt .label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: #8a623f;
}
.prompt .station {
  font-size: 1.45rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-deep);
  line-height: 1.1;
  margin-top: 2px;
}
.roundpill {
  flex: none;
  text-align: center;
  background: var(--menu-selected-bg);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}
.roundpill .n {
  font-size: 1.05rem; font-weight: 700; color: var(--color-brown-deep);
  font-variant-numeric: tabular-nums;
}
.roundpill .c {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: .05em;
  color: #8a623f; font-weight: 600;
}

/* ── Kaartoppervlak ──────────────────────────────────────── */
.mapwrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: linear-gradient(160deg, #cfe0e2 0%, #bcd2d6 100%);
  border: 3px solid #e8d39a;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(101, 67, 33, .12);
  overflow: hidden;
}
.map-svg {
  width: 100%; height: 100%; display: block;
  touch-action: manipulation;
  cursor: crosshair;
}

.map-land { fill: #f3e2b4; stroke: #9c7a3c; stroke-width: 3; stroke-linejoin: round; }
.map-water { fill: #bcd2d6; stroke: #9bb6bb; stroke-width: 2; }
.rail-main path { fill: none; stroke: #2b2b2b; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.rail-red path { fill: none; stroke: #c8453a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.station-dot { fill: #1c1c1c; }

/* Markers (overlay) */
.dist-line { stroke: #583286; stroke-width: 3; stroke-dasharray: 9 7; }
.guess-pin .pin-body { fill: #583286; stroke: #fffdf6; stroke-width: 2.5; }
.guess-pin .pin-dot { fill: #fffdf6; }
.actual-halo { fill: rgba(76, 175, 80, 0.3); }
.actual-dot { fill: var(--color-success); stroke: #fffdf6; stroke-width: 2.5; }
.label-bg { fill: rgba(255, 253, 246, 0.92); }
.label-text {
  fill: #1f5a33; font-family: var(--font-family-ui);
  font-size: 19px; font-weight: 700;
}

.maptitle {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 0.62rem; font-weight: 700;
  color: #5b4a2a;
  background: rgba(255, 253, 246, .7);
  padding: 3px 7px; border-radius: 6px;
  letter-spacing: .02em;
}
.legend {
  position: absolute; right: 8px; top: 8px;
  background: rgba(255, 253, 246, .82);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.56rem; color: #5b4a2a; line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.legend .row { display: flex; align-items: center; gap: 5px; }
.legend .ln { width: 16px; height: 0; border-top: 2px solid #2b2b2b; }
.legend .ln.red { border-top-color: #c8453a; }

/* ── Reveal-banner ───────────────────────────────────────── */
.reveal {
  background: var(--surface-panel-card);
  border: var(--border-subtle);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
}
.reveal--hint {
  border-left-color: rgba(101, 67, 33, 0.18);
  box-shadow: none;
  background: rgba(255, 253, 246, 0.6);
}
.reveal .txt { font-size: var(--font-size-sm); color: var(--color-brown-muted); }
.reveal .txt b { color: var(--color-brown-deep); }
.reveal--hint .txt { font-style: italic; }
.reveal .pts {
  font-size: 1.3rem; font-weight: 800; color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

/* ── Totaalscore ─────────────────────────────────────────── */
.totals {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
  font-size: var(--font-size-sm);
  color: var(--color-brown-muted);
}
.totals b {
  color: var(--color-brown-deep);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* ── Primaire actie ──────────────────────────────────────── */
.cta {
  width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff6e5;
  background: var(--gradient-button-primary);
  box-shadow: var(--shadow-button);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.15s ease;
}
.cta:hover:not(:disabled) { filter: brightness(1.06); }
.cta:disabled {
  background: var(--gradient-button-disabled);
  box-shadow: none;
  opacity: 0.7;
  cursor: default;
}
.cta svg { width: 20px; height: 20px; }

/* ── Eindmodal ───────────────────────────────────────────── */
.end-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(45, 30, 15, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1000;
}
.end-modal--hidden { display: none; }
.end-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface-panel-card-bright);
  border: var(--modal-surface-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  padding: 28px 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.end-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: #8a623f;
}
.end-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-deep);
}
.end-score {
  font-size: 3rem;
  font-weight: var(--font-weight-heavy);
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.end-sub {
  margin: 0 0 14px;
  font-size: var(--font-size-sm);
  color: var(--color-brown-muted);
}
.end-restart { max-width: 260px; }

/* ── Bredere viewports (tablet/desktop) ──────────────────── */
@media (min-width: 540px) {
  .app { max-width: 480px; }
}