/* Rodada · overrides for dotmatrix + map visuals. */
:root {
  /* Override phosphor accents to the "aggressive" palette validated in mockups. */
  --dm-accent: #ffb000;       /* amber — warnings / labels */
  --dm-accent-2: #ff5b1a;     /* hot — bike / PR */
  --dm-success: #00d966;      /* phosphor green — OK / live */
  --dm-cyan: #18e0ff;         /* cyan — longboard */
}

body { background: #0e0e0e; color: #cfcfcf; font-family: ui-monospace, "DM Mono", "Menlo", monospace; }
header.dm-bar { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.4rem 1rem; border-bottom: 1px dashed #2a2a2a; }
header.dm-bar small { opacity: 0.55; margin-left: auto; }

/* status badge in top bar */
#status { font-weight: bold; letter-spacing: 0.5px; }
#status[data-kind="ok"]  { color: var(--dm-success); }
#status[data-kind="err"] { color: #ff3030; }

/* Picker grid: 3 mode buttons side-by-side on >=360px, stacked <360px. */
.dm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
@media (max-width: 360px) { .dm-grid-3 { grid-template-columns: 1fr; } }
.dm-grid-3 button {
  background: #181818; color: var(--dm-accent); border: 1px solid var(--dm-accent);
  padding: 1.2rem 0.5rem; text-align: center; font-family: inherit; cursor: pointer;
}
.dm-grid-3 button:hover { background: #20180a; }
.dm-grid-3 .emoji { display: block; font-size: 1.7rem; }

/* Ride map fills the viewport: */
.ride-map { padding: 0; }
/* Phosphor urban-night filter.
   inverts (so light streets on dark background) then rotates hue to amber,
   slightly desaturates parks, bumps contrast, dims midtones. Matches
   dotmatrix mockup 004-maps-dotmatrix feel without forking OSM. */
.leaflet-host { width: 100%; height: 56vh; min-height: 360px; background: #0a0a0a; }
.leaflet-host .leaflet-tile-pane {
  filter:
    invert(1)
    hue-rotate(180deg)
    sepia(0.55)
    hue-rotate(-15deg)
    saturate(2.4)
    contrast(1.35)
    brightness(0.78);
}
/* Shader overlay on top of tiles: faint scanline grid in dotmatrix style.
   Pointer-events:none so it doesn't block tap-through. */
.leaflet-host .leaflet-overlay-pane::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 176, 0, 0.045) 0px,
      rgba(255, 176, 0, 0.045) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(ellipse at center,
      transparent 60%,
      rgba(0, 0, 0, 0.55) 100%
    );
  pointer-events: none;
  mix-blend-mode: screen;
}
/* Subtle vignette from the corners — phosphor CRTs glow in the middle. */
.leaflet-host .leaflet-map-pane::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center,
      transparent 50%,
      rgba(255, 176, 0, 0.08) 80%,
      rgba(0, 0, 0, 0.6) 100%
    );
  pointer-events: none;
  z-index: 400;
}
.ride-pin { font-size: 22px; line-height: 22px; }
.ride-polyline { stroke: var(--dm-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255,176,0,0.6)); }
/* Leaflet canvas SVG polyline; class is added via setStyle className option. */
.leaflet-overlay-pane svg path.rodada-line { stroke: var(--dm-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255,176,0,0.6)); }

/* Recenter FAB (Leaflet bottom-right). Phosphor target reticle. */
.rodada-fab button {
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  background: rgba(14, 14, 14, 0.92); color: var(--dm-accent);
  border: 1px solid var(--dm-accent);
  cursor: pointer; box-shadow: 0 0 0 2px rgba(14,14,14,0.8);
  font-family: inherit; display: flex; align-items: center; justify-content: center;
}
.rodada-fab button svg { width: 24px; height: 24px; display: block; }
.rodada-fab button:hover { background: #20180a; box-shadow: 0 0 0 2px #20180a, 0 0 8px rgba(255,176,0,0.35); }
.rodada-fab button:active { background: #402a04; transform: translateY(1px); }

/* History list with inline SVG thumbs. */
.dm-list dd { padding: 0; border-bottom: 1px dashed #2a2a2a; }
.history-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  text-decoration: none; color: inherit;
}
.history-card:hover { background: #181818; }
.history-thumb {
  width: 96px; height: 64px;
  background: #0a0a0a; border: 1px solid #2a2a2a;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.history-thumb svg { width: 100%; height: 100%; }
.history-meta strong { color: var(--dm-accent); font-size: 0.95rem; }
.history-meta .dm-stats { font-size: 0.9rem; }

/* HUD: 4-column metrics + STOP button. */
#hud { background: #161616; border: 1px solid var(--dm-accent); padding: 0.7rem; margin-top: 0.6rem; }
.hud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.hud-grid small { display: block; opacity: 0.6; letter-spacing: 0.5px; }
.hud-grid strong { font-size: 1.2rem; color: var(--dm-accent); }
.hud-actions { margin-top: 0.7rem; display: flex; justify-content: flex-end; }
.hud-actions button.danger { background: #2a0a0a; color: #ff3030; border: 1px solid #ff3030; padding: 0.7rem 1.4rem; font-family: inherit; font-weight: bold; cursor: pointer; }
.hud-actions button.danger:hover { background: #401010; }

/* History list. */
.dm-list dd { padding: 0.6rem 0.8rem; border-bottom: 1px dashed #2a2a2a; }
.dm-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; font-size: 0.95rem; }
.dm-stats .pr { color: var(--dm-accent-2); border: 1px solid var(--dm-accent-2); padding: 0 0.4rem; }

a.dm-link { color: var(--dm-accent); text-decoration: underline; }
muted, .muted { color: #888; }

/* Background-tracking banner. */
#bg-banner {
  background: #2a1a10; color: #ffd97a;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--dm-accent);
  font-size: 0.9rem;
  animation: pulse-bg 1.6s ease-in-out infinite alternate;
}
#bg-banner[data-kind="err"]  { background: #2a0a0a; color: #ff3030; border-bottom-color: #ff3030; }
@keyframes pulse-bg {
  from { opacity: 0.65; }
  to   { opacity: 1.0; }
}