:root{
  --bg:#fff; --fg:#2b2f36; --muted:#757c88; --line:#e3e6ea; --soft:#f6f7f9; --link:#0b66c3; --linkh:#084c92;
  --bar:#fafbfc; --accent:#0b66c3; --accent-fg:#fff; --red:#d02525; --box:#fff;
  --q1:#2f9e0f; --q2:#0070dd; --q3:#a335ee; --q4:#e06c00; --tip:#20242b; --tipfg:#f1f3f5;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14171c; --fg:#dfe3e8; --muted:#8c94a1; --line:#2b313a; --soft:#1b1f26; --link:#6db3ff; --linkh:#9ccbff;
    --bar:#191d23; --accent:#2f81d6; --red:#ff6b6b; --box:#191d23; --q1:#64d72b; --q2:#4aa3ff; --q3:#c27cf5; --q4:#ff8c26;
    --tip:#e8ebef; --tipfg:#14171c; }
}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--link);text-decoration:none} a:hover{color:var(--linkh);text-decoration:underline}
img{max-width:100%;height:auto;vertical-align:middle}
h1{font-size:1.9rem;line-height:1.2;margin:.9rem 0 .6rem}
h2{font-size:1.25rem}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.muted{color:var(--muted)} .red{color:var(--red)} .block{display:block}
.q1,.q1 a{color:var(--q1)} .q2,.q2 a{color:var(--q2)} .q3,.q3 a{color:var(--q3)} .q4,.q4 a{color:var(--q4)}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;background:var(--bar);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;min-height:54px;flex-wrap:wrap}
.brand{font-size:1.2rem;font-weight:600;color:var(--muted);letter-spacing:.2px}
.brand:hover{color:var(--fg);text-decoration:none}
.quick input{width:190px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);font:inherit;font-size:.92rem}
.quick input:focus,.bigsearch input:focus,.adv input:focus,.adv select:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}
.menu{display:flex;align-items:center;gap:2px;margin-left:6px}
.menu>a,.dd>button{color:var(--muted);background:none;border:0;font:inherit;font-size:.95rem;padding:15px 12px;cursor:pointer;border-radius:0}
.menu>a:hover,.dd>button:hover,.menu>a.on{color:var(--fg);background:var(--soft);text-decoration:none}
.dd{position:relative}
.caret{display:inline-block;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;margin-left:3px;vertical-align:middle}
.dd ul{display:none;position:absolute;top:100%;left:0;min-width:230px;max-height:75vh;overflow:auto;margin:0;padding:6px 0;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.dd.open ul{display:block}
@media (hover:hover) and (min-width:861px){.dd:hover ul,.dd:focus-within ul{display:block}}
.dd li a{display:block;padding:6px 16px;color:var(--fg);font-size:.93rem} .dd li a:hover{background:var(--soft);text-decoration:none}
.dd .sep{height:1px;background:var(--line);margin:6px 0} .dd .hd{padding:6px 16px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--fg);font-size:1.2rem;padding:2px 10px;cursor:pointer}
@media (max-width:860px){
  .burger{display:block} .quick{flex:1;min-width:90px} .quick input{width:100%}
  .menu{display:none;flex-direction:column;align-items:stretch;width:100%;margin:0;border-top:1px solid var(--line)}
  .menu.open{display:flex;position:fixed;left:0;right:0;bottom:0;top:56px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:var(--bg);padding:0 18px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  html.menu-open{overflow:hidden}
  .menu>a,.dd>button{display:block;width:100%;text-align:left;padding:14px 6px;min-height:48px}
  .dd ul{position:static;box-shadow:none;border:0;border-left:3px solid var(--line);border-radius:0;max-height:none;margin:0 0 6px 6px}
}

main{padding-bottom:24px;min-height:60vh}
.count{color:var(--muted);margin:.2rem 0 .8rem}
.notice{background:var(--soft);border-left:4px solid var(--accent);padding:10px 14px;margin:12px 0;border-radius:4px}
.badge{background:var(--accent);color:var(--accent-fg);font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:999px}

/* home */
.hero{text-align:center;padding:26px 0 8px}
.hero h1{font-size:2.1rem}
.bigsearch{display:flex;max-width:560px;margin:18px auto 8px;gap:8px}
.bigsearch input{flex:1;padding:12px 18px;font:inherit;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg)}
.bigsearch button,.adv .primary{background:var(--accent);color:var(--accent-fg);border:0;padding:10px 22px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px 26px;margin-top:26px;border-top:1px solid var(--line);padding-top:12px}
.setgroup h2{font-size:1rem;color:var(--muted);margin:10px 0 4px;text-transform:none}
.setgroup ul{list-style:none;margin:0;padding:0} .setgroup li{padding:2px 0;font-size:.95rem}

/* card page */
.crumbs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:16px;font-size:.95rem}
.crumbs .mid{text-align:center} .crumbs .end{text-align:right}
.card{display:grid;grid-template-columns:312px minmax(0,1fr) 220px;gap:24px;align-items:start}
.card .art img{border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.25);background:#000}
.hint{font-size:.8rem;color:var(--muted);margin:6px 0 0;text-align:center}
.info h1{margin-top:0;font-size:1.7rem}
.typeline{margin:.2rem 0 .8rem}
.typeline img,.list img,.box img{height:18px;width:auto;margin:0 2px;vertical-align:-3px}
.box{position:relative;background:var(--box);border:1px solid var(--line);border-radius:6px;padding:34px 18px 12px;margin:16px 0}
.box::before{position:absolute;top:-1px;left:-1px;padding:3px 9px;font-size:.72rem;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:6px 0 6px 0}
.box.front::before{content:"Front"} .box.back::before{content:"Back"} .box.errata::before{content:"FAQ / Errata"}
.flavor{color:var(--muted)}
h2.small{font-size:1rem;margin:1.2rem 0 .3rem}
.legal{margin:.2rem 0 0;padding-left:1.2rem}
.rulespop{border-bottom:1px dotted currentColor;cursor:help}
.prints{font-size:.9rem;border-left:1px solid var(--line);padding-left:18px}
.prints h2{margin-top:0} .prints ul{list-style:none;margin:0;padding:0} .prints li{padding:2px 0}
.manacost{color:#fff;background:#000;font:700 12px/18px ui-monospace,Menlo,Consolas,monospace;border-radius:15px;padding:0 5px;display:inline-block}
.manacost.ten-and-more{padding:0 1px}
.specialflavor{font-weight:700;font-size:1rem;text-shadow:1px 1px 0 #000} .lightblue{color:#638bbc}
@media (max-width:980px){.card{grid-template-columns:312px minmax(0,1fr)} .prints{grid-column:1/-1;border-left:0;padding:12px 0 0;border-top:1px solid var(--line)}}
@media (max-width:700px){
  .card{grid-template-columns:1fr} .card .art{text-align:center}
  .crumbs{grid-template-columns:1fr} .crumbs .mid,.crumbs .end{text-align:left}
}

/* tables */
.tablewrap{overflow-x:auto}
table.list{width:100%;border-collapse:collapse;font-size:.95rem}
table.list th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line)}
table.list td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:top}
table.list tbody tr:nth-child(odd){background:var(--soft)} table.list .r{text-align:right}

/* advanced search */
.adv .row{display:grid;grid-template-columns:200px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.adv .actions{padding:12px 0}
.adv input[type=text],.adv input[type=number],.adv select{padding:7px 10px;font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
.adv .wide{width:min(100%,430px)} .adv .short{width:80px} .adv select[multiple]{min-width:260px}
.adv .opts{display:flex;flex-wrap:wrap;gap:6px 18px} .adv label.inline{margin-left:8px}
.adv button{font:inherit;border:1px solid var(--line);background:var(--soft);color:var(--fg);border-radius:999px;padding:10px 22px;cursor:pointer}
.adv .primary{border:0}
@media (max-width:640px){.adv .row{grid-template-columns:1fr;gap:4px}}

/* search results */
.hit{display:grid;grid-template-columns:156px minmax(0,1fr) 210px;gap:18px;padding:14px 0;border-top:1px solid var(--line)}
.hit .thumb img{border-radius:8px;background:#000;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.hit h2{margin:0 0 4px;font-size:1.15rem} .hit p{margin:.25rem 0}
.snippet{color:var(--fg);opacity:.85}
ul.plain{list-style:none;margin:0;padding:0} ul.small{font-size:.88rem}
.pager{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0}
@media (max-width:760px){.hit{grid-template-columns:110px 1fr}.hit .thumb img{width:110px;height:auto}.hit ul.plain{grid-column:1/-1}}

.prose{max-width:820px} .prose h1{margin-top:1.2rem}
.foot{padding-bottom:36px;color:var(--muted);font-size:.82rem}
.foot::before{content:"";display:block;border-top:1px solid var(--line);margin-bottom:16px}
.tip{position:absolute;z-index:50;max-width:280px;background:var(--tip);color:var(--tipfg);padding:8px 11px;border-radius:6px;font-size:.85rem;line-height:1.4;box-shadow:0 4px 14px rgba(0,0,0,.3);pointer-events:none}
.tip strong{display:block;margin-bottom:2px}

/* decks & events */
.trail{color:var(--muted);margin:14px 0 0;font-size:.92rem} .trail span{color:var(--fg)}
.facts{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-start;margin:10px 0 18px}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;min-width:260px}
.facts dt{color:var(--muted)} .facts dd{margin:0;font-weight:600}
.chart{min-width:260px;flex:1;max-width:420px} .chart h3{font-size:.95rem;margin:0 0 6px}
.bars{list-style:none;margin:0;padding:0} .bars li{display:grid;grid-template-columns:130px 1fr 34px;gap:8px;align-items:center;font-size:.85rem;padding:2px 0}
.bars .track{background:var(--soft);border-radius:4px;height:10px;overflow:hidden} .bars .fill{display:block;height:100%;background:var(--accent)}
.bars .fill.falliance{background:#2a62d8} .bars .fill.fhorde{background:#d03030} .bars .fill.fmonster{background:#2f9e0f}
.bars .fill.q0{background:#8a919d} .bars .fill.q1{background:var(--q1)} .bars .fill.q2{background:var(--q2)} .bars .fill.q3{background:var(--q3)}
.bars .n{text-align:right;color:var(--muted)}
.notice.bad{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 10%,var(--bg))}
.badge.bad{background:var(--red)}
table.list.deck tr.sec td{background:var(--soft);padding-top:10px;border-top:2px solid var(--line)}
table.list.deck tbody tr:nth-child(odd){background:none}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 14px}
.filters select,.filters input{padding:7px 10px;font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
table.cols{width:100%;border-collapse:separate;border-spacing:0 0} table.cols td{vertical-align:top;padding:0 24px 0 0;width:50%}
table.cols h4{margin:1rem 0 .3rem}
table.list.deck{max-width:760px} table.list.deck td.r{width:64px;white-space:nowrap}

/* hover card preview */
.cardpeek{position:fixed;z-index:60;pointer-events:none;background:#000;padding:4px;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.cardpeek img{display:block;width:312px;max-width:60vw;max-height:calc(100vh - 28px);height:auto;border-radius:12px;object-fit:contain}

/* home */
.home h1{display:flex;align-items:center;gap:14px;font-size:1.9rem;margin:1.2rem 0 .6rem}
.home h1 img{height:64px;width:auto}
.homecols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:6px 34px;align-items:start}
.homecol h3{font-size:1.15rem;margin:1.1rem 0 .3rem;padding-bottom:4px;border-bottom:1px solid var(--line)}
.homecol ul{list-style:none;margin:0;padding:0} .homecol li{padding:1px 0;font-size:.95rem}
.homecol li>ul{margin:2px 0 8px 14px;padding-left:10px;border-left:1px solid var(--line)}

/* search results = card-page style entries */
.hit{grid-template-columns:200px minmax(0,1fr) 200px;gap:20px}
.hit .body .box{margin:12px 0;padding-top:32px}
.hit .typeline{margin:.15rem 0 .5rem}
@media (max-width:760px){
  .hit{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .hit .thumb img{width:104px;height:auto}
  .hit ul.prints{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 16px}
  .hit .body .box{padding:30px 12px 10px} .hit h2{font-size:1.1rem}
}

/* tables: scroll hint wherever a table still scrolls sideways */
.tablewrap{background:
  linear-gradient(to right,var(--bg) 30%,transparent) left center/40px 100% no-repeat local,
  linear-gradient(to left,var(--bg) 30%,transparent) right center/40px 100% no-repeat local,
  linear-gradient(to right,rgba(0,0,0,.22),transparent) left center/14px 100% no-repeat scroll,
  linear-gradient(to left,rgba(0,0,0,.22),transparent) right center/14px 100% no-repeat scroll}
table.list tr[hidden]{display:none !important}
.m-meta{display:none}

/* phones: lists become stacked rows instead of wide tables */
@media (max-width:720px){
  table.list.stack,table.list.stack tbody,table.list.stack tr,table.list.stack td{display:block}
  table.list.stack thead{display:none}
  table.list.stack tbody tr,table.list.stack tbody tr:nth-child(odd){background:none;padding:10px 2px;border-top:1px solid var(--line)}
  table.list.stack td{border:0;padding:1px 0;text-align:left}
  table.list.stack td.r{text-align:left}
  table.list.stack td[data-lead]{order:-1;font-size:1.05rem;font-weight:600}
  table.list.stack tbody tr{display:flex;flex-direction:column}
  table.list.stack td[data-label]{font-size:.9rem}
  table.list.stack td[data-label]::before{content:attr(data-label) ": ";color:var(--muted)}
  table.list.stack td[data-label=""]::before{content:""}

  /* edition card list: number | name / type / cost · rarity · artist */
  table.list.ed thead{display:none}
  table.list.ed,table.list.ed tbody{display:block}
  table.list.ed tbody tr,table.list.ed tbody tr:nth-child(odd){display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:8px;padding:10px 2px;background:none;border-top:1px solid var(--line)}
  table.list.ed td{display:block;border:0;padding:0}
  table.list.ed td.c-n{grid-row:1 / span 2;color:var(--muted);text-align:right;font-size:.9rem;padding-top:2px}
  table.list.ed td.c-name{grid-column:2;font-weight:600;font-size:1.05rem}
  table.list.ed td.c-type{grid-column:2;font-size:.92rem}
  table.list.ed td.c-cost,table.list.ed td.c-rarity,table.list.ed td.c-artist{display:none}
  table.list.ed .m-meta{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
  table.list.deck td.r{width:auto}
}

/* tap-to-preview sheet (touch screens) */
.peek-ov{position:fixed;inset:0;z-index:100;background:rgba(6,8,12,.92);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:14px;
  padding-bottom:max(14px,env(safe-area-inset-bottom))}
.peek-ov[hidden]{display:none}
.peek-card{position:relative;width:min(92vw,360px);color:#fff;text-align:center}
.peek-card img{display:block;width:100%;max-height:66vh;object-fit:contain;border-radius:16px;background:#000}
.peek-title{margin:10px 0 8px;font-weight:600;font-size:1.05rem}
.peek-nav{display:flex;align-items:center;gap:10px}
.peek-nav button{flex:0 0 46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:1.6rem;line-height:1}
.peek-nav button:disabled{opacity:.35}
.peek-open{flex:1;background:var(--accent);color:#fff !important;padding:12px 14px;border-radius:999px;font-weight:600;text-decoration:none !important}
.peek-x{position:absolute;top:-14px;right:-8px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#000;font-size:1.4rem;line-height:1;z-index:1}

/* card page header: previous / next as tap targets, edition link underneath on phones */
.crumbs .prev a,.crumbs .next a{display:inline-block;max-width:100%}
@media (max-width:700px){
  .crumbs{grid-template-columns:1fr;grid-template-areas:"prev" "next" "mid";gap:8px;padding:10px 0 12px;margin-bottom:12px}
  .crumbs .prev{grid-area:prev} .crumbs .next{grid-area:next;text-align:left} .crumbs .mid{grid-area:mid;text-align:center;font-size:.9rem}
  .crumbs .prev:empty,.crumbs .next:empty{display:none}
  .crumbs .prev a,.crumbs .next a{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--fg)}
  .crumbs .nm{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
  .crumbs .next .nm{text-align:right}
  .crumbs .arr{color:var(--muted);flex:none;font-size:1.1rem}
  .crumbs .mid a{display:inline-block;padding:4px 8px}
}
}