/* 1 Point Padel: bracket board, score bug, vertical display (op-*). */
/* ── 1 Point Padel ──────────────────────────────────────────
 * Knockout run from the main schedule; bracket.html + onepoint-bug.html
 * are the displays (fed via onepoint-live.js).
 */

/* Control surface */
.op-live { max-width: 1100px; margin: 0 auto; padding: 26px 22px 60px; }
.op-head { display: flex; align-items: center; gap: 14px; }
.op-head h1 { font-family: var(--head); font-weight: 700; font-size: 40px; }

.op-buttons { display: flex; align-items: stretch; gap: 16px; margin-top: 8px; }
.op-teambtn {
  flex: 1; min-height: 34vh; padding: 24px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  font-family: var(--head); font-weight: 700; font-size: clamp(26px, 4vw, 48px);
  line-height: 1.15; cursor: pointer; touch-action: manipulation;
}
.op-teambtn:hover { background: var(--panel-hover); border-color: var(--red); }
.op-teambtn:active { transform: scale(0.985); background: var(--red-dim); }
.op-vs {
  align-self: center; font-family: var(--hero); font-size: 34px; color: var(--red);
}
.op-upnext { margin-top: 18px; color: var(--muted); font-family: var(--body); font-size: 15px; }
.op-results { margin-top: 22px; display: grid; gap: 6px; }
.op-result { color: var(--stone); font-family: var(--body); font-size: 14px; }
.op-result span {
  display: inline-block; min-width: 40px; color: var(--red);
  font-weight: 600; letter-spacing: 0.06em;
}
.op-result strong { color: var(--text); font-weight: 600; }
.op-champion {
  margin-top: 30px; font-family: var(--head); font-weight: 700;
  font-size: clamp(40px, 7vw, 88px); line-height: 1.05; color: var(--red-bright);
}
@media (max-width: 700px) {
  .op-buttons { flex-direction: column; }
  .op-teambtn { min-height: 22vh; }
}

/* Bracket display (bracket.html) — fixed 16:9 canvas like the graphics pages,
 * scaled to fit the viewport (letterboxed on non-16:9 screens; --op-scale is
 * set from JS). */
.op-stage {
  position: fixed; top: 50%; left: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--op-scale, 1));
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--black); color: var(--white);
}
.op-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #000 url('../img/pattern.png') center / cover no-repeat;
  opacity: 0.5;
}
html.gfx-transparent .op-stage { background: transparent; }
html.gfx-transparent .op-bg { display: none; }

.op-title {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 22px;
  padding: 28px 46px 8px;
}
.op-logo { height: 54px; width: auto; }
.op-eyebrow {
  font-family: var(--body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--red-bright);
}

.op-tree {
  position: relative; z-index: 1; flex: 1;
  display: flex; gap: 42px; padding: 10px 46px 12px;
  min-height: 0;
}
.op-col { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.op-colhead {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 8px;
}
/* Binary-tree alignment: every column shares the same cell area, split into
 * equal-flex cells (8, 4, 2, 1, 1). A round-2 cell spans two round-1 cells,
 * so each match centres exactly on the pair that feeds it. */
.op-cells { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.op-cell { flex: 1; display: flex; align-items: center; min-height: 0; }
.op-cell > * { width: 100%; }

.op-match {
  position: relative; background: rgba(0, 0, 0, 0.68);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px 9px 34px; margin: 3px 0;
}
.op-match.now {
  border-color: var(--red-bright);
  box-shadow: 0 0 0 1px var(--red-bright), 0 0 26px var(--red-glow);
  animation: op-pulse 1.8s ease-in-out infinite;
}
@keyframes op-pulse {
  50% { box-shadow: 0 0 0 1px var(--red-bright), 0 0 40px rgba(152, 27, 50, 0.45); }
}
@media (prefers-reduced-motion: reduce) { .op-match.now { animation: none; } }
.op-mnum {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--stone);
}
.op-slot {
  font-family: var(--head); font-weight: 600;
  font-size: 21px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-slot.tbd { color: var(--stone); font-weight: 400; }
.op-slot.won { color: var(--red-bright); }
.op-slot.lost { color: var(--muted); }

.op-champ {
  background: var(--red); border-radius: 10px; padding: 22px 18px;
  font-family: var(--head); font-weight: 700;
  font-size: 30px; line-height: 1.2; text-align: center;
}
.op-champ.tbd { background: var(--panel); color: var(--stone); border: 1px solid var(--border); }

.op-strip {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px 46px 24px;
  font-family: var(--body); font-size: 17px; color: var(--muted);
}
.op-strip strong { color: var(--white); font-weight: 600; }
.op-live-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red-bright);
  animation: op-pulse-dot 1.4s ease-in-out infinite;
}
.op-live-dot.done { animation: none; }
@keyframes op-pulse-dot { 50% { opacity: 0.35; } }
.op-strip-sep {
  width: 1px; height: 16px; background: var(--border-strong); margin: 0 10px;
}

.op-waiting {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--head); font-size: 30px; color: var(--muted);
}
html.gfx-transparent .op-waiting { background: transparent; }

/* ── 1 Point Padel vertical display (onepoint-vertical.html) ──
 * Rides on the .vport canvas/halves; team names become the hero since a
 * match has no score — winner half gets the red wash + WINNER chip. */
.opv-team {
  width: 100%;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  color: var(--white);
}
.opv-team .line {
  max-width: 100%;
  font-family: var(--head); font-weight: 700;
  font-size: 110px; line-height: 1.05;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.01em;
}
.vport-half.lost .opv-team { opacity: 0.35; }

.opv-state {
  font-family: var(--body); font-weight: 600; font-size: 30px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--white); background: var(--red);
  padding: 14px 44px; border-radius: 999px;
  visibility: hidden;
}
.opv-state.show { visibility: visible; }

.opv-spine { flex-direction: column; align-items: center; gap: 12px; padding: 40px; }
.opv-eyebrow {
  font-family: var(--body); font-weight: 600; font-size: 26px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--red-bright);
}
.opv-match {
  font-family: var(--head); font-weight: 700;
  font-size: 84px; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--white);
}

.opv .vport-footer {
  max-width: 960px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * On-air screen (air.html) — one static URL whose content is switched
 * remotely. Hosted pages scale themselves, so frames are simply full-bleed;
 * the crossfade happens by fading the incoming iframe in over the old one.
 * ══════════════════════════════════════════════════════════════════════════ */

/* The whole page is a transparent key layer (air.html carries the
   air-transparent class permanently): nothing sent = nothing rendered. */