/* GRIMVAULT COLLECTIBLES / v0.2 — iridescent foil + short, restrained creature movement.
   High quality art is used only as static WebP; short motion is CSS/JS, not video. */
:root {
  --electric: #c044ff;
  --mint: #61fff0;
  --hot: #ff2e90;
}
/* The gallery stays almost black so that the creatures themselves carry the color. */
.atmosphere {
  background:
    radial-gradient(ellipse at 70% 8%, #57116c3a, transparent 33%),
    radial-gradient(ellipse at 7% 70%, #022b3838, transparent 38%),
    radial-gradient(ellipse at 48% 62%, #13021d73, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 4px, #ffffff02 5px),
    #050408;
}
.hero {background:radial-gradient(ellipse at 82% 51%,#5c0b763e,transparent 49%),linear-gradient(90deg,#08060b,#0a0810)}
.hero-halo {
  background: conic-gradient(from 20deg,transparent,#a200ff59,#18ffd04d,#ff1d9f4f,transparent);
  animation: none;
  filter: blur(62px);
}
.brand-label em { filter:drop-shadow(0 2px 1px #000e) drop-shadow(0 0 18px #e2264752); }
.hero-lede b {color:#ee8cff}
.hero h1 strong {color:#ffe7c9;text-shadow:0 0 47px #fa00a078}
.btn-primary {background:linear-gradient(110deg,#ad0d68,#922dc9 50%,#2559a8);border-color:#ee88f5;box-shadow:inset 0 1px #fff6,0 0 24px #f52baf61}
.btn-primary:hover {background:linear-gradient(110deg,#c8248a,#a54bf1 50%,#3678c8)}

/* Physical acrylic + foil. Reflections are confined to the outer rim. */
.acrylic-shell {
  --mouse-x:50%; --mouse-y:50%; --tilt-x:0deg; --tilt-y:0deg;
  transform:perspective(920px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
  will-change:auto;
  background:linear-gradient(130deg,#fffdfd84 0%,#8cb4fd22 19%,#161320d4 53%,#f6d0ff88 100%);
  border-color:#dbdcffd8;
  box-shadow: inset 3px 4px 5px #fff6,inset -3px -3px 5px #f3ffff4f,0 24px 34px #000e,0 0 30px color-mix(in srgb,var(--foil-a),transparent 57%);
}
.acrylic-shell:after {
  inset:0;padding:6px;border-radius:inherit;
  background:none;box-shadow:inset 0 0 0 1px #e8fbff99;
  opacity:.28;mix-blend-mode:screen;
}
.collector-card {
  background:
    conic-gradient(from 25deg at 40% 35%,var(--foil-a),#181222 21%,var(--foil-b) 34%,#080411 49%,var(--foil-c) 68%,#09040f 81%,var(--foil-a) 100%);
  border-color:#f4bdfa;
  box-shadow:inset 0 0 0 2px #050308,inset 0 0 0 4px #effcff8a;
}
.card-artwork {
  background:radial-gradient(ellipse at 50% 50%,var(--foil-a),#13041b 60%,#050408 95%);
  border-color:#f6ccff;
  box-shadow:inset 0 0 17px #000b,0 0 15px color-mix(in srgb,var(--foil-a),transparent 53%);
}
.card-artwork:before,.card-artwork:after {content:none}
.card-artwork img {
  inset: -2% -3%;
  width:106%;height:104%;
  object-fit:cover;
  filter:saturate(1.24) contrast(1.16) brightness(1.04);
  transform:translate3d(0,0,0) scale(1);
  transform-origin:50% 46%;
  backface-visibility:hidden;
}
/* Keep the existing DOM/controller hooks, but never paint scratches, scan lines,
   vignettes, eye glows or sweeping foil across the original creature artwork. */
.glass-crack,.arcane-halo,.art-vignette,.eye-flash,.art-foiling {display:none}
/* Family-specific tiny eye glimmers pulse only while the card awakens. */
.card-artwork {--eye-x:51%;--eye-y:39%}
.art-bat {--eye-x:51%;--eye-y:53%}
.art-spider {--eye-x:55%;--eye-y:50%}
.art-eye {--eye-x:50%;--eye-y:43%}
.art-serpent {--eye-x:59%;--eye-y:33%}
.art-skull {--eye-x:57%;--eye-y:27%}
.art-wraith {--eye-x:52%;--eye-y:36%}
.eye-flash {
  position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse 11% 8% at var(--eye-x) var(--eye-y),#fffefa9c,#57fff98c 25%,transparent 90%);
  mix-blend-mode:screen;
}
@keyframes eye-gleam {0%,17%,70%,100%{opacity:0}28%,46%{opacity:.75}}
.card-awake .eye-flash {animation:eye-gleam 1180ms ease-in-out 1 both}

/* Legacy surface hooks remain available to the existing short-effect controllers. */
.art-vignette {
  position:absolute;z-index:3;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 35%,transparent 35%,#07000955 80%,#0009 100%);
}
.art-foiling {
  position:absolute;z-index:4;inset:-15% -65%;pointer-events:none;
  background:linear-gradient(108deg,transparent 37%,#fd68ff0a 43%,#f8ffff82 49%,#8effea4a 51%,transparent 61%);
  transform:translateX(-82%) rotate(8deg);
  mix-blend-mode:screen;
  opacity:0;
}
.card-flare {
  position:absolute;inset:0;z-index:8;padding:6px;pointer-events:none;border-radius:inherit;
  background:none;box-shadow:inset 0 0 0 2px #b9fff4;
  mix-blend-mode:screen;opacity:0;
}
.collector-card:after {content:none;animation:none}
.card-top b {color:#fdf4ff;text-shadow:0 0 13px #d600ff9e;font-size:15px}
.card-meta strong {color:#fff0ff;text-shadow:0 0 11px #f800c986}
.card-meta span {color:#74fff0}
.card-footer {border-top-color:#f4a9ffac}
.corner-screw{background:radial-gradient(circle at 30% 25%,#fff9c9,#d1a84d 42%,#7a4a08 82%,#f5ca68)}

/* A creature 'wakes up' for ~1.1 s and then rests. Never continuously thrashes. */
@keyframes creature-awaken {
  0% {transform:translate3d(0,0,0) scale(1);filter:saturate(1.24) contrast(1.16) brightness(1.04)}
  22% {transform:translate3d(0,-2px,0) scale(1.023) rotate(-.22deg);filter:saturate(1.42) contrast(1.23) brightness(1.12)}
  55% {transform:translate3d(1px,1px,0) scale(1.014) rotate(.20deg);filter:saturate(1.37) contrast(1.22) brightness(1.12)}
  100% {transform:translate3d(0,0,0) scale(1);filter:saturate(1.24) contrast(1.16) brightness(1.04)}
}
@keyframes foil-wake {
  0% {opacity:0;transform:translateX(-78%) rotate(8deg)}
  25%{opacity:.8}
  70%{opacity:.48}
  100%{opacity:0;transform:translateX(65%) rotate(8deg)}
}
@keyframes lens-wake {0%,100%{opacity:0}35%{opacity:.26}60%{opacity:.08}}
@keyframes acrylic-wake {0%,100%{filter:brightness(1)}30%{filter:brightness(1.08)}}
.card-awake .card-artwork img {animation:creature-awaken 1180ms ease-in-out 1 both}
.card-awake .art-foiling {animation:foil-wake 1180ms cubic-bezier(.2,.55,.4,1) 1 both}
.card-awake .card-flare {animation:lens-wake 1180ms ease-in-out 1 both}
.card-awake.acrylic-shell {animation:acrylic-wake 1180ms ease-in-out 1}
.hero-card-slot {animation:none;transform:rotate(-7deg)}
.hero-card-slot:hover .acrylic-shell,.modal-card-slot:hover .acrylic-shell {box-shadow:inset 3px 4px 5px #fff6,inset -3px -3px 5px #f3ffff4f,0 28px 39px #000e,0 0 43px color-mix(in srgb,var(--foil-b),transparent 35%)}

/* Wall thumbnails: one short rim glint per interaction, no image colour pulse.
   No persistent will-change or animation on the 1,000 idle positions. */
.mini-card {
  --mini-shadow:0 2px 6px #000a,0 0 0 1px #c9b3a94d;
  border-color:#714c81;background:#060209;
  transition:transform 260ms cubic-bezier(.2,.8,.2,1),box-shadow 260ms ease,border-color 260ms ease;
}
.mini-card.is-owned {--mini-shadow:0 0 0 1px #8bf2d6,0 0 8px #76ffe580}
.mini-inner {
  background:linear-gradient(140deg,var(--foil-c),#0a0710 23%,var(--foil-a) 61%,#160b22 94%);
}
.mini-inner:before {content:none}
.mini-inner img {object-fit:cover;object-position:center;width:100%;height:100%;padding:0;filter:contrast(1.14) saturate(1.3)}
.mini-card:after {
  inset:0;padding:2px;background:none;
  box-shadow:inset 0 0 0 1px #bffff2;opacity:0;
}
/* Neutralize the legacy hover on touch devices; focus remains keyboard-visible. */
.mini-card:hover {z-index:auto;transform:none;filter:none;box-shadow:var(--mini-shadow)}
.mini-card:focus-visible {
  z-index:3;transform:translateY(-1px) scale(1.05);filter:none;
  border-color:#c8f6eb;box-shadow:0 0 0 1px #c5a0d7,0 0 12px color-mix(in srgb,var(--foil-a),transparent 35%);
}
.mini-card:focus-visible:after {animation:mini-rim-glint 300ms ease-out 1}
@keyframes mini-rim-glint {
  0%,100% {opacity:0}
  40% {opacity:.9}
  70% {opacity:.35}
}
@keyframes mini-press {
  0%,100% {transform:none}
  40% {transform:scale(1.035)}
}
@media(hover:hover) and (pointer:fine) {
  .mini-card:hover {
    z-index:3;transform:translateY(-1px) scale(1.05);filter:none;
    border-color:#c8f6eb;box-shadow:0 0 0 1px #c5a0d7,0 0 12px color-mix(in srgb,var(--foil-a),transparent 35%);
  }
  .mini-card:hover:after {animation:mini-rim-glint 300ms ease-out 1}
}
@media(hover:none),(pointer:coarse) {
  .mini-card:active {
    z-index:3;border-color:#c8f6eb;filter:none;
    box-shadow:0 0 0 1px #c5a0d7,0 0 10px color-mix(in srgb,var(--foil-a),transparent 40%);
    animation:mini-press 300ms ease-out 1;
  }
  .mini-card:active:after {animation:mini-rim-glint 300ms ease-out 1}
}
.mini-index{background:linear-gradient(90deg,#240d33,#972fc3 43%,#180620);color:#ffe9ff}

/* Compact replay button for a deliberately short effect. */
.motion-button {
  cursor:pointer;min-height:35px;margin-top:15px;padding:0 13px;
  font:800 9px var(--body);letter-spacing:.15em;color:#e5b8ff;
  border:1px solid #a652c4;background:linear-gradient(120deg,#19091f,#401451);
  box-shadow:inset 0 0 8px #8924b33b,0 0 18px #d72fff24;
}
.motion-button:hover,.motion-button:focus-visible {color:#fff;background:#602076;border-color:#fb9aff}
.motion-button:focus-visible {outline:2px solid #8dffe7;outline-offset:3px}
.motion-note {display:block;margin-top:9px;color:#978b9c;font:700 8px var(--body);letter-spacing:.08em;text-align:center}
.modal-left {background:radial-gradient(ellipse at 50% 40%,#8628ba3b,#210d2a 42%,#08060e 78%)}
.modal-left:after {content:'';position:absolute;inset:9% 6%;pointer-events:none;z-index:0;border-radius:50%;background:radial-gradient(circle,#d023fa26,transparent 58%);filter:blur(20px)}
.modal-left > * {position:relative;z-index:1}
/* Entrance is a short reveal rather than a looping cinematic effect. */
@keyframes modal-reveal {from {opacity:.35;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.specimen-modal[open] .modal-card-slot {animation:modal-reveal 340ms ease-out 1 both}
@media(hover:none) {
  .hero-card-slot:hover .acrylic-shell,.modal-card-slot:hover .acrylic-shell {box-shadow:inset 3px 4px 5px #fff6,0 19px 34px #000d,0 0 35px color-mix(in srgb,var(--foil-a),transparent 70%)}
}
@media(max-width:690px) {
  .hero-card-slot {transform:rotate(-7deg) translateY(18px)}
  .motion-button {margin-top:12px}
  .mini-inner img {object-fit:cover}
}
@media(prefers-reduced-motion:reduce){
  .hero-card-slot,.card-awake .card-artwork img,.card-awake .art-foiling,.card-awake .card-flare,.card-awake.acrylic-shell,.specimen-modal[open] .modal-card-slot{animation:none!important}
  .acrylic-shell {transform:none!important;transition:none!important}
  .art-foiling,.card-flare,.eye-flash {opacity:0!important}
}

/* LIVING CARDS / every family in the open modal. The raster and canvas share one
   identical cover mapping. Intrinsic canvas size equals the source art, so cropped
   atlas patches stay aligned through responsive layout, object-fit cropping and
   device-pixel-ratio changes. #0014 (OCULARIS) keeps its delivered atlas. */
#modalCard .living-card .card-artwork > :is(img, .ocularis-canvas) {
  position:absolute;z-index:1;inset:-2% -3%;width:106%;height:104%;
  object-fit:cover;object-position:50% 50%;
  filter:saturate(1.24) contrast(1.16) brightness(1.04);
  transform:translate3d(0,0,0) scale(1);transform-origin:50% 46%;
  backface-visibility:hidden;animation:none;
}
#modalCard .living-card .ocularis-canvas {pointer-events:none}
#modalCard .living-card .ocularis-canvas[hidden] {display:none}
#modalCard .living-card .serpent-tongue-overlay {
  position:absolute;z-index:3;inset:-2% -3%;width:106%;height:104%;
  object-fit:cover;object-position:50% 50%;
  filter:saturate(1.24) contrast(1.16) brightness(1.04);
  transform:translate3d(0,0,0) scale(1);transform-origin:50% 46%;
  backface-visibility:hidden;pointer-events:none;animation:none;
}
#modalCard .living-card.ocularis-has-frame .card-artwork > img {opacity:0}
#modalCard .ocularis-card .eye-flash {display:none}
#modalCard .living-card .ocularis-acrylic-glint {
  position:absolute;z-index:7;inset:0;padding:6px;border-radius:inherit;pointer-events:none;
  background:none;box-shadow:inset 0 0 0 2px #d8b8ff;
  mix-blend-mode:screen;opacity:0;
  /* The controller still owns opacity/timing; its sweep cannot move this rim
     mask over the creature. Keep the clear centre fixed to the acrylic. */
  transform:none!important;
}
#modalCard .living-card.ocularis-playing {transition:none;will-change:transform}
#modalCard .ocularis-playing :is(.art-foiling,.ocularis-acrylic-glint,.card-flare) {will-change:transform,opacity}

/* Mask out the entire centre, not just a dark or transparent-tinted overlay.
   Unsupported masking falls back to the thin inset border shadows above. */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor) {
  .acrylic-shell:after,.card-flare,.mini-card:after,
  #modalCard .living-card .ocularis-acrylic-glint {
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
    background:linear-gradient(115deg,#91ffe8 0%,#b394ff 25%,#fff6f8 48%,#80d9ef 65%,#db9be5 85%,#91ffe8);
    box-shadow:none;
  }
  .acrylic-shell:after {
    background:radial-gradient(ellipse at var(--mouse-x) var(--mouse-y),#ecffff,transparent 72%);
  }
}
@media(prefers-reduced-motion:reduce) {
  #modalCard .living-card .ocularis-acrylic-glint {opacity:0!important}
  #modalCard .living-card .ocularis-canvas {display:none!important}
  #modalCard .living-card .serpent-tongue-overlay {display:none!important}
  #modalCard .living-card.ocularis-has-frame .card-artwork > img {opacity:1}
  .mini-card {transition:none}
  .mini-card:hover,.mini-card:focus-visible {transform:none}
  .mini-card:active,.mini-card:after {animation:none!important}
}

/* LIVING CARDS — all six families. Three shared layers per card:
   1) the atlas/reflection playback (canvas or rim glint, drawn by ocularis.js);
   2) ambient motion around the creature, masked so the face centre is never
      overlaid — only rim and corner regions receive light. Each family owns a
      preset (.living-ambient--<family>) with its own colours, density and pulse;
   3) a discreet hover response on the acrylic rim (tilt vars are shared). */
#modalCard .living-card .living-ambient {
  --living-mask-x:50%;--living-mask-y:52%;
  position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden;
  opacity:0;mix-blend-mode:screen;
  animation:living-enter 900ms ease-out 1 both;
  -webkit-mask:radial-gradient(68% 62% at var(--living-mask-x) var(--living-mask-y),transparent 0 58%,#000 92%);
  mask:radial-gradient(68% 62% at var(--living-mask-x) var(--living-mask-y),transparent 0 58%,#000 92%);
}
#modalCard .living-card .living-layer {position:absolute;pointer-events:none;border-radius:inherit}
#modalCard .living-card .living-energy {
  inset:-16%;opacity:.55;will-change:transform;
  animation:living-flow-a 23s ease-in-out infinite alternate;
}
#modalCard .living-card .living-particles {
  inset:-8%;opacity:.6;will-change:transform;background-repeat:no-repeat;
  animation:living-flow-b 31s ease-in-out infinite alternate;
}
#modalCard .living-card .living-glow {
  inset:5%;border-radius:8px;
  animation:living-breath var(--living-pulse,7.5s) ease-in-out infinite;
}
/* Preset OCULUS — the delivered green/cyan energy (#0014 and every eye card). */
#modalCard .living-card .living-ambient--eye {--living-mask-x:50%;--living-mask-y:52%}
#modalCard .living-ambient--eye .living-energy {
  background:
    radial-gradient(34% 30% at 16% 12%,#8b2bff5e,transparent 70%),
    radial-gradient(30% 26% at 86% 16%,#18e6d256,transparent 72%),
    radial-gradient(34% 28% at 8% 84%,#ff2e9052,transparent 72%),
    radial-gradient(28% 38% at 92% 82%,#5e6bff4d,transparent 72%),
    radial-gradient(22% 18% at 50% 3%,#70ffe14a,transparent 70%),
    radial-gradient(20% 26% at 3% 50%,#c46bff45,transparent 72%);
}
#modalCard .living-ambient--eye .living-particles {
  background-image:
    radial-gradient(1.7px 1.7px at 11% 20%,#bffff4d9,transparent 70%),
    radial-gradient(1.3px 1.3px at 24% 7%,#e3c2ffd9,transparent 70%),
    radial-gradient(1.5px 1.5px at 79% 10%,#9fffe0d0,transparent 70%),
    radial-gradient(1.2px 1.2px at 90% 30%,#ffb7e6d0,transparent 70%),
    radial-gradient(1.6px 1.6px at 6% 44%,#9fe8ffcc,transparent 70%),
    radial-gradient(1.3px 1.3px at 95% 64%,#d9b3ffcc,transparent 70%),
    radial-gradient(1.5px 1.5px at 14% 82%,#a2fff3cc,transparent 70%),
    radial-gradient(1.2px 1.2px at 84% 90%,#ffc4ecba,transparent 70%);
}
#modalCard .living-ambient--eye .living-glow {
  box-shadow:inset 0 0 34px #46d8ff3d,inset 0 0 70px #9a2bff30,inset 0 0 0 1px #bafff045;
}
/* Fine ambient refinement: violet-cyan haze breathing very lightly in the scenery zones
   (moss at the base and side bands), without touching the eye, the blink or the reflections. */
#modalCard .living-ambient--eye .living-energy::before {
  content:'';position:absolute;inset:-8% -5%;opacity:0;
  background:
    radial-gradient(26% 18% at 10% 88%,#9a2bff2c,transparent 78%),
    radial-gradient(22% 15% at 88% 84%,#46d8ff26,transparent 78%);
  animation:living-shimmer 17s ease-in-out infinite;
}
/* Preset CHIROPTERA — red energy, purple mist and small environmental pulses. */
#modalCard .living-card .living-ambient--bat {--living-mask-x:51%;--living-mask-y:53%}
#modalCard .living-ambient--bat .living-energy {
  opacity:.6;animation:living-flow-a 19s ease-in-out infinite alternate;
  background:
    radial-gradient(36% 30% at 14% 10%,#ff2b4d66,transparent 70%),
    radial-gradient(30% 26% at 88% 14%,#c0143c5c,transparent 72%),
    radial-gradient(34% 28% at 6% 86%,#ff5a3d52,transparent 72%),
    radial-gradient(28% 38% at 93% 84%,#8b102a58,transparent 72%),
    radial-gradient(22% 18% at 50% 2%,#ff806042,transparent 70%),
    radial-gradient(20% 26% at 3% 48%,#e01f4452,transparent 72%);
}
#modalCard .living-ambient--bat .living-particles {
  opacity:.7;animation:living-flow-b 26s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.8px 1.8px at 11% 22%,#ffd2b8d9,transparent 70%),
    radial-gradient(1.4px 1.4px at 26% 6%,#ff9d7ad0,transparent 70%),
    radial-gradient(1.6px 1.6px at 78% 12%,#ffb199d0,transparent 70%),
    radial-gradient(1.3px 1.3px at 91% 33%,#ff8a6acc,transparent 70%),
    radial-gradient(1.7px 1.7px at 5% 45%,#ffc4a0cc,transparent 70%),
    radial-gradient(1.3px 1.3px at 96% 66%,#ff9d7acc,transparent 70%),
    radial-gradient(1.5px 1.5px at 13% 84%,#ffd2b8cc,transparent 70%),
    radial-gradient(1.2px 1.2px at 85% 91%,#ffab8aba,transparent 70%);
}
#modalCard .living-ambient--bat .living-glow {
  --living-pulse:5.5s;
  box-shadow:inset 0 0 38px #ff2b4d40,inset 0 0 76px #a80f2e33,inset 0 0 0 1px #ff9b8445;
}
/* Purple mist, discreet: patches sliding down the side bands (outside the mask). */
#modalCard .living-ambient--bat::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(28% 16% at 4% 86%,#8b4bff26,transparent 80%),
    radial-gradient(24% 14% at 95% 88%,#9d6bff22,transparent 80%),
    radial-gradient(11% 28% at 3% 52%,#8b4bff20,transparent 80%);
  animation:living-mist-drift 39s ease-in-out infinite alternate;
  transform-origin:60% 90%;
}
/* Small environmental pulses: faint glows in the scenery corners. */
#modalCard .living-ambient--bat .living-energy::before {
  content:'';position:absolute;inset:-8% -5%;opacity:0;
  background:
    radial-gradient(20% 15% at 5% 88%,#c45aff33,transparent 76%),
    radial-gradient(17% 13% at 94% 90%,#ff5a7d2e,transparent 76%);
  animation:living-node-pulse 11s ease-in-out infinite;
}
/* Preset ARACHNIDA — red localized lighting on the scenery, sparse particles, dark atmosphere. */
#modalCard .living-card .living-ambient--spider {--living-mask-x:55%;--living-mask-y:50%}
#modalCard .living-ambient--spider .living-energy {
  opacity:.34;animation:living-flow-a 27s ease-in-out infinite alternate;
  background:
    radial-gradient(32% 28% at 12% 8%,#b7a9ff4d,transparent 72%),
    radial-gradient(28% 24% at 90% 12%,#9fffe042,transparent 72%),
    radial-gradient(32% 26% at 6% 88%,#d9c8ff45,transparent 72%),
    radial-gradient(28% 34% at 94% 88%,#8fd8ff42,transparent 72%),
    radial-gradient(18% 14% at 50% 2%,#cfe0ff38,transparent 70%);
}
#modalCard .living-ambient--spider .living-particles {
  opacity:.6;animation:living-flow-b 34s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.2px 1.2px at 9% 18%,#e8f6ffd9,transparent 70%),
    radial-gradient(1.3px 1.3px at 80% 8%,#dffcffd0,transparent 70%),
    radial-gradient(1.2px 1.2px at 4% 46%,#cfe8ffcc,transparent 70%),
    radial-gradient(1px 1px at 97% 62%,#e8f6ffcc,transparent 70%),
    radial-gradient(1.1px 1.1px at 84% 92%,#cfe0ffba,transparent 70%);
}
#modalCard .living-ambient--spider .living-glow {
  --living-pulse:9s;
  box-shadow:inset 0 0 30px #cfe6ff2b,inset 0 0 64px #9f8bff22,inset 0 0 0 1px #e8f6ff30;
}
/* Red localized lighting on the web/scenery (lit fringe zones), never on the spider's body. */
#modalCard .living-ambient--spider .living-energy::before {
  content:'';position:absolute;inset:-8% -5%;opacity:0;
  background:
    radial-gradient(18% 14% at 6% 80%,#ff2e4d33,transparent 76%),
    radial-gradient(16% 12% at 96% 84%,#ff2e4d30,transparent 76%),
    radial-gradient(26% 10% at 50% 97%,#ff2e4d26,transparent 76%);
  animation:living-node-pulse 12.5s ease-in-out infinite;
  animation-delay:-4s;
}
/* Preset SERPENTES — névoa verde, energia suave, pulsos localizados,
   camadas de profundidade e partículas ocasionais (nenhuma luz sobre a
   cabeça: todo elemento vive nas faixas inferiores e na borda esquerda,
   fora da máscara do rosto). */
/* Especificidade equalizada ao seletor base — sem isto, --living-mask-x/y do
   preset perde para o default declarado no bloco compartilhado. */
#modalCard .living-card .living-ambient--serpent {--living-mask-x:59%;--living-mask-y:33%}
#modalCard .living-ambient--serpent .living-energy {
  opacity:.5;animation:living-flow-a 29s ease-in-out infinite alternate;
  background:
    radial-gradient(42% 30% at 12% 10%,#2fae6a50,transparent 74%),
    radial-gradient(36% 26% at 92% 10%,#7fe08a38,transparent 74%),
    radial-gradient(44% 34% at 4% 88%,#1d7a5a4d,transparent 74%),
    radial-gradient(38% 40% at 96% 98%,#35c98a40,transparent 74%),
    radial-gradient(56% 22% at 26% 102%,#2fbd7442,transparent 76%),
    radial-gradient(64% 20% at 72% 106%,#9dffc82e,transparent 76%),
    radial-gradient(20% 18% at 8% 4%,#9dffc82e,transparent 72%);
}
/* Névoa contida: manchas grandes e muito suaves arrastando devagar
   (mais lentas que a energia — paralaxe de profundidade). */
#modalCard .living-ambient--serpent::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(52% 26% at 20% 102%,#2fbf7b26,transparent 78%),
    radial-gradient(58% 24% at 70% 106%,#35d09422,transparent 78%),
    radial-gradient(16% 34% at 2% 44%,#2fbf7b22,transparent 80%),
    radial-gradient(30% 16% at 93% 64%,#2fbf7b1c,transparent 80%);
  animation:serpent-drift 37s ease-in-out infinite alternate;
  transform-origin:74% 88%;
}
/* Pulsos de iluminação localizada no cenário escuro (não no corpo). */
#modalCard .living-ambient--serpent .living-energy::before {
  content:'';position:absolute;inset:-10% -6%;opacity:0;
  background:
    radial-gradient(30% 22% at 14% 84%,#43e89430,transparent 74%),
    radial-gradient(34% 14% at 66% 94%,#2fd07426,transparent 74%);
  animation:serpent-pulse 9.5s ease-in-out infinite;
}
/* Partículas ocasionais: conjuntos curtos que surgem sobem e somem,
   em janelas alternadas (nunca contínuas, nunca sobre a criatura). */
#modalCard .living-ambient--serpent .living-energy::after {
  content:'';position:absolute;inset:-8% -4%;opacity:0;
  background:
    radial-gradient(7px 7px at 10% 87%,#bfffd8cf,transparent 72%),
    radial-gradient(5px 5px at 25% 95%,#9dffc8c4,transparent 72%),
    radial-gradient(6px 6px at 79% 94%,#dffcebc9,transparent 72%),
    radial-gradient(5px 5px at 92% 84%,#bfffd8bd,transparent 72%),
    radial-gradient(5px 5px at 42% 99%,#dffcebc0,transparent 72%);
  animation:serpent-spores-a 14.5s ease-in-out infinite;
}
#modalCard .living-ambient--serpent .living-particles {
  opacity:.55;animation:living-flow-b 33s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 24%,#b8ffd8c4,transparent 70%),
    radial-gradient(1.2px 1.2px at 82% 10%,#d6ffe8c4,transparent 70%),
    radial-gradient(1.4px 1.4px at 6% 62%,#9dffc8ba,transparent 70%),
    radial-gradient(1.2px 1.2px at 94% 44%,#b8ffd8ba,transparent 70%),
    radial-gradient(1.3px 1.3px at 20% 88%,#d6ffe8ba,transparent 70%),
    radial-gradient(1.2px 1.2px at 76% 94%,#9dffc8ba,transparent 70%),
    radial-gradient(1.1px 1.1px at 33% 96%,#d6ffe8c4,transparent 70%),
    radial-gradient(1.2px 1.2px at 90% 72%,#b8ffd8ba,transparent 70%),
    radial-gradient(1px 1px at 16% 74%,#dffcebb4,transparent 70%),
    radial-gradient(1.1px 1.1px at 68% 98%,#9dffc8b4,transparent 70%);
}
/* Segundo grupo ocasional, em antifase com o primeiro. */
#modalCard .living-ambient--serpent::after {
  content:'';position:absolute;inset:0;opacity:0;
  background:
    radial-gradient(9px 9px at 14% 78%,#dffcebcf,transparent 70%),
    radial-gradient(7px 7px at 34% 92%,#bfffdbcf,transparent 70%),
    radial-gradient(9px 9px at 88% 90%,#dffcebcd,transparent 70%),
    radial-gradient(7px 7px at 58% 98%,#bfffdbbd,transparent 70%);
  animation:serpent-spores-b 21s ease-in-out infinite;
}
#modalCard .living-ambient--serpent .living-glow {
  --living-pulse:8.5s;
  box-shadow:inset 0 0 40px #35d07a35,inset 0 0 80px #1a8f4e2b,inset 0 0 0 1px #9dffc845;
}
@keyframes serpent-drift {from{transform:translate3d(-2.2%,1.4%,0) scale(1.04)}to{transform:translate3d(1.8%,-1.2%,0) scale(1.11)}}
@keyframes serpent-pulse {0%,100%{opacity:.1}38%{opacity:.34}55%{opacity:.2}74%{opacity:.28}}
@keyframes serpent-spores-a {0%,58%,100%{opacity:0;transform:translateY(1.6%)}66%{opacity:.55}76%{opacity:.3}84%{opacity:0;transform:translateY(-3.4%)}}
@keyframes serpent-spores-b {0%,30%,100%{opacity:0;transform:translateY(3.4%)}38%{opacity:.5}50%{opacity:.22}58%{opacity:0;transform:translateY(-2.6%)}}
/* Preset OSSUARY — luminous pulse, supernatural glow and localized spectral energy. */
#modalCard .living-card .living-ambient--skull {--living-mask-x:57%;--living-mask-y:27%}
#modalCard .living-ambient--skull .living-energy {
  opacity:.5;animation:living-flow-a 22s ease-in-out infinite alternate;
  background:
    radial-gradient(34% 30% at 13% 10%,#7fe8ff4a,transparent 72%),
    radial-gradient(30% 26% at 89% 12%,#b28cff45,transparent 72%),
    radial-gradient(34% 28% at 7% 86%,#9fe0ff42,transparent 72%),
    radial-gradient(30% 36% at 93% 86%,#d8a6ff3d,transparent 72%),
    radial-gradient(20% 16% at 50% 2%,#eaffff3d,transparent 70%);
}
#modalCard .living-ambient--skull .living-particles {
  opacity:.55;animation:living-flow-b 28s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%,#dffcffd0,transparent 70%),
    radial-gradient(1.2px 1.2px at 84% 9%,#e8e0ffd0,transparent 70%),
    radial-gradient(1.4px 1.4px at 5% 52%,#cfe8ffcc,transparent 70%),
    radial-gradient(1.2px 1.2px at 95% 62%,#dfd0ffcc,transparent 70%),
    radial-gradient(1.3px 1.3px at 16% 86%,#eaffffcc,transparent 70%),
    radial-gradient(1.2px 1.2px at 82% 92%,#cfe8ffba,transparent 70%);
}
/* Spectral energy localized in the scenery (green acid of the lower band), never on the creature. */
#modalCard .living-ambient--skull .living-energy::before {
  content:'';position:absolute;inset:-8% -5%;opacity:0;
  background:
    radial-gradient(18% 14% at 36% 84%,#7fe0d036,transparent 76%),
    radial-gradient(16% 12% at 78% 88%,#9dffd82e,transparent 76%),
    radial-gradient(16% 14% at 16% 90%,#6fe8ff30,transparent 76%);
  animation:living-node-pulse 12s ease-in-out infinite;
  animation-delay:-7s;
}
#modalCard .living-ambient--skull .living-glow {
  --living-pulse:5s;
  box-shadow:inset 0 0 44px #7fe8ff3d,inset 0 0 92px #b28cff30,inset 0 0 0 1px #d8fff055;
}
/* Preset SPECTRA — blue mist, ethereal glow and slow atmospheric movement. */
#modalCard .living-card .living-ambient--wraith {--living-mask-x:52%;--living-mask-y:36%}
#modalCard .living-ambient--wraith .living-energy {
  opacity:.55;animation:living-flow-a 25s ease-in-out infinite alternate;
  background:
    radial-gradient(42% 36% at 12% 12%,#6b8bff55,transparent 74%),
    radial-gradient(36% 32% at 90% 12%,#7fb3ff45,transparent 74%),
    radial-gradient(40% 36% at 6% 86%,#4b6bff4d,transparent 74%),
    radial-gradient(34% 40% at 94% 86%,#8fb5ff42,transparent 74%),
    radial-gradient(24% 18% at 50% 3%,#bfe0ff3d,transparent 72%);
}
#modalCard .living-ambient--wraith .living-particles {
  opacity:.7;animation:living-flow-b 36s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.7px 1.7px at 10% 24%,#c8dcffd9,transparent 70%),
    radial-gradient(1.4px 1.4px at 25% 8%,#a8c8ffd0,transparent 70%),
    radial-gradient(1.6px 1.6px at 78% 12%,#b8d4ffd0,transparent 70%),
    radial-gradient(1.3px 1.3px at 92% 34%,#c8dcffcc,transparent 70%),
    radial-gradient(1.5px 1.5px at 5% 48%,#a8c8ffcc,transparent 70%),
    radial-gradient(1.3px 1.3px at 96% 68%,#b8d4ffcc,transparent 70%),
    radial-gradient(1.5px 1.5px at 12% 84%,#c8dcffcc,transparent 70%),
    radial-gradient(1.2px 1.2px at 84% 92%,#a8c8ffba,transparent 70%);
}
/* Blue mist: large very soft patches dragging slower than the energy (depth in parallax). */
#modalCard .living-ambient--wraith::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(46% 24% at 18% 104%,#6b8bff22,transparent 80%),
    radial-gradient(50% 22% at 74% 106%,#7fb3ff1d,transparent 80%),
    radial-gradient(14% 26% at 2% 50%,#6b8bff1d,transparent 80%),
    radial-gradient(13% 24% at 98% 56%,#7fb3ff1a,transparent 80%);
  animation:living-mist-drift 45s ease-in-out infinite alternate;
  transform-origin:40% 88%;
}
/* Ethereal glow: breathing of faint blue light in the bottom band and side edges. */
#modalCard .living-ambient--wraith .living-energy::before {
  content:'';position:absolute;inset:-8% -5%;opacity:0;
  background:
    radial-gradient(24% 16% at 20% 92%,#9dc4ff30,transparent 78%),
    radial-gradient(22% 14% at 78% 94%,#b8d4ff28,transparent 78%);
  animation:living-node-pulse 13s ease-in-out infinite;
  animation-delay:-9s;
}
#modalCard .living-ambient--wraith .living-glow {
  --living-pulse:8s;
  box-shadow:inset 0 0 36px #7fa8ff3d,inset 0 0 72px #3d5ad42b,inset 0 0 0 1px #d8ecff45;
}
@keyframes living-enter {from{opacity:0}to{opacity:1}}
@keyframes living-flow-a {from{transform:rotate(-2.6deg) scale(1.05)}to{transform:rotate(2.6deg) scale(1.09)}}
@keyframes living-flow-b {from{transform:translate3d(-2.4%,1.8%,0) rotate(-1deg)}to{transform:translate3d(2.4%,-1.8%,0) rotate(1deg)}}
@keyframes living-breath {0%,100%{opacity:.34}50%{opacity:.6}}
/* Shared keyframes of the ambience finalization: slow haze drift (46s band),
   localized pulses (peak ~.8 sobre tintas ~.19 → efeito sutil) and fine haze for refinement. */
@keyframes living-mist-drift {from{transform:translate3d(-1.6%,1.2%,0) scale(1.05)}to{transform:translate3d(1.4%,-1%,0) scale(1.1)}}
@keyframes living-node-pulse {0%,100%{opacity:.05}34%{opacity:.8}52%{opacity:.4}72%{opacity:.62}}
@keyframes living-shimmer {0%,100%{opacity:.04}42%{opacity:.16}62%{opacity:.08}}
@media(hover:hover) and (pointer:fine) {
  #modalCard .living-card:after {transition:opacity 240ms ease}
  #modalCard .living-card:hover {
    box-shadow:inset 3px 4px 5px #fff6,inset -3px -3px 5px #f3ffff4f,0 24px 34px #000e,0 0 42px color-mix(in srgb,var(--foil-a),transparent 40%);
  }
  #modalCard .living-card:hover:after {opacity:.62}
  #modalCard .living-card:hover .living-energy {opacity:.72}
  #modalCard .living-card:hover .living-glow {animation-duration:5.5s}
}
@media(prefers-reduced-motion:reduce) {
  #modalCard .living-ambient {display:none!important}
}

/* The wall is an archive of sleeping positions; only local demo claims glow. */
.mini-card.is-available {
  border-color:#39343c;
  background:#050609;
  box-shadow:0 2px 6px #000c,0 0 0 1px #ffffff0a;
}
.mini-card.is-available .mini-inner {
  background:linear-gradient(155deg,#111218,#050609 62%,#0c0b10);
}
.mini-card.is-available .mini-inner img {
  filter:grayscale(.82) saturate(.18) brightness(.24) contrast(1.08);
  transition:filter 220ms ease;
}
.mini-card.is-available .mini-index {
  background:#09090deF;
  color:#d9d1cc;
  border-top:1px solid #6b62644d;
}
.mini-card.is-available:hover,
.mini-card.is-available:focus-visible {
  z-index:3;
  transform:translateY(-1px) scale(1.04);
  border-color:#8a748c;
  box-shadow:0 0 0 1px #c7a9c24d,0 0 13px #a64ad92e;
}
.mini-card.is-available:hover .mini-inner img,
.mini-card.is-available:focus-visible .mini-inner img {
  filter:grayscale(.56) saturate(.36) brightness(.4) contrast(1.08);
}
.mini-card.is-available:focus-visible {
  outline:2px solid #b9a1bf;
  outline-offset:2px;
}

.mini-card.is-demo-owned {
  border-color:#5aa890;
  box-shadow:0 0 0 1px #9cffd44d,0 0 12px #45e7bf40;
}
.mini-card.is-demo-owned .mini-inner {
  background:linear-gradient(140deg,var(--foil-c),#0a0710 23%,var(--foil-a) 61%,#160b22 94%);
}
.mini-card.is-demo-owned .mini-inner img {
  filter:saturate(1.22) contrast(1.08) brightness(1.04);
}
.mini-card.is-demo-owned .mini-index {
  background:linear-gradient(90deg,#164d45,#c3f9dc 48%,#164d45);
  color:#08110e;
}
.mini-card.is-demo-owned:after {
  background:linear-gradient(128deg,transparent 23%,#f6fff72b 35%,transparent 47%,transparent 68%,#d99cff21 78%,transparent 87%);
  box-shadow:inset 0 0 0 1px #a9ffe185;
  opacity:.55;
}
.mini-card.is-demo-owned:hover,
.mini-card.is-demo-owned:focus-visible {
  z-index:3;
  transform:translateY(-1px) scale(1.05);
  border-color:#bdffe2;
  box-shadow:0 0 0 1px #bdffe2a6,0 0 17px #5efad17a;
}
.mini-card.is-demo-owned:focus-visible {
  outline:2px solid #bdffe2;
  outline-offset:2px;
}
.mini-owned-flag {
  right:2px;
  top:2px;
  padding:1px 3px;
  border:1px solid #b6f8dd80;
  border-radius:2px;
  background:#07130fe8;
  color:#c8ffe7;
  font:800 6px/1.2 var(--body);
  letter-spacing:.04em;
  text-shadow:none;
}
.mini-index {font-size:clamp(7px,.7vw,10px)}

#collectionList.collection-list {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));
  align-items:stretch;
  gap:13px;
  max-height:min(56dvh,540px);
  padding:3px;
}
.collection-row.collection-card {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  aspect-ratio:.72;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--foil-a),#d9c1d7 48%);
  border-radius:4px;
  background:linear-gradient(155deg,#111018,#08080d 68%,#130d18);
  box-shadow:inset 0 0 0 1px #ffffff16,0 7px 22px #0009,0 0 13px color-mix(in srgb,var(--foil-b),transparent 76%);
  color:#f2e7ed;
  text-align:left;
  transition:border-color 220ms ease,box-shadow 220ms ease,transform 220ms ease;
}
.collection-row.collection-card:before {
  content:'';
  position:absolute;
  z-index:4;
  inset:3px;
  border:1px solid #fff3;
  border-radius:2px;
  pointer-events:none;
}
.collection-row.collection-card:after {
  content:'';
  position:absolute;
  z-index:3;
  inset:0;
  background:linear-gradient(125deg,transparent 29%,#fff8 39%,#b5fff23b 43%,transparent 49%,transparent 100%);
  opacity:0;
  pointer-events:none;
  transition:opacity 260ms ease;
}
.collection-card-art {
  position:relative;
  display:block;
  flex:1;
  min-height:0;
  overflow:hidden;
  background:#08070d;
}
.collection-card-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.12) contrast(1.05);
}
.collection-card-art:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#05050a32 0%,transparent 25%,transparent 58%,#07070bd9 100%);
  pointer-events:none;
}
.collection-card-number,
.collection-card-stamp {
  position:absolute;
  z-index:2;
  top:10px;
  padding:4px 6px;
  border:1px solid #f2e0c65c;
  background:#08090cce;
  color:#fff2dc;
  font:800 8px var(--display);
  letter-spacing:.08em;
}
.collection-card-number {left:10px}
.collection-card-stamp {
  right:10px;
  border-color:#9ef6d37a;
  color:#c6ffe3;
  font:800 7px var(--body);
}
.collection-card-glow {
  position:absolute;
  z-index:1;
  inset:0;
  background:radial-gradient(ellipse at 50% 43%,color-mix(in srgb,var(--foil-a),transparent 78%),transparent 66%);
  mix-blend-mode:screen;
  pointer-events:none;
}
.collection-card-info {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:66px;
  padding:9px 11px 10px;
  border-top:1px solid color-mix(in srgb,var(--foil-a),#e9d9e5 34%);
  background:linear-gradient(110deg,#100e15f5,#09090df7 60%,#15101af5);
}
.collection-card-info .collection-id {
  overflow:hidden;
  color:#f6e6ed;
  font:700 11px/1.25 var(--display);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.collection-card-info .collection-name {
  color:#bbaab9;
  font:700 8px var(--body);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.collection-card-owner {
  overflow:hidden;
  color:#bdffe2;
  font:700 9px var(--body);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.collection-card-proof {
  color:#90838f;
  font:700 7px var(--body);
  letter-spacing:.04em;
}
.collection-row.collection-card:hover,
.collection-row.collection-card:focus-visible,
.collection-row.collection-card:active {
  z-index:5;
  transform:translateY(-2px);
  border-color:#c8ffe4;
  background:linear-gradient(155deg,#17131f,#08080d 68%,#17101e);
  box-shadow:inset 0 0 0 1px #ffffff2b,0 10px 28px #000c,0 0 22px color-mix(in srgb,var(--foil-b),transparent 56%);
}
.collection-row.collection-card:hover:after,
.collection-row.collection-card:focus-visible:after,
.collection-row.collection-card:active:after {opacity:.28}
.collection-row.collection-card:focus-visible {
  outline:2px solid #bdffe2;
  outline-offset:3px;
}
.collection-blank {grid-column:1/-1}

@media(hover:none),(pointer:coarse) {
  .collection-row.collection-card:active {transform:scale(.99)}
}
@media(prefers-reduced-motion:reduce) {
  .mini-card.is-available .mini-inner img,
  .collection-row.collection-card {transition:none}
  .mini-card.is-available:hover,
  .mini-card.is-available:focus-visible,
  .mini-card.is-demo-owned:hover,
  .mini-card.is-demo-owned:focus-visible,
  .collection-row.collection-card:hover,
  .collection-row.collection-card:focus-visible,
  .collection-row.collection-card:active {transform:none}
  .collection-row.collection-card:after {transition:none}
}

/* Public family samples are static until focus/hover and open their real
   modal; no background atlas or animation is mounted for all six at once. */
.public-showcase {padding:clamp(38px,5vw,72px) 0;border-bottom:1px solid var(--line)}
.showcase-intro {max-width:760px;color:#a9a1ac;font-size:12px;line-height:1.8;margin:0 0 24px}
.showcase-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(9px,1.4vw,20px)}
.showcase-card {
  min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:13px 9px 12px;border:1px solid #59455d;background:linear-gradient(155deg,#14101a,#08080d 70%);
  color:inherit;text-align:left;transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}
.showcase-card:hover,.showcase-card:focus-visible {
  z-index:2;transform:translateY(-2px);border-color:#bba1c7;
  box-shadow:0 0 0 1px #d7b4e357,0 0 20px #a44bd22a;
}
.showcase-stamp {
  align-self:stretch;color:#ceb2d3;text-align:center;font:800 8px var(--body);
  letter-spacing:.16em
}
.showcase-art {width:min(100%,230px);position:relative;display:block}
.showcase-art .acrylic-shell {width:100%;transform:none}
.showcase-art .card-artwork:after {
  content:"";position:absolute;z-index:6;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 80%,var(--foil-b),transparent 65%);
  mix-blend-mode:screen;transition:opacity 220ms ease
}
.showcase-card:hover .card-artwork:after,.showcase-card:focus-visible .card-artwork:after {opacity:.16}
.showcase-caption {align-self:stretch;display:flex;flex-direction:column;gap:2px}
.showcase-caption b {font:700 11px var(--display);letter-spacing:.12em;color:#e8d8c9}
.showcase-caption span {font:700 7px var(--body);letter-spacing:.08em;color:#998e9c}
.family-preview-control {margin:18px 0}
.family-preview-control select {
  width:100%;min-height:44px;padding:0 12px;border:1px solid #74566d;
  background:#100e15;color:#f0e6eb;border-radius:0
}
.family-preview-control .input-hint {margin:7px 0 0}
.family-preview-control .input-hint.is-preview-only {color:#e5b778}
#claimButton:disabled {cursor:not-allowed;opacity:.45;transform:none;box-shadow:none}
@media(max-width:900px) {.showcase-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px) {
  .showcase-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .showcase-card {padding:10px 7px}
  .showcase-art .card-top {gap:2px;padding-inline:2px}
  .showcase-art .card-top b {font-size:clamp(9px,3vw,12px)}
  .showcase-art .card-top span {font-size:clamp(5px,1.5vw,6px);letter-spacing:.04em}
}
@media(prefers-reduced-motion:reduce) {
  .showcase-card,.showcase-art .card-artwork:after {transition:none}
  .showcase-card:hover,.showcase-card:focus-visible {transform:none}
}

/* Commercial Presentation V1: product statement highlight, purchase
   explainer near the price and per-family resource seals. The seals state
   only what is confirmed in the browser: BAT/EYE blink, SERPENT tongue and
   the holographic ambience that already runs for every family. */
.hero-highlight {
  display:inline-flex;flex-direction:column;gap:3px;margin:0 0 28px;padding:11px 16px 12px;
  border:1px solid #8f6b4e80;background:linear-gradient(120deg,#1b131cbf,#0f0c13bf)
}
.hero-highlight b {font:700 12px var(--display);letter-spacing:.1em;color:#e5b778}
.hero-highlight span {font:700 10px var(--body);letter-spacing:.14em;color:#f1e7de}
.purchase-explainer {margin:0 0 24px;padding:12px 14px;border:1px solid #8f748050;background:#130f17}
.purchase-explainer p {margin:0;color:#b7a8b2;font-size:11px;line-height:1.75}
.purchase-explainer .purchase-explainer-title {
  margin:0 0 6px;font:800 9px var(--body);letter-spacing:.16em;color:#e5b778
}
.showcase-caption .showcase-seal {
  align-self:flex-start;margin-top:5px;padding:3px 7px;border:1px solid #8d63a0;
  color:#dcb9ec;letter-spacing:.13em
}
.showcase-caption .showcase-seal.is-motion {border-color:#9a6b46;color:#e8c08e}
.showcase-caption .showcase-resource {letter-spacing:.04em;color:#8d8492;line-height:1.5}
@media(max-width:520px) {
  .hero-highlight {padding:9px 12px 10px}
  .hero-highlight span {letter-spacing:.1em}
  .showcase-caption .showcase-seal {padding:2px 6px;letter-spacing:.08em}
}