:root{--ink:#080f19;--navy:#07182c;--blue:#183b63;--cream:#f4ead2;--gold:#d9b54d;--red:#882938;--muted:#9dafc4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--cream);background:radial-gradient(circle at 50% 0,#284e76,#081321 48%,#03070d);font:16px/1.45 Georgia,serif}
.mast,main{padding:28px max(16px,calc((100vw - 1380px)/2))}
.mast{border-bottom:4px double var(--gold);background:linear-gradient(105deg,#071528,#183351)}
.kicker{font:800 .7rem Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
h1{margin:.12em 0;font:900 clamp(3.2rem,9vw,7.8rem)/.78 Georgia,serif;text-transform:uppercase;letter-spacing:-.065em}
.mast p{max-width:760px;font-size:1.12rem}
.controls{display:grid;grid-template-columns:2fr repeat(3,1fr) auto;gap:12px;align-items:end;padding:18px;border:2px solid var(--gold);background:#09192c}
.controls label{display:grid;gap:5px;color:var(--gold);font:800 .7rem Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.controls input,.controls select,.controls button{min-height:42px;padding:8px 10px;border:1px solid #69809b;background:#f7edd8;color:#111;font:700 .9rem Arial,sans-serif}
.controls button{border-color:var(--gold);background:#173658;color:white;cursor:pointer}
.summary{margin:18px 0 10px;color:var(--muted);font:700 .78rem Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.type-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;padding:12px;border:1px solid #526a84;background:#071427}
.type-nav a{padding:7px 10px;border:1px solid #806f45;background:#112a47;color:var(--cream);font:800 .68rem Arial,sans-serif;letter-spacing:.05em;text-decoration:none;text-transform:uppercase}
.type-nav a:hover,.type-nav a:focus-visible{background:#244a75;outline:2px solid var(--gold)}
.catalog{display:grid;gap:64px}
.card-group{scroll-margin-top:18px}
.group-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:20px;padding:0 0 15px;border-bottom:3px double var(--gold)}
.group-heading h2{margin:.08em 0;font:900 clamp(2.1rem,5vw,4.2rem)/.9 Georgia,serif;text-transform:uppercase;letter-spacing:-.035em}
.group-heading p{max-width:820px;margin:8px 0 0;color:#c5d1df}
.group-heading>strong{flex:none;color:var(--gold);font:800 .72rem Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.group-kicker{color:var(--gold);font:800 .66rem Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:18px}
.card-group-champion,.card-group-awakened-dossier{padding:24px;border:1px solid #62758c;background:#06101de8;box-shadow:0 20px 50px #0006}
.card-group-champion{border-color:var(--gold)}
.card-group-awakened-dossier{border-color:#a33b4c;background:linear-gradient(135deg,#260b13e8,#07111ee8)}
.card{position:relative;overflow:hidden;min-height:430px;border:3px solid #ad9250;border-radius:11px;background:var(--cream);color:var(--ink);box-shadow:0 12px 22px #0008}
.card[data-type="champion"]{border-color:#e4c75d}
.card[data-type="awakened-dossier"]{border-color:#a9273d}
.card[data-type="virtue"]{border-color:#c7d0dc}
.card[data-type="institution"]{border-color:#63a8a0}
.card[data-type="program"]{border-color:#c85060}
.card[data-type="network-special"]{border-color:#c99be7}
.card-top{position:absolute;z-index:2;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center}
.cost{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);color:white;font:900 1.45rem Arial,sans-serif;border:2px solid #f4d77b}
.rarity{padding:4px 7px;background:#07182ddd;color:#fff;font:800 .6rem Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.art-placeholder{height:175px;display:grid;place-items:end;background:linear-gradient(135deg,#1a456e,#09172a 55%,#5a1e2b);border-bottom:3px double #ad9250}
.art-placeholder span{padding:6px 9px;color:#d9e3ee;font:800 .63rem Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.card-copy{padding:14px 16px 16px}
.id{float:right;color:#6b6458;font:700 .65rem ui-monospace,monospace}
.card h2{margin:0 50px 2px 0;font-size:1.35rem;line-height:1.03}
.type{color:#77414b;font:800 .66rem Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.rules{min-height:96px;margin:18px 0 12px;padding-top:12px;border-top:1px solid #b9aa87}
.affiliations{display:flex;flex-wrap:wrap;gap:5px}
.affiliations span{padding:3px 6px;border:1px solid #887753;background:#e7dac0;font:700 .62rem Arial,sans-serif;text-transform:uppercase}
.empty{padding:50px;text-align:center;border:1px solid #526a84;background:#09182a;color:var(--muted)}
nav{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0}
nav a{padding:10px 14px;border:1px solid var(--gold);color:white;text-decoration:none;background:#0d223b}
@media(max-width:900px){.controls{grid-template-columns:1fr 1fr}
.controls label:first-child{grid-column:1/-1}
.group-heading{align-items:start}
}
@media(max-width:540px){.controls{grid-template-columns:1fr}
.controls label:first-child{grid-column:auto}
.catalog{gap:42px}
.card-grid{grid-template-columns:1fr}
.group-heading{display:block}
.group-heading>strong{display:block;margin-top:12px}
.card-group-champion,.card-group-awakened-dossier{margin-inline:-8px;padding:14px}
}
.card{min-height:0}
.card-details{display:grid;gap:0;margin:14px 0;border:1px solid #b9aa87;background:#efe3c9}
.card-details div{display:grid;grid-template-columns:105px minmax(0,1fr);border-bottom:1px solid #c7b994}
.card-details div:last-child{border-bottom:0}
.card-details dt,.card-details dd{margin:0;padding:7px 8px;font:700 .7rem/1.35 Arial,sans-serif}
.card-details dt{background:#173658;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.card-details dd{color:#202938}
.status-playable .card-details div:first-child dd{color:#075a35;font-weight:900}
.status-design-candidate{opacity:.88}
.status-design-candidate .card-details div:first-child dd{color:#8a1d2d;font-weight:900}
@media(max-width:540px){.card-details div{grid-template-columns:1fr}.card-details dt{padding-bottom:4px}.card-details dd{padding-top:4px}.controls input,.controls select,.controls button{min-height:44px}}