/* Floralia — ซีซั่นพาส (season pass, 2026-10-19: js/seasonpass.js). The first tab of the 🛒 ร้านแพ็ก (the user: "เอาซีซั่นพาส
   เข้าใส่ร้านค้าแพ็ก"): drawn in the shop's body (#packshop .pk-body.pk-t-season), in its obsidian + gold, the season's violet
   as its accent. One page: the step and the bar on top, the season prize and the unlock buttons on the left, the three rows
   of 60 steps, one big รับทั้งหมด below. Numbers crisp, no soft glow round text (a 1px dark ring at most). */
#packshop .pk-body.pk-t-season { padding: 0; overflow: hidden; display: flex; }
#seasonpass { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; user-select: none; font-family: 'Mali', sans-serif; color: #f2ead6;
  background: radial-gradient(ellipse 80% 70% at 60% 40%, rgba(58, 30, 84, 0.65) 0%, rgba(21, 15, 28, 0.4) 58%, transparent 100%); animation: spIn 0.2s ease-out both; }
@keyframes spIn { from { opacity: 0; } to { opacity: 1; } }
#seasonpass[hidden], #seasonpass [hidden] { display: none !important; }
#seasonpass button { font-family: 'Mali', sans-serif; color: inherit; }
#seasonpass .sp-stage { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
#seasonpass .ring, #seasonpass .sp-slot b, #seasonpass .sp-bar span { text-shadow: 1px 0 #120d16, -1px 0 #120d16, 0 1px #120d16, 0 -1px #120d16; }

/* ---- top: the season banner, time left, money, exit */
#seasonpass .sp-top { position: relative; flex: none; height: 70px; display: flex; align-items: center; gap: 18px; padding: 0 14px 0 18px;
  background: linear-gradient(90deg, rgba(10, 8, 14, 0.96) 0%, rgba(10, 8, 14, 0.75) 45%, rgba(10, 8, 14, 0.15) 100%), url(../assets/icons_season/sp_banner.jpg) right 30% / cover no-repeat;
  border-bottom: 1px solid rgba(217, 164, 67, 0.55); }
#seasonpass .sp-title { display: flex; align-items: center; gap: 12px; flex: none; }
#seasonpass .sp-title img { width: 58px; height: 58px; object-fit: contain; }
#seasonpass .sp-title b { display: block; font: 800 28px/1.05 Mali, sans-serif; color: #f4dfa8; }
#seasonpass .sp-title small { display: block; font: 700 16px Mali, sans-serif; color: #d6b5ff; }
#seasonpass .sp-left { margin-left: auto; font: 600 16px Mali, sans-serif; color: #e2d6bc; padding: 6px 14px; border-radius: 999px; background: rgba(8, 6, 12, 0.72); box-shadow: inset 0 0 0 1px rgba(214, 181, 255, 0.35); }
#seasonpass .sp-left b { color: #fff3d0; font-variant-numeric: tabular-nums; }

/* ---- the step badge, the points bar, check-in, buy steps */
#seasonpass .sp-lv { flex: none; display: grid; grid-template-columns: 96px 1fr auto auto; gap: 16px; align-items: center; padding: 10px 18px; background: rgba(0, 0, 0, 0.32); border-bottom: 1px solid rgba(217, 164, 67, 0.3); }
#seasonpass .sp-badge { width: 92px; height: 80px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(#ffe08a, #b8781e); display: grid; place-items: center; }
#seasonpass .sp-badge div { width: 84px; height: 72px; clip-path: inherit; background: linear-gradient(#3a2550, #160d22); display: grid; place-items: center; text-align: center; line-height: 1; }
#seasonpass .sp-badge small { display: block; font: 600 13px Mali, sans-serif; color: #e8cf98; }
#seasonpass .sp-badge b { font: 800 32px Fredoka, Mali, sans-serif; color: #fff3d0; }
#seasonpass .sp-barw small { display: block; margin-top: 5px; font: 600 14px Mali, sans-serif; color: #b9a983; }
#seasonpass .sp-bar { position: relative; height: 30px; border-radius: 999px; background: #0d0a12; box-shadow: inset 0 0 0 2px #c9a24a; overflow: hidden; }
#seasonpass .sp-bar i { position: absolute; inset: 2px auto 2px 2px; border-radius: 999px; background: linear-gradient(90deg, #8d55d8, #d6b5ff 70%, #ffe08a); max-width: calc(100% - 4px); }
#seasonpass .sp-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px Mali, sans-serif; color: #fff; }
#seasonpass .sp-ci, #seasonpass .sp-buystep { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-radius: 12px; cursor: pointer; font: 700 16px Mali, sans-serif; white-space: nowrap; }
#seasonpass .sp-ci { border: 2px solid #f0dcff; background: linear-gradient(#b98cf0, #6b3bb2); color: #fff; box-shadow: 0 3px 0 #3d1d6e; }
#seasonpass .sp-ci img { width: 30px; height: 30px; object-fit: contain; }
#seasonpass .sp-ci.done, #seasonpass .sp-ci:disabled { border-color: rgba(214, 181, 255, 0.35); background: rgba(255, 255, 255, 0.05); color: #b9a8cf; box-shadow: none; cursor: default; }
#seasonpass .sp-buystep { flex-direction: column; justify-content: center; gap: 0; border: 2px solid #c9a24a; background: linear-gradient(#33406e, #232c52); color: #f5f0dc; line-height: 1.15; }
#seasonpass .sp-buystep small { display: flex; align-items: center; gap: 3px; font: 700 14px Fredoka, Mali, sans-serif; color: #a8ecff; }
#seasonpass .sp-buystep small img { width: 18px; height: 18px; }
#seasonpass .sp-buystep:disabled { opacity: 0.45; cursor: default; }

/* ---- tabs */
#seasonpass .sp-tabs { flex: none; display: flex; gap: 8px; padding: 10px 18px 0; }
#seasonpass .sp-tabs button { position: relative; padding: 8px 22px; border: 0; border-radius: 10px 10px 0 0; cursor: pointer; font: 700 17px Mali, sans-serif; color: #c3b596; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.22); }
#seasonpass .sp-tabs button.on { color: #2a1a06; background: linear-gradient(#f6d684, #c9912f); box-shadow: inset 0 0 0 1px #ffe9a8; }
#seasonpass .sp-tabs i { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #e2402f; color: #fff; font: 700 13px/22px Fredoka, sans-serif; font-style: normal; box-shadow: 0 0 0 2px #150f1c; }

/* ---- the body */
#seasonpass .sp-body { flex: 1; min-height: 0; display: flex; border-top: 1px solid rgba(217, 164, 67, 0.4); }
#seasonpass .sp-trackv { flex: 1; min-width: 0; display: flex; }
#seasonpass .sp-show { flex: none; width: 340px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 14px 12px; text-align: center; border-right: 1px solid rgba(217, 164, 67, 0.35);
  background: radial-gradient(circle at 50% 30%, rgba(176, 107, 255, 0.35), transparent 62%), rgba(0, 0, 0, 0.25); }
#seasonpass .sp-lbl { font: 700 14px Mali, sans-serif; color: #1b1406; background: #ffd98a; border-radius: 999px; padding: 1px 12px; }
#seasonpass .sp-art { height: 170px; width: 100%; display: grid; place-items: center; }
#seasonpass .sp-art img { max-width: 100%; max-height: 170px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); animation: spFloat 3.2s ease-in-out infinite; }
@keyframes spFloat { 50% { transform: translateY(-6px); } }
#seasonpass .sp-show > b { font: 800 22px Mali, sans-serif; color: #fff3d0; }
#seasonpass .sp-show > small { font: 600 13.5px Mali, sans-serif; color: #c9b8a0; }
#seasonpass .sp-more { display: flex; gap: 8px; margin-top: 6px; }
#seasonpass .sp-unls { margin-top: auto; width: 100%; display: grid; gap: 8px; }
#seasonpass .sp-unl { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; cursor: pointer; text-align: left; font: 700 16px Mali, sans-serif; }
#seasonpass .sp-unl img { width: 38px; height: 38px; object-fit: contain; }
#seasonpass .sp-unl small { display: block; font: 600 12.5px Mali, sans-serif; opacity: 0.9; }
#seasonpass .sp-unl b { display: flex; align-items: center; gap: 3px; font: 700 18px Fredoka, Mali, sans-serif; }
#seasonpass .sp-unl b img { width: 22px; height: 22px; }
#seasonpass .sp-unl.prem { border: 2px solid #fff0b8; background: linear-gradient(#ffe08a, #d99a2b); color: #2a1a05; box-shadow: 0 3px 0 #7a4f10; }
#seasonpass .sp-unl.elite { border: 2px solid #f0dcff; background: linear-gradient(#c79bff, #7a3fd0); color: #fff; box-shadow: 0 3px 0 #3d1d6e; }
#seasonpass .sp-unl.god { border: 2px solid #ffd27a; background: linear-gradient(#ff7a86, #b81e35); color: #fff; box-shadow: 0 3px 0 #5a0d1a, 0 0 14px rgba(255, 90, 106, 0.45); }
#seasonpass .sp-unl.god img { width: 40px; height: 40px; object-fit: cover; object-position: top; border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
#seasonpass .sp-unl:hover { filter: brightness(1.08); }
/* (a short window - a laptop with the browser's own bars, 2026-10-26 "ทำไมแพ็กโดนบัง": the left column ran under the footer and
   hid the unlock buttons; it shrinks its picture and gaps, and scrolls if it still does not fit) */
#seasonpass .sp-show { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
@media (max-height: 1150px) {
  #seasonpass .sp-show { gap: 4px; padding: 8px 12px; }
  #seasonpass .sp-art { height: 96px; } #seasonpass .sp-art img { max-height: 96px; }
  #seasonpass .sp-show > b { font-size: 18px; }
  #seasonpass .sp-show > small { font-size: 12px; }
  #seasonpass .sp-more { margin-top: 2px; }
  #seasonpass .sp-unls { gap: 6px; margin-top: 6px; }
  #seasonpass .sp-unl { padding: 5px 10px; font-size: 15px; }
  #seasonpass .sp-unl img { width: 32px; height: 32px; }
  #seasonpass .sp-unl small { font-size: 11.5px; line-height: 1.25; }
}
@media (max-height: 760px) {
  #seasonpass .sp-art { display: none; }
}
#seasonpass .sp-owned.god { color: #ffe1a8; background: rgba(255, 90, 106, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.6); }
#seasonpass .sp-owned { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; font: 700 16px Mali, sans-serif; color: #f2dcff; background: rgba(170, 110, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(214, 181, 255, 0.5); }
#seasonpass .sp-owned img { width: 32px; height: 32px; }
#seasonpass .sp-owned.dim { color: #a99bb8; background: rgba(255, 255, 255, 0.04); }

/* the rows: labels, then the steps side by side (scrolls sideways) */
#seasonpass .sp-trk { flex: 1; min-width: 0; display: flex; padding: 10px 0 8px; }
#seasonpass .sp-labs { flex: none; width: 104px; padding-top: 44px; display: flex; flex-direction: column; }
#seasonpass .sp-rl { height: 104px; margin-bottom: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px 0 0 14px; font: 700 16px Mali, sans-serif; }
#seasonpass .sp-rl img { width: 34px; height: 34px; object-fit: contain; }
#seasonpass .sp-rl small { font: 600 12.5px Mali, sans-serif; opacity: 0.9; }
#seasonpass .sp-rl.f { color: #d9f0cc; background: linear-gradient(90deg, rgba(110, 170, 100, 0.32), transparent); }
#seasonpass .sp-rl.p { color: #ffe7a8; background: linear-gradient(90deg, rgba(224, 168, 69, 0.36), transparent); }
#seasonpass .sp-rl.e { color: #f2dcff; background: linear-gradient(90deg, rgba(170, 110, 255, 0.42), transparent); }
#seasonpass .sp-rl.lock img { filter: grayscale(0.6) brightness(0.8); }
#seasonpass .sp-scroll { flex: 1; min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 14px 6px 2px; scrollbar-width: thin; scrollbar-color: #c9a24a #1a1420; }
#seasonpass .sp-col { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; position: relative; }
#seasonpass .sp-n { height: 26px; font: 700 16px Fredoka, Mali, sans-serif; color: #c9bba0; }
#seasonpass .sp-col.ms .sp-n { color: #ffd98a; }
#seasonpass .sp-col.next .sp-n { color: #1b1406; background: #d6b5ff; border-radius: 999px; padding: 0 10px; }
#seasonpass .sp-tick { width: 100%; height: 8px; margin: 4px 0 6px; background: #0d0a12; border-top: 1px solid #5a4520; border-bottom: 1px solid #5a4520; }
#seasonpass .sp-col.got .sp-tick { background: linear-gradient(90deg, #8d55d8, #ffe08a); }
#seasonpass .sp-col.ms::before { content: ''; position: absolute; inset: 22px 3px 0; border-radius: 12px; background: linear-gradient(rgba(255, 217, 138, 0.1), rgba(255, 217, 138, 0.02)); box-shadow: inset 0 0 0 2px rgba(255, 217, 138, 0.45); pointer-events: none; }
#seasonpass .sp-cell { position: relative; width: 84px; height: 104px; margin-bottom: 6px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 12px; }
#seasonpass .sp-cell:hover { background: rgba(255, 255, 255, 0.05); }
#seasonpass .sp-cell.lock .sp-slot img { filter: brightness(0.42) saturate(0.6); }
#seasonpass .sp-cell.lock::after { content: '🔒'; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: 22px; pointer-events: none; }
#seasonpass .sp-cell.taken .sp-slot img { filter: brightness(0.5); }
#seasonpass .sp-cell.taken::after { content: '✓'; position: absolute; right: 6px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: #3fae6a; box-shadow: 0 0 0 2px #e6ffe9; color: #fff; font: 700 15px/24px Fredoka, sans-serif; text-align: center; pointer-events: none; }
#seasonpass .sp-cell.ready { background: radial-gradient(circle, rgba(255, 217, 138, 0.28), transparent 70%); }
#seasonpass .sp-cell.ready .sp-slot { animation: spPulse 1.4s ease-in-out infinite; }
@keyframes spPulse { 50% { transform: translateY(-3px); box-shadow: 0 0 0 3px #ffe08a; } }
#seasonpass .sp-rd { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 0 10px; border-radius: 999px; background: linear-gradient(#ffe08a, #d99a2b); color: #2a1a05; font: 800 13px Mali, sans-serif; pointer-events: none; }
#seasonpass .sp-col.bonus { flex-basis: 110px; }
#seasonpass .sp-col.bonus small { font: 600 12.5px/1.3 Mali, sans-serif; color: #c9b8a0; text-align: center; }

/* an item tile on the game's MIR4 plates */
#seasonpass .sp-slot { position: relative; display: inline-block; flex: none; width: 66px; height: 66px; border-radius: 12px; background: center / 100% 100% no-repeat; }
#seasonpass .sp-slot.g0 { background-image: url(../assets/ui_slot_mir4/slot_g0.png); }
#seasonpass .sp-slot.g1 { background-image: url(../assets/ui_slot_mir4/slot_g1.png); }
#seasonpass .sp-slot.g2 { background-image: url(../assets/ui_slot_mir4/slot_g2.png); }
#seasonpass .sp-slot.g3 { background-image: url(../assets/ui_slot_mir4/slot_g3.png); }
#seasonpass .sp-slot.g4 { background-image: url(../assets/ui_slot_mir4/slot_g4.png); }
#seasonpass .sp-slot.g5 { background-image: url(../assets/ui_slot_mir4/slot_g5.png); }
#seasonpass .sp-slot > img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
#seasonpass .sp-slot.wide > img { inset: 18% 2%; width: 96%; height: 64%; }
#seasonpass .sp-slot.ttl > img { inset: 32% 3%; width: 94%; height: 36%; object-fit: fill; }
#seasonpass .sp-slot > b { position: absolute; right: 4px; bottom: 1px; font: 700 14px Fredoka, Mali, sans-serif; color: #fff; }
#seasonpass .sp-slot > em { position: absolute; left: 3px; top: 2px; font: 700 10.5px Mali, sans-serif; font-style: normal; padding: 0 5px; border-radius: 6px; background: #8d55d8; color: #fff; }
#seasonpass .sp-slot .sp-plus { position: absolute; left: -4px; bottom: -4px; font: 700 11px Fredoka, Mali, sans-serif; font-style: normal; padding: 0 5px; border-radius: 999px; background: #17121c; box-shadow: inset 0 0 0 1px #c9a24a; color: #ffe7a8; }
#seasonpass .sp-slot.big { width: 74px; height: 74px; }
#seasonpass .sp-slot.sm { width: 52px; height: 52px; border-radius: 10px; }

/* ---- the missions view: two lists of equal one-line rows */
#seasonpass .sp-mis { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 14px 18px; overflow-y: auto; }
#seasonpass .sp-mis h3 { margin: 0 0 8px; font: 800 19px Mali, sans-serif; color: #f4dfa8; }
#seasonpass .sp-mis h3 small { margin-left: 8px; font: 600 13.5px Mali, sans-serif; color: #b9a983; }
#seasonpass .sp-rows { display: grid; gap: 6px; }
#seasonpass .sp-row { display: grid; grid-template-columns: 1fr 150px 92px; gap: 10px; align-items: center; min-height: 46px; padding: 4px 8px 4px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.18); font: 600 15.5px Mali, sans-serif; }
#seasonpass .sp-row.ready { box-shadow: inset 0 0 0 2px #ffd98a; background: rgba(255, 217, 138, 0.08); }
#seasonpass .sp-row.got { opacity: 0.6; }
#seasonpass .sp-row.ci { margin-top: 6px; }
#seasonpass .sp-prog { position: relative; height: 20px; border-radius: 999px; background: #0d0a12; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.4); overflow: hidden; }
#seasonpass .sp-prog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8d55d8, #d6b5ff); }
#seasonpass .sp-prog em { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px Fredoka, Mali, sans-serif; font-style: normal; color: #fff; text-shadow: 1px 0 #120d16, -1px 0 #120d16, 0 1px #120d16, 0 -1px #120d16; }
#seasonpass .sp-cnt { text-align: right; font: 700 15px Fredoka, Mali, sans-serif; color: #e2d6bc; font-variant-numeric: tabular-nums; }
#seasonpass .sp-st { justify-self: end; font: 700 14px Mali, sans-serif; font-style: normal; color: #9fe0b0; }
#seasonpass .sp-st.dim { color: #d6b5ff; }
#seasonpass .sp-go { justify-self: end; padding: 6px 12px; border: 2px solid #fff0b8; border-radius: 10px; background: linear-gradient(#ffe08a, #d99a2b); color: #2a1a05; font: 800 14px Mali, sans-serif; cursor: pointer; }

/* ---- the footer: the one big action */
#seasonpass .sp-foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: rgba(0, 0, 0, 0.5); border-top: 1px solid rgba(217, 164, 67, 0.5); }
#seasonpass .sp-note { flex: 1; font: 600 16px Mali, sans-serif; color: #e3d6b6; }
#seasonpass .sp-note b { color: #ffd98a; }
#seasonpass .sp-all { min-width: 320px; height: 58px; padding: 0 24px; border: 3px solid #fff0b8; border-radius: 16px; background: linear-gradient(#ffe08a, #d99a2b); color: #2a1a05; font: 800 21px Mali, sans-serif; cursor: pointer; box-shadow: 0 4px 0 #7a4f10; }
#seasonpass .sp-all i { display: inline-block; min-width: 30px; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #e2402f; color: #fff; font: 700 17px/28px Fredoka, sans-serif; font-style: normal; }
#seasonpass .sp-all:disabled { border-color: rgba(217, 164, 67, 0.35); background: rgba(255, 255, 255, 0.05); color: #a9997c; font-size: 16px; box-shadow: none; cursor: default; }

/* ---- pop-ups */
#seasonpass .sp-pop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(6, 4, 9, 0.62); }
#seasonpass .sp-card { position: relative; width: 470px; max-height: 88%; overflow-y: auto; padding: 18px 20px 18px; border-radius: 18px; background: linear-gradient(#251a33, #120d18); box-shadow: inset 0 0 0 2px #c9a24a, 0 18px 40px rgba(0, 0, 0, 0.6); animation: spIn 0.15s ease-out both; }
#seasonpass .sp-card.pick { width: 760px; }
#seasonpass .sp-card h4 { margin: 0 34px 12px 0; font: 800 21px Mali, sans-serif; color: #f4dfa8; }
#seasonpass .sp-card h4 small { margin-left: 8px; font: 600 14px Mali, sans-serif; color: #b9a983; }
#seasonpass .sp-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #f2ead6; font: 700 17px Mali, sans-serif; cursor: pointer; }
#seasonpass .sp-list { display: grid; gap: 6px; margin-bottom: 14px; }
#seasonpass .sp-li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 4px 12px; padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
#seasonpass .sp-li .sp-slot { width: 52px; height: 52px; grid-row: span 2; }
#seasonpass .sp-li > b { font: 700 16px Mali, sans-serif; color: #fff3d6; }
#seasonpass .sp-li > span { font: 700 16px Fredoka, Mali, sans-serif; color: #ffe7a8; }
#seasonpass .sp-li[data-sp] { cursor: pointer; }
#seasonpass .sp-li[data-sp]:hover { background: rgba(255, 255, 255, 0.1); }
#seasonpass .sp-cbx { all: unset; cursor: pointer; display: inline-flex; }
#seasonpass .sp-cbx:hover .sp-slot { filter: brightness(1.15); }
#seasonpass .sp-cbnote { margin: 0 0 10px; text-align: center; font: 600 14px Mali, sans-serif; color: #c9b8a0; }
#seasonpass .sp-cbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
#seasonpass .sp-cb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
#seasonpass .sp-cb img { width: 150px; height: 150px; object-fit: contain; }
#seasonpass .sp-cb b { font: 700 16px Mali, sans-serif; color: #fff3d6; text-align: center; }
#seasonpass .sp-cb small { font: 600 13px Mali, sans-serif; color: #ff9ec0; }
#seasonpass .sp-cb.have small { color: #8be07a; }
#seasonpass .sp-cb ul { list-style: none; margin: 4px 0 0; padding: 0; font: 600 13px Mali, sans-serif; color: #d8f0c8; text-align: center; }
#seasonpass .sp-li > small { grid-column: 2 / 4; font: 600 13px Mali, sans-serif; color: #c9b8a0; }
#seasonpass .sp-li.big { background: rgba(176, 107, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(214, 181, 255, 0.45); }
#seasonpass .sp-gets { margin: 0 0 12px; padding-left: 20px; font: 600 15.5px/1.6 Mali, sans-serif; color: #e8dcc0; }
#seasonpass .sp-cost { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); font: 600 15px Mali, sans-serif; }
#seasonpass .sp-cost b { display: flex; align-items: center; gap: 4px; font: 800 24px Fredoka, Mali, sans-serif; color: #a8ecff; }
#seasonpass .sp-cost b img { width: 26px; height: 26px; }
#seasonpass .sp-cost b.short { color: #ff8a7a; }
#seasonpass .sp-cost small { margin-left: auto; color: #b9a983; }
#seasonpass .sp-ok { width: 100%; height: 52px; border: 3px solid #fff0b8; border-radius: 14px; background: linear-gradient(#ffe08a, #d99a2b); color: #2a1a05; font: 800 19px Mali, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #7a4f10; display: flex; align-items: center; justify-content: center; gap: 6px; }
#seasonpass .sp-ok img { width: 22px; height: 22px; }
#seasonpass .sp-ok:disabled { border-color: rgba(217, 164, 67, 0.35); background: rgba(255, 255, 255, 0.06); color: #a9997c; box-shadow: none; cursor: default; }
#seasonpass .sp-num { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 6px; }
#seasonpass .sp-num button { min-width: 52px; height: 44px; border: 2px solid #c9a24a; border-radius: 10px; background: linear-gradient(#33406e, #232c52); font: 700 18px Fredoka, Mali, sans-serif; cursor: pointer; }
#seasonpass .sp-num b { min-width: 70px; text-align: center; font: 800 30px Fredoka, Mali, sans-serif; color: #fff3d0; }
#seasonpass .sp-onel { display: block; margin-bottom: 10px; text-align: center; font: 600 14px Mali, sans-serif; color: #c9b8a0; }
#seasonpass .sp-ptabs { display: flex; gap: 6px; margin-bottom: 10px; }
#seasonpass .sp-ptabs button { padding: 6px 16px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); color: #c3b596; font: 700 15px Mali, sans-serif; cursor: pointer; }
#seasonpass .sp-ptabs button.on { color: #2a1a06; background: linear-gradient(#f6d684, #c9912f); }
#seasonpass .sp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 380px; overflow-y: auto; margin-bottom: 14px; padding: 2px; }
#seasonpass .sp-pk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.2); cursor: pointer; }
#seasonpass .sp-pk.on { box-shadow: inset 0 0 0 3px #ffd98a; background: rgba(255, 217, 138, 0.12); }
#seasonpass .sp-pk .sp-slot { width: 76px; height: 76px; }
#seasonpass .sp-pk b { font: 700 13.5px/1.2 Mali, sans-serif; color: #f2ead6; text-align: center; }
#seasonpass .sp-empty { grid-column: 1 / -1; text-align: center; color: #b9a983; font: 600 15px Mali, sans-serif; }
#seasonpass .sp-say { position: absolute; left: 50%; bottom: 96px; z-index: 6; transform: translateX(-50%); padding: 10px 22px; border-radius: 14px; background: rgba(20, 14, 28, 0.95); box-shadow: inset 0 0 0 2px #d6b5ff; font: 700 17px Mali, sans-serif; color: #fff3d6; }
#seasonpass .sp-say.in { animation: spIn 0.18s ease-out both; }

/* ---- a phone: the prize card on top, smaller cells */
#seasonpass.sp-narrow .sp-top { height: 54px; gap: 8px; padding: 0 10px; }
#seasonpass.sp-narrow .sp-title img { width: 40px; height: 40px; } #seasonpass.sp-narrow .sp-title b { font-size: 20px; } #seasonpass.sp-narrow .sp-title small { font-size: 12.5px; }
#seasonpass.sp-narrow .sp-left { font-size: 12.5px; padding: 2px 8px; }
#seasonpass.sp-narrow .sp-lv { grid-template-columns: 70px 1fr 1fr; grid-template-areas: 'b bar bar' 'b ci buy'; gap: 6px 8px; padding: 8px 10px; }
#seasonpass.sp-narrow .sp-badge { grid-area: b; } #seasonpass.sp-narrow .sp-barw { grid-area: bar; } #seasonpass.sp-narrow .sp-ci { grid-area: ci; justify-content: center; } #seasonpass.sp-narrow .sp-buystep { grid-area: buy; flex-direction: row; gap: 6px; }
#seasonpass.sp-narrow .sp-barw small { display: none; }
#seasonpass.sp-narrow .sp-body { overflow-y: auto; }
#seasonpass.sp-narrow .sp-trackv, #seasonpass.sp-narrow .sp-trk { flex: none; }
#seasonpass.sp-narrow .sp-cell, #seasonpass.sp-narrow .sp-rl { height: 88px; } #seasonpass.sp-narrow .sp-col { flex-basis: 78px; } #seasonpass.sp-narrow .sp-cell { width: 74px; }
#seasonpass.sp-narrow .sp-slot { width: 58px; height: 58px; } #seasonpass.sp-narrow .sp-slot.big { width: 64px; height: 64px; }
#seasonpass.sp-narrow .sp-badge { width: 68px; height: 60px; } #seasonpass.sp-narrow .sp-badge div { width: 62px; height: 54px; } #seasonpass.sp-narrow .sp-badge b { font-size: 24px; }
#seasonpass.sp-narrow .sp-ci, #seasonpass.sp-narrow .sp-buystep { height: 42px; font-size: 14px; }
#seasonpass.sp-narrow .sp-trackv { flex-direction: column; }
#seasonpass.sp-narrow .sp-show { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 8px; border-right: 0; border-bottom: 1px solid rgba(217, 164, 67, 0.35); }
#seasonpass.sp-narrow .sp-show .sp-art { height: 70px; width: 120px; } #seasonpass.sp-narrow .sp-show .sp-art img { max-height: 70px; }
#seasonpass.sp-narrow .sp-show > small, #seasonpass.sp-narrow .sp-more { display: none; }
#seasonpass.sp-narrow .sp-unls { margin-top: 4px; }
#seasonpass.sp-narrow .sp-labs { width: 64px; } #seasonpass.sp-narrow .sp-rl { font-size: 13px; } #seasonpass.sp-narrow .sp-rl img { width: 24px; height: 24px; }
#seasonpass.sp-narrow .sp-mis { grid-template-columns: 1fr; }
#seasonpass.sp-narrow .sp-row { grid-template-columns: 1fr 90px 74px; font-size: 13.5px; }
#seasonpass.sp-narrow .sp-all { min-width: 0; flex: 1; }
#seasonpass.sp-narrow .sp-note { display: none; }
#seasonpass.sp-narrow .sp-card, #seasonpass.sp-narrow .sp-card.pick { width: 94%; }