/* Final Boss Fiesta: board HUD, banners, choice panels, the minigame vote and the ceremony. Sized in --px like fiesta.css. */
.bd-hud { position: absolute; inset: 0; pointer-events: none; }
.bd-top { position: absolute; left: calc(var(--px) * 5); right: calc(var(--px) * 5); top: calc(var(--px) * 4); display: flex; justify-content: space-between; align-items: center; font-family: var(--font); }
/* The pill backdrop skips the goal: a `background` shorthand here used to wipe the .shimmer gradient the goal's text is
   clipped to, which left "Collect the most Trophies!" transparent (invisible) on the board and on the Stairway. */
.bd-top > span:not(.bd-goal) { background: rgba(20,14,40,.72); border-radius: calc(var(--px) * 6); padding: calc(var(--px) * 1.5) calc(var(--px) * 6); font-size: calc(var(--px) * 8); }
.bd-top .bd-goal { font-size: calc(var(--px) * 11); filter: drop-shadow(0 calc(var(--px) * 1) 0 rgba(40,20,0,.85)) drop-shadow(0 0 calc(var(--px) * 3) rgba(20,14,40,.6)); }
.bd-top b { color: var(--gold); font-weight: normal; }
.bd-top em { font-style: normal; color: #ff8a2b; margin-left: calc(var(--px) * 3); animation: blink 1.2s infinite; }
.bd-cards { position: absolute; left: 0; right: 0; bottom: calc(var(--px) * 3); display: flex; justify-content: center; gap: calc(var(--px) * 2.5); }
.bd-card {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "pt nm pl" "pt tr gm" "pt it it"; gap: 0 calc(var(--px) * 2.5); align-items: center;
  background: linear-gradient(color-mix(in srgb, var(--c) 24%, rgba(20,14,40,.88)), rgba(20,14,40,.88) 70%); border-radius: calc(var(--px) * 5);
  padding: calc(var(--px) * 1.5) calc(var(--px) * 3.5) calc(var(--px) * 1.5) calc(var(--px) * 1.5);
  border-bottom: calc(var(--px) * 1.5) solid var(--c); font-family: var(--font); font-size: calc(var(--px) * 6.5); min-width: calc(var(--px) * 64); transition: transform .25s;
  box-shadow: 0 calc(var(--px) * 1.5) calc(var(--px) * 4) rgba(0,0,0,.35);
}
.bd-card .portrait { grid-area: pt; width: calc(var(--px) * 19) !important; height: calc(var(--px) * 19) !important; }
.bd-card .nm { grid-area: nm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--px) * 40); }
.bd-card .pl { grid-area: pl; opacity: .8; font-size: calc(var(--px) * 5); }
.bd-card .tr { grid-area: tr; color: var(--gold); }
.bd-card .gm { grid-area: gm; color: #9fe8ff; }
.bd-card .it { grid-area: it; font-size: calc(var(--px) * 5); letter-spacing: calc(var(--px) * .5); }
.bd-card .it:empty { display: none; }
.bd-card .it i { font-style: normal; }
.bd-card.on { transform: translateY(calc(var(--px) * -4)) scale(1.08); box-shadow: 0 0 0 calc(var(--px) * 1) var(--c), 0 0 calc(var(--px) * 10) color-mix(in srgb, var(--c) 70%, transparent); }
/* Six or more players: step the cards down so eight still fit in one row (no :has() support = this compact size anyway). */
.bd-cards:has(> :nth-child(6)) { gap: calc(var(--px) * 2); }
.bd-cards:has(> :nth-child(6)) .bd-card { font-size: calc(var(--px) * 5.5); min-width: calc(var(--px) * 50); padding-right: calc(var(--px) * 2.5); }
.bd-cards:has(> :nth-child(6)) .bd-card .portrait { width: calc(var(--px) * 15) !important; height: calc(var(--px) * 15) !important; }
.bd-cards:has(> :nth-child(6)) .bd-card .nm { max-width: calc(var(--px) * 30); }
.bd-banner {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; background: linear-gradient(160deg, rgba(42,29,79,.95), rgba(20,14,40,.95));
  border-radius: calc(var(--px) * 8); padding: calc(var(--px) * 5) calc(var(--px) * 12); border: calc(var(--px) * 1) solid rgba(255,255,255,.2); max-width: calc(var(--px) * 360);
  animation: bannerIn .45s cubic-bezier(.2,1.5,.35,1) both; box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 16) rgba(0,0,0,.45);
}
.bd-banner b { display: block; font-family: var(--font); font-weight: normal; font-size: calc(var(--px) * 18); line-height: 1.05; }
.bd-banner span { display: block; font-size: calc(var(--px) * 7.5); font-weight: 800; opacity: .9; margin-top: calc(var(--px) * 2); }
.bd-banner.big b { font-size: calc(var(--px) * 28); color: var(--gold); text-shadow: 0 calc(var(--px) * 2) 0 #8a3b00; }
.bd-banner.gold { background: linear-gradient(160deg, #ffe36b, #ffb12b); color: #3a2400; }
@keyframes bannerIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.bd-panel {
  position: absolute; right: calc(var(--px) * 8); top: calc(var(--px) * 22); width: calc(var(--px) * 150); background: rgba(20,14,40,.9); border-radius: calc(var(--px) * 7);
  padding: calc(var(--px) * 5); border-left: calc(var(--px) * 2) solid var(--c); animation: popIn .3s cubic-bezier(.2,1.6,.4,1); pointer-events: none;
}
.bd-panel .who { display: flex; align-items: center; gap: calc(var(--px) * 2); font-family: var(--font); font-size: calc(var(--px) * 6); }
.bd-panel .who .portrait { width: calc(var(--px) * 12) !important; height: calc(var(--px) * 12) !important; }
.bd-panel h3 { font-family: var(--font); font-weight: normal; font-size: calc(var(--px) * 8.5); margin: calc(var(--px) * 2) 0; }
.bd-panel .op { background: rgba(255,255,255,.08); border-radius: calc(var(--px) * 3); padding: calc(var(--px) * 1.5) calc(var(--px) * 3); margin-top: calc(var(--px) * 1.5); font-family: var(--font); font-size: calc(var(--px) * 6.5); border: calc(var(--px) * .7) solid transparent; }
.bd-panel .op small { display: block; font-family: var(--body); font-size: calc(var(--px) * 4.5); opacity: .75; font-weight: 800; }
.bd-panel .op.sel { border-color: var(--gold); background: rgba(255,210,63,.18); }
.bd-panel .op.off { opacity: .45; }
.bd-panel .hint, .bd-vote .hint { font-size: calc(var(--px) * 5); opacity: .75; margin-top: calc(var(--px) * 2); font-weight: 800; }
.bd-vote { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; animation: voteIn .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes voteIn { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.bd-vote h3 { font-family: var(--font); font-weight: normal; font-size: calc(var(--px) * 14); text-shadow: 0 calc(var(--px) * 2) 0 rgba(0,0,0,.5); }
.bd-vote h3 .t { display: inline-block; min-width: calc(var(--px) * 14); background: var(--red); border-radius: 50%; font-size: calc(var(--px) * 9); padding: calc(var(--px) * 1); }
.bd-vote .cards { display: flex; gap: calc(var(--px) * 8); margin-top: calc(var(--px) * 5); }
.bd-vote .vc { width: calc(var(--px) * 130); background: linear-gradient(160deg, rgba(42,29,79,.96), rgba(20,14,40,.96)); border-radius: calc(var(--px) * 8); padding: calc(var(--px) * 6); border: calc(var(--px) * 1) solid rgba(255,255,255,.2); transition: transform .3s, opacity .3s; }
.bd-vote .vc b { display: block; font-family: var(--font); font-weight: normal; font-size: calc(var(--px) * 13); margin: calc(var(--px) * 2) 0; }
.bd-vote .vc p { font-size: calc(var(--px) * 6); font-weight: 800; opacity: .85; min-height: calc(var(--px) * 14); }
.bd-vote .vc .dots { display: flex; gap: calc(var(--px) * 2); justify-content: center; min-height: calc(var(--px) * 7); margin-top: calc(var(--px) * 3); }
.bd-vote .vc .dots i { width: calc(var(--px) * 6); height: calc(var(--px) * 6); border-radius: 50%; border: calc(var(--px) * .7) solid #fff; animation: popIn .25s cubic-bezier(.2,1.6,.4,1); }
.bd-vote .vc.win { transform: scale(1.1); border-color: var(--gold); box-shadow: 0 0 calc(var(--px) * 14) rgba(255,210,63,.6); }
.bd-vote .vc.lose { opacity: .35; transform: scale(.92); }
/* The ceremony sits around the podium scene: the title on top, a slim results panel on the right, buttons under it. */
.ceremony { position: absolute; inset: 0; pointer-events: none; }
.ceremony .res-head { position: absolute; top: calc(var(--px) * 22); left: 0; right: 0; text-align: center; font-family: var(--font); font-size: calc(var(--px) * 20); text-shadow: 0 calc(var(--px) * 2) 0 rgba(0,0,0,.5); }
.ceremony .res-head .crownish { color: var(--gold); }
.ceremony .res-list { position: absolute; right: calc(var(--px) * 6); top: calc(var(--px) * 52); width: calc(var(--px) * 118); display: flex; flex-direction: column; gap: calc(var(--px) * 1.5); }
.ceremony .res-row { font-size: calc(var(--px) * 6.5); padding: calc(var(--px) * 1) calc(var(--px) * 3); gap: calc(var(--px) * 2); min-width: 0; animation: rowIn .45s cubic-bezier(.2,1.4,.4,1) both; }
.ceremony .res-row .place { min-width: calc(var(--px) * 13); }
.ceremony .res-row .portrait { width: calc(var(--px) * 11) !important; height: calc(var(--px) * 11) !important; }
.ceremony .res-row .lbl { font-size: calc(var(--px) * 5.5); margin-left: auto; white-space: nowrap; }
.ceremony .cer-foot { position: absolute; right: calc(var(--px) * 6); bottom: calc(var(--px) * 8); width: calc(var(--px) * 118); display: flex; gap: calc(var(--px) * 3); justify-content: center; pointer-events: auto; }
.ceremony .cer-foot .btn { font-size: calc(var(--px) * 7); padding: calc(var(--px) * 2.5) calc(var(--px) * 6); }
.resume-box { margin-top: calc(var(--px) * 6); background: rgba(20,14,40,.75); border-radius: calc(var(--px) * 6); padding: calc(var(--px) * 4) calc(var(--px) * 6); display: flex; gap: calc(var(--px) * 5); align-items: center; font-size: calc(var(--px) * 6); font-weight: 800; }