:root{color-scheme:dark;--bg:#111018;--panel:#1b1924;--panel2:#211e2c;--line:#322d40;--text:#f3f0f8;--muted:#aaa2ba;--accent:#dceba3;--purple:#bea6ef;--danger:#ff9eaf;--radius:16px;font-family:Inter,"Segoe UI",sans-serif;font-size:16px}
.element-icon{width:18px;height:18px;object-fit:contain;vertical-align:middle;display:inline-block}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit;text-decoration:none}button{border:0;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:2.1rem;letter-spacing:-1.2px;font-weight:650}h2{font-size:1.15rem;font-weight:600}h3{font-size:1rem;font-weight:600}p{line-height:1.65}small{font-size:.8125rem;color:var(--muted)}.muted{color:var(--muted)}.eyebrow{font-size:.75rem;font-weight:650;letter-spacing:2px;text-transform:uppercase;color:var(--purple)}.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 17px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);font-size:.875rem;font-weight:600;white-space:nowrap}.btn:hover{background:#302b3d}.btn.primary{background:var(--accent);color:#242819;border-color:var(--accent)}.btn.primary:hover{background:#e9f5be}.btn.twitch{background:#9146ff;border-color:#9146ff;color:white}.btn.danger{background:#361e2a;color:#ffadbb;border-color:#673044}.btn.ghost{background:transparent}.btn.small{padding:8px 11px;font-size:.8125rem}.btn.icononly{padding:9px}.badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:550;padding:5px 9px;border-radius:6px;background:#2a2536;color:#c7bed4;white-space:nowrap}.badge.green{background:#283324;color:#d0e9a1}.badge.purple{background:#322443;color:#d9bafa}.badge.orange{background:#382e20;color:#f3c985}.badge.red{background:#3b2430;color:#ffadbb}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:currentColor}.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}.sidebar{padding:30px 18px 20px;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;width:238px;background:#15131d;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:0 12px 33px;font-size:1.3rem;font-weight:650;letter-spacing:-.6px}.brand img{width:34px;height:34px}.brand small{display:block;font-size:.625rem;letter-spacing:2.3px;margin-top:3px}.navlabel{font-size:.625rem;letter-spacing:1.7px;color:#81778f;padding:23px 14px 10px;font-weight:650}.navitem{display:flex;align-items:center;gap:12px;width:100%;font-size:.875rem;padding:12px 14px;border-radius:8px;color:#a9a1b9;margin:3px 0;background:none;text-align:left}.navitem:hover{background:#211d2b;color:var(--text)}.navitem.active{background:#30283f;color:#dac5ff}.navitem .count{margin-left:auto;background:#433454;border-radius:5px;padding:1px 6px;font-size:.7rem}.sidebar-foot{margin-top:auto;padding-top:24px}.channel{border:1px solid var(--line);padding:13px;border-radius:10px;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px;background:#392f4d;color:#dec6ff;font-weight:600}.avatar:nth-child(2n){background:#334339}.channel span small{display:block;margin-top:3px}.workspace{grid-column:2;min-width:0}.topbar{height:77px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 38px}.crumb{font-size:.8125rem;color:var(--muted)}.crumb span{color:#dfd8e9}.topright{display:flex;align-items:center;gap:16px}.topright .avatar{width:32px;height:32px;font-size:.875rem}.mode-note{background:#252a21;color:#c8d4a7;padding:9px 38px;font-size:.8125rem;display:flex;align-items:center;justify-content:space-between;gap:12px}.mode-note button{background:transparent;font-size:.8125rem;text-decoration:underline}.main{max-width:1540px;margin:auto;padding:35px 38px 55px}.pagehead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}.pagehead p{font-size:.875rem;color:var(--muted);margin-top:8px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:25px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.8125rem}.stat-top .icon{color:var(--purple);width:19px;height:19px}.stat strong{display:block;font-size:2rem;font-weight:600;letter-spacing:-1px;margin:12px 0 5px}.stat small{font-size:.75rem}.stat-progress{width:100%;height:5px;background:var(--line);border-radius:999px;margin:6px 0 8px;overflow:hidden}.stat-progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--accent));border-radius:999px;transition:width .3s ease}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:22px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;gap:12px}.panel-head small{display:block;margin-top:6px}.boss-stage{position:relative;min-height:252px;background:radial-gradient(ellipse at 70% 50%,#493950 0,transparent 65%),linear-gradient(110deg,#252132,#211d2d);margin:0 18px;border:1px solid #3d334d;border-radius:12px;display:flex;align-items:center;overflow:hidden;padding:32px}.boss-copy{z-index:1;max-width:60%}.boss-copy h2{font-size:2.5rem;letter-spacing:-1px;margin:14px 0 8px}.boss-copy p{color:#b9abc9;font-size:.875rem}.boss-art{position:absolute;height:220px;width:48%;object-fit:contain;right:12px;bottom:12px;filter:drop-shadow(0 8px 15px #100c1d)}.boss-detail{padding:22px 24px}.health-label{display:flex;justify-content:space-between;gap:8px;font-size:.8125rem;margin-bottom:10px}.health{height:7px;background:#342b41;border-radius:8px;overflow:hidden}.health div{height:100%;background:var(--purple);border-radius:8px}.boss-footer{display:flex;gap:24px;margin-top:17px;font-size:.8125rem;color:var(--muted)}.boss-footer b{color:#dfd5ec;font-weight:500}.chart-panel{padding-bottom:14px}.chart{height:170px;padding:0 22px}.chart svg{width:100%;height:100%;overflow:visible}.chart-labels{display:flex;justify-content:space-between;color:#8c839d;font-size:.75rem;padding:2px 24px 8px}.chart-total{font-size:1.5rem;padding:0 24px 8px;letter-spacing:-.5px}.chart-total small{font-size:.75rem;margin-left:8px}.feed{margin-top:22px}.feed-list{padding:0 24px 13px}.feed-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.feed-row:last-child{border-bottom:0}.feed-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#2d263a;color:var(--purple);flex-shrink:0}.feed-text{flex:1;min-width:0;font-size:.8125rem;line-height:1.5}.feed-text small{display:block;font-size:.75rem}.feed-time{color:#8d839e;font-size:.75rem}.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.quick{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:18px;display:flex;align-items:center;gap:12px;text-align:left}.quick .icon{color:var(--purple)}.quick span{font-size:.875rem}.quick small{display:block;font-size:.75rem;margin-top:5px}.quick:hover{border-color:#726080}.notice{padding:14px 17px;border:1px solid #4b405d;background:#25202f;border-radius:10px;color:#bfb0d1;font-size:.8125rem;line-height:1.6;margin-bottom:22px;display:flex;align-items:flex-start;gap:10px}.notice .icon{margin-top:3px}.notice.warning{border-color:#5d4932;background:#2b251f;color:#d9c19b}.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0 0 22px;flex-wrap:wrap}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#191620;padding:10px 13px;border-radius:9px;min-width:250px}.search .icon{width:17px;color:var(--muted)}.search input{border:0;background:transparent;color:var(--text);outline:none;width:100%;font-size:.875rem}.select{background:#211d2a;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:11px 32px 11px 13px;font-size:.875rem}.tabs{display:flex;gap:7px;flex-wrap:wrap}.tab{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 13px;border-radius:8px;font-size:.8125rem}.tab.selected{background:#342940;border-color:#56406f;color:#ddc5ff}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.catalog-card{border:1px solid var(--line);background:var(--panel);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.catalog-card:hover{border-color:#52435f}.card-art{height:185px;background:radial-gradient(ellipse at center,#403148,transparent 75%),#211d2a;display:flex;align-items:center;justify-content:center;position:relative}.card-art img{width:85%;height:85%;object-fit:contain}.card-art .badge{position:absolute;left:15px;top:15px}.card-content{padding:19px;flex:1}.card-content h3{font-size:1.0625rem;margin:9px 0;line-height:1.4}.card-content p{font-size:.8125rem;color:var(--muted)}.card-actions{padding:0 19px 19px;display:flex;gap:8px}.card-actions .btn:first-child{flex:1}.weapon-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.weapon-glyph{width:54px;height:54px;border:1px solid #4b3c57;background:#2b2338;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.6rem}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);padding-top:18px;margin-top:18px;border-top:1px solid var(--line);gap:8px}.mini-stats span{font-size:.7rem;color:var(--muted)}.mini-stats b{display:block;font-size:1rem;margin-bottom:5px;font-weight:550;color:var(--text)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:.875rem}th{text-align:left;font-weight:500;font-size:.75rem;color:#a99eb8;background:#211c2b;padding:14px 21px}td{padding:17px 21px;border-bottom:1px solid #2b2537}tr:last-child td{border-bottom:0}.usercell{display:flex;align-items:center;gap:11px}.usercell small{display:block;margin-top:4px;font-size:.7rem}.table-name{background:transparent;font-weight:550;padding:0}.table-name:hover{color:var(--purple)}.status-dot{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:#a89fb5}.status-dot.active{color:var(--accent)}.table-footer{padding:16px 22px;color:var(--muted);font-size:.75rem}.empty{padding:50px 25px;text-align:center}.empty>.icon{width:35px;height:35px;color:#766286;margin-bottom:18px}.empty h3{margin-bottom:8px;font-size:1.1rem}.empty p{color:var(--muted);font-size:.875rem;max-width:470px;margin:0 auto 18px}.connections{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.connection-card{padding:24px}.connection-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.connection-title .icon{color:var(--purple);width:26px;height:26px}.connection-card h2{margin-bottom:8px}.connection-card p{font-size:.875rem;color:var(--muted)}.connection-card small{display:block;border-top:1px solid var(--line);padding-top:14px;margin-top:18px;line-height:1.6}.profile-banner{background:linear-gradient(115deg,#352842,#211d2d);padding:32px;border-radius:16px;border:1px solid #544060;display:flex;gap:20px;align-items:center;margin-bottom:24px}.profile-banner .avatar{width:66px;height:66px;font-size:1.8rem;border-radius:17px}.profile-banner h1{margin:8px 0}.profile-section{margin-top:25px}.profile-section h2{margin-bottom:17px}.chips{display:flex;gap:10px;flex-wrap:wrap;padding:22px}.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;max-width:1500px;margin:auto}.login-story{padding:48px 65px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 45% 55%,#453050,transparent 65%);position:relative;overflow:hidden}.login-story .brand{padding:0}.login-illustration{flex:1;display:flex;align-items:center;justify-content:center;min-height:310px}.login-illustration img{width:75%;max-height:360px;object-fit:contain;filter:drop-shadow(0 25px 35px #090611)}.login-story h1{font-size:2.7rem;max-width:470px;line-height:1.15;margin:16px 0}.login-story p{color:var(--muted);max-width:420px;font-size:.9375rem}.login-form{display:flex;justify-content:center;align-items:center;padding:45px;border-left:1px solid var(--line)}.login-box{width:100%;max-width:380px}.login-box h2{font-size:1.9rem;letter-spacing:-.7px;margin:15px 0 10px}.login-box>p{color:var(--muted);font-size:.875rem;margin-bottom:27px}.login-box .btn{width:100%;margin:6px 0}.divider{display:flex;gap:15px;align-items:center;color:#8e849e;font-size:.75rem;margin:22px 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.login-box details{margin-top:25px}.login-box summary{font-size:.875rem;cursor:pointer;color:var(--muted)}.login-box form{margin-top:18px}.login-footer{font-size:.75rem!important;margin-top:22px;color:#8c819c!important}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;font-size:.8125rem;color:#c6bdcf}.field input,.field textarea,.field select{border:1px solid #42374f;border-radius:8px;background:#17131f;color:var(--text);padding:11px 12px;width:100%;min-width:0}.field textarea{resize:vertical;min-height:85px}.field input:disabled{opacity:.55}.field small{font-size:.75rem;line-height:1.5}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.form-grid .wide{grid-column:1/-1}.check{display:flex;align-items:center;gap:10px;font-size:.875rem;line-height:1.5;margin:13px 0}.check input{accent-color:var(--purple);width:17px;height:17px}.checks{padding:3px 0 18px}.upload{border:1px dashed #625173;background:#231c2e;min-height:130px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;position:relative;padding:18px;overflow:hidden;cursor:pointer}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.upload img{max-height:95px;max-width:90%;object-fit:contain}.upload span{font-size:.8125rem;color:#c8b7dc}.upload small{font-size:.75rem}.upload:focus-within{outline:2px solid var(--accent)}dialog{background:#211b2c;color:var(--text);border:1px solid #554363;border-radius:18px;width:min(620px,calc(100% - 28px));padding:0;max-height:90vh;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#08050dc9;backdrop-filter:blur(5px)}.dialog-head{padding:24px 26px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.dialog-head small{display:block;margin-top:7px}.dialog-body{padding:25px 26px 12px}.dialog-foot{border-top:1px solid var(--line);padding:18px 26px;display:flex;justify-content:flex-end;gap:10px;background:#1c1726}.form-error{color:#ffacba;font-size:.8125rem;line-height:1.5;padding-bottom:13px}.delete-name{font-weight:600;color:var(--text)}#toast{position:fixed;bottom:25px;right:25px;z-index:100;max-width:400px;background:#dceba3;color:#252b1c;padding:15px 20px;border-radius:10px;box-shadow:0 8px 35px #0007;font-size:.875rem;display:none}#toast.error{background:#642e42;color:#ffe8ef}.boot{min-height:100vh;display:grid;place-items:center;color:var(--muted)}.menu-btn{display:none}.mobile-close{display:none}.live-label{font-size:.75rem;color:#a2ae86;display:flex;align-items:center;gap:7px}.mono{font-variant-numeric:tabular-nums}.subtitle-row{display:flex;justify-content:space-between;align-items:center;margin:25px 0 15px}.side-detail{padding:20px 24px}.side-detail .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:13px 0;font-size:.875rem}.side-detail .row span{color:var(--muted)}.event-filter{margin-bottom:20px}.screen-error{padding:25px;border:1px solid #794152;background:#351e29;border-radius:12px;line-height:1.7}.footer-note{font-size:.75rem;color:#90849f;margin-top:24px}.locked-note{font-size:.75rem;color:#b7a9c5;line-height:1.6;margin:14px 0}.title-price{font-size:1.4rem;margin:17px 0 4px}.title-price small{font-size:.75rem;margin-left:5px}.loading{opacity:.55;pointer-events:none}
@media(min-width:1600px){.main{padding-top:42px}.dashboard-grid{grid-template-columns:1.5fr 1fr}.boss-stage{min-height:290px}.boss-art{height:260px}}
@media(max-width:1180px){.shell{grid-template-columns:210px minmax(0,1fr)}.sidebar{width:210px;padding-inline:13px}.main{padding:28px 24px}.topbar{padding:0 24px}.mode-note{padding-inline:24px}.stats{gap:10px}.stat{padding:17px}.stat strong{font-size:1.65rem}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr)}.boss-copy h2{font-size:2rem}.boss-stage{padding:23px}.login-story{padding:40px}}
@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.connections{grid-template-columns:1fr}.pagehead{align-items:flex-start;flex-wrap:wrap}.quick-links{margin-bottom:10px}.login{grid-template-columns:1fr 1fr}.login-story{padding:30px}.login-story h1{font-size:2rem}.login-form{padding:25px}.login-illustration img{width:100%}}
@media(max-width:680px){.shell{display:block}.sidebar{transform:translateX(-100%);transition:transform .2s;width:255px;box-shadow:15px 0 70px #0009}.sidebar.open{transform:translateX(0)}.mobile-close{display:block;position:absolute;top:10px;right:10px;background:transparent}.menu-btn{display:inline-flex;background:transparent;padding:7px}.workspace{width:100%}.topbar{height:65px;padding:0 16px}.crumb{font-size:.75rem}.topright{gap:8px}.topright .live-label{display:none}.topright .btn{font-size:.75rem;padding:7px 9px}.mode-note{padding:9px 17px;font-size:.75rem}.main{padding:25px 17px}.pagehead{gap:17px}h1{font-size:1.8rem}.stats{gap:10px}.stat{padding:16px}.stat-top{font-size:.75rem}.stat-top .icon{width:16px}.stat strong{font-size:1.7rem}.catalog-grid{grid-template-columns:1fr}.search{min-width:0;flex:1}.toolbar{align-items:stretch}.toolbar>.actions{width:100%}.toolbar .select{min-width:0;flex:1}.tabs{gap:6px}.tab{font-size:.75rem;padding:8px 10px}.boss-stage{padding:23px;min-height:220px}.boss-copy h2{font-size:2rem}.boss-art{height:190px}.boss-footer{gap:14px;flex-wrap:wrap}.panel-head{padding:20px}.quick{padding:15px}.quick span{font-size:.8125rem}.login{display:flex;flex-direction:column}.login-story{padding:30px 24px}.login-story .brand{font-size:1.2rem}.login-illustration{display:none}.login-story h1{font-size:2rem;margin-top:23px}.login-story .eyebrow{margin-top:25px}.login-story>p{font-size:.8125rem}.login-form{border:0;padding:15px 24px 40px}.login-box{max-width:100%}.login-box h2{font-size:1.6rem}.login-footer{margin-bottom:0}.form-grid{gap:0 12px}.dialog-body{padding:20px}.dialog-head{padding:20px}.dialog-foot{padding:16px 20px}.profile-banner{padding:23px 18px;gap:13px}.profile-banner h1{font-size:1.55rem}.profile-banner .avatar{width:50px;height:50px;font-size:1.3rem}#toast{left:17px;right:17px;bottom:17px;max-width:none}.feed-list{padding-inline:18px}.feed-time{font-size:.7rem}.card-art{height:220px}.table-footer{line-height:1.6}.actions>.btn{white-space:normal}.notice{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.live-pill{margin-left:auto;font-size:.75rem;font-weight:600;padding:7px 11px;border-radius:20px;background:#283324;color:#d0e9a1;white-space:nowrap}.live-pill.off{background:#3b2430;color:#ffadbb}.inv-rarity{font-size:.875rem;color:#c7bed4;margin:20px 0 12px;font-weight:600}.inv-rarity small{margin-left:6px}.inv-card.equipped{border-color:#6c8a4a}.inv-level{color:var(--accent);font-size:.875rem}.inv-icon{font-size:1.6rem}
@media(max-width:680px){.profile-banner{flex-wrap:wrap}.live-pill{margin-left:0}}
.stats.five{grid-template-columns:repeat(5,1fr)}@media(max-width:1100px){.stats.five{grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.stats.five{grid-template-columns:repeat(2,1fr)}}
.grant-msg{display:block;margin-top:4px;white-space:normal;max-width:340px}.grant-kinds{margin-top:4px}
.chip-btn{padding:6px 11px;font-size:.75rem;font-weight:550;border-radius:6px}.chips.tight{padding:12px 0 0;gap:8px}.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.setting{padding:20px 22px;display:flex;flex-direction:column;gap:10px}.setting p{font-size:.8125rem;line-height:1.5}.setting .select{width:100%;margin-top:auto}.poke-panel{display:flex;gap:24px;padding:22px;align-items:center}.poke-art{width:120px;height:120px;flex-shrink:0;border-radius:14px;background:#2b2338;border:1px solid #4b3c57;display:flex;align-items:center;justify-content:center;overflow:hidden}.poke-art img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.poke-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.poke-body p{font-size:.875rem}.poke-form{display:flex;gap:10px}.poke-form input{flex:1;min-width:0;border:1px solid #42374f;border-radius:8px;background:#17131f;color:var(--text);padding:9px 12px}.poke-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.poke-controls label{display:flex;align-items:center;gap:8px;font-size:.8125rem}.poke-controls .select{padding:8px 28px 8px 10px;font-size:.8125rem}.action-list{padding:6px 22px}.action-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.875rem}.action-row:last-child{border-bottom:0}.action-row b{font-weight:550}.action-row small{display:block;margin-top:4px;font-size:.75rem}.inv-card .card-actions .btn{flex:1}
@media(max-width:980px){.settings-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.settings-grid{grid-template-columns:1fr}.poke-panel{flex-direction:column;align-items:stretch}.poke-art{align-self:center}.poke-form{flex-direction:column}.action-row{align-items:flex-start}}
.req-art{height:200px}.req-art img{image-rendering:auto}.req-error{color:#ffb38a;margin-top:6px}.avatar-panel{padding:22px;display:flex;flex-direction:column;gap:14px}.avatar-panel>p{font-size:.875rem}.avatar-panel .notice{margin:0}.avatar-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.avatar-form input{font-size:.8125rem;color:var(--muted);max-width:100%}.avatar-req{display:flex;gap:16px;align-items:center}.avatar-req img{width:84px;height:84px;object-fit:contain;border-radius:12px;background:#2b2338;border:1px solid #4b3c57}.avatar-req small{display:block;margin:4px 0 10px}.avatar-toggle{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}.mod-empty{padding:14px 0;font-size:.875rem}
.acq{display:flex;align-items:center;gap:12px}.acq-icon{width:38px;height:38px;border-radius:10px;background:#2b2338;border:1px solid #4b3c57;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.page-tabs{margin:-6px 0 22px}.page-tabs .tab{font-size:.875rem;padding:10px 15px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.avatar-form label.btn{position:relative;cursor:pointer}.avatar-form label.btn:focus-within{outline:2px solid var(--accent);outline-offset:3px}.avatar-form .avatar-req{width:100%}
.sidebar{overflow-y:auto}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.avatar:has(img){background:#2b2338;overflow:hidden}.navitem .ext{font-size:.75rem;color:var(--muted);margin-left:2px}.wiki-link{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.sidebar .brand{font-size:1.05rem;white-space:nowrap;letter-spacing:-.3px}
.equipped{margin-bottom:25px}.equipped h2{margin-bottom:14px}.equipped-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.eq-label{display:block;font-size:.75rem;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple);margin-bottom:8px}.eq-empty{border-style:dashed}.eq-empty h3{margin-top:14px}.inv-tabs{margin:28px 0 6px}.inv-tabs .tab{font-size:.9rem;padding:10px 16px;display:inline-flex;align-items:center;gap:8px}.inv-tabs .badge{padding:2px 7px}
@media(max-width:680px){.equipped-grid{grid-template-columns:1fr}}
.gacha-panel{padding:22px;display:flex;flex-direction:column;gap:16px}.gacha-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.gacha-head p{font-size:.9rem;margin-bottom:4px}.gacha-buttons{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}.gacha-buttons>.btn{flex-direction:column;gap:2px;min-width:96px}.gacha-buttons>.btn small{font-size:.7rem;font-weight:500;opacity:.8;color:inherit}.gacha-custom{display:flex;gap:8px}.gacha-custom input{width:130px;border:1px solid #42374f;border-radius:8px;background:#17131f;color:var(--text);padding:9px 11px}.gacha-panel .notice{margin:0}.gacha-last{border-top:1px solid var(--line);padding-top:14px}.gacha-last p{font-size:.875rem;margin-bottom:8px}.gacha-result{display:flex;flex-direction:column;gap:8px}.gacha-result small{display:block}.gacha-top{margin:0;padding-left:4px;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.875rem}
@media(max-width:680px){.gacha-buttons{width:100%}.gacha-buttons>.btn{flex:1;min-width:0}.gacha-custom{width:100%}.gacha-custom input{flex:1;width:auto}}
.stats.inv-stats{grid-template-columns:repeat(4,1fr)}@media(max-width:680px){.stats.inv-stats{grid-template-columns:repeat(2,1fr)}}
.ticket-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}@media(max-width:1180px){.ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.ticket-grid{grid-template-columns:1fr}}
.ticket-card{display:flex;flex-direction:column;gap:10px;padding:16px;background:#1d1927}.ticket-card h3{font-size:.95rem}.ticket-card p{font-size:.8rem;flex:1}.ticket-card .select{width:100%;min-width:0}.ticket-card .btn{width:100%}
.ticket-top{display:flex;justify-content:space-between;align-items:center}.ticket-code{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:1px;padding:4px 7px;border-radius:6px}.ticket-code.legendary{background:#3a3020;color:#f3d27e}.ticket-code.mythic{background:#3b2028;color:#ff9db0}
.ticket-saved{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}.ticket-use{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ticket-use>span{font-size:.85rem;min-width:180px}.ticket-use .select{flex:1;min-width:0;max-width:340px}

/* --- Gemas de Alma (Soul Gems) --- */
.soulgems-intro {
  padding: 24px 28px !important;
  margin-bottom: 24px;
}

.soulgems-intro-text h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.soulgems-intro-text p {
  color: var(--muted, #aaa2ba);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 14px;
}

.soulgem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.soulgem-card {
  position: relative;
  background: #181524;
  border: 1px solid var(--line, #2c2738);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

.soulgem-card:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.soulgem-card.equipped {
  border-color: #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.soulgem-card.unowned {
  opacity: 0.65;
  filter: grayscale(0.85);
}

.soulgem-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soulgem-portrait {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 150px;
  padding: 8px 0;
  background: radial-gradient(circle, var(--gem-color, rgba(255,255,255,0.08)) 0%, transparent 70%);
  border-radius: 0.75rem;
}

.soulgem-img {
  max-height: 150px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 16px var(--gem-color, rgba(255, 255, 255, 0.35)));
  transition: filter 0.4s ease, transform 0.4s ease;
}

.soulgem-img.grayscale {
  filter: grayscale(1) opacity(0.6);
}

.soulgem-img.rerolling {
  animation: soulgemWhiteFlash 1.2s ease-in-out infinite;
}

@keyframes soulgemWhiteFlash {
  0% {
    filter: brightness(1) drop-shadow(0 0 10px var(--gem-color, #fff));
    transform: scale(1);
  }
  50% {
    filter: brightness(4.5) contrast(1.5) drop-shadow(0 0 35px #ffffff);
    transform: scale(1.08) rotate(1deg);
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 10px var(--gem-color, #fff));
    transform: scale(1);
  }
}

.sparkle-particle {
  position: absolute;
  pointer-events: none;
  font-size: 1.3rem;
  animation: floatSparkleUp 1.2s ease-out forwards;
  z-index: 10;
}

@keyframes floatSparkleUp {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(var(--tx, 0), -25px) scale(1.3) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 0), -75px) scale(0.2) rotate(180deg);
  }
}

.soulgem-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.soulgem-char {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #aaa2ba);
}

.soulgem-title-block h3 {
  margin: 3px 0 6px;
  font-size: 1.15rem;
  color: #fff;
}

.soulgem-affinity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.85rem;
  margin-top: 4px;
}

.soulgem-affinity small {
  color: #f6d365;
  font-weight: 500;
}

.soulgem-affinity b {
  color: #f3f0f8;
}

.affinity-note {
  display: block;
  font-size: 0.72rem !important;
  color: #bdaecc !important;
  line-height: 1.35;
  margin-top: 3px;
}

.soulgem-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
}

.soulgem-slots-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.75rem;
  padding: 0.65rem;
}

.soulgem-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.45rem 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.88rem;
  transition: border-color 0.2s, background 0.2s;
}

.soulgem-slot-row.locked {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.1);
}

.soulgem-slot-row.locked-slot {
  opacity: 0.8;
  border-style: dashed;
}

.slot-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: #f5f2fa;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.slot-val {
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  min-width: 48px;
  text-align: right;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-pos {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

.stat-neg {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.15);
}

.stat-zero {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}

.btn-lock {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
  border-radius: 0.35rem;
  color: var(--muted, #9e9aa7);
  transition: all 0.2s;
  line-height: 1;
}

.btn-lock:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.btn-lock.locked {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.15);
}

.btn-lock:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Banner en tarjeta para avisar que hay una tirada pendiente */
.soulgem-pending-card-box {
  background: rgba(147, 51, 234, 0.12);
  border: 1px solid #a855f7;
  border-radius: 10px;
  padding: 12px;
  margin-top: 6px;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: pendingPulse 2.5s ease-in-out infinite;
}

@keyframes pendingPulse {
  0%, 100% { border-color: #7c3aed; box-shadow: 0 0 12px rgba(124, 58, 237, 0.2); }
  50% { border-color: #c084fc; box-shadow: 0 0 20px rgba(192, 132, 252, 0.4); }
}

.pending-notice-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pending-sparkle-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.pending-notice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pending-notice-text strong {
  font-size: 0.88rem;
  color: #f3e8ff;
}

.pending-notice-text small {
  font-size: 0.75rem;
  color: #c4b5fd;
  line-height: 1.3;
}

/* Modal de comparación de rolleo (Antes vs Después) */
.reroll-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 0.5rem 0 1rem;
}

@media (max-width: 600px) {
  .reroll-modal-grid {
    grid-template-columns: 1fr;
  }
}

.reroll-col {
  background: rgba(18, 15, 26, 0.85);
  border: 1px solid var(--line, #322d40);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reroll-col.new-col {
  background: rgba(147, 51, 234, 0.08);
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.reroll-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.reroll-col-head h4 {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0;
  color: #f3f0f8;
}

.reroll-col.new-col .reroll-col-head h4 {
  color: #f0abfc;
}

.reroll-slots-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.modal-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.modal-stat-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: #f3effa;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.full-width {
  width: 100% !important;
  margin-top: auto;
}

.soulgem-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.reroll-info-bar {
  font-size: 0.8rem;
  color: var(--muted, #9e9aa7);
}

.soulgem-actions .buttons-row {
  display: flex;
  gap: 0.5rem;
}

.soulgem-actions .buttons-row > .btn {
  flex: 1;
}

/* Vista de Gema equipada en inventario */
.eq-soulgem-card {
  border-color: #10b981;
}

.soulgem-icon-mini {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.soulgem-icon-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eq-soulgem-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.eq-slot-tag {
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.prestige-btn {
  background: linear-gradient(135deg, #d4af37 0%, #f9d976 100%) !important;
  color: #1a1528 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(249, 217, 118, 0.4);
}

.prestige-btn:hover {
  background: linear-gradient(135deg, #f9d976 0%, #ffeaa7 100%) !important;
  box-shadow: 0 0 16px rgba(249, 217, 118, 0.75);
  transform: translateY(-1px);
}

/* Botón de Semilla del Sufrimiento */
.seed-btn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(16, 185, 129, 0.22) 100%) !important;
  color: #86efac !important;
  border: 1px solid rgba(74, 222, 128, 0.4) !important;
  transition: all 0.2s ease !important;
}

.seed-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(16, 185, 129, 0.4) 100%) !important;
  color: #bbf7d0 !important;
  border-color: rgba(74, 222, 128, 0.75) !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.35);
  transform: translateY(-1px);
}

/* Animación de giro dinámico en ranuras de Gemas de Alma al rollear */
.soulgem-slot-row.rolling-slot {
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
  transition: all 0.2s ease;
}

.soulgem-slot-row.rolling-slot .slot-val {
  animation: slotRollPulse 0.35s ease-in-out infinite alternate !important;
  filter: blur(0.8px);
  opacity: 0.65;
}

@keyframes slotRollPulse {
  0% { transform: translateY(-2px); opacity: 0.45; }
  100% { transform: translateY(2px); opacity: 0.95; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  display: inline-block;
  animation: spin 0.75s linear infinite;
}

/* Leaderboard / Ranking Styles */
.podium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
  align-items: end;
}
@media (max-width: 768px) {
  .podium-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .podium-1 { order: 1 !important; transform: none !important; }
  .podium-2 { order: 2 !important; }
  .podium-3 { order: 3 !important; }
}
.podium-card {
  position: relative;
  background: #191526;
  border: 1px solid var(--line, #2c2738);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.podium-1 {
  border-color: #f59e0b;
  background: radial-gradient(circle at top, rgba(245, 158, 11, 0.18) 0%, #191526 70%);
  transform: scale(1.04);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.25);
  order: 2;
  z-index: 2;
}
.podium-2 {
  border-color: #94a3b8;
  background: radial-gradient(circle at top, rgba(148, 163, 184, 0.12) 0%, #191526 70%);
  order: 1;
}
.podium-3 {
  border-color: #b45309;
  background: radial-gradient(circle at top, rgba(180, 83, 9, 0.12) 0%, #191526 70%);
  order: 3;
}
.podium-badge {
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.podium-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.podium-val {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--accent, #dceba3);
  font-variant-numeric: tabular-nums;
}
.podium-weapon {
  font-size: 0.8rem;
  color: var(--muted, #948baf);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  background: #252033;
  color: #c7bed4;
}
.rank-1 { background: #f59e0b; color: #181524; }
.rank-2 { background: #94a3b8; color: #181524; }
.rank-3 { background: #b45309; color: #fff; }
.leaderboard-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* --- Tienda y Bazar de Halloween --- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.store-item-card {
  background: #1d1927;
  border: 1px solid var(--line, #2c2738);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .15s ease, border-color .15s ease;
}
.store-item-card:hover {
  border-color: #5d4e73;
  transform: translateY(-2px);
}
.store-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.candy-price {
  color: #f7a048;
  font-size: 0.95rem;
  font-weight: 700;
}
.pts-price {
  color: #e5d870;
  font-size: 0.95rem;
  font-weight: 700;
}
.store-item-card h3 {
  font-size: 1rem;
  line-height: 1.3;
}
.store-item-card p {
  font-size: 0.8rem;
  color: var(--muted);
  flex: 1;
}
.store-item-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.store-item-actions .btn {
  width: 100%;
}
.halloween-card {
  border-color: #5c3c1e;
  background: linear-gradient(135deg, #241920, #1c1524);
}
.halloween-card:hover {
  border-color: #b36525;
}
.halloween-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.halloween-panel {
  border-color: #633e21 !important;
  background: radial-gradient(circle at 90% 10%, rgba(247, 160, 72, 0.08), transparent 40%), var(--panel) !important;
}
.shop-subhead {
  font-size: 0.95rem;
  color: #dfd5ec;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.shop-shortcut-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  margin: 22px 0;
  background: linear-gradient(105deg, #2a203b, #1e192a);
  border: 1px solid #4f3b68;
  border-radius: 14px;
  flex-wrap: wrap;
}
.shop-shortcut-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.shop-shortcut-icon {
  font-size: 2.2rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #392c50;
  border-radius: 12px;
}

/* Multi-compra de tickets en Tienda / Bazar */
.ticket-qty-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ticket-qty-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}
.ticket-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ticket-qty-input {
  width: 54px !important;
  padding: 4px 6px !important;
  text-align: center;
  font-weight: 700;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
  height: 30px !important;
  background: var(--bg, #14111d) !important;
  border: 1px solid var(--line, #383049) !important;
  color: #fff !important;
}
.ticket-quick-btns {
  display: flex;
  gap: 4px;
}
.ticket-step {
  padding: 2px 7px !important;
  font-size: 0.75rem !important;
  height: 28px !important;
  min-height: 28px !important;
  line-height: 1 !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #d1c4e9 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ticket-step:hover {
  background: rgba(247, 160, 72, 0.2) !important;
  border-color: #f7a048 !important;
  color: #fff !important;
}

/* Imágenes de Tickets */
.ticket-badge-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  margin-right: 4px;
}
.ticket-inline-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: -3px;
  display: inline-block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.pass-ticket-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.stat-ticket {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Previews temáticas para Halloween en Tienda */
.theme-preview-calabaza {
  border-left: 3px solid #ff7b00 !important;
}
.theme-preview-fantasma {
  border-left: 3px solid #e0e0ff !important;
}
.theme-preview-bruja {
  border-left: 3px solid #9933ff !important;
}
.style-preview-halloween {
  border-left: 3px solid #ff5500 !important;
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.1);
}
.style-preview-cementerio {
  border-left: 3px solid #556b2f !important;
  box-shadow: 0 0 10px rgba(85, 107, 47, 0.1);
}

/* --- Panel de Estadísticas de Combate de la Build --- */
.combat-stats-section {
  background: linear-gradient(135deg, #1b1828, #221c32);
  border: 1px solid #45375c;
  border-radius: var(--radius, 16px);
  padding: 24px 26px;
  margin-bottom: 25px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.combat-stats-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #bea6ef, #dceba3, #bea6ef);
}
.combat-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.combat-stats-title-group h2 {
  font-size: 1.25rem;
  margin: 4px 0 6px;
  letter-spacing: -0.3px;
  color: #fff;
}
.combat-stats-badge {
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent, #dceba3);
  background: rgba(220, 235, 163, 0.12);
  border: 1px solid rgba(220, 235, 163, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}
.combat-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.combat-stat-card {
  background: rgba(16, 14, 24, 0.65);
  border: 1px solid rgba(75, 60, 95, 0.6);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.combat-stat-card:hover {
  border-color: rgba(190, 166, 239, 0.5);
  transform: translateY(-2px);
}
.cstat-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted, #aaa2ba);
  font-weight: 600;
}
.cstat-icon {
  font-size: 1.1rem;
}
.cstat-val {
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1.1;
  margin-top: 4px;
}
.cstat-glow {
  color: #fed7aa;
  text-shadow: 0 0 12px rgba(251, 146, 60, 0.35);
}
.cstat-green {
  color: #a7f3d0;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.35);
}
.cstat-tier-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-block;
  width: fit-content;
}
.cstat-tier-pill.tier-normal {
  background: rgba(254, 240, 138, 0.12);
  color: #fef08a;
  border: 1px solid rgba(254, 240, 138, 0.25);
}
.cstat-tier-pill.tier-naranja {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.35);
}
.cstat-tier-pill.tier-rojo {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
}
.cstat-tier-pill.tier-astral {
  background: rgba(192, 132, 252, 0.22);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.5);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.25);
}
.combat-substats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.combat-substat-box {
  background: rgba(16, 14, 24, 0.45);
  border: 1px solid rgba(75, 60, 95, 0.4);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.substat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted, #aaa2ba);
  font-weight: 650;
}
.combat-substat-box b {
  font-size: 0.95rem;
  color: #ede9fe;
}
.combat-passives-box {
  border-top: 1px solid rgba(75, 60, 95, 0.5);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.combat-chips {
  padding: 4px 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.combat-badge {
  font-size: 0.75rem;
  padding: 6px 11px;
  border-radius: 7px;
  background: rgba(43, 33, 58, 0.8) !important;
  border: 1px solid rgba(190, 166, 239, 0.3) !important;
  color: #e2d9f3 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.combat-badge b {
  color: #fff;
  font-weight: 700;
}
.combat-badge .badge-desc {
  color: #d8b4fe;
  opacity: 0.95;
}

@media(max-width: 900px) {
  .combat-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .combat-substats-row {
    grid-template-columns: 1fr;
  }
}
@media(max-width: 540px) {
  .combat-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Widget Hosting / Donación Mercado Pago --- */
.hosting-card {
  margin: 14px 0 10px;
  padding: 12px 10px;
  background: linear-gradient(145deg, #241c30, #191424);
  border: 1px solid #4a3860;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.hosting-card:hover {
  border-color: #bea6ef;
}

.hosting-img-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hosting-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hosting-card:hover .hosting-img {
  transform: scale(1.08) rotate(-3deg);
}

.hosting-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #f3f0f8;
  line-height: 1.25;
  margin-bottom: 4px;
}

.hosting-desc {
  font-size: 0.6875rem;
  color: #a9a1b9;
  line-height: 1.35;
  margin-bottom: 10px;
}

.btn-mp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(135deg, #009ee3 0%, #007cb6 100%);
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.1px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.25;
}

.btn-mp:hover {
  background: linear-gradient(135deg, #0cb1fb 0%, #008cd4 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 158, 227, 0.52);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-mp:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 158, 227, 0.3);
}

.btn-mp-icon,
.btn-mp img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.btn-copy-alias {
  margin-top: 6px;
  width: 100%;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed #4e3e63;
  border-radius: 6px;
  color: #b7a9c5;
  font-size: 0.6875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-copy-alias:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #bea6ef;
  color: #ffffff;
}

/* ==========================================
   PASE DE BATALLA (BATTLE PASS)
   ========================================== */
.pass-hero {
  background: linear-gradient(135deg, #241638 0%, #170e26 50%, #2e1545 100%);
  border: 1px solid #5a3889;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(174, 94, 255, 0.1);
}
.pass-hero-content {
  position: relative;
  z-index: 2;
}
.pass-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(186, 104, 200, 0.2);
  border: 1px solid #ba68c8;
  color: #e1bee7;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.pass-hero h2 {
  font-size: 1.75rem;
  margin: 0 0 8px 0;
  color: #fff;
  text-shadow: 0 2px 10px rgba(186, 104, 200, 0.5);
}
.pass-hero p {
  color: #d1c4e9;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 18px 0;
  max-width: 750px;
}
.pass-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
}
.pass-stat-box {
  background: rgba(18, 12, 30, 0.75);
  border: 1px solid #4a3468;
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pass-stat-box span {
  font-size: 0.75rem;
  color: #a491bc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pass-stat-box b {
  font-size: 1.1rem;
  color: #fff;
}
.pass-progress-wrap {
  margin-top: 16px;
  background: rgba(12, 8, 20, 0.6);
  border: 1px solid #3c2a54;
  border-radius: 8px;
  padding: 12px 16px;
}
.pass-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #d1c4e9;
  margin-bottom: 8px;
}
.pass-progress-bar-bg {
  width: 100%;
  height: 12px;
  background: #191024;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #442e61;
}
.pass-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #9c27b0, #e91e63, #ffca28);
  border-radius: 6px;
  transition: width 0.4s ease;
  box-shadow: 0 0 12px rgba(233, 30, 99, 0.6);
}

.pass-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 18px;
  background: #171124;
  border: 1px solid #2d2242;
  border-radius: 8px;
}
.pass-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: #cfc2df;
}
.pass-legend-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pass-dot-free {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7e57c2;
  box-shadow: 0 0 6px #7e57c2;
}
.pass-dot-sub {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffb300;
  box-shadow: 0 0 6px #ffb300;
}

/* =========================================================
   PISTA UNIFICADA DEL PASE DE BATALLA (Free Arriba - Barra Centro - Sub Abajo)
   ========================================================= */

.pass-track-container {
  background: #120b1d;
  border: 1px solid #2f2043;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.pass-track-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 4px 12px;
  border-bottom: 1px solid #231737;
  margin-bottom: 12px;
}

.pass-track-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 4px 0;
  border-top: 1px solid #231737;
  margin-top: 12px;
}

.pass-legend-symbols {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: #a491bc;
  background: rgba(18, 11, 29, 0.7);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #2f2043;
}

.pass-legend-symbols span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.pass-label-free {
  color: #c4b5fd;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pass-label-sub {
  color: #fbc02d;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pass-track-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 4px 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #7b1fa2 #150d24;
}

.pass-track-scroll::-webkit-scrollbar {
  height: 8px;
}

.pass-track-scroll::-webkit-scrollbar-track {
  background: #150d24;
  border-radius: 4px;
}

.pass-track-scroll::-webkit-scrollbar-thumb {
  background: #7b1fa2;
  border-radius: 4px;
}

.pass-track-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 175px;
  max-width: 175px;
  flex-shrink: 0;
  gap: 10px;
  position: relative;
}

/* Tarjetas de recompensa (Free y Sub) */
.pass-track-card {
  width: 100%;
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 120px;
  justify-content: flex-start;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.22s ease, filter 0.2s ease;
  box-sizing: border-box;
  user-select: none;
}

.pass-track-card.free {
  background: #171126;
  border: 1px solid #36264d;
}

.pass-track-card.free.unlocked {
  border-color: #6a42a0;
  background: #1c132e;
}

.pass-track-card.free.claimable {
  border: 2px solid #ffd54f !important;
  background: linear-gradient(135deg, rgba(46, 26, 74, 0.95), rgba(74, 43, 107, 0.95)) !important;
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.55), inset 0 0 10px rgba(255, 213, 79, 0.2) !important;
  cursor: pointer !important;
  animation: passCardGlowFree 2.2s ease-in-out infinite alternate;
}

.pass-track-card.free.claimable:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 0 24px rgba(255, 213, 79, 0.85), inset 0 0 14px rgba(255, 213, 79, 0.35) !important;
  border-color: #ffe082 !important;
}

.pass-track-card.free.claimed {
  opacity: 0.65;
  border-color: #2e7d32;
  background: rgba(18, 28, 22, 0.85);
}

.pass-track-card.sub {
  background: linear-gradient(135deg, rgba(38, 18, 54, 0.95) 0%, rgba(20, 10, 30, 0.98) 100%);
  border: 1px solid #5c2c6d;
}

.pass-track-card.sub.unlocked {
  border-color: #9c47ad;
}

.pass-track-card.sub.claimable {
  border: 2px solid #e1bee7 !important;
  background: linear-gradient(135deg, rgba(82, 28, 102, 0.98), rgba(46, 14, 60, 0.98)) !important;
  box-shadow: 0 0 18px rgba(225, 190, 231, 0.65), inset 0 0 12px rgba(206, 147, 216, 0.25) !important;
  cursor: pointer !important;
  animation: passCardGlowSub 2.2s ease-in-out infinite alternate;
}

.pass-track-card.sub.claimable:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 0 26px rgba(225, 190, 231, 0.95), inset 0 0 16px rgba(206, 147, 216, 0.4) !important;
  border-color: #f3e5f5 !important;
}

.pass-track-card.sub.claimed {
  opacity: 0.65;
  border-color: #2e7d32;
  background: rgba(18, 28, 22, 0.85);
}

.pass-track-card.locked {
  opacity: 0.5;
}

@keyframes passCardGlowFree {
  0% { box-shadow: 0 0 12px rgba(255, 213, 79, 0.4), inset 0 0 6px rgba(255, 213, 79, 0.15); }
  100% { box-shadow: 0 0 22px rgba(255, 213, 79, 0.75), inset 0 0 12px rgba(255, 213, 79, 0.3); }
}

@keyframes passCardGlowSub {
  0% { box-shadow: 0 0 14px rgba(225, 190, 231, 0.5), inset 0 0 8px rgba(206, 147, 216, 0.2); }
  100% { box-shadow: 0 0 24px rgba(225, 190, 231, 0.85), inset 0 0 14px rgba(206, 147, 216, 0.35); }
}

.pass-track-card:not(.claimable):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.pass-track-icon {
  font-size: 2.1rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.pass-track-name {
  font-weight: 800;
  font-size: 0.86rem;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 2px;
  word-break: break-word;
}

.pass-track-subdesc {
  font-size: 0.68rem;
  color: #b39ddb;
  line-height: 1.15;
  margin-bottom: 6px;
  word-break: break-word;
}

.pass-track-action {
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: center;
}

/* Pastillas de estado pequeñas */
.pass-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.pass-status-pill.claimable {
  background: linear-gradient(135deg, #ffd54f, #ffb300);
  color: #1a0f2e;
  box-shadow: 0 2px 8px rgba(255, 179, 0, 0.4);
}

.pass-status-pill.claimable.sub {
  background: linear-gradient(135deg, #e1bee7, #ba68c8);
  color: #1c0529;
  box-shadow: 0 2px 8px rgba(186, 104, 200, 0.4);
}

.pass-status-pill.claimed {
  background: rgba(46, 125, 50, 0.2);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.35);
}

.pass-status-pill.locked {
  background: rgba(0, 0, 0, 0.35);
  color: #837599;
}

.pass-status-pill.sub-req {
  background: rgba(186, 104, 200, 0.15);
  color: #ce93d8;
  border: 1px solid rgba(186, 104, 200, 0.3);
}

/* Barra de progreso y nodo central de nivel */
.pass-track-node {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pass-track-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #25163b;
  transform: translateY(-50%);
  z-index: 1;
}

.pass-track-col.unlocked .pass-track-line {
  background: linear-gradient(90deg, #9c27b0, #ffca28);
}

.pass-node-badge {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #170f26;
  border: 2px solid #3c2954;
  color: #8c76a5;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pass-track-col.unlocked .pass-node-badge {
  background: linear-gradient(135deg, #7b1fa2, #ab47bc);
  border-color: #ffd54f;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.5);
}

.pass-track-col.current .pass-node-badge {
  transform: scale(1.18);
  border-color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.85), 0 0 6px #ffffff;
}

.pass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
.pass-tier-rewards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  flex: 1;
}
.pass-reward-box {
  background: #1c142b;
  border: 1px solid #372950;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
}
.pass-reward-box.sub-reward {
  background: linear-gradient(135deg, #241629 0%, #1c1328 100%);
  border: 1px solid #6b406e;
}
.pass-reward-box.sub-reward::before {
  content: "⭐ SUB";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffca28;
  letter-spacing: 0.05em;
}
.pass-reward-icon {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  flex-shrink: 0;
}
.pass-reward-info {
  flex: 1;
  min-width: 0;
}
.pass-reward-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #f3ecff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pass-reward-desc {
  font-size: 0.75rem;
  color: #a491bc;
  line-height: 1.3;
  margin-top: 2px;
}
.pass-claim-action {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.badge-claimed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #81c784;
  font-weight: 600;
}
.badge-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #9e8ea7;
}

/* Moneda de puntos personalizada (Coin.png) */
.coin-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.16em;
  object-fit: contain;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.stat-coin {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.pass-coin-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.bruja-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.22em;
  object-fit: contain;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.stat-bruja {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* Semilla del sufrimiento personalizada (grief_seed.png) */
.seed-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  object-fit: contain;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.stat-seed {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.pass-seed-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

/* Icono oficial de Nivel (nivel.png) */
.stat-level {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.level-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.22em;
  object-fit: contain;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.boss-status{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.boss-status-title{font-size:.6875rem;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--purple);margin:0 0 10px}.boss-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;font-size:.8125rem}.boss-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.boss-box{border:1px solid var(--line);background:#1d1927;border-radius:10px;padding:12px 14px;min-width:0}.boss-box>span{display:block;font-size:.75rem;color:var(--muted)}.boss-box>b{display:block;font-size:1.35rem;font-weight:600;margin:6px 0 2px;font-variant-numeric:tabular-nums}.boss-box small{font-size:.7rem}.boss-box ul{list-style:none;margin:6px 0 0;padding:0;font-size:.72rem;color:#c9bfd6;line-height:1.55}.boss-box li{overflow-wrap:anywhere}.boss-admin{margin:0 24px 22px;padding:16px 18px;border:1px solid #3d334d;border-radius:12px;background:#1d1927}.boss-admin-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}.boss-level{display:flex;flex-direction:column;gap:6px;font-size:.75rem;color:var(--muted)}.boss-level input{width:110px;border:1px solid #42374f;border-radius:8px;background:#17131f;color:var(--text);padding:10px 12px}.boss-admin small{display:block;font-size:.75rem;line-height:1.5}.boss-command-status{margin-top:10px;font-size:.8125rem;color:#d7cbe6}
@media(max-width:680px){.boss-admin{margin:0 18px 18px}.boss-admin-row .btn{flex:1}.boss-boxes{grid-template-columns:1fr 1fr}}

/* Pestaña Colección de Prestigio */
.collection-summary-card {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 16px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.collection-summary-text h3 {
  margin: 0 0 4px;
  color: #fde047;
  font-size: 1.15rem;
}
.collection-summary-text p {
  margin: 0;
  color: #fef08a;
  font-size: 0.85rem;
  line-height: 1.4;
}
.collection-total-badge {
  text-align: right;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(234, 179, 8, 0.4);
}
.collection-total-badge span {
  display: block;
  font-size: 0.75rem;
  color: #fde047;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.collection-total-badge b {
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 0 12px rgba(234, 179, 8, 0.6);
}
.collection-badge-dmg {
  display: inline-block;
  background: rgba(234, 179, 8, 0.2);
  color: #fde047;
  border: 1px solid #eab308;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
}