.portrait {
    display: block;
    position: relative;
    height: 210px;
    overflow: hidden;
    border-bottom: 1px solid #4a3728;
    background:
        radial-gradient(circle at 50% 108%, rgba(240,138,60,.28), transparent 43%),
        linear-gradient(150deg, #263831, #09100e 64%);
}
.portrait::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 100% 4px; opacity: .38; }
.portrait::after { content: ""; position: absolute; inset: auto 13px 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.specimen { position: absolute; left: 50%; bottom: -22px; width: 136px; height: 196px; transform: translateX(-50%); filter: drop-shadow(0 9px 18px #000); }
.specimen::before { content: ""; position: absolute; left: 31px; top: 18px; width: 74px; height: 92px; border-radius: 48% 48% 44% 44%; background: linear-gradient(110deg, #9ba188, #343c33 52%, #111614); box-shadow: inset -12px -3px 18px rgba(0,0,0,.5); }
.specimen::after { content: ""; position: absolute; left: 8px; bottom: 0; width: 120px; height: 104px; clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%); background: linear-gradient(110deg, #464f43, #171d19 62%); }
.eye { position: absolute; z-index: 2; top: 53px; left: 50px; width: 36px; height: 8px; border-radius: 50%; background: var(--orange-hot); box-shadow: 0 0 10px var(--orange-hot); }
.portrait.machine { background: radial-gradient(circle at 52% 48%, rgba(205,89,31,.26), transparent 28%), linear-gradient(145deg, #291b16, #080b0a 67%); }
.machine .specimen::before { border-radius: 12% 12% 38% 38%; background: linear-gradient(120deg, #59605a, #151918 58%); clip-path: polygon(20% 0, 80% 0, 100% 25%, 85% 100%, 15% 100%, 0 25%); }
.machine .specimen::after { background: linear-gradient(120deg, #383d39, #101312 62%); }
.machine .eye { left: 45px; width: 46px; height: 4px; border-radius: 0; }
.portrait.avian { background: radial-gradient(circle at 50% 100%, rgba(76,161,144,.3), transparent 45%), linear-gradient(145deg, #18312e, #080d0c 66%); }
.avian .specimen::before { left: 28px; width: 80px; border-radius: 55% 70% 35% 45%; clip-path: polygon(0 6%, 72% 0, 100% 42%, 66% 50%, 78% 100%, 17% 89%); background: linear-gradient(125deg, #729b8e, #21342f 60%); }
.avian .eye { left: 51px; top: 48px; width: 9px; height: 9px; }
.portrait.plantoid { background: radial-gradient(circle at 50% 100%, rgba(211,167,77,.29), transparent 42%), linear-gradient(145deg, #2c3020, #0a0d09 68%); }
.plantoid .specimen::before { border-radius: 50% 50% 30% 30%; clip-path: polygon(50% 0, 65% 18%, 90% 8%, 82% 33%, 100% 47%, 77% 59%, 70% 100%, 30% 100%, 23% 59%, 0 47%, 18% 33%, 10% 8%, 35% 18%); background: linear-gradient(120deg, #9b9456, #343720 58%); }
.plantoid .specimen::after { background: linear-gradient(110deg, #4e5730, #171d12 62%); }
.plantoid .eye { left: 47px; width: 42px; height: 6px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.portrait.aquatic { background: radial-gradient(circle at 50% 100%, rgba(58,127,161,.32), transparent 42%), linear-gradient(145deg, #19303a, #080d0f 68%); }
.aquatic .specimen::before { border-radius: 60% 60% 42% 42%; background: linear-gradient(120deg, #6594a0, #253e43 58%); }
.aquatic .eye { left: 45px; width: 12px; height: 12px; box-shadow: 27px 0 0 var(--orange-hot), 0 0 9px var(--orange-hot); }
.portrait.humanoid { background: radial-gradient(circle at 50% 100%, rgba(195,112,67,.28), transparent 44%), linear-gradient(145deg, #33251f, #0c0d0c 68%); }
.humanoid .specimen::before { left: 33px; width: 70px; border-radius: 48% 48% 44% 44%; background: linear-gradient(120deg, #bd8b6d, #574238 57%, #181817); }
.humanoid .specimen::after { clip-path: polygon(31% 0, 69% 0, 90% 22%, 100% 100%, 0 100%, 10% 22%); background: linear-gradient(120deg, #4e4038, #171817 62%); }
.humanoid .eye { left: 51px; top: 53px; width: 8px; height: 5px; box-shadow: 26px 0 0 var(--orange-hot), 0 0 7px var(--orange-hot); }
.portrait.mammalian { background: radial-gradient(circle at 50% 100%, rgba(172,121,66,.3), transparent 44%), linear-gradient(145deg, #30251a, #0d0e0c 68%); }
.mammalian .specimen::before { left: 27px; width: 82px; border-radius: 44% 44% 52% 52%; clip-path: polygon(0 3%, 26% 17%, 50% 0, 74% 17%, 100% 3%, 88% 42%, 79% 100%, 21% 100%, 12% 42%); background: linear-gradient(120deg, #a18465, #473a2d 58%); }
.mammalian .specimen::after { background: linear-gradient(115deg, #554431, #191915 64%); }
.mammalian .eye { left: 47px; top: 51px; width: 9px; height: 7px; box-shadow: 33px 0 0 var(--gold), 0 0 7px var(--gold); background: var(--gold); }
.portrait.reptilian { background: radial-gradient(circle at 50% 100%, rgba(102,154,76,.27), transparent 44%), linear-gradient(145deg, #24301c, #0a0d09 68%); }
.reptilian .specimen::before { left: 26px; width: 84px; border-radius: 38% 52% 35% 45%; clip-path: polygon(9% 13%, 63% 0, 92% 21%, 100% 59%, 72% 75%, 70% 100%, 22% 93%, 0 54%); background: linear-gradient(120deg, #718653, #344026 60%); }
.reptilian .specimen::after { background: linear-gradient(115deg, #435333, #131810 64%); }
.reptilian .eye { left: 52px; top: 45px; width: 11px; height: 6px; transform: skewX(-24deg); background: #ffb347; box-shadow: 29px 4px 0 #ffb347, 0 0 8px #ff8a2b; }
.portrait.fungoid { background: radial-gradient(circle at 50% 100%, rgba(152,88,171,.28), transparent 46%), linear-gradient(145deg, #2d2032, #0b0c0b 68%); }
.fungoid .specimen::before { left: 20px; top: 13px; width: 96px; height: 94px; border-radius: 55% 55% 28% 28%; clip-path: polygon(50% 0, 82% 13%, 100% 45%, 76% 67%, 68% 100%, 32% 100%, 24% 67%, 0 45%, 18% 13%); background: linear-gradient(125deg, #a078a8, #49354e 58%); }
.fungoid .specimen::after { clip-path: polygon(38% 0, 62% 0, 88% 100%, 12% 100%); background: linear-gradient(110deg, #5e4763, #1d1720 63%); }
.fungoid .eye { left: 43px; top: 57px; width: 12px; height: 8px; box-shadow: 38px 0 0 #e8b4ff, 0 0 9px #d887ff; background: #e8b4ff; }
.portrait.lithoid { background: radial-gradient(circle at 50% 100%, rgba(85,173,180,.27), transparent 45%), linear-gradient(145deg, #203033, #090d0d 68%); }
.lithoid .specimen::before { left: 25px; top: 5px; width: 86px; height: 110px; border-radius: 0; clip-path: polygon(50% 0, 70% 21%, 94% 14%, 88% 54%, 100% 76%, 68% 100%, 26% 91%, 0 61%, 13% 26%, 35% 20%); background: linear-gradient(125deg, #86a5a2, #3c5351 52%, #151b1a); }
.lithoid .specimen::after { clip-path: polygon(27% 0, 72% 0, 100% 100%, 0 100%); background: linear-gradient(120deg, #435c59, #141b19 64%); }
.lithoid .eye { left: 45px; top: 55px; width: 46px; height: 5px; border-radius: 0; background: #80f4e4; box-shadow: 0 0 12px #55d9c8; }
.portrait.toxoid { background: radial-gradient(circle at 50% 100%, rgba(147,184,56,.25), transparent 46%), linear-gradient(145deg, #283018, #0a0c08 68%); }
.toxoid .specimen::before { left: 25px; top: 9px; width: 86px; height: 106px; border-radius: 45% 45% 38% 38%; clip-path: polygon(28% 0, 72% 0, 100% 31%, 87% 84%, 67% 100%, 33% 100%, 13% 84%, 0 31%); background: linear-gradient(125deg, #747b55, #303727 58%); box-shadow: inset 0 0 0 7px rgba(12,15,11,.72); }
.toxoid .specimen::after { background: linear-gradient(110deg, #3d4530, #131712 62%); }
.toxoid .eye { left: 43px; top: 49px; width: 50px; height: 13px; border: 2px solid #a9d642; border-radius: 30%; background: rgba(155,211,50,.22); box-shadow: inset 0 0 8px #90ca2f, 0 0 9px rgba(144,202,47,.7); }
.portrait.arthropoid { background: radial-gradient(circle at 50% 100%, rgba(198,105,45,.3), transparent 46%), linear-gradient(145deg, #35251c, #0c0d0b 68%); }
.arthropoid .specimen::before { left: 23px; top: 6px; width: 90px; height: 111px; border-radius: 35% 35% 42% 42%; clip-path: polygon(23% 0, 42% 16%, 50% 3%, 58% 16%, 77% 0, 91% 26%, 100% 59%, 75% 100%, 25% 100%, 0 59%, 9% 26%); background: linear-gradient(125deg, #a67046, #553824 54%, #19130f); box-shadow: inset -10px -5px 15px rgba(0,0,0,.48); }
.arthropoid .specimen::after { clip-path: polygon(24% 0, 42% 12%, 50% 0, 58% 12%, 76% 0, 100% 100%, 0 100%); background: linear-gradient(115deg, #67432a, #1d1611 64%); }
.arthropoid .eye { left: 41px; top: 48px; width: 10px; height: 10px; border-radius: 50%; background: #ffbd58; box-shadow: 18px -4px 0 #ffbd58, 36px 0 0 #ffbd58, 0 0 9px #f4792f; }
.portrait.molluscoid { background: radial-gradient(circle at 50% 100%, rgba(68,151,163,.31), transparent 47%), linear-gradient(145deg, #1c3235, #090d0e 68%); }
.molluscoid .specimen::before { left: 23px; top: 8px; width: 90px; height: 108px; border-radius: 58% 58% 39% 39%; clip-path: polygon(50% 0, 79% 11%, 100% 38%, 89% 78%, 71% 100%, 29% 100%, 11% 78%, 0 38%, 21% 11%); background: linear-gradient(125deg, #75a2a6, #35565a 56%, #142024); }
.molluscoid .specimen::after { clip-path: polygon(20% 0, 35% 18%, 45% 0, 55% 18%, 65% 0, 80% 18%, 100% 100%, 0 100%); background: linear-gradient(110deg, #466d70, #162426 64%); }
.molluscoid .eye { left: 43px; top: 47px; width: 17px; height: 13px; border-radius: 55% 45%; background: #ffd67a; box-shadow: 34px 3px 0 #ffd67a, 0 0 10px #f2a846; }
.portrait.necroid { background: radial-gradient(circle at 50% 100%, rgba(86,171,151,.24), transparent 44%), linear-gradient(145deg, #202c29, #080a09 69%); }
.necroid .specimen::before { left: 30px; top: 3px; width: 76px; height: 114px; border-radius: 43% 43% 34% 34%; clip-path: polygon(31% 0, 69% 0, 90% 22%, 100% 57%, 77% 100%, 59% 86%, 50% 100%, 41% 86%, 23% 100%, 0 57%, 10% 22%); background: linear-gradient(125deg, #7d8b7d, #303b35 52%, #101412); }
.necroid .specimen::after { clip-path: polygon(30% 0, 43% 15%, 50% 2%, 57% 15%, 70% 0, 100% 100%, 0 100%); background: linear-gradient(110deg, #394b42, #111713 65%); }
.necroid .eye { left: 46px; top: 49px; width: 13px; height: 7px; transform: rotate(-8deg); background: #70e8c6; box-shadow: 31px 0 0 #70e8c6, 0 0 11px #3ed5ad; }
.portrait.infernal { background: radial-gradient(circle at 50% 90%, rgba(255,91,27,.38), transparent 42%), linear-gradient(145deg, #39180f, #0d0806 68%); }
.infernal .specimen { filter: drop-shadow(0 9px 18px #000) drop-shadow(0 0 10px rgba(255,74,20,.28)); }
.infernal .specimen::before { left: 25px; top: 4px; width: 86px; height: 113px; border-radius: 38% 38% 42% 42%; clip-path: polygon(18% 0, 39% 21%, 50% 3%, 61% 21%, 82% 0, 95% 35%, 100% 68%, 69% 100%, 31% 100%, 0 68%, 5% 35%); background: linear-gradient(125deg, #5e3529, #211515 54%, #090808); box-shadow: inset 7px 2px 0 rgba(255,91,28,.24), inset -7px -5px 0 rgba(255,129,44,.13); }
.infernal .specimen::after { background: linear-gradient(110deg, #46251f, #160c0b 62%); box-shadow: inset 3px 0 0 rgba(255,78,20,.25); }
.infernal .eye { left: 42px; top: 49px; width: 16px; height: 7px; background: #ffdb58; box-shadow: 36px 0 0 #ffdb58, 0 0 13px #ff4e14; }
.portrait.mindwarden { background: radial-gradient(circle at 50% 44%, rgba(122,102,229,.3), transparent 29%), radial-gradient(circle at 50% 100%, rgba(70,175,176,.2), transparent 45%), linear-gradient(145deg, #211f38, #090a0f 69%); }
.mindwarden .specimen { filter: drop-shadow(0 9px 18px #000) drop-shadow(0 0 12px rgba(130,111,255,.28)); }
.mindwarden .specimen::before { left: 27px; top: 2px; width: 82px; height: 115px; border-radius: 50% 50% 37% 37%; clip-path: polygon(50% 0, 68% 18%, 91% 12%, 84% 38%, 100% 62%, 72% 100%, 50% 86%, 28% 100%, 0 62%, 16% 38%, 9% 12%, 32% 18%); background: linear-gradient(125deg, rgba(145,139,199,.94), rgba(57,54,103,.94) 56%, rgba(17,18,35,.96)); }
.mindwarden .specimen::after { clip-path: polygon(35% 0, 50% 15%, 65% 0, 100% 100%, 0 100%); background: linear-gradient(110deg, #3c3b68, #121326 64%); }
.mindwarden .eye { left: 43px; top: 50px; width: 50px; height: 5px; border-radius: 0; background: #b7a7ff; box-shadow: 0 0 13px #806cff; }
.portrait.unknown { background: radial-gradient(circle at 50% 100%, rgba(145,145,145,.22), transparent 44%), linear-gradient(145deg, #282b29, #0b0d0c 68%); }
.unknown .specimen::before { background: linear-gradient(120deg, #7b817c, #343936 58%); }
.unknown .eye { background: #d6d6d6; box-shadow: 0 0 8px #fff; }

.portrait.compact { height: 94px; border: 1px solid rgba(88,184,165,.45); }
.portrait.compact .specimen { bottom: -11px; transform: translateX(-50%) scale(.48); transform-origin: bottom center; }
@media (max-width: 560px) { .portrait.compact { height: 78px; } }