/* Card V3 — full-bleed collectible cards. Foil and glare exist only in detail view. */
:root{--r5:#f2efff;--r6:#b5e99f}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --spin2{syntax:"<angle>";inherits:false;initial-value:0deg}
.card-v3{--card-radius:8.208955cqi;--px:35%;--py:25%;--pos:30%;--rx:0deg;--ry:0deg;--o:0;--foil-angle:120deg;--hue:0deg;--ac:#c9cdd6;--ac-2:#6a6f7a;--bleed:transparent;--neb-1:#787e8c59;--neb-2:#464a5466;--f1:#ffffff59;--f2:#fff3;--f3:#ffffff4d;--f4:#ffffff38;--idle:.16;--peak:.7;--bright:1.15;--sat:1.3;--grain:1.35;--g-idle:.25;--g-peak:.6;container-type:inline-size;position:relative;display:block;width:100%;max-width:268px;aspect-ratio:5/7;padding:0;border:0;border-radius:8.209% / 5.863%;background:none;overflow:visible;text-align:left;perspective:800px;isolation:isolate}
.grid .card-v3{max-width:none}.card-v3:hover{transform:translateY(-5px)}
.card-v3 .card__tilt{position:absolute;inset:0;display:block;border-radius:var(--card-radius);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform;transition:transform .22s ease;box-shadow:0 1px 1px #0009,0 10px 20px -8px #000b,0 30px 60px -20px #000e,0 0 60px -20px var(--bleed)}
.card-v3 .card__face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:6%;border-radius:var(--card-radius);overflow:hidden;background:#0a0b10;color:#fff;text-align:left}
.card-v3 .card__face::before{content:"";position:absolute;inset:0;z-index:6;padding:1px;border-radius:var(--card-radius);pointer-events:none;background:linear-gradient(160deg,var(--ac),#ffffff59 30%,var(--ac-2) 60%,var(--ac));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
.card-v3 .card__art{position:absolute;inset:0;z-index:0;display:grid;place-items:center;overflow:hidden;font-size:38cqi;filter:none;background:radial-gradient(1px 1px at 18% 22%,#ffffffe6 50%,transparent 51%),radial-gradient(1px 1px at 72% 14%,#ffffffb3 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 46%,#ffffffd9 50%,transparent 51%),radial-gradient(1px 1px at 36% 58%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 10% 70%,#ffffff80 50%,transparent 51%),radial-gradient(70% 45% at 70% 30%,var(--neb-1),transparent 70%),radial-gradient(80% 50% at 20% 75%,var(--neb-2),transparent 70%),linear-gradient(180deg,#0b0d18,#05060c)}
.card-v3 .card__art::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#00000073 0%,transparent 28%),linear-gradient(0deg,#05060af5 0%,#05060abf 30%,transparent 58%);pointer-events:none}
.card-v3 .card__art .card-image{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border-radius:0;background:transparent;object-fit:cover;z-index:1}.card-v3 .card__art .art-fallback{position:absolute;inset:0;display:grid;place-items:center;z-index:0;filter:drop-shadow(0 16px 20px #000a)}
.card-v3 .card__top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:6px}.card-v3 .card-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid #ffffff24;border-radius:999px;background:#ffffff14;color:#fff;font:600 clamp(6px,3.7cqi,10px)/1 'DM Sans',sans-serif;letter-spacing:.14em;white-space:nowrap;backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)}
.card-v3 .card-chip--rarity{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 45%,transparent)}.card-v3 .card-chip--rarity::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}.card-v3 .card-chip--type{font-family:'Noto Sans KR',sans-serif;font-size:clamp(7px,4cqi,11px);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
.card-v3 .card__bottom{position:relative;z-index:3;display:flex;flex-direction:column}.card-v3 .card__title{display:block;max-width:100%;margin:0;color:#fff;font:900 clamp(16px,12.5cqi,34px)/1 'Noto Sans KR',sans-serif;letter-spacing:-.045em;text-shadow:0 2px 12px #0008;white-space:nowrap;overflow:hidden}.card-v3 .card__title-text{display:inline-block;max-width:none;white-space:nowrap}.card-v3 .card__title.is-overflowing .card__title-text{animation:card-title-flow var(--title-duration,8s) ease-in-out infinite;transform:translateX(0)}@keyframes card-title-flow{0%,14%{transform:translateX(0)}44%,64%{transform:translateX(calc(0px - var(--title-travel,0px)))}94%,100%{transform:translateX(0)}}
.card-v3 .card__meta{display:flex;align-items:center;gap:8px;margin-top:5%;border:0;padding:0;color:#ffffffb3;font:500 clamp(6px,3.8cqi,10px)/1 'DM Sans',sans-serif;letter-spacing:.06em;font-variant-numeric:tabular-nums}.card-v3 .card__panel{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4%;padding-top:4%;border-top:1px solid #ffffff24}.card-v3 .card__panel>span:first-child{display:block;min-width:0}
.card-v3 .card__sub{display:block;margin:0 0 4px;color:var(--ac);font:700 clamp(6px,3.6cqi,9.5px)/1 'Noto Sans KR',sans-serif;letter-spacing:.02em}.card-v3 .card__desc{display:-webkit-box;margin:0;color:#fffffff0;font:500 clamp(7px,4.5cqi,12px)/1.42 'Noto Sans KR',sans-serif;letter-spacing:-.01em;word-break:keep-all;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.card-v3 .card__mark{display:grid;place-items:center;width:clamp(10px,7cqi,18px);height:clamp(10px,7cqi,18px);flex:none;color:var(--ac);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ac) 60%,transparent))}
.card-v3 .count-badge,.card-v3 .card-status-badge{position:absolute;z-index:8;right:8%;padding:3px 7px;border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);border-radius:999px;background:#080a0cdd;color:#fff;font-size:clamp(7px,3.3cqi,10px);line-height:1.2;backdrop-filter:blur(8px)}.card-v3 .count-badge{bottom:28%}.card-v3 .card-status-badge{top:12%;color:var(--ac)}
.card-v3[data-rarity="common"]{--ac:#c9cdd6;--ac-2:#6a6f7a;--bleed:transparent;--neb-1:#787e8c59;--neb-2:#464a5466;--f1:#ffffff59;--f2:#fff3;--f3:#ffffff4d;--f4:#ffffff38}.card-v3[data-rarity="rare"]{--ac:#6fb8ff;--ac-2:#1b56b8;--bleed:#3c8cff66;--neb-1:#3278ff73;--neb-2:#143ca073;--f1:#70cdffb3;--f2:#96aaff73;--f3:#ff96e666;--f4:#78e6ff8c}.card-v3[data-rarity="epic"]{--ac:#c48bff;--ac-2:#5a1fb8;--bleed:#9650ff66;--neb-1:#9650ff73;--neb-2:#46149680;--f1:#ffdb70b3;--f2:#b45aff8c;--f3:#8432ff8c;--f4:#ffa07880}.card-v3[data-rarity="legendary"]{--ac:#f3d27a;--ac-2:#9a6b12;--bleed:#f0be5066;--neb-1:#f0aa3c73;--neb-2:#78460f80;--f1:#ffeb96cc;--f2:#ffaa5a8c;--f3:#ff825a8c;--f4:#fff5c8a6}.card-v3[data-rarity="mythic"]{--ac:#ff7ec0;--ac-2:#7fb8ff;--bleed:#ff5aaa73;--neb-1:#ff50aa80;--neb-2:#5a78ff80;--f1:#ff6ebf;--f2:#ffdb70a6;--f3:#78ffc899;--f4:#78aaffb3}
.card-v3[data-rarity="mythic"] .card__face::before{background:conic-gradient(from var(--spin),#ff5fae,#ffd66b,#7fffd0,#7fb8ff,#c88cff,#ff5fae);opacity:1}.card-v3.card--interactive[data-rarity="mythic"] .card__face::before{animation:card-rim-spin 6s linear infinite}@keyframes card-rim-spin{to{--spin:360deg}}
.card-v3[data-rarity="mutation"]{--ac:#b5e99f;--ac-2:#8064b7;--bleed:#91d87859;--neb-1:#5ebc9e80;--neb-2:#7256a880;--f1:#bdffa999;--f2:#b398e680;--f3:#78dcc199;--f4:#d6f3a780}
.card-v3[data-rarity="mutation"] .card__face{background:linear-gradient(145deg,#14221e,#0c1014 56%,#1d1625)}
.card-v3[data-rarity="mutation"] .card__face::before{background:linear-gradient(132deg,#c5ffa8,#5d987c 30%,#8a6bb6 55%,#b5e99f 78%,#536e67);opacity:1}
.card-v3[data-rarity="mutation"] .card-chip--rarity{border-style:dashed;background:#17241bbd;letter-spacing:.11em}
.card-v3[data-rarity="mutation"] .card__mark{transform:rotate(22deg)}
.card-v3[data-rarity="transcendent"]{--ac:#f6f3ff;--ac-2:#cbbcff;--bleed:#d2c8ff8c;--neb-1:#b4c8ff80;--neb-2:#ffc8f073;--f1:#ffffffd9;--f2:#cbbcffb3;--f3:#ffd6f0b3;--f4:#bfe8ffb3;--sat:1.45;--bright:1.2;--grain:1.45}
.card-v3[data-rarity="transcendent"] .card__face{background:linear-gradient(145deg,#171720,#08090e 58%,#16131d)}
.card-v3[data-rarity="transcendent"] .card__face::before{background:conic-gradient(from var(--spin),#fff,#cbbcff,#fff 30%,#ffd6f0 45%,#fff 60%,#bfe8ff 75%,#fff);opacity:1;box-shadow:inset 0 0 14px #ffffff20}
.card-v3[data-rarity="transcendent"] .card__face::after{content:"";position:absolute;inset:2.612cqi;z-index:6;padding:1px;border-radius:5.97cqi;pointer-events:none;background:conic-gradient(from var(--spin2),#ff5faae6,#ffd76ee6,#6effd2e6,#6eaae6e6,#c878ffe6,#ff5faae6);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.52}
.card-v3.card--interactive[data-rarity="transcendent"] .card__face::before{animation:card-rim-spin 9s linear infinite}.card-v3.card--interactive[data-rarity="transcendent"] .card__face::after{animation:card-inner-spin 6s linear infinite reverse}@keyframes card-inner-spin{to{--spin2:360deg}}
.card-v3[data-rarity="transcendent"] .card__title{background:linear-gradient(100deg,#fff,#cbbcff 25%,#fff 45%,#ffd6f0 60%,#fff 80%,#bfe8ff);background-size:200% 100%;background-position:var(--pos) 0;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 10px #0009)}
.card-v3[data-rarity="transcendent"] .card-chip--rarity{background:#ffffff24;border-color:#ffffff66;letter-spacing:.09em}.card-v3[data-rarity="transcendent"] .card__tilt{box-shadow:0 1px 1px #0009,0 10px 20px -8px #000b,0 30px 60px -20px #000e,0 0 70px -18px #dcd2ffb3}
.card-v3[data-rarity="locked"]{--ac:#6f747d;--ac-2:#343840;--neb-1:#5a5e6838;--neb-2:#282b3173;filter:none}.card-v3.locked .card__art{filter:grayscale(1)}.card-v3.locked .card__art .art-fallback{opacity:.2}.card-v3.locked .card__bottom{opacity:.58}
/* These layers are emitted only for the clicked detail card. */
.card-v3 .card__foil{position:absolute;inset:0;z-index:4;border-radius:var(--card-radius);pointer-events:none;background:linear-gradient(var(--foil-angle),var(--f1),var(--f2) 28%,var(--f3) 52%,var(--f4) 74%,var(--f1)),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 -.2'/></filter><rect width='160' height='160' fill='%23fff'/><rect width='160' height='160' filter='url(%23g)' fill='%23000'/></svg>");background-size:260% 260%,160px 160px;background-position:var(--pos) 50%,0 0;background-blend-mode:multiply;-webkit-mask:radial-gradient(70% 55% at var(--px) var(--py),#000,rgba(0,0,0,.55) 40%,transparent 100%);mask:radial-gradient(70% 55% at var(--px) var(--py),#000,rgba(0,0,0,.55) 40%,transparent 100%);mix-blend-mode:screen;filter:hue-rotate(var(--hue)) saturate(var(--sat)) brightness(var(--bright)) contrast(var(--grain));opacity:calc(var(--idle) + var(--o) * (var(--peak) - var(--idle)));transition:opacity .5s}
.card-v3[data-rarity="transcendent"] .card__foil{background:linear-gradient(var(--foil-angle),var(--f1),var(--f2) 30%,var(--f3) 55%,var(--f4) 80%,var(--f1)),repeating-linear-gradient(calc(var(--foil-angle) - 90deg),#ff5faa 0 2px,#ffd76e 2px 4px,#6effd2 4px 6px,#6eAAff 6px 8px,#c878ff 8px 10px),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 -.55'/></filter><rect width='120' height='120' fill='%23fff'/><rect width='120' height='120' filter='url(%23g)' fill='%23000'/></svg>");background-size:260% 260%,auto,120px 120px;background-position:var(--pos) 50%,0 0,0 0;background-blend-mode:screen,multiply;mix-blend-mode:screen}
.card-v3 .card__glare{position:absolute;inset:0;z-index:5;border-radius:var(--card-radius);pointer-events:none;background:radial-gradient(85% 70% at var(--px) var(--py),#ffffff8c,#ffffff14 45%,#00000040 100%);mix-blend-mode:soft-light;opacity:calc(var(--g-idle) + var(--o) * (var(--g-peak) - var(--g-idle)));transition:opacity .5s}
.reveal-stage{height:415px}.card-v3.reveal-card,dialog .card-v3.reveal-card{width:268px;max-width:min(100%,268px);height:auto;padding:0;aspect-ratio:5/7;animation:arrive .45s ease;touch-action:manipulation}dialog:has(.card-v3){width:368px;max-width:calc(100vw - 24px);padding:38px 24px 20px;background:#101318}dialog:has(.card-v3) #modal-body{display:flex;flex-direction:column;align-items:center}.card-detail-count{text-align:center;margin:14px 0 0!important;font-size:12px!important;color:var(--muted)!important}
@media(max-width:680px){.card-v3 .card-chip{height:20px;padding:0 7px}.reveal-stage{height:385px}.card-v3.reveal-card,dialog .card-v3.reveal-card{width:248px;max-width:248px}}@media(max-width:400px){.reveal-stage{height:360px}.card-v3.reveal-card,dialog .card-v3.reveal-card{width:228px;max-width:228px}}@media(prefers-reduced-motion:reduce){.card-v3 .card__tilt,.card-v3 .card__foil,.card-v3 .card__glare{transition:none}.card-v3.card--interactive[data-rarity="mythic"] .card__face::before,.card-v3.card--interactive[data-rarity="transcendent"] .card__face::before,.card-v3.card--interactive[data-rarity="transcendent"] .card__face::after,.card-v3 .card__title.is-overflowing .card__title-text{animation:none}}
.collection-sentinel{height:1px;margin-top:32px;text-align:center;color:var(--muted);font-size:11px;overflow:visible}

.card-v3 .card__mark svg{display:block;width:100%;height:100%}.card-v3 .card__art .locked-symbol{display:block;width:min(30cqi,72px);aspect-ratio:1}.card-v3 .card__art .locked-symbol svg{display:block;width:100%;height:100%}