/* Season-only frames: thin metal bands, small cuts, no reward artwork yet. */
.app[data-route="SEASON"] { background:#030b14; }
.app[data-route="SEASON"] > main { padding:0; background:url('/app/client/assets/ui/season-pass/season-bg-owner.png') 68% top / cover no-repeat; }
.app.desktop[data-route="SEASON"] > main { height:calc(100vh - 86 * var(--u)); overflow:auto; }
.sp-screen { --sp-slot-width:104px; --sp-premium-height:190px; --sp-free-height:160px; --sp-rail-height:32px; --sp-slot-gap:14px; min-width:0; max-width:none; margin:0; padding:0 24px 16px; color:#e7f5fc; }
.sp-screen :is(h1,h2,p) { margin:0; }
.sp-hero { min-height:292px; padding:36px 10px 24px; display:flex; flex-direction:column; align-items:flex-start; text-shadow:0 2px 6px #000,0 0 16px #000; }
.sp-hero > p { color:#61e7ff; font-weight:800; font-size:clamp(13px,1.1vw,20px); letter-spacing:.08em; text-transform:uppercase; }
.sp-hero h1 { max-width:740px; margin-top:10px; color:#f3faff; text-transform:uppercase; font-weight:850; font-size:clamp(34px,3.1vw,58px); letter-spacing:.015em; line-height:1.1; }
.sp-countdown { display:flex; align-items:center; gap:9px; margin-top:28px; color:#aed9e7; font-size:15px; line-height:1.7; }
.sp-countdown strong { color:#f1faff; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-clock-space { width:24px; height:24px; flex:none; }
.sp-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,300px); gap:20px; align-items:start; }
.sp-main-column { display:flex; flex-direction:column; gap:10px; min-width:0; }
.sp-frame { --sp-cut:12px; --sp-bottom-cut:8px; --sp-band:5px; --sp-inner-cut:8px; --sp-inner-bottom-cut:4px; --sp-shape:polygon(var(--sp-cut) 0,calc(100% - var(--sp-cut)) 0,100% var(--sp-cut),100% calc(100% - var(--sp-bottom-cut)),calc(100% - var(--sp-bottom-cut)) 100%,var(--sp-bottom-cut) 100%,0 calc(100% - var(--sp-bottom-cut)),0 var(--sp-cut)); position:relative; min-width:0; isolation:isolate; }
.sp-frame > :is(.sp-rim,.sp-metal,.sp-glass) { position:absolute; pointer-events:none; }
.sp-rim { inset:0; clip-path:var(--sp-shape); background:linear-gradient(115deg,#305261,#9bc7d1 8%,#e5f8ff 13%,#285c70 27%,#187991 50%,#d7f9ff 76%,#3a6f81 91%,#244450); }
.sp-metal { inset:1px; clip-path:var(--sp-shape); background:linear-gradient(115deg,#0e1b24 0%,#638693 9%,#c1d4dc 10.5%,#294958 13%,#14242d 28%,#1a303c 49%,#7899a5 61%,#e3f4fa 62%,#2c4d5b 64%,#152630 80%,#5f818e 94%,#152630 100%); }
.sp-glass { inset:var(--sp-band); clip-path:polygon(var(--sp-inner-cut) 0,calc(100% - var(--sp-inner-cut)) 0,100% var(--sp-inner-cut),100% calc(100% - var(--sp-inner-bottom-cut)),calc(100% - var(--sp-inner-bottom-cut)) 100%,var(--sp-inner-bottom-cut) 100%,0 calc(100% - var(--sp-inner-bottom-cut)),0 var(--sp-inner-cut)); background:linear-gradient(130deg,#051620,#030d16); box-shadow:inset 0 0 0 1px #234959; }
.sp-body { position:relative; min-width:0; }
.sp-frame::after { content:""; position:absolute; top:1px; left:calc(var(--sp-cut) + 14px); right:calc(var(--sp-cut) + 14px); height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,#6fd2e4 12%,#e6ffff 15%,transparent 27%,transparent 65%,#68cee2 85%,transparent); }
.sp-gold > .sp-rim { background:linear-gradient(115deg,#957336,#ffdf87 9%,#fff7c9 15%,#947337 28%,#6d5121 50%,#ffe395 76%,#997431 91%,#735624); }
.sp-gold > .sp-metal { background:linear-gradient(115deg,#302710,#b19247 9%,#f4df9e 10.5%,#685022 13%,#241e12 28%,#463619 49%,#ae934d 61%,#fff2b1 62%,#735828 64%,#2a2113 80%,#ac8b44 94%,#302511 100%); }
.sp-gold > .sp-glass { background:linear-gradient(130deg,#18180f,#080f17); box-shadow:inset 0 0 0 1px #6e5426; }
.sp-gold::after { background:linear-gradient(90deg,transparent,#ddb75d 12%,#fff5c9 15%,transparent 27%,transparent 65%,#edc970 85%,transparent); }
.sp-progress-group { --sp-progress-height:70px; display:grid; grid-template-columns:74px minmax(0,1fr); min-width:0; }
.sp-progress { --sp-band:3px; --sp-cut:8px; --sp-bottom-cut:6px; --sp-shape:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%); min-height:var(--sp-progress-height); }
.sp-progress > .sp-glass { clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%); }
.sp-progress > .sp-body { min-height:var(--sp-progress-height); display:flex; align-items:center; padding:10px 18px; }
.sp-level-badge { --sp-cut:15px; --sp-bottom-cut:15px; --sp-band:3px; --sp-shape:polygon(15px 0,100% 0,100% 100%,15px 100%,0 calc(100% - 15px),0 15px); height:var(--sp-progress-height); }
.sp-level-badge > .sp-glass { right:0; clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 calc(100% - 13px),0 13px); }
.sp-level-badge > .sp-body { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:6px; }
.sp-level-badge strong { color:#effcff; font-size:28px; line-height:1.1; }
.sp-level-badge small { color:#50e6ff; text-transform:uppercase; font-weight:800; font-size:9px; }
.sp-progress-copy { width:100%; min-width:0; }
.sp-progress-caption { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px; }
.sp-progress-caption strong { font-size:16px; color:#e5f8ff; }
.sp-progress-caption > span { font-size:11px; color:#a7c5d4; }
.sp-meter { height:9px; overflow:hidden; padding:1px; border:1px solid #28667c; background:#01080eaa; }
.sp-meter > span { display:block; height:100%; background:linear-gradient(90deg,#36ebf5,#30b8ed); box-shadow:0 0 8px #21dfff55; }
.sp-board { position:relative; display:grid; grid-template-columns:148px minmax(0,1fr); column-gap:16px; min-width:0; }
.sp-track-band { position:absolute; left:0; right:0; z-index:0; }
.sp-premium-band { top:0; height:var(--sp-premium-height); }
.sp-free-band { top:calc(var(--sp-premium-height) + var(--sp-rail-height)); height:var(--sp-free-height); }
.sp-track-labels { position:relative; z-index:1; display:grid; grid-template-rows:var(--sp-premium-height) var(--sp-rail-height) var(--sp-free-height); }
.sp-track-label { --sp-cut:12px; --sp-bottom-cut:8px; --sp-inner-cut:8px; --sp-inner-bottom-cut:4px; --sp-band:4px; }
.sp-track-label > .sp-body { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:7px; padding:12px 10px; }
.sp-track-label h2 { font-size:15px; line-height:1.25; text-transform:uppercase; letter-spacing:.025em; color:#f1faff; }
.sp-track-label.sp-gold h2 { color:#ffdf82; }
.sp-pass-emblem { display:block; width:72px; height:72px; flex:none; object-fit:contain; }
.sp-premium-status { color:#ffdc82; font-size:10px; }
.sp-track-label:has(.sp-upgrade) > .sp-body { padding-bottom:54px; }
.sp-upgrade { position:absolute; bottom:9px; left:9px; width:calc(100% - 18px); min-height:38px; padding:8px 5px; border:0; border-top:1px solid #ffe9ac; border-bottom:1px solid #765a23; background:linear-gradient(120deg,#fff0b7,#dca946); color:#281e06; text-transform:uppercase; font-size:11px; font-weight:850; line-height:1.2; clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 6px); opacity:1!important; }
.sp-upgrade:disabled { color:#715a2d; cursor:default; }
.sp-upgrade:focus-visible { outline:2px solid #fff6d4; outline-offset:-4px; }
.sp-reward-viewport { position:relative; z-index:1; min-width:0; margin-right:14px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.sp-reward-viewport::-webkit-scrollbar { display:none; }
.sp-reward-viewport:focus-visible { outline:1px solid #79efff; outline-offset:3px; }
.sp-level-columns { display:grid; grid-auto-flow:column; grid-auto-columns:var(--sp-slot-width); gap:var(--sp-slot-gap); width:max-content; }
.sp-level-column { position:relative; display:grid; grid-template-rows:var(--sp-premium-height) var(--sp-rail-height) var(--sp-free-height); min-width:0; }
.sp-reward-slot { --sp-cut:5px; --sp-bottom-cut:5px; --sp-band:2px; --sp-inner-cut:3px; --sp-inner-bottom-cut:3px; align-self:center; height:calc(100% - 34px); }
.sp-reward-slot > .sp-glass { background:linear-gradient(140deg,#071b26,#030d15); box-shadow:inset 0 0 0 1px #2f65704d; }
.sp-level-column::before { content:""; position:absolute; top:calc(var(--sp-premium-height) + var(--sp-rail-height) / 2 - 1px); left:calc(var(--sp-slot-gap) / -2); right:calc(var(--sp-slot-gap) / -2); height:2px; background:#348299; }
.sp-milestone { width:28px; height:26px; align-self:center; justify-self:center; display:grid; place-items:center; position:relative; color:#c3e6f4; font-size:12px; font-weight:800; }
.sp-milestone svg { position:absolute; inset:0; width:100%; height:100%; fill:#05121c; stroke:#3b8da7; stroke-width:1.3; }
.sp-milestone > span { position:relative; }
.sp-level-column.is-current .sp-milestone { color:#ecffff; }
.sp-level-column.is-current .sp-milestone svg { fill:#0a394c; stroke:#72e6ff; filter:drop-shadow(0 0 3px #2fbcdd88); }
.sp-navigation { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:start; gap:16px; padding:2px 0 0; }
.sp-arrow { display:block; width:44px; height:38px; min-height:0; padding:0; border:0; background:transparent; color:#81e7ff; cursor:pointer; }
.sp-arrow svg { display:block; width:100%; height:100%; overflow:visible; }
.sp-arrow-next svg { transform:scaleX(-1); }
.sp-arrow-outline { fill:#073040b8; stroke:#6fcbdf; stroke-width:1; }
.sp-arrow-light { fill:none; stroke:#7ae7ff; stroke-width:2; filter:drop-shadow(0 0 3px #26d4ffaa); }
.sp-arrow:disabled { opacity:.3; cursor:default; }
.sp-arrow:hover:not(:disabled) { color:#fff; filter:brightness(1.4); }
.sp-arrow:focus-visible { outline:1px solid #9deeff; outline-offset:2px; }
.sp-nav-center { min-width:0; padding-top:5px; }
.sp-position { --sp-thumb-width:16%; appearance:none; display:block; width:100%; height:16px; min-height:0; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.sp-position::-webkit-slider-runnable-track { height:5px; border:1px solid #347389; background:#05101bc9; }
.sp-position::-webkit-slider-thumb { appearance:none; width:var(--sp-thumb-width); min-width:28px; height:7px; margin-top:-2px; border:1px solid #45ddf0; border-radius:2px; background:linear-gradient(90deg,#40ebf7,#27b7df); box-shadow:0 0 6px #28dbf755; }
.sp-position::-moz-range-track { height:3px; border:1px solid #347389; background:#05101bc9; }
.sp-position::-moz-range-thumb { width:var(--sp-thumb-width); min-width:28px; height:5px; border:1px solid #45ddf0; border-radius:2px; background:#32d9ee; }
.sp-position:focus-visible { outline:1px solid #9deeff; outline-offset:3px; }
.sp-pages { display:flex; justify-content:center; align-items:center; gap:8px; min-height:20px; }
.sp-page { width:16px; height:20px; min-height:0; padding:0; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; }
.sp-page::before { content:""; width:5px; height:5px; border-radius:50%; background:#527284; }
.sp-page.is-current::before { background:#5feaff; box-shadow:0 0 7px #24dafa; }
.sp-page:hover::before { background:#b9f4ff; }
.sp-page:focus-visible { outline:1px solid #9deeff; outline-offset:1px; }
.sp-page-gap { color:#557185; font-size:10px; }
.sp-featured { --sp-cut:14px; --sp-bottom-cut:8px; --sp-shape:polygon(14px 0,64% 0,calc(64% + 14px) 14px,calc(100% - 14px) 14px,100% 28px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 14px); min-height:506px; }
.sp-featured > .sp-glass { clip-path:polygon(10px 0,calc(64% - 2px) 0,calc(64% + 12px) 14px,calc(100% - 10px) 14px,100% 24px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 10px); }
.sp-featured::after { right:39%; }
.sp-featured > .sp-body { padding:34px 20px 22px; display:flex; flex-direction:column; align-items:center; gap:16px; min-height:inherit; text-align:center; }
.sp-featured h2 { align-self:stretch; color:#78eaff; font-size:15px; line-height:1.3; text-transform:uppercase; letter-spacing:.035em; }
.sp-featured-slot { --sp-cut:7px; --sp-bottom-cut:7px; --sp-inner-cut:4px; --sp-inner-bottom-cut:4px; --sp-band:3px; width:100%; max-width:238px; aspect-ratio:3/4; }
.sp-featured p { color:#a6c1cf; font-size:12px; line-height:1.6; }
.sp-featured-claim { margin-top:auto; align-self:stretch; min-height:42px; padding:8px 10px; border:1px solid #52707e; background:linear-gradient(130deg,#182a34,#0a1721); color:#7995a5; font-size:12px; font-weight:800; text-transform:uppercase; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); opacity:1!important; cursor:default; }
@media(max-width:1500px) {
  .sp-screen { --sp-slot-width:84px; --sp-premium-height:166px; --sp-free-height:138px; --sp-rail-height:30px; --sp-slot-gap:12px; padding:0 18px 14px; }
  .sp-hero { min-height:236px; padding:24px 8px 20px; }
  .sp-hero h1 { font-size:38px; }
  .sp-workspace { grid-template-columns:minmax(0,1fr) 245px; gap:16px; }
  .sp-countdown { margin-top:24px; font-size:13px; }
  .sp-progress-group { --sp-progress-height:58px; grid-template-columns:64px minmax(0,1fr); }
  .sp-progress > .sp-body { padding:8px 16px; }
  .sp-level-badge strong { font-size:24px; }
  .sp-board { grid-template-columns:130px minmax(0,1fr); column-gap:14px; }
  .sp-track-label h2 { font-size:13px; }
  .sp-pass-emblem { width:62px; height:62px; }
  .sp-track-label > .sp-body { gap:6px; padding:10px; }
  .sp-track-label:has(.sp-upgrade) > .sp-body { padding-bottom:50px; }
  .sp-upgrade { min-height:34px; font-size:10px; }
  .sp-reward-slot { height:calc(100% - 28px); }
  .sp-featured { min-height:450px; }
  .sp-featured-slot { max-width:198px; }
  .sp-featured > .sp-body { padding:32px 16px 20px; gap:14px; }
  .sp-featured h2 { font-size:13px; }
  .sp-featured-claim { font-size:11px; min-height:40px; }
}
@media(max-width:1000px) {
  .sp-workspace { grid-template-columns:minmax(0,1fr); }
  .sp-featured { min-height:0; width:100%; max-width:500px; justify-self:center; }
  .sp-featured > .sp-body { padding:34px 24px 24px; }
  .sp-featured-slot { max-width:220px; }
}
@media(max-width:700px) {
  .app[data-route="SEASON"] > main { background-position:74% top; }
  .sp-screen { --sp-slot-width:78px; --sp-premium-height:172px; --sp-free-height:144px; --sp-rail-height:30px; --sp-slot-gap:10px; padding:0 12px 20px; }
  .sp-hero { min-height:260px; padding:26px 4px 20px; }
  .sp-hero h1 { max-width:270px; font-size:33px; }
  .sp-hero > p { font-size:11px; }
  .sp-main-column { gap:12px; }
  .sp-countdown { margin-top:22px; font-size:11px; gap:6px; }
  .sp-clock-space { width:20px; height:20px; }
  .sp-countdown > span:last-child { display:flex; flex-direction:column; align-items:flex-start; }
  .sp-progress-group { --sp-progress-height:62px; grid-template-columns:62px minmax(0,1fr); }
  .sp-progress > .sp-body { padding:8px 14px; }
  .sp-level-badge strong { font-size:23px; }
  .sp-level-badge small { font-size:8px; }
  .sp-progress-caption { align-items:flex-start; flex-direction:column; gap:2px; margin-bottom:5px; }
  .sp-progress-caption strong { font-size:14px; }
  .sp-progress-caption > span { font-size:9px; }
  .sp-board { grid-template-columns:100px minmax(0,1fr); column-gap:10px; }
  .sp-track-label h2 { font-size:11px; }
  .sp-track-label > .sp-body { padding:10px 8px; }
  .sp-pass-emblem { width:64px; height:64px; }
  .sp-upgrade { font-size:9px; min-height:34px; }
  .sp-reward-viewport { margin-right:10px; }
  .sp-navigation { grid-template-columns:34px minmax(0,1fr) 34px; gap:10px; }
  .sp-arrow { width:34px; }
  .sp-pages { gap:5px; }
  .sp-featured > .sp-body { padding:34px 24px 24px; }
}