/* Festival (panels-festival.js): Lucky Wheel, Scavenger's Album, Dig Site. Built on the design tokens and the shared
   .ui-* classes of style.css; --fa / --fb / --fi are the accent colours a holiday swaps in. */
.fs { --fa: var(--c-amber); --fb: var(--c-amber-lo); --fi: var(--c-rust-1); }
.fs.busy .fs-play button, .fs.busy .fs-buy, .fs.busy .fs-tabs button { pointer-events: none; opacity: .6; }
.fs .ui-card { margin-bottom: 10px; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fs-chips .ui-chip { white-space: normal; text-align: left; }
.fs-mini { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-2); white-space: nowrap; }

/* ---------- banner and schedule ---------- */
.fs-banner { border-color: var(--fb); background: linear-gradient(135deg, color-mix(in srgb, var(--fa) 22%, transparent), transparent 60%), var(--surf-card); }
.fs-banner-top { display: flex; align-items: center; gap: 10px; }
.fs-banner-ico { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; font-size: 30px; border-radius: var(--r-lg); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fa) 70%, #fff), var(--fb) 70%); border: 2px solid rgba(255,255,255,.35); box-shadow: var(--sh-1); }
.fs-banner-ico .ico { width: 38px; height: 38px; vertical-align: 0; }
.fs-banner-top .mid { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fs-banner-top .mid small { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.fs-banner-top .mid small.fs-hol { color: var(--fa); }
.fs-banner-top .mid b { font-size: var(--fs-xl); font-weight: 800; color: var(--c-amber-pale); line-height: 1.15; }
.fs-banner-top .mid span { font-size: var(--fs-sm); color: var(--c-text-2); }
.fs-ends { flex: 0 0 auto; display: grid; justify-items: end; }
.fs-ends small { font-size: var(--fs-xs); color: var(--c-muted); }
.fs-ends b { font: 800 var(--fs-md)/1.2 var(--font-mono); color: var(--fa); white-space: nowrap; }
.fs-sched { display: flex; gap: 6px; margin-top: 10px; }
.fs-sched-it { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: var(--fs-sm); color: var(--c-text-2); background: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--well); white-space: nowrap; overflow: hidden; }
.fs-sched-it > i { flex: 0 0 auto; font-style: normal; font-size: 18px; line-height: 1; }
.fs-sched-it > span { min-width: 0; display: grid; line-height: 1.2; }
.fs-sched-it b { font-weight: 800; }
.fs-sched-it small { color: var(--c-muted); font-family: var(--font-mono); font-size: 10px; }
.fs-sched-it.now { border-color: var(--fb); background: color-mix(in srgb, var(--fa) 16%, var(--c-ink)); }
.fs-sched-it.now b, .fs-sched-it.now small { color: var(--fa); }
.fs-tabs > button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.fs-tabs > button.live:not(.active) { color: var(--fa); }
.fs-tabs > button .ui-badge { position: absolute; top: -4px; right: -2px; }
.fs-closed { margin-bottom: 10px; padding: 14px 16px; }
.fs-stage { position: relative; display: grid; place-items: center; margin: 2px 0 10px; }
.fs-stage.off canvas { filter: saturate(.35) brightness(.7); }
.fs-stage canvas { display: block; max-width: 100%; touch-action: manipulation; }

/* ---------- wheel ---------- */
.fs-wheel { padding: 6px 0 2px; background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--fa) 22%, transparent), transparent 70%); }
.fs-play { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.fs-tokens, .fs-stamps { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fs-tokens .big, .fs-stamps .big { font-size: 30px; line-height: 1; }
.fs-tokens .big .ico, .fs-stamps .big .ico { width: 34px; height: 34px; vertical-align: 0; }
.fs-tokens b, .fs-stamps b { display: block; font: 800 var(--fs-2xl)/1 var(--font); color: var(--c-amber-hi); }
.fs-tokens small, .fs-stamps small { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
.fs-spin { min-width: 84px; }
button.primary.fs-spin { min-width: 96px; font-size: 17px; }
.fs-buy { width: 100%; margin-bottom: 10px; }
.fs-pity-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fs-pity-head b { color: var(--c-amber-hi); }
.fs-pity-head span { font-size: var(--fs-sm); color: var(--c-text-2); }
.fs-pity .fs-chips { margin-top: 8px; }
.fs-tiers { margin-bottom: 12px; }
.fs-tier-row { display: flex; gap: 6px; margin-top: 6px; }
.fs-tier { flex: 1 1 0; min-width: 0; min-height: 76px; padding: 6px 2px; display: grid; justify-items: center; align-content: start; gap: 1px; border-radius: var(--r-md); background: var(--surf-card); border: 1px solid var(--c-line); box-shadow: var(--bevel); }
.fs-tier .ic { font-size: 24px; line-height: 1.1; filter: grayscale(.7) brightness(.8); }
.fs-tier .ic .ico { width: 28px; height: 28px; vertical-align: 0; }
.fs-tier b { font-size: var(--fs-sm); font-weight: 800; color: var(--c-text-2); }
.fs-tier small { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; line-height: 1.25; }
.fs-tier.ready { border-color: var(--c-amber); background: linear-gradient(#4a3a12, #2a200a); box-shadow: var(--bevel), var(--sh-glow); animation: uiPulse 2.4s ease-in-out infinite; }
.fs-tier.ready .ic { filter: none; } .fs-tier.ready b { color: var(--c-amber-hi); }
.fs-tier.open { opacity: .6; } .fs-tier.open .ic { filter: grayscale(1); }
.fs-src-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.fs-src-head b { color: var(--c-amber-hi); }
.fs-src-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-md); }
.fs-src-row:last-of-type { border-bottom: 0; }
.fs-src-row > i { flex: 0 0 24px; font-style: normal; font-size: 18px; text-align: center; }
.fs-src-row .mid { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fs-src-row .ui-bar { height: 6px; }
.fs-src-row > b { flex: 0 0 auto; min-width: 30px; text-align: right; font: 800 var(--fs-sm)/1 var(--font-mono); color: var(--c-text-2); }
.fs-src-row.full > b { color: var(--c-good); } .fs-src-row.full .mid span { color: var(--c-muted); }
.fs-odd { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-md); }
.fs-odd:last-child { border-bottom: 0; }
.fs-odd > i { flex: 0 0 10px; height: 22px; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.fs-odd .ic { flex: 0 0 22px; text-align: center; }
.fs-odd .nm { flex: 1; min-width: 0; color: var(--c-text-2); }
.fs-odd b { font: 800 var(--fs-md)/1 var(--font-mono); color: var(--c-text); }
.fs-odd.top .nm, .fs-odd.top b { color: var(--c-amber-hi); }

/* ---------- results ---------- */
.fs-got { padding: 12px; border-radius: var(--r-lg); background: var(--c-ink); border: 1px solid var(--c-line); box-shadow: var(--well); margin-bottom: 8px; }
.fs-got.jackpot { border-color: var(--c-amber); background: radial-gradient(120% 90% at 50% 0%, rgba(240,180,60,.28), transparent 70%), var(--c-ink); box-shadow: var(--well), var(--sh-glow); }
.fs-got-h { margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--c-amber); }
.fs-spins { display: grid; gap: 4px; margin-bottom: 10px; }
.fs-spin-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-left: 4px solid var(--c); border-radius: var(--r-xs); background: rgba(255,255,255,.04); font-size: var(--fs-md); }
.fs-spin-row i { font-style: normal; } .fs-spin-row b { flex: 1; }
.fs-spin-row small { color: var(--c-amber); font-size: var(--fs-xs); }
.fs-spin-row.top { background: rgba(240,180,60,.18); } .fs-spin-row.top b { color: var(--c-amber-hi); }
.fs-score { display: grid; justify-items: center; margin-bottom: 6px; }
.fs-score b { font: 900 40px/1 var(--font); color: var(--c-amber-hi); text-shadow: 0 2px 0 #000; }
.fs-score small { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- album ---------- */
.fs-new { margin-bottom: 10px; padding: 8px 12px; text-align: center; font-weight: 800; color: var(--c-amber-ink); background: var(--surf-amber); border-radius: var(--r-md); box-shadow: var(--bevel-hi), var(--sh-1); }
.fs-album-top { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; margin-bottom: 10px; }
.fs-album-top .ui-btn { padding: 6px 9px; font-size: var(--fs-sm); white-space: normal; line-height: 1.15; max-width: 132px; }
.fs-set { border-left: 4px solid var(--rc); }
.fs-set.ready { border-color: var(--c-amber); box-shadow: var(--bevel), var(--sh-glow); }
.fs-set-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fs-set-head b { color: var(--c-text); font-weight: 800; }
.fs-rar { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: var(--r-pill); color: #0b110d; background: var(--rc); }
.fs-count { margin-left: auto; font: 800 var(--fs-sm)/1 var(--font-mono); color: var(--c-muted); }
.fs-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fs-card { position: relative; min-width: 0; padding: 6px 2px 5px; display: grid; justify-items: center; gap: 2px; aspect-ratio: 3 / 4; align-content: center; border-radius: var(--r-md); border: 2px solid var(--rc);
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 38%, #1b2520), #121a15 75%); box-shadow: var(--bevel), var(--sh-1); }
.fs-card .art { font-size: 30px; line-height: 1.1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.fs-card .art .ico { width: 38px; height: 38px; vertical-align: 0; }
.fs-card small { font-size: 10px; line-height: 1.15; font-weight: 700; color: var(--c-text); text-align: center; overflow-wrap: anywhere; }
.fs-card .ui-badge { position: absolute; top: -6px; right: -5px; }
.fs-card.missing { border-style: dashed; border-color: var(--c-line-hi); background: var(--c-ink); box-shadow: var(--well); }
.fs-card.missing .art { filter: grayscale(1) brightness(.35) contrast(.8); opacity: .8; }
.fs-card.missing small { color: var(--c-faint); }
.fs-set-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.fs-set-foot .fs-chips { flex: 1; min-width: 0; }
.fs-set-foot button { flex: 0 0 auto; min-width: 86px; }
.fs-done { flex: 0 0 auto; font-weight: 800; color: var(--c-good); }
.fs-set.done, .fs-grand.done { opacity: .75; }
.fs-shop .ic { flex: 0 0 28px; font-size: 22px; text-align: center; }
.fs-shop .ui-row b { font-weight: 700; }
.fs-foot { margin: 6px 2px 0; }
.fs-card-big { width: 120px; aspect-ratio: 3 / 4; margin: 0 auto 10px; display: grid; place-items: center; font-size: 60px; border-radius: var(--r-lg); border: 3px solid var(--rc); background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 45%, #1b2520), #121a15 75%); box-shadow: var(--sh-2); }
.fs-card-big .ico { width: 78px; height: 78px; vertical-align: 0; }
.fs-card-big.missing { border-style: dashed; } .fs-card-big.missing span { filter: grayscale(1) brightness(.4); }
.fs-mate-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.fs-mate-btns button { min-width: 44px; min-height: var(--tap); padding: 4px 8px; font-size: 20px; }

/* ---------- dig ---------- */
.fs-dig-hud { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.fs-hud-cell { min-width: 0; padding: 6px 8px; display: grid; gap: 3px; background: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--well); }
.fs-hud-cell small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.fs-hud-cell b { font: 800 var(--fs-xl)/1 var(--font); color: var(--c-amber-hi); }
.fs-shovels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; align-items: end; height: 18px; }
.fs-shovels i { height: 8px; border-radius: 2px; background: #2a3329; }
.fs-shovels i.on { height: 18px; background: linear-gradient(var(--c-steel-5), var(--c-steel-4)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.fs-dig-cv { border-radius: 14px; box-shadow: var(--sh-2); cursor: pointer; }
.fs-dig-cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; border-radius: 14px; background: rgba(8,12,9,.62); }
.fs-dig-cover b { font-size: var(--fs-xl); font-weight: 800; color: #fff; text-shadow: 0 2px 4px #000; }
.fs-dig-cover small { color: var(--c-text-2); }
.fs-dig-start { min-width: 200px; font-size: 17px; }
.fs-dig-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap); margin-bottom: 10px; }
.fs-dig-tools .fs-dig-start { min-width: 0; font-size: var(--fs-base); }
.fs-dig-msg { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 700; color: var(--c-text-2); }
.fs-dig-msg.good { color: var(--c-amber-hi); } .fs-dig-msg.bad { color: var(--c-blood-hi); }
.fs-leg { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--fs-md); color: var(--c-text-2); }
.fs-leg .num, .fs-leg .warn { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); background: #150d05; font-weight: 900; }
.fs-leg .num { color: #ffd76a; font-size: 18px; }
.fs-leg .warn { color: #fff; border: 2px solid var(--c-blood); }
.fs-leg-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.fs-best { margin-left: 6px; font-weight: 700; color: var(--c-muted); text-transform: none; letter-spacing: 0; }
.fs-rules p { margin: 0 0 10px; font-size: var(--fs-md); color: var(--c-text-2); }

/* ---------- holiday skin ---------- */
.fs-holiday .fs-banner b { color: color-mix(in srgb, var(--fa) 55%, #fff); }
.fs-holiday .ui-sec { color: var(--fa); }
.fs-holiday .fs-banner { background: radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--fb) 55%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--fa) 26%, transparent), transparent 55%), var(--surf-card); }

html.no-motion .fs-tier.ready { animation: none; }