/* ===========================
   Global / Theme
   =========================== */
:root {
  --muted:#6b7280;
  --bg:#0b1020;
  --card:#11162a;
  --chip:#1b2342;
  --text:#f8fafc;
}

body {
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto;
  background:linear-gradient(180deg,#0b1020,#0f1835);
  color:var(--text);
}

.wrap { max-width:980px; margin:0 auto; padding:32px 16px; }

h1 { font-size:28px; margin:0 0 8px; }
p.meta { color:var(--muted); margin:0 0 16px; }

form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 16px; }

input[type="date"] {
  background:#0f1b3d; color:var(--text); border:1px solid #223160;
  padding:8px 10px; border-radius:8px;
}

button {
  background:#2a6bff; color:white; border:none;
  padding:8px 12px; border-radius:8px; cursor:pointer;
}

ul { list-style:none; padding:0; margin:24px 0; display:grid; gap:12px; }

li { border:1px solid #1f2947; background:var(--card); border-radius:16px; padding:16px; }

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

.topList:hover { background:#132050; cursor:pointer; }

.title { font-weight:600; font-size:18px; }
.badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }

.badge {
  font-size:12px; border:1px solid #2a355f; padding:4px 8px;
  border-radius:999px; background:var(--chip); color:#dbeafe;
}

.score { font-size:28px; font-weight:700; padding:8px 12px; border-radius:12px; }

.rank {
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; background:#0f1b3d; border:1px solid #223160; font-weight:700;
}

#map { height:460px; border-radius:16px; overflow:hidden; border:1px solid #1f2947; margin-top:8px; }
#map { touch-action: pan-y pinch-zoom; }
#map { background:#0b1020; }

.footer { color:var(--muted); font-size:12px; margin-top:24px; }

.notice {
  background:#1b2342; border-left:5px solid #eab308;
  padding:8px 12px; border-radius:8px; color:#facc15; font-size:14px; margin-bottom:16px;
}

/* ===========================
   Brand header
   =========================== */
.brand{
  display:flex; align-items:center; justify-content:center;
  gap:10px; width:100%; text-align:center; margin:0 auto 8px;
}
.brand .logo{ width:50px; height:50px; object-fit:contain; border-radius:6px; }
.brand h1{ margin:0; font-size:28px; line-height:1; }

.brand-link { text-decoration: none; color: inherit; }
.brand-link:hover,
.brand-link:focus {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ===========================
   Top Surf Regions (In View + Global)
   =========================== */
.top-card ul { display: grid; gap: 8px; }

/* Compact list items */
.top-card ul li{
  padding: 10px 12px;
  border-radius: 12px;
}

/* Two-column grid inside each row: main + score */
.top-card ul li .row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

/* Left block (rank + title + badges) tighter */
.top-card .rank{ width: 26px; height: 26px; font-size: 13px; }
.top-card .title{ font-size: 16px; line-height: 1.2; }
.top-card .badges{ gap: 6px; margin-top: 4px; }

/* Smaller, denser badges */
.top-card .badge{
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Truncate long place names */
.top-card .title{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Score pill more compact */
.top-card .score{
  font-size: 20px;
  padding: 6px 8px;
  border-radius: 10px;
}

/* Responsive badge limiting */
@media (max-width: 520px){
  .top-card .badges{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .top-card .badges .badge:nth-child(n+7){ display: none; }
}

@media (min-width: 521px) and (max-width: 820px){
  .top-card .badges .badge:nth-child(n+7){ display: none; }
}

/* Tops layout grid */
.tops-grid{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: min(92vw, 560px);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
@media (min-width: 900px){
  .tops-grid{
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* Card treatment */
.top-card {
  background: var(--card);
  border: 1px solid #1f2947;
  border-radius: 16px;
  padding: 12px;
}

/* Tighten spacing inside cards */
.top-card h3 { margin: 0 0 6px; font-size: 18px; }
.top-card .meta { margin: 0 0 8px; }
.top-card ul { margin: 0; }

/* ===========================
   Daily Top scroller + tiles
   =========================== */

/* Single-row scroller */
.daily-top .day-grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

/* Make the card fit the track exactly */
.daily-top .day-card{
  box-sizing: border-box;
  width: 100%;
  scroll-snap-align: start;
  margin: 0;
}

.daily-top .tile-name{ white-space: normal; overflow: visible; }
.daily-top .tile-region,
.daily-top .tile-country,
.daily-top .tile-meta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-top .tile-country{
  display:block; margin-top:2px; font-size:12px; font-weight:500; color:#93a0c8;
}

/* Reusable day grid + cards */
.day-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:8px; }
.day-card { background:var(--card); border:1px solid #1f2947; border-radius:16px; padding:12px; }
.tile-name { font-weight:600; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }

.day-card header {
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; color:#dbeafe; font-size:14px; margin-bottom:10px;
}
.day-card header .date { color:#93a0c8; font-weight:500; }

.rank-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }

.rank-tile {
  display:flex; gap:10px; align-items:center;
  background:#0f1b3d; border:1px solid #223160;
  border-left:6px solid var(--col);
  border-radius:12px; padding:8px 10px;
}
.rank,
.rank-badge {
  display: none !important;
}
.tile-main { min-width:0; }
.tile-meta { color:#9fb5ff; font-size:12px; margin-top:2px; }
.rank-tile:hover { background:#132050; cursor:pointer; }

/* ===========================
   Social footer
   =========================== */
.social-footer{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:16px; padding-top:12px; border-top:1px solid #1f2947;
}
.social-link{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); color:#cfe1ff; text-decoration:none;
  border:1px solid #1f2947; padding:8px 12px; border-radius:999px;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.social-link:hover{ background:#132050; border-color:#223160; transform:translateY(-1px); }
.social-link svg{ width:18px; height:18px; display:block; }
.social-link span{ font-size:14px; font-weight:600; letter-spacing:.2px; }

/* icon styling */
.icon { width:16px; height:16px; display:inline-block; vertical-align:-2px; }
.badges .icon { opacity:.95; } /* optional */

/* was using translate(-50%,-50%) — not needed anymore */
.sr-square { background: transparent; border: 0; }
.sr-square-inner{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #0b1020;
  border-radius: 4px;   /* 0 for a sharp square */
  opacity: .9;
}

/* ===========================
   Radar mode — ORANGE palette
   =========================== */

/* Palette */
:root{
  --radar-accent: #ffaa33;   /* main orange glow */
  --radar-accent-strong: #ff9900;
  --radar-glass: #1a1205;    /* dark “amber glass” underlay */
}

/* Keep original rectangle shape; only change colors */
#map.radar{
  position: relative;
  overflow: hidden;
  background: var(--radar-glass);
  box-shadow:
    0 0 0 2px #2a1a07 inset,
    0 0 35px 8px color-mix(in srgb, var(--radar-accent) 60%, transparent) inset,
    0 0 50px 10px #1a0d03;
}

#map.radar .leaflet-pane.leaflet-tile-pane{
  opacity: .45;
  filter: brightness(.78) saturate(.95);
}

/* UI container */
#map.radar .radar-ui{ position:absolute; inset:0; pointer-events:none; }

/* Concentric rings (orange) */
#map.radar .radar-rings{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--radar-accent) 40%, transparent) 0 1px, transparent 1px 6%,
      color-mix(in srgb, var(--radar-accent) 35%, transparent) 6% 7%, transparent 7% 12%,
      color-mix(in srgb, var(--radar-accent) 30%, transparent) 12% 13%, transparent 13% 18%,
      color-mix(in srgb, var(--radar-accent) 26%, transparent) 18% 19%, transparent 19% 24%,
      color-mix(in srgb, var(--radar-accent) 22%, transparent) 24% 25%, transparent 25% 30%,
      color-mix(in srgb, var(--radar-accent) 18%, transparent) 30% 31%, transparent 31% 36%,
      color-mix(in srgb, var(--radar-accent) 14%, transparent) 36% 37%, transparent 37% 42%,
      color-mix(in srgb, var(--radar-accent) 10%, transparent) 42% 43%, transparent 43% 48%,
      color-mix(in srgb, var(--radar-accent) 8%,  transparent) 48% 49%, transparent 49% 54%,
      color-mix(in srgb, var(--radar-accent) 6%,  transparent) 54% 55%, transparent 55% 60%,
      color-mix(in srgb, var(--radar-accent) 5%,  transparent) 60% 61%, transparent 61% 66%,
      color-mix(in srgb, var(--radar-accent) 4%,  transparent) 66% 67%, transparent 67% 72%,
      color-mix(in srgb, var(--radar-accent) 3%,  transparent) 72% 73%, transparent 73% 84%);
  mix-blend-mode: screen;
  opacity:.75;
}

/* Crosshair (orange) */
#map.radar .radar-cross{
  position:absolute; inset:0;
  background:
    linear-gradient(color-mix(in srgb, var(--radar-accent) 25%, transparent) 0 0) 50% 0/1px 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--radar-accent) 25%, transparent) 0 0) 0 50%/100% 1px no-repeat;
  mix-blend-mode: screen;
}

/* Rotating sweep (orange) */
#map.radar .radar-sweep{
  position:absolute; inset:0;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--radar-accent-strong) 80%, transparent) 0deg,
    color-mix(in srgb, var(--radar-accent) 45%, transparent) 15deg,
    color-mix(in srgb, var(--radar-accent) 18%, transparent) 30deg,
    transparent 60deg 360deg
  );
  filter: blur(.4px);
  animation: sr-radar-rotate 10s linear infinite;
  mix-blend-mode: screen;
}
@keyframes sr-radar-rotate { to { transform: rotate(360deg); } }

/* Vignette */
#map.radar .radar-vignette{
  position:absolute; inset:0;
  /* use closest-corner so the clear area reaches all four corners */
  background: radial-gradient(closest-corner at 50% 50%,
              transparent 0 98%,
              rgba(0,0,0,.28) 100%);
  pointer-events:none;
}

/* Marker glow in orange */
#map.radar .leaflet-interactive{
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--radar-accent) 70%, transparent));
  animation: sr-breathe 3.2s ease-in-out infinite;
}
@keyframes sr-breathe{
  0%,100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--radar-accent) 50%, transparent)); }
  50%     { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--radar-accent) 85%, transparent)); }
}

/* Wave-pool “ping” ring in orange */
#map.radar .sr-square-inner{ position:relative; }
#map.radar .sr-square-inner::after{
  content:""; position:absolute; inset:-6px; border-radius:10px;
  border:2px solid var(--radar-accent-strong); opacity:0;
  animation: sr-ping 5.5s linear infinite;
}
@keyframes sr-ping{
  0%{transform:scale(.8);opacity:0;}
  10%{transform:scale(1);opacity:.65;}
  40%,100%{transform:scale(1.35);opacity:0;}
}