/* asset-refresh: 20260530mungboxwidth1 */
:root {
  --app-bg: #0b1016;
  --panel-bg: #121922;
  --panel-border: #263241;
  --panel-hover: #233142;
  --text-main: #edf2f7;
}

/* Player Slot Bundle phase 1:
   keep the existing slot DOM/skin, but give field, team-box, and event slots
   one shared template/state contract for the next admin-controlled pass. */
.player-slot-bundle,
.tactics-player-chip.player-slot-bundle {
  --fs-slot-bundle-scale: var(--fs-slot-context-scale, var(--fs-field-slot-bundle-scale, 1));
  --fs-slot-device-scale: var(--fs-slot-pc-scale, 1);
  --fs-slot-state-outline: transparent;
  --fs-slot-state-glow: transparent;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .player-slot-bundle,
  .tactics-player-chip.player-slot-bundle {
    --fs-slot-device-scale: var(--fs-slot-mobile-scale, var(--fs-slot-pc-scale, 1));
  }
}

.player-slot-bundle > .player-slot-bundle-box,
.tactics-player-chip.player-slot-bundle > .player-slot-bundle-box {
  position: relative;
  box-sizing: border-box;
  opacity: var(--fs-slot-state-opacity, 1);
}

.player-slot-bundle[data-slot-bundle-context='field'],
.tactics-player-chip.player-slot-bundle[data-slot-bundle-context='event'] {
  --fs-slot-context-scale: var(--fs-field-slot-bundle-scale, 1);
}

.player-slot-bundle[data-slot-bundle-context='teamBox'],
.player-slot-bundle[data-slot-bundle-context='mobileTeamBox'],
.player-slot-bundle[data-slot-bundle-context='replaySub'] {
  --fs-slot-context-scale: 1;
}

.player-slot-bundle[data-slot-state='goal'],
.player-slot-bundle[data-slot-state='penaltyGoal'] {
  --fs-slot-state-outline: #ff3b3b;
  --fs-slot-state-glow: rgba(255, 59, 59, 0.45);
}

.player-slot-bundle[data-slot-state='assist'] {
  --fs-slot-state-outline: #7c3aed;
  --fs-slot-state-glow: rgba(124, 58, 237, 0.42);
}

.player-slot-bundle[data-slot-state='substitutionIn'] {
  --fs-slot-state-outline: #00d4ff;
  --fs-slot-state-glow: rgba(0, 212, 255, 0.38);
}

.player-slot-bundle[data-slot-state='formationChange'],
.player-slot-bundle[data-slot-state='yellowCard'] {
  --fs-slot-state-outline: #ffd400;
  --fs-slot-state-glow: rgba(255, 212, 0, 0.38);
}

.player-slot-bundle[data-slot-state='redCard'],
.player-slot-bundle[data-slot-state='ownGoal'] {
  --fs-slot-state-outline: #ff2d2d;
  --fs-slot-state-glow: rgba(255, 45, 45, 0.46);
}

.player-slot-bundle[data-slot-state='selected'],
.player-slot-bundle[data-slot-state='highlight'] {
  --fs-slot-state-outline: rgba(255, 255, 255, 0.95);
  --fs-slot-state-glow: rgba(255, 255, 255, 0.36);
}

.player-slot-bundle[data-slot-state='dragging'] {
  --fs-slot-state-outline: #9be7ff;
  --fs-slot-state-glow: rgba(155, 231, 255, 0.42);
}

.player-slot-bundle[data-slot-state]:not([data-slot-state='normal']) {
  filter: drop-shadow(0 0 calc(5px * var(--fs-slot-bundle-scale)) var(--fs-slot-state-glow));
}

.player-slot-bundle[data-slot-state]:not([data-slot-state='normal']) > .player-slot-bundle-box {
  outline: max(1px, calc(2px * var(--fs-slot-bundle-scale))) solid var(--fs-slot-state-outline);
  outline-offset: max(1px, calc(1px * var(--fs-slot-bundle-scale)));
  box-shadow: 0 0 calc(12px * var(--fs-slot-bundle-scale)) var(--fs-slot-state-glow);
}

.player-slot-bundle[data-slot-shape='curved'] > .player-slot-bundle-box {
  border-radius: calc(16px * var(--fs-slot-bundle-scale));
}

.player-slot-bundle[data-slot-shape='rect'] > .player-slot-bundle-box {
  border-radius: calc(7px * var(--fs-slot-bundle-scale));
}

.player-slot-bundle [data-slot-bundle-part][data-slot-bundle-visible='0'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part] {
  box-sizing: border-box;
  pointer-events: none;
}

.player-slot-bundle[data-slot-custom-parts='1'] {
  --fs-slot-photo-device-scale: var(--fs-slot-photo-pc-scale, 1);
  --fs-slot-name-device-scale: var(--fs-slot-name-pc-scale, 1);
  --fs-slot-number-device-scale: var(--fs-slot-number-pc-scale, 1);
  --fs-slot-position-device-scale: var(--fs-slot-position-pc-scale, 1);
}

.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='photo'] {
  position: absolute !important;
  left: var(--fs-slot-photo-x, 50%) !important;
  top: var(--fs-slot-photo-y, 50%) !important;
  width: var(--fs-slot-photo-w, auto) !important;
  height: var(--fs-slot-photo-h, auto) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-bundle-scale, 1)) scale(var(--fs-slot-photo-scale, 1)) scale(var(--fs-slot-photo-device-scale, 1)) !important;
  z-index: var(--fs-slot-photo-z, 8) !important;
  opacity: var(--fs-slot-photo-opacity, 1) !important;
  object-fit: var(--fs-slot-photo-fit, contain) !important;
  object-position: var(--fs-slot-photo-object-position, center center) !important;
  -webkit-clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, 0%) 0) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, 0%) 0) !important;
  background: var(--fs-slot-photo-bg, transparent) !important;
  border: var(--fs-slot-photo-border, 0) !important;
  border-radius: var(--fs-slot-photo-radius, 0) !important;
}

.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='name'],
.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='number'],
.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='position'] {
  position: absolute !important;
  left: var(--fs-slot-name-x, 50%) !important;
  top: var(--fs-slot-name-y, auto) !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-name-scale, 1)) scale(var(--fs-slot-name-device-scale, 1)) scale(var(--fs-slot-bundle-scale, 1)) !important;
  z-index: var(--fs-slot-name-z, 4) !important;
  opacity: var(--fs-slot-name-opacity, 1) !important;
  width: max-content !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1.05 !important;
  padding: 0 !important;
  background: var(--fs-slot-name-bg, transparent) !important;
  border: var(--fs-slot-name-border, 0) !important;
  border-radius: var(--fs-slot-name-radius, 0) !important;
  color: var(--fs-slot-name-color, currentColor) !important;
  font-size: var(--fs-slot-name-font, 10px) !important;
}

.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='name'] {
  width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, max-content)) !important;
  height: var(--fs-slot-name-plate-h, auto) !important;
  line-height: var(--fs-slot-name-plate-h, 1.05) !important;
  background: var(--fs-slot-name-plate-bg, var(--fs-slot-name-bg, transparent)) !important;
  border: var(--fs-slot-name-plate-border, var(--fs-slot-name-border, 0)) !important;
  border-radius: var(--fs-slot-name-plate-radius, var(--fs-slot-name-radius, 0)) !important;
}

.player-slot-bundle[data-slot-custom-parts='1'] .player-name-text {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translate(var(--fs-slot-name-text-x, 0px), var(--fs-slot-name-text-y, 0px)) !important;
}

.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='number'] {
  left: var(--fs-slot-number-x, 50%) !important;
  top: var(--fs-slot-number-y, auto) !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-number-scale, 1)) scale(var(--fs-slot-number-device-scale, 1)) scale(var(--fs-slot-bundle-scale, 1)) !important;
  z-index: var(--fs-slot-number-z, 1) !important;
  opacity: var(--fs-slot-number-opacity, 1) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--fs-slot-number-radius, 0) !important;
  color: var(--fs-slot-number-color, rgba(255, 255, 255, 0.32)) !important;
  -webkit-text-stroke: var(--fs-slot-number-stroke-width, 0.35px) var(--fs-slot-number-stroke, rgba(255, 255, 255, 0.9)) !important;
  paint-order: stroke fill !important;
  font-size: var(--fs-slot-number-font, 14px) !important;
  text-shadow: var(--fs-slot-number-shadow, none) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
  backface-visibility: hidden !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

.player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='position'] {
  left: var(--fs-slot-position-x, 50%) !important;
  top: var(--fs-slot-position-y, auto) !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-position-scale, 1)) scale(var(--fs-slot-position-device-scale, 1)) scale(var(--fs-slot-bundle-scale, 1)) !important;
  z-index: var(--fs-slot-position-z, 1) !important;
  opacity: var(--fs-slot-position-opacity, 1) !important;
  background: var(--fs-slot-position-bg, transparent) !important;
  border: var(--fs-slot-position-border, 0) !important;
  border-radius: var(--fs-slot-position-radius, 0) !important;
  color: var(--fs-slot-position-color, currentColor) !important;
  font-size: var(--fs-slot-position-font, 12px) !important;
}

@media (max-width: 900px) {
  .player-slot-bundle[data-slot-custom-parts='1'] {
    --fs-slot-photo-device-scale: var(--fs-slot-photo-mobile-scale, var(--fs-slot-photo-pc-scale, 1));
    --fs-slot-name-device-scale: var(--fs-slot-name-mobile-scale, var(--fs-slot-name-pc-scale, 1));
    --fs-slot-number-device-scale: var(--fs-slot-number-mobile-scale, var(--fs-slot-number-pc-scale, 1));
    --fs-slot-position-device-scale: var(--fs-slot-position-mobile-scale, var(--fs-slot-position-pc-scale, 1));
  }
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--fs-font-sans, 'FS Pretendard', sans-serif);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--app-bg);
}

body.field-booting .field .player-slot.field-slot,
body.field-booting .field-stage > .tactics-board-layer .tactics-player-chip {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.field-booting.broadcast-board-mode .main-content {
  pointer-events: none !important;
  cursor: wait;
}

body.broadcast-board-mode .field :is(.player-slot.field-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1']:not([data-slot-visual-origin='bundle']) {
  opacity: 0 !important;
}

body.field-booting.broadcast-board-mode #field-wrapper-1::after {
  content: "경기 데이터를 준비 중입니다\A잠시만 기다리세요...";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 90;
  transform: translate(-50%, -50%);
  min-width: min(280px, 72%);
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--broadcast-line-a, #63e6ff) 46%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)),
    rgba(9, 16, 24, .78);
  background-size: 220% 100%;
  color: #eaf7ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  box-shadow: 0 0 22px color-mix(in srgb, var(--broadcast-line-a, #63e6ff) 26%, transparent);
  animation: fsBootSkeletonShimmer 1.35s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fsBootSkeletonShimmer {
  0% { background-position: 0% 0; opacity: .82; }
  50% { background-position: 100% 0; opacity: 1; }
  100% { background-position: 0% 0; opacity: .82; }
}

header {
  width: 100%;
  padding: 1px;
  background-color: #0a0f15;
  display: flex;
  justify-content: center;
  border-bottom: none;
}

.main-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 6px 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #cfe8d6;
  box-shadow: 0 8px 24px rgba(22, 101, 52, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.main-nav ul {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.main-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  color: #14532d;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background-color 0.18s ease,
    color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.main-nav ul li a:hover {
  background-color: #17834d;
  color: #fff;
  border-color: #17834d;
  box-shadow: none;
  transform: none;
}

.main-nav ul li a.active {
  background: #17834d;
  color: #fff;
  border-color: #17834d;
  box-shadow: none;
}

.replay-return-bar {
  position: sticky;
  top: 57px;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100% - 20px, 560px);
  margin: 8px auto 0;
  padding: 7px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(23, 131, 77, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #14532d;
  box-shadow: 0 8px 22px rgba(22, 101, 52, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.replay-return-bar.hidden {
  display: none !important;
}

.replay-return-bar button {
  border: 0;
  border-radius: 999px;
  background: #17834d;
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.replay-return-bar span {
  min-width: 0;
  font-size: 12px;
  font-weight: 900;
  color: rgba(20, 83, 45, 0.78);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .main-nav {
    padding: 6px 0;
  }
  .main-nav ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0 10px;
  }
  .main-nav ul li {
    flex: 0 0 auto;
  }
  .main-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: #14532d;
    font-weight: 900;
  }
  .main-nav ul li a:hover {
    background-color: #17834d;
    color: #fff;
    border-color: #17834d;
    transform: none;
    box-shadow: none;
  }
  .main-nav ul::-webkit-scrollbar {
    display: none;
  }
}

/* Global nav lock: keep the top menu identical across pages. */
.main-nav {
  width: 100% !important;
  min-height: 45px !important;
  padding: 6px 0 !important;
  box-sizing: border-box !important;
}

.main-nav ul {
  width: min(100%, 560px) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 auto !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.main-nav ul li {
  min-width: 0 !important;
}

.main-nav ul li a {
  width: 100% !important;
  min-height: 32px !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  .main-nav ul {
    width: 100% !important;
  }

  .main-nav ul li a {
    min-height: 30px !important;
    padding: 6px 5px !important;
    font-size: 11px !important;
  }
}

/* =====================================
   컨트롤바 상단 고정
   ===================================== */
#controlBar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100vw;
  justify-content: center;
  align-items: center;
  padding: 6px 30px;
  background-color: var(--panel-bg);
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid var(--panel-border);
  margin: 0;
  top: 0px;
  box-sizing: border-box;
  z-index: 1000;
  gap: 8px;
  background-color: var(--panel-bg);
  box-sizing: border-box;
}

#controlBar .control-group.control-group-wide {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
}

#controlBar .control-hint {
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
}

#mobileControlContent select {
  width: 100%;
  min-width: 0;
}

#mobileFormationSelector {
  width: 100%;
}

#leagueSelector {
  min-width: 120px;
  max-width: 130px;
}

#fieldPresetSelect {
  min-width: 100px;
  max-width: 100px;
}

#formationSelector {
  min-width: 118px;
  max-width: 118px;
}

#teamSelector {
  min-width: 132px;
  max-width: 132px;
}

#teamSelector::placeholder {
  color: rgba(243, 247, 252, 0.9);
  font-weight: 700;
}

#loadFileBtn {
  min-width: 90px;
  max-width: 90px;
}

#controlBar .file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid #344457;
  border-radius: 4px;
  background-color: #1a2430;
  color: #f3f7fc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

#controlBar .file-btn:hover {
  background-color: var(--panel-hover);
}

#controlBar button,
#controlBar select,
#controlBar input {
  padding: 4px 8px;
  border: 1px solid #344457;
  border-radius: 4px;
  background-color: #1a2430;
  color: #f3f7fc;
  font-size: 13px;
}

#controlBar button:hover,
#controlBar select:hover,
#controlBar input:hover {
  background-color: var(--panel-hover);
  cursor: pointer;
}

#resetBtn {
  background: linear-gradient(
    180deg,
    rgba(255, 92, 92, 0.42),
    rgba(176, 34, 34, 0.54)
  ) !important;
  border: 1px solid rgba(255, 118, 118, 0.64) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(120, 22, 22, 0.34);
}
#resetBtn:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 105, 105, 0.5),
    rgba(190, 42, 42, 0.62)
  ) !important;
}
#resetBtn:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.92) saturate(1.12);
  box-shadow: inset 0 3px 7px rgba(87, 12, 12, 0.42),
    0 2px 8px rgba(120, 22, 22, 0.24);
}

#tacticsBoardBtn {
  background: linear-gradient(180deg, rgba(33, 150, 243, 0.32), rgba(21, 96, 189, 0.34)) !important;
  border: 1px solid rgba(111, 181, 255, 0.52) !important;
  color: #f5fbff !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.22);
}

#tacticsBoardBtn.is-active {
  background: linear-gradient(180deg, rgba(10, 190, 130, 0.48), rgba(8, 115, 92, 0.46)) !important;
  border-color: rgba(91, 255, 199, 0.7) !important;
}

#controlBar .op-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

#controlBar .op-label {
  font-size: 11px;
  font-weight: 800;
  color: #b7c6d8;
  letter-spacing: 0;
  min-width: 52px;
  text-align: center;
}

/* 초기 렌더 플래시 방지: 구형 적용 버튼은 시작부터 숨김 */
#applyFormationA,
#applyFormationB,
#applyNameA,
#applyNameB,
#mobileApplyFormationA,
#mobileApplyFormationB,
#mobileApplyNameA,
#mobileApplyNameB {
  display: none !important;
}

#formationTarget,
#nameTarget {
  min-width: 56px;
  max-width: 64px;
}

.popup.hidden {
  display: none;
}

.tactic-share-modal.hidden {
  display: none;
}

.tactic-share-modal {
  position: fixed;
  inset: 0;
  z-index: 26000;
  display: grid;
  place-items: center;
  padding: 18px;
  box-sizing: border-box;
}

.tactic-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 26, 15, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.tactic-share-panel {
  position: relative;
  width: min(520px, 94vw);
  border-radius: 20px;
  border: 1px solid rgba(170, 226, 190, 0.55);
  background:
    linear-gradient(150deg, rgba(247, 255, 249, 0.98), rgba(228, 245, 233, 0.96));
  color: #123522;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 20px;
  box-sizing: border-box;
}

.tactic-share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(22, 101, 52, 0.18);
  background: rgba(255, 255, 255, 0.72);
  color: #14532d;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.tactic-share-kicker {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.tactic-share-panel h3 {
  margin: 10px 38px 6px 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}

.tactic-share-desc {
  margin: 0 0 14px;
  color: rgba(18, 53, 34, 0.76);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
}

.tactic-share-url {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(22, 101, 52, 0.22);
  background: rgba(255, 255, 255, 0.84);
  color: #10291b;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 750;
  outline: none;
}

.tactic-share-url:focus {
  border-color: rgba(22, 163, 74, 0.62);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.tactic-share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.tactic-share-actions button {
  height: 40px;
  border-radius: 13px;
  border: 1px solid rgba(22, 101, 52, 0.18);
  font-weight: 950;
  font-size: 13px;
}

.tactic-share-copy {
  background: linear-gradient(180deg, #198754, #136f45);
  color: #fff;
}

.tactic-share-copy-dc {
  background: linear-gradient(180deg, #2358a8, #173f7c);
}

.tactic-share-open {
  background: rgba(255, 255, 255, 0.76);
  color: #14532d;
}

@media (max-width: 520px) {
  .tactic-share-modal {
    align-items: start;
    padding-top: max(72px, env(safe-area-inset-top, 0px) + 58px);
  }

  .tactic-share-panel {
    width: min(94vw, 420px);
    padding: 16px;
    border-radius: 18px;
  }

  .tactic-share-panel h3 {
    font-size: 19px;
  }

  .tactic-share-url {
    height: 42px;
    font-size: 12px;
  }

  .tactic-share-actions {
    grid-template-columns: 1fr;
  }
}

h1 {
  text-align: center;
  margin: 10px 0;
}

/* =====================================
   중앙 경기장 영역
   ===================================== */

.center {
  display: flex;
  gap: 0px;
  justify-content: center;
  flex-direction: row;
  align-items: flex-start;
  margin: 0;
}

/* =========================
   경기장 래퍼
   ========================= */
.field-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px;
  margin: 0;
}

.field-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.field-matchup-label {
  position: absolute;
  top: clamp(8px, 1.3vw, 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 26;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(30px, auto) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(6px, 0.9vw, 12px);
  width: min(760px, calc(100% - 24px));
  pointer-events: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.field-matchup-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(14px, 1.12vw, 19px);
  font-weight: 900;
  line-height: 1.05;
}

.field-matchup-name-home {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

.field-matchup-name-away {
  grid-column: 5;
  justify-self: start;
  text-align: left;
}

.field-matchup-vs {
  grid-column: 3;
  justify-self: center;
  min-width: 30px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.field-matchup-logo-ring {
  position: static;
  justify-self: center;
  flex: 0 0 auto;
}

.field-matchup-logo-home {
  grid-column: 2;
}

.field-matchup-logo-away {
  grid-column: 4;
}

/* =========================
   경기장(필드) 기본 스타일
   ========================= */
.field {
  position: relative;
  background: radial-gradient(
      circle at 50% 30%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 35%,
      rgba(0, 0, 0, 0.25) 75%
    ),
    linear-gradient(
      to bottom,
      #102913 0%,
      #256b2c 35%,
      #1d451e 65%,
      #235026 100%
    );
  background-blend-mode: overlay;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(80, 180, 90, 0.25);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
}

#field-1,
#field-2 {
  width: 490px;
  height: 798px;
  position: relative;
}

/* =========================
   레이어 순서(핵심)
   1) (있다면) 잔디/필드이미지: z=1
   2) 라인: z=2
   3) 선수(슬롯/이미지): z=3+
   ========================= */

.field-image,
.grass-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.field-lines {
  position: absolute;
  top: 60px;
  bottom: 216px;
  left: 30px;
  right: 30px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px;
}

.field-lines * {
  position: absolute;
  box-sizing: border-box;
  border-color: rgba(255, 255, 255, 0.85);
  z-index: 2;
}

.player-slot.field-slot,
.player-slot.sub-slot,
.player-slot.has-player {
  z-index: 3;
}

.player-box,
.player-img,
.player-name {
  position: relative;
  z-index: 4;
}

/* =========================
   라인 디테일
   ========================= */
.outline {
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
}

.center-line {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
}

.center-circle {
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.penalty {
  width: 40%;
  height: 18%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.penalty.top {
  top: 0;
  border-top: none;
}

.penalty.bottom {
  bottom: 0;
  border-bottom: none;
}

.goal {
  width: 20%;
  height: 6%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: transparent;
}

.goal.top {
  top: 0;
}

.goal.bottom {
  bottom: 0;
}

/* =====================================
   슬롯 공통 스타일
   ===================================== */

.player-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  overflow: hidden;
}

.player-name:empty {
  display: none;
}

.player-name:not(:empty) {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  text-align: center;
  color: #fff;
  background: rgba(37, 36, 36, 0.846);
  pointer-events: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.player-slot {
  position: absolute;
  width: 64px;
  height: 84px;
  border-radius: 8px;
  background-color: #fff;
  touch-action: manipulation;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.092);
  flex-shrink: 0;
  overflow: hidden;
}

.player-slot.selected {
  outline: 2px solid rgba(0, 190, 255, 1);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(0, 190, 255, 0.9), 0 0 22px rgba(0, 190, 255, 0.7),
    0 0 36px rgba(0, 190, 255, 0.4);
  transform: translateY(-2px);
}

/* =====================================
   주전 슬롯
   ===================================== */
.player-slot.field-slot {
  width: 64px;
  height: 84px;
  margin: 4px;
  cursor: pointer;
}

.field .player-slot.field-slot {
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.field .player-slot.field-slot.player-slot-bundle[data-slot-custom-parts='1'],
.field-stage .tactics-player-chip.player-slot-bundle[data-slot-custom-parts='1'] {
  width: var(--fs-slot-render-w, var(--fs-slot-template-w, 64px));
  min-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 64px));
  max-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 64px));
  height: var(--fs-slot-render-h, var(--fs-slot-template-h, 84px));
  min-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 84px));
  max-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 84px));
}

.field .player-slot.field-slot.selected {
  transform: translate(-50%, -50%) translateY(-2px);
}

.field-stage {
  position: relative;
}

.field-stage > .tactics-board-layer,
.field > .tactics-board-layer {
  position: absolute;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

body.tactics-board-mode .field-stage > .tactics-board-layer,
body.tactics-board-mode .field > .tactics-board-layer {
  pointer-events: auto;
}

body.tactics-board-mode .field .player-slot.field-slot.has-player .player-box {
  opacity: 0;
  filter: none;
  visibility: hidden;
}

body.tactics-board-mode .field .player-slot.field-slot.has-player {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}

body.tactics-board-mode .field .player-slot.field-slot.has-player::before,
body.tactics-board-mode .field .player-slot.field-slot .slot-label {
  display: none !important;
}

body.tactics-board-mode .field .player-slot.field-slot {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.tactics-board-mode .field .player-slot.field-slot > .slot-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.tactics-board-mode .player-slot.tactics-source-hidden {
  display: none !important;
}

body.tactics-board-mode .field-stage,
body.tactics-board-mode .field,
body.tactics-board-mode .sub-slot-container,
body.tactics-board-mode .sub-slot-container *,
body.tactics-board-mode .player-slot,
body.tactics-board-mode .player-slot *,
body.tactics-board-mode .tactics-player-chip,
body.tactics-board-mode .tactics-player-chip * {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

body.tactics-board-mode {
  overscroll-behavior: contain;
}

.tactics-player-chip {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  transform: translate(-50%, -50%);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

body.screenshot-mode .field-stage > .tactics-board-layer,
body.screenshot-mode .field > .tactics-board-layer {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9999 !important;
}

body.screenshot-mode .tactics-player-chip {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.screenshot-mode .tactics-chip-photo img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.tactics-player-chip * {
  pointer-events: none;
}

.tactics-player-chip.is-dragging {
  z-index: 3;
  cursor: grabbing;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.34));
}

.tactics-player-chip .player-box {
  width: 100%;
  height: 100%;
  background: transparent !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.tactics-player-chip .player-img,
.tactics-player-chip img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.screenshot-mode .tactics-player-chip .player-box {
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.screenshot-mode .tactics-player-chip .player-img,
body.screenshot-mode .tactics-player-chip img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.screenshot-mode .tactics-player-chip .player-name:not(:empty) {
  bottom: 0 !important;
  margin-bottom: 0 !important;
  height: 14px !important;
  line-height: 14px !important;
  border-radius: 0 0 6px 6px !important;
}

@media (max-width: 768px) {
  .tactics-player-chip {
    width: 40px;
    height: 56px;
    border-radius: 6px;
  }
}

.player-slot.field-slot .slot-label,
.player-slot.sub-slot .slot-label {
  position: absolute;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: rgba(201, 178, 178, 0.7);
  pointer-events: none;
}

/* =====================================
   서브 슬롯
   ===================================== */
.player-slot.sub {
  position: relative;
  width: 64px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.sub-slot-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 64px);
  grid-auto-rows: 84px;
  gap: 10px 22px;
  width: max-content;
  justify-content: center;
}

/* =====================================
   후보 슬롯
   ===================================== */
.player-slot.candidate-slot {
  width: 64px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.player-slot.candidate-slot .player-box {
  font-size: 12px;
  color: rgba(110, 96, 96, 0.7);
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
}

/* =====================================
   후보 컬럼
   ===================================== */
.candidate-column {
  width: 360px;
  min-width: 100px;
  height: 740px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  background-color: rgba(22, 31, 43, 0.94);
  border: 1px solid #3a4c61;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 10px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a6078 #182332;
}

.candidate-column::-webkit-scrollbar {
  width: 10px;
}

.candidate-column::-webkit-scrollbar-track {
  background: #182332;
  border-radius: 999px;
}

.candidate-column::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #58708a, #445a72);
  border-radius: 999px;
  border: 2px solid #182332;
}

.candidate-column::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6a86a3, #4f6883);
}

/* =========================
   후보 팀 이름 라벨
   ========================= */
.team-box h3,
.team-name {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #16212d;
  color: #b8c5d4;
  border-radius: 8px;
  margin: 0 0 5px 0;
  margin-bottom: 2px !important;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-name {
  width: 100%;
  text-align: center;
  background-color: #16212d;
  color: #fff;
  font-weight: bold;
  font-size: 90px;
  padding: 5px 0;
  border-radius: 4px;
  box-sizing: border-box;
}

.team-box {
  width: 100%;
  height: 400px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--team-accent-bg, #172330) 30%, #141e29),
    #141e29
  );
  border: 1px solid
    color-mix(in srgb, var(--team-accent-border, #3a4d62) 65%, #2f3f52);
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 5px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a6078 #162230;
}

.team-box::-webkit-scrollbar {
  width: 8px;
}

.team-box::-webkit-scrollbar-track {
  background: #162230;
  border-radius: 999px;
}

.team-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #58708a, #445a72);
  border-radius: 999px;
  border: 1px solid #162230;
}

.team-box::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6a86a3, #4f6883);
}

.team-box > .team-logo-empty,
#candidate-mobile .mobile-team-box > .team-logo-empty {
  position: absolute !important;
  left: var(--team-watermark-left, 50%) !important;
  top: var(--team-watermark-top, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  width: var(--team-watermark-size, min(72%, 220px)) !important;
  height: var(--team-watermark-size, min(72%, 220px)) !important;
  max-width: var(--team-watermark-max-size, calc(100% - 18px)) !important;
  max-height: var(--team-watermark-max-size, calc(100% - 18px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  opacity: var(--team-watermark-opacity, 0.2) !important;
  filter: grayscale(1) saturate(0.85) !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
  contain: paint !important;
}

.team-box > .team-logo-empty img:not([data-fs-team-logo]),
#candidate-mobile .mobile-team-box > .team-logo-empty img:not([data-fs-team-logo]) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center var(--team-watermark-img-y, 43%) !important;
  transform: scale(var(--team-watermark-img-scale, 1.08)) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.team-box > .player-slot,
#candidate-mobile .mobile-team-players,
#candidate-mobile .mobile-team-title {
  position: relative;
  z-index: 1;
}

#candidate-mobile .mobile-team-box.has-team-watermark .mobile-team-players {
  background: transparent !important;
}

.team-title {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--team-accent-bg, #172330);
  color: var(--team-accent-text, #fff);
  border: 1px solid var(--team-accent-border, #3a4d62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  font-size: clamp(12px, 3vw, 18px);
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 6px;
  cursor: pointer;
  position: relative;
}

.team-title-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 22px 0 2px;
}

.team-move-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.team-move-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* =====================================
   main-content (후보 + 경기장)
   ===================================== */
.main-content {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0 !important;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #0a0f15 0%, #0d131b 58%, #0f1620 100%);
  margin: 0 auto;
}

.candidate-mobile-wrapper {
  left: 0;
  width: 100%;
  height: 140px;
  background: #0f161f;
  border-top: 1px solid #2e3f52;
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 8px;
  overflow-x: auto;
}

/* =========================================================
   Compact mode: side has 4+ teams (e.g., 골때녀 8팀)
   - keep within field height, no outer scrollbar
   ========================================================= */
.candidate-column.auto-team-layout {
  height: 798px;
  overflow: hidden;
  gap: 2px;
  padding: 4px;
  margin-top: 0;
}

.candidate-column.auto-team-layout .team-title {
  height: 20px;
  min-height: 20px;
  font-size: 11px;
  line-height: 20px;
  margin-bottom: 0 !important;
  border-radius: 6px;
}

.candidate-column.auto-team-layout .team-title-label {
  padding-right: 18px;
}

.candidate-column.auto-team-layout .team-move-btn {
  width: 16px;
  height: 16px;
  font-size: 10px;
  right: 4px;
}

.candidate-column.auto-team-layout .team-box {
  padding: 0;
  gap: 6px;
  display: grid;
  grid-template-columns: repeat(4, 64px);
  grid-auto-rows: 84px;
  justify-content: center;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 미세 오버플로우(1~2px)로 스크롤바 생기는 것 방지 */
.candidate-column.auto-team-layout .team-box .player-slot {
  margin: 0 !important;
}

.candidate-column.auto-team-layout.teams-per-side-4 .team-box {
  height: 176px;
  min-height: 176px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.candidate-column.auto-team-layout.teams-per-side-2 .team-box {
  height: 360px;
  min-height: 360px;
}

.candidate-column.auto-team-layout.teams-per-side-many {
  overflow-y: auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.candidate-column.auto-team-layout.teams-per-side-many .team-box {
  overflow-y: auto;
  overflow-x: hidden;
}

.candidate-column.auto-team-layout .team-box .player-slot {
  align-self: start;
  justify-self: center;
}

@media (orientation: landscape) and (max-width: 900px) {
  .center {
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: center;
    overflow-x: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    padding: 0;
    margin: 0;
  }
  #field-wrapper-1,
  #field-wrapper-2 {
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
    box-sizing: border-box;
    padding: 0;
    margin: 0 !important;
    scroll-snap-align: none;
    height: 92vh;
  }
  #field-1,
  #field-2 {
    width: 48vw !important;
    height: 165vh !important;
    margin: 0 auto !important;
    position: relative;
  }
  .field {
    width: 100% !important;
    min-width: 0 !important;
    position: relative;
  }
  .field-lines {
    top: 40px;
    bottom: 130px;
    left: 18px;
    right: 18px;
  }
  .sub-slot-container {
    bottom: 16px !important;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(50vw - 16px);
  }
}

@media (max-width: 768px) {
  .sub-slot-container {
    bottom: 25px;
    grid-template-columns: repeat(5, 40px);
    grid-auto-rows: 56px;
    gap: 8px 16px;
    width: max-content;
    max-width: calc(100vw - 16px);
    margin-left: 0px;
  }
}

/* =========================
   모바일 하단 후보 패널
========================= */
@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

@media (max-width: 768px) {
  .mobile-candidate-scroll {
    display: flex;
    width: max-content;
  }
  .mobile-team-box {
    flex: 0 0 auto;
    min-width: 160px;
  }
  .mobile-team-box h3 {
    font-size: 14px;
    margin: 4px 0;
    text-align: center;
  }
  .center {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 0px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    justify-content: flex-start;
  }
  #field-wrapper-1,
  #field-wrapper-2 {
    width: 100%;
    min-width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0;
    margin: 0 !important;
    margin-left: 0;
    scroll-snap-align: start;
    height: auto;
    min-height: calc(74vh + 50px);
  }
  .field-container {
    height: calc(100vh - 120px);
  }
  .field {
    width: 100%;
    min-width: 100%;
  }
  #field-1,
  #field-2 {
    width: 100vw;
    height: 74vh;
    margin: 0 auto;
    position: relative;
  }
  .candidate-column {
    display: none !important;
  }
}

/* =========================
   모바일: 경기장 2개 크기 조절
   ========================= */
@media (max-width: 768px) {
  .field-image {
    position: absolute;
    top: 70px;
    bottom: 30px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 18px;
    overflow: hidden;
  }
  .field-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
  }
  .field-lines {
    position: absolute;
    top: 48px;
    bottom: 146px;
    left: 30px;
    right: 30px;
    z-index: 1;
    pointer-events: none;
    border-radius: 18px;
    overflow: hidden;
  }
  .field-lines * {
    position: absolute;
    box-sizing: border-box;
    border-color: rgba(255, 255, 255, 0.85);
    z-index: 1;
  }
  .grass-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    border-radius: 18px;
  }
  .field .grass-layer {
    top: 00px;
    left: 20px;
    right: 20px;
    bottom: 0px;
    border-radius: 12px;
  }
  .outline {
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
  }
  .center-line {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
  }
  .center-circle {
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .penalty {
    width: 40%;
    height: 18%;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.85);
  }
  .penalty.top {
    top: 0;
    border-top: none;
  }
  .penalty.bottom {
    bottom: 0;
    border-bottom: none;
  }
  .goal {
    width: 20%;
    height: 6%;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: transparent;
  }
  .goal.top {
    top: 0;
  }
  .goal.bottom {
    bottom: 0;
  }
}

@media (max-width: 768px) {
  .player-slot {
    position: relative;
    width: 40px !important;
    height: 56px !important;
    min-width: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .player-box {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 481px) and (max-width: 1024px) {
  #candidate-mobile {
    display: flex !important;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  #candidate-mobile {
    display: flex !important;
    height: auto !important;
    padding: 8px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  #candidate-mobile .mobile-team-box {
    width: 47.8%;
    background-color: #ffffff;
    border: 2px solid #d2d0d0;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  #candidate-mobile .mobile-team-title {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #272626;
    color: #fff;
    font-weight: bold;
    font-size: clamp(12px, 3vw, 18px);
    line-height: 1;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0 6px;
    pointer-events: auto;
    z-index: 3;
  }
  #candidate-mobile .mobile-team-title-label {
    display: block;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
  }
  #candidate-mobile .mobile-team-title-menu {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    cursor: pointer;
    touch-action: manipulation;
  }
  #candidate-mobile .mobile-team-players {
    width: 100%;
    height: 220px;
    background: #fff;
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .player-slot .player-name {
    height: 16px;
    font-size: 8px;
  }
  .field-label {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
  }
}

.player-slot.sub .slot-label {
  color: rgba(200, 200, 200, 0.85);
  font-weight: 500;
}

.player-slot.sub .player-box {
  color: rgba(200, 200, 200, 0.8);
  text-align: center;
}

.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
}

@media (max-width: 900px) {
  #tacticsBoardBtn,
  #controlBar {
    display: none;
  }
}

.formation-label {
  position: absolute;
  top: 36px;
  left: 49px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .formation-label {
    top: 28px;
    left: 40px;
    font-size: 12px;
  }
}

.row-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.triple-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#mobileLeagueSelector {
  flex: 1.2;
  min-width: 0;
}

#mobileFieldPresetSelect {
  flex: 1;
  min-width: 90px;
  margin-top: 6px;
}

/* =========================
   MOBILE OPTIONS (CLEAN)
   - IDs used:
     #mobileOptionsBtn
     #mobileOptionsPopup
     #mobileControlContent
     #closeMobileOptions
   - JS toggles .hidden on #mobileOptionsPopup
   ========================= */

@media (min-width: 1180px) {
  #mobileOptionsBtn,
  #mobileOptionsPopup,
  #mobileControlContent {
    display: none !important;
  }
}

@media (max-width: 900px) {
  /* =========================
     1) HAMBURGER (floating)
     ========================= */
  #mobileOptionsBtn {
    display: grid !important;
    position: fixed;
    left: 0px;
    top: 28px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    background: rgba(14, 14, 16, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    z-index: 20000;
  }
  #mobileOptionsBtn:active {
    transform: translateY(1px);
  }
  #mobileOptionsBtn.hidden {
    display: none !important;
  }
  /* =========================
     2) OVERLAY
     ========================= */
  #mobileOptionsPopup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }
  #mobileOptionsPopup.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* =========================
     3) DRAWER PANEL (3-zone layout)
     - header (top, sticky)
     - body (scrollable, centered spacing)
     - actions/footer (bottom sticky)
     ========================= */
  #mobileControlContent {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: min(88vw, 380px);
    background: linear-gradient(
      180deg,
      rgba(18, 18, 20, 0.96),
      rgba(12, 12, 14, 0.94)
    );
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 22px 0 60px rgba(0, 0, 0, 0.55);
    padding: 12px;
    transform: translateX(0);
    transition: transform 0.22s ease;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    overflow: hidden;
  }
  #mobileOptionsPopup.hidden #mobileControlContent {
    transform: translateX(-102%);
  }
  /* =========================
     4) HEADER (top)
     ========================= */
  #mobileControlContent .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  #closeMobileOptions {
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 0 12px;
  }
  #closeMobileOptions:active {
    transform: translateY(1px);
  }
  /* =========================
     5) BODY (middle, scroll)
     - body 안에서 “섹션 카드” 느낌으로 배분
     ========================= */
  #mobileControlContent .drawer-body {
    overflow: auto;
    padding: 2px 2px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
  }
  #mobileControlContent .drawer-body::-webkit-scrollbar {
    width: 8px;
  }
  #mobileControlContent .drawer-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
  }
  #mobileControlContent .mobile-setting-block {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  #mobileControlContent .drawer-actions {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #mobileControlContent .triple-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
  }
  /* =========================
     6) FORM CONTROLS
     ========================= */
  #mobileControlContent select,
  #mobileControlContent input[type='text'],
  #mobileControlContent input[type='number'] {
    height: 40px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
  }
  #mobileControlContent input[type='file'] {
    width: 100%;
    height: auto !important;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
  }
  #mobileControlContent label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.2px;
  }
  /* =========================
     7) BUTTONS
     ========================= */
  #mobileControlContent button {
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    padding: 0 12px;
    margin: 0;
    box-shadow: none;
    min-width: 0;
  }
  #mobileControlContent button:active {
    transform: translateY(1px);
  }
  #mobileShareBtn {
    background: rgba(16, 185, 129, 0.22);
    border-color: rgba(16, 185, 129, 0.32);
  }
  #mobileResetBtn {
    background: linear-gradient(
      180deg,
      rgba(255, 90, 90, 0.32),
      rgba(180, 40, 40, 0.38)
    ) !important;
    border: 1px solid rgba(255, 120, 120, 0.45) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12),
      0 4px 14px rgba(0, 0, 0, 0.35);
    position: absolute !important;
    top: 10px !important;
    right: 56px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-weight: 900;
    font-size: 11px;
    width: auto !important;
    min-width: 0 !important;
    grid-column: auto;
    z-index: 4;
  }
  #mobileResetBtn:active {
    transform: translateY(1px) scale(0.98);
  }
  /* =========================
     8) OPTIONAL: backdrop click area
     ========================= */
  #mobileOptionsPopup .drawer-backdrop {
    position: absolute;
    inset: 0;
  }
  #mobileTeamSelector {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.05)
    ) !important;
    border: 0 !important;
    outline: none !important;
    color: #fff !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06),
      0 2px 8px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(2px);
  }
  #mobileTeamSelector::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
  }
}

/* =========================
   ADD: Tablet + Landscape tuning (MOBILE OPTIONS)
   - 기존 스타일은 그대로 두고 "추가"만 하세요
   ========================= */

@media (min-width: 901px) and (max-width: 1200px) {
  #mobileOptionsBtn,
  #mobileOptionsPopup,
  #mobileControlContent {
    display: unset !important;
  }
  #mobileOptionsBtn {
    display: grid !important;
    top: 18px;
    left: 10px;
  }
  #mobileControlContent {
    width: min(56vw, 420px);
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  #mobileControlContent {
    width: min(78vw, 560px);
    padding: 10px;
    gap: 8px;
    overflow: auto;
  }
  #mobileControlContent .drawer-header {
    padding: 8px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #closeMobileOptions {
    min-height: 32px;
    height: auto;
    border-radius: 11px;
    font-size: 12px;
    padding: 6px 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 122, 122, 0.68) !important;
    background: linear-gradient(
      180deg,
      rgba(255, 92, 92, 0.95),
      rgba(210, 44, 44, 0.95)
    ) !important;
    color: #fff !important;
    font-weight: 800;
  }
  #mobileControlContent .drawer-guide-btn {
    min-height: 34px;
    height: auto;
    border-radius: 11px;
    font-size: 12px;
    padding: 6px 11px;
    flex: 1 1 auto;
    width: 100% !important;
    border: 1px solid rgba(94, 169, 255, 0.6) !important;
    background: linear-gradient(
      180deg,
      rgba(45, 115, 220, 0.92),
      rgba(28, 82, 176, 0.92)
    ) !important;
    color: #fff !important;
    font-weight: 800;
  }
  #mobileControlContent .drawer-body {
    gap: 8px;
    padding-bottom: 8px;
  }
  #mobileControlContent .mobile-setting-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 6px 8px;
    border-radius: 12px;
    flex-wrap: wrap !important;
  }
  #mobileControlContent .mobile-setting-block label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1;
    flex: 0 0 72px;
    white-space: nowrap;
  }
  #mobileControlContent select,
  #mobileControlContent input[type='text'],
  #mobileControlContent input[type='number'] {
    height: auto !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    border-radius: 12px;
    font-size: 13px;
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 100%;
  }
  #mobileControlContent button {
    height: auto !important;
    min-height: 34px !important;
    border-radius: 12px;
    font-size: 12px;
    padding: 6px 10px;
    flex: 0 0 auto;
    min-width: 0;
  }
  #mobileControlContent .drawer-actions {
    padding: 8px;
    border-radius: 12px;
    gap: 8px;
  }
  #mobileResetBtn {
    top: 10px !important;
    right: 12px !important;
    height: auto !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }
  #mobileControlContent .mobile-file-btn {
    height: 30px !important;
    padding: 2px 4px 0 !important;
    flex: 0 0 auto;
  }
}

#mobileControlContent .mobile-setting-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  #mobileScreenshotBtn {
    order: 2;
  }
  #mobileSaveBtn {
    order: 0;
  }
  #mobileLoadFile {
    order: 1;
    height: 12px;
  }
}

#mobileControlContent .mobile-setting-block label {
  margin: 0;
  padding: 0;
  line-height: 1;
}

#mobileControlContent .mobile-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin-left: auto;
  margin-right: 0;
  height: 30px;
  padding: 2px 4px 0;
  border-radius: 8px;
  background: #2a2a2a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  height: 30px !important;
  padding: 2px 4px 0 !important;
}

#mobileControlContent .mobile-file-btn:active {
  transform: translateY(1px);
}

#mobileTeamSelector {
  height: 36px !important;
  padding: 4px 12px !important;
  line-height: 40px !important;
  font-size: 14px !important;
}

#mobileControlContent .mobile-setting-block.teamname-block {
  padding: 10px 10px !important;
}

#mobileControlContent .mobile-setting-block.teamname-block #mobileTeamSelector {
  width: 100%;
  margin: 0;
}

#mobileControlContent .teamname-apply-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 6px 8px !important;
}

#mobileControlContent .teamname-apply-row #mobileTeamSelector {
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#mobileTeamApplyMenuBtn {
  height: 40px;
  min-width: 74px;
  width: 74px !important;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 214, 92, 0.9);
  background: linear-gradient(180deg, #ffd85b, #f2b72f);
  color: #1d1300;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 74px !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

#mobileControlContent .drawer-actions-bottom {
  width: 100% !important;
  display: block !important;
  align-self: stretch !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

#mobileControlContent .drawer-actions-bottom .drawer-guide-btn {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(80, 162, 255, 0.78) !important;
  background: linear-gradient(
    180deg,
    rgba(48, 132, 244, 0.96),
    rgba(27, 88, 186, 0.96)
  ) !important;
  color: #f8fbff !important;
  font-weight: 800 !important;
  text-align: center !important;
}

#mobileTeamApplyMenuBtn:disabled {
  opacity: 0.45;
  filter: grayscale(0.2);
}

#mobileControlContent #mobileTeamApplyMenuBtn {
  display: inline-flex !important;
}

#mobileControlContent .teamname-apply-row datalist {
  display: none !important;
}

#candidate-mobile .mobile-team-title-menu {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 1024px) {
  .player-slot.field-slot .slot-label,
  .player-slot.sub-slot .slot-label,
  .player-slot.sub .slot-label {
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
  }
  .sub-slot-container .player-slot .slot-label {
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
  }
  .player-slot.sub .sub-label {
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
  }
}

/* =========================================================
   FINAL MOBILE MENU UX
   - bookmark tab + right slide drawer
   ========================================================= */
@media (max-width: 1200px) {
  #mobileOptionsBtn {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 21000 !important;
    width: 28px !important;
    height: 96px !important;
    border-radius: 0 12px 12px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-left: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(20, 28, 46, 0.96),
      rgba(10, 14, 24, 0.96)
    ) !important;
    color: #f8fbff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
  }

  #mobileOptionsPopup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20990 !important;
    display: block !important;
    pointer-events: auto !important;
  }
  #mobileOptionsPopup.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #mobileOptionsPopup .drawer-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    opacity: 0 !important;
    transition: opacity 0.22s ease !important;
  }
  #mobileOptionsPopup.open .drawer-backdrop {
    opacity: 1 !important;
  }

  #mobileControlContent {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100dvh !important;
    width: min(86vw, 430px) !important;
    max-width: 430px !important;
    border-radius: 16px 0 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(
      180deg,
      rgba(16, 20, 30, 0.98),
      rgba(9, 12, 20, 0.98)
    ) !important;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45) !important;
    transform: translateX(105%) !important;
    transition: transform 0.24s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #mobileOptionsPopup.open #mobileControlContent {
    transform: translateX(0) !important;
  }

  #mobileControlContent .drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 10px !important;
    background: rgba(12, 16, 24, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  #closeMobileOptions {
    height: 34px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  #mobileControlContent .drawer-body {
    padding: 10px !important;
    padding-top: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: auto !important;
  }
  /* 내부 메뉴 섹션화(HTML 구조 변경 없이) */
  #mobileControlContent .drawer-body > .mobile-setting-block,
  #mobileControlContent .drawer-body > .drawer-actions {
    position: relative;
    margin-top: 0 !important;
  }
  #mobileControlContent
    .drawer-body
    > .mobile-setting-block:nth-of-type(1)::before {
    content: '리그 / 필드';
  }
  #mobileControlContent
    .drawer-body
    > .mobile-setting-block:nth-of-type(2)::before {
    content: '포메이션';
  }
  #mobileControlContent .drawer-body > .drawer-actions:nth-of-type(1)::before {
    content: '포메이션 적용';
  }
  #mobileControlContent
    .drawer-body
    > .mobile-setting-block.teamname-apply-row::before {
    content: '팀 이름';
  }
  #mobileControlContent .drawer-body > .drawer-actions:nth-of-type(2)::before {
    content: '저장 / 공유';
  }
  #mobileControlContent .drawer-body > .mobile-setting-block::before,
  #mobileControlContent .drawer-body > .drawer-actions::before {
    content: none !important;
    display: none !important;
  }
  #mobileControlContent .mobile-setting-block,
  #mobileControlContent .drawer-actions {
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  #mobileControlContent .drawer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* 포메이션 아래 의미없는 빈칸(숨겨진 버튼 컨테이너) 제거 */
  #mobileControlContent .drawer-body > .drawer-actions:nth-of-type(1) {
    display: none !important;
  }
  #mobileControlContent .drawer-body > .mobile-setting-block:empty,
  #mobileControlContent .drawer-body > .drawer-actions:empty {
    display: none !important;
  }
  /* 포메이션 적용 구간(첫 번째 actions)의 불필요한 검은 바 제거 */
  #mobileControlContent .drawer-body > .drawer-actions:nth-of-type(1) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 4px 0 2px !important;
    border-radius: 0 !important;
  }
  #mobileControlContent .triple-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #mobileControlContent select,
  #mobileControlContent input[type='text'],
  #mobileControlContent input[type='number'],
  #mobileTeamSelector {
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  #mobileResetBtn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    z-index: auto !important;
    grid-column: 1 / -1 !important;
    order: -100 !important;
    margin-bottom: 6px !important;
  }
}

.player-slot:has(.player-img[src]) {
  background: transparent !important;
}

.player-slot:has(.player-img[src]) .player-box {
  background: transparent !important;
}

.event-toast-title,
.event-toast-sub {
  color: #ffffff !important;
}

.tactic-fade {
  animation: tacticFade 260ms ease-in-out;
}

@keyframes tacticFade {
  from {
    filter: brightness(1.25) saturate(1.2);
  }
  to {
    filter: brightness(1) saturate(1);
  }
}

#eventReplayOverlay .er-line {
  display: none !important;
}

#eventReplayOverlay .er-body {
  padding: 6px 8px 12px !important;
  min-height: 18px !important;
}

#scoreBadgeCenter {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.er-toast-title {
  color: #f8fafc;
}

.er-toast-sub {
  color: #fdba74;
}

.er-toast-title,
.er-toast-sub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

#fieldLabelA,
#fieldLabelB {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}
.field-team-logo-ring {
  position: absolute;
  left: 5%;
  top: calc(50% + 2px);
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(22, 101, 52, 0.24);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  filter: saturate(1.06) contrast(1.03);
  transform: translate(-140%, -46%);
  pointer-events: none;
  overflow: hidden;
}

.field-team-logo {
  display: block;
  pointer-events: none;
}

.field-label [data-fs-field-entity-kind],
.field-team-logo-ring[data-fs-field-entity-kind],
.field-team-logo[data-fs-field-entity-kind] {
  pointer-events: auto;
  cursor: context-menu;
}

.player-box [data-fs-field-entity-kind] {
  pointer-events: auto;
  cursor: context-menu;
}

.player-slot,
.player-slot * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.field,
.field-label,
.field-label *,
.sub-slot-container,
.sub-slot-container *,
.team-box,
.team-box *,
#candidate-mobile,
#candidate-mobile * {
  -webkit-touch-callout: none;
}

.player-slot img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

@keyframes tapFeedback {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.94);
  }
  70% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.player-slot.tap {
  animation: tapFeedback 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.player-number {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--fs-font-display, 'FS Pretendard', sans-serif);
  color: #ffffff;
  background: transparent;
  text-shadow: -0.8px 0 0 rgba(0, 0, 0, 0.95), 0.8px 0 0 rgba(0, 0, 0, 0.95),
    0 -0.8px 0 rgba(0, 0, 0, 0.95), 0 0.8px 0 rgba(0, 0, 0, 0.95),
    -1.4px 0 0 rgba(0, 0, 0, 0.65), 1.4px 0 0 rgba(0, 0, 0, 0.65),
    0 -1.4px 0 rgba(0, 0, 0, 0.65), 0 1.4px 0 rgba(0, 0, 0, 0.65),
    -1px -1px 0 rgba(0, 0, 0, 0.65), 1px -1px 0 rgba(0, 0, 0, 0.65),
    -1px 1px 0 rgba(0, 0, 0, 0.65), 1px 1px 0 rgba(0, 0, 0, 0.65);
  letter-spacing: -0.02em;
  pointer-events: none;
}

.player-captain {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 28px solid rgba(0, 0, 0, 0.75);
  border-right: 28px solid transparent;
  z-index: 6;
  pointer-events: none;
  color: transparent;
  font-size: 0;
}

.player-captain::after {
  content: 'C';
  position: absolute;
  top: -28px;
  left: 4px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

.player-tooltip {
  position: fixed;
  z-index: 99999;
  width: 314px;
  max-width: calc(100vw - 20px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 252, 247, .98));
  color: #183c27;
  border: 1px solid rgba(64, 156, 98, .34);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(13, 77, 42, .24), 0 2px 0 rgba(255, 255, 255, .72) inset;
  padding: 10px;
  font-size: 12px;
  box-sizing: border-box;
  animation: ttPop .13s ease-out;
}

@keyframes ttPop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.player-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(64, 156, 98, .3);
  transform: translateY(-50%) rotate(45deg);
}

.player-tooltip[data-side="right"]::after {
  left: -7px;
  border-right: 0;
  border-top: 0;
}

.player-tooltip[data-side="left"]::after {
  right: -7px;
  border-left: 0;
  border-bottom: 0;
}

.player-tooltip .tt-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: rgba(38, 123, 72, .1);
  color: #1c653b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.player-tooltip .tt-close:hover {
  background: rgba(38, 123, 72, .18);
}

.player-tooltip .tt-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-right: 26px;
  margin-bottom: 9px;
}

.player-tooltip .tt-avatar {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(150deg, #dff4e5, #f7fbf5);
  border: 1px solid rgba(69, 154, 95, .25);
}

.player-tooltip .tt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.player-tooltip .tt-avatar span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #2d7a4b;
  font-size: 24px;
  font-weight: 1000;
}

.player-tooltip .tt-main {
  min-width: 0;
}

.player-tooltip .tt-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.player-tooltip .tt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 1000;
  font-size: 16px;
  color: #123d25;
}

.player-tooltip .tt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.player-tooltip .tt-meta span {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(32, 128, 74, .08);
  border: 1px solid rgba(32, 128, 74, .14);
  color: #38654a;
  font-size: 10px;
  font-weight: 850;
}

.player-tooltip .tt-captain {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1f8b52;
  border: 1px solid rgba(255, 255, 255, .7);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
}

.player-tooltip .tt-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  align-items: flex-start;
  margin: 5px 0;
}

.player-tooltip .tt-detail-list {
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(243, 250, 245, .78);
  border: 1px solid rgba(201, 229, 210, .72);
}

.player-tooltip .tt-label {
  color: #6c8777;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.player-tooltip .tt-value {
  min-width: 0;
  word-break: break-word;
  color: #244934;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.player-tooltip .tt-stat-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}

.player-tooltip .tt-stat {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 5px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(198, 226, 207, .88);
  color: #496b57;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.player-tooltip .tt-stat b {
  color: #137541;
  font-size: 16px;
  font-weight: 1000;
}

.player-tooltip .tt-stat small {
  font-size: 10px;
  font-weight: 850;
}

.player-tooltip .tt-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.player-tooltip .tt-muted {
  color: #819487;
  font-size: 11px;
  font-weight: 850;
}

.player-tooltip .tt-ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #1f7a4d;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(31, 122, 77, .18);
}

.player-tooltip .tt-ig:hover {
  background: #16663d;
}

.player-tooltip .ig-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.player-tooltip .tt-ig .ig-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  color: #fff;
}

.player-tooltip .tt-ig:hover .ig-icon {
  color: #fff;
}

.player-tooltip .tt-edit {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.95;
}

.player-tooltip .tt-edit:hover {
  background: rgba(255, 255, 255, 0.14);
}

.player-tooltip .tt-edit svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

@media (max-width: 640px) {
  .player-tooltip.is-mobile {
    width: auto;
    max-width: none;
    border-radius: 14px;
    padding: 9px;
    box-shadow: 0 -14px 38px rgba(13, 77, 42, .24);
  }

  .player-tooltip.is-mobile::after {
    display: none;
  }

  .player-tooltip.is-mobile .tt-top {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 7px;
  }

  .player-tooltip.is-mobile .tt-avatar {
    width: 48px;
    height: 48px;
    border-radius: 11px;
  }

  .player-tooltip.is-mobile .tt-name {
    font-size: 14px;
  }

  .player-tooltip.is-mobile .tt-meta {
    gap: 3px;
    margin-top: 4px;
  }

  .player-tooltip.is-mobile .tt-meta span {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 9px;
  }

  .player-tooltip.is-mobile .tt-stat-list {
    gap: 4px;
    margin-bottom: 6px;
  }

  .player-tooltip.is-mobile .tt-stat {
    min-height: 38px;
    padding: 4px 2px;
  }

  .player-tooltip.is-mobile .tt-stat b {
    font-size: 14px;
  }

  .player-tooltip.is-mobile .tt-detail-list {
    padding: 6px 7px;
  }
}

.stats-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.stats-modal .panel {
  width: 100%;
  max-width: 360px;
  background: rgba(15, 15, 18, 0.98);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  padding: 14px;
}

.stats-modal .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stats-modal .title {
  font-weight: 900;
}

.stats-modal .close {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.stats-modal .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats-modal label {
  font-size: 11px;
  opacity: 0.75;
  display: block;
  margin-bottom: 6px;
}

.stats-modal input {
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  outline: none;
}

.stats-modal .actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.stats-modal .btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.stats-modal .btn.primary {
  background: rgba(255, 255, 255, 0.14);
  font-weight: 800;
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
}

.rank-table th,
.rank-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rank-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
}

.rank-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

.team-box h3,
.mobile-team-title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mobile-team-title {
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .player-name:not(:empty) {
    bottom: 0;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
    border-radius: 0 0 6px 6px;
  }
}

.player-slot.field-slot .player-img,
.player-slot.sub .player-img,
.player-slot.sub-slot .player-img {
  width: 100% !important;
  height: auto;
  object-fit: cover;
}

.player-img {
  z-index: 0;
}

.player-name {
  z-index: 2;
}

@media (max-width: 768px) {
  .player-number {
    font-size: 8px;
    padding: 1px 3px;
    border-radius: 4px;
    top: 2px;
    right: 1px;
  }
  .player-captain {
    border-top-width: 18px;
    border-right-width: 18px;
  }
  .player-captain::after {
    top: -15px;
    left: 3px;
    font-size: 6px;
  }
}

/* ============================
   Mobile sliding drawer (hamburger/bookmark-tab)
   - overrides without touching existing style.css
   ============================ */

@media (hover: hover) and (pointer: fine) {
  #mobileOptionsBtn,
  #mobileOptionsPopup,
  #mobileControlContent {
    display: none !important;
  }
}

/* =========================
   Screenshot Popup (Responsive)
========================= */

#screenshotPopup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

#screenshotPopup.show,
#screenshotPopup:not(.hidden) {
  display: flex;
}

#screenshotPopup .shot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

#screenshotPopup .shot-panel {
  position: relative;
  background: #111;
  color: #fff;
  width: min(92vw, 420px);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#screenshotPopup h3 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

#screenshotPopup button {
  width: 100%;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

#screenshotPopup .shot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#screenshotPopup .shot-actions button {
  padding: 12px 10px;
  background: #2a2a2a;
  color: #fff;
}

#screenshotPopup .shot-actions button[hidden] {
  display: none !important;
}

#screenshotPopup .shot-actions #shotABv,
#screenshotPopup .shot-actions #shotABh {
  grid-column: 1 / -1;
}

#screenshotPopup .shot-actions #shotABv:not([hidden]),
#screenshotPopup .shot-actions #shotABh:not([hidden]) {
  background: linear-gradient(180deg, #365236, #223a26);
}

#screenshotPopup .shot-actions button:hover {
  background: #3a3a3a;
}

#screenshotPopup .shot-actions #shotABv:not([hidden]):hover,
#screenshotPopup .shot-actions #shotABh:not([hidden]):hover {
  background: linear-gradient(180deg, #416241, #2a462e);
}

#screenshotPopup #closeShot {
  margin-top: 6px;
  padding: 10px;
  background: #444;
  color: #fff;
}

@media (max-width: 900px) {
  #screenshotPopup .shot-panel {
    width: min(94vw, 380px);
  }
}

@media (max-width: 520px) {
  #screenshotPopup .shot-panel {
    width: 92vw;
    padding: 16px 14px;
  }
  #screenshotPopup .shot-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 340px) {
  #screenshotPopup .shot-actions {
    grid-template-columns: 1fr;
  }
}

/* ===== 스크린샷 모드: 빈 슬롯 테두리 자국(다이아) 방지 ===== */

body.screenshot-mode .player-slot.sub .sub-label {
  transform: translateZ(0);
}

#field-1,
#field-2,
.pitch,
.field,
.pitch-wrap {
  position: relative;
}

.player-slot.goal-flash {
  outline: 2px solid #ff3b3b;
  outline-offset: 2px;
  border-radius: 14px;
  animation: goalFlashRed 0.35s ease-in-out 3 alternate;
}

@keyframes goalFlashRed {
  from {
    box-shadow: 0 0 2px rgba(255, 59, 59, 0.35), 0 0 8px rgba(255, 59, 59, 0.2);
  }
  to {
    box-shadow: 0 0 10px rgba(255, 59, 59, 1), 0 0 22px rgba(255, 59, 59, 0.85),
      0 0 36px rgba(255, 59, 59, 0.65);
  }
}

.screenshot-mode * {
  transition: none !important;
}

/* Field starter slot: keep silhouette glow, remove subtle rectangular slot frame only */
.field
  .player-slot.field-slot.has-player:not(.selected):not(.flash-goal):not(.flash-yellow):not(.flash-red):not(.flash-sub):not(.flash-assist):not(.flash-swap):not(.flash-event) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
}

.field .player-slot.field-slot.has-player .player-box {
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.field .player-slot.field-slot.has-player::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 48%;
  width: 78%;
  height: 82%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(145, 220, 255, 0.24) 0%,
    rgba(89, 194, 255, 0.16) 38%,
    rgba(255, 255, 255, 0.06) 58%,
    rgba(89, 194, 255, 0) 74%
  );
  filter: blur(3px);
  z-index: 0;
  pointer-events: none;
}

.field .player-slot.field-slot.has-player .player-img,
.field .player-slot.field-slot.has-player svg {
  background: transparent !important;
  border-radius: 0 !important;
  isolation: isolate;
}



.field .player-slot.has-player .player-img,
.field .player-slot.has-player svg {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(105, 205, 255, 0.36));
}

body.screenshot-mode .field .player-slot.has-player .player-img,
body.screenshot-mode .field .player-slot.has-player svg {
  -webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(105, 205, 255, 0.36)) !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(105, 205, 255, 0.36)) !important;
}

.er-goal-scorer {
  font-size: 1.25em;
  font-weight: 900;
  color: #ffcc33;
  text-shadow: 0 0 6px rgba(255, 200, 80, 0.7);
}

.er-goal-assist {
  font-weight: 600;
  color: #ffe7a0;
}

/* =========================================================
   HARD OVERRIDE: Tablet/Mobile Landscape layout lock
   - 일부 기기(넓은 태블릿)에서도 확실히 적용되도록 범위를 넓힘
   ========================================================= */
@media (orientation: landscape) and (max-width: 1366px) {
  :root {
    --lSafeL: env(safe-area-inset-left, 0px);
    --lSafeR: env(safe-area-inset-right, 0px);
    --lW: calc(100vw - var(--lSafeL) - var(--lSafeR));
    --lPad: 6px;
    --lGap: 6px;
    --lShrink: calc(38px + var(--landAutoShrink, 0px));
    --lFieldW: calc(
      ((var(--lW) - (var(--lPad) * 2) - var(--lGap)) / 2) - var(--lShrink)
    );
  }

  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .main-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: var(--lW) !important;
    max-width: var(--lW) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .candidate-column {
    display: none !important;
  }

  .center {
    width: var(--lW) !important;
    max-width: var(--lW) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
  }

  .center > .field-wrapper {
    flex: 0 0 50% !important;
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #field-1,
  #field-2 {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: calc(100% - 32px) !important;
    height: auto !important;
    aspect-ratio: 490 / 798 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
  }

  #candidate-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* 하단은 "상단 한 경기장 폭" 기준으로 2박스 */
    width: calc((var(--lW) / 2) - 20px) !important;
    max-width: calc((var(--lW) / 2) - 20px) !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #candidate-mobile .mobile-team-box {
    flex: 0 0 calc((((var(--lW) / 2) - 20px) - 8px) / 2) !important;
    width: calc((((var(--lW) / 2) - 20px) - 8px) / 2) !important;
    min-width: calc((((var(--lW) / 2) - 20px) - 8px) / 2) !important;
    max-width: calc((((var(--lW) / 2) - 20px) - 8px) / 2) !important;
  }

  .sub-slot-container {
    max-width: calc(50vw - 40px) !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   Mobile/Tablet final sizing:
   - safe-area(기기 버튼/제스처 영역) 감안
   - 하단 팀박스 2개가 상단 경기장 가로폭과 정렬
   ========================================================= */
@media (max-width: 1024px) {
  .center,
  #candidate-mobile {
    --safeL: env(safe-area-inset-left, 0px);
    --safeR: env(safe-area-inset-right, 0px);
    --stageW: calc(100vw - var(--safeL) - var(--safeR));
    --stagePad: 10px;
    --stageGap: 8px;
    --candidatePad: var(--stagePad);
  }

  #candidate-mobile {
    width: var(--stageW) !important;
    max-width: var(--stageW) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--candidatePad) !important;
    padding-right: var(--candidatePad) !important;
    box-sizing: border-box !important;
    gap: var(--stageGap) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
  }

  #candidate-mobile .mobile-team-box {
    flex: 0 0
      calc((var(--stageW) - (var(--candidatePad) * 2) - var(--stageGap)) / 2) !important;
    width: calc(
      (var(--stageW) - (var(--candidatePad) * 2) - var(--stageGap)) / 2
    ) !important;
    min-width: calc(
      (var(--stageW) - (var(--candidatePad) * 2) - var(--stageGap)) / 2
    ) !important;
    max-width: calc(
      (var(--stageW) - (var(--candidatePad) * 2) - var(--stageGap)) / 2
    ) !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  :root {
    --land-safeL: env(safe-area-inset-left, 0px);
    --land-safeR: env(safe-area-inset-right, 0px);
    --landW: calc(100vw - var(--land-safeL) - var(--land-safeR));
    --landGap: 8px;
    --landPad: 6px;
    --fieldShrink: 28px;
  }

  #candidate-mobile {
    /* 상단 필드의 실제 좌우 인셋(센터 정렬 + 필드폭 보정)과 맞춤 */
    --candidatePad: var(--landPad);
  }

  .center {
    width: var(--landW) !important;
    max-width: var(--landW) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--landPad) !important;
    padding-right: var(--landPad) !important;
    box-sizing: border-box !important;
    gap: var(--landGap) !important;
  }

  .center > .field-wrapper {
    flex: 0 0 calc((var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2) !important;
    width: calc(
      (var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2
    ) !important;
    min-width: calc(
      (var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2
    ) !important;
    max-width: calc(
      (var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2
    ) !important;
  }

  #field-1,
  #field-2 {
    width: calc(
      (
        ((var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2) -
          var(--fieldShrink)
      )
    ) !important;
    max-width: calc(
      (
        ((var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2) -
          var(--fieldShrink)
      )
    ) !important;
    height: calc(
      (
        (
            ((var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2) -
              var(--fieldShrink)
          ) * 1.63
      )
    ) !important;
    min-height: 520px !important;
  }
}

/* =========================================================
   Alignment lock:
   상단 경기장 트랙 폭과 하단 팀박스 트랙 폭을 정확히 일치
   ========================================================= */
@media (max-width: 1024px) {
  .center {
    --safeL2: env(safe-area-inset-left, 0px);
    --safeR2: env(safe-area-inset-right, 0px);
    --safeW2: calc(100vw - var(--safeL2) - var(--safeR2));
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .center {
    --fieldTrackW: calc(var(--safeW2) - 20px);
  }

  #field-1,
  #field-2 {
    width: var(--fieldTrackW) !important;
    max-width: var(--fieldTrackW) !important;
  }

  #candidate-mobile {
    /* #candidate-mobile는 .center의 자식이 아니므로 safe-area 포함 변수 직접 선언 */
    --safeL2: env(safe-area-inset-left, 0px);
    --safeR2: env(safe-area-inset-right, 0px);
    --safeW2: calc(100vw - var(--safeL2) - var(--safeR2));
    --fieldTrackW: calc(var(--safeW2) - 20px);
    width: var(--fieldTrackW) !important;
    max-width: var(--fieldTrackW) !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  #candidate-mobile .mobile-team-box {
    /* 첫 화면에는 2팀만 보이고, 이후 팀은 가로 스크롤 */
    flex: 0 0 calc((var(--fieldTrackW) - 8px) / 2) !important;
    width: calc((var(--fieldTrackW) - 8px) / 2) !important;
    min-width: calc((var(--fieldTrackW) - 8px) / 2) !important;
    max-width: calc((var(--fieldTrackW) - 8px) / 2) !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .center {
    --fieldTrackW: calc(
      ((var(--landW) - (var(--landPad) * 2) - var(--landGap)) / 2) -
        var(--fieldShrink)
    );
  }

  #field-1,
  #field-2 {
    width: var(--fieldTrackW) !important;
    max-width: var(--fieldTrackW) !important;
  }

  #candidate-mobile {
    width: calc((var(--fieldTrackW) * 2) + var(--landGap)) !important;
    max-width: calc((var(--fieldTrackW) * 2) + var(--landGap)) !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    gap: var(--landGap) !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #candidate-mobile .mobile-team-box {
    flex: 0 0 var(--fieldTrackW) !important;
    width: var(--fieldTrackW) !important;
    min-width: var(--fieldTrackW) !important;
    max-width: var(--fieldTrackW) !important;
  }
}

/* =========================================================
   Mobile/Tablet: 1 Viewport = 1 Field (A/B swipe pages)
   ========================================================= */
@media (max-width: 1024px) {
  .center {
    width: 100vw !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-behavior: smooth;
  }

  .center > .field-wrapper {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #field-1,
  #field-2 {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    height: 74vh !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .sub-slot-container {
    max-width: calc(100vw - 18px) !important;
    margin-left: 0 !important;
  }
}

/* Landscape(모바일/태블릿)에서는 2구장 동시표시(무스크롤) */
@media (max-width: 1024px) and (orientation: landscape) {
  .main-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .candidate-column {
    display: none !important;
  }

  #candidate-mobile {
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .center {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .center > .field-wrapper {
    flex: 0 0 50vw !important;
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
    scroll-snap-align: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #field-1,
  #field-2 {
    width: calc(50vw - 8px) !important;
    max-width: calc(50vw - 8px) !important;
    /* 세로모드 체감 비율 유지: 화면을 넘어가도 필드를 충분히 크게 */
    height: calc((50vw - 18px) * 1.63) !important;
    min-height: 520px !important;
    margin: 0 auto !important;
  }

  .field-lines {
    top: 44px !important;
    /* 골키퍼 하단선과 맞도록 하단 라인을 위로 끌어올림 */
    bottom: 150px !important;
    left: 20px !important;
    right: 20px !important;
  }

  .sub-slot-container {
    /* 서브슬롯은 경기장 라인 아래로 분리 */
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* =========================================================
   FINAL LOCK: Team boxes per field
   - Portrait: 1 field viewport -> 2 team boxes
   - Landscape: 2 fields viewport -> 4 team boxes (2 per field)
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --m-safe-l: env(safe-area-inset-left, 0px);
    --m-safe-r: env(safe-area-inset-right, 0px);
    --m-vw: calc(100vw - var(--m-safe-l) - var(--m-safe-r));
    --m-pad: 10px;
    --m-gap: 8px;
    --m-field-track: calc(var(--m-vw) - (var(--m-pad) * 2));
  }

  #candidate-mobile {
    width: var(--m-field-track) !important;
    max-width: var(--m-field-track) !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--m-gap) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  #candidate-mobile .mobile-team-box {
    flex: 0 0 calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
    width: calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
    min-width: calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
    max-width: calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
  }

  /* Landscape mobile/tablet: long team names should stay on one line */
  #candidate-mobile .mobile-team-title,
  #candidate-mobile .mobile-team-box h3 {
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: keep-all !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  :root {
    --m-safe-l: env(safe-area-inset-left, 0px);
    --m-safe-r: env(safe-area-inset-right, 0px);
    --m-vw: calc(100vw - var(--m-safe-l) - var(--m-safe-r));
    --m-pad: 6px;
    --m-gap: 8px;
    --m-field-track: calc(
      (var(--m-vw) - (var(--m-pad) * 2) - var(--m-gap)) / 2
    );
  }

  #candidate-mobile {
    width: calc((var(--m-field-track) * 2) + var(--m-gap)) !important;
    max-width: calc((var(--m-field-track) * 2) + var(--m-gap)) !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    gap: var(--m-gap) !important;
  }

  #candidate-mobile .mobile-team-box {
    flex: 0 0 calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
    width: calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
    min-width: calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
    max-width: calc((var(--m-field-track) - var(--m-gap)) / 2) !important;
  }
}

/* =========================
   Mobile guide popup
   ========================= */
#mobileGuideBtn {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.45);
}

#mobileGuidePopup {
  position: fixed;
  inset: 0;
  z-index: 120000;
}

#mobileGuidePopup.hidden {
  display: none !important;
}

#mobileGuidePopup .guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

#mobileGuidePopup .guide-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 640px);
  max-height: 84vh;
  border-radius: 14px;
  border: 1px solid rgba(130, 168, 255, 0.35);
  background: linear-gradient(
    180deg,
    rgba(15, 24, 42, 0.98),
    rgba(8, 14, 28, 0.98)
  );
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
  overflow: hidden;
}

#mobileGuidePopup .guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#mobileGuidePopup .guide-head h3 {
  margin: 0;
  font-size: 15px;
  color: #f4f8ff;
}

#mobileGuidePopup .guide-head button {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 129, 129, 0.65);
  background: linear-gradient(
    180deg,
    rgba(255, 92, 92, 0.95),
    rgba(210, 44, 44, 0.95)
  );
  color: #fff;
  font-weight: 800;
}

#mobileGuidePopup .guide-body {
  padding: 12px;
  overflow: auto;
  max-height: calc(84vh - 50px);
  font-size: 13px;
  line-height: 1.45;
  color: #dce7ff;
}

#mobileGuidePopup .guide-body h4 {
  margin: 12px 0 8px;
  font-size: 13px;
  color: #fff;
}

#mobileGuidePopup .guide-body ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

#mobileGuidePopup .guide-body li {
  margin-bottom: 5px;
}

/* =========================================================
   SUB bench zone (visual panel + balanced 10-slot layout)
   ========================================================= */
.field-wrapper {
  --bench-slot-w: 64px;
  --bench-slot-h: 84px;
  --bench-gap-x: 12px;
  --bench-gap-y: 8px;
  --bench-pad-x: 10px;
  --bench-pad-y: 10px;
  --bench-panel-w: 392px; /* 64*5 + 12*4 + 10*2 */
}

.field-wrapper > .sub-slot-container {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 8px !important;
  z-index: 7 !important;
  display: grid !important;
  grid-template-columns: repeat(5, var(--bench-slot-w)) !important;
  grid-auto-rows: var(--bench-slot-h) !important;
  gap: var(--bench-gap-y) var(--bench-gap-x) !important;
  width: min(calc(100% - 20px), var(--bench-panel-w)) !important;
  padding: var(--bench-pad-y) var(--bench-pad-x) !important;
  justify-content: center !important;
  align-content: center !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.34) !important;
  background: linear-gradient(
      180deg,
      rgba(15, 37, 20, 0.78),
      rgba(9, 22, 13, 0.72)
    ),
    radial-gradient(
      circle at 50% 12%,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 10px rgba(0, 0, 0, 0.34), 0 8px 18px rgba(0, 0, 0, 0.36) !important;
  overflow: hidden !important;
}

.field-wrapper > .sub-slot-container::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.field-wrapper > .sub-slot-container::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.field-wrapper > .sub-slot-container .player-slot.sub {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .field-wrapper {
    --bench-slot-w: 52px;
    --bench-slot-h: 70px;
    --bench-gap-x: 9px;
    --bench-gap-y: 7px;
    --bench-pad-x: 8px;
    --bench-pad-y: 8px;
    --bench-panel-w: 312px; /* 52*5 + 9*4 + 8*2 */
  }
  .field-wrapper > .sub-slot-container {
    bottom: 6px !important;
    width: min(calc(100% - 14px), var(--bench-panel-w)) !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 768px) {
  .field-wrapper {
    --bench-slot-w: 40px;
    --bench-slot-h: 56px;
    --bench-gap-x: 8px;
    --bench-gap-y: 6px;
    --bench-pad-x: 7px;
    --bench-pad-y: 7px;
    --bench-panel-w: 245px; /* 40*5 + 8*4 + 7*2 */
  }
  .field-wrapper > .sub-slot-container {
    bottom: 5px !important;
    width: min(calc(100% - 10px), var(--bench-panel-w)) !important;
    border-radius: 12px !important;
  }
  .field-wrapper > .sub-slot-container::before {
    inset: 5px;
    border-radius: 9px;
  }
}

/* =========================================================
   Urban dark tune: deep black base + charcoal team panels
   ========================================================= */
:root {
  --app-bg: #07090d;
  --panel-bg: #11151b;
  --panel-border: #2a313a;
  --panel-hover: #1d242d;
}

body {
  background-color: var(--app-bg) !important;
}

.main-content {
  background: linear-gradient(
    180deg,
    #080b10 0%,
    #0b0f14 55%,
    #0d1117 100%
  ) !important;
}

.candidate-column {
  background-color: rgba(28, 32, 38, 0.94) !important;
  border-color: #3a414b !important;
}

.team-box {
  background: linear-gradient(
    180deg,
    rgba(47, 52, 59, 0.88),
    rgba(34, 38, 44, 0.9)
  ) !important;
  border-color: #4a515b !important;
}

.team-box::-webkit-scrollbar-track {
  background: #262b33 !important;
}

.team-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #66707d, #4b535e) !important;
  border-color: #262b33 !important;
}

.candidate-column::-webkit-scrollbar-track {
  background: #252b33 !important;
}

.candidate-column::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #66707d, #4b535e) !important;
  border-color: #252b33 !important;
}
/* =========================================================
   Fix: 모바일/태블릿 스크린샷에서 선수 이름 바가 이미지에 딱 붙도록
   ========================================================= */
@media (max-width: 1024px) {
  /* 스크린샷 모드에서만 적용 – 선수 이미지 하단 정렬 + 이름 바 틈 제거 */
  body.screenshot-mode .player-slot.field-slot .player-img,
  body.screenshot-mode .player-slot.sub .player-img {
    object-position: center bottom !important; /* 이미지를 하단으로 정렬 */
  }

  body.screenshot-mode .player-name:not(:empty) {
    bottom: 0 !important;
    margin-bottom: 0 !important;
    height: 14px !important;
    line-height: 14px !important;
    border-radius: 0 0 6px 6px !important;
  }
}
/* =============================================
   선수 이름 바 통일 (주전/서브/모든 해상도)
   ============================================= */

/* PC (기본) */
.player-slot .player-name {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 18px;
  line-height: 18px;
}

/* 모바일 (화면 너비 768px 이하) */
@media (max-width: 768px) {
  .player-slot .player-name {
    height: 14px !important;
    line-height: 14px !important;
  }
}

/* Screenshot/mobile slot polish:
   keep the name bar vertically centered and clip starter images to the same
   rounded bottom edge as the label without clipping the outer glow. */
.player-slot .player-name:not(:empty) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.field .player-slot.field-slot.has-player .player-box {
  border-radius: 8px !important;
  clip-path: inset(0 round 8px);
}

.field .player-slot.field-slot.has-player .player-img,
.field .player-slot.field-slot.has-player svg {
  border-radius: 8px !important;
  clip-path: inset(0 round 8px);
}

@media (max-width: 768px) {
  .player-slot .player-name:not(:empty) {
    height: 14px !important;
    min-height: 14px !important;
    line-height: 14px !important;
    padding: 0 2px !important;
    transform: none !important;
  }

  .field .player-slot.field-slot.has-player .player-box,
  .field .player-slot.field-slot.has-player .player-img,
  .field .player-slot.field-slot.has-player svg {
    border-radius: 6px !important;
    clip-path: inset(0 round 6px);
  }
}

/* 퇴장 선수 가슴 카드 - 기본은 숨김 */
.player-redcard-badge {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) translateZ(0);
  z-index: 99999;
  width: 20px;
  height: 28px;
  background: #e74c3c;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  pointer-events: none;
  display: none !important;
}

/* data-visible="true"일 때만 보임 (JS에서 제어) */
.player-redcard-badge[data-visible="true"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: redcardBadgePop 0.4s ease-out 1;
}

/* PC에서 약간 크게 */
@media (min-width: 769px) {
  .player-redcard-badge {
    width: 22px;
    height: 32px;
    top: 52%;
  }
}

/* 카드 내부 하이라이트 (선택) */
.player-redcard-badge::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 18px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px;
}

/* 작은 RED 텍스트 */
.player-redcard-badge::after {
  content: "RED";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6px;
  font-weight: 800;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

@keyframes redcardBadgePop {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(-20deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Candidate team boxes: keep four visible rows stable and scroll cleanly from the fifth row. */
@media (max-width: 768px) {
  #candidate-mobile .mobile-team-players {
    height: 240px !important;
    grid-auto-rows: 56px !important;
    row-gap: 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

#candidate-mobile .mobile-team-players .player-slot {
    align-self: start;
    justify-self: center;
  }
}

/* Mobile team boxes: allow horizontal swipe even when the gesture starts on
   a team title, player list, or player slot inside the nested team panel. */
@media (max-width: 1024px) {
  #candidate-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin;
    cursor: grab;
  }

  #candidate-mobile.is-horizontal-dragging {
    cursor: grabbing;
    scroll-snap-type: none !important;
  }

  #candidate-mobile .mobile-team-box {
    flex-shrink: 0 !important;
    touch-action: pan-x pan-y;
    scroll-snap-align: start;
  }

  #candidate-mobile .mobile-team-title,
  #candidate-mobile .mobile-team-title * {
    touch-action: pan-x pan-y;
  }

  #candidate-mobile .mobile-team-players,
  #candidate-mobile .mobile-team-players .player-slot,
  #candidate-mobile .mobile-team-players .player-box,
  #candidate-mobile .mobile-team-players img {
    touch-action: pan-y;
  }
}

/* =========================================================
   MOBILE FIELD QUICK MENU
   - PC control bar stays unchanged.
   - Mobile gets a visible category bar plus a compact bottom sheet.
   ========================================================= */
.mobile-quick-actions {
  display: none;
}

@media (max-width: 900px) {
  .replay-return-bar {
    display: none !important;
  }

  #mobileOptionsBtn {
    display: none !important;
  }

  .mobile-quick-actions {
    position: sticky;
    top: 45px;
    z-index: 1095;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0 auto;
    padding: 1px 7px 3px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid rgba(7, 86, 50, 0.24);
    border-radius: 0 0 11px 11px;
    background: linear-gradient(
      180deg,
      rgba(25, 119, 74, 0.94),
      rgba(16, 96, 58, 0.9)
    );
    box-shadow: 0 6px 14px rgba(11, 82, 48, 0.12);
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
  }

  .mobile-quick-actions button {
    position: relative;
    min-width: 0;
    height: 25px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(243, 255, 248, 0.92);
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: none;
    touch-action: manipulation;
  }

  .mobile-quick-actions button + button {
    border-left: 1px solid rgba(220, 255, 235, 0.34);
  }

  .mobile-quick-actions button.active,
  .mobile-quick-actions button:active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  .mobile-quick-actions button.active::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: rgba(229, 255, 236, 0.92);
  }

  #mobileOptionsPopup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20990 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #mobileOptionsPopup .drawer-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
  }

  #mobileOptionsPopup.open .drawer-backdrop {
    opacity: 1 !important;
  }

  #mobileControlContent {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    top: 77px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 106px) !important;
    padding: 0 !important;
    border-radius: 0 0 16px 16px !important;
    border: 1px solid rgba(18, 126, 74, 0.24) !important;
    background: linear-gradient(
      180deg,
      rgba(236, 249, 241, 0.97),
      rgba(214, 239, 225, 0.97)
    ) !important;
    color: #123524 !important;
    box-shadow: 0 14px 28px rgba(10, 63, 36, 0.22) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-14px) !important;
    transition: opacity 0.18s ease, transform 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #mobileOptionsPopup.open #mobileControlContent {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  #mobileControlContent .drawer-header {
    display: none !important;
  }

  #mobileDrawerTitle {
    display: none !important;
  }

  #closeMobileOptions {
    flex: 0 0 auto;
    width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 122, 69, 0.18) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: #14532d !important;
    font-size: 0 !important;
    font-weight: 900 !important;
  }

  #closeMobileOptions::before {
    content: '×';
    font-size: 17px;
    line-height: 1;
  }

  #mobileControlContent .drawer-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: calc(100dvh - 108px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    scrollbar-width: thin;
  }

  #mobileControlContent [data-mobile-panel-content][hidden] {
    display: none !important;
  }

  #mobileControlContent .mobile-setting-block,
  #mobileControlContent .drawer-actions {
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(24, 128, 78, 0.14) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    box-sizing: border-box !important;
  }

  #mobileControlContent .drawer-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #mobileControlContent
    .drawer-body
    > .drawer-actions[data-mobile-panel-content] {
    display: grid !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='file'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='share'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='share'] button[hidden] {
    display: none !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='share'] #mobileShotABv,
  #mobileControlContent .drawer-actions[data-mobile-panel-content='share'] #mobileShotABh {
    grid-column: 1 / -1;
  }

  #mobileControlContent .drawer-body > [data-mobile-panel-content][hidden],
  #mobileControlContent .drawer-body > .drawer-actions[data-mobile-panel-content][hidden],
  #mobileControlContent .drawer-body > .mobile-setting-block[data-mobile-panel-content][hidden] {
    display: none !important;
  }

  #mobileControlContent .triple-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #mobileControlContent select,
  #mobileControlContent input[type='text'],
  #mobileTeamSelector {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(22, 101, 52, 0.18) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #143c28 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
  }

  #mobileLeagueSelector,
  #mobileFieldPresetSelect {
    display: none !important;
  }

  #mobileFormationSelector {
    display: block !important;
  }

  #mobileControlContent .mobile-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  #mobileControlContent .mobile-choice-grid[hidden] {
    display: none !important;
  }

  #mobileControlContent .mobile-choice-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(22, 101, 52, 0.16) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: #16462d !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #mobileControlContent .mobile-choice-btn.active {
    border-color: rgba(20, 122, 69, 0.55) !important;
    background: linear-gradient(180deg, rgba(27, 151, 90, 0.92), rgba(19, 113, 67, 0.92)) !important;
    color: #fff !important;
  }

  #mobileControlContent .mobile-league-grid .mobile-choice-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 7px !important;
    text-align: left !important;
  }

  #mobileControlContent .mobile-choice-badge {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 151, 90, 0.14);
    border: 1px solid rgba(20, 122, 69, 0.26);
    color: #147a45;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
  }

  #mobileControlContent .mobile-choice-btn.active .mobile-choice-badge {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
  }

  #mobileControlContent .mobile-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #mobileControlContent .mobile-field-grid .mobile-choice-btn {
    height: 48px !important;
    padding: 5px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }

  #mobileControlContent .mobile-choice-preview {
    display: block;
    flex: 0 0 34px;
    width: 34px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(20, 83, 45, 0.18);
    background-color: #197342;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  #mobileControlContent .mobile-choice-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mobileControlContent .mobile-formation-grid {
    display: none !important;
  }

  #mobileControlContent .mobile-formation-apply-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #mobileControlContent #mobileTeamSelector {
    color: #143c28 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(22, 101, 52, 0.18) !important;
    box-shadow: none !important;
  }

  #mobileControlContent #mobileTeamSelector::placeholder {
    color: rgba(20, 83, 45, 0.68) !important;
    font-weight: 800 !important;
  }

  #mobileControlContent button,
  #mobileControlContent .mobile-file-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(22, 101, 52, 0.18) !important;
    background: rgba(245, 252, 248, 0.96) !important;
    color: #14532d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  #mobileApplyNameA,
  #mobileApplyNameB,
  #mobileApplyNameAB {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 5px !important;
    background: rgba(28, 141, 86, 0.12) !important;
    border-color: rgba(28, 141, 86, 0.22) !important;
    color: #14532d !important;
  }

  #mobileControlContent .teamname-apply-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px 34px 46px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  #mobileControlContent .teamname-apply-row #mobileTeamSelector {
    flex: 1 1 auto !important;
  }

  #mobileSaveBtn {
    background: rgba(28, 141, 86, 0.14) !important;
    border-color: rgba(28, 141, 86, 0.25) !important;
  }

  #mobileShareBtn,
  #mobileScreenshotBtn {
    background: rgba(28, 141, 86, 0.12) !important;
    border-color: rgba(28, 141, 86, 0.22) !important;
  }

  #mobileResetBtn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    grid-column: auto !important;
    order: initial !important;
    margin: 0 !important;
    background: rgba(211, 72, 72, 0.12) !important;
    border-color: rgba(211, 72, 72, 0.22) !important;
    color: #7f1d1d !important;
  }

  #mobileControlContent .mobile-tactic-share-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #mobileControlContent .mobile-tactic-share-panel #mobileShareBtn {
    height: 38px !important;
    min-height: 38px !important;
    background: linear-gradient(180deg, rgba(27, 151, 90, 0.18), rgba(20, 122, 69, 0.12)) !important;
    border-color: rgba(20, 122, 69, 0.28) !important;
  }

  #mobileControlContent #mobileTacticsBoardBtn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='file'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='file'] > .mobile-setting-block {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='file'] #mobileSaveBtn,
  #mobileControlContent .drawer-actions[data-mobile-panel-content='file'] .mobile-file-btn {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 11px !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='file'] #mobileResetBtn {
    grid-column: 1 / -1 !important;
    height: 40px !important;
    min-height: 40px !important;
    background: linear-gradient(180deg, rgba(232, 83, 83, 0.34), rgba(167, 38, 38, 0.28)) !important;
    border-color: rgba(167, 38, 38, 0.46) !important;
    color: #6f1717 !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.22),
      0 5px 12px rgba(127, 29, 29, 0.15) !important;
  }

  #mobileControlContent .drawer-actions[data-mobile-panel-content='file'] #mobileResetBtn:active {
    transform: translateY(2px) scale(0.98) !important;
    filter: brightness(0.9) saturate(1.16) !important;
    box-shadow: inset 0 3px 8px rgba(127, 29, 29, 0.34),
      0 1px 4px rgba(127, 29, 29, 0.12) !important;
  }

  #mobileControlContent button,
  #mobileControlContent .mobile-file-btn,
  #mobileControlContent .mobile-choice-btn,
  #mobileControlContent .drawer-guide-btn {
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease !important;
  }

  #mobileControlContent button:active,
  #mobileControlContent .mobile-file-btn:active,
  #mobileControlContent .mobile-choice-btn:active,
  #mobileControlContent .drawer-guide-btn:active {
    transform: translateY(1px) scale(.985) !important;
    filter: brightness(.94) saturate(1.08) !important;
    box-shadow: inset 0 2px 5px rgba(20, 83, 45, .12) !important;
  }

  #mobileControlContent select option,
  #mobileControlContent select optgroup {
    background: #f5fcf8 !important;
    color: #143c28 !important;
  }
}
:root {
  --ui-row-h: 38px;
  --ui-chip-h: 28px;
  --ui-card-gap: 10px;
  --ui-section-gap: 14px;
}

@media (max-width: 720px) {
  .topbar,
  .panel,
  .team-card,
  .candidate-card {
    gap: var(--ui-card-gap);
  }

  button,
  select,
  input,
  .team-pill,
  .player-pill {
    min-height: var(--ui-chip-h);
  }

  .candidate-card,
  .team-card {
    min-height: var(--ui-row-h);
  }

  .candidate-card,
  .team-name,
  .player-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

body.tactics-board-mode .field .player-slot.field-slot > .slot-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
body.tactics-board-mode .field .player-slot.field-slot.has-player::before {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================================
   방송형 경기장
   ========================================================= */
body.broadcast-board-mode {
  --broadcast-field-ratio: 1.5441176471; /* football 105m x 68m */
  --broadcast-portrait-ratio: 68 / 105;
  --broadcast-bg: #111923;
  --broadcast-pitch-a: #222b36;
  --broadcast-pitch-b: #18212c;
  --broadcast-line-a: rgba(255, 122, 58, 0.92);
  --broadcast-line-b: rgba(91, 145, 255, 0.94);
  --broadcast-glow-a: rgba(255, 122, 58, 0.28);
  --broadcast-glow-b: rgba(91, 145, 255, 0.28);
  --broadcast-midline: rgba(214, 226, 244, 0.52);
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 122, 58, 0.14), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(91, 145, 255, 0.14), transparent 32%),
    #0a1018;
}

body.tactics-board-mode:not(.broadcast-board-mode) {
  --broadcast-pitch-a: #222b36;
  --broadcast-pitch-b: #18212c;
  --broadcast-line-a: rgba(255, 122, 58, 0.92);
  --broadcast-line-b: rgba(91, 145, 255, 0.94);
  --broadcast-team-accent: var(--team-accent-bg, #2f9e55);
  --broadcast-stripe-angle: 90deg;
}

body.broadcast-board-mode #controlBar {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255, 122, 58, 0.18), transparent 28%, transparent 72%, rgba(91, 145, 255, 0.18)),
    linear-gradient(180deg, rgba(18, 27, 39, 0.98), rgba(8, 13, 20, 0.98));
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 28px rgba(0, 0, 0, 0.28);
  gap: 7px;
}

body.broadcast-board-mode #controlBar::before {
  content: 'BROADCAST BOARD';
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 208, 151, 0.28);
  background: rgba(0, 0, 0, 0.26);
  color: rgba(255, 231, 198, 0.92);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-shadow: 0 0 14px rgba(255, 122, 58, 0.42);
}

body.broadcast-board-mode .main-nav {
  background:
    linear-gradient(90deg, rgba(255, 122, 58, 0.16), rgba(255, 255, 255, 0.94) 24%, rgba(255, 255, 255, 0.94) 76%, rgba(91, 145, 255, 0.16));
  border-bottom-color: rgba(18, 25, 35, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

body.broadcast-board-mode .main-nav ul li a {
  border-color: rgba(17, 24, 39, 0.08) !important;
}

body.broadcast-board-mode .main-nav ul li a.active {
  background: linear-gradient(90deg, #e66f32, #326fe6);
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 20px rgba(50, 111, 230, 0.18);
}

body.broadcast-board-mode #controlBar button,
body.broadcast-board-mode #controlBar select,
body.broadcast-board-mode #controlBar input,
body.broadcast-board-mode #controlBar .file-btn {
  min-height: 29px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(11, 18, 28, 0.92);
  color: #f8fbff;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

body.broadcast-board-mode #tacticsBoardBtn {
  min-width: 86px;
}

body.broadcast-board-mode #mobileTacticsBoardBtn {
  min-width: 86px;
}

body.broadcast-board-mode #mobileTacticsBoardQuickBtn {
  min-width: 48px;
}

body.broadcast-board-mode #controlBar select {
  color: #fff3df;
  background:
    linear-gradient(180deg, rgba(255, 122, 58, 0.16), rgba(91, 145, 255, 0.08)),
    #101824;
}

body.broadcast-board-mode #controlBar button:hover,
body.broadcast-board-mode #controlBar select:hover,
body.broadcast-board-mode #controlBar input:hover,
body.broadcast-board-mode #controlBar .file-btn:hover {
  border-color: rgba(255, 210, 150, 0.52);
  filter: brightness(1.08);
}

body.broadcast-board-mode #controlBar .op-group {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(255, 122, 58, 0.12), rgba(91, 145, 255, 0.1)),
    rgba(255, 255, 255, 0.035);
}

body.broadcast-board-mode #controlBar .op-label {
  color: rgba(255, 232, 200, 0.86);
  text-shadow: 0 0 10px rgba(255, 122, 58, 0.3);
}

body.broadcast-board-mode .main-content {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 12px clamp(10px, 2vw, 24px) 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #090d13 0%, #111923 70%, #0b1119 100%);
}

body.broadcast-board-mode .center {
  flex: 0 0 var(--broadcast-fit-field-w, min(calc(100vw - 48px), 1540px)) !important;
  order: 1;
  position: relative;
  box-sizing: border-box;
  width: var(--broadcast-fit-field-w, min(calc(100vw - 48px), 1580px));
  height: var(--broadcast-fit-field-h, auto);
  max-height: var(--broadcast-fit-h, min(76vh, calc((100vw - 48px) / var(--broadcast-board-ratio, var(--broadcast-field-ratio)))));
  min-width: min(100%, 720px);
  aspect-ratio: var(--broadcast-board-ratio, var(--broadcast-field-ratio));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: clamp(8px, 1.2vw, 14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 122, 58, 0.08), transparent 24%, transparent 76%, rgba(91, 145, 255, 0.08)),
    #101722;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

body.broadcast-board-mode .center::before {
  content: '';
  position: absolute;
  top: clamp(8px, 1.2vw, 14px);
  bottom: clamp(8px, 1.2vw, 14px);
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--broadcast-midline), transparent);
  box-shadow:
    0 0 5px rgba(214, 226, 244, 0.46),
    0 0 14px rgba(214, 226, 244, 0.2);
  pointer-events: none;
  z-index: 8;
}

body.broadcast-board-mode .center::after {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--broadcast-field-center-y, 50%);
  width: min(16vw, 210px);
  aspect-ratio: 1;
  border: 1px solid var(--broadcast-midline);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 6px rgba(214, 226, 244, 0.36),
    0 0 18px rgba(214, 226, 244, 0.12);
  pointer-events: none;
  z-index: 7;
}

body.broadcast-board-mode .field-wrapper {
  width: 100%;
  height: 100%;
  min-width: 0;
  aspect-ratio: auto;
  padding: 0;
  margin: 0 !important;
  overflow: visible;
  position: relative;
}

body.broadcast-board-mode #field-wrapper-1 {
  --broadcast-line: var(--broadcast-line-a);
  --broadcast-glow: var(--broadcast-glow-a);
  --broadcast-chip: #ed7b3e;
  --broadcast-team-accent: #ed7b3e;
  --broadcast-stripe-angle: 90deg;
}

body.broadcast-board-mode #field-wrapper-2 {
  --broadcast-line: var(--broadcast-line-b);
  --broadcast-glow: var(--broadcast-glow-b);
  --broadcast-chip: #5387e9;
  --broadcast-team-accent: #5387e9;
  --broadcast-stripe-angle: 90deg;
}

body.broadcast-board-mode .field-wrapper[data-field-orientation='vertical'],
body.tactics-board-mode:not(.broadcast-board-mode) .field-wrapper[data-field-orientation='vertical'] {
  --broadcast-stripe-angle: 180deg;
}

body.broadcast-board-mode .field-wrapper[data-field-orientation='horizontal'],
body.tactics-board-mode:not(.broadcast-board-mode) .field-wrapper[data-field-orientation='horizontal'] {
  --broadcast-stripe-angle: 90deg;
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode .field-wrapper,
  body.tactics-board-mode:not(.broadcast-board-mode) .field-wrapper {
    --broadcast-stripe-angle: 180deg !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode .field-wrapper,
  body.tactics-board-mode:not(.broadcast-board-mode) .field-wrapper {
    --broadcast-stripe-angle: 90deg !important;
  }
}

body.tactics-board-mode:not(.broadcast-board-mode) #field-wrapper-1 {
  --broadcast-line: var(--broadcast-line-a);
  --broadcast-team-accent: #ed7b3e;
}

body.tactics-board-mode:not(.broadcast-board-mode) #field-wrapper-2 {
  --broadcast-line: var(--broadcast-line-b);
  --broadcast-team-accent: #5387e9;
}

body.broadcast-board-mode .broadcast-laser-frame {
  position: absolute;
  inset: clamp(4px, 0.7vw, 10px);
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--broadcast-line-a) 52%, var(--broadcast-line-b) 48%));
}

body.broadcast-board-mode.broadcast-intro-scan .broadcast-laser-frame {
  opacity: 1;
  animation: broadcastFrameFade 1.9s ease-out 1 forwards;
}

body.broadcast-board-mode .broadcast-laser-frame::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22%;
  height: 3px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 22%, transparent 58%),
    linear-gradient(90deg, transparent, #fff, color-mix(in srgb, var(--broadcast-line-a) 55%, var(--broadcast-line-b) 45%), transparent);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 22px color-mix(in srgb, var(--broadcast-line-a) 55%, var(--broadcast-line-b) 45%),
    0 0 36px color-mix(in srgb, var(--broadcast-line-a) 35%, var(--broadcast-line-b) 65%);
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
}

body.broadcast-board-mode.broadcast-intro-scan .broadcast-laser-frame::before {
  display: block;
  animation: broadcastLaserLap 1.9s cubic-bezier(0.2, 0.78, 0.18, 1) 1 both;
}

body.broadcast-board-mode.broadcast-intro-scan .broadcast-laser-segment {
  display: none;
}

body.broadcast-board-mode .broadcast-laser-segment {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 20%, transparent 58%),
    linear-gradient(90deg, transparent, #fff, color-mix(in srgb, var(--broadcast-line-a) 55%, var(--broadcast-line-b) 45%), transparent);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 22px color-mix(in srgb, var(--broadcast-line-a) 55%, var(--broadcast-line-b) 45%),
    0 0 36px color-mix(in srgb, var(--broadcast-line-a) 35%, var(--broadcast-line-b) 65%);
}

body.broadcast-board-mode .broadcast-laser-segment.top,
body.broadcast-board-mode .broadcast-laser-segment.bottom {
  width: 24%;
  height: 3px;
}

body.broadcast-board-mode .broadcast-laser-segment.right,
body.broadcast-board-mode .broadcast-laser-segment.left {
  width: 3px;
  height: 24%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 20%, transparent 58%),
    linear-gradient(180deg, transparent, #fff, color-mix(in srgb, var(--broadcast-line-a) 55%, var(--broadcast-line-b) 45%), transparent);
}

body.broadcast-board-mode.broadcast-intro-scan .broadcast-laser-segment.top {
  animation: broadcastLaserTop 1.62s cubic-bezier(0.2, 0.78, 0.18, 1) 1 both;
}

body.broadcast-board-mode.broadcast-intro-scan .broadcast-laser-segment.right {
  animation: broadcastLaserRight 1.62s cubic-bezier(0.2, 0.78, 0.18, 1) 1 both;
}

body.broadcast-board-mode.broadcast-intro-scan .broadcast-laser-segment.bottom {
  animation: broadcastLaserBottom 1.62s cubic-bezier(0.2, 0.78, 0.18, 1) 1 both;
}

body.broadcast-board-mode.broadcast-intro-scan .broadcast-laser-segment.left {
  animation: broadcastLaserLeft 1.62s cubic-bezier(0.2, 0.78, 0.18, 1) 1 both;
}

@keyframes broadcastFrameFade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes broadcastLaserTop {
  0% { left: 0; top: 0; opacity: 0; transform: translate3d(-50%, 0, 0); }
  5%, 24% { opacity: 1; }
  25% { left: 100%; top: 0; opacity: 0; transform: translate3d(-50%, 0, 0); }
  100% { left: 100%; top: 0; opacity: 0; transform: translate3d(-50%, 0, 0); }
}

@keyframes broadcastLaserRight {
  0%, 24% { left: calc(100% - 3px); top: 0; opacity: 0; transform: translate3d(0, -50%, 0); }
  25%, 49% { opacity: 1; }
  50% { left: calc(100% - 3px); top: 100%; opacity: 0; transform: translate3d(0, -50%, 0); }
  100% { left: calc(100% - 3px); top: 100%; opacity: 0; transform: translate3d(0, -50%, 0); }
}

@keyframes broadcastLaserBottom {
  0%, 49% { left: 100%; top: calc(100% - 3px); opacity: 0; transform: translate3d(-50%, 0, 0); }
  50%, 74% { opacity: 1; }
  75% { left: 0; top: calc(100% - 3px); opacity: 0; transform: translate3d(-50%, 0, 0); }
  100% { left: 0; top: calc(100% - 3px); opacity: 0; transform: translate3d(-50%, 0, 0); }
}

@keyframes broadcastLaserLeft {
  0%, 74% { left: 0; top: 100%; opacity: 0; transform: translate3d(0, -50%, 0); }
  75%, 97% { opacity: 1; }
  100% { left: 0; top: 0; opacity: 0; transform: translate3d(0, -50%, 0); }
}

@keyframes broadcastLaserLap {
  0% {
    left: 0;
    top: 0;
    width: 22%;
    height: 3px;
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }
  7% {
    opacity: 1;
  }
  24% {
    left: 100%;
    top: 0;
    width: 22%;
    height: 3px;
    transform: translate3d(-50%, 0, 0);
  }
  25% {
    left: calc(100% - 3px);
    top: 0;
    width: 3px;
    height: 22%;
    transform: translate3d(0, -50%, 0);
  }
  49% {
    left: calc(100% - 3px);
    top: 100%;
    width: 3px;
    height: 22%;
    transform: translate3d(0, -50%, 0);
  }
  50% {
    left: 100%;
    top: calc(100% - 3px);
    width: 22%;
    height: 3px;
    transform: translate3d(-50%, 0, 0);
  }
  74% {
    left: 0;
    top: calc(100% - 3px);
    width: 22%;
    height: 3px;
    transform: translate3d(-50%, 0, 0);
  }
  75% {
    left: 0;
    top: 100%;
    width: 3px;
    height: 22%;
    transform: translate3d(0, -50%, 0);
  }
  99% {
    left: 0;
    top: 0;
    width: 3px;
    height: 22%;
    transform: translate3d(0, -50%, 0);
    opacity: 1;
  }
  100% {
    left: 0;
    top: 0;
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
}

body.broadcast-board-mode .field-stage,
body.broadcast-board-mode .field {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.broadcast-board-mode .field {
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--broadcast-line) 58%, transparent);
  background-image: var(--broadcast-field-background);
  background-size: var(--broadcast-field-background-size, auto);
  background-position: var(--broadcast-field-background-position, center);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--broadcast-line) 24%, transparent),
    inset 0 0 70px rgba(0, 0, 0, 0.36),
    inset 0 0 34px var(--broadcast-glow);
  overflow: visible !important;
}

body.broadcast-board-mode #field-1,
body.broadcast-board-mode #field-2 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
}

body.broadcast-board-mode,
body.broadcast-board-mode[data-broadcast-pitch-style='stripe'],
body.broadcast-board-mode .field-wrapper,
body.broadcast-board-mode[data-broadcast-pitch-style='stripe'] .field-wrapper,
body.tactics-board-mode:not(.broadcast-board-mode),
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='stripe'],
body.tactics-board-mode:not(.broadcast-board-mode) .field-wrapper,
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='stripe'] .field-wrapper {
  --broadcast-field-background:
    radial-gradient(circle at 50% 13%, color-mix(in srgb, var(--broadcast-team-accent) 34%, transparent), transparent 36%),
    linear-gradient(90deg, color-mix(in srgb, var(--broadcast-team-accent) 18%, transparent), transparent 42%),
    repeating-linear-gradient(
      var(--broadcast-stripe-angle, 90deg),
      color-mix(in srgb, var(--broadcast-pitch-a) 68%, var(--broadcast-team-accent)) 0%,
      color-mix(in srgb, var(--broadcast-pitch-a) 68%, var(--broadcast-team-accent)) 10%,
      color-mix(in srgb, var(--broadcast-pitch-b) 84%, black) 10%,
      color-mix(in srgb, var(--broadcast-pitch-b) 84%, black) 20%
    );
}

body.broadcast-board-mode.replay-hud-open,
body.broadcast-board-mode.replay-hud-open .field-wrapper {
  --broadcast-pitch-a: #26384a;
  --broadcast-pitch-b: #142131;
  --broadcast-field-background:
    radial-gradient(circle at 50% 13%, color-mix(in srgb, var(--broadcast-team-accent) 38%, transparent), transparent 36%),
    linear-gradient(90deg, color-mix(in srgb, var(--broadcast-team-accent) 24%, transparent), transparent 46%),
    repeating-linear-gradient(
      var(--broadcast-stripe-angle, 90deg),
      color-mix(in srgb, var(--broadcast-pitch-a) 66%, var(--broadcast-team-accent)) 0%,
      color-mix(in srgb, var(--broadcast-pitch-a) 66%, var(--broadcast-team-accent)) 10%,
      color-mix(in srgb, var(--broadcast-pitch-b) 84%, black) 10%,
      color-mix(in srgb, var(--broadcast-pitch-b) 84%, black) 20%
    );
}

body.broadcast-board-mode.replay-hud-open #field-wrapper-1 .field {
  background:
    radial-gradient(circle at 9% 50%, color-mix(in srgb, var(--broadcast-line-a) 34%, transparent), transparent 42%),
    linear-gradient(90deg, color-mix(in srgb, var(--broadcast-line-a) 20%, transparent), transparent 38%),
    var(--broadcast-field-background) !important;
}

body.broadcast-board-mode.replay-hud-open #field-wrapper-2 .field {
  background:
    radial-gradient(circle at 91% 50%, color-mix(in srgb, var(--broadcast-line-b) 34%, transparent), transparent 42%),
    linear-gradient(270deg, color-mix(in srgb, var(--broadcast-line-b) 20%, transparent), transparent 38%),
    var(--broadcast-field-background) !important;
}

body.broadcast-board-mode[data-broadcast-pitch-style='mosaic'],
body.broadcast-board-mode[data-broadcast-pitch-style='mosaic'] .field-wrapper,
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='mosaic'],
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='mosaic'] .field-wrapper {
  --broadcast-field-background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--broadcast-team-accent) 30%, transparent), transparent 34%),
    linear-gradient(90deg, color-mix(in srgb, var(--broadcast-team-accent) 18%, transparent), transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,0.025) 25%, transparent 25% 50%, rgba(0,0,0,0.13) 50% 75%, transparent 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--broadcast-pitch-a) 70%, var(--broadcast-team-accent)) 25%, color-mix(in srgb, var(--broadcast-pitch-b) 88%, black) 25% 50%, color-mix(in srgb, var(--broadcast-pitch-a) 64%, var(--broadcast-team-accent)) 50% 75%, color-mix(in srgb, var(--broadcast-pitch-b) 82%, black) 75%);
  --broadcast-field-background-size: auto, auto, 52px 52px, 104px 104px;
}

body.broadcast-board-mode[data-broadcast-pitch-style='wide-stripe'],
body.broadcast-board-mode[data-broadcast-pitch-style='wide-stripe'] .field-wrapper,
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='wide-stripe'],
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='wide-stripe'] .field-wrapper {
  --broadcast-field-background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--broadcast-team-accent) 32%, transparent), transparent 36%),
    linear-gradient(90deg, color-mix(in srgb, var(--broadcast-team-accent) 20%, transparent), transparent 44%),
    repeating-linear-gradient(
      var(--broadcast-stripe-angle, 90deg),
      color-mix(in srgb, var(--broadcast-pitch-a) 54%, var(--broadcast-team-accent)) 0%,
      color-mix(in srgb, var(--broadcast-pitch-a) 54%, var(--broadcast-team-accent)) 25%,
      color-mix(in srgb, var(--broadcast-pitch-b) 78%, black) 25%,
      color-mix(in srgb, var(--broadcast-pitch-b) 78%, black) 50%
    );
  --broadcast-field-background-size: auto, auto, auto;
  --broadcast-field-background-position: center;
}

body.broadcast-board-mode[data-broadcast-pitch-style='diagonal'],
body.broadcast-board-mode[data-broadcast-pitch-style='diagonal'] .field-wrapper,
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='diagonal'],
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='diagonal'] .field-wrapper {
  --broadcast-field-background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--broadcast-team-accent) 32%, transparent), transparent 35%),
    linear-gradient(90deg, color-mix(in srgb, var(--broadcast-team-accent) 18%, transparent), transparent 43%),
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--broadcast-pitch-a) 70%, var(--broadcast-team-accent)) 0 24px,
      color-mix(in srgb, var(--broadcast-pitch-b) 86%, black) 24px 48px
    );
}

body.broadcast-board-mode[data-broadcast-pitch-style='dark'],
body.broadcast-board-mode[data-broadcast-pitch-style='dark'] .field-wrapper,
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='dark'],
body.tactics-board-mode:not(.broadcast-board-mode)[data-broadcast-pitch-style='dark'] .field-wrapper {
  --broadcast-field-background:
    radial-gradient(circle at 50% 13%, color-mix(in srgb, var(--broadcast-team-accent) 28%, transparent), transparent 37%),
    linear-gradient(90deg, color-mix(in srgb, var(--broadcast-team-accent) 15%, transparent), transparent 45%),
    linear-gradient(180deg, #121716, #090c0c);
}

body.tactics-board-mode:not(.broadcast-board-mode) .field {
  background-image: var(--broadcast-field-background) !important;
  background-size: var(--broadcast-field-background-size, auto) !important;
  background-position: var(--broadcast-field-background-position, center) !important;
  background-blend-mode: normal !important;
}

body.tactics-board-mode:not(.broadcast-board-mode) .grass-layer {
  display: none !important;
}

body.broadcast-board-mode #field-wrapper-1 .field {
  border-right: 0;
  border-radius: 14px 0 0 14px;
}

body.broadcast-board-mode #field-wrapper-2 .field {
  border-left: 0;
  border-radius: 0 14px 14px 0;
}

body.broadcast-board-mode .field-lines {
  inset: 0 !important;
  border-radius: inherit;
  z-index: 2;
}

body.broadcast-board-mode .field-lines *,
body.broadcast-board-mode .outline,
body.broadcast-board-mode .penalty,
body.broadcast-board-mode .goal,
body.broadcast-board-mode .center-circle {
  border-color: var(--broadcast-line) !important;
}

body.broadcast-board-mode .grass-layer {
  display: none !important;
}

body.broadcast-board-mode .outline {
  inset: 0;
  border-width: 2px;
  border-radius: inherit;
  box-shadow:
    inset 0 0 10px color-mix(in srgb, var(--broadcast-line) 72%, transparent),
    inset 0 0 28px var(--broadcast-glow),
    0 0 18px var(--broadcast-glow);
}

body.broadcast-board-mode .center-line,
body.broadcast-board-mode .center-circle,
body.broadcast-board-mode .penalty,
body.broadcast-board-mode .goal {
  display: none;
}

body.broadcast-board-mode .penalty,
body.broadcast-board-mode .goal {
  box-shadow:
    0 0 8px color-mix(in srgb, var(--broadcast-line) 74%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--broadcast-line) 28%, transparent);
}

body.broadcast-board-mode #field-wrapper-1 .penalty.top,
body.broadcast-board-mode #field-wrapper-1 .goal.top,
body.broadcast-board-mode #field-wrapper-2 .penalty.bottom,
body.broadcast-board-mode #field-wrapper-2 .goal.bottom {
  display: block;
}

body.broadcast-board-mode #field-wrapper-1 .penalty.top,
body.broadcast-board-mode #field-wrapper-2 .penalty.bottom {
  width: 22%;
  height: 48%;
  top: 26%;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
}

body.broadcast-board-mode #field-wrapper-1 .penalty.top {
  left: 0;
  border-left: none;
}

body.broadcast-board-mode #field-wrapper-2 .penalty.bottom {
  right: 0;
  border-right: none;
}

body.broadcast-board-mode #field-wrapper-1 .goal.top,
body.broadcast-board-mode #field-wrapper-2 .goal.bottom {
  width: 3.5%;
  height: 24%;
  top: 38%;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  background: rgba(255, 255, 255, 0.03);
}

body.broadcast-board-mode #field-wrapper-1 .goal.top {
  left: 0;
  border-left: none;
}

body.broadcast-board-mode #field-wrapper-2 .goal.bottom {
  right: 0;
  border-right: none;
}

body.broadcast-board-mode[data-field-sport-mode='futsal'] .field-wrapper {
  aspect-ratio: auto;
}

body.broadcast-board-mode[data-field-sport-mode='futsal'] {
  --broadcast-field-ratio: 2; /* futsal 40m x 20m */
  --broadcast-portrait-ratio: 20 / 40;
}

@media (min-width: 901px) {
  body.broadcast-board-mode[data-field-sport-mode='futsal'] .player-slot.field-slot,
  body.broadcast-board-mode[data-field-sport-mode='futsal'] .tactics-player-chip {
    --broadcast-player-width: 76%;
    --broadcast-player-height: 60%;
    width: clamp(64px, 6vw, 98px) !important;
    height: clamp(84px, 7.9vw, 128px) !important;
  }
}

body.broadcast-board-mode[data-field-sport-mode='soccer8'] {
  --broadcast-field-ratio: 1.5441176471;
  --broadcast-portrait-ratio: 68 / 105;
}

body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-1 .penalty.top,
body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 .penalty.bottom {
  width: 16%;
  height: 52%;
  top: 24%;
  border-radius: 0 999px 999px 0;
}

body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 .penalty.bottom {
  border-radius: 999px 0 0 999px;
}

body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-1 :is(.penalty.bottom, .goal.bottom),
body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 :is(.penalty.top, .goal.top),
html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-1 :is(.penalty.bottom, .goal.bottom),
html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-2 :is(.penalty.top, .goal.top) {
  display: none !important;
}

body.broadcast-board-mode .field-label {
  top: 2.1%;
  left: auto;
  transform: none;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid color-mix(in srgb, var(--broadcast-line) 46%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  font-size: clamp(14px, 1.12vw, 19px);
  z-index: 20;
}

body.broadcast-board-mode #field-wrapper-1 .field-label {
  right: 4.2%;
  flex-direction: row;
}

body.broadcast-board-mode #field-wrapper-2 .field-label {
  left: 4.2%;
  flex-direction: row;
}

body.broadcast-board-mode .field-team-logo-ring {
  width: clamp(30px, 3.3vw, 48px) !important;
  height: clamp(30px, 3.3vw, 48px) !important;
  border-color: color-mix(in srgb, var(--broadcast-line) 70%, white) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

body.broadcast-board-mode .formation-label {
  top: auto;
  bottom: 1.9%;
  left: auto;
  right: 6%;
  transform: none;
  z-index: 12;
  color: #fff;
  font-size: clamp(14px, 1.18vw, 20px);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
  opacity: 0.96;
}

body.broadcast-board-mode #field-wrapper-1 .formation-label {
  left: 4.2%;
  right: auto;
}

body.broadcast-board-mode #field-wrapper-2 .formation-label {
  right: 4.2%;
}

body.broadcast-board-mode .player-slot.field-slot {
  --broadcast-player-left: 41%;
  --broadcast-player-bottom: 11px;
  --broadcast-player-width: 71%;
  --broadcast-player-height: 56%;
  --broadcast-name-bottom: 21px;
  --broadcast-mark-top: 30px;
  --broadcast-slot-translate-x: -50%;
  --broadcast-slot-translate-y: -50%;
  width: clamp(56px, 5.35vw, 86px) !important;
  height: clamp(74px, 7.15vw, 112px) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 24 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-box,
body.broadcast-board-mode .tactics-player-chip .player-box {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border-radius: 8px;
  clip-path: none !important;
  background: transparent !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player,
body.broadcast-board-mode .tactics-player-chip {
  --broadcast-player-left: 41%;
  --broadcast-player-bottom: 11px;
  --broadcast-player-width: 71%;
  --broadcast-player-height: 56%;
  --broadcast-name-bottom: 21px;
  --broadcast-mark-top: 30px;
  --broadcast-slot-translate-x: -50%;
  --broadcast-slot-translate-y: -50%;
  box-sizing: border-box !important;
  transform: translate(var(--broadcast-slot-translate-x), var(--broadcast-slot-translate-y)) !important;
}

body.broadcast-board-mode .player-slot.field-slot:not(.has-player) .slot-label {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: color-mix(in srgb, var(--broadcast-line) 72%, rgba(255, 255, 255, 0.68)) !important;
  font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
  font-size: clamp(19px, 2.08vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  opacity: 0.56 !important;
  text-shadow: none !important;
  z-index: 1 !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
body.broadcast-board-mode .tactics-player-chip .slot-label {
  color: color-mix(in srgb, var(--broadcast-chip) 86%, rgba(255, 255, 255, 0.58)) !important;
  text-shadow: none !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-img,
body.broadcast-board-mode .player-slot.field-slot.has-player img.player-img,
body.broadcast-board-mode .player-slot.field-slot.has-player .player-box > img,
body.broadcast-board-mode .tactics-player-chip .player-img,
body.broadcast-board-mode .tactics-player-chip img {
  position: absolute !important;
  left: var(--broadcast-player-left) !important;
  bottom: var(--broadcast-player-bottom) !important;
  width: var(--broadcast-player-width) !important;
  height: var(--broadcast-player-height) !important;
  transform: translateX(-50%) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  image-rendering: auto !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0);
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
    drop-shadow(0 5px 7px rgba(0, 0, 0, 0.5));
  z-index: 3 !important;
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-img,
body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player img.player-img,
body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-box > img,
body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout .player-img,
body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout img {
  height: auto !important;
  max-height: calc(var(--broadcast-player-height) * 1.42) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
body.broadcast-board-mode .tactics-player-chip .player-number {
  position: absolute !important;
  top: var(--broadcast-mark-top) !important;
  left: calc(41% + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.72em))) !important;
  right: auto;
  z-index: 1 !important;
  color: color-mix(in srgb, var(--broadcast-chip) 16%, rgba(255, 255, 255, 0.08));
  -webkit-text-stroke: 0.95px color-mix(in srgb, var(--broadcast-chip) 18%, rgba(255, 255, 255, 0.96));
  paint-order: stroke fill;
  font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
  font-size: clamp(20px, 2.5vw, 42px) !important;
  font-stretch: normal;
  font-weight: 500 !important;
  letter-spacing: -0.085em;
  line-height: 1;
  opacity: 0.96;
  text-shadow: none !important;
  transform: none;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty) {
  display: inline-flex !important;
  position: absolute !important;
  left: 70% !important;
  right: auto !important;
  --broadcast-name-width: clamp(56px, calc((var(--broadcast-name-ch, 4) * 0.9em) + 26px), 150px);
  bottom: var(--broadcast-name-bottom) !important;
  width: var(--broadcast-name-width) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-name-width) !important;
  height: 15px !important;
  transform: none !important;
  padding: 0 9px 0 6px !important;
  border-radius: 2px 0 0 2px;
  clip-path: none !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--fs-font-sans, 'FS Pretendard', sans-serif) !important;
  font-size: clamp(8.5px, 0.88vw, 11px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.56);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  box-shadow: none !important;
  isolation: isolate;
  z-index: 2 !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty)::before,
body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
  background: color-mix(in srgb, var(--broadcast-chip) 82%, #111);
  pointer-events: none;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty) {
    --broadcast-name-width: clamp(38px, calc((var(--broadcast-name-ch, 4) * 0.72em) + 16px), 92px);
    width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    padding: 0 6px 0 4px !important;
    clip-path: none !important;
  }
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-captain,
body.broadcast-board-mode .tactics-player-chip .player-captain {
  --broadcast-captain-size: 15px;
  --broadcast-captain-font: 9px;
  display: none !important;
  top: auto !important;
  left: calc(70% + var(--broadcast-name-width, clamp(44px, calc((var(--broadcast-name-ch, 4) * 0.58em) + 18px), 96px)) - 1px) !important;
  bottom: var(--broadcast-name-bottom) !important;
  width: var(--broadcast-captain-size) !important;
  min-width: var(--broadcast-captain-size) !important;
  max-width: var(--broadcast-captain-size) !important;
  height: var(--broadcast-captain-size) !important;
  min-height: var(--broadcast-captain-size) !important;
  max-height: var(--broadcast-captain-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--broadcast-chip) 72%, #111) !important;
  color: #fff !important;
  font-family: var(--fs-font-sans, 'FS Pretendard', sans-serif) !important;
  font-weight: 900 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-captain .player-captain,
body.broadcast-board-mode .player-slot.field-slot.has-player .player-box.has-captain .player-captain,
body.broadcast-board-mode .tactics-player-chip .player-box.has-captain .player-captain {
  display: flex !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-captain::after,
body.broadcast-board-mode .tactics-player-chip .player-captain::after {
  position: static !important;
  content: 'C';
  display: block !important;
  font-family: var(--fs-font-sans, 'FS Pretendard', sans-serif) !important;
  font-size: var(--broadcast-captain-font) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

body.broadcast-board-mode .field .player-slot.field-slot.has-player::before {
  display: none !important;
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-player-card.has-player .player-img,
body.broadcast-board-mode .player-slot.field-slot.broadcast-player-card.has-player img.player-img,
body.broadcast-board-mode .player-slot.field-slot.broadcast-player-card.has-player .player-box > img,
body.broadcast-board-mode .tactics-player-chip.broadcast-player-card .player-img,
body.broadcast-board-mode .tactics-player-chip.broadcast-player-card img {
  left: 50% !important;
  bottom: 15px !important;
  width: 78% !important;
  height: calc(100% - 17px) !important;
  transform: translateX(-50%) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, center center) !important;
  clip-path: inset(0 round 6px 6px 2px 2px) !important;
  border-radius: 6px 6px 2px 2px !important;
  background: color-mix(in srgb, var(--broadcast-chip) 22%, rgba(255, 255, 255, 0.14)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--broadcast-chip) 52%, rgba(255, 255, 255, 0.32)),
    0 6px 12px rgba(0, 0, 0, 0.36);
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-player-card,
body.broadcast-board-mode .tactics-player-chip.broadcast-player-card {
  transform: translate(-50%, -50%);
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-player-card.has-player .player-name:not(:empty),
body.broadcast-board-mode .tactics-player-chip.broadcast-player-card .player-name:not(:empty) {
  left: 50% !important;
  bottom: 1px !important;
  width: 78% !important;
  max-width: 78% !important;
  min-width: 0 !important;
  justify-content: center !important;
  transform: translateX(-50%) !important;
  padding: 0 4px !important;
  border-radius: 0 0 6px 6px !important;
  clip-path: none !important;
  background: color-mix(in srgb, var(--broadcast-chip) 82%, #111) !important;
  text-overflow: ellipsis !important;
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-hide-name.has-player .player-name,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-name .player-name,
body.broadcast-board-mode .player-box.broadcast-hide-name .player-name,
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .player-slot.field-slot.has-player .player-name,
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .tactics-player-chip .player-name {
  display: none !important;
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-hide-number.has-player .player-number,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-number .player-number,
body.broadcast-board-mode .player-box.broadcast-hide-number .player-number,
html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .tactics-player-chip .player-number {
  display: none !important;
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-hide-position .slot-label,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-position .slot-label,
body.broadcast-board-mode .player-box.broadcast-hide-position .slot-label {
  display: none !important;
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-hide-captain .player-captain,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-captain .player-captain,
body.broadcast-board-mode .player-box.broadcast-hide-captain .player-captain {
  display: none !important;
}

body.broadcast-board-mode .broadcast-no-name-smoothing .player-name {
  -webkit-font-smoothing: auto !important;
  text-rendering: auto !important;
}

body.broadcast-board-mode .player-slot.field-slot .slot-label,
body.broadcast-board-mode .tactics-player-chip .slot-label {
  display: block !important;
  position: absolute !important;
  top: var(--broadcast-mark-top);
  left: 41%;
  min-width: 2.4ch;
  text-align: center;
  transform: translateX(-50%);
  color: color-mix(in srgb, var(--broadcast-line) 88%, rgba(255, 255, 255, 0.18));
  -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.24);
  paint-order: stroke fill;
  font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
  font-size: clamp(20px, 2.5vw, 42px) !important;
  font-stretch: normal;
  font-weight: 500 !important;
  letter-spacing: -0.065em;
  line-height: 1;
  text-shadow: none !important;
  opacity: 0.72;
  z-index: 1 !important;
}

body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot.has-player .player-box,
body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot .slot-label {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.broadcast-board-mode .tactics-player-chip {
  --broadcast-player-left: 41%;
  --broadcast-player-bottom: 11px;
  --broadcast-player-width: 71%;
  --broadcast-player-height: 56%;
  --broadcast-name-bottom: 21px;
  --broadcast-mark-top: 30px;
  --broadcast-slot-translate-x: -50%;
  --broadcast-slot-translate-y: -50%;
  width: clamp(56px, 5.35vw, 86px) !important;
  height: clamp(74px, 7.15vw, 112px) !important;
  padding: 0 !important;
  border: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  overflow: visible;
  transform: translate(var(--broadcast-slot-translate-x), var(--broadcast-slot-translate-y)) !important;
}

body.broadcast-board-mode .sub-slot-container {
  display: none !important;
}

body.broadcast-board-mode .candidate-column {
  display: flex !important;
  flex-direction: column;
  order: 2;
  flex: 0 0 calc((min(100vw, 1580px) - 60px) / 2) !important;
  width: calc((min(100vw, 1580px) - 60px) / 2) !important;
  max-width: calc((min(100vw, 1580px) - 60px) / 2) !important;
  min-width: 0 !important;
  height: 244px;
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(15, 22, 31, 0.96);
  overflow-x: hidden;
  overflow-y: auto;
}

@media (min-width: 901px) {
  body.broadcast-board-mode #candidate-mobile {
    display: none !important;
  }
}

body.broadcast-board-mode #candidate-TEAM_A {
  order: 2;
}

body.broadcast-board-mode #candidate-TEAM_B {
  order: 3;
}

body.broadcast-board-mode .candidate-column.auto-team-layout {
  height: 244px;
  overflow-y: auto;
}

body.broadcast-board-mode .candidate-column.auto-team-layout .team-title,
body.broadcast-board-mode .team-title {
  height: 26px;
  min-height: 26px;
  border-radius: 9px;
  font-size: 12px;
}

body.broadcast-board-mode .candidate-column.auto-team-layout .team-box,
body.broadcast-board-mode .team-box {
  height: 94px;
  min-height: 94px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 5px !important;
  overflow-y: auto;
  overflow-x: hidden !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
}

.broadcast-mobile-back,
.broadcast-mobile-menu,
.broadcast-rail-logo {
  display: none;
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode .main-content::before {
    content: none !important;
    display: none !important;
  }

  body.broadcast-board-mode .center {
    width: 178vw;
    max-width: none;
    margin-left: 0;
    overflow: visible;
  }

  body.broadcast-board-mode .main-content {
    overflow-x: auto;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    grid-template-columns: 178vw;
  }

  body.broadcast-board-mode .candidate-column {
    display: none !important;
  }

  body.broadcast-board-mode #candidate-mobile {
    display: none !important;
  }
}

/* Desktop league drawers: use the side whitespace as full team panels, not old logo-only rails. */
@media (min-width: 901px) {
  body.broadcast-board-mode {
    --broadcast-desktop-rail-w: clamp(172px, 13vw, 226px);
    --broadcast-desktop-rail-gap: clamp(8px, 1vw, 16px);
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content,
  body.broadcast-board-mode.replay-hud-open .main-content {
    display: grid !important;
    grid-template-columns:
      var(--broadcast-desktop-rail-w)
      minmax(720px, var(--broadcast-fit-field-w, min(calc(100vw - 48px), 1540px)))
      var(--broadcast-desktop-rail-w) !important;
    gap: var(--broadcast-desktop-rail-gap) !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: clamp(10px, 1.2vw, 22px) !important;
    padding-right: clamp(10px, 1.2vw, 22px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center,
  body.broadcast-board-mode.replay-hud-open .center {
    order: initial !important;
    grid-column: 2 !important;
    width: min(
      var(--broadcast-fit-field-w, calc(100vw - (var(--broadcast-desktop-rail-w) * 2) - 44px)),
      calc(100vw - (var(--broadcast-desktop-rail-w) * 2) - (var(--broadcast-desktop-rail-gap) * 2) - 28px)
    ) !important;
    flex-basis: auto !important;
    max-width: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--broadcast-desktop-rail-w) !important;
    min-width: var(--broadcast-desktop-rail-w) !important;
    max-width: var(--broadcast-desktop-rail-w) !important;
    height: min(78vh, var(--broadcast-fit-field-h, 760px)) !important;
    min-height: 420px !important;
    max-height: min(820px, calc(100dvh - 96px)) !important;
    margin: 0 !important;
    padding: 8px !important;
    gap: 8px !important;
    align-self: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(191, 219, 254, 0.16) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.09), transparent 28%),
      linear-gradient(180deg, rgba(20, 31, 45, 0.92), rgba(8, 13, 22, 0.86)) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A {
    grid-column: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    grid-column: 3 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title {
    display: flex !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--team-accent-border, #60a5fa) 46%, rgba(255, 255, 255, 0.16)) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--team-accent-bg, #1d4ed8) 38%, transparent), rgba(255, 255, 255, 0.04)),
      rgba(8, 13, 22, 0.62) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title-label {
    display: block !important;
    padding: 0 20px 0 2px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-move-btn {
    display: grid !important;
    place-items: center !important;
    right: 6px !important;
    width: 17px !important;
    height: 20px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 68px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 82px !important;
    max-height: 180px !important;
    padding: 7px !important;
    gap: 6px !important;
    align-content: start !important;
    justify-content: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid color-mix(in srgb, var(--team-accent-border, #60a5fa) 24%, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--team-accent-bg, #1e3a8a) 16%, transparent), rgba(255, 255, 255, 0.02)),
      rgba(5, 10, 18, 0.46) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box > .team-logo-empty {
    display: none !important;
  }

}

/* Top team header order: team name | logo | center line | logo | team name. */
body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .field-label,
body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .field-label {
  top: max(8px, 2.1%) !important;
  gap: clamp(5px, 0.55vw, 8px) !important;
  align-items: center !important;
  padding: 5px 9px !important;
  z-index: 24 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .field-label {
  left: auto !important;
  right: clamp(8px, 1.35vw, 20px) !important;
  flex-direction: row !important;
}

body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .field-label {
  left: clamp(8px, 1.35vw, 20px) !important;
  right: auto !important;
  flex-direction: row !important;
}

body.broadcast-board-mode:not(.replay-hud-open) #fieldLabelA {
  order: 1 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .field-team-logo-ring {
  order: 2 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .field-team-logo-ring {
  order: 1 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) #fieldLabelB {
  order: 2 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) #fieldLabelA,
body.broadcast-board-mode:not(.replay-hud-open) #fieldLabelB {
  max-width: min(18vw, 210px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .center::before {
  z-index: 23 !important;
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode {
    overflow: hidden;
    --broadcast-side-rail: 0px;
  }

  body.broadcast-board-mode .main-nav,
  body.broadcast-board-mode #mobileQuickActions,
  body.broadcast-board-mode #candidate-mobile {
    display: none !important;
  }

  body.broadcast-board-mode #controlBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 320;
    max-height: 72dvh;
    margin: 0;
    padding: 9px 12px;
    border-radius: 0 0 14px 14px;
    overflow-y: auto;
    transform: translateY(calc(-100% - 10px));
    transition: transform 0.2s ease;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  }

  body.broadcast-board-mode.broadcast-mobile-controls-open #controlBar {
    transform: translateY(0);
  }

  body.broadcast-board-mode .broadcast-mobile-back,
  body.broadcast-board-mode .broadcast-mobile-menu {
    display: grid;
    place-items: center;
    position: fixed;
    top: max(4px, env(safe-area-inset-top));
    z-index: 340;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 900;
    line-height: 1;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.78),
      0 0 12px rgba(255, 255, 255, 0.28);
    -webkit-tap-highlight-color: transparent;
  }

  body.broadcast-board-mode .broadcast-mobile-back {
    left: max(5px, env(safe-area-inset-left));
    font-size: 34px;
  }

  body.broadcast-board-mode .broadcast-mobile-menu {
    right: max(5px, env(safe-area-inset-right));
    font-size: 23px;
  }

  body.broadcast-board-mode .main-content {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0 4px !important;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    gap: 0;
  }

  body.broadcast-board-mode .center {
    flex: 0 1 auto !important;
    width: calc(100vw - 8px);
    height: min(
      calc((100vw - 8px) / var(--broadcast-field-ratio)),
      calc(100dvh - 4px)
    );
    max-width: none;
    max-height: calc(100dvh - 4px);
    min-width: 0;
    margin: 0 auto;
    padding: 3px;
    border-radius: 12px;
    overflow: visible;
  }

  body.broadcast-board-mode .candidate-column {
    display: flex !important;
    position: fixed;
    top: 38px;
    bottom: 5px;
    z-index: 160;
    width: var(--broadcast-side-rail) !important;
    max-width: var(--broadcast-side-rail) !important;
    min-width: 0 !important;
    height: auto !important;
    flex: none !important;
    margin: 0;
    padding: 2px 3px;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    overflow-x: visible;
    overflow-y: auto;
    scrollbar-width: none;
  }

  body.broadcast-board-mode .candidate-column::-webkit-scrollbar {
    display: none;
  }

  body.broadcast-board-mode #candidate-TEAM_A {
    left: max(2px, env(safe-area-inset-left));
  }

  body.broadcast-board-mode #candidate-TEAM_B {
    right: max(2px, env(safe-area-inset-right));
  }

  body.broadcast-board-mode .candidate-column.auto-team-layout .team-title,
  body.broadcast-board-mode .team-title {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none;
  }

  body.broadcast-board-mode .team-title-label,
  body.broadcast-board-mode .team-move-btn {
    display: none !important;
  }

  body.broadcast-board-mode .broadcast-rail-logo {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74) 58%, rgba(25, 35, 48, 0.72));
    box-shadow:
      0 3px 12px rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    cursor: pointer;
  }

  body.broadcast-board-mode .broadcast-rail-logo-text {
    font-size: 11px;
    font-weight: 900;
    color: #102035;
  }

  body.broadcast-board-mode .candidate-column.auto-team-layout .team-box,
  body.broadcast-board-mode .team-box {
    display: none !important;
  }

  body.broadcast-board-mode .team-box.is-broadcast-rail-open {
    display: flex !important;
    position: fixed;
    left: 50%;
    bottom: max(5px, env(safe-area-inset-bottom));
    z-index: 300;
    width: min(78vw, 540px);
    height: 82px;
    min-height: 82px !important;
    max-height: 82px;
    padding: 6px 8px !important;
    border: 1px solid rgba(145, 190, 255, 0.38);
    border-radius: 13px;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
      rgba(11, 17, 27, 0.96) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.44);
    transform: translateX(-50%);
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }

  body.broadcast-board-mode .field-label {
    top: 3%;
    padding: 4px 7px;
    font-size: 11px;
  }

  body.broadcast-board-mode .field-team-logo-ring {
    width: clamp(28px, 5.4vh, 40px) !important;
    height: clamp(28px, 5.4vh, 40px) !important;
  }

  body.broadcast-board-mode .formation-label {
    bottom: 3.2%;
    font-size: clamp(18px, 7.8vh, 38px);
  }
}

@media (max-width: 768px) {
  body.broadcast-board-mode .player-slot.field-slot {
    width: 46px !important;
    height: 62px !important;
  }

  body.broadcast-board-mode .field-label {
    top: 2%;
    padding: 4px 7px;
    gap: 5px;
    font-size: 11px;
  }

  body.broadcast-board-mode .field-team-logo-ring {
    width: 28px !important;
    height: 28px !important;
  }

  body.broadcast-board-mode .formation-label {
    bottom: 1.4%;
    font-size: 11px;
  }
}
/* Broadcast option2 final rail overrides */
body.broadcast-board-mode .main-content {
  position: relative;
  padding-left: 62px !important;
  padding-right: 62px !important;
}

body.broadcast-board-mode .center {
  flex-basis: var(--broadcast-fit-field-w, min(calc(100vw - 132px), 1580px)) !important;
  width: var(--broadcast-fit-field-w, min(calc(100vw - 132px), 1580px)) !important;
  height: var(--broadcast-fit-field-h, auto) !important;
  max-height: var(--broadcast-fit-h, min(78vh, calc((100vw - 132px) / var(--broadcast-board-ratio, var(--broadcast-field-ratio))))) !important;
  aspect-ratio: var(--broadcast-board-ratio, var(--broadcast-field-ratio)) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
}

body.broadcast-board-mode .center > .field-wrapper {
  flex: 0 0 var(--broadcast-fit-half-w, 50%) !important;
  width: var(--broadcast-fit-half-w, 50%) !important;
  min-width: var(--broadcast-fit-half-w, 0px) !important;
  max-width: var(--broadcast-fit-half-w, 50%) !important;
  height: 100% !important;
  display: block !important;
  align-items: stretch !important;
  overflow: visible !important;
}

body.broadcast-board-mode .candidate-column {
  display: flex !important;
  position: fixed !important;
  top: 22vh !important;
  bottom: 22vh !important;
  z-index: 250 !important;
  width: clamp(54px, 5vw, 72px) !important;
  max-width: clamp(54px, 5vw, 72px) !important;
  min-width: clamp(54px, 5vw, 72px) !important;
  height: auto !important;
  flex: none !important;
  margin: 0 !important;
  padding: 4px !important;
  gap: 8px !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}

body.broadcast-board-mode .candidate-column::-webkit-scrollbar {
  display: none;
}

body.broadcast-board-mode #candidate-TEAM_A {
  left: max(3px, calc((62px - clamp(54px, 5vw, 72px)) / 2), env(safe-area-inset-left)) !important;
  align-items: center !important;
}

body.broadcast-board-mode #candidate-TEAM_B {
  right: max(3px, calc((62px - clamp(54px, 5vw, 72px)) / 2), env(safe-area-inset-right)) !important;
  align-items: center !important;
}

body.broadcast-board-mode .candidate-column.auto-team-layout .team-title,
body.broadcast-board-mode .team-title {
  display: grid !important;
  place-items: center !important;
  width: clamp(46px, 4.2vw, 58px) !important;
  height: clamp(46px, 4.2vw, 58px) !important;
  min-height: clamp(46px, 4.2vw, 58px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.broadcast-board-mode .team-title-label,
body.broadcast-board-mode .team-move-btn {
  display: none !important;
}

body.broadcast-board-mode .broadcast-rail-logo {
  display: grid !important;
  place-items: center !important;
  width: clamp(44px, 4vw, 56px) !important;
  height: clamp(44px, 4vw, 56px) !important;
  padding: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72) 62%, rgba(25, 35, 48, 0.72)) !important;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32) !important;
  cursor: pointer !important;
}

body.broadcast-board-mode .team-box {
  display: none !important;
}

body.broadcast-board-mode .candidate-column > .team-box:not(.is-broadcast-rail-open) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.broadcast-board-mode .candidate-column > .team-box:not(.is-broadcast-rail-open) * {
  display: none !important;
  visibility: hidden !important;
}

body.broadcast-board-mode .candidate-column > .player-slot,
body.broadcast-board-mode .candidate-column > .player-box {
  display: none !important;
}

body.broadcast-board-mode .team-box.is-broadcast-rail-open {
  display: grid !important;
  position: fixed !important;
  top: 25vh !important;
  bottom: auto !important;
  z-index: 310 !important;
  width: clamp(162px, 12vw, 196px) !important;
  height: 50vh !important;
  min-height: 260px !important;
  max-height: 50vh !important;
  padding: 10px !important;
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  border: 1px solid rgba(145, 190, 255, 0.38) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
    rgba(11, 17, 27, 0.96) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-content: flex-start !important;
  justify-content: stretch !important;
  transform: translateX(0) !important;
  will-change: transform, opacity;
}

body.broadcast-board-mode #candidate-TEAM_A .team-box.is-broadcast-rail-open {
  left: calc(max(4px, env(safe-area-inset-left)) + 76px) !important;
  animation: broadcastDrawerInLeft 0.24s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

body.broadcast-board-mode #candidate-TEAM_B .team-box.is-broadcast-rail-open {
  right: calc(max(4px, env(safe-area-inset-right)) + 76px) !important;
  animation: broadcastDrawerInRight 0.24s cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

@keyframes broadcastDrawerInLeft {
  from {
    opacity: 0.96;
    transform: translateX(calc(-100vw - 100%));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes broadcastDrawerInRight {
  from {
    opacity: 0.96;
    transform: translateX(calc(100vw + 100%));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

body.broadcast-board-mode .broadcast-team-drawer-actions {
  display: grid !important;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 2px 0 4px;
  box-sizing: border-box;
}

body.broadcast-board-mode .broadcast-team-drawer-actions [data-broadcast-return-all] {
  grid-column: span 2;
}

body.broadcast-board-mode .broadcast-team-drawer-actions label,
body.broadcast-board-mode .broadcast-team-drawer-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(177, 210, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

body.broadcast-board-mode .broadcast-team-drawer-actions [data-broadcast-target-field="1"] {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(37, 99, 235, 0.18);
}

body.broadcast-board-mode .broadcast-team-drawer-actions [data-broadcast-target-field="2"] {
  border-color: rgba(251, 146, 60, 0.52);
  background: rgba(234, 88, 12, 0.18);
}

body.broadcast-board-mode .broadcast-team-drawer-actions [data-broadcast-return-all] {
  border-color: rgba(148, 163, 184, 0.48);
  background: rgba(15, 23, 42, 0.42);
}

body.broadcast-board-mode .broadcast-team-drawer-actions button {
  cursor: pointer;
}

body.broadcast-board-mode .broadcast-team-drawer-actions button:hover {
  background: rgba(255, 255, 255, 0.16);
}

body.broadcast-board-mode .broadcast-team-drawer-actions input {
  width: 13px;
  height: 13px;
  margin: 0 4px 0 0;
}

body.broadcast-board-mode .team-box.is-broadcast-rail-open .player-slot.broadcast-pickable-slot {
  overflow: visible !important;
}

body.broadcast-board-mode .broadcast-player-pick {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(5, 13, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.32);
}

body.broadcast-board-mode .broadcast-player-pick input {
  width: 11px;
  height: 11px;
  margin: 0;
  accent-color: #38bdf8;
}

.broadcast-move-dialog {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.34);
  backdrop-filter: blur(3px);
}

.broadcast-move-dialog-panel {
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid rgba(191, 219, 254, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    rgba(12, 18, 29, 0.96);
  color: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
}

.broadcast-move-dialog-title {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.broadcast-move-dialog-desc {
  margin-top: 5px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 12px;
  font-weight: 700;
}

.broadcast-move-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 14px;
}

.broadcast-move-dialog-actions button {
  height: 34px;
  border: 1px solid rgba(191, 219, 254, 0.36);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.broadcast-move-dialog-actions [data-broadcast-dialog-field="2"] {
  background: rgba(249, 115, 22, 0.2);
}

.broadcast-move-dialog-actions [data-broadcast-dialog-close] {
  padding: 0 12px;
  background: rgba(148, 163, 184, 0.14);
}

@media (max-width: 900px) {
  body.broadcast-board-mode .main-content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.broadcast-board-mode .center {
    width: calc(100vw - 8px) !important;
    flex-basis: calc(100vw - 8px) !important;
    max-height: calc(100dvh - 4px) !important;
  }

  body.broadcast-board-mode .candidate-column {
    top: max(20vh, calc(env(safe-area-inset-top) + 44px)) !important;
    bottom: max(16vh, env(safe-area-inset-bottom)) !important;
    width: var(--broadcast-side-rail, 46px) !important;
    max-width: var(--broadcast-side-rail, 46px) !important;
    min-width: var(--broadcast-side-rail, 46px) !important;
    padding: 2px 0 !important;
    align-items: center !important;
  }

  body.broadcast-board-mode .candidate-column.auto-team-layout .team-title,
  body.broadcast-board-mode .team-title,
  body.broadcast-board-mode .broadcast-rail-logo {
    width: min(calc(var(--broadcast-side-rail, 46px) - 10px), 46px) !important;
    height: min(calc(var(--broadcast-side-rail, 46px) - 10px), 46px) !important;
    min-height: min(calc(var(--broadcast-side-rail, 46px) - 10px), 46px) !important;
  }

  body.broadcast-board-mode .team-box.is-broadcast-rail-open {
    top: 25vh !important;
    bottom: auto !important;
    width: min(36vw, 188px) !important;
    height: 50vh !important;
    min-height: 180px !important;
    max-height: 50vh !important;
    padding: 7px !important;
    transform: translateX(0) !important;
  }

  body.broadcast-board-mode #candidate-TEAM_A .team-box.is-broadcast-rail-open {
    left: calc(max(0px, env(safe-area-inset-left)) + var(--broadcast-side-rail, 46px)) !important;
  }

  body.broadcast-board-mode #candidate-TEAM_B .team-box.is-broadcast-rail-open {
    right: calc(max(0px, env(safe-area-inset-right)) + var(--broadcast-side-rail, 46px)) !important;
  }

  body.broadcast-board-mode .broadcast-team-drawer-actions {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
  }

  body.broadcast-board-mode .broadcast-team-drawer-actions label,
  body.broadcast-board-mode .broadcast-team-drawer-actions button {
    height: 24px;
    font-size: 10px;
  }
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 560px) {
  body.broadcast-board-mode {
    --broadcast-side-rail: 0px;
  }

  body.broadcast-board-mode .main-nav,
  body.broadcast-board-mode #controlBar {
    display: none !important;
  }

  body.broadcast-board-mode.broadcast-mobile-controls-open #controlBar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 330 !important;
    max-height: 72dvh !important;
    padding: 9px 12px !important;
    border-radius: 0 0 14px 14px !important;
    overflow-y: auto !important;
  }

  body.broadcast-board-mode .broadcast-mobile-back,
  body.broadcast-board-mode .broadcast-mobile-menu {
    display: grid !important;
    place-items: center !important;
    position: fixed !important;
    top: max(4px, env(safe-area-inset-top)) !important;
    z-index: 340 !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.96) !important;
    font-weight: 900 !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.78),
      0 0 12px rgba(255, 255, 255, 0.28) !important;
  }

  body.broadcast-board-mode .broadcast-mobile-back {
    left: max(5px, env(safe-area-inset-left)) !important;
    font-size: 34px !important;
  }

  body.broadcast-board-mode .broadcast-mobile-menu {
    right: max(5px, env(safe-area-inset-right)) !important;
    font-size: 23px !important;
  }

  body.broadcast-board-mode .main-content {
    min-height: 100dvh !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 4px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode .center {
    width: var(--broadcast-fit-field-w, calc(100vw - 8px)) !important;
    flex-basis: var(--broadcast-fit-field-w, calc(100vw - 8px)) !important;
    height: var(--broadcast-fit-field-h, calc(100dvh - 4px)) !important;
    max-height: var(--broadcast-fit-h, 100dvh) !important;
    aspect-ratio: var(--broadcast-board-ratio, var(--broadcast-field-ratio)) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 3px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  body.broadcast-board-mode .candidate-column {
    top: max(20dvh, calc(env(safe-area-inset-top) + 34px)) !important;
    bottom: max(16dvh, env(safe-area-inset-bottom)) !important;
    width: var(--broadcast-side-rail) !important;
    max-width: var(--broadcast-side-rail) !important;
    min-width: var(--broadcast-side-rail) !important;
    padding: 3px !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode .candidate-column .team-title,
  body.broadcast-board-mode .candidate-column .broadcast-rail-logo,
  body.broadcast-board-mode .team-box.is-broadcast-rail-open {
    pointer-events: auto !important;
  }

  body.broadcast-board-mode .candidate-column.auto-team-layout .team-title,
  body.broadcast-board-mode .team-title,
  body.broadcast-board-mode .broadcast-rail-logo {
    width: min(calc(var(--broadcast-side-rail) - 12px), 58px) !important;
    height: min(calc(var(--broadcast-side-rail) - 12px), 58px) !important;
    min-height: min(calc(var(--broadcast-side-rail) - 12px), 58px) !important;
  }

  body.broadcast-board-mode .team-box.is-broadcast-rail-open {
    top: 25vh !important;
    bottom: auto !important;
    width: min(28vw, 188px) !important;
    height: 50vh !important;
    min-height: 170px !important;
    max-height: 50vh !important;
    padding: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(0) !important;
  }

  body.broadcast-board-mode #candidate-TEAM_A .team-box.is-broadcast-rail-open {
    left: calc(max(0px, env(safe-area-inset-left)) + var(--broadcast-side-rail)) !important;
    right: auto !important;
  }

  body.broadcast-board-mode #candidate-TEAM_B .team-box.is-broadcast-rail-open {
    right: calc(max(0px, env(safe-area-inset-right)) + var(--broadcast-side-rail)) !important;
    left: auto !important;
  }
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 560px) {
  body.broadcast-board-mode .candidate-column > .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode .candidate-column .team-box.is-broadcast-rail-open {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 25dvh !important;
    bottom: auto !important;
    width: min(28vw, 188px) !important;
    height: 50dvh !important;
    min-height: 168px !important;
    max-height: 50dvh !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 5px !important;
    z-index: 360 !important;
    padding: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.broadcast-board-mode #candidate-TEAM_A > .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode #candidate-TEAM_A .team-box.is-broadcast-rail-open {
    left: calc(max(0px, env(safe-area-inset-left)) + var(--broadcast-side-rail, 52px)) !important;
    right: auto !important;
  }

  body.broadcast-board-mode #candidate-TEAM_B > .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode #candidate-TEAM_B .team-box.is-broadcast-rail-open {
    right: calc(max(0px, env(safe-area-inset-right)) + var(--broadcast-side-rail, 52px)) !important;
    left: auto !important;
  }

}

/* Broadcast option2 rail/layout final locks */
body.broadcast-board-mode #field-wrapper-1 .field-label,
body.broadcast-board-mode #field-wrapper-2 .field-label {
  flex-direction: row !important;
}

body.broadcast-board-mode .candidate-column {
  top: 22vh !important;
  bottom: 22vh !important;
  justify-content: center !important;
}

body.broadcast-board-mode .candidate-column > .team-box.is-broadcast-rail-open,
body.broadcast-board-mode .candidate-column .team-box.is-broadcast-rail-open,
body.broadcast-board-mode .team-box.is-broadcast-rail-open {
  width: clamp(162px, 12vw, 196px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.broadcast-board-mode .team-box.is-broadcast-rail-open .player-slot,
body.broadcast-board-mode .candidate-column .team-box.is-broadcast-rail-open .player-slot {
  grid-column: auto !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .candidate-column {
    top: max(20vh, calc(env(safe-area-inset-top) + 44px)) !important;
    bottom: max(16vh, env(safe-area-inset-bottom)) !important;
  }

  body.broadcast-board-mode .candidate-column > .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode .candidate-column .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode .team-box.is-broadcast-rail-open {
    width: min(36vw, 188px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 560px) {
  body.broadcast-board-mode .candidate-column {
    top: max(20dvh, calc(env(safe-area-inset-top) + 34px)) !important;
    bottom: max(16dvh, env(safe-area-inset-bottom)) !important;
  }

  body.broadcast-board-mode .candidate-column > .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode .candidate-column .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode .team-box.is-broadcast-rail-open {
    width: min(28vw, 188px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Replay mobile chrome: the field becomes the broadcast surface. */
body.replay-entry-prime:not(.replay-hud-open) {
  background: #090d13 !important;
}

body.replay-entry-prime:not(.replay-hud-open) #controlBar,
body.replay-entry-prime:not(.replay-hud-open) .main-content {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #candidate-mobile,
body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #candidate-mobile .mobile-team-box,
body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  body.replay-entry-prime #mobileQuickActions,
  body.replay-entry-prime #mobileOptionsBtn,
  body.replay-entry-prime #mobileOptionsPopup,
  body.replay-hud-open #mobileQuickActions,
  body.replay-hud-open #mobileOptionsBtn,
  body.replay-hud-open #mobileOptionsPopup {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-label,
  body.broadcast-board-mode.replay-hud-open .field-team-logo-ring,
  body.broadcast-board-mode.replay-hud-open .field-team-logo {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column .team-title,
  body.broadcast-board-mode.replay-hud-open .candidate-column .broadcast-rail-logo {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column {
    pointer-events: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column > .team-box,
  body.broadcast-board-mode.replay-hud-open .candidate-column .team-box {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid rgba(191, 219, 254, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(7, 13, 24, 0.72) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
    scrollbar-width: none;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column .team-box .player-redcard-badge,
  body.broadcast-board-mode.replay-hud-open .candidate-column .team-box .player-redcard-badge[data-visible="false"] {
    display: none !important;
    visibility: hidden !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column .team-box .player-redcard-badge[data-visible="true"] {
    display: flex !important;
    visibility: visible !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column > .team-box::-webkit-scrollbar,
  body.broadcast-board-mode.replay-hud-open .candidate-column .team-box::-webkit-scrollbar {
    display: none;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    top: max(3px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(520px, calc(100vw - 104px)) !important;
    min-width: min(280px, calc(100vw - 104px)) !important;
    min-height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: 18px 28px !important;
    gap: 6px !important;
    min-height: 52px !important;
    padding: 0 !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-left: 0 !important;
    align-self: start !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-score-slot {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-actions {
    grid-column: 3 !important;
    grid-row: 2 !important;
    gap: 3px !important;
    align-self: start !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    background: rgba(8, 13, 22, 0.78) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 6px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info .er-ico,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info .er-sub {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info .er-meta,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info .er-text {
    display: inline !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    height: 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.28),
      0 3px 10px rgba(0, 0, 0, 0.32) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress > div {
    min-width: 4px !important;
    border-radius: inherit !important;
  }

  body.broadcast-board-mode.replay-hud-open .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .tactics-player-chip {
    --broadcast-player-bottom: 9px;
    --broadcast-name-bottom: 22px;
    --broadcast-mark-top: 18px;
    --broadcast-name-width: clamp(30px, calc((var(--broadcast-name-ch, 4) * 0.62em) + 12px), 68px);
  }

  body.broadcast-board-mode.replay-hud-open .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .tactics-player-chip .slot-label {
    display: block !important;
    position: absolute !important;
    top: var(--broadcast-mark-top) !important;
    left: calc(var(--broadcast-player-left, 41%) - 12px) !important;
    z-index: 2 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: clamp(8px, 1.85vw, 11px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.84) !important;
  }

  body.broadcast-board-mode.replay-hud-open .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    font-size: clamp(14px, 3.3vw, 24px) !important;
    letter-spacing: -0.06em !important;
  }

  body.broadcast-board-mode.replay-hud-open .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .tactics-player-chip .player-name:not(:empty) {
    width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    height: 13px !important;
    padding: 0 6px 0 4px !important;
    font-size: clamp(7.5px, 1.8vw, 10px) !important;
    line-height: 13px !important;
    clip-path: none !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.replay-hud-open .main-nav {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column {
    top: 14dvh !important;
    bottom: 10dvh !important;
    width: var(--broadcast-side-rail, 60px) !important;
    min-width: var(--broadcast-side-rail, 60px) !important;
    max-width: var(--broadcast-side-rail, 60px) !important;
    padding: 2px !important;
    gap: 6px !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column > .team-box,
  body.broadcast-board-mode.replay-hud-open .candidate-column .team-box {
    flex-direction: column !important;
    width: calc(var(--broadcast-side-rail, 60px) - 8px) !important;
    max-width: calc(var(--broadcast-side-rail, 60px) - 8px) !important;
    min-height: 76px !important;
    max-height: 76dvh !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open .main-content {
    min-height: 100dvh !important;
    height: 100dvh !important;
    padding: 56px 8px 8px !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    scroll-snap-type: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .candidate-column {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .center {
    flex: 0 0 auto !important;
    width: min(calc(100vw - 16px), 520px) !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 72px) !important;
    aspect-ratio: var(--broadcast-portrait-ratio, 68 / 105) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body.broadcast-board-mode.replay-hud-open .center::before {
    top: 50% !important;
    bottom: auto !important;
    left: clamp(8px, 1.2vw, 14px) !important;
    right: clamp(8px, 1.2vw, 14px) !important;
    width: auto !important;
    height: 1px !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(90deg, transparent, var(--broadcast-midline), transparent) !important;
  }

  body.broadcast-board-mode.replay-hud-open .center::after {
    width: min(44.8%, 170px) !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-1,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 {
    flex: 0 0 50% !important;
    width: 100% !important;
    height: 50% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: 50% !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-1 .field {
    border-radius: 14px 14px 0 0 !important;
    border-right: 1px solid var(--broadcast-line-a) !important;
    border-bottom: 0 !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 .field {
    border-radius: 0 0 14px 14px !important;
    border-left: 1px solid var(--broadcast-line-b) !important;
    border-top: 0 !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-1 .penalty.top,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 .penalty.bottom {
    width: 54% !important;
    height: 22% !important;
    left: 23% !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    border-left: 1px solid var(--broadcast-line) !important;
    border-right: 1px solid var(--broadcast-line) !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-1 .penalty.top {
    border-top: 0 !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 .penalty.bottom {
    top: auto !important;
    bottom: 0 !important;
    border-bottom: 0 !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-1 .goal.top,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 .goal.bottom {
    width: 24% !important;
    height: 3.5% !important;
    left: 38% !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    border-left: 1px solid var(--broadcast-line) !important;
    border-right: 1px solid var(--broadcast-line) !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 .goal.bottom {
    top: auto !important;
    bottom: 0 !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-label {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .formation-label {
    left: 4.2% !important;
    right: auto !important;
    font-size: clamp(13px, 5vw, 18px) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    top: calc(57px + env(safe-area-inset-top)) !important;
    width: min(340px, calc(100vw - 48px)) !important;
    min-width: min(280px, calc(100vw - 48px)) !important;
  }
}

/* Replay HUD and bench placement are shared by desktop, tablet, and mobile. */
body.broadcast-board-mode.replay-hud-open .field-label,
body.broadcast-board-mode.replay-hud-open .field-team-logo-ring,
body.broadcast-board-mode.replay-hud-open .field-team-logo {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
  top: var(--er-hud-top, 66px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(430px, calc(100vw - 32px)) !important;
  min-width: min(300px, calc(100vw - 32px)) !important;
  min-height: 42px !important;
  padding: 5px 10px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(255, 122, 58, 0.16), transparent 35%, rgba(91, 145, 255, 0.16)),
    rgba(8, 13, 22, 0.70) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(118%) !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 6px !important;
  min-height: 28px !important;
  align-items: center !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-score-slot {
  display: flex !important;
  min-width: 0 !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info {
  display: none !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: auto !important;
  bottom: 3px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress > div {
  min-width: 4px !important;
  border-radius: inherit !important;
}

body.broadcast-board-mode.replay-hud-open .candidate-column .team-title,
body.broadcast-board-mode.replay-hud-open .candidate-column .broadcast-rail-logo,
body.broadcast-board-mode.replay-hud-open #candidate-mobile .mobile-team-title,
body.broadcast-board-mode.replay-hud-open #candidate-mobile .mobile-team-title * {
  display: none !important;
  visibility: hidden !important;
}

body.broadcast-board-mode.replay-hud-open .candidate-column {
  pointer-events: none !important;
}

body.broadcast-board-mode.replay-hud-open .candidate-column > .team-box,
body.broadcast-board-mode.replay-hud-open .candidate-column > .team-box:not(.is-broadcast-rail-open),
body.broadcast-board-mode.replay-hud-open .candidate-column .team-box,
body.broadcast-board-mode.replay-hud-open #candidate-mobile .mobile-team-box {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
  pointer-events: auto !important;
}

body.broadcast-board-mode.replay-hud-open .candidate-column > .team-box:not(.is-broadcast-rail-open) *,
body.broadcast-board-mode.replay-hud-open .candidate-column .team-box * {
  visibility: visible !important;
}

body.broadcast-board-mode.replay-hud-open .candidate-column .player-slot:not(.has-player),
body.broadcast-board-mode.replay-hud-open #candidate-mobile .player-slot:not(.has-player),
body.broadcast-board-mode.replay-hud-open .candidate-column .player-slot.has-player:not(.is-replay-sub-in),
body.broadcast-board-mode.replay-hud-open #candidate-mobile .player-slot.has-player:not(.is-replay-sub-in) {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    width: min(430px, calc(100vw - 32px)) !important;
    min-width: min(290px, calc(100vw - 32px)) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    grid-template-rows: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-left,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-actions,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-score-slot {
    grid-row: auto !important;
    grid-column: auto !important;
    align-self: center !important;
  }

}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    top: max(4px, env(safe-area-inset-top)) !important;
    width: min(430px, calc(100vw - 96px)) !important;
    min-width: min(300px, calc(100vw - 96px)) !important;
    min-height: 32px !important;
    padding: 3px 8px 6px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(90deg, rgba(255, 122, 58, 0.12), transparent 35%, rgba(91, 145, 255, 0.12)),
      rgba(8, 13, 22, 0.58) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    min-height: 24px !important;
    gap: 4px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
    width: 24px !important;
    height: 24px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 9px !important;
    right: 9px !important;
    bottom: 2px !important;
    height: 3px !important;
  }
}




/* Replay-only substitution pair rails: show the real sub-in/sub-out players, not old team boxes. */
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container {
  display: flex !important;
  visibility: visible !important;
  position: fixed !important;
  z-index: 275 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container::before,
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container::after {
  display: none !important;
}

body.broadcast-board-mode.replay-hud-open #sub-container-1 {
  left: max(8px, env(safe-area-inset-left)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

body.broadcast-board-mode.replay-hud-open #sub-container-2 {
  right: max(8px, env(safe-area-inset-right)) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.sub:not(.has-player),
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.sub.has-player:not(.is-replay-sub-in) {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    min-height: 28px !important;
    padding: 2px 7px 5px !important;
    border-radius: 12px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    min-height: 21px !important;
    gap: 4px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
    width: 21px !important;
    height: 21px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 8px !important;
    right: 8px !important;
    bottom: 2px !important;
    height: 2px !important;
  }

  body.broadcast-board-mode.replay-hud-open #sub-container-1 {
    left: max(4px, env(safe-area-inset-left)) !important;
    top: calc(40px + env(safe-area-inset-top)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    justify-content: flex-start !important;
  }

  body.broadcast-board-mode.replay-hud-open #sub-container-2 {
    right: max(4px, env(safe-area-inset-right)) !important;
    top: calc(40px + env(safe-area-inset-top)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    justify-content: flex-start !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container {
    gap: 4px !important;
  }

}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    padding-top: calc(58px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center {
    flex: 0 0 auto !important;
    width: min(calc(100vw - 16px), 520px) !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100dvh - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    aspect-ratio: var(--broadcast-portrait-ratio, 68 / 105) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center::before {
    top: calc(50% - 1.5px) !important;
    bottom: auto !important;
    left: clamp(8px, 1.2vw, 14px) !important;
    right: clamp(8px, 1.2vw, 14px) !important;
    width: auto !important;
    height: 3px !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(90deg, transparent, var(--broadcast-midline), transparent) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center::after {
    top: 49.8% !important;
    width: min(44.9%, 170px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 {
    flex: 0 0 50% !important;
    width: 100% !important;
    height: 50% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: 50% !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .field {
    border-radius: 14px 14px 0 0 !important;
    border-right: 1px solid var(--broadcast-line-a) !important;
    border-bottom: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .field {
    border-radius: 0 0 14px 14px !important;
    border-left: 1px solid var(--broadcast-line-b) !important;
    border-top: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .penalty.top,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .penalty.bottom {
    width: 54% !important;
    height: 22% !important;
    left: 23% !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    border-left: 1px solid var(--broadcast-line) !important;
    border-right: 1px solid var(--broadcast-line) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .penalty.top {
    border-top: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .penalty.bottom {
    top: auto !important;
    bottom: 0 !important;
    border-bottom: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .goal.top,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .goal.bottom {
    width: 24% !important;
    height: 3.5% !important;
    left: 38% !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    border-left: 1px solid var(--broadcast-line) !important;
    border-right: 1px solid var(--broadcast-line) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .goal.bottom {
    top: auto !important;
    bottom: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    z-index: 260 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A {
    top: calc(5px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    top: auto !important;
    bottom: calc(5px + env(safe-area-inset-bottom)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    padding: 2px !important;
    margin: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .player-slot,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title-label,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-move-btn {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open .main-nav {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .main-content {
    padding: calc(106px + env(safe-area-inset-top)) 8px calc(68px + env(safe-area-inset-bottom)) !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    top: max(4px, env(safe-area-inset-top)) !important;
    width: min(390px, calc(100vw - 16px)) !important;
    min-width: min(280px, calc(100vw - 16px)) !important;
    min-height: 34px !important;
    padding: 3px 8px 6px !important;
    border-radius: 13px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    min-height: 24px !important;
    gap: 5px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
    width: 22px !important;
    height: 22px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 9px !important;
    right: 9px !important;
    bottom: 2px !important;
    height: 3px !important;
  }

  body.broadcast-board-mode.replay-hud-open .center {
    max-height: calc(100dvh - 174px) !important;
    margin: 0 auto !important;
  }

}

/* ABS EOF lock: starter photo fallback after legacy broadcast overrides.
   Non-starter/team-box/replay bench photos are handled by the final
   player-slot-bundle/nonstarter contracts below. */
body.broadcast-board-mode {
  --broadcast-photo-bottom: var(--broadcast-player-bottom, 11px);
  --broadcast-photo-height: var(--broadcast-player-height, 56%);
  --broadcast-photo-shadow: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.46));
}

body.broadcast-board-mode .player-slot.field-slot.has-player .player-img,
body.broadcast-board-mode .player-slot.field-slot.has-player img {
  bottom: var(--broadcast-photo-bottom) !important;
  height: var(--broadcast-photo-height) !important;
  image-rendering: auto !important;
  filter: var(--broadcast-photo-shadow) !important;
  -webkit-filter: var(--broadcast-photo-shadow) !important;
  backface-visibility: hidden !important;
}

body.broadcast-board-mode .player-slot.broadcast-player-card.has-player .player-img,
body.broadcast-board-mode .player-slot.broadcast-player-card.has-player img {
  bottom: var(--broadcast-card-photo-bottom, 12px) !important;
  height: var(--broadcast-card-photo-height, calc(100% - 14px)) !important;
  filter: var(--broadcast-photo-shadow) !important;
  -webkit-filter: var(--broadcast-photo-shadow) !important;
}

/* ABS EOF lock: restore desktop side team panels instead of logo-only rails. */
@media (min-width: 1180px) {
  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    display: grid !important;
    grid-template-columns:
      var(--broadcast-desktop-rail-w, clamp(178px, 13vw, 236px))
      minmax(720px, var(--broadcast-fit-field-w, min(70vw, 1480px)))
      var(--broadcast-desktop-rail-w, clamp(178px, 13vw, 236px)) !important;
    gap: clamp(8px, 1.1vw, 18px) !important;
    padding-left: clamp(10px, 1.5vw, 28px) !important;
    padding-right: clamp(10px, 1.5vw, 28px) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center {
    grid-column: 2 !important;
    flex: none !important;
    width: min(70vw, var(--broadcast-fit-field-w, 1480px)) !important;
    max-width: min(70vw, var(--broadcast-fit-field-w, 1480px)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 18 !important;
    width: var(--broadcast-desktop-rail-w, clamp(178px, 13vw, 236px)) !important;
    height: min(76vh, var(--broadcast-fit-field-h, 760px)) !important;
    min-height: 360px !important;
    max-height: min(76vh, var(--broadcast-fit-field-h, 760px)) !important;
    padding: 8px !important;
    margin: 0 !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    pointer-events: auto !important;
    overflow: hidden auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A {
    grid-column: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    grid-column: 3 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
    display: none !important;
    visibility: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title {
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    background: rgba(10, 18, 29, 0.54) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title-label {
    display: block !important;
    visibility: visible !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgba(230, 243, 255, 0.94) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-move-btn {
    display: grid !important;
    visibility: visible !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    place-items: center !important;
    border-radius: 999px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box:not(.is-broadcast-rail-open) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    padding: 7px !important;
    margin: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    border: 1px solid rgba(136, 196, 255, 0.28) !important;
    border-radius: 8px !important;
    background: rgba(7, 13, 22, 0.44) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box:not(.is-broadcast-rail-open) * {
    visibility: visible !important;
  }

}

/* ABS EOF lock: mobile portrait keeps the vertical north-south pitch shape. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode .main-content {
    overflow: hidden !important;
    align-items: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    padding-top: calc(54px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important;
  }

  body.broadcast-board-mode.replay-hud-open .main-content {
    padding-top: calc(44px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }

  body.broadcast-board-mode .center {
    flex: 0 0 auto !important;
    width: min(calc(100vw - 16px), 520px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    max-height: calc(100dvh - 108px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    aspect-ratio: var(--broadcast-portrait-ratio, 68 / 105) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode.replay-hud-open .center {
    max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  body.broadcast-board-mode #field-wrapper-1,
  body.broadcast-board-mode #field-wrapper-2 {
    flex: 0 0 50% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 50% !important;
    min-height: 0 !important;
    max-height: 50% !important;
  }
}

/* ABS EOF lock 2: desktop team panels stay beside the pitch, with three player columns. */
@media (min-width: 1180px) {
  body.broadcast-board-mode {
    --broadcast-desktop-rail-w: clamp(242px, 17vw, 330px);
    --broadcast-desktop-rail-gap: clamp(8px, 1vw, 16px);
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content,
  body.broadcast-board-mode.replay-hud-open .main-content {
    display: flex !important;
    padding-left: calc(var(--broadcast-desktop-rail-w) + var(--broadcast-desktop-rail-gap) + max(8px, env(safe-area-inset-left))) !important;
    padding-right: calc(var(--broadcast-desktop-rail-w) + var(--broadcast-desktop-rail-gap) + max(8px, env(safe-area-inset-right))) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center,
  body.broadcast-board-mode.replay-hud-open .center {
    flex: 0 0 auto !important;
    width: min(
      var(--broadcast-fit-field-w, 1400px),
      calc(100vw - (var(--broadcast-desktop-rail-w) * 2) - (var(--broadcast-desktop-rail-gap) * 2) - 28px)
    ) !important;
    max-width: min(
      var(--broadcast-fit-field-w, 1400px),
      calc(100vw - (var(--broadcast-desktop-rail-w) * 2) - (var(--broadcast-desktop-rail-gap) * 2) - 28px)
    ) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    position: fixed !important;
    top: var(--broadcast-desktop-rail-top, 50%) !important;
    bottom: auto !important;
    z-index: 260 !important;
    width: var(--broadcast-desktop-rail-w) !important;
    min-width: var(--broadcast-desktop-rail-w) !important;
    max-width: var(--broadcast-desktop-rail-w) !important;
    height: var(--broadcast-desktop-rail-height, min(76vh, var(--broadcast-fit-field-h, 760px))) !important;
    min-height: 360px !important;
    max-height: var(--broadcast-desktop-rail-height, min(76vh, var(--broadcast-fit-field-h, 760px))) !important;
    transform: var(--broadcast-desktop-rail-transform, translateY(-50%)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    left: auto !important;
    right: max(8px, env(safe-area-inset-right)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box:not(.is-broadcast-rail-open) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

}

/* ABS EOF lock 3: desktop side rails divide their pitch-height space by team count. */
@media (min-width: 1180px) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    --team-title-h: 28px;
    --team-row-gap: 6px;
    padding: 8px !important;
    gap: var(--team-row-gap) !important;
    align-content: stretch !important;
    justify-content: flex-start !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title {
    height: var(--team-title-h) !important;
    min-height: var(--team-title-h) !important;
    max-height: var(--team-title-h) !important;
    flex: 0 0 var(--team-title-h) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box:not(.is-broadcast-rail-open) {
    flex: 0 1 calc((100% - var(--team-title-total, 28px) - var(--team-gap-total, 6px)) / var(--teams-on-side, 1)) !important;
    height: calc((100% - var(--team-title-total, 28px) - var(--team-gap-total, 6px)) / var(--teams-on-side, 1)) !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: flex-start !important;
    overflow: hidden auto !important;
    position: relative !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box.has-team-watermark {
    background:
      linear-gradient(180deg, rgba(7, 13, 22, 0.60), rgba(7, 13, 22, 0.42)),
      color-mix(in srgb, var(--team-accent-bg, #142132) 18%, transparent) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box > .team-logo-empty {
    width: var(--team-watermark-size, min(78%, 240px)) !important;
    height: var(--team-watermark-size, min(78%, 240px)) !important;
    opacity: var(--team-watermark-opacity, 0.16) !important;
    z-index: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-1 .team-box .player-slot.has-player {
    height: clamp(82px, 6.6vw, 112px) !important;
    min-height: 82px !important;
    max-height: 112px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-2 .team-box .player-slot.has-player {
    height: clamp(72px, 5.8vw, 98px) !important;
    min-height: 72px !important;
    max-height: 98px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-3 .team-box .player-slot.has-player,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-many .team-box .player-slot.has-player {
    height: clamp(60px, 4.8vw, 84px) !important;
    min-height: 60px !important;
    max-height: 84px !important;
  }
}

/* ABS EOF lock 4: field-themed team menu and team-colored title bars. */
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
    color-mix(in srgb, var(--team-accent-bg, #1f3550) 82%, #07111c) !important;
  border-color: color-mix(in srgb, var(--team-accent-border, #5b8ec8) 82%, #c7e7ff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.22) !important;
}

.team-move-menu {
  position: fixed;
  z-index: 99999;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  color: #eaf6ff;
  border: 1px solid rgba(120, 190, 255, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(19, 34, 52, 0.96), rgba(7, 13, 22, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(87, 180, 255, 0.22), transparent 62%);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}

.team-move-menu::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(132, 211, 255, 0.86), transparent);
  pointer-events: none;
}

.team-move-menu-btn {
  min-width: 64px;
  height: 34px;
  padding: 0 12px;
  cursor: pointer;
  color: #f5fbff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  border: 1px solid rgba(148, 211, 255, 0.55);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(43, 111, 163, 0.96), rgba(20, 54, 86, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.team-move-menu-btn:hover,
.team-move-menu-btn:focus-visible {
  border-color: rgba(191, 233, 255, 0.88);
  background:
    linear-gradient(180deg, rgba(56, 139, 198, 0.98), rgba(24, 73, 111, 0.98));
  outline: none;
}

/* ABS EOF lock 5: desktop team rails fit exactly inside the measured field height. */
@media (min-width: 1180px) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    height: var(--broadcast-desktop-rail-height, min(76vh, var(--broadcast-fit-field-h, 760px))) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-desktop-rail-height, min(76vh, var(--broadcast-fit-field-h, 760px))) !important;
    padding: 0 !important;
    gap: var(--team-row-gap, 6px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title {
    flex: 0 0 var(--team-title-h, 28px) !important;
    height: var(--team-title-h, 28px) !important;
    min-height: var(--team-title-h, 28px) !important;
    max-height: var(--team-title-h, 28px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box:not(.is-broadcast-rail-open) {
    flex: 0 0 calc((100% - var(--team-title-total, 28px) - var(--team-gap-total, 6px)) / var(--teams-on-side, 1)) !important;
    height: calc((100% - var(--team-title-total, 28px) - var(--team-gap-total, 6px)) / var(--teams-on-side, 1)) !important;
    min-height: 0 !important;
    max-height: calc((100% - var(--team-title-total, 28px) - var(--team-gap-total, 6px)) / var(--teams-on-side, 1)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden auto !important;
  }
}

/* ABS EOF lock 6: desktop broadcast board is a fixed-height workspace, not a scrolling page. */
@media (min-width: 1180px) {
  html.broadcast-board-mode {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    scrollbar-gutter: auto !important;
  }

  html.broadcast-board-mode body.broadcast-board-mode {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    height: calc(100dvh - var(--broadcast-main-top, 0px)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--broadcast-main-top, 0px)) !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}

/* ABS EOF lock 7: PC field player slots follow the broadcast-reference layering. */
@media (min-width: 1180px) {
  body.broadcast-board-mode .player-slot.field-slot.has-player,
  body.broadcast-board-mode .tactics-player-chip {
    --broadcast-player-left: 41%;
    --broadcast-player-bottom: 14px;
    --broadcast-player-width: 58%;
    --broadcast-player-height: 44%;
    --broadcast-name-bottom: 14px;
    --broadcast-mark-top: clamp(20px, 1.45vw, 25px);
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .tactics-player-chip .slot-label,
  body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
    font-size: clamp(25px, 2.8vw, 47px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: var(--broadcast-position-tracking, -0.075em) !important;
    z-index: 1 !important;
    transform: none !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .tactics-player-chip .slot-label {
    position: absolute !important;
    left: var(--broadcast-player-left) !important;
    right: auto !important;
    color: color-mix(in srgb, var(--broadcast-chip) 78%, rgba(255, 255, 255, 0.12)) !important;
    -webkit-text-stroke: 0 !important;
    opacity: 0.9 !important;
    text-shadow: 0 0 7px color-mix(in srgb, var(--broadcast-chip) 48%, transparent) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .tactics-player-chip .player-number {
    left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.68em))) !important;
    color: rgba(255, 255, 255, 0.18) !important;
    -webkit-text-stroke: 0.9px rgba(255, 255, 255, 0.95) !important;
    opacity: 0.96 !important;
    text-shadow: none !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .tactics-player-chip .player-img,
  body.broadcast-board-mode .tactics-player-chip img {
    left: var(--broadcast-player-left) !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    -webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    z-index: 3 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty) {
    left: 57% !important;
    bottom: var(--broadcast-name-bottom) !important;
    --broadcast-name-width: clamp(36px, calc((var(--broadcast-name-ch, 4) * 0.62em) + 13px), 78px);
    width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    height: 12px !important;
    padding: 0 6px 0 5px !important;
    border-radius: 2px 2px 7px 7px !important;
    clip-path: none !important;
    background: transparent !important;
    font-size: clamp(7px, 0.66vw, 9px) !important;
    line-height: 12px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.62) !important;
    z-index: 4 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty)::before,
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty)::before {
    inset: 0 !important;
    clip-path: none !important;
    border-radius: 2px 2px 7px 7px !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip) 90%, #204f9a), color-mix(in srgb, var(--broadcast-chip) 70%, #0a2348)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      inset 0 -1px 0 rgba(0, 0, 0, 0.26),
      0 1px 2px rgba(0, 0, 0, 0.42) !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-img,
  body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player img.player-img,
  body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-box > img,
  body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout .player-img,
  body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout img {
    height: var(--broadcast-player-height) !important;
    max-height: var(--broadcast-player-height) !important;
    width: var(--broadcast-player-width) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-captain,
  body.broadcast-board-mode .tactics-player-chip .player-captain {
    bottom: var(--broadcast-name-bottom) !important;
  }
}

/* ABS EOF lock 8: scale PC field people from pitch-height first, then attach graphics. */
@media (min-width: 1180px) {
  body.broadcast-board-mode .player-slot.field-slot.has-player,
  body.broadcast-board-mode .tactics-player-chip {
    --broadcast-player-left: 41%;
    --broadcast-player-bottom: 11px;
    --broadcast-player-width: 76%;
    --broadcast-player-height: 72%;
    --broadcast-name-bottom: 33px;
    --broadcast-mark-top: clamp(17px, 1.28vw, 22px);
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .tactics-player-chip .player-img,
  body.broadcast-board-mode .tactics-player-chip img,
  body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-img,
  body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player img.player-img,
  body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-box > img,
  body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout .player-img,
  body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout img {
    left: var(--broadcast-player-left) !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    max-height: var(--broadcast-player-height) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    -webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    z-index: 3 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .tactics-player-chip .slot-label,
  body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    font-size: clamp(25px, 2.7vw, 46px) !important;
    line-height: 1 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .tactics-player-chip .slot-label {
    left: var(--broadcast-player-left) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .tactics-player-chip .player-number {
    left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.68em))) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.96) !important;
    text-shadow: none !important;
    transform: scaleY(1.12) !important;
    transform-origin: top center !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty) {
    left: 68% !important;
    bottom: var(--broadcast-name-bottom) !important;
    --broadcast-name-width: clamp(52px, calc((var(--broadcast-name-ch, 4) * 6px) + 22px), 104px);
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    inline-size: var(--broadcast-name-width) !important;
    min-inline-size: var(--broadcast-name-width) !important;
    max-inline-size: var(--broadcast-name-width) !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 0 8px !important;
    font-size: clamp(8.5px, 0.74vw, 10.5px) !important;
    font-weight: 800 !important;
    line-height: 20px !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 1px !important;
    clip-path: none !important;
    background: transparent !important;
    transform: none !important;
    transform-origin: center center !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75) !important;
    z-index: 2 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty)::before,
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 1px !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip) 72%, #0d2c5c)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.42) !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: -1 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty)::after,
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty)::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    right: 17% !important;
    bottom: 2px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
    transform: none !important;
    z-index: 0 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-captain,
  body.broadcast-board-mode .tactics-player-chip .player-captain {
    display: none !important;
  }
}

/* ABS EOF lock 9: field-only broadcast reference skin fallback. */
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot {
  --broadcast-player-left: 41%;
  --broadcast-player-bottom: 11px;
  --broadcast-player-width: 76%;
  --broadcast-player-height: 72%;
  --broadcast-name-bottom: 33px;
  --broadcast-mark-top: clamp(17px, 1.28vw, 22px);
  --broadcast-name-width: clamp(52px, calc((var(--broadcast-name-ch, 4) * 6px) + 22px), 104px);
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-box,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-box {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-img,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player img.player-img,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-box > img,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .player-img,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot > img,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-img,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot img {
  position: absolute !important;
  left: var(--broadcast-player-left) !important;
  bottom: var(--broadcast-player-bottom) !important;
  width: var(--broadcast-player-width) !important;
  height: var(--broadcast-player-height) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-player-width) !important;
  min-height: 0 !important;
  max-height: var(--broadcast-player-height) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
  -webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
  z-index: 3 !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-number,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .player-number,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-number {
  top: var(--broadcast-mark-top) !important;
  font-size: clamp(25px, 2.7vw, 46px) !important;
  line-height: 1 !important;
  display: block !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .slot-label {
  left: var(--broadcast-player-left) !important;
  color: color-mix(in srgb, var(--broadcast-chip) 78%, rgba(255, 255, 255, 0.12)) !important;
  transform: translateX(-50%) !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-number,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .player-number,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-number {
  left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.68em))) !important;
  color: rgba(255, 255, 255, 0.2) !important;
  -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.96) !important;
  text-shadow: none !important;
  transform: scaleY(1.12) !important;
  transform-origin: top center !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty),
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty) {
  left: 68% !important;
  bottom: var(--broadcast-name-bottom) !important;
  width: var(--broadcast-name-width) !important;
  min-width: var(--broadcast-name-width) !important;
  max-width: var(--broadcast-name-width) !important;
  inline-size: var(--broadcast-name-width) !important;
  min-inline-size: var(--broadcast-name-width) !important;
  max-inline-size: var(--broadcast-name-width) !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  padding: 0 8px !important;
  color: #fff !important;
  font-size: clamp(8.5px, 0.74vw, 10.5px) !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  border-radius: 1px !important;
  clip-path: none !important;
  background: transparent !important;
  transform: none !important;
  transform-origin: center center !important;
  isolation: isolate !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75) !important;
  z-index: 2 !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty)::before,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty)::before,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 1px !important;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip) 72%, #0d2c5c)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.42) !important;
  transform: none !important;
  transform-origin: center center !important;
  z-index: -1 !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty)::after,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty)::after,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty)::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 17% !important;
  bottom: 2px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
  transform: none !important;
  z-index: 0 !important;
}

body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .player-captain,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .player-captain,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .player-captain {
  display: none !important;
}

/* ABS EOF lock 10: captain marks stay off in the new broadcast field skin. */
body.broadcast-board-mode .player-captain,
body.broadcast-board-mode .player-captain::before,
body.broadcast-board-mode .player-captain::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ABS EOF lock 11: opened desktop team rails use the same cutout slot skin. */
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open {
  width: clamp(186px, 13.2vw, 218px) !important;
  grid-template-columns: repeat(2, minmax(78px, 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 8px !important;
}

@media (min-width: 1540px) and (min-height: 760px) {
  body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open {
    width: clamp(248px, 16.2vw, 306px) !important;
    grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
    gap: 7px !important;
  }
}

/* ABS EOF lock 13: team boxes are compact 3-up name-only player tiles. */
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open {
  --team-box-slot-h: clamp(82px, 5.85vw, 98px);
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--team-box-slot-h) !important;
  column-gap: 6px !important;
  row-gap: 10px !important;
  align-items: start !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-1 .team-box {
  --team-box-slot-h: clamp(90px, 6.25vw, 106px);
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-2 .team-box {
  --team-box-slot-h: clamp(84px, 5.95vw, 100px);
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player {
  --team-tile-center: 50%;
  --broadcast-player-left: 50% !important;
  --broadcast-player-bottom: 18px !important;
  --broadcast-player-width: 82% !important;
  --broadcast-player-height: calc(100% - 19px) !important;
  width: 100% !important;
  height: var(--team-box-slot-h) !important;
  min-height: var(--team-box-slot-h) !important;
  max-height: var(--team-box-slot-h) !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-1 .team-box .player-slot.has-player {
  height: var(--team-box-slot-h) !important;
  min-height: var(--team-box-slot-h) !important;
  max-height: var(--team-box-slot-h) !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.teams-per-side-2 .team-box .player-slot.has-player {
  height: var(--team-box-slot-h) !important;
  min-height: var(--team-box-slot-h) !important;
  max-height: var(--team-box-slot-h) !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .slot-label,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-number,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .slot-label,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-number {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-img,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player img.player-img,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-box > img,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-img,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player img.player-img,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-box > img {
  position: absolute !important;
  left: var(--team-tile-center, var(--broadcast-player-left)) !important;
  bottom: var(--broadcast-player-bottom) !important;
  width: var(--broadcast-player-width) !important;
  height: var(--broadcast-player-height) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-player-width) !important;
  min-height: 0 !important;
  max-height: var(--broadcast-player-height) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.46)) !important;
  -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.46)) !important;
  z-index: 2 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-name:not(:empty) {
  position: absolute !important;
  left: var(--team-tile-center, 50%) !important;
  right: auto !important;
  bottom: 0 !important;
  width: 86% !important;
  min-width: 0 !important;
  max-width: 86% !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  color: #fff !important;
  font-size: clamp(8px, 0.62vw, 9.5px) !important;
  font-weight: 850 !important;
  line-height: 17px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 1px !important;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip, #5387e9) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip, #5387e9) 72%, #0d2c5c)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.42) !important;
  -webkit-text-stroke: 0.35px rgba(0, 0, 0, 0.82) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.72),
    0 0 1px rgba(0, 0, 0, 0.86) !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-name:not(:empty)::before,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-name:not(:empty)::after,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-name:not(:empty)::before,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-name:not(:empty)::after {
  content: none !important;
  display: none !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title-label {
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.74) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.72),
    0 0 1px rgba(0, 0, 0, 0.82) !important;
}

/* ABS EOF lock 14: slightly stronger text edge and portrait replay bench above the pitch. */
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-name:not(:empty) {
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.86) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.76),
    0 0 1px rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    z-index: 250 !important;
    background:
      linear-gradient(90deg, rgba(255, 122, 58, 0.12), transparent 35%, rgba(91, 145, 255, 0.12)),
      rgba(8, 13, 22, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  body.broadcast-board-mode.replay-hud-open #sub-container-1 {
    z-index: 275 !important;
    top: calc(4px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
  }
}

/* ABS EOF lock 15: stronger labels, quieter position marks, and unified mobile field slots. */
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title-label {
  -webkit-text-stroke-width: 0.75px !important;
}

body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
body.broadcast-board-mode .player-slot.field-slot .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .slot-label,
body.broadcast-board-mode .tactics-player-chip .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .slot-label {
  color: color-mix(in srgb, var(--broadcast-chip, #5387e9) 42%, rgba(0, 0, 0, 0.42)) !important;
  opacity: 0.58 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .player-slot.field-slot.has-player,
  body.broadcast-board-mode .tactics-player-chip {
    --broadcast-player-left: var(--broadcast-slot-canonical-player-left) !important;
    --broadcast-player-bottom: 8px !important;
    --broadcast-player-width: 75% !important;
    --broadcast-player-height: 70% !important;
    --broadcast-name-bottom: 29px !important;
    --broadcast-mark-top: clamp(13px, 4.4vw, 19px) !important;
    --broadcast-name-width: clamp(42px, calc((var(--broadcast-name-ch, 4) * 5.4px) + 18px), 82px) !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode .tactics-player-chip .player-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .tactics-player-chip .player-img,
  body.broadcast-board-mode .tactics-player-chip img {
    position: absolute !important;
    left: var(--broadcast-player-left) !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-player-width) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-player-height) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    -webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    z-index: 3 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .tactics-player-chip .slot-label,
  body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .tactics-player-chip .player-number {
    position: absolute !important;
    top: var(--broadcast-mark-top) !important;
    right: auto !important;
    font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
    font-size: clamp(20px, 7.2vw, 32px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: var(--broadcast-position-tracking, -0.075em) !important;
    z-index: 1 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .tactics-player-chip .slot-label {
    left: var(--broadcast-player-left) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .tactics-player-chip .player-number {
    left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.68em))) !important;
    color: rgba(255, 255, 255, 0.18) !important;
    -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.95) !important;
    opacity: 0.94 !important;
    text-shadow: none !important;
    transform: scaleY(1.1) !important;
    transform-origin: top center !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty) {
    position: absolute !important;
    left: 68% !important;
    right: auto !important;
    bottom: var(--broadcast-name-bottom) !important;
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    padding: 0 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: #fff !important;
    font-size: clamp(7.5px, 2.4vw, 9.5px) !important;
    font-weight: 850 !important;
    line-height: 17px !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    border-radius: 1px !important;
    clip-path: none !important;
    background: transparent !important;
    transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
    -webkit-text-stroke: 0.65px rgba(0, 0, 0, 0.84) !important;
    paint-order: stroke fill !important;
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.72),
      0 0 1px rgba(0, 0, 0, 0.86) !important;
    z-index: 4 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty)::before,
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 1px !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip) 72%, #0d2c5c)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.42) !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: -1 !important;
  }

  body.broadcast-board-mode .player-slot.field-slot.has-player .player-name:not(:empty)::after,
  body.broadcast-board-mode .tactics-player-chip .player-name:not(:empty)::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    right: 17% !important;
    bottom: 2px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
    transform: none !important;
    z-index: 0 !important;
  }
}

/* ABS EOF lock 16: nudge only on-field starter nameplates 4px left. */
body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode .field .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty) {
  left: calc(68% - 4px) !important;
}

body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty)::before,
body.broadcast-board-mode .field .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty)::before,
body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty)::before {
  transform: translateX(-2px) !important;
}

/* ABS EOF lock 17: restore readable position marks and force mobile field slots to the reference style. */
body.broadcast-board-mode .player-slot.field-slot.has-player .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.broadcast-reference-slot.has-player .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .player-slot.has-player .player-box.broadcast-reference-slot .slot-label,
body.broadcast-board-mode .tactics-player-chip .slot-label,
body.broadcast-board-mode :is(.field, .field-stage) .tactics-player-chip.broadcast-reference-slot .slot-label {
  color: color-mix(in srgb, var(--broadcast-chip, #5387e9) 62%, rgba(255, 255, 255, 0.2)) !important;
  opacity: 0.74 !important;
  text-shadow:
    0 0 5px color-mix(in srgb, var(--broadcast-chip, #5387e9) 36%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.48) !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip {
    --broadcast-player-left: 41% !important;
    --broadcast-player-bottom: 8px !important;
    --broadcast-player-width: 75% !important;
    --broadcast-player-height: 70% !important;
    --broadcast-name-bottom: 29px !important;
    --broadcast-mark-top: clamp(13px, 4.4vw, 19px) !important;
    --broadcast-name-width: clamp(42px, calc((var(--broadcast-name-ch, 4) * 5.4px) + 18px), 82px) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode .field .tactics-player-chip .player-box,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .field .tactics-player-chip .player-img,
  body.broadcast-board-mode .field .tactics-player-chip img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip img {
    position: absolute !important;
    left: var(--broadcast-player-left) !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-player-width) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-player-height) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    -webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
    z-index: 3 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    display: block !important;
    position: absolute !important;
    top: var(--broadcast-mark-top) !important;
    right: auto !important;
    font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
    font-size: clamp(20px, 7.2vw, 32px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: var(--broadcast-position-tracking, -0.075em) !important;
    z-index: 1 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label {
    left: var(--broadcast-player-left) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.68em))) !important;
    color: rgba(255, 255, 255, 0.18) !important;
    -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.95) !important;
    opacity: 0.94 !important;
    text-shadow: none !important;
    transform: scaleY(1.1) !important;
    transform-origin: top center !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty) {
    position: absolute !important;
    left: calc(68% - 4px) !important;
    right: auto !important;
    bottom: var(--broadcast-name-bottom) !important;
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    padding: 0 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: #fff !important;
    font-size: clamp(7.5px, 2.4vw, 9.5px) !important;
    font-weight: 850 !important;
    line-height: 17px !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    border-radius: 1px !important;
    clip-path: none !important;
    background: transparent !important;
    transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
    -webkit-text-stroke: 0.65px rgba(0, 0, 0, 0.84) !important;
    paint-order: stroke fill !important;
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.72),
      0 0 1px rgba(0, 0, 0, 0.86) !important;
    z-index: 4 !important;
  }
}

/* ABS EOF lock 18: mobile field text scales down and shares one stable axis. */
@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-mark-top: clamp(10px, 3.25vw, 16px) !important;
    --broadcast-mobile-number-gap: 15px !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="1"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="1"] {
    --broadcast-mobile-number-gap: 11px !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="3"],
  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="4"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="3"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="4"] {
    --broadcast-mobile-number-gap: 20px !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    font-size: clamp(13px, 4.45vw, 21px) !important;
    line-height: 0.98 !important;
    font-weight: 500 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label {
    left: calc(var(--broadcast-player-left) - 1px) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    left: calc(var(--broadcast-player-left) + var(--broadcast-mobile-number-gap)) !important;
    letter-spacing: -0.065em !important;
    transform: scaleY(1.08) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-mark-top: clamp(8px, 3.1vw, 14px) !important;
    --broadcast-mobile-number-gap: 13px !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="1"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="1"] {
    --broadcast-mobile-number-gap: 10px !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="3"],
  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="4"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="3"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="4"] {
    --broadcast-mobile-number-gap: 18px !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    font-size: clamp(11px, 3.1vw, 18px) !important;
  }
}

/* ABS EOF lock 19: broadcast slot image-rule contract.
   - nameInImage=true: do not draw an external nameplate.
   - numberInImage=true or showPositionNumber=false: do not draw external position/number marks.
   - photoMode=cutout: treat the image as transparent artwork and show the full image without crop. */
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .player-slot.has-player .player-name,
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .tactics-player-chip .player-name,
body.broadcast-board-mode .player-slot.broadcast-hide-name.has-player .player-name,
body.broadcast-board-mode .player-box.broadcast-hide-name .player-name,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-name .player-name {
  display: none !important;
}

html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.has-player .player-number,
html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .tactics-player-chip .player-number,
body.broadcast-board-mode .player-slot.broadcast-hide-number.has-player .player-number,
body.broadcast-board-mode .player-box.broadcast-hide-number .player-number,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-number .player-number {
  display: none !important;
}

body.broadcast-board-mode .player-slot.broadcast-hide-position.has-player .slot-label,
body.broadcast-board-mode .player-box.broadcast-hide-position .slot-label,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-position .slot-label {
  display: none !important;
}

body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-img,
body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player img.player-img,
body.broadcast-board-mode .player-slot.field-slot.broadcast-player-cutout.has-player .player-box > img,
body.broadcast-board-mode .player-slot.has-player .player-box.broadcast-player-cutout .player-img,
body.broadcast-board-mode .player-slot.has-player .player-box.broadcast-player-cutout img,
body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout .player-img,
body.broadcast-board-mode .tactics-player-chip.broadcast-player-cutout img,
body.broadcast-board-mode .tactics-player-chip .player-box.broadcast-player-cutout .player-img,
body.broadcast-board-mode .tactics-player-chip .player-box.broadcast-player-cutout img {
  object-fit: contain !important;
  object-position: center bottom !important;
  clip-path: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ABS EOF lock 21: starter slots may use baked labels, but non-starter panels
   must keep their DOM nameplates visible. */
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .player-slot.field-slot .player-name,
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .player-slot.field-slot .player-box .player-name,
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .tactics-player-chip .player-name,
html[data-fs-slot-name-in-image='true'] body.broadcast-board-mode .tactics-player-chip .player-box .player-name {
  display: none !important;
}

html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.has-player .player-number,
html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.has-player .player-box .player-number {
  display: none !important;
}

html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.has-player .slot-label,
html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.has-player .player-box .slot-label {
  display: none !important;
}

/* ABS EOF lock 20: keep mobile field nameplates below the face after image scaling. */
@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-name-bottom: 12px !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty) {
    bottom: var(--broadcast-name-bottom) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-name-bottom: 10px !important;
  }
}

/* ABS EOF lock 22: mobile field slots follow the desktop reference axis. */
@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-player-left: 41% !important;
    --broadcast-player-bottom: 8px !important;
    --broadcast-player-width: 75% !important;
    --broadcast-player-height: 70% !important;
    --broadcast-mark-top: clamp(8px, 2.85vw, 14px) !important;
    --broadcast-name-bottom: 17px !important;
    --broadcast-name-width: clamp(36px, calc((var(--broadcast-name-ch, 4) * 5px) + 15px), 68px) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    font-size: clamp(12px, 3.55vw, 19px) !important;
    line-height: 0.98 !important;
    font-weight: 500 !important;
    letter-spacing: -0.075em !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label {
    left: var(--broadcast-player-left) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.58em))) !important;
    transform: scaleY(1.08) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="1"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="1"] {
    --broadcast-number-offset-px: 0.5em !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="2"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="2"] {
    --broadcast-number-offset-px: 0.58em !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="3"],
  body.broadcast-board-mode .field .player-slot.field-slot.has-player[data-broadcast-position-len="4"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="3"],
  body.broadcast-board-mode .field .player-box[data-broadcast-position-len="4"] {
    --broadcast-number-offset-px: 0.68em !important;
    --broadcast-position-tracking: -0.105em !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty) {
    left: calc(68% - 4px) !important;
    bottom: var(--broadcast-name-bottom) !important;
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    padding: 0 6px 0 5px !important;
    font-size: clamp(7px, 2.05vw, 9px) !important;
    line-height: 15px !important;
    z-index: 2 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .field .tactics-player-chip .player-img,
  body.broadcast-board-mode .field .tactics-player-chip img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip img {
    z-index: 3 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-mark-top: clamp(7px, 2.45vw, 12px) !important;
    --broadcast-name-bottom: 15px !important;
    --broadcast-name-width: clamp(34px, calc((var(--broadcast-name-ch, 4) * 4.8px) + 14px), 64px) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    font-size: clamp(10px, 2.72vw, 16px) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty) {
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    font-size: clamp(6.5px, 1.72vw, 8.5px) !important;
    line-height: 14px !important;
  }
}

/* ABS EOF lock 26: event FX clones move the same full slot bundle as the real slot. */
body.broadcast-board-mode .er-swap-clone:is(.player-slot, .tactics-player-chip) {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.broadcast-board-mode .er-swap-clone :is(.player-box, .player-slot-bundle-box) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broadcast-board-mode .er-swap-clone:is(
  [data-slot-bundle-context='teamBox'],
  [data-slot-bundle-context='mobileTeamBox'],
  [data-slot-bundle-context='replaySub']
) {
  --nonstarter-clone-name-h: var(--fs-slot-name-plate-h, var(--nonstarter-name-h, 17px));
  --nonstarter-clone-name-w: var(--fs-slot-name-plate-w, var(--broadcast-player-width, 76%));
  --nonstarter-photo-crop-bottom: var(--fs-slot-photo-crop-bottom, calc(12% + 4px));
  --broadcast-player-left: var(--fs-slot-photo-x, 50%) !important;
  --broadcast-player-width: var(--fs-slot-photo-w, 76%) !important;
  --broadcast-player-bottom: var(--fs-slot-photo-bottom, calc(var(--nonstarter-clone-name-h) + 1px)) !important;
  --broadcast-player-height: var(--fs-slot-photo-h, calc(100% - var(--nonstarter-clone-name-h) - 1px)) !important;
  --broadcast-name-width: var(--nonstarter-clone-name-w) !important;
  --broadcast-name-left: var(--fs-slot-name-x, 50%) !important;
  --broadcast-name-bottom: 0px !important;
  --broadcast-name-height: var(--nonstarter-clone-name-h) !important;
}

body.broadcast-board-mode .er-swap-clone:is(
  [data-slot-bundle-context='teamBox'],
  [data-slot-bundle-context='mobileTeamBox'],
  [data-slot-bundle-context='replaySub']
) :is(.player-img, img.player-img, .player-box > img, [data-slot-bundle-part='photo']) {
  position: absolute !important;
  left: var(--broadcast-player-left, 50%) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--broadcast-player-bottom, 18px) !important;
  width: var(--broadcast-player-width, 76%) !important;
  height: var(--broadcast-player-height, calc(100% - 18px)) !important;
  max-width: var(--broadcast-player-width, 76%) !important;
  max-height: var(--broadcast-player-height, calc(100% - 18px)) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  transform: translateX(-50%) scale(var(--broadcast-player-scale, 1)) !important;
  transform-origin: center center !important;
  clip-path: inset(0 0 var(--nonstarter-photo-crop-bottom, calc(12% + 4px)) 0) !important;
}

body.broadcast-board-mode .er-swap-clone:is(
  [data-slot-bundle-context='teamBox'],
  [data-slot-bundle-context='mobileTeamBox'],
  [data-slot-bundle-context='replaySub']
) :is(.player-name, [data-slot-bundle-part='name']):not(:empty) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: var(--fs-slot-name-x, var(--broadcast-name-left, 50%)) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--broadcast-name-bottom, 0px) !important;
  width: var(--broadcast-name-width, 76%) !important;
  max-width: var(--broadcast-name-width, 76%) !important;
  height: var(--broadcast-name-height, var(--nonstarter-clone-name-h, 17px)) !important;
  min-height: var(--broadcast-name-height, var(--nonstarter-clone-name-h, 17px)) !important;
  font-size: var(--fs-slot-name-font, max(7px, calc(var(--nonstarter-slot-h, 96px) * 0.103))) !important;
  line-height: var(--broadcast-name-height, var(--nonstarter-clone-name-h, 17px)) !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
  overflow: hidden !important;
}

body.broadcast-board-mode .er-swap-clone:is(
  [data-slot-bundle-context='teamBox'],
  [data-slot-bundle-context='mobileTeamBox'],
  [data-slot-bundle-context='replaySub']
) :is(.player-number, .slot-label, .player-captain) {
  display: none !important;
}

/* ABS EOF lock 23: one broadcast slot contract across field, replay, and team rails. */
body.broadcast-board-mode .player-slot.broadcast-hide-name .player-name,
body.broadcast-board-mode .player-box.broadcast-hide-name .player-name,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-name .player-name {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.has-player .player-number,
body.broadcast-board-mode[data-fs-slot-number-in-image='true'] .player-slot.has-player .player-number,
html[data-fs-slot-number-in-image='true'] body.broadcast-board-mode .player-slot.has-player .slot-label,
body.broadcast-board-mode[data-fs-slot-number-in-image='true'] .player-slot.has-player .slot-label,
body.broadcast-board-mode .player-slot.broadcast-hide-number .player-number,
body.broadcast-board-mode .player-box.broadcast-hide-number .player-number,
body.broadcast-board-mode .player-slot.broadcast-hide-position .slot-label,
body.broadcast-board-mode .player-box.broadcast-hide-position .slot-label,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-number .player-number,
body.broadcast-board-mode .tactics-player-chip.broadcast-hide-position .slot-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .player-slot.broadcast-player-cutout.has-player .player-img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .player-slot.broadcast-player-cutout.has-player img.player-img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .player-slot.broadcast-player-cutout.has-player .player-box > img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .player-slot.has-player .player-box.broadcast-player-cutout .player-img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .player-slot.has-player .player-box.broadcast-player-cutout > img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .tactics-player-chip.broadcast-player-cutout .player-img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .tactics-player-chip.broadcast-player-cutout img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .tactics-player-chip .player-box.broadcast-player-cutout .player-img,
html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .tactics-player-chip .player-box.broadcast-player-cutout > img {
  height: var(--broadcast-player-height, 72%) !important;
  max-height: var(--broadcast-player-height, 72%) !important;
  width: var(--broadcast-player-width, 76%) !important;
  max-width: var(--broadcast-player-width, 76%) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-1 .penalty.top,
  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 .penalty.bottom {
    width: 42% !important;
    height: 16% !important;
    left: 29% !important;
    right: auto !important;
    border-left: 1px solid var(--broadcast-line) !important;
    border-right: 1px solid var(--broadcast-line) !important;
  }

  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-1 .penalty.top {
    top: 0 !important;
    bottom: auto !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--broadcast-line) !important;
    border-radius: 0 0 999px 999px !important;
  }

  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 .penalty.bottom {
    top: auto !important;
    bottom: 0 !important;
    border-top: 1px solid var(--broadcast-line) !important;
    border-bottom: 0 !important;
    border-radius: 999px 999px 0 0 !important;
  }
}

/* ABS EOF lock 29: broadcast slot pipeline.
   This is the only late-stage mobile/replay slot contract; older lock 25/27/28 blocks were removed.
   screen -> zone -> slot:
   - field .field-slot: on-field starters only
   - field-wrapper > .sub-slot-container: outside replay bench only
   - team-box / #candidate-mobile: team rails, never touched here
*/
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container {
  gap: var(--replay-bench-gap, 8px) !important;
  overflow: visible !important;
}

@media (min-width: 901px) {
  body.broadcast-board-mode.replay-hud-open {
    --replay-bench-slot-w: clamp(56px, 5.35vw, 86px);
    --replay-bench-slot-h: clamp(74px, 7.15vw, 112px);
  }
}

body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.sub.has-player {
  flex: 0 0 var(--replay-bench-slot-w, 64px) !important;
  width: var(--replay-bench-slot-w, 64px) !important;
  min-width: var(--replay-bench-slot-w, 64px) !important;
  max-width: var(--replay-bench-slot-w, 64px) !important;
  height: var(--replay-bench-slot-h, 78px) !important;
  min-height: var(--replay-bench-slot-h, 78px) !important;
  max-height: var(--replay-bench-slot-h, 78px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-name-width: clamp(32px, 8.7vw, 41px) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty) {
    left: calc(63% - 4px) !important;
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    line-height: 12px !important;
    padding-left: 4px !important;
    padding-right: 6px !important;
    font-size: clamp(6.3px, 1.75vw, 8px) !important;
  }

}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-name-width: clamp(30px, 7.5vw, 38px) !important;
  }
}

/* ABS EOF lock 31: baked/card starter images must obey admin image rules.
   GTA/reboot starters already include name/number/position inside transparent artwork.
   Replay bench/non-starter slots are handled by the final nonstarter contract. */
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player,
body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player {
  --broadcast-player-left: 50% !important;
  --broadcast-player-bottom: 0px !important;
  --broadcast-player-width: 98% !important;
  --broadcast-player-height: 100% !important;
}

html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box > img,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-img,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player img.player-img,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-box > img,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-img,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player img.player-img,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-box > img,
body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-img,
body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player img.player-img,
body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-box > img {
  display: block !important;
  position: absolute !important;
  left: var(--broadcast-player-left, 50%) !important;
  bottom: var(--broadcast-player-bottom, 0px) !important;
  width: var(--broadcast-player-width, 98%) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-player-width, 98%) !important;
  height: var(--broadcast-player-height, 100%) !important;
  min-height: 0 !important;
  max-height: var(--broadcast-player-height, 100%) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  clip-path: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
}

html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-name,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-number,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .slot-label,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-name,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-number,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .slot-label,
body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-name,
body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-number,
body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .slot-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 330 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: auto !important;
    max-height: min(72dvh, 520px) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A {
    left: calc(50% - 47px) !important;
    right: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    left: calc(50% + 5px) !important;
    right: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title-label,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-move-btn,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box {
    display: none !important;
    visibility: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74) 58%, rgba(25, 35, 48, 0.78)) !important;
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.36),
      inset 0 0 0 1px rgba(255, 255, 255, 0.32) !important;
    pointer-events: auto !important;
  }

}

/* ABS EOF lock 34: GTA/card mobile slots are completed artwork, so scale the whole slot up. */
body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
  background:
    linear-gradient(90deg, rgba(255, 122, 58, 0.07), transparent 34%, rgba(91, 145, 255, 0.07)),
    rgba(8, 13, 22, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(3px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.04) !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
  background: rgba(8, 13, 22, 0.42) !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
  background: rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 900px) {
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player {
    width: clamp(68px, 17vw, 106px) !important;
    min-width: clamp(68px, 17vw, 106px) !important;
    max-width: clamp(68px, 17vw, 106px) !important;
    height: clamp(90px, 22vw, 140px) !important;
    min-height: clamp(90px, 22vw, 140px) !important;
    max-height: clamp(90px, 22vw, 140px) !important;
    --broadcast-player-left: 50% !important;
    --broadcast-player-bottom: 0px !important;
    --broadcast-player-width: 112% !important;
    --broadcast-player-height: 108% !important;
  }

  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player img.player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-box > img {
    left: var(--broadcast-player-left, 50%) !important;
    bottom: var(--broadcast-player-bottom, 0px) !important;
    width: var(--broadcast-player-width, 112%) !important;
    max-width: var(--broadcast-player-width, 112%) !important;
    height: var(--broadcast-player-height, 108%) !important;
    max-height: var(--broadcast-player-height, 108%) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 8% 0) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player {
    width: clamp(62px, 14vh, 96px) !important;
    min-width: clamp(62px, 14vh, 96px) !important;
    max-width: clamp(62px, 14vh, 96px) !important;
    height: clamp(82px, 18.5vh, 128px) !important;
    min-height: clamp(82px, 18.5vh, 128px) !important;
    max-height: clamp(82px, 18.5vh, 128px) !important;
  }
}

/* ABS EOF lock 36: mobile portrait replay field fits between top and bottom bench rows. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open .main-content {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding-top: calc(var(--replay-bench-top-space, 92px) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--replay-bench-bottom-space, 96px) + env(safe-area-inset-bottom)) !important;
    padding-left: max(4px, env(safe-area-inset-left)) !important;
    padding-right: max(4px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode.replay-hud-open .center {
    --replay-portrait-ratio: var(--broadcast-portrait-ratio, 68 / 105);
    flex: 0 1 auto !important;
    width: min(
      calc(100vw - max(8px, env(safe-area-inset-left) + env(safe-area-inset-right))),
      calc((100dvh - var(--replay-bench-top-space, 92px) - var(--replay-bench-bottom-space, 96px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--replay-portrait-ratio))
    ) !important;
    height: min(
      calc((100vw - max(8px, env(safe-area-inset-left) + env(safe-area-inset-right))) / var(--replay-portrait-ratio)),
      calc(100dvh - var(--replay-bench-top-space, 92px) - var(--replay-bench-bottom-space, 96px) - env(safe-area-inset-top) - env(safe-area-inset-bottom))
    ) !important;
    max-width: calc(100vw - max(8px, env(safe-area-inset-left) + env(safe-area-inset-right))) !important;
    max-height: calc(100dvh - var(--replay-bench-top-space, 92px) - var(--replay-bench-bottom-space, 96px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    aspect-ratio: var(--replay-portrait-ratio) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode.replay-hud-open .center > .field-wrapper {
    flex: 0 0 50% !important;
    height: 50% !important;
    min-height: 0 !important;
    max-height: 50% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-stage,
  body.broadcast-board-mode.replay-hud-open .field,
  body.broadcast-board-mode.replay-hud-open .field-lines {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container {
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode {
    --broadcast-side-rail: clamp(44px, 8vw, 60px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    display: none !important;
    visibility: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content,
  body.broadcast-board-mode.replay-hud-open .main-content {
    padding-left: calc(var(--broadcast-side-rail) + max(2px, env(safe-area-inset-left))) !important;
    padding-right: calc(var(--broadcast-side-rail) + max(2px, env(safe-area-inset-right))) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center,
  body.broadcast-board-mode.replay-hud-open .center {
    width: calc(100vw - (var(--broadcast-side-rail) * 2) - 8px) !important;
    max-width: calc(100vw - (var(--broadcast-side-rail) * 2) - 8px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--broadcast-side-rail) !important;
    min-width: var(--broadcast-side-rail) !important;
    max-width: var(--broadcast-side-rail) !important;
  }
}

/* ABS EOF lock 40: mobile portrait replay uses concrete numeric sizing so the pitch never collapses. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open .main-content {
    --replay-portrait-avail-h: calc(100dvh - var(--replay-bench-top-space, 92px) - var(--replay-bench-bottom-space, 96px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding-top: calc(var(--replay-bench-top-space, 92px) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--replay-bench-bottom-space, 96px) + env(safe-area-inset-bottom)) !important;
    padding-left: max(4px, env(safe-area-inset-left)) !important;
    padding-right: max(4px, env(safe-area-inset-right)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.broadcast-board-mode.replay-hud-open .center {
    flex: 0 0 auto !important;
    width: min(calc(100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc(var(--replay-portrait-avail-h) * 0.6476)) !important;
    height: min(calc((100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)) * 1.5441), var(--replay-portrait-avail-h)) !important;
    min-width: 0 !important;
    min-height: 260px !important;
    max-width: calc(100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    max-height: var(--replay-portrait-avail-h) !important;
    margin: 0 auto !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    aspect-ratio: 68 / 105 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .center > .field-wrapper,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-1,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 {
    display: block !important;
    position: relative !important;
    flex: 0 0 50% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 50% !important;
    min-height: 130px !important;
    max-height: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-stage,
  body.broadcast-board-mode.replay-hud-open #field-1,
  body.broadcast-board-mode.replay-hud-open #field-2,
  body.broadcast-board-mode.replay-hud-open .field {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-lines {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    border-radius: inherit !important;
  }
}

/* ABS EOF lock 43: normal portrait field is fixed; only the bottom logo rail scrolls horizontally. */
@media (max-width: 900px) and (orientation: portrait) {
  html:has(body.broadcast-board-mode:not(.replay-hud-open)),
  body.broadcast-board-mode:not(.replay-hud-open) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .page,
  body.broadcast-board-mode:not(.replay-hud-open) .app,
  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center {
    flex: 0 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: none !important;
    touch-action: pan-x !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open {
    overflow: hidden !important;
    touch-action: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
}

/* ABS EOF lock 45: rebuild normal mobile portrait as nav + drawer trigger + fixed field + team rail. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --portrait-nav-h: calc(45px + env(safe-area-inset-top));
    --portrait-drawer-trigger-h: 30px;
    --portrait-team-rail-h: calc(84px + env(safe-area-inset-bottom));
    --portrait-field-gap: 8px;
    --portrait-field-top: calc(var(--portrait-nav-h) + var(--portrait-drawer-trigger-h) + var(--portrait-field-gap));
    --portrait-field-bottom: calc(var(--portrait-team-rail-h) + var(--portrait-field-gap));
    --normal-mobile-team-rail-h: var(--portrait-team-rail-h);
    --normal-mobile-field-h: calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom));
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1300 !important;
    height: var(--portrait-nav-h) !important;
    min-height: var(--portrait-nav-h) !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions,
  body.broadcast-board-mode:not(.replay-hud-open) #controlBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: var(--portrait-nav-h) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 1298 !important;
    width: 54px !important;
    height: var(--portrait-drawer-trigger-h) !important;
    min-height: var(--portrait-drawer-trigger-h) !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    background:
      linear-gradient(180deg, rgba(24, 34, 48, 0.98), rgba(9, 13, 22, 0.98)) !important;
    color: #f8fbff !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    position: fixed !important;
    top: var(--portrait-field-top) !important;
    right: 0 !important;
    bottom: var(--portrait-field-bottom) !important;
    left: 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 7px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center {
    width: min(calc(100vw - 14px), calc((100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) / 1.5441), 520px) !important;
    max-width: min(calc(100vw - 14px), calc((100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) / 1.5441), 520px) !important;
    height: min(calc((100vw - 14px) / 0.6476), calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom))) !important;
    max-height: calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) !important;
    margin: 0 auto !important;
    align-self: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    height: var(--portrait-team-rail-h) !important;
    min-height: var(--portrait-team-rail-h) !important;
    max-height: var(--portrait-team-rail-h) !important;
    z-index: 1280 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 22000 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup .drawer-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.22) !important;
    opacity: 0 !important;
    transition: opacity 0.18s ease !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup.open .drawer-backdrop {
    opacity: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent {
    position: fixed !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    top: var(--portrait-nav-h) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(58dvh, calc(100dvh - var(--portrait-nav-h) - var(--portrait-team-rail-h) - 18px)) !important;
    border-radius: 0 0 16px 16px !important;
    transform: translateY(-105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.22s ease, opacity 0.16s ease !important;
    background:
      linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(9, 13, 21, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.44) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup.open #mobileControlContent {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .drawer-header {
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .drawer-body {
    max-height: inherit !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* ABS EOF lock 46: mobile never shows the broadcast-board label and move dialogs close cleanly. */
@media (max-width: 900px) {
  body.broadcast-board-mode #controlBar::before,
  body.broadcast-board-mode:not(.replay-hud-open) #controlBar::before {
    content: none !important;
    display: none !important;
  }

  body.broadcast-board-mode #controlBar {
    --mobile-hide-broadcast-board-label: 1;
  }
}

/* ABS EOF lock 48: portrait team labels become slim direction chips inside the field. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) .field-label {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    max-width: min(54vw, 220px) !important;
    padding: 2px 7px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    background: rgba(7, 10, 15, 0.58) !important;
    border: 1px solid color-mix(in srgb, var(--broadcast-line) 42%, rgba(255, 255, 255, 0.18)) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26) !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    z-index: 22 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .field-label {
    top: 5px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .field-label {
    top: auto !important;
    bottom: 5px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-team-logo-ring {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #fieldLabelA,
  body.broadcast-board-mode:not(.replay-hud-open) #fieldLabelB {
    max-width: min(38vw, 150px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .formation-label {
    bottom: auto !important;
    top: 30px !important;
    left: 8px !important;
    right: auto !important;
    font-size: 10px !important;
    opacity: 0.86 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .formation-label {
    top: auto !important;
    bottom: 30px !important;
    right: 8px !important;
    left: auto !important;
    font-size: 10px !important;
    opacity: 0.86 !important;
  }
}

/* ABS EOF lock 50: portrait drawer exposes the full green menu bar and overlays the field. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --portrait-green-menu-h: 31px;
    --portrait-field-top: calc(var(--portrait-nav-h) + 2px);
    --normal-mobile-field-h: calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom));
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    top: var(--portrait-field-top) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center {
    width: min(calc(100vw - 14px), calc((100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) / 1.5441), 520px) !important;
    max-width: min(calc(100vw - 14px), calc((100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) / 1.5441), 520px) !important;
    height: min(calc((100vw - 14px) / 0.6476), calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom))) !important;
    max-height: calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions {
    display: grid !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    top: var(--portrait-nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1299 !important;
    width: 100vw !important;
    height: var(--portrait-green-menu-h) !important;
    min-height: var(--portrait-green-menu-h) !important;
    margin: 0 !important;
    padding: 1px 7px 3px !important;
    transform: translateY(calc(-1 * var(--portrait-green-menu-h) - 6px)) !important;
    transition: transform 0.18s ease, opacity 0.16s ease !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileQuickActions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    top: var(--portrait-nav-h) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    top: calc(var(--portrait-nav-h) + var(--portrait-green-menu-h)) !important;
    border-radius: 0 0 14px 14px !important;
    background:
      linear-gradient(180deg, rgba(20, 94, 59, 0.98), rgba(11, 55, 35, 0.98)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent {
    top: calc(var(--portrait-nav-h) + var(--portrait-green-menu-h) + var(--portrait-drawer-trigger-h)) !important;
    max-height: min(50dvh, calc(100dvh - var(--portrait-nav-h) - var(--portrait-green-menu-h) - var(--portrait-drawer-trigger-h) - var(--portrait-team-rail-h) - 10px)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup .drawer-backdrop {
    background: transparent !important;
  }
}

/* ABS EOF lock 51: mobile landscape side rails show all teams and remain clickable. */
@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --broadcast-side-rail: clamp(58px, 9vw, 74px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    padding-left: calc(var(--broadcast-side-rail) + max(3px, env(safe-area-inset-left))) !important;
    padding-right: calc(var(--broadcast-side-rail) + max(3px, env(safe-area-inset-right))) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center {
    width: calc(100vw - (var(--broadcast-side-rail) * 2) - 10px) !important;
    max-width: calc(100vw - (var(--broadcast-side-rail) * 2) - 10px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: max(4px, env(safe-area-inset-top)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    z-index: 1260 !important;
    width: var(--broadcast-side-rail) !important;
    min-width: var(--broadcast-side-rail) !important;
    max-width: var(--broadcast-side-rail) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 3px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    scrollbar-width: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: max(4px, env(safe-area-inset-top)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    z-index: 1260 !important;
    width: var(--broadcast-side-rail) !important;
    min-width: var(--broadcast-side-rail) !important;
    max-width: var(--broadcast-side-rail) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 3px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column::-webkit-scrollbar {
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A {
    left: max(0px, env(safe-area-inset-left)) !important;
    right: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    right: max(0px, env(safe-area-inset-right)) !important;
    left: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: calc(var(--broadcast-side-rail) - 8px) !important;
    min-width: calc(var(--broadcast-side-rail) - 8px) !important;
    max-width: calc(var(--broadcast-side-rail) - 8px) !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title-label,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-move-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title:first-of-type .broadcast-rail-logo {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: calc(var(--broadcast-side-rail) - 10px) !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 4px 4px 3px !important;
    grid-template-rows: 38px 15px !important;
    cursor: pointer !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box:not(.is-broadcast-rail-open),
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box:not(.is-broadcast-rail-open) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

}

/* ABS EOF lock 52: mobile portrait team labels sit in pitch corners, not on keeper lanes. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .field-label,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .field-label {
    left: 6px !important;
    right: auto !important;
    transform: none !important;
    max-width: min(46vw, 178px) !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .field-label {
    top: 5px !important;
    bottom: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .field-label {
    top: auto !important;
    bottom: 5px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .formation-label,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .formation-label {
    left: auto !important;
    right: 6px !important;
    transform: none !important;
    min-width: 44px !important;
    max-width: 34vw !important;
    text-align: right !important;
    z-index: 23 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .formation-label {
    top: 5px !important;
    bottom: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .formation-label {
    top: auto !important;
    bottom: 5px !important;
  }
}

/* ABS EOF lock 54: mobile replay starters use compact labels. */
@media (max-width: 900px) {
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-player-left: 41% !important;
    --broadcast-name-bottom: 22px !important;
    --broadcast-mark-top: 18px !important;
    --broadcast-name-width: clamp(30px, calc((var(--broadcast-name-ch, 4) * 3.9px) + 12px), 58px) !important;
  }

  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label {
    top: var(--broadcast-mark-top) !important;
    left: calc(var(--broadcast-player-left, 41%) - 12px) !important;
    font-size: clamp(8px, 1.85vw, 11px) !important;
  }

  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    left: calc(var(--broadcast-player-left, 41%) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.68em))) !important;
    font-size: clamp(14px, 3.3vw, 24px) !important;
    letter-spacing: -0.06em !important;
  }

  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty) {
    left: 70% !important;
    right: auto !important;
    bottom: var(--broadcast-name-bottom) !important;
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    line-height: 13px !important;
    padding: 0 5px 0 4px !important;
    font-size: clamp(7.2px, 1.75vw, 9.4px) !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-name-width: clamp(28px, calc((var(--broadcast-name-ch, 4) * 3.6px) + 11px), 54px) !important;
  }
}

/* ABS EOF lock 55: landscape team rails start below the fixed back/menu chrome. */
@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --broadcast-landscape-chrome-clearance: calc(max(44px, env(safe-area-inset-top) + 40px)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .broadcast-mobile-back,
  body.broadcast-board-mode:not(.replay-hud-open) .broadcast-mobile-menu {
    z-index: 1325 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column {
    top: var(--broadcast-landscape-chrome-clearance) !important;
    bottom: max(5px, env(safe-area-inset-bottom)) !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    top: var(--broadcast-landscape-chrome-clearance) !important;
    bottom: max(5px, env(safe-area-inset-bottom)) !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title:first-of-type {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title:first-of-type .broadcast-rail-logo {
    width: calc(var(--broadcast-side-rail, 66px) - 8px) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 16px !important;
    padding: 5px 4px 4px !important;
    border-radius: 7px !important;
  }

}

/* ABS EOF lock 56: mobile player nameplates are short and pulled back toward the player. */
@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-name-width: clamp(27px, calc((var(--broadcast-name-ch, 4) * 3.45px) + 10px), 48px) !important;
    --broadcast-name-left: 62% !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty) {
    left: var(--broadcast-name-left, 62%) !important;
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    inline-size: var(--broadcast-name-width) !important;
    min-inline-size: var(--broadcast-name-width) !important;
    max-inline-size: var(--broadcast-name-width) !important;
    padding-left: 3px !important;
    padding-right: 4px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode .field .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .player-box {
    --broadcast-name-width: clamp(25px, calc((var(--broadcast-name-ch, 4) * 3.2px) + 9px), 44px) !important;
    --broadcast-name-left: 60% !important;
  }
}

/* Futsal field position abbreviations stay visible while player art owns the slot skin. */
body.broadcast-board-mode[data-field-sport-mode='futsal'] .field .player-slot.field-slot.has-player .slot-label,
body.broadcast-board-mode[data-field-sport-mode='futsal'] .field .tactics-player-chip .slot-label,
html[data-field-sport-mode='futsal'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
html[data-field-sport-mode='futsal'] body.broadcast-board-mode .field .tactics-player-chip .slot-label {
  display: block !important;
  visibility: visible !important;
  opacity: 0.7 !important;
}

/* ABS EOF lock 60: futsal field position abbreviations are part of the pitch UI, even when player art owns numbers/names. */
body.broadcast-board-mode[data-field-sport-mode='futsal'] .field .player-slot.field-slot .slot-label,
body.broadcast-board-mode[data-field-sport-mode='futsal'] .field .tactics-player-chip .slot-label {
  display: block !important;
  visibility: visible !important;
  opacity: 0.72 !important;
  color: var(--broadcast-team-accent, rgba(88, 232, 214, 0.72)) !important;
}

/* ABS EOF lock 61: GTA completed player art must not be shortened when the tactics board is on. */
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .tactics-player-chip,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .tactics-player-chip,
body.broadcast-board-mode.fs-image-rules-gta .field .tactics-player-chip {
  --broadcast-player-left: 50% !important;
  --broadcast-player-bottom: 0px !important;
  --broadcast-player-width: 112% !important;
  --broadcast-player-height: 108% !important;
  overflow: visible !important;
}

html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-box,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-box,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .tactics-player-chip .player-box,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .tactics-player-chip .player-box,
body.broadcast-board-mode.fs-image-rules-gta .field .tactics-player-chip .player-box {
  overflow: visible !important;
  clip-path: none !important;
}

html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-img,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player img.player-img,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-img,
body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player img.player-img,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .tactics-player-chip .player-img,
html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .tactics-player-chip img,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .tactics-player-chip .player-img,
body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .tactics-player-chip img,
body.broadcast-board-mode.fs-image-rules-gta .field .tactics-player-chip .player-img,
body.broadcast-board-mode.fs-image-rules-gta .field .tactics-player-chip img {
  left: var(--broadcast-player-left, 50%) !important;
  bottom: var(--broadcast-player-bottom, 0px) !important;
  width: var(--broadcast-player-width, 112%) !important;
  max-width: var(--broadcast-player-width, 112%) !important;
  height: var(--broadcast-player-height, 108%) !important;
  max-height: var(--broadcast-player-height, 108%) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  clip-path: none !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-logo-button,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
    border-radius: 8px !important;
  }

}

/* Current mobile team rail contract. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --portrait-team-rail-h: calc(76px + env(safe-area-inset-bottom)) !important;
    --portrait-field-bottom: calc(var(--portrait-team-rail-h) + 6px) !important;
    --normal-mobile-team-rail-h: var(--portrait-team-rail-h) !important;
    --normal-mobile-field-h: calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content {
    bottom: var(--portrait-field-bottom) !important;
    padding-bottom: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center {
    max-height: calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    bottom: 0 !important;
    z-index: 1280 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--portrait-team-rail-h) !important;
    min-height: var(--portrait-team-rail-h) !important;
    max-height: var(--portrait-team-rail-h) !important;
    margin: 0 !important;
    padding-top: 7px !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--mobile-team-gap, 8px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile * {
    pointer-events: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile::-webkit-scrollbar {
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 72px !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-title {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-title,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-logo-button,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 34px 14px !important;
    gap: 1px !important;
    place-items: center !important;
    padding: 5px 5px 4px !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-logo-button img[data-fs-team-logo],
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button img[data-fs-team-logo] {
    grid-row: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-logo-button .broadcast-rail-logo-text,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button .broadcast-rail-logo-text {
    grid-row: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-logo-button::after,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button::after {
    content: attr(data-short-team-label) !important;
    display: block !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 14px !important;
    line-height: 14px !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title:first-of-type .broadcast-rail-logo,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 50px 14px !important;
    gap: 1px !important;
    place-items: center !important;
    width: clamp(46px, 7vw, 58px) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 3px 4px 0 !important;
    border-radius: 9px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title:first-of-type .broadcast-rail-logo > img[data-fs-team-logo],
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo > img[data-fs-team-logo] {
    grid-row: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title:first-of-type .broadcast-rail-logo::after,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo::after {
    content: attr(data-short-team-label) !important;
    display: block !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 14px !important;
    line-height: 14px !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
  }
}

/* ABS EOF lock 32: selection FX follows the current broadcast slot layers, not the old card box. */
body.broadcast-board-mode .player-slot.selected {
  outline: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
  transform: translate(var(--broadcast-slot-translate-x, 0), var(--broadcast-slot-translate-y, 0)) !important;
}

body.broadcast-board-mode .candidate-column .player-slot.selected,
body.broadcast-board-mode #candidate-mobile .player-slot.selected,
body.broadcast-board-mode .team-box .player-slot.selected {
  transform: none !important;
}

body.broadcast-board-mode .player-slot.selected .player-img {
  filter:
    drop-shadow(0 0 3px rgba(91, 220, 255, 1))
    drop-shadow(0 0 9px rgba(91, 220, 255, 0.76))
    drop-shadow(0 0 18px rgba(91, 220, 255, 0.42))
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
  -webkit-filter:
    drop-shadow(0 0 3px rgba(91, 220, 255, 1))
    drop-shadow(0 0 9px rgba(91, 220, 255, 0.76))
    drop-shadow(0 0 18px rgba(91, 220, 255, 0.42))
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
}

body.broadcast-board-mode .player-slot.selected .player-name:not(:empty)::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.42) !important;
}

body.broadcast-board-mode .player-slot.selected .slot-label,
body.broadcast-board-mode .player-slot.selected .player-number {
  text-shadow:
    0 0 3px rgba(91, 220, 255, 0.98),
    0 0 8px rgba(91, 220, 255, 0.76),
    0 0 16px rgba(91, 220, 255, 0.4) !important;
}

body.broadcast-board-mode .player-slot.selected .player-name:not(:empty) {
  text-shadow:
    0 0 3px rgba(91, 220, 255, 0.74),
    0 1px 1px rgba(0, 0, 0, 0.72) !important;
}

/* Player Slot Bundle phase 2:
   when the shared bundle contract is active, old selected/flash card frames
   must not draw a second outline outside the bundle box. */
.player-slot.player-slot-bundle.selected,
.player-slot.player-slot-bundle.goal-flash,
.player-slot.player-slot-bundle.flash-goal,
.player-slot.player-slot-bundle.flash-yellow,
.player-slot.player-slot-bundle.flash-red,
.player-slot.player-slot-bundle.flash-sub,
.player-slot.player-slot-bundle.flash-assist,
.player-slot.player-slot-bundle.flash-swap,
.player-slot.player-slot-bundle.flash-event {
  outline: 0 !important;
  box-shadow: none !important;
}

.tactics-player-chip.player-slot-bundle.is-dragging {
  filter: drop-shadow(0 0 calc(5px * var(--fs-slot-bundle-scale)) var(--fs-slot-state-glow)) !important;
}

/* Final mobile team button color lock: old logo-card rules must not repaint team buttons white. */
@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-title {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
    box-sizing: border-box !important;
    background:
      linear-gradient(180deg, rgba(28, 38, 52, 0.98), rgba(9, 14, 22, 0.98)) !important;
    border: 1px solid color-mix(in srgb, var(--broadcast-team-accent, var(--team-accent-border, #48d6c9)) 52%, rgba(255, 255, 255, 0.24)) !important;
    border-radius: 8px !important;
    box-shadow:
      0 5px 12px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button::after,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo::after {
    content: attr(data-short-team-label) !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    color: #f7f9fc !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button > .broadcast-rail-logo-text,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo > .broadcast-rail-logo-text {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* Matchup label lock: keep Vs on the board center line, away from legacy field-label overrides. */
body.broadcast-board-mode .field-wrapper > .field-label {
  display: none !important;
}

body.broadcast-board-mode .field-matchup-label {
  top: clamp(8px, 1.2vw, 14px) !important;
  width: min(760px, calc(100% - clamp(24px, 4vw, 56px))) !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(30px, auto) auto minmax(0, 1fr) !important;
}

body.broadcast-board-mode .field-matchup-name {
  max-width: 100% !important;
  order: 0 !important;
}

body.broadcast-board-mode .field-matchup-label #fieldLabelA,
body.broadcast-board-mode .field-matchup-label #fieldLabelB {
  max-width: 100% !important;
  order: 0 !important;
}

body.broadcast-board-mode .field-matchup-logo-ring {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: clamp(22px, 2.2vw, 30px) !important;
  height: clamp(22px, 2.2vw, 30px) !important;
  min-width: clamp(22px, 2.2vw, 30px) !important;
  min-height: clamp(22px, 2.2vw, 30px) !important;
  border-color: rgba(255, 255, 255, 0.68) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  order: 0 !important;
}

body.broadcast-board-mode .field-matchup-name-home {
  grid-column: 1 !important;
}

body.broadcast-board-mode .field-matchup-logo-home {
  grid-column: 2 !important;
}

body.broadcast-board-mode .field-matchup-vs {
  grid-column: 3 !important;
  order: 0 !important;
}

body.broadcast-board-mode .field-matchup-logo-away {
  grid-column: 4 !important;
}

body.broadcast-board-mode .field-matchup-name-away {
  grid-column: 5 !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label {
    top: 5px !important;
    width: min(460px, calc(100% - 14px)) !important;
    column-gap: 5px !important;
    grid-template-columns: minmax(0, 1fr) auto 28px auto minmax(0, 1fr) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-name {
    font-size: clamp(9px, 2.8vw, 12px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-vs {
    min-width: 28px !important;
    padding: 3px 4px !important;
    font-size: 10px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-logo-ring {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* Mobile landscape team sheet: use the same mobile-team-box container as portrait. */
@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1310 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: var(--broadcast-landscape-chrome-clearance, max(44px, env(safe-area-inset-top) + 40px)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    left: max(0px, env(safe-area-inset-left)) !important;
    right: auto !important;
    width: var(--broadcast-side-rail, 66px) !important;
    min-width: var(--broadcast-side-rail, 66px) !important;
    max-width: var(--broadcast-side-rail, 66px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 5px 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid color-mix(in srgb, var(--team-accent-border, #6bc6ff) 62%, rgba(255, 255, 255, 0.22)) !important;
    border-radius: 0 10px 10px 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
      color-mix(in srgb, var(--team-accent-bg, #1b2936) 18%, rgba(10, 12, 16, 0.96)) !important;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open[data-mobile-sheet-side='right'] {
    left: auto !important;
    right: max(0px, env(safe-area-inset-right)) !important;
    border-radius: 10px 0 0 10px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 30px !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 3px !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 1px solid rgba(0, 0, 0, 0.32) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, rgba(72, 78, 87, 0.78), rgba(28, 31, 36, 0.92)),
      color-mix(in srgb, var(--team-accent-bg, #2d343c) 28%, #161a20) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-logo-button {
    display: grid !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 2px !important;
    gap: 0 !important;
    border-radius: 999px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-logo-button::after {
    content: none !important;
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-logo-button > .broadcast-rail-logo-text {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    grid-row: 1 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-label,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-menu {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #f4f6f8 !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.68) !important;
    text-shadow:
      -1px 0 rgba(0, 0, 0, 0.84),
      1px 0 rgba(0, 0, 0, 0.84),
      0 1px rgba(0, 0, 0, 0.84),
      0 -1px rgba(0, 0, 0, 0.84) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-menu {
    place-items: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 999px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: initial !important;
    grid-auto-rows: auto !important;
    justify-content: flex-start !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: rgba(5, 7, 10, 0.24) !important;
    border-radius: 8px !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players::-webkit-scrollbar {
    width: 4px !important;
    display: block !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box.is-broadcast-rail-open {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Opened mobile team sheets use text-only headers and keep roster touch scrolling native. */
@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title {
    touch-action: pan-y !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-logo-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-label {
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players .player-slot,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players .player-box,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players img {
    touch-action: pan-y !important;
  }
}

/* Final mobile broadcast chrome: keep the team rail/action drawer consistent across orientations. */
@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn:not(.hidden) {
    left: auto !important;
    right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
    transform: none !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --broadcast-landscape-chrome-clearance: max(4px, env(safe-area-inset-top)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .broadcast-mobile-back,
  body.broadcast-board-mode:not(.replay-hud-open) .broadcast-mobile-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column {
    top: max(0px, env(safe-area-inset-top)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    padding-top: 4px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn:not(.hidden) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: max(5px, env(safe-area-inset-top)) !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    place-items: center !important;
    z-index: 1328 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 22000 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent {
    position: fixed !important;
    top: calc(max(5px, env(safe-area-inset-top)) + 32px) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    width: min(360px, calc(100vw - 18px)) !important;
    max-height: min(72dvh, calc(100dvh - 42px)) !important;
    transform: translateY(-108%) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup.open #mobileControlContent {
    transform: translateY(0) !important;
  }

}

/* Absolute EOF mobile drawer navy theme: keep the hamburger menu and section panels on the broadcast concept. */
@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions {
    background:
      linear-gradient(180deg, rgba(22, 34, 52, 0.98), rgba(7, 13, 24, 0.98)) !important;
    border-color: rgba(137, 184, 235, 0.22) !important;
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions button,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn:not(.hidden),
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    color: #f4f8ff !important;
    background:
      linear-gradient(180deg, rgba(31, 49, 73, 0.98), rgba(10, 18, 31, 0.98)) !important;
    border: 1px solid rgba(142, 190, 242, 0.28) !important;
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions button.active,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions button[aria-pressed='true'],
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(46, 78, 116, 0.98), rgba(15, 30, 51, 0.98)) !important;
    border-color: rgba(174, 215, 255, 0.4) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup .drawer-backdrop {
    background: rgba(3, 8, 18, 0.54) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent {
    color: #f4f8ff !important;
    background:
      linear-gradient(180deg, rgba(19, 31, 48, 0.99), rgba(6, 12, 23, 0.99)) !important;
    border: 1px solid rgba(142, 190, 242, 0.24) !important;
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .drawer-header {
    color: #f6f9ff !important;
    background:
      linear-gradient(180deg, rgba(30, 46, 69, 0.98), rgba(11, 20, 35, 0.98)) !important;
    border-color: rgba(142, 190, 242, 0.18) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .drawer-body {
    background: transparent !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-setting-block,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .drawer-actions,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-tactic-share-panel {
    color: #f3f7ff !important;
    background:
      linear-gradient(180deg, rgba(13, 24, 39, 0.92), rgba(7, 14, 27, 0.92)) !important;
    border: 1px solid rgba(132, 180, 232, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent label,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-choice-text,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .drawer-title {
    color: #f6f9ff !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent select,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent input[type='text'],
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent input[type='number'] {
    color: #f8fbff !important;
    background:
      linear-gradient(180deg, rgba(9, 18, 32, 0.98), rgba(5, 11, 22, 0.98)) !important;
    border: 1px solid rgba(135, 184, 238, 0.26) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent select option,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent select optgroup {
    color: #f8fbff !important;
    background: #081221 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent button,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-file-btn,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .drawer-guide-btn,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-choice-btn {
    color: #f7fbff !important;
    background:
      linear-gradient(180deg, rgba(31, 49, 73, 0.98), rgba(10, 18, 31, 0.98)) !important;
    border: 1px solid rgba(135, 184, 238, 0.26) !important;
    box-shadow:
      0 7px 15px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent button.active,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-choice-btn.active,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-choice-btn[aria-pressed='true'] {
    color: #ffffff !important;
    background:
      linear-gradient(180deg, rgba(50, 85, 126, 0.98), rgba(16, 33, 57, 0.98)) !important;
    border-color: rgba(184, 220, 255, 0.42) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-choice-badge,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-choice-preview {
    color: #f8fbff !important;
    background:
      linear-gradient(180deg, rgba(8, 17, 31, 0.96), rgba(4, 10, 20, 0.96)) !important;
    border-color: rgba(135, 184, 238, 0.22) !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup .drawer-backdrop {
    background: transparent !important;
  }
}

/* Landscape only: place the drawer button inside the field corner, clear of the right team rail. */
@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn:not(.hidden),
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    right: calc(var(--broadcast-side-rail, 74px) + max(8px, env(safe-area-inset-right))) !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 0 0 14px 14px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-indent: -999px !important;
    z-index: 23010 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn::before {
    content: '☰' !important;
    color: #f4f8ff !important;
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    transform: none !important;
    transform-origin: center !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-tactic-share-panel {
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup:not(.hidden),
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup.open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup.open #mobileControlContent {
    right: calc(var(--broadcast-side-rail, 74px) + max(8px, env(safe-area-inset-right))) !important;
    width: min(360px, calc(100vw - (var(--broadcast-side-rail, 74px) * 2) - 18px)) !important;
    min-height: 120px !important;
    transform: translateY(0) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column::-webkit-scrollbar,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

/* Absolute EOF canonical player slot contract:
   The desktop/PC broadcast slot is the source coordinate system. Other surfaces
   only change the outer slot size and scale the same internal percentages. */
@media (max-width: 900px) {
  body.broadcast-board-mode {
    --broadcast-slot-canonical-player-left: 41%;
    --broadcast-slot-canonical-player-width: 76%;
    --broadcast-slot-canonical-player-height: 72%;
    --broadcast-slot-canonical-card-left: 50%;
    --broadcast-slot-canonical-card-bottom: 0px;
    --broadcast-slot-canonical-card-width: 98%;
    --broadcast-slot-canonical-card-height: 100%;
    --broadcast-slot-canonical-name-left: calc(68% - 4px);
    --broadcast-slot-canonical-cutout-fit: cover;
    --broadcast-slot-canonical-cutout-position: center 18%;
    --broadcast-slot-canonical-cutout-clip: inset(0 0 calc(12% + 4px) 0);
    --broadcast-slot-canonical-card-fit: contain;
    --broadcast-slot-canonical-card-position: center bottom;
    --mobile-broadcast-slot-w: clamp(44px, 10.6vw, 68px);
    --mobile-broadcast-slot-h: clamp(58px, 14.1vw, 90px);
    --mobile-broadcast-player-bottom: clamp(6px, 1.38vw, 9px);
    --mobile-broadcast-name-bottom: clamp(11px, 2.65vw, 17px);
    --mobile-broadcast-mark-top: clamp(16px, 3.78vw, 24px);
    --mobile-broadcast-label-font: clamp(14px, 3.45vw, 25px);
    --mobile-broadcast-name-h: clamp(11px, 1.9vw, 15px);
    --mobile-broadcast-name-font: clamp(7.2px, 1.36vw, 10px);
    --mobile-roster-slot-w: 48px;
    --mobile-roster-slot-h: 70px;
    --mobile-roster-player-bottom: 7px;
    --mobile-roster-name-bottom: 8px;
    --mobile-roster-mark-top: 11px;
  }

  body.broadcast-board-mode #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    --broadcast-roster-slot-h: var(--mobile-roster-slot-h);
    --nonstarter-slot-h: var(--mobile-roster-slot-h);
    grid-auto-rows: var(--mobile-roster-slot-h) !important;
    column-gap: 6px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box.is-broadcast-rail-open {
    --broadcast-roster-slot-h: var(--mobile-roster-slot-h);
    --nonstarter-slot-h: var(--mobile-roster-slot-h);
    grid-auto-rows: var(--mobile-roster-slot-h) !important;
    row-gap: 8px !important;
    align-items: start !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode .field .tactics-player-chip .player-box,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-box,
  body.broadcast-board-mode .field-stage .tactics-player-chip {
    --broadcast-player-left: var(--broadcast-slot-canonical-player-left) !important;
    --broadcast-player-bottom: var(--mobile-broadcast-player-bottom) !important;
    --broadcast-player-width: var(--broadcast-slot-canonical-player-width) !important;
    --broadcast-player-height: var(--broadcast-slot-canonical-player-height) !important;
    --broadcast-name-bottom: var(--mobile-broadcast-name-bottom) !important;
    --broadcast-mark-top: var(--mobile-broadcast-mark-top) !important;
    --broadcast-slot-translate-x: -50% !important;
    --broadcast-slot-translate-y: -50% !important;
    width: var(--mobile-broadcast-slot-w) !important;
    min-width: var(--mobile-broadcast-slot-w) !important;
    max-width: var(--mobile-broadcast-slot-w) !important;
    height: var(--mobile-broadcast-slot-h) !important;
    min-height: var(--mobile-broadcast-slot-h) !important;
    max-height: var(--mobile-broadcast-slot-h) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode .field .tactics-player-chip .player-box,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-box,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 8px !important;
    clip-path: none !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot.has-player .player-box {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .field .tactics-player-chip .player-img,
  body.broadcast-board-mode .field .tactics-player-chip img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip img,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-img,
  body.broadcast-board-mode .field-stage .tactics-player-chip img {
    display: block !important;
    position: absolute !important;
    left: var(--broadcast-player-left) !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--broadcast-player-width) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-player-height) !important;
    transform: translateX(-50%) !important;
    object-fit: var(--broadcast-slot-canonical-cutout-fit) !important;
    object-position: var(--broadcast-slot-canonical-cutout-position) !important;
    clip-path: var(--broadcast-slot-canonical-cutout-clip) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    filter:
      drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
      drop-shadow(0 5px 7px rgba(0, 0, 0, 0.5)) !important;
    z-index: 3 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field-stage .tactics-player-chip .slot-label {
    display: block !important;
    position: absolute !important;
    top: var(--broadcast-mark-top) !important;
    left: var(--broadcast-player-left) !important;
    min-width: 2.4ch !important;
    transform: translateX(-50%) !important;
    color: color-mix(in srgb, var(--broadcast-line) 88%, rgba(255, 255, 255, 0.18)) !important;
    -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.24) !important;
    paint-order: stroke fill !important;
    font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
    font-size: var(--mobile-broadcast-label-font) !important;
    font-weight: 500 !important;
    letter-spacing: -0.065em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    opacity: 0.72 !important;
    z-index: 1 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-number {
    display: block !important;
    position: absolute !important;
    top: var(--broadcast-mark-top) !important;
    left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.72em))) !important;
    right: auto !important;
    color: color-mix(in srgb, var(--broadcast-chip) 16%, rgba(255, 255, 255, 0.08)) !important;
    -webkit-text-stroke: 0.8px color-mix(in srgb, var(--broadcast-chip) 18%, rgba(255, 255, 255, 0.96)) !important;
    paint-order: stroke fill !important;
    font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
    font-size: clamp(15px, 3.6vw, 27px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.085em !important;
    line-height: 1 !important;
    opacity: 0.96 !important;
    text-shadow: none !important;
    transform: none !important;
    z-index: 1 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty) {
    display: inline-flex !important;
    position: absolute !important;
    left: var(--broadcast-slot-canonical-name-left) !important;
    right: auto !important;
    bottom: var(--broadcast-name-bottom) !important;
    --broadcast-name-width: clamp(34px, calc((var(--broadcast-name-ch, 4) * 0.72em) + 16px), 92px) !important;
    width: var(--broadcast-name-width) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-name-width) !important;
    height: var(--mobile-broadcast-name-h) !important;
    min-height: var(--mobile-broadcast-name-h) !important;
    max-height: var(--mobile-broadcast-name-h) !important;
    padding: 0 6px 0 4px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 1px !important;
    clip-path: none !important;
    background: transparent !important;
    color: #fff !important;
    font-family: var(--fs-font-sans, 'FS Pretendard', sans-serif) !important;
    font-size: var(--mobile-broadcast-name-font) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: var(--mobile-broadcast-name-h) !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.56) !important;
    box-shadow: none !important;
    isolation: isolate !important;
    z-index: 2 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty)::before,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty)::before,
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty)::before,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty)::before,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
    background: color-mix(in srgb, var(--broadcast-chip) 82%, #111) !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-cutout.has-player .player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-cutout.has-player img.player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-cutout.has-player .player-box > img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.broadcast-player-cutout.has-player .player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.broadcast-player-cutout.has-player img.player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.broadcast-player-cutout.has-player .player-box > img,
  body.broadcast-board-mode .field .tactics-player-chip.broadcast-player-cutout .player-img,
  body.broadcast-board-mode .field .tactics-player-chip.broadcast-player-cutout img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip.broadcast-player-cutout .player-img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip.broadcast-player-cutout img,
  body.broadcast-board-mode .field-stage .tactics-player-chip.broadcast-player-cutout .player-img,
  body.broadcast-board-mode .field-stage .tactics-player-chip.broadcast-player-cutout img {
    left: var(--broadcast-player-left) !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--broadcast-player-width) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-player-height) !important;
    object-fit: var(--broadcast-slot-canonical-cutout-fit) !important;
    object-position: var(--broadcast-slot-canonical-cutout-position) !important;
    clip-path: var(--broadcast-slot-canonical-cutout-clip) !important;
    transform: translateX(-50%) !important;
  }

  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .tactics-player-chip,
  body.broadcast-board-mode.fs-image-rules-gta .field .tactics-player-chip,
  body.broadcast-board-mode .field .tactics-player-chip.broadcast-player-card,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field-stage .tactics-player-chip,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field-stage .tactics-player-chip,
  body.broadcast-board-mode.fs-image-rules-gta .field-stage .tactics-player-chip,
  body.broadcast-board-mode .field-stage .tactics-player-chip.broadcast-player-card {
    --broadcast-player-left: var(--broadcast-slot-canonical-card-left) !important;
    --broadcast-player-bottom: var(--broadcast-slot-canonical-card-bottom) !important;
    --broadcast-player-width: var(--broadcast-slot-canonical-card-width) !important;
    --broadcast-player-height: var(--broadcast-slot-canonical-card-height) !important;
  }

  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode.fs-image-rules-gta .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player img.player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.broadcast-player-card.has-player .player-box > img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .tactics-player-chip .player-img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field .tactics-player-chip img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .tactics-player-chip .player-img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field .tactics-player-chip img,
  body.broadcast-board-mode.fs-image-rules-gta .field .tactics-player-chip .player-img,
  body.broadcast-board-mode.fs-image-rules-gta .field .tactics-player-chip img,
  body.broadcast-board-mode .field .tactics-player-chip.broadcast-player-card .player-img,
  body.broadcast-board-mode .field .tactics-player-chip.broadcast-player-card img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field-stage .tactics-player-chip .player-img,
  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field-stage .tactics-player-chip img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field-stage .tactics-player-chip .player-img,
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field-stage .tactics-player-chip img,
  body.broadcast-board-mode.fs-image-rules-gta .field-stage .tactics-player-chip .player-img,
  body.broadcast-board-mode.fs-image-rules-gta .field-stage .tactics-player-chip img,
  body.broadcast-board-mode .field-stage .tactics-player-chip.broadcast-player-card .player-img,
  body.broadcast-board-mode .field-stage .tactics-player-chip.broadcast-player-card img {
    left: var(--broadcast-player-left, 50%) !important;
    bottom: var(--broadcast-player-bottom, 0px) !important;
    width: var(--broadcast-player-width, 98%) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-player-width, 98%) !important;
    height: var(--broadcast-player-height, 100%) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-player-height, 100%) !important;
    object-fit: var(--broadcast-slot-canonical-card-fit) !important;
    object-position: var(--broadcast-slot-canonical-card-position) !important;
    clip-path: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateX(-50%) !important;
  }

}

/* Absolute EOF mobile drawer layers:
   first tap opens only the menu bar; panel content opens below it; the handle follows the lowest open layer. */
@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions {
    display: grid !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileQuickActions,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileQuickActions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  body.broadcast-board-mode:not(.drawer-open):not(.replay-hud-open) #mobileOptionsPopup,
  body.broadcast-board-mode:not(.drawer-open):not(.replay-hud-open) #mobileOptionsPopup.open {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsPopup,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsPopup.open {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn.hidden,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    top: var(--mobile-drawer-handle-top, var(--portrait-nav-h)) !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent {
    top: calc(var(--portrait-nav-h) + var(--portrait-green-menu-h)) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileQuickActions {
    top: max(5px, env(safe-area-inset-top)) !important;
    left: calc(var(--broadcast-side-rail, 74px) + 6px + env(safe-area-inset-left)) !important;
    right: calc(var(--broadcast-side-rail, 74px) + 6px + env(safe-area-inset-right)) !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px 5px !important;
    z-index: 23000 !important;
    transform: translateY(-42px) !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent {
    top: calc(max(5px, env(safe-area-inset-top)) + 32px) !important;
    right: calc(var(--broadcast-side-rail, 74px) + max(8px, env(safe-area-inset-right))) !important;
    width: min(360px, calc(100vw - (var(--broadcast-side-rail, 74px) * 2) - 18px)) !important;
    min-height: 120px !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode {
    --mobile-broadcast-slot-w: clamp(40px, 9.8vh, 62px);
    --mobile-broadcast-slot-h: clamp(53px, 13vh, 82px);
    --mobile-broadcast-player-bottom: clamp(5px, 1.28vh, 8px);
    --mobile-broadcast-name-bottom: clamp(10px, 2.44vh, 15px);
    --mobile-broadcast-mark-top: clamp(14px, 3.48vh, 22px);
    --mobile-broadcast-label-font: clamp(13px, 3.18vh, 22px);
    --mobile-broadcast-name-h: clamp(10px, 1.82vh, 14px);
    --mobile-broadcast-name-font: clamp(7px, 1.26vh, 9px);
    --mobile-roster-slot-w: 48px;
    --mobile-roster-slot-h: 68px;
    --mobile-roster-player-bottom: 7px;
    --mobile-roster-name-bottom: 8px;
    --mobile-roster-mark-top: 11px;
  }
}

/* Absolute EOF mobile drawer content balance:
   panels are centered in landscape and every panel scrolls inside its own body without hiding controls. */
@media (max-width: 900px) {
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .drawer-body {
    display: grid !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 8px !important;
    min-height: 0 !important;
    max-height: inherit !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 9px !important;
    scrollbar-width: none !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .drawer-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent [data-mobile-panel-content][hidden] {
    display: none !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-setting-block,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .drawer-actions {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent select,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent input[type='text'],
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent input[type='number'],
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent button,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-file-btn {
    min-height: 30px !important;
    height: 30px !important;
    line-height: 1.05 !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-choice-grid {
    gap: 5px !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-choice-btn {
    min-height: 30px !important;
    padding: 4px 6px !important;
    align-items: center !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-choice-preview,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-choice-badge {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-formation-grid,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-field-grid {
    max-height: 96px !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-formation-grid::-webkit-scrollbar,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-field-grid::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-formation-apply-actions,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .teamname-apply-row {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(34px, 46px)) !important;
    align-items: center !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn.hidden,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent {
    left: 50% !important;
    right: auto !important;
    width: min(390px, calc(100vw - (var(--broadcast-side-rail, 74px) * 2) - 18px)) !important;
    max-height: min(76dvh, calc(100dvh - max(5px, env(safe-area-inset-top)) - 68px)) !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .drawer-body {
    max-height: min(76dvh, calc(100dvh - max(5px, env(safe-area-inset-top)) - 68px)) !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-setting-block,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .drawer-actions {
    padding: 6px !important;
    gap: 5px !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent select,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent input[type='text'],
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent input[type='number'],
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent button,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-file-btn {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-formation-grid,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent .mobile-field-grid {
    max-height: 76px !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent {
    max-height: min(62dvh, calc(100dvh - var(--portrait-nav-h) - var(--portrait-green-menu-h) - var(--portrait-team-rail-h) - 36px)) !important;
  }
}

/* Absolute EOF drawer alignment lock: beat older open-popup rules with the same ID specificity. */
@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsPopup.open #mobileControlContent {
    left: 50% !important;
    right: auto !important;
    width: min(390px, calc(100vw - (var(--broadcast-side-rail, 74px) * 2) - 18px)) !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn.hidden,
  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-content,
  body.broadcast-board-mode.replay-hud-open .main-content {
    position: fixed !important;
    inset: auto !important;
    top: var(--broadcast-visual-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--broadcast-visual-left, 0px) !important;
    width: var(--broadcast-visual-vw, 100vw) !important;
    height: var(--broadcast-visual-vh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-visual-vh, 100dvh) !important;
    padding-top: var(--broadcast-fit-edge-gap, 4px) !important;
    padding-bottom: max(var(--broadcast-fit-edge-gap, 4px), env(safe-area-inset-bottom)) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .center,
  body.broadcast-board-mode.replay-hud-open .center {
    align-self: center !important;
    margin-top: 0 !important;
    height: min(
      var(--broadcast-fit-field-h, calc(var(--broadcast-visual-vh, 100dvh) - var(--broadcast-fit-edge-gap-total, 8px))),
      calc(var(--broadcast-visual-vh, 100dvh) - var(--broadcast-fit-edge-gap-total, 8px))
    ) !important;
    max-height: calc(var(--broadcast-visual-vh, 100dvh) - var(--broadcast-fit-edge-gap-total, 8px)) !important;
  }
}

/* Absolute EOF drawer click-layer lock: the menu bar must stay above popup backdrops while switching panels. */
@media (max-width: 900px) {
  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileQuickActions,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileQuickActions {
    z-index: 23020 !important;
  }

  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileOptionsBtn.hidden,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    z-index: 23030 !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsPopup {
    z-index: 22000 !important;
  }
}

/* Absolute EOF field-slot ratio lock:
   Mobile field slots inherit the measured PC broadcast slot proportions. */
@media (max-width: 900px) {
  body.broadcast-board-mode {
    --broadcast-slot-canonical-aspect: 1.3366;
    --mobile-broadcast-slot-h: calc(var(--mobile-broadcast-slot-w) * var(--broadcast-slot-canonical-aspect));
    --mobile-broadcast-player-bottom: calc(var(--mobile-broadcast-slot-h) * 0.12);
    --mobile-broadcast-name-bottom: calc(var(--mobile-broadcast-slot-h) * 0.361);
    --mobile-broadcast-mark-top: calc(var(--mobile-broadcast-slot-h) * 0.186);
    --mobile-broadcast-label-font: calc(var(--mobile-broadcast-slot-h) * 0.378);
    --mobile-broadcast-name-h: calc(var(--mobile-broadcast-slot-h) * 0.219);
    --mobile-broadcast-name-font: calc(var(--mobile-broadcast-slot-h) * 0.103);
  }

  body.broadcast-board-mode .field .player-slot.field-slot,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode .field .tactics-player-chip .player-box,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-box,
  body.broadcast-board-mode .field-stage .tactics-player-chip {
    --broadcast-player-left: 41% !important;
    --broadcast-player-bottom: var(--mobile-broadcast-player-bottom) !important;
    --broadcast-player-width: 76% !important;
    --broadcast-player-height: 72% !important;
    --broadcast-name-bottom: var(--mobile-broadcast-name-bottom) !important;
    --broadcast-mark-top: var(--mobile-broadcast-mark-top) !important;
    --broadcast-name-width: 75.9% !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player img.player-img,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box > img,
  body.broadcast-board-mode .field .tactics-player-chip .player-img,
  body.broadcast-board-mode .field .tactics-player-chip img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-img,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip img,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-img,
  body.broadcast-board-mode .field-stage .tactics-player-chip img {
    left: 41% !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: 76% !important;
    min-width: 0 !important;
    max-width: 76% !important;
    height: 72% !important;
    min-height: 0 !important;
    max-height: 72% !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field-stage .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    font-size: var(--mobile-broadcast-label-font) !important;
    line-height: 1 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field-stage .tactics-player-chip .slot-label {
    left: 41% !important;
    color: color-mix(in srgb, var(--broadcast-chip) 78%, rgba(255, 255, 255, 0.12)) !important;
    opacity: 0.74 !important;
    -webkit-text-stroke: 0 !important;
    letter-spacing: -0.075em !important;
    text-shadow:
      0 0 5px color-mix(in srgb, var(--broadcast-chip) 36%, transparent),
      0 1px 2px rgba(0, 0, 0, 0.48) !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-number {
    left: calc(41% + 0.68em) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.96) !important;
    letter-spacing: -0.075em !important;
    text-shadow: none !important;
    transform: scaleY(1.12) !important;
    transform-origin: top center !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty) {
    --broadcast-name-width: 75.9% !important;
    left: 62.1% !important;
    bottom: var(--broadcast-name-bottom) !important;
    width: var(--broadcast-name-width) !important;
    min-width: var(--broadcast-name-width) !important;
    max-width: var(--broadcast-name-width) !important;
    inline-size: var(--broadcast-name-width) !important;
    min-inline-size: var(--broadcast-name-width) !important;
    max-inline-size: var(--broadcast-name-width) !important;
    box-sizing: border-box !important;
    height: var(--mobile-broadcast-name-h) !important;
    min-height: var(--mobile-broadcast-name-h) !important;
    max-height: var(--mobile-broadcast-name-h) !important;
    padding: 0 calc(var(--mobile-broadcast-slot-w) * 0.117) !important;
    color: #fff !important;
    justify-content: center !important;
    overflow: visible !important;
    font-size: var(--mobile-broadcast-name-font) !important;
    font-weight: 800 !important;
    line-height: var(--mobile-broadcast-name-h) !important;
    text-align: center !important;
    text-overflow: clip !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75) !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty)::before,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty)::before,
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty)::before,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty)::before,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 1px !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip) 72%, #0d2c5c)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.42) !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: -1 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty)::after,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty)::after,
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty)::after,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty)::after,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty)::after {
    content: "" !important;
    position: absolute !important;
    left: calc(var(--mobile-broadcast-slot-w) * 0.058) !important;
    right: 17% !important;
    bottom: calc(var(--mobile-broadcast-slot-h) * 0.022) !important;
    height: max(1px, calc(var(--mobile-broadcast-slot-h) * 0.011)) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
    transform: none !important;
    z-index: 0 !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode {
    --mobile-broadcast-slot-h: calc(var(--mobile-broadcast-slot-w) * var(--broadcast-slot-canonical-aspect));
    --mobile-broadcast-player-bottom: calc(var(--mobile-broadcast-slot-h) * 0.12);
    --mobile-broadcast-name-bottom: calc(var(--mobile-broadcast-slot-h) * 0.361);
    --mobile-broadcast-mark-top: calc(var(--mobile-broadcast-slot-h) * 0.186);
    --mobile-broadcast-label-font: calc(var(--mobile-broadcast-slot-h) * 0.378);
    --mobile-broadcast-name-h: calc(var(--mobile-broadcast-slot-h) * 0.219);
    --mobile-broadcast-name-font: calc(var(--mobile-broadcast-slot-h) * 0.103);
  }
}

/* Absolute EOF landscape drawer canonical lock:
   In landscape, every menu panel opens from the viewport center and tactics keeps its actions visible. */
@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsPopup.open #mobileControlContent,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsPopup.open #mobileControlContent {
    left: 50vw !important;
    right: auto !important;
    width: min(390px, calc(100vw - (var(--broadcast-side-rail, 74px) * 2) - 18px)) !important;
    max-width: calc(100vw - (var(--broadcast-side-rail, 74px) * 2) - 18px) !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-tactic-share-panel,
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent .mobile-tactic-share-panel[data-mobile-panel-content='tactics']:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Absolute EOF portrait team-rail clip lock:
   keep the collapsed bottom team cards fully inside the rail, with visible top borders and labels. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --portrait-team-rail-h: calc(104px + env(safe-area-inset-bottom)) !important;
    --portrait-field-bottom: calc(var(--portrait-team-rail-h) + 8px) !important;
    --normal-mobile-team-rail-h: var(--portrait-team-rail-h) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    height: var(--portrait-team-rail-h) !important;
    min-height: var(--portrait-team-rail-h) !important;
    max-height: var(--portrait-team-rail-h) !important;
    padding-top: 22px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-title {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    margin-top: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-logo-button {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* Absolute EOF field-slot unit scale lock:
   the field player image, name plate, position label, and number all scale from
   one PC broadcast slot unit instead of mixing viewport clamps with label offsets. */
@media (max-width: 900px) {
  body.broadcast-board-mode {
    --broadcast-slot-canonical-w: 68.47px;
    --broadcast-slot-canonical-aspect: 1.3366;
    --mobile-broadcast-slot-w: calc(var(--broadcast-slot-canonical-w) * var(--fs-field-slot-bundle-scale, 0.62));
    --mobile-broadcast-slot-h: calc(var(--mobile-broadcast-slot-w) * var(--broadcast-slot-canonical-aspect));
    --mobile-broadcast-player-bottom: calc(var(--mobile-broadcast-slot-h) * 0.12);
    --mobile-broadcast-name-bottom: calc(var(--mobile-broadcast-slot-h) * 0.361);
    --mobile-broadcast-mark-top: calc(var(--mobile-broadcast-slot-h) * 0.186);
    --mobile-broadcast-label-font: calc(var(--mobile-broadcast-slot-h) * 0.378);
    --mobile-broadcast-name-h: calc(var(--mobile-broadcast-slot-h) * 0.219);
    --mobile-broadcast-name-font: calc(var(--mobile-broadcast-slot-h) * 0.103);
  }

  body.broadcast-board-mode .field .player-slot.field-slot,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-box,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode .field .tactics-player-chip .player-box,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-box,
  body.broadcast-board-mode .field-stage .tactics-player-chip {
    --broadcast-player-bottom: var(--mobile-broadcast-player-bottom) !important;
    --broadcast-name-bottom: var(--mobile-broadcast-name-bottom) !important;
    --broadcast-mark-top: var(--mobile-broadcast-mark-top) !important;
    width: var(--mobile-broadcast-slot-w) !important;
    min-width: var(--mobile-broadcast-slot-w) !important;
    max-width: var(--mobile-broadcast-slot-w) !important;
    height: var(--mobile-broadcast-slot-h) !important;
    min-height: var(--mobile-broadcast-slot-h) !important;
    max-height: var(--mobile-broadcast-slot-h) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field-stage .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
    font-size: var(--mobile-broadcast-label-font) !important;
    line-height: 1 !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-number {
    transform: none !important;
    transform-origin: center center !important;
  }
}

/* Absolute EOF portrait top/rail layout lock:
   portrait uses the navbar band for matchup/replay HUD and divides collapsed bottom team boxes evenly. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) .center {
    position: relative !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-nav ul {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 7px) !important;
    left: 50% !important;
    width: min(390px, calc(100vw - 18px)) !important;
    max-width: min(390px, calc(100vw - 18px)) !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    transform-origin: center center !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(24px, auto) auto minmax(0, 1fr) !important;
    column-gap: 5px !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: rgba(4, 10, 18, 0.24) !important;
    z-index: 1301 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-name {
    font-size: clamp(11px, 3.3vw, 14px) !important;
    line-height: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-logo-ring {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-vs {
    min-width: 24px !important;
    padding: 2px 5px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-matchup-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 5px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(390px, calc(100vw - 16px)) !important;
    min-width: 0 !important;
    max-width: min(390px, calc(100vw - 16px)) !important;
    min-height: 34px !important;
    padding: 3px 8px 6px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    transform: translateX(-50%) !important;
    transform-origin: center center !important;
    pointer-events: auto !important;
    z-index: 1302 !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 9px !important;
    right: 9px !important;
    bottom: 2px !important;
    height: 3px !important;
  }
}

/* Final mobile landscape team-rail top lock:
   both side team rails and replay team rails must start from the same top edge. */
@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode {
    --landscape-team-rail-top: env(safe-area-inset-top) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_A,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-TEAM_B {
    top: var(--landscape-team-rail-top) !important;
    bottom: env(safe-area-inset-bottom) !important;
    margin-top: 0 !important;
    transform: none !important;
    align-self: flex-start !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='home'],
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='away'] {
    top: calc(36px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* Mobile field edge lock: the stadium surface itself should be square-edged on
   phone entry; slot/card rounding is handled separately. */
@media (max-width: 900px) {
  html body.broadcast-board-mode #field-1.field,
  html body.broadcast-board-mode #field-2.field,
  html body.broadcast-board-mode:not(.replay-hud-open) #field-1.field,
  html body.broadcast-board-mode:not(.replay-hud-open) #field-2.field,
  body.broadcast-board-mode .field,
  body.broadcast-board-mode .field-image,
  body.broadcast-board-mode .field-image img,
  body.broadcast-board-mode .grass-layer,
  body.broadcast-board-mode .field-lines {
    border-radius: 0 !important;
  }
}

/* Final portrait chrome override: keep nav links gone, top matchup compact,
   and keep the drawer handle/menu attached to the top edge. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) {
    --portrait-drawer-trigger-h: 0px !important;
    --portrait-field-gap: 6px !important;
    --portrait-field-top: calc(var(--portrait-nav-h) + var(--portrait-field-gap)) !important;
    --normal-mobile-field-h: calc(100dvh - var(--portrait-field-top) - var(--portrait-field-bottom)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-nav,
  body.broadcast-board-mode.replay-hud-open .main-nav {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .main-nav ul,
  body.broadcast-board-mode.replay-hud-open .main-nav ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label {
    top: calc(env(safe-area-inset-top) + 7px) !important;
    width: min(296px, calc(100vw - 94px)) !important;
    max-width: min(296px, calc(100vw - 94px)) !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    background:
      linear-gradient(180deg, rgba(18, 28, 42, 0.92), rgba(5, 11, 20, 0.9)) !important;
    border: 1px solid rgba(160, 205, 255, 0.24) !important;
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 23020 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-name,
  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-vs {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.82) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn:not(.hidden),
  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn.hidden {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 7px) !important;
    right: max(9px, calc(env(safe-area-inset-right) + 7px)) !important;
    left: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    border-radius: 0 0 12px 12px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: -999px !important;
    transform: none !important;
    z-index: 23010 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #mobileOptionsBtn::before {
    content: '☰' !important;
    color: #f4f8ff !important;
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
  }

  body.broadcast-board-mode.mobile-menu-open:not(.replay-hud-open) #mobileQuickActions,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileQuickActions {
    top: calc(env(safe-area-inset-top) + 39px) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
  }

  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileControlContent,
  body.broadcast-board-mode.drawer-open:not(.replay-hud-open) #mobileOptionsPopup.open #mobileControlContent {
    top: calc(env(safe-area-inset-top) + 76px) !important;
    max-height: min(58dvh, calc(100dvh - var(--portrait-team-rail-h) - 86px)) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    top: calc(env(safe-area-inset-top) + 7px) !important;
    width: min(390px, calc(100vw - 16px)) !important;
    max-width: min(390px, calc(100vw - 16px)) !important;
  }
}

/* Final requested polish: file reset label. */
@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #mobileControlContent [data-mobile-panel-content='file'] #mobileResetBtn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile {
    gap: var(--mobile-team-gap, 8px) !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile::-webkit-scrollbar {
    display: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='1'],
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='2'],
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='3'],
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='4'],
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='5'] {
    justify-content: center !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='6'],
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='7'],
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='8'] {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='2'] .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='3'] .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='4'] .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='5'] .mobile-team-box:not(.is-mobile-sheet-open) {
    flex: 0 0 var(--mobile-team-box-w, calc((100% - 8px) / 2)) !important;
    width: var(--mobile-team-box-w, calc((100% - 8px) / 2)) !important;
    min-width: var(--mobile-team-box-w, calc((100% - 8px) / 2)) !important;
    max-width: var(--mobile-team-box-w, calc((100% - 8px) / 2)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='6'] .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='7'] .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile[data-team-count='8'] .mobile-team-box:not(.is-mobile-sheet-open) {
    flex: 0 0 var(--mobile-team-box-w, 54px) !important;
    width: var(--mobile-team-box-w, 54px) !important;
    min-width: var(--mobile-team-box-w, 54px) !important;
    max-width: var(--mobile-team-box-w, 64px) !important;
    scroll-snap-align: start !important;
  }
}

/* Absolute EOF mobile field edge lock: later portrait/landscape broadcast rules
   must not reintroduce rounded stadium corners on phones. */
@media (max-width: 900px) {
  html body.broadcast-board-mode #field-1.field,
  html body.broadcast-board-mode #field-2.field,
  html body.broadcast-board-mode:not(.replay-hud-open) #field-1.field,
  html body.broadcast-board-mode:not(.replay-hud-open) #field-2.field,
  body.broadcast-board-mode .field,
  body.broadcast-board-mode .field-image,
  body.broadcast-board-mode .field-image img,
  body.broadcast-board-mode .grass-layer,
  body.broadcast-board-mode .field-lines {
    border-radius: 0 !important;
  }
}

/* Mobile replay roster rails:
   use the compact mobile team boxes as replay rosters and remove the old SUB
   rails completely from mobile replay surfaces. */
@media (max-width: 900px) {
  body.broadcast-board-mode.replay-hud-open {
    --replay-team-rail-h: 58px;
    --replay-team-gap: 2px;
  }

  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container,
  body.broadcast-board-mode.replay-hud-open #sub-container-1,
  body.broadcast-board-mode.replay-hud-open #sub-container-2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail {
    display: contents !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team {
    display: flex !important;
    position: fixed !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--replay-team-rail-h) !important;
    min-height: var(--replay-team-rail-h) !important;
    max-height: var(--replay-team-rail-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 258 !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-title {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team > .team-logo-empty,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team::before,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open {
    --replay-team-rail-h: 58px;
    --replay-team-gap: 2px;
    --replay-portrait-field-w: min(calc(100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100dvh - (var(--replay-team-rail-h) * 2) - (var(--replay-team-gap) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.6476));
    --replay-portrait-field-h: min(calc(var(--replay-portrait-field-w) * 1.5441), calc(100dvh - (var(--replay-team-rail-h) * 2) - (var(--replay-team-gap) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  body.broadcast-board-mode.replay-hud-open .main-content {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: calc(var(--replay-team-rail-h) + var(--replay-team-gap) + env(safe-area-inset-bottom)) !important;
    justify-content: flex-end !important;
  }

  body.broadcast-board-mode.replay-hud-open .center {
    position: fixed !important;
    flex-direction: column !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(var(--replay-team-rail-h) + var(--replay-team-gap) + env(safe-area-inset-bottom)) !important;
    width: var(--replay-portrait-field-w) !important;
    height: var(--replay-portrait-field-h) !important;
    max-width: var(--replay-portrait-field-w) !important;
    max-height: var(--replay-portrait-field-h) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-1 {
    order: 1 !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 {
    order: 2 !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='home'] {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + var(--replay-team-rail-h) + var(--replay-team-gap) + var(--replay-portrait-field-h) + var(--replay-team-gap)) !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='away'] {
    top: auto !important;
    bottom: env(safe-area-inset-bottom) !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: calc(var(--replay-team-rail-h) - 10px) !important;
    min-height: calc(var(--replay-team-rail-h) - 10px) !important;
    max-height: calc(var(--replay-team-rail-h) - 10px) !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players::-webkit-scrollbar {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-sub-in,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-event-related,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-event-priority,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-lineup-sub {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 var(--broadcast-roster-slot-w, 42px) !important;
    width: var(--broadcast-roster-slot-w, 42px) !important;
    min-width: var(--broadcast-roster-slot-w, 42px) !important;
    max-width: var(--broadcast-roster-slot-w, 42px) !important;
    height: var(--broadcast-roster-slot-h, 54px) !important;
    min-height: var(--broadcast-roster-slot-h, 54px) !important;
    max-height: var(--broadcast-roster-slot-h, 54px) !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    background: rgba(18, 23, 29, 0.78) !important;
    overflow: hidden !important;
  }

}

body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-event-priority {
  box-shadow: none !important;
}

body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-filler {
  opacity: 1 !important;
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.replay-hud-open .broadcast-mobile-back,
  body.broadcast-board-mode.replay-hud-open .broadcast-mobile-menu,
  body.broadcast-board-mode.replay-hud-open #broadcastMobileBackBtn,
  body.broadcast-board-mode.replay-hud-open #broadcastMobileMenuBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team {
    top: calc(36px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='home'] {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='away'] {
    left: auto !important;
    right: max(8px, env(safe-area-inset-right)) !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players::-webkit-scrollbar {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-sub-in,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-event-related,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-event-priority,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .player-slot.has-player.is-replay-lineup-sub {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 var(--broadcast-roster-slot-h, 54px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--broadcast-roster-slot-h, 54px) !important;
    min-height: var(--broadcast-roster-slot-h, 54px) !important;
    max-height: var(--broadcast-roster-slot-h, 54px) !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    background: rgba(18, 23, 29, 0.78) !important;
    overflow: hidden !important;
  }

}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    top: calc(env(safe-area-inset-top) + 6px) !important;
    width: min(390px, calc(100vw - 16px)) !important;
    max-width: min(390px, calc(100vw - 16px)) !important;
    min-height: 36px !important;
    max-height: 52px !important;
    padding: 3px 8px 6px !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    min-height: 30px !important;
    max-height: 34px !important;
    align-items: center !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-score-slot {
    display: flex !important;
    min-width: 0 !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 9px !important;
    right: 9px !important;
    top: auto !important;
    bottom: 2px !important;
    height: 3px !important;
  }
}

/* Mobile replay HUD slim pass: keep controls visible while freeing the field top. */
@media (max-width: 900px) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    top: calc(env(safe-area-inset-top) + 2px) !important;
    width: min(360px, calc(100vw - 12px)) !important;
    max-width: min(360px, calc(100vw - 12px)) !important;
    min-height: 28px !important;
    max-height: 36px !important;
    padding: 1px 6px 4px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    min-height: 24px !important;
    max-height: 28px !important;
    gap: 4px !important;
    align-items: center !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-left,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-actions {
    gap: 3px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-live-dot {
    width: 5px !important;
    height: 5px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-count {
    min-width: 24px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 16px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-score-slot {
    min-height: 22px !important;
    max-height: 24px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeA,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeB {
    font-size: 13px !important;
    min-width: 16px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeCenter {
    gap: 3px !important;
    transform: scale(0.88) !important;
    transform-origin: center center !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-info {
    display: none !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 7px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn::before {
    font-size: 12px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 7px !important;
    right: 7px !important;
    bottom: 1px !important;
    height: 2px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    width: min(330px, calc(100vw - 92px)) !important;
    max-width: min(330px, calc(100vw - 92px)) !important;
    min-height: 26px !important;
    max-height: 32px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-score-slot {
    min-height: 20px !important;
    max-height: 22px !important;
  }
}

/* Replay HUD final slim pass: PC is roughly two-thirds of the old bar, mobile thinner. */
body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
  min-height: 26px !important;
  max-height: 34px !important;
  padding: 1px 6px 4px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

body.broadcast-board-mode.replay-hud-open .field-matchup-label,
body.broadcast-board-mode.replay-hud-open .field-matchup-label *,
body.broadcast-board-mode.replay-hud-open .field-matchup-name,
body.broadcast-board-mode.replay-hud-open .field-matchup-logo-ring,
body.broadcast-board-mode.replay-hud-open .field-matchup-vs {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
  min-height: 24px !important;
  max-height: 28px !important;
  gap: 4px !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeA,
body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeB {
  font-size: 13px !important;
  min-width: 14px !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeCenter {
  min-width: 54px !important;
  padding: 0 2px !important;
  transform: scale(0.86) !important;
  transform-origin: center center !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
  bottom: 1px !important;
  height: 2px !important;
}

body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container::-webkit-scrollbar,
body.broadcast-board-mode.replay-hud-open #sub-container-1::-webkit-scrollbar,
body.broadcast-board-mode.replay-hud-open #sub-container-2::-webkit-scrollbar {
  display: none !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    min-height: 22px !important;
    max-height: 30px !important;
    padding: 0 5px 3px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    min-height: 20px !important;
    max-height: 24px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeCenter {
    transform: scale(0.78) !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
}

body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team.has-team-watermark .mobile-team-players {
  background: transparent !important;
}

body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team > .team-logo-empty,
body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team::before,
body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop side roster slots use the same broadcast-slot geometry as starters.
   Mobile #candidate-mobile slots are owned by the final non-starter lock below
   so first render and replay rail sizing do not fight older starter geometry. */
body.broadcast-board-mode .team-box .player-slot.has-player,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player {
  --broadcast-player-left: 41% !important;
  --broadcast-player-bottom: 11px !important;
  --broadcast-player-width: 71% !important;
  --broadcast-player-height: 56% !important;
  --broadcast-name-bottom: 21px !important;
  --broadcast-mark-top: 30px !important;
  --broadcast-name-width: clamp(56px, calc((var(--broadcast-name-ch, 4) * 0.9em) + 26px), 150px) !important;
  position: relative !important;
  width: clamp(56px, 5.35vw, 86px) !important;
  min-width: clamp(56px, 5.35vw, 86px) !important;
  max-width: clamp(56px, 5.35vw, 86px) !important;
  height: clamp(74px, 7.15vw, 112px) !important;
  min-height: clamp(74px, 7.15vw, 112px) !important;
  max-height: clamp(74px, 7.15vw, 112px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player .player-box,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .player-box {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player .player-img,
body.broadcast-board-mode .team-box .player-slot.has-player img.player-img,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .player-img,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player img.player-img {
  display: block !important;
  position: absolute !important;
  left: var(--broadcast-player-left) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--broadcast-player-bottom) !important;
  width: var(--broadcast-player-width) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-player-width) !important;
  height: var(--broadcast-player-height) !important;
  min-height: 0 !important;
  max-height: var(--broadcast-player-height) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) 0) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
  -webkit-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.48)) !important;
  z-index: 3 !important;
}

body.broadcast-board-mode .team-box .player-slot.broadcast-player-cutout.has-player .player-img,
body.broadcast-board-mode .team-box .player-slot.broadcast-player-cutout.has-player img.player-img,
body.broadcast-board-mode .candidate-column .team-box .player-slot.broadcast-player-cutout.has-player .player-img,
body.broadcast-board-mode .candidate-column .team-box .player-slot.broadcast-player-cutout.has-player img.player-img {
  height: var(--broadcast-player-height) !important;
  max-height: var(--broadcast-player-height) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, var(--nonstarter-photo-crop-bottom, calc(12% + 4px))) 0) !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player .slot-label,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .slot-label,
body.broadcast-board-mode .team-box .player-slot.has-player .player-number,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .player-number {
  display: block !important;
  position: absolute !important;
  top: var(--broadcast-mark-top) !important;
  right: auto !important;
  font-family: var(--fs-font-display, 'FS Pretendard', sans-serif) !important;
  font-size: clamp(20px, 2.5vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: var(--broadcast-position-tracking, -0.075em) !important;
  z-index: 1 !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player .slot-label,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .slot-label {
  left: var(--broadcast-player-left) !important;
  color: color-mix(in srgb, var(--broadcast-chip, #5387e9) 78%, rgba(255, 255, 255, 0.12)) !important;
  opacity: 0.74 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 0 5px color-mix(in srgb, var(--broadcast-chip, #5387e9) 36%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.48) !important;
  transform: translateX(-50%) !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player .player-number,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .player-number {
  left: calc(var(--broadcast-player-left) + var(--broadcast-number-offset-px, var(--broadcast-number-offset, 0.68em))) !important;
  color: rgba(255, 255, 255, 0.2) !important;
  -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.96) !important;
  opacity: 0.94 !important;
  text-shadow: none !important;
  transform: scaleY(1.12) !important;
  transform-origin: top center !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty),
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty) {
  display: flex !important;
  position: absolute !important;
  left: calc(68% - 4px) !important;
  right: auto !important;
  bottom: var(--broadcast-name-bottom) !important;
  width: var(--broadcast-name-width) !important;
  min-width: var(--broadcast-name-width) !important;
  max-width: var(--broadcast-name-width) !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: clamp(7.5px, 2.4vw, 9.5px) !important;
  font-weight: 850 !important;
  line-height: 17px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  border: 0 !important;
  border-radius: 1px !important;
  clip-path: none !important;
  background: transparent !important;
  transform: none !important;
  -webkit-text-stroke: 0.65px rgba(0, 0, 0, 0.84) !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.72),
    0 0 1px rgba(0, 0, 0, 0.86) !important;
  z-index: 4 !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player .player-name:not(:empty)::before,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .player-name:not(:empty)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 1px !important;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip, #5387e9) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip, #5387e9) 72%, #0d2c5c)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.42) !important;
  transform: none !important;
  z-index: -1 !important;
}

body.broadcast-board-mode .team-box .player-slot.has-player .player-name:not(:empty)::after,
body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player .player-name:not(:empty)::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 17% !important;
  bottom: 2px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
  transform: none !important;
  z-index: 0 !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode {
    --broadcast-roster-slot-w: var(--mobile-broadcast-slot-w, var(--broadcast-slot-canonical-w, 68.47px));
    --broadcast-roster-slot-h: var(--mobile-broadcast-slot-h, calc(var(--broadcast-roster-slot-w) * var(--broadcast-slot-canonical-aspect, 1.3366)));
    --replay-team-rail-h: calc(var(--broadcast-roster-slot-h) + 4px);
  }

  body.broadcast-board-mode #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team {
    height: var(--replay-team-rail-h) !important;
    min-height: var(--replay-team-rail-h) !important;
    max-height: var(--replay-team-rail-h) !important;
  }

  body.broadcast-board-mode #candidate-mobile.is-replay-team-rail .mobile-team-players {
    height: var(--broadcast-roster-slot-h) !important;
    min-height: var(--broadcast-roster-slot-h) !important;
    max-height: var(--broadcast-roster-slot-h) !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team,
  body.broadcast-board-mode #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team {
    width: calc(var(--broadcast-roster-slot-w) + 6px) !important;
    min-width: calc(var(--broadcast-roster-slot-w) + 6px) !important;
    max-width: calc(var(--broadcast-roster-slot-w) + 6px) !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players,
  body.broadcast-board-mode #candidate-mobile.is-replay-team-rail .mobile-team-players {
    align-items: center !important;
  }
}

/* Absolute EOF slot-bundle visibility lock: admin OFF must beat legacy labels. */
.player-slot-bundle [data-slot-bundle-part][data-slot-bundle-visible='0'],
.tactics-player-chip.player-slot-bundle [data-slot-bundle-part][data-slot-bundle-visible='0'],
body.broadcast-board-mode .player-slot.player-slot-bundle [data-slot-bundle-part][data-slot-bundle-visible='0'],
body.broadcast-board-mode .tactics-player-chip.player-slot-bundle [data-slot-bundle-part][data-slot-bundle-visible='0'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* True final lock: non-starter roster/replay slots are player art plus a
   bottom-attached name plate only. They must never reuse starter jersey/position
   marks or the old mobile card skin. */
@media (max-width: 900px) {
  body.broadcast-board-mode {
    --nonstarter-slot-w: var(--broadcast-roster-slot-w, var(--mobile-broadcast-slot-w, 54px));
    --nonstarter-slot-h: var(--broadcast-roster-slot-h, var(--mobile-broadcast-slot-h, 72px));
    --nonstarter-name-h: max(12px, calc(var(--nonstarter-slot-h) * 0.219));
    --nonstarter-name-gap: 1px;
    --nonstarter-photo-h: calc(var(--nonstarter-slot-h) - var(--nonstarter-name-h) - var(--nonstarter-name-gap));
    --nonstarter-photo-crop-bottom: var(--fs-slot-photo-crop-bottom, calc(12% + 4px));
    --nonstarter-photo-crop-compensation: 0px;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle),
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle),
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle),
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players .player-slot.has-player:not(.player-slot-bundle),
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) {
    --broadcast-player-left: 50% !important;
    --broadcast-player-bottom: calc(var(--nonstarter-name-h) + var(--nonstarter-name-gap)) !important;
    --broadcast-player-width: 76% !important;
    --broadcast-player-height: var(--nonstarter-photo-h) !important;
    --broadcast-name-width: var(--broadcast-player-width, 76%) !important;
    --fs-slot-name-plate-w: var(--broadcast-name-width, 76%) !important;
    --fs-slot-name-text-x: 0px !important;
    --fs-slot-name-text-y: 0px !important;
    width: var(--nonstarter-slot-w) !important;
    min-width: var(--nonstarter-slot-w) !important;
    max-width: var(--nonstarter-slot-w) !important;
    height: var(--nonstarter-slot-h) !important;
    min-height: var(--nonstarter-slot-h) !important;
    max-height: var(--nonstarter-slot-h) !important;
    flex: 0 0 var(--nonstarter-slot-w) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-box,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-box,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) .player-box {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box > img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box > img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-box > img,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout .player-img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout .player-img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout .player-img,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) .player-box > img {
    position: absolute !important;
    left: var(--broadcast-player-left) !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--broadcast-player-width) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-player-height) !important;
    transform: translateX(-50%) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--nonstarter-photo-crop-bottom, calc(12% + 4px)) 0) !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .sub-label,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .slot-label,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-number,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-captain,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) [data-slot-bundle-part='number'],
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) [data-slot-bundle-part='position'],
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .sub-label,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .slot-label,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-number,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-captain,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) [data-slot-bundle-part='number'],
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) [data-slot-bundle-part='position'],
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .sub-label,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .slot-label,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-number,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-captain,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) [data-slot-bundle-part='number'],
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) [data-slot-bundle-part='position'],
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) .sub-label,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) .slot-label,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) .player-number,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.has-player:not(.player-slot-bundle) .player-captain {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty),
  body.broadcast-board-mode .team-box .player-slot.broadcast-hide-name.has-player:not(.player-slot-bundle) .player-name:not(:empty),
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty),
  body.broadcast-board-mode .candidate-column .team-box .player-slot.broadcast-hide-name.has-player:not(.player-slot-bundle) .player-name:not(:empty),
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty),
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.broadcast-hide-name.has-player:not(.player-slot-bundle) .player-name:not(:empty) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--broadcast-name-width, 100%) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-name-width, 100%) !important;
    height: var(--nonstarter-name-h) !important;
    min-height: var(--nonstarter-name-h) !important;
    max-height: var(--nonstarter-name-h) !important;
    margin: 0 !important;
    padding: 0 4px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: max(7px, calc(var(--nonstarter-slot-h) * 0.103)) !important;
    font-weight: 900 !important;
    line-height: var(--nonstarter-name-h) !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name-text,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name-text,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-name-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    transform: none !important;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty)::before,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty)::before,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 1px !important;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip, #5387e9) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip, #5387e9) 72%, #0d2c5c)) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: -1 !important;
  }

  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty)::after,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty)::after,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-name:not(:empty)::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    right: 17% !important;
    bottom: 2px !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 0 !important;
  }

  body.broadcast-board-mode .team-box .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode .team-box .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode .team-box .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) .player-box > img,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout .player-img,
  body.broadcast-board-mode .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) .player-box > img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout .player-img,
  body.broadcast-board-mode .candidate-column .team-box .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) .player-img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) img.player-img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.broadcast-player-cutout.has-player:not(.player-slot-bundle) .player-box > img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout .player-img,
  body.broadcast-board-mode #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) .player-box.broadcast-player-cutout img {
    width: var(--broadcast-player-width) !important;
    max-width: var(--broadcast-player-width) !important;
    height: var(--broadcast-player-height) !important;
    max-height: var(--broadcast-player-height) !important;
    bottom: var(--broadcast-player-bottom) !important;
    object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
    object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
    clip-path: inset(0 0 var(--nonstarter-photo-crop-bottom, calc(12% + 4px)) 0) !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container {
    border-color: rgba(83, 190, 210, 0.26) !important;
    box-shadow:
      inset 0 0 0 1px rgba(8, 18, 26, 0.24),
      0 8px 20px rgba(0, 0, 0, 0.18) !important;
  }

  body.broadcast-board-mode #candidate-mobile .mobile-team-players {
    min-height: calc(var(--nonstarter-slot-h, var(--mobile-broadcast-slot-h, 72px)) + 2px) !important;
    grid-auto-rows: var(--nonstarter-slot-h, var(--mobile-broadcast-slot-h, 72px)) !important;
    align-items: start !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players {
    height: calc(var(--nonstarter-slot-h, var(--mobile-broadcast-slot-h, 72px)) + 2px) !important;
    min-height: calc(var(--nonstarter-slot-h, var(--mobile-broadcast-slot-h, 72px)) + 2px) !important;
    overflow: visible !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team:first-of-type,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='home'] {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + var(--replay-team-rail-h, calc(var(--nonstarter-slot-h) + 4px)) + var(--replay-team-gap, 4px) + var(--replay-portrait-field-h, 0px) + var(--replay-team-gap, 4px)) !important;
  }

  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box.is-replay-match-team:last-of-type,
  body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-box[data-replay-match-side='away'] {
    top: auto !important;
    bottom: env(safe-area-inset-bottom) !important;
  }
}

/* Absolute EOF logo-bar tune: keep matchup/HUD logo bars compact and translucent
   so circular logos do not press into neighboring labels or controls. */
body.broadcast-board-mode .field-matchup-label {
  background: rgba(4, 10, 18, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14) !important;
}

body.broadcast-board-mode .field-matchup-vs {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
}

body.broadcast-board-mode .field-matchup-label .field-matchup-logo-ring {
  width: clamp(20px, 2vw, 27px) !important;
  height: clamp(20px, 2vw, 27px) !important;
  min-width: clamp(20px, 2vw, 27px) !important;
  min-height: clamp(20px, 2vw, 27px) !important;
  box-sizing: border-box !important;
  padding: 1px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
}

body.broadcast-board-mode .field-team-logo-ring {
  box-sizing: border-box !important;
  padding: 1px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .mobile-team-logo-button,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo {
  background: rgba(12, 22, 33, 0.68) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.14) !important;
  padding: clamp(2px, 9%, 5px) !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .mobile-team-logo-button::after,
body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo::after {
  background: rgba(4, 10, 18, 0.18) !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
  background: rgba(5, 12, 20, 0.58) !important;
  border-color: rgba(160, 200, 255, 0.12) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 2px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label {
    width: min(318px, calc(100vw - 88px)) !important;
    max-width: min(318px, calc(100vw - 88px)) !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    column-gap: 3px !important;
    grid-template-columns: minmax(44px, 1fr) auto minmax(22px, auto) auto minmax(44px, 1fr) !important;
    background: rgba(4, 10, 18, 0.16) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-name {
    font-size: clamp(10px, 3vw, 12px) !important;
    max-width: clamp(52px, 20vw, 90px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-logo-ring {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-vs {
    min-width: 22px !important;
    padding: 1px 4px !important;
    font-size: 10px !important;
  }
}

/* Absolute EOF mobile formation label tune: keep formation text present but
   scaled down so it does not compete with players or team labels on phones. */
@media (max-width: 900px) {
  body.broadcast-board-mode .formation-label,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .formation-label,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .formation-label {
    min-width: 0 !important;
    max-width: min(76px, 24vw) !important;
    padding: 0 !important;
    font-size: clamp(8px, 2.15vw, 10px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    opacity: 0.78 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .formation-label,
  body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .formation-label {
    font-size: clamp(8px, 2.35vw, 9px) !important;
    max-width: min(64px, 20vw) !important;
  }
}

/* Absolute EOF mobile starter slot alignment:
   keep starter number/position/name coordinates visually matched to the PC
   broadcast slot while preserving the current mobile player image scale. */
@media (max-width: 900px) {
  body.broadcast-board-mode {
    --mobile-broadcast-mark-top: calc(var(--mobile-broadcast-slot-h) * 0.158);
    --mobile-broadcast-name-bottom: calc(var(--mobile-broadcast-slot-h) * 0.302);
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player,
  body.broadcast-board-mode .field .tactics-player-chip,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip,
  body.broadcast-board-mode .field-stage .tactics-player-chip {
    --broadcast-mark-top: var(--mobile-broadcast-mark-top) !important;
    --broadcast-name-bottom: var(--mobile-broadcast-name-bottom) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .slot-label,
  body.broadcast-board-mode .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field-stage .tactics-player-chip .slot-label,
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-number,
  body.broadcast-board-mode .field .tactics-player-chip .player-number,
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-number,
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-number {
    top: var(--broadcast-mark-top) !important;
  }

  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty) {
    left: calc(66% - 5px) !important;
    bottom: var(--broadcast-name-bottom) !important;
  }
}

/* Absolute EOF compact portrait HUD and starter-name parity:
   portrait top bars should not cover non-starters, and board ON starter names
   must use the same name plate geometry as board OFF. */
@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty) {
    left: calc(66% - 2px) !important;
    bottom: var(--broadcast-name-bottom) !important;
    --broadcast-name-width: clamp(34px, calc((var(--broadcast-name-ch, 4) * 0.72em) + 16px), 92px) !important;
    width: var(--broadcast-name-width) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-name-width) !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label {
    width: min(286px, calc(100vw - 106px)) !important;
    max-width: min(286px, calc(100vw - 106px)) !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 5px !important;
    column-gap: 2px !important;
    grid-template-columns: minmax(38px, 1fr) auto minmax(20px, auto) auto minmax(38px, 1fr) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-name {
    font-size: clamp(9px, 2.55vw, 11px) !important;
    max-width: clamp(46px, 18vw, 78px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-logo-ring {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) .field-matchup-label .field-matchup-vs {
    min-width: 20px !important;
    padding: 1px 3px !important;
    font-size: 9px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay {
    width: min(330px, calc(100vw - 24px)) !important;
    max-width: min(330px, calc(100vw - 24px)) !important;
    min-height: 42px !important;
    max-height: 54px !important;
    padding: 3px 8px 9px !important;
    border-radius: 12px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-top {
    min-height: 30px !important;
    max-height: 34px !important;
    gap: 4px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-left,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-actions {
    gap: 3px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-count {
    min-width: 24px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 16px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-score-slot {
    min-height: 24px !important;
    max-height: 28px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-hud-logo-ring {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeA,
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeB {
    font-size: 13px !important;
    min-width: 16px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay #scoreBadgeCenter {
    min-width: 52px !important;
    gap: 3px !important;
    padding: 0 3px !important;
    transform: scale(0.88) !important;
    transform-origin: center center !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 8px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-btn::before {
    font-size: 12px !important;
  }

  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 8px !important;
    right: 8px !important;
    bottom: 3px !important;
    height: 4px !important;
  }

  body.broadcast-board-mode.replay-hud-open #field-wrapper-1 .formation-label,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 .formation-label {
    font-size: clamp(7.5px, 2vw, 9px) !important;
    max-width: min(58px, 18vw) !important;
  }
}

/* Absolute EOF starter name-plate length parity:
   toggling the tactics board must not change starter name-plate length. */
body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
body.broadcast-board-mode.tactics-board-mode .field .tactics-player-chip .player-name:not(:empty),
body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty) {
  --broadcast-name-width: clamp(56px, calc((var(--broadcast-name-ch, 4) * 0.9em) + 26px), 150px) !important;
  width: var(--broadcast-name-width) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-name-width) !important;
  inline-size: var(--broadcast-name-width) !important;
  min-inline-size: 0 !important;
  max-inline-size: var(--broadcast-name-width) !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty) {
    --broadcast-name-width: clamp(34px, calc((var(--broadcast-name-ch, 4) * 0.72em) + 16px), 92px) !important;
    width: var(--broadcast-name-width) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-name-width) !important;
    inline-size: var(--broadcast-name-width) !important;
    min-inline-size: 0 !important;
    max-inline-size: var(--broadcast-name-width) !important;
  }
}

/* Absolute EOF board-on name plate equality:
   tactics-board clones and broadcast-reference slots must not change starter
   name-plate left position or length when the board is toggled. */
body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode .field .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode.tactics-board-mode .field .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty),
body.broadcast-board-mode .field .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty),
body.broadcast-board-mode.tactics-board-mode .field .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty),
body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
body.broadcast-board-mode.tactics-board-mode .field .tactics-player-chip .player-name:not(:empty),
body.broadcast-board-mode .field .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty),
body.broadcast-board-mode.tactics-board-mode .field .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty),
body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty),
body.broadcast-board-mode .field-stage .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty) {
  left: 70% !important;
  right: auto !important;
  transform: none !important;
  --broadcast-name-width: clamp(56px, calc((var(--broadcast-name-ch, 4) * 0.9em) + 26px), 150px) !important;
  width: var(--broadcast-name-width) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-name-width) !important;
  inline-size: var(--broadcast-name-width) !important;
  min-inline-size: 0 !important;
  max-inline-size: var(--broadcast-name-width) !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .player-slot.field-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .player-slot.broadcast-reference-slot.has-player .player-name:not(:empty),
  body.broadcast-board-mode .field .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .player-slot.has-player .player-box.broadcast-reference-slot .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode .field .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty),
  body.broadcast-board-mode.replay-hud-open .field .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty),
  body.broadcast-board-mode.tactics-board-mode .field .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty),
  body.broadcast-board-mode .field-stage .tactics-player-chip .player-name:not(:empty),
  body.broadcast-board-mode .field-stage .tactics-player-chip.broadcast-reference-slot .player-name:not(:empty) {
    left: calc(66% - 2px) !important;
    right: auto !important;
    transform: none !important;
    --broadcast-name-width: clamp(34px, calc((var(--broadcast-name-ch, 4) * 0.72em) + 16px), 92px) !important;
    width: var(--broadcast-name-width) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-name-width) !important;
    inline-size: var(--broadcast-name-width) !important;
    min-inline-size: 0 !important;
    max-inline-size: var(--broadcast-name-width) !important;
    box-sizing: border-box !important;
  }
}

/* Absolute EOF alpha-slot selection/drag FX:
   transparent cutout slots glow as one player-box silhouette instead of drawing
   a rectangular selection frame. Event highlights are handled by the bundle
   event FX block below so one path owns replay/event animation. */
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):not(.broadcast-player-card) {
  --fs-alpha-fx-core: rgba(255, 255, 255, 0.96);
  --fs-alpha-fx-glow: rgba(72, 226, 255, 0.9);
  --fs-alpha-fx-deep: rgba(72, 226, 255, 0.42);
  --fs-alpha-fx-scale: 1;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.selected, .is-dragging, .dragging):not(.broadcast-player-card),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle[data-slot-state='selected']:not(.broadcast-player-card),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle[data-slot-state='dragging']:not(.broadcast-player-card) {
  --fs-alpha-fx-glow: rgba(70, 230, 255, 0.98);
  --fs-alpha-fx-deep: rgba(70, 230, 255, 0.58);
  --fs-alpha-fx-scale: 1.055;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.selected, .is-dragging, .dragging):not(.broadcast-player-card),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='selected'], [data-slot-state='dragging']):not(.broadcast-player-card) {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.selected, .is-dragging, .dragging):not(.broadcast-player-card) > .player-box,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='selected'], [data-slot-state='dragging']):not(.broadcast-player-card) > .player-box,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='selected'], [data-slot-state='dragging']):not(.broadcast-player-card) > .player-slot-bundle-box {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  scale: var(--fs-alpha-fx-scale, 1) !important;
  transform-origin: center center !important;
  will-change: filter, scale !important;
  filter:
    drop-shadow(0 0 2px var(--fs-alpha-fx-core))
    drop-shadow(0 0 7px var(--fs-alpha-fx-glow))
    drop-shadow(0 0 16px var(--fs-alpha-fx-deep))
    drop-shadow(0 0 28px rgba(20, 240, 255, 0.22))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) !important;
  -webkit-filter:
    drop-shadow(0 0 2px var(--fs-alpha-fx-core))
    drop-shadow(0 0 7px var(--fs-alpha-fx-glow))
    drop-shadow(0 0 16px var(--fs-alpha-fx-deep))
    drop-shadow(0 0 28px rgba(20, 240, 255, 0.22))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) !important;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.selected, .is-dragging, .dragging):not(.broadcast-player-card) .player-img {
  filter: none !important;
  -webkit-filter: none !important;
}

body.broadcast-board-mode :is(.player-slot.broadcast-player-card.has-player, .tactics-player-chip.broadcast-player-card):is(.selected, .is-dragging, .dragging),
body.broadcast-board-mode :is(.player-slot.broadcast-player-card.has-player, .tactics-player-chip.broadcast-player-card).player-slot-bundle:is([data-slot-state='selected'], [data-slot-state='dragging']) {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.broadcast-board-mode :is(.player-slot.broadcast-player-card.has-player, .tactics-player-chip.broadcast-player-card):is(.selected, .is-dragging, .dragging) > :is(.player-box, .player-slot-bundle-box),
body.broadcast-board-mode :is(.player-slot.broadcast-player-card.has-player, .tactics-player-chip.broadcast-player-card).player-slot-bundle:is([data-slot-state='selected'], [data-slot-state='dragging']) > :is(.player-box, .player-slot-bundle-box) {
  scale: 1.045 !important;
  transform-origin: center center !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 8px rgba(72, 226, 255, 0.9))
    drop-shadow(0 0 18px rgba(72, 226, 255, 0.46))
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.48)) !important;
  -webkit-filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 8px rgba(72, 226, 255, 0.9))
    drop-shadow(0 0 18px rgba(72, 226, 255, 0.46))
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.48)) !important;
}

body.broadcast-board-mode .player-slot[data-slot-name-empty='1'] .player-name,
body.broadcast-board-mode .player-slot[data-slot-name-empty='1'] .player-name::before,
body.broadcast-board-mode .player-slot[data-slot-name-empty='1'] .player-name::after,
body.broadcast-board-mode .player-slot .player-name[data-slot-name-empty='1'],
body.broadcast-board-mode .player-slot .player-name[data-slot-name-empty='1']::before,
body.broadcast-board-mode .player-slot .player-name[data-slot-name-empty='1']::after,
body.broadcast-board-mode .player-slot .player-name.is-empty-nameplate,
body.broadcast-board-mode .player-slot .player-name.is-empty-nameplate::before,
body.broadcast-board-mode .player-slot .player-name.is-empty-nameplate::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Absolute EOF non-starter idle slots:
   alpha selection FX must not leak into PC/mobile team boxes or replay bench
   slots by default. */
body.broadcast-board-mode .player-slot.player-slot-bundle.is-nonstarter-slot.has-player[data-slot-idle='1'] {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  scale: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.broadcast-board-mode .player-slot.player-slot-bundle.is-nonstarter-slot.has-player[data-slot-idle='1'] > .player-box,
body.broadcast-board-mode .player-slot.player-slot-bundle.is-nonstarter-slot.has-player[data-slot-idle='1'] > .player-slot-bundle-box {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  scale: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.broadcast-board-mode .player-slot.player-slot-bundle.is-nonstarter-slot.has-player[data-slot-idle='1'] .player-img,
body.broadcast-board-mode .player-slot.player-slot-bundle.is-nonstarter-slot.has-player[data-slot-idle='1'] img.player-img {
  scale: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.broadcast-board-mode .player-slot.player-slot-bundle.is-nonstarter-slot.has-player {
  --nonstarter-name-gap: 1px;
  --nonstarter-photo-h: calc(var(--nonstarter-slot-h, var(--fs-slot-template-h, 112px)) - var(--nonstarter-name-h, 17px) - var(--nonstarter-name-gap, 1px)) !important;
  --nonstarter-photo-crop-bottom: var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) !important;
  --nonstarter-photo-crop-compensation: 0px !important;
  --broadcast-player-height: var(--nonstarter-photo-h) !important;
  --fs-slot-photo-bottom: calc(var(--fs-slot-name-plate-h, var(--nonstarter-name-h, 17px)) + var(--nonstarter-name-gap, 1px)) !important;
  --fs-slot-name-bottom: 0px !important;
}

/* Absolute EOF bundle event FX:
   replay events scale the whole slot root so photo, number, position and
   nameplate move as one visual unit. */
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-goal, .goal-flash, .slot-pop-goal, .slot-pop-owngoal, .flash-assist, .flash-sub, .flash-swap, .flash-yellow, .flash-red, .flash-event, .wave-pulse, .er-formation-pulse, .slot-shake),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='goal'], [data-slot-state='penaltyGoal'], [data-slot-state='assist'], [data-slot-state='substitutionIn'], [data-slot-state='yellowCard'], [data-slot-state='formationChange'], [data-slot-state='redCard'], [data-slot-state='ownGoal'], [data-slot-state='highlight']) {
  --fs-alpha-fx-core: rgba(255, 255, 255, 0.96);
  --fs-alpha-fx-glow: rgba(72, 226, 255, 0.9);
  --fs-alpha-fx-deep: rgba(72, 226, 255, 0.42);
  --fs-alpha-fx-scale: 1.055;
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: center center !important;
  will-change: filter, scale !important;
  transition: filter 120ms ease !important;
  animation: fsAlphaBundleEventPulse 760ms cubic-bezier(0.2, 0.9, 0.2, 1) 1 both !important;
  filter:
    drop-shadow(0 0 2px var(--fs-alpha-fx-core, rgba(255, 255, 255, 0.96)))
    drop-shadow(0 0 7px var(--fs-alpha-fx-glow, rgba(72, 226, 255, 0.9)))
    drop-shadow(0 0 16px var(--fs-alpha-fx-deep, rgba(72, 226, 255, 0.42)))
    drop-shadow(0 0 28px rgba(20, 240, 255, 0.22))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) !important;
  -webkit-filter:
    drop-shadow(0 0 2px var(--fs-alpha-fx-core, rgba(255, 255, 255, 0.96)))
    drop-shadow(0 0 7px var(--fs-alpha-fx-glow, rgba(72, 226, 255, 0.9)))
    drop-shadow(0 0 16px var(--fs-alpha-fx-deep, rgba(72, 226, 255, 0.42)))
    drop-shadow(0 0 28px rgba(20, 240, 255, 0.22))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) !important;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-goal, .goal-flash, .slot-pop-goal),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='goal'], [data-slot-state='penaltyGoal']) {
  --fs-alpha-fx-glow: rgba(255, 222, 76, 0.98);
  --fs-alpha-fx-deep: rgba(255, 166, 28, 0.58);
  --fs-alpha-fx-scale: 1.075;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.slot-pop-owngoal, .flash-red),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='redCard'], [data-slot-state='ownGoal']) {
  --fs-alpha-fx-glow: rgba(255, 74, 74, 0.96);
  --fs-alpha-fx-deep: rgba(255, 34, 64, 0.55);
  --fs-alpha-fx-scale: 1.045;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).slot-sad-owngoal {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: center center !important;
  animation: fsSadOwnGoalSlot 940ms ease-out 1 both !important;
  filter:
    grayscale(0.42)
    brightness(0.72)
    drop-shadow(0 0 2px rgba(210, 210, 220, 0.68))
    drop-shadow(0 7px 10px rgba(0, 0, 0, 0.58)) !important;
  -webkit-filter:
    grayscale(0.42)
    brightness(0.72)
    drop-shadow(0 0 2px rgba(210, 210, 220, 0.68))
    drop-shadow(0 7px 10px rgba(0, 0, 0, 0.58)) !important;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).slot-sad-owngoal > :is(.player-box, .player-slot-bundle-box) {
  animation: none !important;
  scale: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  overflow: visible !important;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).flash-assist,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle[data-slot-state='assist'] {
  --fs-alpha-fx-glow: rgba(64, 214, 255, 0.96);
  --fs-alpha-fx-deep: rgba(72, 122, 255, 0.54);
  --fs-alpha-fx-scale: 1.06;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-sub, .flash-swap),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle[data-slot-state='substitutionIn'] {
  --fs-alpha-fx-glow: rgba(77, 255, 185, 0.94);
  --fs-alpha-fx-deep: rgba(16, 210, 140, 0.52);
  --fs-alpha-fx-scale: 1.05;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-yellow, .er-formation-pulse),
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='yellowCard'], [data-slot-state='formationChange']) {
  --fs-alpha-fx-glow: rgba(255, 232, 73, 0.94);
  --fs-alpha-fx-deep: rgba(255, 211, 40, 0.46);
  --fs-alpha-fx-scale: 1.055;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-goal, .goal-flash, .slot-pop-goal, .slot-pop-owngoal, .flash-assist, .flash-sub, .flash-swap, .flash-yellow, .flash-red, .flash-event, .wave-pulse, .er-formation-pulse, .slot-shake) > .player-box,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-goal, .goal-flash, .slot-pop-goal, .slot-pop-owngoal, .flash-assist, .flash-sub, .flash-swap, .flash-yellow, .flash-red, .flash-event, .wave-pulse, .er-formation-pulse, .slot-shake) > .player-slot-bundle-box,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='goal'], [data-slot-state='penaltyGoal'], [data-slot-state='assist'], [data-slot-state='substitutionIn'], [data-slot-state='yellowCard'], [data-slot-state='formationChange'], [data-slot-state='redCard'], [data-slot-state='ownGoal'], [data-slot-state='highlight']) > .player-box,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='goal'], [data-slot-state='penaltyGoal'], [data-slot-state='assist'], [data-slot-state='substitutionIn'], [data-slot-state='yellowCard'], [data-slot-state='formationChange'], [data-slot-state='redCard'], [data-slot-state='ownGoal'], [data-slot-state='highlight']) > .player-slot-bundle-box {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: inherit !important;
  will-change: auto !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-goal, .goal-flash, .slot-pop-goal, .slot-pop-owngoal, .flash-assist, .flash-sub, .flash-swap, .flash-yellow, .flash-red, .flash-event, .wave-pulse, .er-formation-pulse, .slot-shake) .player-img,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip):is(.flash-goal, .goal-flash, .slot-pop-goal, .slot-pop-owngoal, .flash-assist, .flash-sub, .flash-swap, .flash-yellow, .flash-red, .flash-event, .wave-pulse, .er-formation-pulse, .slot-shake) img.player-img,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='goal'], [data-slot-state='penaltyGoal'], [data-slot-state='assist'], [data-slot-state='substitutionIn'], [data-slot-state='yellowCard'], [data-slot-state='formationChange'], [data-slot-state='redCard'], [data-slot-state='ownGoal'], [data-slot-state='highlight']) .player-img,
body.broadcast-board-mode :is(.player-slot.has-player, .tactics-player-chip).player-slot-bundle:is([data-slot-state='goal'], [data-slot-state='penaltyGoal'], [data-slot-state='assist'], [data-slot-state='substitutionIn'], [data-slot-state='yellowCard'], [data-slot-state='formationChange'], [data-slot-state='redCard'], [data-slot-state='ownGoal'], [data-slot-state='highlight']) img.player-img {
  filter: none !important;
  -webkit-filter: none !important;
}

@keyframes fsAlphaBundleEventPulse {
  0% {
    scale: 1;
  }
  36% {
    scale: var(--fs-alpha-fx-scale, 1.055);
  }
  100% {
    scale: 1;
  }
}

@keyframes fsSadOwnGoalSlot {
  0% {
    opacity: 1;
    scale: 1;
  }
  34% {
    opacity: 0.72;
    scale: 0.985;
  }
  68% {
    opacity: 0.9;
    scale: 1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

/* Admin image-rules authority layer.
   Anything below this point treats FSImageRules/FSPlayerSlotBundle as the final
   source for logo crop, circular person images, and broadcast/player slots. */
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] {
  box-sizing: border-box !important;
  width: var(--fs-slot-render-w, var(--fs-slot-template-w, 64px)) !important;
  min-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 64px)) !important;
  max-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 64px)) !important;
  height: var(--fs-slot-render-h, var(--fs-slot-template-h, 84px)) !important;
  min-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 84px)) !important;
  max-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 84px)) !important;
  --fs-slot-bundle-scale: 1 !important;
  --fs-slot-photo-device-scale: 1 !important;
  --fs-slot-name-device-scale: 1 !important;
  --fs-slot-number-device-scale: 1 !important;
  --fs-slot-position-device-scale: 1 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.broadcast-board-mode .player-slot.player-slot-bundle.is-nonstarter-slot[data-slot-custom-parts='1'] {
  width: var(--nonstarter-slot-w, var(--fs-slot-template-w, 86px)) !important;
  min-width: var(--nonstarter-slot-w, var(--fs-slot-template-w, 86px)) !important;
  max-width: var(--nonstarter-slot-w, var(--fs-slot-template-w, 86px)) !important;
  height: var(--nonstarter-slot-h, var(--fs-slot-template-h, 112px)) !important;
  min-height: var(--nonstarter-slot-h, var(--fs-slot-template-h, 112px)) !important;
  max-height: var(--nonstarter-slot-h, var(--fs-slot-template-h, 112px)) !important;
  flex: 0 0 var(--nonstarter-slot-w, var(--fs-slot-template-w, 86px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] > :is(.player-box, .player-slot-bundle-box),
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] .player-box.player-slot-bundle-box {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part] {
  box-sizing: border-box !important;
  pointer-events: none !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-visible='0'],
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle).broadcast-hide-name [data-slot-bundle-part='name'],
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle) .player-box.broadcast-hide-name [data-slot-bundle-part='name'],
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle).broadcast-hide-number [data-slot-bundle-part='number'],
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle) .player-box.broadcast-hide-number [data-slot-bundle-part='number'],
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle).broadcast-hide-position [data-slot-bundle-part='position'],
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle) .player-box.broadcast-hide-position [data-slot-bundle-part='position'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='photo'] {
  position: absolute !important;
  left: var(--fs-slot-photo-x, 50%) !important;
  top: var(--fs-slot-photo-y, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--fs-slot-photo-w, 76%) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--fs-slot-photo-h, 72%) !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-bundle-scale, 1)) scale(var(--fs-slot-photo-scale, 1)) scale(var(--fs-slot-photo-device-scale, 1)) !important;
  z-index: var(--fs-slot-photo-z, 8) !important;
  opacity: var(--fs-slot-photo-opacity, 1) !important;
  object-fit: var(--fs-slot-photo-fit, contain) !important;
  object-position: var(--fs-slot-photo-object-position, center center) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, 0%) 0) !important;
  filter: var(--fs-slot-photo-filter, none) !important;
  -webkit-filter: var(--fs-slot-photo-filter, none) !important;
  border: var(--fs-slot-photo-border, 0) !important;
  border-radius: var(--fs-slot-photo-radius, 0) !important;
  background: var(--fs-slot-photo-bg, transparent) !important;
  box-shadow: none !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='name'] {
  display: flex !important;
  position: absolute !important;
  left: var(--fs-slot-name-x, 50%) !important;
  top: var(--fs-slot-name-y, 86%) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, max-content)) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--fs-slot-name-plate-h, auto) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 5px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--fs-slot-name-color, #fff) !important;
  font-size: var(--fs-slot-name-font, 10px) !important;
  font-weight: 900 !important;
  line-height: var(--fs-slot-name-plate-h, 1.05) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-name-scale, 1)) scale(var(--fs-slot-name-device-scale, 1)) scale(var(--fs-slot-bundle-scale, 1)) !important;
  z-index: var(--fs-slot-name-z, 4) !important;
  opacity: var(--fs-slot-name-opacity, 1) !important;
  background: var(--fs-slot-name-plate-bg, var(--fs-slot-name-bg, color-mix(in srgb, var(--broadcast-chip, #111) 82%, #111))) !important;
  border: var(--fs-slot-name-plate-border, var(--fs-slot-name-border, 0)) !important;
  border-radius: var(--fs-slot-name-plate-radius, var(--fs-slot-name-radius, 2px)) !important;
  box-shadow: none !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='name']::before,
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='name']::after {
  content: none !important;
  display: none !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] .player-name-text {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: translate(var(--fs-slot-name-text-x, 0px), var(--fs-slot-name-text-y, 0px)) !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='number'],
body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='position'] {
  display: block !important;
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: max-content !important;
  height: auto !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='number'] {
  left: var(--fs-slot-number-x, 50%) !important;
  top: var(--fs-slot-number-y, 16%) !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-number-scale, 1)) scale(var(--fs-slot-number-device-scale, 1)) scale(var(--fs-slot-bundle-scale, 1)) !important;
  z-index: var(--fs-slot-number-z, 1) !important;
  opacity: var(--fs-slot-number-opacity, 1) !important;
  color: var(--fs-slot-number-color, rgba(255, 255, 255, 0.32)) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--fs-slot-number-radius, 0) !important;
  -webkit-text-stroke: var(--fs-slot-number-stroke-width, 0.35px) var(--fs-slot-number-stroke, rgba(255, 255, 255, 0.9)) !important;
  paint-order: stroke fill !important;
  font-size: var(--fs-slot-number-font, 14px) !important;
  text-shadow: var(--fs-slot-number-shadow, none) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
  backface-visibility: hidden !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] [data-slot-bundle-part='position'] {
  left: var(--fs-slot-position-x, 50%) !important;
  top: var(--fs-slot-position-y, 16%) !important;
  transform: translate(var(--fs-slot-origin-shift-x, 0px), var(--fs-slot-origin-shift-y, 0px)) translate(-50%, -50%) scale(var(--fs-slot-position-scale, 1)) scale(var(--fs-slot-position-device-scale, 1)) scale(var(--fs-slot-bundle-scale, 1)) !important;
  z-index: var(--fs-slot-position-z, 1) !important;
  opacity: var(--fs-slot-position-opacity, 1) !important;
  color: var(--fs-slot-position-color, currentColor) !important;
  background: var(--fs-slot-position-bg, transparent) !important;
  border: var(--fs-slot-position-border, 0) !important;
  border-radius: var(--fs-slot-position-radius, 0) !important;
  font-size: var(--fs-slot-position-font, 12px) !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'][data-slot-name-plate-shape='broadcastSlant'] [data-slot-bundle-part='name'] {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--fs-slot-name-plate-radius, 1px) !important;
  overflow: visible !important;
  isolation: isolate !important;
  text-align: center !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'][data-slot-name-plate-shape='broadcastSlant'] [data-slot-bundle-part='name']::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--fs-slot-name-plate-radius, 1px) !important;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--broadcast-chip, #5387e9) 88%, #2c62b7), color-mix(in srgb, var(--broadcast-chip, #5387e9) 72%, #0d2c5c)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.42) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

body.broadcast-board-mode :is(.player-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'][data-slot-name-plate-shape='broadcastSlant'] [data-slot-bundle-part='name']::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 4px !important;
  right: 17% !important;
  bottom: 2px !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
  pointer-events: none !important;
}

body.broadcast-board-mode :is(.player-slot.broadcast-player-card, .tactics-player-chip.broadcast-player-card).player-slot-bundle[data-slot-custom-parts='1'] [data-slot-bundle-part='photo'] {
  object-fit: contain !important;
  object-position: var(--fs-slot-photo-object-position, center center) !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, 0%) 0) !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column, #candidate-mobile) .player-slot.player-slot-bundle.has-player:not(.broadcast-hide-name) [data-slot-bundle-part='name']:not(:empty),
body.broadcast-board-mode :is(.team-box, .candidate-column, #candidate-mobile) .player-slot.player-slot-bundle.has-player:not(.broadcast-hide-name) .player-name:not(:empty) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column, #candidate-mobile) .player-slot.player-slot-bundle.has-player:not(.broadcast-hide-name) .player-name:not([data-slot-name-empty='1']) .player-name-text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Final landscape field-line lock:
   side goal/penalty boxes are reused from the vertical field markup. In
   landscape their open edge sits on the clipped field boundary, so the top or
   bottom stroke can land on a half pixel and fade. Keep the existing elements,
   but draw their three visible sides with one explicit stroke model. */
@media (orientation: landscape) {
  body.broadcast-board-mode #field-wrapper-1 .penalty.top,
  body.broadcast-board-mode #field-wrapper-2 .penalty.bottom,
  body.broadcast-board-mode #field-wrapper-1 .goal.top,
  body.broadcast-board-mode #field-wrapper-2 .goal.bottom {
    display: block !important;
    border-color: var(--broadcast-line) !important;
    border-style: solid !important;
    border-width: 2px !important;
    box-shadow:
      0 0 6px color-mix(in srgb, var(--broadcast-line) 60%, transparent),
      inset 0 0 10px color-mix(in srgb, var(--broadcast-line) 22%, transparent) !important;
    position: absolute !important;
    transform: translateZ(0) !important;
  }

  body.broadcast-board-mode #field-wrapper-1 .penalty.top::before,
  body.broadcast-board-mode #field-wrapper-1 .penalty.top::after,
  body.broadcast-board-mode #field-wrapper-2 .penalty.bottom::before,
  body.broadcast-board-mode #field-wrapper-2 .penalty.bottom::after,
  body.broadcast-board-mode #field-wrapper-1 .goal.top::before,
  body.broadcast-board-mode #field-wrapper-1 .goal.top::after,
  body.broadcast-board-mode #field-wrapper-2 .goal.bottom::before,
  body.broadcast-board-mode #field-wrapper-2 .goal.bottom::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: var(--broadcast-line) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 6px color-mix(in srgb, var(--broadcast-line) 62%, transparent) !important;
    pointer-events: none !important;
  }

  body.broadcast-board-mode #field-wrapper-1 .penalty.top::before,
  body.broadcast-board-mode #field-wrapper-2 .penalty.bottom::before,
  body.broadcast-board-mode #field-wrapper-1 .goal.top::before,
  body.broadcast-board-mode #field-wrapper-2 .goal.bottom::before {
    top: 0 !important;
  }

  body.broadcast-board-mode #field-wrapper-1 .penalty.top::after,
  body.broadcast-board-mode #field-wrapper-2 .penalty.bottom::after,
  body.broadcast-board-mode #field-wrapper-1 .goal.top::after,
  body.broadcast-board-mode #field-wrapper-2 .goal.bottom::after {
    bottom: 0 !important;
  }

  body.broadcast-board-mode #field-wrapper-1 .penalty.top,
  body.broadcast-board-mode #field-wrapper-1 .goal.top {
    left: 0 !important;
    right: auto !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  body.broadcast-board-mode #field-wrapper-2 .penalty.bottom,
  body.broadcast-board-mode #field-wrapper-2 .goal.bottom {
    left: auto !important;
    right: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-1 :is(.penalty.bottom, .goal.bottom),
  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 :is(.penalty.top, .goal.top),
  html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-1 :is(.penalty.bottom, .goal.bottom),
  html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-2 :is(.penalty.top, .goal.top) {
    display: none !important;
  }

  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-1 .penalty.top::before,
  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-1 .penalty.top::after,
  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 .penalty.bottom::before,
  body.broadcast-board-mode[data-field-sport-mode='futsal'] #field-wrapper-2 .penalty.bottom::after,
  html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-1 .penalty.top::before,
  html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-1 .penalty.top::after,
  html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-2 .penalty.bottom::before,
  html[data-field-sport-mode='futsal'] body.broadcast-board-mode #field-wrapper-2 .penalty.bottom::after {
    content: none !important;
    display: none !important;
  }
}

body.broadcast-board-mode .player-slot.is-nonstarter-slot.has-player.broadcast-hide-name :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name']),
body.broadcast-board-mode .player-slot.is-nonstarter-slot.has-player.broadcast-hide-name :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'])::before,
body.broadcast-board-mode .player-slot.is-nonstarter-slot.has-player.broadcast-hide-name :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'])::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Current broadcast-slot authority lock:
   keep coordinates and roster slots on the shared PC slot contract. */
body.field-booting.broadcast-board-mode #field-wrapper-1::after {
  content: none !important;
  display: none !important;
}

body.field-booting.broadcast-board-mode::after {
  content: "경기 데이터를 준비 중입니다\A잠시만 기다리세요...";
  display: block !important;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2147483000;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  min-width: min(280px, 72vw);
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--broadcast-line-a, #63e6ff) 46%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)),
    rgba(9, 16, 24, .78);
  background-size: 220% 100%;
  color: #eaf7ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--broadcast-line-a, #63e6ff) 26%, transparent);
  animation: fsBootSkeletonShimmer 1.35s ease-in-out infinite;
  pointer-events: none;
}

@media (min-width: 901px), (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode .center {
    height: var(
      --broadcast-fit-field-h,
      min(calc(100dvh - 126px), calc((100vw - 48px) / var(--broadcast-board-ratio, var(--broadcast-field-ratio))))
    ) !important;
  }
}

body.broadcast-board-mode .player-slot.is-lineup-drag-source.has-player > .player-box {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.broadcast-board-mode .field :is(.player-slot.field-slot, .tactics-player-chip),
body.broadcast-board-mode.replay-hud-open .field :is(.player-slot.field-slot, .tactics-player-chip),
body.broadcast-board-mode .field-stage .tactics-player-chip {
  --broadcast-slot-translate-x: -50% !important;
  --broadcast-slot-translate-y: -50% !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

body.broadcast-board-mode .player-slot.field-slot:not(.has-player) .slot-label {
  color: color-mix(in srgb, var(--broadcast-line) 72%, rgba(255, 255, 255, 0.68)) !important;
  opacity: 0.56 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) {
  --broadcast-slot-canonical-cutout-clip: inset(0 0 calc(12% + 6px) 0);
}

@media (max-width: 900px) {
  html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) {
    --mobile-broadcast-mark-top: calc(var(--mobile-broadcast-slot-h) * 0.186) !important;
    --mobile-broadcast-name-bottom: calc(var(--mobile-broadcast-slot-h) * 0.361) !important;
  }

  html:not([data-fs-image-rules-group='gta']) body.broadcast-board-mode:not(.fs-image-rules-gta) .field :is(.player-slot.field-slot.has-player, .tactics-player-chip):not([data-slot-custom-parts='1']) {
    --broadcast-mark-top: var(--mobile-broadcast-mark-top) !important;
    --broadcast-name-bottom: var(--mobile-broadcast-name-bottom) !important;
  }

  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player, .tactics-player-chip):not([data-slot-custom-parts='1']),
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field :is(.player-slot.field-slot.has-player, .tactics-player-chip):not([data-slot-custom-parts='1']),
  body.broadcast-board-mode.fs-image-rules-gta .field :is(.player-slot.field-slot.has-player, .tactics-player-chip):not([data-slot-custom-parts='1']) {
    width: clamp(29px, 7.1vw, 45px) !important;
    min-width: clamp(29px, 7.1vw, 45px) !important;
    max-width: clamp(29px, 7.1vw, 45px) !important;
    height: clamp(38px, 9.45vw, 60px) !important;
    min-height: clamp(38px, 9.45vw, 60px) !important;
    max-height: clamp(38px, 9.45vw, 60px) !important;
  }

  body.broadcast-board-mode :is(.team-box, .candidate-column, #candidate-mobile, .sub-slot-container)
    .player-slot.has-player:not(.player-slot-bundle):not(.broadcast-hide-name) {
    --nonstarter-name-gap: 1px !important;
    --nonstarter-photo-crop-bottom: var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) !important;
    --broadcast-player-bottom: calc(var(--nonstarter-name-h, 17px) + var(--nonstarter-name-gap, 1px)) !important;
    --broadcast-name-width: var(--broadcast-player-width, 76%) !important;
    --fs-slot-name-plate-w: var(--broadcast-player-width, 76%) !important;
  }

}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open {
    --mobile-team-sheet-title-h: 30px;
    --mobile-team-sheet-fallback-row-h: clamp(96px, 12dvh, 106px);
    --mobile-team-sheet-row-h: var(--mobile-team-sheet-player-h, var(--mobile-team-sheet-fallback-row-h));
    --mobile-team-sheet-slot-h-portrait: calc(var(--mobile-team-sheet-row-h) - 4px);
    --broadcast-roster-slot-h: var(--mobile-team-sheet-slot-h-portrait);
    --nonstarter-slot-h: var(--mobile-team-sheet-slot-h-portrait);
    --nonstarter-name-h: clamp(14px, calc(var(--mobile-team-sheet-slot-h-portrait) * 0.18), 17px);
    --mobile-team-sheet-pad-y: 4px;
    --mobile-team-sheet-gap: 4px;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 1308 !important;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(var(--mobile-team-sheet-title-h) + var(--mobile-team-sheet-row-h) + var(--mobile-team-sheet-gap) + var(--mobile-team-sheet-pad-y) + var(--mobile-team-sheet-pad-y) + env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    flex-direction: column !important;
    padding: var(--mobile-team-sheet-pad-y) 6px calc(var(--mobile-team-sheet-pad-y) + env(safe-area-inset-bottom)) !important;
    gap: var(--mobile-team-sheet-gap) !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--team-accent-border, #6bc6ff) 62%, rgba(255, 255, 255, 0.22)) !important;
    border-radius: 14px 14px 12px 12px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
      color-mix(in srgb, var(--team-accent-bg, #1b2936) 18%, rgba(10, 12, 16, 0.96)) !important;
    box-shadow:
      0 -18px 44px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 var(--mobile-team-sheet-title-h) !important;
    width: 100% !important;
    height: var(--mobile-team-sheet-title-h) !important;
    min-height: var(--mobile-team-sheet-title-h) !important;
    max-height: var(--mobile-team-sheet-title-h) !important;
    padding: 0 6px !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-label,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-menu {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title-menu {
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    --mobile-team-sheet-slot-h-portrait: calc(var(--mobile-team-sheet-row-h) - 4px);
    --broadcast-roster-slot-h: var(--mobile-team-sheet-slot-h-portrait);
    --nonstarter-slot-h: var(--mobile-team-sheet-slot-h-portrait);
    --nonstarter-name-h: clamp(14px, calc(var(--mobile-team-sheet-slot-h-portrait) * 0.18), 17px);
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: var(--mobile-team-sheet-row-h) !important;
    max-height: none !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players .player-slot,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players .player-slot.has-player {
    --nonstarter-slot-w: var(--fs-slot-render-w, var(--broadcast-roster-slot-w, var(--mobile-broadcast-slot-w, 54px))) !important;
    --nonstarter-slot-h: var(--fs-slot-render-h, var(--mobile-team-sheet-slot-h-portrait)) !important;
    --nonstarter-name-h: var(--fs-slot-name-plate-h, clamp(14px, calc(var(--mobile-team-sheet-slot-h-portrait) * 0.18), 17px)) !important;
    --nonstarter-name-gap: 1px !important;
    --nonstarter-photo-h: calc(var(--mobile-team-sheet-row-h) - var(--nonstarter-name-h) - var(--nonstarter-name-gap)) !important;
    --broadcast-player-bottom: calc(var(--nonstarter-name-h) + var(--nonstarter-name-gap)) !important;
    --broadcast-player-height: var(--nonstarter-photo-h) !important;
    --fs-slot-name-bottom: 0px !important;
    --fs-slot-photo-bottom: calc(var(--nonstarter-name-h) + var(--nonstarter-name-gap)) !important;
    --fs-slot-photo-z: 4 !important;
    --fs-slot-name-z: 12 !important;
    flex: 0 0 var(--nonstarter-slot-w) !important;
    width: var(--nonstarter-slot-w) !important;
    min-width: var(--nonstarter-slot-w) !important;
    max-width: var(--nonstarter-slot-w) !important;
    height: var(--nonstarter-slot-h) !important;
    min-height: var(--nonstarter-slot-h) !important;
    max-height: var(--nonstarter-slot-h) !important;
    justify-self: auto !important;
    align-self: flex-start !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle):not(.broadcast-hide-name) .player-name:not(:empty):not([data-slot-name-empty='1']):not(.is-empty-nameplate) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    --fs-slot-name-bottom: 0px !important;
    --fs-slot-name-z: 12 !important;
    position: absolute !important;
    left: var(--broadcast-name-left, 50%) !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, 76%)) !important;
    max-width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, 76%)) !important;
    height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    min-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    max-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    font-size: var(--fs-slot-name-font, max(7px, calc(var(--nonstarter-slot-h) * 0.103))) !important;
    line-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    transform: translateX(-50%) !important;
    z-index: var(--fs-slot-name-z, 12) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle):not(.broadcast-hide-name) [data-slot-bundle-part='name']:not([data-slot-bundle-visible='0']):not(:empty) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    --fs-slot-name-bottom: 0px !important;
    --fs-slot-name-z: 12 !important;
    left: var(--broadcast-name-left, 50%) !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, 76%)) !important;
    max-width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, 76%)) !important;
    height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    min-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    max-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    font-size: var(--fs-slot-name-font, max(7px, calc(var(--nonstarter-slot-h) * 0.103))) !important;
    line-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h)) !important;
    transform: translateX(-50%) !important;
    z-index: var(--fs-slot-name-z, 12) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) [data-slot-bundle-part='photo'] {
    --fs-slot-photo-bottom: calc(var(--nonstarter-name-h) + var(--nonstarter-name-gap)) !important;
    --fs-slot-photo-z: 4 !important;
    left: var(--fs-slot-photo-x, var(--broadcast-player-left, 50%)) !important;
    top: auto !important;
    right: auto !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--fs-slot-photo-w, var(--broadcast-player-width, 76%)) !important;
    max-width: var(--fs-slot-photo-w, var(--broadcast-player-width, 76%)) !important;
    height: var(--fs-slot-photo-h, var(--broadcast-player-height)) !important;
    max-height: var(--fs-slot-photo-h, var(--broadcast-player-height)) !important;
    transform: translateX(-50%) scale(var(--fs-slot-bundle-scale, 1)) scale(var(--fs-slot-photo-scale, 1)) scale(var(--fs-slot-photo-device-scale, 1)) !important;
    transform-origin: center bottom !important;
    z-index: var(--fs-slot-photo-z, 4) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-players .player-slot.has-player:not(.player-slot-bundle) :is(.player-img, img.player-img, .player-box > img) {
    --fs-slot-photo-bottom: calc(var(--nonstarter-name-h) + var(--nonstarter-name-gap)) !important;
    --fs-slot-photo-z: 4 !important;
    position: absolute !important;
    left: var(--fs-slot-photo-x, var(--broadcast-player-left, 50%)) !important;
    top: auto !important;
    right: auto !important;
    bottom: var(--broadcast-player-bottom) !important;
    width: var(--fs-slot-photo-w, var(--broadcast-player-width, 76%)) !important;
    max-width: var(--fs-slot-photo-w, var(--broadcast-player-width, 76%)) !important;
    height: var(--fs-slot-photo-h, var(--broadcast-player-height)) !important;
    max-height: var(--fs-slot-photo-h, var(--broadcast-player-height)) !important;
    transform: translateX(-50%) scale(var(--fs-slot-photo-scale, 1)) scale(var(--fs-slot-photo-device-scale, 1)) !important;
    transform-origin: center bottom !important;
    z-index: var(--fs-slot-photo-z, 4) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open {
    --mobile-team-sheet-slot-h-landscape: clamp(66px, 18dvh, 82px);
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players .player-slot,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players .player-slot.has-player {
    flex: 0 0 var(--mobile-team-sheet-slot-h, var(--mobile-team-sheet-slot-h-landscape, 76px)) !important;
    width: var(--nonstarter-slot-w, var(--mobile-broadcast-slot-w, 54px)) !important;
    min-width: var(--nonstarter-slot-w, var(--mobile-broadcast-slot-w, 54px)) !important;
    max-width: var(--nonstarter-slot-w, var(--mobile-broadcast-slot-w, 54px)) !important;
    height: var(--mobile-team-sheet-slot-h, var(--mobile-team-sheet-slot-h-landscape, 76px)) !important;
    min-height: var(--mobile-team-sheet-slot-h, var(--mobile-team-sheet-slot-h-landscape, 76px)) !important;
    max-height: var(--mobile-team-sheet-slot-h, var(--mobile-team-sheet-slot-h-landscape, 76px)) !important;
  }

  html[data-fs-image-rules-group='gta'] body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player, .tactics-player-chip):not([data-slot-custom-parts='1']),
  body.broadcast-board-mode[data-fs-image-rules-group='gta'] .field :is(.player-slot.field-slot.has-player, .tactics-player-chip):not([data-slot-custom-parts='1']),
  body.broadcast-board-mode.fs-image-rules-gta .field :is(.player-slot.field-slot.has-player, .tactics-player-chip):not([data-slot-custom-parts='1']) {
    width: clamp(27px, 6.5vh, 41px) !important;
    min-width: clamp(27px, 6.5vh, 41px) !important;
    max-width: clamp(27px, 6.5vh, 41px) !important;
    height: clamp(35px, 8.7vh, 55px) !important;
    min-height: clamp(35px, 8.7vh, 55px) !important;
    max-height: clamp(35px, 8.7vh, 55px) !important;
  }
}

body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player, .tactics-player-chip) .player-name:not(:empty)::before,
body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player, .tactics-player-chip).player-slot-bundle[data-slot-name-plate-shape='broadcastSlant'] [data-slot-bundle-part='name']::before {
  transform: translateX(-2px) !important;
}

body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player, .tactics-player-chip) .player-number {
  -webkit-text-stroke: var(--fs-slot-number-stroke-width, 0.35px) var(--fs-slot-number-stroke, rgba(255, 255, 255, 0.9)) !important;
  paint-order: stroke fill !important;
  text-shadow: var(--fs-slot-number-shadow, none) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

@media (max-width: 900px) {
  body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'],
  body.broadcast-board-mode.replay-hud-open .field :is(.player-slot.field-slot.has-player.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] {
    width: var(--fs-slot-render-w, var(--fs-slot-template-w, 72px)) !important;
    min-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 72px)) !important;
    max-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 72px)) !important;
    height: var(--fs-slot-render-h, var(--fs-slot-template-h, 96px)) !important;
    min-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 96px)) !important;
    max-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 96px)) !important;
    transform: translate(-50%, -50%) scale(var(--fs-slot-visual-scale, var(--fs-slot-mobile-ratio, 1))) !important;
    transform-origin: center center !important;
    --fs-slot-bundle-scale: 1 !important;
    --fs-slot-photo-device-scale: 1 !important;
    --fs-slot-name-device-scale: 1 !important;
    --fs-slot-number-device-scale: 1 !important;
    --fs-slot-position-device-scale: 1 !important;
  }

  body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] > :is(.player-box, .player-slot-bundle-box),
  body.broadcast-board-mode.replay-hud-open .field :is(.player-slot.field-slot.has-player.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] > :is(.player-box, .player-slot-bundle-box),
  body.broadcast-board-mode .field :is(.player-slot.field-slot.has-player.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] .player-box.player-slot-bundle-box,
  body.broadcast-board-mode.replay-hud-open .field :is(.player-slot.field-slot.has-player.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] .player-box.player-slot-bundle-box {
    scale: 1 !important;
    transform-origin: center center !important;
  }
}

/* Final non-starter footer contract:
   cutout team boxes keep the shared starter crop, then place the external
   nameplate 1px below the player photo. Replay substitutes remain name-free. */
body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player:not(.broadcast-player-card) {
  --nonstarter-name-gap: 1px !important;
  --nonstarter-photo-crop-bottom: var(--fs-slot-photo-crop-bottom, calc(12% + 4px)) !important;
  --nonstarter-photo-crop-compensation: 16px !important;
  --broadcast-player-bottom: calc(var(--fs-slot-name-plate-h, var(--nonstarter-name-h, 17px)) + var(--nonstarter-name-gap, 1px)) !important;
  --team-box-photo-bottom: max(0px, calc(var(--broadcast-player-bottom) - var(--nonstarter-photo-crop-compensation, 0px))) !important;
  --fs-slot-photo-bottom: var(--team-box-photo-bottom) !important;
  --fs-slot-name-bottom: 0px !important;
  --fs-slot-photo-z: 4 !important;
  --fs-slot-name-z: 12 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player:not(.broadcast-player-card)
  :is([data-slot-bundle-part='photo'], .player-img, img.player-img, .player-box > img) {
  --fs-slot-photo-bottom: var(--team-box-photo-bottom, var(--broadcast-player-bottom)) !important;
  position: absolute !important;
  left: var(--fs-slot-photo-x, var(--broadcast-player-left, 50%)) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--team-box-photo-bottom, var(--broadcast-player-bottom)) !important;
  width: var(--fs-slot-photo-w, var(--broadcast-player-width, 76%)) !important;
  min-width: 0 !important;
  max-width: var(--fs-slot-photo-w, var(--broadcast-player-width, 76%)) !important;
  height: var(--fs-slot-photo-h, var(--broadcast-player-height, calc(100% - var(--team-box-photo-bottom, var(--broadcast-player-bottom, 18px))))) !important;
  min-height: 0 !important;
  max-height: var(--fs-slot-photo-h, var(--broadcast-player-height, calc(100% - var(--team-box-photo-bottom, var(--broadcast-player-bottom, 18px))))) !important;
  object-fit: var(--fs-slot-photo-fit, var(--broadcast-slot-canonical-cutout-fit, cover)) !important;
  object-position: var(--fs-slot-photo-object-position, var(--broadcast-slot-canonical-cutout-position, center 18%)) !important;
  transform: translateX(-50%) scale(var(--fs-slot-photo-scale, 1)) scale(var(--fs-slot-photo-device-scale, 1)) !important;
  transform-origin: center bottom !important;
  clip-path: inset(0 0 var(--fs-slot-photo-crop-bottom, var(--nonstarter-photo-crop-bottom, calc(12% + 4px))) 0) !important;
  filter: none !important;
  -webkit-filter: none !important;
  z-index: var(--fs-slot-photo-z, 4) !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player:not(.broadcast-player-card)
  :is(.player-name:not(:empty), [data-slot-bundle-part='name']:not(:empty)):not([data-slot-name-empty='1']):not(.is-empty-nameplate) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: var(--broadcast-name-left, 50%) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--fs-slot-name-bottom, 0px) !important;
  width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, 76%)) !important;
  max-width: var(--fs-slot-name-plate-w, var(--broadcast-name-width, 76%)) !important;
  height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h, 17px)) !important;
  min-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h, 17px)) !important;
  max-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h, 17px)) !important;
  font-size: var(--fs-slot-name-font, max(7px, calc(var(--nonstarter-slot-h, 96px) * 0.103))) !important;
  line-height: var(--fs-slot-name-plate-h, var(--nonstarter-name-h, 17px)) !important;
  transform: translateX(-50%) !important;
  z-index: var(--fs-slot-name-z, 12) !important;
}

@media (min-width: 901px) {
  body.broadcast-board-mode :is(.team-box, .candidate-column .team-box)
    .player-slot.player-slot-bundle.is-nonstarter-slot.has-player:not(.broadcast-player-card)
    :is(.player-name:not(:empty), [data-slot-bundle-part='name']:not(:empty)):not([data-slot-name-empty='1']):not(.is-empty-nameplate) {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--fs-slot-name-bottom, 0px) !important;
    transform: translateX(-50%) !important;
  }
}

body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
  .player-slot.has-player
  :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'], [data-slot-bundle-part='name']:not(:empty)),
body.broadcast-board-mode.replay-hud-open #candidate-mobile.is-replay-team-rail .mobile-team-players
  .player-slot.has-player
  :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'], [data-slot-bundle-part='name']:not(:empty)) {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html[data-fs-slot-photo-mode='card'] body.broadcast-board-mode
  :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players, .field-wrapper > .sub-slot-container)
  .player-slot.has-player
  :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'], [data-slot-bundle-part='name']:not(:empty)),
body.broadcast-board-mode[data-fs-slot-photo-mode='card']
  :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players, .field-wrapper > .sub-slot-container)
  .player-slot.has-player
  :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'], [data-slot-bundle-part='name']:not(:empty)) {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.has-player:is(.broadcast-player-card, .broadcast-hide-name, [data-fs-slot-photo-mode='card'])
  :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'], [data-slot-bundle-part='name']:not(:empty)),
body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.has-player:has(.player-box.broadcast-player-card, .player-box.broadcast-hide-name, .player-box[data-fs-slot-photo-mode='card'])
  :is(.player-name, .player-name:not(:empty), [data-slot-bundle-part='name'], [data-slot-bundle-part='name']:not(:empty)) {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Completed/card artwork already carries its name/number. Team boxes should
   preserve the original image ratio and only scale the full artwork down. */
body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card,
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card {
  --nonstarter-name-gap: 0px !important;
  --nonstarter-photo-crop-bottom: 0px !important;
  --team-box-card-w: 100% !important;
  --team-box-card-h: 100% !important;
  --team-box-card-bottom: 0px !important;
  --broadcast-player-left: 50% !important;
  --broadcast-player-bottom: var(--team-box-card-bottom, 0px) !important;
  --broadcast-player-width: var(--team-box-card-w, 100%) !important;
  --broadcast-player-height: var(--team-box-card-h, 100%) !important;
  --fs-slot-photo-bottom: var(--team-box-card-bottom, 0px) !important;
  --fs-slot-photo-h: var(--team-box-card-h, 100%) !important;
  --fs-slot-photo-w: var(--team-box-card-w, 100%) !important;
  --fs-slot-photo-fit: contain !important;
  --fs-slot-photo-object-position: center bottom !important;
  --fs-slot-photo-crop-bottom: 0% !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
  :is(.player-box, .player-slot-bundle-box),
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
  :is(.player-box, .player-slot-bundle-box) {
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
  :is([data-slot-bundle-part='photo'], .player-img, img.player-img, .player-box > img),
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
  :is([data-slot-bundle-part='photo'], .player-img, img.player-img, .player-box > img) {
  display: block !important;
  position: absolute !important;
  left: var(--broadcast-player-left, 50%) !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: var(--broadcast-player-width, 100%) !important;
  min-width: 0 !important;
  max-width: var(--broadcast-player-width, 100%) !important;
  height: var(--broadcast-player-height, 100%) !important;
  min-height: 0 !important;
  max-height: var(--broadcast-player-height, 100%) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  clip-path: none !important;
  transform: translateX(-50%) !important;
  transform-origin: center bottom !important;
  filter: none !important;
  -webkit-filter: none !important;
  z-index: var(--fs-slot-photo-z, 4) !important;
}

body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
  :is(.player-name, [data-slot-bundle-part='name'], .player-number, [data-slot-bundle-part='number'], .slot-label, [data-slot-bundle-part='position']),
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
  .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
  :is(.player-name, [data-slot-bundle-part='name'], .player-number, [data-slot-bundle-part='number'], .slot-label, [data-slot-bundle-part='position']) {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

@media (min-width: 901px) {
  body.broadcast-board-mode :is(.team-box, .candidate-column .team-box)
    .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card,
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
    .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card {
    --team-box-card-w: var(--broadcast-slot-canonical-card-width, 98%) !important;
    --team-box-card-h: var(--broadcast-slot-canonical-card-height, 100%) !important;
    --team-box-card-bottom: var(--broadcast-slot-canonical-card-bottom, 0px) !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode :is(.team-box, .candidate-column .team-box)
    .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
    :is(.player-box, .player-slot-bundle-box),
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
    .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card
    :is(.player-box, .player-slot-bundle-box) {
    overflow: hidden !important;
  }
}

@media (max-width: 900px) {
  body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players)
    .player-slot.player-slot-bundle.is-nonstarter-slot.has-player:not(.broadcast-player-card),
  body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container
    .player-slot.player-slot-bundle.is-nonstarter-slot.has-player:not(.broadcast-player-card) {
    --nonstarter-photo-crop-compensation: 15px !important;
  }
}

@media (max-width: 900px) {
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open),
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-title {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-title-label,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-title-menu,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box:not(.is-mobile-sheet-open) .mobile-team-players {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    color: #f6f9ff !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
      color-mix(in srgb, var(--team-accent-bg, #1b2936) 18%, rgba(10, 12, 16, 0.96)) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open {
    --mobile-team-sheet-fallback-row-h: clamp(82px, 10dvh, 92px) !important;
    --mobile-team-sheet-row-h: var(--mobile-team-sheet-player-h, var(--mobile-team-sheet-fallback-row-h)) !important;
    --mobile-team-sheet-slot-h-portrait: calc(var(--mobile-team-sheet-row-h) - 4px) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players {
    --broadcast-roster-slot-w: clamp(58px, 18vw, 72px) !important;
    --nonstarter-slot-w: var(--broadcast-roster-slot-w) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-title {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #f7f9fc !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, rgba(72, 78, 87, 0.82), rgba(24, 28, 35, 0.94)),
      color-mix(in srgb, var(--team-accent-bg, #2d343c) 28%, #121820) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 3px 10px rgba(0, 0, 0, 0.28) !important;
  }

  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players,
  body.broadcast-board-mode:not(.replay-hud-open) #candidate-mobile .mobile-team-box.is-mobile-sheet-open .mobile-team-players :is(.player-slot, .player-box, .player-slot-bundle-box) {
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

body.broadcast-board-mode :is(.team-box, .candidate-column .team-box, #candidate-mobile .mobile-team-players, .field-wrapper > .sub-slot-container)
  .player-slot.player-slot-bundle.is-nonstarter-slot {
  --nonstarter-slot-w: var(--fs-slot-render-w, var(--fs-slot-template-w, 86px)) !important;
  --nonstarter-slot-h: var(--fs-slot-render-h, var(--fs-slot-template-h, 112px)) !important;
  width: var(--nonstarter-slot-w) !important;
  min-width: var(--nonstarter-slot-w) !important;
  max-width: var(--nonstarter-slot-w) !important;
  height: var(--nonstarter-slot-h) !important;
  min-height: var(--nonstarter-slot-h) !important;
  max-height: var(--nonstarter-slot-h) !important;
  flex: 0 0 var(--nonstarter-slot-w) !important;
}

body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card,
body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card,
body.broadcast-board-mode.replay-hud-open .field-wrapper > .sub-slot-container .player-slot.player-slot-bundle.is-nonstarter-slot.has-player.broadcast-player-card {
  --nonstarter-slot-w: var(--fs-slot-render-w, var(--fs-slot-template-w, 86px)) !important;
  --nonstarter-slot-h: var(--fs-slot-render-h, var(--fs-slot-template-h, 112px)) !important;
  width: var(--nonstarter-slot-w) !important;
  min-width: var(--nonstarter-slot-w) !important;
  max-width: var(--nonstarter-slot-w) !important;
  height: var(--nonstarter-slot-h) !important;
  min-height: var(--nonstarter-slot-h) !important;
  max-height: var(--nonstarter-slot-h) !important;
  flex: 0 0 var(--nonstarter-slot-w) !important;
}

@media (min-width: 901px) {
  body.broadcast-board-mode.fs-image-rules-gta .field
    :is(.player-slot.field-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle) {
    --fs-slot-context-scale: 1 !important;
    --fs-slot-bundle-scale: 1 !important;
    --fs-slot-photo-device-scale: 1 !important;
    --fs-slot-name-device-scale: 1 !important;
    --fs-slot-number-device-scale: 1 !important;
    --fs-slot-position-device-scale: 1 !important;
  }

  body.broadcast-board-mode.fs-image-rules-gta .field
    :is(.player-slot.field-slot.player-slot-bundle, .tactics-player-chip.player-slot-bundle)[data-slot-custom-parts='1'] {
    width: var(--fs-slot-render-w, var(--fs-slot-template-w, 72px)) !important;
    min-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 72px)) !important;
    max-width: var(--fs-slot-render-w, var(--fs-slot-template-w, 72px)) !important;
    height: var(--fs-slot-render-h, var(--fs-slot-template-h, 96px)) !important;
    min-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 96px)) !important;
    max-height: var(--fs-slot-render-h, var(--fs-slot-template-h, 96px)) !important;
  }

}

@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column > .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box.is-broadcast-rail-open,
  body.broadcast-board-mode:not(.replay-hud-open) .team-box.is-broadcast-rail-open {
    width: var(--broadcast-mobile-team-drawer-w, min(32vw, 260px)) !important;
    max-width: min(300px, calc(100vw - (var(--broadcast-side-rail, 74px) * 2) - 12px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile portrait owns team access through the bottom #candidate-mobile rail. */
@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column.auto-team-layout,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-title,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .broadcast-rail-logo,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box,
  body.broadcast-board-mode:not(.replay-hud-open) .candidate-column .team-box.is-broadcast-rail-open {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.broadcast-board-mode.replay-hud-open #eventReplayOverlay .er-progress {
    left: 10px !important;
    right: 10px !important;
    bottom: 2px !important;
    height: 5px !important;
    border-radius: 999px !important;
  }
}

/* Landscape replay viewport lock:
   one visual viewport rect drives the field, frame, and early replay chrome. */
html body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #mobileOptionsBtn,
html body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #mobileOptionsBtn:not(.hidden),
html body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #mobileOptionsBtn.hidden,
html body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #mobileQuickActions,
html body.broadcast-board-mode.replay-entry-prime:not(.replay-hud-open) #mobileOptionsPopup,
html body.broadcast-board-mode.replay-hud-open #mobileOptionsBtn,
html body.broadcast-board-mode.replay-hud-open #mobileOptionsBtn:not(.hidden),
html body.broadcast-board-mode.replay-hud-open #mobileOptionsBtn.hidden,
html body.broadcast-board-mode.replay-hud-open #mobileQuickActions,
html body.broadcast-board-mode.replay-hud-open #mobileOptionsPopup {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (orientation: landscape) {
  body.broadcast-board-mode .broadcast-laser-frame {
    inset: var(--broadcast-field-frame-inset-y, 1px) var(--broadcast-field-frame-inset-x, 1px) !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 1180px),
  (orientation: landscape) and (max-width: 1024px),
  (orientation: landscape) and (max-height: 560px) and (max-width: 1366px) and (pointer: coarse),
  (orientation: landscape) and (max-height: 560px) and (max-width: 1366px) and (any-pointer: coarse),
  (orientation: landscape) and (max-height: 560px) and (max-width: 1366px) and (hover: none),
  (orientation: landscape) and (max-width: 1024px) and (pointer: coarse),
  (orientation: landscape) and (max-width: 1024px) and (any-pointer: coarse),
  (orientation: landscape) and (max-width: 1024px) and (hover: none) {
  body.broadcast-board-mode {
    --broadcast-fit-top-gap: var(--broadcast-fit-edge-gap, 6px);
    --broadcast-fit-bottom-gap: max(
      var(--broadcast-fit-edge-gap, 6px),
      var(--broadcast-fit-bottom-guard, var(--broadcast-fit-edge-gap, 6px)),
      env(safe-area-inset-bottom)
    );
    --broadcast-fit-y-gap-total: calc(var(--broadcast-fit-top-gap) + var(--broadcast-fit-bottom-gap));
  }

  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .main-content,
  body.broadcast-board-mode.replay-entry-prime .main-content,
  body.broadcast-board-mode.replay-hud-open .main-content {
    position: fixed !important;
    top: var(--broadcast-visual-top, 0px) !important;
    left: var(--broadcast-visual-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--broadcast-visual-vw, 100vw) !important;
    height: var(--broadcast-visual-vh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--broadcast-visual-vh, 100dvh) !important;
    display: flex !important;
    flex-direction: row !important;
    padding-top: var(--broadcast-fit-top-gap, var(--broadcast-fit-edge-gap, 6px)) !important;
    padding-bottom: var(--broadcast-fit-bottom-gap, max(var(--broadcast-fit-edge-gap, 6px), env(safe-area-inset-bottom))) !important;
    padding-left: calc(var(--broadcast-side-rail, 64px) + max(2px, env(safe-area-inset-left))) !important;
    padding-right: calc(var(--broadcast-side-rail, 64px) + max(2px, env(safe-area-inset-right))) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .center,
  body.broadcast-board-mode.replay-entry-prime .center,
  body.broadcast-board-mode.replay-hud-open .center {
    flex: 0 0 var(--broadcast-fit-field-w, calc(var(--broadcast-visual-vw, 100vw) - var(--broadcast-side-rail, 64px) - var(--broadcast-side-rail, 64px) - 8px)) !important;
    width: var(--broadcast-fit-field-w, calc(var(--broadcast-visual-vw, 100vw) - var(--broadcast-side-rail, 64px) - var(--broadcast-side-rail, 64px) - 8px)) !important;
    min-width: 0 !important;
    max-width: var(--broadcast-fit-field-w, calc(var(--broadcast-visual-vw, 100vw) - var(--broadcast-side-rail, 64px) - var(--broadcast-side-rail, 64px) - 8px)) !important;
    align-self: center !important;
    margin: 0 auto !important;
    height: min(
      var(--broadcast-fit-field-h, calc(var(--broadcast-visual-vh, 100dvh) - var(--broadcast-fit-y-gap-total, var(--broadcast-fit-edge-gap-total, 12px)))),
      calc(var(--broadcast-visual-vh, 100dvh) - var(--broadcast-fit-y-gap-total, var(--broadcast-fit-edge-gap-total, 12px)))
    ) !important;
    max-height: calc(var(--broadcast-visual-vh, 100dvh) - var(--broadcast-fit-y-gap-total, var(--broadcast-fit-edge-gap-total, 12px))) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .center::before,
  body.broadcast-board-mode.replay-entry-prime .center::before,
  body.broadcast-board-mode.replay-hud-open .center::before {
    top: var(--broadcast-field-frame-inset-y, 1px) !important;
    bottom: var(--broadcast-field-frame-inset-y, 1px) !important;
  }

  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .center::after,
  body.broadcast-board-mode.replay-entry-prime .center::after,
  body.broadcast-board-mode.replay-hud-open .center::after {
    width: var(--broadcast-center-circle-size, min(16vw, 210px)) !important;
  }

  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .center > .field-wrapper,
  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) #field-wrapper-1,
  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) #field-wrapper-2,
  body.broadcast-board-mode.replay-entry-prime .center > .field-wrapper,
  body.broadcast-board-mode.replay-hud-open .center > .field-wrapper,
  body.broadcast-board-mode.replay-entry-prime #field-wrapper-1,
  body.broadcast-board-mode.replay-entry-prime #field-wrapper-2,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-1,
  body.broadcast-board-mode.replay-hud-open #field-wrapper-2 {
    flex: 0 0 var(--broadcast-fit-half-w, 50%) !important;
    width: var(--broadcast-fit-half-w, 50%) !important;
    min-width: var(--broadcast-fit-half-w, 0px) !important;
    max-width: var(--broadcast-fit-half-w, 50%) !important;
    height: var(
      --broadcast-fit-field-inner-h,
      calc(100% - var(--broadcast-field-frame-inset-y, 2px) - var(--broadcast-field-frame-inset-y, 2px))
    ) !important;
    min-height: 0 !important;
    max-height: calc(
      100% - var(--broadcast-field-frame-inset-y, 2px) - var(--broadcast-field-frame-inset-y, 2px)
    ) !important;
    align-self: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .field-stage,
  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) #field-1,
  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) #field-2,
  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .field,
  body.broadcast-board-mode.replay-entry-prime .field-stage,
  body.broadcast-board-mode.replay-entry-prime #field-1,
  body.broadcast-board-mode.replay-entry-prime #field-2,
  body.broadcast-board-mode.replay-entry-prime .field,
  body.broadcast-board-mode.replay-hud-open .field-stage,
  body.broadcast-board-mode.replay-hud-open #field-1,
  body.broadcast-board-mode.replay-hud-open #field-2,
  body.broadcast-board-mode.replay-hud-open .field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }

  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .field-lines,
  body.broadcast-board-mode:not(.replay-entry-prime):not(.replay-hud-open) .outline,
  body.broadcast-board-mode.replay-entry-prime .field-lines,
  body.broadcast-board-mode.replay-entry-prime .outline,
  body.broadcast-board-mode.replay-hud-open .field-lines,
  body.broadcast-board-mode.replay-hud-open .outline {
    inset: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  html body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-1 .formation-label,
  html body.broadcast-board-mode:not(.replay-hud-open) #field-wrapper-2 .formation-label,
  html body.broadcast-board-mode .field .player-slot.field-slot.broadcast-reference-slot .slot-label,
  html body.broadcast-board-mode[data-field-sport-mode='futsal'] .field .player-slot.field-slot.broadcast-reference-slot .slot-label,
  html[data-field-sport-mode='futsal'] body.broadcast-board-mode .field .player-slot.field-slot.broadcast-reference-slot .slot-label,
  html body.broadcast-board-mode .field-stage .player-slot.field-slot.broadcast-reference-slot .slot-label {
    font-family: Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    font-weight: 700 !important;
    opacity: 0.5 !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  html.is-webkit-browser body.broadcast-board-mode .field,
  html.is-webkit-browser body.broadcast-board-mode .outline,
  html.is-webkit-browser body.broadcast-board-mode .penalty,
  html.is-webkit-browser body.broadcast-board-mode .goal,
  html.is-webkit-browser body.broadcast-board-mode .center::before,
  html.is-webkit-browser body.broadcast-board-mode .center::after {
    box-shadow: none !important;
  }
}

/* Desktop Mungchan team boxes keep GTA-sized panels/slots without squeezing the field. */
@media (min-width: 901px) {
  body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open),
  body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open) {
    --broadcast-desktop-rail-w: clamp(226px, 13vw, 260px);
  }

  @media (min-width: 1440px) {
    body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open) :is(#candidate-TEAM_A, #candidate-TEAM_B),
    body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open) :is(#candidate-TEAM_A, #candidate-TEAM_B) {
      --mungchan-team-panel-w: min(256px, calc(var(--broadcast-desktop-rail-w) + var(--broadcast-desktop-rail-gap, 16px) + 14px));
      width: var(--mungchan-team-panel-w) !important;
      min-width: var(--mungchan-team-panel-w) !important;
      max-width: var(--mungchan-team-panel-w) !important;
    }
  }

  body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open) :is(#candidate-TEAM_A, #candidate-TEAM_B),
  body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open) :is(#candidate-TEAM_A, #candidate-TEAM_B) {
    --team-row-gap: 0px !important;
    --team-gap-total: 0px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open) .candidate-column .team-box:not(.is-broadcast-rail-open),
  body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open) .candidate-column .team-box:not(.is-broadcast-rail-open) {
    --mungchan-team-box-min-slot-w: 72px;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--mungchan-team-box-min-slot-w), 1fr)) !important;
    grid-auto-rows: auto !important;
    padding: 0 !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    grid-auto-flow: row dense !important;
    align-content: start !important;
    align-items: start !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    overflow: hidden auto !important;
  }

  body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open)
    :is(#candidate-TEAM_A, #candidate-TEAM_B).candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open)
    .candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open)
    :is(#candidate-TEAM_A, #candidate-TEAM_B).candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open)
    .candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open)
    :is(#candidate-TEAM_A, #candidate-TEAM_B).candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.player-slot-bundle.is-nonstarter-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open)
    :is(#candidate-TEAM_A, #candidate-TEAM_B).candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.player-slot-bundle.is-nonstarter-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-group='mungchan']:not(.replay-hud-open)
    .candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.player-slot-bundle.is-nonstarter-slot.has-player,
  body.broadcast-board-mode[data-fs-image-rules-league^='mungchan']:not(.replay-hud-open)
    .candidate-column .team-box:not(.is-broadcast-rail-open) .player-slot.has-player {
    --nonstarter-slot-w: var(--fs-slot-template-w, 72px) !important;
    --nonstarter-slot-h: var(--fs-slot-template-h, 96px) !important;
    width: var(--nonstarter-slot-w) !important;
    min-width: var(--nonstarter-slot-w) !important;
    max-width: var(--nonstarter-slot-w) !important;
    height: var(--nonstarter-slot-h) !important;
    min-height: var(--nonstarter-slot-h) !important;
    max-height: var(--nonstarter-slot-h) !important;
    margin: 0 !important;
    flex: 0 0 var(--nonstarter-slot-w) !important;
    justify-self: center !important;
  }
}