:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background: #003333;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

button { font: inherit; }

.coach-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  height: 100dvh;
  min-height: 480px;
}

.coach-main, .coach-menu {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.coach-main { scrollbar-gutter: stable; }

.coach-menu {
  padding: 9px 8px 24px;
  scrollbar-color: #666 #003333;
}

.coach-menu h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.coach-header {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(172px, 1fr);
  align-items: center;
  min-height: 113px;
  padding: 5px 8px 0;
  border-bottom: 1px solid #c8d3d3;
}

.heading { min-width: 0; text-align: center; }

.heading h1 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 75px);
  font-weight: 700;
  line-height: 1.15;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  text-shadow: 0 0 30px #000;
}

.heading h1 span { white-space: nowrap; }

.event-name {
  margin: 2px 0 0;
  min-height: 16px;
  color: #c7dedb;
  font-size: 13px;
  line-height: 1.2;
}

.gender-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.gender-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  min-height: 68px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.gender-button.male, .gender-button.female {
  font-size: 75px;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  text-shadow: 0 0 14px #000;
}

.gender-button.male[aria-pressed="true"] { background: #c6d6e2; }
.gender-button.female[aria-pressed="true"] { background: #ffce9a; }
.gender-button:focus-visible, .delegation:focus-visible { outline: 3px solid #ffff00; outline-offset: 2px; }

.publication-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-height: 28px;
  padding: 4px 12px;
  color: #def4ef;
  background: #002929;
  font-size: 12px;
  border-bottom: 1px solid #164a46;
}

.status-light {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #afb9b6;
  flex: none;
}

.publication-status[data-state="fresh"] .status-light { background: #58df79; }
.publication-status[data-state="source-error"] .status-light,
.publication-status[data-state="stale"] .status-light,
.publication-status[data-state="stopped"] .status-light { background: #ffca48; }
.publication-status[data-state="offline"] .status-light,
.publication-status[data-state="unreachable"] .status-light { background: #ff7564; }

.data-age { color: #a9c7c1; }

.rows { padding: 0 8px 30px; }

.empty-message {
  margin: 22px 16px;
  color: #d2e5df;
  font-size: 16px;
}

.bout {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0;
  min-width: 0;
}

.bout-icons {
  display: flex;
  align-items: center;
  flex: none;
  min-width: 156px;
  min-height: 65px;
}

.tatami-icon { display: block; width: 92px; height: 65px; object-fit: contain; }
.judogi-icon { display: block; width: auto; height: 60px; object-fit: contain; }

.tatami-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 65px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.bout-body { min-width: 0; flex: 1; }

.bout-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 5px;
  max-width: 100%;
  min-height: 43px;
  margin: 0 0 0 0;
  padding: 10px;
  background: #000;
  color: #ffff00;
  border-radius: 25px 25px 25px 0;
  line-height: 1.2;
  font-size: 16px;
}

.bout-meta strong { font-weight: 700; }
.bout-meta .wait-text { white-space: nowrap; }
.bout-meta .old-marker { color: #fff; font-size: 12px; }
.fight-symbols { display: inline-flex; align-items: center; flex-wrap: wrap; }
.fight-symbols img { display: block; width: 30px; height: auto; }
.fight-symbols .ellipsis { color: #fff; }

.fighters { display: flex; align-items: center; width: 100%; min-width: 0; }
.fighter-name { font-weight: bold; overflow-wrap: anywhere; }

.judoka {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 50%;
  min-width: 0;
  min-height: 41px;
  padding: 8px;
  border-radius: 0 25px 25px 25px;
  color: #000;
}

.judoka.white { background: #fff; }
.judoka.blue { background: #00f; }
.judoka img, .rival img { display: block; height: 25px; width: auto; max-width: 70px; object-fit: contain; flex: none; }

.flag-fallback {
  display: inline-block;
  flex: none;
  min-width: 30px;
  padding: 2px 3px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

.rival {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 50%;
  min-width: 0;
  min-height: 41px;
  padding: 6px 8px 6px 14px;
  color: #ffff00;
}

.rival .versus { margin-right: 2px; white-space: nowrap; font-weight: bold; }
.rival .unknown { font-style: italic; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.delegations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.delegation {
  position: relative;
  display: block;
  flex: none;
  width: 120px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #1f5952;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}

.delegation[aria-pressed="true"] { outline: 3px solid #ffff00; outline-offset: 2px; }
.delegation img { display: block; width: 100%; height: 100%; object-fit: cover; }

.delegation-code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  text-shadow: 0 0 14px #000;
}

.delegation.no-flag .delegation-code { color: #fff; -webkit-text-stroke: 0; font-size: 32px; }

@media (max-width: 1023px) {
  .coach-layout { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .coach-main { overflow: visible; order: 1; }
  .coach-menu {
    order: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px 12px;
    border-bottom: 1px solid #53817c;
  }
  .delegations { flex-wrap: nowrap; width: max-content; gap: 8px; }
  .delegation { width: 86px; height: 58px; }
  .delegation-code { font-size: 34px; }
  .coach-header { min-height: 92px; }
  .heading h1 { font-size: clamp(34px, 5vw, 60px); }
  .fighters { max-width: 100%; }
}

@media (max-width: 620px) {
  .coach-header { grid-template-columns: 1fr; gap: 3px; padding: 6px 6px 4px; }
  .heading h1 { font-size: clamp(31px, 9vw, 44px); }
  .gender-controls { justify-content: center; gap: 7px; }
  .gender-button { min-height: 42px; min-width: 58px; }
  .gender-button.male, .gender-button.female { font-size: 43px; }
  .bout { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px; margin: 8px 0 14px; }
  .bout-icons { min-width: 0; flex-direction: column; align-items: center; }
  .tatami-icon, .tatami-fallback { width: 70px; height: 50px; }
  .judogi-icon { height: 48px; }
  .bout-meta { font-size: 14px; padding: 8px; }
  .fighters { flex-direction: column; align-items: stretch; }
  .judoka, .rival { flex-basis: auto; width: 100%; min-height: 38px; }
  .rival { padding-left: 8px; }
}