/* Dice & Dominion — Battlefront (client/js/front/*). Pixel UI matching the D&D home screen (dnd_home.css).
   Everything is scoped to .bf (the lobby / play roots) except the body-level banners and the battle end card. */
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');

.bf {
  --px-ink: #120d09; --px-panel: #2a221b; --px-panel2: #352b21; --px-rim: #7a5c36; --px-rim-hi: #a8824c;
  --px-text: #f1e6cc; --px-muted: #bba98a; --px-gold: #f0c060; --px-green: #8fd06a; --px-red: #e0664a;
  --sun: #e0b040; --sun-d: #7a5a14; --sun-l: #ffe08a; --moon: #4f7fd8; --moon-d: #1e3a74; --moon-l: #a8c8ff;
  --px-head: 'Jersey 15', 'Inter', sans-serif;
  --font: 'Inter', system-ui, sans-serif;
  --title: 'Jersey 15', 'Inter', sans-serif; --title-color: #f6e2b0; --title-ls: .01em; --title-weight: 400;
  --radius: 0px; --btn-r: 0px; --field-r: 0px;
  --panel-bg: var(--px-panel2); --panel-border: 2px solid var(--px-ink); --panel-shadow: inset 0 0 0 1px #4a3a28;
  --btn-bg: linear-gradient(#4a3c2c 0 50%, #40342a 50%); --btn-bg-h: linear-gradient(#5a4834 0 50%, #4c3e30 50%);
  --btn-line: var(--px-ink); --btn-text: var(--px-text);
  --btn-shadow: inset 0 2px 0 rgba(255, 240, 200, .14), inset 0 -3px 0 rgba(0, 0, 0, .35);
  --btn-shadow-active: inset 0 3px 0 rgba(0, 0, 0, .35);
  --btn-clip: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
  --pri-bg: linear-gradient(#e2b04a 0 50%, #cf9a36 50%); --pri-bg-h: linear-gradient(#f0c060 0 50%, #dca844 50%); --pri-line: var(--px-ink); --pri-text: #1e1408;
  --on-bg: linear-gradient(#3e68b0 0 50%, #355c9e 50%); --on-text: #fff;
  --field: #18120d; --field-line: #4a3a28; --card: #241d17; --card-on: #2e3a52;
  --accent: var(--px-gold); --gold: var(--px-gold); --text: var(--px-text); --muted: var(--px-muted); --dim: #8f7f66; --line: #4a3a28; --line2: #5e4a32;
  font-family: var(--font); color: var(--px-text); background: #16120f; height: 100%; position: relative;
}
body[data-screen=front] #app { background: #16120f; }
.bf .btn { border-width: 2px; }
.bf .btn.sm { padding: 4px 8px; }
.bf .bf-g { color: var(--px-gold); font-weight: 700; }
.bf .bf-dim { color: var(--px-muted); }
.bf .tiny { font-size: 11px; }
.bf .spacer { flex: 1; }
.bf .grow { flex: 1; min-width: 0; }
.bf h1, .bf h2, .bf h3 { font-family: var(--px-head); font-weight: 400; letter-spacing: .01em; margin: 0; color: #f6e2b0; }
.bf .bf-frame {
  border: 8px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23120d09' d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%237a5c36' d='M1 1h10v10H1z'/%3E%3Cpath fill='%23a8824c' d='M2 1h8v1H2zM1 2h1v8H1z'/%3E%3Cpath fill='%23503a22' d='M2 10h8v1H2zM10 2h1v8h-1z'/%3E%3Cpath fill='%23120d09' d='M2 2h8v1H2zM2 9h8v1H2zM2 2h1v8H2zM9 2h1v8H9z'/%3E%3Cpath fill='%232a221b' d='M3 3h6v6H3z'/%3E%3C/svg%3E") 4 fill / 8px / 0 stretch;
  image-rendering: pixelated; background: none;
}
.bf .bf-box { background: #241d17; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; padding: 10px 12px; }
.bf .bf-box h3 { font-size: 24px; color: var(--px-gold); margin-bottom: 6px; }
.bf .bf-ico { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: middle; }
.bf .bf-ico.big { width: 30px; height: 30px; }
.bf .bf-ico.sm { width: 16px; height: 16px; }
.bf .bf-ico.xs { width: 12px; height: 12px; }
.bf .bf-ico svg { width: 100%; height: 100%; display: block; }
.bf .bf-x { flex: none; width: 28px; height: 28px; cursor: pointer; color: var(--px-text); background: #3a2e24; border: 2px solid var(--px-ink); font: 700 13px/1 var(--font); clip-path: var(--btn-clip); }
.bf .bf-x.sm { width: 22px; height: 22px; }
.bf .bf-x:hover { background: #8a3a22; }
.bf .bf-tag { display: inline-block; font: 600 11px/1 var(--font); padding: 3px 6px; color: var(--px-text); background: #3a2e24; border: 2px solid var(--px-ink); white-space: nowrap; }
.bf .bf-tag.gold { background: #4a3a14; color: var(--px-gold); }
.bf .bf-tag.red { background: #5a1f16; color: #ffc4b4; }
.bf .bf-tag.blue { background: #22365c; color: #cfe0ff; }
.bf .bf-odot { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--px-ink); margin-right: 3px; vertical-align: middle; }
.bf .bf-link { background: none; border: 0; color: var(--px-gold); cursor: pointer; text-decoration: underline; font-size: 12px; padding: 0; }
.bf .bf-mini { font: 600 11px/1 var(--font); padding: 3px 6px; cursor: pointer; color: var(--px-text); background: #3a2e24; border: 2px solid var(--px-ink); clip-path: var(--btn-clip); display: inline-flex; align-items: center; gap: 3px; }
.bf .bf-mini:hover { background: #5a4834; }
.bf .bf-mini.sun { background: #6a4c10; color: var(--sun-l); }
.bf .bf-mini.moon { background: #1e3a74; color: var(--moon-l); }
.bf .bf-face { display: inline-block; flex: none; overflow: hidden; background: #1c1611; border: 2px solid var(--px-ink); position: relative; }
.bf .bf-face img, .bf .bf-face canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.bf .bf-face.empty { display: inline-grid; place-items: center; color: var(--px-muted); font: 400 18px/1 var(--px-head); }
.bf .bf-fig { image-rendering: pixelated; display: block; }
.bf .bf-hint { background: #1c1611; border: 2px solid var(--px-ink); padding: 6px 8px; font-size: 12.5px; margin: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf .bf-hint.red { background: #3a1812; color: #ffd0c0; }

/* top bar (shared by lobby and play) */
.bf .bf-top { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 52px; background: linear-gradient(#2e251d 0 50%, #282019 50%); border-bottom: 2px solid var(--px-ink); box-shadow: inset 0 -2px 0 #4a3a28; position: relative; z-index: 6; }
.bf .bf-brand { display: flex; align-items: baseline; gap: 8px; flex: none; }
.bf .bf-logo, .bf.bf-loading .bf-logo { font: 400 30px/1 var(--px-head); color: #f6d68a; white-space: nowrap; text-shadow: 2px 0 0 var(--px-ink), -2px 0 0 var(--px-ink), 0 2px 0 var(--px-ink), 0 -2px 0 var(--px-ink), 0 4px 0 #6a4a20; }
.bf .bf-sub { font-size: 12px; color: var(--px-muted); }
.bf .bf-code { font: 400 22px/1 var(--px-head); color: var(--px-gold); letter-spacing: .18em; padding: 4px 10px; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px var(--px-rim); cursor: pointer; }
.bf .bf-code.sm { font-size: 18px; padding: 3px 7px; }
.bf .bf-code-wrap { display: flex; align-items: center; gap: 8px; }
.bf .bf-ib { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; height: 44px; padding: 4px 8px; cursor: pointer; color: var(--px-text);
  background: var(--btn-bg); border: 2px solid var(--px-ink); box-shadow: var(--btn-shadow); clip-path: var(--btn-clip); font: 400 14px/1 var(--px-head); }
.bf .bf-ib:hover { background: var(--btn-bg-h); }
.bf .bf-ib.on { background: var(--on-bg); }
.bf .bf-ib em { position: absolute; top: 2px; right: 4px; font: 700 10px/1 var(--font); color: var(--px-gold); font-style: normal; }
.bf .bf-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; background: var(--px-red); color: #fff; border: 2px solid var(--px-ink); font: 700 9px/10px var(--font); font-style: normal; animation: bf-blink 1s steps(2) infinite; }
@keyframes bf-blink { 50% { transform: translateY(-2px); } }

.bf.bf-loading { display: grid; place-content: center; gap: 10px; text-align: center; }

/* ==========================================================================
   Lobby
   ========================================================================== */
.bf.bf-lobby { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.bf .bf-lobby-body { overflow: auto; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; gap: 12px; align-content: start;
  background: radial-gradient(ellipse at 20% 0%, rgba(224, 176, 64, .10), transparent 50%), radial-gradient(ellipse at 80% 0%, rgba(79, 127, 216, .12), transparent 50%); }
.bf .bf-lobby-intro { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; }
.bf .bf-teams { display: grid; grid-template-columns: 1fr minmax(160px, .7fr) 1fr; gap: 10px; align-items: start; }
.bf .bf-team { background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 2px #3e3022; min-height: 220px; display: flex; flex-direction: column; }
.bf .bf-team > header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 2px solid var(--px-ink); background: #2a221b; }
.bf .bf-team > header h3 { font-size: 28px; }
.bf .bf-team.sun > header { background: linear-gradient(#7a5a14 0 50%, #6a4c10 50%); }
.bf .bf-team.sun > header h3 { color: var(--sun-l); }
.bf .bf-team.moon > header { background: linear-gradient(#24447e 0 50%, #1e3a74 50%); }
.bf .bf-team.moon > header h3 { color: var(--moon-l); }
.bf .bf-team.sun { box-shadow: inset 0 0 0 2px var(--sun-d); }
.bf .bf-team.moon { box-shadow: inset 0 0 0 2px var(--moon-d); }
.bf .bf-team.over { box-shadow: inset 0 0 0 3px var(--px-gold); background: #2a2216; }
.bf .bf-team-ico { font-size: 22px; }
.bf .bf-team > footer { padding: 6px 10px; font-size: 11px; border-top: 2px solid #2a221b; margin-top: auto; }
.bf .bf-team-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.bf .bf-empty { color: var(--px-muted); font-size: 12px; text-align: center; padding: 18px 6px; border: 2px dashed #3e3022; }
.bf .bf-pcard { display: flex; gap: 8px; align-items: center; padding: 6px; background: #2a221b; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; min-width: 0; }
.bf .bf-pcard[draggable=true] { cursor: grab; }
.bf .bf-pcard.dragging { opacity: .5; }
.bf .bf-pcard.me { box-shadow: inset 0 0 0 2px var(--px-gold); }
.bf .bf-pcard.off { opacity: .6; }
.bf .bf-pc-main { flex: 1; min-width: 0; }
.bf .bf-pc-name { font: 400 20px/1.05 var(--px-head); color: #f6e2b0; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .bf-you { font: 700 9px/1 var(--font); font-style: normal; background: var(--px-gold); color: #1e1408; padding: 2px 4px; text-transform: uppercase; }
.bf .bf-pc-hero { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .bf-want { font: 600 10px/1 var(--font); margin-top: 3px; display: inline-block; padding: 2px 5px; border: 1px solid var(--px-ink); animation: bf-blink 1s steps(2) infinite; }
.bf .bf-want.sun { background: #6a4c10; color: var(--sun-l); }
.bf .bf-want.moon { background: #1e3a74; color: var(--moon-l); }
.bf .bf-pc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bf .bf-pc-moves { display: flex; gap: 3px; }
.bf .bf-rdy { width: 20px; height: 20px; display: grid; place-items: center; font: 700 11px/1 var(--font); border: 2px solid var(--px-ink); background: #3a2e24; color: var(--px-muted); }
.bf .bf-rdy.on { background: #3e7a3a; color: #dfffd0; }
.bf .bf-lobby-side { display: flex; flex-direction: column; gap: 12px; grid-row: 2; grid-column: 2; }
.bf .bf-teams { grid-row: 2; grid-column: 1; }
.bf .bf-herolist { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.bf .bf-herotile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; cursor: pointer; color: var(--px-text); background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3e3022; clip-path: var(--btn-clip); font: inherit; }
.bf .bf-herotile:hover { box-shadow: inset 0 0 0 2px var(--px-rim-hi); }
.bf .bf-herotile.on { box-shadow: inset 0 0 0 2px var(--px-gold); background: #2a2216; }
.bf .bf-herotile.add { border-style: dashed; }
.bf .bf-ht-fig { width: 52px; height: 52px; display: grid; place-items: center; }
.bf .bf-ht-fig.plus { font: 400 40px/1 var(--px-head); color: var(--px-muted); }
.bf .bf-ht-nm { font: 400 17px/1 var(--px-head); color: #f6e2b0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf .bf-ht-lv { font-size: 10px; color: var(--px-muted); }
.bf .bf-ht-warn { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; background: #e0a030; color: #1e1408; border: 2px solid var(--px-ink); font: 700 10px/12px var(--font); }
.bf .bf-sets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.bf .bf-set { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--px-muted); }
.bf .bf-set select { width: 100%; padding: 5px 6px; }
.bf .bf-set.chk { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; color: var(--px-text); font-size: 12.5px; }
.bf .bf-lobby-foot { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: linear-gradient(#2e251d 0 50%, #282019 50%); border-top: 2px solid var(--px-ink); box-shadow: inset 0 2px 0 #4a3a28; }
.bf .bf-ready { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; cursor: pointer; color: #1e1408; background: var(--pri-bg); border: 2px solid var(--px-ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(0, 0, 0, .3); clip-path: var(--btn-clip); }
.bf .bf-ready.on { background: linear-gradient(#7ac060 0 50%, #62a84a 50%); }
.bf .bf-ready b { display: block; font: 400 26px/.9 var(--px-head); text-align: left; }
.bf .bf-ready small { display: block; font: 600 11px/1.4 var(--font); text-align: left; opacity: .8; }
.bf .bf-ready .bf-ico { width: 28px; height: 28px; }
.bf .bf-start-note { flex: 1; font-size: 12.5px; color: #ffd8a0; }
.bf .bf-start-note .ok { color: var(--px-green); }
.bf .bf-start { font: 400 26px/1 var(--px-head); padding: 12px 22px; }

/* ==========================================================================
   Play: top bar · map · bottom bar
   ========================================================================== */
.bf.bf-play { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.bf .bf-teamchip { font: 400 20px/1 var(--px-head); padding: 5px 10px; border: 2px solid var(--px-ink); white-space: nowrap; }
.bf .bf-teamchip.sun { background: linear-gradient(#8a6618 0 50%, #7a5a14 50%); color: var(--sun-l); }
.bf .bf-teamchip.moon { background: linear-gradient(#2a4c8a 0 50%, #24447e 50%); color: var(--moon-l); }
.bf .bf-gold { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; }
.bf .bf-gold b { font: 400 26px/1 var(--px-head); color: var(--px-gold); }
.bf .bf-goldchip { display: inline-flex; align-items: center; gap: 4px; font: 400 22px/1 var(--px-head); color: var(--px-gold); padding: 2px 8px; background: #1c1611; border: 2px solid var(--px-ink); }
.bf .bf-income { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; }
.bf .bf-income small { display: block; font: 600 9px/1 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--px-muted); }
.bf .bf-income > span > b { font: 400 18px/1 var(--px-head); color: var(--px-green); }
.bf .bf-ring { position: relative; display: inline-block; flex: none; }
.bf .bf-ring svg { width: 100%; height: 100%; display: block; }
.bf .bf-ring circle { fill: none; stroke-width: 4; }
.bf .bf-ring circle.bg { stroke: #3a2e24; fill: #120d09; }
.bf .bf-ring circle.fg { stroke: var(--px-gold); stroke-linecap: butt; transition: stroke-dashoffset .25s linear; }
.bf .bf-ring > b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 9.5px/1 var(--font); color: #f6e2b0; }
.bf .bf-herost { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 8px 2px 2px; background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; white-space: nowrap; overflow: hidden; }
.bf .bf-st { font: 400 19px/1 var(--px-head); color: #f6e2b0; overflow: hidden; text-overflow: ellipsis; }
.bf .bf-st b { font: 600 12px/1 var(--font); color: var(--px-gold); }
.bf .bf-st.st-battle { color: #ffb4a0; }
.bf .bf-st.st-revive { color: #c8ffb0; }
.bf .bf-st.st-move { color: #cfe0ff; }

.bf .bf-mapwrap { position: relative; overflow: hidden; min-height: 0; background: #2a2632; }
.bf .bf-maphost { position: absolute; inset: 0; }
.bf .bf-canvas { display: block; touch-action: none; cursor: grab; image-rendering: pixelated; }
.bf .bf-mapctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.bf .bf-mapctl .btn { width: 36px; height: 34px; padding: 0; font: 700 16px/1 var(--font); }
.bf.picking .bf-canvas { cursor: crosshair; }

/* team roster (left, desktop) */
.bf .bf-roster { position: absolute; top: 10px; left: 10px; width: 270px; max-height: calc(100% - 150px); overflow: auto; z-index: 3; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.bf .bf-roster[hidden] { display: none; }
.bf .bf-mhead { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; margin-bottom: 8px; border-bottom: 2px solid #120d09; box-shadow: 0 2px 0 #4a3a28; }
.bf .bf-mhead.sm { padding-bottom: 4px; margin-bottom: 4px; font: 400 19px/1 var(--px-head); gap: 6px; }
.bf .bf-mhead h2 { font-size: 32px; }
.bf .bf-rlist { display: flex; flex-direction: column; gap: 4px; }
.bf .bf-rrow { display: flex; align-items: center; gap: 6px; padding: 4px; background: #1c1611; border: 2px solid var(--px-ink); }
.bf .bf-rrow.me { box-shadow: inset 0 0 0 1px var(--px-gold); }
.bf .bf-rrow.off { opacity: .6; }
.bf .bf-rmain { flex: 1; min-width: 0; }
.bf .bf-rname { font: 600 12.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .bf-rst { font-size: 11.5px; color: var(--px-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf .bf-rst .st-battle { color: #ffb4a0; } .bf .bf-rst .st-revive { color: #c8ffb0; } .bf .bf-rst .st-move { color: #cfe0ff; }
.bf .bf-rst b { color: var(--px-gold); font-weight: 600; }
.bf .bf-rside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bf .bf-rgold { display: inline-flex; align-items: center; gap: 3px; font: 400 16px/1 var(--px-head); color: var(--px-gold); }
.bf .bf-give { display: flex; gap: 3px; }
.bf .bf-give input { width: 64px; padding: 3px 5px; }
.bf .bf-foes { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bf .bf-foe { font: 600 11px/1 var(--font); padding: 2px 5px; border: 1px solid var(--px-ink); }
.bf .bf-foe.sun { background: #4a3a14; color: var(--sun-l); } .bf .bf-foe.moon { background: #1e2c48; color: var(--moon-l); }

/* event feed ticker (bottom-left) */
.bf .bf-feedmini { position: absolute; left: 10px; bottom: 10px; width: min(380px, calc(100% - 420px)); min-width: 260px; display: flex; flex-direction: column-reverse; gap: 3px; z-index: 2; pointer-events: none; }
.bf .bf-feedmini > * { pointer-events: auto; }
.bf .bf-feedmini .bf-fi { background: rgba(18, 13, 9, .82); }
.bf .bf-feedmini .bf-mini { align-self: flex-start; }
.bf .bf-fi { display: flex; align-items: baseline; gap: 6px; padding: 4px 8px; font-size: 12.5px; border-left: 3px solid #5e4a32; background: #1c1611; }
.bf .bf-fi.k-win, .bf .bf-fi.k-build, .bf .bf-fi.k-defend, .bf .bf-fi.k-capture { border-left-color: var(--px-gold); } .bf .bf-fi.k-battle, .bf .bf-fi.k-alert, .bf .bf-fi.k-loss, .bf .bf-fi.k-kill, .bf .bf-fi.k-attack, .bf .bf-fi.k-death, .bf .bf-fi.k-lost { border-left-color: var(--px-red); }
.bf .bf-fi.k-income, .bf .bf-fi.k-gold { border-left-color: var(--px-green); } .bf .bf-fi.k-spy { border-left-color: #b08aff; }
.bf .bf-fi-t { flex: 1; min-width: 0; }
.bf .bf-fi-ago { font-size: 10.5px; color: var(--px-muted); }
.bf .bf-feed .bf-mbody { gap: 4px; }

/* city card (right) */
.bf #bf-card { position: absolute; top: 10px; right: 56px; z-index: 4; width: min(360px, calc(100% - 80px)); max-height: calc(100% - 20px); display: flex; }
.bf #bf-card:empty { display: none; }
.bf .bf-card { display: flex; flex-direction: column; gap: 8px; overflow: auto; width: 100%; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.bf .bf-card-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid #120d09; box-shadow: 0 2px 0 #4a3a28; }
.bf .bf-card-head h2 { font-size: 28px; line-height: 1; }
.bf .bf-banner { width: 34px; height: 40px; display: grid; place-items: center; font-size: 18px; border: 2px solid var(--px-ink); clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); }
.bf .bf-banner.sun { background: var(--sun); color: #3a2a08; } .bf .bf-banner.moon { background: var(--moon); color: #fff; } .bf .bf-banner.neutral { background: #6a645a; color: #e8e2d4; }
.bf .bf-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bf .bf-facts > div { padding: 4px 8px 5px; background: #1c1611; border: 2px solid var(--px-ink); min-width: 0; }
.bf .bf-facts span { display: block; font: 600 9.5px/1.2 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--px-muted); }
.bf .bf-facts b { display: block; font: 600 13px/1.35 var(--font); }
.bf .bf-sub { font: 400 18px/1 var(--px-head); color: var(--px-gold); margin-top: 2px; }
.bf .bf-gar { display: flex; flex-wrap: wrap; gap: 4px; }
.bf .bf-garu { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; background: #1c1611; border: 2px solid var(--px-ink); font-size: 12px; }
.bf .bf-garu b { font: 400 16px/1 var(--px-head); color: var(--px-gold); }
.bf .bf-garu .bf-odot { position: absolute; top: 2px; right: 2px; margin: 0; }
.bf .bf-heroes-here { display: flex; flex-wrap: wrap; gap: 4px; }
.bf .bf-hh { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border: 2px solid var(--px-ink); font-size: 12px; background: #1c1611; }
.bf .bf-hh.sun { box-shadow: inset 0 0 0 1px var(--sun); } .bf .bf-hh.moon { box-shadow: inset 0 0 0 1px var(--moon); }
.bf .bf-card-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bf .bf-card-acts > .btn { width: 100%; font: 400 22px/1 var(--px-head); padding: 8px 12px; }
.bf .bf-acts2 { display: flex; flex-wrap: wrap; gap: 4px; }
.bf .bf-acts2 .btn { flex: 1 1 auto; }

/* pick-mode / battle / revive bars over the map */
.bf #bf-pickbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; }
.bf .bf-pickbar { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 400 20px/1 var(--px-head); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.bf .bf-pickbar.st-battle span { color: #ffb4a0; }
.bf #bf-revive { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -110%); z-index: 4; pointer-events: none; width: max-content; max-width: calc(100% - 16px); }
.bf .bf-revive { display: flex; align-items: center; gap: 12px; padding: 4px 8px; max-width: min(460px, 92vw); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)); }
.bf .bf-rv-t { font: 400 30px/1 var(--px-head); color: #c8ffb0; }
.bf .bf-rv-t b { font: inherit; color: #fff; }
.bf .bf-revive .bf-ring circle.fg { stroke: #9fe070; }
.bf .bf-revive .bf-ring > b { display: none; }

/* team chat */
.bf .bf-chat { position: absolute; left: 10px; bottom: 10px; z-index: 5; width: min(380px, calc(100% - 20px)); height: min(320px, 62%); display: flex; flex-direction: column; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.bf .bf-chat[hidden] { display: none; }
.bf .bf-chat .chat-log { flex: 1; min-height: 0; overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 3px; padding: 2px; }
.bf .bf-chat .chat-log .sys { color: var(--px-muted); font-size: 11.5px; }
.bf .bf-chat .chat-line-face { display: flex; align-items: center; gap: 6px; }
.bf .bf-chat .chat-input { display: flex; gap: 6px; margin-top: 6px; }
.bf .bf-chat .chat-input input { flex: 1; min-width: 0; }

/* bottom bar */
.bf .bf-bar { display: flex; justify-content: center; gap: 6px; padding: 6px 10px 8px; background: linear-gradient(#2e251d 0 50%, #282019 50%); border-top: 2px solid var(--px-ink); box-shadow: inset 0 2px 0 #4a3a28; position: relative; z-index: 6; }
.bf .bf-bar .bf-ib { min-width: 86px; height: 50px; flex-direction: row; gap: 6px; font-size: 19px; }

/* ==========================================================================
   Overlays: army / feed / team / menu
   ========================================================================== */
.bf .bf-ovl { position: fixed; inset: 0; z-index: 900; background: rgba(12, 9, 7, .55); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 16px; }
.bf .bf-ovl.right { justify-content: flex-end; padding: 60px 12px 70px; background: transparent; pointer-events: none; }
.bf .bf-ovl.right > * { pointer-events: auto; }
.bf .bf-modal { width: min(820px, 100%); max-height: calc(100vh - 80px); display: flex; flex-direction: column; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45)); }
.bf .bf-ovl.right .bf-modal { width: min(400px, 100%); max-height: calc(100vh - 140px); }
.bf .bf-mbody { overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 4px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.bf .bf-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.bf .bf-tab { font: 400 20px/1 var(--px-head); padding: 6px 14px; cursor: pointer; color: var(--px-muted); background: #1c1611; border: 2px solid var(--px-ink); clip-path: var(--btn-clip); }
.bf .bf-tab.on { background: var(--px-blue, #3e68b0); color: #fff; }
.bf .bf-sec h3 { font-size: 24px; color: var(--px-gold); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.bf .bf-sec h3 .bf-dim { font: 500 12px/1 var(--font); }
.bf .bf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf .bf-units { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.bf .bf-units.sm .bf-unit { width: 40px; }
.bf .bf-unit { position: relative; width: 58px; padding: 2px 2px 3px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; color: var(--px-text); background: #1c1611; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #3e3022; clip-path: var(--btn-clip); font: inherit; }
.bf .bf-unit:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--px-rim-hi); }
.bf .bf-unit.on { box-shadow: inset 0 0 0 2px var(--px-gold); background: #3a2e14; }
.bf .bf-unit.ally, .bf .bf-unit:disabled { cursor: default; opacity: .7; }
.bf .bf-unit .bf-lv, .bf .bf-spy .bf-lv { position: absolute; top: 2px; left: 2px; min-width: 15px; height: 15px; background: #3e68b0; color: #fff; border: 2px solid var(--px-ink); font: 700 9px/11px var(--font); text-align: center; }
.bf .bf-unit .bf-odot { position: absolute; top: 3px; right: 3px; }
.bf .bf-un { font-size: 9.5px; color: var(--px-muted); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bf .bf-units.sm .bf-un { display: none; }
.bf .bf-act-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; background: #2e3a52; border: 2px solid var(--px-ink); margin: 4px 0; }
.bf .bf-act-row select { max-width: 200px; padding: 4px 6px; }
.bf .bf-ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.bf .bf-ccard { background: #241d17; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; padding: 8px; }
.bf .bf-ccard.focus { box-shadow: inset 0 0 0 2px var(--px-gold); }
.bf .bf-cc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bf .bf-cc-nm { font: 400 22px/1 var(--px-head); color: #f6e2b0; }
.bf .bf-cap { font: 400 18px/1 var(--px-head); color: var(--px-green); padding: 2px 6px; background: #1c1611; border: 2px solid var(--px-ink); }
.bf .bf-cap.full { color: #ffb36b; }
.bf .bf-capbar { height: 6px; background: #120d09; border: 1px solid #120d09; margin: 5px 0 2px; }
.bf .bf-capbar i { display: block; height: 100%; background: linear-gradient(#9fe070 0 50%, #6ab048 50%); }
.bf .bf-cc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.bf .bf-squad { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; padding: 4px 8px; background: #1c1611; border: 2px solid var(--px-ink); margin-bottom: 4px; font-size: 12.5px; }
.bf .bf-squad .bf-units { margin: 0; }
.bf .bf-eta { font: 600 12px/1 var(--font); color: var(--px-gold); }
.bf .bf-prog { grid-column: 1 / -1; height: 5px; background: #120d09; }
.bf .bf-prog i { display: block; height: 100%; background: var(--px-gold); width: 0; }
.bf .bf-allies { display: flex; flex-wrap: wrap; gap: 4px; }
.bf .bf-hint .btn { margin-left: auto; }
.bf .bf-queue { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.bf .bf-qi { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; background: #1c1611; border: 2px solid var(--px-ink); font-size: 12px; }
.bf .bf-ucards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 8px; }
.bf .bf-ucard { display: flex; gap: 8px; padding: 6px; background: #241d17; border: 2px solid var(--px-ink); box-shadow: inset 0 0 0 1px #4a3a28; }
.bf .bf-uc-fig { position: relative; flex: none; width: 68px; height: 72px; display: grid; place-items: end center; background: linear-gradient(#1e2638 0 78%, #3a4a28 78% 84%, #2e3a20 84%); border: 2px solid var(--px-ink); }
.bf .bf-armor { position: absolute; top: 2px; right: 2px; font: 400 14px/1 var(--px-head); color: #1e1408; background: var(--px-gold); padding: 1px 4px; border: 2px solid var(--px-ink); }
.bf .bf-uc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bf .bf-uc-head { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.bf .bf-uc-head b { font: 400 22px/1 var(--px-head); color: #f6e2b0; }
.bf .bf-uc-stats { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 11.5px; }
.bf .bf-uc-desc { font-size: 11.5px; color: var(--px-muted); line-height: 1.3; }
.bf .bf-uc-btns { display: flex; gap: 4px; margin-top: auto; }
.bf .bf-armory { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.bf .bf-arm { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; background: #241d17; border: 2px solid var(--px-ink); }
.bf .bf-arm-main { flex: 1; }
.bf .bf-arm-main b { font: 400 20px/1 var(--px-head); color: #f6e2b0; }
.bf .bf-pips { display: flex; gap: 3px; margin-top: 3px; }
.bf .bf-pips i { font: 400 13px/1 var(--px-head); font-style: normal; padding: 1px 5px; background: #1c1611; border: 2px solid var(--px-ink); color: #5e4a32; }
.bf .bf-pips i.on { background: #4a3a14; color: var(--px-gold); }
.bf .bf-spylevels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.bf .bf-spylevels > div { padding: 6px 8px; background: #241d17; border: 2px solid var(--px-ink); font-size: 11.5px; display: flex; flex-direction: column; gap: 2px; }
.bf .bf-spylevels b { font: 400 18px/1 var(--px-head); color: #d8c0ff; }
.bf .bf-spylevels span { color: var(--px-muted); }
.bf .bf-spy { display: flex; align-items: flex-start; gap: 8px; padding: 6px; background: #241d17; border: 2px solid var(--px-ink); margin-bottom: 6px; }
.bf .bf-spy-ico { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: #2a1840; border: 2px solid var(--px-ink); flex: none; }
.bf .bf-spy-main { flex: 1; min-width: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.bf .bf-spy-main b { font: 400 18px/1 var(--px-head); color: #d8c0ff; }
.bf .bf-spy .bf-act-row { background: #241d32; }
.bf .bf-rules { display: flex; flex-wrap: wrap; gap: 4px; }
.bf .bf-rules span { padding: 4px 8px; background: #1c1611; border: 2px solid var(--px-ink); font-size: 12px; }

/* game over */
.bf #bf-over:empty { display: none; }
.bf .bf-over { position: absolute; inset: 0; z-index: 950; background: rgba(12, 9, 7, .72); display: grid; place-items: center; padding: 16px; }
.bf .bf-over-box { width: min(820px, 100%); max-height: calc(100% - 20px); display: flex; flex-direction: column; gap: 12px; overflow: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45)); }
.bf .bf-over-banner { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 2px solid var(--px-ink); }
.bf .bf-over-banner.sun { background: linear-gradient(#a07a1c 0 50%, #8a6618 50%); box-shadow: inset 0 0 0 2px var(--sun-l); }
.bf .bf-over-banner.moon { background: linear-gradient(#2e5496 0 50%, #2a4c8a 50%); box-shadow: inset 0 0 0 2px var(--moon-l); }
.bf .bf-over-banner h1 { font-size: 46px; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.bf .bf-over-ico { font-size: 56px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); animation: bf-blink 1.2s steps(2) infinite; }
.bf .bf-over-sub { color: #fff6dc; font-size: 14px; margin-top: 4px; }
.bf .bf-stats-wrap { overflow-x: auto; }
.bf .bf-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.bf .bf-stats th { font: 600 10px/1.2 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--px-muted); text-align: right; padding: 6px 8px; border-bottom: 2px solid var(--px-ink); }
.bf .bf-stats th:first-child, .bf .bf-stats td:first-child { text-align: left; }
.bf .bf-stats td { text-align: right; padding: 6px 8px; border-bottom: 1px solid #3a2e24; font-variant-numeric: tabular-nums; }
.bf .bf-stats tr.sun td:first-child { color: var(--sun-l); } .bf .bf-stats tr.moon td:first-child { color: var(--moon-l); }
.bf .bf-over-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.bf .bf-over-foot .btn.primary { font: 400 24px/1 var(--px-head); padding: 10px 18px; }

/* ==========================================================================
   Body-level: late-join / alert banners and the battle end card
   ========================================================================== */
.bf-banners { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 2100; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: max-content; max-width: 94vw; }
.bf-joinbanner { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font: 400 26px/1.05 'Jersey 15', 'Inter', sans-serif; color: #fff6dc; background: linear-gradient(#5a3a14 0 50%, #4a3010 50%);
  border: 3px solid #120d09; box-shadow: inset 0 0 0 2px #f0c060, 0 6px 0 rgba(0, 0, 0, .4); animation: bf-in .25s steps(4); text-shadow: 0 2px 0 #120d09; }
.bf-joinbanner.enemy { background: linear-gradient(#6a1e16 0 50%, #5a1a12 50%); box-shadow: inset 0 0 0 2px #ff8a6a, 0 6px 0 rgba(0, 0, 0, .4); }
.bf-joinbanner.out { opacity: 0; transition: opacity .35s steps(3); }
.bf-jb-ico { font-size: 26px; }
@keyframes bf-in { from { transform: translateY(-16px) scale(.9); opacity: 0; } }
.bf-endcard { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 2050; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 22px; min-width: 300px; text-align: center;
  background: #2a221b; border: 3px solid #120d09; box-shadow: inset 0 0 0 2px #a8824c, 0 8px 0 rgba(0, 0, 0, .45); color: #f1e6cc; animation: bf-in .25s steps(4); }
.bf-endcard.win { box-shadow: inset 0 0 0 2px #f0c060, 0 8px 0 rgba(0, 0, 0, .45); }
.bf-endcard.loss { box-shadow: inset 0 0 0 2px #e0664a, 0 8px 0 rgba(0, 0, 0, .45); }
.bf-ec-t { font: 400 40px/1 'Jersey 15', sans-serif; color: #f6d68a; }
.bf-endcard.loss .bf-ec-t { color: #ff9d86; }
.bf-ec-s { font-size: 14px; }

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 1000px) {
  .bf .bf-lobby-body { grid-template-columns: 1fr; }
  .bf .bf-teams, .bf .bf-lobby-side { grid-column: 1; grid-row: auto; }
  .bf .bf-herost { max-width: 260px; }
}
@media (max-width: 760px) {
  .bf .bf-top { gap: 6px; padding: 4px 6px; min-height: 46px; flex-wrap: wrap; }
  .bf .bf-logo { font-size: 22px; }
  .bf.bf-play .bf-brand, .bf .bf-sub { display: none; }
  .bf .bf-teamchip { font-size: 16px; padding: 4px 6px; }
  .bf .bf-gold b { font-size: 20px; }
  .bf .bf-income small { display: none; }
  .bf .bf-income .bf-ring { width: 28px !important; height: 28px !important; }
  .bf.bf-play .bf-code { display: none; }
  .bf .bf-top > .bf-ib { min-width: 36px; height: 36px; padding: 3px; }
  .bf .bf-herost { order: 10; flex: 1 1 100%; max-width: none; }
  .bf .bf-st { font-size: 17px; }
  .bf .bf-teams { grid-template-columns: 1fr; }
  .bf .bf-team { min-height: 0; }
  .bf .bf-empty { padding: 8px; }
  .bf .bf-lobby-body { padding: 8px; gap: 8px; }
  .bf .bf-lobby-intro { font-size: 12px; }
  .bf .bf-sets { grid-template-columns: 1fr 1fr; }
  .bf .bf-lobby-foot { flex-wrap: wrap; gap: 6px; padding: 6px; }
  .bf .bf-ready { height: 46px; flex: 1; }
  .bf .bf-start-note { order: -1; flex: 1 1 100%; font-size: 11.5px; }
  .bf .bf-start { flex: 1; font-size: 22px; padding: 10px; }
  .bf .bf-code-wrap .btn, .bf .bf-code-wrap .bf-dim { display: none; }
  .bf .bf-code { font-size: 18px; padding: 3px 6px; }
  .bf #bf-card { top: auto; bottom: 6px; left: 6px; right: 6px; width: auto; max-height: 62%; }
  .bf .bf-card-head h2 { font-size: 24px; }
  .bf .bf-mapctl { top: 6px; right: 6px; }
  .bf .bf-mapctl .btn { width: 32px; height: 30px; }
  .bf .bf-bar { gap: 3px; padding: 4px; justify-content: space-between; }
  .bf .bf-bar .bf-ib { min-width: 0; flex: 1; height: 50px; flex-direction: column; gap: 1px; font-size: 13px; padding: 3px 1px; }
  .bf .bf-bar .bf-ib .bf-ico { width: 20px; height: 20px; }
  .bf .bf-ovl, .bf .bf-ovl.right { padding: 6px; align-items: stretch; }
  .bf .bf-modal { width: 100%; max-height: calc(100vh - 12px); }
  .bf .bf-ovl.right { padding: 52px 6px 64px; align-items: flex-end; }
  .bf .bf-ovl.right .bf-modal { width: 100%; max-height: calc(100vh - 124px); }
  .bf .bf-mhead h2 { font-size: 26px; }
  .bf .bf-tabs { gap: 3px; }
  .bf .bf-tab { flex: 1; padding: 6px 4px; font-size: 17px; text-align: center; }
  .bf .bf-ccards, .bf .bf-ucards, .bf .bf-armory { grid-template-columns: 1fr; }
  .bf .bf-spylevels { grid-template-columns: 1fr; }
  .bf .bf-act-row select { max-width: 100%; flex: 1 1 140px; }
  .bf .bf-chat { left: 6px; right: 6px; bottom: 6px; width: auto; height: 55%; }
  .bf #bf-pickbar { top: 6px; left: 6px; right: 46px; transform: none; }
  .bf .bf-pickbar { white-space: normal; font-size: 16px; }
  .bf #bf-revive { top: 8px; transform: translateX(-50%); }
  .bf .bf-revive { padding: 2px 4px; }
  .bf .bf-rv-t { font-size: 24px; }
  .bf .bf-over-banner h1 { font-size: 32px; }
  .bf .bf-over-ico { font-size: 40px; }
  .bf-joinbanner { font-size: 19px; padding: 8px 12px; }
  .bf-endcard { bottom: 70px; min-width: 0; width: calc(100vw - 24px); }
}
.bf .btn.primary .bf-g { color: #3a2408; }
.bf .bf-acts2 select { flex: 1 1 auto; padding: 4px 6px; font-size: 12px; }
.bf .bf-start .bf-ico { width: 22px; height: 22px; margin-right: 4px; }
.bf .bf-emo { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 0 #000); }
.bf .bf-herost { position: relative; }
.bf .bf-herost .bf-badge { top: -6px; right: -6px; left: auto; }
.bf .bf-ib.bf-levelup { border-color: var(--px-gold); box-shadow: inset 0 0 0 2px var(--px-gold), 0 0 14px rgba(232, 192, 112, .45); animation: bfLevelUp 1.6s ease-in-out infinite; }
.bf .bf-ib.bf-levelup span:not(.bf-emo) { color: var(--px-gold); }
@keyframes bfLevelUp { 50% { box-shadow: inset 0 0 0 2px var(--px-gold), 0 0 22px rgba(232, 192, 112, .8); } }
.bf .bf-xp { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 92px; margin: 0 6px; line-height: 1; }
.bf .bf-xp b { font-size: 13px; color: var(--px-gold); }
.bf .bf-xp small { font-size: 10px; color: var(--px-dim, #a89a84); white-space: nowrap; }
.bf .bf-xpbar { display: block; height: 6px; background: #120d09; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a2f22; }
.bf .bf-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #6ab4ff, #a6e0ff); box-shadow: 0 0 6px #6ab4ff88; transition: width .6s; }
.bf-endcard .bf-loots, .bf-loots { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 3px; }
.bf-loot { font-size: 14px; padding: 4px 8px; background: #0e0a07cc; border: 1px solid #4a3a28; border-radius: 4px; }
.bf-loot small { opacity: .7; text-transform: capitalize; }
.bf-loot.dim { opacity: .7; }
.bf .bf-chatmode { display: inline-flex; gap: 0; border: 2px solid var(--px-ink, #000); }
.bf .bf-chatmode button { font: inherit; font-size: 13px; font-weight: 700; padding: 4px 10px; cursor: pointer; background: #1c1611; color: var(--px-text, #e8dcc8); border: 0; }
.bf .bf-chatmode button + button { border-left: 2px solid var(--px-ink, #000); }
.bf .bf-chatmode button.on { background: #2f5fb0; color: #fff; }
.bf .bf-chatmode button[data-chatmode="taunt"].on { background: #b0402f; }
.bf .bf-chat.taunting { box-shadow: inset 0 0 0 2px #b0402f88; }