/* ============================================================
   BACKPACK — közös prémium gyűjteményi páncélterem
   Popupban és a profiloldali fülön egyaránt érvényes.
   ============================================================ */

body.backpack-modal-open { overflow:hidden; }
.backpack-overlay { z-index:var(--z-overlay); padding:24px; background:radial-gradient(circle at 50% 40%,rgba(31,89,116,.27),rgba(1,3,7,.93) 72%); backdrop-filter:blur(13px); }
.backpack-panel { position:relative; isolation:isolate; width:min(1540px,96vw); max-height:91vh; border-color:rgba(91,214,239,.34); border-radius:3px; background:linear-gradient(145deg,rgba(8,16,27,.98),rgba(2,6,11,.99)); box-shadow:0 32px 100px rgba(0,0,0,.7),0 0 45px rgba(76,212,255,.11),inset 0 1px rgba(255,255,255,.035); }
.backpack-panel::before,.backpack-panel::after { position:absolute;z-index:3;width:62px;height:62px;content:"";pointer-events:none; }
.backpack-panel::before { top:-1px;left:-1px;border-top:2px solid rgba(96,220,244,.75);border-left:2px solid rgba(96,220,244,.75); }
.backpack-panel::after { right:-1px;bottom:-1px;border-right:2px solid rgba(216,183,86,.65);border-bottom:2px solid rgba(216,183,86,.65); }
.backpack-head { position:relative;min-height:78px;padding:12px 22px;justify-content:flex-start;gap:14px;border-bottom-color:rgba(133,184,207,.14);background:linear-gradient(90deg,rgba(35,116,146,.13),rgba(5,10,17,.4) 62%,rgba(216,183,86,.045)); }
.backpack-head::after { position:absolute;right:0;bottom:-1px;width:36%;height:1px;content:"";background:linear-gradient(90deg,transparent,rgba(216,183,86,.52),transparent); }
.backpack-head-emblem { display:grid;flex:0 0 53px;width:53px;height:53px;place-items:center;border:1px solid rgba(95,220,244,.28);border-radius:50%;background:rgba(2,7,12,.62);box-shadow:0 0 20px rgba(76,212,255,.1),inset 0 0 13px rgba(76,212,255,.06); }
.backpack-head-emblem img { width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(76,212,255,.3)); }
.backpack-head-copy { display:flex;flex-direction:column;gap:2px; }
.backpack-head-copy>span { color:rgba(93,215,239,.58);font-size:.46rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; }
.backpack-title { color:#f6efdf;font-family:"AOW",serif;font-size:1.28rem;font-weight:400;letter-spacing:.07em;text-shadow:0 3px 16px rgba(0,0,0,.6); }
.backpack-head-status { display:flex;align-items:center;gap:7px;margin-left:auto;color:rgba(133,207,170,.56);font-size:.47rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.backpack-head-status i { width:6px;height:6px;border-radius:50%;background:#6ce0a7;box-shadow:0 0 8px rgba(108,224,167,.65);animation:bppStatusPulse 2.2s ease-in-out infinite; }
.backpack-close { display:grid;flex:0 0 36px;width:36px;height:36px;margin-left:14px;padding:0;place-items:center;border:1px solid rgba(216,183,86,.26);border-radius:50%;background:rgba(2,7,12,.68);color:rgba(226,216,190,.68);transition:color var(--t-mid),border-color var(--t-mid),transform var(--t-mid),box-shadow var(--t-mid); }
.backpack-close:hover,.backpack-close:focus-visible { border-color:rgba(216,183,86,.72);outline:0;color:#fff1c9;transform:rotate(90deg);box-shadow:0 0 17px rgba(216,183,86,.16); }
.backpack-body { padding:18px 22px 25px;scrollbar-color:rgba(87,199,224,.36) rgba(255,255,255,.025); }

.bp-tabs-root { min-height:0; }
.bp-vault-intro { position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:105px;margin-bottom:12px;padding:18px 24px;box-sizing:border-box;overflow:hidden;border:1px solid rgba(118,174,199,.14);border-radius:3px;background:linear-gradient(105deg,rgba(15,27,42,.82),rgba(4,9,16,.92));box-shadow:inset 0 1px rgba(255,255,255,.025); }
.bp-vault-intro::before { position:absolute;top:0;left:23px;width:190px;height:1px;content:"";background:linear-gradient(90deg,transparent,#56d8ef,#d8b756,transparent);box-shadow:0 0 11px rgba(76,212,255,.3); }
.bp-vault-copy { position:relative;z-index:1; }
.bp-vault-copy>span { color:rgba(89,215,239,.57);font-size:.46rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; }
.bp-vault-copy h2 { margin:4px 0 2px;color:#f6efe2;font-family:"AOW",serif;font-size:1.35rem;font-weight:400;letter-spacing:.045em; }
.bp-vault-copy p { margin:0;color:rgba(166,188,203,.55);font-size:.62rem;line-height:1.4; }
.bp-vault-intro>img { position:absolute;right:24px;width:100px;height:100px;object-fit:contain;opacity:.32;filter:drop-shadow(0 0 18px rgba(76,212,255,.22));transform:rotate(3deg); }
.bp-magic-charm-row { position:relative;gap:10px;width:auto;margin:0 0 12px;padding:9px 14px;border-color:rgba(183,143,255,.34);border-radius:2px;background:linear-gradient(100deg,rgba(116,72,190,.15),rgba(5,9,16,.72));box-shadow:inset 0 1px rgba(255,255,255,.025); }
.bp-magic-charm-icon { width:27px;height:27px;filter:drop-shadow(0 0 8px rgba(187,143,255,.3)); }
.bp-magic-charm-label { color:rgba(206,193,229,.65);font-size:.61rem;letter-spacing:.06em;text-transform:uppercase; }
.bp-magic-charm-amount { color:#e1ccff;font-family:"AOW",serif;font-size:1.05rem;font-weight:400;text-shadow:0 0 10px rgba(190,150,255,.3); }

.bp-subtabs { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:14px;padding:0 10px;border:1px solid rgba(130,174,197,.13);border-radius:2px;background:rgba(3,8,14,.57); }
.bp-subtab { position:relative;min-height:46px;padding:8px 14px;border:0;color:rgba(161,184,199,.55);font-size:.58rem;letter-spacing:.11em; }
.bp-subtab+.bp-subtab { border-left:1px solid rgba(255,255,255,.055); }
.bp-subtab::after { position:absolute;right:28%;bottom:-1px;left:28%;height:2px;content:"";background:transparent;transition:right var(--t-mid),left var(--t-mid),background var(--t-mid); }
.bp-subtab:hover { color:#e5eef2; }
.bp-subtab.active { border:0;color:#70def3;text-shadow:0 0 12px rgba(76,212,255,.28); }
.bp-subtab.active::after { right:12%;left:12%;background:linear-gradient(90deg,transparent,#5bd8ef,transparent);box-shadow:0 0 10px rgba(76,212,255,.42); }

.bp-header { gap:0;margin-bottom:13px;padding:4px 0 13px;border-bottom-color:rgba(128,177,200,.12); }
.bp-header-stat { position:relative;min-width:145px;padding:6px 22px; }
.bp-header-stat:first-child { padding-left:4px; }
.bp-header-stat+.bp-header-stat::before { position:absolute;top:7px;bottom:7px;left:0;width:1px;content:"";background:linear-gradient(transparent,rgba(98,211,234,.18),transparent); }
.bp-header-num { color:#dff8fc;font-size:1.75rem;font-weight:400;text-shadow:0 0 16px rgba(76,212,255,.2); }
.bp-header-label { color:rgba(97,210,233,.55);font-size:.51rem;font-weight:700;letter-spacing:.13em; }
.bp-toolbar { gap:12px;margin-bottom:14px;padding:12px 14px;border:1px solid rgba(125,169,192,.11);background:rgba(3,8,14,.43); }
.bp-toolbar-group { gap:5px; }
.bp-toolbar-group label { color:rgba(164,187,201,.5);font-size:.5rem;font-weight:700;letter-spacing:.12em; }
.bp-toolbar-group .settings-select { min-width:145px;min-height:36px;border-color:rgba(128,176,200,.15);border-radius:2px;background-color:rgba(1,5,10,.72);color:rgba(226,235,239,.8);font-size:.62rem; }
.bp-search-wrap input { min-height:36px;border-color:rgba(128,176,200,.15);border-radius:2px;background:rgba(1,5,10,.72);font-size:.68rem; }
.bp-search-wrap input:focus { border-color:rgba(87,216,240,.5);box-shadow:0 0 0 2px rgba(76,212,255,.05),0 0 14px rgba(76,212,255,.08); }
.bp-search-icon { stroke:rgba(88,211,235,.58); }

.bp-grid { grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:13px; }
.bp-card { isolation:isolate;border-color:color-mix(in srgb,var(--tc,#57d8ef) 25%,transparent);border-radius:3px;background:linear-gradient(150deg,rgba(11,20,31,.96),rgba(3,7,13,.98));box-shadow:0 13px 28px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.025);transition:transform 420ms var(--ease-premium),border-color var(--t-mid),box-shadow 420ms var(--ease-premium); }
.bp-card::before { position:absolute;z-index:3;top:-1px;left:-1px;width:27px;height:27px;border-top:1px solid var(--tc,#57d8ef);border-left:1px solid var(--tc,#57d8ef);content:"";opacity:.7;pointer-events:none; }
.bp-card:hover { border-color:color-mix(in srgb,var(--tc,#57d8ef) 68%,transparent);transform:translateY(-5px);box-shadow:0 20px 38px rgba(0,0,0,.4),0 0 22px color-mix(in srgb,var(--tc,#57d8ef) 10%,transparent); }
.bp-card-media { background:#02050a; }
.bp-card-media img { filter:saturate(.9) contrast(1.03);transition:transform 700ms var(--ease-premium),filter var(--t-mid); }
.bp-card:hover .bp-card-media img { transform:scale(1.065);filter:saturate(1.07) contrast(1.04); }
.bp-card-media::after { background:linear-gradient(180deg,transparent 47%,rgba(3,7,13,.42) 72%,rgba(3,7,13,.96)); }
.bp-card-tier-chip { top:9px;right:9px;padding:4px 8px;border-radius:2px;background:rgba(2,6,11,.7);font-size:.5rem;letter-spacing:.09em;backdrop-filter:blur(5px); }
.bp-card-body { gap:5px;padding:11px 12px 13px; }
.bp-card-name { color:#f4ecdf;font-family:"AOW",serif;font-size:.76rem;font-weight:400;letter-spacing:.035em; }
.bp-card-tier-label { font-size:.51rem;letter-spacing:.11em;text-transform:uppercase; }
.bp-card-track { height:5px;border-radius:0;background:rgba(255,255,255,.055); }
.bp-card-fill { border-radius:0;box-shadow:0 0 8px var(--tc,#57d8ef); }
.bp-card-count,.bp-card-missing,.bp-card-extra { color:rgba(168,189,202,.5);font-size:.56rem;letter-spacing:.035em; }
.bp-card-combine-btn,.bp-card-convert-btn { min-height:34px;border-radius:2px;font-size:.59rem;letter-spacing:.1em; }
.bp-card-combine-btn { background:linear-gradient(110deg,rgba(55,188,219,.25),rgba(5,12,20,.84)); }
.bp-card-owned-badge { border-color:rgba(109,247,193,.28);border-radius:2px;background:rgba(38,139,99,.1);color:#75dfaa;font-size:.54rem;letter-spacing:.09em; }
.bp-card--owned { opacity:.7; }
.bp-card--ready { animation:bppReadyPulse 2.8s ease-in-out infinite; }
.bp-card--convertible { border-color:rgba(224,188,86,.45);box-shadow:0 0 0 1px rgba(224,188,86,.07),0 0 22px rgba(224,188,86,.09); }
.bp-empty { min-height:240px;justify-content:center;border:1px dashed rgba(83,207,232,.14);background:radial-gradient(circle,rgba(76,212,255,.035),transparent 62%); }
.bp-empty-cta { border-color:rgba(82,211,237,.35);border-radius:2px;background:rgba(76,212,255,.09); }
.bp-avatar-section-title { color:rgba(100,215,237,.58);font-size:.55rem;font-weight:700;letter-spacing:.14em; }
.bp-avatar-section:has(.bp-avatar-option[data-avatar*="/vip/"]) .bp-avatar-section-title { color:#f2cf68;text-shadow:0 0 12px rgba(242,207,104,.35); }
.bp-avatar-option[data-avatar*="/vip/"] { border-color:rgba(242,207,104,.34);box-shadow:0 0 18px rgba(242,207,104,.08); }
.bp-avatar-option { border-width:1px;background:rgba(4,10,17,.8);box-shadow:0 8px 18px rgba(0,0,0,.25); }
.bp-avatar-option.is-active { border-color:#d9b958;box-shadow:0 0 0 3px rgba(217,185,88,.09),0 0 16px rgba(217,185,88,.2); }

@keyframes bppStatusPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes bppReadyPulse { 0%,100%{box-shadow:0 0 0 1px rgba(76,212,255,.1),0 0 16px rgba(76,212,255,.12)} 50%{box-shadow:0 0 0 1px rgba(76,212,255,.2),0 0 28px rgba(76,212,255,.25)} }
@media (max-width:760px) { .backpack-overlay{padding:10px}.backpack-panel{width:100%;max-height:94vh}.backpack-head-status{display:none}.backpack-body{padding:12px}.bp-vault-intro{padding:16px}.bp-vault-intro>img{right:8px;opacity:.2}.bp-toolbar{align-items:stretch}.bp-search-wrap{max-width:none;margin-left:0}.bp-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px} }
@media (max-width:500px) { .backpack-head-emblem{display:none}.backpack-head{min-height:62px}.bp-vault-copy p{max-width:78%}.bp-header-stat{min-width:0;flex:1;padding-inline:10px}.bp-header-num{font-size:1.4rem}.bp-header-label{font-size:.43rem}.bp-subtab{padding-inline:5px;font-size:.48rem} }
@media (prefers-reduced-motion:reduce) { .backpack-head-status i,.bp-card--ready{animation:none}.bp-card,.bp-card-media img{transition:none} }