/* Foil lives underneath the live type and symbols, never on top of them. */
[data-holo]{isolation:isolate;touch-action:pan-y pinch-zoom}
[data-holo]>.holo-surface{position:absolute;inset:0;z-index:0;border-radius:inherit;background-size:100% 100%;pointer-events:none;overflow:hidden}
.holo-surface>canvas{display:block;width:100%;height:100%}
[data-holo]>:not(.holo-surface){position:relative;z-index:2}
.collectible[data-holo]::after,.showcase-card[data-holo]::after{inset:6px;z-index:1;border-radius:7px;background:none;border:1px solid #fff6;box-shadow:0 0 0 1px #23352e12}
.collectible.rarity-N[data-holo]::after,.collectible.rarity-R[data-holo]::after{content:"";position:absolute;pointer-events:none}
.collectible.rarity-N[data-holo]::after{border-color:#fff3}
.collectible.rarity-SSR[data-holo]::after,.front-card[data-holo]::after{border:1px solid #fff2b6;box-shadow:0 0 0 2px #b3875938,inset 0 0 0 1px #fff6}
.collectible[data-holo]{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.collectible[data-holo]:hover{filter:none}
.holo-active{will-change:transform}
.card-symbol,.showcase-emblem,.card-art{transform:translate(var(--subject-x,0px),var(--subject-y,0px)) scale(var(--subject-scale,1));filter:drop-shadow(var(--subject-shadow,0px 0px 0px transparent))}
[data-holo]:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
.holo-hint{color:var(--muted);font-size:10px;margin:0 0 18px;letter-spacing:.4px}
.detail-layout>.collectible[data-holo]{cursor:grab}
[data-art="openai"]{--art-background:url('./assets/cards/openai-background.webp')}
[data-art="claude"]{--art-background:url('./assets/cards/claude-background.webp')}
[data-art="gemini"]{--art-background:url('./assets/cards/gemini-background.webp')}
.art-card{background:var(--art-background) center/cover;color:#fff3df;border-color:#b9baa270}
.art-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#050b0c85,transparent 23%,transparent 50%,#090c13d9 77%,#090c13f5)}
.art-card>.card-art{position:absolute;inset:8% 0 -1%;z-index:1;pointer-events:none;transform-origin:50% 45%}
.card-art img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.card-art.is-pair img{position:absolute;width:72%;height:90%;top:0;left:-9%;object-fit:contain}
.card-art.is-pair img+img{left:37%;top:8%;height:86%}
.preview-symbol{overflow:hidden;background:#29342d}
.preview-symbol img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.art-card>:not(.holo-surface):not(.card-art):not(.art-title):not(.rarity-frame):not(.rarity-fx){position:relative;z-index:3}
.art-card .card-name{margin-top:0;color:#fff8e9;text-shadow:0 1px 8px #0008}
.art-card .card-tagline{color:#d7d9d6}
.art-card .card-bottom,.art-card .showcase-bottom{border-color:#e4d9b536;color:#c4cabd}
.art-card .art-title{position:relative;margin-top:auto;margin-bottom:4px;z-index:3;font-size:8px;letter-spacing:2px;color:#f1dfb8;text-shadow:0 1px 6px #000}
.art-card .rarity-label,.art-card .showcase-top>span{color:#fff1bb}
.showcase-card.art-card:not(.front-card)>strong{margin-top:auto}
.showcase-card.art-card small{font-size:7px;margin-top:7px;letter-spacing:.7px;color:#e2d8c2}
.art-card .showcase-caption{margin-top:auto;margin-bottom:5px;font-size:8px;letter-spacing:1px;color:#e2d8c2}
.art-card .showcase-bottom{margin-top:12px}
.art-preview-section{padding-top:32px}
.art-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:970px;margin:24px auto 0}
.art-preview-grid .collectible{padding:22px;border-radius:17px}
.art-preview-grid .card-name{font-size:28px}
.art-preview-grid .card-tagline{font-size:12px;min-height:20px}
.art-preview-grid .card-meta{font-size:10px}
.art-preview-grid .card-bottom{font-size:10px;padding-top:13px}
.art-preview-grid .art-title{font-size:10px}
.art-preview-grid.library-expanded{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:none}
.library-expanded .collectible{padding:15px;border-radius:12px}
.library-expanded .card-name{font-size:20px}
.library-expanded .card-meta,.library-expanded .card-bottom{font-size:8px}
.library-expanded .card-tagline{font-size:9px;min-height:30px}
.library-expanded .art-title{font-size:8px}
.news-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:24px 0 42px}
.news-card.art-card::before{background:linear-gradient(#050b0c8c,transparent 24%,#090c1320 35%,#090c13e8 61%,#090c13)}
.news-card.art-card .art-title{position:absolute;top:12%;margin:0;font-size:8px;letter-spacing:1px}
.news-card.art-card .card-name{margin-top:auto}.detail-layout>.news-card.art-card .card-name{font-size:21px}
.art-note{color:var(--muted);font-size:10px;text-align:center;margin:20px 0 0}
.detail-dialog:has(.art-card){width:min(900px,94vw)}
.detail-layout:has(>.art-card){grid-template-columns:300px 1fr}
.detail-layout>.art-card{width:300px}
.detail-layout>.art-card .card-name{font-size:26px}
@media(max-width:760px){.showcase-card.art-card small{font-size:5px;letter-spacing:0}.art-card .showcase-caption{font-size:5px;letter-spacing:0;margin-bottom:2px}.art-card .showcase-bottom{margin-top:6px}.art-preview-grid{grid-template-columns:1fr;max-width:290px;gap:24px}.art-preview-grid .collectible{padding:20px}.art-preview-grid .card-name{font-size:27px}.art-preview-section>.holo-hint{max-width:290px;line-height:1.8}.art-preview-section .section-heading h2{font-size:18px}}
@media(max-width:760px){.detail-layout:has(>.art-card){grid-template-columns:1fr}.detail-layout>.art-card{width:min(240px,100%)}.detail-layout>.art-card .card-name{font-size:24px}}
@media(max-width:1050px){.art-preview-grid.library-expanded{grid-template-columns:repeat(4,minmax(0,1fr))}.news-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.art-preview-grid.library-expanded,.news-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:20px 13px}.library-expanded .collectible{padding:13px}.library-expanded .card-name{font-size:17px}.library-expanded .card-tagline{font-size:9px}.library-expanded .card-meta,.library-expanded .card-bottom{font-size:7px}.library-expanded .art-title{font-size:7px;letter-spacing:1px}.art-preview-section .section-heading{align-items:center}.art-preview-section .secondary-button{font-size:10px;padding:10px 12px}.detail-layout>.news-card.art-card .card-name{font-size:17px}.news-card-grid .card-meta{font-size:7px;letter-spacing:.5px}.news-card-grid .rarity-label{font-size:9px}.news-card-grid .card-name{font-size:12px}}
@media(prefers-reduced-motion:reduce){.collectible[data-holo],.card-symbol,.showcase-emblem,.card-art{transform:none;filter:none}.holo-hint{display:none}}