/* ---------- Live runs page ---------- */
.runs-body{margin:0}
.runs-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 26px; background:linear-gradient(180deg,rgba(11,13,19,.96),rgba(11,13,19,.82));
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px)}
.runs-brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.runs-brand .brand-mark{width:34px; height:34px; font-size:17px; border-radius:10px}
.runs-brand .brand-title{display:block; font-weight:800; color:var(--ink); line-height:1}
.runs-brand .brand-sub{display:block; font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase}
.runs-top-right{display:flex; align-items:center; gap:10px}
.pill-link{padding:8px 14px; border-radius:999px; border:1px solid var(--line2); color:var(--muted);
  text-decoration:none; font-size:13px; font-weight:600; transition:.16s; white-space:nowrap}
.pill-link:hover{color:var(--ink); border-color:var(--ember); background:rgba(255,90,54,.08)}
.runs-top .twitch-badge{margin-bottom:0}

.runs-main{max-width:1100px; margin:0 auto; padding:30px 26px 90px; position:relative; z-index:1}
.runs-head h1{font-size:clamp(30px,4vw,44px); margin:0 0 8px}
.live-pip{display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--faint);
  margin-left:8px; vertical-align:middle}
.live-pip.ok{background:#34d17a; box-shadow:0 0 0 0 rgba(52,209,122,.6); animation:pulse 1.8s infinite}
.runs-lede{font-size:17px; color:var(--muted); max-width:74ch; margin:0}

.agg-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0 8px}
.agg{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px}
.agg-n{font-size:26px; font-weight:820; background:linear-gradient(120deg,var(--ember2),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.agg-l{font-size:13px; color:var(--ink); font-weight:600; margin-top:2px}
.agg-s{font-size:11.5px; color:var(--faint); margin-top:2px}

.runs-meta{font-size:12.5px; color:var(--faint); margin:6px 0 18px}
.runs-empty{color:var(--muted); padding:40px; text-align:center; border:1px dashed var(--line2); border-radius:14px}

/* run cards */
.runs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.run-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px;
  cursor:pointer; transition:.16s; position:relative; overflow:hidden}
.run-card:hover{transform:translateY(-3px); border-color:var(--line2); box-shadow:var(--shadow)}
.run-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px}
.run-card.win::before{background:linear-gradient(180deg,#34d17a,#1f8f52)}
.run-card.death::before{background:linear-gradient(180deg,var(--crim),#7a0c22)}
.rc-top{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.rc-badge{font-size:10.5px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:6px}
.b-win{color:#0c2417; background:#34d17a}
.b-death{color:#fff; background:var(--crim)}
.rc-asc{font-size:11px; font-weight:700; color:var(--gold); border:1px solid rgba(255,207,92,.3); padding:2px 6px; border-radius:6px}
.rc-when{margin-left:auto; font-size:11px; color:var(--faint)}
.rc-head{margin-bottom:8px}
.rc-kill{font-weight:700; color:var(--ink); font-size:15px}
.rc-kill.win{color:#5fe39b}
.rc-by{font-size:12.5px; color:var(--muted)}
.spark{width:100%; height:34px; margin:6px 0}
.spark-line{fill:none; stroke:var(--ember2); stroke-width:1.6; opacity:.85}
.rc-stats{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{font-size:11px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line);
  padding:3px 8px; border-radius:999px}
.chip-brain{color:var(--ooc); border-color:rgba(77,179,255,.3); background:rgba(77,179,255,.08)}
.rc-cta{margin-top:12px; font-size:12px; color:var(--ember2); font-weight:700}

/* modal */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,6,10,.72); backdrop-filter:blur(3px)}
.modal-card{position:relative; z-index:1; width:min(860px,100%); max-height:88vh; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--line2); border-radius:18px; padding:26px 28px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.modal-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:9px;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink); cursor:pointer; font-size:14px}
.modal-close:hover{border-color:var(--ember)}

.d-head{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.d-t1{font-size:22px; font-weight:800; color:var(--ink)}
.d-t2{font-size:12.5px; color:var(--muted); margin-top:2px}
.d-section{margin:22px 0 6px}
.d-label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember2); font-weight:800; margin-bottom:10px}
.d-label.sub{margin-top:16px; color:var(--muted)}
.d-sub-inline{text-transform:none; letter-spacing:0; color:var(--muted); font-weight:500; font-size:12px}

/* path ribbon */
.path-ribbon{display:flex; flex-wrap:wrap; gap:5px}
.path-node{width:26px; height:26px; display:grid; place-items:center; border-radius:7px; font-size:13px;
  border:1px solid var(--line2); background:var(--panel); color:var(--muted)}
.p-m{color:#ff9a7a} .p-e{color:#ff5a6e; border-color:rgba(255,90,110,.4)} .p-r{color:#7ee0c0}
.p-s{color:var(--gold)} .p-t{color:#d9b3ff} .p-q{color:var(--ooc)} .p-b{color:#fff; background:rgba(224,20,60,.3); border-color:var(--crim)}

/* deck + relics */
.d-cols{display:grid; grid-template-columns:1.3fr 1fr; gap:24px}
.deck-grid{display:flex; flex-wrap:wrap; gap:6px}
.deck-card{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:8px; font-size:12.5px;
  background:var(--panel); border:1px solid var(--line); color:#cdd4e4}
.deck-card.upg{border-color:rgba(255,207,92,.4); color:var(--gold); background:rgba(255,207,92,.06)}
.dc-n{font-size:11px; color:var(--faint); font-weight:700}
.relic-list{display:flex; flex-wrap:wrap; gap:6px}
.relic-item{padding:4px 9px; border-radius:8px; font-size:12.5px; background:rgba(145,70,255,.09);
  border:1px solid rgba(145,70,255,.25); color:#d3c1ff}
.boss-pick{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px}
.bp-picked{font-size:12px; font-weight:700; color:#5fe39b; padding:2px 8px; border-radius:6px; background:rgba(52,209,122,.1)}
.bp-skip{font-size:11.5px; color:var(--faint); text-decoration:line-through}

/* damage timeline */
.dmg-list{display:flex; flex-direction:column; gap:4px}
.dmg-row{display:grid; grid-template-columns:34px 1.3fr 2fr auto; gap:10px; align-items:center; font-size:12.5px}
.dmg-floor{color:var(--faint); font-weight:700}
.dmg-enemy{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dmg-bar-wrap{background:rgba(255,255,255,.05); border-radius:5px; height:12px; overflow:hidden}
.dmg-bar{display:block; height:100%; background:linear-gradient(90deg,var(--ember2),var(--ember)); border-radius:5px}
.dmg-bar.hot{background:linear-gradient(90deg,var(--ember),var(--crim))}
.dmg-bar.zero{background:#2c6e4e}
.dmg-num{color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

/* decision viz */
.choice{margin:14px 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02)}
.choice-top{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.choice-floor{font-weight:800; font-size:13px; color:var(--ink)}
.agree{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px}
.agree.yes{color:#0c2417; background:#34d17a}
.agree.no{color:#fff; background:var(--ember)}
.agree.na{color:var(--faint); border:1px solid var(--line2)}
.cand{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; margin:5px 0}
.cand-name{font-size:13px; color:var(--muted); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cand.picked .cand-name{color:#5fe39b; font-weight:700}
.cand-track{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border-radius:6px; padding:3px 6px}
.cand-bar{display:block; height:12px; border-radius:5px; min-width:2px}
.cand-bar.pos{background:linear-gradient(90deg,#4db3ff,#3b82f6)}
.cand-bar.neg{background:linear-gradient(90deg,#e0143c,#7a0c22)}
.cand-bar.is-picked{background:linear-gradient(90deg,#34d17a,#1f8f52)}
.cand-val{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.cand-unscored{font-size:11.5px; color:var(--faint)}

/* encounter stats table */
.enc-filters{display:flex; gap:8px; margin:6px 0 16px; flex-wrap:wrap}
.ef-btn{padding:7px 14px; border-radius:999px; border:1px solid var(--line2); background:var(--panel);
  color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.15s}
.ef-btn:hover{color:var(--ink)}
.ef-btn.active{color:#fff; background:linear-gradient(90deg,var(--ember),var(--crim)); border-color:transparent}
.enc-table{display:flex; flex-direction:column; gap:6px}
.enc-row{display:grid; grid-template-columns:38px 1.6fr 3fr 54px 90px 84px 74px; gap:12px; align-items:center;
  padding:9px 12px; background:var(--panel); border:1px solid var(--line); border-radius:11px}
.enc-act{font-size:11px; font-weight:800; text-align:center; padding:2px 0; border-radius:6px;
  color:var(--muted); background:rgba(255,255,255,.05)}
.enc-act.a1{color:#7ee0c0} .enc-act.a2{color:var(--ooc)} .enc-act.a3{color:#ff9a7a} .enc-act.a4{color:#d9b3ff}
.enc-name{font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.enc-bar-wrap{background:rgba(255,255,255,.05); border-radius:6px; height:14px; overflow:hidden}
.enc-bar{display:block; height:100%; border-radius:6px}
.enc-bar.w-hi{background:linear-gradient(90deg,#34d17a,#1f8f52)}
.enc-bar.w-mid{background:linear-gradient(90deg,#9fd649,#5fae2e)}
.enc-bar.w-lo{background:linear-gradient(90deg,var(--gold),var(--ember2))}
.enc-bar.w-bad{background:linear-gradient(90deg,var(--ember),var(--crim))}
.enc-win{font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
.enc-win.w-hi{color:#5fe39b} .enc-win.w-mid{color:#b6e06a} .enc-win.w-lo{color:var(--gold)} .enc-win.w-bad{color:#ff6a80}
.enc-n,.enc-d,.enc-hp{font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
.enc-d{color:var(--faint)}

@media (max-width:820px){
  .agg-strip{grid-template-columns:repeat(2,1fr)}
  .d-cols{grid-template-columns:1fr}
  .cand{grid-template-columns:110px 1fr}
  .runs-top-right .pill-link{display:none}
  .enc-row{grid-template-columns:32px 1.4fr 2fr 48px; row-gap:4px}
  .enc-n,.enc-d,.enc-hp{display:none}
}