/* RTDS court screens in the style of the event portal (poomsae-rtds look).
   Restyles the classic markup of Rtds/fights.phtml only, the HTML stays as it was
   because external tools parse it. */
:root {
  --gray-hi: #4d4d4d;
  --gray-lo: #303030;
  --yellow-hi: #ffff4d;
  --yellow-lo: #e6d600;
  --blue-dark: #0a1c8c;
  --blue: #1b3fd4;
  --red-dark: #6e0000;
  --red: #c40000;
  --box: #1c1c1c;
  --gap: 0.18em;
}
/* rem based, so rtds-live.js can scale the whole screen through the root font size */
html { font-size: 1.25vw; background: #000; }
body {
  background: #000;
  color: #fff;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  padding: 0.9rem 1.1rem;
  overflow-x: hidden;
}

/* ---------- title and clock ---------- */
.titleLine {
  text-align: left;
  font-size: 1.45rem;
  font-weight: 400;
  margin: 0 12rem 1.1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#rtds-clock {
  position: absolute;
  top: 1.25rem;
  right: 1.1rem;
  font-size: 0.7rem;
  color: #ddd;
  white-space: nowrap;
}
html.stale #rtds-clock { color: #ff4d4d; }

/* ---------- colors: flat Bootstrap fills become RTDS gradients ---------- */
body .bg-primary {
  background:
    radial-gradient(ellipse 18% 140% at 88% 50%, rgba(90, 130, 255, 0.55), transparent 70%),
    linear-gradient(90deg, var(--blue-dark), var(--blue) 55%, #1634b8) !important;
}
body .bg-danger {
  background:
    radial-gradient(ellipse 14% 120% at 90% 55%, rgba(255, 80, 60, 0.85), transparent 70%),
    linear-gradient(90deg, var(--red-dark), var(--red) 60%, #a30000) !important;
}
body .bg-secondary { background: linear-gradient(180deg, var(--gray-hi), var(--gray-lo)) !important; }
body .bg-warning { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow-lo)) !important; color: #000 !important; }
body .border-left, body .border-right, body .border-top, body .border-bottom { border: 0 !important; }

/* ---------- one strip per court: fight on the mat | court number | next fights ---------- */
body > .row { margin-left: 0; margin-right: 0; }
body > .row:has(> .col-lg-4) {
  align-items: flex-start;
  padding: 0.6rem 0;
  border-bottom: 1px solid #333;
}
body > .row:has(> .col-lg-4) > div { padding-left: 0; padding-right: 0; }
body > .row:has(> .col-lg-4) > .col-lg-2 { align-self: center !important; }

/* court number */
.titleCourt {
  margin: 0;
  font-size: 3.2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}
.titleCourt::before {
  content: "Court";
  display: block;
  margin-bottom: 0.2em;
  font-size: 0.25em;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ccc;
}

/* cells */
body > .row .row > div {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body > .row .row > div.text-center { justify-content: center; }

/* fight on the mat (normal screen): header row R | - | Pts | GJ, blue row, red row */
.col-lg-4:not(:has(.display-1)) > .row { margin: var(--gap) 0 0; flex-wrap: nowrap; gap: var(--gap); }
.col-lg-4:not(:has(.display-1)) > .row:first-child { margin-top: 0; }
.col-lg-4:not(:has(.display-1)) > .row > div { padding: 0 0.6rem; flex-shrink: 1; }
.col-lg-4:not(:has(.display-1)) > .row:first-child > div {
  height: 1.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ccc;
}
.col-lg-4:not(:has(.display-1)) > .row:first-child > .bg-warning { color: #000 !important; font-weight: 700; font-size: 0.85rem; }
.col-lg-4:not(:has(.display-1)) > .row:nth-child(n+2) > div { height: 2.7rem; }
/* round time and fight number */
.col-lg-4:not(:has(.display-1)) > .row:nth-child(n+2) > div:nth-child(1) { font-size: 1.15rem; font-weight: 700; }
/* names */
.col-lg-4:not(:has(.display-1)) > .row:nth-child(n+2) > div:nth-child(2) { font-size: 1.05rem; font-weight: 600; }
/* points */
.col-lg-4:not(:has(.display-1)) > .row:nth-child(n+2) > div:nth-child(3) {
  font-size: 1.6rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 100em rgba(0, 0, 0, 0.18);
}
.col-lg-4:not(:has(.display-1)) > .row:nth-child(2) > div:nth-child(3) { background: linear-gradient(180deg, var(--blue), var(--blue-dark)) !important; }
.col-lg-4:not(:has(.display-1)) > .row:nth-child(3) > div:nth-child(3) { background: linear-gradient(180deg, var(--red), var(--red-dark)) !important; }
/* Gam-jeom: yellow like the scoreboard */
.col-lg-4:not(:has(.display-1)) > .row:nth-child(n+2) > div:nth-child(4) {
  background: var(--yellow-hi) !important;
  color: #000 !important;
  font-weight: 700;
}

/* next fights */
.col-lg-6 > .row.border-top {
  margin: 0 0 var(--gap);
  height: 2.4rem;
  flex-wrap: nowrap;
  gap: var(--gap);
}
.col-lg-6 > .row.border-top > div { padding: 0 0.6rem; flex-shrink: 1; }
.col-lg-6 > .row.border-top > div:first-child { font-size: 1.1rem; }
.col-lg-6 > .row:last-child:not(.border-top) { display: none; }

/* ---------- livestream scoreboard (stream=1) ---------- */
.col-lg-4:has(.display-1) { background: var(--box); }
.col-lg-4:has(.display-1) > .row { margin: 0 0 var(--gap); flex-wrap: nowrap; }
.col-lg-4:has(.display-1) h4 { margin: 0; font-size: 1.15rem; font-weight: 600; white-space: normal; }
.col-lg-4:has(.display-1) .display-1 { margin: 0; font-size: 4.5rem; font-weight: 700 !important; line-height: 1; }
.col-lg-4:has(.display-1) .col-2.text-center { flex-direction: column; align-items: stretch; padding: 0; overflow: visible; }
.col-lg-4:has(.display-1) .col-2.text-center > .row { margin: 0; flex: 1; }
.col-lg-4:has(.display-1) .col.h4 {
  margin: 0;
  background: linear-gradient(180deg, var(--gray-hi), var(--gray-lo));
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  white-space: normal;
}
.col-lg-4:has(.display-1) .col.h2 { margin: 0; font-size: 1.8rem; }
.col-lg-4:has(.display-1) > .row:last-child > div { font-size: 0.75rem; white-space: normal; flex-direction: column; }
.col-lg-4:has(.display-1) > .row:last-child > div.h4 { background: linear-gradient(180deg, var(--gray-hi), var(--gray-lo)); letter-spacing: 0.06em; margin: 0; }
.col-lg-4:has(.display-1) > .row:last-child h2 { margin: 0; font-size: 1.4rem; font-weight: 700; }
body > .row:has(.display-1) .titleCourt::before { content: none; }

/* ---------- no open fights (added by rtds-live.js) ---------- */
.rtds-empty { padding: 0.6rem 0; }
.rtds-empty .cno {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin-bottom: 0.3rem;
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}
.rtds-empty .cno small {
  font-size: 0.5em;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ccc;
}
.rtds-empty .box {
  background: #1c1c1c;
  border-bottom: 2px solid #555;
  padding: 0.8rem 1rem;
  color: #bbb;
  font-size: 1.1rem;
}

/* ---------- logo ---------- */
body > .row:last-child { margin-top: 1rem; }
body > .row:last-child img { width: auto; height: 2.4rem; opacity: 0.9; }

/* ---------- screen-filling all-courts view: rtds-live.js shrinks it or glides through it ---------- */
html.fit, html.fit body { height: 100vh; overflow: hidden; }

/* ---------- phones and small tablets: Bootstrap stacks the columns ---------- */
@media (max-width: 991.98px) {
  html { font-size: 3.4vw; }
  .titleLine { margin-right: 0; font-size: 1.3rem; }
  #rtds-clock { position: static; display: block; margin: -0.8rem 0 0.8rem; }
  body > .row:has(> .col-lg-4) > .col-lg-2 { order: -1; }
  .titleCourt { display: flex; align-items: baseline; gap: 0.35em; font-size: 1.5rem; margin-bottom: 0.3rem; }
  .titleCourt::before { display: inline; font-size: 0.5em; }
  .col-lg-6 { margin-top: 0.4rem; }
}