:root{
  --bg:#F3F4F8; --panel:#FFFFFF; --ink:#1B2340; --muted:#5A6280; --line:#D9DCE6;
  --gold:#A87A1E; --gold-soft:#F3E7C9; --kill:#3E7D22; --kill-soft:#E2EFD8; --prog:#9A5A12; --prog-soft:#F6E8D3;
  /* Warcraft Logs parse colors, darkened where needed so they read on a light page */
  --t-grey:#6B7080; --t-green:#2E8A12; --t-blue:#0B5FD0; --t-purple:#8A2BD1; --t-orange:#C25F00; --t-pink:#C2457F; --t-gold:#9C7A1C;
  /* Class colors */
  --DeathKnight:#C41E3A; --DemonHunter:#A330C9; --Druid:#FF7C0A; --Evoker:#33937F; --Hunter:#7FAF3F;
  --Mage:#2FA8D0; --Monk:#00C27A; --Paladin:#E06FA8; --Priest:#9AA3B5; --Rogue:#D9C21A; --Shaman:#0070DD;
  --Warlock:#7375D8; --Warrior:#B07F4F;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121726; --panel:#1A2033; --ink:#E9EBF3; --muted:#A3A9BF; --line:#2E3650;
    --gold:#E2B64E; --gold-soft:#3A3120; --kill:#8FD45E; --kill-soft:#22321A; --prog:#F0B060; --prog-soft:#3A2A16;
    --t-grey:#9DA2B0; --t-green:#1EFF00; --t-blue:#3D8BFF; --t-purple:#B95CFF; --t-orange:#FF8000; --t-pink:#E268A8; --t-gold:#E5CC80;
    --Hunter:#AAD372; --Mage:#3FC7EB; --Monk:#00FF98; --Paladin:#F48CBA; --Priest:#E8ECF5; --Rogue:#FFF468; --Warrior:#C69B6D;
  }
}
:root[data-theme="dark"]{
  --bg:#121726; --panel:#1A2033; --ink:#E9EBF3; --muted:#A3A9BF; --line:#2E3650;
  --gold:#E2B64E; --gold-soft:#3A3120; --kill:#8FD45E; --kill-soft:#22321A; --prog:#F0B060; --prog-soft:#3A2A16;
  --t-grey:#9DA2B0; --t-green:#1EFF00; --t-blue:#3D8BFF; --t-purple:#B95CFF; --t-orange:#FF8000; --t-pink:#E268A8; --t-gold:#E5CC80;
  --Hunter:#AAD372; --Mage:#3FC7EB; --Monk:#00FF98; --Paladin:#F48CBA; --Priest:#E8ECF5; --Rogue:#FFF468; --Warrior:#C69B6D;
}
*,*::before,*::after{box-sizing:border-box}
html{padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;font-size:1.0625rem;line-height:1.5}
main{max-width:56rem;margin:0 auto;padding:2.5rem 1rem 4rem}
a{color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2{font-family:Marcellus,Georgia,serif;font-weight:400;line-height:1.15;margin:0}
h1{font-size:clamp(2.1rem,6vw,3rem)}
ul,ol{list-style:none;margin:0;padding:0}

.masthead{margin-bottom:2rem}
.eyebrow{margin:0 0 .4rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.lede{margin:.5rem 0 0;color:var(--muted);font-size:1.1rem}
.crumb{margin:0 0 1.5rem;font-weight:600}
.crumb a{text-decoration:none}
.section-h{font-size:1.45rem;margin:0 0 .9rem}
.section-h .n{font-family:"Source Sans 3",system-ui,sans-serif;font-size:.95rem;color:var(--muted);font-weight:600;margin-left:.3rem}

/* Raid nights */
.nights{display:grid;gap:.9rem}
.night{display:grid;grid-template-columns:4.2rem 1fr auto;gap:1.1rem;align-items:center;padding:1.1rem 1.2rem;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none;
  transition:border-color .15s,transform .15s}
.night:hover{border-color:var(--gold);transform:translateY(-1px)}
.cal{display:flex;flex-direction:column;align-items:center;justify-content:center;height:4.2rem;border-radius:10px;
  background:var(--gold-soft);color:var(--gold)}
.cal .mon{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cal .day{font-family:Marcellus,Georgia,serif;font-size:1.8rem;line-height:1}
.night-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.night-title{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:1.4rem;line-height:1.2}
.night-meta,.night-count{color:var(--muted);font-size:.95rem}
.chev{font-size:2rem;color:var(--muted);line-height:1}
.boss-list,.boss-row{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.45rem 0 .2rem}
.boss-list li,.boss-row li{display:flex;align-items:center;gap:.4rem;font-size:.95rem}
.boss{font-weight:600}
.status{font-size:.75rem;font-weight:700;padding:.08rem .5rem;border-radius:999px;white-space:nowrap}
.status.kill{background:var(--kill-soft);color:var(--kill)}
.status.prog{background:var(--prog-soft);color:var(--prog)}
.pulls{color:var(--muted);font-size:.85rem}
.boss-row{gap:.6rem;margin:0 0 1rem}
.boss-row li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem}

.earlier{margin-top:3rem}
.earlier li{padding:.55rem 0;border-top:1px solid var(--line)}
.earlier li:first-child{border-top:0}
.earlier a{font-weight:600}
.earlier span{color:var(--muted);font-size:.95rem;margin-left:.4rem}

/* Roster */
.hint{color:var(--muted);margin:0 0 2rem;max-width:42rem}
.role{margin-top:2.2rem}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.7rem}
.player{display:flex;flex-direction:column;gap:.1rem;padding:.85rem 1rem .9rem 1.1rem;background:var(--panel);
  border:1px solid var(--line);border-left:5px solid var(--cc,var(--line));border-radius:12px}
.pname{font-weight:700;font-size:1.1rem}
.pspec{font-size:.95rem}
.also{color:var(--muted);font-size:.85rem}
.pmeta{color:var(--muted);font-size:.85rem}
.parses{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.parse{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden;font-size:.8rem}
.parse .pb{padding:.1rem .45rem;color:var(--muted)}
.parse .pn{padding:.1rem .45rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tc);border-left:1px solid var(--line);min-width:2.1rem;text-align:center}
.t-grey{--tc:var(--t-grey)} .t-green{--tc:var(--t-green)} .t-blue{--tc:var(--t-blue)} .t-purple{--tc:var(--t-purple)}
.t-orange{--tc:var(--t-orange)} .t-pink{--tc:var(--t-pink)} .t-gold{--tc:var(--t-gold)} .t-none{--tc:var(--muted)}
.c-DeathKnight{--cc:var(--DeathKnight)} .c-DemonHunter{--cc:var(--DemonHunter)} .c-Druid{--cc:var(--Druid)} .c-Evoker{--cc:var(--Evoker)}
.c-Hunter{--cc:var(--Hunter)} .c-Mage{--cc:var(--Mage)} .c-Monk{--cc:var(--Monk)} .c-Paladin{--cc:var(--Paladin)} .c-Priest{--cc:var(--Priest)}
.c-Rogue{--cc:var(--Rogue)} .c-Shaman{--cc:var(--Shaman)} .c-Warlock{--cc:var(--Warlock)} .c-Warrior{--cc:var(--Warrior)}
.source{margin-top:2.5rem;color:var(--muted);font-size:.9rem}

@media (max-width:560px){
  .night{grid-template-columns:3.4rem 1fr;gap:.8rem;padding:1rem;align-items:start}
  .cal{height:3.4rem}
  .cal .day{font-size:1.45rem}
  .chev{display:none}
}

/* ---------- Player review pages ---------- */
.crumb a{margin-right:.2rem}
.player-head{border-left:6px solid var(--cc,var(--gold));padding-left:1rem}
.jump{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0 0 2rem;font-weight:600}
.boss-sec,.gear-sec,.coach{margin-top:3rem}
.boss-sec h3,.gear-sec h3{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:1.2rem;margin:2rem 0 .3rem}
.why,.note{color:var(--muted);font-size:.95rem;margin:.3rem 0 .8rem;max-width:44rem}
.note{background:var(--prog-soft);color:var(--ink);padding:.7rem .9rem;border-radius:10px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.7rem;margin:.8rem 0 1rem}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem .95rem;display:flex;flex-direction:column;gap:.1rem}
.tl{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tv{font-family:Marcellus,Georgia,serif;font-size:1.8rem;line-height:1.1;font-variant-numeric:tabular-nums}
.tv small{font-family:"Source Sans 3",system-ui,sans-serif;font-size:.9rem;color:var(--muted)}
.ts{font-size:.85rem;color:var(--muted)}
.tv .t-grey,.tv .t-green,.tv .t-blue,.tv .t-purple,.tv .t-orange,.tv .t-pink,.tv .t-gold{color:var(--tc)}

.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
th{font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
td small{display:block;color:var(--muted);font-size:.8rem;font-weight:400}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.ok{color:var(--kill);font-weight:700}
td.bad{color:#B3362B;font-weight:700}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) td.bad{color:#F08A80}}
:root[data-theme="dark"] td.bad{color:#F08A80}
.ab{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.ic{width:18px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}

.barcol{width:30%;min-width:8rem}
.cmp{position:relative;height:.75rem;background:var(--bg);border-radius:999px}
.cmp-you{position:absolute;left:0;top:0;bottom:0;background:var(--gold);border-radius:999px}
.cmp-med,.cmp-top{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;background:var(--ink)}
.cmp-top{background:var(--t-purple)}

.timeline{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem 1.6rem}
.tl-phases{position:relative;height:1.7rem;margin-left:11rem;margin-bottom:.5rem}
.seg{position:absolute;top:0;bottom:0;background:var(--gold-soft);border-right:2px solid var(--panel);border-radius:4px;overflow:hidden}
.seg span{display:block;padding:.2rem .4rem;font-size:.75rem;font-weight:700;color:var(--gold);white-space:nowrap}
.seg.inter{background:var(--prog-soft)}
.seg.inter span{color:var(--prog)}
.tl-row{display:flex;align-items:center;height:1.7rem}
.tl-lab{width:11rem;flex:none;font-size:.85rem}
.tl-track{position:relative;flex:1;height:100%;border-bottom:1px dashed var(--line)}
.tl-track i{position:absolute;top:.35rem;width:.9rem;height:.9rem;margin-left:-.45rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--panel)}
.tl-row.es .tl-track i{background:var(--t-purple)}
.tl-row.pot .tl-track i{background:var(--t-blue);border-radius:3px}
.tl-row.death .tl-track i{background:#C0392B;border-radius:2px;transform:rotate(45deg)}
.tl-ticks{position:relative;height:1rem;margin-left:11rem;margin-top:.3rem}
.tl-ticks span{position:absolute;font-size:.75rem;color:var(--muted);transform:translateX(-50%)}

.phase-notes{display:grid;gap:.7rem}
.pn-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem}
.pn-card h4{margin:0 0 .3rem;font-size:1rem}
.pn-card h4 small{color:var(--muted);font-weight:400;margin-left:.3rem}
.pn-card p{margin:.3rem 0}
.pn-card .tip{background:var(--gold-soft);border-radius:8px;padding:.5rem .7rem}
.deaths li{padding:.4rem 0;border-top:1px solid var(--line)}
.deaths li:first-child{border-top:0}

.coach{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:14px;padding:1.2rem 1.3rem}
.coach ol{list-style:decimal;padding-left:1.3rem;margin:.4rem 0 0}
.coach li{margin:.6rem 0}
.coach li strong{display:block}
.others{display:flex;gap:1rem;flex-wrap:wrap}
a.pcard{color:inherit;text-decoration:none}
a.pcard .player{transition:border-color .15s}
a.pcard:hover .player{border-color:var(--gold)}
.pmore{color:var(--gold);font-size:.85rem;font-weight:700;margin-top:.4rem}

@media (max-width:560px){
  .tl-phases,.tl-ticks{margin-left:6.5rem}
  .tl-lab{width:6.5rem}
  .tl-lab .ab{white-space:normal;font-size:.75rem}
  .barcol{display:none}
}