:root{
  --bg:#0d1117;
  --bg-2:#161b22;
  --bg-3:#1f2630;
  --text:#f0f6fc;
  --text-dim:#8b949e;
  --accent:#22c55e;
  --accent-2:#16a34a;
  --border:#30363d;
  --light:#22c55e;
  --moderate:#facc15;
  --busy:#fb923c;
  --very-busy:#ef4444;
  --unknown:#6b7280;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overscroll-behavior:none}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}

header.app-header{
  position:sticky;top:0;z-index:1000;
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
  padding:max(env(safe-area-inset-top), 8px) max(env(safe-area-inset-right), 14px) 8px max(env(safe-area-inset-left), 14px);
  display:flex;align-items:center;gap:10px;min-height:48px;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.brand .logo{
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
}
.brand .logo svg{display:block}
.brand .logo img{display:block;width:30px;height:30px;object-fit:contain;border-radius:6px}
.brand .name-play{color:var(--text)}
.brand .name-local{color:var(--accent);margin-left:2px}
.brand .name-game{color:var(--text);margin-left:2px}
.brand .name-gr{color:var(--text-dim);font-weight:600;margin-left:6px;font-size:14px}
.header-actions{margin-left:auto;display:flex;gap:8px}
.icon-btn{
  background:var(--bg-3);border:1px solid var(--border);color:var(--text);
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;
}

.tagline-strip{
  background:linear-gradient(90deg, rgba(34,197,94,0.18) 0%, rgba(22,163,74,0.10) 100%);
  border-bottom:2px solid var(--accent);
  color:var(--text);font-size:18px;font-weight:700;
  padding:14px 16px;text-align:center;letter-spacing:0.3px;line-height:1.35;
}
.tagline-strip strong{color:#22c55e;font-weight:900;letter-spacing:0.5px}
@media (min-width:480px){.tagline-strip{font-size:20px;padding:16px}}
@media (min-width:768px){.tagline-strip{font-size:22px}}

/* Search bar (court-name / city) */
.search-strip{position:relative;background:var(--bg-2);border-bottom:1px solid var(--border);padding:10px 14px}
.search-wrap{position:relative;display:flex;align-items:center;background:rgba(15,23,42,0.9);border:1px solid var(--border);border-radius:9999px;padding:6px 12px;gap:8px}
.search-wrap:focus-within{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.18)}
.search-icon{font-size:16px;opacity:0.7}
.search-input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:15px;padding:8px 0;min-width:0}
.search-input::placeholder{color:var(--text-dim);font-style:normal}
.search-clear{background:transparent;border:0;color:var(--text-dim);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:9999px}
.search-clear:hover{color:var(--text);background:rgba(255,255,255,0.06)}
.search-results{position:absolute;left:14px;right:14px;top:100%;margin-top:6px;background:#0d1117;border:1px solid var(--border);border-radius:10px;max-height:340px;overflow-y:auto;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.search-result-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:14px;line-height:1.4}
.search-result-item:last-child{border-bottom:0}
.search-result-item:hover,.search-result-item.active{background:rgba(34,197,94,0.12)}
.search-result-item .name{color:var(--text);font-weight:600}
.search-result-item .city{color:var(--text-dim);font-size:12px;margin-top:2px}
.search-result-empty{padding:14px;text-align:center;color:var(--text-dim);font-size:14px}

/* Suggest a court — GPS capture */
.suggest-strip{background:var(--bg-2);padding:10px 14px;border-bottom:1px solid var(--border)}
.suggest-btn{
  width:100%;background:linear-gradient(90deg,#16a34a 0%,#22c55e 100%);color:#fff;
  border:0;border-radius:9999px;padding:12px 16px;font-size:14px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 4px 14px rgba(34,197,94,0.25);transition:transform 80ms ease,box-shadow 80ms ease;
}
.suggest-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(34,197,94,0.35)}
.suggest-btn:active{transform:translateY(0)}

/* "Help us name this court" CTA — shown on cards/details for unnamed OSM courts */
.name-suggest-cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:10px 0 6px;padding:10px 14px;
  background:linear-gradient(90deg,rgba(251,191,36,0.18) 0%,rgba(251,191,36,0.10) 100%);
  border:1px solid rgba(251,191,36,0.45);
  border-radius:10px;color:#fbbf24;font-size:14px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background 100ms ease,border-color 100ms ease;
}
.name-suggest-cta:hover{background:rgba(251,191,36,0.28);border-color:#fbbf24;color:#fff}
.name-suggest-cta strong{font-weight:800}
.suggest-btn strong{font-weight:800}
@media (min-width:480px){.suggest-btn{font-size:15px;padding:14px 18px}}

.cta-strip{
  background:var(--bg-2);border-bottom:1px solid var(--border);
  color:var(--text-dim);font-size:13px;padding:8px 14px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.cta-strip strong{color:var(--text);font-weight:600}
.share-btn{
  background:var(--bg-3);border:1px solid var(--border);color:var(--text);
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.share-btn:active{background:var(--accent);color:#0d1117}

.auto-checkin-strip{
  background:var(--bg);padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.geo-mega{
  display:block;width:100%;
  background:linear-gradient(135deg, #22c55e 0%, #16a34a 100%);color:#0d1117;border:none;
  padding:16px 18px;border-radius:14px;
  font-size:18px;font-weight:900;cursor:pointer;letter-spacing:0.5px;
  box-shadow:0 0 0 0 rgba(34,197,94,0.6);
  transition:transform 0.1s;
  text-align:center;line-height:1.2;
  animation:mega-pulse 2.4s infinite;
}
.geo-mega:active{transform:scale(0.98)}
.geo-mega-sub{
  display:block;font-size:12px;font-weight:600;
  opacity:0.85;margin-top:4px;letter-spacing:0.2px;
}
.geo-mega.on{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(34,197,94,0.12);color:#22c55e;
  border:2px solid #22c55e;font-weight:800;font-size:15px;padding:10px 14px;
  box-shadow:none;cursor:default;animation:none;letter-spacing:0.2px;
}
.geo-mega.on .geo-mega-sub{display:none}
.cta-text{flex:1}
@media (min-width:480px){
  .geo-mega{font-size:20px}
}

.cta-help{
  background:var(--bg);border-bottom:1px solid var(--border);
  color:var(--text-dim);font-size:12px;line-height:1.4;
  padding:6px 14px;text-align:center;
}
.cta-help strong{color:var(--text);font-weight:700}

.total-banner{
  background:var(--bg);border-bottom:1px solid var(--border);
  color:#22c55e;font-size:13px;font-weight:700;padding:7px 14px;
  text-align:center;letter-spacing:0.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Weather card — HIDDEN at every viewport for unified clean UI. */
.weather-card{display:none !important}
.weather-card h4{margin:0 0 6px 0;font-size:13px;color:var(--text)}
.weather-card .w-now{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.weather-card .w-icon{font-size:18px}
.weather-card .w-temp{color:var(--text);font-size:16px;font-weight:700}
.weather-card .w-wind{
  color:var(--text);font-size:13px;font-weight:700;
  padding:2px 8px;border-radius:999px;border:1px solid var(--border);
  margin-left:auto;
}
.weather-card .w-wind.calm{color:#22c55e;border-color:#22c55e;background:rgba(34,197,94,0.1)}
.weather-card .w-wind.moderate{color:#facc15;border-color:#facc15;background:rgba(250,204,21,0.1)}
.weather-card .w-wind.high{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,0.15)}
.weather-card .w-status{
  font-size:12px;font-weight:600;padding:6px 8px;border-radius:8px;
  margin:6px 0;line-height:1.35;
}
.weather-card .w-status.good{color:#22c55e;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.3)}
.weather-card .w-status.warn{color:#facc15;background:rgba(250,204,21,0.08);border:1px solid rgba(250,204,21,0.3)}
.weather-card .w-status.critical{color:#ef4444;background:rgba(239,68,68,0.10);border:1px solid rgba(239,68,68,0.4)}
.weather-card .w-fc-label{
  font-size:10px;color:var(--text-dim);font-weight:700;letter-spacing:0.5px;
  text-transform:uppercase;margin:6px 0 4px 0;
}
.weather-card .w-forecast{display:flex;justify-content:space-between;gap:4px}
.weather-card .w-fc-item{
  flex:1;text-align:center;padding:4px 2px;
  background:var(--bg-3);border-radius:6px;
  font-size:11px;line-height:1.3;
}
.weather-card .w-fc-item .h{color:var(--text-dim);font-size:10px;font-weight:700}
.weather-card .w-fc-item .i{font-size:14px;margin:1px 0}
.weather-card .w-fc-item .t{color:var(--text);font-weight:700}

/* "Don't see your court?" full-width pill bar — sits above the map, never overlaps controls */
.missing-court-bar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:8px 12px 6px;padding:10px 14px;
  background:linear-gradient(90deg, rgba(34,197,94,0.18) 0%, rgba(22,163,74,0.08) 100%);
  border:1px solid #22c55e;border-radius:999px;
  text-decoration:none;color:var(--text);
  font-size:14px;line-height:1.2;
  cursor:pointer;
  transition:transform 0.1s ease, background 0.15s ease;
}
.missing-court-bar:active{transform:scale(0.98)}
.missing-court-bar:hover{background:rgba(34,197,94,0.18)}
.missing-court-bar .mcb-icon{font-size:16px}
.missing-court-bar .mcb-text strong{color:#22c55e;font-weight:800;letter-spacing:0.2px}
.missing-court-bar .mcb-arrow{color:#22c55e;font-weight:800;margin-left:2px}
@media (min-width:600px){
  .missing-court-bar{margin:10px auto 8px;max-width:520px;font-size:15px}
}

/* Add to Home Screen banner */
.a2hs-banner{
  display:none;
  background:linear-gradient(90deg, rgba(34,197,94,0.15) 0%, rgba(22,163,74,0.08) 100%);
  border-top:1px solid var(--accent);
  padding:10px 14px;text-align:center;
  font-size:14px;color:var(--text);
  align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.a2hs-banner.show{display:flex}
.a2hs-msg{flex:1 1 auto;min-width:200px}
.a2hs-actions{display:flex;gap:6px}
.btn-pill{
  background:var(--bg-3);border:1px solid var(--border);color:var(--text);
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
}
.btn-pill.primary{background:var(--accent);color:#0d1117;border-color:var(--accent)}

#map{flex:1;width:100%;min-height:340px;background:var(--bg-2)}

.map-container{
  flex:1;position:relative;display:flex;width:100%;min-height:340px;
}
/* UNIFIED MINIMAL UI — desktop and mobile see the same clean view.
   Hide all chatty pre-map text strips at every viewport. */
.tagline-strip,
.cta-strip,
.cta-help,
.missing-court-bar,
.auto-checkin-strip{ display:none !important; }

/* Total-active banner: stays visible (it's now the tiered-access locked banner when auto OFF) */

/* Auto check-in status pill in header */
.auto-pill{
  background:transparent;
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.auto-pill.on{
  color:#22c55e;
  border-color:rgba(34,197,94,0.4);
  background:rgba(34,197,94,0.08);
}
.auto-pill.off{
  color:#ef4444;
  border-color:rgba(239,68,68,0.4);
  background:rgba(239,68,68,0.08);
}

/* Tiered-access locked banner — show when auto check-in is OFF */
body.auto-off #totalActiveBanner.total-banner{
  background:rgba(239,68,68,0.08);
  border-top:1px solid rgba(239,68,68,0.3);
  border-bottom:1px solid rgba(239,68,68,0.3);
  color:var(--text-dim);
}

/* "You are here" pin — pickleball icon (matches app logo) */
.user-pin-wrap{ background:transparent !important; border:none !important; }
.user-pin{
  position:relative; width:22px; height:22px;
}
.user-pin-ball{
  position:absolute; left:0; top:0;
  width:22px; height:22px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23fbbf24' stroke='%230d1117' stroke-width='1.5'/%3E%3Ccircle cx='11' cy='9.5' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='16.5' cy='8.5' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='21.5' cy='10' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='9' cy='14' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='14' cy='13.5' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='19' cy='14.5' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='23.5' cy='15' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='11' cy='19' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='16' cy='19.5' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='21' cy='19' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='13' cy='23.5' r='1.3' fill='%230d1117'/%3E%3Ccircle cx='19' cy='23.5' r='1.3' fill='%230d1117'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(251,191,36,0.5));
  z-index:2;
}
.user-pin-pulse{
  position:absolute; left:-4px; top:-4px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(251,191,36,0.35);
  animation:pln-pulse 2s infinite ease-out;
  z-index:1;
}
.user-pin.checked-in .user-pin-ball{
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(250,204,21,1));
  animation:pln-bounce 1.4s infinite ease-in-out;
}
.user-pin.checked-in .user-pin-pulse{
  background:rgba(250,204,21,0.55);
  animation-duration:1.4s;
}
@keyframes pln-pulse{
  0%   { transform:scale(0.5); opacity:1; }
  100% { transform:scale(2.0); opacity:0; }
}
@keyframes pln-bounce{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.12); }
}

/* Live Activity legend — HIDDEN at every viewport (pin colors convey same info). */
.legend{display:none !important}
/* "Don't see your court?" floating bar — DESKTOP ONLY. Mobile users use the link in the welcome modal / footer. */
.missing-court-bar{display:none !important}
@media (min-width:600px){
  .missing-court-bar{display:flex !important}
}
/* Make Leaflet layer control compact on mobile — Leaflet's collapsed prop handles tap-to-expand */
@media (max-width:599px){
  .leaflet-control-layers{
    background:rgba(13,17,23,0.85) !important;
    border:1px solid var(--border) !important;
  }
  .leaflet-control-layers-toggle{
    width:36px !important;height:36px !important;
  }
}
.legend h4{margin:0 0 6px 0;font-size:13px;color:var(--text)}
.legend .row{display:flex;align-items:center;gap:8px;padding:2px 0}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.light{background:var(--light)}
.dot.moderate{background:var(--moderate)}
.dot.busy{background:var(--busy)}
.dot.very-busy{background:var(--very-busy)}
.dot.unknown{background:var(--unknown)}

.bottom-card{
  background:var(--bg-2);border-top:1px solid var(--border);
  padding:14px 16px;display:flex;gap:12px;align-items:flex-start;
  cursor:pointer;
}
.bottom-card .thumb{
  width:84px;height:84px;border-radius:10px;background:var(--bg-3);
  background-size:cover;background-position:center;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.bottom-card .info{flex:1;min-width:0}
.bottom-card .info h2{margin:0;font-size:18px;line-height:1.2}
.bottom-card .info .city{color:var(--text-dim);font-size:13px;margin-top:2px}
.bottom-card .status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  margin-top:6px;border:1px solid;
}
.status-pill.light{color:var(--light);border-color:var(--light)}
.status-pill.moderate{color:var(--moderate);border-color:var(--moderate)}
.status-pill.busy{color:var(--busy);border-color:var(--busy)}
.status-pill.very-busy{color:var(--very-busy);border-color:var(--very-busy)}
.status-pill.unknown{color:var(--unknown);border-color:var(--unknown)}
.status-pill.coming-soon{color:#facc15;border-color:#facc15;background:rgba(250,204,21,0.08)}
.dot.soon{background:#facc15}
.bottom-card .meta{color:var(--text-dim);font-size:13px;margin-top:6px}
.empty-hint{
  display:inline-block;margin-top:6px;color:#22c55e;font-size:13px;font-weight:700;
}
.today-stat{
  display:inline-block;margin-top:6px;margin-left:8px;
  color:var(--text-dim);font-size:13px;font-weight:600;
}
.bottom-card .chevron{color:var(--text-dim);font-size:20px;align-self:center}

/* Mobile: compact 2x2 grid at bottom of bottom-card. Desktop: vertical column on right side. */
.bottom-card{flex-wrap:wrap}
.card-privacy{
  display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;
  padding:8px 0 0 0;
  border-top:1px dashed var(--border);
  margin-top:6px;
  width:100%;
  flex-basis:100%;
}
.card-privacy-row{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--text-dim);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-privacy-row span:first-child{font-size:12px;flex-shrink:0}
.card-privacy-row:nth-child(1) span:last-child{color:#22c55e}
@media (min-width:600px){
  .bottom-card{flex-wrap:nowrap}
  .card-privacy{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    padding:0 14px 0 18px;
    border-top:none;border-left:1px solid var(--border);
    margin-top:0;
    width:auto;flex-basis:auto;flex-shrink:0;
    grid-template-columns:none;
  }
  .card-privacy-row{font-size:12px;color:var(--text)}
  .card-privacy-row span:first-child{font-size:14px;width:18px;text-align:center}
}
@media (min-width:900px){.card-privacy{padding:0 18px 0 22px;gap:8px}.card-privacy-row{font-size:13px}}

.privacy-note{
  text-align:center;color:var(--text-dim);font-size:13px;line-height:1.5;
  padding:10px 16px;background:var(--bg);
  border-top:1px solid var(--border);
}

/* Detail page */
.detail-wrap{padding:16px;max-width:640px;margin:0 auto;width:100%}
.detail-photo{
  width:100%;height:200px;background-size:cover;background-position:center;
  border-radius:14px;margin-bottom:14px;
  border:1px solid var(--border);
}
.detail-hero{
  background:var(--bg-2);border:1px solid var(--border);border-radius:14px;
  padding:18px;margin-bottom:14px;
}
.detail-hero h1{margin:0 0 4px 0;font-size:22px}
.detail-hero .city{color:var(--text-dim);font-size:14px}
.detail-hero .addr{color:var(--text-dim);font-size:13px;margin-top:6px}

.activity-block{
  background:var(--bg-3);border-radius:12px;padding:14px;margin:14px 0;text-align:center;
}
.activity-block .count{font-size:32px;font-weight:700;line-height:1}
.activity-block .label{font-size:14px;color:var(--text-dim);margin-top:4px}

.btn{
  display:block;width:100%;padding:14px;border-radius:12px;border:none;
  font-size:16px;font-weight:600;cursor:pointer;margin:8px 0;text-align:center;
}
.btn-primary{background:var(--accent);color:#0d1117}
.btn-primary:active{background:var(--accent-2)}
.btn-primary.checked-in{background:var(--accent-2);color:#fff}
.btn-mega{
  font-size:20px;font-weight:800;padding:18px;
  letter-spacing:0.3px;border-radius:14px;
  box-shadow:0 0 0 0 rgba(34,197,94,0.7);
  animation:mega-pulse 2.4s infinite;
}
.btn-mega.checked-in{animation:none;box-shadow:none;font-size:17px}
@keyframes mega-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,0.6)}
  70%{box-shadow:0 0 0 14px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* Cameras badge on bottom card */
.cameras-badge{
  display:inline-block;margin-top:6px;margin-left:8px;
  color:#22c55e;font-size:12px;font-weight:700;
  padding:2px 8px;border:1px solid #22c55e;border-radius:999px;
  background:rgba(34,197,94,0.08);
}
.btn-secondary{background:var(--bg-3);color:var(--text);border:1px solid var(--border)}
.btn-row{display:flex;gap:8px}
.btn-row .btn{margin:0}

.amenities{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;
}
.amenity{
  background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:10px;
  font-size:13px;display:flex;align-items:center;gap:8px;
}
.amenity .yes{color:var(--accent)}
.amenity .no{color:var(--text-dim)}

/* Crowdsourced amenity confirmation chips */
.amenities-sub{ font-size:12px; color:var(--text-dim); font-weight:500; }
.amenity-chip{
  background:#161b22; border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  padding:11px 12px;
}
.amenity-chip .amenity-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:9px;
}
.amenity-chip .amenity-label{ font-size:14px; font-weight:600; color:#e6edf3; white-space:nowrap; }
.amenity-chip .amenity-label .state{ font-weight:800; }
.amenity-chip.yes .amenity-label .state{ color:#22c55e; }
.amenity-chip.missing .amenity-label .state{ color:#f59e0b; }
.amenity-chip.unknown .amenity-label .state{ color:#6b7685; }
.amenity-chip .amenity-meta{ font-size:11px; color:var(--text-dim); white-space:nowrap; }
.amenity-chip .amenity-actions{ display:flex; gap:7px; }
.am-vote{
  flex:1; font-size:12px; font-weight:700; border-radius:8px; padding:6px 4px;
  border:1px solid; cursor:pointer; background:transparent; transition:all .12s;
}
.am-vote.am-yes{ color:#22c55e; border-color:rgba(34,197,94,0.45); }
.am-vote.am-yes.active{ background:#11271b; border-color:#27613f; }
.am-vote.am-no{ color:#f59e0b; border-color:rgba(245,158,11,0.40); }
.am-vote.am-no.active{ background:#241f0e; border-color:#5a4d1f; }
.am-vote:disabled{ opacity:0.55; cursor:default; }

.section{
  background:var(--bg-2);border:1px solid var(--border);border-radius:12px;
  padding:14px;margin:12px 0;
}
.section h3{margin:0 0 8px 0;font-size:15px;color:var(--accent)}
.section p{margin:0;font-size:14px;color:var(--text);line-height:1.5}

.back-link{
  display:inline-flex;align-items:center;gap:4px;color:var(--text-dim);
  font-size:14px;margin-bottom:12px;
}

.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#0d1117;font-weight:600;
  padding:10px 18px;border-radius:999px;font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);z-index:2000;
  opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* Leaflet overrides */
.leaflet-container{background:var(--bg)}
.leaflet-popup-content-wrapper{
  background:var(--bg-2);color:var(--text);border-radius:10px;border:1px solid var(--border);
}
.leaflet-popup-tip{background:var(--bg-2);border:1px solid var(--border)}
.leaflet-popup-content{margin:10px 14px;font-size:14px}
.leaflet-popup-content strong{color:var(--text)}
.leaflet-popup-content a{color:var(--accent)}

/* Pulse animation for active courts */
.court-marker{
  position:relative;width:28px;height:28px;
}
.court-marker .pulse{
  position:absolute;inset:0;border-radius:50%;opacity:0.4;
  animation:pulse 2s infinite ease-out;
}
.court-marker .core{
  position:absolute;inset:6px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:0.5}
  100%{transform:scale(2.2);opacity:0}
}

.court-marker.coming-soon .core.soon{
  background:#1f2630;border:2px dashed #facc15;color:#facc15;
  font-size:14px;
}

/* Selected court — pin enlarges, white ring + green glow so the tapped court is unmistakable */
.marker-selected{ z-index:10000 !important; }
.marker-selected .core{
  transform:scale(1.5);
  border:3px solid #fff !important;
  box-shadow:0 0 0 6px rgba(34,227,77,0.30), 0 0 22px rgba(34,227,77,0.80) !important;
}
.marker-selected .pulse{
  background:#22e34d !important; opacity:0.55;
  animation:pulse 1.4s infinite ease-out;
}

/* "Usually busy" pattern on court detail page */
.busy-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.busy-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-radius:10px;
  background:var(--bg-3);border:1px solid var(--border);
  font-size:14px;
}
.busy-row .busy-when{color:var(--text);font-weight:700}
.busy-row .busy-avg{color:var(--text-dim);font-size:13px;font-weight:600}
.busy-row.very-busy{border-left:4px solid #ef4444}
.busy-row.busy{border-left:4px solid #fb923c}
.busy-row.moderate{border-left:4px solid #facc15}
.busy-row.light{border-left:4px solid #22c55e}
.busy-empty{
  padding:14px;border-radius:10px;
  background:var(--bg-3);border:1px dashed var(--border);
  color:var(--text-dim);font-size:13px;line-height:1.5;text-align:center;
}
.busy-note{margin:8px 0 0 0;font-size:11px;color:var(--text-dim);line-height:1.4}

/* Daily check-in badge — small chip below the pin showing today's total */
.court-marker .daily-badge{
  position:absolute;
  top:28px;left:50%;transform:translateX(-50%);
  background:#0d1117;color:#fbbf24;
  border:1px solid #fbbf24;
  border-radius:6px;
  font-size:10px;font-weight:800;line-height:1;
  padding:2px 5px;
  white-space:nowrap;
  letter-spacing:0.3px;
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
  pointer-events:none;
}
.court-marker .daily-badge.muted{
  color:#6b7280;border-color:#374151;
  font-size:12px;line-height:0.6;padding:3px 6px 5px;
}

footer{padding:14px;text-align:center;color:var(--text-dim);font-size:12px}

/* Geo "Use my location" button */
.geo-fab{
  display:none; /* hidden — replaced by prominent geo-mega in CTA strip */
  position:absolute;top:12px;left:12px;z-index:600;
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--border);border-radius:999px;
  padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.geo-fab:active{transform:scale(0.97)}
.geo-fab:disabled{opacity:0.7;cursor:default}

/* Auto check-in modal — centered (no longer bottom-stacked) */
.auto-modal{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1500;
  display:none;align-items:center;justify-content:center;
  padding:max(env(safe-area-inset-top), 16px) 12px max(env(safe-area-inset-bottom), 16px) 12px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.auto-modal.show{display:flex}
.auto-modal-card{
  background:var(--bg-2);border:2px solid var(--accent);border-radius:18px;
  padding:20px 20px 16px 20px;width:100%;max-width:420px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);text-align:center;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  margin:auto;
}
.auto-modal-icon{font-size:28px;margin-bottom:4px}
.auto-modal-card h3{margin:4px 0 4px 0;font-size:18px;color:var(--text)}
.auto-modal-card p{margin:0 0 14px 0;color:var(--text-dim);font-size:13px}
.auto-modal-card .btn{margin-bottom:8px}
.btn-text{
  background:transparent;border:none;color:var(--text-dim);
  font-size:14px;padding:8px;cursor:pointer;width:100%;
}
.btn-text:active{color:var(--text)}

/* "You're here" banner on court detail */
.you-are-here{
  background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
  color:#0d1117;border-radius:12px;padding:12px 14px;margin:0 0 14px 0;
  font-weight:600;display:flex;align-items:center;gap:10px;
}
.you-are-here .pin{font-size:20px}

/* Privacy page */
.privacy-hero{
  text-align:center;padding:24px 16px 8px 16px;
}
.privacy-hero-icon{font-size:48px}
.privacy-hero h1{margin:8px 0 4px 0;font-size:24px}
.privacy-hero-sub{color:var(--text-dim);font-size:14px;margin:0}
.privacy-pill{
  background:linear-gradient(135deg,#22c55e15 0%,#16a34a10 100%);
  border:1px solid #22c55e;border-radius:12px;
  padding:14px 16px;margin:16px 0;
  font-size:15px;line-height:1.5;
}
.privacy-pill strong{display:block;margin-bottom:6px;font-size:13px;text-transform:uppercase;letter-spacing:0.6px}
.privacy-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.privacy-table th{
  text-align:left;padding:8px 10px;color:var(--text-dim);font-weight:600;
  border-bottom:1px solid var(--border);
}
.privacy-table td{
  padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text);
}
.privacy-table tr:last-child td{border-bottom:none}

/* Header Privacy link */
.header-link{
  background:transparent;border:1px solid var(--border);color:var(--text);
  padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
}
.header-link:active{background:var(--bg-3)}

/* Pre-permission privacy modal */
.privacy-prompt{
  position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:2500;
  display:none;align-items:center;justify-content:center;
  padding:max(env(safe-area-inset-top), 16px) 12px max(env(safe-area-inset-bottom), 16px) 12px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.privacy-prompt.show{display:flex}
.privacy-prompt-card{
  background:var(--bg-2);border:2px solid var(--accent);
  border-radius:18px;
  padding:22px 20px 18px 20px;width:100%;max-width:480px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:auto;
}
.privacy-prompt-card h3{margin:0 0 4px 0;font-size:20px;color:var(--text)}
.privacy-prompt-card .lead{color:var(--text-dim);font-size:14px;margin:0 0 14px 0}
.privacy-prompt-card .row{
  display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:14px;line-height:1.45;
  border-bottom:1px solid var(--border);
}
.privacy-prompt-card .row:last-of-type{border-bottom:none}
.privacy-prompt-card .row .ic{font-size:18px;flex:0 0 24px}
.privacy-prompt-card .row .yes{color:#22c55e;font-weight:600}
.privacy-prompt-card .row .no{color:#ef4444;font-weight:600}
.privacy-prompt-card .actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.privacy-prompt-card .read-more{
  text-align:center;color:var(--text-dim);font-size:13px;text-decoration:underline;
}

/* Form inputs (Submit Correction) */
#correctionForm{
  display:flex;flex-direction:column;gap:0;
}
.form-label{
  display:block;width:100%;font-size:13px;font-weight:600;color:var(--text);
  margin:0 0 6px 0;letter-spacing:0.2px;
}
.form-input{
  display:block;box-sizing:border-box;
  width:100%;max-width:100%;
  background:var(--bg-3);border:1px solid var(--border);
  color:var(--text);font-size:15px;padding:12px 14px;border-radius:10px;
  font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.form-input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(34,197,94,0.15);
}
textarea.form-input{resize:vertical;min-height:100px}
select.form-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%238b949e' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:36px;
}

/* ========== Activity heatmap (court detail) ========== */
.heatmap-block { display:flex; flex-direction:column; gap:10px; }
.heatmap-peak-header {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.heatmap-peak-icon { font-size:14px; }
.heatmap-peak-label {
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#8b949e;
}
.heatmap-peak-pill {
  font-size:11px; font-weight:700;
  padding:2px 9px; border-radius:999px;
  background:rgba(249,115,22,0.15); color:#fb923c;
  border:1px solid rgba(249,115,22,0.30);
}
.heatmap-grid {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  border-radius:10px; padding:10px 8px; overflow-x:auto;
}
.heatmap-hour-axis {
  display:flex; padding-left:32px; margin-bottom:4px;
}
.heatmap-hour-cell {
  flex:1; min-width:14px; text-align:center;
  font-size:9px; color:rgba(139,148,158,0.6);
}
.heatmap-row {
  display:flex; align-items:center; margin:2px 0;
}
.heatmap-day-label {
  width:32px; flex-shrink:0;
  font-size:10px; font-weight:500; color:rgba(139,148,158,0.75);
}
.heatmap-cell {
  flex:1; min-width:14px; height:16px;
  margin:0 1px; border-radius:3px;
}
.heatmap-legend {
  display:flex; align-items:center; gap:5px;
  padding-left:32px; margin-top:8px;
}
.heatmap-legend-end {
  font-size:9px; color:rgba(139,148,158,0.5);
}
.heatmap-legend-swatch {
  width:12px; height:12px; border-radius:3px;
}
.heatmap-note {
  font-size:11px; color:rgba(139,148,158,0.7);
  margin:0; line-height:1.4;
}

/* ========== Favorites filter (map overlay pill) ========== */
.favorites-filter {
  position:absolute; top:12px; left:12px; z-index:1400;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:600; line-height:1;
  background:rgba(13,17,23,0.85); color:#e6edf3;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.favorites-filter:hover { background:rgba(13,17,23,0.95); }
.favorites-filter:active { transform:scale(0.97); }
.favorites-filter .fav-heart { font-size:15px; line-height:1; }
.favorites-filter .fav-count {
  display:inline-block; min-width:18px; padding:1px 6px; border-radius:999px;
  background:rgba(255,255,255,0.10); font-size:11px; font-weight:700;
  text-align:center;
}
.favorites-filter.active {
  background:#ef4444; color:#fff; border-color:#ef4444;
  box-shadow:0 4px 14px rgba(239,68,68,0.5);
}
.favorites-filter.active .fav-heart { color:#fff; }
.favorites-filter.active .fav-count {
  background:rgba(255,255,255,0.22); color:#fff;
}

/* Favorite toggle button on court detail page */
.btn.fav-toggle .fav-toggle-heart { font-size:18px; line-height:1; }
.btn.fav-toggle.is-fav {
  color:#ef4444; border-color:rgba(239,68,68,0.45);
}
.btn.fav-toggle.is-fav .fav-toggle-heart { color:#ef4444; }


/* =============================================================================
   MAP-DOMINANT OVERLAY UI — 2026-05-23
   --------------------------------------------------------------------------
   Consolidated rewrite of the 14 override passes (v1–v14) we shipped during
   the Base44 → vanilla port. Everything below adapts the original layered
   layout into a map-fills-the-viewport design where header, search, bottom
   card, install banner, privacy footer, and the legend all float as fixed
   overlays. White text + multi-layer black halo keeps readability on any
   map color (grass / water / concrete / dark trees).
   ============================================================================= */

/* -- Foundation: gestures + body --------------------------------------------- */

/* Disable page-level pinch zoom; Leaflet handles its own pinch inside #map. */
html, body { touch-action: pan-x pan-y; -webkit-touch-callout: none; }

/* z-index scale (kept above Leaflet's 400–800 panes):
     50  – legacy header sticky baseline (unused now)
     1500 – top chrome (header / search / suggest / a2hs / bottom card)
     1550 – legend
     1600 – privacy footer
     1700 – favorites pill */

/* -- Map fills the viewport -------------------------------------------------- */

.map-container {
  flex: 1 1 auto !important;
  min-height: 100vh !important;       /* takes the whole screen */
  position: relative;
}
#map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* -- Top chrome: header / search / suggest pill (all fixed, transparent) ----- */

header.app-header,
.search-strip,
.suggest-strip {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 1500 !important;
}
header.app-header { top: 0 !important; }
.search-strip    { top: 48px !important;  padding: 6px 14px !important; }
.suggest-strip   { top: 100px !important; padding: 3px 10px !important; }

/* Search input keeps a translucent backing so it reads as an input field */
.search-wrap {
  background: rgba(13,17,23,0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.15) !important;
}

/* Header pill buttons (Auto check-in / What is this? / Privacy) */
header.app-header .icon-btn,
header.app-header .header-link,
header.app-header .auto-pill {
  background: rgba(13,17,23,0.70) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff !important;
}

/* Brand: white name + green local */
.brand .name-play  { color: #ffffff !important; }
.brand .name-local { color: #22c55e !important; }

/* Suggest CTA — ultra-compact pill with a dark shadow so it pops on green map */
.suggest-btn {
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.55),
              0 2px 6px rgba(34,197,94,0.30) !important;
}
@media (min-width: 480px) {
  .suggest-btn { font-size: 12px !important; padding: 6px 14px !important; }
}

/* "Don't see your court?" is now redundant with Suggest — hide it */
.missing-court-bar { display: none !important; }

/* Top text gets a multi-layer halo for over-map readability */
header.app-header, header.app-header *,
.search-strip .search-input,
.search-strip .search-input::placeholder,
.suggest-strip, .suggest-strip * {
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    0 1px 4px rgba(0,0,0,0.95),
    0 0 10px rgba(0,0,0,0.85) !important;
}

/* -- Map overlays: favorites pill + "Be the FIRST" chip + legend ------------ */

.favorites-filter {
  top: 150px !important;        /* clears the top stack */
  z-index: 1700 !important;
}
.favorites-filter[hidden] { display: none !important; }   /* hidden until user has a favorite */

.total-banner {
  position: fixed !important;
  top: 145px !important;
  left: 50% !important;
  transform: translateX(-50%);
  padding: 4px 12px !important;
  font-size: 11px !important;
  background: rgba(13,17,23,0.78) !important;
  border: 1px solid rgba(34,197,94,0.45) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 80vw;
  pointer-events: none;
  z-index: 1400;
}

/* Map legend — compact translucent card, bottom-left of the map */
.legend {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  position: fixed !important;
  right: 12px !important;
  top: 180px !important;           /* top-right, below banner — clear of the bottom card */
  z-index: 1550 !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  background: rgba(13,17,23,0.42) !important;   /* translucent — see map through it */
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
  min-width: 126px;
  pointer-events: auto;
}
.legend h4 {
  margin: 0 0 4px 0 !important;
  font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
}
.legend .row {
  display: flex !important; align-items: center !important;
  gap: 6px !important; padding: 1px 0 !important;
  font-size: 11px !important; color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
}
.legend .dot { width: 9px !important; height: 9px !important; flex-shrink: 0; }
.legend .dot.light     { box-shadow: 0 0 6px rgba(34,197,94,0.55); }
.legend .dot.moderate  { box-shadow: 0 0 6px rgba(250,204,21,0.55); }
.legend .dot.busy      { box-shadow: 0 0 6px rgba(251,146,60,0.55); }
.legend .dot.very-busy { box-shadow: 0 0 6px rgba(239,68,68,0.55); }
.legend .dot.unknown   { box-shadow: 0 0 6px rgba(107,114,128,0.45); }
@media (max-width: 380px) {
  /* tiny phones: tuck legend tighter to the corner so it never reaches the banner */
  .legend { top: 174px !important; right: 8px !important; padding: 6px 9px !important; min-width: 116px; }
}

/* -- Bottom chrome: card + a2hs + privacy footer (fixed, transparent) ------- */

/* Privacy footer — always pinned at the very bottom */
.privacy-note {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 1600 !important;
  padding: 6px 12px env(safe-area-inset-bottom, 6px) !important;
  text-align: center !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: auto !important;
}

/* On full content pages (court detail, legal, correction) the privacy note must
   flow at the bottom of the content — NOT fixed, or it overlaps the page. */
body.court-detail .privacy-note,
body.page-static .privacy-note {
  position: static !important;
  z-index: auto !important;
  margin-top: 16px !important;
}

/* Bottom card — floats over the map, above the privacy footer */
.bottom-card {
  position: fixed !important;
  left: 8px !important; right: 8px !important; bottom: 34px !important;
  z-index: 1500 !important;
  background: rgba(13,17,23,0.94) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55) !important;
  padding: 14px 16px !important;
}
/* Frosted card already provides contrast — drop the heavy text halos on the card */
.bottom-card, .bottom-card * { text-shadow: none !important; }
/* Shrink the logo thumb so it reads as an inline brand mark, not an oversized block */
.bottom-card .thumb { width: 52px !important; height: 52px !important; }
/* Tappable affordance — signal the card opens a full details page */
.bottom-card .info h2 .name-go { color:#22c55e !important; font-weight:800 !important; margin-left:2px; }
.bottom-card .view-details-cue{
  display:inline-block; margin-top:9px;
  color:#22c55e !important; font-size:12.5px !important; font-weight:700 !important;
  border:1px solid rgba(34,197,94,0.45); border-radius:999px; padding:4px 12px;
  /* Pulse a few times when a card opens — signals "there's more to tap" (matches the pin flash) */
  animation: cue-pulse 1.05s ease-in-out 3;
}
@keyframes cue-pulse{
  0%,100%{ transform:scale(1);   box-shadow:0 0 0 0 rgba(34,197,94,0); border-color:rgba(34,197,94,0.45); }
  50%    { transform:scale(1.06); box-shadow:0 0 0 5px rgba(34,197,94,0.16); border-color:rgba(34,197,94,0.9); }
}
/* Desktop: card hugs its content instead of stretching full-width with an empty black middle */
@media (min-width: 600px) {
  .bottom-card {
    right: auto !important;
    width: auto !important;
    max-width: 760px !important;
  }
  .bottom-card .info { flex: 0 1 auto !important; }
}

/* Card hidden by default → clean full map until a court is tapped */
.bottom-card.is-hidden { display: none !important; }

/* Mobile: compact the card so it's present but not overwhelming (keeps all info, just tighter) */
@media (max-width: 599px) {
  .bottom-card { padding: 10px 13px !important; bottom: 30px !important; gap: 10px !important; }
  .bottom-card .thumb { width: 40px !important; height: 40px !important; }
  .bottom-card .info h2 { font-size: 15px !important; }
  .bottom-card .info .city { font-size: 11px !important; margin-top: 1px !important; }
  .bottom-card .status-pill { font-size: 10.5px !important; padding: 3px 8px !important; margin-top: 4px !important; }
  .bottom-card .empty-hint { font-size: 11.5px !important; margin-top: 4px !important; }
  .bottom-card .meta { font-size: 11px !important; margin-top: 3px !important; }
  .bottom-card .cameras-badge { font-size: 10.5px !important; }
  .bottom-card .view-details-cue { font-size: 11.5px !important; padding: 3px 11px !important; margin-top: 6px !important; }
  .bottom-card .card-privacy { gap: 1px 8px !important; padding-top: 5px !important; margin-top: 4px !important; }
  .bottom-card .card-privacy-row { font-size: 10px !important; }
  .bottom-card .card-privacy-row span:first-child { font-size: 10.5px !important; }
  .bottom-card .privacy-note { font-size: 10px !important; }
}
.bottom-card .info h2 { font-size: 15px !important; color: #ffffff !important; font-weight: 800 !important; }
.bottom-card .info .city { font-size: 12px !important; color: #e6edf3 !important; }
.bottom-card .meta { font-size: 12px !important; color: #e6edf3 !important; margin-top: 3px !important; }
.bottom-card .accent-text { color: #22c55e !important; }
.bottom-card .status-pill,
.bottom-card .status-cell { background: rgba(13,17,23,0.55) !important; color: #ffffff !important; }

/* Install banner — translucent pill above the bottom card so it doesn't
   collide with the right-column stats */
.a2hs-banner {
  position: fixed !important;
  left: auto !important; right: 12px !important;
  bottom: 130px !important;
  margin: 0 12px !important;
  padding: 8px 12px !important;
  z-index: 1500 !important;
  background: rgba(13,17,23,0.55) !important;
  border-top: 0 !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
  font-size: 12.5px !important;
  max-width: 380px;
}
.a2hs-banner .btn-pill {
  background: rgba(13,17,23,0.7) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.a2hs-banner .btn-pill.primary,
.a2hs-banner .btn-install {
  background: #22c55e !important;
  color: #0d1117 !important;
}

/* All bottom-chrome text bright white + heavy multi-layer halo */
.bottom-card, .bottom-card *,
.a2hs-banner, .a2hs-banner *,
.privacy-note, .privacy-note * {
  color: #ffffff;
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    0 1px 4px rgba(0,0,0,0.95),
    0 0 10px rgba(0,0,0,0.85),
    0 2px 8px rgba(0,0,0,0.75);
}
.privacy-note a[href="privacy.html"],
.privacy-note a[href="tos.html"],
.privacy-note a[href="do-not-sell.html"],
.privacy-note a[href="limit-sensitive-pi.html"] { color: #22c55e !important; }
.privacy-note a[href="submit-correction.html"]  { color: #e6edf3 !important; }
/* Keep each legal link on one piece — let the row wrap BETWEEN links, never mid-label */
.privacy-note a { white-space: nowrap !important; text-decoration: none !important; }
.privacy-note a:hover { text-decoration: underline !important; }

/* -- Zoom control: dark translucent, lifted to mid-right, clear of card + footer */
.leaflet-bottom.leaflet-right { bottom: 42% !important; }
.leaflet-control-zoom {
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.40) !important;
  margin-right: 12px !important;
}
.leaflet-control-zoom a,
.leaflet-touch .leaflet-control-zoom a {
  width: 36px !important; height: 36px !important; line-height: 36px !important;
  font-size: 19px !important; font-weight: 700 !important;
  background: rgba(13,17,23,0.62) !important;
  color: #e6edf3 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.leaflet-control-zoom a:last-child { border-bottom: 0 !important; }
.leaflet-control-zoom a:hover { background: rgba(13,17,23,0.88) !important; color: #fff !important; }

/* Logo-as-thumb on each court card — transparent so the logo floats over the map */
.bottom-card .thumb {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));   /* keep it legible over any map tile */
}
/* Court-photo thumbs still get a subtle frame so they read as a photo, not the logo */
.bottom-card .thumb[style*="background-image"] {
  border: 1px solid rgba(255,255,255,0.12) !important;
  filter: none !important;
}
.bottom-card .thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.bottom-card .thumb.thumb-soon { font-size: 28px; }

/* -- Court detail page (body.court-detail) ---------------------------------- */

/* Full-bleed satellite-map background */
/* Solid dark detail page — no satellite map behind content (readability) */
#courtMapBg { display: none !important; }
body.court-detail { background: #0d1117 !important; }

/* Clean sub-page: hide the brand header so the back button never collides with it */
body.court-detail header.app-header { display: none !important; }

/* Standalone content pages (correction, legal) — the fixed map-header overlaps and
   blocks the "← Live Map" back link. Hide that chrome so the back link is clickable. */
body.page-static header.app-header,
body.page-static .search-strip,
body.page-static .suggest-strip { display: none !important; }
body.page-static .detail-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
body.page-static .back-link { position: relative; z-index: 2000; }

/* Detail wrap on the solid dark page; back button is the top element */
body.court-detail .detail-wrap {
  position: relative;
  z-index: 10;
  background: transparent !important;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 60px !important;
  max-width: 720px;
  margin: 0 auto;
}

/* Each section: no card backing — just text over the map */
body.court-detail .detail-wrap .section,
body.court-detail .detail-wrap > .section {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
}

/* Solid page — no text halo needed */
body.court-detail .detail-wrap,
body.court-detail .detail-wrap * { text-shadow: none !important; }
body.court-detail .detail-wrap h2,
body.court-detail .detail-wrap h3 { color: #ffffff !important; }

/* Buttons stay solid + tappable — no text-shadow on button labels */
body.court-detail .detail-wrap .btn-primary,
body.court-detail .detail-wrap .btn-secondary,
body.court-detail .detail-wrap .btn-mega,
body.court-detail .detail-wrap .name-suggest-cta { text-shadow: none !important; }
body.court-detail .detail-wrap .btn-secondary {
  background: #161b22 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Amenity chips — solid cards */
body.court-detail .detail-wrap .amenity,
body.court-detail .detail-wrap .amenity-chip {
  background: #161b22 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* "← Live Map" back link — pickleball-yellow pulsing pill */
body.court-detail .back-link {
  color: #fbbf24 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(13,17,23,0.55);
  border: 1px solid rgba(251,191,36,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    0 1px 4px rgba(0,0,0,0.95) !important;
  animation: back-pulse 1.8s ease-in-out infinite;
  text-decoration: none !important;
}
body.court-detail .back-link:hover {
  background: rgba(251,191,36,0.18);
  border-color: #fbbf24;
}
@keyframes back-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(251,191,36,0);  transform: scale(1.04); }
}