.battle-pass,
.battle-pass button,
.battle-pass-header-button { font-family:"Cairo",sans-serif; letter-spacing:0; }
.battle-pass { --bp-red:#b82f43; --bp-red-bright:#e35361; --bp-gold:#d7af5a; --bp-green:#51c47b; --bp-panel:rgba(8,8,10,.96); color:#eee6dc; max-width:1580px; margin:0 auto; }
.bp-hero { min-height:96px; display:grid; grid-template-columns:minmax(300px,1.25fr) minmax(390px,.75fr); align-items:center; gap:22px; padding:14px 20px; border:1px solid #60303a; border-radius:4px; background:linear-gradient(90deg,rgba(4,4,5,.98),rgba(14,6,9,.87) 52%,rgba(45,8,15,.62)),url("assets/ui/bloodstorm.png") center 42%/cover no-repeat; box-shadow:inset 0 -50px 70px rgba(0,0,0,.68),0 10px 24px rgba(0,0,0,.34); }
.bp-hero-copy>span { color:var(--bp-red-bright); font-weight:800; font-size:.78rem; }
.bp-hero-copy h2 { margin:1px 0 2px; color:#f3dba5; font-size:1.58rem; line-height:1.15; text-shadow:0 2px 12px #000; }
.bp-hero-copy p { max-width:720px; margin:0; color:#bcb2aa; font-size:.76rem; line-height:1.5; }
.bp-season-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid #49373a; background:#49373a; }
.bp-season-meta>div { min-height:52px; display:flex; flex-direction:column; justify-content:center; padding:6px 10px; background:rgba(7,7,8,.93); }
.bp-season-meta small,.bp-progress-copy small { color:#8d8580; font-size:.7rem; }
.bp-season-meta b { color:#f2d690; margin-top:3px; }
.bp-season-meta b.is-active { color:#78d39a; }
.bp-progress-panel { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:7px; padding:8px 12px; border:1px solid #3b3330; background:var(--bp-panel); }
.bp-level-seal { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--bp-gold); background:#120b0c; color:#f0cb75; font-size:1.05rem; font-weight:900; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.bp-progress-copy>div:first-child { display:flex; justify-content:space-between; gap:15px; margin-bottom:5px; }
.bp-progress-copy span { direction:ltr; color:#b6aaa2; font-size:.76rem; }
.bp-progress { height:10px; border:1px solid #443638; background:#080708; overflow:hidden; }
.bp-progress i { display:block; height:100%; background:linear-gradient(90deg,#72202d,#d14756,#e0b361); box-shadow:0 0 12px rgba(209,71,86,.55); transition:width .35s ease; }
.bp-claim-all,.bp-purchase button,.bp-spine-toolbar>button { border:1px solid #b88a3b; border-radius:3px; background:#21160d; color:#f4d693; font-weight:800; cursor:pointer; }
.bp-claim-all { min-width:126px; min-height:40px; }
.bp-claim-all:disabled { opacity:.38; cursor:default; }
.bp-purchase { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:7px; padding:8px 13px; border:1px solid #743041; border-right:4px solid var(--bp-red-bright); background:linear-gradient(90deg,rgba(15,10,11,.98),rgba(70,12,24,.55)); }
.bp-purchase>div { display:grid; }
.bp-purchase span { color:var(--bp-red-bright); font-size:.7rem; font-weight:800; }
.bp-purchase strong { margin:1px 0; }
.bp-purchase small { color:#918783; }
.bp-purchase button { min-width:190px; padding:9px 15px; border-color:var(--bp-red-bright); background:#3a1018; color:#ffd8c9; }
.bp-spine-toolbar { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px; padding:5px 10px; border:1px solid #44382d; background:linear-gradient(180deg,#151311,#0c0d0d); }
.bp-spine-toolbar>div:first-child { display:grid; }
.bp-spine-toolbar b { color:#f0d08a; font-size:.95rem; }
.bp-spine-toolbar span { color:#8e877e; font-size:.65rem; }
.bp-spine-toolbar>button { min-height:34px; padding:5px 13px; }
.bp-spine-legend { display:flex; align-items:center; gap:14px; }
.bp-spine-legend span { display:flex; align-items:center; gap:5px; }
.bp-spine-legend span::before { content:""; width:8px; height:8px; border:1px solid currentColor; }
.bp-spine-legend .claimed { color:#67cf8b; }
.bp-spine-legend .ready { color:#edc66d; }
.bp-spine-legend .locked { color:#646667; }
.bp-horizontal-shell { height:402px; display:grid; grid-template-columns:40px minmax(0,1fr) 40px; position:relative; overflow:hidden; border:1px solid #43372d; border-top:0; background:radial-gradient(ellipse at center,rgba(92,39,25,.12),transparent 62%),linear-gradient(180deg,#101212,#070808); box-shadow:inset 0 0 45px #000c; }
.bp-horizontal-viewport { min-width:0; overflow-x:auto; overflow-y:hidden; direction:ltr; cursor:grab; scrollbar-width:thin; scrollbar-color:#77542c #080909; scroll-behavior:smooth; }
.bp-horizontal-viewport.is-dragging { cursor:grabbing; scroll-behavior:auto; }
.bp-horizontal-viewport::-webkit-scrollbar { height:9px; }
.bp-horizontal-viewport::-webkit-scrollbar-track { background:#070808; }
.bp-horizontal-viewport::-webkit-scrollbar-thumb { background:#77542c; border:2px solid #080909; }
.bp-scroll-arrow { z-index:4; border:0; border-inline:1px solid #513d28; background:rgba(8,9,9,.95); color:#e3bc66; font-size:2rem; cursor:pointer; }
.bp-scroll-arrow:hover { background:#21160e; color:#ffe09a; }
.bp-spine-track { min-width:max-content; height:100%; display:flex; align-items:stretch; padding:15px 60px 8px; direction:ltr; position:relative; }
.bp-spine-track::before { content:""; position:absolute; top:195px; left:0; right:0; height:4px; border-block:1px solid #644a2a; background:linear-gradient(90deg,#351c1f,#bd8a3f 48%,#351c1f); box-shadow:0 0 14px rgba(190,126,48,.45); }
.bp-spine-level { width:106px; flex:0 0 106px; display:grid; grid-template-rows:158px 48px 158px; justify-items:center; position:relative; direction:rtl; }
.bp-spine-level::after { content:""; position:absolute; top:174px; width:1px; height:45px; background:#76552e; opacity:.8; }
.bp-spine-level.is-current::before { content:""; position:absolute; z-index:1; top:0; bottom:0; width:2px; background:linear-gradient(transparent,#f4ca63 12%,#f4ca63 88%,transparent); box-shadow:0 0 16px #e1a52f; }
.bp-premium-node { align-self:end; padding-bottom:8px; }
.bp-free-node { align-self:start; padding-top:8px; }
.bp-spine-marker { z-index:2; align-self:center; display:grid; place-items:center; position:relative; }
.bp-spine-marker i { width:28px; height:28px; border:2px solid #72562e; transform:rotate(45deg); background:#0b0c0c; box-shadow:0 0 0 5px #090a0a; }
.bp-spine-marker b { position:absolute; color:#a69b87; font-size:.72rem; }
.bp-spine-marker small { position:absolute; top:43px; color:#766d62; font-size:.52rem; white-space:nowrap; }
.bp-spine-level.is-unlocked .bp-spine-marker i { border-color:#bd9345; background:#2a1b0e; }
.bp-spine-level.is-unlocked .bp-spine-marker b { color:#f2d184; }
.bp-spine-level.is-current .bp-spine-marker i { border-color:#f1ca69; background:#d39c36; box-shadow:0 0 18px #d8952d,0 0 0 5px #120e09; }
.bp-spine-level.is-current .bp-spine-marker b { color:#130d05; font-weight:900; }
.bp-spine-level.is-apex { width:150px; flex-basis:150px; }
.bp-spine-level.is-apex .bp-spine-marker i { width:38px; height:38px; border-color:#cc4557; background:#3e1018; }
.bp-spine-level.is-apex .bp-spine-marker b { color:#ffd8b2; font-size:.82rem; }
.bp-spine-reward { width:94px; min-height:140px; display:grid; grid-template-rows:62px minmax(30px,1fr) 21px; place-items:center; gap:4px; position:relative; padding:6px; border:1px solid #49433c; border-radius:3px; background:#0c0e0e; color:#ddd5c8; cursor:default; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.bp-spine-reward:hover { z-index:7; transform:translateY(-3px); border-color:#c79a48; box-shadow:0 10px 22px #000,0 0 16px rgba(196,133,49,.22); }
.bp-spine-reward strong { max-width:100%; font-size:.64rem; line-height:1.45; text-align:center; overflow-wrap:anywhere; }
.bp-reward-image { width:56px; height:56px; display:grid; place-items:center; border:1px solid #403a35; background:radial-gradient(circle,#211b15,#070808 72%); }
.bp-reward-image img { width:50px; height:50px; object-fit:contain; }
.bp-node-status { min-width:52px; min-height:21px; display:grid; place-items:center; padding:1px 6px; border:1px solid #444; color:#777; font-size:.56rem; font-weight:900; }
.bp-node-status.is-claimed { min-width:24px; width:24px; border-radius:50%; border-color:#6cdc92; background:#176837; color:#d7ffe5; font-size:.8rem; }
.bp-node-status.is-ready { border-color:#e2b957; background:#c99535; color:#160f05; }
.bp-spine-reward.is-ready { cursor:pointer; border-color:#d2a74e; box-shadow:0 0 17px rgba(195,129,43,.3); }
.bp-spine-reward.is-claimed { opacity:.62; }
.bp-spine-reward.is-locked { filter:grayscale(1); opacity:.38; }
.bp-spine-reward.is-apex { width:132px; border-color:#a83c50; background:radial-gradient(circle at 50% 30%,rgba(146,37,52,.22),#0a0b0b 72%); }
.bp-spine-reward.is-apex .bp-reward-image { width:74px; height:74px; border-color:#8e3948; }
.bp-spine-reward.is-apex .bp-reward-image img { width:66px; height:66px; }
.bp-spine-empty { width:18px; height:18px; margin-top:25px; border:1px solid #373737; transform:rotate(45deg); opacity:.42; }
.bp-tooltip-track { color:#c9a55e; font-size:.9em; }
.bp-tooltip-state { color:#8fcaab; font-size:.86em; }
.bp-roadmap { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:7px; border:1px solid #302b2c; background:#302b2c; }
.bp-roadmap>div { display:grid; gap:2px; padding:7px 10px; background:#0b0b0c; }
.bp-roadmap b { color:#d0ad62; font-size:.75rem; }
.bp-roadmap span { color:#827a75; font-size:.67rem; line-height:1.6; }
.battle-pass-shop-entry { overflow:hidden; border:1px solid #9c3347!important; border-radius:6px!important; background:#090709!important; }
.battle-pass-shop-art { position:relative; min-height:162px; display:flex; flex-direction:column; justify-content:flex-end; padding:15px; overflow:hidden; background:radial-gradient(circle at 50% 28%,rgba(126,27,37,.3),transparent 52%),linear-gradient(0deg,#050304,rgba(26,6,10,.9)); }
.battle-pass-shop-art:after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,rgba(5,3,4,.98) 0,rgba(5,3,4,.18) 58%,transparent); }
.battle-pass-ticket-image { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:contain; padding:5px; filter:drop-shadow(0 8px 12px #000); }
.battle-pass-shop-art > span,.battle-pass-shop-art > strong,.battle-pass-shop-art > small { position:relative; z-index:2; text-shadow:0 2px 5px #000; }
.battle-pass-shop-art span,.battle-pass-shop-art small { color:#c9848e; font-size:.7rem; }
.battle-pass-shop-art strong { color:#f0d09a; font-size:1.2rem; }
.battle-pass-shop-copy { display:grid; gap:6px; padding:12px; text-align:center; }
.battle-pass-shop-copy h4,.battle-pass-shop-copy p { margin:0; }
.battle-pass-shop-copy h4 { color:#ebc88d; }
.battle-pass-shop-copy p { min-height:42px; color:#8e8581; font-size:.72rem; line-height:1.6; }
.battle-pass-shop-copy .btn { width:100%; border-color:#b83a50; color:#ffd1c4; }
.bp-tavern-banner { display:grid; grid-template-columns:minmax(170px,.6fr) minmax(180px,1fr) auto; align-items:center; gap:16px; margin:0 0 15px; padding:12px 15px; border:1px solid #6f2938; border-right:4px solid #c33b50; background:linear-gradient(90deg,rgba(10,8,9,.97),rgba(65,11,22,.55)); }
.bp-tavern-banner>div:first-child { display:grid; }
.bp-tavern-banner span { color:#dc5a6b; font-size:.7rem; font-weight:800; }
.bp-tavern-banner strong { color:#eed49e; font-size:.9rem; }
.bp-tavern-banner small { color:#8e8580; font-size:.68rem; }
.bp-tavern-progress { height:9px; border:1px solid #49383a; background:#070708; }
.bp-tavern-progress i { display:block; height:100%; background:linear-gradient(90deg,#7f2332,#dc5362,#d7af5a); }
.bp-tavern-banner button { min-height:34px; padding:5px 14px; border:1px solid #a64051; border-radius:3px; background:#2d0e15; color:#f0c7bd; cursor:pointer; }
.battle-pass-header-button { width:124px; min-height:35px; display:grid; grid-template-columns:23px 1fr auto; align-items:center; gap:5px; position:relative; padding:4px 8px; border:1px solid #875d2d; background:linear-gradient(180deg,rgba(48,26,15,.96),rgba(15,12,10,.98)); color:#f1d18a; font-size:.68rem; font-weight:800; cursor:pointer; box-shadow:inset 0 0 12px rgba(176,91,35,.12),0 2px 8px #000; }
.battle-pass-header-button[hidden] { display:none; }
.battle-pass-header-button:hover { border-color:#e2b859; color:#fff0c4; background:linear-gradient(180deg,#54301b,#19120e); }
.battle-pass-header-button .bp-header-mark { width:21px; height:21px; display:grid; place-items:center; border:1px solid #9b6b31; transform:rotate(45deg); color:#df4f5d; }
.battle-pass-header-button .bp-header-mark i { transform:rotate(-45deg); font-style:normal; }
.battle-pass-header-button small { color:#a79986; font-size:.58rem; }
.battle-pass-header-button.has-pending::after { content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#e54b54; border:1px solid #ffd29b; box-shadow:0 0 9px #e54b54; }
@media (max-width:900px) { .bp-hero{grid-template-columns:1fr;padding:15px}.bp-horizontal-shell{height:402px;grid-template-columns:34px minmax(0,1fr) 34px}.bp-spine-toolbar{align-items:flex-start;flex-wrap:wrap} }
@media (max-width:620px) { .bp-season-meta,.bp-roadmap{grid-template-columns:1fr}.bp-progress-panel{grid-template-columns:58px 1fr}.bp-claim-all{grid-column:1/-1}.bp-purchase{align-items:stretch;flex-direction:column}.bp-purchase button{min-width:0}.bp-tavern-banner{grid-template-columns:1fr}.bp-spine-legend{display:none} }