:root {
  --green: #23fe81;
  --green-soft: #92f8bd;
  --mint: #e2f4e9;
  --ink: #111412;
  --white: #f7fbf9;
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
.canvas { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: transparent; }
.background-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
#overlay-content { position: absolute; inset: 0; --font-scale: 1; --global-font-scale: 1; --num-x: 0px; --num-y: 0px; --team-x: 0px; --total-x: 0px; --booyah-x: 0px; --played-x: 0px; --kills-x: 0px; --gp-x: 0px; --mvp-x: 0px; --mvp-y: 0px; --mvp-scale: 1; font-family: var(--overlay-font, "Arial Narrow"), "Segoe UI", Arial, sans-serif; }
.editor-mode [data-edit-key] { cursor: pointer; }
.editor-mode [data-edit-key]:hover { outline: 2px solid rgba(35,254,129,.65); outline-offset: 2px; z-index: 29; }
.editor-mode .preview-highlight { outline: 3px dashed #23fe81; outline-offset: 2px; filter: drop-shadow(0 0 .35vw rgba(35,254,129,.72)); z-index: 30; }
.brand-lockup { position: absolute; display: flex; align-items: center; gap: 1.25vw; color: var(--ink); }
.brand-lockup.center { left: 50%; top: 4.3%; transform: translateX(-50%); text-align: left; }
.brand-lockup img { width: 6.7vw; height: 4.9vw; object-fit: contain; }
.brand-lockup strong, .brand-lockup span { display: block; white-space: nowrap; }
.brand-lockup strong { font-size: calc(2.55vw * var(--global-font-scale)); line-height: .85; font-weight: 900; letter-spacing: -.055em; }
.brand-lockup span { margin-top: .45vw; color: #437057; font-size: calc(.72vw * var(--global-font-scale)); font-weight: 800; letter-spacing: .19em; }
.data-row { position: absolute; color: #17211b; font-weight: 800; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.data-row .cell { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.data-row .team-cell { justify-content: flex-start; gap: .4vw; padding: 0 .52vw; font-size: calc(1.2vw * var(--font-scale)); letter-spacing: -.025em; }
.data-row .team-cell { transform: translateX(var(--team-x)); }
.data-row .team-logo-img { flex: 0 0 auto; width: 2.15vw; height: 2.15vw; object-fit: contain; }
.data-row .team-logo-img.empty { display: inline-block; }
.data-row .team-flag-img { flex: 0 0 auto; width: 2.15vw; height: 2.15vw; display: grid; place-items: center; overflow: hidden; }
.data-row .team-flag-img img { width: 94%; height: 66%; object-fit: contain; }
.data-row .team-cell b { overflow: hidden; text-overflow: ellipsis; }
.data-row .number { font-size: calc(1.45vw * var(--font-scale)); transform: translate(var(--num-x),var(--num-y)); }
.data-row .total-cell { transform: translate(calc(var(--num-x) + var(--total-x)),var(--num-y)); }
.data-row .booyah-cell { transform: translate(calc(var(--num-x) + var(--booyah-x)),var(--num-y)); }
.data-row .played-cell { transform: translate(calc(var(--num-x) + var(--played-x)),var(--num-y)); }
.data-row .kills-cell { transform: translate(calc(var(--num-x) + var(--kills-x)),var(--num-y)); }
.data-row .gp-cell { transform: translate(calc(var(--num-x) + var(--gp-x)),var(--num-y)); }
.data-row.compact .team-cell { font-size: calc(1vw * var(--font-scale)); }
.data-row.compact .team-logo-img, .data-row.compact .team-flag-img { width: 1.82vw; height: 1.82vw; }
.data-row.compact .number { font-size: calc(1.24vw * var(--font-scale)); }
.empty-mark { opacity: .35; }
.mvp-block { position: absolute; color: var(--white); }
.mvp-block { transform: translate(var(--mvp-x),var(--mvp-y)) scale(var(--mvp-scale)); transform-origin: center bottom; }
.mvp-photo { position: absolute; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.mvp-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mvp-band { position: absolute; padding: .7vw 1vw .6vw; color: #07130c; background: var(--green); clip-path: polygon(0 0,100% 0,96% 100%,0 100%); }
.mvp-band strong, .mvp-band span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mvp-band strong { font-size: calc(1.55vw * var(--global-font-scale)); line-height: 1; font-weight: 900; letter-spacing: -.02em; }
.mvp-band span { margin-top: .26vw; font-size: calc(.68vw * var(--global-font-scale)); font-weight: 850; letter-spacing: .13em; }
.mvp-band.player-name-only { display: flex; align-items: center; padding-top: .55vw; padding-bottom: .55vw; }
.mvp-band.player-name-only strong { width: 100%; font-size: calc(1.72vw * var(--global-font-scale)); }
.mvp-band.room-band { padding: .42vw .72vw .25vw; background: transparent; clip-path: none; }
.mvp-band.room-band strong { font-size: calc(1.36vw * var(--global-font-scale)); }
.mvp-band.room-band span { margin-top: .16vw; font-size: calc(.56vw * var(--global-font-scale)); color: #102118; }
.mvp-statbar { position: absolute; display: grid; grid-template-columns: repeat(3,1fr); color: #1b211e; background: rgba(226,244,233,.96); }
.mvp-statbar div { display: grid; place-items: center; align-content: center; border-right: 1px solid rgba(17,20,18,.13); }
.mvp-statbar div:last-child { border: 0; }
.mvp-statbar b, .mvp-statbar span { display: block; }
.mvp-statbar b { font-size: calc(1.5vw * var(--global-font-scale)); font-variant-numeric: tabular-nums; }
.mvp-statbar span { margin-top: .2vw; color: #52705f; font-size: calc(.58vw * var(--global-font-scale)); font-weight: 900; letter-spacing: .13em; }
.mvp-statbar.room-stats { display: block; background: transparent; }
.mvp-statbar.room-stats div { position: absolute; top: 0; width: 12%; height: 100%; border: 0; }
.mvp-statbar.room-stats div:nth-child(1) { left: 34.84%; }
.mvp-statbar.room-stats div:nth-child(2) { left: 56.11%; }
.mvp-statbar.room-stats div:nth-child(3) { left: 76.11%; }
.mvp-statbar.room-stats span { display: none; }
.room-winner-logo { position: absolute; left: 2.18%; top: 79.58%; width: 8.42%; height: 12.35%; display: grid; place-items: center; padding: .55vw; overflow: hidden; }
.room-winner-logo img { width: 100%; height: 100%; object-fit: contain; }
.room-winner-logo span { color: #112018; font-size: calc(1.2vw * var(--global-font-scale)); font-weight: 900; text-transform: uppercase; }
.replay-winner { position: absolute; display: grid; grid-template-columns: 48% 52%; align-items: end; padding: 1.1vw 1.35vw 2.65vw; color: var(--white); overflow: hidden; text-transform: uppercase; }
.replay-winner .winner-logo { height: 7.2vw; display: grid; place-items: center; }
.replay-winner .winner-logo img { width: 100%; height: 100%; object-fit: contain; }
.replay-winner .winner-fallback { display: grid; place-items: center; width: 6.7vw; height: 6.7vw; border: 2px solid rgba(35,254,129,.42); border-radius: 50%; color: var(--green); font-size: calc(1.8vw * var(--global-font-scale)); font-weight: 900; }
.replay-winner .winner-copy { min-width: 0; padding: 0 0 .2vw .7vw; display: grid; grid-template-columns: 1.65vw minmax(0,1fr); align-items: center; gap: .42vw; }
.replay-winner .winner-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; font-size: calc(1.16vw * var(--font-scale)); line-height: 1; white-space: normal; }
.replay-winner .winner-flag { width: 1.65vw; height: 1.15vw; display: grid; place-items: center; overflow: hidden; }
.replay-winner .winner-flag img { width: 100%; height: 72%; object-fit: contain; }
.replay-winner .winner-flag.empty { display: none; }
.replay-card { position: absolute; color: var(--white); text-align: center; font-weight: 900; text-transform: uppercase; }
.replay-card .logo { position: absolute; left: 18%; top: 10%; width: 64%; height: 57%; object-fit: contain; }
.replay-card .fallback-logo { position: absolute; left: 27%; top: 22%; width: 46%; height: 35%; display: grid; place-items: center; border: 2px solid rgba(35,254,129,.35); border-radius: 50%; color: var(--green); font-size: calc(1.35vw * var(--global-font-scale)); }
.replay-card .points { position: absolute; left: 8%; right: 8%; top: 84.5%; height: 14%; display: grid; place-items: center; color: var(--white); font-size: calc(1.15vw * var(--font-scale)); line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.mvp-brand { position: absolute; left: 5.4%; top: 5.3%; width: 14%; height: 12%; display: flex; align-items: center; gap: .7vw; }
.mvp-brand img { width: 5.8vw; height: 5.8vw; object-fit: contain; }
.mvp-brand span { color: #17211b; }
.mvp-brand strong, .mvp-brand small { display: block; white-space: nowrap; }
.mvp-brand strong { font-size: calc(2.2vw * var(--global-font-scale)); line-height: .9; letter-spacing: -.05em; }
.mvp-brand small { margin-top: .4vw; color: #4a755d; font-size: calc(.72vw * var(--global-font-scale)); font-weight: 900; letter-spacing: .14em; }
.mvp-main-photo { position: absolute; left: 2.7%; top: 11%; width: 38%; height: 82%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.mvp-main-photo { transform: translate(var(--mvp-x),var(--mvp-y)) scale(var(--mvp-scale)); transform-origin: center bottom; }
.mvp-main-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.mvp-row { position: absolute; color: #18211c; font-weight: 900; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.mvp-row .cell { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mvp-row .logo { object-fit: contain; padding: .26vw; }
.mvp-row .logo-fallback { color: #1a6f43; font-size: calc(.72vw * var(--global-font-scale)); letter-spacing: .02em; }
.mvp-row .mvp-flag { position: absolute; left: 16.5%; top: 0; width: 6.3%; height: 100%; display: grid; place-items: center; }
.mvp-row .mvp-flag img { width: 100%; height: 58%; object-fit: contain; }
.mvp-row .nick { justify-content: flex-start; padding: 0 .5vw; letter-spacing: -.02em; }
.mvp-row.winner .nick { font-size: calc(1.45vw * var(--font-scale)); }
.mvp-row.winner .stat { font-size: calc(1.55vw * var(--font-scale)); }
.mvp-row.small .nick { font-size: calc(1.17vw * var(--font-scale)); }
.mvp-row.small .stat { font-size: calc(1.2vw * var(--font-scale)); }
.mvp-row .stat { transform: translate(var(--num-x),var(--num-y)); }
.mvp-row .rank { color: #101713; font-size: calc(1.35vw * var(--global-font-scale)); }
.connection-status { position: absolute; right: 2%; top: 2%; display: none; padding: .5vw .7vw; border-radius: .3vw; color: #07130c; background: #ffd36a; font-size: .65vw; font-weight: 900; letter-spacing: .09em; }
.connection-status.show { display: block; }
.animate-in { animation: reveal .24s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--delay,0) * 22ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(.75vw); } }
.mvp-block.animate-in, .mvp-main-photo.animate-in { animation-name: mvp-reveal; }
@keyframes mvp-reveal {
  from { opacity: 0; transform: translate(var(--mvp-x),calc(var(--mvp-y) + .75vw)) scale(var(--mvp-scale)); }
  to { opacity: 1; transform: translate(var(--mvp-x),var(--mvp-y)) scale(var(--mvp-scale)); }
}
@media (prefers-reduced-motion: reduce) { .animate-in { animation: none; } }