:root { --ink:#05070a; --surface:#0b0f14; --steel:#171c22; --paper:#e8e4dc; --muted:#a7adb5; --dim:#6c737c; --copper:#dfc9a7; --signal-red:#f1dfc4; --crimson:#75675a; --line:rgba(232,228,220,.13); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--paper); background:radial-gradient(circle at 86% -8%,rgba(223,201,167,.14),transparent 32rem),linear-gradient(150deg,var(--surface),var(--ink) 65%); font:16px/1.5 Aptos,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.35; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle at 50% 0,black,transparent 72%); }
button,input,select { font:inherit; } button { cursor:pointer; } .catalogue-shell { width:min(1440px,calc(100% - 48px)); margin:auto; padding:28px 0 80px; }
.catalogue-header { border-bottom:1px solid var(--line); padding-bottom:28px; } .catalogue-nav{display:flex;justify-content:space-between;gap:20px;align-items:center}.catalogue-nav nav{display:flex;gap:22px}.catalogue-nav nav a{color:var(--muted);font:12px Consolas,monospace;letter-spacing:.07em;text-decoration:none}.catalogue-nav nav a:hover{color:var(--copper)}.home-link,.eyebrow,.card-count { font:12px Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; } .home-link { color:var(--muted); text-decoration:none; } .home-link span,.eyebrow { color:var(--copper); }
.title-row { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-top:46px; } .eyebrow { margin:0; } h1 { margin:9px 0 0; font:400 clamp(2.8rem,6vw,5.5rem)/.95 Georgia,"Iowan Old Style",serif; letter-spacing:-.055em; } .subtitle { max-width:42ch; margin:18px 0 0; color:var(--muted); } .card-count { color:var(--muted); white-space:nowrap; }
.search-area { padding:26px 0 20px; border-bottom:1px solid var(--line); } .search-form { display:flex; gap:9px; } .search-box { display:flex; align-items:center; flex:1; min-width:0; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.035); color:var(--copper); } .search-box span { font:28px/1 Georgia,serif; transform:rotate(-20deg); } .search-box input { width:100%; height:48px; border:0; outline:0; padding-left:12px; color:var(--paper); background:transparent; } .search-box input::placeholder { color:#79756f; }
.search-button,.filter-toggle { min-height:48px; padding:0 18px; border-radius:12px; transition:.18s ease; } .search-button { border:1px solid var(--copper); background:var(--copper); color:#17110e; font-weight:700; } .search-button:hover { background:#d18b64; } .filter-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:transparent; color:var(--paper); } .filter-toggle:hover,.filter-toggle[aria-expanded="true"] { border-color:rgba(188,118,80,.6); } .filter-toggle-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.75; transition:transform .18s ease; } .filter-toggle[aria-expanded="true"] .filter-toggle-icon { transform:rotate(180deg); } #filter-badge { color:var(--copper); }
.filters { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 18px; margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); animation:filter-reveal .18s ease both; } .filters[hidden] { display:none; } .filter-group { display:grid; grid-template-columns:92px minmax(0,1fr); grid-column:1; align-items:start; gap:16px; min-width:0; margin:0; padding:0; border:0; } .filter-group legend { grid-column:1; padding:9px 0 0; color:var(--muted); font:12px/1.2 Consolas,monospace; letter-spacing:.12em; } .filter-options { grid-column:2; display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; } .filter-option { display:flex; min-width:0; max-width:100%; align-items:center; gap:7px; min-height:34px; border:1px solid var(--line); border-radius:8px; padding:6px 9px; overflow-wrap:anywhere; background:#202224; color:var(--paper); cursor:pointer; font-size:13px; line-height:1.15; } .filter-option:hover { border-color:rgba(188,118,80,.7); background:rgba(188,118,80,.12); } .filter-option input { width:15px; height:15px; margin:0; flex:0 0 auto; accent-color:var(--copper); } .filter-option span { display:flex; min-width:0; align-items:center; gap:5px; } .filter-option img { width:21px; height:21px; flex:0 0 auto; object-fit:contain; } .clear-filters { grid-column:2; grid-row:1 / span 4; align-self:center; min-height:34px; border:0; padding:6px 0; background:transparent; color:var(--copper); font-size:13px; }
.results-head { display:flex; justify-content:space-between; gap:20px; padding:22px 0 16px; color:var(--muted); font-size:13px; } .results-head p { margin:0; }
.card-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px 12px; } .card { min-width:0; padding:0; border:0; background:none; color:inherit; text-align:left; opacity:0; animation:rise .32s ease forwards; } .card.is-rendered { opacity:1; animation:none; } .card:nth-child(6n+2){animation-delay:.03s}.card:nth-child(6n+3){animation-delay:.06s}.card:nth-child(6n+4){animation-delay:.09s}.card:nth-child(6n+5){animation-delay:.12s}.card:nth-child(6n+6){animation-delay:.15s}
.card-art { position:relative; aspect-ratio:.715; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:radial-gradient(circle at 76% 10%,rgba(213,147,87,.29),transparent 34%),linear-gradient(145deg,#253249,#10151f 60%,#3a1f2f); box-shadow:0 14px 28px rgba(0,0,0,.26); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .card:hover .card-art,.card:focus-visible .card-art { transform:translateY(-5px); border-color:var(--copper); box-shadow:0 20px 36px rgba(0,0,0,.48); } .card-art img { width:100%; height:100%; object-fit:cover; } .card-art img.is-base { object-fit:contain; transform:rotate(-90deg) scale(1.4); }
.placeholder-art { display:flex; height:100%; padding:13px; flex-direction:column; justify-content:space-between; } .placeholder-brand,.placeholder-id { color:#f0ccac; font:9px Consolas,monospace; letter-spacing:.12em; }.placeholder-type { color:#b5bbc3; font-size:11px; }.placeholder-name { margin-top:4px; font:600 18px/1.05 Georgia,serif; }.card-name { overflow:hidden; margin:9px 0 0; font-size:14px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }.card-meta { margin:3px 0 0; color:var(--muted); font:10px Consolas,monospace; }
.empty-state,.error-state { padding:90px 20px; border-top:1px solid var(--line); color:var(--muted); text-align:center; }.empty-state p { font-size:19px; color:var(--paper); }.empty-state button { border:0; background:none; color:var(--copper); }.error-state { color:#f0d1c5; }
.dialog { position:fixed; inset:0; z-index:4; display:grid; place-items:center; padding:24px; }.dialog[hidden] { display:none; }.dialog-backdrop { position:absolute; inset:0; background:rgba(3,4,5,.78); backdrop-filter:blur(8px); }.dialog-panel { position:relative; width:min(920px,100%); max-height:92vh; overflow:auto; border:1px solid var(--line); border-radius:18px; background:#17191d; box-shadow:0 28px 90px rgba(0,0,0,.6); animation:dialog-in .22s ease; }.dialog-content { display:grid; grid-template-columns:minmax(270px,.82fr) 1.18fr; align-items:start; }.dialog-art { display:grid; place-items:center; height:min(76vh,700px); min-height:0; overflow:hidden; background:#11151c; }.dialog-art img { display:block; width:100%; height:100%; object-fit:contain; }.dialog-art .placeholder-art { width:100%; padding:30px; }.dialog-art .placeholder-name { font-size:34px; }.dialog-close { position:absolute; top:14px; right:14px; z-index:1; width:36px; height:36px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:white; font-size:26px; line-height:1; }.dialog-details { padding:44px 36px; }.dialog-id { margin:0; color:var(--copper); font:12px Consolas,monospace; letter-spacing:.12em; }.dialog-details h2 { margin:16px 0 0; font:400 40px/.95 Georgia,serif; letter-spacing:-.045em; }.original-name,.dialog-subtitle { color:var(--muted); }.dialog-subtitle { margin-top:8px; font-size:18px; }.tag-list { display:flex; flex-wrap:wrap; gap:7px; margin:25px 0; }.tag { padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:#d6cec3; font-size:12px; }.stats { display:grid; grid-template-columns:repeat(var(--stat-count, 3),1fr); border-block:1px solid var(--line); }.stats div { padding:13px; text-align:center; }.stats small { display:block; color:var(--muted); }.stats strong { font-size:32px; }.card-text { white-space:pre-wrap; color:#ded8cf; }.keywords { color:#e1a079; }
@keyframes rise { to { opacity:1; transform:translateY(0); } from { opacity:0; transform:translateY(8px); } } @keyframes dialog-in { from { opacity:0; transform:translateY(12px) scale(.98); } } @keyframes filter-reveal { from { opacity:0; transform:translateY(-4px); } }
@media(max-width:1050px){.card-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:680px){.catalogue-shell{width:min(100% - 30px,1440px);padding-top:20px}.catalogue-nav nav{display:none}.title-row{margin-top:32px;align-items:start;flex-direction:column}h1{font-size:2.85rem}.search-form{flex-wrap:wrap}.search-box{order:0;flex-basis:100%}.search-button,.filter-toggle{flex:1}.filters{grid-template-columns:1fr;padding:14px}.filter-group{grid-template-columns:72px minmax(0,1fr);gap:12px}.clear-filters{grid-column:1;grid-row:auto;justify-self:start}.card-grid{grid-template-columns:repeat(2,1fr);gap:18px 10px}.results-head p:last-child{display:none}.dialog{padding:0;align-items:end}.dialog-panel{max-height:94vh;border-radius:18px 18px 0 0}.dialog-content{grid-template-columns:1fr}.dialog-art{height:min(55svh,520px);min-height:300px;max-height:none}.dialog-details{padding:30px 22px}.dialog-details h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.card-text-section { margin-top:24px; }
.card-text-section h3 { margin:0 0 9px; color:var(--copper); font:11px Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; }
.card-text-section + .card-text-section { padding-top:20px; border-top:1px solid var(--line); }
.card-text { color:#eee9e1; font-size:16px; line-height:1.45; white-space:normal; }
.card-text p { margin:0; }
.card-text p + p { margin-top:12px; }
.card-text strong { color:#fff; font-weight:800; }
.card-text em { color:#f3eadc; }
.card-text-symbol { display:inline-block; margin-inline:2px; color:#e3ad65; font-weight:800; }
.card-text-aspect-icon { display:inline-block; width:1.15em; height:1.15em; margin-inline:2px; vertical-align:-.2em; object-fit:contain; }
.card-text-keyword { color:#ff7065; font-weight:700; }
.card-text-epic { padding:8px 10px; border:2px solid #d99a22; border-radius:0 0 11px 11px; background:linear-gradient(90deg,rgba(218,155,38,.16),rgba(218,155,38,.04)); box-shadow:inset 0 1px 0 rgba(255,224,163,.28); }
.card-text-keyword-border { padding:7px 10px; border:2px solid #b9252e; border-radius:5px; background:linear-gradient(90deg,rgba(133,24,31,.42),rgba(133,24,31,.18)); color:#eee9e1; box-shadow:inset 0 1px 0 rgba(255,150,145,.12); }
.card-text-keyword-border-plain { background:transparent; box-shadow:none; }
.stats .stat-cost strong { color:#f2c533; }
.stats .stat-power strong { color:#ee4a4d; }
.stats .stat-hp strong { color:#4f81ff; }
.card-text-power { color:#ee4a4d; font-weight:700; }
.card-text-hp { color:#4f81ff; font-weight:700; }
.card-metadata { display:grid; gap:10px; margin:25px 0; }
.type-arena,.trait-list { margin:0; color:#d6cec3; font-size:14px; }
.type-arena { font-weight:700; }
.trait-list { color:var(--muted); }
.aspect-list { display:flex; align-items:center; gap:7px; min-height:30px; }
.aspect-list img { display:block; width:30px; height:30px; object-fit:contain; }
.dialog-art.has-leader-back { display:block; height:min(76vh,700px); }
.dialog-nav { display:none; position:absolute; top:50%; z-index:1; width:52px; height:72px; place-items:center; transform:translateY(-50%); border:1px solid rgba(255,255,255,.22); border-radius:12px; background:rgba(19,22,27,.82); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.3); font:400 52px/.8 Georgia,serif; transition:background .16s ease,border-color .16s ease,opacity .16s ease; }
.dialog-nav:hover:not(:disabled),.dialog-nav:focus-visible { border-color:var(--copper); background:rgba(188,118,80,.22); outline:none; }
.dialog-nav:disabled { cursor:default; opacity:.28; }
.dialog-nav-previous { left:calc(50% - 540px); }
.dialog-nav-next { right:calc(50% - 540px); }
@media(min-width:1120px) { .dialog-nav { display:grid; } }
.leader-dialog-face { display:flex; height:100%; margin:0; padding:18px 14px 16px; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#11151c; }
.leader-dialog-face figcaption { display:flex; justify-content:center; width:100%; }
.leader-dialog-face img { display:block; width:100%; height:auto; max-height:calc(100% - 68px); min-height:0; object-fit:contain; }
.leader-flip-button { min-height:46px; border:1px solid var(--copper); border-radius:999px; padding:10px 22px; background:var(--copper); box-shadow:0 8px 20px rgba(188,118,80,.24); color:#17110e; font:700 15px/1 Aptos,"Segoe UI",sans-serif; letter-spacing:.02em; text-transform:none; }
.leader-flip-button:hover,.leader-flip-button:focus-visible { background:#d18b64; box-shadow:0 10px 24px rgba(188,118,80,.38); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path:inset(50%); }
@media(max-width:680px){.dialog-art.has-leader-back{height:min(55svh,520px);min-height:300px}}
.load-more-sentinel { min-height:56px; padding:18px; color:var(--muted); text-align:center; font-size:13px; }
.error-state p { margin:0 0 16px; }
.error-state button { min-height:42px; border:1px solid var(--copper); border-radius:999px; padding:0 20px; background:transparent; color:var(--paper); }
.error-state button:hover,.error-state button:focus-visible { background:var(--copper); color:#17110e; }
.unique-marker { color:var(--copper); font-style:normal; }
.dialog-title-subtitle { margin-left:.35em; color:var(--muted); font-size:.58em; font-weight:400; letter-spacing:-.025em; white-space:nowrap; }

/* Shared light neutral interaction layer for the dark catalogue. */
.search-button,.leader-flip-button{color:#17110e;box-shadow:0 8px 20px rgba(117,103,90,.32)}
.search-button:hover,.leader-flip-button:hover,.leader-flip-button:focus-visible{background:var(--signal-red);box-shadow:0 10px 24px rgba(241,223,196,.22)}
.filter-toggle:hover,.filter-toggle[aria-expanded="true"],.filter-option:hover{border-color:var(--signal-red);background-color:rgba(117,103,90,.28)}
.card:hover .card-art,.card:focus-visible .card-art,.dialog-nav:hover:not(:disabled),.dialog-nav:focus-visible{border-color:var(--signal-red);background-color:rgba(117,103,90,.42)}
.error-state button:hover,.error-state button:focus-visible{background:var(--signal-red);color:var(--paper)}