/* Artwork stays separate from the interactive collection slots. */
.card-art,.frame-art{position:absolute;inset:0;display:block;pointer-events:none;user-select:none}
.card-art{z-index:0;overflow:hidden;border-radius:inherit;color:var(--cosmetic-band,#aa9170)}
.card-art>svg{display:block;width:100%;height:100%}
/* Grow with the desktop width, while leaving room for wrapped collection slots. */
.room-overview{container-type:inline-size}
.room-overview>.room-stage.letter-display{display:flex;flex-direction:column;min-height:calc(100cqw * 320 / 600)}
.letter-display>.display-line{flex:1}
.room-stage.letter-display.cosmetic-card{--card-muted:var(--cosmetic-ink);background:var(--cosmetic-background);border-radius:12px}
.room-stage.letter-display.cosmetic-frame{overflow:visible;margin-block:24px 20px;padding:26px 30px 22px}
.room-stage.letter-display.cosmetic-frame>.display-card-heading{margin:8px 22px 0}
.letter-display.cosmetic-card>.display-card-heading,.letter-display.cosmetic-card>.display-line{position:relative;z-index:1}
.letter-display.cosmetic-card>.display-card-heading{width:fit-content;min-width:128px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--cosmetic-ink) 16%,transparent);border-radius:4px;background:color-mix(in srgb,var(--cosmetic-band) 12%,transparent);backdrop-filter:blur(12px);gap:18px}
.cosmetic-card .display-card-label,.cosmetic-card .display-card-count{color:var(--cosmetic-ink)}
.cosmetic-card .letter-slot.empty{border-color:color-mix(in srgb,var(--cosmetic-ink) 35%,transparent);background:color-mix(in srgb,var(--cosmetic-band) 10%,transparent)}
.cosmetic-card button.letter-slot:hover{background:color-mix(in srgb,var(--cosmetic-band) 25%,transparent)}
.card-foil{position:absolute;inset:-80%;display:block;opacity:0;background:linear-gradient(110deg,transparent 40%,#fff6 48%,#fff9 50%,#fff3 52%,transparent 61%);transform:translateX(-45%) rotate(-8deg);mix-blend-mode:soft-light}
.card-art.art-epic .card-foil{opacity:.12;transform:translateX(18%) rotate(-8deg)}
.card-art.art-unique .card-foil{opacity:.2;transform:translateX(12%) rotate(-8deg)}
.letter-display .art-unique .card-foil,.draw-reward-art .art-unique .card-foil{animation:cosmetic-foil 9s ease-in-out infinite}
.letter-display .scene-drift{transform-origin:center;animation:cosmetic-drift 10s ease-in-out infinite alternate}
.letter-display .scene-radiance{animation:cosmetic-radiance 5s ease-in-out infinite alternate}
.letter-display .scene-iridescence{animation:cosmetic-radiance 7s ease-in-out infinite alternate}

/* Continuous rails and their relief share one scale, including in thumbnails. */
.room-stage.letter-display.cosmetic-frame,.passport.cosmetic-frame,.cosmetic-swatch.cosmetic-preview.frame-preview{container-type:inline-size;border:1px solid color-mix(in srgb,var(--frame-band) 70%,#16252e)}
.letter-display.cosmetic-frame::after,.passport.cosmetic-frame::after,.cosmetic-swatch.cosmetic-preview.frame-preview::after{display:none}
.frame-art{--relief-metal:var(--frame-band,#ac9876);--relief-light:color-mix(in srgb,var(--relief-metal) 30%,#fff8e5);--relief-deep:color-mix(in srgb,var(--relief-metal) 50%,#16252e);--relief-gem:color-mix(in srgb,var(--relief-metal) 80%,#fff);--relief-size:clamp(12px,20cqw,64px);--frame-rail:calc(var(--relief-size)*.1875);z-index:3;color:var(--relief-metal);filter:drop-shadow(0 1px .6px #09191d50)}
.frame-art::before{content:"";position:absolute;inset:0;padding:var(--frame-rail);border-radius:calc(var(--relief-size)*.15625);background:var(--relief-metal);box-shadow:inset 0 1px 0 var(--relief-light),inset 0 -1px 0 var(--relief-deep);-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}
.frame-art::after{content:"";position:absolute;inset:var(--frame-rail);border:1px solid var(--relief-deep);border-radius:calc(var(--relief-size)*.18);opacity:.4;z-index:-1}
.frame-corner{position:absolute;display:block;width:var(--relief-size);height:var(--relief-size);overflow:visible}
.corner-0{left:0;top:0}
.corner-1{right:0;top:0;transform:scaleX(-1)}
.corner-2{right:0;bottom:0;transform:scale(-1)}
.corner-3{left:0;bottom:0;transform:scaleY(-1)}
.frame-crest{position:absolute;left:50%;top:calc(var(--relief-size)*-.405);width:calc(var(--relief-size)*1.8);height:auto;transform:translateX(-50%);overflow:visible}
.frame-rail-art{position:absolute;left:var(--relief-size);width:calc(100% - var(--relief-size)*2);height:var(--frame-rail);overflow:visible}
.frame-rail-art.edge-0{top:0}
.frame-rail-art.edge-1{bottom:0;transform:rotate(180deg)}
.frame-art-stand-stone{--relief-metal:#879391;--relief-light:#bec9c1;--relief-gem:#aab5aa}
.frame-art-stand-dark{--relief-metal:#8a684c;--relief-light:#bf9e77;--relief-deep:#4d392c;--relief-gem:#a58057}
.frame-art-stand-clay{--relief-metal:#b47d64;--relief-light:#e0b393;--relief-deep:#794f3e}
.frame-art-stand-chalk{--relief-metal:#d7d7c8;--relief-light:#faf7e9;--relief-deep:#989d8a}
.frame-art-stand-copper{--relief-metal:#ad8061;--relief-light:#e7bd96;--relief-gem:#c79875}
.frame-art-stand-sage{--relief-metal:#85947a;--relief-light:#b6c3a1;--relief-deep:#4f6146}
.frame-art-stand-silver{--relief-metal:#a4b0bb;--relief-light:#eef1ea;--relief-gem:#8298aa}
.frame-art-stand-rose{--relief-metal:#ba8c85;--relief-light:#edd0bc;--relief-gem:#d9aaa0}
.frame-art-stand-jade{--relief-metal:#568f79;--relief-light:#b7d5b3;--relief-gem:#81b59a}
.frame-art-stand-cobalt{--relief-metal:#406a91;--relief-light:#b0d0dc;--relief-gem:#6593b4}
.frame-art-stand-amber{--relief-metal:#b58845;--relief-light:#f4d494;--relief-gem:#e0ac55;--relief-deep:#805227}
.frame-art-stand-ivory{--relief-metal:#c6ba91;--relief-light:#f8ebc7;--relief-deep:#8e7f59}
.frame-art-stand-gold,.frame-art-border-gold{--relief-metal:#b69851;--relief-light:#f4dda0;--relief-gem:#e5c368;--relief-deep:#765f33}
.frame-art-stand-glacier{--relief-metal:#7eb7c4;--relief-light:#e4fcff;--relief-deep:#467c91;--relief-gem:#b9edf8}
.frame-art-stand-amethyst{--relief-metal:#8c729e;--relief-light:#dbc3f2;--relief-deep:#4e3b64;--relief-gem:#b69bd0}
.frame-art-stand-obsidian{--relief-metal:#3c4c58;--relief-light:#95a7b3;--relief-deep:#1c2832;--relief-gem:#687a88}
.frame-art-stand-prism{--relief-metal:#a39aba;--relief-light:#eaf4f4;--relief-deep:#616780;--relief-gem:#9dc8ce}
.frame-art-stand-seraph{--relief-metal:#c6bfa8;--relief-light:#fff6da;--relief-deep:#8b8068;--relief-gem:#e9dec2}
.frame-art-stand-imperial{--relief-metal:#b79958;--relief-light:#f2dc9c;--relief-deep:#746045;--relief-gem:#bfa263}
.frame-art-stand-dragon{--relief-metal:#617f6d;--relief-light:#c2cca0;--relief-deep:#364c45;--relief-gem:#86aa82}
.frame-art-stand-starlight{--relief-metal:#677d99;--relief-light:#d7e1ea;--relief-deep:#3a4d66}
.frame-art-stand-infinity{--relief-metal:#9990b2;--relief-light:#dfd6ed;--relief-deep:#625577}
.frame-art-stand-moonstone{--relief-metal:#9facbe;--relief-light:#f6f6ff;--relief-gem:#d0d8e3}

/* Small swatches retain the joined silhouette, with quiet, legible inlays. */
.cosmetic-swatch.cosmetic-preview{border-radius:5px}
.cosmetic-swatch.cosmetic-preview.frame-preview{overflow:visible;background:radial-gradient(ellipse at 50% 42%,#fcf8e9,#ddd7c2);border-radius:4px}
.cosmetic-swatch.cosmetic-preview>.card-art{color:var(--cosmetic-band);opacity:1;text-shadow:none}
.cosmetic-swatch.cosmetic-preview.frame-preview>.frame-art{position:absolute;z-index:3;color:var(--frame-band);opacity:1;text-shadow:none}
.cosmetic-swatch.cosmetic-preview>.swatch-mark{position:relative;z-index:1;font:inherit;color:var(--cosmetic-ink);opacity:.44;text-shadow:0 1px 2px #ffffff40}
.cosmetic-swatch.frame-preview>.swatch-mark{color:#7d816b;opacity:.65;font-size:.8em}
.cosmetic-swatch .card-art.art-epic .card-foil,.cosmetic-swatch .card-art.art-unique .card-foil{opacity:.13}
@container (max-width:96px){
  .frame-art .relief-fine,.frame-art>.frame-crest,.frame-art>.frame-rail-art{display:none}
  .frame-art{filter:none}
  .frame-art::after{border-width:.5px;opacity:.25}
}
.collection-piece>.cosmetic-swatch.cosmetic-preview{width:64px;max-width:88%;margin:12px 0}
.cosmetic-choice>.cosmetic-swatch.cosmetic-preview{margin:5px 2px}
.draw-reward-art>.cosmetic-swatch.cosmetic-preview{width:248px;max-width:86%;min-height:160px;margin:12px 0 8px;font-size:48px}
.draw-reward-art>.cosmetic-swatch .card-art{border-radius:4px}
.draw-reward-art>.cosmetic-swatch .swatch-mark{font-size:36px;opacity:.28}
.passport.cosmetic-frame{overflow:visible;margin-top:30px;padding:30px}
@keyframes cosmetic-foil{0%,18%{opacity:0;transform:translateX(-45%) rotate(-8deg)}45%,58%{opacity:.32}78%,100%{opacity:0;transform:translateX(45%) rotate(-8deg)}}
@keyframes cosmetic-drift{from{transform:translateY(-5px) scale(1.02);opacity:.8}to{transform:translateY(5px) scale(1.06);opacity:1}}
@keyframes cosmetic-radiance{from{opacity:.65}to{opacity:1}}
@keyframes cosmetic-glint{0%,20%{opacity:.3}70%,100%{opacity:1}}
@media(max-width:360px){
  .room-stage.letter-display.cosmetic-frame{padding:25px 22px 20px}
  .collection-piece>.cosmetic-swatch.cosmetic-preview{width:56px}
}
@media(prefers-reduced-motion:reduce){
  .letter-display .card-art .card-foil,.draw-reward-art .card-art .card-foil,.letter-display .scene-drift,.letter-display .scene-radiance,.letter-display .scene-iridescence,.letter-display .relief-glint,.draw-reward-art .relief-glint{animation:none}
}