:root{--ink:#0A0E0D;--surface:#141B19;--surface2:#1C2523;--line:rgba(217,164,65,.18);--parch:#F4EBD9;--muted:#9AA8A1;--gold:#D9A441;--gold2:#F2CE84;--W:#F2E7CE;--U:#7FB2D9;--B:#9C8FA6;--R:#DB6A4C;--G:#68AE80}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(120% 60% at 10% -5%,rgba(217,164,65,.13),transparent 55%),var(--ink);color:var(--parch);font-family:Inter,system-ui,sans-serif;line-height:1.5;padding:28px 18px 70px}
.wrap{max-width:940px;margin:0 auto}
.kick{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:700}
h1{font-family:Cinzel,serif;font-size:clamp(30px,6vw,50px);line-height:1.05;margin:6px 0 4px}
h1 span{color:var(--gold2)}
.sub{color:var(--muted);margin-bottom:6px}
.rule{height:2px;background:linear-gradient(90deg,var(--gold),rgba(217,164,65,.1));border-radius:2px;margin:14px 0 22px}
h2{font-family:Cinzel,serif;color:var(--gold);font-size:clamp(18px,3.4vw,24px);margin:34px 0 14px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.card.hi{background:rgba(217,164,65,.08)}
.card h3{font-size:19px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.card p{color:var(--muted);font-size:15px}
.card b{color:var(--gold2)}
ul{list-style:none;color:var(--muted);font-size:15px}
li{padding-left:16px;position:relative;margin-top:7px}
li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
li b{color:var(--gold2)}
.new,.ret{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:3px 8px;font-weight:800}
.new{background:var(--gold);color:#1A1206}
.ret{background:rgba(244,235,217,.1);color:var(--muted)}
.rank{font-family:Cinzel,serif;color:var(--gold)}
.tribe{font-weight:800}
.pip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:800;color:#0C100F}
.pip.w{background:var(--W)}.pip.u{background:var(--U)}.pip.b{background:var(--B)}.pip.r{background:var(--R)}.pip.g{background:var(--G)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.stat{background:rgba(244,235,217,.04);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stat .n{font-family:Cinzel,serif;font-size:clamp(20px,4vw,30px);color:var(--gold2)}
.stat .l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat .you{display:none;font-size:11px;font-weight:700;color:var(--gold);margin-top:2px}
.stat .you.on{display:block}
.bar{display:grid;grid-template-columns:62px 1fr 46px;align-items:center;gap:10px;margin-top:7px;font-size:14px}
.bar .c{color:var(--muted);text-align:right;font-weight:700}
.bar .t{background:rgba(244,235,217,.07);border-radius:4px;padding:0;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.bar .f{display:block;height:14px;background:var(--gold);border-radius:0 4px 4px 0}
.bar .f2{display:none;height:7px;background:var(--parch);border-radius:0 4px 4px 0}
.bar .f2.on{display:block}
.bar .v{font-weight:700}
.youtag{display:none;font-size:12px;color:var(--muted);margin-top:8px}
.youtag i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px;vertical-align:-1px}
.youtag.on{display:block}
.dl{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:rgba(10,14,13,.86);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:22px}
.dl p{color:var(--muted);font-size:14px}
.dl button{font-family:inherit;font-weight:800;font-size:14px;letter-spacing:.04em;cursor:pointer;background:var(--gold);color:#1A1206;border:none;border-radius:99px;padding:11px 20px}
.dl button:hover{background:var(--gold2)}
.dl small{display:block;color:var(--muted);font-weight:600;font-size:11.5px;margin-top:3px}
footer{margin-top:44px;padding-top:16px;border-top:1px solid rgba(244,235,217,.1);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer b{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.14em}
.credits{border:1px solid var(--gold);border-radius:16px;padding:20px 22px;margin:26px 0 8px;background:rgba(217,164,65,.06)}
.credits h2{margin:0 0 6px;font-size:clamp(17px,3vw,21px)}
.credits .lede{color:var(--muted);font-size:15px;margin-bottom:14px}
.credit h3{font-size:17px;margin-bottom:2px;display:block}
.credit .who{color:var(--gold2);font-size:12.5px;font-weight:700;letter-spacing:.04em;margin-bottom:7px}
.credit a{display:inline-block;margin-top:9px;color:var(--gold);font-size:12.5px;font-weight:700;word-break:break-all}
.soc{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.soc a{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--gold);border:1px solid var(--line);border-radius:99px;padding:6px 13px;text-decoration:none;transition:background .15s,color .15s}
.soc a:hover,.soc a:focus-visible{background:var(--gold);color:#1A1206;border-color:var(--gold);outline:none}
.flink{color:var(--gold);font-weight:700;text-decoration:none}
.cmdbox{border:1px solid rgba(127,178,217,.55);border-radius:16px;padding:20px 22px;margin:26px 0 8px;background:rgba(127,178,217,.07)}
.cmdbox h2{color:var(--U);margin:0 0 6px;font-size:clamp(17px,3vw,21px)}
details.sec.cmdbox>summary::after{border-right-color:var(--U);border-bottom-color:var(--U)}
.cmdbox .lede{color:var(--muted);font-size:15px;margin-bottom:14px}
.cmdbox .card{border-color:rgba(127,178,217,.3)}
.cmdbox li::before{background:var(--U)}
.blu{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:3px 8px;font-weight:800;background:var(--U);color:#0C100F}
/* ---- archetype modal ---- */
.arch{cursor:pointer;transition:border-color .15s, transform .15s}
.arch:hover,.arch:focus-visible{border-color:var(--gold);transform:translateY(-1px);outline:none}
.tapline{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.04em}
.mech{cursor:pointer;transition:border-color .15s, transform .15s}
.mech:hover,.mech:focus-visible{border-color:var(--gold);transform:translateY(-1px);outline:none}
details.sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"";width:9px;height:9px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);margin-left:auto;flex:none;transform:translateY(2px) rotate(-135deg);transition:transform .18s}
details.sec:not([open])>summary::after{transform:translateY(-3px) rotate(45deg)}
details.sec:not([open]){margin-bottom:6px}
.morelink{display:block;margin-top:12px;color:var(--gold);font-weight:700;font-size:13px;text-decoration:none}
.pips5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.pips5 .tl{display:flex;justify-content:center;padding:2px 0}
.manaout{margin-top:16px;background:rgba(244,235,217,.05);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.manaout .mn{font-family:Cinzel,serif;font-size:clamp(17px,3vw,22px);color:var(--gold2)}
.manaout .mnote{margin:6px 0 0}
.modes{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.modebtn{font-family:inherit;font-weight:800;font-size:13px;letter-spacing:.03em;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:rgba(244,235,217,.06);color:var(--muted);cursor:pointer}
.modebtn.on{background:var(--gold);border-color:var(--gold);color:#1A1206}
#cmdnote{margin:-2px 0 14px}
#mback{position:fixed;inset:0;background:rgba(4,6,5,.72);backdrop-filter:blur(3px);z-index:60;display:none}
#mback.on{display:block}
#modal{position:fixed;z-index:70;inset:0;display:none;align-items:center;justify-content:center;padding:18px}
#modal.on{display:flex}
.mbox{background:linear-gradient(180deg,#1E2A27,#121917);border:1px solid var(--gold);border-radius:20px;max-width:680px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mhead{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mhead .tribe{font-family:Cinzel,serif;font-size:22px}
.mhead .pitch{width:100%;color:var(--muted);font-size:14px}
.mx{margin-left:auto;background:rgba(244,235,217,.08);border:none;color:var(--parch);width:36px;height:36px;border-radius:50%;font-size:17px;font-weight:800;cursor:pointer;flex:none}
.mx:hover{background:var(--gold);color:#1A1206}
.mbody{overflow-y:auto;padding:14px 20px 20px;-webkit-overflow-scrolling:touch}
.mnote{font-size:12px;color:var(--muted);margin-bottom:10px}
.mcard{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid rgba(244,235,217,.08)}
.mcard:last-child{border-bottom:none}
.mcard img{width:132px;border-radius:8px;display:block;background:#0d1211}
.mcard .art-fallback{width:132px;aspect-ratio:488/680;border-radius:8px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:11px;padding:8px}
.mcard h4{font-size:16.5px;margin-bottom:2px}
.mcard h4 a{color:var(--parch);text-decoration:none;border-bottom:1px dotted var(--gold)}
.mcard .mc-line{font-size:12px;color:var(--muted);margin-bottom:6px}
.mcard .r-rare{color:var(--gold2);font-weight:800;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em}
.mcard .r-mythic{color:#F0A35E;font-weight:800;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em}
.mcard .r-uncommon,.mcard .r-common{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em}
.mcard .otext{font-size:13px;color:var(--parch);white-space:pre-line;background:rgba(244,235,217,.05);border-radius:8px;padding:8px 10px;margin:6px 0}
.mcard .why{font-size:13px;color:var(--gold2);font-style:italic}
.mfoot{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mfoot .cta{background:var(--gold);color:#1A1206;font-weight:800;border:none;border-radius:99px;padding:10px 18px;cursor:pointer;font-family:inherit;font-size:13.5px}
.mfoot small{color:var(--muted);font-size:11px}
@media (max-width:560px){.mcard{grid-template-columns:96px 1fr}.mcard img,.mcard .art-fallback{width:96px}.dl{position:static}}
/* ---- my cards tally ---- */
.mycards{margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:rgba(244,235,217,.03)}
.mycards summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:800;color:var(--gold);font-size:14.5px;letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.mycards summary::-webkit-details-marker{display:none}
.mycards summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);margin-left:auto;flex:none;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.mycards[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.mycards summary small{color:var(--muted);font-weight:600;font-size:11.5px}
.tally{padding:4px 16px 16px}
.trow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tcell{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.tcell.ok{border-color:var(--gold);background:rgba(217,164,65,.09)}
.tcell .tl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tcell .tt{font-size:10px;color:var(--muted)}
.tnum{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 2px}
.tnum b{font-family:Cinzel,serif;font-size:24px;color:var(--parch);min-width:34px}
.tbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(244,235,217,.07);color:var(--parch);font-size:17px;font-weight:800;cursor:pointer;touch-action:manipulation}
.tbtn:active{background:var(--gold);color:#1A1206}
.tsub{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.cmcrow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cmcrow .tcell{padding:8px 4px}
.cmcrow .tnum b{font-size:19px;min-width:24px}
.cmcrow .tbtn{width:28px;height:28px;font-size:14px}
.tfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.tfoot button{font-family:inherit;font-weight:800;font-size:13px;border-radius:99px;padding:10px 16px;cursor:pointer;border:none}
.tsave{background:var(--gold);color:#1A1206}
.treset{background:rgba(244,235,217,.08);color:var(--muted)}
.tfoot small{color:var(--muted);font-size:11px}
/* ---- single color print: black ink only ---- */
@media print{
@page{size:Letter;margin:.5in}
html,body{background:#fff!important;color:#000!important;padding:0!important}
*{background:none!important;box-shadow:none!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.dl,.noprint,.mycards,#modal,#mback,.tapline,.youtag,.stat .you,.scr,.manasec,.modes,.cmdbox{display:none!important}
details.sec>summary::after{display:none!important}
.wrap{max-width:none}
h1{font-size:20pt}
h2{font-size:11.5pt;margin:7pt 0 3pt;border-bottom:1.5pt solid #000;padding-bottom:3pt;break-after:avoid}
details.sec>summary{display:block}
.kick,.sub{font-size:8pt}
.rule{display:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:5pt}
.card{border:.75pt solid #000!important;border-radius:4pt;padding:5pt 6.5pt;break-inside:avoid}
.card h3{font-size:10pt;margin-bottom:1.5pt}
.card p,li,.bar{font-size:7.9pt;line-height:1.24}
li::before{background:#000!important;width:3pt;height:3pt;top:5pt}
.new{background:#000!important;color:#fff!important;font-size:6.4pt;padding:1.5pt 5pt}
.ret{background:none!important;border:.75pt solid #000;font-size:6.4pt;padding:1pt 5pt}
.pip{border:.75pt solid #000;width:12pt;height:12pt;font-size:7pt}
.stats{gap:5pt;margin-bottom:5pt}
.stat{border:.75pt solid #000!important;border-radius:4pt;padding:4pt}
.stat .n{font-size:13pt}
.stat .l{font-size:6.4pt}
.bar{grid-template-columns:44pt 1fr 32pt;gap:6pt;margin-top:2.5pt}
.bar .t{border:.75pt solid #000;height:7pt;border-radius:2pt;display:block}
.bar .f{background:#000!important;border-radius:0;height:100%}
.bar .f2{display:none!important}
footer{border-top:.75pt solid #000;font-size:6.9pt;margin-top:4pt;padding-top:3pt;break-inside:avoid;display:block}
footer div{text-align:left!important;margin-top:1pt}
a[href]::after{content:""}
.credits{border:1pt solid #000!important;border-radius:4pt;padding:6pt 8pt;margin:7pt 0 6pt;break-inside:avoid}
.credits h2{border:none;font-size:11pt;margin:0 0 3pt;padding:0}
.credits .grid{grid-template-columns:repeat(3,1fr);gap:6pt}
.credits .lede{font-size:8.1pt;margin-bottom:5pt}
.credit h3{font-size:9.5pt}
.credit .who{font-size:7.4pt;margin-bottom:3pt}
.credit a{font-size:7.4pt;margin-top:4pt;text-decoration:none}
}

/* ---- hub landing page ---- */
.hub-lede{color:var(--muted);font-size:16px;max-width:640px;margin-bottom:8px}
.guides{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:6px}
.guide{display:block;text-decoration:none;color:inherit;background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:border-color .15s,transform .15s}
.guide:hover,.guide:focus-visible{border-color:var(--gold);transform:translateY(-2px);outline:none}
.guide h3{font-family:Cinzel,serif;font-size:21px;color:var(--parch);margin-bottom:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.guide .when{color:var(--muted);font-size:13px;margin-bottom:9px}
.guide p{color:var(--muted);font-size:14.5px}
.guide .go{display:inline-block;margin-top:11px;color:var(--gold);font-weight:800;font-size:13px;letter-spacing:.03em}
.badge{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;border-radius:99px;padding:3px 9px;font-weight:800;flex:none}
.badge.now{background:var(--gold);color:#1A1206}
.badge.soon{background:rgba(127,178,217,.9);color:#0C100F}
.badge.past{background:rgba(244,235,217,.1);color:var(--muted)}
.guide.soon{opacity:.85;border-style:dashed}
.backlink{display:inline-block;color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.04em;text-decoration:none;margin-bottom:14px}
.backlink:hover{color:var(--gold2)}
@media print{.backlink,.hub-lede{display:none!important}}