/* Final Boss Fiesta — TV styles. Everything is sized in --px (one world pixel on screen), so the overlay scales with the
   letterboxed 480x270 stage on any TV, laptop or phone-as-TV. */
:root {
  --ink: #fff;
  --night: #140f26;
  --plum: #2a1d4f;
  --gold: #ffd23f;
  --gold2: #ffb12b;
  --pink: #ff6fc8;
  --red: #ff4d5e;
  --blue: #3f8cff;
  --green: #3ddc6f;
  --font: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--night); color: var(--ink); overflow: hidden; font-family: var(--body); }
body { -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }

#app { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 40%, #2a1d4f 0%, #140f26 70%); }
.fbf-stage-mount { position: fixed; inset: 0; }
.fbf-stage { position: absolute; overflow: hidden; box-shadow: 0 0 calc(var(--px) * 30) rgba(0, 0, 0, 0.5); border-radius: calc(var(--px) * 3); }
.fbf-out, .fbf-hud { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.fbf-hud { pointer-events: none; }
.fbf-ui { position: absolute; inset: 0; pointer-events: none; font-size: calc(var(--px) * 8); }
.fbf-ui > * { pointer-events: auto; }

/* ---------------------------------------------------------------- shared bits */
.shimmer {
  background: linear-gradient(100deg, var(--gold2) 0%, var(--gold) 30%, #fff8d0 45%, var(--gold) 60%, var(--gold2) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 4.5s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.portrait { image-rendering: pixelated; display: inline-block; vertical-align: middle; }
.ctrl { display: inline-flex; align-items: center; gap: calc(var(--px) * 2); font-family: var(--font); }
.ctrl svg { width: calc(var(--px) * 14); height: calc(var(--px) * 14); filter: drop-shadow(0 calc(var(--px) * 1) 0 rgba(0,0,0,.35)); }
.ctrl i { font-style: normal; opacity: .8; }
.ctrl b { font-weight: normal; margin-left: calc(var(--px) * 2); }
.btn {
  font-family: var(--font); border: 0; border-radius: calc(var(--px) * 6); padding: calc(var(--px) * 3) calc(var(--px) * 8);
  background: linear-gradient(#ffe36b, #ffb12b); color: #3a2400; box-shadow: 0 calc(var(--px) * 2) 0 #b86c00, 0 calc(var(--px) * 3) calc(var(--px) * 6) rgba(0,0,0,.35);
  font-size: calc(var(--px) * 9); transition: transform .12s;
}
.btn:hover, .btn.sel { transform: translateY(calc(var(--px) * -1)) scale(1.04); }
.btn:active { transform: translateY(calc(var(--px) * 1)); box-shadow: 0 calc(var(--px) * 1) 0 #b86c00; }
.btn.ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: 0 calc(var(--px) * 2) 0 rgba(0,0,0,.35); }
.btn.small { font-size: calc(var(--px) * 7); padding: calc(var(--px) * 2) calc(var(--px) * 5); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

.version-tag {
  position: fixed; right: 3px; bottom: 6px; font: 11px/1 ui-monospace, Menlo, Consolas, monospace; color: rgba(255,255,255,.32);
  pointer-events: none; z-index: 50; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0,0,0,.45);
  /* Runs up the right edge, not across the bottom: lying flat it sat on the last player chip of the board's score row. */
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* ---------------------------------------------------------------- title / lobby */
.lobby { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 1fr; padding: calc(var(--px) * 10) calc(var(--px) * 12) calc(var(--px) * 8); gap: calc(var(--px) * 8); pointer-events: none; }
.lobby > * { pointer-events: auto; }
.logo { font-family: var(--font); line-height: .9; text-shadow: 0 calc(var(--px) * 2) 0 rgba(0,0,0,.35); }
.logo .l1 { display: block; font-size: calc(var(--px) * 15); color: #fff; letter-spacing: .02em; transform: rotate(-3deg); transform-origin: left; }
.logo .l2 { display: block; font-size: calc(var(--px) * 34); transform: rotate(-3deg); transform-origin: left; filter: drop-shadow(0 calc(var(--px) * 3) 0 #8a3b00); }
.logo .l2 span { display: inline-block; animation: shimmer 4.5s linear infinite, bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(calc(var(--px) * -2.5)) rotate(-2deg); } }
.goal-line { font-family: var(--font); font-size: calc(var(--px) * 11); margin-top: calc(var(--px) * 5); }
.modes { display: flex; gap: calc(var(--px) * 3); margin-top: calc(var(--px) * 8); flex-wrap: wrap; }
.mode-tab {
  font-family: var(--font); border: calc(var(--px) * 1) solid rgba(255,255,255,.25); background: rgba(20,14,40,.6);
  border-radius: calc(var(--px) * 5); padding: calc(var(--px) * 3) calc(var(--px) * 5); font-size: calc(var(--px) * 8); text-align: left; min-width: calc(var(--px) * 60);
}
.mode-tab small { display: block; font-family: var(--body); font-size: calc(var(--px) * 5); opacity: .75; margin-top: calc(var(--px) * 1); font-weight: 700; }
.mode-tab.on { background: linear-gradient(#ffe36b, #ffb12b); color: #3a2400; border-color: #fff3b0; box-shadow: 0 calc(var(--px) * 2) 0 #b86c00; }
.mode-opts { display: flex; gap: calc(var(--px) * 3); margin-top: calc(var(--px) * 4); flex-wrap: wrap; align-items: center; font-size: calc(var(--px) * 6.5); }
.seg { display: inline-flex; background: rgba(20,14,40,.6); border-radius: calc(var(--px) * 4); padding: calc(var(--px) * 1); }
.seg button { border: 0; background: none; padding: calc(var(--px) * 1.5) calc(var(--px) * 4); border-radius: calc(var(--px) * 3); font-family: var(--font); font-size: calc(var(--px) * 6.5); }
.seg button.on { background: #fff; color: #2a1d4f; }
.start-row { margin-top: calc(var(--px) * 8); display: flex; gap: calc(var(--px) * 4); align-items: center; }
.start-row .btn.go { font-size: calc(var(--px) * 13); padding: calc(var(--px) * 4) calc(var(--px) * 14); }
.join-panel {
  background: rgba(20,14,40,.78); border-radius: calc(var(--px) * 8); padding: calc(var(--px) * 7); align-self: start;
  border: calc(var(--px) * 1) solid rgba(255,255,255,.12); box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 18) rgba(0,0,0,.4);
}
.join-top { display: flex; gap: calc(var(--px) * 6); align-items: center; }
.qr { width: calc(var(--px) * 62); height: calc(var(--px) * 62); background: #fff; border-radius: calc(var(--px) * 4); padding: calc(var(--px) * 3); image-rendering: pixelated; }
.code-box .lbl { font-size: calc(var(--px) * 6); opacity: .75; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.code-box .code { font-family: var(--font); font-size: calc(var(--px) * 30); letter-spacing: .12em; line-height: 1; }
.code-box .url { font-size: calc(var(--px) * 5.5); opacity: .8; margin-top: calc(var(--px) * 2); overflow-wrap: anywhere; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--px) * 3); margin-top: calc(var(--px) * 6); }
.slot {
  background: rgba(255,255,255,.06); border-radius: calc(var(--px) * 5); padding: calc(var(--px) * 2); text-align: center; min-height: calc(var(--px) * 30);
  border: calc(var(--px) * 1) dashed rgba(255,255,255,.18); font-size: calc(var(--px) * 5.5); position: relative;
}
.slot.full { border: calc(var(--px) * 1) solid var(--c); background: linear-gradient(color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 12%, transparent)); }
/* Only the seat that just filled pops; the others hold still when the list redraws. */
.slot.full.new { animation: popIn .35s cubic-bezier(.2,1.6,.4,1); }
.slot .portrait { width: calc(var(--px) * 15) !important; height: calc(var(--px) * 15) !important; margin-bottom: calc(var(--px) * -1); }
.slot .nm { display: block; font-family: var(--font); font-size: calc(var(--px) * 6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .tag { display: block; opacity: .7; font-size: calc(var(--px) * 4.5); font-weight: 800; letter-spacing: .04em; }
.solo-panel .code { letter-spacing: .01em; }
.slot .x { position: absolute; top: 0; right: calc(var(--px) * 1); border: 0; background: none; opacity: .6; font-size: calc(var(--px) * 6); }
.slot.empty { display: grid; place-items: center; opacity: .55; }
.join-hint { margin-top: calc(var(--px) * 5); font-size: calc(var(--px) * 5.5); opacity: .8; line-height: 1.35; }
.bot-row { display: flex; gap: calc(var(--px) * 3); margin-top: calc(var(--px) * 4); align-items: center; font-size: calc(var(--px) * 6); }
.gear { position: absolute; top: calc(var(--px) * 4); right: calc(var(--px) * 5); border: 0; background: rgba(20,14,40,.6); border-radius: 50%; width: calc(var(--px) * 16); height: calc(var(--px) * 16); font-size: calc(var(--px) * 9); z-index: 5; }
/* Room language picker (lobby row + Settings row): native names, readable at TV distance. */
.lang-row { margin-top: calc(var(--px) * 5); display: flex; align-items: center; gap: calc(var(--px) * 3); font-size: calc(var(--px) * 7); }
select.langsel, .modal select.langsel { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: calc(var(--px) * 6.5); color: #fff; background: rgba(20,14,40,.6);
  border: calc(var(--px) * 1) solid rgba(255,255,255,.25); border-radius: calc(var(--px) * 4); padding: calc(var(--px) * 1.5) calc(var(--px) * 4); cursor: pointer; }
select.langsel:focus-visible { outline: calc(var(--px) * 1) solid #ffd23f; outline-offset: 2px; }
select.langsel option { color: #222; background: #fff; }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------------------------------------------------------------- minigame overlay */
.mg-layer { position: absolute; inset: 0; pointer-events: none; }
.mg-card {
  position: absolute; left: 50%; top: calc(var(--px) * 10); transform: translateX(-50%); min-width: calc(var(--px) * 220); max-width: calc(var(--px) * 330);
  background: linear-gradient(160deg, rgba(42,29,79,.94), rgba(20,14,40,.94)); border-radius: calc(var(--px) * 9); padding: calc(var(--px) * 6) calc(var(--px) * 10) calc(var(--px) * 7);
  text-align: center; border: calc(var(--px) * 1.2) solid rgba(255,255,255,.18); box-shadow: 0 calc(var(--px) * 4) 0 rgba(0,0,0,.3), 0 0 calc(var(--px) * 30) rgba(0,0,0,.5);
}
.intro-in { animation: cardIn .6s cubic-bezier(.2,1.5,.35,1) both; }
@keyframes cardIn { from { transform: translateX(-50%) translateY(calc(var(--px) * -80)) rotate(-6deg); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.mg-type { display: inline-block; font-family: var(--font); font-size: calc(var(--px) * 6); padding: calc(var(--px) * 1) calc(var(--px) * 5); border-radius: calc(var(--px) * 4); background: #3f8cff; letter-spacing: .05em; }
.mg-type.t-1v3 { background: #ff8a2b; } .mg-type.t-2v2 { background: linear-gradient(90deg, #ff5a6e 50%, #4aa8ff 50%); }
.mg-type.t-coin { background: #e8a92a; color: #3a2400; } .mg-type.t-boss { background: #b03050; } .mg-type.t-duel { background: #b46cff; }
.mg-title { font-family: var(--font); font-weight: normal; font-size: calc(var(--px) * 22); line-height: 1; margin: calc(var(--px) * 3) 0 calc(var(--px) * 2); text-shadow: 0 calc(var(--px) * 2) 0 rgba(0,0,0,.4); }
.mg-goal { font-family: var(--font); font-size: calc(var(--px) * 11); }
.mg-row { display: flex; gap: calc(var(--px) * 6); justify-content: center; align-items: center; margin-top: calc(var(--px) * 4); font-size: calc(var(--px) * 7); }
.mg-how { opacity: .9; font-weight: 700; font-size: calc(var(--px) * 6.5); max-width: calc(var(--px) * 170); text-align: left; }
.mg-teams { margin-top: calc(var(--px) * 3); font-family: var(--font); font-size: calc(var(--px) * 7); }
.mg-teams .red { color: #ff8a9a; } .mg-teams .blue { color: #8fc8ff; } .mg-teams .solo { color: var(--gold); } .mg-teams i { opacity: .7; margin: 0 calc(var(--px) * 2); }
.mg-practice {
  position: absolute; left: calc(var(--px) * 6); bottom: calc(var(--px) * 30); font-family: var(--font); font-size: calc(var(--px) * 7);
  background: rgba(20,14,40,.75); padding: calc(var(--px) * 2) calc(var(--px) * 5); border-radius: calc(var(--px) * 5);
}
.mg-practice .dot { display: inline-block; width: calc(var(--px) * 4); height: calc(var(--px) * 4); border-radius: 50%; background: #3ddc6f; margin-right: calc(var(--px) * 2); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.mg-ready { position: absolute; left: 0; right: 0; bottom: calc(var(--px) * 5); display: flex; gap: calc(var(--px) * 3); justify-content: center; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: calc(var(--px) * 2); background: rgba(20,14,40,.75); border-radius: calc(var(--px) * 10);
  padding: calc(var(--px) * 1) calc(var(--px) * 5) calc(var(--px) * 1) calc(var(--px) * 1); font-family: var(--font); font-size: calc(var(--px) * 6);
  border: calc(var(--px) * 1) solid color-mix(in srgb, var(--c) 60%, transparent);
}
.chip .portrait { width: calc(var(--px) * 13) !important; height: calc(var(--px) * 13) !important; }
.chip b { color: #3ddc6f; font-weight: normal; min-width: calc(var(--px) * 4); }
.chip.ok { background: color-mix(in srgb, var(--c) 35%, rgba(20,14,40,.8)); animation: popIn .3s cubic-bezier(.2,1.6,.4,1); }

.mg-big {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-family: var(--font); font-size: calc(var(--px) * 46); color: var(--c);
  text-shadow: 0 calc(var(--px) * 3) 0 rgba(0,0,0,.45), 0 0 calc(var(--px) * 12) rgba(0,0,0,.4); pointer-events: none; white-space: nowrap;
  animation: bigPop 1.2s cubic-bezier(.2,1.6,.4,1) both; -webkit-text-stroke: calc(var(--px) * 1) rgba(40,20,60,.6);
}
.mg-big.count { font-size: calc(var(--px) * 60); }
.mg-big.go { font-size: calc(var(--px) * 70); animation-name: goPop; }
.mg-big.finish { font-size: calc(var(--px) * 52); animation: slam 1.6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bigPop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
@keyframes goPop { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-10deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.3) rotate(3deg); opacity: 1; } 60% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
@keyframes slam { 0% { transform: translate(-50%, -50%) scale(3); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(.92); opacity: 1; } 22% { transform: translate(-50%, -50%) scale(1.03); } 30% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

.mg-results { background: radial-gradient(ellipse at 50% 40%, rgba(20,14,40,.86), rgba(20,14,40,.7)); display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--px) * 14); }
.res-head { font-family: var(--font); font-size: calc(var(--px) * 22); text-shadow: 0 calc(var(--px) * 2) 0 rgba(0,0,0,.4); }
.res-head .crownish { color: var(--gold); display: inline-block; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pop-in { animation: popIn .5s cubic-bezier(.2,1.6,.4,1) both; }
.res-list { margin-top: calc(var(--px) * 8); display: flex; flex-direction: column; gap: calc(var(--px) * 2.5); min-width: calc(var(--px) * 230); }
.res-row {
  display: flex; align-items: center; gap: calc(var(--px) * 4); background: rgba(52,38,94,.94); border-radius: calc(var(--px) * 6); padding: calc(var(--px) * 1.5) calc(var(--px) * 6);
  box-shadow: 0 calc(var(--px) * 1.5) 0 rgba(0,0,0,.3);
  border-left: calc(var(--px) * 3) solid var(--c); font-family: var(--font); font-size: calc(var(--px) * 9); animation: rowIn .45s cubic-bezier(.2,1.4,.4,1) both;
}
.res-row.won { background: linear-gradient(90deg, #7a5a1c, rgba(52,38,94,.94) 75%); box-shadow: 0 calc(var(--px) * 1.5) 0 rgba(0,0,0,.3), inset 0 0 0 calc(var(--px) * .7) rgba(255,210,63,.55); }
.res-row .portrait { width: calc(var(--px) * 16) !important; height: calc(var(--px) * 16) !important; }
.res-row .place { min-width: calc(var(--px) * 22); opacity: .9; }
.res-row .place.p1 { color: var(--gold); }
.res-row .nm { flex: 1; }
.res-row .lbl { opacity: .8; font-size: calc(var(--px) * 7); }
.res-row .gems { color: var(--gold); display: inline-flex; align-items: center; gap: calc(var(--px) * 1); }
@keyframes rowIn { from { transform: translateX(calc(var(--px) * -40)); opacity: 0; } to { transform: none; opacity: 1; } }
.gem-ic { display: inline-block; width: calc(var(--px) * 6); height: calc(var(--px) * 7); background: linear-gradient(135deg, #fff3a8, #ffd23f 45%, #e8a92a); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }

/* ---------------------------------------------------------------- free play menu */
.fp { position: absolute; inset: 0; padding: calc(var(--px) * 10) calc(var(--px) * 12); display: flex; flex-direction: column; background: linear-gradient(rgba(20,14,40,.55), rgba(20,14,40,.75)); }
.fp h2 { font-family: var(--font); font-weight: normal; font-size: calc(var(--px) * 18); display: flex; align-items: center; gap: calc(var(--px) * 6); }
.fp h2 small { font-family: var(--body); font-size: calc(var(--px) * 6); opacity: .8; font-weight: 800; }
.fp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--px) * 4); margin-top: calc(var(--px) * 3); overflow-y: auto; padding: calc(var(--px) * 5) calc(var(--px) * 4) calc(var(--px) * 10);
  scroll-padding: calc(var(--px) * 5) 0 calc(var(--px) * 10); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--px) * 4), #000 calc(100% - var(--px) * 12), transparent); mask-image: linear-gradient(transparent, #000 calc(var(--px) * 4), #000 calc(100% - var(--px) * 12), transparent); }
.fp-grid::-webkit-scrollbar { display: none; }
.fp-card {
  border: calc(var(--px) * 1) solid rgba(255,255,255,.14); background: rgba(42,29,79,.85); border-radius: calc(var(--px) * 6); padding: calc(var(--px) * 4); text-align: left;
  min-height: calc(var(--px) * 48); display: flex; flex-direction: column; gap: calc(var(--px) * 1.5); transition: transform .12s, box-shadow .12s;
  --tc: #3f8cff; --band: linear-gradient(var(--tc), var(--tc));
  background: var(--band) top / 100% calc(var(--px) * 2.5) no-repeat, linear-gradient(color-mix(in srgb, var(--tc) 22%, rgba(42,29,79,.9)), rgba(42,29,79,.9) 55%);
}
/* The type colour (same as the intro card's type tag) runs along the top, so the grid sorts itself at a glance. */
.fp-card.t-1v3 { --tc: #ff8a2b; } .fp-card.t-coin { --tc: #e8a92a; } .fp-card.t-boss { --tc: #d0406a; } .fp-card.t-duel { --tc: #b46cff; }
.fp-card.t-2v2 { --tc: #b46cff; --band: linear-gradient(90deg, #ff5a6e 50%, #4aa8ff 50%); }
.fp-card { position: relative; overflow: hidden; isolation: isolate; }
/* Card art: the game's own first frame, dimmed toward the top-left so the name and goal stay crisp over it. */
.fp-thumb { position: absolute; left: 0; right: 0; top: calc(var(--px) * 2.5); bottom: 0; width: 100%; height: calc(100% - var(--px) * 2.5); object-fit: cover; z-index: -2; opacity: .75; animation: thumbIn .5s ease-out both; }
.fp-card:has(.fp-thumb)::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(170deg, rgba(30,20,60,.94) 0%, rgba(30,20,60,.7) 42%, rgba(30,20,60,.12) 100%); }
@keyframes thumbIn { from { opacity: 0; } }
.fp-card .nm { font-family: var(--font); font-size: calc(var(--px) * 9); line-height: 1; text-shadow: 0 calc(var(--px) * .7) 0 rgba(0,0,0,.5); }
.fp-card .gl { font-size: calc(var(--px) * 5); opacity: .9; font-weight: 800; flex: 1; text-shadow: 0 calc(var(--px) * .5) calc(var(--px) * 1) rgba(0,0,0,.6); }
.fp-card .meta { display: flex; justify-content: space-between; align-items: center; }
.fp-card .meta .ctrl svg { width: calc(var(--px) * 9); height: calc(var(--px) * 9); }
.fp-card .meta .ctrl b { display: none; }
.fp-card .mg-type { font-size: calc(var(--px) * 4.5); }
.fp-card.sel, .fp-card:hover { transform: translateY(calc(var(--px) * -2)) scale(1.03); box-shadow: 0 0 0 calc(var(--px) * 1.5) var(--gold), 0 calc(var(--px) * 4) calc(var(--px) * 10) rgba(0,0,0,.4); }
.fp-card.special { background: linear-gradient(160deg, #ffb12b, #ff6fc8); color: #2a1030; }
.fp-card.special .nm { font-size: calc(var(--px) * 11); }
.fp-foot { margin-top: auto; padding-top: calc(var(--px) * 5); display: flex; gap: calc(var(--px) * 4); align-items: center; font-size: calc(var(--px) * 6); white-space: nowrap; }
.fp-foot .btn { flex: none; }
.score-strip { display: flex; gap: calc(var(--px) * 3); flex-wrap: wrap; min-width: 0; }
/* Seven or eight players: slimmer chips, so the footer stays one row and the grid keeps its height. */
.score-strip:has(> :nth-child(7)) { gap: calc(var(--px) * 1.5); flex-wrap: nowrap; }
.score-strip:has(> :nth-child(7)) .chip { font-size: calc(var(--px) * 5); padding-right: calc(var(--px) * 3); }
.score-strip:has(> :nth-child(7)) .chip .portrait { width: calc(var(--px) * 10) !important; height: calc(var(--px) * 10) !important; }
.score-strip .chip b { color: var(--gold); }

/* ---------------------------------------------------------------- settings */
.modal-bg { position: absolute; inset: 0; background: rgba(10,6,24,.72); display: grid; place-items: center; z-index: 20; pointer-events: auto; }
.modal {
  background: #241a45; border-radius: calc(var(--px) * 8); padding: calc(var(--px) * 8) calc(var(--px) * 10); min-width: calc(var(--px) * 220); max-height: 92%; overflow-y: auto;
  font-size: calc(var(--px) * 6.5); border: calc(var(--px) * 1) solid rgba(255,255,255,.15);
}
.modal h3 { font-family: var(--font); font-weight: normal; font-size: calc(var(--px) * 13); margin-bottom: calc(var(--px) * 4); }
.modal .rowx { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--px) * 8); padding: calc(var(--px) * 2.5) 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.modal input[type=range] { width: calc(var(--px) * 70); }
.modal input[type=checkbox] { width: calc(var(--px) * 7); height: calc(var(--px) * 7); }
.modal select { font: inherit; background: #fff; color: #222; border-radius: 6px; padding: 2px 6px; }
.modal .foot { display: flex; gap: calc(var(--px) * 4); justify-content: flex-end; margin-top: calc(var(--px) * 6); flex-wrap: wrap; }
.modal .note { opacity: .7; font-size: calc(var(--px) * 5); margin-top: calc(var(--px) * 1); max-width: calc(var(--px) * 200); }
.toast {
  position: absolute; left: 50%; top: calc(var(--px) * 6); transform: translateX(-50%); background: rgba(20,14,40,.9); padding: calc(var(--px) * 3) calc(var(--px) * 8);
  border-radius: calc(var(--px) * 6); font-family: var(--font); font-size: calc(var(--px) * 8); z-index: 30; animation: popIn .3s cubic-bezier(.2,1.6,.4,1); pointer-events: none;
}
.splash { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,6,24,.4); z-index: 15; cursor: pointer; }
.splash .btn { font-size: calc(var(--px) * 14); }

@media (prefers-reduced-motion: reduce) {
  .shimmer, .logo .l2 span, .res-head .crownish, .mg-practice .dot { animation: none; }
}

/* ---------------------------------------------------------------- portrait (a phone held upright as the TV) */
.fbf-below { position: absolute; left: 0; right: 0; bottom: 0; overflow-y: auto; font-size: calc(var(--px) * 8);
  background: radial-gradient(ellipse at 50% 0%, #2a1d4f 0%, #140f26 75%); -webkit-overflow-scrolling: touch; }
body.has-touchpad .fbf-below { padding-bottom: 40vh; }
.fbf-below .lobby { position: static; display: flex; flex-direction: column; gap: calc(var(--px) * 6); padding: calc(var(--px) * 8) calc(var(--px) * 6) calc(var(--px) * 14); }
.fbf-below .logo .l1 { font-size: calc(var(--px) * 13); }
.fbf-below .logo .l2 { font-size: calc(var(--px) * 30); }
.fbf-below .modes { margin-top: calc(var(--px) * 4); }
.fbf-below .start-row { flex-wrap: wrap; }
.fbf-below .start-row .btn.go { flex: 1 1 100%; }
.fbf-below .start-row .btn.small { flex: 1 1 0; white-space: nowrap; }
.fbf-below .fp h2 { flex-wrap: wrap; gap: calc(var(--px) * 1) calc(var(--px) * 6); }
.fbf-below .mode-tab { flex: 1 1 calc(var(--px) * 60); }
.fbf-below .join-panel { align-self: stretch; }
.fbf-below .gear { position: absolute; top: auto; right: calc(var(--px) * 4); margin-top: calc(var(--px) * -2); }
.fbf-below .lobby { position: relative; }
.fbf-below .fp { position: static; min-height: 100%; }
.fbf-below .fp-grid { grid-template-columns: repeat(2, 1fr); overflow: visible; }
.fbf-below .modal-bg { position: fixed; }
body.portrait .version-tag { bottom: auto; top: 2px; }
/* Below the picture on an upright phone: the minigame card, ready chips, results and the board HUD flow as a column. */
.fbf-below .mg-layer { position: relative; inset: auto; padding: calc(var(--px) * 6) calc(var(--px) * 5); display: flex; flex-direction: column; gap: calc(var(--px) * 5); }
.fbf-below .mg-card { position: relative; left: auto; top: auto; transform: none; min-width: 0; max-width: none; animation: popIn .45s cubic-bezier(.2,1.5,.35,1) both; }
.fbf-below .mg-practice, .fbf-below .mg-ready { position: relative; left: auto; bottom: auto; }
.fbf-below .mg-results { background: none; padding-top: calc(var(--px) * 8); }
.fbf-below .res-list { min-width: 0; align-self: stretch; }
.fbf-below .bd-hud { position: relative; inset: auto; display: flex; flex-direction: column; gap: calc(var(--px) * 4); padding: calc(var(--px) * 4); }
.fbf-below .bd-top, .fbf-below .bd-cards, .fbf-below .bd-banner { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; }
.fbf-below .bd-cards { flex-wrap: wrap; }
.fbf-below .bd-banner { max-width: none; animation: popIn .4s cubic-bezier(.2,1.5,.35,1) both; }
.fbf-below .bd-panel { position: relative; right: auto; top: auto; width: auto; margin: calc(var(--px) * 4); }
.fbf-below .bd-vote { position: relative; left: auto; top: auto; transform: none; padding: calc(var(--px) * 4); animation: popIn .35s both; }
.fbf-below .bd-vote .cards { flex-direction: column; align-items: stretch; }
.fbf-below .bd-vote .vc { width: auto; }
.fbf-below .ceremony { position: relative; inset: auto; padding: calc(var(--px) * 6); display: flex; flex-direction: column; gap: calc(var(--px) * 5); }
.fbf-below .ceremony .res-head, .fbf-below .ceremony .res-list, .fbf-below .ceremony .cer-foot { position: relative; inset: auto; width: auto; top: auto; right: auto; bottom: auto; }
/* ---- Upright phone that is also the screen, mid-minigame (body.mg-fill): the picture fills the screen, the pad floats over it,
   and the cards become overlays that get out of the way. The .fbf-below pane turns into a see-through layer. */
body.mg-fill .fbf-below { background: none; pointer-events: none; overflow: hidden; padding-bottom: 0; }
body.mg-fill .fbf-below .mg-layer { position: absolute; inset: 0; padding-top: calc(env(safe-area-inset-top) + var(--px) * 12); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: calc(var(--px) * 4); }
body.mg-fill .fbf-below .mg-practice { align-self: center; }
body.mg-fill .fbf-below .mg-ready { justify-content: center; }
body.mg-fill .fbf-below .mg-results { background: radial-gradient(ellipse at 50% 40%, rgba(20,14,40,.88), rgba(20,14,40,.72)); justify-content: center; padding-top: calc(env(safe-area-inset-top) + var(--px) * 6); }
/* "Now playing": the full card for a few seconds, then it shrinks away and leaves a small name pill. No layout space either way. */
body.mg-fill .fbf-below .mg-now { padding: 0; }
body.mg-fill .fbf-below .mg-now .mg-card { position: absolute; left: calc(var(--px) * 8); right: calc(var(--px) * 8); top: calc(env(safe-area-inset-top) + var(--px) * 34); transform-origin: 50% 0; animation: nowCard 4.6s ease-in forwards; }
@keyframes nowCard { 0%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(calc(var(--px) * -22)) scale(.5); visibility: hidden; } }
.mg-pill { display: none; }
body.mg-fill .fbf-below .mg-pill { display: block; position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + var(--px) * 45); transform: translateX(-50%); max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font); font-size: calc(var(--px) * 6); padding: calc(var(--px) * 1) calc(var(--px) * 5); border-radius: 999px; background: rgba(20,14,40,.45); color: rgba(255,255,255,.8); opacity: 0; animation: pillIn .5s 4.2s ease-out forwards; }
@keyframes pillIn { to { opacity: 1; } }
body.mg-fill .fbf-ui .fbf-joinchip { position: fixed; left: max(6px, env(safe-area-inset-left)); top: calc(max(6px, env(safe-area-inset-top)) + 30px); bottom: auto; font-size: 10px; padding: 3px 7px; border-radius: 8px; gap: 3px; }
@media (prefers-reduced-motion: reduce) { body.mg-fill .fbf-below .mg-now .mg-card { animation-duration: .01s; animation-delay: 4s; } }
/* Join QR chip (party-kit joinqr.js): where the minigame runner used to draw "Room ABCD", at the same size. */
.fbf-ui .fbf-joinchip { position: absolute; left: calc(var(--px) * 3); bottom: calc(var(--px) * 1); top: auto; right: auto; z-index: 5;
  padding: calc(var(--px) * 1) calc(var(--px) * 3); border: 0; border-radius: calc(var(--px) * 4); background: rgba(20,14,40,.5);
  color: rgba(255,255,255,.85); font: calc(var(--px) * 6)/1 var(--font); gap: calc(var(--px) * 1.5); }
.fbf-ui .fbf-joinchip b { font: inherit; letter-spacing: .04em; }
/* Host playing on this screen, sideways: the stick owns the bottom-left corner, so the join chip moves to the top-left. */
body.has-touchpad:not(.portrait) .fbf-ui .fbf-joinchip { position: fixed; left: max(6px, env(safe-area-inset-left)); top: max(6px, env(safe-area-inset-top)); bottom: auto; font-size: 10px; padding: 3px 7px; border-radius: 8px; gap: 3px; }
/* Sideways with the on-screen pad: the practice pill steps right of the stick ring instead of sliding under it. */
body.has-touchpad:not(.portrait) .fbf-ui .mg-practice { left: max(calc(var(--px) * 6), calc(132px - var(--bx, 0px))); }
/* Sideways with the on-screen pad: the ceremony buttons step left of the A button so a tap can't land on both. */
body.has-touchpad:not(.portrait) .ceremony .cer-foot { right: max(calc(var(--px) * 6), calc(132px - var(--bx, 0px))); }
/* Upright board HUD: the goal gets its own row and the Trophy line flows under it (it sat on top of the wrapped goal). */
.fbf-below .bd-top { flex-wrap: wrap; row-gap: calc(var(--px) * 3); }
.fbf-below .bd-top .bd-goal { order: -1; flex: 1 1 100%; text-align: center; }
.fbf-below .bd-top .bd-turn { white-space: nowrap; }
.fbf-below .bd-bonus { position: relative !important; left: auto !important; top: auto !important; transform: none !important; align-self: center; white-space: normal !important; text-align: center; }
.fbf-below .bd-bonus:empty { display: none; }