.bestiary-page{max-width:1320px;margin:auto;padding:46px 32px 80px}.bestiary-page h1{font-size:clamp(38px,5vw,64px);line-height:1.08;letter-spacing:-2px;margin:22px 0}.bestiary-page h1 em{font-style:normal;color:#c7b2ff}.bestiary-intro{color:#a699b4;line-height:1.8;max-width:650px}.filters{display:flex;gap:14px;align-items:end;margin:44px 0 20px;padding:20px;background:#140d20;border:1px solid #3e2951;border-radius:14px;scroll-margin-top:100px}.filters label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#c5aedb;flex:1}.filters input,.filters select,.filters button,#pager button{font:inherit;color:#eee5f7;background:#23152f;border:1px solid #523365;border-radius:8px;padding:12px 14px}.filters button,#pager button{cursor:pointer}#count{color:#b5a3c6;font-size:13px;margin:20px 0}.creatures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.creature{display:block;text-decoration:none;color:inherit;background:#140e20;border:1px solid #3e2951;border-radius:18px;overflow:hidden;transition:border-color .2s,transform .2s}.creature:hover{border-color:#a775d6;transform:translateY(-3px)}.creature-art{position:relative;height:255px;background:radial-gradient(ellipse,#342043,#110c1a)}.creature-art img{height:100%;width:100%;object-fit:contain}.creature-art[data-loading]:after{content:attr(data-loading);position:absolute;inset:45% 10px auto;text-align:center;font-size:12px;color:#bda8cf}.creature-art[data-loading] img{opacity:0}.creature-caption{padding:22px}.creature h2{font-size:23px;line-height:1.25;letter-spacing:-.5px;margin:12px 0}.creature p{font-size:12px;color:#a697b6;min-height:20px}.creature .eyebrow{font-size:10px}.creature .text-link{font-size:13px;color:#d0adf2}#pager{display:flex;gap:14px;justify-content:center;margin:32px 0}#pager button:disabled{opacity:.35;cursor:default}.note{color:#8e7e9e;font-size:12px;line-height:1.8}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #c3a0f8;outline-offset:4px}@media(max-width:900px){.creatures{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.bestiary-page{padding:24px 18px}.filters{flex-wrap:wrap}.filters label{min-width:100%}.creatures{grid-template-columns:1fr}.creature-art{height:280px}}

/* Bestiary visual refresh */
.bestiary-page{padding-top:54px}.bestiary-page>h1{max-width:760px}.bestiary-page>.eyebrow{display:inline-flex;padding:8px 13px;border:1px solid #8c61b344;border-radius:30px;background:#9b6cdb0a}.bestiary-intro{font-size:16px}.filters{background:linear-gradient(120deg,#21152ee8,#120e1de8);box-shadow:0 15px 50px #0002;border-color:#74508c66;padding:24px;border-radius:20px}.filters input,.filters select{background:#0e0b17;min-height:46px}.filters input::placeholder{color:#9f8daf}.filters button{background:#af80ed13}.creatures{gap:25px}.creature{background:linear-gradient(145deg,#21172d,#100c19);border-color:#76509155;box-shadow:0 8px 28px #0002}.creature:hover{box-shadow:0 18px 44px #0005,0 0 30px #955dd012;transform:translateY(-5px)}.creature-art{height:275px;background:radial-gradient(ellipse at 50% 45%,#7851a33b,transparent 65%),linear-gradient(145deg,#20162c,#100c19);isolation:isolate;border-bottom:1px solid #8860a525}.creature-art:before{content:'';position:absolute;width:56%;height:35px;border:1px solid #be8dfc30;border-radius:50%;background:radial-gradient(ellipse,#a67cda19,transparent 70%);bottom:21px;left:22%;z-index:-1;box-shadow:0 0 28px #a36bd515}.creature-art img{padding:14px 12px 20px;box-sizing:border-box;filter:drop-shadow(0 12px 12px #0007);transition:transform .25s}.creature:hover .creature-art img{transform:scale(1.045)}.creature-caption{padding:24px}.creature .eyebrow{display:inline-block;padding:5px 9px;background:#bb8af010;border:1px solid #a57acb30;border-radius:5px;color:#c9a8ed;letter-spacing:1px}.creature h2{margin:14px 0 10px;font-size:24px}.creature p{color:#b3a4c3;line-height:1.6}.creature .text-link{display:flex;justify-content:space-between;border-top:1px solid #9063b125;padding-top:15px;margin-top:18px;font-weight:600;color:#dcc7fc}#pager button{min-width:135px}.note{max-width:850px;margin:32px auto;text-align:center}#count{margin:24px 2px;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){.creature,.creature-art img{transition:none}.creature:hover,.creature:hover .creature-art img{transform:none}}
