.card-frame{--grade:#9aa4b2;position:relative;width:180px;aspect-ratio:2/2.82;padding:4px;border-radius:18px;background:linear-gradient(145deg,var(--grade),#061327 38%,var(--grade));box-shadow:0 18px 46px rgba(0,0,0,.48),0 0 26px color-mix(in srgb,var(--grade) 42%,transparent);cursor:pointer;overflow:hidden;isolation:isolate;transition:.28s transform,.28s filter}.card-frame:hover{transform:translateY(-8px) scale(1.035);filter:brightness(1.08)}.card-frame.small{width:100%}.card-inner{position:relative;z-index:2;height:100%;padding:8px;border-radius:14px;background:linear-gradient(180deg,#0b1f43 0%,#061327 72%,#020817);border:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column}.card-header{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:white}.card-header span{font-size:16px;font-weight:1000;text-shadow:0 0 10px var(--grade)}.card-header b{font-size:9px;letter-spacing:2px;opacity:.65}.card-art{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--grade) 70%,white);background:radial-gradient(circle,#123f72,#020817);box-shadow:inset 0 0 20px rgba(0,0,0,.35)}.card-art img{width:100%;height:100%;display:block;object-fit:cover;transition:.35s transform}.card-frame:hover .card-art img{transform:scale(1.035)}.card-footer{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 3px 0}.card-footer small{display:block;color:var(--grade);font-size:9px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:115px}.card-title{font-size:14px;font-weight:1000;line-height:1.15;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-mini-logo{width:31px;height:22px;object-fit:contain;opacity:.72}.card-holo{position:absolute;z-index:4;inset:-60%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.36) 48%,transparent 58%);transform:translateX(-45%) rotate(8deg);transition:.7s;pointer-events:none;mix-blend-mode:screen}.card-frame:hover .card-holo{transform:translateX(45%) rotate(8deg)}.card-frame:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 15px var(--grade);opacity:.45;pointer-events:none}.locked{--grade:#173454;filter:grayscale(.72);background:#020817}.locked .card-art{display:grid;place-items:center;background:linear-gradient(145deg,#061126,#0b1830)}.missing{font-size:64px;font-weight:1000;color:#315578;text-shadow:0 0 20px #0b4c7b}.grade-C{--grade:#aab4c2}.grade-U{--grade:#47e47e}.grade-R{--grade:#31adff}.grade-SR{--grade:#a868ff}.grade-HR{--grade:#ff5578}.grade-UR{--grade:#ffd65e}.grade-SSR{--grade:#74f4ff}.grade-SSR{background:conic-gradient(from 0deg,#74f4ff,#b46cff,#ffd65e,#74f4ff);animation:ssrBorder 3s linear infinite}.result-card{width:180px}.detail-card{width:330px;cursor:default}.detail-card:hover{transform:none}.detail-layout{display:grid;grid-template-columns:330px 1fr;gap:36px;align-items:center}.detail-info h2{font-size:36px;margin:12px 0 8px}.detail-info>p{color:#92c5df;line-height:1.7}.detail-grade{display:inline-grid;place-items:center;min-width:62px;height:42px;padding:0 14px;border-radius:12px;border:1px solid #69e9ff;background:#062652;color:#8ff5ff;font-size:20px;font-weight:1000}.obtained-date{padding:13px;border:1px solid rgba(98,232,255,.16);border-radius:12px;background:rgba(0,184,255,.06)}
@keyframes ssrBorder{to{filter:hue-rotate(360deg)}}
@media(max-width:767px){.card-inner{padding:5px}.card-header{height:24px}.card-header span{font-size:12px}.card-footer{min-height:46px}.card-title{font-size:11px}.card-footer small{font-size:8px;max-width:75px}.card-mini-logo{width:24px}.result-card{width:145px}.detail-card{width:230px}.detail-layout{grid-template-columns:1fr;gap:18px}.detail-info{text-align:center}.detail-info h2{font-size:27px}}

.grade-MA{--grade:#ff8fe8;background:conic-gradient(from 30deg,#ff8fe8,#8e7dff,#73f7ff,#ff8fe8);animation:ssrBorder 2.4s linear infinite}.grade-FUR{--grade:#fff2a8;background:conic-gradient(from 0deg,#fff2a8,#ff8a5b,#ff4fd8,#6ef7ff,#fff2a8);animation:ssrBorder 1.7s linear infinite;box-shadow:0 0 34px rgba(255,225,120,.5),0 18px 46px rgba(0,0,0,.48)}.limited-badge{position:absolute;z-index:8;top:8px;right:8px;padding:5px 7px;border-radius:999px;background:rgba(5,10,24,.85);border:1px solid rgba(255,255,255,.35);font-size:8px;font-weight:1000;letter-spacing:.5px;color:#fff2a8;box-shadow:0 0 16px rgba(255,226,120,.22)}

/* v1009: premium breakthrough frames - restrained, image-safe effects */
.card-frame{isolation:isolate}
.card-frame .breakthrough-effect{position:absolute;z-index:9;inset:-3px;border-radius:inherit;pointer-events:none;opacity:0}
.breakthrough-badge{position:absolute;z-index:20;left:8px;top:8px;min-width:48px;padding:6px 10px;border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.96),#e7c879 42%,#8b641e 100%);border:1px solid rgba(255,245,201,.88);color:#241a09;font-size:12px;font-weight:1000;text-align:center;letter-spacing:.35px;box-shadow:0 3px 12px rgba(0,0,0,.38),0 0 12px rgba(231,200,121,.34),inset 0 1px 1px rgba(255,255,255,.9);text-shadow:0 1px 0 rgba(255,255,255,.55);animation:btBadgeBreathe 3.2s ease-in-out infinite}
.breakthrough-badge:before{content:"✦";margin-right:3px;color:#fff9df;text-shadow:0 0 6px #9a6f22}
.card-frame[class*="breakthrough-"]{border-color:var(--bt-color)!important;box-shadow:var(--bt-glow),inset 0 0 0 1px rgba(255,255,255,.14)}
.breakthrough-1{--bt-color:#cbd4dc;--bt-glow:0 12px 32px rgba(0,0,0,.46),0 0 8px rgba(211,224,233,.32)}
.breakthrough-2{--bt-color:#d2b87c;--bt-glow:0 12px 34px rgba(0,0,0,.47),0 0 11px rgba(210,184,124,.38)}
.breakthrough-3{--bt-color:#e1c47e;--bt-glow:0 13px 36px rgba(0,0,0,.48),0 0 15px rgba(225,196,126,.46)}
.breakthrough-3 .breakthrough-effect{opacity:.72;background:linear-gradient(112deg,transparent 32%,rgba(255,248,219,.88) 48%,transparent 62%);padding:2px;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:btSilkSweep 5.5s ease-in-out infinite}
.breakthrough-4{--bt-color:#83c9cf;--bt-glow:0 14px 38px rgba(0,0,0,.48),0 0 17px rgba(94,194,204,.43)}
.breakthrough-4 .breakthrough-effect{opacity:.7;background:conic-gradient(from 20deg,#8db7bd,#f0e1bd,#8fc9c5,#9fa9cf,#8db7bd);padding:2px;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:btLuxuryRotate 11s linear infinite}
.breakthrough-5{--bt-color:#a694ce;--bt-glow:0 15px 40px rgba(0,0,0,.5),0 0 18px rgba(166,148,206,.48),0 0 34px rgba(89,176,183,.12)}
.breakthrough-5 .breakthrough-effect{opacity:.7;box-shadow:inset 0 0 0 1px rgba(218,207,245,.9),0 0 15px rgba(143,120,194,.52);animation:btQuietPulse 3.4s ease-in-out infinite}
.breakthrough-6{--bt-color:#84c7df;--bt-glow:0 16px 42px rgba(0,0,0,.51),0 0 20px rgba(132,199,223,.52)}
.breakthrough-6 .breakthrough-effect{opacity:.75;background:linear-gradient(105deg,transparent 0 30%,rgba(232,250,255,.9) 32%,transparent 34% 72%,rgba(151,221,239,.65) 74%,transparent 76%);padding:2px;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:btFacet 4.8s ease-in-out infinite}
.breakthrough-7{--bt-color:#d59c68;--bt-glow:0 17px 44px rgba(0,0,0,.52),0 0 22px rgba(213,156,104,.55),0 0 42px rgba(138,76,51,.18)}
.breakthrough-7 .breakthrough-effect{opacity:.68;inset:-6px;border:1px solid rgba(240,194,143,.76);box-shadow:0 0 13px rgba(222,148,89,.55),inset 0 0 12px rgba(255,221,172,.16);animation:btQuietPulse 3s ease-in-out infinite}
.breakthrough-8{--bt-color:#927ec8;--bt-glow:0 18px 46px rgba(0,0,0,.53),0 0 25px rgba(146,126,200,.62),0 0 48px rgba(82,161,181,.18)}
.breakthrough-8 .breakthrough-effect{opacity:.72;inset:-8px;border:1px solid rgba(187,172,226,.74);box-shadow:0 0 18px rgba(140,116,202,.62),0 0 34px rgba(95,177,194,.22);animation:btRoyalAura 3.8s ease-in-out infinite}
.breakthrough-9{--bt-color:#e3d8b8;--bt-glow:0 19px 48px rgba(0,0,0,.54),0 0 27px rgba(227,216,184,.72),0 0 52px rgba(210,176,98,.2)}
.breakthrough-9 .breakthrough-effect{opacity:.76;inset:-7px;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(224,199,132,.9) 0 1px,transparent 1.8px);background-size:43px 47px,61px 67px;animation:btDust 8s linear infinite}
.breakthrough-10{--bt-color:#f1daa0;--bt-glow:0 20px 50px rgba(0,0,0,.56),0 0 18px rgba(255,245,207,.8),0 0 36px rgba(221,177,79,.55),0 0 64px rgba(173,104,38,.22)}
.breakthrough-10 .breakthrough-effect{opacity:.9;background:conic-gradient(from 0deg,#7a541b,#f4dfa4,#fff9df,#b98227,#6e4915,#f4dfa4,#7a541b);padding:3px;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:btLuxuryRotate 7.5s linear infinite}
.breakthrough-10 .breakthrough-badge{min-width:62px;background:linear-gradient(135deg,#fffdf1,#e7c46c 45%,#8c5b13);border-color:#fff1b5;box-shadow:0 3px 14px rgba(0,0,0,.42),0 0 18px rgba(240,204,106,.55)}
.breakthrough-10:after{content:"LEGEND";position:absolute;z-index:19;left:50%;bottom:7px;transform:translateX(-50%);padding:4px 12px;border:1px solid rgba(255,238,180,.72);border-radius:999px;background:linear-gradient(100deg,rgba(43,27,7,.94),rgba(126,85,21,.96),rgba(43,27,7,.94));color:#fff0bd;font-size:9px;font-weight:1000;letter-spacing:1.8px;box-shadow:0 3px 12px rgba(0,0,0,.48),0 0 14px rgba(223,181,79,.38)}
@keyframes btBadgeBreathe{50%{filter:brightness(1.09);box-shadow:0 3px 12px rgba(0,0,0,.38),0 0 17px rgba(231,200,121,.48),inset 0 1px 1px rgba(255,255,255,.9)}}
@keyframes btLuxuryRotate{to{transform:rotate(360deg)}}
@keyframes btQuietPulse{50%{opacity:.92;filter:brightness(1.12)}}
@keyframes btSilkSweep{0%,18%{transform:translateX(-115%)}55%,100%{transform:translateX(115%)}}
@keyframes btFacet{0%,22%{transform:translateX(-75%);opacity:.45}62%,100%{transform:translateX(75%);opacity:.85}}
@keyframes btRoyalAura{50%{transform:scale(1.012);opacity:.9}}
@keyframes btDust{to{background-position:43px -47px,-61px -67px}}

/* v1010: collector-grade breakthrough art direction */
.card-frame[class*="breakthrough-"]{position:relative;padding:5px;background:linear-gradient(145deg,var(--bt-hi),var(--bt-mid) 28%,#07101d 51%,var(--bt-low) 76%,var(--bt-hi));box-shadow:0 18px 42px rgba(0,0,0,.56),0 0 var(--bt-radius) var(--bt-aura),0 0 var(--bt-halo-radius,0) var(--bt-halo,transparent),inset 0 0 0 1px rgba(255,255,255,.2);animation:btFrameBreath var(--bt-speed,6s) ease-in-out infinite}
.card-frame[class*="breakthrough-"] .card-inner{border-color:color-mix(in srgb,var(--bt-hi) 42%,rgba(255,255,255,.2));box-shadow:inset 0 0 18px rgba(0,0,0,.36)}
.card-frame[class*="breakthrough-"] .breakthrough-effect{inset:1px;opacity:1;border:1px solid color-mix(in srgb,var(--bt-hi) 68%,white);box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 0 13px color-mix(in srgb,var(--bt-mid) 28%,transparent);background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 14% 84%,rgba(255,255,255,.14));padding:0;mask:none;animation:none}
.card-frame[class*="breakthrough-"] .breakthrough-effect:before{content:"";position:absolute;inset:5px;border-radius:calc(18px - 7px);pointer-events:none;background:linear-gradient(90deg,var(--bt-hi),transparent 16% 84%,var(--bt-hi)) top/100% 1px no-repeat,linear-gradient(90deg,var(--bt-hi),transparent 16% 84%,var(--bt-hi)) bottom/100% 1px no-repeat;opacity:.58}
.card-frame[class*="breakthrough-"] .breakthrough-effect:after{content:"";position:absolute;top:-35%;bottom:-35%;left:-50%;width:22%;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);filter:blur(1px);opacity:0;animation:btCollectorGlint var(--bt-glint,7s) ease-in-out infinite}
.card-frame[class*="breakthrough-"] .breakthrough-badge{left:auto;right:9px;top:9px;min-width:0;padding:5px 8px;border-radius:5px;background:linear-gradient(155deg,rgba(20,25,33,.96),rgba(3,7,13,.96));border:1px solid color-mix(in srgb,var(--bt-hi) 72%,white);color:color-mix(in srgb,var(--bt-hi) 78%,white);font-family:inherit;font-size:10px;letter-spacing:1px;box-shadow:0 5px 12px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.12),0 0 9px color-mix(in srgb,var(--bt-mid) 32%,transparent);text-shadow:0 0 7px var(--bt-mid);animation:none}
.card-frame[class*="breakthrough-"] .breakthrough-badge:before{content:"◆";font-size:7px;color:var(--bt-hi);text-shadow:0 0 7px var(--bt-hi)}
.breakthrough-1{--bt-hi:#edf2f4;--bt-mid:#9aa7ae;--bt-low:#536069;--bt-aura:rgba(192,207,215,.18);--bt-radius:10px;--bt-halo:rgba(183,204,216,.06);--bt-halo-radius:18px}
.breakthrough-2{--bt-hi:#f2e6c4;--bt-mid:#b99b61;--bt-low:#6c5430;--bt-aura:rgba(194,159,91,.2);--bt-radius:12px;--bt-halo:rgba(202,169,99,.07);--bt-halo-radius:21px}
.breakthrough-3{--bt-hi:#fff1c9;--bt-mid:#c89b4c;--bt-low:#72501e;--bt-aura:rgba(212,166,77,.24);--bt-radius:15px;--bt-halo:rgba(218,171,77,.09);--bt-halo-radius:25px;--bt-glint:6.8s}
.breakthrough-4{--bt-hi:#dffbfa;--bt-mid:#74bdbd;--bt-low:#315f69;--bt-aura:rgba(94,194,194,.25);--bt-radius:17px;--bt-halo:rgba(89,202,201,.11);--bt-halo-radius:29px;--bt-glint:6.3s}
.breakthrough-5{--bt-hi:#eee5ff;--bt-mid:#a38acb;--bt-low:#51426e;--bt-aura:rgba(157,132,200,.28);--bt-radius:19px;--bt-halo:rgba(143,112,205,.13);--bt-halo-radius:34px;--bt-glint:5.9s}
.breakthrough-6{--bt-hi:#e3f8ff;--bt-mid:#74bdda;--bt-low:#315c78;--bt-aura:rgba(90,181,218,.31);--bt-radius:22px;--bt-halo:rgba(76,177,218,.15);--bt-halo-radius:39px;--bt-speed:5.2s;--bt-glint:5.5s}
.breakthrough-7{--bt-hi:#ffe0b5;--bt-mid:#d48652;--bt-low:#713d32;--bt-aura:rgba(213,119,73,.34);--bt-radius:26px;--bt-halo:rgba(211,102,54,.18);--bt-halo-radius:45px;--bt-speed:4.8s;--bt-glint:5.2s}
.breakthrough-8{--bt-hi:#e7ddff;--bt-mid:#9174d2;--bt-low:#473c78;--bt-aura:rgba(137,105,211,.39);--bt-radius:31px;--bt-halo:rgba(115,77,209,.21);--bt-halo-radius:52px;--bt-speed:4.5s;--bt-glint:4.9s}
.breakthrough-9{--bt-hi:#fffdf2;--bt-mid:#dbc887;--bt-low:#74663f;--bt-aura:rgba(239,218,145,.42);--bt-radius:36px;--bt-halo:rgba(225,197,112,.23);--bt-halo-radius:58px;--bt-speed:4.2s;--bt-glint:4.6s}
.breakthrough-9 .breakthrough-effect:before{box-shadow:0 0 8px rgba(255,245,204,.46)}
.breakthrough-10{--bt-hi:#fff3bf;--bt-mid:#d9a83d;--bt-low:#62400c;--bt-aura:rgba(230,171,54,.5);--bt-radius:43px;--bt-halo:rgba(208,139,29,.26);--bt-halo-radius:66px;--bt-speed:3.8s;--bt-glint:4.2s;background:linear-gradient(132deg,#fff5c9 0%,#9c6a16 17%,#241606 34%,#d8a538 50%,#201305 67%,#8e5d12 83%,#fff1b0 100%)!important;box-shadow:0 20px 50px rgba(0,0,0,.62),0 0 18px rgba(255,226,143,.48),0 0 44px rgba(213,151,35,.42),0 0 66px rgba(208,139,29,.26),inset 0 0 0 1px #fff0ac}
.breakthrough-10 .breakthrough-effect{border-color:#ffe9a3;box-shadow:inset 0 0 0 1px #5c3909,inset 0 0 17px rgba(220,161,42,.3)}
.breakthrough-10 .breakthrough-badge{background:linear-gradient(155deg,#211606,#050402);border-color:#f4d276;color:#ffe9a9;box-shadow:0 5px 14px rgba(0,0,0,.65),0 0 12px rgba(225,171,53,.42)}
.breakthrough-10:after{content:"";position:absolute;z-index:19;inset:3px;left:3px;bottom:3px;transform:none;padding:0;border:0;border-radius:15px;background:none;box-shadow:inset 0 0 10px rgba(255,222,129,.24);pointer-events:none}
@keyframes btFrameBreath{50%{filter:brightness(1.045);box-shadow:0 20px 46px rgba(0,0,0,.58),0 0 calc(var(--bt-radius) + 5px) var(--bt-aura),0 0 calc(var(--bt-halo-radius,0px) + 9px) var(--bt-halo,transparent),inset 0 0 0 1px rgba(255,255,255,.24)}}
@keyframes btCollectorGlint{0%,58%{left:-50%;opacity:0}66%{opacity:.56}82%,100%{left:130%;opacity:0}}

.grade-LIMITED{--grade:#ffd66b;background:conic-gradient(from 0deg,#fff5b8,#ffb83d,#ff6b91,#9d7cff,#73e7ff,#fff5b8);animation:ssrBorder 1.35s linear infinite;box-shadow:0 0 38px rgba(255,210,90,.62),0 18px 48px rgba(0,0,0,.5)}
.grade-LIMITED .card-header span{font-size:10px;letter-spacing:.7px;color:#fff4bd;text-shadow:0 0 10px rgba(255,211,86,.8)}

/* v987: 카드 전투력 유형 별 표시 (유저 화면 전용) */
.power-type-indicator{display:inline-block;margin-left:4px;font-style:normal;font-size:.72em;line-height:1;letter-spacing:-2px;vertical-align:1px;white-space:nowrap}
.power-type-normal{color:#D1D5DB}
.power-type-advanced{color:#FACC15}
.power-type-top{color:#F59E0B}
.detail-grade .power-type-indicator{margin-left:7px;font-size:.68em;letter-spacing:-1px;vertical-align:2px}
.battle-deck-stars{display:block;margin:3px 0 0;font-size:10px;letter-spacing:-2px}
.fighter-power-stars{display:block;margin:2px 0 0;font-size:8px;letter-spacing:-2px}
@media(max-width:767px){.power-type-indicator{margin-left:2px;font-size:.64em;letter-spacing:-2px}.detail-grade .power-type-indicator{font-size:.62em}.battle-deck-stars{font-size:9px}.fighter-power-stars{font-size:7px}}

/* v990: mobile power type / breakthrough visibility */
.card-status-line{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap}
.card-status-line .breakthrough-meta{color:#ffe27a;font-weight:1000;flex:0 0 auto}
.card-status-line .card-grade-meta{color:#9fdcf5;font-weight:900;flex:0 0 auto}
.card-status-line .card-list-power-type{margin-left:0;font-size:.82em;letter-spacing:-2px;flex:0 0 auto}
.pvp-card-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
.pvp-card-meta em,.pvp-card-meta i{font-style:normal}
.pvp-card-meta .breakthrough-meta{color:#ffe27a;font-weight:1000;flex:0 0 auto}
.pvp-card-meta .pvp-power-type{margin-left:0;font-size:.8em;flex:0 0 auto}
@media(max-width:767px){
  .card-frame[class*="breakthrough-"] .breakthrough-badge{top:31px;left:auto;right:7px;min-width:0;padding:4px 7px;font-size:9px;line-height:1;animation:none}
  .card-frame[class*="breakthrough-"] .breakthrough-badge:before{margin-right:2px}
  .card-status-line{gap:4px;overflow:visible;white-space:normal;flex-wrap:wrap;line-height:1.15}
  .card-status-line .breakthrough-meta{order:1}
  .card-status-line .card-grade-meta{order:2}
  .card-status-line .card-list-power-type{order:3;font-size:.76em}
  .pvp-card-extra{align-items:flex-start;white-space:normal}
  .pvp-card-meta{flex-wrap:wrap;gap:3px 5px;line-height:1.15;text-align:right}
  .pvp-card-meta .breakthrough-meta{order:1;width:100%}
  .pvp-card-meta i{order:2}
  .pvp-card-meta .pvp-power-type{order:3;font-size:.72em}
}