/* Actual game-model portraits, etched into the cards rather than placed over the copy. */
body:before{height:900px;background:radial-gradient(ellipse at 75% 20%,#edc57514,transparent 45%),linear-gradient(90deg,#0b1011 4%,#0b101133 70%,#0b101180),linear-gradient(0deg,#0b1011 2%,transparent 75%),url('/assets/zombie-plague-fortress-4k.png') center top/cover;opacity:.86}
.hero{position:relative}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 70%,#bad5c510,transparent 60%);z-index:-1}
.class-card{isolation:isolate;box-shadow:0 12px 35px #00000024;background:linear-gradient(145deg,#20292b,#111819);transition:border-color .2s,box-shadow .2s}
.class-card:hover{border-color:#edc57540;box-shadow:0 15px 40px #00000040}
.class-card>:not(.class-portrait){position:relative;z-index:2}
.class-portrait{position:absolute;z-index:0;pointer-events:none;right:-7%;bottom:-12%;width:82%;height:115%;object-fit:contain;object-position:right bottom;opacity:.23;filter:grayscale(1) contrast(1.65) brightness(.85);mix-blend-mode:luminosity;mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(0deg,transparent 0%,#000 32%,#000 88%,transparent);mask-composite:intersect}
.class-card:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#111819a6,transparent 85%),repeating-linear-gradient(0deg,transparent 0 3px,#00000013 3px 4px)}
.class-card:before{z-index:1;opacity:.3;width:170px;height:170px;filter:blur(70px)}
.class-card details[open]{background:#101718e8;border-radius:7px;padding:14px;margin-top:0}.class-card h3{text-shadow:0 2px 8px #000}.class-card .metrics span{background:#101718bf}
@media(prefers-reduced-motion:reduce){.class-card{transition:none}}