/* Event artwork is cropped from the shared transparent Halloween atlases. */ #hotcs-battlepass .bp-atlas { display: block; flex: 0 0 auto; overflow: hidden; } #hotcs-battlepass .bp-reward-icon-atlas { aspect-ratio: 1; object-fit: contain; } /* Earned slots and claimable items remain distinct from the selected preview. */ #hotcs-battlepass .bp-reward__state { position: relative; display: flex; justify-content: center; align-items: center; gap: 4px; flex: 0 0 18px; width: 100%; padding: 2px 3px; border-radius: 4px; font-size: 7px; line-height: 1.2; font-weight: 600; color: #ffc38d; background: rgba(255, 144, 67, .12); } #hotcs-battlepass .bp-reward__state svg { flex: 0 0 10px; width: 10px; height: 10px; } #hotcs-battlepass .bp-reward--claimed .bp-reward__state { color: #a5cbb0; background: rgba(108, 175, 126, .13); } #hotcs-battlepass .bp-reward--claimed .bp-reward__art { opacity: .7; } #hotcs-battlepass .bp-reward[data-reward-state] .bp-reward__art { flex: 1 1 55px; min-height: 30px; height: 55px; } #hotcs-battlepass .bp-reward[data-reward-state] .bp-reward__image { height: 100%; max-height: 60px; } #hotcs-battlepass .bp-pill--reward-claimed { color: #a5cbb0; background: rgba(108, 175, 126, .13); } #hotcs-battlepass .bp-pill--reward-available { color: #ffc38d; background: rgba(255, 144, 67, .12); } /* Reward actions use dark event surfaces and centered text. */ #hotcs-battlepass .bp-btn.bp-btn--reward-action { display: inline-flex; justify-content: center; align-items: center; gap: 11px; min-height: 43px; padding: 9px 15px; border: 1px solid rgba(226, 142, 86, .4); border-radius: 9px; color: #f5cba6; background: radial-gradient(ellipse at 8% 50%, rgba(218, 100, 38, .16), transparent 68%), linear-gradient(135deg, #291c25, #17121c); box-shadow: inset 0 1px rgba(255, 228, 193, .065), 0 3px 10px rgba(0, 0, 0, .15); text-align: center; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; } #hotcs-battlepass .bp-btn--reward-action:hover:not(:disabled) { color: #ffe4c8; border-color: rgba(255, 166, 96, .75); background: radial-gradient(ellipse at 8% 50%, rgba(239, 116, 45, .25), transparent 72%), linear-gradient(135deg, #33212a, #1d1620); box-shadow: inset 0 1px rgba(255, 228, 193, .1), 0 0 17px rgba(209, 89, 32, .13); } #hotcs-battlepass .bp-inventory-card .bp-btn--reward-action { width: 100%; } #hotcs-battlepass .bp-btn--reward-action.bp-btn--ghost { border-color: rgba(180, 149, 192, .24); color: #c8b7ce; background: linear-gradient(135deg, #231b2b, #17121c); } #hotcs-battlepass .bp-btn--reward-action.bp-btn--received:disabled { color: #aed1b9; border-color: rgba(122, 176, 139, .25); background: linear-gradient(135deg, #202723, #151c1b); opacity: 1; } @media (prefers-reduced-motion: reduce) { #hotcs-battlepass .bp-btn--reward-action, #hotcs-battlepass .bp-btn--reward-action::after { transition: none; } } #hotcs-battlepass .bp-xp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; } #hotcs-battlepass .bp-xp-preview { display: grid; gap: 7px; padding: 16px; margin-top: 17px; border: 1px solid rgba(255, 165, 95, .2); border-radius: 10px; background: rgba(255, 125, 49, .05); color: var(--bp-ink); } #hotcs-battlepass .bp-xp-preview span { color: #f2bc8f; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-xp-preview small { color: var(--bp-muted); } #hotcs-battlepass .bp-xp-audit { margin-top: 24px; } @media (max-width: 480px) { #hotcs-battlepass .bp-xp-fields { grid-template-columns: 1fr; } } #hotcs-battlepass .bp-image-choice__art { display: block; width: 100%; height: 51px; object-fit: contain; } #hotcs-battlepass .bp-ranking { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; } #hotcs-battlepass .bp-rating-pagination { margin-top: 12px; border: 1px solid var(--bp-line); border-radius: 12px; background: var(--bp-surface); } #hotcs-battlepass .bp-ranking__row { --rank-color: #a399aa; display: grid; grid-template-columns: 42px minmax(0, 1fr) 90px 145px; grid-template-areas: "place player level xp"; align-items: center; gap: 18px; min-width: 0; padding: 17px 22px; border: 1px solid var(--bp-line); border-radius: 12px; background: var(--bp-surface); } #hotcs-battlepass .bp-ranking__row[data-rank="1"] { --rank-color: #ffc589; border-color: rgba(255,197,137,.28); background: linear-gradient(95deg,rgba(166,94,36,.11),transparent 58%),var(--bp-surface); } #hotcs-battlepass .bp-ranking__row[data-rank="2"] { --rank-color: #c6c8db; } #hotcs-battlepass .bp-ranking__row[data-rank="3"] { --rank-color: #c08a66; } #hotcs-battlepass .bp-ranking__place { grid-area: place; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 10px; color: var(--rank-color); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-ranking__row:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .bp-ranking__place { border-color: transparent; background: var(--bp-soft); } #hotcs-battlepass .bp-ranking__player { grid-area: player; display: flex; align-items: center; gap: 13px; min-width: 0; } #hotcs-battlepass .bp-ranking__avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: rgba(161,124,184,.1); border: 1px solid rgba(190,157,211,.16); color: #d9c5e5; font-size: 16px; } #hotcs-battlepass .bp-ranking__identity { display: grid; gap: 5px; min-width: 0; } #hotcs-battlepass .bp-ranking__name { min-width: 0; color: var(--bp-ink); font-size: 12px; font-weight: 600; line-height: 1.7; text-decoration: none; overflow-wrap: anywhere; } #hotcs-battlepass a.bp-ranking__name:hover { color: #ffc589; text-decoration: underline; text-underline-offset: 4px; } #hotcs-battlepass a.bp-ranking__name:focus-visible { outline: 2px solid #ffc589; outline-offset: 5px; border-radius: 2px; } #hotcs-battlepass .bp-ranking__premium { display: flex; align-items: center; gap: 5px; color: #d4ad80; font-size: 8px; } #hotcs-battlepass .bp-ranking__premium svg { width: 12px; height: 12px; } #hotcs-battlepass .bp-ranking__level { grid-area: level; display: grid; justify-items: center; gap: 2px; } #hotcs-battlepass .bp-ranking__xp { grid-area: xp; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; color: #ffc589; } #hotcs-battlepass .bp-ranking__level strong,#hotcs-battlepass .bp-ranking__xp strong { font-size: 16px; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-ranking__level span,#hotcs-battlepass .bp-ranking__xp span { color: var(--bp-muted); font-size: 9px; } @media(max-width:600px) { #hotcs-battlepass .bp-ranking__row { grid-template-columns: 27px minmax(0,1fr) 85px; grid-template-areas: "place player xp" "place level xp"; gap: 6px 10px; padding: 13px 12px; } #hotcs-battlepass .bp-ranking__place { width: 27px; height: 32px; font-size: 12px; border-radius: 8px; } #hotcs-battlepass .bp-ranking__player { gap: 8px; } #hotcs-battlepass .bp-ranking__avatar { flex-basis: 28px; width: 28px; height: 28px; font-size: 12px; } #hotcs-battlepass .bp-ranking__name { font-size: 10px; } #hotcs-battlepass .bp-ranking__level { display: flex; gap: 5px; padding-left: 36px; } #hotcs-battlepass .bp-ranking__level strong { font-size: 11px; } #hotcs-battlepass .bp-ranking__xp { flex-wrap: wrap; gap: 0 4px; } #hotcs-battlepass .bp-ranking__xp strong { font-size: 12px; } } #hotcs-battlepass .bp-reward__image.bp-atlas { width: 100%; height: 100%; max-height: 125px; } #hotcs-battlepass .bp-reward-preview__visual { height: 248px; grid-template-rows: auto minmax(0, 1fr); gap: 12px; } #hotcs-battlepass .bp-reward-preview__label { margin-bottom: 0; } #hotcs-battlepass .bp-reward-preview__art { width: 100%; height: 100%; min-height: 0; padding: 10px; } #hotcs-battlepass .bp-reward-preview__art .bp-reward-preview__image { width: min(100%, 190px); height: 190px; max-height: 190px; object-fit: contain; } #hotcs-battlepass .bp-task__art .bp-task-icon-atlas { width: 68px; height: 68px; } #hotcs-battlepass .bp-task__reward-icon { width: 22px; height: 22px; } #hotcs-battlepass[data-view="public"] .bp-task-grid { gap: 16px; } #hotcs-battlepass[data-view="public"] .bp-task { grid-template-columns: 82px minmax(0, 1fr); gap: 17px; padding: 22px; border: 1px solid rgba(217, 186, 234, .14); background: linear-gradient(130deg, rgba(71, 36, 64, .18), transparent 65%), #18121c; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); } #hotcs-battlepass[data-view="public"] .bp-task__art { border: 1px solid rgba(225, 173, 115, .16); border-radius: 18px; color: #e6b892; background: radial-gradient(circle, rgba(209, 124, 54, .09), rgba(29, 20, 29, .8) 75%); } #hotcs-battlepass[data-view="public"] .bp-task__top { justify-content: flex-start; margin-bottom: 10px; } #hotcs-battlepass[data-view="public"] .bp-task__body h3 { font-size: 14px; line-height: 1.6; } #hotcs-battlepass[data-view="public"] .bp-task__body p { color: #beafc5; font-size: 10px; } #hotcs-battlepass[data-view="public"] .bp-task__top .bp-pill { color: #d9c5e5; border-color: rgba(190, 157, 211, .18); background: rgba(190, 157, 211, .05); } #hotcs-battlepass[data-view="public"] .bp-task__top .bp-pill--premium { color: #ffc589; border-color: rgba(255, 187, 115, .25); } #hotcs-battlepass[data-view="public"] .bp-task__bottom { padding-top: 14px; border-color: rgba(190, 157, 211, .13); } #hotcs-battlepass[data-view="public"] .bp-task__reward { padding: 5px 8px; font-size: 10px; border-radius: 8px; } #hotcs-battlepass .bp-event-wallet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; margin-bottom: 20px; padding: 18px 22px; border: 1px solid rgba(226, 169, 103, .25); border-radius: 14px; background: radial-gradient(ellipse at 90% 40%, rgba(209, 121, 52, .1), transparent 65%), #1b141c; } #hotcs-battlepass .bp-event-wallet > span { color: #f2ca9f; font-size: 12px; } #hotcs-battlepass .bp-event-wallet strong { grid-row: span 2; font-size: 25px; color: #ffe2be; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-event-wallet small { color: var(--bp-muted); font-size: 9px; line-height: 1.6; } #hotcs-battlepass .bp-inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #hotcs-battlepass .bp-inventory-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--bp-line); border-radius: 14px; background: #19121d; overflow: hidden; } #hotcs-battlepass .bp-inventory-card__art { display: grid; place-items: center; height: 155px; background: radial-gradient(ellipse at center, rgba(193, 120, 53, .1), transparent 70%); } #hotcs-battlepass .bp-inventory-card__image { width: 150px; max-width: 100%; height: 150px; object-fit: contain; } #hotcs-battlepass .bp-inventory-card__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-grow: 1; padding: 18px; border-top: 1px solid var(--bp-line); } #hotcs-battlepass .bp-inventory-card__body h3 { margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; } #hotcs-battlepass .bp-inventory-card__body p { margin: 0 0 5px; font-size: 10px; color: var(--bp-muted); line-height: 1.7; } #hotcs-battlepass .bp-inventory-card__body .bp-btn { margin-top: auto; width: 100%; } #hotcs-battlepass .bp-inventory-state--processing, #hotcs-battlepass .bp-inventory-state--uncertain { color: #edcda6; border-color: rgba(237, 205, 166, .25); } #hotcs-battlepass .bp-inventory-state--applied { color: #abe0b0; border-color: rgba(171, 224, 176, .25); } #hotcs-battlepass .bp-inventory-state--failed { color: #f6aaa1; border-color: rgba(246, 170, 161, .25); } #hotcs-battlepass .bp-delivery-detail { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; } #hotcs-battlepass .bp-delivery-detail__art { display: grid; place-items: center; width: 150px; height: 150px; background: radial-gradient(circle, rgba(217, 132, 64, .1), transparent 70%); } #hotcs-battlepass .bp-delivery-detail__image { width: 150px; height: 150px; object-fit: contain; } #hotcs-battlepass .bp-delivery-detail h2 { margin-top: 12px; line-height: 1.5; overflow-wrap: anywhere; } #hotcs-battlepass .bp-delivery-detail p, #hotcs-battlepass .bp-delivery-help { margin: 12px 0; color: var(--bp-muted); font-size: 11px; line-height: 1.9; } #hotcs-battlepass .bp-delivery-detail strong { display: block; font-size: 11px; line-height: 1.7; color: #e9cba6; } #hotcs-battlepass .bp-activation-server { margin: 20px 0; } #hotcs-battlepass .bp-activation-server select { min-height: 44px; } #hotcs-battlepass .bp-vip-preview { margin: -6px 0 18px; padding: 14px 16px; border: 1px solid rgba(204, 164, 115, .2); border-radius: 10px; background: rgba(32, 24, 35, .8); color: var(--bp-muted); font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; } #hotcs-battlepass .bp-vip-preview[hidden] { display: none; } #hotcs-battlepass .bp-vip-preview[data-effect="replace"] { border-color: rgba(230, 151, 83, .45); background: linear-gradient(120deg, rgba(94, 51, 29, .22), rgba(32, 24, 35, .85)); } #hotcs-battlepass .bp-vip-preview strong { color: #f1c99e; font-size: 11px; } #hotcs-battlepass .bp-vip-preview p { margin: 4px 0; } #hotcs-battlepass .bp-vip-preview b { color: #eadbe9; } #hotcs-battlepass .bp-vip-confirm { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(230, 151, 83, .18); color: #efccaa; cursor: pointer; } #hotcs-battlepass .bp-vip-confirm input { flex: 0 0 16px; width: 16px; min-height: 0; height: 16px; margin: 2px 0 0; accent-color: #e29d5d; } #hotcs-battlepass .bp-vip-preview .bp-btn { margin-top: 9px; min-height: 34px; font-size: 10px; } #hotcs-battlepass .bp-delivery-settings { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--bp-line); border-radius: 10px; } #hotcs-battlepass .bp-delivery-settings[hidden], #hotcs-battlepass [data-delivery-section][hidden] { display: none; } #hotcs-battlepass .bp-delivery-settings h3 { font-size: 12px; } #hotcs-battlepass .bp-delivery-servers { display: flex; flex-wrap: wrap; gap: 12px; } #hotcs-battlepass .bp-delivery-servers label { display: flex; align-items: center; gap: 7px; color: var(--bp-muted); font-size: 10px; } #hotcs-battlepass .bp-command-preview { display: block; max-width: 100%; padding: 12px; border-radius: 8px; color: #eac4a4; background: rgba(0, 0, 0, .22); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; } #hotcs-battlepass .bp-provider-status { margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(226, 169, 103, .2); border-radius: 8px; color: #d9bea5; font-size: 10px; line-height: 1.8; } #hotcs-battlepass .bp-curse-card__image.bp-atlas { width: 100%; height: 100%; max-width: 260px; max-height: 260px; } #hotcs-battlepass .bp-curses__wallet small { display: block; color: var(--bp-muted); font-size: 8px; line-height: 1.8; margin-top: 5px; } @media (max-width: 950px) { #hotcs-battlepass .bp-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { #hotcs-battlepass[data-view="public"] .bp-task { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 17px; } #hotcs-battlepass .bp-task__art .bp-task-icon-atlas { width: 49px; height: 49px; } #hotcs-battlepass[data-view="public"] .bp-task__body h3 { font-size: 12px; } #hotcs-battlepass .bp-inventory-grid { grid-template-columns: minmax(0, 1fr); } #hotcs-battlepass .bp-inventory-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; } #hotcs-battlepass .bp-inventory-card__art { height: 130px; } #hotcs-battlepass .bp-inventory-card__image { width: 105px; height: 105px; } #hotcs-battlepass .bp-inventory-card__body { border: 0; padding: 14px 14px 14px 4px; } #hotcs-battlepass .bp-inventory-card__body .bp-btn { padding-left: 10px; padding-right: 10px; } #hotcs-battlepass .bp-event-wallet { padding: 16px; gap: 8px 12px; } #hotcs-battlepass .bp-event-wallet > span { font-size: 11px; } #hotcs-battlepass .bp-delivery-detail { grid-template-columns: 90px minmax(0, 1fr); gap: 12px; } #hotcs-battlepass .bp-delivery-detail__art, #hotcs-battlepass .bp-delivery-detail__image { width: 90px; height: 90px; } #hotcs-battlepass .bp-modal__footer .bp-btn { max-width: 100%; white-space: normal; } } @media (prefers-reduced-motion: reduce) { #hotcs-battlepass .bp-task, #hotcs-battlepass .bp-atlas { transition: none; animation: none; } } #hotcs-battlepass .bp-player-progress__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; } #hotcs-battlepass .bp-account-wallet { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 10px 5px 5px; border: 1px solid rgba(226, 169, 103, .2); border-radius: 9px; color: #e9ba87; background: rgba(209, 121, 52, .065); font-size: 9px; line-height: 1.5; } #hotcs-battlepass .bp-account-wallet strong { color: #ffe2be; font-size: 12px; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-account-wallet__art { display: flex; flex: 0 0 25px; width: 25px; height: 25px; } #hotcs-battlepass .bp-account-wallet__image { display: block; width: 25px; height: 25px; } #hotcs-battlepass[data-view="public"] #bp-public-panel > .bp-premium-cta { margin: 0 0 22px; } #hotcs-battlepass .bp-ribbon-pagination--premium { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } #hotcs-battlepass .bp-ribbon-pagination--premium .bp-ribbon-pagination__controls { justify-self: end; } #hotcs-battlepass .bp-ribbon-premium { justify-self: center; gap: 8px; height: auto; min-height: 34px; padding: 8px 14px; border-color: rgba(200, 166, 239, .38); color: #edd5ff; background: linear-gradient(110deg, rgba(153, 100, 199, .2), rgba(153, 100, 199, .06)), #261b2a; box-shadow: inset 0 1px rgba(239, 216, 255, .06); font-size: 10px; line-height: 1.4; white-space: nowrap; } #hotcs-battlepass .bp-ribbon-premium:hover { border-color: rgba(220, 185, 255, .65); background: #38263f; box-shadow: 0 0 18px rgba(153, 100, 199, .12); } #hotcs-battlepass .bp-ribbon-premium > span:first-child { display: flex; } #hotcs-battlepass .bp-ribbon-premium svg { width: 16px; height: 16px; } @media (max-width: 640px) { #hotcs-battlepass .bp-ribbon-pagination--premium { grid-template-columns: minmax(0, 1fr); gap: 10px; } #hotcs-battlepass .bp-ribbon-pagination--premium .bp-ribbon-pagination__range { justify-self: center; width: auto; text-align: center; } #hotcs-battlepass .bp-ribbon-pagination--premium .bp-ribbon-pagination__controls { justify-self: center; } } #hotcs-battlepass .bp-pack-maximum { margin-top: 14px; } #hotcs-battlepass .bp-packs .bp-modal__footer { margin-top: 20px; } #hotcs-battlepass .bp-ribbon-title { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(230, 166, 103, .14); background: linear-gradient(100deg, rgba(180, 91, 37, .08), transparent 65%); } #hotcs-battlepass .bp-ribbon-title > span { display: flex; color: #e7a76b; } #hotcs-battlepass .bp-ribbon-title svg { width: 25px; height: 25px; } #hotcs-battlepass .bp-ribbon-title h2 { margin: 0; color: #f2d5ba; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: -.3px; } #hotcs-battlepass .bp-ribbon-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(220, 151, 101, .24), transparent); } #hotcs-battlepass[data-view="public"] .bp-task-grid { gap: 12px; } #hotcs-battlepass[data-view="public"] .bp-task { grid-template-columns: 60px minmax(0, 1fr); align-content: start; gap: 8px 14px; min-height: 0; padding: 16px; border-radius: 12px; border-color: rgba(199, 156, 209, .18); background: radial-gradient(ellipse at 0 0, rgba(178, 93, 42, .08), transparent 65%), #1b131e; box-shadow: inset 0 1px rgba(249, 212, 171, .03); } #hotcs-battlepass[data-view="public"] .bp-task::before, #hotcs-battlepass[data-view="public"] .bp-task:nth-child(3n)::before { content: ''; display: block; position: absolute; inset: auto; top: 0; right: 0; z-index: -1; width: 85px; height: 85px; opacity: .08; pointer-events: none; background: url('../img/halloween-corner-web-20261004.svg') top right / contain no-repeat; transform: rotate(90deg); } #hotcs-battlepass[data-view="public"] .bp-task::after { top: 16px; bottom: 16px; } #hotcs-battlepass[data-view="public"] .bp-task__visual { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 60px; height: 60px; } #hotcs-battlepass[data-view="public"] .bp-task__art { width: 60px; height: 60px; border-radius: 14px; border-color: rgba(219, 168, 107, .2); background: radial-gradient(circle, rgba(185, 95, 40, .11), #221725 80%); } #hotcs-battlepass[data-view="public"] .bp-task__art .bp-task-icon-atlas { width: 54px; height: 54px; } #hotcs-battlepass[data-view="public"] .bp-task__body { grid-column: 2; grid-row: 1; min-width: 0; } #hotcs-battlepass[data-view="public"] .bp-task__top { gap: 5px; margin-bottom: 5px; } #hotcs-battlepass[data-view="public"] .bp-task__top .bp-pill { padding: 3px 6px; font-size: 7px; line-height: 1.5; } #hotcs-battlepass[data-view="public"] .bp-task__body h3 { margin: 0; font-size: 12px; line-height: 1.6; } #hotcs-battlepass[data-view="public"] .bp-task__body p { margin: 4px 0 0; color: #baa9c1; font-size: 9px; line-height: 1.7; } #hotcs-battlepass[data-view="public"] .bp-task__bottom { grid-column: 2; grid-row: 2; padding-top: 0; border-top: 0; } #hotcs-battlepass[data-view="public"] .bp-task__rewards { gap: 5px; margin: 0 0 6px; } #hotcs-battlepass[data-view="public"] .bp-task__reward { gap: 4px; padding: 3px 6px; border-radius: 6px; font-size: 8px; line-height: 1.5; } #hotcs-battlepass[data-view="public"] .bp-task__reward-icon { width: 16px; height: 16px; } #hotcs-battlepass[data-view="public"] .bp-task__goal { margin-bottom: 5px; font-size: 8px; } #hotcs-battlepass[data-view="public"] .bp-task__status { margin-top: 4px; font-size: 8px; line-height: 1.5; } #hotcs-battlepass[data-view="public"] .bp-task__part { font-size: 8px; margin: 3px 0; } #hotcs-battlepass[data-view="public"] .bp-ranking { gap: 8px; } #hotcs-battlepass[data-view="public"] .bp-ranking__row { position: relative; isolation: isolate; overflow: hidden; padding: 14px 18px; border-color: rgba(193, 149, 213, .15); background: linear-gradient(100deg, rgba(126, 73, 145, .065), transparent 65%), #1b131e; box-shadow: inset 0 1px rgba(243, 209, 174, .03); } #hotcs-battlepass[data-view="public"] .bp-ranking__row::after { content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 90px; height: 90px; opacity: .075; pointer-events: none; background: url('../img/halloween-corner-web-20261004.svg') top right / contain no-repeat; transform: rotate(90deg); } #hotcs-battlepass[data-view="public"] .bp-ranking__row[data-rank="1"] { --rank-color: #ffbd77; border-color: rgba(231, 145, 62, .32); background: linear-gradient(100deg, rgba(175, 81, 30, .15), transparent 68%), #21151e; } #hotcs-battlepass[data-view="public"] .bp-ranking__row[data-rank="2"] { --rank-color: #d5b4f0; border-color: rgba(173, 124, 209, .25); } #hotcs-battlepass[data-view="public"] .bp-ranking__row[data-rank="3"] { --rank-color: #dca279; border-color: rgba(208, 137, 93, .23); } #hotcs-battlepass[data-view="public"] .bp-ranking__place { position: relative; border-radius: 42% 42% 37% 37%; background: rgba(156, 89, 44, .06); } #hotcs-battlepass[data-view="public"] .bp-ranking__row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]) .bp-ranking__place::before { content: ''; position: absolute; top: -5px; left: calc(50% - 2px); width: 4px; height: 5px; border-radius: 3px 2px 0 0; background: currentColor; opacity: .65; transform: rotate(15deg); } #hotcs-battlepass[data-view="public"] .bp-ranking__row[data-rank="1"] .bp-ranking__place { box-shadow: 0 0 17px rgba(224, 122, 51, .13); } #hotcs-battlepass[data-view="public"] .bp-ranking__avatar { border-radius: 12px; border-color: rgba(200, 148, 222, .2); background: #2a1b2f; color: #e2c3ef; } #hotcs-battlepass[data-view="public"] .bp-ranking__level strong { color: #ddbddc; } #hotcs-battlepass[data-view="public"] .bp-ranking__xp { color: #f7bc81; } @media (max-width: 700px) { #hotcs-battlepass[data-view="public"] .bp-task-grid { grid-template-columns: minmax(0, 1fr); } #hotcs-battlepass[data-view="public"] .bp-task { grid-template-columns: 52px minmax(0, 1fr); padding: 13px; gap: 7px 10px; } #hotcs-battlepass[data-view="public"] .bp-task__visual, #hotcs-battlepass[data-view="public"] .bp-task__art { width: 52px; height: 52px; } #hotcs-battlepass[data-view="public"] .bp-task__art .bp-task-icon-atlas { width: 48px; height: 48px; } } @media (max-width: 600px) { #hotcs-battlepass .bp-ribbon-title { padding: 13px 12px; gap: 9px; } #hotcs-battlepass .bp-ribbon-title h2 { font-size: 12px; } #hotcs-battlepass .bp-ribbon-title svg { width: 21px; height: 21px; } #hotcs-battlepass[data-view="public"] .bp-ranking__row { padding: 13px 12px; } #hotcs-battlepass[data-view="public"] .bp-ranking__avatar { border-radius: 9px; } } #hotcs-battlepass[data-view="public"] .bp-ranking__row { grid-template-columns: 42px minmax(140px, .8fr) minmax(180px, 1.3fr) 145px 110px; grid-template-areas: "place player progress contribution xp"; } #hotcs-battlepass .bp-ranking-progress { grid-area: progress; min-width: 0; } #hotcs-battlepass .bp-ranking-progress__label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 9px; color: #d8bfdc; font-size: 8px; line-height: 1.7; } #hotcs-battlepass .bp-ranking-progress__label strong { color: #f5d2ac; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-ranking-progress__label small { color: #a18fa9; font-size: 7px; } #hotcs-battlepass .bp-ranking-progress__track { position: relative; overflow: hidden; height: 7px; border-radius: 3px; background: #100b13; } #hotcs-battlepass .bp-ranking-progress__track::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--bp-ranking-levels) - 2px), #21151e calc(100% / var(--bp-ranking-levels) - 2px), #21151e calc(100% / var(--bp-ranking-levels))); } #hotcs-battlepass .bp-ranking-progress progress { appearance: none; display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; } #hotcs-battlepass .bp-ranking-progress progress::-webkit-progress-bar { background: transparent; } #hotcs-battlepass .bp-ranking-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #da9962, #b38acf); } #hotcs-battlepass .bp-ranking-progress progress::-moz-progress-bar { background: linear-gradient(90deg, #da9962, #b38acf); } #hotcs-battlepass .bp-ranking__contribution { grid-area: contribution; display: grid; gap: 6px; min-width: 0; padding-left: 15px; border-left: 1px solid rgba(195, 158, 213, .12); } #hotcs-battlepass .bp-ranking__contribution > span { display: flex; align-items: center; gap: 5px; color: #b9a3c4; font-size: 7px; line-height: 1.8; } #hotcs-battlepass .bp-ranking__contribution svg { flex: 0 0 13px; width: 13px; height: 13px; color: #c29dd5; } #hotcs-battlepass .bp-ranking__contribution strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; color: #e7cbee; font-size: 13px; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-ranking__contribution small { color: #a18fa9; font-size: 7px; font-weight: 400; } #hotcs-battlepass .bp-task-group { --bp-group-rgb: 229, 167, 107; margin-top: 24px; } #hotcs-battlepass .bp-task-group--weekly { --bp-group-rgb: 195, 162, 235; } #hotcs-battlepass .bp-task-group--network { --bp-group-rgb: 143, 197, 184; } #hotcs-battlepass .bp-task-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; color: rgb(var(--bp-group-rgb)); } #hotcs-battlepass .bp-task-group__head::after { content: ''; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--bp-group-rgb), .24), transparent); } #hotcs-battlepass .bp-task-group__head h3 { margin: 0; font-size: 11px; font-weight: 500; line-height: 1.8; } #hotcs-battlepass .bp-task-group__icon { display: flex; } #hotcs-battlepass .bp-task-group__icon svg { width: 19px; height: 19px; } #hotcs-battlepass .bp-task-group__count { padding: 2px 7px; border: 1px solid rgba(var(--bp-group-rgb), .2); border-radius: 6px; background: rgba(var(--bp-group-rgb), .055); font-size: 8px; } #hotcs-battlepass .bp-task-reset { order: 2; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-left: auto; padding: 6px 9px; border: 1px solid rgba(var(--bp-group-rgb), .16); border-radius: 7px; color: #b4a6b7; background: rgba(var(--bp-group-rgb), .035); font-size: 9px; line-height: 1.6; } #hotcs-battlepass .bp-task-reset time { color: rgb(var(--bp-group-rgb)); font-variant-numeric: tabular-nums; white-space: nowrap; } #hotcs-battlepass[data-view="public"] .bp-task__art .bp-task-icon-atlas, #hotcs-battlepass[data-view="public"] .bp-task:hover .bp-task__art .bp-task-icon-atlas { margin: 0; place-self: center; transform: none; } #hotcs-battlepass[data-view="public"] .bp-task-group .bp-task { --bp-task-rgb: var(--bp-group-rgb); border-color: rgba(var(--bp-group-rgb), .2); background: radial-gradient(ellipse at 0 0, rgba(var(--bp-group-rgb), .08), transparent 65%), #1b131e; } #hotcs-battlepass[data-view="public"] .bp-task-group .bp-task:hover { border-color: rgba(var(--bp-group-rgb), .4); } #hotcs-battlepass[data-view="public"] .bp-task-group .bp-task__art { border-color: rgba(var(--bp-group-rgb), .22); background: radial-gradient(circle, rgba(var(--bp-group-rgb), .1), #221725 80%); } #hotcs-battlepass[data-view="public"] .bp-task-group .bp-task__top .bp-pill:first-child { border-color: rgba(var(--bp-group-rgb), .24); color: rgb(var(--bp-group-rgb)); background: rgba(var(--bp-group-rgb), .07); } #hotcs-battlepass[data-view="public"] .bp-task-group progress.bp-task__progress::-webkit-progress-value { background: rgb(var(--bp-group-rgb)); } #hotcs-battlepass[data-view="public"] .bp-task-group progress.bp-task__progress::-moz-progress-bar { background: rgb(var(--bp-group-rgb)); } #hotcs-battlepass .bp-task-filters [data-period="weekly"][aria-pressed="true"] { border-color: rgba(195, 162, 235, .35); background: rgba(195, 162, 235, .13); color: #e0c6fa; } #hotcs-battlepass .bp-task-filters [data-period="season"][aria-pressed="true"] { border-color: rgba(143, 197, 184, .35); background: rgba(143, 197, 184, .13); color: #b8ded5; } @media (max-width: 1000px) { #hotcs-battlepass[data-view="public"] .bp-ranking__row { grid-template-columns: 32px minmax(0, 1fr) 125px; grid-template-areas: "place player xp" "place progress contribution"; gap: 12px 16px; } #hotcs-battlepass .bp-ranking__place { align-self: start; } #hotcs-battlepass .bp-ranking__contribution { padding-left: 12px; } } @media (max-width: 600px) { #hotcs-battlepass[data-view="public"] .bp-ranking__row { grid-template-columns: 27px minmax(0, 1fr) 100px; gap: 10px; } #hotcs-battlepass .bp-ranking-progress__label { font-size: 7px; margin-bottom: 6px; gap: 2px; } #hotcs-battlepass .bp-ranking-progress__label small { font-size: 6px; } #hotcs-battlepass .bp-ranking__contribution { padding-left: 8px; gap: 3px; } #hotcs-battlepass .bp-ranking__contribution > span { font-size: 6px; } #hotcs-battlepass .bp-ranking__contribution svg { display: none; } #hotcs-battlepass .bp-ranking__contribution strong { font-size: 11px; } #hotcs-battlepass .bp-ranking__xp strong { overflow-wrap: anywhere; } #hotcs-battlepass .bp-task-group__head h3 { font-size: 10px; } #hotcs-battlepass .bp-task-group__head::after { display: none; } #hotcs-battlepass .bp-task-reset { flex-basis: 100%; margin: 0; padding: 0 0 0 29px; border: 0; background: none; } } /* Quiet event buttons in the banner; reward actions carry text only. */ #hotcs-battlepass .bp-btn.bp-btn--reward-action::before, #hotcs-battlepass .bp-btn.bp-btn--reward-action::after { content: none; display: none; } #hotcs-battlepass[data-view="public"][data-theme="halloween"] .bp-hero__actions .bp-btn { min-height: 40px; padding: 10px 17px; border: 1px solid rgba(192, 158, 204, .27); border-radius: 9px; color: #d9cadc; background: linear-gradient(145deg, #251c2b, #17121d); box-shadow: inset 0 1px rgba(244, 215, 190, .045), 0 4px 14px rgba(0, 0, 0, .14); font-size: 10px; font-weight: 600; line-height: 1.45; transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } #hotcs-battlepass[data-view="public"][data-theme="halloween"] .bp-hero__actions .bp-btn--primary { border-color: rgba(221, 148, 86, .58); color: #f3c99f; background: linear-gradient(145deg, #38251f, #21191f); box-shadow: inset 0 1px rgba(255, 214, 168, .08), 0 4px 15px rgba(0, 0, 0, .2); } #hotcs-battlepass[data-view="public"][data-theme="halloween"] .bp-hero__actions .bp-btn:hover:not(:disabled) { color: #ffe2c3; border-color: #cc905f; background: linear-gradient(145deg, #402a25, #251b25); box-shadow: inset 0 1px rgba(255, 223, 186, .08), 0 0 18px rgba(179, 94, 43, .12); } @media (prefers-reduced-motion: reduce) { #hotcs-battlepass[data-view="public"][data-theme="halloween"] .bp-hero__actions .bp-btn { transition: none; } } /* Keep dialog actions together and override the site's intrinsic button width. */ #hotcs-battlepass .bp-modal__footer { align-items: stretch; justify-content: flex-start; gap: 10px; } #hotcs-battlepass .bp-modal__footer > .bp-btn { flex: 1 1 160px; width: auto; min-height: 44px; margin: 0; justify-content: center; white-space: normal; } /* Cash dialogs alone use the compact checkout. */ #hotcs-battlepass .bp-modal:has(.bp-checkout) { width: min(560px, calc(100vw - 28px)); max-width: calc(100vw - 28px); border-color: rgba(193, 158, 207, .25); border-radius: 16px; background: #1b141f; box-shadow: 0 22px 80px rgba(0, 0, 0, .6); } #hotcs-battlepass .bp-modal:has(.bp-checkout) .bp-modal__inner { padding: 25px; } #hotcs-battlepass .bp-modal:has(.bp-checkout) .bp-modal__close { top: 12px; right: 12px; width: 30px; height: 30px; border-color: rgba(193, 158, 207, .15); background: #211927; color: #bcaac6; } #hotcs-battlepass .bp-checkout { --bp-checkout-copper: #e7a76b; --bp-checkout-muted: #bcaec3; min-width: 0; } #hotcs-battlepass .bp-checkout__head { display: flex; align-items: center; gap: 13px; min-width: 0; padding-right: 25px; margin-bottom: 22px; } #hotcs-battlepass .bp-checkout__icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 46px; color: #e9bc91; border: 1px solid rgba(231, 167, 107, .23); border-radius: 11px; background: linear-gradient(145deg, #302029, #241b2b); } #hotcs-battlepass .bp-checkout--premium .bp-checkout__icon { color: #d9b8f1; border-color: rgba(200, 166, 239, .28); } #hotcs-battlepass .bp-checkout__icon svg { width: 23px; height: 23px; } #hotcs-battlepass .bp-checkout__head > div { min-width: 0; } #hotcs-battlepass .bp-checkout__head h2 { margin: 0; padding: 0; color: #f1e5e8; font-size: 18px; line-height: 1.5; letter-spacing: -.6px; overflow-wrap: anywhere; } #hotcs-battlepass .bp-checkout__head p { margin-top: 4px; color: var(--bp-checkout-muted); font-size: 10px; line-height: 1.7; } #hotcs-battlepass .bp-checkout .bp-pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0 0 17px; } #hotcs-battlepass .bp-checkout .bp-pack-grid:empty { display: none; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; align-items: start; justify-items: start; gap: 4px; min-width: 0; min-height: 108px; padding: 13px 12px 12px; border: 1px solid rgba(190, 157, 211, .19); border-radius: 10px; color: #eadfea; background: #211a28; text-align: left; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack:hover:not(:disabled) { border-color: rgba(231, 167, 107, .58); background: #2b202b; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack.is-active, #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack[aria-pressed="true"] { border-color: #ba825b; background: #302329; box-shadow: inset 0 2px #e7a76b; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack > strong { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack > span { margin: 0; color: #b9a9c1; font-size: 9px; line-height: 1.5; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack > b { align-self: end; width: 100%; margin: 7px 0 0; padding-top: 7px; border-top: 1px solid rgba(190, 157, 211, .12); color: #eec39f; font-size: 12px; font-weight: 500; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #hotcs-battlepass .bp-checkout__quantity { display: flex; align-items: flex-end; gap: 10px; } #hotcs-battlepass .bp-checkout__quantity .bp-field { flex: 1; } #hotcs-battlepass .bp-checkout .bp-field { gap: 7px; } #hotcs-battlepass .bp-checkout .bp-field > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: #ddd0e1; font-size: 10px; } #hotcs-battlepass .bp-checkout .bp-field > span small { color: var(--bp-checkout-muted); font-size: 9px; font-weight: 400; } #hotcs-battlepass .bp-checkout .bp-field input { min-width: 0; min-height: 42px; height: 42px; padding: 10px 12px; border-color: rgba(190, 157, 211, .24); border-radius: 8px; color: #f1e5e8; background: #17121c; font-size: 12px; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-checkout .bp-field input:focus-visible { border-color: #c89bdf; box-shadow: 0 0 0 2px rgba(200, 155, 223, .18); } #hotcs-battlepass .bp-checkout .bp-pack-maximum { flex: 0 1 auto; max-width: 48%; margin: 0; } #hotcs-battlepass .bp-checkout .bp-pack-maximum .bp-btn { min-height: 42px; padding: 9px 10px; font-size: 9px; } #hotcs-battlepass .bp-checkout__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; padding: 15px 0 12px; border-top: 1px solid rgba(190, 157, 211, .16); } #hotcs-battlepass .bp-checkout__total > span, #hotcs-battlepass .bp-checkout__total-label { color: #e6d7e7; font-size: 11px; } #hotcs-battlepass .bp-checkout__total > div { display: grid; gap: 3px; min-width: 0; } #hotcs-battlepass .bp-checkout #bp-pack-count { color: var(--bp-checkout-muted); font-size: 9px; line-height: 1.6; overflow-wrap: anywhere; } #hotcs-battlepass .bp-checkout__total > strong { flex-shrink: 0; color: #f2c599; font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -.7px; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-checkout .bp-cash-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 0 0 13px; color: var(--bp-checkout-muted); font-size: 10px; } #hotcs-battlepass .bp-checkout .bp-cash-summary strong { color: #e0d1e4; font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } #hotcs-battlepass .bp-checkout [data-cash-effect] { min-height: 0; margin: 0; color: var(--bp-checkout-muted); font-size: 9px; line-height: 1.8; } #hotcs-battlepass .bp-checkout [data-cash-effect]:empty { display: none; } #hotcs-battlepass .bp-checkout [data-cash-error] { margin: 12px 0 0; padding: 10px 12px; border-color: rgba(234, 151, 113, .3); border-radius: 8px; color: #f2bca6; background: rgba(153, 68, 39, .09); font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; } #hotcs-battlepass .bp-checkout .bp-modal__footer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 9px; margin-top: 18px; } #hotcs-battlepass .bp-checkout .bp-modal__footer > .bp-btn { width: 100%; min-height: 44px; } #hotcs-battlepass .bp-checkout .bp-btn { justify-content: center; min-height: 42px; height: auto; padding: 10px 14px; border: 1px solid rgba(190, 157, 211, .22); border-radius: 8px; color: #c9b7d0; background: #241b2b; box-shadow: none; font-size: 10px; line-height: 1.6; white-space: normal; text-align: center; } #hotcs-battlepass .bp-checkout .bp-btn::before, #hotcs-battlepass .bp-checkout .bp-btn::after { display: none; content: none; } #hotcs-battlepass .bp-checkout .bp-btn--primary { color: #f7d6b5; border-color: rgba(231, 167, 107, .58); background: linear-gradient(135deg, #4b302a, #33232e); box-shadow: inset 0 1px rgba(255, 222, 187, .07); } #hotcs-battlepass .bp-checkout .bp-btn:hover:not(:disabled) { color: #f7e2cf; border-color: #b78fbd; background: #34263c; } #hotcs-battlepass .bp-checkout .bp-btn--primary:hover:not(:disabled) { color: #ffe7cb; border-color: #e7a76b; background: linear-gradient(135deg, #5a382d, #3b2832); } #hotcs-battlepass .bp-checkout .bp-btn:focus-visible, #hotcs-battlepass .bp-checkout .bp-pack:focus-visible { outline: 2px solid #d4afe7; outline-offset: 3px; } #hotcs-battlepass .bp-checkout .bp-btn:disabled { opacity: .55; } #hotcs-battlepass .bp-checkout .bp-cash-gift { display: flex; width: 100%; max-width: 100%; min-height: 40px; margin: 10px 0 0; padding: 9px 12px; border-color: rgba(190, 157, 211, .2); color: #d8c2e3; background: #211827; font-size: 10px; } #hotcs-battlepass .bp-cash-pending{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;width:100%;padding:12px 0;font-size:10px;color:#e7bf95} #hotcs-battlepass [data-cash-recipient]{width:100%} #hotcs-battlepass .bp-account-wallet__buy{padding:7px 10px;min-height:30px;font-size:9px} #hotcs-battlepass .bp-curse-card__duration { color: #bdacbd; font-size: 8px; line-height: 1.8; } @media (max-width: 520px) { #hotcs-battlepass .bp-modal:has(.bp-checkout) .bp-modal__inner { padding: 22px 17px 18px; } #hotcs-battlepass .bp-checkout__head { gap: 10px; margin-bottom: 18px; padding-right: 22px; } #hotcs-battlepass .bp-checkout__icon { flex-basis: 36px; width: 36px; height: 42px; } #hotcs-battlepass .bp-checkout__head h2 { font-size: 16px; } #hotcs-battlepass .bp-checkout__head p { font-size: 9px; } #hotcs-battlepass .bp-checkout .bp-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack { min-height: 100px; padding: 11px; } #hotcs-battlepass .bp-checkout .bp-pack-grid > .bp-pack > strong { font-size: 16px; } #hotcs-battlepass .bp-checkout__quantity { flex-wrap: wrap; gap: 8px; } #hotcs-battlepass .bp-checkout__quantity .bp-field { flex-basis: 100%; } #hotcs-battlepass .bp-checkout .bp-pack-maximum { max-width: 100%; } #hotcs-battlepass .bp-checkout .bp-pack-maximum .bp-btn { min-height: 34px; padding: 6px 10px; font-size: 8px; } #hotcs-battlepass .bp-checkout__total { margin-top: 15px; padding-top: 12px; } #hotcs-battlepass .bp-checkout__total > strong { font-size: 21px; } #hotcs-battlepass .bp-checkout .bp-modal__footer { gap: 7px; margin-top: 14px; } #hotcs-battlepass .bp-checkout .bp-btn { padding-right: 10px; padding-left: 10px; font-size: 9px; } } @media (max-width: 380px) { #hotcs-battlepass .bp-checkout .bp-modal__footer { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #hotcs-battlepass .bp-checkout .bp-btn, #hotcs-battlepass .bp-checkout .bp-pack { transition: none; } } /* Permanent profile souvenir and future event loyalty benefit. */ #hotcs-battlepass .bp-premium-benefits { display:grid; gap:14px; margin:3px 0 19px; padding:17px 0; border-top:1px solid rgba(184,154,195,.14); border-bottom:1px solid rgba(184,154,195,.14); } #hotcs-battlepass .bp-premium-benefit { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:12px; } #hotcs-battlepass .bp-premium-benefit > img { width:40px; height:44px; object-fit:contain; } #hotcs-battlepass .bp-premium-benefit strong { display:block; color:#e6cfb7; font-size:11px; line-height:1.7; } #hotcs-battlepass .bp-premium-benefit p { margin:4px 0 0; color:var(--bp-muted); font-size:10px; line-height:1.8; } #hotcs-battlepass .bp-premium-benefit__discount { display:grid; place-items:center; width:40px; height:40px; color:#c9a7dc; } #hotcs-battlepass .bp-premium-benefit__discount svg { width:25px; height:25px; } @media(max-width:480px) { #hotcs-battlepass .bp-premium-benefit strong { font-size:10px; } #hotcs-battlepass .bp-premium-benefit p { font-size:9px; } }