:root {
  color-scheme: light;
  --ui-font-scale: 1;
  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel-strong: #eef3f4;
  --panel-soft: #eef3f4;
  --ink: #162029;
  --muted: #63717d;
  --line: #d9e1e8;
  --accent: #006d77;
  --accent-dark: #074e58;
  --accent-soft: rgba(0, 109, 119, 0.1);
  --gold: #c9921a;
  --green: #267451;
  --red: #a43b3b;
  --shadow: 0 10px 28px rgba(22, 32, 41, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1318;
  --panel: #151e25;
  --panel-strong: #1d2a33;
  --panel-soft: #1d2a33;
  --ink: #edf4f7;
  --muted: #9cadb8;
  --line: #2b3b46;
  --accent: #16a0a5;
  --accent-dark: #71d7d5;
  --accent-soft: rgba(113, 215, 213, 0.13);
  --gold: #d4a83a;
  --green: #61c58e;
  --red: #ee7474;
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body {
  overflow: hidden;
  font-size: calc(13px * var(--ui-font-scale));
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="search"] {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

button {
  padding: 0 12px;
  cursor: pointer;
  font-weight: 700;
}

button:hover,
select:hover,
input[type="search"]:hover {
  border-color: #aebdc8;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(0, 109, 119, 0.28);
  outline-offset: 2px;
}

button.active,
button.primary-action {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

#refreshButton[disabled] {
  opacity: 0.65;
  cursor: wait;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 700;
}

a:hover {
  text-decoration: underline;
}

.app-shell {
  display: grid;
  grid-template-columns: 220px minmax(560px, 1fr) 350px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 0 rgba(22, 32, 41, 0.02);
}

.brand-block {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 11px;
  min-width: 230px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-dark);
  color: #fff;
  font-weight: 900;
}

.brand-mark.brand-mark-image {
  overflow: hidden;
  padding: 2px;
  background: #006b52;
}

.brand-mark.brand-mark-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* The UCL mark is a transparent starball, not a cropped club-style crest. */
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .brand-mark.brand-mark-image {
  padding: 0;
  background: transparent;
  overflow: visible;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .brand-mark.brand-mark-image img {
  border-radius: 0;
  object-fit: contain;
}

html[data-environment="uel2026"] .brand-mark.brand-mark-image {
  background:
    linear-gradient(128deg, transparent 0 18%, rgba(255, 82, 0, .34) 19% 20%, transparent 21% 80%, rgba(255, 82, 0, .3) 81% 82%, transparent 83%),
    #000;
  overflow: hidden;
  padding: 6px;
}

html[data-environment="uel2026"] .brand-mark.brand-mark-image img {
  width: auto;
  height: 28px;
  max-width: none;
  max-height: 28px;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: invert(1) hue-rotate(180deg);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: calc(18px * var(--ui-font-scale));
  line-height: 1.1;
}

h2 {
  font-size: calc(24px * var(--ui-font-scale));
  line-height: 1.1;
}

#metaLine {
  display: none;
}

.view-tabs {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  flex-shrink: 0;
  max-width: min(760px, 100%);
  height: 44px;
  padding: 4px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: #edf7f5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.view-tabs span {
  padding: 0 9px;
  color: var(--accent-dark);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 900;
  text-transform: uppercase;
}

.view-tabs button {
  min-width: 108px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale));
  white-space: nowrap;
}

.view-tabs button.active {
  background: var(--accent);
  color: #fff;
}

.panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.panel-tabs button {
  height: 32px;
  border: 0;
  background: transparent;
}

.panel-tabs button.active {
  background: var(--accent);
  color: #fff;
}

.field-label {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
  text-transform: uppercase;
}

.app-menu {
  position: relative;
  justify-self: end;
  margin-left: 0;
}

.menu-button {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  width: 42px;
  height: 38px;
  padding: 0;
}

.menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.menu-button.has-watchdog-warning::after,
.menu-button.has-watchdog-error::after {
  content: "!";
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: #c9921a;
  color: #111820;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
}

.menu-button.has-watchdog-error::after {
  background: #d84d57;
  color: #fff;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 8px;
  width: min(310px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.watchdog-panel {
  overflow: hidden;
  border: 1px solid #d9e4ea;
  border-radius: 8px;
  background: #f8fbfb;
}

.watchdog-panel summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  cursor: pointer;
  list-style: none;
}

.watchdog-panel summary::-webkit-details-marker {
  display: none;
}

.watchdog-panel summary::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.72;
}

.watchdog-panel[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.watchdog-status-badge {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(38, 116, 81, 0.12);
  color: #267451;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
}

.watchdog-panel strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.watchdog-panel small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.watchdog-warn {
  border-color: rgba(201, 146, 26, 0.55);
  background: rgba(201, 146, 26, 0.11);
}

.watchdog-error {
  border-color: rgba(184, 59, 66, 0.6);
  background: rgba(184, 59, 66, 0.09);
}

.watchdog-loading .watchdog-status-badge {
  background: rgba(99, 113, 125, 0.12);
  color: var(--muted);
}

.watchdog-warn .watchdog-status-badge {
  background: rgba(201, 146, 26, 0.18);
  color: #8a620f;
}

.watchdog-error .watchdog-status-badge {
  background: rgba(184, 59, 66, 0.18);
  color: #9c252c;
}

.watchdog-details-list {
  display: grid;
  gap: 6px;
  padding: 0 7px 7px;
}

.watchdog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid #e1eaee;
  border-left-width: 4px;
  border-radius: 7px;
  background: var(--panel);
}

.watchdog-item div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.watchdog-item strong {
  font-size: calc(11px * var(--ui-font-scale));
}

.watchdog-item span,
.watchdog-item em,
.watchdog-empty {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.25;
}

.watchdog-item em {
  font-style: normal;
  color: var(--ink);
}

.watchdog-item button,
.watchdog-actions button {
  min-height: 28px;
  padding: 4px 8px;
  white-space: nowrap;
  text-align: center;
}

.watchdog-item-warn {
  border-left-color: #c9921a;
}

.watchdog-item-error {
  border-left-color: #b83b42;
}

.watchdog-item-neutral {
  border-left-color: #7d8b95;
}

.watchdog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 7px 7px;
}

.menu-section {
  overflow: hidden;
  border: 1px solid #d9e4ea;
  border-radius: 8px;
  background: var(--panel);
}

.menu-section-direct {
  padding-top: 7px;
}

.menu-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 7px 9px;
  color: var(--accent-dark);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  list-style: none;
}

.menu-section summary::-webkit-details-marker {
  display: none;
}

.menu-section summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.72;
}

.menu-section[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.menu-section > button,
.menu-section > .menu-toggle,
.menu-section > .menu-action-row {
  margin: 0 7px 7px;
}

.menu-data-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 1px solid #e5ecef;
  border-radius: 7px;
  background: transparent;
}

.menu-data-stats div {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 8px;
  border-radius: 7px;
}

.menu-data-stats .data-stat-ok {
  background: rgba(38, 116, 81, 0.09);
}

.menu-data-stats .data-stat-warn {
  background: rgba(201, 146, 26, 0.14);
}

.menu-data-stats .data-stat-neutral {
  background: rgba(99, 113, 125, 0.08);
}

.menu-data-stats span {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
  text-transform: uppercase;
}

.menu-data-stats strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(15px * var(--ui-font-scale));
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu-panel button {
  width: 100%;
  text-align: left;
}

.menu-section > button,
.menu-action-row > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border-color: #d8e3e8;
  background: #f8fbfb;
  color: var(--ink);
  font-weight: 850;
}

.menu-section > button:hover,
.menu-action-row > button:hover {
  border-color: var(--accent);
  background: #edf8f8;
  color: var(--accent-dark);
}

.menu-section > button:disabled,
.menu-action-row > button:disabled {
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--muted);
  opacity: 0.72;
}

.menu-section > button:disabled:hover,
.menu-action-row > button:disabled:hover {
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--muted);
}

.menu-action-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
}

.menu-action-row > button {
  width: 100%;
  min-width: 0;
}

.menu-info {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  cursor: help;
  user-select: none;
}

.menu-info:hover,
.menu-info:focus-visible {
  border-color: var(--accent);
  color: var(--accent-dark);
  outline: none;
}

.menu-info::after {
  content: attr(data-info);
  position: absolute;
  z-index: 30;
  top: 50%;
  right: calc(100% + 8px);
  width: min(360px, 72vw);
  max-width: 360px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.menu-info:hover::after,
.menu-info:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%);
}

.menu-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--ink);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 850;
  cursor: pointer;
}

.menu-range {
  display: grid;
  gap: 7px;
  margin: 0 7px 7px;
  padding: 8px;
  border: 1px solid #e2eaef;
  border-radius: 7px;
  background: #f8fbfb;
}

.menu-range label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 850;
}

.menu-range strong {
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
}

.menu-range input[type="range"] {
  width: 100%;
  height: 18px;
  padding: 0;
  accent-color: var(--accent);
}

.menu-toggle:hover {
  background: #f3f7f8;
}

.menu-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.menu-section > .menu-toggle.menu-toggle-child {
  margin-left: 22px;
}

.menu-toggle.menu-toggle-child {
  padding-left: 9px;
  border-left: 2px solid rgba(26, 160, 168, 0.28);
}

.menu-toggle.menu-toggle-child-disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.64;
}

.menu-toggle.menu-toggle-child-disabled:hover {
  background: transparent;
}

.menu-toggle input:disabled {
  cursor: not-allowed;
}

.menu-meta {
  margin-top: 2px;
  padding: 3px 2px 0;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.25;
}

.stats-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 31, 40, 0.34);
}

.stats-dialog {
  width: min(920px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

.stats-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.stats-dialog h2 {
  margin: 2px 0 0;
  font-size: calc(24px * var(--ui-font-scale));
  line-height: 1.05;
}

.stats-dialog .muted {
  margin: 3px 0 0;
}

.stats-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: calc(20px * var(--ui-font-scale));
  line-height: 1;
}

.source-health-dialog {
  width: min(780px, 100%);
}

.refresh-log-dialog {
  width: min(1040px, 100%);
}

.log-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.log-dialog-actions button:not(.stats-close) {
  height: 40px;
  padding: 0 12px;
  white-space: nowrap;
}

.source-health-list {
  display: grid;
  gap: 8px;
}

.source-health-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid #dce8ec;
  border-left-width: 5px;
  border-radius: 8px;
  background: #f8fbfb;
}

.source-health-row div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.source-health-row strong {
  color: var(--ink);
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 950;
}

.source-health-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.source-health-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
}

.source-health-meta em {
  padding: 2px 7px;
  border-radius: 999px;
  background: #edf3f5;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.source-health-meta small {
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
}

.source-health-ok {
  border-left-color: #267451;
}

.source-health-ok .source-health-meta em {
  background: rgba(38, 116, 81, 0.12);
  color: #267451;
}

.source-health-warn {
  border-left-color: #c9921a;
}

.source-health-warn .source-health-meta em {
  background: rgba(201, 146, 26, 0.16);
  color: #8a620f;
}

.source-health-error {
  border-left-color: #b83b42;
}

.source-health-error .source-health-meta em {
  background: rgba(184, 59, 66, 0.14);
  color: #9c252c;
}

.source-health-neutral {
  border-left-color: #7d8b95;
}

.refresh-log-panel {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.refresh-log-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: calc(15px * var(--ui-font-scale));
}

.refresh-log-list {
  display: grid;
  gap: 5px;
}

.refresh-log-list-full {
  max-height: min(620px, calc(100dvh - 150px));
  overflow: auto;
  padding-right: 4px;
}

.refresh-log-row {
  display: grid;
  grid-template-columns: 124px 170px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #e4ecef;
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
}

.refresh-log-row strong,
.refresh-log-row span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.refresh-log-row strong {
  color: var(--ink);
}

.refresh-log-ok {
  border-left: 4px solid #267451;
}

.refresh-log-error {
  border-left: 4px solid #b83b42;
}

.rail-search input[type="search"] {
  min-width: 0;
  padding: 0 10px;
}

.rail-search select,
.squad-tools select {
  padding: 0 28px 0 10px;
}

.team-rail,
.squad-panel,
.stats-panel {
  min-height: 0;
  overflow: auto;
}

.team-rail {
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.rail-head {
  display: none;
}

.rail-search {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.rail-search select,
.rail-search input {
  width: 100%;
}

.team-list {
  padding: 8px;
}

.team-button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-bottom: 4px;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
}

.team-button.active {
  background: #e9f3f4;
  color: var(--accent-dark);
  border-color: rgba(0, 109, 119, 0.26);
}

.team-button img,
.team-flag {
  object-fit: cover;
  border: 1px solid var(--line);
  background: #fff;
}

.team-button img {
  width: 22px;
  height: 16px;
}

.rail-referee-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 109, 119, 0.28);
  border-radius: 6px;
  background: #e9f3f4;
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
}

.referee-group-button {
  margin-bottom: 8px;
  border-color: rgba(0, 109, 119, 0.18);
  background: #f2f8f8;
}

.team-name-small {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-list-copy {
  display: grid;
  min-width: 0;
}

.team-value-small {
  display: block;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.squad-panel {
  padding: 12px;
}

body.focus-mode .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.focus-mode .team-rail,
body.focus-mode .stats-panel {
  display: none;
}

body.focus-mode .squad-panel {
  grid-column: 1 / -1;
}

.team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.team-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-flag {
  width: 54px;
  height: 38px;
  border-radius: 4px;
}

.muted {
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
}

.team-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.team-research-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 11px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 900;
}

.team-research-link:hover,
.team-research-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent-soft);
  outline: none;
}

.source-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

#teamSource,
#tournamentSource,
#h2hSource,
#venueSource,
#copyTeamButton,
#copyPlayerButton,
#copyMatchButton {
  display: none !important;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

#quickGrid {
  grid-template-columns: repeat(5, minmax(92px, 1fr));
}

#tournamentSummary.quick-grid {
  grid-template-columns: repeat(4, minmax(78px, 116px)) minmax(250px, 380px);
  width: fit-content;
  max-width: 100%;
}

#tournamentSummary.quick-grid .stat-tile:last-child {
  min-width: 250px;
}

#tournamentSummary.quick-grid .stat-tile:last-child strong {
  overflow: visible;
  line-height: 1.12;
  white-space: normal;
  text-overflow: clip;
}

.stat-tile {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.stat-tile span {
  display: block;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  text-transform: uppercase;
}

.stat-tile strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: calc(16px * var(--ui-font-scale));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stat-tile.tooltip-tile,
.history-row.tooltip-row {
  cursor: help;
}

.squad-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.segmented {
  display: inline-flex;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.segmented button {
  min-width: 42px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
}

.segmented button.active {
  background: var(--accent);
  color: #fff;
}

.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 800;
}

.table-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.squad-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: calc(12px * var(--ui-font-scale));
}

.squad-table th,
.squad-table td {
  overflow: hidden;
  padding: 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.squad-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-strong);
  color: #43515e;
  font-size: calc(10px * var(--ui-font-scale));
  text-transform: uppercase;
}

.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  text-align: left;
  text-transform: inherit;
}

.player-sort-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.sort-link-small {
  flex-shrink: 0;
  color: var(--accent-dark);
}

.sort-link::after {
  content: "";
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  opacity: 0.28;
}

.sort-link[data-dir="asc"]::after {
  border-bottom: 6px solid currentColor;
  opacity: 1;
}

.sort-link[data-dir="desc"]::after {
  border-top: 6px solid currentColor;
  opacity: 1;
}

.squad-table tbody tr {
  background: var(--position-bg, #fff);
  cursor: pointer;
}

.squad-table tbody tr:hover,
.squad-table tbody tr.selected {
  background: #edf7f5;
  background: color-mix(in srgb, var(--position-bg, #fff) 74%, var(--accent) 26%);
}

.squad-table tbody tr.position-goalkeeper {
  --position-bg: #eef7ff;
}

.squad-table tbody tr.position-defense {
  --position-bg: #fff0f0;
}

.squad-table tbody tr.position-midfield {
  --position-bg: #fff7df;
}

.squad-table tbody tr.position-attack {
  --position-bg: #edf7f0;
}

.squad-table tbody tr.position-unknown {
  --position-bg: #f6f7f9;
}

.squad-table tbody tr.position-coach {
  --position-bg: #eef4f4;
  box-shadow: inset 3px 0 0 rgba(0, 109, 119, 0.42);
}

.squad-table tbody tr.position-referee {
  --position-bg: #eef4f7;
  box-shadow: inset 3px 0 0 rgba(52, 92, 120, 0.45);
}

.squad-table tbody tr.referee-role-assistant {
  --position-bg: #f4f7fb;
  box-shadow: inset 3px 0 0 rgba(91, 121, 145, 0.28);
}

.referee-table tbody tr.referee-role-referee td {
  border-top: 2px solid #d7e7ea;
}

.squad-table tbody tr.referee-role-var {
  --position-bg: #f7f3ff;
  box-shadow: inset 3px 0 0 rgba(107, 78, 158, 0.38);
}

.squad-table tbody tr.referee-role-fourth {
  --position-bg: #f6f7f4;
  box-shadow: inset 3px 0 0 rgba(116, 130, 82, 0.34);
}

.referee-crew-member .player-cell {
  padding-left: 10px;
}

.referee-role-badge {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(0, 109, 119, 0.24);
  background: rgba(255, 255, 255, 0.66);
  color: var(--accent-dark);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.referee-directory-mode .squad-tools {
  display: none;
}

.referee-flag {
  display: grid;
  place-items: center;
}

.referee-flag::before {
  content: "SR";
  color: var(--accent-dark);
  font-size: calc(18px * var(--ui-font-scale));
  font-weight: 950;
}

.referee-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #ddecef;
  color: var(--accent-dark);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.referee-table th:nth-child(1) {
  width: 42px;
}

.referee-table th:nth-child(3) {
  width: 46px;
}

.referee-table th:nth-child(4) {
  width: 160px;
}

.referee-table th:nth-child(5) {
  width: 118px;
}

.referee-table th:nth-child(6) {
  width: 78px;
}

.referee-table th:nth-child(7) {
  width: 72px;
}

.number-cell {
  width: 30px;
  color: var(--accent-dark);
  font-weight: 900;
}

.squad-table th:nth-child(1) {
  width: 30px;
}

.squad-table th:nth-child(3) {
  width: 42px;
}

.squad-table th:nth-child(4) {
  width: 100px;
}

.squad-table th:nth-child(5) {
  width: 62px;
}

.squad-table th:nth-child(6) {
  width: 44px;
}

.squad-table th:nth-child(7) {
  width: 108px;
}

.player-cell {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.player-cell img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #edf0f2;
}

.coach-avatar,
.detail-coach-avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-dark);
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
}

.detail-coach-avatar {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  font-size: calc(18px * var(--ui-font-scale));
}

.coach-row-meta {
  display: flex;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
}

.coach-row-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-main,
.player-sub,
.club-cell {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player-main {
  display: flex;
  gap: 5px;
  align-items: center;
  font-weight: 850;
  line-height: 1.1;
}

.captain-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  color: #231a05;
  font-size: calc(10px * var(--ui-font-scale));
}

.player-sub {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  line-height: 1.1;
}

.market {
  font-weight: 850;
  white-space: nowrap;
}

.trend-up {
  color: var(--green);
}

.trend-down {
  color: var(--red);
}

.trend-same {
  color: var(--accent-dark);
}

.stats-panel {
  padding: 14px 14px 14px 0;
}

.side-section {
  position: relative;
  margin-bottom: 12px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.side-section:hover,
.match-team-card:hover,
.tournament-stat-card:hover {
  z-index: 1000;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.section-title button {
  height: 30px;
  padding: 0 9px;
}

.section-title .phase-toggle {
  height: auto;
  padding: 0;
}

.section-check {
  display: inline-grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 900;
  cursor: pointer;
}

.section-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.section-title-controls {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.fact-list,
.bars,
.player-detail {
  padding: 10px;
}

.history-list,
.record-list {
  display: grid;
  gap: 5px;
  padding: 8px;
}

.history-row,
.record-player-row {
  display: grid;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border-radius: 7px;
  background: #f7fafb;
}

.history-row {
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 6px 7px;
}

.history-row span,
.record-player-row span,
.record-player-row em {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
}

.history-row strong,
.record-player-row strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(11px * var(--ui-font-scale));
}

.record-player-row {
  grid-template-columns: 18px minmax(0, 1fr) 48px;
  width: 100%;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid transparent;
  text-align: left;
}

.record-player-row.active {
  border-color: var(--gold);
  background: #fff6d7;
}

.record-player-row em {
  text-align: right;
  font-style: normal;
}

.record-expand-row {
  width: 100%;
  height: 25px;
  padding: 0 8px;
  border-style: dashed;
  background: #fff;
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  text-align: center;
}

.history-mini-card {
  align-content: start;
}

.history-mini-summary {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
  line-height: 1.25;
}

.history-mini-list {
  display: grid;
  gap: 5px;
}

.season-graph {
  display: grid;
  gap: 6px;
  min-height: 126px;
}

.season-graph svg {
  width: 100%;
  height: 82px;
  overflow: visible;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(120, 220, 201, 0.12), rgba(120, 220, 201, 0.02)),
    rgba(255, 255, 255, 0.46);
}

.season-graph line {
  stroke: rgba(23, 45, 52, 0.22);
  stroke-width: 0.7;
}

.season-graph path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.season-graph circle {
  fill: var(--panel-strong);
  stroke: var(--accent);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.season-graph-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.season-graph-labels span {
  min-width: 0;
  padding: 4px 5px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.season-graph-labels b,
.season-graph-labels small {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.season-graph-labels b {
  color: var(--accent-dark);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
}

.season-graph-labels small {
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 850;
}

.history-mini-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-areas:
    "meta title"
    "meta sub";
  align-items: center;
  column-gap: 8px;
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
}

.history-mini-row span {
  grid-area: meta;
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
}

.history-mini-row strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
}

.history-mini-row small {
  grid-area: sub;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
}

.history-mini-row.legend-row {
  grid-template-columns: 82px minmax(0, 1fr);
}

.fact-item {
  display: grid;
  grid-template-columns: minmax(86px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #edf0f2;
}

.fact-item:last-child {
  border-bottom: 0;
}

.fact-item-weather {
  grid-column: 1 / -1;
  grid-template-columns: minmax(86px, 0.25fr) minmax(0, 1.75fr);
}

.fact-label {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
}

.fact-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.goal-timing {
  display: grid;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.goal-timing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.goal-timing-head strong,
.goal-timing-head em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.goal-timing-head strong {
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
}

.goal-timing-head em {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 850;
}

.goal-timing-chart {
  --goal-label-width: 52px;
  position: relative;
  display: grid;
  grid-template-rows: minmax(16px, auto) minmax(16px, auto) 12px;
  gap: 2px;
  min-width: 0;
  padding: 5px 7px 4px;
  overflow: hidden;
  border: 1px solid #c8d8dd;
  border-radius: 7px;
  background: #dceae6;
}

.goal-timing-aggregate .goal-timing-chart {
  grid-template-rows: minmax(28px, auto) 14px;
}

.goal-timing-aggregate.goal-timing-no-list .goal-timing-chart {
  grid-template-rows: minmax(28px, auto) 14px;
}

.goal-timing-field {
  position: absolute;
  top: 5px;
  right: 7px;
  bottom: 16px;
  left: calc(var(--goal-label-width) + 14px);
  display: grid;
  grid-template-columns: repeat(150, minmax(2px, 1fr));
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(220, 234, 230, 0.92);
}

.goal-timing-segment {
  min-width: 0;
}

.goal-timing-segment-first,
.goal-timing-segment-second {
  background: rgba(24, 127, 84, 0.24);
}

.goal-timing-segment-first-added,
.goal-timing-segment-second-added,
.goal-timing-segment-extra-first-added,
.goal-timing-segment-extra-second-added {
  background: rgba(238, 191, 81, 0.23);
}

.goal-timing-segment-extra-first,
.goal-timing-segment-extra-second {
  background: rgba(21, 119, 104, 0.2);
}

.goal-timing-segment-shootout {
  background: rgba(72, 104, 121, 0.17);
}

.goal-timing-field::after {
  content: none;
}

.goal-timing-line {
  position: absolute;
  top: 5px;
  bottom: 16px;
  z-index: 1;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.22);
}

.goal-timing-line-half {
  left: calc(var(--goal-label-width) + 14px + 32%);
}

.goal-timing-line-full {
  left: calc(var(--goal-label-width) + 14px + 70%);
}

.goal-timing-line-et-half {
  left: calc(var(--goal-label-width) + 14px + 84%);
}

.goal-timing-line-et-full {
  left: calc(var(--goal-label-width) + 14px + 96%);
}

.goal-timing-row,
.goal-timing-axis {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--goal-label-width) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.goal-timing-row-label {
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.goal-timing-track {
  position: relative;
  height: 28px;
  min-width: 0;
  border-bottom: 0;
}

.goal-timing-row-against .goal-timing-track {
  border-bottom-style: dashed;
}

.goal-timing-dot {
  position: absolute;
  top: var(--lane, 50%);
  left: var(--pos);
  display: block;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: calc(6px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  cursor: help;
}

.goal-timing-ball {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--green);
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45));
}

.goal-timing-dot-against {
  color: var(--red);
}

.goal-timing-dot-against .goal-timing-ball {
  color: var(--red);
}

.goal-timing-dot.is-own-goal {
  color: #cc2936;
}

.goal-timing-dot.is-own-goal .goal-timing-ball {
  color: #cc2936;
}

.goal-timing-dot.is-penalty::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--gold);
}

.goal-timing-aggregate .goal-timing-dot {
  color: var(--green);
}

.goal-timing-aggregate .goal-timing-dot .goal-timing-ball {
  color: var(--green);
}

.goal-timing-aggregate .goal-timing-dot.is-penalty {
  color: #2f80ed;
}

.goal-timing-aggregate .goal-timing-dot.is-penalty .goal-timing-ball {
  color: #2f80ed;
}

.goal-timing-aggregate .goal-timing-dot.is-penalty::after {
  display: none;
}

.goal-timing-aggregate .goal-timing-dot.is-own-goal {
  color: #cc2936;
}

.goal-timing-aggregate .goal-timing-dot.is-own-goal .goal-timing-ball {
  color: #cc2936;
}

.goal-timing-dot-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.8);
}

.goal-timing-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 900;
  line-height: 1;
}

.goal-timing-legend span {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  white-space: nowrap;
}

.goal-timing-legend-ball {
  display: inline-block;
  width: 12px;
  height: 12px;
  color: var(--green);
}

.goal-timing-legend-ball .goal-timing-ball {
  color: currentColor;
}

.goal-timing-legend-ball.is-penalty {
  color: #2f80ed;
}

.goal-timing-legend-ball.is-own-goal {
  color: #cc2936;
}

.goal-timing-axis {
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 900;
}

.goal-timing-axis-labels {
  position: relative;
  display: block;
  min-width: 0;
  height: 12px;
}

.goal-timing-axis-labels span {
  position: absolute;
  top: 0;
  left: var(--pos);
  transform: translateX(-50%);
  white-space: nowrap;
}

.goal-timing-axis-labels span:nth-child(1) {
  transform: translateX(0);
}

.goal-timing-axis-labels span:nth-child(3),
.goal-timing-axis-labels span:nth-child(6),
.goal-timing-axis-labels span:nth-child(9) {
  color: var(--muted);
}

.goal-timing-axis-labels .is-added {
  color: #8a6210;
}

.goal-timing-axis-scale {
  position: relative;
  display: block;
  min-width: 0;
  height: 20px;
}

.goal-timing-axis-tick {
  position: absolute;
  top: 0;
  left: var(--pos);
  display: grid;
  justify-items: center;
  min-width: 10px;
  transform: translateX(-50%);
  color: var(--muted);
  line-height: 1;
}

.goal-timing-axis-tick.is-start {
  transform: translateX(0);
}

.goal-timing-axis-tick.is-end {
  transform: translateX(-100%);
}

.goal-timing-axis-tick i {
  width: 1px;
  height: 5px;
  border-radius: 99px;
  background: rgba(35, 56, 66, 0.32);
}

.goal-timing-axis-tick b {
  margin-top: 2px;
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 900;
}

.goal-timing-axis-tick.is-special {
  top: -7px;
  color: #8a6210;
}

.goal-timing-axis-tick.is-special i {
  background: rgba(138, 98, 16, 0.62);
}

.goal-timing-axis-tick.is-special b {
  margin-top: 1px;
  font-size: calc(6px * var(--ui-font-scale));
}

.goal-timing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px;
  min-width: 0;
}

.goal-timing-stats span {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(35, 56, 66, 0.08);
  font-size: calc(8px * var(--ui-font-scale));
  line-height: 1;
}

.goal-timing-stats b {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-timing-stats em {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-style: normal;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-timing-lists {
  display: grid;
  gap: 3px;
}

.goal-timing-lists span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  font-size: calc(9px * var(--ui-font-scale));
  line-height: 1.15;
}

.goal-timing-lists b {
  color: var(--muted);
  font-weight: 950;
}

.goal-timing-lists em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: normal;
}

.goal-timing-team-tooltip {
  padding: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
}

.goal-timing-team-tooltip .goal-timing-chart,
.goal-timing-team-fact .goal-timing-chart {
  grid-template-rows: minmax(12px, auto) minmax(12px, auto) 10px;
  padding: 4px 6px 3px;
}

.goal-timing-team-tooltip .goal-timing-field,
.goal-timing-team-tooltip .goal-timing-boundary,
.goal-timing-team-fact .goal-timing-field,
.goal-timing-team-fact .goal-timing-boundary {
  top: 4px;
  bottom: 13px;
}

.goal-timing-team-tooltip .goal-timing-track,
.goal-timing-team-fact .goal-timing-track {
  height: 14px;
}

.goal-timing-team-tooltip .goal-timing-dot,
.goal-timing-team-fact .goal-timing-dot {
  width: 8px;
  height: 8px;
  font-size: calc(5px * var(--ui-font-scale));
}

.goal-timing-team-tooltip .goal-timing-dot-label,
.goal-timing-team-fact .goal-timing-dot-label {
  font-size: calc(5px * var(--ui-font-scale));
}

.goal-timing-team-tooltip .goal-timing-chart {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.goal-timing-team-tooltip .goal-timing-head em,
.goal-timing-team-tooltip .goal-timing-row-label,
.goal-timing-team-tooltip .goal-timing-axis,
.goal-timing-team-tooltip .goal-timing-lists b {
  color: rgba(255, 255, 255, 0.66);
}

.goal-timing-team-tooltip .goal-timing-line {
  background: rgba(255, 255, 255, 0.34);
}

.goal-timing-team-tooltip .goal-timing-track {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.compact-name {
  cursor: help;
}

.time-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.15;
}

.time-stack span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.time-stack em {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 15px;
  border-radius: 4px;
  background: #eef4f4;
  color: var(--accent-dark);
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.weather-box {
  display: grid;
  gap: 8px;
  min-width: 0;
  font-weight: 800;
}

.weather-box.is-refreshing {
  opacity: 0.92;
}

.weather-summary {
  display: grid;
  gap: 2px;
}

.weather-summary strong {
  color: var(--ink);
  font-size: calc(12px * var(--ui-font-scale));
}

.weather-summary span {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
}

.weather-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.weather-metric {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #dfe8ec;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f3f7f8);
}

.weather-metric span,
.weather-metric em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.weather-metric span {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.weather-metric strong {
  color: var(--ink);
  font-size: calc(16px * var(--ui-font-scale));
  line-height: 1.05;
}

.weather-metric em {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-style: normal;
}

.weather-metric-temp {
  background: linear-gradient(135deg, #fff7e7, #ffffff);
}

.weather-metric-rain {
  background: linear-gradient(135deg, #eaf6ff, #ffffff);
}

.weather-metric-wind {
  background: linear-gradient(135deg, #eefbf5, #ffffff);
}

.weather-hours {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.weather-hour {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid #e4ebef;
  border-radius: 9px;
  background: linear-gradient(145deg, #fbfcfd, #f0f5f6);
  font-size: calc(10px * var(--ui-font-scale));
}

.weather-hour.weather-clear {
  border-color: #f4d887;
  background: linear-gradient(145deg, #fff5cc, #fffdf5);
}

.weather-hour.weather-rain,
.weather-hour.weather-storm {
  border-color: #bdd9ed;
  background: linear-gradient(145deg, #e7f5ff, #f9fdff);
}

.weather-hour.weather-cloud,
.weather-hour.weather-fog,
.weather-hour.weather-snow {
  background: linear-gradient(145deg, #eef4f8, #fbfcfd);
}

.weather-hour-top,
.weather-hour-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.weather-hour-main {
  justify-content: flex-start;
}

.weather-hour strong,
.weather-hour span,
.weather-hour em,
.weather-hour small,
.weather-hour b {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.weather-hour-top span,
.weather-hour small {
  color: var(--muted);
}

.weather-hour small {
  font-size: calc(9px * var(--ui-font-scale));
}

.weather-hour em {
  flex: 1;
  color: var(--accent-dark);
  font-style: normal;
}

.weather-hour b {
  font-size: calc(15px * var(--ui-font-scale));
  line-height: 1;
}

.weather-symbol {
  position: relative;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: #dbe5ea;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.weather-symbol.weather-clear {
  background: radial-gradient(circle at 50% 50%, #fff6a9 0 35%, #f5b642 36% 58%, rgba(245, 182, 66, 0.15) 59% 100%);
}

.weather-symbol.weather-cloud,
.weather-symbol.weather-fog {
  background: linear-gradient(135deg, #d7e0e6, #91a1ad);
}

.weather-symbol.weather-rain,
.weather-symbol.weather-storm {
  background: linear-gradient(135deg, #7cc7ef, #2e6d9f);
}

.weather-symbol.weather-snow {
  background: linear-gradient(135deg, #eef9ff, #a8d5ec);
}

.weather-symbol.weather-rain::after,
.weather-symbol.weather-storm::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 3px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 6px 4px 0 rgba(255, 255, 255, 0.78), 12px 1px 0 rgba(255, 255, 255, 0.62);
  transform: rotate(18deg);
}

.weather-symbol.weather-storm::before {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 4px;
  width: 7px;
  height: 11px;
  background: #ffe066;
  clip-path: polygon(45% 0, 100% 0, 58% 45%, 100% 45%, 20% 100%, 42% 55%, 0 55%);
}

.weather-current {
  display: grid;
  grid-template-columns: 30px minmax(58px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid #dfe8ec;
  border-radius: 9px;
  background: linear-gradient(135deg, #ffffff, #f3f7f8);
  font-weight: 900;
}

.weather-current div,
.weather-current small {
  min-width: 0;
}

.weather-current strong,
.weather-current em,
.weather-current small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.weather-current strong {
  color: var(--ink);
  font-size: calc(17px * var(--ui-font-scale));
  line-height: 1;
}

.weather-current em,
.weather-current small {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
}

.venue-story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 5px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e3ebef;
  border-radius: 8px;
  background: #f8fbfb;
}

.venue-story div {
  min-width: 0;
  padding: 5px 6px;
  border-radius: 6px;
  background: #fff;
}

.venue-story span {
  display: block;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.venue-story strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  margin-top: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 900;
}

.stats-panel .fact-item {
  grid-template-columns: minmax(92px, 0.9fr) minmax(0, 1.1fr);
  align-items: baseline;
}

.stats-panel .fact-value {
  text-align: right;
}

.staff-summary {
  position: relative;
  z-index: 20;
  display: inline-block;
  max-width: 100%;
  color: inherit;
  cursor: help;
}

.staff-summary:hover,
.staff-summary:focus {
  z-index: 100001;
  text-decoration: underline;
  text-decoration-color: rgba(0, 109, 119, 0.45);
  text-underline-offset: 2px;
}

.bar-row {
  margin-bottom: 10px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 850;
}

.bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f2;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.player-detail {
  min-height: 170px;
}

.detail-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.detail-head img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: contain;
  object-position: center bottom;
  background: #edf0f2;
}

.coach-detail-head {
  grid-template-columns: 54px minmax(0, 1fr);
}

.detail-head h3 {
  margin: 0;
  overflow: hidden;
  font-size: calc(18px * var(--ui-font-scale));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.detail-chip {
  display: grid;
  grid-template-columns: minmax(78px, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 7px;
  background: #f4f6f9;
}

.detail-chip-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.detail-chip-row .detail-chip {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 3px;
}

.detail-chip-row .detail-chip strong {
  text-align: left;
}

.detail-chip-row .detail-chip span {
  font-size: calc(10px * var(--ui-font-scale));
}

.detail-chip span {
  display: block;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  text-transform: uppercase;
}

.detail-chip strong {
  display: block;
  overflow: hidden;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}

.detail-physical {
  grid-template-columns: minmax(64px, 0.55fr) minmax(0, 1.45fr);
}

.detail-physical .physical-facts-value {
  overflow: visible;
}

.physical-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.physical-facts-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-chip .physical-facts,
.detail-chip .physical-fact {
  display: grid;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.physical-fact {
  min-width: 0;
  gap: 1px;
}

.detail-chip .physical-fact {
  text-align: right;
}

.physical-fact em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.physical-fact b {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-pronunciation strong {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.detail-pronunciation .pronunciation-play {
  margin-left: auto;
}

.tooltip-note-strip strong {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.tooltip-pronunciation-strip strong {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.tooltip-pronunciation-strip .pronunciation-play {
  justify-self: end;
  border-color: #93c9ca;
  background: #f2fbfa;
  color: #063f47;
  box-shadow: inset 0 0 0 1px rgba(6, 63, 71, 0.08);
}

.pronunciation-play {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 109, 119, 0.32);
  background: #e9f6f5;
  color: var(--accent-dark);
  vertical-align: middle;
}

.pronunciation-play span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.pronunciation-play:hover {
  border-color: var(--accent);
  background: #cfeeed;
  color: #063f47;
}

.pronunciation-play.is-loading span {
  width: 11px;
  height: 11px;
  margin-left: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: pronunciation-spin 0.8s linear infinite;
}

.pronunciation-play.is-playing {
  background: var(--accent);
  color: #fff;
}

.pronunciation-play.has-error {
  border-color: var(--red);
  color: var(--red);
}

@keyframes pronunciation-spin {
  to {
    transform: rotate(360deg);
  }
}

.detail-chip.detail-wide {
  grid-template-columns: 1fr;
  align-items: start;
}

.detail-chip.detail-wide strong {
  text-align: left;
}

.detail-stat-chip {
  padding-bottom: 8px;
}

.detail-stat-value {
  overflow: visible;
}

.detail-stat-value .tooltip-stat-blocks {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.detail-stat-value .tooltip-stat-block {
  border-color: rgba(0, 109, 119, 0.14);
  background: rgba(0, 109, 119, 0.06);
}

.detail-stat-value .tooltip-stat-block h5 {
  color: var(--muted);
}

.detail-stat-value .tooltip-stat-block span {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 3px;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(0, 109, 119, 0.08);
  color: inherit;
  font-size: calc(9px * var(--ui-font-scale));
  text-transform: none;
}

.detail-stat-value .tooltip-stat-block b {
  color: var(--ink);
}

.detail-stat-value .tooltip-stat-block em {
  color: var(--muted);
}

.career-value {
  overflow: visible;
}

.achievement-value {
  overflow: visible;
}

.achievement-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

.achievement-chip,
.achievement-more {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  padding: 1px 5px;
  border: 1px solid rgba(213, 162, 30, 0.46);
  border-radius: 999px;
  background: #fff9e7;
  color: var(--ink);
  line-height: 1.05;
}

.achievement-count {
  color: #835f00;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.achievement-name {
  min-width: 0;
  overflow: visible;
  max-width: none;
  white-space: normal;
  text-overflow: clip;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
}

.achievement-chip small {
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 850;
}

.achievement-more {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.trophy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}

.trophy-chip {
  display: inline-grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  position: relative;
  min-width: min(210px, 100%);
  max-width: 100%;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(214, 161, 44, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 238, 164, 0.92), rgba(255, 249, 231, 0.76)),
    #fff9e7;
  color: #182229;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.trophy-chip.has-image {
  overflow: visible;
}

.trophy-chip.compact {
  grid-template-columns: 24px minmax(0, 1fr);
  min-width: min(156px, 100%);
  padding: 4px 6px 4px 4px;
  gap: 5px;
}

.trophy-chip.has-image {
  grid-template-columns: 74px minmax(0, 1fr);
  min-height: 102px;
}

.trophy-chip.compact.has-image {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 60px;
}

.trophy-image {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  overflow: hidden;
}

.trophy-chip.compact .trophy-image {
  width: 44px;
  height: 44px;
}

.trophy-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.trophy-detail-popover {
  display: none;
  position: absolute;
  left: 8px;
  right: auto;
  bottom: calc(100% + 8px);
  z-index: 60;
  min-width: min(280px, 80vw);
  max-width: min(420px, 88vw);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}

.trophy-chip:hover .trophy-detail-popover,
.trophy-chip:focus-within .trophy-detail-popover {
  display: grid;
  gap: 4px;
}

.trophy-detail-popover strong {
  color: var(--accent);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
}

.trophy-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, #fff6bf 0 18%, transparent 19%),
    linear-gradient(145deg, #f2c855, #b97813);
  color: #3b2505;
  font-size: calc(16px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(90, 59, 8, 0.24);
}

.trophy-chip.compact .trophy-icon {
  width: 24px;
  height: 24px;
  font-size: calc(11px * var(--ui-font-scale));
}

.trophy-text {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "count title"
    "count years";
  column-gap: 5px;
  align-items: center;
}

.trophy-text b {
  grid-area: count;
  min-width: 24px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(131, 95, 0, 0.12);
  color: #6d4a00;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-align: center;
}

.trophy-text strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
}

.trophy-text small {
  grid-area: years;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #806326;
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 850;
}

.trophy-section .trophy-list {
  margin-top: 4px;
}

.trophy-section .trophy-chip {
  background: rgba(240, 197, 82, 0.13);
  color: #fff;
  border-color: rgba(240, 197, 82, 0.44);
}

.trophy-section .trophy-text b {
  background: rgba(240, 197, 82, 0.16);
  color: #f3d36b;
}

.trophy-section .trophy-text small {
  color: rgba(255, 255, 255, 0.68);
}

:root[data-theme="dark"] .trophy-chip {
  background:
    linear-gradient(135deg, rgba(117, 83, 20, 0.72), rgba(42, 50, 49, 0.86)),
    var(--panel-strong);
  color: var(--ink);
  border-color: rgba(240, 197, 82, 0.36);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .trophy-text b {
  background: rgba(240, 197, 82, 0.14);
  color: #f3d36b;
}

:root[data-theme="dark"] .trophy-text small {
  color: rgba(237, 244, 247, 0.62);
}

.career-chain {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

.career-club,
.career-more {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: baseline;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
  padding: 1px 5px;
  border: 1px solid #d7e3e7;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  line-height: 1.05;
}

.career-club b,
.career-club small {
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.career-club b {
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
}

.career-club small {
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 800;
}

.career-chain-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  line-height: 1.1;
}

.career-chain-compact .career-club,
.career-chain-compact .career-more {
  display: grid;
  align-content: start;
  gap: 1px;
  max-width: min(178px, 100%);
  padding: 3px 6px;
  border: 1px solid #d7e3e7;
  border-radius: 6px;
  background: #fff;
}

.career-chain-compact .career-club b {
  display: block;
  max-width: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.05;
}

.career-chain-compact .career-club small {
  display: block;
  margin-top: 1px;
  white-space: normal;
  line-height: 1.05;
}

.career-toggle {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.career-toggle:hover,
.career-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--accent-dark);
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 126, 133, 0.2);
}

.career-chain-compact .career-arrow {
  align-self: center;
  margin: 0 -1px;
  font-size: calc(9px * var(--ui-font-scale));
}

.achievement-list-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
  line-height: 1.1;
}

.achievement-list-compact .achievement-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "count name"
    "count years";
  align-items: center;
  column-gap: 2px;
  row-gap: 1px;
  max-width: min(148px, 100%);
  padding: 2px 4px;
  border: 1px solid rgba(213, 162, 30, 0.46);
  border-radius: 6px;
  background: #fff9e7;
}

.achievement-list-compact .achievement-chip + .achievement-chip::before {
  content: none;
}

.achievement-list-compact .achievement-count {
  grid-area: count;
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 12px;
  margin-right: 1px;
  padding: 0 2px;
  border: 1px solid rgba(213, 162, 30, 0.55);
  border-radius: 999px;
  background: rgba(255, 249, 231, 0.9);
  line-height: 1;
}

.achievement-list-compact .achievement-name {
  grid-area: name;
  display: block;
  max-width: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  font-size: calc(8px * var(--ui-font-scale));
  line-height: 1.02;
}

.achievement-list-compact .achievement-chip small {
  grid-area: years;
  display: block;
  margin-top: 1px;
  white-space: normal;
  font-size: calc(6.5px * var(--ui-font-scale));
  line-height: 1.02;
}

.career-start {
  border-color: #d5a21e;
  box-shadow: inset 0 0 0 1px rgba(213, 162, 30, 0.55);
}

.career-current {
  border-color: rgba(0, 126, 133, 0.38);
  background: #e9f6f3;
}

.career-chain-compact .career-start,
.career-chain-compact .career-current {
  box-shadow: none;
}

.career-chain-compact .career-start b {
  border-bottom: 1px solid #d5a21e;
  color: #835f00;
}

.career-chain-compact .career-current b {
  color: var(--accent-dark);
}

.career-more {
  position: relative;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.career-arrow {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
}

.coach-playing-career {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.career-meta {
  color: var(--ink);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
}

.coach-balance-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  overflow: visible;
  text-align: left;
}

.detail-chip strong.coach-balance-line {
  display: grid;
  grid-template-columns: 1fr;
  overflow: visible;
  text-align: right;
  text-overflow: clip;
}

.coach-balance-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-chip .coach-balance-text {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.coach-form-bubbles {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 92px;
  white-space: nowrap;
}

.detail-chip .coach-form-bubbles {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  justify-self: center;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.coach-form-bubble {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.detail-chip .coach-form-bubble {
  display: inline-grid;
  color: #fff;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.coach-form-win {
  background: #25734f;
}

.coach-form-draw {
  background: #7b8791;
}

.coach-form-loss {
  background: #b63b3b;
}

.coach-form-unknown {
  background: #9aa3aa;
}

.detail-market {
  display: block;
  padding: 9px;
  border: 1px solid #dfe7ec;
  background: #fff;
}

.detail-market > span {
  margin-bottom: 6px;
}

.market-current,
.market-previous {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.market-current small,
.market-previous small {
  flex-shrink: 0;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
  text-transform: uppercase;
}

.market-current strong {
  min-width: 0;
  overflow: hidden;
  font-size: calc(18px * var(--ui-font-scale));
  font-weight: 950;
  white-space: nowrap;
  text-align: right;
  text-overflow: ellipsis;
}

.market-previous {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid #edf0f2;
}

.market-previous strong {
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
  white-space: nowrap;
}

.empty-state {
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.user-notes-editor {
  padding: 10px;
}

.user-note-form {
  display: grid;
  gap: 8px;
}

.user-note-context {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-note-form label span,
.user-note-kind,
.user-note-new select {
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
  text-transform: uppercase;
}

.user-note-list {
  display: grid;
  gap: 6px;
  max-height: min(430px, 52vh);
  overflow: auto;
}

.user-note-entry,
.user-note-new {
  display: grid;
  gap: 5px;
  align-items: start;
  min-width: 0;
  padding: 5px;
  border: 1px solid #e4ebef;
  border-radius: 7px;
  background: #fbfcfd;
}

.user-note-entry {
  grid-template-columns: 22px 34px minmax(0, 1fr) auto;
  position: relative;
}

.user-note-new {
  grid-template-columns: 54px minmax(0, 1fr);
  margin-top: 6px;
  background: #f4f8f8;
}

.user-note-new textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.35;
}

.user-note-text {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.35;
}

.user-note-text strong {
  color: var(--accent-dark);
  font-weight: 950;
}

.tooltip-note-body strong,
.tooltip-note-strip strong strong {
  color: #fff;
  font-weight: 950;
}

.note-line-text,
.note-line-spacer {
  display: block;
}

.note-line-spacer {
  height: 5px;
}

.note-bullets {
  display: grid;
  gap: 2px;
  margin: 2px 0 2px 14px;
  padding: 0;
}

.note-bullets li {
  padding-left: 1px;
}

.user-note-kind {
  display: inline-grid;
  place-items: center;
  height: 22px;
  padding: 0 5px;
  border-radius: 5px;
  background: #eef4f4;
  color: var(--accent-dark);
  font-size: calc(9px * var(--ui-font-scale));
}

.user-note-drag {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 22px;
  border-radius: 5px;
  color: var(--muted);
  cursor: grab;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  user-select: none;
}

.user-note-drag:hover {
  background: #eef4f4;
  color: var(--accent-dark);
}

.user-note-drag[aria-disabled="true"] {
  cursor: default;
  opacity: 0.45;
}

.user-note-new select {
  width: 100%;
  height: 28px;
  padding: 0 18px 0 6px;
  font-size: calc(10px * var(--ui-font-scale));
}

.user-note-new textarea:disabled {
  background: #f4f6f9;
  color: var(--muted);
}

.user-note-entry-actions {
  display: flex;
  grid-column: 4;
  gap: 5px;
  justify-content: flex-end;
}

.user-note-input-actions {
  display: flex;
  grid-column: 2;
  gap: 5px;
  justify-content: flex-end;
}

.user-note-entry-actions button,
.user-note-input-actions button {
  height: 25px;
  padding: 0 8px;
  font-size: calc(10px * var(--ui-font-scale));
}

.user-note-input-actions button[data-bold-note] {
  min-width: 28px;
  font-size: calc(12px * var(--ui-font-scale));
}

.user-note-entry.editing {
  border-color: var(--accent);
  background: #f1faf9;
}

.user-note-entry.dragging {
  opacity: 0.55;
}

.user-note-entry.drag-over-before::before,
.user-note-entry.drag-over-after::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.user-note-entry.drag-over-before::before {
  top: -5px;
}

.user-note-entry.drag-over-after::after {
  bottom: -5px;
}

.user-note-empty {
  padding: 7px;
  border-radius: 7px;
  background: #f4f6f9;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
}

.user-note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-note-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-note-actions button {
  height: 30px;
  padding: 0 10px;
}

body.has-user-note-overlay {
  overflow: hidden;
}

.user-note-overlay {
  position: fixed;
  z-index: 9500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 18, 24, 0.58);
}

.user-note-overlay[hidden] {
  display: none;
}

.user-note-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 28px));
  max-height: min(680px, calc(100dvh - 28px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
}

.user-note-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.user-note-dialog-head div {
  min-width: 0;
}

.user-note-dialog-head span {
  display: block;
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.user-note-dialog-head h3 {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(18px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-note-dialog-head button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 7px;
  font-size: calc(22px * var(--ui-font-scale));
  line-height: 1;
}

.user-note-dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.user-note-dialog-body .user-note-list {
  max-height: min(260px, 34vh);
}

.tooltip-note-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tooltip-note-actions span[role="button"] {
  display: inline-grid;
  place-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  cursor: pointer;
}

.tooltip-note-actions span[role="button"]:hover,
.tooltip-note-actions span[role="button"]:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 21%, var(--panel));
  outline: none;
}

.tooltip-note-actions span[role="button"][aria-disabled="true"] {
  cursor: default;
  opacity: 0.45;
}

.own-match-info {
  grid-column: 1 / -1;
}

.refresh-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(22, 32, 41, 0.42);
  z-index: 20;
}

.refresh-overlay[hidden] {
  display: none;
}

.refresh-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.print-choice-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(22, 32, 41, 0.42);
}

.print-choice-dialog {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(460px, calc(100vw - 28px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.print-choice-dialog .print-kicker {
  color: var(--accent);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.print-choice-dialog h2 {
  margin: 0;
  padding-right: 34px;
  font-size: calc(24px * var(--ui-font-scale));
}

.print-choice-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 750;
  line-height: 1.35;
}

.print-choice-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
}

.print-choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.print-choice-actions button {
  min-height: 42px;
  justify-content: center;
  padding: 9px 12px;
  text-align: center;
  font-weight: 950;
}

.print-choice-actions button.primary {
  background: var(--accent);
  color: #fff;
}

:root[data-theme="dark"] .print-choice-actions button.primary {
  color: #061316;
}

.venue-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(22, 32, 41, 0.42);
}

.venue-overlay[hidden] {
  display: none;
}

.venue-dialog {
  position: relative;
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.venue-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.venue-head {
  padding-right: 40px;
}

.venue-head h2 {
  margin: 3px 0;
}

.venue-media {
  margin-top: 12px;
}

.venue-visuals {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(360px, 1.15fr);
  gap: 12px;
  align-items: stretch;
}

.venue-photo {
  width: 100%;
  height: 100%;
  min-height: 230px;
  max-height: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: #edf1f4;
}

.venue-photo-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.venue-map {
  min-height: 260px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #e5eaef;
}

.venue-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

.venue-facts {
  margin: 12px 0;
  border-top: 1px solid #edf0f2;
}

.refresh-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

progress {
  width: 100%;
  height: 14px;
  accent-color: var(--accent);
}

#refreshMessage {
  margin-top: 9px;
  color: var(--muted);
  font-weight: 800;
}

.refresh-details {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.refresh-details[hidden] {
  display: none;
}

.refresh-detail-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.refresh-detail-title {
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.refresh-step-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong);
}

.refresh-step-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #dfe9ed;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
}

.refresh-step-row.is-running .refresh-step-icon {
  background: #fff3bf;
  color: #6b4b00;
}

.refresh-step-row.is-done .refresh-step-icon {
  background: #d9f2e6;
  color: #14623e;
}

.refresh-step-row.is-error .refresh-step-icon {
  background: #f8d8dc;
  color: #8e1f2b;
}

.refresh-step-main {
  min-width: 0;
}

.refresh-step-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.refresh-step-label {
  overflow: hidden;
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.refresh-step-meta {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.refresh-step-bar {
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce8ec;
}

.refresh-step-bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 160ms ease;
}

.refresh-step-row.is-done .refresh-step-bar span {
  background: #2f9d67;
}

.refresh-step-row.is-waiting .refresh-step-bar span {
  background: #9fb0b9;
}

.refresh-step-row.is-error .refresh-step-bar span {
  background: #c44652;
}

.refresh-step-value {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

body.compact .player-cell {
  grid-template-columns: minmax(0, 1fr);
}

body.compact .player-cell img,
body.compact .club-column,
body.compact .foot-column {
  display: none;
}

.match-view {
  --match-board-height: max(320px, calc(100vh - 185px));
  --match-board-height: max(320px, calc(100dvh - 185px));
  display: grid;
  gap: 6px;
  overflow: visible;
}

.match-head {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 2.65fr) minmax(116px, 0.45fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.match-context {
  display: contents;
}

.match-context-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.match-team-inline {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.match-away-header-cluster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.match-context-primary-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 1px;
}

.match-context-primary-icons .match-meta-icon-chip {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid #d8e3e8;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

.match-context-primary-icons .match-meta-icon-chip .meta-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.match-context-primary-icons .match-meta-vs {
  stroke: none !important;
  fill: currentColor !important;
}

.match-context-primary-icons .match-meta-vs text {
  font-size: 9px;
  font-weight: 950;
}

.match-context-primary-icons .match-heatmap-toggle {
  margin-left: 4px;
}

.direct-comparison-tooltip {
  display: grid;
  gap: 8px;
  min-width: min(360px, calc(100vw - 28px));
  padding: 12px;
  text-align: left;
}

.direct-comparison-tooltip > span,
.direct-comparison-tooltip > small,
.direct-comparison-tooltip > em {
  display: block;
}

.direct-comparison-tooltip > em {
  color: var(--muted);
  font-size: 0.78rem;
}

.match-team-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.match-team-main .team-flag-inline {
  flex: 0 0 auto;
  width: 30px;
  height: 21px;
  margin: 0;
}

.match-team-main strong {
  min-width: 0;
  overflow: hidden;
  font-size: calc(19px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-team-mini {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.kit-selector {
  display: inline-grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  position: relative;
  max-width: 168px;
  min-width: 0;
  flex: 0 1 168px;
  height: 32px;
  padding: 3px 28px 3px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 32, 41, 0.08);
}

.kit-selector-compact {
  grid-template-columns: 24px 10px;
  justify-content: center;
  gap: 3px;
  flex: 0 0 48px;
  width: 48px;
  height: 32px;
  padding: 3px 4px;
  border-radius: 8px;
}

.kit-selector::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.kit-selector-compact::after {
  position: static;
  align-self: center;
  justify-self: center;
  width: 7px;
  height: 7px;
  transform: translateY(-2px) rotate(45deg);
}

.kit-selector:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 124, 130, 0.13);
}

.kit-shirt {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid rgba(22, 32, 41, 0.22);
  border-radius: 6px;
  background-color: var(--kit-primary, var(--team-bg, #0f766e));
  background-image: var(--kit-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.kit-shirt::after {
  content: "";
  position: absolute;
  inset: 0 42% 0 42%;
  background: var(--kit-accent, #fff);
  opacity: 0.86;
}

.kit-selector.has-kit-image .kit-shirt::after {
  opacity: 0;
}

.kit-label {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kit-selector select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}

.kit-tooltip-card {
  gap: 8px;
}

.kit-tooltip-thumb {
  background-color: var(--kit-primary, #0f766e);
  background-image: var(--kit-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.kit-tooltip-thumb::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0 38%, var(--kit-accent, #fff) 39% 61%, transparent 62% 100%);
  opacity: 0.5;
}

.kit-tooltip-card .kit-tooltip-thumb[style*="--kit-image:url"]::after {
  opacity: 0;
}

.kit-tooltip-visual {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.kit-tooltip-image,
.kit-tooltip-fallback {
  display: block;
  width: 96px;
  height: 82px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background-color: var(--kit-primary, #0f766e);
  background-image: var(--kit-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  object-fit: contain;
}

.kit-tooltip-fallback::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0 36%, var(--kit-accent, #fff) 37% 63%, transparent 64% 100%);
  opacity: 0.75;
}

.kit-tooltip-colors {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.kit-tooltip-colors span {
  display: grid;
  grid-template-columns: 18px 46px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.kit-tooltip-colors i {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.kit-tooltip-colors b,
.kit-tooltip-colors em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
}

.kit-tooltip-colors b {
  color: rgba(255, 255, 255, 0.66);
  font-weight: 950;
  text-transform: uppercase;
}

.kit-tooltip-colors em {
  color: #fff;
  font-weight: 900;
}

.match-score {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #e9eef2;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
}

.score-main,
.score-shootout {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.score-shootout {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 950;
}

.match-score-tooltip-card {
  gap: 8px;
}

.match-score-tooltip-head {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.match-score-tooltip-head strong {
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 950;
}

.match-score-tooltip-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-score-tooltip-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(320px, 1.18fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.match-score-tooltip-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.match-score-tooltip-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.match-score-goal-row {
  display: grid;
  grid-template-columns: 42px minmax(78px, 0.8fr) minmax(130px, 1.2fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 6px;
  background: var(--panel-soft);
}

.match-score-goal-row span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.match-score-goal-row strong,
.match-score-goal-row em {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-score-goal-row strong {
  color: var(--muted);
}

.match-score-goal-row small {
  color: var(--accent-dark);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
}

.match-score-goal-row small.goal-type-own {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
}

.match-score-tooltip-empty {
  padding: 7px;
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
}

.match-score-empty-notes {
  min-height: 0;
}

.goal-list {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-wrap: wrap;
  flex: 0 1 auto;
  gap: 3px;
  min-height: 14px;
}

.goal-lines {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.goal-chip,
.goal-empty {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: #edf5f4;
  color: var(--accent-dark);
  font-size: calc(8.5px * var(--ui-font-scale));
  font-weight: 900;
  line-height: 1;
}

.goal-empty {
  color: var(--muted);
  background: transparent;
}

.goal-chip button {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
}

.goal-chip em {
  display: inline-grid;
  place-items: center;
  height: 12px;
  min-width: 18px;
  margin: 0 1px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-style: normal;
  font-size: calc(8px * var(--ui-font-scale));
}

.goal-chip em.goal-chip-own {
  background: var(--red);
  color: #fff;
}

.shootout-list {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
}

.shootout-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  height: 15px;
  padding: 0 5px 0 4px;
  border-radius: 999px;
  background: rgba(113, 215, 213, 0.14);
  color: var(--accent-soft);
  font-size: calc(8.5px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(113, 215, 213, 0.2);
}

.shootout-chip strong {
  margin-right: 3px;
  color: inherit;
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
}

.shootout-chip em {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--accent-dark);
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
}

.shootout-chip.is-missed {
  background: rgba(238, 83, 101, 0.16);
  color: #ff9aa8;
  box-shadow: inset 0 0 0 1px rgba(238, 83, 101, 0.28);
}

.shootout-chip.is-missed em {
  background: rgba(238, 83, 101, 0.95);
  color: #fff;
}

.match-goal-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: min(500px, 100%);
}

.match-clock-panel {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  width: min(500px, 100%);
}

.match-clock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 4px;
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 4px 8px 6px;
  border: 1px solid #d8e3e8;
  border-radius: 7px;
  background: #f5faf9;
}

.match-clock-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 35px;
  padding: 3px 16px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}

.match-clock-readout span {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
}

.match-clock-readout strong {
  color: var(--ink);
  font-size: calc(22px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.match-clock.phase-pre .match-clock-readout strong,
.match-clock.phase-closed .match-clock-readout strong {
  font-size: calc(15px * var(--ui-font-scale));
}

.match-clock.is-running .match-clock-readout strong {
  color: var(--accent-dark);
}

.match-clock-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: absolute;
  right: 5px;
  bottom: 4px;
  min-width: 0;
  overflow: hidden;
}

.match-clock-actions button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid #d6e2e8;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.match-clock-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.match-clock-adjust-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 18, 24, 0.58);
}

.match-clock-adjust-overlay[hidden] {
  display: none;
}

.match-clock-adjust-dialog {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  padding: 14px;
  border: 1px solid #d8e3e8;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 44px rgba(5, 14, 19, 0.28);
}

.match-clock-adjust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.match-clock-adjust-head h3 {
  margin: 0;
  font-size: calc(16px * var(--ui-font-scale));
}

.match-clock-adjust-head button,
.match-clock-adjust-actions button {
  border: 1px solid #d6e2e8;
  border-radius: 7px;
  background: #f5faf9;
  color: var(--ink);
  font-weight: 950;
}

.match-clock-adjust-head button {
  width: 30px;
  height: 30px;
}

.match-clock-adjust-dialog label {
  display: grid;
  gap: 4px;
}

.match-clock-adjust-dialog label span {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.match-clock-adjust-dialog input[type="text"],
.match-clock-adjust-dialog select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d6e2e8;
  border-radius: 7px;
  background: #fbfdfe;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
}

.match-clock-adjust-running {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
}

.match-clock-adjust-running input {
  width: 16px;
  height: 16px;
}

.match-clock-adjust-dialog p {
  margin: 0;
  padding: 7px 8px;
  border-radius: 6px;
  background: #fff1f2;
  color: #a63241;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
}

.match-clock-adjust-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.match-clock-adjust-actions button {
  min-height: 32px;
  padding: 0 10px;
}

.match-clock-adjust-actions button:last-child {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.goal-control {
  display: grid;
  grid-template-columns: minmax(76px, 0.3fr) 40px minmax(110px, 0.64fr) 34px 34px 26px;
  gap: 3px;
}

.timeline-sync-status {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid rgba(26, 160, 168, 0.28);
  border-radius: 6px;
  background: rgba(26, 160, 168, 0.14);
  color: var(--accent-dark);
  font-size: calc(8.5px * var(--ui-font-scale));
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-control input,
.goal-control select,
.goal-control button,
.goal-penalty-toggle {
  height: 23px;
  min-width: 0;
  padding: 0 4px;
  font-size: calc(10px * var(--ui-font-scale));
}

.goal-control select {
  padding-right: 18px;
}

.goal-control button {
  padding: 0;
  font-size: calc(13px * var(--ui-font-scale));
}

.goal-control input:disabled,
.goal-control select:disabled,
.goal-control button:disabled,
.goal-penalty-toggle:has(input:disabled),
.substitution-controls input:disabled,
.substitution-controls select:disabled,
.substitution-controls button:disabled,
.goal-chip button:disabled,
.substitution-row button:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.substitution-controls[hidden] {
  display: none !important;
}

.goal-penalty-toggle {
  display: inline-grid;
  place-items: center;
  position: relative;
  border: 1px solid #d4dee6;
  border-radius: 5px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.goal-penalty-toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.goal-penalty-toggle span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.goal-penalty-toggle input:checked + span {
  background: var(--accent);
  color: #fff;
}

.goal-penalty-toggle:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.goal-own-toggle input:checked + span {
  background: var(--red);
  color: #fff;
}

.goal-own-toggle:has(input:checked) {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.match-context-meta {
  grid-column: 1;
  grid-row: 1 / span 3;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-context-meta strong,
.match-context-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-context-meta > span {
  margin-top: 2px;
  color: var(--ink);
  font-size: calc(10px * var(--ui-font-scale));
}

.match-verification-badge {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(45, 184, 179, 0.5);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(45, 184, 179, 0.08);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.1;
}

.match-verification-badge.verified { color: #84e0ac; border-color: rgba(74, 191, 122, 0.6); background: rgba(74, 191, 122, 0.1); }
.match-verification-badge.checking,
.match-verification-badge.pending { color: #f2cf74; border-color: rgba(242, 190, 66, 0.55); background: rgba(242, 190, 66, 0.09); }
.match-verification-badge.incomplete { color: #ff9c9c; border-color: rgba(236, 92, 92, 0.62); background: rgba(236, 92, 92, 0.1); }

.match-context-meta .time-stack {
  margin-top: 2px;
  color: var(--ink);
  font-size: calc(10px * var(--ui-font-scale));
}

.match-context-meta .time-stack span {
  display: flex;
}

.match-context-details {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.match-context-details > span,
.match-meta-link {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid #d8e3e8;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: calc(10px * var(--ui-font-scale));
  line-height: 1.1;
  cursor: help;
}

button.match-meta-link {
  font-family: inherit;
}

.match-meta-link {
  cursor: pointer;
}

.match-meta-icon-chip.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #142127;
}

.match-meta-icon-chip.match-heatmap-toggle.is-active {
  border-color: #07818a;
  background: linear-gradient(180deg, var(--accent), #0e9aa3);
  color: #061316;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 0 0 3px rgba(22, 160, 165, 0.16);
}

.match-meta-icon-chip.match-clock-toggle.is-active {
  border-color: #07818a;
  background: linear-gradient(180deg, var(--accent), #0e9aa3);
  color: #061316;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 0 0 3px rgba(22, 160, 165, 0.16);
}

.match-meta-icon-chip .meta-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.match-meta-icon-chip .meta-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.9;
  filter: none;
}

.match-meta-icon-chip:hover,
.match-meta-icon-chip:focus {
  text-decoration: none;
}

.match-context-details .referee-mention,
.match-context-details .venue-mention,
.match-context-details .group-live-table-mention,
.match-context-details .knockout-prediction-mention,
.match-context-details .match-pressure-mention,
.match-context-details .match-heatmap-toggle {
  overflow: visible;
}

.match-context-details .match-data-completeness {
  width: auto;
  min-width: 28px;
  padding: 0 5px;
  overflow: visible;
}

.match-data-completeness.is-ok {
  border-color: #39b77f;
  background: rgba(57, 183, 127, 0.16);
  color: #17704d;
}

.match-data-completeness.is-pending {
  border-color: #d29a2e;
  background: rgba(210, 154, 46, 0.16);
  color: #855d0f;
}

.match-data-completeness.is-error {
  border-color: #d95c67;
  background: rgba(217, 92, 103, 0.18);
  color: #a32734;
}

.match-context > .empty-state {
  grid-column: 1 / 3;
  padding: 0 8px;
  text-align: left;
}

.team-flag-inline,
.match-context-teams img,
.match-teams img {
  display: inline-block;
  width: 22px;
  height: 15px;
  margin-right: 5px;
  border: 1px solid rgba(22, 32, 41, 0.18);
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
  background: #fff;
}

.team-flag-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  vertical-align: -2px;
  cursor: help;
}

.team-flag-hover .team-flag-inline {
  margin-right: 5px;
}

.flag-tooltip-card {
  width: min(380px, calc(100vw - 16px));
}

.flag-tooltip-card .team-culture-tooltip {
  display: grid;
  gap: 6px;
}

.match-context-teams img {
  width: 31px;
  height: 22px;
  vertical-align: -3px;
}

.match-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: end;
  gap: 8px;
}

.match-controls select {
  width: 100%;
  padding: 0 28px 0 10px;
}

.match-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column: 3;
  grid-row: 1 / span 2;
  gap: 3px;
  justify-self: end;
  width: min(136px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
}

.match-tabs button {
  position: relative;
  display: grid;
  place-items: center;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
}

.match-tabs button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.match-tabs svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.match-tabs button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.match-tab-panel {
  display: grid;
  gap: 6px;
  overflow: visible;
}

.match-tab-panel[data-match-panel="facts"] {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  align-items: start;
  gap: 8px;
}

.match-tab-panel[data-match-panel="facts"] .own-match-info {
  grid-column: 1 / -1;
}

.match-tab-panel[data-match-panel="info"] {
  display: block;
}

.match-info-body {
  display: grid;
  gap: 8px;
}

.match-info-panel .fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 12px;
  padding: 8px 10px;
}

.match-info-panel .fact-item {
  padding: 6px 0;
}

.embedded-note-section {
  margin: 0 10px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.embedded-note-title {
  padding: 8px 10px 0;
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.embedded-note-section .user-notes-editor {
  padding: 8px;
}

.match-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow: visible;
}

.match-timeline {
  display: grid;
  gap: 5px;
  min-height: 72px;
  max-height: 128px;
  padding: 6px 8px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.match-timeline[hidden] {
  display: none !important;
}

.timeline-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.timeline-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}

.timeline-title strong {
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1;
}

.timeline-status {
  display: inline-grid;
  place-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e9eef2;
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.timeline-status-live {
  background: #dff7e7;
  color: #1f7a45;
}

.timeline-status-done {
  background: #edf5f4;
  color: var(--accent-dark);
}

.timeline-switches {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.timeline-refresh-countdown {
  min-width: 126px;
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

.timeline-refresh-countdown.is-loading {
  color: var(--accent-dark);
}

.timeline-refresh-countdown.is-stale:not(.is-loading) {
  color: var(--danger);
}

.timeline-match-button {
  display: inline-grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  flex: 0 0 auto;
  max-width: 290px;
  height: 25px;
  gap: 4px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7fafb;
  color: var(--ink);
}

.timeline-match-button span,
.timeline-match-button em {
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.timeline-match-score {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid #cfdce2;
  border-radius: 999px;
  background: #e9eef2;
  color: var(--ink);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.timeline-match-button strong {
  min-width: 0;
  overflow: hidden;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-match-button.active {
  border-color: var(--accent);
  background: #eaf6f5;
  color: var(--accent-dark);
}

.timeline-match-button.is-live em {
  color: #238652;
}

.timeline-match-button.timeline-alert-goal,
.timeline-match-button.timeline-alert-red {
  animation-duration: 0.85s;
  animation-fill-mode: both;
  animation-iteration-count: 7;
  animation-timing-function: ease-in-out;
}

.timeline-match-button.timeline-alert-goal {
  animation-name: timeline-goal-match-pulse;
  border-color: #111821;
}

.timeline-match-button.timeline-alert-red {
  animation-name: timeline-red-match-pulse;
  border-color: #ad676c;
}

.timeline-match-button.timeline-alert-goal span,
.timeline-match-button.timeline-alert-goal strong,
.timeline-match-button.timeline-alert-goal em,
.timeline-match-button.timeline-alert-goal .timeline-match-score,
.timeline-match-button.timeline-alert-red span,
.timeline-match-button.timeline-alert-red strong,
.timeline-match-button.timeline-alert-red em,
.timeline-match-button.timeline-alert-red .timeline-match-score {
  color: inherit;
}

.timeline-match-button.timeline-alert-goal .timeline-match-score,
.timeline-match-button.timeline-alert-red .timeline-match-score {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.18);
}

@keyframes timeline-goal-match-pulse {
  0%,
  100% {
    background: #101820;
    color: #ffffff;
    box-shadow: 0 0 0 0 rgba(16, 24, 32, 0.28);
  }

  50% {
    background: #ffffff;
    color: #101820;
    box-shadow: 0 0 0 4px rgba(16, 24, 32, 0.12);
  }
}

@keyframes timeline-red-match-pulse {
  0%,
  100% {
    background: #7b3942;
    color: #fff4f4;
    box-shadow: 0 0 0 0 rgba(123, 57, 66, 0.24);
  }

  50% {
    background: #f2d4d7;
    color: #571f27;
    box-shadow: 0 0 0 4px rgba(123, 57, 66, 0.13);
  }
}

.timeline-source {
  min-width: 180px;
  max-width: 360px;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-track {
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 35px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 1px 0 5px;
  scrollbar-width: thin;
}

.timeline-marker {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  flex: 0 0 auto;
  min-width: 124px;
  max-width: 180px;
  min-height: 34px;
  column-gap: 5px;
  row-gap: 1px;
  padding: 4px 6px;
  border: 1px solid #cad8de;
  border-left-width: 4px;
  border-radius: 7px;
  background: #f7fafb;
  color: var(--ink);
  text-align: left;
}

.timeline-marker-meta {
  grid-row: 1 / span 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  min-width: 0;
}

.timeline-marker-minute {
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #e9eef2;
  color: var(--accent-dark);
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
}

.timeline-marker-symbol {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  color: var(--ink);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
}

.timeline-symbol-goal {
  border: 0;
  border-radius: 0;
  background: url("assets/timeline-goal.png") center / contain no-repeat;
}

.timeline-symbol-shootout {
  background: #eef5ff;
  color: #17699b;
  border: 1px solid rgba(47, 127, 184, 0.45);
  font-size: calc(8px * var(--ui-font-scale));
}

.timeline-symbol-card {
  width: 10px;
  height: 14px;
  border: 1px solid rgba(22, 32, 41, 0.35);
  border-radius: 3px;
}

.timeline-symbol-yellow {
  background: #ffd22f;
}

.timeline-symbol-red {
  background: #c92834;
}

.timeline-symbol-yellowred {
  border-color: transparent;
  background: linear-gradient(90deg, #ffd22f 0 48%, #c92834 52% 100%);
}

.timeline-symbol-sub {
  background: #e4f1f8;
  color: #17699b;
}

.timeline-symbol-var {
  width: auto;
  min-width: 26px;
  padding: 0 4px;
  border-radius: 5px;
  background: #eee8fb;
  color: #5f39b5;
  font-size: calc(7px * var(--ui-font-scale));
}

.timeline-symbol-whistle,
.timeline-symbol-info {
  background: #eaf6f5;
  color: var(--accent-dark);
}

.timeline-symbol-whistle {
  border-radius: 0;
  background: url("assets/timeline-whistle.png") center / contain no-repeat;
}

.timeline-marker strong,
.timeline-marker em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-marker strong {
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  color: var(--accent-dark);
}

.timeline-marker em {
  color: var(--muted);
  font-size: calc(7.5px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.timeline-marker-team {
  position: absolute;
  /* Keep the team crest clear of the event title, especially for long
     player names. The lower edge is reserved visual space in every card. */
  top: auto;
  bottom: 4px;
  right: 5px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--accent-dark) !important;
  font-size: calc(8px * var(--ui-font-scale)) !important;
  font-weight: 950 !important;
}

.timeline-marker-team-logo {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}

.timeline-marker-goal {
  border-left-color: #1f9c5b;
}

.timeline-marker-shootout {
  border-left-color: #2f7fb8;
}

.timeline-marker-yellow {
  border-left-color: #d6a21d;
}

.timeline-marker-yellowred,
.timeline-marker-red {
  border-left-color: #b92f36;
}

.timeline-marker-substitution {
  border-left-color: #2f7fb8;
}

.timeline-marker-var {
  border-left-color: #8457d4;
}

.timeline-marker-phase {
  border-left-color: var(--accent);
}

.timeline-marker-tooltip {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  z-index: 85;
  width: max-content;
  max-width: min(420px, 76vw);
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: #1e2a31;
  color: #fff;
  box-shadow: 0 8px 24px rgba(22, 32, 41, 0.28);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
  pointer-events: none;
  text-align: left;
}

.timeline-tooltip-row {
  display: grid;
  grid-template-columns: minmax(58px, max-content) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 2px 0;
}

.timeline-tooltip-headline {
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 3px;
  font-size: calc(11px * var(--ui-font-scale));
}

.timeline-tooltip-row b {
  color: #9fe3e2;
  font-size: calc(9px * var(--ui-font-scale));
  text-transform: uppercase;
}

.timeline-tooltip-row span {
  min-width: 0;
}

.timeline-marker:hover .timeline-marker-tooltip,
.timeline-marker:focus-visible .timeline-marker-tooltip {
  display: block;
}

.timeline-marker-click-tooltip:hover .timeline-marker-tooltip,
.timeline-marker-click-tooltip:focus-visible .timeline-marker-tooltip {
  display: none;
}

.timeline-marker-click-tooltip.is-tooltip-open .timeline-marker-tooltip {
  display: block;
}

.timeline-empty {
  display: grid;
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 7px;
  background: #f3f6f8;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
}

.match-board {
  display: grid;
  grid-template-columns: minmax(205px, 0.34fr) minmax(340px, 1fr) minmax(205px, 0.34fr);
  grid-template-rows: var(--match-board-height);
  gap: 7px;
  height: var(--match-board-height);
  align-items: stretch;
  overflow: visible;
}

.match-board.horizontal-match-center {
  grid-template-columns: 22px minmax(520px, 1fr) 22px;
  gap: 5px;
  transition: grid-template-columns 150ms ease;
}

.match-board.horizontal-match-center.reveal-left {
  grid-template-columns: 238px minmax(360px, 1fr) 22px;
}

.match-board.horizontal-match-center.reveal-right {
  grid-template-columns: 22px minmax(360px, 1fr) 238px;
}

.match-board.horizontal-match-center.reveal-left.reveal-right {
  grid-template-columns: 228px minmax(330px, 1fr) 228px;
}

.match-board.horizontal-match-center .bench-card {
  min-width: 0;
  overflow: hidden;
  transition:
    opacity 120ms ease,
    box-shadow 120ms ease;
}

.match-board.horizontal-match-center .bench-card-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.match-board.horizontal-match-center .bench-card-right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.match-board.horizontal-match-center .bench-card > * {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.match-board.horizontal-match-center .bench-card::after {
  content: "Kader";
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 74px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}

.match-board.horizontal-match-center .bench-card-left::after {
  right: 2px;
}

.match-board.horizontal-match-center .bench-card-right::after {
  left: 2px;
}

.match-board.horizontal-match-center.reveal-left .bench-card-left,
.match-board.horizontal-match-center.reveal-right .bench-card-right {
  overflow: visible;
  box-shadow: 0 8px 24px rgba(22, 32, 41, 0.13);
}

.match-board.horizontal-match-center.reveal-left .bench-card-left > *,
.match-board.horizontal-match-center.reveal-right .bench-card-right > * {
  opacity: 1;
  pointer-events: auto;
}

.match-board.horizontal-match-center.reveal-left .bench-card-left::after,
.match-board.horizontal-match-center.reveal-right .bench-card-right::after {
  display: none;
}

.match-team-card,
.lineup-card,
.bench-card {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.match-team-card,
.lineup-card,
.bench-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.bench-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

.match-team-card {
  padding: 12px;
  border-top: 5px solid var(--team-bg, var(--line));
}

.match-team-title {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.match-team-title img {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.match-team-title h2,
.lineup-head h2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
  overflow: visible;
}

.match-stat-grid div {
  position: relative;
  min-width: 0;
  overflow: visible;
  padding: 8px;
  border-radius: 7px;
  background: var(--panel-soft);
}

.match-stat-grid div:hover {
  z-index: 1001;
}

.match-stat-grid span {
  display: block;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
  text-transform: uppercase;
}

.match-stat-grid strong {
  display: block;
  margin-top: 3px;
  min-width: 0;
  white-space: nowrap;
}

.match-stat-grid strong > .player-mention {
  max-width: 100%;
  overflow: visible;
  text-overflow: ellipsis;
}

.match-stat-grid .staff-summary {
  overflow: visible;
}

.lineup-head {
  display: grid;
  grid-template-columns: 82px 30px auto;
  gap: 4px;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid var(--line);
}

.lineup-head h2 {
  display: none;
}

.lineup-head select {
  height: 28px;
  padding-left: 7px;
  font-size: calc(11px * var(--ui-font-scale));
}

.lineup-head button {
  height: 28px;
  padding: 0 7px;
  font-size: calc(11px * var(--ui-font-scale));
}

.lineup-head .lineup-clear-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  padding: 0;
}

.lineup-head .lineup-clear-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bench-list {
  display: grid;
  align-content: start;
  gap: 2px;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 5px;
}

.bench-list.drop-target {
  outline: 3px solid rgba(201, 146, 26, 0.76);
  outline-offset: -4px;
  background: #fff8df;
}

.bench-player {
  position: relative;
  display: grid;
  grid-template-columns: 24px 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  background: var(--team-bg, #fbfcfd);
  color: var(--team-text, var(--ink));
  box-shadow: 0 2px 8px rgba(22, 32, 41, 0.08);
  cursor: grab;
}

.bench-player:active {
  cursor: grabbing;
}

.bench-player.bench-coach {
  position: sticky;
  top: 0;
  z-index: 6;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 24px;
  border-color: rgba(22, 32, 41, 0.22);
  background: #26313a;
  color: #fff;
  cursor: help;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px rgba(22, 32, 41, 0.18);
}

.bench-player.bench-coach:active {
  cursor: help;
}

.bench-player.bench-coach strong {
  text-align: center;
}

.bench-player.bench-coach .bench-player-name-text {
  max-width: 100%;
}

.bench-player strong,
.bench-player span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bench-player strong {
  font-size: calc(10px * var(--ui-font-scale));
  line-height: 1.1;
}

.bench-player-name-text,
.pitch-player-name-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: help;
}

.bench-player-name-text .player-name-label,
.pitch-player-name-text .player-name-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.birthday-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 1px 4px 1px 3px;
  border: 1px solid color-mix(in srgb, #f6b94d 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #f6b94d 22%, transparent);
  color: #ffe3a5;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1.1;
  vertical-align: middle;
  white-space: nowrap;
}

.birthday-badge svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bench-player-name-text .birthday-badge,
.pitch-player-name-text .birthday-badge {
  flex: 0 0 auto;
  height: 14px;
  margin-left: 0;
  padding: 0 3px;
  line-height: 1;
  font-size: calc(7px * var(--ui-font-scale));
}

.bench-player-name-text .birthday-badge svg,
.pitch-player-name-text .birthday-badge svg {
  width: 9px;
  height: 9px;
}

.bench-number,
.bench-pos,
.bench-status,
.bench-goal {
  display: inline-grid;
  place-items: center;
  height: 15px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
  color: #162029;
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 900;
}

.bench-number,
.bench-pos,
.bench-player-name,
.bench-markers {
  align-self: center;
}

.bench-player-name {
  display: flex;
  align-items: center;
  min-height: 15px;
}

.bench-number {
  min-width: 21px;
  padding: 0 3px;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  background: rgba(255, 255, 255, 0.7);
}

.bench-pos {
  background: var(--team-marker-bg, rgba(255, 255, 255, 0.82));
  color: var(--team-marker-text, #162029);
}

.bench-status {
  padding: 0 4px;
  background: var(--gold);
  color: #162029;
}

.bench-markers {
  display: inline-flex;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.bench-markers > .card-button {
  order: 100;
  flex: 0 0 auto;
}

.bench-markers .card-button,
.bench-player.bench-coach .card-button {
  width: 20px;
  min-width: 20px;
  max-width: 28px;
  height: 15px;
  padding: 0 2px;
}

.bench-markers .card-button .card-minute,
.bench-player.bench-coach .card-button .card-minute {
  display: none;
}

.bench-goal {
  min-width: 16px;
  padding: 0 3px;
  background: rgba(255, 255, 255, 0.92);
  color: #162029;
}

.bench-goal.own-goal {
  border: 1px solid rgba(199, 45, 45, 0.58);
  background: rgba(255, 255, 255, 0.94);
  color: var(--red);
}

.goal-ball-own {
  display: inline-block;
  margin-right: 2px;
  line-height: 1;
  filter: sepia(1) saturate(7) hue-rotate(315deg) brightness(0.86) contrast(1.15);
}

.bench-block,
.bench-yellow-risk,
.bench-injury {
  display: inline-grid;
  place-items: center;
  height: 15px;
  min-width: 16px;
  padding: 0 3px;
  border-radius: 4px;
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 950;
}

.bench-block {
  border: 1px solid rgba(22, 32, 41, 0.28);
  background: rgba(22, 32, 41, 0.88);
  color: #fff;
}

.bench-yellow-risk {
  border: 1px solid rgba(155, 114, 20, 0.38);
  background: rgba(250, 213, 88, 0.9);
  color: #4a3606;
}

.bench-injury {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: #c92d2d;
  color: #fff;
}

.bench-player.on-field {
  box-shadow:
    inset 0 0 0 2px rgba(201, 146, 26, 0.95),
    0 2px 8px rgba(22, 32, 41, 0.08);
}

.bench-player.subbed-in {
  box-shadow:
    inset 0 0 0 2px rgba(38, 116, 81, 0.82),
    0 2px 8px rgba(22, 32, 41, 0.08);
}

.bench-player.subbed-out {
  opacity: 0.64;
}

.bench-player.suspended,
.bench-player.sent-off {
  border-color: rgba(22, 32, 41, 0.32);
  background: var(--team-disabled-bg, #26313a);
  color: var(--team-disabled-text, #ffffff);
  box-shadow:
    inset 0 0 0 2px rgba(22, 32, 41, 0.62),
    0 2px 8px rgba(22, 32, 41, 0.08);
  cursor: not-allowed;
}

.bench-player.subbed-out.suspended,
.bench-player.subbed-out.sent-off {
  opacity: 1;
}

.bench-player.suspended > :not(.bench-markers),
.bench-player.sent-off > :not(.bench-markers) {
  filter: saturate(0.42);
  opacity: 1;
}

.bench-player.suspended .card-button,
.bench-player.sent-off .card-button,
.bench-player.suspended .card-icon,
.bench-player.sent-off .card-icon,
.bench-player.suspended .card-stack,
.bench-player.sent-off .card-stack {
  filter: none;
  opacity: 1;
}

.bench-player.suspended:active,
.bench-player.sent-off:active {
  cursor: not-allowed;
}

.bench-player.yellow-risk {
  box-shadow:
    inset 0 0 0 2px rgba(250, 213, 88, 0.92),
    0 2px 8px rgba(22, 32, 41, 0.08);
}

.substitution-box {
  display: grid;
  gap: 4px;
  padding: 5px;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
}

.substitution-box > strong {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.substitution-controls {
  display: grid;
  grid-template-columns: minmax(42px, 6ch) minmax(0, 1fr) minmax(0, 1fr) 24px;
  gap: 3px;
}

.substitution-controls input,
.substitution-controls select,
.substitution-controls button {
  height: 25px;
  min-width: 0;
  padding: 0 4px;
  font-size: calc(10px * var(--ui-font-scale));
}

.substitution-controls select {
  padding-right: 18px;
}

.substitution-controls button {
  padding: 0;
  font-size: calc(14px * var(--ui-font-scale));
}

.substitution-list {
  display: grid;
  gap: 2px;
  max-height: none;
  overflow: visible;
}

.substitution-row {
  display: grid;
  grid-template-columns: minmax(38px, 5.7ch) minmax(0, 1fr) minmax(0, 1fr) 17px;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 3px;
  border-radius: 5px;
  background: #eef4f4;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
}

.substitution-row > span,
.substitution-row strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.substitution-row em {
  margin-right: 2px;
  color: var(--accent-dark);
  font-style: normal;
}

.substitution-row button {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
}

:root[data-theme="dark"] .substitution-row {
  border: 1px solid rgba(113, 215, 213, 0.12);
  background: #20303a;
  color: var(--ink);
}

:root[data-theme="dark"] .substitution-row > span {
  color: var(--accent-soft);
}

:root[data-theme="dark"] .substitution-row strong {
  color: var(--ink);
}

:root[data-theme="dark"] .substitution-row em {
  color: var(--accent-soft);
}

:root[data-theme="dark"] .substitution-row button {
  color: var(--muted);
}

:root[data-theme="dark"] .substitution-row button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.substitution-empty {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 800;
}

.football-pitch {
  position: relative;
  z-index: 5;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border: 1px solid #0d5d3f;
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 50%, transparent 50%) 0 0 / 80px 80px,
    linear-gradient(0deg, #14764d, #0f6a45);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.football-pitch::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  pointer-events: none;
}

.pitch-line.center-line {
  position: absolute;
  top: 50%;
  right: 12px;
  left: 12px;
  height: 2px;
  background: rgba(255, 255, 255, 0.72);
}

.pitch-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.box {
  position: absolute;
  left: 28%;
  width: 44%;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.72);
}

.box-top {
  top: 12px;
  border-top: 0;
}

.box-bottom {
  bottom: 12px;
  border-bottom: 0;
}

.football-pitch.field-rotated .pitch-line.center-line {
  top: 12px;
  bottom: 12px;
  right: auto;
  left: 50%;
  width: 2px;
  height: auto;
  transform: translateX(-50%);
}

.football-pitch.field-rotated .box {
  top: 28%;
  left: auto;
  width: 52px;
  height: 44%;
}

.football-pitch.field-rotated .box-top {
  left: 12px;
  border-top: 2px solid rgba(255, 255, 255, 0.72);
  border-left: 0;
}

.football-pitch.field-rotated .box-bottom {
  right: 12px;
  bottom: auto;
  border-right: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.72);
}

.pitch-label {
  position: absolute;
  z-index: 1;
  max-width: 46%;
  overflow: hidden;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    var(--team-bg, rgba(22, 32, 41, 0.72));
  color: var(--team-text, #fff);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(22, 32, 41, 0.18);
}

.pitch-label-top {
  top: 2px;
  left: 6px;
  transform: none;
}

.pitch-label-bottom {
  right: 6px;
  bottom: 2px;
  transform: none;
}

.football-pitch.field-rotated .pitch-label-top {
  top: 2px;
  left: 6px;
  transform: none;
}

.football-pitch.field-rotated .pitch-label-bottom {
  top: auto;
  right: 6px;
  bottom: 2px;
  transform: none;
}

.pitch-slot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 2;
  width: 88px;
  min-height: 31px;
  transform: translate(-50%, -50%);
}

.pitch-slot.filled:hover,
.pitch-slot.filled:focus-within {
  z-index: 80;
}

.pitch-slot.sub-in .pitch-player {
  box-shadow:
    inset 0 0 0 2px rgba(38, 116, 81, 0.88),
    0 5px 13px rgba(22, 32, 41, 0.18);
}

.pitch-slot.sub-out .pitch-player {
  box-shadow:
    inset 0 0 0 2px rgba(164, 59, 59, 0.82),
    0 5px 13px rgba(22, 32, 41, 0.18);
}

.pitch-slot.suspended .pitch-player,
.pitch-slot.sent-off .pitch-player {
  background: var(--team-disabled-bg, #26313a);
  color: var(--team-disabled-text, #ffffff);
  box-shadow:
    inset 0 0 0 2px rgba(22, 32, 41, 0.78),
    0 5px 13px rgba(22, 32, 41, 0.16);
  cursor: not-allowed;
}

.pitch-slot.suspended .shirt-number,
.pitch-slot.sent-off .shirt-number,
.pitch-slot.suspended .pitch-player-name,
.pitch-slot.sent-off .pitch-player-name {
  filter: saturate(0.42);
  opacity: 1;
}

.pitch-slot.suspended .card-button,
.pitch-slot.sent-off .card-button,
.pitch-slot.suspended .card-icon,
.pitch-slot.sent-off .card-icon,
.pitch-slot.suspended .card-stack,
.pitch-slot.sent-off .card-stack {
  filter: none;
  opacity: 1;
}

.pitch-slot.yellow-risk .pitch-player {
  box-shadow:
    inset 0 0 0 2px rgba(250, 213, 88, 0.96),
    0 5px 13px rgba(22, 32, 41, 0.18);
}

.pitch-slot.drop-target {
  outline: 3px solid rgba(201, 146, 26, 0.78);
  outline-offset: 4px;
  border-radius: 8px;
}

.match-player-heatmap-layer {
  position: absolute;
  inset: 6px;
  z-index: 70;
  overflow: hidden;
  border-radius: 7px;
  pointer-events: none;
  background: rgba(13, 21, 27, 0.12);
  box-shadow: inset 0 0 0 1px rgba(217, 246, 241, 0.16);
}

.match-player-heatmap-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: blur(1.9px) saturate(1.36) contrast(1.12);
  mix-blend-mode: screen;
  opacity: 1;
}

.match-player-heatmap-label {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: min(70%, 420px);
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(20, 32, 39, 0.88);
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1.1;
  transform: translateX(-50%);
  box-shadow: 0 8px 22px rgba(13, 21, 27, 0.22);
}

.match-player-heatmap-label strong,
.match-player-heatmap-label span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-player-heatmap-label span {
  color: rgba(255, 255, 255, 0.72);
}

.match-player-heatmap-layer.is-message {
  display: grid;
  place-items: center;
}

.match-player-heatmap-layer.is-message .match-player-heatmap-label {
  position: static;
  max-width: 70%;
  transform: none;
}

.empty-slot {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 5px;
  border: 1px dashed rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.86);
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 850;
  text-transform: uppercase;
}

.empty-slot strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pitch-player {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  min-width: 0;
  min-height: 30px;
  padding: 3px 5px 4px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)),
    var(--team-bg, rgba(255, 255, 255, 0.94));
  color: var(--team-text, var(--ink));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 5px 13px rgba(22, 32, 41, 0.18);
  cursor: grab;
}

.pitch-player-top {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  line-height: 1;
}

.shirt-number {
  display: inline-grid;
  justify-self: start;
  place-items: center;
  min-width: 20px;
  height: 14px;
  overflow: hidden;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, currentColor 56%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px;
  justify-self: end;
  place-items: center;
  width: auto;
  min-width: 22px;
  max-width: 36px;
  height: 15px;
  min-height: 15px;
  padding: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
  cursor: pointer;
}

.card-minute {
  min-width: 0;
  overflow: hidden;
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
}

.card-button:hover,
.card-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.28);
}

.card-button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.card-empty {
  width: 9px;
  height: 10px;
  border: 1px dashed currentColor;
  border-radius: 2px;
  opacity: 0.55;
}

.card-icon {
  display: block;
  width: 8px;
  height: 11px;
  border: 1px solid rgba(22, 32, 41, 0.22);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(22, 32, 41, 0.2);
}

.card-icon-yellow {
  background: #f3cf22;
}

.card-icon-red {
  background: #c72d2d;
}

.card-stack {
  position: relative;
  display: block;
  width: 17px;
  height: 13px;
}

.card-stack .card-icon {
  position: absolute;
  top: 0;
}

.card-stack .card-icon-yellow {
  left: 1px;
}

.card-stack .card-icon-red {
  right: 1px;
}

.card-dialog-popover {
  position: fixed;
  z-index: 100004;
  width: 236px;
}

.card-dialog-popover[hidden] {
  display: none;
}

.card-dialog-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(22, 32, 41, 0.28);
}

.card-dialog-head,
.card-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.card-dialog-head strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(12px * var(--ui-font-scale));
}

.card-dialog-head button {
  width: 24px;
  height: 24px;
  padding: 0;
}

.card-dialog-card label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 5px;
}

.card-dialog-card label span {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 900;
  text-transform: uppercase;
}

.card-dialog-card select,
.card-dialog-card input {
  height: 26px;
  min-width: 0;
  padding: 0 5px;
  font-size: calc(11px * var(--ui-font-scale));
}

.card-dialog-actions button {
  height: 26px;
  padding: 0 8px;
  font-size: calc(11px * var(--ui-font-scale));
}

.card-dialog-actions button:last-child {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.pitch-event-badges {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  gap: 2px;
  pointer-events: none;
}

.pitch-sub-badge,
.pitch-goal-badge,
.pitch-discipline-badge {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 14px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(22, 32, 41, 0.2);
}

.pitch-sub-badge {
  background: #162029;
  color: #fff;
}

.pitch-goal-badge {
  background: #fff;
  color: #162029;
}

.pitch-goal-badge.own-goal {
  border-color: rgba(199, 45, 45, 0.62);
  background: rgba(255, 255, 255, 0.96);
  color: var(--red);
}

.pitch-block-badge {
  background: #162029;
  color: #fff;
}

.pitch-yellow-risk-badge {
  border-color: rgba(255, 255, 255, 0.95);
  background: #f7d64e;
  color: #493506;
}

.pitch-injury-badge {
  border-color: rgba(255, 255, 255, 0.95);
  background: #c92d2d;
  color: #fff;
}

.pitch-player .slot-label,
.empty-slot .slot-label {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 15px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-dark);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 900;
}

.pitch-player:focus-within {
  z-index: 100;
}

.pitch-player strong,
.pitch-player em,
.pitch-player small {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pitch-player strong {
  margin-top: 1px;
  font-size: calc(9px * var(--ui-font-scale));
  line-height: 1.08;
  text-align: center;
}

.pitch-player em,
.pitch-player small {
  color: var(--team-text, var(--muted));
  font-size: calc(9px * var(--ui-font-scale));
  font-style: normal;
  opacity: 0.86;
}

.lineup-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px;
}

.lineup-slot {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.lineup-slot span {
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 900;
}

.lineup-slot select {
  min-width: 0;
  height: 34px;
  padding: 0 26px 0 8px;
}

.lineup-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 10px 10px;
}

.lineup-player {
  position: relative;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e7edf1;
  border-radius: 7px;
  background: #fbfcfd;
}

.lineup-player .slot-label {
  display: inline-flex;
  justify-content: center;
  min-width: 28px;
  margin-right: 5px;
  color: var(--accent-dark);
  font-weight: 900;
}

.lineup-player strong,
.lineup-player em {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lineup-player em {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-style: normal;
}

.player-tooltip {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 6px);
  z-index: 99999;
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  width: min(310px, 78vw);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #162029;
  color: #fff;
  box-shadow: var(--shadow);
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.35;
  white-space: normal;
  transition: opacity 80ms ease;
}

[data-rich-tooltip] > .player-tooltip {
  display: none;
}

.floating-player-tooltip {
  position: fixed;
  z-index: 100002;
  width: min(390px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 0;
  pointer-events: auto;
  overscroll-behavior: contain;
}

.floating-player-tooltip.is-pinned {
  filter: drop-shadow(0 0 0.45rem rgba(240, 197, 82, 0.45));
}

.floating-player-tooltip[hidden] {
  display: none;
}

.tooltip-card {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.25;
}

.tooltip-card.has-user-notes {
  width: 100%;
}

.group-live-tooltip-card {
  gap: 8px;
}

.group-live-tooltip-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.group-live-tooltip-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
}

.group-live-tooltip-head .meta-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.group-live-tooltip-head strong,
.group-live-tooltip-head em {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-live-tooltip-head em,
.group-live-tooltip-card small,
.group-live-route-card em {
  color: rgba(255, 255, 255, 0.68);
  font-style: normal;
  font-weight: 850;
}

.group-live-tooltip-table {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
}

.group-live-tooltip-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px 34px 34px;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.06);
}

.group-live-table-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.78fr);
  gap: 6px;
  align-items: start;
  min-width: 0;
}

.group-live-table-results-grid .group-live-tooltip-table {
  min-width: 0;
}

.group-match-results-panel {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.group-match-results-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.group-match-results-head strong,
.group-match-results-head span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-match-results-list {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.group-match-result-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  line-height: 1.15;
}

.group-match-result-row.is-live {
  background: rgba(113, 215, 213, 0.16);
  outline: 1px solid rgba(113, 215, 213, 0.45);
  outline-offset: -1px;
}

.group-match-result-row.is-finished {
  background: rgba(97, 197, 142, 0.12);
}

.group-match-result-id {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  white-space: nowrap;
}

.group-match-result-row strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-match-result-team {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.group-match-result-team b {
  min-width: 0;
  overflow: hidden;
  font-size: calc(10px * var(--ui-font-scale));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-summary-tooltip-card {
  width: min(390px, calc(100vw - 16px));
  gap: 8px;
}

.match-summary-tooltip-head {
  display: grid;
  gap: 3px;
}

.match-summary-tooltip-head strong,
.match-summary-tooltip-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-summary-tooltip-head strong {
  white-space: nowrap;
}

.match-summary-tooltip-head span,
.match-summary-tooltip-card small {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 850;
}

.match-summary-mini-grid {
  display: grid;
  gap: 4px;
}

.match-summary-mini-grid div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}

.match-summary-mini-grid span {
  color: rgba(255, 255, 255, 0.58);
  font-weight: 950;
  text-transform: uppercase;
}

.match-summary-mini-grid strong {
  min-width: 0;
}

.match-summary-source {
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
}

.match-summary-source h4 {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.2;
}

.match-summary-source p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.32;
}

.match-summary-source a {
  justify-self: start;
  color: #8fe8ee;
  font-weight: 950;
  text-decoration: none;
}

.match-summary-source a:hover {
  text-decoration: underline;
}

.match-summary-source.is-empty p {
  color: rgba(255, 255, 255, 0.62);
}

.match-pressure-tooltip-card {
  width: min(440px, calc(100vw - 16px));
  gap: 8px;
}

.direct-comparison-first {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(113, 215, 213, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(113, 215, 213, 0.18), rgba(255, 255, 255, 0.06));
}

.direct-comparison-first strong {
  font-size: calc(15px * var(--ui-font-scale));
  line-height: 1.25;
}

.direct-comparison-first span {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.match-pressure-tooltip-head em {
  white-space: normal;
}

.match-pressure-empty {
  padding: 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.74);
  font-weight: 850;
}

.match-pressure-meter {
  display: grid;
  gap: 6px;
}

.match-pressure-meter-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.match-pressure-meter-labels span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.76);
}

.match-pressure-meter-labels span.is-leading {
  background: rgba(113, 215, 213, 0.16);
  color: #fff;
}

.match-pressure-meter-labels img {
  width: 20px;
  height: 14px;
  margin: 0;
  border-radius: 2px;
  object-fit: cover;
}

.match-pressure-meter-labels strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-pressure-meter-labels b {
  font-size: calc(12px * var(--ui-font-scale));
}

.match-pressure-bar {
  display: flex;
  overflow: hidden;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.match-pressure-bar span {
  display: block;
  min-width: 2px;
}

.match-pressure-bar-a {
  background: linear-gradient(90deg, #71d7d5, #4baeb4);
}

.match-pressure-bar-b {
  background: linear-gradient(90deg, #f0c552, #f28f45);
}

.match-pressure-stats {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
}

.match-pressure-stats-head,
.match-pressure-stats-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 25px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.06);
}

.match-pressure-stats-head {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.66);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.match-pressure-stats-head span,
.match-pressure-stats-row span,
.match-pressure-stats-row strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-pressure-stats-head span:nth-child(2),
.match-pressure-stats-row span {
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 950;
}

.match-pressure-stats-head span:last-child,
.match-pressure-stats-row strong:last-child {
  text-align: right;
}

.match-pressure-momentum {
  display: grid;
  gap: 5px;
  padding: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
}

.match-pressure-momentum-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.match-pressure-momentum-head span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: none;
}

.match-pressure-momentum-chart {
  position: relative;
  min-height: 126px;
  padding: 16px 8px 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(113, 215, 213, 0.08), transparent 49%, rgba(242, 143, 69, 0.08) 51%, transparent),
    rgba(12, 22, 29, 0.3);
}

.match-pressure-momentum-chart svg {
  display: block;
  width: 100%;
  height: 93px;
  overflow: visible;
}

.match-pressure-momentum-center {
  stroke: rgba(255, 255, 255, 0.38);
  stroke-dasharray: 2 2;
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}

.match-pressure-momentum-tick {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}

.match-pressure-momentum-area {
  opacity: 0.28;
}

.match-pressure-momentum-area.is-a {
  fill: #8fe8ee;
}

.match-pressure-momentum-area.is-b {
  fill: #f0a14b;
}

.match-pressure-momentum-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.match-pressure-momentum-line.is-a {
  stroke: #8fe8ee;
}

.match-pressure-momentum-line.is-b {
  stroke: #f0a14b;
}

.match-pressure-momentum-column {
  opacity: 0.94;
  shape-rendering: crispEdges;
}

.match-pressure-momentum-column.is-a {
  fill: #63d6a0;
}

.match-pressure-momentum-column.is-b {
  fill: #7487ff;
}

.match-pressure-momentum-team {
  position: absolute;
  left: 8px;
  max-width: 38%;
  overflow: hidden;
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  opacity: 0.82;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.match-pressure-momentum-team.is-a {
  top: 4px;
  color: #8fe8ee;
}

.match-pressure-momentum-team.is-b {
  bottom: 17px;
  color: #f0a14b;
}

.match-pressure-momentum-axis {
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  height: 10px;
}

.match-pressure-momentum-axis span {
  position: absolute;
  top: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
  transform: translateX(-50%);
}

.match-pressure-recent {
  display: grid;
  gap: 5px;
  padding: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
}

.match-pressure-recent > strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(10px * var(--ui-font-scale));
  text-transform: uppercase;
}

.match-pressure-recent > div {
  display: grid;
  gap: 3px;
}

.match-pressure-recent span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-live-tooltip-row-head {
  min-height: 24px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.group-live-tooltip-row span {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-live-tooltip-row span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-align: left;
}

.group-live-tooltip-row img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.group-live-tooltip-row.qualifies {
  background: rgba(97, 197, 142, 0.16);
}

.group-live-tooltip-row.third-watch {
  background: rgba(240, 197, 82, 0.14);
}

.group-live-tooltip-row.is-focus {
  box-shadow: inset 3px 0 0 #fff;
}

.group-live-tooltip-row.is-live {
  outline: 1px solid rgba(113, 215, 213, 0.45);
  outline-offset: -1px;
}

.group-live-status-chip {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(22, 160, 165, 0.92);
  color: #fff;
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0;
}

.group-live-route-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.group-live-route-list-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.knockout-prediction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.group-live-route-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
}

.knockout-team-projection-card {
  gap: 7px;
}

.knockout-prediction-section {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.knockout-prediction-section > strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.knockout-team-projection-card .group-live-tooltip-table {
  border-radius: 6px;
}

.knockout-team-projection-card .group-live-table-results-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(190px, 0.82fr);
}

.knockout-team-projection-card .group-match-results-panel {
  padding: 5px;
  border-radius: 6px;
}

.knockout-team-projection-card .group-match-results-head {
  font-size: calc(9px * var(--ui-font-scale));
}

.knockout-team-projection-card .group-live-tooltip-row {
  min-height: 23px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.knockout-team-projection-card .group-match-result-row {
  grid-template-columns: 28px minmax(0, 1fr) 30px minmax(0, 1fr);
  min-height: 22px;
  padding: 3px 4px;
}

.knockout-team-projection-card .group-match-result-id,
.knockout-team-projection-card .group-match-result-row strong,
.knockout-team-projection-card .group-match-result-team b {
  font-size: calc(9px * var(--ui-font-scale));
}

.knockout-path-results {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.knockout-path-result-row {
  display: grid;
  grid-template-columns: 30px 74px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  line-height: 1.12;
}

.knockout-path-result-row span,
.knockout-path-result-row strong,
.knockout-path-result-row em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.knockout-path-result-row span,
.knockout-path-result-row strong {
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.knockout-path-result-row em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 850;
}

.knockout-path-result-row img,
.knockout-next-row img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.knockout-next-row {
  grid-template-columns: 34px 82px minmax(0, 1fr);
}

.group-live-route-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
}

.group-live-route-card-head strong,
.group-live-route-card-head em,
.group-live-rank-line,
.group-live-route-row span,
.group-live-route-row strong,
.group-live-route-row em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-live-route-card-head strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: calc(11px * var(--ui-font-scale));
}

.group-live-route-card-head em,
.group-live-rank-line {
  color: rgba(255, 255, 255, 0.68);
  font-size: calc(9px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.group-live-route-card-head img,
.group-live-route-opponent img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.group-live-route-rows {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.group-live-route-row {
  display: grid;
  grid-template-columns: 28px 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  line-height: 1.12;
}

.group-live-route-row.is-current {
  background: rgba(113, 215, 213, 0.16);
}

.group-live-route-row.is-alternative {
  opacity: 0.72;
}

.group-live-route-row.is-alternative span:first-child,
.group-live-route-row.is-alternative strong,
.group-live-route-row.is-alternative em {
  font-weight: 850;
}

.group-live-route-row span:first-child {
  color: rgba(255, 255, 255, 0.68);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-align: center;
}

.group-live-route-row strong {
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-align: center;
}

.group-live-route-opponent {
  color: rgba(255, 255, 255, 0.75);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
}

.group-live-route-opponent b {
  color: #fff;
  font-weight: 950;
}

.group-live-route-opponent em {
  color: rgba(255, 255, 255, 0.62);
  font-style: normal;
  font-weight: 850;
}

.group-live-empty {
  padding: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 850;
}

.tooltip-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.tooltip-head img,
.tooltip-head > span {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  object-fit: contain;
  object-position: center bottom;
}

.tooltip-head > span {
  display: grid;
  place-items: center;
  font-weight: 950;
}

.tooltip-head strong,
.tooltip-head em {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tooltip-head strong {
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 950;
}

.tooltip-head em {
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}

.tooltip-events {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tooltip-events span {
  min-width: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
}

.tooltip-quickfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tooltip-quickfacts span {
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 109, 119, 0.36);
  color: #fff;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.tooltip-quickfacts span.quickfact-warning {
  border-color: rgba(250, 213, 88, 0.5);
  background: rgba(250, 213, 88, 0.18);
  color: #fff5b8;
}

.tooltip-quickfacts span.quickfact-injury {
  border-color: rgba(241, 99, 114, 0.54);
  background: rgba(241, 99, 114, 0.2);
  color: #ffd9df;
}

.tooltip-quickfacts span.quickfact-availability {
  border-color: rgba(142, 198, 210, 0.42);
  background: rgba(142, 198, 210, 0.14);
  color: #d7f8ff;
}

.tooltip-note-strip {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.tooltip-note-strip.tooltip-muted {
  background: rgba(255, 255, 255, 0.06);
}

.tooltip-discipline-strip {
  border: 1px solid rgba(201, 146, 26, 0.38);
  background: rgba(201, 146, 26, 0.18);
}

.tooltip-suspension-strip {
  border-color: rgba(240, 110, 92, 0.52);
  background: rgba(164, 59, 59, 0.24);
}

.tooltip-yellow-risk-strip {
  border-color: rgba(250, 213, 88, 0.54);
  background: rgba(250, 213, 88, 0.18);
}

.tooltip-availability-strip {
  border: 1px solid rgba(142, 198, 210, 0.38);
  background: rgba(142, 198, 210, 0.12);
}

.tooltip-injury-strip {
  border-color: rgba(241, 99, 114, 0.54);
  background: rgba(112, 40, 56, 0.28);
}

.tooltip-recent-injury-strip {
  border-color: rgba(142, 198, 210, 0.38);
  background: rgba(142, 198, 210, 0.12);
}

.availability-history {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.availability-history-toggle {
  display: inline-flex;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(142, 198, 210, 0.14);
  color: #d7f8ff;
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  cursor: help;
  white-space: nowrap;
}

.availability-history-body {
  display: none;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(142, 198, 210, 0.24);
  border-radius: 6px;
  background: rgba(7, 13, 18, 0.32);
  color: rgba(237, 242, 244, 0.82);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.25;
}

.availability-history:has(.availability-history-toggle:hover) .availability-history-body,
.availability-history:has(.availability-history-toggle:focus) .availability-history-body,
.availability-history:has(.availability-history-body:hover) .availability-history-body,
.availability-history:focus-within .availability-history-body {
  display: grid;
}

.availability-history-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 6px;
  min-width: 0;
  padding: 4px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}

.availability-history-row em {
  grid-row: span 2;
  color: rgba(255, 255, 255, 0.58);
  font-style: normal;
  font-weight: 950;
}

.availability-history-row strong,
.availability-history-row small,
.availability-history-more,
.availability-history-body a {
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.availability-history-row small,
.availability-history-more {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 850;
}

.availability-history-body a {
  justify-self: start;
  color: #8fe8ee;
  font-weight: 950;
  text-decoration: none;
}

.availability-history-body a:hover {
  text-decoration: underline;
}

.tooltip-note-strip span {
  color: rgba(255, 255, 255, 0.66);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.tooltip-note-strip strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(10px * var(--ui-font-scale));
}

.tooltip-note-strip.tooltip-muted strong {
  color: rgba(255, 255, 255, 0.58);
}

.tooltip-long-strip {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: start;
}

.tooltip-long-strip strong {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.25;
}

.team-culture-tooltip {
  display: grid;
  gap: 4px;
}

.team-nickname-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.team-nickname-chip {
  display: inline-grid;
  gap: 1px;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid rgba(107, 219, 206, 0.42);
  border-radius: 7px;
  background: rgba(107, 219, 206, 0.12);
  line-height: 1.08;
}

.team-nickname-chip b {
  color: #fff;
  font-size: calc(9px * var(--ui-font-scale));
}

.team-nickname-chip small {
  color: rgba(255, 255, 255, 0.66);
  font-size: calc(7px * var(--ui-font-scale));
  font-weight: 850;
}

.team-anthem-strip strong {
  display: grid;
  gap: 2px;
}

.team-anthem-strip b {
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
}

.team-anthem-strip small,
.team-anthem-strip em {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  line-height: 1.2;
}

.team-anthem-strip em span {
  color: rgba(255, 255, 255, 0.56);
  font-weight: 950;
  text-transform: uppercase;
}

.tooltip-body {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.tooltip-body.has-user-notes {
  grid-template-columns: minmax(260px, 0.92fr) minmax(300px, 1.08fr);
  align-items: start;
}

.tooltip-system {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.tooltip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.tooltip-grid div {
  min-width: 0;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.tooltip-grid .tooltip-wide {
  grid-column: 1 / -1;
}

.tooltip-grid .tooltip-wide strong {
  white-space: normal;
}

.tooltip-grid .tooltip-birth strong {
  white-space: normal;
}

.tooltip-grid span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 900;
  text-transform: uppercase;
}

.tooltip-grid strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(10px * var(--ui-font-scale));
}

.tooltip-grid strong.tooltip-html-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  align-items: center;
  gap: 8px;
  overflow: visible;
  white-space: normal;
}

.tooltip-grid strong.tooltip-html-value:has(.career-chain) {
  display: block;
}

.tooltip-grid strong.tooltip-html-value:has(.achievement-list) {
  display: block;
}

.tooltip-grid strong.tooltip-html-value:has(.form-strip) {
  display: block;
  overflow: visible;
}

.tooltip-grid strong.tooltip-html-value:has(.form-list) {
  display: block;
  overflow: visible;
}

.tooltip-grid strong.tooltip-html-value:has(.tooltip-stat-blocks),
.tooltip-grid .tooltip-stat-grid-cell strong.tooltip-html-value {
  display: block;
}

.tooltip-grid .tooltip-physical-cell strong.tooltip-html-value {
  display: block;
}

.tooltip-grid .tooltip-physical-cell .physical-facts,
.tooltip-grid .tooltip-physical-cell .physical-fact {
  display: grid;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.tooltip-grid .tooltip-physical-cell .physical-fact {
  gap: 1px;
  padding: 3px 4px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}

.tooltip-grid .tooltip-physical-cell .physical-fact em {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(7px * var(--ui-font-scale));
}

.tooltip-grid .tooltip-physical-cell .physical-fact b {
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
}

.tooltip-stat-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.tooltip-grid .tooltip-stat-blocks,
.tooltip-grid .tooltip-stat-block div,
.tooltip-grid .tooltip-stat-blocks div {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.tooltip-stat-block {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
}

.tooltip-stat-block h5 {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tooltip-stat-block > div {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.tooltip-grid .tooltip-stat-block span,
.tooltip-stat-block span {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
  text-transform: none;
}

.tooltip-stat-block b {
  color: #fff;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1;
}

.tooltip-stat-block em {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: none;
}

.tooltip-season-stat-blocks {
  grid-template-columns: 1fr;
}

.tooltip-season-competitions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.tooltip-grid .tooltip-season-competitions span,
.tooltip-season-competitions span {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}

.tooltip-season-competitions b,
.tooltip-season-competitions em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-hover-season-stats {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--league-line, rgba(118, 219, 210, 0.28)) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--league-panel-strong, rgba(16, 31, 38, 0.94)) 84%, transparent);
}

.league-hover-season-stats > span {
  color: var(--league-accent, #76dbd2);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.league-hover-season-stats section {
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--league-line, rgba(118, 219, 210, 0.28)) 58%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--league-chip-bg, rgba(255, 255, 255, 0.08)) 45%, transparent);
}

.league-hover-season-stats h5 {
  margin: 0;
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--league-accent, #76dbd2);
  background: color-mix(in srgb, var(--league-accent, #76dbd2) 13%, transparent);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
}

.league-season-total,
.league-season-competitions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.league-season-total span,
.league-season-competitions span {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  padding: 3px 5px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--league-chip-bg, rgba(255, 255, 255, 0.08)) 82%, transparent);
}

.league-season-total em,
.league-season-competitions em {
  color: var(--league-muted, rgba(244, 251, 251, 0.66));
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 900;
}

.league-season-total b,
.league-season-competitions strong {
  color: var(--league-text, #f4fbfb);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.league-season-competitions span {
  grid-template-columns: minmax(52px, auto) 1fr;
  padding: 2px 1px;
  border-radius: 0;
  background: transparent;
}

.league-season-competitions span + span {
  border-top: 1px solid color-mix(in srgb, var(--league-line, rgba(118, 219, 210, 0.28)) 32%, transparent);
}

.league-season-competitions em {
  font-weight: 650;
}

.tooltip-stat-block-attack {
  border-color: rgba(239, 108, 90, 0.24);
}

.tooltip-stat-block-control {
  border-color: rgba(107, 219, 206, 0.24);
}

.tooltip-stat-block-minutes {
  border-color: rgba(121, 214, 132, 0.24);
}

.tooltip-stat-block-goalkeeping {
  border-color: rgba(98, 154, 223, 0.26);
}

.tooltip-stat-block-defense {
  border-color: rgba(159, 176, 190, 0.26);
}

.tooltip-stat-block-setplay {
  border-color: rgba(240, 197, 82, 0.24);
}

.tooltip-stat-block-matches {
  grid-column: 1 / -1;
}

.tooltip-stat-block-matches > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.tooltip-grid .tooltip-stat-block span.stat-match-item,
.tooltip-stat-block span.stat-match-item {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
}

.tooltip-stat-block span.stat-match-item em {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.15;
}

.tooltip-grid .achievement-list {
  display: inline-flex;
  gap: 2px;
}

.tooltip-grid .achievement-chip,
.tooltip-grid .achievement-more {
  display: inline-flex;
  border-color: rgba(240, 197, 82, 0.55);
  background: rgba(240, 197, 82, 0.13);
  color: #fff;
}

.tooltip-grid .achievement-count {
  display: inline-grid;
  color: #f3d36b;
}

.tooltip-grid .achievement-name {
  display: inline;
  max-width: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  color: inherit;
  font-size: calc(9px * var(--ui-font-scale));
}

.tooltip-grid .achievement-chip small,
.tooltip-grid .achievement-more {
  color: rgba(255, 255, 255, 0.68);
}

.tooltip-grid .achievement-chip small {
  font-size: calc(7px * var(--ui-font-scale));
}

.tooltip-grid .achievement-list-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  line-height: 1.1;
}

.tooltip-grid .achievement-list-compact .achievement-chip {
  display: grid;
  max-width: min(148px, 100%);
  padding: 2px 4px;
  border: 1px solid rgba(240, 197, 82, 0.42);
  border-radius: 6px;
  background: rgba(240, 197, 82, 0.12);
}

.tooltip-grid .achievement-list-compact .achievement-chip + .achievement-chip::before {
  content: none;
}

.tooltip-grid .achievement-list-compact .achievement-count {
  display: inline-grid;
  border-color: rgba(240, 197, 82, 0.6);
  background: rgba(240, 197, 82, 0.15);
}

.tooltip-grid .achievement-list-compact .achievement-name {
  display: block;
  max-width: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  font-size: calc(7.5px * var(--ui-font-scale));
  line-height: 1.02;
}

.tooltip-grid .achievement-list-compact .achievement-chip small {
  font-size: calc(6.5px * var(--ui-font-scale));
  line-height: 1.02;
}

.tooltip-grid .tooltip-no-label {
  padding-top: 4px;
  padding-bottom: 4px;
}

.tooltip-grid .career-chain {
  display: inline-flex;
  gap: 2px;
}

.tooltip-grid .career-club,
.tooltip-grid .career-more {
  display: inline-flex;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.tooltip-grid .career-start {
  border-color: rgba(240, 197, 82, 0.95);
  box-shadow: inset 0 0 0 1px rgba(240, 197, 82, 0.55);
}

.tooltip-grid .career-current {
  border-color: rgba(107, 219, 206, 0.7);
  background: rgba(107, 219, 206, 0.16);
}

.tooltip-grid .career-club b {
  max-width: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  color: inherit;
  font-size: calc(9px * var(--ui-font-scale));
}

.tooltip-grid .career-club small,
.tooltip-grid .career-arrow,
.tooltip-grid .career-more,
.tooltip-grid .career-meta {
  color: rgba(255, 255, 255, 0.66);
}

.tooltip-grid .career-club small {
  font-size: calc(7px * var(--ui-font-scale));
}

.tooltip-grid .career-chain-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.1;
}

.tooltip-grid .career-chain-compact .career-club,
.tooltip-grid .career-chain-compact .career-more {
  display: grid;
  max-width: min(178px, 100%);
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.tooltip-grid .career-chain-compact .career-club b {
  display: block;
  max-width: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.tooltip-grid .career-chain-compact .career-arrow {
  align-self: center;
  margin: 0 -1px;
}

.tooltip-grid .career-more {
  position: relative;
}

.tooltip-grid .career-more:hover,
.tooltip-grid .career-more:focus-visible,
.tooltip-grid .career-more:focus-within {
  border-color: rgba(107, 219, 206, 0.7);
}

.tooltip-grid .coach-playing-career {
  gap: 4px;
}

.tooltip-grid .coach-balance-text {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.tooltip-grid .coach-form-bubbles {
  display: inline-flex;
  color: inherit;
  font-size: inherit;
  text-transform: none;
}

.tooltip-grid .coach-form-bubble {
  display: inline-grid;
  color: #fff;
  font-size: calc(11px * var(--ui-font-scale));
  text-transform: none;
}

.venue-tooltip-photo {
  width: 100%;
  max-height: 148px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  object-fit: cover;
}

.venue-tooltip-weather .weather-box {
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
}

.venue-tooltip-weather .weather-summary strong,
.venue-tooltip-weather .weather-metric strong,
.venue-tooltip-weather .weather-hour b,
.venue-tooltip-weather .weather-current strong {
  color: #fff;
}

.venue-tooltip-weather .weather-summary span,
.venue-tooltip-weather .weather-metric span,
.venue-tooltip-weather .weather-metric em,
.venue-tooltip-weather .weather-hour small,
.venue-tooltip-weather .weather-hour-top span,
.venue-tooltip-weather .weather-current em,
.venue-tooltip-weather .weather-current small {
  color: rgba(255, 255, 255, 0.66);
}

.venue-tooltip-weather .weather-metric,
.venue-tooltip-weather .weather-hour,
.venue-tooltip-weather .weather-current {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.app-tooltip .app-notes-component {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-height: min(520px, calc(100dvh - 126px));
  overflow: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  overscroll-behavior: contain;
}

.referee-tooltip-notes-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.referee-tooltip-notes-stack .app-notes-component { max-height: none; }

@media (max-width: 760px) {
  .group-live-table-results-grid {
    grid-template-columns: 1fr;
  }

  .group-match-result-row {
    grid-template-columns: 32px minmax(0, 1fr) 34px minmax(0, 1fr);
  }

  .group-live-route-list-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knockout-prediction-grid {
    grid-template-columns: 1fr;
  }

  .match-score-tooltip-body {
    grid-template-columns: 1fr;
  }

  .tooltip-body.has-user-notes {
    grid-template-columns: 1fr;
  }

  .app-tooltip .app-notes-component {
    max-height: min(360px, calc(100dvh - 190px));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }
}

/* UCL roster: mirror the league Kader workspace, not presentation cards. */
.squad-table.league-style-squad { display: block; width: 100%; }
.squad-table.league-style-squad thead { display: none; }
.squad-table.league-style-squad tbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 6px;
}
.squad-table.league-style-squad tr {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--position-bg) 60%, var(--line) 40%);
  border-radius: 8px;
  background: var(--position-bg, var(--panel));
  cursor: pointer;
}
.squad-table.league-style-squad tr:hover,
.squad-table.league-style-squad tr.selected {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}
.squad-table.league-style-squad td { display: none; padding: 0; border: 0; }
.squad-table.league-style-squad td.number-cell { display: block; grid-column: 1; font-size: 1rem; font-weight: 900; text-align: center; }
.squad-table.league-style-squad td:nth-child(2) { display: block; grid-column: 2; min-width: 0; }
.squad-table.league-style-squad .player-cell { display: block; min-width: 0; }
.squad-table.league-style-squad .player-cell img { display: none; }
.squad-table.league-style-squad .player-main { overflow: hidden; font-size: calc(15px * var(--ui-font-scale)); font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.squad-table.league-style-squad .player-sub { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: calc(11px * var(--ui-font-scale)); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .app-shell {
  grid-template-columns: 290px minmax(440px, 1fr) minmax(360px, 46%);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-rail,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .rail-search {
  background: var(--panel);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-list { padding: 7px 10px 12px; }
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  height: 52px;
  margin-bottom: 5px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button img {
  width: 34px;
  height: 34px;
  border: 0;
  object-fit: contain;
  background: transparent;
}

:root[data-theme="dark"]:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button img,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button img {
  border: 0;
  background: transparent;
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent);
}
/* UCL's pale selected rail state needs the same dark foreground as its
   unselected light-theme rows; the generic active-button white text is not
   legible here. */
:root[data-theme="light"]:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button.active,
:root[data-theme="light"]:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button.active .team-name-small,
:root[data-theme="light"]:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-button.active .team-value-small {
  color: var(--ink);
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-name-small {
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 900;
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-value-small {
  margin-top: 2px;
  text-align: left;
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-header {
  min-height: 116px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--panel-strong), var(--accent-soft));
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-header .team-flag {
  width: 86px;
  height: 86px;
  padding: 8px;
  border-radius: 14px;
  object-fit: contain;
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #quickGrid { display: none; }
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .squad-tools {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .squad-tools .toggle-label { display: none; }

.tooltip-section {
  display: grid;
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tooltip-section h4 {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.tooltip-mini-list {
  display: grid;
  gap: 3px;
}

.tooltip-mini-list p {
  display: grid;
  grid-template-columns: 34px minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 5px;
  align-items: center;
  margin: 0;
  min-width: 0;
}

.tooltip-mini-list span,
.tooltip-mini-list strong,
.tooltip-mini-list em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tooltip-mini-list span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 950;
}

.tooltip-mini-list strong,
.tooltip-mini-list em {
  font-size: calc(10px * var(--ui-font-scale));
}

.tooltip-mini-list em {
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}

.coach-staff-list {
  display: grid;
  gap: 4px;
}

.coach-staff-list p {
  display: grid;
  grid-template-columns: minmax(90px, 0.92fr) minmax(0, 1.08fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 4px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
}

.coach-staff-list strong,
.coach-staff-list span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.coach-staff-list strong {
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
}

.coach-staff-list span {
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
  text-align: right;
}

.world-cup-list {
  display: grid;
  gap: 3px;
  max-height: min(58vh, 430px);
  overflow: auto;
  padding-right: 2px;
}

.world-cup-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 4px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
}

.world-cup-row span,
.world-cup-row strong,
.world-cup-row em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.world-cup-row span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 950;
}

.world-cup-row strong {
  font-size: calc(10px * var(--ui-font-scale));
}

.world-cup-row em {
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
}

.honours-list {
  display: grid;
  gap: 4px;
}

.honours-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
}

.honours-list strong,
.honours-list span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.honours-list span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 950;
  text-align: right;
}

.player-mention,
.team-mention,
.coach-mention,
.referee-mention,
.venue-mention,
.group-live-table-mention,
.knockout-prediction-mention {
  position: relative;
  z-index: 20;
  display: inline-block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: help;
}

.player-mention .player-tooltip,
.team-mention .player-tooltip,
.coach-mention .player-tooltip,
.referee-mention .player-tooltip,
.venue-mention .player-tooltip,
.group-live-table-mention .player-tooltip,
.knockout-prediction-mention .player-tooltip {
  left: 0;
  bottom: calc(100% + 5px);
  z-index: 100000;
  text-decoration: none;
}

.player-mention:hover,
.player-mention:focus,
.team-mention:hover,
.team-mention:focus,
.coach-mention:hover,
.coach-mention:focus,
.referee-mention:hover,
.referee-mention:focus,
.venue-mention:hover,
.venue-mention:focus,
.group-live-table-mention:hover,
.group-live-table-mention:focus,
.knockout-prediction-mention:hover,
.knockout-prediction-mention:focus {
  z-index: 100001;
  text-decoration: underline;
  text-decoration-color: rgba(0, 109, 119, 0.45);
  text-underline-offset: 2px;
}

.lineup-player:hover .player-tooltip,
.lineup-player:focus .player-tooltip,
.staff-summary:hover .player-tooltip,
.staff-summary:focus .player-tooltip,
.player-mention:hover .player-tooltip,
.player-mention:focus .player-tooltip,
.team-mention:hover .player-tooltip,
.team-mention:focus .player-tooltip,
.coach-mention:hover .player-tooltip,
.coach-mention:focus .player-tooltip,
.referee-mention:hover .player-tooltip,
.referee-mention:focus .player-tooltip,
.venue-mention:hover .player-tooltip,
.venue-mention:focus .player-tooltip,
.group-live-table-mention:hover .player-tooltip,
.group-live-table-mention:focus .player-tooltip,
.knockout-prediction-mention:hover .player-tooltip,
.knockout-prediction-mention:focus .player-tooltip {
  visibility: visible;
  opacity: 1;
}

[data-rich-tooltip]:hover > .player-tooltip,
[data-rich-tooltip]:focus > .player-tooltip,
[data-rich-tooltip]:focus-within > .player-tooltip {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.referee-tooltip-team {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.referee-tooltip-team > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.referee-tooltip-team span {
  display: inline-grid;
  place-items: center;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.referee-tooltip-team strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.referee-tooltip-team em {
  color: rgba(255, 255, 255, 0.66);
  font-size: calc(11px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 850;
}

.referee-tooltip-team .is-unassigned {
  opacity: 0.72;
}

.referee-tooltip-team .is-unassigned strong {
  color: rgba(255, 255, 255, 0.72);
}

.referee-history-section {
  gap: 6px;
}

.referee-profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.referee-profile-chips span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid rgba(107, 219, 206, 0.28);
  border-radius: 999px;
  background: rgba(107, 219, 206, 0.09);
  color: rgba(255, 255, 255, 0.84);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
}

.referee-profile-chips b {
  color: #fff;
}

.referee-history-list p {
  grid-template-columns: minmax(74px, max-content) minmax(150px, 1.05fr) minmax(110px, 0.95fr);
  gap: 7px;
  align-items: start;
}

.referee-history-list span {
  overflow: visible;
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums;
  text-overflow: clip;
}

.referee-history-list strong {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.12;
}

.referee-history-list em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.referee-source-warning {
  color: rgba(255, 213, 128, 0.86);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
}

.referee-history-line {
  display: block;
  white-space: normal;
  line-height: 1.18;
}

.match-context-details .match-meta-link.venue-mention {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.h2h-list {
  padding: 0 10px 10px;
}

.h2h-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.h2h-row span {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 850;
}

.h2h-row strong,
.h2h-row em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.h2h-row em {
  grid-column: 2;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-style: normal;
}

.h2h-row small {
  grid-column: 2;
  color: var(--ink);
  font-size: calc(12px * var(--ui-font-scale));
}

.h2h-row .h2h-scorers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.h2h-row .h2h-scorers span:last-child {
  text-align: right;
}

.match-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px;
  padding: 8px;
}

.note-line {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e6edf0;
  border-radius: 7px;
  background: #f7fafb;
  font-weight: 750;
  line-height: 1.25;
}

.note-card {
  display: grid;
  gap: 4px;
  align-content: start;
}

.note-card.note-primary {
  border-color: rgba(0, 109, 119, 0.28);
  background: #eef8f7;
}

.note-card.note-live {
  border-color: rgba(189, 138, 0, 0.34);
  background: #fff8df;
}

.note-card.note-alert {
  border-color: rgba(185, 28, 28, 0.28);
  background: #fff2f2;
}

.note-topic {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.note-line strong {
  display: block;
  min-width: 0;
  font-size: calc(12px * var(--ui-font-scale));
}

.paired-facts {
  display: grid;
  gap: 4px;
}

.paired-facts > span {
  display: grid;
  grid-template-columns: minmax(84px, 0.8fr) minmax(0, 1.2fr);
  gap: 6px;
  align-items: start;
  min-width: 0;
}

.paired-facts em,
.paired-facts b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.paired-facts em {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
}

.paired-facts .team-flag-inline {
  width: 16px;
  height: 11px;
  margin-right: 4px;
  object-fit: cover;
  vertical-align: -1px;
}

.travel-empty {
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 850;
}

.travel-detail {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.travel-detail b,
.travel-detail small {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.travel-detail small {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 850;
}

.travel-detail > span,
.form-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.travel-detail em,
.form-strip em {
  display: inline-grid;
  place-items: center;
  min-height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #eef4f4;
  color: var(--accent-dark);
  font-size: calc(9px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.form-strip {
  align-items: center;
}

.form-strip b {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(11px * var(--ui-font-scale));
}

.form-strip .form-s {
  background: rgba(38, 116, 81, 0.16);
  color: var(--green);
}

.form-strip .form-u {
  background: rgba(201, 146, 26, 0.16);
  color: #8a6210;
}

.form-strip .form-n {
  background: rgba(164, 59, 59, 0.14);
  color: var(--red);
}

.form-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.form-list span,
.form-list strong,
.form-list em,
.form-list a {
  text-transform: none;
}

.form-match-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 6px 7px;
  border-left: 3px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
  line-height: 1.25;
  text-transform: none;
}

.form-match-card.form-s {
  border-left-color: var(--green);
  background: rgba(38, 116, 81, 0.16);
}

.form-match-card.form-u {
  border-left-color: #c9921a;
  background: rgba(201, 146, 26, 0.15);
}

.form-match-card.form-n {
  border-left-color: var(--red);
  background: rgba(164, 59, 59, 0.14);
}

.form-match-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.form-match-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.form-list .form-match-top {
  display: flex;
}

.form-list .form-match-bubble {
  display: inline-flex;
}

.form-list .form-result {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
}

.form-list .form-match-bubble strong {
  display: inline;
  min-width: 0;
  overflow: visible;
  color: #f4f8f9;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 950;
  white-space: normal;
}

.form-list .form-match-bubble em {
  display: inline;
  color: rgba(237, 242, 244, 0.58);
  font-size: calc(8px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.form-list .form-match-info {
  display: block;
  min-width: 0;
  color: rgba(237, 242, 244, 0.72);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
  white-space: normal;
}

.form-list .form-report-toggle {
  display: inline-flex;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(102, 220, 218, 0.12);
  color: var(--accent);
  font-size: calc(8px * var(--ui-font-scale));
  font-weight: 950;
  cursor: help;
  white-space: nowrap;
}

.form-list .form-report-body {
  display: none;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  border-radius: 6px;
  background: rgba(7, 13, 18, 0.32);
  color: rgba(237, 242, 244, 0.82);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.32;
}

.form-list .form-match-card:has(.form-report-toggle:hover) .form-report-body,
.form-list .form-match-card:has(.form-report-toggle:focus) .form-report-body,
.form-list .form-match-card:has(.form-report-body:hover) .form-report-body,
.form-list .form-match-card:focus-within .form-report-body {
  display: grid;
}

.form-list .form-report-body strong,
.form-list .form-report-body span,
.form-list .form-report-body a {
  display: block;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.form-list .form-report-body a {
  color: var(--accent);
  font-weight: 950;
  text-decoration: none;
}

.form-list .form-report-body a:hover {
  text-decoration: underline;
}

.tournament-view {
  display: grid;
  gap: 12px;
}

.tournament-command {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 2.65fr) minmax(116px, 0.45fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tournament-context {
  display: contents;
}

.tournament-context-meta {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  gap: 1px;
  min-width: 0;
}

.tournament-context-meta strong,
.tournament-context-main strong {
  overflow: hidden;
  color: var(--ink);
  line-height: 1.04;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tournament-context-meta strong {
  font-size: calc(18px * var(--ui-font-scale));
}

.tournament-context-meta span,
.tournament-context-live span {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1.12;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tournament-context-main {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.tournament-context-main strong {
  width: 100%;
  font-size: calc(18px * var(--ui-font-scale));
}

.tournament-phase-chip,
.tournament-context-live span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.tournament-phase-chip {
  max-width: 100%;
  padding: 2px 8px;
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.tournament-context-live {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.tournament-context-live span {
  max-width: min(260px, 40%);
  padding: 2px 7px;
}

.tournament-context-live em {
  flex: 0 0 auto;
  margin-right: 4px;
  color: var(--accent);
  font-style: normal;
  text-transform: uppercase;
}

.tournament-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 3;
  grid-row: 1 / span 2;
  gap: 3px;
  justify-self: end;
  width: min(106px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
}

.tournament-tabs button {
  position: relative;
  display: grid;
  place-items: center;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
}

.tournament-tabs button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.tournament-tabs svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.tournament-tabs button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tournament-tab-panel {
  display: grid;
  gap: 12px;
}

.tournament-header,
.tournament-tools,
.tournament-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tournament-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.tournament-tools {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.tournament-overview-stack {
  display: grid;
  gap: 12px;
  align-items: start;
}

.tournament-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: visible;
}

.tournament-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 0;
  overflow: visible;
  padding: 10px;
}

.tournament-groups.compact-groups {
  grid-auto-rows: minmax(156px, auto);
}

.tournament-groups.knockout-overview {
  grid-template-columns: 1fr;
  gap: 12px;
}

.knockout-overview-stage {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.knockout-overview-stage h3 {
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: #eef5f6;
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
}

.knockout-pairings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
  align-items: start;
}

.knockout-pairing {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 6px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid #dfe7ec;
  border-radius: 8px;
  background: #fbfcfd;
  cursor: default;
}

.knockout-pairing.openable {
  cursor: pointer;
}

.knockout-pairing.openable:hover {
  border-color: var(--accent);
  background: #eef8f6;
}

.knockout-pairing.starred,
.tournament-match-card.starred {
  border-color: rgba(201, 146, 26, 0.86);
  box-shadow: inset 4px 0 0 rgba(201, 146, 26, 0.88);
}

.knockout-pairing-kicker,
.knockout-pairing small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 850;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.qualification-ties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.qualification-tie-card {
  display: grid;
  gap: .75rem;
  padding: .9rem;
  border: 1px solid var(--line, #d8dee8);
  border-radius: 16px;
  background: var(--panel-strong);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.qualification-tie-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem;
  font-weight: 800;
}

.qualification-tie-summary .qualification-tie-count {
  justify-self: start;
  padding: .2rem .45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-strong));
  color: var(--accent);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.qualification-tie-summary strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 1rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.qualification-tie-summary strong em { color: var(--muted, #637083); font-size: .75rem; font-style: normal; font-weight: 800; }
.qualification-tie-summary small { color: var(--muted, #637083); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.qualification-leg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.qualification-leg-list > div > b { display: block; margin: 0 0 .3rem .15rem; color: var(--muted, #637083); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.qualification-tie-card > footer { padding-top: .65rem; border-top: 1px solid var(--line, #d8dee8); color: var(--muted, #637083); font-size: .78rem; }

@media (max-width: 1000px) {
  .qualification-ties { grid-template-columns: 1fr; }
}

.ucl-league-phase-corpus { display: grid; grid-template-columns: minmax(620px, 1.35fr) minmax(420px, .65fr); gap: .8rem; color: var(--ink); }
.ucl-table-shell,
.ucl-ranking-routes { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); }
.ucl-table-shell > header,
.ucl-ranking-routes > header { display: flex; justify-content: space-between; gap: .8rem; padding: .75rem .85rem; border-bottom: 1px solid var(--line); }
.ucl-table-shell header small,
.ucl-ranking-routes header small { color: var(--muted); }
.ucl-table-scroll { max-height: 720px; overflow: auto; }
.ucl-league-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.ucl-league-table th { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--muted); text-align: left; }
.ucl-league-table th,
.ucl-league-table td { padding: .36rem .45rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ucl-league-table th:not(:nth-child(2)):not(:last-child),
.ucl-league-table td:not(:nth-child(2)):not(:last-child) { text-align: center; }
.ucl-league-table tr.direct td:first-child { box-shadow: inset 4px 0 0 #2ebd85; }
.ucl-league-table tr.playoff td:first-child { box-shadow: inset 4px 0 0 #d69b28; }
.ucl-league-table tr.out td:first-child { box-shadow: inset 4px 0 0 #b85d68; }
.ucl-league-table tr.direct td:last-child b { color: #2ebd85; }
.ucl-league-table tr.playoff td:last-child b { color: #d69b28; }
.ucl-league-table tr.out td:last-child b { color: #b85d68; }
.ucl-open-team-slot { color: var(--muted); font-style: italic; }
.ucl-ranking-routes { display: grid; align-content: start; gap: .65rem; padding-bottom: .8rem; }
.ucl-ranking-routes > :not(header) { margin-inline: .8rem; }
.ucl-route-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ucl-route-block.direct b,
.ucl-route-block.direct strong { color: #2ebd85; }
.ucl-route-block.playoff-winners b,
.ucl-route-block.playoff-winners strong { color: #d69b28; }
.ucl-route-block.out b,
.ucl-route-block.out strong { color: #b85d68; }
.ucl-route-block span,
.ucl-ranking-routes p { color: var(--muted); }
.ucl-playoff-band-list { display: grid; gap: .45rem; }
.ucl-playoff-band { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .45rem; padding: .6rem; border: 1px solid color-mix(in srgb, #d69b28 55%, var(--line)); border-radius: 10px; background: var(--panel); }
.ucl-playoff-band span { display: grid; gap: .12rem; }
.ucl-playoff-band span:nth-child(3) { text-align: right; }
.ucl-playoff-band small,
.ucl-playoff-band em { color: var(--muted); font-style: normal; }
.ucl-playoff-band > strong { grid-column: 1 / -1; color: #d69b28; font-size: .72rem; text-align: center; }
.ucl-ranking-routes p { margin-block: .15rem 0; line-height: 1.35; }

@media (max-width: 1000px) {
  .qualification-tie-card > header { grid-template-columns: 1fr; }
  .qualification-tie-summary strong,
  .qualification-tie-summary small { white-space: normal; }
  .ucl-league-phase-corpus { grid-template-columns: 1fr; }
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .app-shell {
  grid-template-rows: auto 132px minmax(0, 1fr);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .team-rail {
  grid-column: 1;
  grid-row: 2 / 4;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero {
  position: relative;
  isolation: isolate;
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
  margin: 12px 14px 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--club-primary, var(--accent)) 72%, #0b171b) 0 31%, transparent 31%),
    linear-gradient(150deg, transparent 0 55%, color-mix(in srgb, var(--club-accent, var(--accent)) 38%, transparent) 55% 76%, transparent 76%),
    linear-gradient(135deg, color-mix(in srgb, var(--club-secondary, var(--panel-strong)) 82%, #071115), color-mix(in srgb, var(--panel) 62%, var(--club-primary, var(--accent)) 38%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero[data-art-variant="1"] {
  background:
    linear-gradient(32deg, color-mix(in srgb, var(--club-primary) 72%, #0b171b) 0 28%, transparent 28%),
    linear-gradient(148deg, transparent 0 48%, color-mix(in srgb, var(--club-accent) 38%, transparent) 48% 69%, transparent 69%),
    linear-gradient(135deg, color-mix(in srgb, var(--club-secondary) 82%, #071115), color-mix(in srgb, var(--panel) 62%, var(--club-primary) 38%));
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero[data-art-variant="2"] {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--club-primary) 72%, #0b171b) 0 31%, transparent 31%),
    linear-gradient(45deg, transparent 0 53%, color-mix(in srgb, var(--club-accent) 38%, transparent) 53% 74%, transparent 74%),
    linear-gradient(135deg, color-mix(in srgb, var(--club-secondary) 82%, #071115), color-mix(in srgb, var(--panel) 62%, var(--club-primary) 38%));
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(124deg, transparent 0 42%, rgba(255,255,255,.16) 42% 53%, transparent 53%);
  pointer-events: none;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 100%;
  margin: 0;
  padding: 20px 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-title {
  display: contents;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-title > div {
  align-self: center;
  max-width: calc(50% - 34px);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-title h2 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: calc(25px * var(--ui-font-scale));
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0,0,0,.42);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-title .muted {
  color: rgba(255,255,255,.78);
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.32);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-flag {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  object-fit: contain;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  transform: translate(-50%, -50%);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-actions {
  position: absolute;
  right: 18px;
  top: 14px;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-research-link {
  border-color: rgba(255,255,255,.2);
  background: rgba(8,18,22,.7);
  color: #fff;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-chapter-tabs {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  background: rgba(8,18,22,.72);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-chapter-tabs .panel-tabs {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 3px;
  border: 0;
  background: transparent;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-chapter-tabs button,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-chapter-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,.74);
  font-weight: 900;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-chapter-tabs button.active {
  background: var(--accent);
  color: #fff;
}

/* In the light theme, every UCL action with the accent fill keeps the same
 * white high-contrast label as the league controls. */
html[data-theme="light"][data-environment="ucl2026"] :is(
  button.active,
  button.primary-action,
  .view-tabs button.active,
  .panel-tabs button.active,
  .segmented button.active,
  .match-tabs button.active,
  .tournament-tabs button.active,
  .match-open-button,
  .ucl-club-chapter-tabs button.active
) {
  color: #fff;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .squad-panel {
  grid-column: 2;
  grid-row: 3;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .stats-panel {
  grid-column: 3;
  grid-row: 3;
  padding-top: 12px;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .stats-panel > .panel-tabs {
  display: none;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .app-shell {
  grid-template-rows: auto minmax(0, 1fr);
}

@media (max-width: 1000px) {
  html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-hero .team-flag { left: 42%; }
  html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .ucl-club-chapter-tabs a { display: none; }
}

@media (max-width: 760px) {
  .qualification-leg-list { grid-template-columns: 1fr; }
}

.knockout-pairing-teams {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.knockout-pairing-teams strong {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.05;
}

.knockout-pairing-teams strong .team-flag-inline,
.match-teams strong .team-flag-inline {
  flex: 0 0 auto;
}

.tournament-team-mention,
.tournament-team-label {
  flex: 1 1 auto;
  min-width: 0;
}

.tournament-team-visible,
.tournament-team-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.knockout-pairing-teams em {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 18px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #e9eef2;
  color: var(--ink);
  font-size: calc(9px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.knockout-pairing small {
  grid-column: 1 / -1;
}

.phase-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.phase-toggle strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.phase-toggle em {
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 850;
}

.phase-arrow {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #eaf3f4;
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
}

.phase-toggle:hover .phase-arrow,
.phase-toggle:focus-visible .phase-arrow {
  background: var(--accent);
  color: #fff;
}

.group-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid #e6edf2;
  border-radius: 8px;
  overflow: visible;
}

.group-card[data-tooltip-kind="group-prediction"] {
  cursor: help;
}

.group-card:focus-visible,
.knockout-pairing:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.group-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  background: #f5f8fa;
}

.group-title span {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
}

.standings-list {
  display: grid;
  font-size: calc(12px * var(--ui-font-scale));
}

.group-seed-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(27px, 1fr));
  gap: 1px;
  padding: 6px;
  background: #fff;
}

.group-seed-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #f8fafb;
  font-size: calc(12px * var(--ui-font-scale));
}

.group-seed-row span {
  display: inline-grid;
  place-items: center;
  height: 18px;
  border-radius: 5px;
  background: #e9f0f2;
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 900;
}

.group-seed-row strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.group-seed-row em {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.standing-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px 28px 28px 30px 34px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 28px;
  padding: 0 6px;
  border-top: 1px solid #edf1f4;
}

.standing-row span {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.standing-row span:nth-child(2) {
  text-align: left;
}

.standing-head {
  min-height: 32px;
  background: #fff;
  font-weight: 900;
}

.standing-row em {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 18px;
  margin-right: 5px;
  border-radius: 5px;
  background: #e9f0f2;
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 900;
}

.standing-row.qualifies,
.group-seed-row.qualifies {
  background: #edf8f2;
}

.standing-row.third-watch,
.group-seed-row.third-watch {
  background: #fff8e6;
}

.standing-row.is-live,
.group-seed-row.is-live {
  position: relative;
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(22, 160, 165, 0.26);
}

.tournament-matches {
  display: flex;
  gap: 10px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 9px;
  scroll-snap-type: x proximity;
}

.tournament-day {
  display: grid;
  gap: 6px;
}

.tournament-day h3 {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 5px 2px;
  background: #fff;
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
}

.tournament-match-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 6px;
  flex: 0 0 clamp(290px, 24vw, 380px);
  width: clamp(290px, 24vw, 380px);
  min-height: 0;
  padding: 8px;
  border: 1px solid #dfe7ec;
  border-radius: 8px;
  background: #fbfcfd;
  scroll-snap-align: start;
  text-align: left;
}

.tournament-match-card.openable:hover {
  border-color: var(--accent);
  background: #eef8f6;
}

.tournament-match-card.live,
.knockout-pairing.live {
  border-color: rgba(22, 160, 165, 0.78);
  box-shadow: inset 4px 0 0 rgba(22, 160, 165, 0.9);
}

.tournament-match-card.placeholder {
  cursor: default;
}

.match-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.match-star-button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid #cfdae0;
  border-radius: 7px;
  background: #fff;
  color: #7a8790;
  font-size: calc(14px * var(--ui-font-scale));
  line-height: 1;
}

.match-star-button:hover,
.match-star-button:focus-visible,
.match-star-button.active {
  border-color: rgba(201, 146, 26, 0.95);
  background: #fff6d6;
  color: #9b6f0e;
}

.match-kicker,
.match-status,
.seed-candidates {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-status {
  flex-shrink: 0;
  color: var(--green);
}

.tournament-match-card.live .match-status {
  color: var(--accent-dark);
}

.match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.match-teams strong {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: calc(14px * var(--ui-font-scale));
  line-height: 1.08;
}

.match-teams em {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 21px;
  padding: 3px 7px;
  border-radius: 5px;
  background: #e9eef2;
  color: var(--ink);
  font-size: calc(11px * var(--ui-font-scale));
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.match-time-place {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.match-time-place strong {
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.2;
}

.venue-chip {
  width: min(100%, 260px);
  height: auto;
  min-height: 24px;
  padding: 3px 8px;
  border-color: #cbd8df;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.15;
  white-space: normal;
}

.venue-chip:hover {
  border-color: var(--accent);
  background: #eef8f6;
}

.match-route {
  display: grid;
  gap: 2px;
  min-height: 0;
}

.seed-candidates {
  font-size: calc(9px * var(--ui-font-scale));
  white-space: normal;
}

.match-card-actions {
  display: flex;
  justify-content: center;
}

.match-open-button {
  height: 28px;
  padding: 0 10px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: calc(11px * var(--ui-font-scale));
}

.match-open-button:disabled {
  border-color: #d6e0e6;
  background: #eef2f5;
  color: var(--muted);
  cursor: default;
}

.tournament-bracket {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 14px;
}

.bracket-column {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #e4ebef;
  border-radius: 8px;
  background: #f7fafb;
}

.bracket-column h3 {
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #e4ebef;
  font-size: calc(13px * var(--ui-font-scale));
}

.bracket-pairings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.tournament-match-card.compact {
  min-height: 0;
}

.tournament-match-card.compact .seed-candidates {
  white-space: normal;
}

.tournament-stats {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.tournament-stat-card {
  position: relative;
  grid-column: span 3;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tournament-stat-table-card {
  grid-column: span 4;
}

.tournament-goal-timing-card {
  grid-column: 1 / -1;
}

.tournament-goal-timing-card .goal-timing {
  padding: 8px 9px 9px;
}

.tournament-stat-card h3 {
  margin: 0;
  padding: 7px 9px;
  border-bottom: 1px solid #b9cbd2;
  border-left: 5px solid var(--accent);
  border-radius: 7px 7px 0 0;
  background: #edf7f5;
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  line-height: 1.05;
}

.tournament-stat-card ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tournament-stat-card li {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid #edf0f2;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 780;
  line-height: 1.12;
}

.tournament-stat-card li:last-child {
  border-bottom: 0;
}

.tournament-stat-card li.stat-list-empty {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.stat-list-rank {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.stat-list-row {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.stat-list-row > strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stat-list-row > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: calc(10px * var(--ui-font-scale));
}

.stat-list-row em,
.stat-list-row b {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stat-list-row em {
  font-style: normal;
}

.stat-list-row b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  text-align: right;
}

.tournament-stat-table {
  display: grid;
  min-width: 0;
}

.tournament-stat-table-row {
  display: grid;
  grid-template-columns: var(--stat-cols);
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 8px;
  border-bottom: 1px solid #edf0f2;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 780;
  line-height: 1.12;
}

.tournament-stat-table-row:last-child {
  border-bottom: 0;
}

.tournament-stat-table-head {
  padding-top: 5px;
  padding-bottom: 5px;
  background: #f7fafb;
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.tournament-stat-table-row > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tournament-stat-table-row .stat-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.tournament-stat-table-row .stat-rank {
  color: var(--accent-dark);
  text-align: left;
}

.tournament-stat-table-row .stat-main {
  font-weight: 900;
}

.tournament-stat-table-row .stat-yellow {
  color: #8a690c;
}

.tournament-stat-table-row .stat-yellow-red {
  color: #b46b00;
}

.tournament-stat-table-row .stat-red {
  color: var(--red);
}

.stat-table-scorers {
  --stat-cols: 26px minmax(84px, 1.35fr) minmax(58px, 0.8fr) 28px 28px;
}

.stat-table-team-cards {
  --stat-cols: 26px minmax(86px, 1fr) 34px 26px 30px 26px;
}

.stat-table-player-cards {
  --stat-cols: 26px minmax(74px, 1.2fr) minmax(50px, 0.7fr) 34px 26px 30px 26px;
}

.tournament-stat-empty {
  padding: 7px 8px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
}

.rules-view {
  display: grid;
  gap: 12px;
}

.rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.rules-source-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.rules-source-links a {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #cfe0e5;
  border-radius: 999px;
  background: #f8fbfb;
  color: var(--accent-dark);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 950;
  text-decoration: none;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rules-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.rules-card-alert {
  border-color: rgba(0, 109, 119, 0.24);
  background: linear-gradient(135deg, #eef8f7, #fff);
}

.rules-card span {
  color: var(--accent-dark);
  font-size: calc(10px * var(--ui-font-scale));
  font-weight: 950;
  text-transform: uppercase;
}

.rules-card h3 {
  margin: 0;
  font-size: calc(18px * var(--ui-font-scale));
  line-height: 1.1;
}

.rules-card ul,
.rules-card ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.rules-card li {
  color: #293747;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 760;
  line-height: 1.28;
}

.rules-card li strong {
  color: var(--ink);
  font-weight: 950;
}

:root[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
  border-color: var(--line);
  background: #17222b;
  color: var(--ink);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #71838f;
}

:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] select:hover,
:root[data-theme="dark"] input[type="search"]:hover {
  border-color: #486270;
}

:root[data-theme="dark"] .menu-section > button,
:root[data-theme="dark"] .menu-action-row > button {
  border-color: var(--line);
  background: #1b2832;
  color: var(--ink);
}

:root[data-theme="dark"] .menu-section > button:hover,
:root[data-theme="dark"] .menu-action-row > button:hover {
  border-color: var(--accent-soft);
  background: rgba(113, 215, 213, 0.14);
  color: var(--accent-soft);
}

:root[data-theme="dark"] .menu-info {
  border-color: var(--line);
  background: #1b2832;
  color: var(--muted);
}

:root[data-theme="dark"] .menu-info:hover,
:root[data-theme="dark"] .menu-info:focus-visible {
  border-color: var(--accent-soft);
  color: var(--accent-soft);
}

:root[data-theme="dark"] .menu-info::after {
  border-color: var(--line);
  background: #101922;
  color: var(--ink);
}

:root[data-theme="dark"] .refresh-step-row {
  border-color: var(--line);
  background: #17222b;
}

:root[data-theme="dark"] .refresh-step-icon {
  background: #243540;
  color: var(--muted);
}

:root[data-theme="dark"] .refresh-step-row.is-running .refresh-step-icon {
  background: rgba(255, 210, 79, 0.22);
  color: #ffd66b;
}

:root[data-theme="dark"] .refresh-step-row.is-done .refresh-step-icon {
  background: rgba(73, 201, 137, 0.18);
  color: #79dfa8;
}

:root[data-theme="dark"] .refresh-step-row.is-error .refresh-step-icon {
  background: rgba(232, 91, 105, 0.18);
  color: #ff8a95;
}

:root[data-theme="dark"] .refresh-step-bar {
  background: #243540;
}

:root[data-theme="dark"] button.active,
:root[data-theme="dark"] button.primary-action,
:root[data-theme="dark"] .view-tabs button.active,
:root[data-theme="dark"] .panel-tabs button.active,
:root[data-theme="dark"] .segmented button.active,
:root[data-theme="dark"] .match-tabs button.active,
:root[data-theme="dark"] .tournament-tabs button.active,
:root[data-theme="dark"] .match-open-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #061316;
}

:root[data-theme="dark"] .print-choice-dialog p:not(.print-kicker) {
  color: var(--ink);
}

:root[data-theme="dark"] .print-choice-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #061316;
}

:root[data-theme="dark"] .print-choice-actions button:not(.primary) {
  color: var(--ink);
}

:root[data-theme="dark"] a,
:root[data-theme="dark"] .sort-link-small,
:root[data-theme="dark"] .number-cell,
:root[data-theme="dark"] .trend-same,
:root[data-theme="dark"] .user-note-context,
:root[data-theme="dark"] .embedded-note-title,
:root[data-theme="dark"] .referee-flag::before,
:root[data-theme="dark"] .referee-avatar,
:root[data-theme="dark"] .referee-role-badge,
:root[data-theme="dark"] .referee-detail-avatar,
:root[data-theme="dark"] .venue-chip,
:root[data-theme="dark"] .rules-card span,
:root[data-theme="dark"] .rules-source-links a {
  color: var(--accent-dark);
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .view-tabs,
:root[data-theme="dark"] .menu-panel,
:root[data-theme="dark"] .menu-section,
:root[data-theme="dark"] .menu-range,
:root[data-theme="dark"] .team-rail,
:root[data-theme="dark"] .rail-search,
:root[data-theme="dark"] .panel-tabs,
:root[data-theme="dark"] .segmented,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .side-section,
:root[data-theme="dark"] .stat-tile,
:root[data-theme="dark"] .menu-data-stats,
:root[data-theme="dark"] .source-link,
:root[data-theme="dark"] .record-expand-row,
:root[data-theme="dark"] .weather-box,
:root[data-theme="dark"] .venue-story,
:root[data-theme="dark"] .venue-story div,
:root[data-theme="dark"] .user-note-entry,
:root[data-theme="dark"] .user-note-new,
:root[data-theme="dark"] .user-note-empty,
:root[data-theme="dark"] .user-note-kind,
:root[data-theme="dark"] .user-note-drag:hover,
:root[data-theme="dark"] .embedded-note-section,
:root[data-theme="dark"] .refresh-dialog,
:root[data-theme="dark"] .print-choice-dialog,
:root[data-theme="dark"] .stats-dialog,
:root[data-theme="dark"] .source-health-row,
:root[data-theme="dark"] .refresh-log-row,
:root[data-theme="dark"] .venue-dialog,
:root[data-theme="dark"] .card-dialog-card,
:root[data-theme="dark"] .match-head,
:root[data-theme="dark"] .match-timeline,
:root[data-theme="dark"] .match-context,
:root[data-theme="dark"] .match-clock,
:root[data-theme="dark"] .match-controls,
:root[data-theme="dark"] .match-tabs,
:root[data-theme="dark"] .tournament-command,
:root[data-theme="dark"] .match-team-card,
:root[data-theme="dark"] .lineup-card,
:root[data-theme="dark"] .bench-card,
:root[data-theme="dark"] .substitution-box,
:root[data-theme="dark"] .match-stat-grid div,
:root[data-theme="dark"] .tournament-header,
:root[data-theme="dark"] .tournament-tools,
:root[data-theme="dark"] .tournament-section,
:root[data-theme="dark"] .tournament-tabs,
:root[data-theme="dark"] .tournament-stat-card,
:root[data-theme="dark"] .bracket-column,
:root[data-theme="dark"] .rules-header,
:root[data-theme="dark"] .rules-card,
:root[data-theme="dark"] .rules-source-links a {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

:root[data-theme="dark"] .squad-panel,
:root[data-theme="dark"] .stats-panel,
:root[data-theme="dark"] .match-view,
:root[data-theme="dark"] .tournament-view,
:root[data-theme="dark"] .rules-view {
  background: var(--bg);
}

:root[data-theme="dark"] .user-note-dialog {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

:root[data-theme="dark"] .match-clock-adjust-dialog {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

:root[data-theme="dark"] .user-note-dialog-head {
  border-color: var(--line);
  background: #1b2832;
}

:root[data-theme="dark"] .user-note-dialog-head h3 {
  color: var(--ink);
}

:root[data-theme="dark"] .menu-toggle:hover,
:root[data-theme="dark"] .menu-section summary:hover,
:root[data-theme="dark"] .team-button:hover,
:root[data-theme="dark"] .team-button.active,
:root[data-theme="dark"] .referee-group-button,
:root[data-theme="dark"] .rail-referee-icon,
:root[data-theme="dark"] .history-row,
:root[data-theme="dark"] .history-mini-row,
:root[data-theme="dark"] .record-player-row,
:root[data-theme="dark"] .detail-chip,
:root[data-theme="dark"] .detail-market,
:root[data-theme="dark"] .career-club,
:root[data-theme="dark"] .career-more,
:root[data-theme="dark"] .career-chain-compact .career-club,
:root[data-theme="dark"] .career-chain-compact .career-more,
:root[data-theme="dark"] .achievement-chip,
:root[data-theme="dark"] .achievement-more,
:root[data-theme="dark"] .weather-metric,
:root[data-theme="dark"] .weather-current,
:root[data-theme="dark"] .note-line,
:root[data-theme="dark"] .kit-selector,
:root[data-theme="dark"] .match-score,
:root[data-theme="dark"] .goal-chip,
:root[data-theme="dark"] .timeline-sync-status,
:root[data-theme="dark"] .match-clock-readout,
:root[data-theme="dark"] .match-clock-actions button,
:root[data-theme="dark"] .match-clock-adjust-head button,
:root[data-theme="dark"] .match-clock-adjust-actions button,
:root[data-theme="dark"] .match-clock-adjust-dialog input[type="text"],
:root[data-theme="dark"] .match-clock-adjust-dialog select,
:root[data-theme="dark"] .goal-control input,
:root[data-theme="dark"] .goal-control select,
:root[data-theme="dark"] .goal-control button,
:root[data-theme="dark"] .goal-penalty-toggle,
:root[data-theme="dark"] .timeline-status,
:root[data-theme="dark"] .timeline-match-button,
:root[data-theme="dark"] .timeline-marker,
:root[data-theme="dark"] .timeline-empty,
:root[data-theme="dark"] .match-context-details > span,
:root[data-theme="dark"] .match-meta-link,
:root[data-theme="dark"] .match-context-details em,
:root[data-theme="dark"] .tournament-context-live span,
:root[data-theme="dark"] .match-teams em,
:root[data-theme="dark"] .time-stack em,
:root[data-theme="dark"] .venue-chip,
:root[data-theme="dark"] .group-card,
:root[data-theme="dark"] .group-title,
:root[data-theme="dark"] .group-seed-row,
:root[data-theme="dark"] .standing-head,
:root[data-theme="dark"] .knockout-overview-stage h3,
:root[data-theme="dark"] .knockout-pairing,
:root[data-theme="dark"] .knockout-pairing-teams em,
:root[data-theme="dark"] .match-star-button,
:root[data-theme="dark"] .tournament-match-card,
:root[data-theme="dark"] .tournament-day h3 {
  border-color: var(--line);
  background: #1b2832;
  color: var(--ink);
}

:root[data-theme="dark"] .match-clock-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #061316;
}

:root[data-theme="dark"] .match-meta-icon-chip.match-heatmap-toggle.is-active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent), #129da6);
  color: #061316;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 3px rgba(113, 215, 213, 0.18);
}

:root[data-theme="dark"] .match-meta-icon-chip.match-clock-toggle.is-active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent), #129da6);
  color: #061316;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 3px rgba(113, 215, 213, 0.18);
}

:root[data-theme="dark"] .match-clock-adjust-actions button:last-child {
  border-color: var(--accent);
  background: var(--accent);
  color: #061316;
}

:root[data-theme="dark"] .knockout-pairing.openable:hover,
:root[data-theme="dark"] .match-star-button:hover,
:root[data-theme="dark"] .match-star-button:focus-visible,
:root[data-theme="dark"] .match-star-button.active {
  border-color: rgba(233, 190, 75, 0.95);
  background: #3a321c;
  color: #f5cf57;
}

:root[data-theme="dark"] .phase-arrow {
  background: #22333e;
  color: var(--accent-soft);
}

:root[data-theme="dark"] .phase-toggle:hover .phase-arrow,
:root[data-theme="dark"] .phase-toggle:focus-visible .phase-arrow {
  background: var(--accent);
  color: #001316;
}

:root[data-theme="dark"] .knockout-pairing.starred,
:root[data-theme="dark"] .tournament-match-card.starred {
  border-color: rgba(233, 190, 75, 0.78);
  box-shadow: inset 4px 0 0 rgba(233, 190, 75, 0.82);
}

:root[data-theme="dark"] .tournament-match-card.live,
:root[data-theme="dark"] .knockout-pairing.live {
  border-color: rgba(110, 217, 218, 0.75);
  box-shadow: inset 4px 0 0 rgba(110, 217, 218, 0.85);
}

:root[data-theme="dark"] .tournament-match-card.live .match-status {
  color: var(--accent-soft);
}

:root[data-theme="dark"] .standing-row.is-live,
:root[data-theme="dark"] .group-seed-row.is-live {
  background: rgba(22, 160, 165, 0.16);
  box-shadow: inset 3px 0 0 var(--accent-soft), inset 0 0 0 1px rgba(110, 217, 218, 0.22);
}

:root[data-theme="dark"] .match-team-inline strong,
:root[data-theme="dark"] .tournament-context-meta strong,
:root[data-theme="dark"] .tournament-context-main strong,
:root[data-theme="dark"] .kit-label,
:root[data-theme="dark"] .match-context-meta > span,
:root[data-theme="dark"] .tournament-context-meta > span,
:root[data-theme="dark"] .match-context-meta .time-stack,
:root[data-theme="dark"] .match-context-details > span,
:root[data-theme="dark"] .match-meta-link,
:root[data-theme="dark"] .goal-control input,
:root[data-theme="dark"] .goal-control select,
:root[data-theme="dark"] .goal-control button,
:root[data-theme="dark"] .goal-penalty-toggle,
:root[data-theme="dark"] .timeline-marker-minute,
:root[data-theme="dark"] .timeline-match-score {
  color: var(--ink);
}

:root[data-theme="dark"] .timeline-match-button.active,
:root[data-theme="dark"] .timeline-status-done {
  border-color: rgba(113, 215, 213, 0.45);
  background: rgba(113, 215, 213, 0.16);
  color: var(--accent-soft);
}

:root[data-theme="dark"] .timeline-status-live {
  background: rgba(67, 186, 112, 0.2);
  color: #7ce39f;
}

:root[data-theme="dark"] .timeline-source,
:root[data-theme="dark"] .timeline-match-button span,
:root[data-theme="dark"] .timeline-marker em {
  color: var(--muted);
}

:root[data-theme="dark"] .timeline-marker-team {
  color: var(--accent-soft) !important;
}

:root[data-theme="dark"] .timeline-match-button strong,
:root[data-theme="dark"] .timeline-marker strong {
  color: #f2f7f9;
}

:root[data-theme="dark"] .timeline-match-score,
:root[data-theme="dark"] .timeline-marker-minute {
  border-color: #405460;
  background: #24323c;
}

:root[data-theme="dark"] .timeline-match-button.timeline-alert-goal span,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-goal strong,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-goal em,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-goal .timeline-match-score,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-red span,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-red strong,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-red em,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-red .timeline-match-score {
  color: inherit;
}

:root[data-theme="dark"] .timeline-match-button.timeline-alert-goal .timeline-match-score,
:root[data-theme="dark"] .timeline-match-button.timeline-alert-red .timeline-match-score {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .timeline-symbol-goal {
  background: url("assets/timeline-goal.png") center / contain no-repeat;
}

:root[data-theme="dark"] .timeline-symbol-shootout {
  background: rgba(83, 163, 207, 0.22);
  color: #94d7ff;
  border-color: rgba(148, 215, 255, 0.45);
}

:root[data-theme="dark"] .timeline-symbol-sub {
  background: rgba(83, 163, 207, 0.22);
  color: #94d7ff;
}

:root[data-theme="dark"] .timeline-symbol-var {
  background: rgba(153, 121, 224, 0.22);
  color: #d2c0ff;
}

:root[data-theme="dark"] .timeline-symbol-whistle,
:root[data-theme="dark"] .timeline-symbol-info {
  background: rgba(113, 215, 213, 0.14);
  color: var(--accent-soft);
}

:root[data-theme="dark"] .timeline-symbol-whistle {
  background: url("assets/timeline-whistle.png") center / contain no-repeat;
}

:root[data-theme="dark"] .view-tabs {
  box-shadow: inset 0 0 0 1px rgba(113, 215, 213, 0.16);
}

:root[data-theme="dark"] .view-tabs button:not(.active) {
  color: var(--ink);
}

:root[data-theme="dark"] .view-tabs button:not(.active):hover {
  background: #1b2832;
}

:root[data-theme="dark"] .view-tabs span,
:root[data-theme="dark"] .match-context-details em {
  color: var(--accent-dark);
}

:root[data-theme="dark"] .goal-empty {
  color: var(--muted);
}

:root[data-theme="dark"] .goal-chip {
  color: var(--accent-dark);
}

:root[data-theme="dark"] .match-tabs button {
  color: var(--ink);
}

:root[data-theme="dark"] .match-tabs button:not(.active):hover,
:root[data-theme="dark"] .tournament-tabs button:not(.active):hover {
  border-color: var(--line);
  background: #1b2832;
}

:root[data-theme="dark"] .tournament-tabs button {
  color: var(--ink);
}

:root[data-theme="dark"] .team-button.active {
  border-color: rgba(113, 215, 213, 0.4);
  background: #17343b;
}

:root[data-theme="dark"] .kit-selector.has-kit-image .kit-shirt {
  background-color: #eef2f3;
  background-blend-mode: normal;
}

:root[data-theme="dark"] .kit-shirt {
  border-color: #47606c;
  box-shadow: inset 0 0 0 1px rgba(237, 244, 247, 0.12);
}

:root[data-theme="dark"] .kit-selector.has-kit-image .kit-shirt::after {
  opacity: 0;
}

:root[data-theme="dark"] .kit-tooltip-thumb,
:root[data-theme="dark"] .kit-tooltip-image,
:root[data-theme="dark"] .kit-tooltip-fallback {
  background-color: #16242d;
}

:root[data-theme="dark"] .kit-tooltip-image {
  border-color: #47606c;
}

:root[data-theme="dark"] .pronunciation-play {
  border-color: rgba(113, 215, 213, 0.34);
  background: #24323c;
  color: var(--accent-dark);
}

:root[data-theme="dark"] .tooltip-pronunciation-strip .pronunciation-play {
  border-color: #93c9ca;
  background: #f2fbfa;
  color: #063f47;
}

:root[data-theme="dark"] .pronunciation-play:hover {
  background: #1d3840;
}

:root[data-theme="dark"] .tooltip-pronunciation-strip .pronunciation-play:hover {
  background: #cfeeed;
  color: #063f47;
}

:root[data-theme="dark"] .pronunciation-play.is-playing {
  background: var(--accent);
  color: #061316;
}

:root[data-theme="dark"] .referee-avatar,
:root[data-theme="dark"] .referee-role-badge,
:root[data-theme="dark"] .referee-detail-avatar {
  border-color: rgba(113, 215, 213, 0.34);
  background: #24323c;
  color: var(--accent-dark);
}

:root[data-theme="dark"] .user-note-new textarea:disabled {
  background: #111a21;
  color: var(--muted);
}

:root[data-theme="dark"] .user-note-entry.editing {
  background: rgba(22, 160, 165, 0.12);
}

:root[data-theme="dark"] .rules-card li {
  color: #b7c8d2;
}

:root[data-theme="dark"] .rules-card h3 {
  color: var(--ink);
}

:root[data-theme="dark"] .rules-card li strong {
  color: #f2f7f9;
}

:root[data-theme="dark"] .rules-card li::marker {
  color: var(--accent-dark);
}

:root[data-theme="dark"] .squad-table th {
  background: var(--panel-strong);
  color: #b7c8d2;
}

:root[data-theme="dark"] .squad-table tbody tr.position-goalkeeper {
  --position-bg: #13293a;
}

:root[data-theme="dark"] .squad-table tbody tr.position-defense {
  --position-bg: #321d23;
}

:root[data-theme="dark"] .squad-table tbody tr.position-midfield {
  --position-bg: #312818;
}

:root[data-theme="dark"] .squad-table tbody tr.position-attack {
  --position-bg: #182b22;
}

:root[data-theme="dark"] .squad-table tbody tr.position-unknown,
:root[data-theme="dark"] .squad-table tbody tr.position-coach,
:root[data-theme="dark"] .squad-table tbody tr.position-referee,
:root[data-theme="dark"] .squad-table tbody tr.referee-role-assistant,
:root[data-theme="dark"] .squad-table tbody tr.referee-role-fourth {
  --position-bg: #1a242c;
}

:root[data-theme="dark"] .squad-table tbody tr.referee-role-var {
  --position-bg: #241f31;
}

:root[data-theme="dark"] .squad-table tbody tr:hover,
:root[data-theme="dark"] .squad-table tbody tr.selected {
  background: color-mix(in srgb, var(--position-bg, #1a242c) 68%, var(--accent) 32%);
}

:root[data-theme="dark"] .team-button img,
:root[data-theme="dark"] .team-flag,
:root[data-theme="dark"] .match-context-teams img,
:root[data-theme="dark"] .match-teams img,
:root[data-theme="dark"] .team-flag-inline {
  border-color: #405460;
  background: #eef2f3;
}

:root[data-theme="dark"] .menu-data-stats .data-stat-ok {
  background: rgba(97, 197, 142, 0.14);
}

:root[data-theme="dark"] .menu-data-stats .data-stat-warn,
:root[data-theme="dark"] .record-player-row.active,
:root[data-theme="dark"] .note-card.note-live,
:root[data-theme="dark"] .standing-row.third-watch,
:root[data-theme="dark"] .group-seed-row.third-watch {
  background: rgba(212, 168, 58, 0.14);
}

:root[data-theme="dark"] .menu-data-stats .data-stat-neutral {
  background: rgba(156, 173, 184, 0.1);
}

:root[data-theme="dark"] .watchdog-panel {
  border-color: var(--line);
  background: #18232b;
}

:root[data-theme="dark"] .watchdog-status-badge {
  background: rgba(97, 197, 142, 0.16);
  color: #87dcad;
}

:root[data-theme="dark"] .watchdog-warn {
  border-color: rgba(212, 168, 58, 0.5);
  background: rgba(212, 168, 58, 0.12);
}

:root[data-theme="dark"] .watchdog-error {
  border-color: rgba(238, 116, 116, 0.55);
  background: rgba(238, 116, 116, 0.1);
}

:root[data-theme="dark"] .watchdog-warn .watchdog-status-badge {
  background: rgba(212, 168, 58, 0.16);
  color: #f0cf5c;
}

:root[data-theme="dark"] .watchdog-error .watchdog-status-badge {
  background: rgba(238, 116, 116, 0.16);
  color: #ff9ca0;
}

:root[data-theme="dark"] .watchdog-item {
  border-color: var(--line);
  background: #1c2932;
}

:root[data-theme="dark"] .source-health-meta em {
  background: #24323c;
  color: var(--ink);
}

:root[data-theme="dark"] .source-health-ok .source-health-meta em {
  background: rgba(97, 197, 142, 0.16);
  color: #87dcad;
}

:root[data-theme="dark"] .source-health-warn .source-health-meta em {
  background: rgba(212, 168, 58, 0.16);
  color: #f0cf5c;
}

:root[data-theme="dark"] .source-health-error .source-health-meta em {
  background: rgba(238, 116, 116, 0.16);
  color: #ff9ca0;
}

:root[data-theme="dark"] .tournament-stat-table-row {
  border-color: var(--line);
}

:root[data-theme="dark"] .tournament-stat-table-head {
  background: #1b2832;
  color: var(--muted);
}

:root[data-theme="dark"] .tournament-stat-table-row .stat-yellow {
  color: #f0cf5c;
}

:root[data-theme="dark"] .tournament-stat-table-row .stat-yellow-red {
  color: #f3a44f;
}

:root[data-theme="dark"] .standing-row.qualifies,
:root[data-theme="dark"] .group-seed-row.qualifies,
:root[data-theme="dark"] .note-card.note-primary,
:root[data-theme="dark"] .tournament-match-card.openable:hover,
:root[data-theme="dark"] .venue-chip:hover {
  background: rgba(22, 160, 165, 0.13);
}

:root[data-theme="dark"] .standing-row.is-live,
:root[data-theme="dark"] .group-seed-row.is-live {
  background: rgba(22, 160, 165, 0.2);
}

:root[data-theme="dark"] .note-card.note-alert {
  background: rgba(238, 116, 116, 0.13);
}

:root[data-theme="dark"] .rules-card-alert {
  background: linear-gradient(135deg, rgba(22, 160, 165, 0.14), var(--panel));
}

:root[data-theme="dark"] .weather-hour,
:root[data-theme="dark"] .weather-hour.weather-cloud,
:root[data-theme="dark"] .weather-hour.weather-fog,
:root[data-theme="dark"] .weather-hour.weather-snow,
:root[data-theme="dark"] .weather-hour.weather-rain,
:root[data-theme="dark"] .weather-hour.weather-storm,
:root[data-theme="dark"] .weather-hour.weather-clear {
  background: #1b2832;
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .bar-track,
:root[data-theme="dark"] .match-open-button:disabled,
:root[data-theme="dark"] .pitch-player .slot-label,
:root[data-theme="dark"] .empty-slot .slot-label,
:root[data-theme="dark"] .bench-pos,
:root[data-theme="dark"] .bench-goal,
:root[data-theme="dark"] .referee-role-badge {
  background: #24323c;
  color: var(--ink);
}

:root[data-theme="dark"] .bench-goal.own-goal,
:root[data-theme="dark"] .pitch-goal-badge.own-goal {
  border-color: rgba(238, 84, 84, 0.66);
  background: #f8fbfb;
  color: var(--red);
}

:root[data-theme="dark"] .refresh-overlay,
:root[data-theme="dark"] .venue-overlay {
  background: rgba(0, 0, 0, 0.62);
}

:root[data-theme="dark"] .stats-overlay {
  background: rgba(0, 0, 0, 0.62);
}

:root[data-theme="dark"] .menu-section summary {
  color: var(--accent);
}

:root[data-theme="dark"] .menu-data-stats {
  background: transparent;
}

:root[data-theme="dark"] .tooltip-card {
  border-color: #314450;
  background: #121b22;
}

@media (max-width: 1180px) {
  .match-view {
    --match-board-height: max(310px, calc(100vh - 190px));
    --match-board-height: max(310px, calc(100dvh - 190px));
  }

  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .stats-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 14px 14px;
    overflow: visible;
  }

  .side-section {
    margin: 0;
  }

  .match-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .match-board {
    grid-template-columns: 190px minmax(320px, 1fr) 190px;
  }

  .football-pitch {
    min-height: 0;
  }

  .pitch-slot {
    width: 72px;
  }

  .tournament-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tournament-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tournament-stat-card,
  .tournament-stat-table-card {
    grid-column: span 1;
  }

  .view-tabs button {
    min-width: 100px;
  }
}

@media (max-width: 940px) {
  .tournament-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  body {
    overflow: auto;
  }

  .menu-data-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tournamentSummary.quick-grid {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    width: 100%;
  }

  #tournamentSummary.quick-grid .stat-tile:last-child {
    min-width: 0;
  }

  .source-health-row,
  .refresh-log-row {
    grid-template-columns: 1fr;
  }

  .source-health-meta {
    justify-items: start;
  }

  .stats-dialog {
    max-height: calc(100dvh - 28px);
  }

  .weather-metrics,
  .weather-hours {
    grid-template-columns: 1fr;
  }

  .view-tabs {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .tournament-command {
    grid-template-columns: 1fr;
  }

  .tournament-context-meta,
  .tournament-context-main,
  .tournament-context-live,
  .tournament-tabs {
    grid-column: 1;
    grid-row: auto;
  }

  .tournament-context-meta,
  .tournament-context-main {
    text-align: center;
  }

  .tournament-context-live {
    flex-wrap: wrap;
    justify-content: center;
  }

  .tournament-context-live span {
    max-width: 100%;
  }

  .tournament-tabs {
    justify-self: center;
    width: min(150px, 100%);
  }

  .tooltip-body.has-user-notes {
    grid-template-columns: 1fr;
  }

  .app-tooltip .app-notes-component {
    max-height: min(360px, calc(100dvh - 190px));
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .app-shell {
    display: block;
    height: auto;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .brand-block {
    min-width: 0;
  }

  .team-rail {
    max-height: 230px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #quickGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .stats-panel {
    display: block;
    padding: 0 14px 14px;
  }

  .side-section {
    margin-bottom: 12px;
  }

  .match-controls,
  .match-comparison,
  .match-board,
  .match-tab-panel[data-match-panel="facts"],
  .tournament-tools,
  .tournament-layout,
  .tournament-stats,
  .tournament-match-card {
    grid-template-columns: 1fr;
  }

  .match-head {
    grid-template-columns: 1fr;
  }

  .match-context-meta,
  .match-context-teams,
  .match-goal-controls,
  .match-clock-panel,
  .match-tabs {
    grid-column: 1;
    grid-row: auto;
  }

  .match-goal-controls,
  .match-clock-panel {
    grid-template-columns: 1fr;
  }

  .match-clock {
    padding: 4px 6px;
  }

  .match-clock-actions {
    position: absolute;
    right: 5px;
    bottom: 4px;
    justify-content: center;
    transform: none;
    flex-wrap: nowrap;
  }

  .match-context-meta {
    text-align: center;
  }

  .match-board {
    grid-template-rows: auto;
    height: auto;
  }

  .match-board.horizontal-match-center,
  .match-board.horizontal-match-center.reveal-left,
  .match-board.horizontal-match-center.reveal-right,
  .match-board.horizontal-match-center.reveal-left.reveal-right {
    grid-template-columns: 1fr;
  }

  .match-board.horizontal-match-center .bench-card > * {
    opacity: 1;
    pointer-events: auto;
  }

  .match-board.horizontal-match-center .bench-card::after {
    display: none;
  }

  .tournament-groups {
    grid-template-columns: 1fr;
  }

  .rules-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .rules-source-links {
    justify-content: flex-start;
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .football-pitch {
    height: 430px;
    min-height: 0;
  }

  .pitch-slot {
    width: 72px;
  }

  .lineup-preview {
    grid-template-columns: 1fr;
  }

  .venue-visuals {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .menu-data-stats {
    grid-template-columns: 1fr;
  }
}

@media print {
  body {
    overflow: visible;
    background: #fff;
  }

  .topbar,
  .team-rail,
  .squad-tools,
  .team-actions,
  .refresh-overlay,
  .stats-overlay,
  .venue-overlay {
    display: none !important;
  }

  .app-shell {
    display: block;
    height: auto;
  }

  .squad-panel,
  .stats-panel {
    padding: 0;
    overflow: visible;
  }

  .stats-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 10px;
  }

  .table-wrap,
  .side-section,
  .stat-tile {
    border-color: #aaa;
    box-shadow: none;
  }

  .squad-table {
    min-width: 0;
  }
}

/* Shared rich-tooltip theme contract. Keep the complete hover, including the
   reusable notes component, on the active application color scheme. */
.floating-player-tooltip,
.app-tooltip {
  --tooltip-surface: var(--panel);
  --tooltip-surface-soft: var(--panel-strong);
  --tooltip-ink: var(--ink);
  --tooltip-muted: var(--muted);
  --tooltip-line: var(--line);
  --tooltip-chip: color-mix(in srgb, var(--accent) 11%, var(--panel));
  --tooltip-chip-strong: color-mix(in srgb, var(--accent) 18%, var(--panel));
  --text: var(--ink);
  --accent-strong: var(--accent-dark);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .tooltip-card,
.app-tooltip .tooltip-card {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface);
  color: var(--tooltip-ink);
  box-shadow: var(--shadow);
}

.floating-player-tooltip .referee-tooltip-team > div,
.app-tooltip .referee-tooltip-team > div {
  background: var(--tooltip-surface-soft);
}

.floating-player-tooltip .referee-tooltip-team span,
.app-tooltip .referee-tooltip-team span {
  background: var(--tooltip-chip-strong);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .referee-tooltip-team strong,
.app-tooltip .referee-tooltip-team strong {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .referee-tooltip-team em,
.floating-player-tooltip .referee-tooltip-team .is-unassigned strong,
.app-tooltip .referee-tooltip-team em,
.app-tooltip .referee-tooltip-team .is-unassigned strong {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .flag-tooltip-card .tooltip-long-strip strong,
.floating-player-tooltip .flag-tooltip-card .team-nickname-chip b,
.floating-player-tooltip .flag-tooltip-card .team-anthem-strip b,
.app-tooltip .flag-tooltip-card .tooltip-long-strip strong,
.app-tooltip .flag-tooltip-card .team-nickname-chip b,
.app-tooltip .flag-tooltip-card .team-anthem-strip b {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .flag-tooltip-card .team-nickname-chip small,
.floating-player-tooltip .flag-tooltip-card .team-anthem-strip small,
.floating-player-tooltip .flag-tooltip-card .team-anthem-strip em,
.floating-player-tooltip .flag-tooltip-card .team-anthem-strip em span,
.app-tooltip .flag-tooltip-card .team-nickname-chip small,
.app-tooltip .flag-tooltip-card .team-anthem-strip small,
.app-tooltip .flag-tooltip-card .team-anthem-strip em,
.app-tooltip .flag-tooltip-card .team-anthem-strip em span {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .flag-tooltip-card .team-nickname-chip,
.app-tooltip .flag-tooltip-card .team-nickname-chip {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--tooltip-line));
  background: var(--tooltip-chip);
}

.floating-player-tooltip .team-tooltip-card .team-nickname-chip b,
.floating-player-tooltip .team-tooltip-card .team-anthem-strip b,
.app-tooltip .team-tooltip-card .team-nickname-chip b,
.app-tooltip .team-tooltip-card .team-anthem-strip b {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .team-tooltip-card .team-nickname-chip small,
.floating-player-tooltip .team-tooltip-card .team-anthem-strip small,
.floating-player-tooltip .team-tooltip-card .team-anthem-strip em,
.floating-player-tooltip .team-tooltip-card .team-anthem-strip em span,
.app-tooltip .team-tooltip-card .team-nickname-chip small,
.app-tooltip .team-tooltip-card .team-anthem-strip small,
.app-tooltip .team-tooltip-card .team-anthem-strip em,
.app-tooltip .team-tooltip-card .team-anthem-strip em span {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .team-tooltip-card .team-nickname-chip,
.app-tooltip .team-tooltip-card .team-nickname-chip {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--tooltip-line));
  background: var(--tooltip-chip);
}

.floating-player-tooltip .team-tooltip-card .form-match-card,
.app-tooltip .team-tooltip-card .form-match-card {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface-soft);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .team-tooltip-card .form-match-bubble,
.floating-player-tooltip .team-tooltip-card .form-result,
.app-tooltip .team-tooltip-card .form-match-bubble,
.app-tooltip .team-tooltip-card .form-result {
  background: var(--tooltip-chip);
}

.floating-player-tooltip .team-tooltip-card .form-match-bubble strong,
.app-tooltip .team-tooltip-card .form-match-bubble strong {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .team-tooltip-card .form-match-bubble em,
.floating-player-tooltip .team-tooltip-card .form-match-info,
.app-tooltip .team-tooltip-card .form-match-bubble em,
.app-tooltip .team-tooltip-card .form-match-info {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .team-tooltip-card .form-report-body,
.app-tooltip .team-tooltip-card .form-report-body {
  border: 1px solid var(--tooltip-line);
  background: var(--tooltip-surface);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip {
  background: var(--tooltip-surface-soft);
}

.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-chart,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-chart {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface);
}

.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-head em,
.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-row-label,
.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-axis,
.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-lists b,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-head em,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-row-label,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-axis,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-lists b {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-line,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-line {
  background: color-mix(in srgb, var(--tooltip-muted) 55%, transparent);
}

.floating-player-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-track,
.app-tooltip .team-tooltip-card .goal-timing-team-tooltip .goal-timing-track {
  border-bottom-color: var(--tooltip-line);
}

.floating-player-tooltip .tooltip-head img,
.floating-player-tooltip .tooltip-head > span,
.app-tooltip .tooltip-head img,
.app-tooltip .tooltip-head > span {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface-soft);
}

.floating-player-tooltip .tooltip-head em,
.floating-player-tooltip .tooltip-grid span,
.floating-player-tooltip .tooltip-note-strip span,
.floating-player-tooltip .tooltip-stat-block h5,
.floating-player-tooltip .tooltip-stat-block em,
.floating-player-tooltip .tooltip-grid .physical-fact em,
.floating-player-tooltip .tooltip-grid .achievement-chip small,
.floating-player-tooltip .tooltip-grid .achievement-more,
.floating-player-tooltip .tooltip-grid .career-club small,
.floating-player-tooltip .tooltip-grid .career-arrow,
.floating-player-tooltip .tooltip-grid .career-meta,
.app-tooltip .tooltip-head em,
.app-tooltip .tooltip-grid span,
.app-tooltip .tooltip-note-strip span,
.app-tooltip .tooltip-stat-block h5,
.app-tooltip .tooltip-stat-block em {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .tooltip-events span,
.floating-player-tooltip .tooltip-quickfacts span,
.app-tooltip .tooltip-events span,
.app-tooltip .tooltip-quickfacts span {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--tooltip-line));
  background: var(--tooltip-chip-strong);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .tooltip-quickfacts span.quickfact-warning,
.app-tooltip .tooltip-quickfacts span.quickfact-warning {
  color: color-mix(in srgb, var(--gold) 72%, var(--tooltip-ink));
}

.floating-player-tooltip .tooltip-quickfacts span.quickfact-injury,
.app-tooltip .tooltip-quickfacts span.quickfact-injury {
  color: var(--red);
}

.floating-player-tooltip .tooltip-quickfacts span.quickfact-availability,
.app-tooltip .tooltip-quickfacts span.quickfact-availability {
  color: var(--accent-dark);
}

.floating-player-tooltip .tooltip-note-strip,
.floating-player-tooltip .tooltip-note-strip.tooltip-muted,
.floating-player-tooltip .tooltip-grid > div,
.floating-player-tooltip .tooltip-grid .physical-fact,
.floating-player-tooltip .tooltip-stat-block,
.floating-player-tooltip .tooltip-stat-block span,
.app-tooltip .tooltip-note-strip,
.app-tooltip .tooltip-note-strip.tooltip-muted,
.app-tooltip .tooltip-grid > div,
.app-tooltip .tooltip-grid .physical-fact,
.app-tooltip .tooltip-stat-block,
.app-tooltip .tooltip-stat-block span {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface-soft);
}

.floating-player-tooltip .tooltip-discipline-strip,
.floating-player-tooltip .tooltip-suspension-strip,
.floating-player-tooltip .tooltip-yellow-risk-strip,
.floating-player-tooltip .tooltip-availability-strip,
.floating-player-tooltip .tooltip-injury-strip,
.floating-player-tooltip .tooltip-recent-injury-strip,
.app-tooltip .tooltip-discipline-strip,
.app-tooltip .tooltip-suspension-strip,
.app-tooltip .tooltip-yellow-risk-strip,
.app-tooltip .tooltip-availability-strip,
.app-tooltip .tooltip-injury-strip,
.app-tooltip .tooltip-recent-injury-strip {
  background: color-mix(in srgb, currentColor 8%, var(--tooltip-surface));
}

.floating-player-tooltip .tooltip-grid strong,
.floating-player-tooltip .tooltip-grid .physical-fact b,
.floating-player-tooltip .tooltip-stat-block b,
.app-tooltip .tooltip-grid strong,
.app-tooltip .tooltip-grid .physical-fact b,
.app-tooltip .tooltip-stat-block b {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .availability-history-toggle,
.app-tooltip .availability-history-toggle {
  background: var(--tooltip-chip);
  color: var(--accent-dark);
}

.floating-player-tooltip .availability-history-body,
.app-tooltip .availability-history-body {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface-soft);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .availability-history-row,
.app-tooltip .availability-history-row {
  background: var(--tooltip-chip);
}

.floating-player-tooltip .availability-history-row em,
.floating-player-tooltip .availability-history-row small,
.floating-player-tooltip .availability-history-more,
.app-tooltip .availability-history-row em,
.app-tooltip .availability-history-row small,
.app-tooltip .availability-history-more {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .availability-history-body a,
.app-tooltip .availability-history-body a {
  color: var(--accent-dark);
}

.floating-player-tooltip .tooltip-grid .achievement-chip,
.floating-player-tooltip .tooltip-grid .achievement-more,
.app-tooltip .tooltip-grid .achievement-chip,
.app-tooltip .tooltip-grid .achievement-more {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .tooltip-grid .career-club,
.floating-player-tooltip .tooltip-grid .career-more,
.floating-player-tooltip .tooltip-grid .career-chain-compact .career-club,
.floating-player-tooltip .tooltip-grid .career-chain-compact .career-more,
.app-tooltip .tooltip-grid .career-club,
.app-tooltip .tooltip-grid .career-more,
.app-tooltip .tooltip-grid .career-chain-compact .career-club,
.app-tooltip .tooltip-grid .career-chain-compact .career-more {
  border-color: var(--tooltip-line);
  background: var(--tooltip-chip);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .app-notes-component,
.app-tooltip .app-notes-component {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .app-notes-component .league-note-readonly-entry,
.floating-player-tooltip .app-notes-component .league-note-empty,
.app-tooltip .app-notes-component .league-note-readonly-entry,
.app-tooltip .app-notes-component .league-note-empty {
  background: var(--tooltip-surface-soft);
  color: var(--tooltip-muted);
}

.floating-player-tooltip .app-notes-component .league-note-head strong,
.app-tooltip .app-notes-component .league-note-head strong {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .app-notes-component .league-note-head span,
.app-tooltip .app-notes-component .league-note-head span {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .app-notes-component,
.app-tooltip .app-notes-component,
.floating-player-tooltip .tooltip-section,
.app-tooltip .tooltip-section {
  border-color: var(--tooltip-line);
}

.floating-player-tooltip .tooltip-section h4,
.app-tooltip .tooltip-section h4 {
  color: var(--tooltip-muted);
}

/* Stadium hover: the original weather widgets were styled for a dark card
   with literal white text. Keep every part readable in both themes. */
.floating-player-tooltip .venue-tooltip-photo,
.app-tooltip .venue-tooltip-photo {
  border-color: var(--tooltip-line);
}

/* Long stadium/referee cards scroll on the persistent floating shell. A
   deliberately shorter window ensures there is always usable room above and
   below it and avoids a full-screen card that the browser considers fitted. */
.floating-player-tooltip:has(.venue-tooltip-card),
.floating-player-tooltip:has(.referee-tooltip-card),
.app-tooltip:has(.venue-tooltip-card),
.app-tooltip:has(.referee-tooltip-card) {
  height: min(78dvh, 820px);
  max-height: calc(100dvh - 32px) !important;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.floating-player-tooltip .venue-tooltip-card,
.floating-player-tooltip .referee-tooltip-card,
.app-tooltip .venue-tooltip-card,
.app-tooltip .referee-tooltip-card {
  max-height: none;
  overflow: visible;
}

.floating-player-tooltip .venue-tooltip-weather .weather-box,
.app-tooltip .venue-tooltip-weather .weather-box {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface-soft);
}

.floating-player-tooltip .venue-tooltip-weather .weather-summary strong,
.floating-player-tooltip .venue-tooltip-weather .weather-metric strong,
.floating-player-tooltip .venue-tooltip-weather .weather-hour b,
.floating-player-tooltip .venue-tooltip-weather .weather-current strong,
.app-tooltip .venue-tooltip-weather .weather-summary strong,
.app-tooltip .venue-tooltip-weather .weather-metric strong,
.app-tooltip .venue-tooltip-weather .weather-hour b,
.app-tooltip .venue-tooltip-weather .weather-current strong {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .venue-tooltip-weather .weather-summary span,
.floating-player-tooltip .venue-tooltip-weather .weather-metric span,
.floating-player-tooltip .venue-tooltip-weather .weather-metric em,
.floating-player-tooltip .venue-tooltip-weather .weather-hour small,
.floating-player-tooltip .venue-tooltip-weather .weather-hour-top span,
.floating-player-tooltip .venue-tooltip-weather .weather-current em,
.floating-player-tooltip .venue-tooltip-weather .weather-current small,
.app-tooltip .venue-tooltip-weather .weather-summary span,
.app-tooltip .venue-tooltip-weather .weather-metric span,
.app-tooltip .venue-tooltip-weather .weather-metric em,
.app-tooltip .venue-tooltip-weather .weather-hour small,
.app-tooltip .venue-tooltip-weather .weather-hour-top span,
.app-tooltip .venue-tooltip-weather .weather-current em,
.app-tooltip .venue-tooltip-weather .weather-current small {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .venue-tooltip-weather .weather-metric,
.floating-player-tooltip .venue-tooltip-weather .weather-hour,
.floating-player-tooltip .venue-tooltip-weather .weather-current,
.app-tooltip .venue-tooltip-weather .weather-metric,
.app-tooltip .venue-tooltip-weather .weather-hour,
.app-tooltip .venue-tooltip-weather .weather-current {
  border-color: var(--tooltip-line);
  background: var(--tooltip-chip);
}

/* Complete referee profile theme: competition chips and historical match rows
   also contained literal dark-card whites. */
.floating-player-tooltip .referee-tooltip-card .referee-profile-chips span,
.app-tooltip .referee-tooltip-card .referee-profile-chips span {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--tooltip-line));
  background: var(--tooltip-chip);
  color: var(--tooltip-muted);
}

.floating-player-tooltip .referee-tooltip-card .referee-profile-chips b,
.floating-player-tooltip .referee-tooltip-card .referee-history-list strong,
.app-tooltip .referee-tooltip-card .referee-profile-chips b,
.app-tooltip .referee-tooltip-card .referee-history-list strong {
  color: var(--tooltip-ink);
}

.floating-player-tooltip .referee-tooltip-card .referee-history-list span,
.floating-player-tooltip .referee-tooltip-card .referee-history-list em,
.app-tooltip .referee-tooltip-card .referee-history-list span,
.app-tooltip .referee-tooltip-card .referee-history-list em {
  color: var(--tooltip-muted);
}

/* K.-o. prediction hover, including group results, former knockout matches
   and the projected next round. These blocks originated on a dark surface. */
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-head > span,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-head > span {
  border-color: var(--tooltip-line);
  background: var(--tooltip-surface-soft);
  color: var(--tooltip-ink);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-head em,
.floating-player-tooltip .knockout-prediction-tooltip-card > small,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-card-head em,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-rank-line,
.floating-player-tooltip .knockout-prediction-tooltip-card .knockout-prediction-section > strong,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-results-head,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-result-id,
.floating-player-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row span,
.floating-player-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row strong,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-row span:first-child,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-opponent,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-opponent em,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-head em,
.app-tooltip .knockout-prediction-tooltip-card > small,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-card-head em,
.app-tooltip .knockout-prediction-tooltip-card .group-live-rank-line,
.app-tooltip .knockout-prediction-tooltip-card .knockout-prediction-section > strong,
.app-tooltip .knockout-prediction-tooltip-card .group-match-results-head,
.app-tooltip .knockout-prediction-tooltip-card .group-match-result-id,
.app-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row span,
.app-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row strong,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-row span:first-child,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-opponent,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-opponent em {
  color: var(--tooltip-muted);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-card,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-empty,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-card,
.app-tooltip .knockout-prediction-tooltip-card .group-live-empty {
  background: var(--tooltip-surface-soft);
  color: var(--tooltip-muted);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-table,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-results-panel,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-table,
.app-tooltip .knockout-prediction-tooltip-card .group-match-results-panel {
  border-color: var(--tooltip-line);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-results-panel,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-result-row,
.floating-player-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-row,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row,
.app-tooltip .knockout-prediction-tooltip-card .group-match-results-panel,
.app-tooltip .knockout-prediction-tooltip-card .group-match-result-row,
.app-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-row {
  background: var(--tooltip-chip);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row.qualifies,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-result-row.is-finished,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row.qualifies,
.app-tooltip .knockout-prediction-tooltip-card .group-match-result-row.is-finished {
  background: color-mix(in srgb, #61c58e 18%, var(--tooltip-surface));
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row.third-watch,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row.third-watch {
  background: color-mix(in srgb, #f0c552 18%, var(--tooltip-surface));
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-row.is-current,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-row.is-current {
  background: var(--tooltip-chip-strong);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row-head,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row-head {
  background: var(--tooltip-surface-soft);
  color: var(--tooltip-muted);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row.is-focus,
.app-tooltip .knockout-prediction-tooltip-card .group-live-tooltip-row.is-focus {
  box-shadow: inset 3px 0 0 var(--accent);
}

.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-card-head strong,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-result-row strong,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-match-result-team b,
.floating-player-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row em,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-row strong,
.floating-player-tooltip .knockout-prediction-tooltip-card .group-live-route-opponent b,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-card-head strong,
.app-tooltip .knockout-prediction-tooltip-card .group-match-result-row strong,
.app-tooltip .knockout-prediction-tooltip-card .group-match-result-team b,
.app-tooltip .knockout-prediction-tooltip-card .knockout-path-result-row em,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-row strong,
.app-tooltip .knockout-prediction-tooltip-card .group-live-route-opponent b {
  color: var(--tooltip-ink);
}

/* Final UCL workspace layer. Keep this last so shared WM/table rules cannot
   turn the league-style roster back into presentation cards. */
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody {
  display: block;
  width: 100%;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable thead {
  display: none;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody {
  padding: 5px;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody tr {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 52px;
  margin-bottom: 6px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--position-bg, var(--panel)) 58%, var(--line) 42%);
  border-radius: 8px;
  background: var(--position-bg, var(--panel));
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody tr:hover,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody tr.selected {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
  transform: none;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody td {
  display: none;
  padding: 0;
  border: 0;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody .number-cell {
  display: block;
  grid-column: 1;
  color: var(--ink);
  font-size: calc(16px * var(--ui-font-scale));
  font-weight: 950;
  text-align: center;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable tbody td:nth-child(2) {
  display: block;
  grid-column: 2;
  min-width: 0;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable .player-cell {
  display: block;
  min-width: 0;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable .player-cell > img {
  display: none;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable .player-main,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable .player-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable .player-main {
  color: var(--ink);
  font-size: calc(15px * var(--ui-font-scale));
  font-weight: 950;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) #squadTable .player-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .qualification-ties {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .qualification-tie-card {
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--ink);
  box-shadow: var(--shadow);
}

@media (max-width: 1000px) {
  html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) .qualification-ties {
    grid-template-columns: 1fr;
  }
}

/* UCL Match Center and Runden use the shared full-width focus workspace.
   These declarations must remain after every UCL Kader override. */
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .app-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .team-rail,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .stats-panel,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .ucl-club-hero {
  display: none !important;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .squad-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  padding: 0;
}

html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .match-view,
html:is([data-environment="ucl2026"], [data-environment="uel2026"], [data-environment="uecl2026"]) body.focus-mode .tournament-view {
  /* The Kader view owns an extra hero grid row. Explicit placement keeps a
     newly opened Match-Center/Runden view out of that stale implicit track. */
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
}

/* League-equivalent history blocks inside the UCL Team chapter. */
.club-history-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px}.club-history-sections>section{min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:10px}.club-history-sections>section:first-child,.club-history-sections>.club-trophies{grid-column:1/-1}.club-history-sections h3{margin:0 0 7px}.club-history-sections p{margin:0;color:var(--muted);line-height:1.4}.club-history-sections small{display:block;margin-top:6px;color:var(--muted)}.club-history-line{display:grid;grid-template-columns:minmax(70px,.4fr) minmax(0,1.6fr);gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}.club-history-line:last-child{border-bottom:0}.club-history-line span{color:var(--muted)}.club-trophy-row{display:inline-grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:7px;min-width:180px;margin:4px 8px 4px 0;padding:7px;border-radius:8px;background:var(--panel-soft)}.club-trophy-row img{width:34px;height:34px;object-fit:contain}.club-trophy-row b,.club-trophy-row small{display:block;margin:0}@media(max-width:760px){.club-history-sections{grid-template-columns:1fr}.club-history-sections>section:first-child,.club-history-sections>.club-trophies{grid-column:1}}

/* UCL club players use the exact shared League statistics component, including
   its adjacent writable notes column. */
/* Club-event team chapter mirrors the regular league team-card hierarchy. */
.club-cup-team-layout{display:grid;gap:10px}.club-cup-team-layout .club-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.club-cup-team-layout .club-detail{min-width:0;min-height:62px;border-radius:9px;background:var(--panel-soft);padding:9px}.club-cup-team-layout .club-detail span,.club-cup-team-layout .club-profile-facts span,.club-cup-team-layout .club-history-grid span{display:block;color:var(--muted);font-size:.68rem;font-weight:900;text-transform:uppercase}.club-cup-team-layout .club-detail strong,.club-cup-team-layout .club-profile-facts strong{display:block;margin-top:4px;overflow-wrap:anywhere}.club-cup-team-layout .club-profile-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}.club-cup-team-layout .club-profile-stack-column{display:grid;gap:10px;min-width:0}.club-cup-team-layout .club-profile-stack-column.span-2{grid-column:span 2}.club-cup-team-layout .club-profile-stack-column.span-3{grid-column:span 3}.club-cup-team-layout .club-profile-card{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);padding:10px}.club-cup-team-layout .club-profile-card.span-5{grid-column:1/-1}.club-cup-team-layout .club-profile-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.club-cup-team-layout .club-profile-card-head strong{font-size:.84rem;font-weight:950}.club-cup-team-layout .club-profile-card-head span{border:1px solid var(--line);border-radius:999px;color:var(--muted);padding:2px 7px;font-size:.66rem;font-weight:950;text-transform:uppercase}.club-cup-team-layout .club-profile-card h3,.club-cup-team-layout .club-profile-card p{margin:8px 0 0}.club-cup-team-layout .club-profile-card p{color:var(--muted);font-size:.8rem}.club-cup-team-layout .club-profile-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}.club-cup-team-layout .club-profile-facts>div{background:var(--panel);border-radius:8px;padding:7px}.club-cup-team-layout .club-staff-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}.club-cup-team-layout .club-staff-list span{min-width:0;border-radius:999px;background:var(--panel);padding:6px 8px;font-size:.72rem;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.club-cup-team-layout .club-transfer-grid{display:grid;margin-top:7px}.club-cup-team-layout .club-transfer-row{display:grid;padding:5px 0;border-bottom:1px solid var(--line)}.club-cup-team-layout .club-transfer-row:last-child{border-bottom:0}.club-cup-team-layout .club-transfer-row b{font-size:.78rem}.club-cup-team-layout .club-transfer-row em{color:var(--muted);font-size:.7rem;font-style:normal;font-weight:750}.club-cup-team-layout .transfer-direction{margin-right:5px;color:#49c884}.club-cup-team-layout .transfer-direction.departure{color:#f0786e}.club-cup-team-layout .club-stadium-image{display:block;width:100%;max-height:150px;object-fit:cover;border-radius:8px;margin-top:8px}.club-cup-team-layout .club-kit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}.club-cup-team-layout .club-kit-row{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:7px;border-radius:8px;background:var(--panel);padding:6px}.club-cup-team-layout .club-kit-row>img,.club-cup-team-layout .club-kit-row>i{width:42px;height:46px;object-fit:contain;border-radius:7px;background:var(--kit-color,#547078)}.club-cup-team-layout .club-kit-row span{min-width:0}.club-cup-team-layout .club-kit-row strong,.club-cup-team-layout .club-kit-row em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.club-cup-team-layout .club-kit-row strong{font-size:.75rem}.club-cup-team-layout .club-kit-row em{color:var(--muted);font-size:.62rem;font-style:normal}.club-cup-team-layout .club-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}.club-cup-team-layout .club-history-grid>p{grid-column:1/-1}.club-cup-team-layout .club-history-grid>div{background:var(--panel);border-radius:8px;padding:7px}.club-cup-team-layout .club-history-grid strong{display:block;margin-top:3px;font-size:.76rem}.club-profile-loading{padding:24px;color:var(--muted);font-weight:850}.club-profile-loading.error{color:var(--danger)}html.club-cup-runtime .stats-panel{min-width:0}html.club-team-facts-mode .squad-panel{display:none}html.club-team-facts-mode .stats-panel{grid-column:2/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.8fr);align-content:start;gap:12px;padding:12px 14px 14px 16px}html.club-team-facts-mode .stats-panel>[data-info-panel="facts"]{margin:0}html.club-team-facts-mode .stats-panel>[data-info-panel="facts"]:has(#factList){grid-column:1}html.club-team-facts-mode .stats-panel>[data-info-panel="facts"]:has(#factList)>.section-title{display:none}html.club-team-facts-mode .stats-panel>[data-info-panel="facts"]:has(#teamUserNotes){grid-column:2;grid-row:1}@media(max-width:1100px){.club-cup-team-layout .club-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.club-cup-team-layout .club-profile-grid{grid-template-columns:1fr}.club-cup-team-layout .club-profile-stack-column.span-2,.club-cup-team-layout .club-profile-stack-column.span-3,.club-cup-team-layout .club-profile-card.span-5{grid-column:1}.club-cup-team-layout .club-kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html.club-team-facts-mode .stats-panel{grid-template-columns:1fr}html.club-team-facts-mode .stats-panel>[data-info-panel="facts"]:has(#teamUserNotes){grid-column:1;grid-row:auto}}
.club-cup-team-layout .ucl-kit-gallery{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}.club-cup-team-layout .ucl-kit-upload{width:100%;height:72px;min-height:72px;overflow:hidden;grid-template-columns:54px minmax(0,1fr);gap:8px;border:1px solid var(--line);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,transform .16s ease,background .16s ease}.club-cup-team-layout .ucl-kit-upload>img,.club-cup-team-layout .ucl-kit-upload>i{display:grid!important;place-items:center;width:54px!important;height:58px!important;min-width:54px!important;max-width:54px!important;min-height:58px!important;max-height:58px!important;margin:0!important;object-fit:contain!important;align-self:center;justify-self:center}.club-cup-team-layout .ucl-kit-upload:hover,.club-cup-team-layout .ucl-kit-upload:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--panel) 78%,var(--accent) 22%);transform:translateY(-1px);outline:none}.club-cup-team-layout .ucl-kit-upload>i{color:#fff;font-style:normal;font-size:1.4rem;font-weight:900}.club-cup-team-layout .ucl-kit-upload.is-empty>i{border:1px dashed color-mix(in srgb,var(--accent) 70%,var(--line));background:var(--panel-soft)}@media(max-width:760px){.club-cup-team-layout .ucl-kit-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Kader-only fallback for referee records that have no imported base facts. */
.referee-profile-editor{margin:0;border-top:1px solid var(--line);background:var(--panel-soft)}.referee-profile-editor summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;cursor:pointer;color:var(--accent-strong,var(--accent));font-size:.8rem;font-weight:900;list-style:none}.referee-profile-editor summary::-webkit-details-marker{display:none}.referee-profile-editor summary span{border-radius:999px;background:var(--panel);color:var(--muted);padding:2px 7px;font-size:.68rem}.referee-profile-editor form{padding:0 12px 12px}.referee-profile-editor p{margin:0 0 9px;color:var(--muted);font-size:.74rem;line-height:1.35}.referee-profile-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.referee-profile-editor label{display:grid;gap:3px;min-width:0}.referee-profile-editor label span{color:var(--muted);font-size:.66rem;font-weight:850;text-transform:uppercase}.referee-profile-editor input{min-width:0;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);font:inherit;padding:7px}.referee-profile-editor-actions{display:flex;align-items:center;gap:9px;margin-top:9px}.referee-profile-editor-actions button{min-width:100px}.referee-profile-editor-actions span{color:var(--muted);font-size:.73rem;font-weight:800}@media(max-width:560px){.referee-profile-editor-grid{grid-template-columns:1fr}}