:root{
  --bg:#f7f7f5;
  --panel:#ffffffee;
  --ink:#102033;
  --muted:#5c6877;
  --line:#d7dde5;
  --accent:#0f4c81;
  --shadow:0 10px 28px rgba(15,37,64,.14);
  --radius:16px;
  --title-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  background:var(--bg);
  font-family:var(--body-font);
  color:var(--ink);
}
body{overflow:hidden}
#app{
  position:relative;
  width:100%;
  height:100%;
}
#map{
  position:absolute;
  inset:0;
  z-index:1;
  background:#eef2f5;
}

.loading-screen{
  position:absolute;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.8rem;
  background:linear-gradient(180deg, rgba(247,247,245,.96), rgba(247,247,245,.9));
  backdrop-filter: blur(3px);
  transition:opacity .35s ease, visibility .35s ease;
}
.loading-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.spinner{
  width:44px;height:44px;border-radius:50%;
  border:3px solid #d6dce4;border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.header-panel{
  position:absolute;
  left:16px;
  top:16px;
  z-index:1100;
  max-width:min(520px, calc(100vw - 110px));
  padding:14px 16px 12px;
  /*background:var(--panel);
  border:1px solid rgba(215,221,229,0.0);*/
  border-radius:8px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}
.eyebrow{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:var(--accent);
  margin:0 0 6px;
}
h1{
  margin:0;
  font-size:clamp(1.1rem, 2vw, 1.8rem);
  line-height:1.05;
  letter-spacing:-.03em;
}
.subtitle{
  margin:.38rem 0 0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.3;
}
.status-pill{
  margin-top:.65rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.42rem .68rem;
  border-radius:8px;
  font-size:.82rem;
  font-weight:600;
  color:#24374d;
  background:#eef4fb;
  border:1px solid #dce8f8;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;background:#2f7bdc;
}

.map-btn{
  appearance:none;border:none;cursor:pointer;
  width:46px;height:46px;border-radius:14px;
  background:var(--panel);
  border:1px solid rgba(215,221,229,.92);
  box-shadow:var(--shadow);
  display:grid;place-items:center;
  color:var(--ink);
  backdrop-filter: blur(8px);
  transition:transform .18s ease, background .18s ease;
}
.map-btn:hover,.map-btn:focus-visible{transform:translateY(-1px); background:#fff}
.map-btn svg{width:22px;height:22px}

#homeButton{
  position:absolute; right:16px; top:64px; z-index:1100;
}
#menuButton{
  position:absolute; right:16px; top:16px; z-index:1100;
}
.menu-panel{
  position:absolute;
  right:16px; top:70px; z-index:1100;
  min-width:230px;
  background:var(--panel);
  border:1px solid rgba(215,221,229,.92);
  border-radius:16px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
  transform-origin:top right;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.menu-panel.hidden{
  opacity:0; visibility:hidden; transform:scale(.97);
  pointer-events:none;
}
.menu-head{
  padding:12px 14px 9px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--muted);
  border-bottom:1px solid #edf1f5;
}
.menu-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  background:transparent;
  border:none;
  text-align:left;
  font:600 .96rem/1.2 var(--body-font);
  cursor:pointer;
  color:var(--ink);
}
.menu-item:hover,.menu-item:focus-visible{background:#f4f7fa}
.menu-item small{display:block;color:var(--muted);font-weight:500;margin-top:3px}

.legend{
  position:absolute;
  right:16px;
  bottom:18px;
  z-index:1100;
  width:min(280px, calc(100vw - 32px));
  background:var(--panel);
  border:1px solid rgba(215,221,229,.92);
  border-radius:16px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.legend.hidden{display:none}
.legend-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #edf1f5;
}
.legend-header h2{
  margin:0; font-size:.92rem; letter-spacing:.01em;
}
.legend-toggle{
  border:none; background:transparent; cursor:pointer; color:var(--muted);
  font:700 .82rem/1 var(--body-font);
}
.legend-content{padding:10px 14px 14px}
.legend.collapsed .legend-content{display:none}
.legend-note{
  font-size:.78rem; color:var(--muted); margin:0 0 9px; line-height:1.35;
}
.legend-list{display:grid; gap:8px}
.legend-row{
  display:flex; align-items:center; gap:10px;
  font-size:.88rem;
}
.legend-swatch{
  width:13px;height:13px;border-radius:50%;
  border:2px solid rgba(16,32,51,.18); flex:none;
}

.country-badge{
  background:var(--panel);
  border:1px solid rgba(215,221,229,.92);
  box-shadow:0 7px 18px rgba(9,26,48,.15);
  border-radius:50%;
}
.baseball-icon{
  width:58px;height:58px;border-radius:50%;
  position:relative;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 28%, #fff 0 48%, #f4f4f1 72%, #ecebe6 100%);
  border:1px solid rgba(146,156,165,.5);
  color:#102033;
  font-weight:800;
  font-size:1.08rem;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

/* main curved seams */
.baseball-icon::before,
.baseball-icon::after{
  content:"";
  position:absolute;
  top:9px; bottom:9px;
  width:16px;
  border-left:2px solid #c83d3d;
  border-right:0;
  border-radius:50%;
}

/* left seam */
.baseball-icon::before{
  left:10px;
  transform:rotate(-18deg);
}

/* right seam (mirrored) */
.baseball-icon::after{
  right:10px;
  transform:scaleX(-1) rotate(-18deg);
}

/* stitches on top of the seams (using the existing span) */
.baseball-icon span{
  display:inline-grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.72);
  position:relative;
  z-index:1;
}

/* stitch marks using extra pseudo-elements on the span */
.baseball-icon span::before,
.baseball-icon span::after{
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  background:#c83d3d;
  border-radius:2px;
}

/* stitches along left seam */
.baseball-icon span::before{
  left:-11px;
  top:8px;
  box-shadow:
    0 -6px 0 #c83d3d,
    0  6px 0 #c83d3d,
    0 12px 0 #c83d3d;
  transform:rotate(-25deg);
}

/* stitches along right seam */
.baseball-icon span::after{
  right:-11px;
  top:8px;
  box-shadow:
    0 -6px 0 #c83d3d,
    0  6px 0 #c83d3d,
    0 12px 0 #c83d3d;
  transform:rotate(25deg);
}


.team-marker{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 2px rgba(16,32,51,.12), 0 4px 10px rgba(16,32,51,.18);
}
.team-marker.selected{
  transform:scale(1.18);
  box-shadow:0 0 0 3px rgba(16,32,51,.15), 0 6px 16px rgba(16,32,51,.22);
}

.leaflet-popup-content-wrapper{
  border-radius:16px;
  box-shadow:0 12px 34px rgba(15,37,64,.22);
  padding:0;
}
.leaflet-popup-content{
  margin:0 !important;
  width:min(280px, calc(100vw - 72px));
}
.popup-card{
  padding:14px 15px 14px;
}
.popup-kicker{
  margin:0 0 5px;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:800;
}
.popup-title{
  margin:0 0 5px;
  font-size:1.05rem;
  line-height:1.15;
}
.popup-subtitle{
  margin:0 0 10px;
  color:var(--muted);
  font-size:.92rem;
}
.popup-grid{
  display:grid; gap:7px;
  font-size:.88rem;
}
.popup-row strong{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:2px}
.popup-row span{display:block; color:var(--ink)}
.popup-row span.league-line{font-weight:800}
.popup-coords{
  margin-top:8px; font-size:.75rem; color:var(--muted)
}

.info-chip{
  position:absolute;
  left:16px;
  bottom:18px;
  z-index:1090;
  max-width:min(420px, calc(100vw - 94px));
  padding:10px 12px;
  background:var(--panel);
  border:1px solid rgba(215,221,229,.92);
  border-radius:16px;
  box-shadow:var(--shadow);
  color:#23374d;
  font-size:.86rem;
  line-height:1.35;
  backdrop-filter: blur(10px);
}

.modal-backdrop{
  position:absolute;
  inset:0;
  z-index:1300;
  background:rgba(11,21,33,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.modal-backdrop.open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.modal{
  width:min(760px, 100%);
  max-height:min(82vh, 760px);
  overflow:auto;
  background:#fff;
  color:var(--ink);
  border-radius:20px;
  box-shadow:0 24px 58px rgba(11,21,33,.25);
}
.modal-header{
  padding:16px 18px 12px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  border-bottom:1px solid #edf1f5;
}
.modal-header h2{margin:0;font-size:1.1rem}
.modal-header p{margin:.25rem 0 0;color:var(--muted);font-size:.92rem}
.modal-close{
  width:38px;height:38px;border-radius:12px;border:none;cursor:pointer;background:#f3f6f9;
}
.modal-body{padding:16px 18px 18px}
.source-group + .source-group{margin-top:18px}
.source-group h3{
  margin:0 0 8px; font-size:.86rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)
}
.source-group ul{margin:0; padding-left:18px}
.source-group li{margin:0 0 7px; line-height:1.42}
.source-group a{color:var(--accent)}
.credits{
  margin-top:18px; padding-top:14px; border-top:1px solid #edf1f5;
  font-size:.92rem; color:#33485e;
}
.credits a{color:var(--accent)}

.rotate-warning{
  display:none;
}
@media (orientation: portrait) and (max-width: 960px){
  .rotate-warning{
    position:absolute;
    inset:0;
    z-index:1400;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(8,17,28,.92);
    color:#f4f8fb;
    text-align:center;
  }
  .rotate-warning-card{
    max-width:360px;
    padding:22px 20px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:rgba(255,255,255,.05);
    box-shadow:0 18px 44px rgba(0,0,0,.28);
  }
  .rotate-warning h2{margin:0 0 8px;font-size:1.2rem}
  .rotate-warning p{margin:0;color:#d8e2eb;line-height:1.45}
}

@media (max-width: 780px){
  .header-panel{
    max-width:calc(100vw - 86px);
    padding:12px 13px 11px;
  }
  .subtitle{font-size:.85rem}
  .status-pill{font-size:.76rem}
  .menu-panel{right:12px}
  #menuButton{top:12px; right:12px}
  #homeButton{left:12px; bottom:12px}
  .info-chip{
    left:12px; bottom:12px; max-width:calc(100vw - 86px); font-size:.82rem;
  }
  .legend{
    right:12px; bottom:12px; width:min(250px, calc(100vw - 24px));
  }
}