@charset "UTF-8";
/* Completed seasons remain readable regardless of the active road's viewport layout. */
.battlepass-page[data-season-state='completed'][data-view='rewards'] { height: auto; min-height: 100dvh; }
.battlepass-page[data-season-state='completed'][data-view='rewards'] .shell { flex: 0 0 auto; }
.battlepass-page[data-season-state='completed'] .progress-panel { display: none; }
.battlepass-page [hidden] { display: none !important; }
.battlepass-page .season-results { width: min(1120px,100%); margin: 20px auto 48px; }
.battlepass-page .results-intro { padding: 28px 0 32px; border-bottom: 1px solid #ffffff20; }
.battlepass-page .results-kicker { color: #f5c477; font-size: 12px; letter-spacing: .12em; }
.battlepass-page .results-intro h2 { margin: 14px 0; font: 700 clamp(36px,5vw,64px)/1.06 var(--pass-display); text-transform: uppercase; text-wrap: balance; }
.battlepass-page .results-intro p { max-width: 62ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.battlepass-page #season-results-content { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 32px 48px; padding-top: 28px; }
.battlepass-page #season-results-content > section { min-width: 0; }
.battlepass-page .season-results h3 { margin: 0 0 24px; font-size: 16px; font-weight: 600; }
.battlepass-page .results-score { display: flex; align-items: center; gap: 32px; margin: 0 0 28px; font-variant-numeric: tabular-nums; }
.battlepass-page .results-level strong { display: block; font: 700 88px/1 var(--pass-display); color: #f5c477; }
.battlepass-page .results-score span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.battlepass-page .results-rank strong { font: 600 36px/1 var(--pass-display); }
.battlepass-page .results-numbers,.battlepass-page .results-totals { margin: 0; }
.battlepass-page .results-numbers > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid #ffffff15; }
.battlepass-page .season-results dt { color: var(--muted); font-size: 14px; line-height: 1.5; }
.battlepass-page .season-results dd { margin: 0; font-variant-numeric: tabular-nums; }
.battlepass-page .results-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 24px; }
.battlepass-page .results-totals > div { display: flex; flex-direction: column-reverse; justify-content: end; gap: 8px; }
.battlepass-page .results-totals dd { font: 600 clamp(24px,3vw,40px)/1.1 var(--pass-display); overflow-wrap: anywhere; }
.battlepass-page .results-footnote { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.battlepass-page .results-saved { grid-column: 1/-1; padding-top: 20px; border-top: 1px solid #ffffff20; }
.battlepass-page .results-empty { color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) {
 .battlepass-page .season-results { margin-top: 8px; }
 .battlepass-page .results-intro { padding-top: 18px; }
 .battlepass-page #season-results-content { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .battlepass-page .results-community { padding-top: 24px; border-top: 1px solid #ffffff20; }
 .battlepass-page .results-score { gap: 24px; }
}
@font-face { font-family: DNPassDisplay; src: url('/battlepass-assets/fonts/display-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: DNPassDisplay; src: url('/battlepass-assets/fonts/display-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
.battlepass-page {
  --rarity-common: #cbd2db; --rarity-uncommon: #92e2aa; --rarity-rare: #8bbcff; --rarity-epic: #d7a0ff; --rarity-legendary: #f5c477;
  --rarity: var(--rarity-common); --muted: #b5becc; --bg: #0c0e11; --panel: #1b2027;
  --pass-accent: #ff633e; --pass-display: DNPassDisplay, 'Arial Narrow', sans-serif;
  --pass-ease: cubic-bezier(.16,1,.3,1); --track-card-height: 150px; --track-gap: 10px; --track-head-height: 24px;
  background: radial-gradient(ellipse at 70% 30%, #252c332e, transparent 60%), var(--bg);
}
.battlepass-page .rarity-Common { --rarity: var(--rarity-common); }
.battlepass-page .rarity-Uncommon { --rarity: var(--rarity-uncommon); }
.battlepass-page .rarity-Rare { --rarity: var(--rarity-rare); }
.battlepass-page .rarity-Epic { --rarity: var(--rarity-epic); }
.battlepass-page .rarity-Legendary { --rarity: var(--rarity-legendary); }
.battlepass-page :is(.modal-items,.reward-grid,.preview-details) { scrollbar-width: thin; scrollbar-color: #555f6d transparent; }
.battlepass-page ::selection { background: #ff633e55; color: #fff; }
.battlepass-page :is(button,a,summary,.preview-state):focus-visible { outline: 2px solid #ffaf93; outline-offset: 3px; }

/* Local pass navigation shares the account header without changing account contracts. */
.battlepass-page .dn-commerce-header {
  --ch-bg: #111214; --ch-line: #66697140; --ch-text: #f4f1ea; --ch-muted: #c3c0b9;
  position: relative; z-index: 20; grid-template-columns: 180px minmax(0,1fr) auto; grid-template-rows: 72px;
  min-height: 72px; padding: env(safe-area-inset-top) 24px 0; gap: 20px; background: var(--ch-bg); border-bottom: 1px solid var(--ch-line);
}
.battlepass-page .dn-commerce-header .dn-commerce-brand { grid-column: 1; grid-row: 1; }
.battlepass-page .dn-commerce-header .dn-commerce-actions { grid-column: 3; grid-row: 1; justify-self: end; gap: 8px; }
.battlepass-page .dn-commerce-header :is(.dn-commerce-profile,.dn-commerce-ticket) { background: #111214; border-color: #66697140; color: #c3c0b9; }
.battlepass-page .dn-commerce-header .dn-commerce-profile { padding-right: 12px; width: 156px; }
.battlepass-page .dn-commerce-header .dn-commerce-profile strong { color: #f4f1ea; }
.battlepass-page .dn-commerce-header .dn-commerce-profile small { color: #a5a5aa; }
.battlepass-page .dn-commerce-header .dn-commerce-menu { position: relative; right: auto; }
.battlepass-page .dn-commerce-header .dn-commerce-menu summary { width: 44px; height: 44px; border: 1px solid #66697140; background: #111214; color: #c3c0b9; }
.battlepass-page .dn-commerce-header .dn-commerce-menu summary svg { width: 19px; height: 19px; }
.battlepass-page .dn-commerce-header .dn-commerce-menu nav { background: #17181b; border-color: #666971; color: #f4f1ea; max-height: calc(100dvh - 130px); }
.battlepass-page .dn-commerce-header .dn-commerce-menu nav :is(a,button) { color: #f4f1ea; background: transparent; }
.battlepass-page .dn-commerce-header .dn-commerce-menu nav :is(a,button):hover { background: #24262a; }
.battlepass-page .pass-switch { grid-column: 2; grid-row: 1; display: flex; justify-content: center; gap: 8px; min-width: 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; }
.battlepass-page .pass-switch a { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; min-height: 44px; padding: 10px 14px; font-size: 13px; font-weight: 650; color: #b9c3d0; border: 1px solid transparent; border-radius: 5px; white-space: nowrap; }
.battlepass-page .pass-switch a[aria-current='page'] { color: #ffc0a9; background: #ff633e14; border-color: #ff633e55; }
.battlepass-page .pass-switch svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

.battlepass-page .shell { position: relative; width: 100%; padding: 16px 24px 24px; }
.battlepass-page .pass-overview { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 12px; }
.battlepass-page .pass-heading { min-width: 0; padding-left: 14px; border-left: 2px solid var(--pass-accent); }
.battlepass-page .pass-heading h1 { margin: 0 0 5px; font: 700 28px/1 var(--pass-display); text-transform: uppercase; }
.battlepass-page .season-caption { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.battlepass-page .progress-panel { display: flex; align-items: center; gap: 16px; width: 400px; max-width: 48%; margin: 0; padding: 0; background: none; border: 0; }
.battlepass-page .level { min-width: 0; padding-right: 16px; border-right: 1px solid #ffffff15; }
.battlepass-page .level small { font-size: 9px; color: var(--muted); }
.battlepass-page .level strong { margin: 3px 0 0; font: 650 34px/1 var(--pass-display); font-variant-numeric: tabular-nums; }
.battlepass-page .level em { font: 400 12px/1 var(--font); color: var(--muted); margin-left: 4px; }
.battlepass-page .progress-copy { min-width: 0; flex: 1; }
.battlepass-page .between { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px; font-size: 11px; margin-bottom: 7px; }
.battlepass-page #xp-step { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.battlepass-page progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: #ffffff12; accent-color: var(--pass-accent); }
.battlepass-page progress::-webkit-progress-bar { background: #ffffff12; }
.battlepass-page progress::-webkit-progress-value { background: var(--pass-accent); }
.battlepass-page progress::-moz-progress-bar { background: var(--pass-accent); }
.battlepass-page .notice { margin: 0 0 8px; padding: 8px 12px; font-size: 12px; line-height: 1.4; }
.battlepass-page .button { min-height: 44px; font-size: 12px; }
.battlepass-page #retry { align-self: start; margin-bottom: 6px; flex-shrink: 0; }
.battlepass-page .supporting-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 20px; }
.battlepass-page .supporting-head h2 { font-size: 22px; margin: 0; }
.battlepass-page .season-picker { margin-left: auto; width: auto; }

/* Reserve physical space for each part of the reward, independent of artwork count. */
.battlepass-page .reward-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: center; gap: 28px; padding: 10px 20px; min-height: 0; }
.battlepass-page .scene-landscape { position: absolute; z-index: -3; inset: 0; pointer-events: none; background: url('/battlepass-assets/season-expedition-v1.webp') 60% 50%/cover; opacity: .12;
  mask-image: linear-gradient(90deg,transparent,#000 20%,#000 72%,transparent), linear-gradient(0deg,transparent,#000 24%,#000 72%,transparent);
  mask-composite: intersect;
}
.battlepass-page .scene-lines { display: none; }
.battlepass-page .scene-glow { position: absolute; right: 0; top: 0; width: 55%; height: 100%; z-index: -1; pointer-events: none; }
.battlepass-page .glow-light { position: absolute; inset: 0; background: radial-gradient(ellipse, color-mix(in srgb, var(--glow-color) 16%, transparent), transparent 70%); }
.battlepass-page .preview-details { min-width: 0; max-height: 100%; overflow: auto; }
.battlepass-page .preview-copy { position: relative; display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.battlepass-page .preview-copy .sr-only { top: 0; left: 0; margin: 0; }
.battlepass-page .preview-rarity { display: inline-flex; align-items: center; gap: 7px; color: var(--rarity); background: color-mix(in srgb, var(--rarity) 12%, #12171e); border: 1px solid color-mix(in srgb, var(--rarity) 45%, transparent); padding: 5px 9px; border-radius: 4px; font-size: 12px; line-height: 1.2; font-weight: 650; }
.battlepass-page .preview-rarity::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.battlepass-page .preview-meta { float: none; margin: 0; text-align: right; color: #c2ccd9; font-size: 11px; }
.battlepass-page .preview-copy h2 { grid-column: 1/-1; margin: 0; padding: 0; font: 700 clamp(26px, min(4.7dvh,3.7vw), 52px)/1.08 var(--pass-display); text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.battlepass-page .preview-copy h2[data-long='true'] { font-size: clamp(24px, min(4dvh,3.1vw), 40px); }
.battlepass-page .modal-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; margin: 0 0 12px; max-height: none; overflow: visible; }
.battlepass-page .modal-item { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 32px; max-width: none; padding: 0; border: 0; font-size: 12px; line-height: 1.3; color: #c4cedc; }
.battlepass-page .modal-item img { width: 26px; height: 30px; object-fit: contain; grid-row: auto; }
.battlepass-page .modal-item > span { min-width: 0; overflow-wrap: normal; }
.battlepass-page .modal-item strong { grid-column: auto; margin: 0; color: #f0f3f8; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.battlepass-page .modal-item:not(:has(img)) { grid-template-columns: minmax(0,1fr) auto; grid-column: 1/-1; }
.battlepass-page .preview-action { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: 44px 16px; align-content: start; gap: 7px 10px; }
.battlepass-page .preview-action:not(:has(#reward-action:not([hidden]))) { grid-template-columns: minmax(0,220px); }
.battlepass-page #claim { height: 44px; min-height: 44px; min-width: 0; width: 100%; border-radius: 5px; background: #ff633e; border: 1px solid #ff875f; color: #170c08; font-size: 12px; font-weight: 700; padding: 5px 10px; line-height: 1.2; }
.battlepass-page #claim:disabled { opacity: 1; color: #b8c4d3; background: #1b212b; border-color: #394351; }
.battlepass-page #claim[data-claimed='true'] { color: #b9d4c0; }
.battlepass-page .preview-state { grid-column: 1/-1; grid-row: 2; color: #bbc6d5; font-size: 11px; line-height: 1.4; max-width: none; min-height: 0; overflow: auto; }
.battlepass-page .reward-action { grid-column: 2; grid-row: 1; display: flex; justify-content: center; align-items: center; height: 44px; min-height: 44px; padding: 5px 9px; border: 1px solid #697789; border-radius: 5px; background: #28313d; color: #eef3fa; font-size: 12px; font-weight: 650; line-height: 1.2; text-decoration: none; }
.battlepass-page .scene-display { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr); padding: 12px; }
.battlepass-page .scene-orbit,.battlepass-page .scene-floor { display: none; }
.battlepass-page .preview-art { position: relative; height: 100%; width: 100%; min-height: 0; display: grid; place-items: center; container-type: size; }
.battlepass-page .scene-items { position: relative; display: block; width: 100%; height: 100%; padding: 0; }
.battlepass-page .scene-piece { position: relative; width: 100%; height: 100%; min-height: 0; min-width: 0; transform: none; }
.battlepass-page .scene-piece .art { display: grid; grid-template-rows: minmax(0,1fr); width: 100%; height: 100%; min-height: 0; margin: 0; background: none; }
.battlepass-page .scene-piece .art img { width: 100%; height: 100%; min-height: 0; min-width: 0; max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px #0005); }
.battlepass-page .scene-items[data-layout='bundle'] .scene-piece { position: absolute; }
.battlepass-page .scene-items[data-layout='bundle'] .scene-piece:first-child { left: 7%; top: 2%; width: 64%; height: 86%; z-index: 1; }
.battlepass-page .scene-items[data-layout='bundle'] .scene-piece:nth-child(2) { left: 51%; top: 8%; width: 43%; height: 68%; z-index: 2; }
.battlepass-page .scene-items[data-layout='bundle'] .scene-piece:nth-child(3) { left: 4%; top: 46%; width: 59%; height: 50%; z-index: 3; }
.battlepass-page .scene-items[data-layout='bundle'] .scene-piece:nth-child(4) { left: 37%; top: 48%; width: 59%; height: 50%; z-index: 4; }
.battlepass-page .scene-items[data-count='2'] .scene-piece:nth-child(2) { left: 44%; top: 35%; width: 51%; height: 60%; }
.battlepass-page .scene-items[data-count='3'] .scene-piece:nth-child(3) { left: 26%; top: 45%; width: 59%; height: 53%; }
.battlepass-page .scene-items[data-count='5'] .scene-piece:nth-child(2) { left: 55%; top: 5%; width: 40%; height: 64%; }
.battlepass-page .scene-items[data-count='5'] .scene-piece:nth-child(3) { left: 3%; top: 40%; width: 54%; height: 55%; }
.battlepass-page .scene-items[data-count='5'] .scene-piece:nth-child(4) { left: 25%; top: 52%; width: 53%; height: 46%; }
.battlepass-page .scene-items[data-count='5'] .scene-piece:nth-child(5) { left: 60%; top: 48%; width: 38%; height: 43%; z-index: 5; }
.battlepass-page .scene-items[data-layout='grid'] { display: grid; grid-template-columns: repeat(var(--art-columns,1),minmax(0,1fr)); grid-template-rows: repeat(var(--art-rows,1),minmax(0,1fr)); gap: 6px; }
@supports (width: 1cqw) {
 .battlepass-page .scene-items { width: min(100cqw,120cqh,520px); height: min(100cqh,83.333cqw,433.333px); }
 .battlepass-page .scene-items[data-layout='single'] { width: min(100cqw,120cqh,350px); }
 .battlepass-page .scene-items[data-layout='grid'] { width: 100%; height: 100%; }
}
.battlepass-page .motion-ghost { position: absolute; inset: auto; pointer-events: none; z-index: 4; margin: 0; }
.battlepass-page .art-unavailable { font-size: 11px; color: var(--muted); }

/* A single horizontal rail keeps both tracks and their levels in alignment. */
.battlepass-page .reward-carousel { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 4px 12px; align-items: start; }
.battlepass-page .lane-label { grid-column: 1; grid-row: 1; margin-top: calc(var(--track-head-height) + var(--track-gap) + 12px); color: #d6c6ab; font: 650 12px/1 var(--pass-display); }
.battlepass-page .free-label { margin-top: calc(var(--track-head-height) + var(--track-card-height) + var(--track-gap)*2 + 12px); color: #bbc5d3; }
.battlepass-page .reward-grid { --visible-levels: 7; --road-gap: 12px; display: flex; grid-column: 2; grid-row: 1; gap: var(--road-gap); min-width: 0; padding: 4px 2px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: none; overflow-anchor: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; user-select: none; cursor: grab; }
/* Fade the scroll viewport itself so the page atmosphere stays continuous. */
.battlepass-page .reward-grid[data-edge-start] {
  --rail-edge: clamp(16px,3vw,48px);
  --rail-fade-start: min(var(--rail-edge),var(--rail-scroll-start));
  --rail-fade-end: min(var(--rail-edge),var(--rail-scroll-end));
  mask-image: linear-gradient(90deg,transparent,#000 var(--rail-fade-start),#000 calc(100% - var(--rail-fade-end)),transparent);
}
.battlepass-page .reward-grid[data-edge-start='true'] { --rail-fade-start: 0px; }
.battlepass-page .reward-grid[data-edge-end='true'] { --rail-fade-end: 0px; }
/* Keyboard focus rings must remain fully visible, including at the rail edges. */
.battlepass-page .reward-grid:is(:focus-visible,:has(:focus-visible)) { mask-image: none; }
.battlepass-page .reward-level { position: relative; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: var(--track-head-height) var(--track-card-height) var(--track-card-height); gap: var(--track-gap); content-visibility: visible; contain-intrinsic-size: none; }
.battlepass-page .level-head { display: grid; place-items: center; margin: 0; padding: 0; border: 0; position: relative; }
.battlepass-page .level-head::before { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: #ffffff14; }
.battlepass-page .level-head b { position: relative; padding: 0 10px; background: var(--bg); color: #aebccc; font: 500 13px/1 var(--pass-display); font-variant-numeric: tabular-nums; }
.battlepass-page .reward-level[data-current='true'] .level-head b { color: #ffac8f; font-size: 17px; }
.battlepass-page .reward-carousel .reward-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 24px 30px minmax(0,1fr) 18px; gap: 4px; height: var(--track-card-height); min-height: 0; width: 100%; margin: 0; padding: 0 12px 9px; border: 0; border-radius: 4px; overflow: hidden; background: none; color: #e6edf5; cursor: inherit; transition: transform 150ms ease; }
.battlepass-page .reward-carousel .reward-card::before { content: ''; position: absolute; z-index: -2; inset: 0; height: auto; border: 1px solid color-mix(in srgb,var(--rarity) 28%,#242930); border-radius: inherit; background: #141a21; opacity: 1; }
.battlepass-page .reward-carousel .reward-card::after { content: ''; position: absolute; z-index: -1; inset: 0; border: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--rarity) 7%,transparent),transparent 70%); }
.battlepass-page .reward-carousel .card-top { min-height: 0; height: auto; display: flex; align-items: center; margin-inline: -12px; padding: 4px 12px; background: color-mix(in srgb,var(--rarity) 19%,#151a21); border-bottom: 1px solid color-mix(in srgb,var(--rarity) 25%,transparent); }
.battlepass-page .card-rarity { display: inline-flex; align-items: center; gap: 6px; color: var(--rarity); font-size: 11px; line-height: 1.2; font-weight: 650; }
.battlepass-page .card-rarity::before { content: ''; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); flex: 0 0 auto; }
.battlepass-page .reward-carousel .reward-card .art { height: 100%; min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0,1fr); background: none; }
.battlepass-page .reward-carousel .reward-card .art img { width: 100%; height: 100%; min-height: 0; min-width: 0; max-height: 100%; object-fit: contain; transform: none; filter: drop-shadow(0 4px 4px #0004); }
.battlepass-page .reward-carousel .reward-card.claimed .art { opacity: 1; }
.battlepass-page .reward-carousel .quantity { bottom: 0; right: 0; padding: 2px 5px; background: #0c1119dd; border-radius: 4px; color: #e6edf5; font-size: 10px; line-height: 1.1; }
.battlepass-page .reward-carousel .reward-card h3 { margin: 0; height: auto; min-height: 0; align-self: center; font-size: 12px; line-height: 1.25; font-weight: 600; text-transform: none; overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.battlepass-page .reward-carousel .card-state { margin: 0; padding: 0; min-height: 0; height: auto; border: 0; display: flex; align-items: center; justify-content: flex-start; gap: 4px; font-size: 11px; line-height: 1.2; color: #aebed1; background: transparent; }
.battlepass-page .reward-carousel .card-state > span { background: transparent; padding: 0; border: 0; box-shadow: none; }
.battlepass-page .reward-carousel .card-state svg { width: 13px; height: 13px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.battlepass-page .reward-carousel .reward-card[data-state='available'] .card-state { color: #e2eadf; }
.battlepass-page .reward-carousel .reward-card[data-state='available'] .card-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b7dca4; }
.battlepass-page .reward-carousel .reward-card[data-state='claimed'] .card-state { color: #a7bcb0; }
.battlepass-page .reward-carousel .reward-card[data-state='locked']::before { background: #1c222b; border-color: #3a4350; }
.battlepass-page .reward-carousel .reward-card[data-state='locked'] .art img { opacity: .42; filter: grayscale(.9); }
.battlepass-page .reward-carousel .reward-card[data-state='locked'] h3 { color: #bac6d5; }
.battlepass-page .card-lock { position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: #465262; color: #eff4fa; }
.battlepass-page .card-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.battlepass-page .reward-carousel .reward-card[aria-pressed='true']::before { border-color: #f0ba9c; background: #1b222c; }
.battlepass-page .reward-carousel .reward-card[aria-pressed='true'] { outline: 1px solid #f0ba9c; outline-offset: -1px; }
.battlepass-page .reward-placeholder { display: grid; place-items: center; color: var(--muted); }
.battlepass-page .carousel-controls { grid-column: 2; display: flex; align-items: center; gap: 12px; min-width: 0; }
.battlepass-page .current-level { min-height: 44px; padding: 8px 0; border: 0; background: none; color: #bbc8d9; font-size: 12px; }
.battlepass-page .range-label { margin-left: auto; color: #aebed1; font-size: 11px; white-space: nowrap; }
.battlepass-page .carousel-buttons { display: flex; gap: 8px; }
.battlepass-page .carousel-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 5px; background: #1c242e; border: 1px solid #3b485a; }
.battlepass-page :is(#previous,#following) { grid-column: auto; grid-row: auto; }
.battlepass-page .carousel-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Native dialog keeps grants separate from their presentation and supplies focus containment. */
.battlepass-page .reward-reveal { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: auto; color: var(--text); background: #080c13f8; isolation: isolate; }
.battlepass-page .reward-reveal::backdrop { background: #05070ad9; }
.battlepass-page :is(.reveal-haze,.reveal-rays,.reveal-flash,.reveal-particles) { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.battlepass-page .reveal-haze { background: radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--rarity) 18%,transparent),transparent 65%); }
.battlepass-page .reveal-rays { background: radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--rarity) 9%,transparent),transparent 70%); }
.battlepass-page .reveal-flash { opacity: 0; background: radial-gradient(ellipse at 50% 40%,var(--rarity),transparent 55%); }
.battlepass-page .reveal-particles i { position: absolute; top: 40%; left: 50%; width: 3px; height: 3px; background: var(--rarity); border-radius: 50%; opacity: 0; }
.battlepass-page .reveal-skip { position: fixed; top: max(16px,env(safe-area-inset-top)); right: max(20px,env(safe-area-inset-right)); z-index: 5; min-height: 44px; padding: 10px 16px; border: 1px solid #586678; background: #18222f; border-radius: 5px; font-size: 12px; }
.battlepass-page .reveal-presentation { width: min(900px,100%); min-height: 100%; margin: auto; padding: 72px 24px 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; text-align: center; }
.battlepass-page .reveal-art { position: relative; width: min(650px,100%); height: clamp(140px,34dvh,320px); flex-shrink: 0; padding: 12px; display: grid; place-items: center; container-type: size; }
.battlepass-page .reveal-copy { flex-shrink: 0; }
.battlepass-page .reveal-heading { margin: 0 0 8px; font-size: 12px; color: #ccd7e6; letter-spacing: 2px; }
.battlepass-page .reveal-copy h2 { margin: 0 0 10px; font: 700 clamp(26px,4vw,48px)/1.1 var(--pass-display); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.battlepass-page .reveal-rarity { margin: 0; color: var(--rarity); font-size: 13px; }
.battlepass-page .reveal-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.battlepass-page .reveal-item { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 1.4; color: #c7d4e4; }
.battlepass-page .reveal-item strong { color: #f0f4fa; white-space: nowrap; }
.battlepass-page .reveal-continue { min-width: 210px; min-height: 44px; border-radius: 5px; }
.battlepass-page .reward-reveal:not([data-phase='ready']) .reveal-continue { visibility: hidden; }

.battlepass-page[data-view='rewards'] { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.battlepass-page[data-view='rewards'] > .dn-commerce-header { flex: 0 0 auto; }
.battlepass-page[data-view='rewards'] > .footer { display: none; }
.battlepass-page[data-view='rewards'] .shell { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px max(24px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
.battlepass-page[data-view='rewards'] .pass-overview { flex: 0 0 auto; }
.battlepass-page[data-view='rewards'] #rewards-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; container-type: size; }
.battlepass-page[data-view='rewards'] .reward-stage { flex: 1; min-height: 0; height: auto; }
.battlepass-page[data-view='rewards'] .reward-carousel { flex: 0 0 auto; --track-card-height: clamp(128px,calc((100dvh - 610px)/2),176px); }
@supports (height: 1cqh) { .battlepass-page[data-view='rewards'] .reward-carousel { --track-card-height: clamp(128px,calc((100cqh - 420px)/2),176px); } }

/* Task controls retain their local interaction state while Carbon owns progress. */
.battlepass-page #tasks-panel .section-head { margin: 10px 0 20px; }
.battlepass-page #tasks-panel .section-head h2 { margin: 0 0 8px; font: 650 28px/1.2 var(--pass-display); }
.battlepass-page #tasks-panel .section-head p { max-width: 65ch; margin: 0; font-size: 14px; line-height: 1.5; color: #c0cad8; }
.battlepass-page .task-dashboard { margin-bottom: 22px; }
.battlepass-page .task-summary { margin-bottom: 14px; font-size: 14px; color: #d5dce6; font-variant-numeric: tabular-nums; }
.battlepass-page .task-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.battlepass-page .task-filters button { padding: 10px 14px; min-height: 44px; border-radius: 5px; border: 1px solid #3c444f; background: #151b23; color: #c2ccda; font-size: 13px; }
.battlepass-page .task-filters button[aria-pressed='true'] { color: #fff; border-color: #ff9b7e; background: #49302b; }
.battlepass-page .task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.battlepass-page .task-card { background: #171d25; border: 1px solid #343d49; border-radius: 8px; padding: 22px; }
.battlepass-page .task-card[data-completed='true'] { border-color: #688772; }
.battlepass-page .task-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 12px; }
.battlepass-page .task-cadence { color: #b8c4d5; }
.battlepass-page .task-xp { color: #ffc09e; }
.battlepass-page .task-card h3 { font: 650 22px/1.2 var(--pass-display); margin: 0 0 8px; overflow-wrap: anywhere; }
.battlepass-page .task-card p { font-size: 14px; line-height: 1.5; margin: 0 0 18px; color: #c5cfdd; }
.battlepass-page .task-card progress { height: 6px; margin-bottom: 10px; }
.battlepass-page .task-card .between { font-size: 12px; margin-bottom: 16px; }

/* Published control layer uses !important; keep its exception local to the reward rail. */
@layer daynull-buttons {
 html:root body.battlepass-page #current-level { background: transparent!important; box-shadow: none!important; border: 0!important; }
 html:root body.battlepass-page #reward-grid button.reward-card { background: transparent!important; color: #e6edf5!important; border: 0!important; box-shadow: none!important; }
 html:root body.battlepass-page #reward-grid button.reward-card::before { background: #141a21!important; box-shadow: none!important; }
 html:root body.battlepass-page #reward-grid button.reward-card::after { background: radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--rarity) 7%,transparent),transparent 70%)!important; box-shadow: none!important; }
 html:root body.battlepass-page #reward-grid button.reward-card[data-state='locked']::before { background: #1c222b!important; }
 html:root body.battlepass-page #reward-grid button.reward-card[aria-pressed='true']::before { background: #1b222c!important; }
 html:root body.battlepass-page #reward-grid .card-state, html:root body.battlepass-page #reward-grid .card-state > span { background: transparent!important; box-shadow: none!important; }
 html:root body.battlepass-page :is(#claim,#reveal-continue):enabled { background: #ff633e!important; color: #170c08!important; border-color: #ff875f!important; }
 html:root body.battlepass-page #claim:disabled { background: #1b212b!important; color: #b8c4d3!important; border-color: #394351!important; }
 html:root body.battlepass-page #claim[data-claimed='true'] { color: #b9d4c0!important; }
 html:root body.battlepass-page .dn-commerce-header .dn-commerce-menu nav { background: #17181b!important; opacity: 1!important; }
 html:root body.battlepass-page .dn-commerce-header .dn-commerce-menu nav :is(a,button) { color: #f4f1ea!important; background: transparent!important; }
}
@media (hover: hover) and (pointer: fine) {
 .battlepass-page .reward-carousel .reward-card:hover { transform: translateY(-2px); }
 .battlepass-page .pass-switch a:hover { background: #ffffff0c; color: #fff; }
 .battlepass-page .reward-action:hover { background: #364457; }
}
@media (max-width: 1280px) {
 .battlepass-page .reward-grid { --visible-levels: 5; }
 .battlepass-page .dn-commerce-header { grid-template-columns: 130px minmax(0,1fr) auto; gap: 12px; padding-inline: 16px; }
 .battlepass-page .pass-switch { gap: 2px; }
 .battlepass-page .pass-switch a { padding-inline: 10px; }
 .battlepass-page .pass-switch svg { display: none; }
 .battlepass-page .reward-stage { gap: 20px; padding-inline: 12px; }
 .battlepass-page .preview-copy h2,.battlepass-page .preview-copy h2[data-long='true'] { font-size: clamp(26px,3.5dvh,34px); }
 .battlepass-page .preview-copy { gap: 6px 10px; margin-bottom: 8px; }
 .battlepass-page .modal-items { margin-bottom: 8px; }
 .battlepass-page .modal-item { grid-template-columns: 22px minmax(0,1fr) auto; min-height: 28px; font-size: 11px; gap: 6px; }
 .battlepass-page .modal-item img { width: 22px; height: 26px; }
}
@media (max-width: 850px) { .battlepass-page .reward-grid { --visible-levels: 4; } }
@media (max-width: 900px) {
 .battlepass-page .dn-commerce-header { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 56px 44px; gap: 0; min-height: 100px; padding-inline: 12px; }
 .battlepass-page .dn-commerce-header .dn-commerce-actions { grid-column: 2; }
 .battlepass-page .pass-switch { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; padding: 0; gap: 4px; }
 .battlepass-page .pass-switch a { flex: 1 0 auto; padding-inline: 12px; }
 .battlepass-page .dn-commerce-header :is(.dn-commerce-profile,.dn-commerce-ticket) { width: 44px; min-width: 44px; max-width: 44px; padding: 0; }
 .battlepass-page .dn-commerce-profile>span:last-child { display: none; }
}
@media (max-width: 760px) {
 .battlepass-page .shell,.battlepass-page[data-view='rewards'] .shell { padding: 8px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
 .battlepass-page .pass-overview { display: grid; grid-template-columns: minmax(0,1fr) 112px; align-items: center; gap: 12px; margin-bottom: 8px; }
 .battlepass-page .pass-heading h1 { font-size: 22px; margin-bottom: 3px; }
 .battlepass-page .season-caption { font-size: 10px; gap: 4px 10px; }
 .battlepass-page .progress-panel { display: block; width: 100%; max-width: none; }
 .battlepass-page .progress-copy progress { margin: 0; }
 .battlepass-page .level { display: flex; justify-content: end; align-items: baseline; gap: 5px; padding-right: 0; border-right: 0; margin-bottom: 5px; }
 .battlepass-page .level strong { font-size: 22px; margin: 0; }
 .battlepass-page .between { margin-bottom: 4px; gap: 8px; font-size: 10px; }
 .battlepass-page .progress-copy .between { justify-content: end; }
 .battlepass-page #xp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .battlepass-page[data-view='rewards'] .reward-stage { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto auto; padding: 0; gap: 4px; align-items: stretch; }
 .battlepass-page[data-view='rewards'] .preview-details { display: contents; }
 .battlepass-page[data-view='rewards'] .scene-display { grid-row: 2; grid-column: 1; padding: 0; }
 .battlepass-page[data-view='rewards'] .preview-copy { grid-row: 1; grid-column: 1; margin: 0; gap: 5px 8px; }
 .battlepass-page .preview-copy h2 { font-size: clamp(26px,7.4vw,32px); }
 .battlepass-page .preview-copy h2[data-long='true'] { font-size: clamp(24px,6.6vw,28px); }
 .battlepass-page .preview-rarity { font-size: 11px; padding: 4px 7px; }
 .battlepass-page .preview-meta { font-size: 10px; }
 .battlepass-page[data-view='rewards'] .modal-items { grid-row: 3; grid-column: 1; display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; margin: 0; min-height: 28px; padding-bottom: 0; }
 .battlepass-page .modal-item { flex: 0 0 auto; grid-template-columns: 22px minmax(0,1fr) auto; font-size: 12px; gap: 5px; }
 .battlepass-page .modal-item img { width: 22px; height: 26px; }
 .battlepass-page .modal-item strong { font-size: 11px; }
 .battlepass-page[data-view='rewards'] .preview-action { grid-row: 4; grid-column: 1; row-gap: 4px; }
 .battlepass-page #claim,.battlepass-page .reward-action { font-size: 13px; }
 .battlepass-page .preview-action:not(:has(#reward-action:not([hidden]))) { grid-template-columns: minmax(0,1fr); }
 .battlepass-page .reward-carousel { grid-template-columns: 24px minmax(0,1fr); column-gap: 6px; }
 .battlepass-page .reward-grid { --visible-levels: 2; --road-gap: 8px; }
 /* Artwork gets the remaining height; rails grow only on taller viewports. */
 .battlepass-page[data-view='rewards'] .reward-carousel { --track-card-height: clamp(72px,calc((100dvh - 636px)/2),112px); }
 .battlepass-page .reward-carousel .reward-card { padding: 0 9px 7px; grid-template-rows: 22px 26px minmax(0,1fr) 14px; gap: 3px; }
 .battlepass-page .reward-carousel .card-top { margin-inline: -9px; padding: 3px 9px; }
 .battlepass-page .card-rarity { font-size: 11px; }
 .battlepass-page .reward-carousel .reward-card h3 { font-size: 11px; }
 .battlepass-page .reward-carousel .card-state { font-size: 10px; }
 .battlepass-page .card-lock { right: 7px; bottom: 6px; width: 17px; height: 17px; }
 .battlepass-page .carousel-controls { grid-column: 1/-1; gap: 8px; }
 .battlepass-page .current-level { font-size: 10px; }
 .battlepass-page .range-label { font-size: 10px; }
 .battlepass-page .task-grid { grid-template-columns: minmax(0,1fr); }
 .battlepass-page .task-card { padding: 18px; }
 .battlepass-page .task-card .between { flex-wrap: wrap; }
 .battlepass-page .reveal-presentation { padding: 64px 16px 24px; gap: 16px; }
 .battlepass-page .reveal-items { gap: 8px 16px; }
 .battlepass-page .reveal-item { font-size: 12px; }
}
@media (max-width: 760px) and (max-height: 779px) {
 .battlepass-page .dn-commerce-header { grid-template-rows: 48px 44px; min-height: 92px; }
 .battlepass-page { --track-head-height: 20px; --track-gap: 8px; }
 .battlepass-page .reward-carousel .reward-card { grid-template-columns: 44px minmax(0,1fr); grid-template-rows: 22px minmax(0,1fr) 14px; gap: 3px 8px; }
 .battlepass-page .reward-carousel .card-top { grid-row: 1; grid-column: 1/-1; }
 .battlepass-page .reward-carousel .reward-card .art { grid-row: 2; grid-column: 1; }
 .battlepass-page .reward-carousel .reward-card h3 { grid-row: 2; grid-column: 2; }
 .battlepass-page .reward-carousel .card-state { grid-row: 3; grid-column: 1/-1; }
}
@media (max-width: 760px) and (max-height: 620px) {
 .battlepass-page { --track-head-height: 20px; --track-gap: 8px; }
 body.battlepass-page:has(>.dn-commerce-header)>main.shell { padding-top: 8px; }
 .battlepass-page .dn-commerce-header { grid-template-rows: 48px 44px; min-height: 92px; }
 .battlepass-page .pass-overview { display: grid; grid-template-columns: minmax(0,1fr) 104px; align-items: center; gap: 8px; margin-bottom: 4px; }
 .battlepass-page .pass-heading { padding-left: 6px; }
 .battlepass-page .pass-heading h1 { font-size: 20px; }
 .battlepass-page .season-caption { flex-wrap: nowrap; font-size: 9px; gap: 6px; white-space: nowrap; }
 .battlepass-page .season-caption span { overflow: hidden; text-overflow: ellipsis; }
 .battlepass-page .progress-panel { width: 100%; max-width: 100%; gap: 6px; }
 .battlepass-page .level { border-right: 0; padding-right: 0; }
 .battlepass-page .level { display: flex; }
 .battlepass-page .between { flex-direction: column; align-items: start; gap: 3px; }
 .battlepass-page #xp-label { display: none; }
 .battlepass-page[data-view='rewards'] .reward-carousel { --track-card-height: 62px; }
 .battlepass-page[data-view='rewards'] .reward-stage { grid-template-columns: minmax(0,1fr) minmax(80px,34%); grid-template-rows: auto minmax(0,1fr) auto; gap: 4px 8px; }
 .battlepass-page[data-view='rewards'] .preview-copy { grid-row: 1; grid-column: 1/-1; align-self: start; }
 .battlepass-page .preview-rarity { font-size: 10px; padding: 3px 6px; }
 .battlepass-page .preview-meta { font-size: 9px; }
 .battlepass-page .preview-copy h2 { font-size: 22px; }
 .battlepass-page .preview-copy h2[data-long='true'] { font-size: 20px; }
 .battlepass-page[data-view='rewards'] .scene-display { position: relative; grid-row: 2; grid-column: 2; width: 100%; height: 100%; padding: 0; }
 .battlepass-page[data-view='rewards'] .modal-items { grid-row: 2; grid-column: 1; min-height: 26px; padding: 0; align-items: center; }
 .battlepass-page[data-view='rewards'] .preview-action { grid-row: 3; grid-column: 1/-1; row-gap: 3px; }
 .battlepass-page .reward-carousel .reward-card { grid-template-columns: 32px minmax(0,1fr); grid-template-rows: 18px minmax(0,1fr) 12px; padding: 0 6px 4px; gap: 2px 6px; }
 .battlepass-page .reward-carousel .card-top { margin-inline: -6px; padding-inline: 6px; }
 .battlepass-page .reward-carousel .card-top { grid-column: 1/-1; grid-row: 1; }
 .battlepass-page .reward-carousel .reward-card .art { grid-column: 1; grid-row: 2; }
 .battlepass-page .reward-carousel .quantity { font-size: 9px; padding: 1px 3px; }
 .battlepass-page .reward-carousel .reward-card h3 { grid-column: 2; grid-row: 2; font-size: 10px; line-height: 1.1; }
 .battlepass-page .reward-carousel .card-state { grid-column: 1/-1; grid-row: 3; }
}
@media (max-height: 500px) and (min-width: 500px) {
 .battlepass-page { --track-head-height: 14px; --track-gap: 5px; }
 body.battlepass-page:has(>.dn-commerce-header)>main.shell { padding-top: 4px; }
 .battlepass-page .dn-commerce-header { grid-template-rows: 48px 44px; min-height: 92px; }
 .battlepass-page .pass-overview { flex-direction: row; gap: 12px; }
 .battlepass-page .pass-heading h1 { font-size: 20px; }
 .battlepass-page .progress-panel { max-width: 46%; }
 .battlepass-page[data-view='rewards'] #rewards-panel { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: minmax(0,1fr); gap: 16px; }
 .battlepass-page[data-view='rewards'] .reward-stage { display: block; align-self: center; max-height: 100%; overflow: auto; }
 .battlepass-page[data-view='rewards'] .preview-details { display: block; max-height: none; }
 .battlepass-page[data-view='rewards'] .preview-copy { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 4px; margin-bottom: 4px; }
 .battlepass-page .preview-copy h2,.battlepass-page .preview-copy h2[data-long='true'] { font-size: 18px; padding-right: 0; }
 .battlepass-page .scene-display { display: none; }
 .battlepass-page[data-view='rewards'] .modal-items { display: flex; overflow-x: auto; gap: 10px; min-height: 26px; margin-bottom: 4px; }
 .battlepass-page .modal-item { flex: 0 0 auto; }
 .battlepass-page[data-view='rewards'] .reward-carousel { --track-card-height: clamp(44px,calc((100dvh - 280px)/2),96px); row-gap: 0; }
 @supports (height: 1cqh) { .battlepass-page[data-view='rewards'] .reward-carousel { --track-card-height: clamp(44px,calc((100cqh - 100px)/2),96px); } }
 .battlepass-page .reward-grid { padding-block: 0; }
 .battlepass-page .preview-meta { text-align: right; margin: 0; }
 .battlepass-page .preview-rarity { margin: 0; }
 .battlepass-page .reward-grid { --visible-levels: 2; }
 .battlepass-page .reward-carousel .reward-card { grid-template-columns: 22px minmax(0,1fr); grid-template-rows: 12px minmax(0,1fr) 12px; padding: 3px 5px; gap: 1px 4px; }
 .battlepass-page .reward-carousel .card-top { grid-column: 1/-1; grid-row: 1; }
 .battlepass-page .reward-carousel .reward-card .art { grid-column: 1; grid-row: 2; }
 .battlepass-page .reward-carousel .reward-card h3 { grid-column: 2; grid-row: 2; font-size: 9px; -webkit-line-clamp: 1; }
 .battlepass-page .reward-carousel .card-state { grid-column: 1/-1; grid-row: 3; font-size: 9px; }
 .battlepass-page .carousel-controls { grid-column: 1/-1; }
}
/* Keep actions on one baseline while names and reward contents change above. */
@media (min-width: 761px) and (min-height: 501px) {
 .battlepass-page .preview-details { display: grid; grid-template-rows: auto minmax(0,1fr) auto; align-self: stretch; height: 100%; min-height: 0; overflow: hidden; padding-block: 12px; }
 .battlepass-page .modal-items { min-height: 0; overflow: auto; align-content: start; }
 .battlepass-page .preview-action { grid-template-rows: 44px 31px; align-content: start; }
 .battlepass-page .preview-action:not(:has(#reward-action:not([hidden]))) { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 .battlepass-page .preview-state { min-height: 0; overflow: auto; }
}
@media (min-width: 761px) and (min-height: 501px) and (max-height: 800px) {
 .battlepass-page[data-view='rewards'] .reward-carousel { --track-card-height: 90px; }
 .battlepass-page .reward-carousel .reward-card { grid-template-columns: 46px minmax(0,1fr); grid-template-rows: 22px minmax(0,1fr) 16px; padding: 0 9px 6px; gap: 3px 8px; }
 .battlepass-page .reward-carousel .card-top { grid-column: 1/-1; grid-row: 1; margin-inline: -9px; padding-inline: 9px; }
 .battlepass-page .reward-carousel .reward-card .art { grid-column: 1; grid-row: 2; }
 .battlepass-page .reward-carousel .reward-card h3 { grid-column: 2; grid-row: 2; }
 .battlepass-page .reward-carousel .card-state { grid-column: 1/-1; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
 .battlepass-page .reward-card { transition: none; }
 .battlepass-page .reward-carousel .reward-card:hover { transform: none; }
 .battlepass-page .reward-grid { scroll-behavior: auto; }
}