/* ============================================================
   GUIDE DETAIL VIEW — app shell + tabs + panels
   ============================================================ */
.app { display:flex; flex-direction:column; max-width:var(--container); margin:0 auto; padding:0 20px 40px; }
@media (max-width:600px){ .app{ padding:0 14px 40px; } }

/* ── Intro ──────────────────────────────────────────────── */
.intro { flex:0 0 auto; padding:20px 0 14px; }
.site-title {
  font-family:var(--font-display);
  font-size: clamp(28px,6vw,44px); font-weight:800; line-height:1; letter-spacing:-.02em;
  margin-bottom:8px;
}
.header-sub { font-size:var(--text-sm); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--t2); margin-bottom:8px; }
.header-desc { font-size:var(--text-md); color:var(--t2); max-width:var(--measure); line-height:1.55; margin-bottom:10px; }
.win-box {
  display:flex; align-items:flex-start; gap:10px; padding:11px 14px;
  background:var(--accent-d); border:1px solid var(--accent-b); border-left:3px solid var(--gold);
  border-radius:var(--radius);
  font-size:var(--text-base); color:var(--accent); line-height:1.5; max-width:var(--measure);
}
.win-box-icon { flex-shrink:0; font-size:var(--text-base); }

/* ── Tab nav ────────────────────────────────────────────── */
.tabnav {
  flex:0 0 auto; display:flex; gap:6px; border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabnav::-webkit-scrollbar { display:none; }
.tab-btn {
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--t3); flex-shrink:0;
  padding:10px 16px; border-bottom:2px solid transparent; border-radius:var(--radius) var(--radius) 0 0;
  transition:color var(--transition), border-color var(--transition), background var(--transition);
  min-height:44px;
}
.tab-btn:hover { color:var(--t2); }
.tab-btn.active { color:var(--t1); border-color:var(--gold); background:linear-gradient(180deg, var(--gold-d), transparent); }
@media (max-width:480px) {
  .tab-btn { padding:10px 12px; }
}

/* ── Panels ─────────────────────────────────────────────── */
.panels { flex:1 1 auto; position:relative; min-height:400px; }
.panel {
  position:absolute; inset:0; overflow-y:auto; padding:18px 0 24px;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.panel.active { opacity:1; pointer-events:auto; position:relative; }

/* ============================================================
   LEADS PANEL
   ============================================================ */
.leads-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:640px){ .leads-grid{ grid-template-columns:1fr; } }

.lead-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.lead-card-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg2);
}
.lead-situation { font-size:var(--text-base); font-weight:700; color:var(--t1); }

.lead-mons { display:flex; gap:8px; padding:12px 14px 10px; }
.lead-mon { display:flex; align-items:center; gap:8px; background:var(--accent-d); border:1px solid var(--accent-b); border-radius:8px; padding:6px 10px; flex:1; }
.lead-mon-name { font-size:var(--text-sm); font-weight:700; color:var(--t1); }

.lead-row { display:flex; gap:10px; padding:8px 14px; border-top:1px solid var(--line); }
.lead-row-icon { font-size:var(--text-md); flex-shrink:0; width:18px; text-align:center; }
.lead-row-body { flex:1; min-width:0; }
.lead-row-label { font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--t3); margin-bottom:2px; }
.lead-row-text { font-size:var(--text-base); color:var(--t2); line-height:1.5; }
.lead-row.is-pivot .lead-row-label { color:var(--ok); }
.pivot-name { color:var(--t1); font-weight:700; }
.lead-row.is-fourth .lead-row-label { color:var(--accent); }
.fourth-name { color:var(--t1); font-weight:700; }

/* ============================================================
   TEAM PANEL
   ============================================================ */
.team-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:480px){ .team-grid{ grid-template-columns:1fr; } }

.pcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; position:relative; display:flex; flex-direction:column; }
.pcard::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-brand); }
.card-top { padding:13px 12px 9px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.card-top-info { flex:1; min-width:0; }
.card-name { font-size:var(--text-base); font-weight:700; color:var(--t1); line-height:1.2; }
.card-role { font-size:var(--text-2xs); color:var(--t2); font-weight:400; margin-top:1px; }
.card-top-types { display:flex; gap:4px; flex-shrink:0; }

.type-badge {
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:700; letter-spacing:.04em;
  color:#fff; border-radius:4px; padding:2px 6px; text-transform:uppercase; line-height:1.4;
  text-shadow:0 1px 1px rgba(0,0,0,.25); flex-shrink:0;
}

.nature-chip { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--bg2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.nature-name { font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.06em; color:var(--t2); }
.nat-plus, .nat-minus { font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:700; border-radius:3px; padding:1px 5px; }
.nat-plus { color:var(--ok); background:var(--ok-d); border:1px solid var(--ok-b); }
.nat-minus { color:var(--danger); background:var(--danger-d); border:1px solid var(--danger-b); }

.pcard-tabs { display:flex; gap:4px; margin-left:auto; }
.pcard-tab-btn {
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:700; letter-spacing:.04em;
  color:var(--t3); background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:3px 9px; cursor:pointer; transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.pcard-tab-btn:hover { color:var(--t2); }
.pcard-tab-btn.active { color:var(--t1); border-color:var(--gold); background:var(--gold-d); }

.card-body { padding:9px 12px 10px; flex:1; display:flex; flex-direction:column; min-height:0; }
.pcard-panel { display:none; }
.pcard-panel.active { display:flex; flex-direction:column; flex:1; min-height:0; }

.stat-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--line); gap:8px; }
.stat-row:last-of-type { border-bottom:none; margin-bottom:5px; }
.stat-key { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--t3); flex-shrink:0; }
.stat-val { font-size:var(--text-sm); color:var(--t2); text-align:right; }

.ev-grid { display:flex; gap:8px; padding:8px 0 4px; flex-wrap:wrap; }
.ev-col { display:flex; flex-direction:column; align-items:center; gap:3px; }
.ev-key { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--t3); letter-spacing:.04em; }
.ev-box {
  font-family:var(--font-mono); font-size:var(--text-sm); font-weight:700; color:var(--t1);
  background:var(--bg2); border:1px solid var(--line); border-radius:5px; min-width:26px;
  padding:3px 4px; text-align:center;
}

.stats-desc { flex:1; margin-top:2px; margin-bottom:6px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.speed-note { font-size:var(--text-sm); color:var(--t2); line-height:1.25; }
.speed-note::before { content:'⚡ '; color:var(--accent); }

.moves { flex:1; display:flex; flex-direction:column; gap:3px; }
.move { flex:1; display:flex; flex-direction:column; justify-content:center; gap:2px; background:var(--bg2); border-radius:5px; padding:4px 7px; }
.move-left { display:flex; align-items:center; gap:5px; }
.move-name { font-size:var(--text-sm); font-weight:500; color:var(--t1); }
.move-note { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--t3); text-wrap:balance; }

.pcard-hint {
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600; letter-spacing:.04em;
  color:var(--t3); background:none; border:none; border-top:1px solid var(--line);
  padding:7px 0 0; margin-top:8px; text-align:center; cursor:pointer; width:100%;
  transition:color var(--transition);
}
.pcard-hint:hover { color:var(--accent); }

/* ============================================================
   THREATS PANEL
   ============================================================ */
.threats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .threats-grid{ grid-template-columns:1fr; } }

.threat-card { background:var(--surface); border:1px solid var(--danger-b); border-radius:var(--radius-lg); overflow:hidden; }
.threat-top { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--danger-d); border-bottom:1px solid var(--line); }
.threat-name { font-size:var(--text-base); font-weight:700; color:var(--t1); }
.threat-type { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--t3); margin-top:1px; }

.threat-row { display:flex; gap:10px; padding:9px 14px; border-top:1px solid var(--line); }
.threat-row-icon { font-size:var(--text-base); flex-shrink:0; width:18px; text-align:center; }
.threat-row-label { font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--t3); margin-bottom:2px; }
.threat-row-text { font-size:var(--text-base); color:var(--t2); line-height:1.5; }
.threat-row.is-fix .threat-row-label { color:var(--ok); }

/* ============================================================
   PLAY GUIDE PANEL — team-specific misplays + evergreen practice tip
   ============================================================ */
.practice-tip {
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin-bottom:14px;
  background:var(--accent-d); border:1px solid var(--accent-b); border-radius:var(--radius);
  font-size:var(--text-base); color:var(--t2); line-height:1.55;
}
.practice-tip-icon { flex-shrink:0; font-size:var(--text-md); }
.practice-tip strong { color:var(--t1); }

.misplays-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .misplays-grid{ grid-template-columns:1fr; } }

.misplay-card { background:var(--surface); border:1px solid var(--warn-b); border-radius:var(--radius-lg); overflow:hidden; }
.misplay-top { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--warn-d); border-bottom:1px solid var(--line); }
.misplay-top-icon { font-size:var(--text-base); flex-shrink:0; }
.misplay-mistake { font-size:var(--text-base); font-weight:700; color:var(--t1); }
.misplay-body { padding:10px 14px; font-size:var(--text-base); color:var(--t2); line-height:1.55; }