:root{
  --bg:#090b10;
  --panel:#11151d;
  --panel2:#151a24;
  --border:#242b38;
  --text:#f3f6fb;
  --muted:#8f9bad;
  --yellow:#ffd84d;
  --red:#ff3f4f;
  --blue:#3195ff;
  --purple:#8b54d8;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(circle at top,#121725 0,#090b10 42%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.app-shell{max-width:1240px;margin:0 auto;padding:24px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
h1{font-size:28px;margin:4px 0 0}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:800}
.status-pill{border:1px solid var(--border);background:#0f131b;border-radius:999px;padding:8px 12px;color:#bcc6d5;font-size:12px}

.controls-card,.narrative-card,.leaders-card,.detail-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(20,25,35,.98),rgba(13,17,24,.98));
  border-radius:16px;
}
.controls-card{
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr);
  gap:12px;
  padding:14px;
  margin-bottom:14px;
  align-items:center;
}
.team-package{
  display:flex;align-items:center;gap:12px;
  border:1px solid #293141;background:#0b0f16;color:var(--text);
  border-radius:14px;padding:12px;text-align:left;cursor:pointer;
}
.team-package.active{
  border-color:#55627a;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 24px rgba(139,84,216,.12);
}
.team-package-logo,.narrative-logo{
  width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,255,255,.08));
}
.team-package-name{font-size:17px;font-weight:900}
.team-package-view{font-size:12px;font-weight:850;letter-spacing:.1em;margin-top:2px}
.team-package-scope{font-size:10px;color:var(--muted);margin-top:3px}
.versus{font-size:14px;font-weight:900;color:#717d91;letter-spacing:.12em}
.family-toggle{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:#0b0f16;border:1px solid #293141;border-radius:12px;padding:5px;
}
.family-toggle button{
  border:0;background:transparent;color:#8f9bad;border-radius:8px;padding:9px 12px;
  font-weight:850;cursor:pointer;
}
.family-toggle button.active{background:#202838;color:#fff}
.scenario-controls{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.control label{display:block;font-size:11px;color:var(--muted);margin:0 0 6px;font-weight:700}
select{
  width:100%;background:#0b0f16;border:1px solid #293141;color:var(--text);
  padding:10px 9px;border-radius:10px;outline:none;
}

.narrative-card{padding:16px 18px;margin-bottom:14px}
.narrative-team{display:flex;align-items:center;gap:12px}
.matchup-title{font-size:18px;font-weight:800;margin-top:3px}
#narrativeText{color:#d5dbe5;line-height:1.52;margin:13px 0 0}

.viz-wrap{display:grid;grid-template-columns:1fr;gap:14px}
.map-card{
  position:relative;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(17,23,34,.92),rgba(14,19,28,.92));
  border-radius:18px;overflow:hidden;min-height:620px;
}
.map-header{
  padding:16px 18px 10px;border-bottom:1px solid rgba(255,255,255,.04);
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
}
.map-title{font-size:18px;font-weight:850}
.map-subtitle{font-size:12px;color:var(--muted);margin-top:4px}
.inline-legend{
  display:flex;align-items:center;gap:8px;min-width:270px;justify-content:flex-end;
}
.legend-label{font-size:10px;color:var(--muted);white-space:nowrap}
.legend-gradient{
  height:8px;min-width:130px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--purple) 50%,var(--red) 100%);
}
.field{
  position:relative;margin:18px;height:520px;border:1px solid #384253;
  border-radius:12px;overflow:hidden;
  background:
    linear-gradient(rgba(7,12,18,.80),rgba(7,12,18,.80)),
    url("https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=1600&q=70") center/cover no-repeat;
}
.field::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 52px),
    linear-gradient(90deg,transparent 0 43%,rgba(255,255,255,.05) 43% 43.25%,transparent 43.25% 56.75%,rgba(255,255,255,.05) 56.75% 57%,transparent 57%);
}
.field::before{
  content:"";position:absolute;left:0;right:0;bottom:12%;
  height:2px;background:rgba(255,255,255,.28);z-index:2;
}
.los-label{position:absolute;left:10px;bottom:calc(12% + 6px);color:#8d98a8;font-size:10px;letter-spacing:.1em;z-index:3}

.zone-grid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);z-index:4;
}
.rush-grid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(7,1fr);z-index:4;
}
.zone{
  position:relative;border-right:1px dashed rgba(255,255,255,.07);
  border-bottom:1px dashed rgba(255,255,255,.07);cursor:pointer;
}
.zone.frequent{box-shadow:inset 0 0 0 3px var(--yellow)}
.zone.frequent::after{
  content:"MOST FREQUENT";position:absolute;top:6px;left:6px;
  font-size:9px;font-weight:900;letter-spacing:.08em;color:#111;
  background:var(--yellow);padding:3px 5px;border-radius:4px;
}
.zone.selected-offense{box-shadow:inset 0 0 0 3px var(--red)}
.zone.selected-defense{box-shadow:inset 0 0 0 3px var(--blue)}
.zone.frequent.selected-offense{box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 0 7px rgba(255,63,79,.9)}
.zone.frequent.selected-defense{box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 0 7px rgba(49,149,255,.9)}
.selection-badge{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:999px;
  display:grid;place-items:center;color:white;font-size:11px;font-weight:900;z-index:8;
}
.selection-badge.offense{background:var(--red)}
.selection-badge.defense{background:var(--blue)}
.zone-label{
  position:absolute;right:8px;bottom:7px;font-size:9px;color:rgba(214,221,233,.58);
  text-transform:uppercase;text-shadow:0 1px 5px rgba(0,0,0,.8);
}
.dot{
  position:absolute;border-radius:999px;transform:translate(-50%,-50%);
  box-shadow:0 0 10px currentColor;opacity:.94;
}

.leaders-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.leaders-card{padding:16px}
.leaders-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.leaders-heading h2{font-size:17px;margin:5px 0 12px}
.leader-key{font-size:10px;font-weight:900;letter-spacing:.09em;border-radius:999px;padding:5px 8px}
.offense-key{background:rgba(255,63,79,.15);color:#ff8791}
.defense-key{background:rgba(49,149,255,.15);color:#7dbbff}
.leader-list{display:grid;gap:8px}
.leader-row{
  width:100%;display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;
  background:#0b0f16;border:1px solid #252d3a;color:var(--text);border-radius:10px;
  padding:10px;cursor:pointer;text-align:left;
}
.leader-rank{
  width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:900;
}
.leader-row.offense .leader-rank{background:var(--red)}
.leader-row.defense .leader-rank{background:var(--blue)}
.leader-name{font-size:12px;font-weight:800}
.leader-value{font-size:12px;font-weight:900}
.leader-row.offense .leader-value{color:#ff7b86}
.leader-row.defense .leader-value{color:#74b7ff}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.detail-card{padding:16px}
.detail-card h2{font-size:18px;margin:6px 0 12px}
.stats-list{display:grid;gap:8px}
.stat-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:8px}
.stat-row span:first-child{color:var(--muted);font-size:12px}
.stat-row span:last-child{font-size:12px;font-weight:750}
.footer-note{color:#778397;font-size:11px;margin:16px 2px 28px;line-height:1.5}

@media (max-width:900px){
  .app-shell{padding:14px}
  .controls-card{grid-template-columns:1fr auto 1fr}
  .scenario-controls{grid-template-columns:1fr 1fr 1fr}
  .leaders-grid,.detail-grid{grid-template-columns:1fr}
  .map-card{min-height:560px}
  .field{height:460px;margin:14px}
  .topbar{align-items:flex-start}
  .status-pill{display:none}
  .map-header{display:block}
  .inline-legend{margin-top:10px;justify-content:flex-start;min-width:0}
}
@media (max-width:620px){
  .controls-card{grid-template-columns:1fr auto 1fr;padding:10px}
  .team-package{padding:8px;gap:8px}
  .team-package-logo{width:38px;height:38px}
  .team-package-scope{display:none}
  .scenario-controls{grid-template-columns:1fr}
  .family-toggle{grid-template-columns:repeat(3,1fr)}
  .narrative-logo{width:42px;height:42px}
  h1{font-size:23px}
}

/* ============================================================
   REAL DATA PASS GRID — FROZEN 6-QUADRANT MODEL
   ============================================================ */

.real-pass-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}


/* PBP V2 — explicit usage-dot dimensions */
#pbpDynamic .dot {
    display: block !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%);
    opacity: 0.94;
    z-index: 6;
}