/* Heart Reviews pages (home, player, review); tokens come from theme.css. */
:root{--good:#4fd18b; --bad:#ff6a80}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; overflow-x:hidden}
a{color:inherit}
.glow{position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60vw 60vw at 85% -15%,rgba(255,90,54,.14),transparent 60%),
    radial-gradient(45vw 45vw at 0% 10%,rgba(224,20,60,.10),transparent 55%)}

.top{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  padding:14px 28px; background:rgba(11,13,19,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top-brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800}
.mark{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:900; color:#1a0d08;
  background:linear-gradient(135deg,var(--ember2),var(--crim))}
.nav{display:flex; gap:18px; font-size:14px; color:var(--muted); font-weight:600}
.nav a{text-decoration:none} .nav a:hover,.nav a.on{color:var(--ink)}
.steam{margin-left:auto; padding:9px 16px; border-radius:10px; font-weight:800; font-size:14px; color:#1a0d08;
  text-decoration:none; background:linear-gradient(135deg,var(--ember2),var(--ember));
  box-shadow:0 8px 24px -10px var(--ember)}

.back{position:relative; z-index:1; max-width:980px; margin:0 auto; padding:18px 24px 0}
.back-btn{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:10px; font-weight:700;
  font-size:14px; text-decoration:none; color:var(--ink); background:var(--panel); border:1px solid var(--line2)}
.back-btn:hover{border-color:var(--ember2); color:var(--ember2)}
.back + main{padding-top:14px}
main{position:relative; z-index:1; max-width:980px; margin:0 auto; padding:30px 24px 60px}
.kicker{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember2); font-weight:800;
  overflow-wrap:anywhere}
h1{margin:6px 0 4px; font-size:30px; letter-spacing:-.02em; line-height:1.15; overflow-wrap:anywhere}
.meta{color:var(--muted); font-size:14px; display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center}
.sec{margin:26px 0 10px; font-size:14px; color:var(--muted); font-weight:700}
.note{font-size:12.5px; color:var(--faint); margin-top:8px}
.msg{margin:22px 0; padding:16px 18px; border-radius:14px; background:var(--panel); border:1px solid var(--line);
  color:var(--muted)}
.msg b{color:var(--ink)}
.msg.err{border-color:rgba(224,20,60,.5); color:#ff8fa0}

.pill{display:inline-block; padding:2px 10px; border-radius:99px; border:1px solid var(--line2); font-size:12.5px;
  font-weight:600; white-space:nowrap}
.pill.win{color:var(--good); border-color:rgba(79,209,139,.45); background:rgba(79,209,139,.08)}
.pill.dead{color:#ff8fa0; border-color:rgba(224,20,60,.5); background:rgba(224,20,60,.1)}
.chip{font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap}
.chip.go{color:var(--ember2)} .chip.fail{color:var(--bad)}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; min-width:0}
.stat b{display:block; font-size:24px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px; color:var(--muted)}
.ok{color:var(--good)} .bad{color:var(--bad)} .meh{color:var(--gold)}

/* home */
.hero{display:flex; gap:12px; align-items:stretch; margin:20px 0; flex-wrap:wrap}
.searchbox{position:relative; flex:1 1 260px}
.search{width:100%; padding:13px 16px; border-radius:12px; background:var(--panel2); border:1px solid var(--line2);
  color:var(--ink); font-size:15px; font-family:inherit}
.search:focus{outline:none; border-color:var(--ember2)}
.suggest{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:4; margin:0; padding:6px; list-style:none;
  background:var(--panel2); border:1px solid var(--line2); border-radius:12px; box-shadow:var(--shadow)}
.suggest[hidden]{display:none}
.suggest a{display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:8px;
  text-decoration:none}
.suggest a:hover,.suggest a:focus{background:rgba(255,138,61,.1); outline:none}
.suggest small{color:var(--faint)}
.cta{padding:13px 18px; border-radius:12px; font-weight:800; color:#1a0d08; text-decoration:none;
  background:linear-gradient(135deg,var(--ember2),var(--ember))}
.filters{display:flex; gap:8px 14px; align-items:center; flex-wrap:wrap; margin:22px 0 10px}
.filters h2{margin:0; font-size:16px}
.filters label{margin-left:auto; font-size:13px; color:var(--muted); font-weight:700}
.filters input{width:70px; margin-left:6px; padding:5px 8px; border-radius:8px; border:1px solid var(--line2);
  background:var(--panel2); color:var(--ink); font:inherit}

/* tables */
.list{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow-x:auto;
  scrollbar-color:var(--line2) transparent}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  font-weight:700; padding:8px 12px; white-space:nowrap}
td{padding:12px; border-top:1px solid var(--line); vertical-align:middle}
.list tr.click:hover td{background:rgba(255,138,61,.06)}
.list td a{text-decoration:none}
.rank{color:var(--faint); font-weight:800; width:40px}
.num{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
.sims{color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap}
.why{color:var(--muted)}

/* review */
.chart{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px 8px; margin-bottom:26px;
  overflow-x:auto; scrollbar-color:var(--line2) transparent}
.chart h3{margin:0 0 6px; font-size:14px; color:var(--muted); font-weight:700}
.chart svg{display:block; width:100%; height:auto; min-width:560px}
.turn{background:var(--panel); border:1px solid var(--line); border-radius:16px; margin-bottom:12px; overflow:hidden}
.turn summary{list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  padding:14px 18px}
.turn summary::-webkit-details-marker{display:none}
.tn{font-weight:800; min-width:62px}
.swing{font-variant-numeric:tabular-nums; font-weight:700}
.verdict{margin-left:auto; font-size:13px; color:var(--muted)}
.chev{color:var(--faint); transition:transform .2s}
.turn[open] .chev{transform:rotate(90deg)}
.turn.big{border-color:rgba(224,20,60,.55); box-shadow:0 0 0 1px rgba(224,20,60,.2),0 20px 40px -24px rgba(224,20,60,.6)}
.turn.big summary{background:linear-gradient(90deg,rgba(224,20,60,.14),transparent)}
.body{padding:4px 18px 18px; border-top:1px solid var(--line)}
.bar{position:relative; height:8px; width:140px; border-radius:99px; background:rgba(255,255,255,.06)}
.bar i{position:absolute; left:0; top:0; bottom:0; border-radius:99px;
  background:linear-gradient(90deg,var(--ember),var(--ember2))}
.tag{display:inline-block; font-size:11px; font-weight:800; padding:1px 7px; border-radius:6px; margin-left:6px;
  white-space:nowrap}
.tag.best{background:rgba(79,209,139,.15); color:var(--good)}
.tag.pick{background:rgba(255,138,61,.15); color:var(--ember2)}
.tag.you{background:rgba(224,20,60,.18); color:#ff8fa0}

.foot{position:relative; z-index:1; max-width:980px; margin:0 auto; padding:24px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13px}
.foot p{margin:0 0 8px} .foot b{color:var(--ink)} .foot a{color:var(--ember2)}

@media (max-width:700px){
  .top{position:static; gap:8px 14px; padding:10px 16px}
  .steam{order:2; padding:7px 12px; font-size:13px}
  .nav{order:3; flex-basis:100%; gap:16px}
  th{padding:8px 6px; white-space:normal} td{padding:10px 6px}
  .hero .cta{display:none}
  main{padding:22px 16px 48px} .back{padding:14px 16px 0}
  .foot{padding:20px 16px}
  h1{font-size:24px}
  .stats{grid-template-columns:1fr 1fr}
  .filters label{margin-left:0}
  .chev{margin-left:auto; order:2}
  .verdict{margin-left:0; order:3; flex-basis:100%}
  .chip{white-space:normal}
  .bar{width:70px}
  .sbs li{flex-direction:column; align-items:flex-start}
}

/* playouts */
.po-btn{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:6px; border:1px solid var(--line2);
  background:transparent; color:var(--muted); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  white-space:nowrap}
.po-btn:hover,.po-btn[aria-expanded="true"]{color:var(--ember2); border-color:var(--ember2)}
.po-note,.po-msg{font-size:12.5px; color:var(--faint); margin-bottom:8px}
.rep{border:1px solid var(--line); border-radius:10px; margin-top:6px; background:var(--panel)}
.rep summary{cursor:pointer; padding:7px 10px; font-size:13px; font-weight:600}
.rep ol{list-style:none; margin:0; padding:0 10px 8px}
.rep li{display:flex; flex-wrap:wrap; gap:2px 12px; padding:6px 0; border-top:1px solid var(--line); font-size:12.5px}
.po-turn{font-weight:800; min-width:56px}
.po-state{color:var(--muted); font-variant-numeric:tabular-nums; min-width:220px}
.po-state b{color:var(--ink)}
.po-acts{flex-basis:100%; color:var(--ink)}
.whole{margin:22px 0}
.whole h3{margin:0 0 4px}
.stats.two{grid-template-columns:1fr 1fr; margin:10px 0}
.whole-btn{padding:6px 12px; border-radius:8px; border:1px solid var(--line2); background:var(--panel); color:inherit; cursor:pointer; font:inherit}
.whole-btn:hover{color:var(--ember2); border-color:var(--ember2)}

/* review v2: board, cards, step-by-step grades */
.board{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; margin:14px 0 10px}
.vs{align-self:center; color:var(--faint); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.side{background:var(--panel2); border:1px solid var(--line2); border-radius:14px; padding:12px 14px; min-width:0}
.side.heart{border-color:rgba(224,20,60,.35)}
.who{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:800; margin-bottom:8px}
.nrg{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:13px; color:#1a0d08;
  background:radial-gradient(circle at 35% 35%,var(--gold),var(--ember)); box-shadow:0 0 10px -2px var(--ember)}
.intent{margin-left:auto; padding:2px 10px; border-radius:99px; font-size:12.5px; font-weight:700; color:#ffd2d9;
  background:rgba(224,20,60,.18); border:1px solid rgba(224,20,60,.45)}
.hp{position:relative; height:22px; border-radius:7px; background:rgba(255,255,255,.06); overflow:visible}
.hp i{position:absolute; left:0; top:0; bottom:0; border-radius:7px; background:linear-gradient(90deg,#b3122f,var(--crim))}
.hp span{position:relative; display:block; text-align:center; font-size:12.5px; line-height:22px; font-variant-numeric:tabular-nums}
.blk{position:absolute; left:-8px; top:-4px; min-width:30px; height:30px; padding:0 4px; display:grid; place-items:center;
  font-style:normal; font-weight:800; font-size:13px; color:#d9ecff; border-radius:9px 9px 14px 14px;
  background:linear-gradient(180deg,#4d89c7,#2c5c92); border:1px solid #8dbbea}
.side.you .hp{margin-left:10px}
.pws{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.pw{font-size:12px; padding:2px 8px; border-radius:6px; border:1px solid var(--line2); color:var(--muted); white-space:nowrap}
.pw b{color:var(--ink); font-variant-numeric:tabular-nums}
.pw.buff{border-color:rgba(79,209,139,.4); background:rgba(79,209,139,.08)} .pw.buff b{color:var(--good)}
.pw.debuff{border-color:rgba(255,106,128,.45); background:rgba(255,106,128,.08)} .pw.debuff b{color:var(--bad)}
.pw.on{border-color:rgba(255,207,92,.4); background:rgba(255,207,92,.07); color:var(--gold)}
.pw.zero{opacity:.65}
.relics{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 12px}
.relic{font-size:12px; padding:2px 9px; border-radius:99px; background:rgba(255,207,92,.06); border:1px solid rgba(255,207,92,.22);
  color:#e9d7a8; white-space:nowrap}
.relic b{margin-left:6px; padding:0 5px; border-radius:99px; background:var(--gold); color:#1a0d08; font-size:11px}
.cards{margin-bottom:14px}
.hand-h{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:6px}
.hand{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.tile{position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9px; font-size:13px;
  font-weight:600; background:var(--panel2); border:1px solid var(--line2); border-top-width:3px}
.tile .cost{display:inline-grid; place-items:center; min-width:19px; height:19px; border-radius:50%; font-size:11.5px;
  background:rgba(255,255,255,.1)}
.tile.attack{border-top-color:#e2563f} .tile.skill{border-top-color:#4d9fe0} .tile.power{border-top-color:#e8b33d}
.tile.curse{border-top-color:#9b5de5; color:#cdb6ef} .tile.status{border-top-color:#7a8296; color:var(--muted)}
.piles{display:flex; flex-wrap:wrap; gap:6px}
.pile{border:1px solid var(--line); border-radius:9px; background:var(--panel)}
.pile summary{cursor:pointer; padding:4px 10px; font-size:12.5px; color:var(--muted)}
.pile summary b{color:var(--ink); margin-left:4px}
.pile[open]{flex-basis:100%}
.pile-note{font-size:11.5px; color:var(--faint); padding:0 10px}
.pile-cards{display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px 10px}
.eye{margin-left:6px; vertical-align:middle; display:inline-flex; padding:1px 4px; border:1px solid transparent; border-radius:6px; background:none; color:var(--muted); cursor:pointer}
.eye:hover,.eye:focus-visible{border-color:var(--line); color:var(--ink)}
.eye svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.eye .eye-off,.draw-order-on .eye .eye-on{display:none}
.draw-order-on .eye .eye-off{display:inline-flex}
.draw-order-on .eye{color:var(--ink)}
.order-real,.draw-order-on .order-sorted{display:none}
.draw-order-on .order-real{display:block}
.mini{font-size:12px; padding:1px 7px; border-radius:6px; background:var(--panel2); border:1px solid var(--line)}
.mini.none{color:var(--faint); border:0; background:none}
.mini.known{border-color:#9fd3ff; color:#d9ecff}
.known-draw{text-decoration:underline dotted; text-underline-offset:3px; cursor:help}
.frozen-eye .known-draw{text-decoration:none; cursor:auto}
.step{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding:4px 10px 4px 4px; border-radius:99px;
  background:var(--panel2); border:1px solid var(--line2); font-size:13px; font-weight:600}
.step > i{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; font-style:normal; font-size:11px;
  font-weight:800; background:rgba(255,138,61,.18); color:var(--ember2)}
.step.same{opacity:.55}
.step.rest{border-style:dashed; color:var(--muted)} .step.rest > i{background:rgba(255,255,255,.06); color:var(--faint)}
.drew{font-size:11.5px; font-weight:600; color:#9fd3ff; padding:0 7px; border-radius:99px; background:rgba(77,159,224,.12)}
.sbs{background:var(--panel2); border:1px solid var(--line2); border-radius:14px; padding:12px 14px; margin:4px 0 16px}
.sbs h4,.lines-h{margin:0 0 8px; font-size:13.5px}
.lines-h{margin-top:4px}
.sbs ol{list-style:none; margin:0; padding:0}
.sbs li{display:flex; align-items:center; gap:6px 12px; padding:6px 0; border-top:1px solid var(--line)}
.sbs li:first-child{border-top:0}
.g{font-size:12.5px; color:var(--muted)}
.g b{color:var(--ink)}
.g.agree{color:var(--good); font-weight:700}
.g.worse{color:var(--bad)} .g.better{color:var(--good)} .g.close{color:var(--gold)}
.g.none{color:var(--faint); font-style:italic}
.goto{margin-left:6px; color:inherit; font-weight:700; font-variant-numeric:tabular-nums}
.lines{display:flex; flex-direction:column; gap:8px}
.line{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--panel); transition:box-shadow .3s}
.line.you{border-color:rgba(224,20,60,.4); background:rgba(224,20,60,.05)} .line.you .bar i{background:var(--bad)}
.line.flash{box-shadow:0 0 0 2px var(--ember2)}
.line-h .tag:first-child{margin-left:0}
.line-h{margin-bottom:6px; min-height:4px}
.steps{display:flex; flex-wrap:wrap; gap:5px}
.tail{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line2)}
.tail-h{flex-basis:100%; font-size:11.5px; color:var(--faint)}
.score{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin-top:8px}
.score .num{font-size:18px}
.tag.fork{background:rgba(77,159,224,.15); color:#9fd3ff}
.po{margin-top:10px; padding:10px 12px 12px; border-radius:10px; background:var(--panel2)}
.tl li{flex-direction:column; align-items:stretch}
.act{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; width:100%; padding:2px 4px; border:0; border-radius:8px;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.act:hover:not(:disabled),.act.on{background:rgba(255,255,255,.04)}
.act:disabled{cursor:default}
.bdg{font-size:12.5px; font-weight:700; padding:1px 8px; border-radius:6px}
.bdg.agree{color:var(--good); background:rgba(79,209,139,.12)}
.bdg.worse{color:var(--bad); background:rgba(224,20,60,.14)}
.bdg.better{color:var(--good); background:rgba(79,209,139,.12)}
.bdg.even{color:var(--gold); background:rgba(255,200,80,.1)}
.tl li.drawdiv{padding:4px 0; font-size:12.5px; color:#9fd3ff}
.drawdiv span{border-left:2px solid #9fd3ff; padding-left:8px}
.cmp-slot:empty{display:none}
.cmp{margin:8px 0 4px}
.lines.two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:700px){.lines.two,.board{grid-template-columns:1fr} .vs{display:none}}
.line.pick{border-color:rgba(255,138,61,.4); background:rgba(255,138,61,.05)}
.line.best{border-color:rgba(79,209,139,.4); background:rgba(79,209,139,.05)}
.po-more{flex-basis:100%; font-size:12.5px; color:var(--muted)}
.po-more summary{cursor:pointer}