@import url('./creature-card-reader.css');

/* Actual transparent Collection rétro layers, with original portrait and DOM text. */
.creature-card{--creature-card-fit:contain;box-sizing:border-box;position:relative;display:block;width:100%;min-width:0;aspect-ratio:16/25;padding:0;border:0;border-radius:5%/3.2%;background:#e6e2bd var(--retro-paper,url('./assets/cards/collection-retro-v1/sage-paper.webp')) center/100% auto;color:#153c2c;box-shadow:0 2px 3px rgb(53 43 33 / .41941),0 27px 48px -5px rgb(41 48 32 / .51666);text-align:center;isolation:isolate;container-type:inline-size;font-family:Georgia,'Times New Roman',serif}
.creature-card::before{content:'';position:absolute;inset:0;z-index:8;border:11cqw solid transparent;border-image:var(--retro-outer,url('./assets/cards/collection-retro-v1/outer-frame.webp')) 112/11cqw/0 stretch;pointer-events:none;box-sizing:border-box}
.creature-card::after{content:'';position:absolute;inset:0;z-index:9;border-radius:inherit;box-shadow:inset .25cqw .3cqw .3cqw rgb(255 248 220 / 1),inset -.2cqw -.35cqw .35cqw rgb(98 67 25 / .87844);background:linear-gradient(118deg,transparent 15%,rgb(255 244 197 / .23) 33%,rgb(187 219 213 / .1495) 40%,transparent 56%,rgb(255 245 214 / .1495) 77%,transparent 92%);pointer-events:none}
.creature-card-artwork{box-sizing:border-box;position:absolute;left:var(--retro-art-left,8.6%);top:var(--retro-art-top,16.16%);width:var(--retro-art-width,82.8%);height:var(--retro-art-height,50.54%);display:block;min-width:0;border:0;background:#d8ddca;overflow:hidden;clip-path:var(--retro-background-clip,inset(0))}
.creature-card-artwork::after{content:'';position:absolute;inset:0 var(--retro-window-right,0) 0 var(--retro-window-left,0);z-index:1;box-shadow:inset 0 .6cqw 1cqw rgb(32 41 28 / .48333),inset 0 -.25cqw .35cqw rgb(255 240 189 / .36392);pointer-events:none}
.creature-card .creature-card-artwork>img{position:absolute;inset:0;display:block;box-sizing:border-box;width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;min-width:0;min-height:0;margin:0;border:0!important;border-radius:0!important;aspect-ratio:auto;object-fit:contain!important;object-position:center;background:transparent!important}
.creature-card[data-card-type="item"] .creature-card-artwork>img{transform:scale(.84);transform-origin:center}
.retro-card-portrait-frame{position:absolute;left:var(--retro-frame-left,5.37%);top:var(--retro-frame-top,13.47%);width:var(--retro-frame-width,89.26%);height:var(--retro-frame-height,55.5%);border:9.76cqw solid transparent;border-image:var(--retro-frame,url('./assets/cards/collection-retro-v1/portrait-frame-4x5.webp')) 140/9.76cqw/0 stretch;box-sizing:border-box;z-index:2;pointer-events:none}
.retro-card-foreground{display:none;position:absolute;left:var(--retro-art-left,8.6%);top:var(--retro-art-top,16.16%);width:var(--retro-art-width,82.8%);height:var(--retro-art-height,50.54%);filter:drop-shadow(0 .6cqw .35cqw rgb(34 40 23 / .4));mask-image:linear-gradient(#000 0 var(--retro-relief-edge,14%),transparent var(--retro-relief-fade,19%));clip-path:var(--retro-foreground-clip,inset(0));z-index:3;pointer-events:none}
.retro-card-cutout{position:absolute;inset:0;display:block;background-size:contain;background-repeat:no-repeat;background-position:center;mask-size:100% 100%;mask-mode:luminance;mask-repeat:no-repeat}
.has-card-mask .retro-card-foreground{display:block}
.retro-card-brand{position:absolute;left:35.5%;right:35.5%;top:4%;font:700 3cqw/1.1 Georgia,serif;letter-spacing:.25em;z-index:2}
.retro-card-brand::before,.retro-card-brand::after{content:'✦';position:absolute;top:0;width:16cqw;height:100%;color:#793442;letter-spacing:0;background:linear-gradient(#45684f,#45684f) left center/12.5cqw .15cqw no-repeat}
.retro-card-brand::before{right:100%;margin-right:.5cqw;text-align:right}
.retro-card-brand::after{left:100%;margin-left:.5cqw;text-align:left;background-position:right center}
.creature-card.creature-card-retro .creature-card-name{box-sizing:border-box;position:absolute;z-index:2;left:21%;right:21%;top:6.6%;display:block;-webkit-line-clamp:unset;overflow:visible;min-width:0;max-height:none;margin:0;padding:0;color:#153527;font:700 var(--retro-name-size,10.55cqw)/1.04 Georgia,'Times New Roman',serif;letter-spacing:0;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere;text-wrap:wrap;text-overflow:clip}
.has-name-stars:not(.creature-card-compact) .creature-card-name::before,.has-name-stars:not(.creature-card-compact) .creature-card-name::after{content:'✦';position:absolute;top:50%;width:4cqw;color:#793442;font:400 4.2cqw/1 Georgia,serif;transform:translateY(-50%);pointer-events:none}
.has-name-stars .creature-card-name::before{left:calc(50% - var(--retro-name-half-width) - 6cqw)}
.has-name-stars .creature-card-name::after{right:calc(50% - var(--retro-name-half-width) - 6cqw)}
.creature-card-name[hidden],.creature-card-elements[hidden],.retro-card-subtitle[hidden],.retro-card-attacks[hidden],.retro-card-more[hidden]{display:none}
.creature-card-elements{position:absolute;top:3%;right:5.4%;display:flex;gap:.4cqw;align-items:start;justify-content:flex-end;z-index:4;pointer-events:none}
.retro-card-element{display:flex;align-items:center;flex-direction:column}
.retro-card-medallion{width:17.2cqw;height:17.2cqw}
.retro-card-level-seal{position:relative;isolation:isolate;pointer-events:auto;min-width:var(--seal-size)}
.retro-card-level-ring{position:absolute;top:0;left:50%;width:var(--seal-size);height:var(--seal-size);transform:translateX(-50%);overflow:visible;pointer-events:none}
.retro-card-element-label{padding:.1cqw .7cqw;background:#e6e2bd var(--retro-paper,url('./assets/cards/collection-retro-v1/sage-paper.webp')) center/300% auto;font:700 2.8cqw/1.1 Georgia,serif;text-transform:uppercase}
.creature-card-elements:has(.retro-card-element+.retro-card-element){right:5.8%;gap:0}
.creature-card-elements:has(.retro-card-element+.retro-card-element) .retro-card-medallion{width:11.8cqw;height:11.8cqw}
.creature-card-elements:has(.retro-card-element+.retro-card-element) .retro-card-element-label{font-size:2.25cqw}
.retro-card-sprite{display:block;background-size:400% 300%;background-repeat:no-repeat;flex:none;pointer-events:none}
/* Source rectangles are tight around the round artwork; reserve 8% on each side for the XP ring. */
.retro-card-medallion-region{box-sizing:border-box;padding:1.376cqw;background-origin:content-box;background-clip:content-box}
.creature-card-elements:has(.retro-card-element+.retro-card-element) .retro-card-medallion-region{padding:.944cqw}
.retro-card-ornaments{position:absolute;inset:0;overflow:clip;pointer-events:none}
.retro-card-ornament{position:absolute;z-index:4;pointer-events:none}
/* Visible stems overlap the frame; the atlas padding stays transparent. */
.retro-card-ornament-0{left:1.8%;top:1.8%;width:23cqw;height:23cqw}
.retro-card-ornament-1{left:var(--retro-hanging-left,59%);top:var(--retro-hanging-top,-4.6%);width:40cqw;height:40cqw;transform-origin:var(--retro-hanging-origin-x,29%) var(--retro-hanging-origin-y,26%);transform:rotate(18deg);z-index:3}
.creature-card.creature-card-retro .creature-card-name,.retro-card-brand,.creature-card-elements{z-index:5}
.retro-card-attack-frame{position:absolute;left:4.3%;right:4.3%;top:calc(var(--retro-attacks-top,72.5%) - 2.2cqw);bottom:2.9%;border:3.3cqw solid transparent;border-image:var(--retro-frame,url('./assets/cards/collection-retro-v1/portrait-frame-4x5.webp')) 140/3.3cqw/0 stretch;box-sizing:border-box;z-index:1;pointer-events:none}
.retro-card-ornament-2,.retro-card-ornament-3{bottom:2.4%;width:22cqw;height:22cqw;z-index:2}
.retro-card-ornament-2{left:2.4%}
.retro-card-ornament-3{right:2.4%;transform:scaleX(-1)}
.retro-card-ribbon-band{position:absolute;left:4.3%;right:4.3%;top:calc(var(--retro-subtitle-top,67.875%) + 1.35cqw);height:5cqw;box-sizing:border-box;background:#e6e2bd var(--retro-paper,url('./assets/cards/collection-retro-v1/sage-paper.webp')) center/100% auto;border:1.8cqw solid transparent;border-image:var(--retro-frame,url('./assets/cards/collection-retro-v1/portrait-frame-4x5.webp')) 140/1.8cqw/0 stretch;z-index:2;pointer-events:none}
.retro-card-joint{top:calc(var(--retro-subtitle-top,67.875%) - 10.9cqw);width:18cqw;height:18cqw;z-index:3}
.retro-card-joint-left{left:1.6%}
.retro-card-joint-right{right:1.6%;transform:scaleX(-1)}
.retro-card-subtitle{position:absolute;left:14%;top:var(--retro-subtitle-top,64.82%);width:72%;height:5.6%;box-sizing:border-box;padding:2.8cqw 10cqw 0;background:var(--retro-rules,url('./assets/cards/collection-retro-v1/rules-and-ribbon.webp')) center/100% auto no-repeat;font:italic 700 3.3cqw/1.05 Georgia,serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;z-index:5}
.retro-card-attacks{position:absolute;left:6.8%;right:6.8%;top:var(--retro-attacks-top,72.5%);display:flex;flex-direction:column;justify-content:flex-start;gap:.25cqw;z-index:3;text-align:left}
.retro-card-attack{box-sizing:border-box;position:relative;display:flex;align-items:flex-start;gap:1.55cqw;height:14.25cqw;flex:none;margin:0;padding:1cqw 0 0;border:0;overflow:visible}
.creature-card[data-attack-count="3"] .retro-card-attack{height:7.6cqw}
.creature-card[data-attack-count="3"] .retro-card-attack-icon{width:6.2cqw;height:6.2cqw}
.creature-card[data-attack-count="3"] :is(.retro-card-ornament-2,.retro-card-ornament-3){width:15.5cqw;height:15.5cqw}
.retro-card-attack:not(:last-child)::after{content:'';position:absolute;left:0;right:0;bottom:-.125cqw;height:.1cqw;background:#45684f;opacity:.35;pointer-events:none}
.retro-card-attack-icon{width:7.2cqw;height:7.2cqw;flex:none;margin-top:.1cqw}
.retro-card-attack-energy{display:flex;align-items:center;gap:.5cqw;flex:0 0 17.2cqw;height:6.2cqw;min-width:0}
.retro-card-energy{display:block;flex:none;width:5.2cqw;height:5.2cqw}
.retro-card-attack-text{display:block;min-width:0;flex:1}
.retro-card-attack-heading{display:flex;align-items:flex-start;gap:1.2cqw;min-height:5.2cqw}
.retro-card-attack-figure{display:flex;flex-direction:column;align-items:center;flex:0 0 var(--retro-attack-figure-width,9.3cqw);line-height:1;color:#153527}
.creature-card .retro-card-attack-value{font:700 4.5cqw/1 Georgia,serif!important;white-space:nowrap}
.retro-card-attack-unit{font:400 1.8cqw/1.1 Georgia,serif;white-space:nowrap}
.retro-card-attack-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-right:calc(var(--retro-attack-figure-width,9.3cqw) + 1.2cqw);font:400 3cqw/1.14 Georgia,serif;color:#294433;white-space:normal;overflow-wrap:anywhere}
.creature-card[data-attack-count="3"] .retro-card-attack-description{display:none}
/* A card is one hit target: hovering it does not turn its printed titles into links. */
a:has(.creature-card):hover,.collection-page .collection-card a:hover .creature-card strong{text-decoration:none}
.creature-card.creature-card-retro .retro-card-attack .retro-card-attack-name{display:block;flex:1;min-width:0;-webkit-line-clamp:unset;overflow:hidden;max-height:none;margin:0;padding:0;font:700 var(--retro-attack-title-size,4.5cqw)/1.08 Georgia,serif!important;letter-spacing:0;white-space:nowrap;text-overflow:ellipsis}
.retro-card-more{position:absolute;bottom:7%;left:29%;right:29%;z-index:5;font:italic 2.2cqw/1.3 Georgia,serif;color:#793442}
.retro-card-bonuses{position:absolute;left:0;right:0;top:var(--retro-bonuses-top);z-index:5;text-align:left;color:var(--card-finish-ink,#153527)}
.retro-card-bonuses[hidden]{display:none}
.retro-card-bonuses::before{content:'';position:absolute;left:10.7421875%;right:10.7421875%;top:-.6836cqw;height:.1465cqw;background:#45684f;opacity:.5}
.retro-card-bonuses-title{position:absolute;left:10.7421875%;top:0;font:700 2.34375cqw/1.15 Georgia,serif}
.retro-card-bonus{position:absolute;display:block;font:400 2.9296875cqw/1.15 Georgia,serif;white-space:pre}
.retro-card-footer{position:absolute;bottom:4.6%;left:29%;right:29%;z-index:5;font:700 2.3cqw/1.1 Georgia,serif;letter-spacing:.1em;white-space:nowrap}
.creature-element{display:inline-block;width:32px;height:32px;flex:none;overflow:hidden;vertical-align:middle}

/* HUD/roulette thumbnails keep only full portrait and name. */
.creature-card-compact{aspect-ratio:3/4}
.creature-card-compact .creature-card-artwork{left:8%!important;top:7%!important;width:84%!important;height:77%!important;clip-path:none!important;overflow:hidden!important}
.creature-card.creature-card-retro.creature-card-compact .creature-card-name{left:8%;right:8%;top:86%;font-size:8cqw;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creature-card-compact :is(.retro-card-brand,.retro-card-portrait-frame,.retro-card-foreground,.retro-card-ornaments,.retro-card-subtitle,.retro-card-attacks,.retro-card-more,.retro-card-footer,.creature-card-elements){display:none!important}
.creature-card-compact::before{border-image-width:10cqw}
/* Show the portrait as soon as it loads; decoration and relief can finish afterward.
   Keep the same card geometry, lazy loading, focus and hit targets. */
.creature-card.is-card-loading{background-image:none}
.creature-card.is-card-loading::before,.creature-card.is-card-loading>:not(.creature-card-name,.creature-card-artwork){opacity:0}
.creature-card.is-card-loading::after{content:'';position:absolute;inset:2.2%;border:1px solid #8d9b7370;border-radius:4%/2%;pointer-events:none}
/* Essai 1, selected in the local workshop: one static filter, no per-card animation. */
.creature-card-effect-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.creature-card:not(.is-card-loading) :is(.creature-card-artwork>img,.retro-card-cutout){filter:var(--chimera-card-portrait-filter,none)}
body#chimera-console .is-card-approaching .creature-card:not(.is-card-loading){box-shadow:0 2px 3px rgb(53 43 33 / .41941),0 27px 48px -5px rgb(41 48 32 / .51666)}
@media(forced-colors:active){.creature-card,.creature-card-artwork{border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}.creature-card::before,.retro-card-ornaments,.retro-card-portrait-frame{display:none}}
@media(forced-colors:active){.retro-card-level-ring{forced-color-adjust:none}}

@media(forced-colors:active){body#chimera-console .is-card-approaching .creature-card:not(.is-card-loading){box-shadow:none}.creature-card::after{background:none;box-shadow:none}.creature-card:not(.is-card-loading) :is(.creature-card-artwork>img,.retro-card-cutout){filter:none}}

/* Evolution changes the borders, leaving the creature and printed text intact. */
:is(.creature-card,.creature-reader)[data-card-tier="base"] { --card-frame-filter: hue-rotate(46deg) saturate(.85); }
:is(.creature-card,.creature-reader)[data-card-tier="animated"] { --card-frame-filter: hue-rotate(55deg) saturate(.95) brightness(.58); }
:is(.creature-card,.creature-reader)[data-card-tier="depth"] { --card-frame-filter: none; }
.creature-card::before,
.creature-card .retro-card-portrait-frame,
.creature-card .retro-card-attack-frame { filter: var(--card-frame-filter, none); }

/* Independent surface alpha leaves the sheen, bevel and printed content intact. */
.retro-card-edge-wear{position:absolute;inset:0;z-index:9;border-radius:inherit;background:var(--card-edge-wear) center/100% 100% no-repeat;opacity:var(--card-edge-wear-opacity,1);pointer-events:none}
.retro-card-wear{position:absolute;inset:0;z-index:9;border-radius:inherit;background:var(--card-wear,url('./assets/cards/collection-retro-v1/card-wear-00.svg')) center/100% 100% no-repeat;opacity:var(--card-wear-opacity,1);pointer-events:none}
/* Fixed raking light for the DOM fallback; Pixi lights these same grooves as the card tilts. */
.retro-card-wear::before,.retro-card-wear::after{content:'';position:absolute;inset:0;border-radius:inherit;mask:var(--card-scratch-map) center/100% 100% no-repeat;pointer-events:none}
.retro-card-wear::before{background:#392b1b;opacity:calc(var(--card-scratch-depth,1)*.45);transform:translate(.12cqw,.12cqw)}
.retro-card-wear::after{background:#fff4d3;opacity:calc(var(--card-scratch-depth,1)*.4);transform:translate(-.1cqw,-.1cqw)}

/* The material is present with the normal card assets, before Pixi starts.
   Its palette filters only paper and metal; portraits and printed ink stay separate. */
.retro-card-material-paper{display:none}
.creature-card.has-card-finish{background:var(--card-finish-paper-color);color:var(--card-finish-ink)}
.creature-card.has-card-finish::after{background:none}
.has-card-finish>.retro-card-material-paper{display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#e6e2bd var(--retro-paper,url('./assets/cards/collection-retro-v1/sage-paper.webp')) center/100% auto;filter:var(--card-finish-paper-filter);pointer-events:none}
.has-card-finish .retro-card-ornament{filter:var(--card-frame-filter)}
.creature-card.has-card-finish :is(.creature-card-name,.retro-card-brand,.retro-card-subtitle,.retro-card-attack-figure,.retro-card-attack-description,.retro-card-more,.retro-card-footer){color:var(--card-finish-ink)}
.creature-card.has-card-finish :is(.creature-card-name,.retro-card-brand)::before,.creature-card.has-card-finish :is(.creature-card-name,.retro-card-brand)::after{color:var(--card-finish-ink)}
.has-card-finish .retro-card-brand::before,.has-card-finish .retro-card-brand::after{background-image:linear-gradient(var(--card-finish-ink),var(--card-finish-ink))}
.has-card-finish .retro-card-subtitle{background:none;isolation:isolate}
.has-card-finish .retro-card-subtitle::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--retro-rules,url('./assets/cards/collection-retro-v1/rules-and-ribbon.webp')) center/100% auto no-repeat;filter:var(--card-finish-paper-filter);pointer-events:none}
.has-card-finish .retro-card-ribbon-band{border:0;background:none}
.has-card-finish .retro-card-ribbon-band::before,.has-card-finish .retro-card-ribbon-band::after{content:'';position:absolute;inset:0;box-sizing:border-box;pointer-events:none}
.has-card-finish .retro-card-ribbon-band::before{background:#e6e2bd var(--retro-paper,url('./assets/cards/collection-retro-v1/sage-paper.webp')) center/100% auto;filter:var(--card-finish-paper-filter)}
.has-card-finish .retro-card-ribbon-band::after{border:1.8cqw solid transparent;border-image:var(--retro-frame,url('./assets/cards/collection-retro-v1/portrait-frame-4x5.webp')) 140/1.8cqw/0 stretch;filter:var(--card-frame-filter)}