/* ── Pit Display — full-screen TV stylesheet ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0f172a;
    --bg2:       #1e293b;
    --bg3:       #334155;
    --text:      #f1f5f9;
    --muted:     #94a3b8;
    --red:       #ef4444;
    --red-dim:   #7f1d1d;
    --red-bg:    #1c0a0a;
    --blue:      #3b82f6;
    --blue-dim:  #1e3a8a;
    --blue-bg:   #0a1020;
    --green:     #22c55e;
    --yellow:    #f59e0b;
    --border:    #334155;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* ── Page grid ───────────────────────────────────────────────────────────── */
.display-page {
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 0;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.display-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.5rem;
    background: var(--bg2);
    border-bottom: 2px solid var(--border);
}
.display-event-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.display-clock {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ── Main content area ───────────────────────────────────────────────────── */
.display-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 0;
    overflow: hidden;
}

/* ── Current match (left, dominant) ─────────────────────────────────────── */
.display-current {
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem;
    border-right: 2px solid var(--border);
    gap: 1.25rem;
}
.display-slot-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
}
.display-current .display-slot-label { color: var(--green); }

.display-match-id {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text);
}
.display-current .display-match-id { font-size: 5rem; }

.display-field {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: -0.75rem;
}

/* Alliance rows */
.display-alliance {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
}
.display-alliance-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    min-width: 2.5rem;
}
.display-alliance.red  .display-alliance-label { color: var(--red); }
.display-alliance.blue .display-alliance-label { color: var(--blue); }

.display-teams {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.display-team {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    min-width: 5.1ch;
    border-radius: 6px;
    text-align: center;
}
.display-current .display-team { font-size: 3.2rem; padding: 0.25rem 0.6rem; }
.display-alliance.red  .display-team { color: var(--red);  background: var(--red-bg);  }
.display-alliance.blue .display-team { color: var(--blue); background: var(--blue-bg); }

/* Score row (when played) */
.display-scores {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}
.display-score {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}
.display-score.red  { color: var(--red); }
.display-score.blue { color: var(--blue); }
.display-score.winner { font-size: 3.8rem; }
.display-score-sep { font-size: 1.5rem; color: var(--muted); }

/* Status badge */
.display-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}
.display-status.on_field  { background: var(--yellow); color: #000; }
.display-status.played    { background: var(--bg3);    color: var(--muted); }
.display-status.scheduled { background: var(--bg2);    color: var(--muted); border: 1px solid var(--border); }

/* ── Right column: on deck + in queue ────────────────────────────────────── */
.display-queue {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.display-slot {
    flex: 1;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
}
.display-slot:last-child { border-bottom: none; }

.display-empty {
    color: var(--muted);
    font-size: 1rem;
    font-style: italic;
}

/* ── Announcements bar ───────────────────────────────────────────────────── */
.display-announcements {
    background: var(--bg2);
    border-top: 2px solid var(--border);
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 2rem;
    text-align: center;
}
.display-ann-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    color: var(--yellow);
}
.display-ann-marquee { display: none; }  /* no longer used */
.display-ann-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    white-space: normal;
}
.display-no-ann {
    color: var(--muted);
    font-size: 0.9rem;
}
.display-no-ann {
    color: var(--muted);
    font-size: 0.85rem;
}

/* ── All-divisions overview grid ─────────────────────────────────────────── */
.dv-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--border);
    overflow: hidden;
}
.dv-card {
    background: var(--bg2);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.dv-card-header {
    background: var(--bg3);
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.dv-div-name {
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    text-decoration: none;
}
.dv-div-name:hover { color: var(--blue); }
.dv-offset {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.6rem;
    vertical-align: middle;
}
.dv-offset-late  { background: #14532d; color: #86efac; }
.dv-offset-early { background: #7f1d1d; color: #fca5a5; }

/* Each row: On Field / On Deck / In Queue */
.dv-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex: 1;
    min-height: 0;
}
.dv-row:last-child { border-bottom: none; }

.dv-row-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    min-width: 4.5rem;
    flex-shrink: 0;
}
.dv-match-label {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text);
    min-width: 3.75rem;
    flex-shrink: 0;
}
.dv-match-time {
    font-size: 0.85rem;
    color: var(--muted);
    flex-shrink: 0;
    margin-right: 0.25rem;
}
.dv-empty {
    color: var(--bg3);
    font-size: 1rem;
}

/* Team chips inside dv-row */
.dt-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dt-label {
    font-size: 0.75rem;
    font-weight: 800;
    width: 0.9rem;
    flex-shrink: 0;
}
.dt-row.dt-red  .dt-label { color: var(--red); }
.dt-row.dt-blue .dt-label { color: var(--blue); }
.dt-teams {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.dt-team {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.2rem 0.5rem;
    min-width: 6.4ch;
    border-radius: 4px;
    text-align: center;
}
.dt-row.dt-red  .dt-team { color: var(--red);  background: var(--red-bg); }
.dt-row.dt-blue .dt-team { color: var(--blue); background: var(--blue-bg); }

/* Stack alliance rows within dv-row */
.dv-row .dt-row + .dt-row { /* teams share same dv-row horizontally */ }
.dv-row {
    flex-wrap: wrap;
    row-gap: 0.2rem;
}

/* ── Waiting screen ──────────────────────────────────────────────────────── */
.display-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--muted);
}
.display-waiting h2 { font-size: 2rem; color: var(--text); }
.display-waiting p  { font-size: 1rem; }

/* ── Refresh indicator ───────────────────────────────────────────────────── */
.display-refresh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0;
    transition: opacity 0.3s;
    flex-shrink: 0;
}
.display-refresh-dot.flash { opacity: 1; }