/* Free-for-All ("Convention"): opponent rail, focus, fight banner, knockout, Shard, placements, lobby.
   Everything is scoped to #game.ffa / .ffa-* / the FFA sheets, except the Brace panel (.pz), which duels use too.
   Landscape stage 1600-2100 x 900; portrait 900 x --ph (rules under body.portrait). js/ui.js RAIL_W matches the
   rail widths here (168 desktop, 232 phone). */

/* ---------- the rail ---------- */
#ffaRail { position: absolute; left: 0; top: 0; bottom: 0; width: 168px; z-index: 855; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 12px 8px 12px 10px; }
#ffaRail::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 3, 14, .78), rgba(6, 3, 14, .35) 82%, transparent);
  border-right: 1px solid rgba(232, 186, 90, .14); }
#ffaRail .fp { pointer-events: auto; }
.fp { position: relative; appearance: none; border: 1px solid rgba(232, 186, 90, .3); border-radius: 14px; padding: 8px 8px 8px 12px; text-align: left; cursor: pointer; color: var(--ink);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "av life" "id id" "st st"; gap: 5px 6px; align-items: center; min-height: 0; flex: 0 1 auto;
  background: linear-gradient(160deg, rgba(34, 18, 60, .94), rgba(12, 6, 24, .94)); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); overflow: visible;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1.2), border-color .25s, box-shadow .25s, filter .3s, opacity .3s; }
.fp::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc); box-shadow: 0 0 10px var(--sc); }
.fp:hover { transform: translateX(3px); border-color: rgba(242, 193, 78, .6); }
.fp:active { transform: scale(.97); }
.fp-av { grid-area: av; position: relative; width: 58px; height: 58px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--sc), var(--lc), var(--sc)); box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.fp-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #1a1030; }
.fp-shard { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 28px; display: none; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%);
  background: linear-gradient(160deg, #f3dcff, #b35cff 45%, #5a1a9e); filter: drop-shadow(0 0 6px #c77dff); animation: ffaShard 1.8s ease-in-out infinite; }
.fp.hasShard .fp-shard { display: block; }
@keyframes ffaShard { 50% { filter: drop-shadow(0 0 12px #e2b3ff) brightness(1.25); transform: translateY(-2px); } }
.fp-id { grid-area: id; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-name { font: 800 15px/1.1 var(--font-title); color: #fff4d6; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-lead { font: 700 9.5px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim, #b9a9d8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-life { grid-area: life; position: relative; width: 44px; height: 48px; display: grid; place-items: center; justify-self: end; }
.fp-life::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); background: linear-gradient(160deg, #ff9a86, #d8321f 45%, #6a0c06); box-shadow: inset 0 0 0 2px rgba(255, 220, 200, .5); }
.fp-life b { position: relative; font: 900 22px/1 var(--font-title); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }
.fp.danger .fp-life { animation: lcDanger 1.1s ease-in-out infinite; }
.fp-stats { grid-area: st; display: flex; gap: 8px; }
.fp-stats i { display: flex; align-items: center; gap: 4px; font-style: normal; }
.fp-stats b { font: 800 13px/1 var(--font-ui); color: #efe4ff; }
.fp-stats u { display: block; flex: none; text-decoration: none; }
.fp-h u { width: 10px; height: 14px; border-radius: 2px; background: linear-gradient(160deg, #8d5bff, #3a1f7a); box-shadow: 0 0 0 1px rgba(255, 230, 170, .55); }
.fp-f u { width: 14px; height: 11px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(232, 186, 90, .85) 0 3px, transparent 3px 5px); }
.fp-c u { width: 11px; height: 14px; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); background: linear-gradient(160deg, #e6d2ff, #a86bff 50%, #4b1f9a); }
.fp-tag { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); white-space: nowrap; font: 800 9px/1 var(--font-ui); letter-spacing: .16em; padding: 4px 8px; border-radius: 99px;
  color: #1b0f00; background: linear-gradient(180deg, #ffe7a0, #e0a53a); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s; pointer-events: none; }
.fp-tag:not(:empty) { opacity: 1; }
.fp-out { position: absolute; inset: 0; border-radius: 13px; display: none; place-items: center; align-content: center; gap: 2px; background: rgba(6, 3, 12, .72); }
.fp-out b { font: 900 20px/1 var(--font-title); letter-spacing: .2em; color: #ff9c92; text-shadow: 0 2px 6px #000; }
.fp-out em { font: 800 12px/1 var(--font-ui); letter-spacing: .12em; color: #e8dcff; font-style: normal; }
/* states */
.fp.focus { border-color: var(--gold-1, #f2c14e); box-shadow: 0 0 0 1px var(--gold-1, #f2c14e), 0 0 22px rgba(242, 193, 78, .35), 0 8px 20px rgba(0, 0, 0, .5);
  background: linear-gradient(160deg, rgba(60, 34, 90, .96), rgba(20, 10, 36, .96)); }
.fp.focus::after { content: ""; position: absolute; right: -9px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left-color: var(--gold-1, #f2c14e); border-right: 0; }
.fp.active { box-shadow: 0 0 0 2px var(--sc), 0 0 26px color-mix(in srgb, var(--sc) 60%, transparent), 0 8px 20px rgba(0, 0, 0, .5); }
.fp.active .fp-tag { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--sc) 70%, #fff)); }
.fp.atk { box-shadow: 0 0 0 2px #ff8a5a, 0 0 30px rgba(255, 120, 70, .7); }
.fp.atk .fp-tag { background: linear-gradient(180deg, #ffc2a0, #ff5a36); color: #fff; }
.fp.def { border-color: #ff5a4f; animation: ffaDef 1s ease-in-out infinite; }
.fp.def .fp-tag { background: linear-gradient(180deg, #ff9c92, #b3231a); color: #fff; }
@keyframes ffaDef { 50% { box-shadow: 0 0 0 2px #ff5a4f, 0 0 34px rgba(255, 70, 50, .75); } }
.fp.pick { border-color: #6fd3ff; box-shadow: 0 0 0 2px #6fd3ff, 0 0 26px rgba(111, 211, 255, .7); }
.fp.pick .fp-tag { background: linear-gradient(180deg, #d6f3ff, #3fa6d8); color: #04121c; }
.fp.out { filter: grayscale(.9) brightness(.7); cursor: default; }
.fp.out .fp-out { display: grid; }
.fp.out::before, .fp.out .fp-tag { display: none; }
.fp.flash { animation: ffaFlash .6s ease-out; }
@keyframes ffaFlash { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.fp.nudge { animation: ffaNudge .35s ease-out; }
@keyframes ffaNudge { 40% { transform: scale(1.05); } }
.fp.shardin .fp-av { animation: ffaShardIn .9s ease-out; }
@keyframes ffaShardIn { 0% { box-shadow: 0 0 0 0 #c77dff; } 40% { box-shadow: 0 0 0 10px rgba(199, 125, 255, .6), 0 0 40px #c77dff; } 100% { box-shadow: 0 4px 10px rgba(0, 0, 0, .6); } }

/* phones in landscape: a wider rail with bigger type */
body.mobile #game.ffa #ffaRail { width: 232px; gap: 12px; padding: 10px 8px 10px 10px; }
body.mobile .fp { padding: 10px 10px 10px 14px; border-radius: 16px; gap: 6px 8px; }
body.mobile .fp-av { width: 74px; height: 74px; }
body.mobile .fp-name { font-size: 22px; }
body.mobile .fp-lead { font-size: 13px; }
body.mobile .fp-life { width: 58px; height: 62px; }
body.mobile .fp-life b { font-size: 29px; }
body.mobile .fp-stats { gap: 10px; }
body.mobile .fp-stats b { font-size: 19px; }
body.mobile .fp-stats u { transform: scale(1.35); }
body.mobile .fp-tag { font-size: 13px; top: -12px; padding: 5px 10px; }
body.mobile .fp-out b { font-size: 28px; } body.mobile .fp-out em { font-size: 17px; }
body.mobile .fp-shard { width: 30px; height: 38px; }
/* 5 players on a short landscape rail: drop the leader line */
#ffaRail[data-n="4"] .fp { gap: 4px 6px; }
body.mobile #ffaRail[data-n="4"] .fp-lead { display: none; }
body.mobile #ffaRail[data-n="4"] .fp-av { width: 64px; height: 64px; }

/* ---------- portrait: the rail is a row along the top edge; the opponent's side moves down under it ---------- */
body.portrait #ffaRail { right: 0; bottom: auto; width: auto !important; height: 150px; flex-direction: row; justify-content: center; align-items: stretch; gap: 10px; padding: 16px 14px 10px; }
body.portrait #ffaRail::before { background: linear-gradient(180deg, rgba(6, 3, 14, .9), rgba(6, 3, 14, .5) 80%, transparent); border-right: 0; border-bottom: 1px solid rgba(232, 186, 90, .16); }
body.portrait .fp { flex: 1 1 0; max-width: 300px; min-width: 0; grid-template-columns: auto 1fr auto; grid-template-areas: "av id life" "st st st"; padding: 8px 10px 8px 14px; gap: 6px 8px; border-radius: 16px; }
body.portrait .fp:hover { transform: translateY(2px); }
body.portrait .fp-av { width: 62px; height: 62px; }
body.portrait .fp-name { font-size: 22px; }
body.portrait .fp-lead { font-size: 13px; }
body.portrait .fp-life { width: 50px; height: 54px; }
body.portrait .fp-life b { font-size: 26px; }
body.portrait .fp-stats { gap: 12px; }
body.portrait .fp-stats b { font-size: 19px; }
body.portrait .fp-stats u { transform: scale(1.3); }
body.portrait .fp-tag { font-size: 13px; top: -11px; }
body.portrait .fp-out b { font-size: 28px; } body.portrait .fp-out em { font-size: 17px; }
body.portrait .fp.focus::after { right: auto; left: 50%; top: auto; bottom: -9px; margin: 0 0 0 -8px; border: 8px solid transparent; border-top-color: var(--gold-1, #f2c14e); border-bottom: 0; }
body.portrait #ffaRail[data-n="4"] .fp { grid-template-areas: "av id life" "st st st"; padding: 8px 8px 8px 12px; }
body.portrait #ffaRail[data-n="4"] .fp-lead { display: none; }
body.portrait #ffaRail[data-n="4"] .fp-av { width: 54px; height: 54px; }
body.portrait #ffaRail[data-n="4"] .fp-life { width: 44px; height: 48px; }
body.portrait #ffaRail[data-n="4"] .fp-life b { font-size: 23px; }
body.portrait #ffaRail[data-n="4"] .fp-stats { gap: 8px; }
body.portrait #ffaRail[data-n="4"] .fp-stats b { font-size: 17px; }
body.portrait #ffaRail[data-n="4"] .fp-name { font-size: 19px; }
/* opponent side under the rail (js/ui.js geometry oy: 150 on tall phones, 126 on short ones) */
body.portrait #game.ffa .bplate.s1 { top: calc(84px + var(--ffa-oy)); }
body.portrait #game.ffa #hud :is(#menuBtn, #skipBtn) { top: calc(16px + var(--ffa-oy)); }
body.portrait #game.ffa #hud #topbar { top: calc(108px + var(--ffa-oy)); }
body.portrait #game.ffa #log, body.portrait #game.ffa #tracker { top: calc(90px + var(--ffa-oy)); }

/* ---------- board plates: Shard marker, being charged ---------- */
#game .bp-shard { position: absolute; left: 50px; top: 44px; width: 22px; height: 28px; display: none; z-index: 2; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%);
  background: linear-gradient(160deg, #f3dcff, #b35cff 45%, #5a1a9e); filter: drop-shadow(0 0 6px #c77dff); animation: ffaShard 1.8s ease-in-out infinite; }
#game .bplate.hasShard .bp-shard { display: block; }
#game.ffa .bplate.def { border-color: #ff5a4f; animation: ffaDef 1s ease-in-out infinite; }
#game.ffa .bplate.s1 { border-left: 4px solid var(--focus-c, #ff6a5a); }
#game.ffa-watch #endTurn { opacity: .5; }

/* ---------- fx layer (stage coordinates, above the board) ---------- */
#ffaFx { position: absolute; inset: 0; pointer-events: none; z-index: 870; }
#ffaFx > * { pointer-events: none; }
.ffa-arc { position: absolute; left: 0; top: 0; overflow: visible; }
.ffa-arc path { fill: none; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 8px currentColor); }
.ffa-arc circle { fill: none; stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.ffa-float { position: absolute; transform: translate(-50%, -50%); font: 900 24px/1 var(--font-title); letter-spacing: .08em; white-space: nowrap; text-shadow: 0 2px 6px #000, 0 0 16px currentColor;
  animation: ffaFloat 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }
body.mobile .ffa-float, body.portrait .ffa-float { font-size: 34px; }
@keyframes ffaFloat { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
.ffa-shardfly.entry { width: 60px; height: 76px; }
#sweep[data-kind="shard"] .t { color: #f3dcff; }
.ffa-shardfly { position: absolute; width: 44px; height: 56px; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%);
  background: linear-gradient(160deg, #fff, #d9a6ff 30%, #9b3dff 60%, #4b0f8a); filter: drop-shadow(0 0 14px #c77dff) drop-shadow(0 0 30px #9b3dff); }

/* ---------- fight between two other players ---------- */
#ffaFight { position: absolute; left: 0; right: 0; top: 150px; z-index: 875; pointer-events: none; display: grid; justify-items: center; gap: 14px; opacity: 0; visibility: hidden; }
#ffaFight.go { visibility: visible; animation: ffaFight 1.7s cubic-bezier(.2, .8, .3, 1) forwards; animation-duration: max(1.1s, calc(1.7s / var(--spd, 1))); }
@keyframes ffaFight { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#ffaFight .ff-band { display: flex; align-items: center; gap: 16px; padding: 10px 26px; border-radius: 99px; background: linear-gradient(90deg, rgba(40, 8, 12, .92), rgba(12, 6, 26, .95), rgba(40, 8, 12, .92));
  border: 1px solid rgba(255, 138, 90, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 110, 70, .35); font: 900 26px/1 var(--font-title); letter-spacing: .08em; white-space: nowrap; }
#ffaFight .ff-band i { font-style: normal; color: #ffd36e; font-size: 30px; text-shadow: 0 0 14px #ff8a5a; }
#ffaFight .ff-cards { display: flex; align-items: center; gap: 22px; }
#ffaFight .ff-c { position: relative; width: 130px; height: 193px; }
#ffaFight .ff-c > * { position: absolute; inset: 0; width: 130px; height: 182px; }
#ffaFight .ff-c > .lc { height: 193px; }
#ffaFight .ff-att { animation: ffaLunge 1.7s cubic-bezier(.4, 0, .3, 1) both; }
#ffaFight .ff-tgt { animation: ffaHitT 1.7s ease-out both; }
#ffaFight .ff-vs { font: 900 30px/1 var(--font-title); color: #ffd36e; text-shadow: 0 0 16px #ff8a5a, 0 2px 4px #000; }
@keyframes ffaLunge { 0%, 20% { transform: translateX(-30px) rotate(-4deg); } 42% { transform: translateX(40px) rotate(3deg) scale(1.06); } 60%, 100% { transform: none; } }
@keyframes ffaHitT { 0%, 38% { transform: none; filter: none; } 44% { transform: translateX(10px) rotate(4deg); filter: brightness(2); } 56%, 100% { transform: none; filter: none; } }
body.mobile #ffaFight { top: 120px; } body.mobile #ffaFight .ff-band { font-size: 36px; }
body.mobile #ffaFight .ff-cards { transform: scale(1.25); margin-top: 26px; }
body.portrait #ffaFight { top: calc(var(--ph) / 2 - 330px); }
body.portrait #ffaFight .ff-band { font-size: 34px; }
body.portrait #ffaFight .ff-cards { transform: scale(1.5); margin-top: 60px; }

/* ---------- knockout banner ---------- */
#ffaKO { position: absolute; left: 0; right: 0; top: 290px; height: 220px; z-index: 890; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 26px; opacity: 0; visibility: hidden; }
#ffaKO.go { visibility: visible; animation: ffaKO 1.9s cubic-bezier(.2, .8, .3, 1) forwards; animation-duration: max(1.3s, calc(1.9s / var(--spd, 1))); }
#ffaKO .ko-band { position: absolute; inset: 30px 0; background: linear-gradient(90deg, transparent, rgba(40, 6, 10, .92) 20%, rgba(40, 6, 10, .92) 80%, transparent); border-top: 1px solid rgba(255, 106, 90, .6); border-bottom: 1px solid rgba(255, 106, 90, .6); }
#ffaKO .ko-av { position: relative; width: 150px; height: 150px; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 4px var(--sc), 0 0 40px var(--sc); filter: grayscale(.6); animation: ffaKOav 1.9s ease-out both; }
#ffaKO .ko-txt { position: relative; }
#ffaKO .ko-k { font: 900 64px/1 var(--font-title); letter-spacing: .16em; color: #fff; text-shadow: 0 0 30px #ff5a4f, 0 4px 10px #000; }
#ffaKO .ko-n { margin-top: 8px; font: 800 24px/1.2 var(--font-title); color: #ffd9d2; }
#ffaKO .ko-s { margin-top: 6px; font: 700 15px/1.2 var(--font-ui); color: #ffd36e; letter-spacing: .06em; }
@keyframes ffaKO { 0% { opacity: 0; transform: scale(1.3); } 12% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ffaKOav { 0%, 20% { transform: none; filter: none; } 35% { transform: rotate(-8deg) scale(1.06); filter: grayscale(1) brightness(1.8); } 100% { transform: rotate(-4deg) scale(.96); filter: grayscale(1) brightness(.7); } }
body.mobile #ffaKO .ko-k { font-size: 84px; } body.mobile #ffaKO .ko-n { font-size: 32px; } body.mobile #ffaKO .ko-s { font-size: 22px; }
body.portrait #ffaKO { top: calc(var(--ph) / 2 - 200px); height: 400px; flex-direction: column; gap: 18px; text-align: center; }
body.portrait #ffaKO .ko-band { inset: 0; }
body.portrait #ffaKO .ko-k { font-size: 76px; } body.portrait #ffaKO .ko-n { font-size: 34px; } body.portrait #ffaKO .ko-s { font-size: 24px; }

/* ---------- you are out: watch or leave ---------- */
#ffaOut { position: absolute; inset: 0; z-index: 940; display: grid; place-items: center; background: rgba(4, 2, 10, .55); pointer-events: auto; animation: ffaIn .3s ease-out; }
@keyframes ffaIn { from { opacity: 0; } }
#ffaOut .fo-box { width: 520px; max-width: calc(100% - 32px); padding: 28px 30px; border-radius: 22px; text-align: center; background: linear-gradient(170deg, rgba(40, 22, 72, .97), rgba(12, 6, 24, .97));
  border: 1px solid rgba(232, 186, 90, .45); box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }
#ffaOut .fo-k { font: 800 12px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#ffaOut .fo-p { font: 900 72px/1.1 var(--font-title); color: #fff4d6; text-shadow: 0 0 24px rgba(242, 193, 78, .5); }
#ffaOut p { color: #dcd0f0; font-size: 15px; line-height: 1.5; margin: 8px 0 20px; }
#ffaOut .fo-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
body.mobile #ffaOut .fo-box, body.portrait #ffaOut .fo-box { width: 760px; padding: 40px; }
body.mobile #ffaOut .fo-k, body.portrait #ffaOut .fo-k { font-size: 18px; }
body.mobile #ffaOut .fo-p, body.portrait #ffaOut .fo-p { font-size: 104px; }
body.mobile #ffaOut p, body.portrait #ffaOut p { font-size: 24px; }
body.mobile #ffaOut .btn, body.portrait #ffaOut .btn { font-size: 24px; padding: 18px 28px; }

/* ---------- the opening line-up ---------- */
#ffaIntro { position: absolute; inset: 0; z-index: 960; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 50%, rgba(10, 5, 24, .6), rgba(4, 2, 10, .94)); animation: vsBg .3s ease-out; transition: opacity .35s; }
#ffaIntro.out { opacity: 0; pointer-events: none; }
#ffaIntro .fi-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
#ffaIntro .fi-col { position: relative; overflow: hidden; border-right: 2px solid rgba(0, 0, 0, .6); animation: ffaCol .6s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 90ms); }
#ffaIntro .fi-art { position: absolute; inset: 0; background-size: cover; transform: scale(1.05); }
#ffaIntro .fi-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 3, 12, .92)), linear-gradient(0deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 40%); }
#ffaIntro .fi-col::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c); box-shadow: 0 0 24px var(--c); }
#ffaIntro .fi-name { position: absolute; left: 12px; right: 12px; bottom: 26px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
#ffaIntro .fi-name em { font: 800 13px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--c); font-style: normal; }
#ffaIntro .fi-name b { font: 900 30px/1.05 var(--font-title); color: #fff4d6; text-shadow: 0 3px 8px #000; }
#ffaIntro .fi-mid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 6px; padding: 18px 0; background: rgba(6, 3, 14, .72);
  border-top: 1px solid rgba(232, 186, 90, .5); border-bottom: 1px solid rgba(232, 186, 90, .5); animation: ffaMid .7s .25s cubic-bezier(.2, .8, .3, 1) both; }
#ffaIntro .fi-mid b { font: 900 60px/1 var(--font-title); letter-spacing: .14em; color: #fff; text-shadow: 0 0 30px rgba(242, 193, 78, .7), 0 4px 10px #000; }
#ffaIntro .fi-mid span { font: 700 14px/1 var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#ffaIntro .vs-skip { position: absolute; bottom: 12px; right: 16px; font-size: 12px; color: rgba(255, 255, 255, .5); letter-spacing: .12em; }
#ffaIntro.still * { animation: none !important; }
@keyframes ffaCol { from { opacity: 0; transform: translateY(40px); } }
@keyframes ffaMid { from { opacity: 0; transform: translateY(-50%) scaleX(.2); } }
body.mobile #ffaIntro .fi-name b { font-size: 40px; } body.mobile #ffaIntro .fi-name em { font-size: 18px; }
body.mobile #ffaIntro .fi-mid b { font-size: 84px; } body.mobile #ffaIntro .fi-mid span { font-size: 20px; }
body.portrait #ffaIntro .fi-cols { grid-template-columns: 1fr; grid-template-rows: repeat(var(--n), 1fr); }
body.portrait #ffaIntro .fi-col { border-right: 0; border-bottom: 2px solid rgba(0, 0, 0, .6); }
body.portrait #ffaIntro .fi-art { background-position: 50% 25% !important; }
body.portrait #ffaIntro .fi-name { left: 24px; right: 24px; bottom: 16px; text-align: left; }
body.portrait #ffaIntro .fi-name b { font-size: 44px; } body.portrait #ffaIntro .fi-name em { font-size: 20px; }
body.portrait #ffaIntro .fi-mid b { font-size: 76px; } body.portrait #ffaIntro .fi-mid span { font-size: 22px; }
body.portrait #ffaIntro .vs-skip { font-size: 20px; }

/* ---------- instant-speed panels: Brace (duels too) and Interject ---------- */
.pz { position: absolute; left: 50%; top: 50%; z-index: 900; width: 560px; max-width: calc(100% - 32px); transform: translate(-50%, -50%); padding: 16px 18px 16px; border-radius: 20px;
  background: linear-gradient(170deg, rgba(24, 40, 70, .97), rgba(10, 8, 26, .97)); border: 1px solid rgba(111, 211, 255, .6); box-shadow: 0 0 34px rgba(111, 211, 255, .28), 0 30px 60px rgba(0, 0, 0, .7);
  pointer-events: auto; animation: pzIn .28s cubic-bezier(.2, .9, .3, 1.2) both; }
.pz.out { animation: pzOut .2s ease-in forwards; }
@keyframes pzIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
@keyframes pzOut { to { opacity: 0; transform: translate(-50%, -52%) scale(.96); } }
.pz-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; }
.pz-head > b { font: 900 24px/1 var(--font-title); letter-spacing: .12em; color: #d6f3ff; text-transform: uppercase; text-shadow: 0 0 14px rgba(111, 211, 255, .6); }
.pz-head > span { font-size: 13.5px; line-height: 1.35; color: #d7e7f5; }
.pz-head > span em { font-style: normal; font-weight: 800; }
.pz-time { font: 900 20px/1 var(--font-title); font-style: normal; color: #fff; min-width: 28px; text-align: right; }
.pz:not(.timed) .pz-time, .pz:not(.timed) .pz-bar { display: none; }
.pz-bar { height: 5px; margin: 10px 0 2px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pz-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fd3ff, #d6f3ff); transform-origin: 0 50%; }
.pz.hurry .pz-bar i { background: linear-gradient(90deg, #ff5a4f, #ffb070); }
.pz.hurry .pz-time { color: #ff9c92; }
.pz-fight { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 10px; }
.pz-fight > i { font-style: normal; font-size: 22px; color: #ffd36e; }
.pz-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 138, 90, .45); }
.pz-mini.me { border-color: rgba(111, 211, 255, .6); }
.pz-mini b { font: 800 14px/1.2 var(--font-title); color: #fff4d6; text-align: center; max-width: 190px; }
.pz-mini em { font: 900 26px/1 var(--font-title); font-style: normal; color: #ffb49a; }
.pz-mini.me em { color: #9fe4ff; }
.pz-mini em small { font: 800 13px/1 var(--font-ui); color: #7dffb0; margin-left: 4px; vertical-align: super; }
.bz-gems { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.bz-gem { appearance: none; border: 0; background: none; padding: 4px; cursor: pointer; }
.bz-gem i { display: block; width: 30px; height: 38px; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); background: linear-gradient(170deg, #4e3f6c, #261a40 60%, #140b24); transition: transform .15s, background .15s; }
.bz-gem.on i { background: linear-gradient(118deg, rgba(255, 255, 255, .7) 0 18%, transparent 19%), linear-gradient(160deg, #c3f0ff, #3fa6d8 55%, #0d4f78); transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 0 8px #6fd3ff); }
.bz-gem:hover i { transform: translateY(-3px); }
.bz-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.bz-row .btn { width: 46px; height: 42px; padding: 0; font-size: 22px; }
.bz-n { font: 900 30px/1 var(--font-title); color: #9fe4ff; min-width: 56px; text-align: center; }
.bz-res { text-align: center; margin: 8px 0 12px; font: 700 14px/1.35 var(--font-ui); color: #ffe7a0; min-height: 19px; }
.pz-btns { display: flex; justify-content: center; gap: 12px; }
.ij-q { text-align: center; font-size: 14px; color: #dce8f5; margin: 0 0 10px; }
.ij-cards { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 30px; }
.ij-c { position: relative; appearance: none; border: 0; background: none; padding: 0; width: 130px; height: 182px; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .3, 1.2);
  animation: ijIn .35s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 60ms); }
.ij-c .card { width: 130px; height: 182px; }
.ij-c:hover, .ij-c.hov { transform: translateY(-8px) scale(1.05); }
.ij-c::after { content: ""; position: absolute; inset: -5px; border-radius: 12px; border: 2px solid rgba(111, 211, 255, .9); box-shadow: 0 0 18px rgba(111, 211, 255, .7); pointer-events: none; }
.ij-pay { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; font: 800 12px/1 var(--font-ui); letter-spacing: .08em; padding: 5px 10px; border-radius: 99px; color: #04121c; background: linear-gradient(180deg, #d6f3ff, #3fa6d8); }
@keyframes ijIn { from { opacity: 0; transform: translateY(16px) scale(.9); } }
#ijPanel { width: 700px; }
/* bigger on phones (landscape .mobile and portrait) */
body.mobile .pz { width: 860px; padding: 22px 26px; border-radius: 26px; }
body.mobile #ijPanel { width: 1000px; }
body.portrait .pz, body.portrait #ijPanel { width: 860px; }
:is(body.mobile, body.portrait) .pz-head > b { font-size: 36px; }
:is(body.mobile, body.portrait) .pz-head > span { font-size: 21px; }
:is(body.mobile, body.portrait) .pz-time { font-size: 32px; }
:is(body.mobile, body.portrait) .pz-bar { height: 8px; }
:is(body.mobile, body.portrait) .pz-mini { min-width: 240px; padding: 12px 18px; }
:is(body.mobile, body.portrait) .pz-mini b { font-size: 22px; max-width: 300px; }
:is(body.mobile, body.portrait) .pz-mini em { font-size: 40px; }
:is(body.mobile, body.portrait) .pz-mini em small { font-size: 20px; }
:is(body.mobile, body.portrait) .bz-gem i { width: 46px; height: 58px; }
:is(body.mobile, body.portrait) .bz-row .btn { width: 76px; height: 68px; font-size: 34px; }
:is(body.mobile, body.portrait) .bz-n { font-size: 46px; min-width: 90px; }
:is(body.mobile, body.portrait) .bz-res { font-size: 22px; }
:is(body.mobile, body.portrait) .pz-btns .btn { font-size: 24px; padding: 18px 30px; }
:is(body.mobile, body.portrait) .ij-q { font-size: 21px; }
:is(body.mobile, body.portrait) .ij-c, :is(body.mobile, body.portrait) .ij-c .card { width: 182px; height: 255px; }
:is(body.mobile, body.portrait) .ij-pay { font-size: 18px; bottom: -16px; }
body.portrait .pz { top: calc(var(--ph) / 2); }

/* ---------- placement end screen ---------- */
#over.ffa-over .stats { width: 100%; }
.ffa-places { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; }
.ffa-places li { display: grid; grid-template-columns: 58px 46px 1fr auto; align-items: center; gap: 12px; padding: 6px 14px 6px 8px; border-radius: 12px; text-align: left;
  background: rgba(10, 6, 22, .6); border: 1px solid rgba(232, 186, 90, .18); border-left: 4px solid var(--sc); animation: ffaRow .45s cubic-bezier(.2, .8, .3, 1) both; }
.ffa-places li:nth-child(2) { animation-delay: .08s; } .ffa-places li:nth-child(3) { animation-delay: .16s; } .ffa-places li:nth-child(4) { animation-delay: .24s; } .ffa-places li:nth-child(5) { animation-delay: .32s; }
@keyframes ffaRow { from { opacity: 0; transform: translateX(-20px); } }
.ffa-places li.first { background: linear-gradient(90deg, rgba(90, 60, 10, .55), rgba(10, 6, 22, .6)); border-color: rgba(242, 193, 78, .6); }
.ffa-places li.me { box-shadow: 0 0 0 1px rgba(255, 231, 160, .7), 0 0 18px rgba(242, 193, 78, .25); }
.fpl-n { font: 900 22px/1 var(--font-title); color: #fff4d6; text-align: center; }
.ffa-places li.first .fpl-n { color: var(--gold-hi, #ffe08a); }
.fpl-av { width: 46px; height: 46px; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 2px var(--sc); }
.fpl-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fpl-t b { font: 800 17px/1.1 var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpl-t em { font: 600 12px/1 var(--font-ui); color: var(--ink-dim, #b9a9d8); font-style: normal; letter-spacing: .06em; }
.fpl-crown .ico { width: 26px; height: 26px; }
body.mobile .ffa-places li { grid-template-columns: 80px 62px 1fr auto; padding: 8px 18px 8px 10px; }
body.mobile .fpl-n { font-size: 30px; } body.mobile .fpl-av { width: 62px; height: 62px; }
body.mobile .fpl-t b { font-size: 24px; } body.mobile .fpl-t em { font-size: 16px; }
body.mobile .ffa-places { gap: 8px; max-width: 760px; }
body.mobile #over.ffa-over .ov-left { display: none; }
body.portrait .ffa-places { max-width: none; }
body.portrait .ffa-places li { grid-template-columns: 90px 70px 1fr auto; padding: 10px 20px 10px 12px; }
body.portrait .fpl-n { font-size: 34px; } body.portrait .fpl-av { width: 70px; height: 70px; }
body.portrait .fpl-t b { font-size: 28px; } body.portrait .fpl-t em { font-size: 19px; }
body.portrait #over.ffa-over .ov-left { display: none; }
body.portrait #over.ffa-over .big { font-size: 80px; }

/* ---------- modes sheet tile + Free-for-All sheet ---------- */
.modesheet .modes:has(#mFFA) { grid-template-columns: repeat(3, 1fr); }
.modesheet #mFFA { grid-column: 1 / -1; height: 132px; background-position: var(--pos, 50% 22%); }
.modesheet #mFFA::before { background: linear-gradient(90deg, rgba(8, 4, 18, .94) 0%, rgba(8, 4, 18, .7) 45%, rgba(8, 4, 18, .1) 100%); }
.modesheet #mFFA .mt-ic { top: 50%; margin-top: -25px; }
.modesheet #mFFA .mt-txt { left: 124px; bottom: auto; top: 50%; transform: translateY(-50%); }
#sheet .box.modesheet:has(#mFFA) .modes { margin-bottom: 14px; }
body.portrait .modesheet .modes:has(#mFFA) .mode { height: 206px; }
body.portrait .modesheet #mFFA .mt-ic { top: 26px; margin-top: 0; }
body.portrait .modesheet #mFFA .mt-txt { left: 28px; top: auto; bottom: 26px; transform: none; }
body.portrait .modesheet #mFFA::before { background: linear-gradient(90deg, rgba(8, 4, 18, .92) 0%, rgba(8, 4, 18, .55) 55%, rgba(8, 4, 18, .15) 100%), linear-gradient(0deg, rgba(8, 4, 18, .7), transparent 50%); }

#sheet .box.ffasheet { width: 1100px; }
.ffasheet .ffa-lead { color: var(--ink-dim, #b9a9d8); margin: 4px 0 0; font-size: 15px; }
.ffa-modes { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin: 18px 0 16px; }
.ffa-card { position: relative; min-height: 330px; border-radius: 16px; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  background: var(--art) var(--pos, 50% 30%) / cover no-repeat, #1a1030; border: 1px solid rgba(232, 186, 90, .35); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.ffa-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 4, 18, .15) 0%, rgba(8, 4, 18, .55) 38%, rgba(8, 4, 18, .96) 78%); }
.ffa-card > * { position: relative; }
.ffa-card .mt-tag { position: absolute; right: 14px; top: 14px; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px;
  color: var(--gold-hi, #ffe08a); background: rgba(10, 6, 22, .72); border: 1px solid rgba(232, 186, 90, .45); }
.ffa-card .mt-lock { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 700 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #ffd9c8; padding: 8px 12px; border-radius: 99px; background: rgba(10, 6, 22, .82); border: 1px solid rgba(255, 150, 120, .4); }
.ffa-card .mt-lock .ico { width: 14px; height: 14px; }
.ffa-card.off { background-blend-mode: luminosity; }
.ffa-card.off .fc-txt { opacity: .6; }
.fc-txt { display: flex; flex-direction: column; gap: 6px; }
.fc-txt b { font: 800 28px/1.05 var(--font-title); letter-spacing: .06em; color: #fff4d6; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.fc-txt span { font-size: 14px; color: #e4d8f5; line-height: 1.35; }
.ffa-count { display: flex; gap: 8px; }
.ffa-count button { flex: 1; appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 12px;
  background: rgba(10, 6, 22, .7); border: 1px solid rgba(232, 186, 90, .3); color: var(--ink); transition: background .2s, border-color .2s, transform .2s; }
.ffa-count button b { font: 900 26px/1 var(--font-title); }
.ffa-count button span { font: 700 10px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim, #b9a9d8); }
.ffa-count button.on { background: linear-gradient(180deg, rgba(242, 193, 78, .35), rgba(120, 70, 10, .45)); border-color: var(--gold-1, #f2c14e); transform: translateY(-2px); }
.ffa-count button.on b { color: var(--gold-hi, #ffe08a); }
.ffa-card .btn { justify-content: center; }
.ffa-join { display: flex; flex-direction: column; gap: 8px; }
.ffa-join .fj-row { display: flex; gap: 8px; }
.ffa-join .codein { flex: 1; min-width: 0; width: auto; font-size: 18px; padding: 8px 10px; letter-spacing: .3em; text-align: center; }
body.portrait #sheet .box.ffasheet { width: 860px; }
body.portrait .ffasheet .ffa-lead { font-size: 22px; }
body.portrait .ffa-modes { grid-template-columns: 1fr; gap: 16px; }
body.portrait .ffa-card { min-height: 0; padding: 22px; gap: 16px; }
body.portrait .ffa-card:first-child { min-height: 380px; }
body.portrait .ffa-card:not(:first-child) { min-height: 250px; }
body.portrait .fc-txt b { font-size: 44px; } body.portrait .fc-txt span { font-size: 22px; }
body.portrait .ffa-card .mt-tag, body.portrait .ffa-card .mt-lock { font-size: 17px; padding: 10px 14px; }
body.portrait .ffa-count button { padding: 14px 0; } body.portrait .ffa-count button b { font-size: 40px; } body.portrait .ffa-count button span { font-size: 15px; }
body.portrait .ffa-card .btn { font-size: 24px; padding: 18px 20px; }
body.portrait .ffa-join .codein { font-size: 26px; padding: 14px; }
body.portrait .ffasheet .modesub { min-height: 100px; }

/* queue + lobby */
.ffa-seats { display: flex; justify-content: center; gap: 12px; margin: 14px 0 6px; }
.ffa-seats i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(232, 186, 90, .5); background: rgba(10, 6, 22, .6); transition: background .3s, box-shadow .3s; }
.ffa-seats i.on { background: radial-gradient(circle at 40% 35%, #ffe7a0, #e0a53a 60%, #6a4200); box-shadow: 0 0 14px rgba(242, 193, 78, .6); }
.ffalobby { text-align: center; }
.lb-code { display: inline-flex; align-items: center; gap: 14px; margin: 10px auto 4px; padding: 8px 10px 8px 18px; border-radius: 14px; background: rgba(10, 6, 22, .6); border: 1px solid rgba(232, 186, 90, .35); }
.lb-code span { font: 800 11px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
.lb-code b { font: 900 34px/1 var(--font-title); letter-spacing: .3em; color: #fff4d6; }
.lb-seats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0 12px; }
.lb-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: rgba(10, 6, 22, .6);
  border: 1px solid rgba(232, 186, 90, .22); border-top: 4px solid var(--sc, rgba(232, 186, 90, .2)); animation: ffaIn .3s ease-out; }
.lb-seat.empty { border-style: dashed; opacity: .6; border-top-width: 1px; }
.lb-av { width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .06) center / cover; box-shadow: 0 0 0 2px var(--sc, rgba(255, 255, 255, .15)); display: grid; place-items: center; }
.lb-av.bot { font: 900 22px/1 var(--font-title); color: #d6f3ff; background: radial-gradient(circle, #2d5a7e, #0b1a30); }
.lb-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.lb-t b { font: 800 15px/1.15 var(--font-title); color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-t em { font: 600 11.5px/1.2 var(--font-ui); font-style: normal; color: var(--ink-dim, #b9a9d8); }
.lb-kick { font-size: 11px !important; padding: 5px 8px !important; }
.lb-host { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; font-weight: 700; color: #e4d8f5; }
.lb-step { display: inline-flex; align-items: center; gap: 10px; }
.lb-step b { font: 900 24px/1 var(--font-title); min-width: 26px; }
.lb-step .btn { width: 38px; height: 34px; padding: 0; font-size: 20px; }
body.portrait .lb-seats { grid-template-columns: 1fr; gap: 12px; }
body.portrait .lb-seat { flex-direction: row; padding: 14px 18px; text-align: left; }
body.portrait .lb-av { width: 88px; height: 88px; flex: none; }
body.portrait .lb-t { flex: 1; } body.portrait .lb-t b { font-size: 28px; } body.portrait .lb-t em { font-size: 19px; }
body.portrait .lb-code b { font-size: 52px; } body.portrait .lb-code span { font-size: 16px; }
body.portrait .lb-host { font-size: 22px; } body.portrait .lb-step b { font-size: 36px; } body.portrait .lb-step .btn { width: 64px; height: 56px; font-size: 30px; }
body.portrait .ffa-seats i { width: 44px; height: 44px; }
body.portrait .lb-kick { font-size: 17px !important; padding: 10px 14px !important; }

@media (prefers-reduced-motion: reduce) {
  .fp, .fp-shard, .bp-shard, .fp.def, #game.ffa .bplate.def, .ffa-places li, .lb-seat, .ij-c, .pz { animation: none !important; transition: none !important; }
}
body.fx-low .fp-shard, body.fx-low #game .bp-shard, body.fx-low .fp.def, body.fx-low #game.ffa .bplate.def { animation: none; }

/* How to Play: Free-for-All section */
#rules .rsub { margin: 20px 0 8px; font: 800 15px/1.2 var(--font-title); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#rules .rtab { width: 100%; margin: 16px 0 6px; border-collapse: collapse; font-size: 14px; }
#rules .rtab th, #rules .rtab td { padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(232, 186, 90, .16); }
#rules .rtab th { font: 800 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2, #e8ba5a); }
#rules .rtab td:first-child { color: #fff4d6; font-weight: 700; }
#rules .rtab td:not(:first-child) { color: #dcd0f0; }
body.portrait #rules .rsub { font-size: 24px; }
body.portrait #rules .rtab { font-size: 21px; }
body.portrait #rules .rtab th { font-size: 16px; }

/* fixes: hidden lobby controls, locks, phone-landscape sizes, a shorter modes sheet with the FFA tile */
.ffalobby [hidden], .ffasheet [hidden] { display: none !important; }
.modesheet .modes:has(#mFFA) .mode:not(#mFFA) { height: 252px; }
.modesheet .modes:has(#mFFA) #mFFA { height: 112px; }
body.portrait .modesheet .modes:has(#mFFA) .mode:not(#mFFA), body.portrait .modesheet .modes:has(#mFFA) #mFFA { height: 206px; }
body.portrait .ffa-card .mt-lock { left: auto; right: 22px; top: 22px; transform: none; }
body.mobile:not(.portrait) .ffasheet .ffa-lead { font-size: 20px; }
body.mobile:not(.portrait) .ffa-card { min-height: 360px; }
body.mobile:not(.portrait) .fc-txt b { font-size: 34px; }
body.mobile:not(.portrait) .fc-txt span { font-size: 19px; }
body.mobile:not(.portrait) .ffa-count button b { font-size: 32px; } body.mobile:not(.portrait) .ffa-count button span { font-size: 13px; }
body.mobile:not(.portrait) .ffa-card .btn { font-size: 20px; padding: 14px 16px; }
body.mobile:not(.portrait) .ffa-join .codein { font-size: 22px; }
body.mobile:not(.portrait) .ffa-card .mt-tag, body.mobile:not(.portrait) .ffa-card .mt-lock { font-size: 14px; }
body.mobile:not(.portrait) .lb-t b { font-size: 21px; } body.mobile:not(.portrait) .lb-t em { font-size: 16px; }
body.mobile:not(.portrait) .lb-av { width: 92px; height: 92px; }
body.mobile:not(.portrait) .lb-code b { font-size: 46px; } body.mobile:not(.portrait) .lb-code span { font-size: 15px; }
body.mobile:not(.portrait) .lb-host, body.mobile:not(.portrait) .ffalobby .winfo { font-size: 20px; }
body.mobile:not(.portrait) .lb-step b { font-size: 32px; } body.mobile:not(.portrait) .lb-step .btn { width: 58px; height: 50px; font-size: 26px; }
body.mobile:not(.portrait) .lb-kick { font-size: 15px !important; padding: 8px 12px !important; }
body.mobile:not(.portrait) .ffalobby .actions .btn { font-size: 22px; padding: 16px 26px; }
body.mobile:not(.portrait) .ffa-seats i { width: 40px; height: 40px; }
body.portrait #ffaIntro .fi-cols { top: 200px; }
body.portrait #ffaIntro .fi-mid { top: 0; height: 200px; transform: none; align-content: center; animation-name: ffaMidP; }
@keyframes ffaMidP { from { opacity: 0; transform: scaleX(.2); } }
#rules .tgrid span strong { color: #fff4d6; font-weight: 700; }
#rules .steps li strong { color: #fff4d6; font-weight: 700; }
#over.ffa-noxp .ov-xp { display: none; }