/* Beasties: Monster workshop + Season pass pages (inc/beasties-workshop.php, assets/js/beasties-workshop.js).
 * The app's look: night stage, sticker outlines (#0e0b1a), panel #241e45, well #1a1533, ink #ede7ff, zap yellow.
 * Pictures (parts on Gnatz) share one crop box, so monsters line up in every grid. */

.bws-scene, .bws-hero, .bws-gal, .bws-eggs, .bws-seas, .bws-year, .bws-glasses {
	--ink: #ede7ff; --muted-app: #8f86b8; --panel: #241e45; --well: #1a1533; --outline: #0e0b1a; --zap: #ffd400;
}

/* ---------- part pictures + animated strips ---------- */
.bws-pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.bws-pic > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bws-pic > img.bws-frames { position: absolute; top: 0; left: 0; width: 1200%; max-width: none; height: 100%; animation: bws-frames 1.2s steps(12) infinite; }
.bws-pic.is-anim > img:first-child { visibility: hidden; }
.bws-pic:not(.is-anim) > img.bws-frames { display: none; }
.bws-pic.is-still > img.bws-frames { animation-play-state: paused; }
@keyframes bws-frames { to { transform: translateX(-100%); } }

/* ---------- phone screens ---------- */
.bws-phone .bws-gx { padding: 0 12px 8px; }
.bws-gx { container-type: inline-size; }
.bws-hero { max-width: 340px; margin: 0 auto; }
.bws-hero .bst-phone { max-width: 320px; }

/* the workshop */
.bws-ws { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bws-ws-title { margin: 6px 0 0; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.55rem; color: var(--ink); }
.bws-stage { position: relative; width: 66%; margin: -4px auto -8px; aspect-ratio: 1; }
.bws-big { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.bws-big.is-on { opacity: 1; }
.bws-big.is-bounce { animation: bws-bounce .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bws-bounce { 0% { transform: scale(.86, 1.08); } 45% { transform: scale(1.08, .94) translateY(-4%); } 100% { transform: none; } }
.bws-say { position: absolute; right: 6%; top: 10%; display: grid; place-items: center; width: 34px; height: 30px; border-radius: 14px; background: #fff; color: #ff5c9a; font-weight: 900; font-size: 1rem; box-shadow: 0 0 0 2.5px var(--outline); opacity: 0; transform: scale(.3); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.bws-say.is-on { opacity: 1; transform: none; }
.bws-card { background: var(--panel); border-radius: 22px; padding: 10px 10px 12px; box-shadow: inset 0 0 0 2.5px var(--outline), 0 5px 0 var(--outline); }
.bws-chips { overflow: hidden; margin: 0 -4px 10px; padding: 3px 4px; }
.bws-chips-row { display: flex; gap: 6px; width: max-content; transition: transform .45s cubic-bezier(.3, .9, .3, 1); }
.bws-chip { flex: none; padding: 0 11px; height: 28px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(14, 11, 26, .4); color: var(--ink); font-weight: 700; font-size: .72rem; white-space: nowrap; transition: background-color .25s, color .25s; }
.bws-chip.is-on { background: var(--zap); color: var(--outline); }
.bws-opts { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.bws-opts.is-on { display: grid; animation: bws-in .3s ease-out; }
@keyframes bws-in { from { opacity: 0; transform: translateY(6px); } }
.bws-opt { position: relative; border-radius: 14px; background: rgba(14, 11, 26, .35); box-shadow: inset 0 0 0 2px var(--outline); overflow: hidden; transition: box-shadow .2s, background-color .2s, transform .15s; }
.bws-opt.is-season { box-shadow: inset 0 0 0 2px #ff8a3d; }
.bws-opt .bws-pic { transform: scale(1.18) translateY(4%); }
.bws-opt.is-sel { background: rgba(255, 212, 0, .25); box-shadow: inset 0 0 0 3px var(--zap); }
.bws-opt.is-press { transform: scale(.9); }
.bws-opt-em, .bws-opt-anim { position: absolute; font-style: normal; font-size: .62rem; line-height: 1; }
.bws-opt-em { left: 5px; top: 5px; }
.bws-opt-anim { right: 4px; bottom: 4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--zap); font-size: .5rem; }
.bws-eggbtn { margin: auto 18px 14px; display: grid; place-items: center; height: 42px; border-radius: 14px; background: var(--panel); color: var(--ink); font-weight: 800; font-size: .85rem; box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); }

/* star pill (the app's StarPill) */
.bws-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 1.5px #8a6d1a; color: var(--ink); font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums; }
.bws-pill .st { width: 13px; height: 13px; color: var(--zap); }
.bws-pill.is-bump { animation: bst-pop .25s ease-out; }

/* ---------- the shop + hatch ---------- */
.bws-shop { position: relative; flex: 1; display: flex; flex-direction: column; padding: 0 4px; min-height: 0; }
.bws-shop-head { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.bws-shop-head > b { font-family: var(--display); font-size: 1.7rem; color: var(--ink); }
.bws-shop-sec { margin: 18px 0 8px; font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-app); }
.bws-eggcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.bws-eggcard { display: grid; justify-items: center; gap: 5px; padding: 10px 4px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); transition: transform .15s; }
.bws-eggcard img { width: 62%; height: auto; }
.bws-eggcard b { font-size: .66rem; color: var(--ink); white-space: nowrap; }
.bws-eggcard.is-press { transform: scale(.9); }
.bws-eggcard.is-press img { animation: bws-shake .3s; }
.bws-price { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; background: var(--zap); color: var(--outline); font-family: var(--display); font-weight: 700; font-size: .85rem; line-height: 1.1; }
.bws-price .st { width: 10px; height: 10px; color: var(--outline); }
.bws-won { position: absolute; left: 10%; right: 10%; top: 44%; display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--outline), 0 5px 0 var(--outline); color: var(--ink); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.bws-won.is-on { opacity: 1; transform: none; }
.bws-won-stars { display: flex; gap: 4px; color: var(--zap); }
.bws-won-stars .st { width: 26px; height: 26px; }
.bws-won.is-fly .st { animation: bws-fly .6s ease-in forwards; }
.bws-won.is-fly .st:nth-child(2) { animation-delay: .12s; }
.bws-won.is-fly .st:nth-child(3) { animation-delay: .24s; }
@keyframes bws-fly { to { transform: translate(70px, -230px) scale(.4); opacity: 0; } }
.bws-hatch { position: absolute; inset: -46px -12px -8px; display: grid; place-items: center; align-content: center; gap: 12px; background: radial-gradient(60% 40% at 50% 42%, color-mix(in srgb, var(--egg) 45%, transparent), transparent 70%), rgba(18, 15, 36, .94); opacity: 0; pointer-events: none; transition: opacity .3s; }
.bws-hatch[data-egg="green"] { --egg: #7ed957; }
.bws-hatch[data-egg="blue"] { --egg: #4db8ff; }
.bws-hatch[data-egg="gold"] { --egg: #ffc83d; }
.bws-hatch.is-on { opacity: 1; }
.bws-hatch-egg { position: relative; width: 46%; aspect-ratio: 200 / 222; transform-origin: 50% 100%; }
.bws-hatch-egg img { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; }
.bws-hatch[data-crack="0"] .is-0, .bws-hatch[data-crack="1"] .is-1, .bws-hatch[data-crack="2"] .is-2 { opacity: 1; }
.bws-hatch-egg.is-wob { animation: bws-wobble .4s ease-in-out; }
@keyframes bws-wobble { 0% { transform: rotate(0); } 22% { transform: rotate(-12deg); } 48% { transform: rotate(10deg); } 72% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
.bws-hatch-say { font-family: var(--display); font-weight: 700; font-size: 1.15rem; padding: 4px 12px; border-radius: 10px; background: #fff; color: var(--outline); transform: rotate(-3deg); box-shadow: 0 0 0 2.5px var(--outline); }
.bws-hatch-new { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; opacity: 0; transform: scale(.2); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.bws-hatch.is-open .bws-hatch-egg, .bws-hatch.is-open .bws-hatch-say { opacity: 0; transform: scale(1.4); transition: opacity .2s, transform .25s; }
.bws-hatch.is-open .bws-hatch-new { opacity: 1; transform: none; }
.bws-hatch-mon { width: 62%; }
.bws-newcard { display: grid; justify-items: center; gap: 2px; padding: 10px 16px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); }
.bws-newcard b { font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.bws-newcard small { font-size: .68rem; color: var(--muted-app); }
.bws-puton { padding: 8px 28px; border-radius: 14px; background: var(--zap); color: var(--outline); font-weight: 800; font-size: .8rem; box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); }
@keyframes bws-shake { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg); } 60% { transform: rotate(7deg); } }

/* FX: burst, ring, floating "+15 ★" */
.bws-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.bws-p { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--c); animation: bws-burst .8s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes bws-burst { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(220deg) scale(.4); opacity: 0; } }
.bws-ring { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 4px solid var(--c); transform: translate(-50%, -50%); animation: bws-ring .6s ease-out forwards; }
@keyframes bws-ring { to { width: var(--r); height: var(--r); opacity: 0; border-width: 1px; } }
.bws-float { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--zap); text-shadow: 0 2px 0 var(--outline); white-space: nowrap; animation: bws-up 1s ease-out forwards; }
@keyframes bws-up { 0% { opacity: 0; transform: translate(-50%, -20%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%); } }

/* ---------- the three eggs ---------- */
.bws-eggs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.bws-egg { --egg: #7ed957; position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 18px 24px; border-radius: 26px; background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--egg) 22%, transparent), transparent 70%), var(--surface); border: 1px solid var(--line); }
.bws-egg.is-blue { --egg: #4db8ff; }
.bws-egg.is-gold { --egg: #ffc83d; }
.bws-egg h3 { margin: 0; font-size: 1.4rem; }
.bws-egg p { margin: 4px 0 0; color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.bws-egg-pic { position: relative; width: 150px; height: 150px; }
.bws-egg-shell { display: block; width: 104px; height: auto; margin: 4px auto 0; animation: bws-idle 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.bws-egg.is-blue .bws-egg-shell { animation-delay: -1s; }
.bws-egg.is-gold .bws-egg-shell { animation-delay: -2s; }
@keyframes bws-idle { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-6deg); } 84% { transform: rotate(5deg); } 92% { transform: rotate(-2deg); } }
.bws-egg-roll { position: absolute; right: -14px; bottom: -6px; width: 84px; height: 84px; border-radius: 50%; background: #1a1533; box-shadow: 0 0 0 3px #0e0b1a, 0 0 0 6px var(--egg); overflow: hidden; }
.bws-egg-roll .bws-pic { position: absolute; inset: 0; opacity: 0; transform: scale(1.3) translateY(6%); transition: opacity .45s; }
.bws-egg-roll .bws-pic.is-on { opacity: 1; }
.bws-egg-rar { font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--egg); margin-top: 10px; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bws-egg-rar { color: color-mix(in srgb, var(--egg) 55%, #1e1a33); } }
:root[data-theme="light"] .bws-egg-rar { color: color-mix(in srgb, var(--egg) 55%, #1e1a33); }
@media (max-width: 760px) { .bws-eggs { grid-template-columns: 1fr; } .bws-egg { grid-template-columns: auto 1fr; text-align: left; justify-items: start; column-gap: 18px; } .bws-egg-pic { grid-row: span 4; width: 120px; height: 130px; } .bws-egg-shell { width: 86px; } .bws-egg-roll { width: 68px; height: 68px; right: -6px; } .bws-egg-rar { margin-top: 0; } }

/* ---------- the gallery ---------- */
.bws-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.bws-f { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.bws-f small { font-size: .75rem; color: var(--muted); font-weight: 600; }
.bws-f:hover { border-color: var(--accent); color: var(--text); }
.bws-f.is-on, .bws-f[aria-pressed="true"] { background: var(--zap); border-color: var(--zap); color: var(--zap-ink); }
.bws-f.is-on small, .bws-f[aria-pressed="true"] small { color: var(--zap-ink); opacity: .7; }
.bws-f-gap { flex-basis: 100%; height: 0; }
.bws-gal-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.bws-prev { position: sticky; top: 96px; display: grid; justify-items: center; text-align: center; padding: 18px 20px 22px; border-radius: 26px; background: radial-gradient(90% 60% at 50% 20%, #5a35d0 0%, transparent 70%), linear-gradient(180deg, #2a1c63, #17112f); color: var(--ink); box-shadow: var(--shadow-pop); }
.bws-prev-stage { width: 100%; max-width: 250px; }
.bws-prev-stage .bws-pic.is-swap { animation: bws-bounce .5s cubic-bezier(.3, 1.6, .5, 1); }
.bws-prev-slot { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: #b9a8ff; }
.bws-prev-name { margin: 2px 0 6px; font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: #fff; }
.bws-prev-info { margin: 0; font-size: .92rem; line-height: 1.5; color: #d8d1f1; }
.bws-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.bws-t[hidden] { display: none; }
.bws-t button { position: relative; overflow: hidden; display: grid; justify-items: center; width: 100%; height: 100%; padding: 4px 6px 10px; border-radius: 18px; border: 0; background: #241e45; box-shadow: inset 0 0 0 2px #0e0b1a; color: #ede7ff; font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.bws-t.is-season button { box-shadow: inset 0 0 0 2px var(--sa); background: linear-gradient(180deg, color-mix(in srgb, var(--sa) 18%, #241e45), #241e45 60%); }
.bws-t button:hover { transform: translateY(-2px); }
.bws-t button.is-sel { box-shadow: inset 0 0 0 3px #ffd400; background: color-mix(in srgb, #ffd400 18%, #241e45); }
.bws-t .bws-pic { width: 100%; transform: scale(1.14) translateY(3%); }
.bws-t-em { position: absolute; left: 7px; top: 6px; font-style: normal; font-size: .85rem; }
.bws-t-anim { position: absolute; right: 7px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ffd400; box-shadow: 0 0 0 1.5px #0e0b1a; font-style: normal; font-size: .62rem; }
.bws-t-name { font-weight: 700; font-size: .82rem; line-height: 1.2; text-align: center; margin-top: -4px; }
.bws-t-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: .7rem; color: #a59cc9; text-align: center; }
.bws-t-egg { width: 11px; height: auto; }
.bws-none { margin-top: 18px; color: var(--muted); }
@media (max-width: 860px) {
	.bws-gal-body { grid-template-columns: 1fr; }
	.bws-prev { position: relative; top: 0; grid-template-columns: 120px 1fr; text-align: left; justify-items: start; align-items: center; column-gap: 14px; padding: 12px 16px; }
	.bws-prev-stage { grid-row: span 3; }
	.bws-prev-name { font-size: 1.35rem; }
	.bws-prev-info { font-size: .85rem; }
	.bws-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
}
@media (max-width: 420px) { .bws-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bws-t-src { font-size: .62rem; } .bws-t-name { font-size: .74rem; } }

/* ---------- Energy (settings screen) ---------- */
.bws-set { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 4px; }
.bws-set-title { margin: 12px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--ink); }
.bws-set-mon { position: relative; margin: 6px auto 0; width: 76%; border-radius: 26px; background: radial-gradient(70% 60% at 50% 40%, rgba(255, 212, 0, .2), transparent 70%), var(--well); box-shadow: inset 0 0 0 2.5px var(--outline); }
.bws-set-tag { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--panel); color: var(--ink); font-size: .68rem; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--outline); }
.bws-set-card { padding: 12px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); }
.bws-set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); font-size: .9rem; }
.bws-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--well); }
.bws-seg span { padding: 5px 9px; border-radius: 9px; font-size: .7rem; font-weight: 700; color: var(--muted-app); transition: background-color .25s, color .25s; }
.bws-seg span.is-on { background: var(--zap); color: var(--outline); }
.bws-set-detail { margin: 10px 0 0; min-height: 3.2em; font-size: .72rem; line-height: 1.45; color: var(--muted-app); }
.bws-set-mon.is-low .bws-pic { filter: saturate(.9); }

/* ---------- season teaser (workshop page) ---------- */
.bws-seas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bws-sea a { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 8px 10px 16px; border-radius: 24px; text-decoration: none; color: var(--text); background: radial-gradient(80% 55% at 50% 30%, color-mix(in srgb, var(--sa) 30%, transparent), transparent 72%), var(--surface); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.bws-sea a:hover { transform: translateY(-3px); border-color: var(--sa); }
.bws-sea-pic { width: 100%; max-width: 200px; height: auto; animation: bst-float 4s ease-in-out infinite; }
.bws-sea:nth-child(2) .bws-sea-pic { animation-delay: -1s; }
.bws-sea:nth-child(3) .bws-sea-pic { animation-delay: -2s; }
.bws-sea:nth-child(4) .bws-sea-pic { animation-delay: -3s; }
.bws-sea b { font-family: var(--display); font-size: 1.2rem; }
.bws-sea small { color: var(--muted); font-size: .85rem; }
.bws-sea-now { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: var(--zap); color: var(--zap-ink); font-size: .72rem; font-weight: 800; display: none; }
.bws-sea.is-now .bws-sea-now { display: block; }
.bws-sea.is-now a { border-color: var(--sa); }
@media (max-width: 860px) { .bws-seas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the year at a glance ---------- */
.bws-year { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.bws-yc { position: relative; padding: 0 16px 18px; border-radius: 28px; background: radial-gradient(90% 38% at 50% 0%, color-mix(in srgb, var(--sa) 32%, transparent), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--stop) 85%, #120f24), #1c1438 60%, #141027); color: #ede7ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); scroll-margin-top: 90px; }
.bws-yc.is-now { box-shadow: inset 0 0 0 2px var(--sa), 0 0 60px -20px var(--sa); }
.bws-yc-head { display: grid; grid-template-columns: 132px 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; align-items: end; }
.bws-yc-hero { grid-row: 1 / span 3; width: 132px; height: auto; margin-top: -4px; animation: bst-float 4.5s ease-in-out infinite; }
.bws-yc-q { font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sa); padding-top: 26px; }
.bws-yc h3 { margin: 2px 0 0; font-size: 1.55rem; color: #fff; }
.bws-yc-now { align-self: start; justify-self: start; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--zap); color: #120f24; font-size: .75rem; font-weight: 800; display: none; }
.bws-yc.is-now .bws-yc-now { display: inline-block; }
.bws-yparts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bws-yparts li { position: relative; overflow: hidden; display: grid; justify-items: center; padding: 2px 2px 6px; border-radius: 14px; background: rgba(14, 11, 26, .45); box-shadow: inset 0 0 0 1.5px rgba(14, 11, 26, .9); }
.bws-yparts li.is-final { box-shadow: inset 0 0 0 2px var(--zap); background: rgba(255, 212, 0, .12); }
.bws-yparts .bws-pic { width: 100%; transform: scale(1.12) translateY(3%); }
.bws-yp-name { position: relative; z-index: 1; margin-top: 2px; font-size: .64rem; font-weight: 700; line-height: 1.15; text-align: center; color: #d8d1f1; min-height: 2.3em; }
.bws-yp-tier { z-index: 1; position: absolute; top: 4px; left: 4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; background: linear-gradient(#ffd400, var(--sa)); color: #120f24; font-family: var(--display); font-weight: 700; font-size: .72rem; box-shadow: 0 0 0 1.5px #0e0b1a; }
.bws-yparts .is-stars .bws-coin { margin: 14px 0 10px; }
@media (max-width: 1000px) { .bws-year { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bws-yparts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bws-yc-head { grid-template-columns: 100px 1fr; } .bws-yc-hero { width: 100px; } .bws-yc h3 { font-size: 1.3rem; } .bws-yc { padding-inline: 12px; } }

/* ---------- New Year glasses ---------- */
.bws-glasses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bws-gl { position: relative; display: grid; justify-items: center; text-align: center; padding: 4px 8px 14px; border-radius: 22px; background: radial-gradient(80% 50% at 50% 30%, rgba(255, 212, 0, .14), transparent 70%), linear-gradient(#2a1c63, #17112f); color: #ede7ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bws-gl { overflow: hidden; }
.bws-gl .bws-pic { width: 100%; margin-bottom: 6px; transform: scale(1.45) translateY(13%); }
.bws-gl b { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: #ffd400; }
.bws-gl small { font-size: .75rem; color: #a59cc9; margin-top: 2px; }
.bws-gl-state { margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; background: rgba(255, 255, 255, .08); color: #d8d1f1; }
.bws-gl.is-now { box-shadow: inset 0 0 0 2px #ffd400, 0 0 50px -14px #ffd400; }
.bws-gl.is-now .bws-gl-state { background: #ffd400; color: #120f24; }
.bws-gl.is-past { opacity: .65; }
.bws-gl.is-past .bws-pic { filter: saturate(.5); }

/* ---------- prose bits ---------- */
.bws-after-link { margin-top: 18px; }

/* ---------- reduced motion: last frames, nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
	.bws-scene *, .bws-hero *, .bws-eggs *, .bws-seas *, .bws-year *, .bws-glasses *, .bws-gal * { animation: none !important; transition: none !important; }
}

/* labels stay above the (scaled) monster pictures */
.bws-t-name, .bws-t-src, .bws-gl b, .bws-gl small, .bws-gl-state { position: relative; z-index: 1; }
.bws-gl .bws-pic { transform: scale(1.3) translateY(10%); margin-bottom: 10px; }
.bws-strip-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .bws-t .bws-pic { transform: scale(1.05); } }

/* ================================================================ 2026-10-17: collection, Star King, victory effects,
   stamp pass, daily challenges */
.bws-scene, .bws-hero, .bws-gal, .bws-eggs, .bws-seas, .bws-year, .bws-glasses, .bws-pro-wrap, .bws-victory, .bws-todaybox, .bws-pace, .bws-dpass {
	--ink: #ede7ff; --muted-app: #8f86b8; --panel: #241e45; --well: #1a1533; --outline: #0e0b1a; --zap: #ffd400; --hot: #ff4d6d; --mint: #3fc1a5;
}
.bws-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bws-i { width: 1em; height: 1em; flex: none; }
.bws-stamp { width: .95em; height: 1.05em; flex: none; color: var(--sa, #ff8a3d); transform: rotate(-8deg); vertical-align: -.15em; }
.bws-stc { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.bws-x { position: absolute; top: 52px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(14, 11, 26, .45); color: var(--ink); font-weight: 900; font-size: 1rem; line-height: 1; }
.bws-tag { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--zap); color: var(--outline); font-family: var(--display); font-style: normal; font-weight: 700; font-size: .62rem; letter-spacing: .03em; text-transform: uppercase; transform: rotate(-3deg); box-shadow: inset 0 0 0 1.5px var(--outline); }
.bws-tag.is-big { font-size: 1rem; padding: 4px 12px; border-radius: 9px; box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); }

/* victory effect pictures: the effect behind a small plain Gnatz */
.bws-fxpic { position: relative; display: block; aspect-ratio: 1; }
.bws-fxpic > .bws-pic.is-fx { position: absolute; inset: 0; }
.bws-fxmon { position: absolute; left: 32%; right: 32%; bottom: 2%; width: 36%; height: auto; }

/* workshop: counter, tab counts, locked tiles */
.bws-count { align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; margin-top: 2px; border-radius: 999px; background: rgba(14, 11, 26, .45); color: var(--ink); font-size: .68rem; font-variant-numeric: tabular-nums; }
.bws-count .bws-i { width: 10px; height: 10px; }
.bws-count.is-bump { animation: bst-pop .35s ease-out; }
.bws-chip { gap: 5px; }
.bws-chip small { display: none; padding: 1px 5px; border-radius: 999px; background: rgba(14, 11, 26, .18); font-size: .6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bws-chip.is-on small { display: inline; }
.bws-opt.is-locked .bws-pic, .bws-opt.is-locked .bws-fxpic { opacity: .55; filter: saturate(.7); }
.bws-opt.is-pro.is-locked .bws-pic { opacity: .75; filter: none; }
.bws-opt.is-shake { animation: bws-tshake .3s; }
@keyframes bws-tshake { 25% { transform: translateX(5px); } 55% { transform: translateX(-5px); } 80% { transform: translateX(2px); } }
.bws-opt.is-ring { box-shadow: inset 0 0 0 3px var(--ink); }
.bws-badge { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; height: 17px; padding: 0 4px; border-radius: 999px; background: rgba(14, 11, 26, .85); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(237, 231, 255, .25); }
.bws-badge .bws-i { width: 8px; height: 8px; }
.bws-b-egg { width: 9px; height: auto; }
.bws-b-em { font-style: normal; font-size: .55rem; line-height: 1; }
.bws-b-crown { display: inline-grid; color: var(--zap); }
.bws-opt-anim { right: 4px; bottom: 4px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--zap); color: var(--outline); box-shadow: 0 0 0 1.5px var(--outline); }
.bws-opt-anim .bws-i { width: 10px; height: 10px; }
.bws-pro { position: absolute; left: 4px; top: 4px; z-index: 1; display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 999px; background: var(--zap); color: var(--outline); font-weight: 900; font-size: .48rem; letter-spacing: .04em; box-shadow: 0 0 0 1.2px var(--outline); }
.bws-pro .bws-i { width: 7px; height: 7px; }
.bws-eggbtn { display: flex; gap: 6px; align-items: center; justify-content: center; background: var(--zap); color: var(--outline); }
.bws-eggbtn .bws-i { width: 15px; height: 15px; }
.bws-ws { position: relative; }
.bws-ws .bws-x { top: 6px; }
.bws-stage.is-small { width: 46%; margin-top: -2px; }
.bws-opts.is-static { display: grid; animation: none; }
/* the lock card (lockCard): slides up over the Get eggs button */
.bws-lock { position: absolute; left: 4px; right: 4px; bottom: 10px; z-index: 3; display: grid; gap: 9px; padding: 11px 10px 11px 12px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--outline), 0 5px 0 var(--outline), 0 12px 30px rgba(0, 0, 0, .45); color: var(--ink); opacity: 0; transform: translateY(40px); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.bws-lock.is-on { opacity: 1; transform: none; }
.bws-lc-top { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding-right: 28px; }
.bws-lc-top b { display: block; font-family: var(--display); font-size: 1.05rem; line-height: 1.1; }
.bws-lc-top small { display: block; font-size: .68rem; font-weight: 700; color: var(--muted-app); }
.bws-lc-egg { width: 32px; height: auto; justify-self: center; }
.bws-lc-em { font-style: normal; font-size: 1.6rem; text-align: center; }
.bws-lc-crown { display: grid; place-items: center; color: var(--zap); font-size: 1.6rem; }
.bws-lock .bws-x { top: 50%; right: 0; transform: translateY(-50%); width: 24px; height: 24px; font-size: .8rem; }
.bws-lc-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 13px; background: var(--zap); color: var(--outline); font-weight: 800; font-size: .76rem; box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); }
.bws-lc-btn .bws-i { width: 13px; height: 13px; }
.bws-say.is-on { animation: bst-pop .3s ease-out; }

/* shop: Pro banner + section line with ⓘ */
.bws-shop-head { position: relative; padding-right: 34px; }
.bws-shop-head .bws-x { top: 50%; transform: translateY(-50%); right: 0; }
.bws-probanner { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 12px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--zap), 0 4px 0 var(--outline); color: var(--ink); }
.bws-pb-mon { width: 54px; height: auto; transform: scale(1.35); }
.bws-probanner b { display: block; margin-top: 3px; font-family: var(--display); font-size: .92rem; line-height: 1.05; }
.bws-shop-sec { display: flex; align-items: center; gap: 6px; }
.bws-shop-sec .bws-i { width: 13px; height: 13px; color: var(--muted-app); }
.bws-puton { display: inline-flex; align-items: center; gap: 6px; }
.bws-puton .bws-i { width: 13px; height: 13px; }
.bws-hatch-mon.bws-fxpic { width: 70%; }

/* eggs: count line */
.bws-egg-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bws-egg-n { font-weight: 700; font-size: .9rem; color: var(--text-2); }
.bws-egg-roll .bws-fxpic { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.bws-egg-roll .bws-fxpic.is-on { opacity: 1; }
@media (max-width: 760px) { .bws-egg-row { justify-content: start; } }

/* gallery extras */
.bws-gal-sum { margin: -6px 0 16px; color: var(--text-2); }
.bws-t .bws-fxpic { width: 100%; }
.bws-t .bws-pro { left: 7px; top: 7px; font-size: .55rem; padding: 2px 6px; }
.bws-t.is-pro button { box-shadow: inset 0 0 0 2px var(--zap); }
.bws-t-anim { color: var(--outline); }
.bws-t-anim .bws-i { width: 12px; height: 12px; }
.bws-prev .bws-fxpic { width: 100%; }

/* ---------- Star King ---------- */
.bws-pro-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(18px, 4vw, 48px); align-items: center; }
.bws-king { position: relative; aspect-ratio: 1; border-radius: 32px; background: radial-gradient(60% 50% at 50% 42%, rgba(255, 212, 0, .35), transparent 70%), radial-gradient(90% 70% at 50% 0%, #5a35d0, transparent 70%), linear-gradient(180deg, #2a1c63, #120f24); box-shadow: var(--shadow-pop), inset 0 0 0 2px var(--zap); overflow: hidden; }
.bws-king-glow { position: absolute; left: 18%; right: 18%; bottom: 9%; height: 12%; border-radius: 50%; background: linear-gradient(#4a3880, #2a1f52); box-shadow: inset 0 0 0 2px rgba(255, 212, 0, .8); }
.bws-king-mon { position: absolute; inset: 2% 4% 6%; aspect-ratio: auto; }
.bws-bubble { position: absolute; right: 7%; top: 13%; display: inline-flex; align-items: center; gap: 5px; max-width: 42%; padding: 6px 10px; border-radius: 14px; background: #fff; color: var(--outline); font-weight: 900; font-size: .78rem; line-height: 1.15; box-shadow: 0 0 0 3px var(--outline); transform: rotate(3deg); }
.bws-bubble .bws-i { color: #f5a300; width: 15px; height: 15px; }
.bws-king .bws-tag { position: absolute; left: 7%; top: 8%; }
.bws-kparts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.bws-kp { position: relative; display: grid; justify-items: center; padding: 4px 6px 10px; border-radius: 18px; background: #241e45; color: #ede7ff; box-shadow: inset 0 0 0 2px #0e0b1a; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.bws-kp .bws-pic { width: 100%; transform: scale(1.14) translateY(3%); }
.bws-kp b { position: relative; z-index: 1; font-size: .8rem; text-align: center; line-height: 1.2; margin-top: -4px; }
.bws-kp .bws-pro { left: 7px; top: 7px; font-size: .55rem; padding: 2px 6px; }
.bws-kp.is-on { box-shadow: inset 0 0 0 3px var(--zap), 0 0 30px -8px var(--zap); transform: translateY(-3px); }
@media (max-width: 760px) { .bws-pro-wrap { grid-template-columns: 1fr; } .bws-king { max-width: 360px; width: 100%; margin: 0 auto; } .bws-kparts { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* ---------- victory effects ---------- */
.bws-victory { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(18px, 4vw, 44px); align-items: start; }
.bws-vstage { position: relative; aspect-ratio: 1; border-radius: 32px; background: radial-gradient(70% 50% at 50% 30%, rgba(255, 212, 0, .2), transparent 70%), linear-gradient(180deg, #2a1c63, #120f24); box-shadow: var(--shadow-pop); overflow: hidden; }
.bws-vboard { position: absolute; left: 14%; right: 14%; top: 14%; aspect-ratio: 1; border-radius: 22px; background: #241e45; box-shadow: inset 0 0 0 3px #0e0b1a; }
.bws-vboard i { position: absolute; inset: 12%; border-radius: 12px; background: repeating-linear-gradient(90deg, #1a1533 0 23%, transparent 23% 25%), repeating-linear-gradient(0deg, #1a1533 0 23%, transparent 23% 25%); opacity: .7; }
.bws-vs { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.bws-vs.is-on { opacity: 1; }
.bws-vs .bws-pic { position: absolute; inset: 2%; aspect-ratio: auto; }
.bws-vs .bws-pic:not(.is-anim) > img:first-child { opacity: .9; }
.bws-vmon { position: absolute; left: 50%; bottom: -3%; width: 38%; height: auto; transform: translateX(-50%); }
.bws-solved { position: absolute; left: 50%; top: 44%; padding: 6px 16px; border-radius: 12px; background: var(--zap); color: #0e0b1a; font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; box-shadow: inset 0 0 0 3px #0e0b1a, 0 5px 0 #0e0b1a; opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-4deg); pointer-events: none; }
.bws-solved.is-on { animation: bws-banner 1.6s ease-out forwards; }
@keyframes bws-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-4deg); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); } 25%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } }
.bws-vtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.bws-vt { position: relative; display: grid; justify-items: center; width: 100%; padding: 6px 6px 10px; border: 0; border-radius: 18px; background: #241e45; color: #ede7ff; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 2px #0e0b1a; transition: transform .15s, box-shadow .2s; }
.bws-vt:hover { transform: translateY(-2px); }
.bws-vt.is-on { box-shadow: inset 0 0 0 3px var(--zap); background: color-mix(in srgb, #ffd400 14%, #241e45); }
.bws-vt-pic { position: relative; display: block; width: 100%; aspect-ratio: 1.15; overflow: hidden; }
.bws-vt-fx { position: absolute; left: -5%; top: -12%; width: 110%; height: auto; }
.bws-vt-mon { position: absolute; left: 30%; width: 40%; bottom: -2%; height: auto; }
.bws-vt b { font-size: .82rem; line-height: 1.2; text-align: center; }
.bws-vt small { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .7rem; color: #a59cc9; }
@media (max-width: 860px) { .bws-victory { grid-template-columns: 1fr; } .bws-vstage { max-width: 380px; width: 100%; margin: 0 auto; } .bws-vtiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* ---------- season pass: the sheet (hero) ---------- */
.bws-phone.is-pass .bws-gx, .bws-phone.is-daily .bws-gx { background: radial-gradient(90% 40% at 50% 18%, color-mix(in srgb, var(--sa, #ff8a3d) 30%, transparent), transparent 70%), linear-gradient(180deg, var(--stop, #3b1d5c), #1c1438 55%, #120f24); }
.bws-pass { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
.bws-pass-head { align-self: stretch; position: relative; display: flex; align-items: center; height: 34px; margin-top: 2px; }
.bws-pass-head .bws-x { top: 3px; right: 0; }
.bws-sticker { display: inline-block; padding: 6px 14px; border-radius: 10px; background: var(--zap); color: var(--outline); font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; transform: rotate(-3deg); box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); white-space: nowrap; }
.bws-sticker.is-small { font-size: .78rem; padding: 4px 9px; font-style: normal; }
.bws-sticker.is-name { font-size: .95rem; padding: 4px 11px; transform: rotate(-2deg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bws-pass-card { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 12px 14px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--outline), 0 5px 0 var(--outline); color: var(--ink); }
.bws-days { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; color: var(--muted-app); }
.bws-podium { position: relative; display: grid; width: 82%; aspect-ratio: 1.05; place-items: end center; }
.bws-podium::before { content: ""; position: absolute; left: -12%; right: -12%; bottom: 4%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 212, 0, .32), transparent); transition: opacity .3s; }
.bws-pass-card.is-ready .bws-podium::before { background: radial-gradient(closest-side, rgba(255, 212, 0, .6), transparent); }
.bws-podium::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 13%; height: 12%; border-radius: 50%; background: linear-gradient(#3a2a66, #241a45); box-shadow: inset 0 0 0 2.5px var(--outline); }
.bws-focus { position: absolute; inset: 0; z-index: 1; display: grid; justify-items: center; align-content: end; gap: 8px; opacity: 0; }
.bws-focus.is-on { opacity: 1; }
.bws-focus.is-in { animation: bws-in .35s ease-out; }
.bws-focus .bws-sp { width: 70%; margin-bottom: -4%; }
.bws-focus .bws-sp.is-stars, .bws-focus .bws-sp.is-egg { width: 46%; margin-bottom: 10%; }
.bws-focus .bws-sticker { margin-bottom: -4px; }
.bws-sp { display: grid; place-items: center; }
.bws-sp img { width: 100%; height: auto; }
.bws-sp.is-egg img { width: 78%; }
.bws-collectbtn { display: flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch; margin: 0 14px; height: 0; overflow: hidden; border-radius: 14px; background: var(--zap); color: var(--outline); font-weight: 800; font-size: .82rem; box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); opacity: 0; transition: height .3s, opacity .3s, transform .15s; }
.bws-collectbtn .bws-i { width: 14px; height: 14px; }
.bws-pass-card.is-ready .bws-collectbtn { height: 38px; opacity: 1; }
.bws-collectbtn.is-press { transform: scale(.92); }

/* the stamp line (PassBar) */
.bws-passbar { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; color: var(--ink); }
.bws-segs { flex: 1; display: flex; gap: 3px; min-width: 0; }
.bws-segs i { flex: 1; height: 9px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 1.5px rgba(14, 11, 26, .6); transition: background-color .25s; }
.bws-segs i.is-on { background: var(--zap); animation: bst-pop .3s ease-out; }
.bws-pb-n { font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bws-passbar.is-gold .bws-pb-n { color: var(--zap); }
.bws-passbar .bws-stamp { font-size: 15px; }
.bws-passbar > .bws-i { width: 17px; height: 17px; color: var(--muted-app); }
.bws-passbar.is-bump .bws-pb-n { animation: bst-pop .25s ease-out; }

/* the pass line card (SeasonStrip) */
.bws-strip { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); color: var(--ink); }
.bws-strip-pic { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--well); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sa) 60%, transparent); }
.bws-strip-pic .bws-sp { width: 100%; overflow: hidden; border-radius: 11px; }
.bws-strip-pic .bws-sp.is-part .bws-pic { transform: scale(1.3) translateY(8%); }
.bws-strip-pic .bws-sp.is-stars img, .bws-strip-pic .bws-sp.is-egg img { width: 72%; margin: auto; }
.bws-bang { position: absolute; top: -7px; right: -7px; display: none; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--hot); color: #fff; font-style: normal; font-weight: 900; font-size: .65rem; box-shadow: 0 0 0 2px var(--outline); }
.bws-strip-go { display: none; padding: 4px 9px; border-radius: 999px; background: var(--zap); color: var(--outline); font-weight: 800; font-size: .66rem; box-shadow: 0 0 0 2px var(--outline); white-space: nowrap; }
.bws-chev { color: var(--muted-app); font-weight: 900; }
.bws-strip.is-ready .bws-strip-pic { box-shadow: inset 0 0 0 2.5px var(--zap), 0 0 14px rgba(255, 212, 0, .6); }
.bws-strip.is-ready .bws-bang { display: grid; }
.bws-strip.is-ready .bws-strip-go { display: inline-block; animation: bst-pop .3s ease-out; }
.bws-strip.is-ready .bws-chev { display: none; }
.bws-strip.is-bump, .bws-strip-pic.is-bump { animation: bst-pop .35s ease-out; }
.bws-strip .bws-passbar { flex: 1; }

/* flying stamps, floating text */
.bws-fly { position: absolute; z-index: 9; transform: translate(-50%, -50%); font-size: 20px; animation: bws-flyto .7s cubic-bezier(.4, 0, .6, 1) forwards; pointer-events: none; }
.bws-fly .bws-stamp { width: 20px; height: 22px; }
@keyframes bws-flyto { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.3); } 100% { opacity: .2; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.6); } }

/* ---------- the daily screen ---------- */
.bws-daily-screen { position: relative; flex: 1; display: flex; flex-direction: column; gap: 3cqw; min-height: 0; padding-bottom: 2cqw; container-type: inline-size; }
.bws-dh { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 4px; margin-top: 2px; color: var(--ink); }
.bws-dh > .bws-i { width: 18px; height: 18px; }
.bws-dh-mid { display: grid; justify-items: center; gap: 3px; }
.bws-dh-mid small { font-size: .6rem; font-weight: 700; color: var(--muted-app); }
.bws-dh .bws-pill { font-size: .7rem; padding: 3px 8px; }
.bws-dpeek { position: relative; height: 15cqw; margin-bottom: -6cqw; display: grid; justify-items: center; z-index: 0; overflow: hidden; }
.bws-dpeek-mon { width: 26cqw; height: auto; }
.bws-dcs { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.bws-dc { position: relative; display: block; perspective: 600px; transition: transform .15s; }
.bws-dc.is-wide { grid-column: 1 / -1; }
.bws-dc-face, .bws-dc-back { display: flex; flex-direction: column; gap: 2cqw; padding: 3cqw; border-radius: 6cqw; background: linear-gradient(180deg, #2e2754, #241e45); box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); color: var(--ink); backface-visibility: hidden; transition: transform .2s ease-in, filter .3s; }
.bws-dc.is-wide .bws-dc-face { flex-direction: row; gap: 3.5cqw; background: radial-gradient(90% 90% at 100% 100%, rgba(255, 90, 31, .42), transparent 70%), linear-gradient(180deg, #4a1e3a, #2a1230); box-shadow: inset 0 0 0 3px #ff7a1a, 0 4px 0 var(--outline), 0 0 16px rgba(255, 74, 26, .45); }
.bws-dc-art { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 4.5cqw; background: rgba(26, 21, 51, .75); aspect-ratio: 1.15; }
.bws-dc.is-wide .bws-dc-art { width: 36cqw; flex: none; aspect-ratio: 1.05; }
.bws-art { width: 92%; height: auto; }
.bws-art.is-none { display: grid; place-items: center; width: 60%; aspect-ratio: 1; border-radius: 22%; background: #3a2f6e; font-family: var(--display); font-size: 9cqw; color: var(--zap); }
.bws-reel-in { display: contents; }
.bws-reel-in img { animation: bws-reel .09s linear; }
@keyframes bws-reel { from { transform: translateY(-60%); filter: blur(1px); } }
.bws-dc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3cqw; min-width: 0; flex: 1; }
.bws-dc-tier { display: inline-block; padding: .6cqw 2cqw; border-radius: 1.6cqw; background: #4d7cff; color: var(--outline); font-family: var(--display); font-style: normal; font-weight: 700; font-size: 3.6cqw; text-transform: uppercase; transform: rotate(-2deg); box-shadow: inset 0 0 0 1.5px var(--outline); }
.is-fies .bws-dc-tier, .bws-dc-tier.is-fies { background: #ff8a3d; }
.is-teuflisch .bws-dc-tier, .bws-dc-tier.is-teuflisch { background: linear-gradient(90deg, #ff8a3d, #ff4d6d); }
.is-normal .bws-dc-tier, .bws-dc-tier.is-normal { background: #4d9cff; }
.bws-dc-name { font-family: var(--display); font-size: 5.2cqw; line-height: 1.05; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bws-dc-rw { display: inline-flex; align-items: center; gap: 1cqw; font-weight: 800; font-size: 3.8cqw; white-space: nowrap; }
.bws-dc-rw .st { width: 3.6cqw; height: 3.6cqw; color: var(--zap); }
.bws-dc-rw em { font-style: normal; color: var(--muted-app); }
.bws-dc-play { display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: auto; padding: 1.3cqw 3.2cqw; border-radius: 999px; background: var(--zap); color: var(--outline); font-weight: 800; font-size: 3.8cqw; box-shadow: inset 0 0 0 1.5px var(--outline); }
.bws-dc-play .bws-i { width: 2.8cqw; height: 2.8cqw; }
.bws-dc-done { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; }
.bws-solvd { display: inline-flex; align-items: center; gap: 1.4cqw; max-width: 88%; padding: 1.2cqw 3.6cqw; border: .9cqw solid var(--mint); border-radius: 1.6cqw; outline: .35cqw solid var(--mint); outline-offset: -2cqw; color: var(--mint); font-family: var(--display); font-size: 8cqw; line-height: 1.1; text-transform: uppercase; white-space: nowrap; transform: rotate(-11deg); filter: drop-shadow(0 .3cqw .8cqw rgba(0, 0, 0, .6)); }
.bws-solvd .st { width: 4cqw; height: 4cqw; flex: none; color: var(--mint); }
.bws-dc:not(.is-wide) .bws-solvd { font-size: 5cqw; padding: .8cqw 2.2cqw; border-width: .6cqw; outline-offset: -1.4cqw; gap: .8cqw; }
.bws-dc:not(.is-wide) .bws-solvd .st { width: 2.6cqw; height: 2.6cqw; }
.bws-dc.is-done .bws-dc-face { filter: blur(max(4px, 1.4cqw)) saturate(.15) brightness(.92); }
.bws-dc.is-done .bws-dc-done { display: flex; }
.bws-dc.is-done .bws-solvd { animation: bws-stampin .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bws-stampin { from { transform: rotate(-11deg) scale(2); opacity: 0; } }
.bws-dc-back { position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: row; gap: 3cqw; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 11px), linear-gradient(180deg, #7b4dff, #4a2bb8); opacity: 0; }
.bws-dc:not(.is-wide) .bws-dc-back { flex-direction: column; }
.bws-dc-back::after { content: ""; position: absolute; inset: 6px; border-radius: 5cqw; border: 1.5px dashed rgba(255, 255, 255, .35); }
.bws-dc-gn { width: 15cqw; height: auto; }
.bws-dc-back b { font-family: var(--display); font-size: 10cqw; color: var(--zap); text-shadow: 0 2px 0 var(--outline); }
.bws-dc.is-back .bws-dc-face { visibility: hidden; }
.bws-dc.is-back .bws-dc-back { opacity: 1; }
.bws-dc.is-flip .bws-dc-face, .bws-dc.is-flip .bws-dc-back { transform: rotateX(90deg); }
.bws-dc.is-land { animation: bws-land .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bws-land { 0% { transform: scale(.94, 1.06); } 50% { transform: scale(1.04, .96); } 100% { transform: none; } }
.bws-dc.is-press { transform: scale(.95); }
.bws-newgames { align-self: center; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 3.6cqw; border-radius: 999px; background: rgba(14, 11, 26, .45); box-shadow: inset 0 0 0 1.5px rgba(237, 231, 255, .14); color: var(--muted-app); font-weight: 800; font-size: 3.5cqw; transition: opacity .3s, transform .15s; }
.bws-newgames .bws-i, .bws-newgames .st { width: 3.4cqw; height: 3.4cqw; }
.bws-newgames .st { color: var(--zap); }
.bws-newgames.is-press { transform: scale(.9); }
.bws-newgames.is-gone { opacity: 0; }
.bws-daily-screen .bws-strip { margin-top: auto; }
.bws-reward { position: absolute; left: 6%; right: 6%; top: 44%; z-index: 4; display: grid; justify-items: center; gap: 4px; padding: 12px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--zap), 0 5px 0 var(--outline), 0 16px 34px rgba(0, 0, 0, .5); color: var(--ink); opacity: 0; transform: scale(.8); pointer-events: none; }
.bws-reward b { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }
.bws-reward.is-on { animation: bws-pop-hold 2.2s ease-out forwards; }
@keyframes bws-pop-hold { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.05); } 20%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.bws-rw-line { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .85rem; }
.bws-rw-line .st { width: 14px; height: 14px; color: var(--zap); }
.bws-rw-st { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
.bws-rw-st .bws-stamp { font-size: 16px; }
.bws-play { position: absolute; inset: -46px -12px -8px; z-index: 5; display: grid; place-items: center; align-content: center; gap: 12px; background: radial-gradient(60% 40% at 50% 40%, rgba(90, 53, 208, .6), transparent 70%), rgba(18, 15, 36, .95); opacity: 0; pointer-events: none; transition: opacity .3s; }
.bws-play.is-on { opacity: 1; }
.bws-play-art { width: 62%; display: grid; place-items: center; }
.bws-play-art img { width: 100%; height: auto; animation: bws-tap 1.6s ease-in-out infinite; }
@keyframes bws-tap { 50% { transform: scale(1.03) rotate(-1deg); } }
.bws-play-stars { display: flex; gap: 4px; color: var(--zap); opacity: 0; }
.bws-play-stars .st { width: 30px; height: 30px; }
.bws-play.is-win .bws-play-stars { opacity: 1; animation: bst-pop .35s ease-out; }
.bws-play .bws-solved { top: 72%; }
.bws-play.is-win .bws-solved { animation: bws-banner 1.4s ease-out forwards; }

/* daily: the pass line scene */
.bws-dpass { position: relative; display: grid; gap: 12px; max-width: 420px; margin: 0 auto; padding: 22px 18px; border-radius: 30px; background: radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--sa) 28%, transparent), transparent 70%), linear-gradient(180deg, var(--stop), #1c1438 60%, #120f24); box-shadow: var(--shadow-pop); container-type: inline-size; }
.bws-dp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(14, 11, 26, .5); color: var(--ink); font-weight: 800; transition: background-color .3s; }
.bws-dp-row .bws-dc-tier { font-size: .8rem; padding: 2px 8px; border-radius: 6px; }
.bws-dp-ok { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--well); color: transparent; box-shadow: inset 0 0 0 2px rgba(237, 231, 255, .15); margin-left: auto; transition: background-color .3s, color .3s; }
.bws-dp-ok .bws-i { width: 14px; height: 14px; }
.bws-dp-row.is-done { background: rgba(63, 193, 165, .16); }
.bws-dp-row.is-done .bws-dp-ok { background: var(--mint); color: var(--outline); animation: bst-pop .3s ease-out; }
.bws-dp-row .bws-stc { font-size: 1rem; }
.bws-dp-strip { margin-top: 6px; }

/* ---------- the pass path ---------- */
.bws-pathwrap { max-width: 440px; margin: 0 auto; }
.bws-pathcard { position: relative; overflow: hidden; height: 600px; border-radius: 34px; background: radial-gradient(90% 30% at 50% 0%, color-mix(in srgb, var(--sa) 35%, transparent), transparent 70%), linear-gradient(180deg, var(--stop), #1c1438 55%, #120f24); box-shadow: var(--shadow-pop), inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--ink); container-type: inline-size; }
.bws-path-head { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 14px 16px 26px; background: linear-gradient(180deg, var(--stop) 60%, transparent); }
.bws-path-head .bws-x { position: static; margin-left: auto; }
.bws-path-st { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--well); font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums; }
.bws-path-st .bws-stamp { font-size: 15px; }
.bws-track { position: absolute; inset: 0; }
.bws-path { position: relative; padding: 76px 18px 90px; transition: transform .7s cubic-bezier(.3, .9, .3, 1); }
.bws-trk { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.bws-trk path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bws-trk .is-bg { stroke: #0e0b1a; stroke-width: 16; }
.bws-trk .is-in { stroke: #2b2450; stroke-width: 10; }
.bws-trk .is-done { stroke: #ffd400; stroke-width: 10; transition: d .4s; }
.bws-stns { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6.5cqw; row-gap: 7cqw; }
.bws-stn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 1 / 1.12; padding: 6px 4px 6px; border-radius: 18px; background: linear-gradient(180deg, #2b2550, #241e45); box-shadow: inset 0 0 0 2.5px var(--outline), 0 4px 0 var(--outline); transition: box-shadow .25s, opacity .25s, transform .15s; opacity: .72; }
.bws-stn.is-stars { background: linear-gradient(180deg, #241e45, #1d1838); opacity: .6; }
.bws-stn.is-big { box-shadow: inset 0 0 0 3px #ffb84d, 0 4px 0 var(--outline), 0 0 14px rgba(255, 212, 0, .25); opacity: .92; }
.bws-stn.is-final { aspect-ratio: auto; height: 33cqw; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 14px; border-radius: 24px; }
.bws-stn.is-next { opacity: 1; box-shadow: inset 0 0 0 3px var(--sa), 0 4px 0 var(--outline), 0 0 14px color-mix(in srgb, var(--sa) 50%, transparent); }
.bws-stn.is-ready, .bws-stn.is-got { opacity: 1; }
.bws-stn.is-ready { box-shadow: inset 0 0 0 4px var(--zap), 0 4px 0 var(--outline), 0 0 18px rgba(255, 212, 0, .7); animation: bst-pop .35s ease-out; }
.bws-stn.is-press { transform: scale(.92); }
.bws-stn-no { position: absolute; left: -6px; top: -6px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--well); color: var(--ink); font-family: var(--display); font-style: normal; font-weight: 700; font-size: .68rem; box-shadow: 0 0 0 2px var(--outline); }
.bws-stn.is-ready .bws-stn-no, .bws-stn.is-got .bws-stn-no { background: var(--zap); color: var(--outline); }
.bws-stn .bws-sp { flex: 1; width: 82%; min-height: 0; }
.bws-stn .bws-sp.is-part .bws-pic { width: 100%; transform: scale(1.18) translateY(4%); }
.bws-stn .bws-sp.is-stars, .bws-stn .bws-sp.is-egg { width: 54%; }
.bws-stn .bws-sp.is-victory .bws-fxpic { width: 118%; }
.bws-stn.is-final .bws-sp { flex: none; width: 34%; height: 100%; }
.bws-stn.is-final .bws-sticker { font-size: .82rem; }
.bws-stn.is-final .bws-stn-foot { position: absolute; right: 16px; bottom: 12px; }
.bws-stn-plus { font-family: var(--display); font-size: .95rem; color: var(--zap); text-shadow: 0 1.5px 0 var(--outline); margin-top: -4px; }
.bws-stn-foot { display: grid; place-items: center; height: 22px; }
.bws-stn-need { display: inline-flex; align-items: center; gap: 2px; font-size: .7rem; font-weight: 800; color: var(--muted-app); }
.bws-stn.is-next .bws-stn-need { color: var(--ink); }
.bws-stn-need .bws-stamp { font-size: 12px; }
.bws-stn-go { display: none; padding: 2px 9px; border-radius: 999px; background: var(--zap); color: var(--outline); font-weight: 900; font-size: .64rem; box-shadow: inset 0 0 0 1.5px var(--outline), 0 2px 0 var(--outline); }
.bws-stn.is-ready .bws-stn-go { display: inline-block; animation: bws-breath 1.4s ease-in-out infinite; }
.bws-stn.is-ready .bws-stn-need, .bws-stn.is-got .bws-stn-need { display: none; }
@keyframes bws-breath { 50% { transform: scale(1.07); } }
.bws-stn-ok { position: absolute; right: -6px; top: -6px; z-index: 1; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--outline); box-shadow: 0 0 0 2px var(--outline); }
.bws-stn-ok .bws-i { width: 12px; height: 12px; }
.bws-stn.is-got .bws-stn-ok { display: grid; animation: bst-pop .3s ease-out; }
.bws-stn-spk { position: absolute; right: -7px; top: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--zap); color: var(--outline); box-shadow: 0 0 0 2px var(--outline); }
.bws-stn-spk .bws-i { width: 12px; height: 12px; }
.bws-stn.is-got .bws-stn-spk { display: none; }
.bws-allbtn { position: absolute; z-index: 4; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 16px; background: var(--zap); color: var(--outline); font-weight: 900; font-size: .9rem; white-space: nowrap; box-shadow: inset 0 0 0 2.5px var(--outline), 0 5px 0 var(--outline); transform: translate(-50%, 120px); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.bws-allbtn .bws-i { width: 16px; height: 16px; }
.bws-allbtn.is-on { transform: translate(-50%, 0); }
.bws-allbtn.is-press { transform: translate(-50%, 0) scale(.92); }
.bws-reveal { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 40% at 50% 45%, color-mix(in srgb, var(--sa) 40%, transparent), transparent 70%), rgba(18, 15, 36, .93); opacity: 0; pointer-events: none; transition: opacity .3s; }
.bws-reveal.is-on { opacity: 1; }
.bws-gift { width: 46%; transform-origin: 50% 100%; transition: opacity .2s, transform .3s; }
.bws-gift.is-wob, .bws-reveal-egg.is-wob { animation: bws-wobble .4s ease-in-out; }
.bws-reveal-egg { position: absolute; width: 36%; aspect-ratio: 200 / 222; transform-origin: 50% 100%; display: none; transition: opacity .2s, transform .3s; }
.bws-reveal-egg img { position: absolute; inset: 0; width: 100%; height: auto; }
.bws-reveal-egg .is-2 { opacity: 0; }
.bws-reveal-egg.is-crack .is-2 { opacity: 1; }
.bws-reveal.is-egg .bws-gift { display: none; }
.bws-reveal.is-egg .bws-reveal-egg { display: block; }
.bws-reveal.is-open .bws-gift, .bws-reveal.is-open .bws-reveal-egg { opacity: 0; transform: scale(1.5); }
.bws-reveal-new { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; padding: 0 16px; text-align: center; opacity: 0; transform: scale(.2); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.bws-reveal.is-open .bws-reveal-new { opacity: 1; transform: none; }
.bws-reveal-pic { width: 60%; }
.bws-reveal-new small { font-size: .78rem; color: var(--muted-app); font-weight: 600; }
.bws-sticker.is-new { white-space: normal; }

/* ---------- how long it takes ---------- */
.bws-pace { position: relative; display: grid; gap: 14px; padding: 22px 20px 18px; border-radius: 30px; background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--sa) 28%, transparent), transparent 70%), linear-gradient(180deg, var(--stop), #1c1438 60%, #120f24); box-shadow: var(--shadow-pop); color: var(--ink); }
.bws-pace-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bws-pace-day { font-family: var(--display); font-size: 1.7rem; font-variant-numeric: tabular-nums; min-width: 5ch; }
.bws-pace-len { font-size: .8rem; color: var(--muted-app); font-weight: 700; }
.bws-marks { position: relative; list-style: none; margin: 0 10px 0 150px; padding: 0; height: 44px; }
.bws-marks li { position: absolute; left: var(--x); bottom: 0; width: 0; display: grid; justify-items: center; }
.bws-marks li i { width: 3px; height: 8px; border-radius: 2px; background: #3a3266; transition: background-color .3s; }
.bws-marks li.is-part i, .bws-marks li.is-victory i, .bws-marks li.is-egg i { height: 12px; }
.bws-marks li.is-on i { background: var(--zap); }
.bws-marks .bws-sp.is-mini { position: absolute; bottom: 14px; width: 30px; transition: transform .3s, filter .3s; filter: grayscale(.6) brightness(.8); }
.bws-marks .bws-sp.is-mini .bws-pic { transform: scale(1.3) translateY(6%); }
.bws-marks .bws-sp.is-mini.is-egg img, .bws-marks .bws-sp.is-mini.is-stars img { width: 70%; }
.bws-marks li.is-on .bws-sp.is-mini { filter: none; transform: scale(1.12); }
.bws-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bws-run { display: grid; grid-template-columns: 140px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.bws-run-who { grid-row: span 2; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; }
.bws-run-who .bst-dot { margin: 0 -2px 0 0; display: inline-block; width: 8px; height: 8px; }
.bws-run-who b { grid-column: 1 / -1; font-size: .92rem; }
.bws-run-who small { grid-column: 1 / -1; font-size: .72rem; color: var(--muted-app); font-weight: 700; }
.bws-run-bar { position: relative; height: 18px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 2px #0e0b1a; margin-right: 10px; }
.bws-run-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--bws-run, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--sa), var(--zap)); box-shadow: inset 0 0 0 2px #0e0b1a; transition: width .15s linear; }
.bws-run-mon { position: absolute; left: var(--bws-run, 0%); bottom: 2px; width: 34px; height: auto; transform: translateX(-50%); transition: left .15s linear; }
.bws-run-day { font-size: .72rem; font-weight: 800; color: var(--muted-app); margin-top: 4px; }
.bws-run.is-done .bws-run-day { color: var(--zap); }
.bws-pace-axis { display: flex; justify-content: space-between; margin: 0 10px 0 150px; font-size: .7rem; color: var(--muted-app); font-weight: 700; }
.bws-pace-axis .bws-stamp { font-size: 12px; }
@media (max-width: 560px) {
	.bws-marks, .bws-pace-axis { margin-left: 0; }
	.bws-run { grid-template-columns: 1fr; }
	.bws-run-who { grid-row: auto; grid-template-columns: auto auto auto 1fr; }
	.bws-run-who b { grid-column: auto; margin-left: 6px; }
	.bws-run-who small { grid-column: auto; margin-left: 6px; }
	.bws-run-bar { margin: 8px 6px 0; }
}

/* the year: victory effect tile */
.bws-yparts li.is-victory { box-shadow: inset 0 0 0 2px #ffb84d; }
.bws-yparts .bws-fxpic { width: 100%; }
.bws-yparts .is-stars .bws-pile { width: 60%; height: auto; margin: 16% 0 8%; }

/* ---------- daily: today ---------- */
.bws-todaybox { padding: clamp(14px, 3vw, 24px); border-radius: 30px; background: radial-gradient(90% 40% at 50% 0%, rgba(123, 77, 255, .35), transparent 70%), linear-gradient(180deg, #2a1c63, #17112f 60%, #120f24); color: #ede7ff; box-shadow: var(--shadow-pop); }
.bws-today-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bws-today-tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: rgba(14, 11, 26, .5); }
.bws-today-tabs button { border: 0; padding: 7px 14px; border-radius: 10px; background: transparent; color: #a59cc9; font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
.bws-today-tabs button.is-on { background: var(--zap); color: #120f24; }
.bws-today-date { font-family: var(--display); font-size: 1.25rem; }
.bws-todays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; container-type: inline-size; }
.bws-today { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px; border-radius: 22px; background: linear-gradient(180deg, #2e2754, #241e45); box-shadow: inset 0 0 0 2.5px #0e0b1a, 0 5px 0 #0e0b1a; }
.bws-today.is-teuflisch { background: radial-gradient(90% 90% at 100% 100%, rgba(255, 90, 31, .4), transparent 70%), linear-gradient(180deg, #4a1e3a, #2a1230); box-shadow: inset 0 0 0 3px #ff7a1a, 0 5px 0 #0e0b1a, 0 0 22px rgba(255, 74, 26, .35); }
.bws-today-art { display: grid; place-items: center; border-radius: 16px; background: rgba(26, 21, 51, .75); aspect-ratio: 1.3; overflow: hidden; }
.bws-today-art .bws-art { width: 70%; }
.bws-today-art .bws-art.is-none { width: 40%; font-size: 2rem; }
.bws-today-text { display: grid; justify-items: start; gap: 6px; }
.bws-today-text .bws-dc-tier { font-size: .85rem; padding: 2px 9px; border-radius: 6px; }
.bws-today-text > b { font-family: var(--display); font-size: 1.45rem; line-height: 1.05; }
.bws-today-lv { font-weight: 700; color: #c9bfff; }
.bws-today-lv b { color: #fff; font-size: 1.1rem; }
.bws-today .bws-dc-rw { font-size: .95rem; gap: 4px; }
.bws-today .bws-dc-rw .st { width: 15px; height: 15px; }
.bws-today .bws-stamp { font-size: 17px; }
.bws-today-go { justify-self: stretch; display: block; text-align: center; padding: 9px 14px; border-radius: 13px; background: #ffd400; color: #120f24; font-weight: 900; text-decoration: none; box-shadow: inset 0 0 0 2px #0e0b1a, 0 4px 0 #0e0b1a; transition: transform .15s; }
.bws-today-go:hover { transform: translateY(-2px); color: #120f24; }
.bws-today.is-land { animation: bws-land .35s cubic-bezier(.3, 1.6, .5, 1); }
.bws-today-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; font-size: .9rem; color: #c9bfff; }
.bws-today-swap .bws-i { width: 16px; height: 16px; }
.bws-today-swap [data-swap] { padding: 3px 10px; border-radius: 999px; background: rgba(14, 11, 26, .5); color: #fff; font-weight: 700; }
.bws-today-note { margin: 10px 0 0; font-size: .8rem; color: #8f86b8; }
@media (max-width: 760px) {
	.bws-todays { grid-template-columns: 1fr; }
	.bws-today { grid-template-columns: 120px 1fr; grid-template-rows: auto auto; }
	.bws-today-art { grid-row: span 2; aspect-ratio: 1; }
	.bws-today-go { grid-column: 2; }
}

/* the daily hero phone */
.bws-hero.is-daily .bst-phone { max-width: 320px; }

/* ---------- reduced motion: last frames, nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
	.bws-pro-wrap *, .bws-victory *, .bws-todaybox *, .bws-pace *, .bws-dpass *, .bws-pathwrap * { animation: none !important; transition: none !important; }
}

/* daily screen: the cards share the height (DailyScreen), pictures stay in their window */
.bws-daily-screen .bws-dcs { flex: 1; grid-template-rows: minmax(0, .8fr) minmax(0, 1fr); min-height: 0; }
.bws-dc > .bws-dc-face { height: 100%; box-sizing: border-box; }
.bws-dc:not(.is-wide) .bws-dc-art { flex: 1; min-height: 0; aspect-ratio: auto; }
.bws-dc.is-wide .bws-dc-art { aspect-ratio: auto; align-self: stretch; }
.bws-dc-art .bws-art { width: auto; height: auto; max-width: 90%; max-height: 90%; }
.bws-daily-screen .bws-strip { margin-top: 0; }
.bws-play-art { width: 48%; }
.bws-today-art { aspect-ratio: 1.7; }
.bws-today-art .bws-art { width: auto; max-width: 70%; max-height: 82%; }

/* pass hero: the card fills the screen like the sheet */
.bws-pass-card { flex: 1; margin-bottom: 8px; justify-content: center; }
.bws-podium { width: 92%; }
.bws-yparts { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 520px) { .bws-yparts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bws-vmon { width: 28%; bottom: 1%; }
.bws-today-art { position: relative; }
.bws-today-art .bws-art:not(.is-none) { position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; max-height: none; object-fit: contain; }
.bws-dc-art { position: relative; }
.bws-dc-art .bws-art:not(.is-none) { position: absolute; inset: 6%; width: 88%; height: 88%; max-width: none; max-height: none; object-fit: contain; }