/* SPDX-License-Identifier: GPL-3.0-or-later */
/*
 * Stream overlay of DENY BY DEFAULT.
 * Layout A (strip) is 1280 x 146 px. Layout B (card) is 480 x 270 px (?layout=card).
 * Field #000000, text #FFFFFF. Red is for fills only (chip, bars, underline). No red text.
 * The page background is transparent, so the stream shows nothing between featured turns.
 * The page sets no dark scheme: it has no scheme meta tag, and the html rule below keeps the
 * normal scheme. A dark scheme gives the browser a dark canvas color behind a transparent page,
 * and OBS would show it as a dark page while no turn is live.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  color-scheme: normal;
  background: transparent;
  color: #ffffff;
  font-family: var(--ss-font-ui, system-ui, sans-serif);
  overflow: hidden;
}

p,
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.overlay {
  position: relative;
  background: #000000;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.overlay[data-layout="strip"] {
  width: 1280px;
  height: 146px;
  border-top: 2px solid #ffffff;
}

.overlay[data-layout="card"] {
  width: 480px;
  height: 270px;
  border: 2px solid #ffffff;
  padding: 10px 14px;
}

.small {
  font-size: 16px;
}

.strong {
  font-weight: 700;
}

.digits {
  font-weight: 700;
}

.line {
  font-size: 18px;
}

.chip {
  display: inline-block;
  padding: 3px 18px;
  background: #ff0000;
  color: #ffffff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
}

/* Layout A: four zones in a row, with a 40 percent white line between them. */
.overlay[data-layout="strip"] .live {
  display: grid;
  grid-template-columns: 300px 340px 400px 240px;
  height: 100%;
}

.overlay[data-layout="strip"] .zone {
  padding: 10px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.overlay[data-layout="strip"] .zone:last-child {
  border-right: 0;
}

.overlay[data-layout="strip"] .who .small {
  font-size: 22px;
}

.overlay[data-layout="strip"] .name {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
}

.overlay[data-layout="strip"] .chip-row {
  margin-top: 8px;
}

.overlay[data-layout="strip"] .digits {
  font-size: 48px;
  line-height: 1.1;
}

.overlay[data-layout="strip"] .mode-name {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A line that is too long for the zone ends with an ellipsis, not in the middle of a word. */
.overlay[data-layout="strip"] .howto li {
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The strip shows three how-to lines (THEME.md 9.2, zone A5). */
.overlay[data-layout="strip"] .howto li:nth-child(n + 4) {
  display: none;
}

.overlay[data-layout="strip"] .queue {
  margin-top: 4px;
  font-size: 14px;
}

.overlay[data-layout="strip"] .free {
  display: none;
}

/* Layout B: a header, a status block and the how-to lines. */
.overlay[data-layout="card"] .live {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "who who"
    "score mode"
    "howto howto";
  gap: 2px 12px;
  height: 100%;
}

.overlay[data-layout="card"] .who {
  grid-area: who;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.overlay[data-layout="card"] .who .small {
  font-size: 20px;
}

.overlay[data-layout="card"] .name {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  flex: 1 1 auto;
}

.overlay[data-layout="card"] .score {
  grid-area: score;
}

.overlay[data-layout="card"] .mode {
  grid-area: mode;
}

.overlay[data-layout="card"] .howto-zone {
  grid-area: howto;
}

.overlay[data-layout="card"] .digits {
  font-size: 36px;
  line-height: 1.1;
}

.overlay[data-layout="card"] .line {
  font-size: 14px;
}

.overlay[data-layout="card"] .mode-name {
  font-size: 16px;
  font-weight: 700;
}

/* The card shows three how-to lines, each on one line, so the queue line and the free play line stay in the card. */
.overlay[data-layout="card"] .howto li {
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay[data-layout="card"] .howto li:nth-child(n + 4) {
  display: none;
}

.overlay[data-layout="card"] .queue,
.overlay[data-layout="card"] .free {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Banner, result card and thank-you line fill the same box as the layout. */
.banner,
.result,
.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  text-align: center;
}

.banner-text {
  font-size: 32px;
  font-weight: 700;
}

.banner-rule {
  display: block;
  width: 60%;
  height: 8px;
  background: #ff0000;
}

.result .digits {
  font-size: 40px;
}

.result .strong,
.thanks .strong {
  font-size: 22px;
}

.overlay[data-layout="card"] .banner-text {
  font-size: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  .banner,
  .result,
  .thanks {
    animation: ov-in 200ms ease-out;
  }
}

@keyframes ov-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}