/* Shared pixel card face. Tier is also printed, so rarity never depends on color alone. */
:where(.catalog-card,.card[data-pixel-card]) {--tier:#a5b5c3;--tier-dim:#3c4c5a}
[data-rank="F"] {--tier:#a5b5c3;--tier-dim:#3c4c5a}
[data-rank="D"] {--tier:#8bcc88;--tier-dim:#304f37}
[data-rank="C"] {--tier:#69c5e5;--tier-dim:#264b60}
[data-rank="B"] {--tier:#bc93e5;--tier-dim:#4b3468}
[data-rank="A"] {--tier:#efba66;--tier-dim:#68502a}
[data-rank="S"] {--tier:#f28ea6;--tier-dim:#72394e}
body .card-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:stretch}
body .catalog-card,.card[data-pixel-card] {position:relative;border:3px solid var(--tier);border-radius:0;padding:18px 18px 20px;background:linear-gradient(135deg,var(--tier-dim),transparent 36%),#10131d;box-shadow:inset 0 0 0 3px #10131d,inset 0 0 0 5px var(--tier-dim),5px 5px 0 #080b13;color:#eae6db;min-width:0;overflow:visible}
body .catalog-card::before,.card[data-pixel-card]::before {content:"";position:absolute;inset:7px;border:1px solid var(--tier-dim);pointer-events:none;background:none}
body .catalog-card::after {content:"";position:absolute;width:14px;height:6px;background:var(--tier);bottom:-3px;left:calc(50% - 7px);box-shadow:0 -3px 0 var(--tier-dim)}
body .catalog-card:hover {transform:translateY(-3px);border-color:var(--tier);box-shadow:inset 0 0 0 3px #10131d,inset 0 0 0 5px var(--tier-dim),5px 8px 0 #080b13}
.card-rank-line {display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--tier);font-size:11px;letter-spacing:1px;text-transform:uppercase;min-height:24px}
.rank-badge {display:inline-grid;place-items:center;min-width:28px;height:28px;border:2px solid var(--tier);background:#111722;font:bold 20px monospace;box-shadow:2px 2px 0 var(--tier-dim)}
.card-emblem {display:grid;place-items:center;position:relative;height:160px;margin:6px 0 14px;background:linear-gradient(transparent 49%,var(--tier-dim) 50%,transparent 51%)}
.card-emblem::before {content:"";position:absolute;width:100px;height:100px;border:2px solid var(--tier-dim);transform:rotate(45deg);background:#111722}
.card-emblem img {position:relative;width:144px;height:144px;image-rendering:pixelated;object-fit:contain;z-index:1;filter:drop-shadow(3px 4px 0 #080c15)}
.card-emblem-fallback {position:relative;z-index:1;font-size:48px;line-height:1;color:var(--tier);text-shadow:3px 4px #080c15}
body .catalog-card h2 {color:#fff1cf;text-align:center;font-size:25px;line-height:1.2;min-height:60px;margin:0 0 14px;padding:0 0 14px;border-bottom:2px solid var(--tier-dim)}
body .catalog-card .effect {font-size:13px;line-height:1.65;margin:0 0 12px;color:#d2ddd7}
body .catalog-card .effect b {display:block;color:var(--tier);font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
body .catalog-card .tradeoff {color:#ecb3ac;border-top:1px solid #49383e;padding-top:10px}
body .catalog-card details {font-size:12px;line-height:1.7;color:#c2c8d3;border-top:1px solid var(--tier-dim);padding-top:8px}
body .catalog-card summary {cursor:pointer;color:var(--tier);padding:5px 0}
.rank-select {font:inherit;color:#efe7d5;background:#151a26;border:2px solid #71647f;padding:10px;min-height:44px;border-radius:0}
.rank-legend {display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 28px}
.rank-legend span {border-bottom:3px solid var(--tier);padding:7px 12px;color:var(--tier);background:#131721;font-size:12px}
body [data-catalog-item][hidden] {display:none!important}
.card[data-pixel-card] .card-emblem {height:112px;margin:4px 0 10px}
.card[data-pixel-card] .card-emblem img {width:96px;height:96px}
.card[data-pixel-card] .card-emblem::before {width:70px;height:70px}
.card[data-pixel-card] .card-icon {display:none}
.card[data-pixel-card] > b {display:block;text-align:center;color:#fff1cf;border-bottom:2px solid var(--tier-dim);padding-bottom:10px;margin-bottom:12px}
@media(max-width:1050px) {body .card-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px) {body .card-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}body .catalog-card {padding:14px}.card-emblem {height:120px}.card-emblem img {width:96px;height:96px}.card-emblem::before {width:72px;height:72px}}
@media(max-width:440px) {body .card-grid {grid-template-columns:minmax(0,1fr)}body .catalog-card {padding:20px 26px}body .catalog-card h2 {min-height:0}.card-emblem {height:160px}.card-emblem img {width:144px;height:144px}}
@media(prefers-reduced-motion:reduce) {body .catalog-card:hover {transform:none}}

/* A fixed face; longer mechanics open separately and never stretch the grid. */
body .catalog-card {height:480px;display:grid;grid-template-rows:28px 152px 64px minmax(0,1fr) 36px;gap:0;box-sizing:border-box}
body .catalog-card .card-emblem {height:152px;margin:0}
body .catalog-card h2 {height:64px;min-height:0;margin:0;padding:6px 0 10px;font-size:24px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.card-summary {font-size:13px;line-height:1.7;color:#dddcca;text-align:center;margin:0;padding:14px 0;align-self:start;box-sizing:border-box}
body .card-more {font-family:'VT323',monospace;font-size:19px;line-height:1.1;color:var(--tier);border:1px solid var(--tier-dim);background:#151922;padding:7px 12px;cursor:pointer;box-shadow:none;white-space:nowrap}
body .card-more:hover {border-color:var(--tier);background:var(--tier-dim)}
.pixel-card-wrap {position:relative;min-width:0;height:460px}
.cards > .pixel-card-wrap {flex:1 1 0;width:0}
body .pixel-card-wrap > .card {width:100%;height:100%;box-sizing:border-box;display:grid;grid-template-rows:28px 112px 60px 24px minmax(0,1fr);align-content:start;gap:4px;padding:18px 18px 62px}
body .pixel-card-wrap > .card .card-top {grid-row:1;justify-content:flex-end}
body .pixel-card-wrap > .card .card-top .icon {display:none}
body .pixel-card-wrap > .card .card-emblem {grid-row:2;margin:0}
body .pixel-card-wrap > .card > b {grid-row:3;height:60px;margin:0;padding:4px 0 10px;font:24px/1.1 'VT323',monospace;display:flex;align-items:center;justify-content:center}
body .pixel-card-wrap > .card > .rank {grid-row:4;text-align:center}
body .pixel-card-wrap > .card > .card-summary {grid-row:5;padding:8px 0;margin:0;font-size:13px}
body .pixel-card-wrap > .card > :is(.card-stats,.card-description,.good,.bad) {display:none}
.pixel-card-wrap > .card-more {position:absolute;bottom:18px;left:18px;width:calc(100% - 36px);height:34px;z-index:2}
body .pixel-card-wrap > .card{padding-bottom:24px}
#shopStock .pixel-card-wrap > .card {grid-template-rows:28px 112px 60px 24px minmax(0,1fr) 40px;padding-bottom:18px}
#shopStock .pixel-card-wrap > .card > button {grid-row:6;align-self:end;width:100%;margin:0;min-height:36px;box-sizing:border-box}
@media(max-width:700px) {
 #shopStock > .pixel-card-wrap {flex:0 0 auto;width:100%;height:460px}
 #shopStock .pixel-card-wrap > .card {height:100%;max-height:none;min-height:460px}
}
.card-detail-modal {color:#eee6d8;background:#151925;width:min(600px,calc(100vw - 36px));max-height:85dvh;overflow:auto;padding:26px;border:3px solid var(--tier,#a5b5c3);box-sizing:border-box;box-shadow:inset 0 0 0 4px #090c16,8px 8px 0 #090c16}
.card-detail-modal::backdrop {background:#060811df}
.card-detail-modal h2 {font:32px/1.2 'VT323',monospace;color:var(--tier,#eee6d8)}
.card-detail-modal p {font-size:15px;line-height:1.8}
.card-detail-modal .tradeoff {color:#e7a6a3}
.card-detail-modal .effect b,.card-detail-modal .tradeoff b {display:block;margin:16px 0 4px}
body .card-detail-close {display:block;margin-left:auto;padding:8px 14px;background:#292431;border:2px solid #9a869e;color:#f1dfbe;cursor:pointer}
@media(max-width:760px) {body .catalog-card {height:480px;padding:16px}body .catalog-card .card-emblem img {width:96px;height:96px}body .catalog-card h2 {font-size:22px}.card-summary {font-size:13px;line-height:1.6}}
@media(max-width:440px) {body .catalog-card {height:480px;padding:18px 24px}body .catalog-card .card-emblem img {width:144px;height:144px}}
@media(max-width:700px) {
 #choices {height:min(700px,92dvh)!important;justify-content:flex-start!important}
 #choices .cards {overflow-x:auto!important;overflow-y:hidden!important;flex:0 0 482px!important;min-height:482px!important;justify-content:flex-start!important;scroll-snap-type:x mandatory;padding:4px 2px 10px!important;gap:12px!important}
 #choices .cards > .pixel-card-wrap {flex:0 0 min(260px,calc(100vw - 64px));width:min(260px,calc(100vw - 64px));scroll-snap-align:center}
 #choices .pixel-card-wrap > .card {width:100%!important;max-height:none!important;height:100%!important;overflow:visible!important;padding:18px 18px 62px!important;gap:4px!important;border-radius:0!important}
 #choices .pixel-card-wrap > .card > b {font:24px/1.1 'VT323',monospace!important;margin:0!important}
 #choices .pixel-card-wrap > .card > .card-summary {font-size:13px!important;line-height:1.65!important;padding:8px 0!important}
 #choices .pixel-card-wrap .rarity,#choices .pixel-card-wrap .rank {font-size:11px!important}
}