/* map screens (Map, Live Map, Bus Driver). Base map + marker styles live in ../style.css */

/* Live Map */
.live-status { font-size: 18px; font-weight: 700; margin: 8px 0; }
.map.rough .marker.me { opacity: .5; }
.map .marker[data-marker="new"] .dot { fill: var(--accent-soft); stroke-width: .7; }
.map .marker[data-marker="new"] .icon { font-size: 3px; }
.map .marker.point .label { font-size: 2px; font-weight: 600; }

/* Calibrate panel (admin) */
.fit-line { font-weight: 600; }
.cal-points { border-top: 1px solid var(--border); margin-bottom: 12px; }
.cal-point { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cal-point .info { min-width: 0; }
.cal-point.bad { background: #fff3f2; margin: 0 -8px; padding: 8px; }
.cal-point.bad .info .muted { color: var(--low); font-weight: 700; }
.cal-add label { margin-top: 8px; }

/* Bus driver */
.ride { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.ride:first-of-type { border-top: none; }
.ride .info { flex: 1; min-width: 160px; }
.charge-result { background: #dcfce7; border: 1px solid #86efac; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.charge-result .unpaid { color: var(--low); font-weight: 600; margin-top: 4px; }
.charge-result button { margin-top: 8px; }

/* ---------- Place pins (mapView.js): one coloured dot per place ----------
   Selectors are a notch more specific than the old pin rules in style.css so these win. */
.map .pin { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.map .pin circle.hit, .map .pin:hover circle.hit, .map .pin.active circle.hit { fill: transparent; stroke: none; filter: none; }
.map .pin circle.halo { display: none; fill: #fff; stroke: rgba(0,0,0,.35); stroke-width: .25; filter: drop-shadow(0 .4px .6px rgba(0,0,0,.5)); }
.map .pin circle.dot {
  stroke: #fff; stroke-width: .55; filter: drop-shadow(0 .35px .45px rgba(0,0,0,.5));
  transform-box: fill-box; transform-origin: center; transition: transform .15s ease;
}
.map .pin.kind-wild circle.dot, .map .pin.kind-wild:hover circle.dot { fill: #e53935; }
.map .pin.kind-town circle.dot, .map .pin.kind-town:hover circle.dot { fill: #8e44ad; }
.map .pin.kind-gym circle.dot, .map .pin.kind-gym:hover circle.dot { fill: #f5c400; }
.map .pin:hover circle.dot { transform: scale(1.12); }
.map .pin.active circle.halo, .map .pin:focus-visible circle.halo { display: inline; fill: #fff; }
.map .pin.active circle.dot { transform: scale(1.3); stroke-width: .35; }
.map .pin text.label {
  font-size: 2.4px; font-weight: 800; fill: #1d2b1f; cursor: pointer; pointer-events: auto;
  paint-order: stroke; stroke: #fffbea; stroke-width: .65px; stroke-linejoin: round;
}
.map .pin.active text.label { fill: #000; font-size: 2.6px; }
/* Maps that take a tap on an exact spot (Bus Driver, Trainer, Live Map calibration): a wide
   place name must not catch the tap meant for the spot under it. */
.map.tappable .pin text.label { pointer-events: none; cursor: inherit; }

/* Legend under the map */
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
/* straight on the scenery (scenes.css) the legend would be grey text in a white glow, which looks
   smeared on the dark scenes: give it a light pill and plain dark text instead */
body.has-backdrop:not(.title-screen) main .map-legend:not(:is(.card, .modal, .map-side) *) {
  color: #343a46; background: rgba(255, 255, 255, .88); text-shadow: none;
  width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: 4px 10px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.kind-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); flex: none; }
.kind-dot.kind-wild { background: #e53935; }
.kind-dot.kind-town { background: #8e44ad; }
.kind-dot.kind-gym { background: #f5c400; }
.kind-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 9px 2px 5px; border-radius: 999px; vertical-align: middle; background: #eef0f5; color: var(--text); }
.kind-chip.kind-wild { background: #fde4e3; color: #b3261e; }
.kind-chip.kind-town { background: #f1e4f7; color: #6c3483; }
.kind-chip.kind-gym { background: #fff4c2; color: #806500; }
.kind-chip .kind-dot { width: 10px; height: 10px; border-width: 1.5px; }

/* ---------- Map screen (views/map.js) ---------- */
.map-wrap { position: relative; }
.map-stage { position: relative; }
.map-stage > svg.map { display: block; }
.map-fs-btn {
  position: absolute; top: 8px; right: 8px; width: 46px; height: 46px; padding: 0;
  font-size: 24px; line-height: 46px; text-align: center; border-radius: 12px;
  background: rgba(255,255,255,.92); color: #1f2430; border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.map-fs-btn:hover { background: #fff; color: var(--accent); }
.map-fs-close, .map-side, .map-side-show { display: none; }

.place-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.place-head h2, .place-head h3 { margin: 0; }
.place-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.place-facts > span { background: #f3f5fa; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-weight: 600; font-size: 14px; }
.place-mons { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.place-mon { display: flex; align-items: center; gap: 8px; }
.place-mon .tag.got { margin-left: 4px; }
.place-note { margin-top: 10px; }

/* Full screen map: fills the screen in landscape. With requestFullscreen + an orientation lock
   the viewport is already landscape; otherwise (iPhone) a portrait phone gets the stage turned 90°.
   map.js sizes and turns the stage in whole pixels (inline styles, class .rotated): a turned layer
   at a fractional size or offset gets resampled and its text goes soft. The @media rule below is
   only the fallback for the moment before the script runs. No will-change / 3D transforms here. */
body.map-fullscreen { overflow: hidden; }
body.map-fullscreen header.sticky { display: none; }
.map-wrap.fs { position: fixed; inset: 0; z-index: 45; background: #16301a; overflow: hidden; }
.map-wrap.fs .map-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.map-wrap.fs svg.map { width: 100%; height: 100%; border: 0; border-radius: 0; }
.map-wrap.fs .map-fs-btn { display: none; }
@media (orientation: portrait) {
  .map-wrap.fs .map-stage {
    width: 100vh; width: 100dvh; height: 100vw;
    left: 100vw; transform: rotate(90deg);
  }
}
.map-wrap.fs .map-fs-close {
  display: block; position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 46px; height: 46px; padding: 0; font-size: 22px; border-radius: 50%;
  background: #121923; color: #fff; border: 2px solid #c9d1dc;
}
/* The info side bar: solid background, plain text (no glow from the scenery rules in scenes.css,
   whatever their specificity: the id wins), at least 12px everywhere, strong contrast. */
.map-wrap.fs .map-side {
  display: block; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
  width: var(--map-side-w, 33%); max-width: 280px; min-width: 170px; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  background: #121923; color: #fff; font-size: 14px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/* Turned on a portrait phone: the side bar's left edge is the top of the screen (status bar / notch). */
.map-wrap.fs .map-stage.rotated .map-side { padding-left: max(12px, env(safe-area-inset-top)); padding-bottom: 10px; }
.map-wrap.fs .map-stage.rotated .map-fs-close { right: max(8px, env(safe-area-inset-bottom)); }
.map-wrap.fs :is(#map-side, #map-side *, .map-side-show, .map-fs-close) { text-shadow: none; }
.map-wrap.fs .map-side.empty { bottom: auto; }
.map-wrap.fs.side-hidden .map-side { display: none; }
.map-side-hide {
  float: right; width: 36px; height: 36px; padding: 0; margin: -2px -4px 4px 6px; font-size: 22px; line-height: 1;
  border-radius: 50%; background: #2a3342; color: #fff; border: 1px solid #5b6576;
}
.map-side-hide:hover { background: #3a4456; }
.map-wrap.fs.side-hidden .map-side-show {
  display: block; position: absolute; left: 8px; top: 8px; z-index: 2; width: 46px; height: 46px; padding: 0;
  font-size: 22px; border-radius: 50%; background: #121923; border: 2px solid #c9d1dc;
}
.map-side h3 { font-size: 17px; color: #fff; margin: 0; }
.map-side p { margin: 0 0 8px; }
.map-side .small { font-size: 13px; }
.map-side .muted { color: #d3dae4; }
.map-side .place-head { margin-bottom: 6px; gap: 6px; }
.map-side .place-facts { gap: 4px; margin-bottom: 8px; }
.map-side .place-facts > span { background: #2a3342; border-color: #4a5466; color: #fff; padding: 3px 8px; font-size: 13px; }
.map-side .place-mons { grid-template-columns: 1fr; gap: 4px; }
.map-side .place-mon { gap: 6px; }
.map-side .sprite.sm { width: 36px; height: 36px; }
.map-side .type { font-size: 12px; padding: 1px 6px; letter-spacing: .2px; }
.map-side .tag { font-size: 12px; }
.map-side .kind-chip { font-size: 13px; }
.map-side .gym-team { display: flex; flex-wrap: wrap; gap: 2px 8px; }

/* Secure link switch (secure.js) */
.secure-switch .secure-lead { font-size: 18px; font-weight: 700; }
.secure-switch .secure-go { display: block; width: 100%; text-align: center; padding: 18px; font-size: 20px; margin: 4px 0 12px; }
.secure-switch .secure-help { background: #fff8e1; border: 1px solid #f5d547; border-radius: 10px; padding: 10px 12px; }