/* Cinematic bestiary: restrained metal, regional pigments and living light. */
:root{--realm:180,192,193;--realm-light:#dce2df}
[data-realm=hos]{--realm:103,154,180;--realm-light:#c1dfec}
[data-realm=baw]{--realm:161,81,75;--realm-light:#ead0a2}
[data-realm=zaklad]{--realm:166,186,189;--realm-light:#dce5e3}
.character{border:1px solid rgba(var(--realm),.34);transform:perspective(950px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .3s ease,border-color .4s,box-shadow .4s;isolation:isolate;background-color:#111610;box-shadow:inset 0 0 0 3px #080d0b}
.character:before{content:'';position:absolute;inset:7px;z-index:2;pointer-events:none;border:1px solid rgba(var(--realm),.32);background:linear-gradient(120deg,transparent 36%,rgba(var(--realm),.07) 49%,transparent 62%);box-shadow:inset 0 0 30px #0003}
.character:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(114deg,transparent 0 4px,#d9d3b003 5px 6px),linear-gradient(0deg,#060a09f2,transparent 65%)}
.character .character-info{z-index:3}.character:hover{border-color:rgba(var(--realm),.8);box-shadow:0 12px 28px #0007,inset 0 0 0 3px #080d0b}.character:hover>img{transform:scale(1.045)}
.filters button[aria-pressed=true]{border-color:rgb(var(--realm));color:var(--realm-light)}
.voices{transition:background-color .8s;background-image:radial-gradient(ellipse at 50% 5%,rgba(var(--realm),.035),transparent 55%)}
.voice-dialog[open]{animation:none}.voice-dialog{border-color:rgba(var(--realm),.55);background:#101410;box-shadow:0 30px 120px #000e,0 0 65px rgba(var(--realm),.09)}
.voice-dialog .voice-details h2{color:var(--realm-light)}.voice-dialog .voice-art{background:radial-gradient(ellipse at center,rgba(var(--realm),.3),#0b100e 80%)}
.voice-art:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--voice-energy,0);background:radial-gradient(ellipse at 15% 55%,#d7b66670,transparent 57%),radial-gradient(ellipse at 95% 40%,rgba(var(--realm),.5),transparent 65%);box-shadow:inset 0 0 65px #d0b37966;mix-blend-mode:screen}
.voice-art{box-shadow:inset 0 0 0 1px rgba(var(--realm),.2)}
.voice-dialog.is-travelling{overflow:visible}.voice-dialog.is-travelling .voice-art{visibility:hidden}.voice-flight{position:fixed;z-index:20;pointer-events:none;object-fit:cover;max-width:none;border:1px solid rgba(var(--realm),.65);box-shadow:0 20px 65px #0009;transform-origin:top left}
.section-seam{position:relative;isolation:isolate;overflow:visible}.seam-mark{z-index:2}.section-seam:before,.section-seam:after{z-index:1}.seam-mist{position:absolute;inset:-36px 0;overflow:hidden;pointer-events:none;z-index:-1;opacity:.35}
.seam-mist:before,.seam-mist:after{content:'';position:absolute;inset:0 -15%;background:radial-gradient(ellipse at 30% 55%,#97a79b20,transparent 44%),radial-gradient(ellipse at 73% 40%,#a4aba21c,transparent 36%);filter:blur(10px);animation:seam-drift 24s ease-in-out infinite alternate;animation-play-state:paused}.seam-mist:after{animation-direction:alternate-reverse;animation-duration:31s;opacity:.55}.section-seam.in-view .seam-mist:before,.section-seam.in-view .seam-mist:after{animation-play-state:running}
@keyframes seam-drift{from{transform:translateX(-7%) scaleY(.8)}to{transform:translateX(7%) scaleY(1.15)}}
.reveal-pending{opacity:0;filter:blur(3px);transform:translateY(10px)}.reveal-ready{transition:opacity .85s ease,filter 1s ease,transform 1s cubic-bezier(.16,1,.3,1);opacity:1;filter:none;transform:none}
@media(hover:none),(pointer:coarse){.character{transform:none!important}.character:hover>img{transform:none}}
@media(prefers-reduced-motion:reduce){.character,.character:hover{transform:none!important}.character img{transition:none!important}.voice-art:before{opacity:0}.seam-mist{display:none}.reveal-pending,.reveal-ready{opacity:1;filter:none;transform:none;transition:none}}
.voice-details audio{color-scheme:dark;accent-color:var(--realm-light)}.clip-controls button[aria-pressed=true]{border-color:rgba(var(--realm),.8);color:var(--realm-light);background:rgba(var(--realm),.08)}
/* Horizontal bestiary: all filtered entries, with native touch and trackpad scrolling. */
.character-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 72px)/4.15);gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:8px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#aa9a70 #1a211c;padding:12px 8px 26px;margin:0 -8px;cursor:grab}
.character-grid .character{scroll-snap-align:start;min-width:0;height:400px;user-select:none;-webkit-user-select:none;cursor:grab}.character-grid .character img{-webkit-user-drag:none;user-select:none}.character-grid.is-dragging{scroll-snap-type:none;cursor:grabbing}.character-grid.is-dragging .character{cursor:grabbing;transform:none!important;pointer-events:auto}.character-grid .empty{min-width:260px}.rail-hint{font-size:12px;letter-spacing:1.4px;color:#c8bb99}.catalog-bottom{margin-top:14px}.character-grid::-webkit-scrollbar{height:7px}.character-grid::-webkit-scrollbar-track{background:#1a211c}.character-grid::-webkit-scrollbar-thumb{background:#aa9a70;border-radius:0}
@media(max-width:1100px){.character-grid{grid-auto-columns:calc((100% - 48px)/3.15)}.character-grid .character{height:370px}}
@media(max-width:700px){.character-grid{grid-auto-columns:calc((100% - 20px)/2.15);gap:20px}.character-grid .character{height:345px}.rail-hint{font-size:10px;letter-spacing:.7px}}
@media(max-width:450px){.character-grid{grid-auto-columns:76%;gap:16px}.character-grid .character{height:370px}.catalog-bottom{gap:12px;flex-wrap:wrap}}
/* Preserve the complete source portrait inside its metal frame. */
.character>img{object-fit:contain;object-position:50% 0%;padding:14px 12px 52px;transform:none;transform-origin:50% 0%}.character:hover>img{transform:none}.character{background-image:radial-gradient(ellipse at 50% 30%,rgba(var(--realm),.15),transparent 72%)}
.voice-art .voice-portrait{object-fit:contain;object-position:center;min-height:0;padding:18px;height:100%;position:absolute;inset:0;transform-origin:center;animation:portrait-contained 7s ease-in-out infinite alternate}.voice-art{min-height:570px}.voice-flight{object-fit:contain;padding:14px 12px;object-position:center}
@keyframes portrait-contained{from{transform:scale(.975)}to{transform:scale(1)}}
@media(max-width:600px){.voice-art{min-height:0;height:290px}.voice-art .voice-portrait{object-position:center;padding:12px}}
@media(prefers-reduced-motion:reduce){.voice-art .voice-portrait{animation:none;transform:none}}
/* Gwent-inspired physical cards: bronze binding, cornerwork, parchment nameplate. */
.character-grid{gap:26px;grid-auto-columns:calc((100% - 78px)/4.08);padding-top:16px;padding-bottom:28px}
.character-grid .character{height:445px;border:4px solid #655739;outline:1px solid #29281c;outline-offset:2px;background:radial-gradient(ellipse at 50% 25%,rgba(var(--realm),.18),transparent 70%),repeating-linear-gradient(105deg,#20271e 0 2px,#1d241d 3px 5px);box-shadow:inset 0 0 0 2px #c4ac7066,inset 0 0 45px #0008,0 8px 16px #0005}
.character-grid .character:hover{border-color:#bca16b;box-shadow:inset 0 0 0 2px #dfcc9166,0 10px 24px #0009}
.character:before{inset:5px;border:1px solid #baa47488;background:none;box-shadow:inset 0 0 0 3px #060b0966;z-index:4}
.character:after{inset:0 0 112px;background:linear-gradient(0deg,#111810,transparent 28%),repeating-linear-gradient(112deg,transparent 0 5px,#d4c79604 6px 7px);z-index:1}
.character>img{position:absolute;top:0;left:0;width:100%;height:calc(100% - 105px);padding:18px 10px 0;object-fit:contain;object-position:50% 100%;filter:saturate(.75) brightness(.96)}
.character .character-info{left:7px;right:7px;bottom:7px;min-height:105px;padding:15px 12px 9px;text-align:center;background:radial-gradient(ellipse at 50% 30%,#e0d0a6,#bfa878 85%);color:#30281c;border-top:3px double #6b5734;box-shadow:0 -5px 16px #0005,inset 0 0 14px #74552e55;z-index:3;display:flex;flex-direction:column;justify-content:center}
.character-info:before{content:'';position:absolute;top:-7px;left:calc(50% - 5px);width:10px;height:10px;transform:rotate(45deg);background:#cbb681;border:1px solid #6b5734;box-shadow:0 0 0 2px #302b1c}
.character .character-info h3{font-size:23px;line-height:1.12;font-weight:600;letter-spacing:.1px;margin:0 0 9px;color:#30281c;text-shadow:0 1px #f9e9be66;overflow-wrap:anywhere}
.character .character-info p{border-top:1px solid #6e583d55;margin:0;padding-top:7px;justify-content:center;gap:9px;font-size:11px;letter-spacing:.6px;color:#4b3d28;font-weight:600}.character .character-info p span{border:0;width:auto;height:auto;font-size:9px}
.card-game-logo{position:absolute;right:9px;top:9px;width:86px;height:65px;padding:5px 4px 11px;z-index:5;background:linear-gradient(#080d0bed,#121b16e8);border:1px solid #b89f6566;clip-path:polygon(0 0,100% 0,100% 87%,50% 100%,0 87%);pointer-events:none}
.card-game-logo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}[data-realm=hos] .card-game-logo img,[data-realm=baw] .card-game-logo img{filter:brightness(1.9) drop-shadow(0 1px 2px #000)}
.card-corners{position:absolute;inset:0;pointer-events:none;z-index:6}.card-corners i{position:absolute;width:25px;height:25px;border-top:3px double #d8bd7b;border-left:3px double #d8bd7b;left:3px;top:3px;background:linear-gradient(135deg,#a38c52 0 18%,transparent 19%);box-shadow:-1px -1px #292317}.card-corners i:after{content:'';position:absolute;width:5px;height:5px;border:1px solid #cfb679;left:5px;top:5px;transform:rotate(45deg)}.card-corners i:nth-child(2){left:auto;right:3px;transform:rotate(90deg)}.card-corners i:nth-child(3){top:auto;bottom:3px;transform:rotate(-90deg)}.card-corners i:nth-child(4){left:auto;right:3px;top:auto;bottom:3px;transform:rotate(180deg)}
.character>.initials{position:absolute;inset:12px 10px 115px;display:grid;place-items:center}
@media(max-width:1100px){.character-grid{grid-auto-columns:calc((100% - 52px)/3.08)}.character-grid .character{height:425px}.character .character-info h3{font-size:22px}}
@media(max-width:700px){.character-grid{grid-auto-columns:calc((100% - 20px)/2.08);gap:20px}.character-grid .character{height:410px}.character .character-info h3{font-size:20px}.card-game-logo{width:73px;height:58px}}
@media(max-width:450px){.character-grid{grid-auto-columns:80%;gap:20px}.character-grid .character{height:430px}.character .character-info h3{font-size:23px}.card-game-logo{width:84px;height:64px}}