:root {
    --bg: #18202c;
    --bg-deep: #111722;
    --surface: #232c3a;
    --surface-2: #2b3647;
    --surface-3: #354257;
    --line: rgba(230,238,255,.16);
    --line-strong: rgba(238,244,255,.28);
    --text: #fffaf0;
    --muted: #c5ccd7;
    --muted-2: #9aa5b5;
    --accent: #dba653;
    --accent-bright: #f4c875;
    --purple: #a97aff;
    --blue: #66c9ff;
    --gold: #f2ba49;
    --success: #66d7a0;
    --danger: #f17878;
    --rail: 78px;
    --drawer: 276px;
    --radius: 18px;
    --shadow: 0 24px 80px rgba(0,0,0,.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, Avenir, "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.55; }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: radial-gradient(circle at 75% 0%, rgba(128,83,255,.10), transparent 34%), radial-gradient(circle at 20% 90%, rgba(54,145,184,.07), transparent 30%), linear-gradient(160deg,#11151e,#0b0d13 60%); }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
::selection { background: var(--accent-bright); color: #15100a; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.skip-link { position: fixed; left: 14px; top: -80px; z-index: 1000; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: #111; }
.skip-link:focus { top: 14px; }
.atmosphere { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg,rgba(8,10,14,.30),transparent 20%,transparent 80%,rgba(8,10,14,.20)); }
.ember-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4; }

.icon-rail { position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--rail); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 15px 10px; border-right: 1px solid var(--line); background: #12161e; box-shadow: 12px 0 35px rgba(0,0,0,.14); }
.rail-logo { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid rgba(244,200,117,.25); border-radius: 14px; background: linear-gradient(145deg,#242937,#171b24); }
.rail-logo img { width: 36px; height: 36px; }
.rail-nav { display: flex; flex-direction: column; gap: 8px; }
.rail-button { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 13px; background: transparent; color: #777f8d; cursor: pointer; transition: .2s; }
.rail-button svg,.mobile-menu svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-button > span { position: absolute; left: 59px; top: 50%; z-index: 90; opacity: 0; transform: translate(8px,-50%); padding: 5px 9px; border-radius: 6px; background: #05070a; color: #eee; font-size: 12px; pointer-events: none; white-space: nowrap; transition: .18s; }
.rail-button:hover,.rail-button.is-active { background: rgba(169,122,255,.13); color: #cbb3ff; }
.rail-button:hover > span { opacity: 1; transform: translate(0,-50%); }
.rail-button.is-active::before { content: ""; position: absolute; left: -10px; width: 3px; height: 24px; border-radius: 0 4px 4px 0; background: var(--purple); box-shadow: 0 0 13px var(--purple); }
.rail-bottom { margin-top: auto; }
.admin-orb { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(219,166,83,.38); border-radius: 50%; background: linear-gradient(145deg,#3a3024,#211c17); color: var(--accent-bright); font-weight: 800; }

.pass-drawer { position: fixed; inset: 0 auto 0 var(--rail); z-index: 50; width: var(--drawer); display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(15,18,25,.98); transition: transform .28s cubic-bezier(.4,0,.2,1); }
.drawer-brand { min-height: 158px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 23px 20px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 20%,rgba(164,112,255,.32),transparent 28%), linear-gradient(145deg,#1c2130,#11151d); }
.drawer-brand::after { content: "✦"; position: absolute; right: 20px; top: 20px; color: rgba(244,200,117,.20); font: 68px Georgia,serif; }
.drawer-brand a { position: relative; z-index: 1; font: 23px/1.15 Georgia,serif; color: #fff7e8; }
.drawer-brand small { margin-top: 6px; color: #9da3ad; font-size: 11px; letter-spacing: .04em; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pass-nav { flex: 1; overflow-y: auto; padding: 20px 12px 28px; scrollbar-width: thin; scrollbar-color: #343a44 transparent; }
.nav-label { margin: 0 11px 9px; color: #606977; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav-section { margin-top: 22px; }
.pass-link { --pass-accent: var(--accent); min-height: 46px; display: flex; align-items: center; gap: 11px; padding: 8px 11px; margin-bottom: 3px; border-radius: 10px; color: #aeb5c0; transition: .18s; }
.pass-link > span { width: 25px; color: var(--pass-accent); text-align: center; font-size: 16px; }
.pass-link strong { min-width: 0; display: flex; flex-direction: column; font-size: 12px; }
.pass-link small { color: #676f7c; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pass-link:hover,.pass-link.is-active { color: #fff; background: rgba(255,255,255,.05); }
.pass-link.is-active { box-shadow: inset 3px 0 var(--pass-accent); }
.pass-link.is-home { color: var(--accent-bright); background: rgba(219,166,83,.07); }
.drawer-footer { padding: 14px 20px; border-top: 1px solid var(--line); color: #747d89; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.status-dot { width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 11px var(--success); }

.page-shell { min-height: 100vh; display: flex; flex-direction: column; margin-left: calc(var(--rail) + var(--drawer)); transition: margin-left .28s cubic-bezier(.4,0,.2,1); }
.topbar { position: sticky; top: 0; z-index: 35; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px clamp(22px,4vw,58px); border-bottom: 1px solid var(--line); background: rgba(13,16,23,.89); backdrop-filter: blur(18px); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-rune { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(169,122,255,.28); border-radius: 12px; background: rgba(169,122,255,.09); color: var(--purple); font-size: 19px; }
.topbar-title div { display: flex; flex-direction: column; }
.topbar-title small { color: #686f7c; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.topbar-title strong { font: 17px Georgia,serif; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.currency-chip { height: 39px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: #161b24; font-size: 12px; }
.currency-chip i { font-style: normal; text-shadow: 0 0 10px currentColor; }
.currency-chip.purple i { color: var(--purple); }.currency-chip.blue i { color: var(--blue); }.currency-chip.gold i { color: var(--gold); }
.user-chip { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 11px; color: #c6cbd3; font-size: 12px; }
.user-chip span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg,#42365c,#272133); color: #dccaff; font-weight: 800; }
.mobile-header { display: none; }
.main-content { width: 100%; max-width: 1580px; flex: 1; align-self: center; padding: clamp(24px,4vw,58px); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px clamp(24px,4vw,58px); border-top: 1px solid var(--line); color: #69717e; font-size: 10px; }

.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 16px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 12px; font-weight: 800; transition: .2s; }
.button-primary { color: #16100b; background: linear-gradient(135deg,var(--accent-bright),#d99e43); box-shadow: 0 12px 32px rgba(217,158,67,.15); }
.button-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button-ghost,.button-glass { color: #d8dbe0; border-color: var(--line-strong); background: rgba(255,255,255,.035); }
.button-ghost:hover,.button-glass:hover { border-color: rgba(244,200,117,.32); background: rgba(244,200,117,.07); }
.message-stack { position: fixed; z-index: 100; top: 88px; right: 24px; width: min(380px,calc(100vw - 32px)); display: grid; gap: 8px; }
.message { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #1b2029; box-shadow: var(--shadow); font-size: 12px; transition: .25s; }
.message-success { border-color: rgba(102,215,160,.38); }.message-error { border-color: rgba(241,120,120,.42); }.message-info { border-color: rgba(102,201,255,.38); }

.home-hero,.pass-hero { --pass-accent: var(--purple); --pass-secondary: var(--blue); position: relative; isolation: isolate; min-height: 430px; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.5fr); align-items: center; overflow: hidden; padding: clamp(34px,5vw,68px); border: 1px solid color-mix(in srgb,var(--pass-accent) 24%,transparent); border-radius: 24px; background: radial-gradient(circle at 82% 42%,color-mix(in srgb,var(--pass-accent) 30%,transparent),transparent 28%), radial-gradient(circle at 65% 100%,color-mix(in srgb,var(--pass-secondary) 14%,transparent),transparent 28%), linear-gradient(135deg,#181c28,#0e1118 68%); box-shadow: var(--shadow); }
.home-hero::before,.pass-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .30; background-image: linear-gradient(30deg,transparent 48%,color-mix(in srgb,var(--pass-accent) 22%,transparent) 49%,transparent 51%), linear-gradient(150deg,transparent 47%,rgba(255,255,255,.04) 48%,transparent 50%); background-size: 82px 82px; mask-image: linear-gradient(90deg,transparent,#000); }
.hero-copy,.pass-hero-copy { position: relative; z-index: 2; max-width: 720px; }
.hero-kicker { display: flex; align-items: center; gap: 9px; color: color-mix(in srgb,var(--pass-accent) 74%,white); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.hero-kicker i { width: 22px; height: 1px; background: currentColor; box-shadow: 0 0 9px currentColor; }
.hero-copy h1,.pass-hero-copy h1 { max-width: 720px; margin: 18px 0 15px; font: clamp(42px,5.7vw,78px)/.95 Georgia,serif; letter-spacing: -.045em; text-wrap: balance; }
.hero-copy p,.pass-hero-copy > p { max-width: 620px; margin: 0; color: #afb5c0; font-size: 16px; }
.hero-badges,.pass-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-badges span,.status-pill { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: rgba(0,0,0,.22); color: #bfc4cd; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.hero-sigil { position: absolute; z-index: -1; right: 28%; top: 50%; transform: translate(50%,-50%); width: 370px; height: 370px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--pass-accent) 20%,transparent); border-radius: 50%; color: color-mix(in srgb,var(--pass-accent) 30%,transparent); font: 230px Georgia,serif; }
.hero-sigil::before,.hero-sigil::after { content: ""; position: absolute; inset: 34px; border: 1px dashed color-mix(in srgb,var(--pass-secondary) 22%,transparent); border-radius: inherit; transform: rotate(27deg); }
.hero-sigil::after { inset: 76px; transform: rotate(-18deg); }
.hero-pass-card { position: relative; z-index: 3; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; border: 1px solid color-mix(in srgb,var(--pass-accent) 35%,transparent); border-radius: 20px; background: linear-gradient(160deg,color-mix(in srgb,var(--pass-accent) 18%,#191d28),rgba(14,17,24,.85)); box-shadow: 0 24px 75px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08); text-align: center; transform: perspective(800px) rotateY(-5deg); }
.hero-pass-card > strong { color: var(--pass-accent); font: 105px/1 Georgia,serif; text-shadow: 0 0 42px color-mix(in srgb,var(--pass-accent) 50%,transparent); }
.hero-pass-card h2 { margin: 8px 0; font: 22px Georgia,serif; }.hero-pass-card p { margin: 8px 0 0; color: #b8bdc6; }.hero-pass-card p b { color: var(--gold); font-size: 20px; }.hero-pass-card .owned-mark { color: var(--success); }.edition { position: absolute; top: 16px; left: 16px; color: #9fa6b2; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }

.section-block { margin-top: clamp(42px,6vw,76px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 19px; }
.section-heading h2 { margin: 0; font: clamp(26px,3vw,39px)/1.08 Georgia,serif; }.section-heading p { max-width: 470px; margin: 0; color: #858d9a; font-size: 12px; text-align: right; }
.pass-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 16px; }
.catalog-pass-card { --pass-accent: var(--purple); position: relative; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 86% 16%,color-mix(in srgb,var(--pass-accent) 24%,transparent),transparent 30%),linear-gradient(145deg,#1a1f2a,#12161e); transition: .25s; }
.catalog-pass-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--pass-accent) 38%,transparent); box-shadow: 0 24px 55px rgba(0,0,0,.25); }
.catalog-emblem { position: absolute; right: 22px; top: 25px; color: color-mix(in srgb,var(--pass-accent) 55%,white); font: 68px Georgia,serif; text-shadow: 0 0 28px var(--pass-accent); }
.catalog-status { position: absolute; left: 22px; top: 22px; padding: 5px 9px; border-radius: 99px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.catalog-status.is-live { color: var(--success); background: rgba(102,215,160,.10); border: 1px solid rgba(102,215,160,.25); }
.catalog-pass-card small,.mini-pass-card small,.archive-card small { color: var(--pass-accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.catalog-pass-card h3 { margin: 8px 0 5px; font: 26px Georgia,serif; }.catalog-pass-card p { margin: 0; color: #8f97a4; font-size: 12px; }.catalog-meta { display: flex; gap: 13px; margin-top: 18px; color: #707986; font-size: 10px; }.ownership-line,.price-line { margin-top: 13px; color: var(--success); font-size: 10px; font-weight: 800; }.price-line { color: var(--gold); }
.mini-pass-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: 14px; }.mini-pass-card { --pass-accent: var(--accent); display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg,color-mix(in srgb,var(--pass-accent) 10%,#181c25),#12161d); transition: .2s; }.mini-pass-card:hover { border-color: color-mix(in srgb,var(--pass-accent) 35%,transparent); transform: translateY(-2px); }.mini-pass-card > span { width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--pass-accent) 28%,transparent); border-radius: 16px; background: color-mix(in srgb,var(--pass-accent) 9%,transparent); color: var(--pass-accent); font: 34px Georgia,serif; }.mini-pass-card h3 { margin: 4px 0; font: 20px Georgia,serif; }.mini-pass-card p { margin: 0; color: #858d99; font-size: 11px; }.mini-pass-card > b { color: var(--pass-accent); font-size: 11px; }
.archive-grid { display: grid; gap: 12px; }.archive-card { --pass-accent: #777; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(20,24,32,.7); opacity: .62; }.archive-card.is-owned { opacity: 1; border-color: color-mix(in srgb,var(--pass-accent) 28%,transparent); }.archive-emblem { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb,var(--pass-accent) 10%,transparent); color: var(--pass-accent); font: 31px Georgia,serif; }.archive-card h3 { margin: 3px 0; font: 19px Georgia,serif; }.archive-card p { margin: 0; color: #858d99; font-size: 11px; }.archive-lock { color: #6d7580; font-size: 10px; font-weight: 800; }.archive-card.is-owned .archive-lock { color: var(--success); }
.legacy-banner,.integration-note { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 22px; margin-top: 60px; padding: 25px 28px; border: 1px solid rgba(169,122,255,.23); border-radius: 18px; background: linear-gradient(100deg,rgba(169,122,255,.10),rgba(102,201,255,.035)); }.legacy-banner > span,.integration-note > span { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: rgba(169,122,255,.12); color: #c8adff; font: 37px Georgia,serif; }.legacy-banner h2,.integration-note h2 { margin: 2px 0 5px; font: 23px Georgia,serif; }.legacy-banner p,.integration-note p { max-width: 840px; margin: 0; color: #969daa; font-size: 12px; }

.pass-hero { min-height: 355px; grid-template-columns: minmax(0,1fr) minmax(260px,.38fr); }.pass-hero-copy h1 { font-size: clamp(40px,5vw,68px); }.pass-hero-emblem { position: absolute; right: 30%; top: 50%; transform: translate(50%,-50%); color: color-mix(in srgb,var(--pass-accent) 20%,transparent); font: 280px Georgia,serif; }.pass-side-panel { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid color-mix(in srgb,var(--pass-accent) 26%,transparent); border-radius: 17px; background: rgba(11,13,19,.68); backdrop-filter: blur(12px); }.pass-side-panel small { color: #8a929e; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }.pass-side-panel > strong { margin: 4px 0 5px; color: #fff; font: 22px Georgia,serif; }.pass-side-panel > p { margin: 0 0 16px; color: #9199a6; font-size: 11px; }.pass-side-panel form { width: 100%; }.pass-side-panel .button { width: 100%; }.status-pill.live { color: var(--success); }.status-pill.archived { color: #a8adb5; }.status-pill.owned { color: #d6c1ff; border-color: rgba(169,122,255,.30); }
.progress-dashboard { display: grid; grid-template-columns: 210px 1fr 245px; align-items: center; gap: 25px; margin-top: 18px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 15px; background: rgba(20,24,32,.78); }.progress-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; }.progress-copy small { grid-column: 1/-1; color: #777f8c; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }.progress-copy strong { font: 28px Georgia,serif; }.progress-copy span { color: #7f8794; font-size: 10px; }.progress-track,.quest-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #090b10; box-shadow: inset 0 1px 3px #000; }.progress-track i,.quest-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--purple),var(--blue)); box-shadow: 0 0 15px var(--purple); }.spent-counter { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }.spent-counter > span { color: var(--purple); font-size: 26px; text-shadow: 0 0 15px var(--purple); }.spent-counter div { display: flex; flex-direction: column; }.spent-counter small { color: #767f8c; font-size: 8px; text-transform: uppercase; }.spent-counter strong { font-size: 21px; }
.page-jump { position: sticky; top: 88px; z-index: 20; display: flex; gap: 7px; overflow-x: auto; margin-top: 18px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13,16,23,.88); backdrop-filter: blur(15px); scrollbar-width: thin; }.page-jump a { min-width: 78px; display: flex; flex-direction: column; align-items: center; padding: 7px 9px; border-radius: 9px; color: #626a77; font-size: 8px; text-align: center; white-space: nowrap; }.page-jump a small { font-size: 11px; font-weight: 800; }.page-jump a.is-open { color: #d7dbe1; background: rgba(169,122,255,.10); }.pass-pages { display: grid; gap: 34px; margin-top: 36px; }.reward-page { scroll-margin-top: 150px; }.reward-page-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 15px; padding: 0 3px; }.page-number { color: var(--pass-accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }.reward-page h2 { margin: 4px 0; font: 27px Georgia,serif; }.reward-page-header p { margin: 0; color: #7f8793; font-size: 11px; }.page-lock,.page-open { padding: 6px 10px; border-radius: 99px; color: #7e8693; background: #171b23; font-size: 9px; }.page-open { color: var(--success); }.reward-grid { display: grid; grid-template-columns: repeat(7,minmax(135px,1fr)); gap: 10px; }.reward-grid.is-jackpot-grid { grid-template-columns: minmax(250px,520px); }.reward-card { --rarity:#878e98; position: relative; min-width: 0; min-height: 265px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb,var(--rarity) 26%,transparent); border-radius: 14px; background: radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--rarity) 15%,transparent),transparent 30%),linear-gradient(160deg,#1a1f29,#11151c); transition: .22s; }.reward-card:hover { z-index: 2; transform: translateY(-4px); border-color: color-mix(in srgb,var(--rarity) 47%,transparent); box-shadow: 0 20px 42px rgba(0,0,0,.28); }.rarity-common { --rarity:#9ba2ad; }.rarity-rare { --rarity:#65baf5; }.rarity-epic { --rarity:#a675ff; }.rarity-legendary { --rarity:#f2b94f; }.reward-card.is-premium::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-top: 2px solid color-mix(in srgb,var(--gold) 65%,transparent); }.reward-card.is-claimed { filter: saturate(.7); }.reward-card.is-claimed .reward-icon { opacity: .65; }.reward-card.is-premium-locked,.reward-page.is-locked .reward-card { opacity: .54; }.reward-top { display: flex; justify-content: space-between; gap: 6px; padding: 10px 11px; color: #6f7784; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.reward-card.is-premium .reward-track { color: var(--gold); }.reward-rarity { color: var(--rarity); }.reward-icon { position: relative; min-height: 105px; display: grid; place-items: center; color: var(--rarity); font: 54px Georgia,serif; text-shadow: 0 0 25px color-mix(in srgb,var(--rarity) 58%,transparent); }.reward-icon b { position: absolute; right: 13px; bottom: 8px; color: #edf0f4; font: 10px Inter,sans-serif; }.reward-copy { flex: 1; padding: 0 12px 10px; }.reward-copy h3 { margin: 3px 0 5px; font-size: 11px; line-height: 1.2; }.reward-copy p { margin: 0; color: #777f8b; font-size: 8px; line-height: 1.4; }.reward-action { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 10px; border-top: 1px solid var(--line); background: rgba(6,8,12,.30); }.reward-cost { display: flex; align-items: center; gap: 4px; color: #d7dbe2; font-size: 10px; font-weight: 800; }.reward-cost i { color: var(--purple); font-style: normal; }.reward-action button,.reward-action a { padding: 6px 8px; border: 1px solid color-mix(in srgb,var(--rarity) 25%,transparent); border-radius: 7px; background: color-mix(in srgb,var(--rarity) 10%,transparent); color: #e5e8ec; font-size: 8px; font-weight: 800; cursor: pointer; }.claim-state { font-size: 8px; font-weight: 800; }.claim-state.claimed { color: var(--success); }.claim-state.locked { color: #69717e; }

.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 33px 35px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 88% 50%,rgba(169,122,255,.15),transparent 27%),linear-gradient(135deg,#191e29,#11151c); }.page-intro h1 { margin: 5px 0 10px; font: clamp(37px,5vw,62px)/1 Georgia,serif; }.page-intro p { max-width: 730px; margin: 0; color: #969daa; }.intro-gem { min-width: 235px; display: grid; grid-template-columns: 65px 1fr; align-items: center; column-gap: 14px; padding: 16px; border: 1px solid rgba(169,122,255,.25); border-radius: 15px; background: rgba(10,12,18,.55); }.intro-gem > span { grid-row: 1/3; color: var(--purple); font-size: 48px; text-align: center; text-shadow: 0 0 25px var(--purple); }.intro-gem small { color: #7c8490; font-size: 9px; text-transform: uppercase; }.intro-gem strong { font: 17px Georgia,serif; }.quest-list { display: grid; gap: 10px; }.quest-card { display: grid; grid-template-columns: 62px minmax(0,1fr) 155px; align-items: center; gap: 18px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(20,24,32,.78); }.quest-card.is-complete { opacity: .68; }.quest-symbol { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(169,122,255,.22); border-radius: 14px; background: rgba(169,122,255,.08); color: #c5a9ff; font-size: 25px; }.quest-title { display: flex; justify-content: space-between; gap: 18px; }.quest-title small { color: #6c7480; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.quest-title h3 { margin: 2px 0 0; font-size: 15px; }.quest-main > p { margin: 5px 0 10px; color: #858d99; font-size: 10px; }.quest-reward { display: flex; gap: 7px; }.quest-reward span { padding: 4px 7px; border-radius: 7px; font-size: 9px; font-weight: 800; }.quest-reward .purple { color: #cbb2ff; background: rgba(169,122,255,.09); }.quest-reward .blue { color: #a9e4ff; background: rgba(102,201,255,.09); }.quest-progress { height: 5px; }.quest-progress-meta { display: flex; justify-content: space-between; margin-top: 5px; color: #6e7682; font-size: 8px; }.quest-actions { display: flex; justify-content: flex-end; }.quest-actions .button { width: 145px; padding-inline: 9px; font-size: 9px; }.integration-note { grid-template-columns: 74px 1fr auto; }.integration-note code { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #0b0d12; color: #adbad0; font-size: 10px; }

.game-link-card { min-width: 250px; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(102,215,160,.22); border-radius: 14px; background: rgba(8,12,15,.52); }.game-link-card div { display: flex; flex-direction: column; }.game-link-card small { color: #727b87; font-size: 8px; text-transform: uppercase; }.game-link-card strong { font-size: 14px; }.game-link-card div span { color: #7e8793; font-size: 9px; }.game-link-card.is-missing { border-color: rgba(241,120,120,.24); }.wallet-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }.wallet-card { --gem: var(--purple); display: flex; align-items: center; gap: 17px; padding: 22px; border: 1px solid color-mix(in srgb,var(--gem) 23%,transparent); border-radius: 16px; background: radial-gradient(circle at 10% 50%,color-mix(in srgb,var(--gem) 12%,transparent),transparent 36%),#151a22; }.wallet-card.blue { --gem:var(--blue); }.wallet-card.gold { --gem:var(--gold); }.wallet-card > span { color: var(--gem); font-size: 43px; text-shadow: 0 0 25px var(--gem); }.wallet-card div { display: grid; grid-template-columns: 1fr auto; align-items: end; flex: 1; }.wallet-card small { grid-column: 1/-1; color: #6e7683; font-size: 8px; text-transform: uppercase; }.wallet-card strong { color: var(--gem); font-size: 29px; }.wallet-card p { margin: 0 0 4px; color: #8f97a4; font-size: 10px; }.data-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(19,23,31,.78); }.data-table { min-width: 720px; }.data-row { display: grid; grid-template-columns: 145px minmax(210px,1fr) 160px 80px 80px; align-items: center; gap: 12px; min-height: 56px; padding: 9px 16px; border-top: 1px solid var(--line); color: #949ca8; font-size: 10px; }.data-row:first-child { border: 0; }.data-head { min-height: 38px; color: #626b78; background: rgba(255,255,255,.025); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.data-row > span:nth-child(2) { display: flex; flex-direction: column; }.data-row strong { color: #d8dce2; font-size: 10px; }.data-row small { color: #656e7a; font-size: 8px; }.currency-name.purple { color: #c4a6ff; }.currency-name.blue { color: #9edfff; }.currency-name.gold { color: #f2ca73; }.amount { font-weight: 800; }.amount.positive { color: var(--success); }.amount.negative { color: var(--danger); }.data-empty { padding: 25px; color: #757e8b; }.claim-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px; }.claim-card { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #151a22; }.claim-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(169,122,255,.09); color: #c7adff; font-size: 23px; }.claim-card small { color: #727b87; font-size: 8px; }.claim-card h3 { margin: 1px 0; font-size: 11px; }.claim-card p { margin: 0; color: #69717c; font-size: 8px; }.delivery-state { padding: 5px 7px; border-radius: 7px; color: var(--gold); background: rgba(242,186,73,.08); font-size: 8px; font-weight: 800; }.delivery-state.delivered { color: var(--success); }.delivery-state.failed { color: var(--danger); }

.login-shell { min-height: min(670px,calc(100vh - 180px)); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(330px,.55fr); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #11151d; box-shadow: var(--shadow); }.login-art { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(40px,7vw,90px); background: radial-gradient(circle at 70% 45%,rgba(169,122,255,.27),transparent 30%),radial-gradient(circle at 30% 100%,rgba(102,201,255,.09),transparent 33%),linear-gradient(145deg,#1a1f2c,#0c0f15); }.login-art::before { content: ""; position: absolute; right: -120px; width: 480px; height: 480px; border: 1px solid rgba(169,122,255,.16); border-radius: 50%; box-shadow: inset 0 0 80px rgba(169,122,255,.07); }.login-rune { position: absolute; right: 4%; color: rgba(169,122,255,.19); font: 360px Georgia,serif; }.login-art > small { position: relative; color: var(--accent); text-transform: uppercase; letter-spacing: .16em; }.login-art h1 { position: relative; max-width: 680px; margin: 14px 0; font: clamp(42px,6vw,78px)/.96 Georgia,serif; }.login-art > p { position: relative; max-width: 630px; color: #969eaa; }.login-feature { position: relative; max-width: 410px; display: flex; align-items: center; gap: 14px; margin-top: 35px; padding: 15px; border: 1px solid rgba(169,122,255,.20); border-radius: 13px; background: rgba(8,10,15,.37); }.login-feature > span { color: #c5a8ff; font: 32px Georgia,serif; }.login-feature strong { font-size: 11px; }.login-feature p { margin: 2px 0 0; color: #808894; font-size: 9px; }.login-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,5vw,58px); background: #151922; }.login-card h2 { margin: 2px 0 7px; font: 32px Georgia,serif; }.login-card > p { margin: 0 0 22px; color: #858d99; font-size: 11px; }.login-card label { display: grid; gap: 6px; margin-bottom: 14px; color: #a8afb9; font-size: 10px; font-weight: 700; }.login-card input { width: 100%; height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #0f1218; color: #fff; }.login-card input:focus { border-color: rgba(169,122,255,.46); box-shadow: 0 0 0 3px rgba(169,122,255,.07); }.login-card .button { width: 100%; margin-top: 8px; }.demo-hint { margin-top: 13px; color: #626b77; text-align: center; font-size: 8px; }.form-error { margin-bottom: 14px; padding: 9px 11px; border: 1px solid rgba(241,120,120,.25); border-radius: 8px; background: rgba(241,120,120,.07); color: #f1a2a2; font-size: 9px; }.empty-state { min-height: 150px; display: grid; place-items: center; align-content: center; color: #747d89; text-align: center; }.empty-state > span { color: var(--purple); font-size: 29px; }.empty-state h3 { margin: 8px 0; font: 18px Georgia,serif; }

.drawer-scrim { display: none; }
body.drawer-collapsed .pass-drawer { transform: translateX(-100%); }
body.drawer-collapsed .page-shell { margin-left: var(--rail); }

@media (max-width: 1450px) {
    .reward-grid { grid-template-columns: repeat(4,minmax(145px,1fr)); }
    .reward-grid.is-jackpot-grid { grid-template-columns: minmax(250px,520px); }
}
@media (max-width: 1199px) {
    :root { --rail: 0px; --drawer: 290px; }
    .icon-rail,.topbar { display: none; }
    .pass-drawer { left: 0; transform: translateX(-100%); z-index: 80; }
    .page-shell { margin-left: 0; padding-top: 62px; }
    .mobile-header { position: fixed; inset: 0 0 auto; z-index: 70; height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 15px; border-bottom: 1px solid var(--line); background: rgba(13,16,23,.94); backdrop-filter: blur(16px); }
    .mobile-menu { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 10px; background: #181d26; color: #aeb5bf; }
    .mobile-brand { display: flex; align-items: center; gap: 9px; font: 15px Georgia,serif; }.mobile-brand img { width: 30px; }.mobile-account { padding: 7px 9px; color: #aaa; font-size: 9px; }
    .drawer-scrim { position: fixed; inset: 0; z-index: 75; display: block; opacity: 0; visibility: hidden; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); transition: .2s; }
    body.drawer-open .pass-drawer { transform: translateX(0); } body.drawer-open .drawer-scrim { opacity: 1; visibility: visible; }
    .home-hero,.pass-hero { grid-template-columns: minmax(0,1fr) minmax(240px,.45fr); }.hero-copy h1 { font-size: clamp(42px,7vw,70px); }
    .page-jump { top: 73px; }
}
@media (max-width: 900px) {
    .main-content { padding: 24px 18px 40px; }.home-hero,.pass-hero { min-height: auto; grid-template-columns: 1fr; gap: 28px; padding: 35px 27px; }.hero-pass-card { min-height: 230px; transform: none; }.hero-pass-card > strong { font-size: 78px; }.pass-hero-emblem { right: 18%; top: 28%; font-size: 180px; }.progress-dashboard { grid-template-columns: 1fr; gap: 13px; }.spent-counter { justify-content: flex-start; }.reward-grid { grid-template-columns: repeat(3,minmax(140px,1fr)); }.page-intro { align-items: flex-start; flex-direction: column; }.wallet-grid { grid-template-columns: 1fr; }.quest-card { grid-template-columns: 52px 1fr; }.quest-symbol { width: 50px; height: 50px; }.quest-actions { grid-column: 2; justify-content: flex-start; }.integration-note { grid-template-columns: 64px 1fr; }.integration-note code { grid-column: 2; width: max-content; }.login-shell { grid-template-columns: 1fr; }.login-art { min-height: 400px; }.login-rune { font-size: 250px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }.section-heading p { text-align: left; }
}
@media (max-width: 620px) {
    .main-content { padding-inline: 12px; }.mobile-brand span { display: none; }.home-hero,.pass-hero { padding: 27px 20px; border-radius: 17px; }.hero-copy h1,.pass-hero-copy h1 { font-size: 43px; }.hero-copy p,.pass-hero-copy > p { font-size: 13px; }.hero-pass-card { min-height: 210px; }.hero-sigil { display: none; }.hero-actions .button { width: 100%; }.pass-card-grid,.mini-pass-grid { grid-template-columns: 1fr; }.mini-pass-card { grid-template-columns: 52px 1fr; }.mini-pass-card > span { width: 52px; height: 52px; }.mini-pass-card > b { grid-column: 2; }.archive-card { grid-template-columns: 50px 1fr; }.archive-emblem { width: 48px; height: 48px; }.archive-lock { grid-column: 2; }.legacy-banner { grid-template-columns: 52px 1fr; padding: 20px 17px; }.legacy-banner > span { width: 50px; height: 50px; font-size: 28px; }.page-jump a { min-width: 60px; }.page-jump a span { display: none; }.reward-page-header { align-items: flex-start; flex-direction: column; }.reward-grid,.reward-grid.is-jackpot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.reward-card { min-height: 245px; }.reward-icon { min-height: 90px; font-size: 47px; }.reward-copy h3 { font-size: 10px; }.reward-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.reward-action { align-items: flex-start; flex-direction: column; }.reward-action form,.reward-action button { width: 100%; }.quest-card { grid-template-columns: 1fr; }.quest-symbol { display: none; }.quest-actions { grid-column: 1; }.quest-actions .button { width: 100%; }.quest-title { align-items: flex-start; flex-direction: column; }.intro-gem,.game-link-card { min-width: 100%; }.integration-note { grid-template-columns: 1fr; }.integration-note > span { display: none; }.integration-note code { grid-column: 1; max-width: 100%; overflow-x: auto; }.wallet-card { padding: 17px; }.history-section { overflow-x: hidden; }.data-panel { overflow-x: auto; }.claim-grid { grid-template-columns: 1fr; }.login-art { min-height: 360px; padding: 35px 25px; }.login-art h1 { font-size: 47px; }.login-card { padding: 32px 23px; }.site-footer { align-items: flex-start; flex-direction: column; }.message-stack { top: 72px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; } .ember-canvas { display: none; } }

/* -------------------------------------------------------------------------
   Interface client Rappelz — priorité à la lisibilité dans une fenêtre 900×700
   ------------------------------------------------------------------------- */

body {
    background: #18202c;
    color: var(--text);
}
body::before {
    background:
        radial-gradient(circle at 78% 0%, rgba(141, 105, 255, .18), transparent 34%),
        radial-gradient(circle at 8% 92%, rgba(73, 174, 221, .10), transparent 28%),
        linear-gradient(155deg, #202a39, #151c28 58%, #111722);
}
.atmosphere { opacity: .42; }
.ember-canvas { opacity: .28; }
.icon-rail { background: #1a2230; border-color: rgba(235,242,255,.18); }
.pass-drawer { background: #202938; border-color: rgba(235,242,255,.18); }
.drawer-brand { background: radial-gradient(circle at 80% 18%,rgba(169,122,255,.42),transparent 30%),linear-gradient(145deg,#344056,#222b3a); }
.pass-link { color: #d0d6df; }
.pass-link small { color: #98a4b4; }
.pass-link:hover,.pass-link.is-active { background: rgba(255,255,255,.095); }
.topbar { background: rgba(27,35,48,.94); border-color: rgba(235,242,255,.18); }
.topbar-title small,.nav-label { color: #9ca7b7; }
.currency-chip,.user-chip { background: #283243; border-color: rgba(235,242,255,.18); color: #f6f8fc; }
.main-content { max-width: 1680px; }
.site-footer { color: #a3adbb; background: rgba(19,25,35,.45); }
.section-heading p,.catalog-pass-card p,.mini-pass-card p,.archive-card p,
.legacy-banner p,.integration-note p,.page-intro p,.quest-main > p,
.wallet-card p,.login-card > p { color: #b9c1cd; }
.catalog-pass-card,.mini-pass-card,.archive-card,.quest-card,.wallet-card,
.data-panel,.claim-card { background-color: #252f3e; border-color: rgba(235,242,255,.18); }
.button-ghost,.button-glass { color: #f3f5f9; border-color: rgba(240,245,255,.28); background: rgba(255,255,255,.08); }
.button-ghost:hover,.button-glass:hover { background: rgba(255,255,255,.14); }
.button-primary { color: #20180c; background: linear-gradient(135deg,#ffd985,#e9ac49); box-shadow: 0 10px 30px rgba(232,170,69,.24); }
.message { background: #313c4d; color: #fff; border-color: rgba(255,255,255,.24); }

.client-nav,.client-currencies { display: none; }

/* Nouvelle console du pass : une seule page active et un rail horizontal. */
.pass-console { --pass-accent: var(--purple); --pass-secondary: var(--blue); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pass-overview { position: relative; isolation: isolate; min-height: 205px; display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: center; gap: 24px; overflow: hidden; padding: 24px 28px; border: 1px solid color-mix(in srgb,var(--pass-accent) 38%,rgba(235,242,255,.18)); border-radius: 20px; background: radial-gradient(circle at 76% 45%,color-mix(in srgb,var(--pass-accent) 28%,transparent),transparent 25%),radial-gradient(circle at 50% 120%,color-mix(in srgb,var(--pass-secondary) 14%,transparent),transparent 34%),linear-gradient(135deg,#303b4d,#202938 70%); box-shadow: 0 20px 55px rgba(5,8,13,.22); }
.pass-overview::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .38; background-image: linear-gradient(30deg,transparent 48%,color-mix(in srgb,var(--pass-accent) 26%,transparent) 49%,transparent 51%); background-size: 62px 62px; mask-image: linear-gradient(90deg,transparent,#000); }
.pass-overview::after { content: ""; position: absolute; z-index: -1; right: 23%; width: 230px; height: 230px; border: 1px solid color-mix(in srgb,var(--pass-accent) 25%,transparent); border-radius: 50%; box-shadow: inset 0 0 70px color-mix(in srgb,var(--pass-accent) 9%,transparent); }
.pass-overview-meta { display: flex; align-items: center; gap: 10px; color: #d8c8ff; }
.pass-overview-meta > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--pass-accent) 45%,transparent); border-radius: 11px; background: color-mix(in srgb,var(--pass-accent) 14%,transparent); color: color-mix(in srgb,var(--pass-accent) 65%,white); font: 20px Georgia,serif; }
.pass-overview-meta div { display: flex; flex-direction: column; }
.pass-overview-meta small { color: #aeb7c6; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pass-overview-meta strong { color: #d6c6fa; font-size: 10px; }
.pass-overview h1 { max-width: 760px; margin: 11px 0 7px; color: #fffaf0; font: clamp(32px,4.4vw,58px)/.98 Georgia,serif; letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.2); }
.pass-overview-copy > p { max-width: 700px; margin: 0; color: #d0d6df; font-size: 13px; }
.pass-status-row { margin-top: 13px; }
.status-pill { color: #d6dce5; border-color: rgba(240,245,255,.24); background: rgba(15,20,29,.48); }
.status-pill.live { color: #8df0bd; }.status-pill.owned { color: #e0d1ff; }.status-pill.archived { color: #e6c7d0; }
.pass-purchase-panel { position: relative; z-index: 2; min-height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 11px; padding: 18px; border: 1px solid color-mix(in srgb,var(--pass-accent) 38%,rgba(255,255,255,.18)); border-radius: 15px; background: rgba(27,34,47,.92); box-shadow: 0 15px 38px rgba(8,10,16,.25); }
.pass-purchase-panel:has(.purchase-icon) { flex-direction: row; align-items: center; }
.purchase-icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(102,215,160,.15); color: #86efb8; font-size: 21px; }
.purchase-icon.is-locked { background: rgba(255,255,255,.08); color: #b6bfcc; }
.pass-purchase-panel div { display: flex; flex-direction: column; }
.pass-purchase-panel small { color: #aeb7c5; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.pass-purchase-panel strong { color: #fff; font: 19px Georgia,serif; }
.pass-purchase-panel p { margin: 3px 0 0; color: #b8c0cc; font-size: 9px; }
.pass-purchase-panel .button { width: 100%; min-height: 39px; padding: 7px 11px; }
.purchase-heading { gap: 2px; }

.pass-progress-panel { min-height: 66px; display: grid; grid-template-columns: 115px minmax(180px,1fr) 185px; align-items: center; gap: 18px; padding: 10px 17px; border: 1px solid rgba(235,242,255,.18); border-radius: 14px; background: #252f3e; box-shadow: 0 10px 25px rgba(7,9,14,.14); }
.pass-progress-number { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.pass-progress-number small { grid-column: 1/-1; color: #9da8b8; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.pass-progress-number strong { color: #fff; font: 25px Georgia,serif; }
.pass-progress-main { display: flex; flex-direction: column; gap: 6px; }
.pass-progress-main span { color: #aab4c2; font-size: 8px; }
.progress-track { height: 9px; background: #121824; border: 1px solid rgba(255,255,255,.08); }
.spent-counter { gap: 9px; }
.spent-counter > span { color: #b68aff; font-size: 23px; }
.spent-counter small { color: #a5afbe; }.spent-counter strong { color: #fff; font-size: 19px; }

.pass-page-selector { display: grid; grid-template-columns: repeat(12,minmax(52px,1fr)); gap: 6px; overflow-x: auto; padding: 7px; border: 1px solid rgba(235,242,255,.18); border-radius: 14px; background: #222b39; scrollbar-width: thin; scrollbar-color: #71809a #18202c; }
.pass-page-selector a { min-width: 52px; min-height: 47px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 5px; border: 1px solid transparent; border-radius: 9px; color: #96a2b3; transition: .18s; }
.pass-page-selector a > span { font-size: 11px; font-weight: 900; }.pass-page-selector a small { max-width: 95px; overflow: hidden; color: #8d99aa; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.pass-page-selector a.is-open { color: #f2f4f8; background: rgba(255,255,255,.05); }.pass-page-selector a.is-complete { color: #78e3ab; }.pass-page-selector a.is-current { min-width: 95px; color: #fff; border-color: color-mix(in srgb,var(--pass-accent) 50%,transparent); background: color-mix(in srgb,var(--pass-accent) 20%,#273142); box-shadow: 0 0 20px color-mix(in srgb,var(--pass-accent) 14%,transparent); }.pass-page-selector a.is-current small { color: #e2dcf1; }

.reward-workspace { min-width: 0; padding: 14px; border: 1px solid rgba(235,242,255,.18); border-radius: 17px; background: linear-gradient(160deg,#263140,#202938); box-shadow: 0 14px 38px rgba(6,9,14,.18); }
.reward-workspace.is-locked .reward-card { opacity: .74; }
.reward-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 11px; }
.workspace-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.page-medallion { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--pass-accent) 44%,transparent); border-radius: 13px; background: color-mix(in srgb,var(--pass-accent) 14%,transparent); color: color-mix(in srgb,var(--pass-accent) 68%,white); font: 18px Georgia,serif; }
.workspace-title small { color: #a5afbf; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.workspace-title h2 { margin: 1px 0; color: #fffaf0; font: 22px Georgia,serif; }.workspace-title p { margin: 0; color: #b5becb; font-size: 9px; }
.workspace-state { display: flex; align-items: center; gap: 11px; }.page-open,.page-lock { color: #86ebb6; background: rgba(102,215,160,.10); border: 1px solid rgba(102,215,160,.20); }.page-lock { color: #f0c682; background: rgba(242,186,73,.09); border-color: rgba(242,186,73,.20); }
.page-arrows { display: flex; gap: 5px; }.page-arrows a,.page-arrows span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(235,242,255,.19); border-radius: 8px; background: #303b4c; color: #fff; font-size: 14px; }.page-arrows span { opacity: .3; }
.reward-carousel-shell { position: relative; min-width: 0; padding: 0 34px; }
.reward-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 9px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-behavior: smooth; padding: 2px 2px 7px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--pass-accent) 58%,#79859a) #18202c; }
.reward-strip .reward-card { min-height: 232px; scroll-snap-align: start; background: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rarity) 22%,transparent),transparent 34%),linear-gradient(160deg,#354154,#273141); border-color: color-mix(in srgb,var(--rarity) 48%,rgba(255,255,255,.16)); box-shadow: 0 9px 24px rgba(5,8,13,.15); }
.reward-strip .reward-card:hover { transform: translateY(-2px); }
.reward-strip .reward-top { color: #d1d8e2; font-size: 8px; }.reward-strip .reward-card.is-premium .reward-track { color: #ffd06d; }.reward-strip .reward-rarity { font-weight: 900; }
.reward-strip .reward-icon { min-height: 90px; font-size: 47px; }.reward-strip .reward-copy { padding: 0 11px 9px; }.reward-strip .reward-copy h3 { color: #fff; font-size: 12px; }.reward-strip .reward-copy p { display: -webkit-box; overflow: hidden; color: #d0d7e2; font-size: 9px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.reward-strip .reward-action { min-height: 45px; background: rgba(19,25,35,.48); border-color: rgba(255,255,255,.13); }.reward-strip .reward-cost { color: #fff; }.reward-strip .reward-action button,.reward-strip .reward-action a { color: #fff; font-size: 9px; }.reward-strip .claim-state.locked { color: #c5cdd8; }
.reward-strip .reward-card.is-premium-locked,.reward-workspace.is-locked .reward-card { opacity: .7; filter: saturate(.82); }
.carousel-button { position: absolute; z-index: 5; top: 50%; width: 29px; height: 70px; transform: translateY(-50%); border: 1px solid rgba(235,242,255,.24); border-radius: 9px; background: rgba(42,53,70,.96); color: #fff; font: 27px Georgia,serif; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.22); }.carousel-button:hover { background: #3b485d; }.carousel-button.previous { left: 0; }.carousel-button.next { right: 0; }
.carousel-button:disabled { opacity: .28; cursor: default; box-shadow: none; }
.carousel-hint { margin: 5px 0 0; color: #9ea9b8; font-size: 7px; text-align: center; }

/* Fenêtre embarquée du client, cible principale 900×700. */
@media (max-width:1199px) {
    .page-shell { min-height: 100vh; padding-top: 58px; }
    .mobile-header { height: 58px; padding: 7px 10px; background: rgba(30,39,53,.98); border-color: rgba(235,242,255,.20); box-shadow: 0 7px 25px rgba(4,7,11,.20); }
    .mobile-menu { width: 40px; height: 40px; flex: 0 0 auto; background: #303b4d; color: #f3f5f8; border: 1px solid rgba(255,255,255,.12); }
    .mobile-brand { min-width: 0; font-size: 13px; }.mobile-brand img { width: 33px; height: 33px; }.mobile-brand span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .client-nav { height: 42px; display: flex; align-items: center; gap: 3px; margin-inline: auto; padding: 3px; border: 1px solid rgba(235,242,255,.14); border-radius: 11px; background: #222b39; }
    .client-nav a { height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 8px; color: #bdc5d0; font-size: 9px; font-weight: 800; }.client-nav a span { color: #a987ee; }.client-nav a.is-active { color: #fff; background: #39465a; box-shadow: inset 0 -2px #b183ff; }
    .client-currencies { display: flex; align-items: center; gap: 4px; }.client-currencies span { display: flex; align-items: center; gap: 3px; padding: 5px 6px; border: 1px solid rgba(235,242,255,.13); border-radius: 7px; background: #263142; font-size: 8px; }.client-currencies .purple { color: #c89eff; }.client-currencies .blue { color: #8fdcff; }.client-currencies .gold { color: #ffd36f; }.client-currencies b { color: #fff; font-size: 9px; }
    .mobile-account { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid rgba(235,242,255,.18); border-radius: 9px; background: #374157; color: #fff; font-size: 10px; font-weight: 900; }.mobile-account.is-login { width: auto; padding: 0 10px; }
    .pass-drawer { width: min(310px,86vw); background: #222c3b; }
    .drawer-brand { min-height: 128px; padding: 20px; }.drawer-brand a { font-size: 21px; }.pass-link { color: #d9dee6; }.drawer-footer { color: #abb5c3; }
    .main-content { padding: 16px 18px 32px; }
    .site-footer { display: none; }

    .client-pass-page { overflow: hidden; }
    .client-pass-page .main-content { height: calc(100vh - 58px); overflow-y: auto; padding: 10px 14px; scrollbar-width: thin; scrollbar-color: #71809a #18202c; }
    .client-pass-page .pass-console { min-height: 100%; gap: 8px; }
    .client-pass-page .pass-overview { min-height: 132px; grid-template-columns: minmax(0,1fr) 258px; gap: 15px; padding: 13px 17px; border-radius: 14px; }
    .client-pass-page .pass-overview::after { right: 24%; width: 160px; height: 160px; }
    .client-pass-page .pass-overview-meta > span { width: 31px; height: 31px; font-size: 16px; }.client-pass-page .pass-overview-meta small { font-size: 7px; }.client-pass-page .pass-overview-meta strong { font-size: 8px; }
    .client-pass-page .pass-overview h1 { margin: 7px 0 5px; font-size: clamp(25px,4.2vw,37px); }.client-pass-page .pass-overview-copy > p { max-width: 540px; font-size: 10px; line-height: 1.4; }.client-pass-page .pass-status-row { margin-top: 8px; }.client-pass-page .status-pill { padding: 4px 7px; font-size: 8px; }
    .client-pass-page .pass-purchase-panel { min-height: 98px; gap: 7px; padding: 12px; border-radius: 12px; }.client-pass-page .pass-purchase-panel strong { font-size: 15px; }.client-pass-page .pass-purchase-panel p { font-size: 8px; }.client-pass-page .pass-purchase-panel .button { min-height: 34px; font-size: 9px; }
    .client-pass-page .pass-progress-panel { min-height: 48px; grid-template-columns: 92px 1fr 145px; gap: 12px; padding: 6px 12px; border-radius: 11px; }.client-pass-page .pass-progress-number strong { font-size: 20px; }.client-pass-page .pass-progress-main { gap: 4px; }.client-pass-page .progress-track { height: 7px; }.client-pass-page .spent-counter > span { font-size: 18px; }.client-pass-page .spent-counter strong { font-size: 15px; }.client-pass-page .spent-counter small { font-size: 7px; }
    .client-pass-page .pass-page-selector { min-height: 46px; grid-template-columns: repeat(12,minmax(43px,1fr)); gap: 4px; padding: 5px; border-radius: 11px; }.client-pass-page .pass-page-selector a { min-width: 43px; min-height: 36px; padding: 2px 4px; }.client-pass-page .pass-page-selector a.is-current { min-width: 82px; }.client-pass-page .pass-page-selector a > span { font-size: 9px; }.client-pass-page .pass-page-selector a small { max-width: 76px; font-size: 6px; }
    .client-pass-page .reward-workspace { min-height: 285px; flex: 1; padding: 10px 11px; border-radius: 13px; }.client-pass-page .reward-workspace-header { min-height: 46px; margin-bottom: 7px; }.client-pass-page .page-medallion { width: 40px; height: 40px; border-radius: 10px; font-size: 15px; }.client-pass-page .workspace-title { gap: 9px; }.client-pass-page .workspace-title small { font-size: 7px; }.client-pass-page .workspace-title h2 { font-size: 18px; }.client-pass-page .workspace-title p { font-size: 8px; }.client-pass-page .workspace-state { gap: 7px; }.client-pass-page .page-open,.client-pass-page .page-lock { padding: 4px 7px; font-size: 7px; }.client-pass-page .page-arrows a,.client-pass-page .page-arrows span { width: 28px; height: 28px; }
    .client-pass-page .reward-carousel-shell { padding-inline: 30px; }.client-pass-page .reward-strip { grid-auto-columns: 158px; gap: 8px; }.client-pass-page .reward-strip .reward-card { min-height: 216px; }.client-pass-page .reward-strip .reward-icon { min-height: 76px; font-size: 41px; }.client-pass-page .reward-strip .reward-copy p { -webkit-line-clamp: 2; }.client-pass-page .carousel-button { width: 26px; height: 62px; }.client-pass-page .carousel-hint { margin-top: 3px; }
}

/* Les autres écrans utilisent aussi efficacement la fenêtre 900×700. */
@media (min-width:701px) and (max-width:1199px) {
    .home-hero { min-height: 255px; grid-template-columns: minmax(0,1.2fr) minmax(210px,.55fr); gap: 24px; padding: 25px 28px; border-radius: 17px; }
    .home-hero .hero-copy h1 { margin: 12px 0 9px; font-size: clamp(38px,5.5vw,53px); }.home-hero .hero-copy p { font-size: 12px; }.home-hero .hero-badges { margin-top: 15px; }.home-hero .hero-actions { margin-top: 17px; }.home-hero .hero-pass-card { min-height: 190px; padding: 18px; transform: none; }.home-hero .hero-pass-card > strong { font-size: 62px; }.home-hero .hero-pass-card h2 { font-size: 17px; }
    .section-block { margin-top: 32px; }.section-heading { margin-bottom: 13px; }.section-heading h2 { font-size: 28px; }.pass-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.catalog-pass-card { min-height: 210px; padding: 20px; }.catalog-emblem { font-size: 52px; }.mini-pass-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .page-intro { flex-direction: row; align-items: center; padding: 22px 24px; border-radius: 16px; }.page-intro h1 { font-size: 42px; }.page-intro p { font-size: 12px; }.intro-gem { min-width: 215px; }
    .quest-card { grid-template-columns: 52px minmax(0,1fr) 145px; gap: 13px; padding: 13px 14px; }.quest-symbol { width: 48px; height: 48px; }.quest-actions { grid-column: auto; }.quest-actions .button { width: 135px; }.quest-main > p { color: #bec6d1; }
    .wallet-grid { grid-template-columns: repeat(3,1fr); }.wallet-card { padding: 17px; }.wallet-card > span { font-size: 34px; }.wallet-card strong { font-size: 24px; }
    .login-shell { min-height: calc(100vh - 90px); grid-template-columns: minmax(0,1.1fr) minmax(320px,.58fr); }.login-art { min-height: auto; padding: 45px; }.login-art h1 { font-size: 56px; }.login-card { padding: 38px; }
}

@media (max-width:700px) {
    .client-nav a { width: 35px; justify-content: center; padding: 0; font-size: 0; }.client-nav a span { font-size: 12px; }
    .client-currencies { display: none; }.mobile-brand span { display: none; }
    .client-pass-page { overflow: auto; }.client-pass-page .main-content { height: auto; min-height: calc(100vh - 58px); overflow: visible; }
    .client-pass-page .pass-overview { grid-template-columns: 1fr; }.client-pass-page .pass-purchase-panel { min-height: 86px; }.client-pass-page .pass-progress-panel { grid-template-columns: 1fr; }.client-pass-page .pass-page-selector { grid-template-columns: repeat(12,44px); }.client-pass-page .reward-workspace-header { align-items: flex-start; flex-direction: column; }.client-pass-page .workspace-state { width: 100%; justify-content: space-between; }.client-pass-page .reward-strip { grid-auto-columns: minmax(150px,74vw); }
}

/* Écran de pass en jeu — composition plein écran, sans empilement de widgets. */
.game-pass-screen {
    position: relative;
    isolation: isolate;
    min-height: 640px;
    display: grid;
    grid-template-columns: 230px minmax(0,1fr);
    overflow: hidden;
    border: 1px solid rgba(226,235,251,.20);
    border-radius: 15px;
    background:
        radial-gradient(circle at 72% 8%,color-mix(in srgb,var(--pass-accent) 20%,transparent),transparent 29%),
        radial-gradient(circle at 55% 110%,color-mix(in srgb,var(--pass-secondary) 14%,transparent),transparent 36%),
        linear-gradient(135deg,#2d3c52,#1d2a3b 72%);
    box-shadow: 0 18px 45px rgba(2,6,12,.26);
}
.game-pass-screen::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -190px;
    right: -110px;
    width: 560px;
    height: 560px;
    opacity: .28;
    border: 1px solid color-mix(in srgb,var(--pass-accent) 36%,transparent);
    border-radius: 50%;
    background: repeating-conic-gradient(from 15deg,color-mix(in srgb,var(--pass-accent) 14%,transparent) 0 2deg,transparent 2deg 30deg);
    mask-image: radial-gradient(circle,transparent 0 27%,#000 28% 29%,transparent 30% 43%,#000 44% 45%,transparent 46%);
}

.game-season-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 14px;
    border-right: 1px solid rgba(230,238,252,.17);
    background: linear-gradient(180deg,rgba(20,29,43,.97),rgba(24,34,49,.92));
    box-shadow: 14px 0 40px rgba(3,7,13,.16);
}
.season-identity { position: relative; min-height: 112px; padding-left: 47px; }
.season-emblem {
    position: absolute;
    top: 0;
    left: 0;
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb,var(--pass-accent) 55%,transparent);
    border-radius: 10px;
    background: color-mix(in srgb,var(--pass-accent) 16%,#263246);
    color: color-mix(in srgb,var(--pass-accent) 68%,white);
    font: 19px Georgia,serif;
    box-shadow: 0 0 22px color-mix(in srgb,var(--pass-accent) 16%,transparent);
}
.season-identity small { color: #b7c1d0; font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.season-identity h1 { margin: 5px 0 4px; color: #fffaf0; font: 22px/1.04 Georgia,serif; letter-spacing: -.02em; }
.season-identity p { margin: 0; color: #aeb9c8; font-size: 8px; line-height: 1.35; }

.season-progress {
    min-height: 76px;
    display: grid;
    grid-template-columns: 61px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-block: 1px solid rgba(231,239,252,.14);
}
.season-meter {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at center,#202d40 0 54%,transparent 56%),conic-gradient(var(--pass-accent) var(--completion),rgba(255,255,255,.10) 0);
    box-shadow: 0 0 24px color-mix(in srgb,var(--pass-accent) 14%,transparent);
}
.season-meter strong { color: #fff; font: 17px Georgia,serif; }
.season-meter small { color: #9da9b9; font-size: 6px; text-transform: uppercase; }
.season-progress-copy { min-width: 0; display: flex; flex-direction: column; }
.season-progress-copy strong { color: #fff; font-size: 13px; }
.season-progress-copy span { color: #aeb8c7; font-size: 7px; }
.season-progress-copy small { margin-top: 5px; color: #c5ceda; font-size: 7px; }
.season-progress-copy i { color: #ba8cff; font-style: normal; }

.season-page-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: minmax(38px,1fr);
    gap: 5px;
}
.season-page-grid a {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229,237,250,.10);
    border-radius: 7px;
    background: rgba(255,255,255,.035);
    color: #98a5b7;
    transition: .16s ease;
}
.season-page-grid a:hover { color: #fff; border-color: rgba(230,238,251,.28); background: rgba(255,255,255,.07); }
.season-page-grid a b { color: inherit; font-size: 10px; }
.season-page-grid a span { max-width: 100%; overflow: hidden; color: #8491a3; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.season-page-grid a.is-open { color: #e8edf5; }
.season-page-grid a.is-complete { color: #73e2a8; }
.season-page-grid a.is-current {
    color: #fff;
    border-color: color-mix(in srgb,var(--pass-accent) 66%,white 10%);
    background: linear-gradient(135deg,color-mix(in srgb,var(--pass-accent) 35%,#354359),#344157);
    box-shadow: inset 3px 0 var(--pass-accent),0 0 20px color-mix(in srgb,var(--pass-accent) 17%,transparent);
}
.season-page-grid a.is-current span { color: #ebe4fb; }
.season-state {
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(232,239,252,.14);
}
.season-state .state-icon,.season-state .state-dot { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(102,215,160,.14); color: #83ebb5; font-size: 13px; }
.season-state .state-icon.is-locked { background: rgba(240,187,81,.12); color: #f4cb7e; }
.season-state .state-dot { width: 9px; height: 9px; margin-inline: 9px 10px; background: #68dfa2; box-shadow: 0 0 12px #68dfa2; }
.season-state div { display: flex; flex-direction: column; }
.season-state strong { color: #eef2f8; font-size: 9px; }
.season-state small { color: #8f9bad; font-size: 7px; }

.game-reward-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    gap: 10px;
    padding: 15px 16px 11px;
}
.reward-stage-header {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px 10px;
    border-bottom: 1px solid rgba(232,239,252,.15);
}
.stage-page-copy { min-width: 0; }
.stage-page-copy > small { color: color-mix(in srgb,var(--pass-accent) 65%,white); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.stage-page-copy > small span { color: #8d99aa; }
.stage-page-copy h2 { margin: 3px 0 2px; color: #fffaf0; font: 28px/1 Georgia,serif; letter-spacing: -.025em; }
.stage-page-copy p { max-width: 390px; margin: 0; overflow: hidden; color: #b9c3d0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.stage-account-action { flex: 0 0 auto; }
.stage-account-action form { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 7px 8px 7px 11px; border: 1px solid rgba(242,187,75,.38); border-radius: 9px; background: rgba(31,36,48,.78); }
.stage-account-action form span { color: #b7c0cd; font-size: 7px; }
.stage-account-action form span b { color: #ffd06c; font-size: 10px; }
.stage-account-action form button,.stage-login { grid-row: 1 / 3; grid-column: 2; min-height: 34px; padding: 0 13px; border: 0; border-radius: 7px; background: linear-gradient(135deg,#ffdc88,#e9aa44); color: #20180c; font-size: 8px; font-weight: 900; cursor: pointer; }
.stage-login { display: flex; align-items: center; }
.stage-owned { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(102,215,160,.28); border-radius: 9px; background: rgba(102,215,160,.09); color: #8ceabd; }
.stage-owned i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(102,215,160,.15); font-style: normal; }
.stage-owned strong { color: #dbf8e9; font-size: 9px; }
.stage-owned.is-locked { border-color: rgba(242,187,75,.25); background: rgba(242,187,75,.07); color: #f0c778; }

.reward-lanes { min-height: 0; display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 8px; }
.reward-lane {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    overflow: hidden;
    border: 1px solid rgba(232,239,252,.14);
    border-radius: 11px;
    background: linear-gradient(90deg,rgba(31,43,60,.82),rgba(38,51,70,.56));
}
.reward-lane.lane-premium { border-color: rgba(240,185,73,.23); background: linear-gradient(90deg,rgba(49,42,51,.84),rgba(45,43,62,.60)); }
.lane-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-right: 1px solid rgba(232,239,252,.13);
    background: rgba(15,23,35,.42);
}
.lane-label > span { color: #93dcff; font-size: 17px; text-shadow: 0 0 15px rgba(86,194,242,.46); }
.lane-label strong { color: #d9e4ef; font-size: 7px; letter-spacing: .09em; writing-mode: vertical-rl; transform: rotate(180deg); }
.lane-label small { color: #8391a5; font-size: 6px; }
.lane-premium .lane-label > span { color: #ffd06a; text-shadow: 0 0 15px rgba(242,185,73,.48); }
.lane-premium .lane-label strong { color: #f3cf83; }
.lane-items { min-width: 0; min-height: 0; display: flex; gap: 7px; padding: 7px; }
.game-reward-card {
    --rarity:#9ba2ad;
    position: relative;
    min-width: 0;
    flex: 1 1 0;
    display: grid;
    grid-template-rows: auto minmax(55px,1fr) auto auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb,var(--rarity) 48%,rgba(255,255,255,.13));
    border-radius: 9px;
    background:
        radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rarity) 24%,transparent),transparent 38%),
        linear-gradient(155deg,#43536a,#303e52 72%);
    box-shadow: 0 7px 18px rgba(2,6,12,.18);
    transition: transform .16s ease,border-color .16s ease;
}
.game-reward-card:hover { z-index: 2; transform: translateY(-2px); border-color: color-mix(in srgb,var(--rarity) 75%,white 8%); }
.game-reward-card.is-premium::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-top: 2px solid rgba(242,185,73,.62); }
.game-reward-card.is-premium-locked { opacity: .9; filter: saturate(.92); }
.game-reward-card.is-claimed { filter: saturate(.72); }
.game-reward-meta { display: flex; justify-content: space-between; gap: 4px; padding: 7px 8px 0; color: var(--rarity); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.game-reward-meta b { color: #80e5ae; font-size: 6px; }
.game-reward-art { position: relative; min-height: 0; display: grid; place-items: center; color: var(--rarity); font: 46px Georgia,serif; text-shadow: 0 0 24px color-mix(in srgb,var(--rarity) 58%,transparent); }
.game-reward-art b { position: absolute; right: 8px; bottom: 2px; color: #fff; font: 9px Inter,sans-serif; }
.game-reward-copy { min-width: 0; padding: 0 8px 6px; }
.game-reward-copy h3 { margin: 0 0 3px; overflow: hidden; color: #fff; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.game-reward-copy p { margin: 0; display: -webkit-box; overflow: hidden; color: #c5ceda; font-size: 7px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.game-reward-action { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 7px; border-top: 1px solid rgba(235,241,252,.13); background: rgba(16,24,36,.42); }
.game-reward-cost { display: flex; gap: 3px; color: #fff; font-size: 8px; font-weight: 900; }
.game-reward-cost i { color: #bd8dff; font-style: normal; }
.game-reward-action button,.game-reward-action a { min-height: 24px; padding: 0 7px; border: 1px solid color-mix(in srgb,var(--rarity) 40%,transparent); border-radius: 5px; background: color-mix(in srgb,var(--rarity) 15%,#2a374b); color: #fff; font-size: 7px; font-weight: 900; cursor: pointer; }
.game-claim-state { font-size: 7px; font-weight: 800; text-align: right; }
.game-claim-state.claimed { color: #81e3ad; }.game-claim-state.locked { color: #d6dde7; }

.stage-page-controls {
    min-height: 39px;
    display: grid;
    grid-template-columns: 92px minmax(0,1fr) 92px;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(232,239,252,.15);
}
.stage-page-controls > a,.stage-page-controls > .is-disabled { height: 31px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(230,238,251,.18); border-radius: 7px; background: rgba(255,255,255,.055); color: #f0f3f7; font-size: 8px; font-weight: 800; }
.stage-page-controls > a span,.stage-page-controls > .is-disabled span { color: color-mix(in srgb,var(--pass-accent) 66%,white); font-size: 14px; }
.stage-page-controls > .is-disabled { opacity: .35; }
.stage-page-controls > div { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.stage-page-controls > div strong { color: #88e8b7; font-size: 8px; }
.stage-page-controls > div small { max-width: 100%; overflow: hidden; color: #919daf; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.empty-reward-page { display: grid; place-items: center; color: #b8c2cf; }

@media (max-width:1199px) {
    .game-pass-body .main-content { height: calc(100vh - 58px); overflow: hidden; padding: 8px 10px 10px; }
    .game-pass-screen { width: 100%; height: calc(100vh - 76px); min-height: 0; grid-template-columns: 202px minmax(0,1fr); border-radius: 12px; }
    .game-season-panel { gap: 9px; padding: 12px 12px 10px; }
    .season-identity { min-height: 86px; padding-left: 41px; }.season-emblem { width: 32px; height: 32px; font-size: 16px; }.season-identity h1 { font-size: 19px; }.season-identity p { font-size: 7px; }
    .season-progress { min-height: 66px; grid-template-columns: 53px minmax(0,1fr); padding: 6px; }.season-meter { width: 50px; height: 50px; }.season-meter strong { font-size: 15px; }
    .season-page-grid { grid-auto-rows: minmax(34px,1fr); gap: 4px; }.season-page-grid a b { font-size: 9px; }
    .season-state { min-height: 38px; padding-top: 6px; }
    .game-reward-stage { gap: 7px; padding: 10px 11px 8px; }
    .reward-stage-header { min-height: 67px; padding-bottom: 7px; }.stage-page-copy h2 { font-size: 25px; }.stage-page-copy p { max-width: 335px; }
    .reward-lanes { gap: 7px; }.reward-lane { grid-template-columns: 48px minmax(0,1fr); }.lane-items { gap: 6px; padding: 6px; }
    .game-reward-art { font-size: 52px; }.game-reward-copy h3 { font-size: 11px; }.game-reward-copy p { font-size: 8px; }
    .stage-page-controls { min-height: 36px; padding-top: 6px; }
}

@media (max-width:700px) {
    .game-pass-body .main-content { height: auto; overflow: visible; }
    .game-pass-screen { height: auto; min-height: 0; grid-template-columns: 1fr; overflow: visible; }
    .game-season-panel { border-right: 0; border-bottom: 1px solid rgba(230,238,252,.17); }
    .season-page-grid { grid-template-columns: repeat(6,minmax(42px,1fr)); overflow-x: auto; }
    .season-progress,.season-state { display: none; }
    .game-reward-stage { min-height: 760px; }
    .reward-stage-header { align-items: flex-start; flex-direction: column; }
    .reward-lanes { grid-template-rows: auto auto; }
    .reward-lane { grid-template-columns: 1fr; }.lane-label { min-height: 42px; flex-direction: row; border-right: 0; border-bottom: 1px solid rgba(232,239,252,.13); }.lane-label strong { writing-mode: horizontal-tb; transform: none; }
    .lane-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.game-reward-card { min-height: 205px; }
}

/* Sur le pass, le site disparaît : seule l'interface du jeu reste visible. */
.game-pass-body { overflow: hidden; }
.game-pass-body .icon-rail,
.game-pass-body .mobile-header,
.game-pass-body .topbar,
.game-pass-body .site-footer { display: none !important; }
.game-pass-body .page-shell {
    width: 100%;
    height: 100vh;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
.game-pass-body .main-content {
    width: 100%;
    max-width: none;
    height: 100vh !important;
    min-height: 0 !important;
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0 !important;
    overflow: hidden !important;
}
.game-pass-body .game-pass-screen {
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.game-navigation-tab {
    position: fixed;
    z-index: 108;
    top: 50%;
    left: 0;
    width: 33px;
    height: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(202,174,255,.54);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    background: linear-gradient(180deg,#6c46a5,#402e68);
    color: #fff;
    box-shadow: 7px 0 24px rgba(4,7,14,.30),0 0 24px rgba(159,109,242,.18);
    cursor: pointer;
    transition: opacity .18s ease,transform .18s ease,background .18s ease;
}
.game-navigation-tab:hover { background: linear-gradient(180deg,#8158bb,#4c3578); }
.game-navigation-tab > span { font-size: 15px; }
.game-navigation-tab > strong { font-size: 7px; letter-spacing: .14em; writing-mode: vertical-rl; transform: rotate(180deg); }
.game-pass-body.drawer-open .game-navigation-tab { opacity: 0; pointer-events: none; transform: translate(-8px,-50%); }

.game-pass-body .pass-drawer {
    position: fixed !important;
    z-index: 122;
    inset: 0 auto 0 0 !important;
    width: min(300px,86vw) !important;
    height: 100vh;
    display: flex !important;
    transform: translateX(-102%) !important;
    border-right: 1px solid rgba(229,237,251,.24);
    background: #222d3e;
    box-shadow: 20px 0 55px rgba(2,5,10,.38);
    transition: transform .24s ease !important;
}
.game-pass-body.drawer-open .pass-drawer { transform: translateX(0) !important; }
.game-pass-body .drawer-scrim {
    position: fixed;
    z-index: 118;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(5,9,15,.64);
    backdrop-filter: blur(3px);
    transition: opacity .2s ease;
}
.game-pass-body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
.game-pass-body .drawer-brand { min-height: 118px; padding: 19px 20px; }
.game-pass-body .drawer-brand a { font-size: 22px; }
.game-pass-body .pass-nav { padding-bottom: 18px; }
.game-pass-body .drawer-footer { min-height: 48px; }
.game-content-body { overflow: hidden; }
.game-content-body .main-content {
    display: block;
    height: 100vh !important;
    padding: 18px 24px 42px 44px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #72829a #172231;
}
.game-content-body .page-intro,
.game-content-body .section-block,
.game-content-body .integration-note,
.game-content-body .wallet-grid { max-width: 1180px; margin-inline: auto; }
.game-content-body .page-intro { margin-top: 0; }

@media (max-width:700px) {
    .game-pass-body { overflow: auto; }
    .game-pass-body .main-content { height: auto !important; min-height: 100vh !important; padding-left: 35px !important; overflow: visible !important; }
    .game-pass-body .game-pass-screen { height: auto; max-height: none; }
    .game-navigation-tab { width: 29px; height: 98px; }
    .game-content-body .main-content { height: 100vh !important; padding: 12px 12px 35px 35px !important; overflow-y: auto !important; }
}

/* Version web : le contenu exploite aussi les grands écrans. */
@media (min-width:1200px) {
    .game-pass-screen { grid-template-columns: clamp(240px,17vw,310px) minmax(0,1fr); }
    .game-season-panel { gap: clamp(13px,1.25vh,20px); padding: clamp(19px,2.2vh,30px) clamp(18px,1.7vw,28px); }
    .season-identity { min-height: clamp(120px,14vh,180px); padding-left: 58px; }
    .season-emblem { width: 45px; height: 45px; font-size: 23px; }
    .season-identity small { font-size: clamp(8px,.55vw,10px); }
    .season-identity h1 { margin-top: 8px; font-size: clamp(25px,2vw,35px); }
    .season-identity p { font-size: clamp(9px,.65vw,12px); }
    .season-progress { min-height: clamp(88px,11vh,130px); grid-template-columns: 78px minmax(0,1fr); gap: 15px; padding: 12px; }
    .season-meter { width: 72px; height: 72px; }.season-meter strong { font-size: 21px; }.season-meter small { font-size: 7px; }
    .season-progress-copy strong { font-size: 17px; }.season-progress-copy span,.season-progress-copy small { font-size: 9px; }
    .season-page-grid { grid-auto-rows: minmax(48px,1fr); gap: 7px; }
    .season-page-grid a { border-radius: 9px; }.season-page-grid a b { font-size: 13px; }.season-page-grid a span { font-size: 8px; }
    .season-state { min-height: 55px; }.season-state strong { font-size: 11px; }.season-state small { font-size: 9px; }

    .game-reward-stage { gap: clamp(10px,1.25vh,18px); padding: clamp(18px,2.1vh,30px) clamp(22px,2vw,36px) clamp(14px,1.8vh,25px); }
    .reward-stage-header { min-height: clamp(92px,12vh,145px); padding-bottom: clamp(12px,1.5vh,22px); }
    .stage-page-copy > small { font-size: 10px; }.stage-page-copy h2 { font-size: clamp(34px,3vw,54px); }.stage-page-copy p { max-width: 650px; font-size: clamp(10px,.8vw,14px); }
    .stage-account-action form { padding: 10px 11px 10px 16px; }.stage-account-action form span { font-size: 9px; }.stage-account-action form span b { font-size: 14px; }.stage-account-action form button { min-height: 43px; padding-inline: 18px; font-size: 10px; }
    .stage-owned { min-height: 48px; padding-inline: 16px; }.stage-owned strong { font-size: 11px; }
    .reward-lanes { gap: clamp(10px,1.2vh,17px); }.reward-lane { grid-template-columns: 66px minmax(0,1fr); border-radius: 14px; }
    .lane-label > span { font-size: 23px; }.lane-label strong { font-size: 9px; }.lane-label small { font-size: 8px; }
    .lane-items { gap: clamp(8px,.75vw,14px); padding: clamp(8px,.8vw,14px); }
    .game-reward-card { border-radius: 12px; }.game-reward-meta { padding: 11px 12px 0; font-size: 9px; }.game-reward-meta b { font-size: 8px; }
    .game-reward-art { font-size: clamp(60px,7vh,92px); }.game-reward-art b { right: 12px; font-size: 12px; }
    .game-reward-copy { padding: 0 12px 10px; }.game-reward-copy h3 { font-size: clamp(12px,.95vw,17px); }.game-reward-copy p { font-size: clamp(8px,.65vw,11px); }
    .game-reward-action { min-height: clamp(43px,5vh,58px); padding: 7px 11px; }.game-reward-cost { font-size: 10px; }.game-reward-action button,.game-reward-action a { min-height: 29px; padding-inline: 10px; font-size: 9px; }.game-claim-state { font-size: 9px; }
    .stage-page-controls { min-height: clamp(48px,6vh,66px); grid-template-columns: 120px minmax(0,1fr) 120px; padding-top: 10px; }
    .stage-page-controls > a,.stage-page-controls > .is-disabled { height: 39px; font-size: 10px; }.stage-page-controls > div strong { font-size: 10px; }.stage-page-controls > div small { font-size: 8px; }
}

/* Accessibilité : corps lisible, commandes de 44px et navigation continue. */
.game-pass-body { font-size: 16px; }
.game-pass-body .main-content { padding-left: 64px !important; }
.game-navigation-tab {
    top: 0;
    width: 64px;
    height: 100vh;
    gap: 14px;
    transform: none;
    border: 0;
    border-right: 1px solid rgba(229,237,251,.20);
    border-radius: 0;
    background: linear-gradient(180deg,#172235,#1c2940);
    box-shadow: 8px 0 28px rgba(2,6,12,.22);
}
.game-navigation-tab:hover { background: linear-gradient(180deg,#273754,#21304a); }
.game-navigation-tab > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(203,174,255,.48);
    border-radius: 10px;
    background: #644296;
    font-size: 22px;
}
.game-navigation-tab > strong { font-size: 12px; letter-spacing: .12em; }
.game-pass-body.drawer-open .game-navigation-tab { opacity: 1; pointer-events: auto; transform: none; }

.season-identity small { color: #d3dae4; font-size: 13px; }
.season-identity h1 { font-size: clamp(27px,2vw,42px); }
.season-identity p { color: #d3dae4; font-size: 14px; line-height: 1.5; }
.season-progress-copy strong { font-size: 18px; }
.season-progress-copy span,.season-progress-copy small { color: #d3dae4; font-size: 13px; line-height: 1.45; }
.season-meter strong { font-size: 20px; }.season-meter small { color: #cbd3df; font-size: 10px; }
.season-page-overview {
    flex: 1;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 4px;
    border-block: 1px solid rgba(232,239,252,.16);
}
.season-page-overview > small { color: #c9d2df; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.season-page-overview > strong { margin-top: 8px; color: #fff; font: 42px/1 Georgia,serif; }
.season-page-overview > strong span { color: #aab6c7; font-size: 20px; }
.season-page-overview > p { margin: 10px 0 6px; color: #fffaf0; font: 22px/1.15 Georgia,serif; }
.season-page-overview > span { max-width: 250px; color: #ced6e1; font-size: 14px; line-height: 1.5; }
.season-state strong { font-size: 14px; }.season-state small { color: #c7d0dc; font-size: 12px; }

.stage-page-copy > small { font-size: 14px; }
.stage-page-copy h2 { font-size: clamp(34px,3vw,58px); }
.stage-page-copy p { max-width: 750px; color: #d3dae4; font-size: 16px; line-height: 1.5; }
.stage-account-action form span { color: #d5dce6; font-size: 13px; }.stage-account-action form span b { font-size: 16px; }
.stage-account-action form button,.stage-login { min-height: 44px; padding-inline: 16px; font-size: 14px; }
.stage-owned strong { font-size: 14px; }

.lane-label strong { font-size: 13px; }.lane-label small { color: #c5cfdd; font-size: 11px; }
.lane-items {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    scrollbar-color: color-mix(in srgb,var(--pass-accent) 70%,#eef2f8) #182335;
}
.lane-items::-webkit-scrollbar { height: 12px; }
.lane-items::-webkit-scrollbar-track { border-radius: 99px; background: #182335; }
.lane-items::-webkit-scrollbar-thumb { border: 2px solid #182335; border-radius: 99px; background: color-mix(in srgb,var(--pass-accent) 70%,#eef2f8); }
.game-reward-card { min-width: 220px; }
.game-reward-meta { color: color-mix(in srgb,var(--rarity) 72%,white); font-size: 13px; }
.game-reward-meta b { font-size: 12px; }
.game-reward-copy h3 { font-size: 18px; line-height: 1.3; }
.game-reward-copy p { color: #d8dee7; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 3; }
.game-reward-cost,.game-claim-state { font-size: 14px; }
.game-reward-action { min-height: 50px; }
.game-reward-action button,.game-reward-action a { min-width: 44px; min-height: 40px; padding-inline: 12px; font-size: 14px; }
.game-claim-state.locked { color: #e0e5ec; }

.stage-page-controls {
    min-height: 94px;
    grid-template-columns: minmax(96px,130px) minmax(260px,1fr) minmax(96px,130px);
    gap: 22px;
    padding: 10px 4px 4px;
}
.stage-page-controls > a,.stage-page-controls > .is-disabled {
    width: 100%;
    height: 48px;
    gap: 10px;
    font-size: 14px;
}
.stage-page-controls > a span,.stage-page-controls > .is-disabled span { font-size: 22px; }
.page-slider-control { width: 100%; display: grid !important; grid-template-columns: 1fr; gap: 4px; align-items: stretch !important; }
.page-slider-control label { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #eef2f7; font-size: 14px; font-weight: 800; }
.page-slider-control output { color: #fff; font-size: 15px; }
.page-slider-control input[type="range"] {
    --slider-progress:0%;
    width: 100%;
    height: 30px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
}
.page-slider-control input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    border: 1px solid rgba(235,241,252,.28);
    border-radius: 99px;
    background: linear-gradient(90deg,var(--pass-accent) 0 var(--slider-progress),#26354a var(--slider-progress) 100%);
}
.page-slider-control input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: -9px;
    appearance: none;
    -webkit-appearance: none;
    border: 3px solid #f7f3ff;
    border-radius: 50%;
    background: var(--pass-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--pass-accent) 30%,transparent),0 3px 12px rgba(0,0,0,.32);
}
.page-slider-control input[type="range"]::-moz-range-track { height: 12px; border: 1px solid rgba(235,241,252,.28); border-radius: 99px; background: #26354a; }
.page-slider-control input[type="range"]::-moz-range-progress { height: 12px; border-radius: 99px; background: var(--pass-accent); }
.page-slider-control input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid #f7f3ff; border-radius: 50%; background: var(--pass-accent); }
.page-slider-scale { display: flex !important; flex-direction: row !important; justify-content: space-between; width: 100%; color: #c6cfdb; font-size: 12px; }

.game-pass-body a:focus-visible,
.game-pass-body button:focus-visible,
.game-pass-body input:focus-visible,
.game-pass-body [tabindex]:focus-visible {
    outline: 3px solid #ffe08a;
    outline-offset: 3px;
}

@media (max-width:1199px) {
    .game-pass-body .main-content { padding-left: 56px !important; }
    .game-navigation-tab { width: 56px; }.game-navigation-tab > span { width: 42px; height: 42px; }
    .game-pass-screen { grid-template-columns: 210px minmax(0,1fr); }
    .season-identity h1 { font-size: 25px; }.season-identity p { font-size: 12px; }
    .season-progress-copy strong { font-size: 16px; }.season-progress-copy span,.season-progress-copy small { font-size: 11px; }
    .season-page-overview { min-height: 115px; padding-block: 12px; }.season-page-overview > strong { font-size: 32px; }.season-page-overview > p { font-size: 18px; }.season-page-overview > span { font-size: 12px; }
    .season-state strong { font-size: 12px; }.season-state small { font-size: 11px; }
    .stage-page-copy > small { font-size: 12px; }.stage-page-copy h2 { font-size: 32px; }.stage-page-copy p { font-size: 14px; }
    .reward-stage-header { min-height: 82px; }
    .reward-lanes { min-height: 0; }.game-reward-card { min-width: 210px; }
    .game-reward-meta { font-size: 11px; }.game-reward-copy h3 { font-size: 16px; }.game-reward-copy p { font-size: 13px; }
    .game-reward-cost,.game-claim-state { font-size: 12px; }.game-reward-action button,.game-reward-action a { font-size: 12px; }
    .stage-page-controls { min-height: 88px; grid-template-columns: 96px minmax(220px,1fr) 96px; gap: 12px; }
    .stage-page-controls > a,.stage-page-controls > .is-disabled { font-size: 12px; }
    .page-slider-control label { font-size: 12px; }.page-slider-control output { font-size: 13px; }
}

@media (max-width:700px) {
    .game-pass-body .main-content { padding-left: 52px !important; overflow-y: auto !important; }
    .game-navigation-tab { width: 52px; }.game-navigation-tab > span { width: 40px; height: 40px; }.game-navigation-tab > strong { font-size: 10px; }
    .game-pass-screen { height: auto; min-height: 100vh; grid-template-columns: 1fr; overflow: visible; }
    .game-season-panel { min-height: auto; }
    .season-page-overview { min-height: 110px; }
    .game-reward-stage { min-height: 980px; }
    .reward-stage-header { align-items: flex-start; flex-direction: column; }
    .stage-page-controls { grid-template-columns: 64px minmax(180px,1fr) 64px; gap: 8px; }
    .stage-page-controls > a b,.stage-page-controls > .is-disabled b { display: none; }
    .page-slider-control label > span { display: none; }
}

/* Tailles minimales conservées à tous les points de rupture. */
.season-identity p { font-size: 14px; }
.season-progress-copy span,.season-progress-copy small { font-size: 13px; }
.season-page-overview > span { font-size: 14px; }
.stage-page-copy p { font-size: 16px; }
.game-reward-meta { font-size: 14px; }
.game-reward-meta b { font-size: 13px; }
.game-reward-copy h3 { font-size: 18px; }
.game-reward-copy h3 { display: flex; align-items: baseline; gap: 7px; white-space: normal; }
.game-reward-copy h3 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-quantity { flex: 0 0 auto; color: #fff; font-size: 1em; font-weight: 900; }
.game-reward-copy p { font-size: 16px; }

/* Accessibilité commune à toutes les pages du portail. */
.game-content-body { font-size: 16px; }
.game-content-body .main-content {
    padding: clamp(20px,2.3vw,40px) clamp(20px,2.8vw,48px) 64px calc(64px + clamp(20px,2.8vw,48px)) !important;
}
.game-content-body .page-intro,
.game-content-body .section-block,
.game-content-body .integration-note,
.game-content-body .wallet-grid,
.game-content-body .home-hero,
.game-content-body .legacy-banner,
.game-content-body .login-shell { width: 100%; max-width: 1440px; margin-inline: auto; }
.game-content-body .section-block { margin-top: clamp(42px,5vw,70px); }
.game-content-body .eyebrow,
.game-content-body .hero-kicker,
.game-content-body .catalog-status,
.game-content-body .catalog-pass-card small,
.game-content-body .mini-pass-card small,
.game-content-body .archive-card small { color: #d2b36f; font-size: 14px; line-height: 1.4; }
.game-content-body .page-intro p,
.game-content-body .hero-copy p,
.game-content-body .section-heading p,
.game-content-body .catalog-pass-card p,
.game-content-body .mini-pass-card p,
.game-content-body .archive-card p,
.game-content-body .legacy-banner p,
.game-content-body .integration-note p { color: #d1d8e2; font-size: 16px; line-height: 1.6; }
.game-content-body .section-heading { align-items: flex-end; }
.game-content-body .section-heading h2 { font-size: clamp(34px,3vw,50px); }
.game-content-body .section-heading p { max-width: 560px; }
.game-content-body .button { min-height: 44px; padding: 11px 18px; font-size: 16px; }
.game-content-body a:focus-visible,
.game-content-body button:focus-visible,
.game-content-body input:focus-visible,
.game-content-body [tabindex]:focus-visible { outline: 3px solid #ffe08a; outline-offset: 3px; }

/* Accueil et catalogue des passes. */
.game-home-body .home-hero { min-height: min(520px,72vh); background: radial-gradient(circle at 82% 42%,color-mix(in srgb,var(--pass-accent) 30%,transparent),transparent 28%),radial-gradient(circle at 65% 100%,color-mix(in srgb,var(--pass-secondary) 16%,transparent),transparent 28%),linear-gradient(135deg,#28364a,#182333 68%); }
.game-home-body .hero-kicker { font-size: 14px; }
.game-home-body .hero-badges span { min-height: 36px; display: inline-flex; align-items: center; padding-inline: 13px; color: #eef2f7; font-size: 14px; }
.game-home-body .hero-pass-card h2 { font-size: 28px; }.game-home-body .hero-pass-card p { color: #d5dce5; font-size: 16px; }
.game-home-body .edition { color: #d0d7e1; font-size: 14px; }
.game-home-body .catalog-pass-card { min-height: 310px; padding: 30px; background: radial-gradient(circle at 86% 16%,color-mix(in srgb,var(--pass-accent) 25%,transparent),transparent 30%),linear-gradient(145deg,#29364a,#1c2635); }
.game-home-body .catalog-pass-card h3 { font-size: 32px; }.game-home-body .catalog-meta,.game-home-body .ownership-line,.game-home-body .price-line { color: #d0d8e3; font-size: 15px; line-height: 1.5; }
.game-home-body .price-line { color: #ffd477; }
.game-home-body .mini-pass-card,.game-home-body .archive-card { min-height: 112px; background: linear-gradient(135deg,#283549,#1b2534); }
.game-home-body .mini-pass-card h3,.game-home-body .archive-card h3 { font-size: 25px; }
.game-home-body .mini-pass-card > b,.game-home-body .archive-lock { font-size: 16px; }
.game-home-body .archive-card { opacity: .82; }.game-home-body .archive-card.is-owned { opacity: 1; }
.game-home-body .legacy-banner h2 { font-size: 30px; }

/* Quêtes. */
.game-quests-body .page-intro { padding: clamp(30px,4vw,52px); background: radial-gradient(circle at 88% 50%,rgba(169,122,255,.20),transparent 29%),linear-gradient(135deg,#29364a,#1b2534); }
.game-quests-body .page-intro p { max-width: 850px; }
.game-quests-body .intro-gem { min-width: 280px; padding: 20px; background: rgba(24,28,43,.82); }
.game-quests-body .intro-gem small { color: #d0d7e2; font-size: 14px; }.game-quests-body .intro-gem strong { font-size: 22px; }
.game-quests-body .quest-list { gap: 16px; }
.game-quests-body .quest-card {
    grid-template-columns: 72px minmax(0,1fr) minmax(180px,220px);
    gap: 22px;
    min-height: 150px;
    padding: 22px 24px;
    background: #29364a;
    border-color: rgba(231,238,250,.22);
}
.game-quests-body .quest-symbol { width: 64px; height: 64px; font-size: 28px; }
.game-quests-body .quest-title small { color: #c5ceda; font-size: 14px; }
.game-quests-body .quest-title h3 { margin-top: 4px; font-size: 21px; }
.game-quests-body .quest-main > p { margin: 8px 0 14px; color: #d7dee7; font-size: 16px; line-height: 1.5; }
.game-quests-body .quest-reward span { min-height: 38px; display: inline-flex; align-items: center; padding-inline: 11px; font-size: 15px; }
.game-quests-body .quest-progress { height: 10px; }
.game-quests-body .quest-progress-meta { margin-top: 7px; color: #d0d7e1; font-size: 14px; }
.game-quests-body .quest-actions .button { width: 100%; min-height: 48px; font-size: 15px; }
.game-quests-body .claim-state { font-size: 16px; }
.game-quests-body .integration-note code { padding: 12px 15px; color: #e2e8f0; font-size: 15px; }

/* Gemmes, transactions et livraisons. */
.game-wallet-body .game-link-card { min-width: 300px; padding: 20px; }
.game-wallet-body .game-link-card small { color: #c8d1dc; font-size: 14px; }.game-wallet-body .game-link-card strong { font-size: 20px; }.game-wallet-body .game-link-card div span { color: #d2d9e3; font-size: 15px; }
.game-wallet-body .wallet-grid { gap: 18px; margin-top: 22px; }
.game-wallet-body .wallet-card { min-height: 150px; padding: 26px; background: radial-gradient(circle at 10% 50%,color-mix(in srgb,var(--gem) 15%,transparent),transparent 36%),#263348; }
.game-wallet-body .wallet-card small { color: #d0d7e2; font-size: 14px; }.game-wallet-body .wallet-card strong { font-size: 38px; }.game-wallet-body .wallet-card p { color: #e0e5ec; font-size: 16px; }
.game-wallet-body .data-panel { overflow-x: auto; background: #253247; }
.game-wallet-body .data-table { min-width: 900px; }
.game-wallet-body .data-row { grid-template-columns: 170px minmax(260px,1fr) 190px 110px 110px; min-height: 72px; padding: 13px 20px; color: #e0e5ec; font-size: 16px; }
.game-wallet-body .data-head { min-height: 50px; color: #d0d8e3; font-size: 14px; }
.game-wallet-body .data-row strong { color: #fff; font-size: 16px; }.game-wallet-body .data-row small { color: #c8d1dd; font-size: 14px; }
.game-wallet-body .claim-grid { grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 16px; }
.game-wallet-body .claim-card { min-height: 100px; padding: 20px; background: #263348; }
.game-wallet-body .claim-card small { color: #ccd4df; font-size: 14px; }.game-wallet-body .claim-card h3 { font-size: 19px; }.game-wallet-body .claim-card p { color: #d1d8e2; font-size: 14px; }
.game-wallet-body .delivery-state { padding: 8px 11px; font-size: 14px; }

/* Connexion. */
.game-login-body .main-content { display: grid; place-items: center; }
.game-login-body .login-shell { min-height: calc(100vh - 80px); border-color: rgba(231,238,250,.22); background: #1d2838; }
.game-login-body .login-art { background: radial-gradient(circle at 70% 45%,rgba(169,122,255,.31),transparent 30%),radial-gradient(circle at 30% 100%,rgba(102,201,255,.13),transparent 33%),linear-gradient(145deg,#29364a,#172130); }
.game-login-body .login-art > small { font-size: 14px; }.game-login-body .login-art > p { max-width: 680px; color: #d2d9e3; font-size: 18px; line-height: 1.6; }
.game-login-body .login-feature { max-width: 500px; padding: 20px; }.game-login-body .login-feature strong { font-size: 18px; }.game-login-body .login-feature p { color: #d1d8e2; font-size: 15px; }
.game-login-body .login-card { background: #263348; }
.game-login-body .login-card h2 { font-size: 40px; }.game-login-body .login-card > p { color: #d3dae4; font-size: 16px; line-height: 1.5; }
.game-login-body .login-card label { gap: 8px; margin-bottom: 18px; color: #eef2f7; font-size: 16px; }
.game-login-body .login-card input { height: 50px; font-size: 16px; }
.game-login-body .demo-hint { color: #c7d0dc; font-size: 14px; }.game-login-body .form-error { padding: 12px 14px; font-size: 15px; }

@media (max-width:900px) {
    .game-content-body .main-content { padding: 18px 16px 50px 72px !important; }
    .game-content-body .section-heading { align-items: flex-start; flex-direction: column; }
    .game-content-body .section-heading p { text-align: left; }
    .game-quests-body .page-intro { align-items: flex-start; flex-direction: column; }.game-quests-body .intro-gem { min-width: 100%; }
    .game-quests-body .quest-card { grid-template-columns: 64px minmax(0,1fr); }.game-quests-body .quest-actions { grid-column: 2; }.game-quests-body .quest-actions .button { width: auto; min-width: 190px; }
    .game-wallet-body .wallet-grid { grid-template-columns: 1fr; }.game-wallet-body .wallet-card { min-height: 120px; }
    .game-login-body .login-shell { grid-template-columns: 1fr; }.game-login-body .login-art { min-height: 420px; }.game-login-body .login-card { min-height: 560px; }
}

@media (max-width:620px) {
    .game-content-body .main-content { padding: 14px 12px 42px 64px !important; }
    .game-content-body .page-intro h1 { font-size: 40px; }
    .game-quests-body .quest-card { grid-template-columns: 1fr; }.game-quests-body .quest-symbol { display: grid; }.game-quests-body .quest-actions { grid-column: 1; }.game-quests-body .quest-actions .button { width: 100%; }
    .game-home-body .home-hero { grid-template-columns: 1fr; }.game-home-body .hero-pass-card { min-height: 260px; }
}
.game-reward-cost,.game-claim-state { font-size: 14px; }
.game-reward-action button,.game-reward-action a { min-height: 44px; font-size: 14px; }
.page-slider-control label { font-size: 14px; }
.page-slider-control output { font-size: 15px; }
.page-slider-control input[type="range"] { height: 44px; }

@media (max-width:1199px) {
    .game-reward-card { grid-template-rows: auto 42px minmax(0,1fr) 44px; }
    .game-reward-art { min-height: 42px; font-size: 38px; }
    .game-reward-copy { min-height: 0; overflow: hidden; padding-bottom: 5px; }
    .game-reward-copy p { -webkit-line-clamp: 2; }
    .game-reward-action { min-height: 44px; }
}

/* Une petite hauteur de fenêtre ne doit jamais rogner les cartes du pass. */
.client-pass-page .main-content { overflow-y: auto !important; }
.client-pass-page .game-pass-screen {
    height: auto;
    min-height: max(100vh,900px);
}

/* Les libellés secondaires restent lisibles, y compris dans le tiroir et la colonne du pass. */
.game-navigation-tab > strong,
.game-pass-body .pass-drawer .eyebrow,
.game-pass-body .pass-drawer .drawer-brand small,
.game-pass-body .pass-drawer .nav-label,
.game-pass-body .pass-drawer .pass-nav a strong,
.game-pass-body .pass-drawer .pass-nav a small,
.game-pass-body .pass-drawer .drawer-footer,
.season-identity small,
.season-meter small,
.season-progress-copy span,
.season-progress-copy small,
.season-page-overview > small,
.season-state small,
.stage-account-action form span,
.lane-label strong,
.lane-label small,
.page-slider-scale,
.game-reward-meta b { font-size: 14px; }

.game-content-body .legacy-banner small,
.game-content-body .integration-note small { font-size: 14px; }
.game-pass-body .pass-drawer .drawer-footer { color: #cbd4e0; }
.stage-owned .state-icon,
.season-state .state-icon { font-size: 16px; }

/* Finitions d'alignement : une récompense de quête et son action ne forment
   qu'un seul bloc, centré sur un axe commun. */
.game-quests-body .quest-actions {
    min-width: 0;
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: stretch;
    justify-items: center;
    gap: 12px;
}
.game-quests-body .quest-reward {
    width: 100%;
    max-width: 220px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.game-quests-body .quest-reward span {
    min-width: 58px;
    justify-content: center;
    text-align: center;
}
.game-quests-body .quest-actions form,
.game-quests-body .quest-actions .button,
.game-quests-body .quest-actions .claim-state {
    width: 100%;
    max-width: 220px;
}
.game-quests-body .quest-actions form .button {
    width: 100%;
    max-width: none;
    padding-inline: 10px;
    white-space: nowrap;
}
.game-quests-body .quest-actions .claim-state {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.game-quests-body .quest-card.is-complete {
    opacity: 1;
    border-color: rgba(102,215,160,.34);
    background: linear-gradient(90deg,rgba(102,215,160,.08),transparent 34%),#29364a;
}

/* Les pieds de cartes du pass utilisent deux zones centrées et stables :
   prix à gauche, action ou état à droite. */
.game-reward-action {
    display: grid;
    grid-template-columns: minmax(54px,.75fr) minmax(110px,1.25fr);
    align-items: center;
    justify-content: stretch;
    gap: 10px;
}
.game-reward-cost { justify-self: center; }
.game-reward-action > form {
    width: min(100%,140px);
    justify-self: center;
}
.game-reward-action > form button { width: 100%; }
.game-reward-action > a,
.game-reward-action > .game-claim-state {
    width: min(100%,140px);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    padding-inline: 8px;
    text-align: center;
}
.lane-label { gap: 10px; }

@media (max-width:900px) {
    .game-quests-body .quest-actions { grid-column: 2; }
    .game-quests-body .quest-actions .button { min-width: 0; }
}
@media (max-width:620px) {
    .game-quests-body .quest-actions { grid-column: 1; }
}

/* Passe unifié : quêtes, soldes et déblocages réunis sur le même écran. */
.client-pass-page .game-pass-screen { min-height: max(100vh,1180px); }
.client-pass-page .game-reward-stage {
    grid-template-rows: auto minmax(500px,1fr) auto auto;
    align-content: start;
}
.season-quest-jump {
    max-width: 250px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 18px;
    padding: 9px 12px;
    border: 1px solid rgba(169,122,255,.32);
    border-radius: 9px;
    background: rgba(169,122,255,.09);
}
.season-quest-jump b { color: #e0ceff; font-size: 14px; }
.season-quest-jump small { color: #c5cfdb; font-size: 14px; }

.game-reward-cost {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.1;
}
.game-reward-cost small { color: #bbc5d2; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.game-reward-cost strong { display: flex; align-items: center; gap: 3px; color: #fff; font-size: 15px; }
.game-reward-action > form button { font-weight: 900; }

.pass-quest-board {
    min-width: 0;
    scroll-margin-top: 16px;
    overflow: hidden;
    border: 1px solid rgba(230,238,251,.18);
    border-radius: 14px;
    background: linear-gradient(135deg,rgba(26,36,52,.94),rgba(31,40,57,.88));
    box-shadow: 0 14px 34px rgba(2,6,12,.18);
}
.pass-quest-board:target { border-color: rgba(189,141,255,.55); box-shadow: 0 0 0 3px rgba(169,122,255,.12),0 14px 34px rgba(2,6,12,.18); }
.pass-quest-board-header {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(232,239,252,.14);
    background: radial-gradient(circle at 90% 50%,rgba(169,122,255,.12),transparent 32%);
}
.pass-quest-board-header > div:first-child { min-width: 0; }
.pass-quest-board-header > div:first-child > small { color: #c4a5ff; font-size: 14px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.pass-quest-board-header h2 { margin: 2px 0; color: #fffaf0; font: 26px/1.1 Georgia,serif; }
.pass-quest-board-header p { margin: 0; color: #cbd4df; font-size: 15px; line-height: 1.5; }
.pass-quest-wallet { flex: 0 0 auto; display: flex; gap: 8px; }
.pass-quest-wallet > span {
    min-width: 100px;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid rgba(235,241,252,.15);
    border-radius: 9px;
    background: rgba(16,23,35,.48);
}
.pass-quest-wallet small { color: #bfc8d5; font-size: 13px; text-transform: uppercase; }
.pass-quest-wallet strong { font-size: 17px; }
.pass-quest-wallet .purple strong { color: #d0afff; }.pass-quest-wallet .blue strong { color: #9bdfff; }
.pass-quest-login { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid rgba(169,122,255,.32); border-radius: 8px; color: #e0ceff; font-size: 14px; font-weight: 800; }

.pass-quest-groups {
    min-width: 0;
    display: grid;
    gap: 18px;
    padding: 12px 14px 15px;
}
.pass-quest-group { min-width: 0; }
.pass-quest-group > header { height: 29px; display: flex; align-items: center; gap: 7px; padding: 0 3px 7px; }
.pass-quest-group > header strong { color: #edf1f6; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; }
.pass-quest-group > header span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 99px; background: rgba(169,122,255,.14); color: #d6bdff; font-size: 13px; font-weight: 900; }
.pass-quest-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 10px; }
.pass-quest-card {
    width: auto;
    min-height: 178px;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) 100px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(231,238,250,.17);
    border-radius: 11px;
    background: linear-gradient(145deg,#334157,#263449);
}
.pass-quest-card.is-ready { border-color: rgba(102,215,160,.45); background: linear-gradient(145deg,rgba(64,116,93,.36),#263449 64%); }
.pass-quest-card.is-claimed { border-color: rgba(102,215,160,.28); opacity: .78; }
.pass-quest-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(169,122,255,.30); border-radius: 10px; background: rgba(169,122,255,.10); color: #d0b2ff; font-size: 22px; }
.pass-quest-copy { min-width: 0; }
.pass-quest-copy h3 { margin: 0; overflow: hidden; color: #fff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.pass-quest-copy p { min-height: 42px; margin: 5px 0 9px; display: -webkit-box; overflow: hidden; color: #d7dee7; font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pass-quest-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #111a27; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.pass-quest-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#a97aff,#66c9ff); box-shadow: 0 0 10px rgba(169,122,255,.6); }
.pass-quest-progress-meta { display: flex; justify-content: space-between; margin-top: 5px; color: #cbd4df; font-size: 13px; }
.pass-quest-action { min-width: 0; display: grid; justify-items: stretch; gap: 8px; }
.pass-quest-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pass-quest-reward span { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 6px; font-size: 14px; font-weight: 900; }
.pass-quest-reward .purple { color: #d5baff; background: rgba(169,122,255,.13); }.pass-quest-reward .blue { color: #a8e4ff; background: rgba(102,201,255,.12); }
.pass-quest-action form { margin: 0; }
.pass-quest-action button,.pass-quest-action > a,.pass-quest-state { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid rgba(102,215,160,.35); border-radius: 7px; background: rgba(102,215,160,.13); color: #a7f0c9; font-size: 14px; font-weight: 900; text-align: center; cursor: pointer; }
.pass-quest-action button.is-secondary { border-color: rgba(235,241,252,.20); background: rgba(255,255,255,.055); color: #e1e6ed; }
.pass-quest-action > a { border-color: rgba(169,122,255,.32); background: rgba(169,122,255,.10); color: #decaff; }
.pass-quest-state { border-color: rgba(235,241,252,.12); background: rgba(255,255,255,.04); color: #c6d0dc; cursor: default; }
.pass-quest-state.claimed { border-color: rgba(102,215,160,.25); color: #91e5b8; }

@media (max-width:1199px) {
    .client-pass-page .game-pass-screen { min-height: 1160px; }
    .client-pass-page .game-reward-stage { grid-template-rows: auto minmax(480px,1fr) auto auto; }
    .pass-quest-list { grid-template-columns: 1fr; }
}

@media (max-width:700px) {
    .client-pass-page .game-pass-screen { min-height: 0; }
    .client-pass-page .game-reward-stage { min-height: 0; grid-template-rows: auto auto auto auto; }
    .season-quest-jump { max-width: none; }
    .pass-quest-board-header { align-items: flex-start; flex-direction: column; }
    .pass-quest-wallet { width: 100%; }.pass-quest-wallet > span { min-width: 0; flex: 1; }
    .pass-quest-list { grid-template-columns: 1fr; }
    .pass-quest-card { width: auto; grid-template-columns: 38px minmax(0,1fr); }
    .pass-quest-icon { width: 38px; height: 38px; }
    .pass-quest-action { grid-column: 2; grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Sur un écran de site classique, toutes les récompenses d'une rangée restent
   visibles. Le défilement horizontal n'est conservé que pour les petits écrans. */
@media (min-width:1200px) {
    .client-pass-page .lane-items {
        display: grid;
        overflow: visible;
    }
    .client-pass-page .lane-items-free { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .client-pass-page .lane-items-premium { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .client-pass-page .game-reward-card { min-width: 0; }
}

/* ========================================================================
   Console du passe — navigation, récompenses et missions sur le même écran
   ======================================================================== */
.battlepass-command-page { background: #080b11; }
.battlepass-command-page::before { display: none; }
.battlepass-command-page .atmosphere { opacity: .16; }
.battlepass-command-page .main-content {
    height: 100vh !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.bp-sitebar {
    --sitebar-hue: 262;
    --sitebar-secondary-hue: 198;
    position: fixed;
    inset: 0 0 auto;
    z-index: 210;
    height: 70px;
    display: flex;
    align-items: center;
    gap: clamp(24px,3vw,48px);
    isolation: isolate;
    padding: 0 22px;
    border-bottom:1px solid hsl(var(--sitebar-hue) 78% 72% / .24);
    background:
        radial-gradient(circle at 18% -120%,hsl(var(--sitebar-hue) 92% 68% / .24),transparent 46%),
        radial-gradient(circle at 82% -140%,hsl(var(--sitebar-secondary-hue) 92% 68% / .18),transparent 42%),
        linear-gradient(180deg,rgba(18,21,34,.68),rgba(7,10,17,.54));
    box-shadow:inset 0 1px rgba(255,255,255,.1),0 16px 44px rgba(0,0,0,.3);
    -webkit-backdrop-filter:blur(24px) saturate(155%);
    backdrop-filter:blur(24px) saturate(155%);
}
.bp-sitebar::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(108deg,transparent 6%,rgba(255,255,255,.075) 29%,transparent 52%); }
.bp-sitebar > * { position: relative; z-index: 1; }
.bp-sitebar::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; pointer-events:none; opacity:.78; background:linear-gradient(90deg,transparent 0 9%,hsl(var(--sitebar-hue) 76% 58% / .14) 24%,hsl(var(--sitebar-hue) 88% 64% / .78) 38%,hsl(var(--sitebar-secondary-hue) 88% 66% / .32) 48%,transparent 63% 100%); background-size:230% 100%; animation:bp-sitebar-scan 6s linear infinite; }
.bp-sitebar-brand { position:relative; flex:0 0 auto; min-width:112px; display:grid; gap:4px; color:#f8f2e9; text-transform:uppercase; }
.bp-sitebar-brand strong { font:800 24px/1 Georgia,serif; letter-spacing:-.035em; }
.bp-sitebar-brand strong span { color:#f1603b; text-shadow:0 0 18px rgba(241,96,59,.45); }
.bp-sitebar-brand small { color:#b8aaa0; font-size:10px; font-weight:850; letter-spacing:.2em; }
.bp-sitebar-brand::after { content:""; position:absolute; right:-18px; top:2px; width:1px; height:35px; background:linear-gradient(transparent,rgba(242,105,55,.55),transparent); }
.bp-sitebar-nav { min-width: 0; display: flex; align-items: center; gap: 5px; }
.bp-sitebar-nav a {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: rgba(239,234,227,.69);
    font-size: 13px;
    font-weight: 820;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,text-shadow .2s ease;
}
.bp-sitebar-nav a::before { content:""; width:4px; height:4px; margin-right:0; border-radius:50%; opacity:0; background:hsl(var(--sitebar-hue) 90% 68%); box-shadow:0 0 10px hsl(var(--sitebar-hue) 90% 60%); transform:scale(.5); transition:opacity .2s ease,transform .2s ease,margin-right .2s ease; }
.bp-sitebar-nav a::after { content:""; position:absolute; right:9px; bottom:4px; left:9px; height:2px; border-radius:4px; background:linear-gradient(90deg,hsl(var(--sitebar-hue) 78% 55%),hsl(var(--sitebar-secondary-hue) 84% 68%)); box-shadow:0 0 12px hsl(var(--sitebar-hue) 82% 58% / .52); transform:scaleX(0); transform-origin:left; transition:transform .24s ease; }
.bp-sitebar-nav a:hover { color:#fff; border-color:hsl(var(--sitebar-hue) 80% 66% / .18); background:linear-gradient(90deg,transparent,hsl(var(--sitebar-hue) 80% 58% / .075),transparent); box-shadow:none; transform:translateY(-1px); text-shadow:0 0 16px hsl(var(--sitebar-hue) 78% 66% / .38); }
.bp-sitebar-nav a.is-active { color:#fff; border-color:hsl(var(--sitebar-hue) 82% 68% / .22); background:linear-gradient(90deg,transparent,hsl(var(--sitebar-hue) 84% 58% / .1),transparent); box-shadow:none; text-shadow:0 0 18px hsl(var(--sitebar-hue) 82% 66% / .4); }
.bp-sitebar-nav a:hover::before,.bp-sitebar-nav a.is-active::before { margin-right:7px; opacity:1; transform:scale(1); }
.bp-sitebar-nav a:hover::after,.bp-sitebar-nav a.is-active::after { transform:scaleX(1); }
.bp-sitebar-tools { min-width: 0; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bp-server-state { display: inline-flex; align-items: center; gap: 8px; color: #aaa8a6; font-size: 12px; white-space: nowrap; }
.bp-server-state i { width: 8px; height: 8px; border-radius: 50%; background: #61d99e; box-shadow: 0 0 12px rgba(97,217,158,.9); animation:bp-server-pulse 2.6s ease-in-out infinite; }
.bp-header-balance { min-height:38px; display:inline-flex; align-items:center; gap:5px; padding:0 10px; border:1px solid rgba(231,238,250,.18); border-radius:7px; background:transparent; box-shadow:none; font-size:14px; }
.bp-header-balance.purple { color: #d4b7ff; }.bp-header-balance.blue { color: #a8e3ff; }
.bp-account,.bp-discord-login { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 17px; border:1px solid rgba(255,118,68,.55); border-radius:8px; background:linear-gradient(135deg,#e84a2d,#f26b39); box-shadow:0 8px 22px rgba(224,68,35,.2); color:#fff; font-size:12px; font-weight:850; letter-spacing:.035em; text-transform:uppercase; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.bp-account { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-account:hover,.bp-discord-login:hover { transform:translateY(-1px); border-color:rgba(255,143,83,.72); box-shadow:0 9px 26px rgba(222,67,33,.27),0 0 18px rgba(244,96,53,.13); }

.bp-sitebar-menu { position: relative; display: none; margin-left: auto; }
.bp-sitebar-menu summary {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(166,111,255,.34);
    border-radius: 8px;
    color: #f0edf7;
    background: transparent;
    cursor: pointer;
    list-style: none;
    transition: border-color .2s ease,background .2s ease,transform .2s ease;
}
.bp-sitebar-menu[open] summary { border-color: rgba(174,122,255,.72); background: rgba(126,80,205,.2); transform: rotate(90deg); }
.bp-sitebar-menu summary::-webkit-details-marker { display: none; }
.bp-sitebar-menu summary svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bp-sitebar-menu > nav {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(320px,calc(100vw - 28px));
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(166,111,255,.3);
    border-radius: 12px;
    background: #0c111c;
    box-shadow: 0 28px 80px rgba(0,0,0,.58);
    animation: bp-menu-in .2s ease-out both;
}
.bp-sitebar-menu nav a { min-height: 46px; display: flex; align-items: center; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; color: #cbc6d5; font-size: 14px; font-weight: 760; }
.bp-sitebar-menu nav a:hover,.bp-sitebar-menu nav a.is-active { color: #fff; border-color: rgba(174,122,255,.24); background: rgba(126,80,205,.15); }
.bp-sitebar-menu nav a.is-login { margin-top: 6px; color: #fff; background: linear-gradient(135deg,#e84a2d,#f26b39); }

@keyframes bp-sitebar-ember { 0%,100% { background-position:100% 0; opacity:.35; } 50% { background-position:0 0; opacity:.7; } }
@keyframes bp-sitebar-scan { from { background-position:100% 0; } to { background-position:-110% 0; } }
@keyframes bp-server-pulse { 0%,100% { opacity:.72; transform:scale(.86); } 50% { opacity:1; transform:scale(1.12); } }
@keyframes bp-menu-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }

.battlepass-command {
    width: 100%;
    height: calc(100vh - 70px);
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(250px,16vw,292px) minmax(410px,.82fr) minmax(520px,1.48fr);
    gap: 4px;
    margin-top: 70px;
    overflow: hidden;
    background: #05070b;
}

/* Colonne du passe. */
.bp-pass-sidebar {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid rgba(226,235,250,.16);
    background: linear-gradient(180deg,#172235,#111a28);
    scrollbar-width: thin;
    scrollbar-color: #53637b #111a28;
}
.bp-pass-identity { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 24px 20px 20px; border-bottom: 1px solid rgba(232,239,251,.13); }
.bp-pass-emblem { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--pass-accent) 60%,transparent); border-radius: 10px; background: color-mix(in srgb,var(--pass-accent) 17%,#263247); color: color-mix(in srgb,var(--pass-accent) 68%,white); font: 22px Georgia,serif; }
.bp-pass-identity small,.bp-pass-library h2 { color: #bfc9d8; font-size: 13px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.bp-pass-identity h1 { margin: 6px 0 5px; color: #fffaf0; font: 31px/1.04 Georgia,serif; letter-spacing: -.025em; }
.bp-pass-identity p { margin: 0; color: #c2cbd7; font-size: 14px; line-height: 1.45; }
.bp-pass-progress { min-height: 112px; display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 14px; margin: 0 20px; padding: 16px 0; border-bottom: 1px solid rgba(232,239,251,.13); }
.bp-progress-ring { width: 68px; height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle,#172235 0 54%,transparent 56%),conic-gradient(var(--pass-accent) var(--completion),rgba(255,255,255,.10) 0); }
.bp-progress-ring strong { color: #fff; font-size: 18px; }.bp-progress-ring small { color: #c0c9d6; font-size: 10px; text-transform: uppercase; }
.bp-pass-progress > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.bp-pass-progress > div:last-child strong { font-size: 18px; }.bp-pass-progress > div:last-child span { color: #c8d0dc; font-size: 14px; }.bp-pass-progress > div:last-child small { margin-top: 5px; color: #d6baff; font-size: 13px; }
.bp-pass-library { padding: 22px 12px; }
.bp-pass-library h2 { margin: 0 8px 12px; }
.bp-pass-library nav { display: grid; gap: 6px; }
.bp-pass-library a { --nav-accent:var(--pass-accent); min-height: 58px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-left: 3px solid transparent; border-radius: 8px; color: #d1d8e2; background: rgba(255,255,255,.025); }
.bp-pass-library a:hover,.bp-pass-library a.is-active { border-left-color: var(--nav-accent); background: rgba(255,255,255,.09); }
.bp-pass-library a > span { color: var(--nav-accent); font-size: 18px; text-align: center; }
.bp-pass-library a strong { min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.bp-pass-library a small { margin-top: 3px; color: #9ca8b8; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.bp-pass-sidebar-footer { margin-top: auto; padding: 16px 18px; border-top: 1px solid rgba(232,239,251,.13); background: rgba(8,12,19,.28); }
.bp-pass-sidebar-footer form { display: grid; gap: 5px; }
.bp-pass-sidebar-footer form small { color: #bfc9d7; font-size: 12px; }.bp-pass-sidebar-footer form strong { color: #ffd478; font-size: 16px; }
.bp-pass-sidebar-footer button,.bp-pass-sidebar-footer > a { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 7px; border: 0; border-radius: 7px; background: #f0bd46; color: #21190c; font-size: 14px; font-weight: 900; cursor: pointer; }
.bp-owned-state { min-height: 44px; display: flex; align-items: center; justify-content: center; color: #8fe9b8; font-size: 14px; font-weight: 800; }.bp-owned-state.is-locked { color: #efca78; }

/* Colonne des récompenses. */
.bp-reward-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background: #101725; }
.bp-reward-header { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid rgba(232,239,251,.15); background: radial-gradient(circle at 84% 20%,color-mix(in srgb,var(--pass-accent) 25%,transparent),transparent 36%),linear-gradient(135deg,#28364c,#1c2738); }
.bp-reward-header > div:first-child { min-width: 0; }
.bp-reward-header small { color: color-mix(in srgb,var(--pass-accent) 64%,white); font-size: 13px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.bp-reward-header h2 { margin: 4px 0 3px; color: #fffaf0; font: 30px/1.06 Georgia,serif; }
.bp-reward-header p { max-width: 560px; margin: 0; overflow: hidden; color: #d2dae5; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.bp-page-arrows { display: flex; gap: 8px; }
.bp-page-arrows a,.bp-page-arrows span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(232,239,251,.21); border-radius: 7px; background: rgba(255,255,255,.07); color: #fff; font-size: 22px; }.bp-page-arrows span { opacity: .35; }
.bp-reward-workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: 52px minmax(0,1fr); overflow: hidden; background: linear-gradient(rgba(14,20,31,.76),rgba(14,20,31,.88)),var(--pass-art,none),radial-gradient(circle at 68% 10%,color-mix(in srgb,var(--pass-accent) 26%,transparent),transparent 32%),linear-gradient(145deg,#253249,#121b2a); background-size: cover; background-position: center; }
.bp-page-rail { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow-y: auto; padding: 10px 6px; border-right: 1px solid rgba(231,238,250,.16); background: rgba(11,17,27,.72); scrollbar-width: thin; }
.bp-page-rail a { position: relative; width: 38px; min-height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(231,238,250,.12); border-radius: 6px; color: #aeb9c9; font-size: 13px; font-weight: 900; }
.bp-page-rail a:hover,.bp-page-rail a.is-active { border-color: color-mix(in srgb,var(--pass-accent) 70%,white); background: color-mix(in srgb,var(--pass-accent) 22%,#28364c); color: #fff; }
.bp-page-rail a.is-complete { color: #8de8b6; }.bp-page-rail a.is-locked { opacity: .55; }
.bp-page-rail a i { position: absolute; right: 2px; bottom: 0; color: currentColor; font-size: 9px; font-style: normal; }
.bp-reward-canvas { min-width: 0; min-height: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--pass-accent) 70%,#eef2f8) #162032; }
.bp-reward-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.bp-reward-cell { --rarity:#aeb7c5; position: relative; min-width: 0; min-height: 190px; display: grid; grid-template-rows: minmax(76px,1fr) auto auto; overflow: hidden; border: 1px solid color-mix(in srgb,var(--rarity) 50%,rgba(255,255,255,.16)); border-radius: 8px; background: radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--rarity) 24%,transparent),transparent 38%),linear-gradient(155deg,rgba(64,80,106,.96),rgba(40,53,73,.98)); box-shadow: 0 12px 28px rgba(2,6,12,.22); }
.bp-reward-cell.rarity-common { --rarity:#c2c8d1; }.bp-reward-cell.rarity-rare { --rarity:#6ec9ff; }.bp-reward-cell.rarity-epic { --rarity:#b183ff; }.bp-reward-cell.rarity-legendary { --rarity:#f0bc4c; }
.bp-reward-cell.is-premium { border-top: 3px solid #e8b544; }.bp-reward-cell.is-featured { grid-column: 1 / -1; min-height: 240px; grid-template-columns: minmax(150px,.8fr) minmax(0,1.2fr); grid-template-rows: minmax(150px,1fr) auto; }
.bp-reward-visual { position: relative; min-height: 84px; display: grid; place-items: center; color: var(--rarity); font: 60px/1 Georgia,serif; text-shadow: 0 0 28px color-mix(in srgb,var(--rarity) 62%,transparent); }
.bp-reward-visual i { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #5ed397; color: #12251b; font: 900 15px Inter,sans-serif; }
.bp-reward-copy { min-width: 0; padding: 0 13px 12px; }
.bp-reward-cell.is-featured .bp-reward-copy { display: flex; flex-direction: column; justify-content: center; padding: 20px; }
.bp-reward-badges { display: flex; justify-content: space-between; gap: 8px; color: #d9e0e9; font-size: 12px; font-weight: 900; text-transform: uppercase; }.bp-reward-badges b { color: var(--rarity); }
.bp-reward-copy h3 { margin: 7px 0 4px; color: #fff; font-size: 17px; line-height: 1.25; }.bp-reward-copy h3 strong { white-space: nowrap; }
.bp-reward-copy p { margin: 0; display: -webkit-box; overflow: hidden; color: #d5dce6; font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bp-reward-action { min-height: 58px; display: grid; grid-template-columns: minmax(65px,.8fr) minmax(100px,1.2fr); align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid rgba(234,240,251,.15); background: rgba(13,20,31,.58); }
.bp-reward-cell.is-featured .bp-reward-action { grid-column: 1 / -1; }
.bp-reward-price { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }.bp-reward-price small { color: #c5ceda; font-size: 11px; text-transform: uppercase; }.bp-reward-price strong { color: #fff; font-size: 16px; }.bp-reward-price strong::first-letter { color: #c18cff; }
.bp-reward-action form { margin: 0; }.bp-reward-action button,.bp-reward-action > a,.bp-reward-state { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid color-mix(in srgb,var(--rarity) 46%,transparent); border-radius: 6px; background: color-mix(in srgb,var(--rarity) 15%,#2c3b52); color: #fff; font-size: 14px; font-weight: 900; text-align: center; cursor: pointer; }.bp-reward-state { cursor: default; }.bp-reward-state.is-owned { color: #8ee6b7; }
.bp-empty-state { min-height: 150px; display: grid; place-items: center; grid-column: 1 / -1; color: #b8c2cf; font-size: 15px; text-align: center; }
.bp-reward-footer { min-height: 74px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(232,239,251,.14); background: #172234; }
.bp-reward-footer > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 9px 14px; border-right: 1px solid rgba(232,239,251,.11); }.bp-reward-footer > div:last-child { border-right: 0; }
.bp-reward-footer small { color: #aeb9c8; font-size: 12px; }.bp-reward-footer strong { overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

/* Colonne des missions, volontairement claire pour séparer lecture et butin. */
.bp-mission-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); overflow: hidden; border-left: 1px solid rgba(232,239,251,.16); background: #e9eef7; color: #1d2939; }
.bp-mission-header { min-height: 91px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; color: #f7f9fc; background: radial-gradient(circle at 86% 0%,color-mix(in srgb,var(--pass-accent) 28%,transparent),transparent 35%),linear-gradient(135deg,#30394f,#242c3e); }
.bp-mission-header small { color: #73d3ff; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.bp-mission-header h2 { margin: 3px 0 0; font: 29px/1 Georgia,serif; }
.bp-mission-wallet { display: flex; gap: 7px; }.bp-mission-wallet span { min-height: 48px; display: flex; flex-direction: column; justify-content: center; padding: 4px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(5,9,16,.25); font-size: 14px; font-weight: 900; }.bp-mission-wallet span small { color: #c3ccd9; font-size: 10px; text-transform: uppercase; }.bp-mission-wallet .purple b { color: #d7bdff; }.bp-mission-wallet .blue b { color: #a6e5ff; }
.bp-mission-tabs { min-height: 57px; display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid #bcc7d7; background: #d7deea; }
.bp-mission-tabs button { position: relative; min-height: 56px; border: 0; border-right: 1px solid #bdc7d6; background: transparent; color: #59667a; font-size: 14px; font-weight: 900; cursor: pointer; }.bp-mission-tabs button:last-child { border-right: 0; }.bp-mission-tabs button:hover,.bp-mission-tabs button.is-active { color: #1d2939; background: rgba(255,255,255,.44); }.bp-mission-tabs button.is-active::after { content: ""; position: absolute; inset: auto 18% 0; height: 4px; background: var(--pass-secondary); }
.bp-mission-content { min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8492a8 #dbe2ed; }
.bp-quest-section { min-width: 0; padding: 18px; }
.bp-quest-section[hidden] { display: none !important; }
.bp-quest-section-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.bp-quest-section-header small { color: #1584c6; font-size: 13px; font-weight: 900; text-transform: uppercase; }.bp-quest-section-header h3 { margin: 3px 0; font: 27px/1.05 Georgia,serif; }.bp-quest-section-header p { margin: 0; color: #617086; font-size: 14px; }
.bp-quest-section-header > strong { min-width: 105px; display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; gap: 3px; color: #354155; font-size: 22px; }.bp-quest-section-header > strong b { color: #168dd0; font-size: 38px; }.bp-quest-section-header > strong span { grid-column: 1/-1; color: #66758a; font-size: 11px; text-align: center; text-transform: uppercase; }
.bp-milestones { position: relative; min-height: 76px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 0 17px; padding: 0 8px; list-style: none; }
.bp-milestones::before { content: ""; position: absolute; left: 28px; right: 28px; top: 18px; height: 5px; border-radius: 99px; background: #9aa8bb; }
.bp-milestones li { position: relative; z-index: 1; min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #5b687c; }
.bp-milestones li > span { width: 38px; height: 38px; display: grid; place-items: center; transform: rotate(45deg); border: 3px solid #f7f9fc; background: #7f8ca0; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 0 0 2px #7f8ca0; }.bp-milestones li > span b { transform: rotate(-45deg); }
.bp-milestones li strong { min-height: 30px; padding: 4px 7px; border-radius: 5px; background: #d8c9f2; color: #69469e; font-size: 13px; }.bp-milestones li strong small { color: #167aa9; font-size: 12px; }
.bp-milestones li.is-complete > span { background: #369bd0; box-shadow: 0 0 0 2px #369bd0,0 0 17px rgba(54,155,208,.45); }.bp-milestones li.is-complete strong { background: #c7ecfa; color: #13688e; }
.bp-quest-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #bdc8d8; border-left: 1px solid #bdc8d8; }
.bp-quest-card { min-width: 0; min-height: 216px; display: grid; grid-template-rows: auto 1fr auto auto; padding: 16px; border-right: 1px solid #bdc8d8; border-bottom: 1px solid #bdc8d8; background: rgba(255,255,255,.72); }
.bp-quest-card.is-ready { background: #e8f8ef; }.bp-quest-card.is-claimed { background: #e6edf3; }
.bp-quest-card > header { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.bp-quest-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #aebbd0; border-radius: 7px; background: #dce4f0; color: #5e4a95; font-size: 21px; }
.bp-quest-card > header small { color: #718096; font-size: 12px; font-weight: 800; text-transform: uppercase; }.bp-quest-card h4 { margin: 2px 0 0; color: #1b2839; font-size: 17px; line-height: 1.25; }
.bp-quest-rewards { display: flex; flex-direction: column; gap: 3px; }.bp-quest-rewards span { min-height: 26px; display: flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 5px; font-size: 13px; font-weight: 900; }.bp-quest-rewards .purple { color: #724ba8; background: #e1d5f4; }.bp-quest-rewards .blue { color: #176b91; background: #d2ebf6; }
.bp-quest-card > p { margin: 12px 0; color: #46556a; font-size: 15px; line-height: 1.45; }
.bp-quest-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #a5b0c0; }.bp-quest-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#8357bd,#299bd4); }
.bp-quest-card > footer { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.bp-quest-card > footer > span { color: #55647a; font-size: 14px; }
.bp-quest-card footer form { margin: 0; }.bp-quest-card footer button,.bp-quest-card footer a,.bp-quest-state { min-width: 104px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #6b7d95; border-radius: 6px; background: #35465d; color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }.bp-quest-card footer button.is-secondary { background: #53657d; }.bp-quest-state { color: #47576d; background: #dce4ee; cursor: default; }.bp-quest-state.is-claimed { color: #267b54; border-color: #87b9a0; background: #d9eee3; }

@media (max-width:1450px) {
    .battlepass-command { grid-template-columns: 240px minmax(370px,.8fr) minmax(500px,1.35fr); }
    .bp-sitebar { gap: 22px; padding-inline: 17px; }.bp-sitebar-brand { min-width:99px; }.bp-sitebar-brand::after { right:-12px; }.bp-sitebar-nav { gap: 3px; }.bp-sitebar-nav a { padding-inline:8px; font-size: 12px; }
    .bp-server-state { display: none; }
    .bp-pass-identity h1 { font-size: 27px; }
    .bp-reward-cell.is-featured { grid-template-columns: 130px minmax(0,1fr); }
    .bp-quest-section { padding: 14px; }.bp-quest-card { padding: 13px; }
}

@media (max-width:1199px) {
    .battlepass-command-page { overflow: auto; }
    .battlepass-command-page .main-content { height: auto !important; min-height: 100vh !important; overflow: visible !important; }
    .bp-sitebar-nav,.bp-sitebar-tools { display: none; }
    .bp-sitebar-menu { display: block; }
    .battlepass-command { height: auto; min-height: calc(100vh - 70px); grid-template-columns: 220px minmax(0,1fr); overflow: visible; }
    .bp-pass-sidebar { position: sticky; top: 70px; height: calc(100vh - 70px); grid-row: 1 / 3; }
    .bp-reward-panel { min-height: 820px; }.bp-mission-panel { min-height: 800px; }
    .bp-reward-panel,.bp-mission-panel { grid-column: 2; }
    .bp-pass-identity { grid-template-columns: 40px 1fr; padding-inline: 14px; }.bp-pass-emblem { width: 40px; height: 40px; }.bp-pass-identity h1 { font-size: 24px; }
    .bp-pass-progress { margin-inline: 14px; grid-template-columns: 62px 1fr; }.bp-progress-ring { width: 60px; height: 60px; }
    .bp-reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.bp-reward-cell.is-featured { grid-column: span 2; }
}

@media (max-width:760px) {
    .bp-sitebar { height: 60px; padding-inline: 13px; }.bp-sitebar-nav,.bp-server-state { display: none; }.bp-sitebar-brand { min-width:auto; gap:2px; }.bp-sitebar-brand strong { font-size:21px; }.bp-sitebar-brand small,.bp-sitebar-brand::after { display:none; }.bp-account,.bp-discord-login { min-height: 40px; padding-inline: 11px; font-size: 12px; }.bp-sitebar-menu summary { width:42px; height:42px; }
    .battlepass-command { grid-template-columns: 1fr; margin-top: 60px; }
    .bp-pass-sidebar { position: static; height: auto; max-height: none; grid-row: auto; border-right: 0; }
    .bp-pass-library nav { display: flex; overflow-x: auto; }.bp-pass-library a { min-width: 235px; }
    .bp-pass-sidebar-footer { margin-top: 0; }
    .bp-reward-panel,.bp-mission-panel { grid-column: 1; min-height: 0; }
    .bp-reward-header { align-items: flex-start; }.bp-reward-header h2 { font-size: 26px; }
    .bp-reward-workspace { grid-template-columns: 46px minmax(0,1fr); }
    .bp-reward-grid { grid-template-columns: 1fr; }.bp-reward-cell.is-featured { grid-column: 1; grid-template-columns: 1fr; grid-template-rows: minmax(110px,1fr) auto auto; }
    .bp-reward-cell.is-featured .bp-reward-action { grid-column: 1; }
    .bp-reward-footer { grid-template-columns: 1fr; }.bp-reward-footer > div { border-right: 0; border-bottom: 1px solid rgba(232,239,251,.11); }
    .bp-mission-header { align-items: flex-start; flex-direction: column; }.bp-mission-wallet { width: 100%; }.bp-mission-wallet span { flex: 1; justify-content: center; }
    .bp-mission-tabs button { font-size: 12px; }
    .bp-quest-section-header { align-items: flex-start; }.bp-quest-grid { grid-template-columns: 1fr; }
    .bp-milestones { overflow-x: auto; justify-content: flex-start; }.bp-milestones li { flex: 0 0 70px; }
}

/* Révision premium : deux rails de passes, proportions proches du montage et
   interface entièrement sombre pour éviter l'éblouissement. */
.battlepass-command {
    grid-template-columns: clamp(210px,13vw,238px) clamp(360px,23vw,410px) minmax(620px,1fr);
    grid-template-rows: 108px minmax(0,1fr);
    background: #070b11;
}
.bp-pass-switcher {
    min-width: 0;
    min-height: 0;
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-rows: repeat(2,1fr);
    gap: 2px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(230,237,249,.16);
    background: linear-gradient(180deg,#111925,#0b111a);
}
.bp-pass-lane {
    min-width: 0;
    display: grid;
    grid-template-columns: 210px 38px minmax(0,1fr) 38px;
    align-items: stretch;
    border: 1px solid rgba(228,236,249,.11);
    border-radius: 7px;
    background: rgba(27,38,54,.76);
}
.bp-pass-lane > header { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; padding: 4px 10px; border-right: 1px solid rgba(230,237,249,.12); }
.bp-pass-lane > header > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(164,123,255,.42); border-radius: 7px; background: rgba(139,94,222,.12); color: #cdb3ff; font-size: 13px; font-weight: 950; }
.bp-pass-lane-event > header > span { border-color: rgba(242,181,68,.42); background: rgba(242,181,68,.10); color: #ffd16d; }
.bp-pass-lane > header div { min-width: 0; display: flex; flex-direction: column; }.bp-pass-lane > header small { color: #8190a5; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.bp-pass-lane > header strong { overflow: hidden; color: #edf2f8; font-size: 12px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bp-pass-lane > button { min-width: 38px; border: 0; border-right: 1px solid rgba(230,237,249,.10); background: rgba(255,255,255,.025); color: #aeb9c8; font-size: 25px; cursor: pointer; }.bp-pass-lane > button:last-child { border-right: 0; border-left: 1px solid rgba(230,237,249,.10); }.bp-pass-lane > button:hover { background: rgba(164,123,255,.12); color: #fff; }.bp-pass-lane > button:disabled { opacity: .25; cursor: default; }
.bp-pass-scroll { min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 3px 5px; scroll-snap-type: x proximity; scrollbar-width: none; }.bp-pass-scroll::-webkit-scrollbar { display: none; }
.bp-pass-chip { --nav-accent:var(--pass-accent); min-width: 230px; min-height: 42px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 8px; flex: 0 0 auto; scroll-snap-align: start; padding: 4px 8px; border: 1px solid rgba(230,237,249,.10); border-radius: 6px; background: linear-gradient(135deg,rgba(56,70,94,.66),rgba(32,43,60,.82)); color: #dce3ec; }
.bp-pass-chip:hover,.bp-pass-chip.is-active { border-color: color-mix(in srgb,var(--nav-accent) 65%,white 10%); background: linear-gradient(135deg,color-mix(in srgb,var(--nav-accent) 20%,#35465e),#263449); box-shadow: inset 3px 0 var(--nav-accent),0 0 16px color-mix(in srgb,var(--nav-accent) 16%,transparent); }
.bp-pass-chip > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb,var(--nav-accent) 15%,#202b3c); color: color-mix(in srgb,var(--nav-accent) 68%,white); font-size: 16px; }
.bp-pass-chip > strong { min-width: 0; display: flex; flex-direction: column; overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.bp-pass-chip > strong small { overflow: hidden; color: #96a4b6; font-size: 9px; font-weight: 750; text-overflow: ellipsis; text-transform: uppercase; }
.bp-pass-chip > i { padding: 3px 6px; border-radius: 4px; background: rgba(5,10,17,.35); color: #aeb9c8; font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }.bp-pass-chip.is-active > i { color: #fff; background: var(--nav-accent); }

.bp-pass-sidebar { grid-column: 1; grid-row: 2; background: radial-gradient(circle at 50% 72%,color-mix(in srgb,var(--pass-accent) 11%,transparent),transparent 30%),linear-gradient(180deg,#152033,#0d1521); }
.bp-reward-panel { grid-column: 2; grid-row: 2; }
.bp-mission-panel { grid-column: 3; grid-row: 2; }
.bp-pass-identity { grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 18px 15px 15px; }.bp-pass-emblem { width: 40px; height: 40px; font-size: 19px; }.bp-pass-identity h1 { margin-top: 5px; font-size: 26px; }.bp-pass-identity p { font-size: 12px; }
.bp-pass-progress { min-height: 96px; grid-template-columns: 60px minmax(0,1fr); gap: 10px; margin-inline: 15px; padding: 12px 0; }.bp-progress-ring { width: 58px; height: 58px; }.bp-progress-ring strong { font-size: 16px; }.bp-pass-progress > div:last-child strong { font-size: 16px; }.bp-pass-progress > div:last-child span,.bp-pass-progress > div:last-child small { font-size: 12px; }
.bp-sidebar-page { margin: 14px 15px 0; padding: 14px 2px; border-top: 1px solid rgba(232,239,251,.13); border-bottom: 1px solid rgba(232,239,251,.13); }.bp-sidebar-page small { color: #9ba8b9; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }.bp-sidebar-page > strong { display: block; margin: 3px 0; color: #fff; font: 25px Georgia,serif; }.bp-sidebar-page > strong span { color: #9ba8b9; font-size: 13px; }.bp-sidebar-page p { margin: 0; overflow: hidden; color: #d6dde7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bp-sidebar-sigil { flex: 1; min-height: 80px; display: grid; place-items: center; overflow: hidden; color: color-mix(in srgb,var(--pass-accent) 15%,transparent); font: clamp(90px,9vw,145px)/1 Georgia,serif; text-shadow: 0 0 45px color-mix(in srgb,var(--pass-accent) 20%,transparent); }
.bp-pass-sidebar-footer { padding: 12px 14px; }.bp-pass-sidebar-footer button,.bp-pass-sidebar-footer > a { font-size: 13px; }

/* La colonne centrale reste volontairement compacte. Les descriptions
   génériques ont été retirées du HTML pour réserver la place au nom et au CTA. */
.bp-reward-header { min-height: 86px; padding: 12px 14px; }.bp-reward-header h2 { font-size: 25px; }.bp-reward-header small { font-size: 11px; }.bp-reward-header p { font-size: 12px; }
.bp-page-arrows a,.bp-page-arrows span { width: 40px; height: 40px; }
.bp-reward-workspace { grid-template-columns: 46px minmax(0,1fr); }
.bp-page-rail { gap: 3px; padding: 7px 4px; }.bp-page-rail a { width: 34px; min-height: 34px; font-size: 12px; }
.bp-reward-canvas { padding: 8px; }
.bp-reward-grid { gap: 7px; }
.bp-reward-cell { min-height: 146px; grid-template-rows: minmax(58px,1fr) auto 51px; border-radius: 7px; }
.bp-reward-cell.is-featured { min-height: 184px; grid-template-columns: 105px minmax(0,1fr); grid-template-rows: minmax(126px,1fr) 52px; }
.bp-reward-visual { min-height: 58px; font-size: 48px; }.bp-reward-cell.is-featured .bp-reward-visual { font-size: 62px; }
.bp-reward-copy { padding: 0 10px 8px; }.bp-reward-cell.is-featured .bp-reward-copy { padding: 14px; }
.bp-reward-badges { font-size: 10px; }.bp-reward-copy h3 { margin: 5px 0 0; font-size: 15px; }
.bp-reward-copy p { display: none; }
.bp-reward-action { min-height: 55px; padding: 4px 7px; }.bp-reward-price small { font-size: 9px; }.bp-reward-price strong { font-size: 14px; }.bp-reward-action button,.bp-reward-action > a,.bp-reward-state { min-height: 44px; font-size: 13px; }
.bp-reward-footer { min-height: 60px; }.bp-reward-footer > div { padding: 7px 10px; }.bp-reward-footer small { font-size: 10px; }.bp-reward-footer strong { font-size: 12px; }

/* Missions sombres : contraste maîtrisé, aucune grande surface blanche. */
.bp-mission-panel { color: #edf2f8; border-left-color: rgba(232,239,251,.13); background: #0d1521; }
.bp-mission-header { min-height: 86px; padding: 12px 18px; background: radial-gradient(circle at 88% 5%,color-mix(in srgb,var(--pass-accent) 23%,transparent),transparent 34%),linear-gradient(135deg,#27344a,#192537); }.bp-mission-header h2 { font-size: 26px; }
.bp-mission-tabs { min-height: 52px; border-bottom-color: rgba(232,239,251,.13); background: #172234; }
.bp-mission-tabs button { min-height: 51px; border-right-color: rgba(232,239,251,.11); color: #9eabbd; background: transparent; }.bp-mission-tabs button:hover,.bp-mission-tabs button.is-active { color: #fff; background: rgba(255,255,255,.055); }.bp-mission-tabs button.is-active::after { background: #55c9fb; box-shadow: 0 0 12px rgba(85,201,251,.5); }
.bp-mission-content { background: radial-gradient(circle at 80% 0%,rgba(79,126,190,.10),transparent 30%),#0d1521; scrollbar-color: #52647e #0c131e; }
.bp-quest-section { padding: 14px; }
.bp-quest-section-header { margin-bottom: 10px; }.bp-quest-section-header small { color: #62ceff; }.bp-quest-section-header h3 { color: #fffaf0; font-size: 24px; }.bp-quest-section-header p { color: #9eacbd; font-size: 12px; }.bp-quest-section-header > strong { color: #bfc9d6; }.bp-quest-section-header > strong b { color: #62ceff; font-size: 34px; }.bp-quest-section-header > strong span { color: #8492a5; }
.bp-milestones { min-height: 68px; margin-bottom: 11px; }.bp-milestones::before { background: #34445a; box-shadow: inset 0 1px 3px rgba(0,0,0,.45); }.bp-milestones li { color: #a8b5c6; }.bp-milestones li > span { border-color: #182537; background: #516179; box-shadow: 0 0 0 2px #76869d; }.bp-milestones li strong { background: #302747; color: #d4b9ff; }.bp-milestones li strong small { color: #8bdcff; }.bp-milestones li.is-complete > span { background: #318fc1; box-shadow: 0 0 0 2px #58bce7,0 0 17px rgba(84,190,232,.42); }.bp-milestones li.is-complete strong { background: #173d51; color: #9be4ff; }
.bp-quest-grid { border-top-color: rgba(226,235,249,.15); border-left-color: rgba(226,235,249,.15); }
.bp-quest-card { min-height: 192px; padding: 13px; border-right-color: rgba(226,235,249,.15); border-bottom-color: rgba(226,235,249,.15); background: linear-gradient(145deg,#1d2a3c,#172334); }
.bp-quest-card.is-ready { background: linear-gradient(145deg,rgba(45,98,75,.65),#172b28); }.bp-quest-card.is-claimed { background: linear-gradient(145deg,#243344,#182431); }
.bp-quest-icon { width: 40px; height: 40px; border-color: rgba(169,122,255,.35); background: rgba(169,122,255,.10); color: #d1b6ff; }
.bp-quest-card > header { grid-template-columns: 40px minmax(0,1fr) auto; }.bp-quest-card > header small { color: #93a2b7; font-size: 10px; }.bp-quest-card h4 { color: #fff; font-size: 15px; }.bp-quest-card > p { margin: 9px 0; color: #c1cad6; font-size: 13px; }
.bp-quest-rewards .purple { color: #d5b9ff; background: rgba(169,122,255,.14); }.bp-quest-rewards .blue { color: #a4e3ff; background: rgba(102,201,255,.13); }
.bp-quest-progress { background: #080e16; }.bp-quest-card > footer > span { color: #aebaca; font-size: 12px; }.bp-quest-card footer button,.bp-quest-card footer a,.bp-quest-state { min-width: 92px; min-height: 44px; border-color: rgba(138,160,191,.45); background: #354861; color: #fff; font-size: 13px; }.bp-quest-card footer button.is-secondary { background: #405570; }.bp-quest-state { color: #c8d2df; background: #253448; }.bp-quest-state.is-claimed { color: #94e4ba; border-color: rgba(102,215,160,.36); background: rgba(102,215,160,.10); }

@media (max-width:1199px) {
    .battlepass-command-page .page-shell { height: auto; min-height: 100vh; overflow: visible; }
    .battlepass-command-page .main-content { height: auto !important; min-height: 100vh !important; overflow: visible !important; }
    .battlepass-command { grid-template-columns: 200px minmax(0,1fr); grid-template-rows: auto auto auto; }
    .bp-pass-switcher { position: relative; grid-column: 1 / -1; grid-row: 1; height: 108px; }
    .bp-pass-sidebar { position: sticky; top: 70px; grid-column: 1; grid-row: 2 / 4; height: calc(100vh - 70px); }
    .bp-reward-panel { grid-column: 2; grid-row: 2; min-height: 760px; }
    .bp-mission-panel { grid-column: 2; grid-row: 3; min-height: 760px; }
    .bp-pass-lane { grid-template-columns: 175px 34px minmax(0,1fr) 34px; }.bp-pass-lane > header { grid-template-columns: 26px 1fr; padding-inline: 7px; }.bp-pass-lane > header > span { width: 25px; height: 25px; }
    .bp-reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.bp-reward-cell.is-featured { grid-column: span 2; }
}

@media (max-width:760px) {
    .battlepass-command { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
    .bp-pass-switcher { grid-column: 1; grid-row: 1; height: 112px; }.bp-pass-lane { grid-template-columns: 96px 32px minmax(0,1fr) 32px; }.bp-pass-lane > header { grid-template-columns: 1fr; }.bp-pass-lane > header > span,.bp-pass-lane > header small { display: none; }.bp-pass-lane > header strong { font-size: 9px; line-height: 1.15; white-space: normal; }
    .bp-pass-chip { min-width: 210px; }
    .bp-pass-sidebar { position: static; grid-column: 1; grid-row: 2; height: auto; }.bp-sidebar-sigil { min-height: 60px; }
    .bp-reward-panel { grid-column: 1; grid-row: 3; }.bp-mission-panel { grid-column: 1; grid-row: 4; }
    .bp-reward-grid { grid-template-columns: 1fr; }.bp-reward-cell.is-featured { grid-column: 1; }
}

/* ========================================================================
   Système visuel du passe — lisibilité, rythme et occupation de l'espace
   ======================================================================== */
.battlepass-command {
    --bp-space-1: 4px;
    --bp-space-2: 8px;
    --bp-space-3: 12px;
    --bp-space-4: 16px;
    --bp-space-5: 20px;
    --bp-space-6: 24px;
    grid-template-columns: clamp(245px,14.5vw,300px) clamp(420px,24.5vw,500px) minmax(620px,1fr);
    grid-template-rows: 118px minmax(0,1fr);
}

/* Les deux collections restent compactes, mais tous leurs libellés sont lisibles. */
.bp-pass-switcher { gap: 4px; padding: 5px 7px; }
.bp-pass-lane { grid-template-columns: 220px 44px minmax(0,1fr) 44px; }
.bp-pass-lane > header { gap: 10px; padding: 6px 12px; }
.bp-pass-lane > header > span { width: 34px; height: 34px; font-size: 14px; }
.bp-pass-lane > header small { font-size: 11px; line-height: 1.2; }
.bp-pass-lane > header strong { font-size: 13px; line-height: 1.3; }
.bp-pass-lane > button { min-width: 44px; min-height: 44px; }
.bp-pass-scroll { gap: 8px; padding: 4px 6px; }
.bp-pass-chip { min-width: 260px; min-height: 46px; gap: 10px; padding: 5px 10px; }
.bp-pass-chip > span { width: 34px; height: 34px; font-size: 17px; }
.bp-pass-chip > strong { font-size: 13px; line-height: 1.25; }
.bp-pass-chip > strong small { margin-top: 2px; font-size: 10px; }
.bp-pass-chip > i { padding: 4px 7px; font-size: 10px; }

/* Colonne identité : aucune information essentielle sous 12 px. */
.bp-pass-identity { grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 20px 18px 18px; }
.bp-pass-emblem { width: 44px; height: 44px; font-size: 21px; }
.bp-pass-identity small { font-size: 12px; }
.bp-pass-identity h1 { margin-top: 6px; font-size: 30px; line-height: 1.08; }
.bp-pass-identity p { font-size: 14px; line-height: 1.45; }
.bp-pass-progress { min-height: 108px; grid-template-columns: 68px minmax(0,1fr); gap: 12px; margin-inline: 18px; padding-block: 15px; }
.bp-progress-ring { width: 66px; height: 66px; }
.bp-progress-ring strong,.bp-pass-progress > div:last-child strong { font-size: 18px; }
.bp-progress-ring small { font-size: 10px; }
.bp-pass-progress > div:last-child span { font-size: 14px; line-height: 1.4; }
.bp-pass-progress > div:last-child small { font-size: 13px; }
.bp-sidebar-page { margin: 16px 18px 0; padding: 16px 2px; }
.bp-sidebar-page small { font-size: 11px; }
.bp-sidebar-page > strong { font-size: 28px; }
.bp-sidebar-page > strong span { font-size: 15px; }
.bp-sidebar-page p { font-size: 14px; line-height: 1.45; }
.bp-pass-sidebar-footer { padding: 14px 16px; }
.bp-pass-sidebar-footer button,.bp-pass-sidebar-footer > a { min-height: 46px; font-size: 14px; }

/* Récompenses : hiérarchie nette, quantités accolées au nom et CTA centrés. */
.bp-reward-header { min-height: 96px; padding: 16px 18px; }
.bp-reward-header small { font-size: 12px; }
.bp-reward-header h2 { margin-block: 5px 4px; font-size: 30px; line-height: 1.08; }
.bp-reward-header p { font-size: 14px; line-height: 1.4; }
.bp-page-arrows a,.bp-page-arrows span { width: 44px; height: 44px; }
.bp-reward-workspace { grid-template-columns: 50px minmax(0,1fr); }
.bp-page-rail { gap: 5px; padding: 8px 5px; }
.bp-page-rail a { width: 38px; min-height: 38px; font-size: 13px; }
.bp-reward-canvas { padding: 10px; }
.bp-reward-grid { gap: 9px; }
.bp-reward-cell { min-height: 170px; grid-template-rows: minmax(66px,1fr) auto 58px; }
.bp-reward-cell.is-featured { min-height: 210px; grid-template-columns: 120px minmax(0,1fr); grid-template-rows: minmax(150px,1fr) 58px; }
.bp-reward-visual { min-height: 66px; font-size: 54px; }
.bp-reward-cell.is-featured .bp-reward-visual { font-size: 68px; }
.bp-reward-copy { padding: 0 12px 11px; }
.bp-reward-cell.is-featured .bp-reward-copy { padding: 18px; }
.bp-reward-badges { align-items: center; flex-wrap: wrap; gap: 5px 8px; font-size: 12px; line-height: 1.25; }
.bp-reward-badges span,.bp-reward-badges b { min-width: 0; overflow-wrap: anywhere; }
.bp-reward-copy h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin: 7px 0 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.bp-reward-copy h3 strong { font-size: 1em; font-weight: 950; }
.bp-reward-action { min-height: 58px; grid-template-columns: minmax(48px,.62fr) minmax(0,1.38fr); gap: 6px; padding: 6px 8px; }
.bp-reward-price small { font-size: 10px; }
.bp-reward-price strong { font-size: 15px; }
.bp-reward-action button,.bp-reward-action > a,.bp-reward-state { min-height: 44px; padding-inline: 7px; font-size: 14px; line-height: 1.2; }
.bp-reward-footer { min-height: 68px; }
.bp-reward-footer > div { padding: 9px 12px; }
.bp-reward-footer small { font-size: 12px; }
.bp-reward-footer strong { font-size: 14px; }

/* Missions : les cartes remplissent le panneau et un dernier élément impair
   occupe toute la largeur, au lieu de laisser une grande zone vide. */
.bp-mission-header { min-height: 96px; padding: 16px 20px; }
.bp-mission-header small { font-size: 12px; }
.bp-mission-header h2 { margin-top: 5px; font-size: 30px; line-height: 1.08; }
.bp-mission-wallet span { min-height: 52px; padding-inline: 12px; font-size: 15px; }
.bp-mission-wallet span small { font-size: 11px; }
.bp-mission-tabs { min-height: 60px; }
.bp-mission-tabs button { min-height: 59px; font-size: 15px; }
.bp-mission-content { display: grid; }
.bp-quest-section.is-active { min-height: 100%; display: grid; grid-template-rows: auto auto minmax(0,1fr); align-content: stretch; padding: 18px 20px 20px; }
.bp-quest-section-header { margin-bottom: 14px; }
.bp-quest-section-header small { font-size: 12px; }
.bp-quest-section-header h3 { margin-block: 4px; font-size: 28px; line-height: 1.08; }
.bp-quest-section-header p { font-size: 14px; line-height: 1.4; }
.bp-quest-section-header > strong { min-width: 112px; font-size: 22px; }
.bp-quest-section-header > strong b { font-size: 38px; }
.bp-quest-section-header > strong span { font-size: 11px; }
.bp-milestones { min-height: 84px; margin-bottom: 14px; }
.bp-milestones::before { top: 20px; }
.bp-milestones li { min-width: 72px; gap: 7px; }
.bp-milestones li > span { width: 42px; height: 42px; font-size: 15px; }
.bp-milestones li strong { min-height: 32px; padding: 5px 8px; font-size: 14px; }
.bp-milestones li strong small { font-size: 13px; }
.bp-quest-grid { min-height: 0; height: 100%; grid-auto-rows: minmax(205px,1fr); }
.bp-quest-grid > .bp-quest-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bp-quest-grid-count-1 { grid-template-columns: 1fr; grid-auto-rows: minmax(220px,280px); align-content: start; }
.bp-quest-card { min-height: 205px; padding: 18px; }
.bp-quest-card > header { grid-template-columns: 46px minmax(0,1fr) auto; gap: 12px; }
.bp-quest-icon { width: 46px; height: 46px; font-size: 21px; }
.bp-quest-card > header small { font-size: 12px; line-height: 1.25; }
.bp-quest-card h4 { margin-top: 3px; font-size: 17px; line-height: 1.3; }
.bp-quest-rewards { gap: 5px; }
.bp-quest-rewards span { min-height: 29px; padding-inline: 9px; font-size: 14px; }
.bp-quest-card > p { margin: 14px 0; font-size: 15px; line-height: 1.5; }
.bp-quest-progress { height: 9px; }
.bp-quest-card > footer { min-height: 58px; }
.bp-quest-card > footer > span { font-size: 14px; }
.bp-quest-card footer button,.bp-quest-card footer a,.bp-quest-state { min-width: 112px; min-height: 44px; padding-inline: 12px; font-size: 14px; }

@media (min-width:1200px) and (max-width:1499px) {
    .battlepass-command { grid-template-columns: 230px minmax(390px,.85fr) minmax(570px,1.35fr); }
    .bp-pass-lane { grid-template-columns: 190px 44px minmax(0,1fr) 44px; }
    .bp-pass-chip { min-width: 235px; }
    .bp-pass-identity { padding-inline: 15px; }
    .bp-pass-identity h1 { font-size: 27px; }
    .bp-reward-cell.is-featured { grid-template-columns: 105px minmax(0,1fr); }
    .bp-quest-section.is-active { padding-inline: 16px; }
}

@media (max-width:1199px) {
    .battlepass-command { grid-template-rows: auto auto auto; }
    .bp-pass-switcher { height: 118px; }
    .bp-pass-lane { grid-template-columns: 180px 44px minmax(0,1fr) 44px; }
    .bp-quest-grid { height: auto; grid-auto-rows: minmax(220px,auto); }
}

@media (max-width:760px) {
    .bp-pass-switcher { height: 118px; }
    .bp-pass-lane { grid-template-columns: 104px 44px minmax(0,1fr) 44px; }
    .bp-pass-lane > header strong { font-size: 11px; }
    .bp-pass-chip { min-width: 230px; }
    .bp-pass-identity h1 { font-size: 28px; }
    .bp-reward-header h2,.bp-mission-header h2 { font-size: 27px; }
    .bp-quest-section.is-active { padding: 16px 14px 18px; }
    .bp-quest-grid { grid-template-columns: 1fr; }
    .bp-quest-grid > .bp-quest-card:last-child:nth-child(odd) { grid-column: 1; }
    .bp-quest-card { padding: 16px; }
}

/* ========================================================================
   Mouvement arcane — glace, aura et déblocage void
   ======================================================================== */
.battlepass-command-page {
    --bp-void: #9b68ff;
    --bp-void-hot: #e0c7ff;
    --bp-frost: #69d8ff;
    --bp-gold-hot: #ffd76c;
}

/* Entrée de scène : chaque grande zone prend sa place en quelques images. */
.bp-pass-switcher { animation: bp-panel-reveal .55s cubic-bezier(.2,.8,.2,1) backwards; }
.bp-pass-sidebar { animation: bp-panel-reveal .62s cubic-bezier(.2,.8,.2,1) .06s backwards; }
.bp-reward-panel { animation: bp-panel-reveal .66s cubic-bezier(.2,.8,.2,1) .11s backwards; }
.bp-mission-panel { animation: bp-panel-reveal .70s cubic-bezier(.2,.8,.2,1) .16s backwards; }

/* Navigation des pages sans rechargement : le panneau reste en place pendant le flux. */
.bp-reward-panel[data-bp-page-panel] {
    position: relative;
}
.bp-reward-panel.is-page-loading::before {
    content: "";
    position: absolute;
    z-index: 60;
    top: 0;
    left: -36%;
    width: 36%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,transparent,var(--bp-frost),var(--bp-void-hot),transparent);
    box-shadow: 0 0 14px color-mix(in srgb,var(--pass-accent) 68%,transparent);
    animation: bp-page-stream .72s linear infinite;
}
.bp-reward-canvas[data-bp-reward-canvas] { position: relative; isolation: isolate; }
.bp-reward-canvas.is-page-void-out .bp-reward-grid {
    pointer-events: none;
    animation: bp-page-void-grid-out .46s ease-in both;
}
.bp-reward-canvas.is-page-void-in .bp-reward-grid {
    animation: bp-page-void-grid-in .6s ease-out both;
}
.bp-reward-canvas.is-page-void-out .bp-reward-cell {
    pointer-events: none;
    animation: bp-page-void-absorb .38s cubic-bezier(.58,.02,.78,.42) var(--page-void-card-delay,0ms) both;
}
.bp-reward-canvas.is-page-void-in .bp-reward-cell {
    animation: bp-page-void-card .52s cubic-bezier(.16,.78,.24,1) var(--page-void-card-delay,0ms) both;
}
.bp-reward-canvas.is-page-void-settled .bp-reward-cell { animation: none; }
.bp-page-void {
    position: absolute;
    z-index: 70;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,rgba(106,57,183,.16) 0 9%,rgba(10,4,21,.48) 24%,rgba(5,8,15,.17) 52%,transparent 76%);
    animation: bp-page-void-veil-in .42s ease-out both;
}
.bp-page-void::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(186,139,255,.78);
    border-radius: 50%;
    background: radial-gradient(circle,#020106 0 38%,#110824 55%,#51288d 72%,#9c6ae3 78%,rgba(40,17,77,.35) 83%,transparent 86%);
    box-shadow: 0 0 16px 4px rgba(132,80,207,.48),0 0 54px 18px rgba(68,31,127,.28),inset 0 0 18px #000;
    transform: translate(-50%,-50%) scale(.08);
    animation: bp-page-void-core-in .42s cubic-bezier(.12,.72,.2,1) both;
}
.bp-page-void::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(176,131,238,.52);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(137,84,208,.42),inset 0 0 14px rgba(104,76,164,.28);
    transform: translate(-50%,-50%) scale(.16);
    animation: bp-page-void-ring-in .42s ease-out both;
}
.bp-page-void i {
    position: absolute;
    left: calc(50% - var(--page-void-size) / 2);
    top: calc(50% - var(--page-void-size) / 2);
    width: var(--page-void-size);
    height: var(--page-void-size);
    border-radius: 1px 70% 70%;
    background: #b793e8;
    box-shadow: 0 0 7px 1px rgba(141,90,213,.72);
    opacity: 0;
    animation: bp-page-void-particle-in .34s ease-out var(--page-void-delay) both;
}
.bp-page-void.is-releasing { animation: bp-page-void-veil-out .58s ease-out both; }
.bp-page-void.is-releasing::before { animation: bp-page-void-core-out .58s cubic-bezier(.12,.7,.24,1) both; }
.bp-page-void.is-releasing::after { animation: bp-page-void-ring-out .58s cubic-bezier(.1,.7,.2,1) both; }
.bp-page-void.is-releasing i { animation: bp-page-void-particle-out .46s cubic-bezier(.12,.7,.25,1) var(--page-void-delay) both; }
.bp-visually-hidden {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

@keyframes bp-page-stream {
    from { transform: translateX(0); }
    to { transform: translateX(380%); }
}
@keyframes bp-page-void-absorb {
    0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0); filter: blur(0) brightness(1); }
    55% { opacity: .82; transform: translate(var(--page-void-x-mid),var(--page-void-y-mid)) scale(.72) rotate(var(--page-void-tilt-mid)); filter: blur(.6px) brightness(.82) saturate(1.08); }
    100% { opacity: 0; transform: translate(var(--page-void-x),var(--page-void-y)) scale(.035) rotate(var(--page-void-tilt)); filter: blur(3px) brightness(.42) saturate(.82); }
}
@keyframes bp-page-void-grid-out {
    0% { opacity: 1; filter: brightness(1); }
    72% { opacity: .9; filter: brightness(.76); }
    100% { opacity: 0; filter: brightness(.58); }
}
@keyframes bp-page-void-grid-in {
    0% { opacity: .18; filter: brightness(.58); }
    46% { opacity: .82; filter: brightness(.84); }
    100% { opacity: 1; filter: brightness(1); }
}
@keyframes bp-page-void-card {
    0% { opacity: 0; transform: translate(var(--page-void-x),var(--page-void-y)) scale(.035) rotate(var(--page-void-tilt)); filter: blur(3px) brightness(.46); }
    64% { opacity: .9; transform: translate(var(--page-void-x-tail),var(--page-void-y-tail)) scale(.92) rotate(var(--page-void-tilt-tail)); filter: blur(.3px) brightness(.88); }
    100% { opacity: 1; transform: translate(0,0) scale(1) rotate(0); filter: none; }
}
@keyframes bp-page-void-veil-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes bp-page-void-veil-out {
    0% { opacity: 1; }
    62% { opacity: .34; }
    100% { opacity: 0; }
}
@keyframes bp-page-void-core-in {
    from { transform: translate(-50%,-50%) scale(.08) rotate(0); }
    to { transform: translate(-50%,-50%) scale(1) rotate(100deg); }
}
@keyframes bp-page-void-core-out {
    0% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(100deg); }
    48% { opacity: 1; transform: translate(-50%,-50%) scale(1.16) rotate(210deg); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(.05) rotate(360deg); }
}
@keyframes bp-page-void-ring-in {
    from { opacity: 0; transform: translate(-50%,-50%) scale(.16); }
    to { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
}
@keyframes bp-page-void-ring-out {
    0% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(5.2); }
}
@keyframes bp-page-void-particle-in {
    from { opacity: 0; transform: rotate(var(--page-void-angle)) translateX(var(--page-void-distance)) scale(.3); }
    to { opacity: 1; transform: rotate(var(--page-void-angle)) translateX(0) scale(1); }
}
@keyframes bp-page-void-particle-out {
    0% { opacity: 1; transform: rotate(var(--page-void-angle)) translateX(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--page-void-angle)) translateX(var(--page-void-distance)) scale(0); }
}

/* Une énergie discrète habite les titres et les valeurs fortes. */
.bp-pass-identity h1,
.bp-reward-header h2,
.bp-mission-header h2,
.bp-quest-section-header h3 {
    animation: bp-text-aura 4.8s ease-in-out infinite;
}
.bp-reward-copy h3,
.bp-quest-card h4 { text-shadow: 0 0 14px rgba(190,151,255,.10); }
.bp-reward-copy h3 strong {
    color: color-mix(in srgb,var(--rarity) 78%,white);
    text-shadow: 0 0 12px color-mix(in srgb,var(--rarity) 52%,transparent);
    animation: bp-quantity-aura 3.4s ease-in-out infinite;
}
.bp-pass-progress > div:last-child strong,
.bp-sidebar-page > strong,
.bp-header-balance b,
.bp-reward-price strong {
    text-shadow: 0 0 13px color-mix(in srgb,var(--pass-accent) 48%,transparent);
}
.bp-header-balance b { animation: bp-gem-breathe 3.2s ease-in-out infinite; }

/* Le sigil et la sélection active donnent une respiration au pass. */
.bp-sidebar-sigil { animation: bp-sigil-drift 8s ease-in-out infinite; }
.bp-pass-chip.is-active {
    animation: bp-active-pass 3.5s ease-in-out infinite;
}
.bp-progress-ring {
    animation: bp-progress-breathe 4s ease-in-out infinite;
}

/* Reflet de glace sur les grands bandeaux, sans altérer le contraste. */
.bp-reward-header,
.bp-mission-header { position: relative; isolation: isolate; overflow: hidden; }
.bp-reward-header::after,
.bp-mission-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -100% auto -100% -28%;
    width: 24%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg,transparent,rgba(150,218,255,.12),rgba(207,174,255,.13),transparent);
    animation: bp-header-sweep 8s ease-in-out infinite;
    pointer-events: none;
}
.bp-mission-header::after { animation-delay: 1.7s; }

/* Apparition en cascade des butins et des missions. */
.bp-reward-cell {
    isolation: isolate;
    transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease,filter .24s ease;
    animation: bp-loot-arrive .52s cubic-bezier(.16,.84,.28,1.12) backwards;
}
.bp-reward-cell:nth-child(2) { animation-delay: .045s; }
.bp-reward-cell:nth-child(3) { animation-delay: .09s; }
.bp-reward-cell:nth-child(4) { animation-delay: .135s; }
.bp-reward-cell:nth-child(5) { animation-delay: .18s; }
.bp-reward-cell:nth-child(6) { animation-delay: .225s; }
.bp-reward-cell:nth-child(7) { animation-delay: .27s; }
.bp-reward-cell:hover {
    z-index: 4;
    transform: translateY(-3px) scale(1.008);
    border-color: color-mix(in srgb,var(--rarity) 78%,white 8%);
    box-shadow: 0 18px 38px rgba(0,0,0,.32),0 0 25px color-mix(in srgb,var(--rarity) 19%,transparent);
}
.bp-reward-cell::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: -45% auto -45% -42%;
    width: 25%;
    transform: skewX(-20deg) translateX(0);
    background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--rarity) 24%,transparent),rgba(255,255,255,.22),transparent);
    opacity: 0;
    pointer-events: none;
}
.bp-reward-cell:hover::before { animation: bp-card-sheen .8s ease-out; }
.bp-reward-cell.is-premium::before {
    opacity: .7;
    animation: bp-premium-sheen 5.8s ease-in-out infinite;
}
.bp-reward-cell > * { position: relative; z-index: 1; }

/* Orbes et icônes flottent légèrement dans une aura liée à leur rareté. */
.bp-reward-visual { isolation: isolate; }
.bp-reward-visual::before,
.bp-reward-visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.bp-reward-visual::before {
    border: 1px solid color-mix(in srgb,var(--rarity) 42%,transparent);
    box-shadow: inset 0 0 20px color-mix(in srgb,var(--rarity) 13%,transparent),0 0 22px color-mix(in srgb,var(--rarity) 18%,transparent);
    animation: bp-orb-breathe 3.8s ease-in-out infinite;
}
.bp-reward-visual::after {
    width: 88px;
    height: 88px;
    background: conic-gradient(from 20deg,transparent 0 18%,color-mix(in srgb,var(--rarity) 54%,transparent) 22%,transparent 27% 62%,color-mix(in srgb,var(--rarity) 40%,transparent) 66%,transparent 72%);
    -webkit-mask: radial-gradient(circle,transparent 63%,#000 65% 68%,transparent 70%);
    mask: radial-gradient(circle,transparent 63%,#000 65% 68%,transparent 70%);
    opacity: .65;
    animation: bp-orb-rotate 11s linear infinite;
}
.bp-reward-visual > span {
    position: relative;
    z-index: 2;
    display: inline-block;
    animation: bp-icon-float 3.6s ease-in-out infinite;
}
.bp-reward-cell:nth-child(even) .bp-reward-visual > span { animation-delay: -.9s; }
.bp-reward-cell:nth-child(3n) .bp-reward-visual::after { animation-direction: reverse; }

.bp-quest-section.is-active .bp-quest-card {
    animation: bp-quest-arrive .48s cubic-bezier(.2,.8,.2,1) backwards;
}
.bp-quest-section.is-active .bp-quest-card:nth-child(2) { animation-delay: .055s; }
.bp-quest-section.is-active .bp-quest-card:nth-child(3) { animation-delay: .11s; }
.bp-quest-section.is-active .bp-quest-card:nth-child(4) { animation-delay: .165s; }
.bp-quest-card {
    transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.bp-quest-card:hover {
    transform: translateY(-2px);
    border-color: rgba(105,216,255,.34);
    box-shadow: inset 0 0 30px rgba(105,216,255,.035),0 12px 28px rgba(0,0,0,.18);
}
.bp-quest-icon { transition: transform .25s ease,box-shadow .25s ease,color .25s ease; }
.bp-quest-card:hover .bp-quest-icon {
    transform: rotate(-4deg) scale(1.07);
    color: #eadcff;
    box-shadow: 0 0 20px rgba(169,122,255,.24);
}
.bp-quest-progress i { position: relative; overflow: hidden; box-shadow: 0 0 14px rgba(105,216,255,.22); }
.bp-quest-progress i::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
    animation: bp-progress-flow 2.8s ease-in-out infinite;
}
.bp-milestones li.is-complete > span { animation: bp-milestone-pulse 2.8s ease-in-out infinite; }
.bp-mission-tabs button { overflow: hidden; transition: color .2s ease,background-color .2s ease; }
.bp-mission-tabs button::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    transform: translateX(-50%);
    background: #dff7ff;
    box-shadow: 0 0 16px 5px rgba(105,216,255,.48);
    opacity: 0;
    transition: width .35s ease,opacity .35s ease;
}
.bp-mission-tabs button.is-active::before { width: 38%; opacity: .8; }

/* Les actions répondent comme des commandes de jeu. */
.bp-reward-action button,
.bp-reward-action > a,
.bp-pass-sidebar-footer button,
.bp-pass-sidebar-footer > a,
.bp-quest-card footer button,
.bp-quest-card footer a {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.bp-reward-action button:hover,
.bp-reward-action > a:hover,
.bp-quest-card footer button:hover,
.bp-quest-card footer a:hover {
    transform: translateY(-1px);
    filter: brightness(1.16);
    box-shadow: 0 0 20px color-mix(in srgb,var(--rarity,var(--pass-accent)) 25%,transparent);
}
.bp-pass-sidebar-footer button:hover,
.bp-pass-sidebar-footer > a:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 0 24px rgba(255,197,78,.26);
}
.bp-reward-action button:active,
.bp-pass-sidebar-footer button:active,
.bp-quest-card footer button:active { transform: translateY(1px) scale(.985); }
.bp-reward-action button:disabled,
.bp-pass-sidebar-footer button:disabled { cursor: wait; filter: saturate(.8); }

/* Implosion void avant débit, puis onde de matérialisation après confirmation. */
.bp-reward-cell.is-void-unlocking {
    z-index: 30;
    overflow: visible;
    pointer-events: none;
    animation: bp-void-fold .82s cubic-bezier(.55,.02,.62,.98) forwards;
}
.bp-reward-cell.is-void-unlocking::after,
.bp-reward-cell.is-void-arrival::after {
    content: "";
    position: absolute;
    z-index: 22;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    border: 2px solid var(--bp-void-hot);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 18px var(--bp-void),inset 0 0 16px var(--bp-void);
    pointer-events: none;
    animation: bp-void-ring .78s cubic-bezier(.12,.72,.3,1) forwards;
}
.bp-reward-cell.is-void-arrival {
    z-index: 30;
    animation: bp-void-materialize 1.25s cubic-bezier(.15,.82,.2,1) both;
}
.bp-void-burst {
    position: absolute !important;
    z-index: 40 !important;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.bp-void-burst::before {
    content: "";
    position: absolute;
    left: -13px;
    top: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2e8ff;
    box-shadow: 0 0 16px 6px var(--bp-void),0 0 46px 18px rgba(113,63,212,.48);
    animation: bp-void-core .82s ease-out forwards;
}
.bp-void-burst::after {
    content: "";
    position: absolute;
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    border: 2px solid #d7baff;
    border-radius: 50%;
    box-shadow: 0 0 18px var(--bp-void);
    animation: bp-void-shockwave .9s cubic-bezier(.1,.7,.2,1) forwards;
}
.bp-void-burst i {
    position: absolute;
    left: calc(var(--void-size) / -2);
    top: calc(var(--void-size) / -2);
    width: var(--void-size);
    height: var(--void-size);
    border-radius: 1px 70% 70%;
    background: var(--bp-void-hot);
    box-shadow: 0 0 10px 2px var(--bp-void);
    animation: bp-void-particle .72s cubic-bezier(.12,.72,.25,1) var(--void-delay) forwards;
}
.bp-void-burst.is-gold::before { background: #fff8d4; box-shadow: 0 0 16px 6px #f5b83c,0 0 46px 18px rgba(245,184,60,.38); }
.bp-void-burst.is-gold::after { border-color: #ffe7a2; box-shadow: 0 0 18px #f5b83c; }
.bp-void-burst.is-gold i { background: #fff3bd; box-shadow: 0 0 10px 2px #f5b83c; }
.bp-pass-sidebar-footer form { position: relative; }
.bp-pass-sidebar.is-pass-purchasing .bp-pass-identity,
.bp-pass-sidebar.is-pass-purchasing .bp-pass-progress,
.bp-pass-sidebar.is-pass-purchasing .bp-sidebar-page { animation: bp-purchase-wash .82s ease-in forwards; }

@keyframes bp-panel-reveal {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes bp-text-aura {
    0%,100% { text-shadow: 0 0 0 transparent,0 0 16px rgba(155,104,255,.08); }
    50% { text-shadow: 0 0 8px rgba(225,205,255,.14),0 0 24px rgba(105,216,255,.16); }
}
@keyframes bp-quantity-aura {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}
@keyframes bp-gem-breathe {
    0%,100% { filter: brightness(1); text-shadow: 0 0 8px currentColor; }
    50% { filter: brightness(1.25); text-shadow: 0 0 16px currentColor; }
}
@keyframes bp-sigil-drift {
    0%,100% { transform: translateY(0) rotate(-2deg) scale(.98); opacity: .68; }
    50% { transform: translateY(-8px) rotate(2deg) scale(1.04); opacity: .9; }
}
@keyframes bp-active-pass {
    0%,100% { box-shadow: inset 3px 0 var(--nav-accent),0 0 13px color-mix(in srgb,var(--nav-accent) 12%,transparent); }
    50% { box-shadow: inset 3px 0 var(--nav-accent),0 0 24px color-mix(in srgb,var(--nav-accent) 27%,transparent); }
}
@keyframes bp-progress-breathe {
    0%,100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 9px color-mix(in srgb,var(--pass-accent) 35%,transparent)); }
}
@keyframes bp-header-sweep {
    0%,54% { left: -30%; opacity: 0; }
    62% { opacity: 1; }
    78%,100% { left: 116%; opacity: 0; }
}
@keyframes bp-loot-arrive {
    from { opacity: 0; transform: translateY(12px) scale(.97); filter: saturate(.45); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}
@keyframes bp-card-sheen {
    from { left: -42%; opacity: 0; }
    25% { opacity: .9; }
    to { left: 122%; opacity: 0; }
}
@keyframes bp-premium-sheen {
    0%,65% { left: -42%; opacity: 0; }
    72% { opacity: .72; }
    86%,100% { left: 122%; opacity: 0; }
}
@keyframes bp-orb-breathe {
    0%,100% { transform: translate(-50%,-50%) scale(.9); opacity: .36; }
    50% { transform: translate(-50%,-50%) scale(1.08); opacity: .78; }
}
@keyframes bp-orb-rotate {
    to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes bp-icon-float {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.025); }
}
@keyframes bp-quest-arrive {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes bp-progress-flow {
    0%,35% { transform: translateX(-110%); opacity: 0; }
    55% { opacity: .8; }
    80%,100% { transform: translateX(110%); opacity: 0; }
}
@keyframes bp-milestone-pulse {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.24); }
}
@keyframes bp-void-fold {
    0% { transform: scale(1); filter: brightness(1); opacity: 1; }
    35% { transform: scale(1.035); filter: brightness(1.5) saturate(1.35); opacity: 1; }
    100% { transform: scale(.78); filter: brightness(.45) saturate(1.6) blur(2px); opacity: .18; }
}
@keyframes bp-void-ring {
    from { width: 28px; height: 28px; opacity: 1; }
    to { width: min(220px,88%); height: min(220px,88%); opacity: 0; }
}
@keyframes bp-void-core {
    0% { transform: scale(.2); opacity: 0; }
    26% { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(.08); opacity: 0; }
}
@keyframes bp-void-shockwave {
    from { transform: scale(.2); opacity: 1; }
    to { transform: scale(5.4); opacity: 0; }
}
@keyframes bp-void-particle {
    0% { transform: rotate(var(--void-angle)) translateX(0) scale(.2); opacity: 0; }
    22% { opacity: 1; }
    100% { transform: rotate(var(--void-angle)) translateX(var(--void-distance)) scale(0); opacity: 0; }
}
@keyframes bp-void-materialize {
    0% { transform: scale(.86); filter: brightness(2) saturate(1.5); box-shadow: 0 0 52px rgba(155,104,255,.48); }
    35% { transform: scale(1.025); filter: brightness(1.35) saturate(1.25); }
    100% { transform: scale(1); filter: brightness(1) saturate(.7); box-shadow: 0 12px 28px rgba(2,6,12,.22); }
}
@keyframes bp-purchase-wash {
    0% { filter: brightness(1); opacity: 1; }
    45% { filter: brightness(1.35) sepia(.18); opacity: .92; }
    100% { filter: brightness(.62) sepia(.35); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .bp-sitebar::before,
    .bp-sitebar::after,
    .bp-server-state i { animation: none !important; }
    .bp-sitebar-nav a:hover,
    .bp-account:hover,
    .bp-discord-login:hover { transform: none; }
    .battlepass-command *,
    .battlepass-command *::before,
    .battlepass-command *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .bp-reward-cell:hover,.bp-quest-card:hover { transform: none; }
    .bp-void-burst { display: none !important; }
}

/* ========================================================================
   Images de récompense — cadre natif 34 × 34, sans symbole temporaire
   ======================================================================== */
.bp-reward-visual {
    min-width: 0;
    min-height: 66px;
}
.bp-reward-image-slot {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    overflow: hidden;
    border-radius: 7px;
    background: color-mix(in srgb,var(--rarity) 7%,rgba(8,14,23,.72));
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rarity) 22%,transparent);
}
.bp-reward-image-slot:empty {
    background:
        linear-gradient(135deg,transparent 46%,color-mix(in srgb,var(--rarity) 14%,transparent) 47% 53%,transparent 54%),
        color-mix(in srgb,var(--rarity) 6%,rgba(8,14,23,.70));
}
.bp-reward-image-slot img {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
    image-rendering: auto;
}

/* Seule l’aura vit : le futur visuel de l’objet reste parfaitement fixe. */
.bp-reward-visual > .bp-reward-image-slot {
    animation: none;
    transform: none;
}
.bp-reward-cell:nth-child(even) .bp-reward-visual > .bp-reward-image-slot { animation-delay: 0s; }
.bp-reward-visual::before {
    width: 64px;
    height: 64px;
}
.bp-reward-visual::after {
    width: 78px;
    height: 78px;
}
.bp-reward-cell.is-featured .bp-reward-visual::before {
    width: 70px;
    height: 70px;
}
.bp-reward-cell.is-featured .bp-reward-visual::after {
    width: 86px;
    height: 86px;
}

.claim-icon {
    width: 48px;
    height: 48px;
    overflow: hidden;
}
.claim-icon:empty {
    background:
        linear-gradient(135deg,transparent 46%,rgba(199,173,255,.14) 47% 53%,transparent 54%),
        rgba(169,122,255,.06);
}
.claim-icon img {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
}

/* Tablette : trois récompenses par ligne, boutons et textes toujours tactiles. */
@media (min-width:761px) and (max-width:1199px) {
    .bp-reward-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .bp-reward-cell.is-featured {
        grid-column: span 2;
        grid-template-columns: 112px minmax(0,1fr);
    }
    .bp-reward-image-slot,
    .bp-reward-image-slot img { width: 34px; height: 34px; }
}

/* Smartphone : une carte par ligne, hiérarchie horizontale plus compacte. */
@media (max-width:760px) {
    .bp-reward-canvas { padding: 10px; }
    .bp-reward-grid { grid-template-columns: 1fr; gap: 10px; }
    .bp-reward-cell,
    .bp-reward-cell.is-featured {
        min-height: 156px;
        grid-column: 1;
        grid-template-columns: 86px minmax(0,1fr);
        grid-template-rows: minmax(96px,1fr) 58px;
    }
    .bp-reward-cell .bp-reward-visual,
    .bp-reward-cell.is-featured .bp-reward-visual {
        grid-column: 1;
        grid-row: 1;
        min-height: 96px;
    }
    .bp-reward-cell .bp-reward-copy,
    .bp-reward-cell.is-featured .bp-reward-copy {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 14px 12px;
    }
    .bp-reward-cell .bp-reward-action,
    .bp-reward-cell.is-featured .bp-reward-action {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .bp-reward-badges { font-size: 12px; }
    .bp-reward-copy h3 { font-size: 16px; }
    .bp-reward-action button,.bp-reward-action > a,.bp-reward-state { min-height: 44px; font-size: 14px; }
}

@media (max-width:420px) {
    .bp-reward-cell,
    .bp-reward-cell.is-featured { grid-template-columns: 74px minmax(0,1fr); }
    .bp-reward-cell .bp-reward-copy,
    .bp-reward-cell.is-featured .bp-reward-copy { padding-inline: 10px; }
    .bp-reward-action { grid-template-columns: 62px minmax(0,1fr); }
    .bp-reward-copy h3 { font-size: 15px; }
}

/* Correctifs responsive finaux : ces règles restent en dernier pour ne pas
   être écrasées par la grille desktop définie plus haut. */
@media (min-width:761px) and (max-width:1199px) {
    .battlepass-command {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 70px);
        grid-template-columns: clamp(210px,26vw,245px) minmax(0,1fr);
        grid-template-rows: 118px auto auto;
        overflow: visible;
    }
    .bp-pass-switcher {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
        grid-row: 1;
        overflow: hidden;
    }
    .bp-pass-lane { min-width: 0; grid-template-columns: 176px 44px minmax(0,1fr) 44px; }
    .bp-pass-scroll { min-width: 0; }
    .bp-pass-sidebar {
        grid-column: 1;
        grid-row: 2 / 4;
    }
    .bp-reward-panel {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }
    .bp-mission-panel {
        grid-column: 2;
        grid-row: 3;
        min-width: 0;
    }
}

@media (max-width:760px) {
    .battlepass-command {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 60px);
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: 118px auto auto auto;
        overflow: visible;
    }
    .bp-pass-switcher {
        width: 100%;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
        overflow: hidden;
    }
    .bp-pass-lane {
        min-width: 0;
        grid-template-columns: 104px 44px minmax(0,1fr) 44px;
        overflow: hidden;
    }
    .bp-pass-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
    .bp-pass-chip { min-width: min(230px,calc(100vw - 156px)); }
    .bp-pass-sidebar {
        position: static;
        width: 100%;
        height: auto;
        grid-column: 1;
        grid-row: 2;
    }
    .bp-reward-panel {
        min-height: 0;
        grid-column: 1;
        grid-row: 3;
        grid-template-rows: auto auto auto;
        overflow: visible;
    }
    .bp-reward-workspace {
        grid-template-columns: minmax(0,1fr);
        overflow: visible;
    }
    .bp-page-rail {
        min-width: 0;
        min-height: 52px;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 10px;
        border-right: 0;
        border-bottom: 1px solid rgba(231,238,250,.16);
    }
    .bp-page-rail a { width: 38px; min-width: 38px; min-height: 38px; }
    .bp-reward-canvas { overflow: visible; }
    .bp-mission-panel {
        min-height: 0;
        grid-column: 1;
        grid-row: 4;
        grid-template-rows: auto auto auto;
        overflow: visible;
    }
    .bp-mission-content { overflow: visible; }
    .bp-quest-section.is-active { min-height: 0; }
}

/* Repère clavier commun et très visible sur les fonds sombres. */
.battlepass-command a:focus-visible,
.battlepass-command button:focus-visible,
.bp-sitebar a:focus-visible {
    outline: 3px solid #69d8ff;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #0b1320,0 0 18px rgba(105,216,255,.55);
}

/* ========================================================================
   Densité finale — butins plein panneau, missions compactes sur 2 colonnes
   ======================================================================== */

/* Les missions ne sont jamais étirées pour remplir le vide. La grille garde
   deux colonnes et chaque rangée prend uniquement la hauteur de son contenu. */
.bp-quest-section.is-active {
    min-height: 0;
    grid-template-rows: auto auto auto;
    align-content: start;
}
.bp-quest-grid,
.bp-quest-grid-count-1 {
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: auto;
    align-content: start;
}
.bp-quest-grid > .bp-quest-card:last-child:nth-child(odd) { grid-column: auto; }
.bp-quest-card {
    min-height: 0;
    grid-template-rows: auto auto auto auto;
    padding: 14px;
}
.bp-quest-card > header { grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; }
.bp-quest-icon { width: 42px; height: 42px; font-size: 19px; }
.bp-quest-card > p { margin: 10px 0; font-size: 14px; line-height: 1.4; }
.bp-quest-card > footer { min-height: 50px; }

/* PC : les sept récompenses forment une rangée vedette puis trois rangées
   doubles. Toutes les rangées partagent exactement la hauteur disponible. */
@media (min-width:1200px) {
    .bp-reward-canvas { overflow: hidden; }
    .bp-reward-grid {
        height: 100%;
        min-height: 0;
        grid-auto-rows: minmax(0,1fr);
        align-content: stretch;
    }
    .bp-reward-cell,
    .bp-reward-cell.is-featured {
        height: 100%;
        min-height: 0;
        grid-template-columns: 76px minmax(0,1fr);
        grid-template-rows: minmax(0,1fr) 54px;
    }
    .bp-reward-cell.is-featured { grid-template-columns: 104px minmax(0,1fr); }
    .bp-reward-cell .bp-reward-visual,
    .bp-reward-cell.is-featured .bp-reward-visual {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
    }
    .bp-reward-cell .bp-reward-copy,
    .bp-reward-cell.is-featured .bp-reward-copy {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        padding: 8px 10px;
    }
    .bp-reward-cell .bp-reward-action,
    .bp-reward-cell.is-featured .bp-reward-action {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 54px;
        padding-block: 5px;
    }
    .bp-reward-badges { font-size: 11px; }
    .bp-reward-copy h3 { margin-top: 5px; font-size: 15px; line-height: 1.28; }
}

/* Tablette : deux colonnes de missions, sans étirement ni carte pleine largeur. */
@media (min-width:761px) and (max-width:1199px) {
    .bp-quest-grid,
    .bp-quest-grid-count-1 {
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-auto-rows: auto;
    }
    .bp-quest-card { min-height: 0; }
}

/* Smartphone : deux colonnes conservées. Le contenu interne se réorganise
   verticalement pour garder les textes lisibles et les actions à 44 px. */
@media (max-width:760px) {
    .bp-quest-grid,
    .bp-quest-grid-count-1 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .bp-quest-grid > .bp-quest-card:last-child:nth-child(odd) { grid-column: auto; }
    .bp-quest-card { min-width: 0; padding: 12px; }
    .bp-quest-card > header {
        grid-template-columns: 36px minmax(0,1fr);
        align-items: start;
        gap: 8px;
    }
    .bp-quest-icon { width: 36px; height: 36px; font-size: 17px; }
    .bp-quest-rewards {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 4px;
    }
    .bp-quest-rewards span { min-height: 28px; flex: 1 1 auto; }
    .bp-quest-card h4 { font-size: 15px; overflow-wrap: anywhere; }
    .bp-quest-card > p { margin-block: 9px; font-size: 14px; }
    .bp-quest-card > footer {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding-top: 9px;
    }
    .bp-quest-card footer form,
    .bp-quest-card footer button,
    .bp-quest-card footer a,
    .bp-quest-state { width: 100%; min-width: 0; }
}

@media (max-width:420px) {
    .bp-quest-section.is-active { padding-inline: 10px; }
    .bp-quest-card { padding: 10px; }
    .bp-quest-card > header { grid-template-columns: 32px minmax(0,1fr); gap: 7px; }
    .bp-quest-icon { width: 32px; height: 32px; font-size: 15px; }
    .bp-quest-card > header small { font-size: 10px; }
    .bp-quest-card h4 { font-size: 14px; }
    .bp-quest-card > p { font-size: 13px; }
}

/* ========================================================================
   Fluidité finale — transitions courtes, peinture contenue et tablette
   ======================================================================== */
.bp-reward-canvas,
.bp-mission-content { overscroll-behavior: contain; scrollbar-gutter: stable; }
.bp-reward-cell { contain: layout paint; }

/* Les textes restent nets : les mouvements continus sont réservés aux orbes,
   aux jauges et aux reflets qui les supportent sans recalcul de mise en page. */
.bp-pass-identity h1,
.bp-reward-header h2,
.bp-mission-header h2,
.bp-quest-section-header h3,
.bp-reward-copy h3 strong { animation: none; }
.bp-reward-cell.is-premium::before { opacity: .22; animation: none; }

/* Le changement de page conserve l'effet void mais répond immédiatement. */
.bp-reward-canvas.is-page-void-out .bp-reward-grid { animation-duration: .18s; }
.bp-reward-canvas.is-page-void-in .bp-reward-grid { animation-duration: .26s; }
.bp-reward-canvas.is-page-void-out .bp-reward-cell { animation-duration: .16s; }
.bp-reward-canvas.is-page-void-in .bp-reward-cell { animation-duration: .24s; }
.bp-page-void,
.bp-page-void::before,
.bp-page-void::after { animation-duration: .18s; }
.bp-page-void i { animation-duration: .16s; }
.bp-page-void.is-releasing,
.bp-page-void.is-releasing::before,
.bp-page-void.is-releasing::after { animation-duration: .28s; }
.bp-page-void.is-releasing i { animation-duration: .24s; }

/* Une tablette tenue verticalement suit un flux simple au lieu de comprimer
   le contenu entre une barre latérale fixe et trois petites cartes. */
@media (min-width:761px) and (max-width:900px) {
    .battlepass-command {
        height: auto;
        min-height: calc(100vh - 70px);
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: 118px auto auto auto;
        overflow: visible;
    }
    .bp-pass-switcher { grid-column:1; grid-row:1; }
    .bp-pass-sidebar {
        position: static;
        width: 100%;
        height: auto;
        grid-column: 1;
        grid-row: 2;
        overflow: visible;
    }
    .bp-sidebar-sigil { min-height: 72px; }
    .bp-reward-panel {
        min-height: 0;
        grid-column: 1;
        grid-row: 3;
        grid-template-rows: auto auto auto;
        overflow: visible;
    }
    .bp-reward-workspace { grid-template-columns:minmax(0,1fr); overflow:visible; }
    .bp-page-rail { min-height:52px; flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:6px 10px; border-right:0; border-bottom:1px solid rgba(231,238,250,.16); }
    .bp-page-rail a { width:38px; min-width:38px; min-height:38px; }
    .bp-reward-canvas { overflow:visible; }
    .bp-reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .bp-reward-cell.is-featured { grid-column:span 2; }
    .bp-mission-panel {
        min-height: 0;
        grid-column: 1;
        grid-row: 4;
        grid-template-rows: auto auto auto;
        overflow: visible;
    }
    .bp-mission-content { overflow:visible; }
}

@media (max-width:600px) {
    .bp-quest-grid,
    .bp-quest-grid-count-1 { grid-template-columns:1fr; }
    .bp-reward-grid { grid-template-columns:1fr; }
    .bp-reward-cell.is-featured { grid-column:1; }
}

@media (hover:none) {
    .bp-reward-cell:hover,
    .bp-quest-card:hover { transform:none; }
}