/* Season Pass (pass/) */

#app { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ps-soon { text-align: center; }
.ps-soon h2 { margin: 6px 0 8px; }
.ps-big-art { width: 72px; height: 72px; }
.ps-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ps-h h2 { margin: 0; font-size: 1.3rem; }
.ps-h .muted { font-size: .88rem; white-space: nowrap; }

.ps-bar { display: block; height: 10px; border-radius: 99px; background: var(--line); border: 1.5px solid var(--ink); overflow: hidden; }
.ps-bar.big { height: 16px; border-width: 2px; }
.ps-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }

.ps-head { display: flex; align-items: center; gap: 16px; }
.ps-head [data-claimall] { flex: none; }
.ps-lvbig { flex: none; width: 84px; height: 84px; border-radius: 20px; border: 3px solid var(--ink); background: var(--accent); color: #1d1b16;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 var(--ink); }
.ps-lvbig .muted { color: #1d1b16; font-size: .8rem; }
.ps-lvbig b { font: 700 2.2rem/1 var(--font-display); }
.ps-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-head-top { display: flex; justify-content: space-between; gap: 10px; }
.ps-head-top b { font: 700 1.2rem/1.2 var(--font-display); }

.ps-q { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.ps-q + .ps-q { margin-top: 8px; }
.ps-q-art { flex: none; width: 40px; height: 40px; }
.ps-q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ps-q-main .muted { font-size: .82rem; }
.ps-q.ready { box-shadow: inset 0 0 0 2px var(--good); }
.ps-q.ready .ps-bar i, .ps-q.claimed .ps-bar i { background: var(--good); }
.ps-q.claimed { opacity: .6; }
.ps-xp { flex: none; font: 700 .9rem/1 var(--font-display); color: var(--muted); }
.ps-got { flex: none; font-weight: 800; color: var(--good); white-space: nowrap; }

/* the reward row scrolls sideways, level 1 on the left */
.ps-track-wrap { position: relative; margin: 0 -6px; }
.ps-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 6px 12px; scrollbar-width: thin;
  overscroll-behavior-x: contain; }
.ps-lv { position: relative; flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding-bottom: 2px; }
.ps-lv-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 10px; border-radius: 16px;
  background: var(--soft); border: 2px solid var(--line); text-align: center; min-height: 200px; }
/* the level line under the row: filled up to your level */
.ps-lv-mark { position: relative; display: flex; justify-content: center; }
.ps-lv-mark::before { content: ""; position: absolute; left: -5px; right: -5px; top: 13px; height: 4px; background: var(--line); }
.ps-lv:first-child .ps-lv-mark::before { left: 50%; }
.ps-lv:last-child .ps-lv-mark::before { right: 50%; }
.ps-lv.ready .ps-lv-mark::before, .ps-lv.claimed .ps-lv-mark::before { background: var(--accent); }
.ps-lv-xp { margin-top: -4px; text-align: center; font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ps-lv-xp.on { color: var(--good); }
.ps-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ps-total b { font: 700 1.05rem/1.2 var(--font-display); }
.ps-total .muted { font-size: .88rem; }
.ps-lv.big .ps-lv-box { border-color: var(--ink); }
.ps-lv.final { flex-basis: 190px; }
.ps-lv.final .ps-lv-box { border-color: var(--ink); background: color-mix(in srgb, var(--accent) 30%, var(--soft)); }
.ps-lv.locked .ps-lv-r { opacity: .6; }
.ps-lv.ready .ps-lv-box { border-color: var(--good); box-shadow: 0 0 0 2px var(--good); }
.ps-lv.claimed .ps-lv-r { opacity: .5; }
.ps-lv-n { position: relative; z-index: 1; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 99px; text-align: center;
  border: 2px solid var(--ink); background: var(--card); font: 700 .85rem/26px var(--font-display); color: var(--ink); }
.ps-lv-n.on { background: var(--accent); color: #1d1b16; }
.ps-lv-r { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ps-rw { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .9rem; line-height: 1.15; }
.ps-rw .muted { font-size: .72rem; }
.ps-rw-art { width: 46px; height: 46px; }
.ps-lv.final .ps-rw-art { width: 52px; height: 52px; }
.ps-lv-foot { min-height: 30px; display: flex; align-items: center; }
.ps-lv .btn-small { padding: 5px 14px 6px; font-size: .85rem; }
.ps-arrow { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -24px; border-radius: 99px; border: 2px solid var(--ink);
  background: var(--card, #fff); color: var(--ink); font: 700 1.4rem/1 var(--font-display); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.ps-arrow.left { left: -10px; }
.ps-arrow.right { right: -10px; }
.ps-gotlist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.ps-gotrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--soft); font-weight: 700; }
.ps-gotrow .ps-rw-art { flex: none; width: 36px; height: 36px; }

@media (max-width: 640px) {
  .ps-head { gap: 12px; flex-wrap: wrap; }
  .ps-head [data-claimall] { width: 100%; }
  .ps-lvbig { width: 68px; height: 68px; }
  .ps-lvbig b { font-size: 1.8rem; }
  .ps-q { gap: 10px; padding: 10px; }
  .ps-q-art { width: 32px; height: 32px; }
  .ps-q > .btn { padding: 6px 10px 7px; font-size: .82rem; }
  .ps-lv { flex-basis: 128px; }
  .ps-lv-box { min-height: 184px; }
  .ps-lv.final { flex-basis: 160px; }
  .ps-rw-art { width: 40px; height: 40px; }
  .ps-arrow { display: none; }
}

/* Premium Pass: a gold row under the free one, and the card to buy it */
.ps-lv .ps-lv-box.ps-prem { flex: 1; min-height: 170px; background: linear-gradient(180deg, #fff1b8, #ffe08a); border-color: #e0b43a; box-shadow: none; }
.ps-lv .ps-prem .ps-lv-r { opacity: 1; }
.ps-lv .ps-prem.locked .ps-lv-r { opacity: .75; }
.ps-lv .ps-lv-box.ps-prem.ready { border-color: var(--good); box-shadow: 0 0 0 2px var(--good); }
.ps-lv .ps-prem.claimed .ps-lv-r { opacity: .5; }
.ps-lv-box.ps-prem .muted { color: #6b5520; }
.ps-lv-box.ps-prem b { color: #2b2100; }
.ps-lock { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 800; color: #6b5520; }
.ps-odds { font-size: .74rem; font-weight: 800; }
.ps-premcard { background: linear-gradient(180deg, #fff6d6, var(--card) 160px); border-color: #e8c252; }
.ps-shop { display: flex; flex-direction: column; gap: 8px; }
.ps-buy { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.ps-buy .ps-q-main .muted { font-size: .84rem; }
.btn.ps-gold { flex: none; background: linear-gradient(180deg, #ffe27a, #f5c542); color: #2b2100; font-weight: 800; }
.btn.ps-gold:disabled { opacity: .55; cursor: default; }
.ps-resets { margin: 10px 0 0; font-size: .85rem; }
/* Season 1 or the Halloween Pass: two plain boxes, the picked one has a thick border. Hover only makes a box bigger. */
.ps-pick > .muted { margin: 0 0 10px; }
.ps-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ps-pickbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; border: 2px solid var(--line, #d8d2c4); border-radius: 14px;
  background: var(--soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: transform .12s;
}
.ps-pickbtn:hover:not(:disabled) { transform: scale(1.03); }
.ps-pickbtn.on { border: 3px solid var(--ink); cursor: default; }
.ps-pickbtn b { font-size: 1.05rem; }
.ps-pickwhat { margin-top: 4px; font-weight: 800; font-size: .85rem; }
.ps-pickbtn.on .ps-pickwhat { color: var(--good); }
@media (max-width: 520px) { .ps-picks { grid-template-columns: 1fr; } }
html[data-dark] .ps-lv .ps-lv-box.ps-prem { background: linear-gradient(180deg, #4a3c14, #3a3018); border-color: #8a6d1f; }
html[data-dark] .ps-lv-box.ps-prem .muted, html[data-dark] .ps-lock { color: #e8d49a; }
html[data-dark] .ps-lv-box.ps-prem b { color: #fff1c2; }
html[data-dark] .ps-premcard { background: linear-gradient(180deg, #3a3018, var(--card) 160px); border-color: #8a6d1f; }
.ps-gotrow .ps-openit { flex: none; margin-left: auto; }
.ps-gotbtns { display: flex; flex-wrap: wrap; gap: 10px; }