/* Projector broadcast board (handoff v20). Global (not scoped) because the board is composed from several
   Razor components (ProjectorTables / ProjectorCallPanel / ProjectorQueue / ProjectorLeaders / ProjectorGroups
   / ProjectorProtocolPane / ProjectorWinner …) whose elements don't share a single component scope. All
   selectors are prefixed proj-/af-/pan- so they never collide with the app. Colours come from the shared
   --tone-*/--tt-* tokens; the board is authored at a fixed 1920×1080 stage and scaled to fit the viewport. */

/* Fixed stage + letterbox */
.proj-fit {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.proj-frame {
    position: relative;
    /* CSS scale-to-fit so the stage is fitted before JS measures (OnStageResize); ProjectorPage's inline
       width/height/transform override these once it does. Without it the first paint is a clipped 1920px stage. */
    --proj-fit: min(100vw / 1920, 100vh / 1080);
    width: calc(1920px * var(--proj-fit));
    height: calc(1080px * var(--proj-fit));
}

.proj-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    transform: scale(var(--proj-fit));
    transform-origin: top left;
    background: var(--tone-ink-primary, #222);
    color: #fff;
    font-family: Roboto, system-ui, sans-serif;
    display: grid;
    /* minmax(0,…) pins the column to 1920px; the implicit auto track would let a long title / wide mix stretch
       it wider, pushing the ellipsis point and the right rail past the stage's overflow-clip. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
}

.proj-sec {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8f8b83;
    margin: 0 0 16px;
}

/* Header */
.proj-head {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 44px 12px;
    /* Grid item min-width defaults to content, so a long title escapes the capped column; 0 lets it ellipsize. */
    min-width: 0;
}

.proj-head-main {
    min-width: 0;
    flex: 1;
}

.proj-title {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-meta {
    font-size: 21px;
    color: #b0aca3;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.proj-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-meta-icon {
    font-size: 20px !important;
    color: #b0aca3;
}

.proj-dotsep {
    color: #6a665f;
}

.proj-stage-chip {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e8e5df;
    white-space: nowrap;
    flex-shrink: 0;
}

.proj-stage-chip.winner {
    background: rgba(201, 162, 39, 0.18);
    border-color: rgba(201, 162, 39, 0.5);
    color: #e6d29a;
}

.proj-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(210, 59, 46, 0.16);
    border: 1px solid rgba(210, 59, 46, 0.5);
    border-radius: 999px;
    padding: 9px 17px;
    flex-shrink: 0;
}

.proj-live-text {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #f6d6d1;
}

.proj-clock {
    font-size: 44px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    line-height: 1;
    text-align: right;
    flex-shrink: 0;
}

.proj-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tone-accent-red, #D23B2E);
    display: inline-block;
    flex-shrink: 0;
    animation: proj-dot 1.3s ease-in-out infinite;
}

.proj-dot-green { background: var(--tone-win-green, #1F9D57); }
.proj-dot-red { background: var(--tone-accent-red, #D23B2E); }
.proj-dot-amber { background: var(--tone-amber, #C98A1E); }

@keyframes proj-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@keyframes proj-fill {
    from { width: 0; }
    to { width: 100%; }
}

/* QR */
.proj-qr {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.proj-qr-img {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proj-qr-img img,
.proj-qr-img svg {
    width: 100%;
    height: 100%;
    display: block;
}

.proj-qr-fallback {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: #8a8378;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.proj-qr-cap {
    font-size: 18px;
    line-height: 1.3;
    color: #a5a099;
    max-width: 168px;
}

.proj-qr-link {
    color: #fff;
    font-weight: 600;
}

/* Progress */
.proj-progress {
    padding: 0 44px 14px;
}

.proj-progress-spacer {
    height: 6px;
}

.proj-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 9px;
}

.proj-progress-lbl {
    font-size: 22px;
    font-weight: 600;
    color: #cbc6bd;
}

.proj-progress-pct {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.proj-progress-track {
    height: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.proj-progress-fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--tone-brand-clay, #b27c62), var(--tone-win-green, #1F9D57));
}

/* Layout container (mix).
   Two-column grid: left 1fr (protocol), right 508px rail. Two rows: auto (the tables strip, spanning both
   columns) then minmax(0,1fr) (protocol + rail). Matches the prototype's mix grid exactly. */
.proj-main-mix {
    display: grid;
    /* minmax(0,…) so wide protocol content can't stretch the column past the stage (paired with min-width:0). */
    grid-template-columns: minmax(0, 1fr) 508px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px 32px;
    padding: 0 44px 12px;
    min-width: 0;
    min-height: 0;
}

.proj-mix-tables { grid-column: 1 / -1; }

.proj-mix-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
}

/* Tables strip (horizontal pills, up to 6 in one row).
   The prototype's TablePill is a SINGLE compact horizontal row (num | divider | pair+score, tag beneath),
   fixed 112px tall, laid out repeat(N,1fr) — so the strip stays short and the protocol gets the height.
   Grid columns are set inline from the table count. The pill's internal chrome (gap / padding / number
   block / name size) tightens as the strip gets denser (data-count) so 5-6 tables and long stage tags stay
   inside their pill instead of shifting the row. */
.proj-tables {
    display: grid;
    gap: 16px;
    min-width: 0;
    --pill-gap: 18px;
    --pill-pad: 22px;
    --pill-num-w: 74px;
    --pill-num-fs: 42px;
    --pill-name-fs: 25px;
    --pill-tag-fs: 17px;
}

.proj-tables[data-count="5"] {
    --pill-gap: 13px;
    --pill-pad: 16px;
    --pill-num-w: 60px;
    --pill-num-fs: 36px;
    --pill-name-fs: 22px;
    --pill-tag-fs: 16px;
}

.proj-tables[data-count="6"] {
    --pill-gap: 10px;
    --pill-pad: 13px;
    --pill-num-w: 52px;
    --pill-num-fs: 32px;
    --pill-name-fs: 20px;
    --pill-tag-fs: 15px;
}

.proj-pill {
    display: flex;
    align-items: center;
    gap: var(--pill-gap, 18px);
    height: 112px;
    padding: 0 var(--pill-pad, 22px);
    background: #fff;
    border-radius: 18px;
    border: 3px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: var(--tone-ink-primary, #222);
    min-width: 0;
    /* No overflow:hidden here — it would clip the .called pulse ring (an outer box-shadow). Overflow is
       instead prevented at the source: every inner block is shrink-safe (min-width:0 + ellipsis). */
}

.proj-pill.called {
    border-color: var(--tone-accent-red, #D23B2E);
    background: #fbe6e3;
    animation: proj-pulse 1.5s ease-out infinite;
}

.proj-pill.active { border-color: rgba(31, 157, 87, 0.5); background: #e9f4ee; }
.proj-pill.inprogress { border-color: rgba(201, 138, 30, 0.5); background: #f8f0dd; }

@keyframes proj-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(210, 59, 46, 0.55), 0 10px 30px rgba(0, 0, 0, 0.28); }
    50% { box-shadow: 0 0 0 14px rgba(210, 59, 46, 0), 0 10px 30px rgba(0, 0, 0, 0.28); }
}

.proj-pill-num {
    width: var(--pill-num-w, 74px);
    flex-shrink: 0;
    text-align: center;
}

.proj-pill-num-lbl {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #8a857d;
}

.proj-pill-num-val {
    font-size: var(--pill-num-fs, 42px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--tone-ink-primary, #222);
}

.proj-pill-sep {
    width: 1px;
    height: 63px;
    background: var(--tt-tour-card-border, #e6e2da);
    flex-shrink: 0;
}

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

.proj-pill-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}

.proj-pill-name {
    font-size: var(--pill-name-fs, 25px);
    font-weight: 600;
    color: var(--tone-ink-primary, #222);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-pill-name.right { text-align: right; }

.proj-pill-score {
    font-size: var(--pill-name-fs, 25px);
    font-weight: 600;
    color: #a8a29a;
    font-variant-numeric: tabular-nums;
}

.proj-pill-score.on {
    font-size: calc(var(--pill-name-fs, 25px) + 6px);
    font-weight: 800;
    color: var(--tone-ink-primary, #222);
}

.proj-pill-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
    font-size: var(--pill-tag-fs, 17px);
    font-weight: 600;
    color: #8a857d;
    /* Keep the tag on one line and inside the pill: a long stage name (e.g. the consolation-bracket label)
       ellipsizes instead of wrapping (which would break the fixed pill height) or spilling past the border. */
    min-width: 0;
    white-space: nowrap;
}

/* The stage name yields first (ellipsis); the status label and its dot stay whole. The stage-tag span is the
   only class-less child, so this never touches .proj-pill-status. */
.proj-pill-tag > span:not([class]) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proj-pill-dotsep {
    color: #8a857d;
    flex-shrink: 0;
}

.proj-pill-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: #8a857d;
    flex-shrink: 0;
}

.proj-pill.called .proj-pill-status { color: var(--tone-accent-red, #D23B2E); }
.proj-pill.active .proj-pill-status { color: var(--tone-win-green, #1F9D57); }
.proj-pill.inprogress .proj-pill-status { color: var(--tone-amber, #C98A1E); }

.proj-pill-free {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--pill-name-fs, 25px);
    font-weight: 600;
    color: #b4aea3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Call panel */
.proj-callstack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.proj-call {
    background: var(--tone-accent-red, #D23B2E);
    border-radius: 18px;
    padding: 20px 26px;
    color: #fff;
    animation: proj-pulse 1.5s ease-out infinite;
}

.proj-call-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.95;
}

.proj-call-icon {
    font-size: 30px !important;
    color: #fff;
}

.proj-call-pair {
    font-size: 40px;
    font-weight: 800;
    margin-top: 8px;
    line-height: 1.15;
}

.proj-call.wide .proj-call-pair { font-size: 44px; }

.proj-call-more {
    font-size: 24px;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 14px;
}

.proj-call-more-row {
    font-size: 22px;
    font-weight: 600;
    color: #c9c4bb;
    padding-left: 4px;
}

.proj-vs {
    opacity: 0.65;
    font-weight: 600;
}

.proj-nextup {
    background: var(--tt-tour-badge-clay-bg, #eee7e2);
    border: 2px solid var(--tone-brand-clay, #b27c62);
    border-radius: 18px;
    padding: 20px 26px;
    color: var(--tone-ink-primary, #222);
}

.proj-nextup-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--tone-brand-clay-dark, #9c6a52);
}

.proj-nextup-pair {
    font-size: 36px;
    font-weight: 800;
    margin-top: 8px;
    line-height: 1.15;
}

.proj-nextup-empty {
    font-size: 26px;
    font-weight: 600;
    margin-top: 8px;
    color: #8a7d72;
}

/* Queue */
.proj-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.proj-queue-col { flex: 1; min-height: 0; }

.proj-queue {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.proj-queue-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.proj-queue-row.ready {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.proj-queue-row.blocked { opacity: 0.6; }

.proj-queue-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #6a665f;
    flex-shrink: 0;
}

.proj-queue-dot.on { background: var(--tone-win-green, #1F9D57); }

.proj-queue-pair {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    font-size: 25px;
    font-weight: 600;
    color: #f0eee9;
}

/* Each player name clips independently, capped at half the pair width, so one long name can't swallow the row
   and hide the opponent. A short name keeps its natural width (under the cap) — no lending to the long side. */
.proj-queue-pair .proj-qname {
    flex: 0 1 auto;
    max-width: 50%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-queue-pair .proj-vs {
    flex: 0 0 auto;
    color: #8f8b83;
    opacity: 1;
    font-weight: 500;
    /* Space the separator with padding, not text whitespace: as a flex item the " vs " span's edge spaces
       collapse, so names would touch "vs" (and an ellipsis would abut it). */
    padding: 0 10px;
}

.proj-queue-note {
    font-size: 18px;
    font-weight: 600;
    color: #8f8b83;
    flex-shrink: 0;
    white-space: nowrap;
}

.proj-queue-note.ok { color: var(--tone-win-green, #1F9D57); }

.proj-queue-empty {
    font-size: 24px;
    color: #8f8b83;
    padding: 10px 4px;
}

.proj-queue-more {
    font-size: 20px;
    color: #8f8b83;
    padding: 6px 4px 0;
}

/* Leaders (mix rail — top-3, pinned to the bottom edge of the right column) */
.proj-leaders {
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

/* Tighter than the shared .proj-sec so the top-3 block stays compact (handoff RailLeaders). */
.proj-leaders .proj-sec { margin-bottom: 10px; }

.proj-leader-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.proj-leader {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 9px 14px;
}

.proj-leader-place {
    font-size: 24px;
    font-weight: 800;
    width: 30px;
    text-align: center;
    color: #cbc6bd;
}

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

.proj-leader-name {
    font-size: 22px;
    font-weight: 600;
    color: #f2f0eb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-leader-wl {
    font-size: 16px;
    color: #9a958c;
}

.proj-leader-pts {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Protocol pane (white card housing the reused TournamentProtocol) */
.proj-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.proj-pane-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 12px;
}

.proj-pane-note {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #a9a49b;
}

.proj-pane-card {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
    color: var(--tone-ink-primary, #222);
    overflow: hidden;
}

.proj-pane.dense .proj-pane-card { padding: 16px; }

/* AutoFit / panorama primitives.
   .af-box scales its .af-inner (natural size) to fit whole; .pan-vp is the panorama viewport that JS
   pans/zooms its .pan-inner. Both fill the pane card. */
.af-box {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.af-wrap { position: relative; }

.af-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    transform-origin: top left;
}

.pan-vp {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
    touch-action: none;
    /* Dragging the panorama must not select the bracket text (read-only wall board). */
    user-select: none;
    -webkit-user-select: none;
}

.pan-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    transform-origin: top left;
}

.pan-bar {
    position: absolute;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    display: none;
}

.pan-bar-v { right: 2px; top: 3px; bottom: 3px; width: 6px; }
.pan-bar-h { left: 3px; right: 3px; bottom: 2px; height: 6px; }

.pan-thumb {
    position: absolute;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.24);
}

.pan-bar-v .pan-thumb { left: 0; width: 6px; }
.pan-bar-h .pan-thumb { top: 0; height: 6px; }

/* Bracket at hall scale — the box stays APP-SIZED (small fonts/avatar) and ProjPan scales the whole sheet to
   fit; bumping fonts here would inflate the natural size and make ProjPan zoom less (coarser board) + overflow
   the slot-mode band. So only the COLUMN widens for the added rating + score column; slot-h keeps the app box.
   `.pan-inner` is load-bearing: projector.css loads before the scoped bundle, so `.proj-pane-card .protocol`
   (0,2,0) ties `.protocol[b-hash]` and loses on source order — --bkt-col-w would keep the 225px app value. */
.proj-pane-card .pan-inner .protocol {
    --bkt-col-w: 264px;
    --bkt-slot-h: 96px;
    font-size: 20px;
}

/* Groups scene */
.proj-groups {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.proj-groups-grid {
    display: grid;
    gap: 26px 32px;
}

.proj-group-card { min-width: 0; }

.proj-group-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.proj-group-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--tone-ink-primary, #222);
}

/* Group play-state caption on the wall (SPEC §1.2): "идёт N" (green/bold + pulsing dot) / "осталось N" /
   "доиграна" (muted). Sized to sit beside the 28px group title. */
.proj-group-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #9a958c;
}

    .proj-group-status.live {
        font-weight: 700;
        color: var(--tone-win-green, #1F9D57);
    }

    .proj-group-status .proj-group-status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--tone-win-green, #1F9D57);
        animation: proj-dot 1.3s ease-in-out infinite;
    }

    .proj-group-status .proj-group-status-dot.proj-dot-green { background: var(--tone-win-green, #1F9D57); }
    .proj-group-status .proj-group-status-dot.proj-dot-red { background: var(--tone-accent-red, #D23B2E); }
    .proj-group-status .proj-group-status-dot.proj-dot-amber { background: var(--tone-amber, #C98A1E); }

.proj-groups .af-inner .protocol { --bkt-col-w: 260px; }

/* Groups cross-table hall geometry (prototype ProjCross: cell 56, name 262, fs 24, 1.5px grid). The reused
   TournamentProtocol table is app-sized; under the projector's max-content ancestry its width:100% +
   table-layout:fixed collapses to a tiny corner box, and AutoFit then scales that broken footprint. The fix:
   give it a REAL intrinsic width = the column sum (536 + n·56, matching the prototype), so AutoFit measures
   correctly and fits the whole table. Every rule carries the extra .af-inner ancestor so it OUT-SPECIFIES the
   child's scoped .razor.css (which loads AFTER projector.css, so a same-specificity tie would lose). */
.proj-groups .af-inner .protocol-table {
    width: auto;
    table-layout: auto;
}

/* Keep the scoped `overflow: hidden` so the 12px corner radius clips the cells (the header chip-tint and the
   grid lines) — with `overflow: visible` the rectangular cell backgrounds poked past the rounded frame, giving
   ragged corners on the wall. The wrap box already sizes to the table's content width (table-layout:auto), so
   hidden neither scrolls nor clips horizontally — verified: wrap width is identical either way, AutoFit is
   unaffected. Only thicken the frame line. */
.proj-groups .af-inner .protocol-table-wrap {
    border-width: 1.5px;
}

/* Explicit hall column widths give table-layout:auto a stable width sum independent of name length (the name
   ellipsizes via the untouched scoped .protocol-name rule). The name column is 344px = the old pre-TTAR name
   room (262) + the added rating column (82): adding TTAR must NOT come out of the name's space, so the name
   keeps its full width and long entries ("Матроскин Виталий") stop truncating. AutoFit re-measures the real
   DOM (ttarAutoFit reads offsetWidth), so the wider table just scales to fit — no hardcoded width formula. */
.proj-groups .af-inner .protocol-table .col-num { width: 46px; }
.proj-groups .af-inner .protocol-table .col-name { width: 344px; max-width: 344px; padding-left: 12px; }
/* TTAR column at hall scale (SPEC §2.3: width ≈ fs·3.4, kegl ≈ fs·0.92, right-aligned, red / guest muted).
   Adding it widens the group card to GRP_W(n) = 642 + n·56 (was 536 + n·56) — the layout heuristic keys off that.
   font-size is on the BODY cell only (td) so the header label keeps the plain th size — otherwise the totals
   headers (Очки in particular) would render larger/bolder than the "В–П"/"М" caption row (design request). */
.proj-groups .af-inner .protocol-table .col-rating { width: 82px; padding-right: 12px; }
.proj-groups .af-inner .protocol-table td.col-rating { font-size: 22px; }
.proj-groups .af-inner .protocol-table .col-cell { width: 56px; height: 56px; }
.proj-groups .af-inner .protocol-table .col-wl { width: 96px; }
.proj-groups .af-inner .protocol-table td.col-wl { font-size: 22px; }
.proj-groups .af-inner .protocol-table .col-pts { width: 70px; }
.proj-groups .af-inner .protocol-table td.col-pts { font-size: 26px; }
.proj-groups .af-inner .protocol-table .col-place { width: 62px; }
.proj-groups .af-inner .protocol-table td.col-place { font-size: 24px; }
/* Status-dot lane before the avatar scales up on the wall (SPEC §1.3: 13px lane, 12px dot). */
.proj-groups .af-inner .name-dot-lane { width: 13px; }
.proj-groups .af-inner .name-live-dot { width: 12px; height: 12px; border-radius: 50%; }

/* Cell body + header type at hall scale. Thicken ONLY the horizontal row line (bottom) — NOT a blanket
   border-width. That blanket was the bug: the global reset `* { border-style:solid; border-width:0 }` leaves
   every side solid-but-zero, so widening all four sides lit up borders on cells the app page keeps borderless,
   in currentColor (hence the mismatched dark/light hairlines). The vertical dividers come from the scoped grid
   (col-cell/В–П left, TTAR-body right) at 1px and are left as-is, so the projector mirrors the app page. */
.proj-groups .af-inner .protocol-table th,
.proj-groups .af-inner .protocol-table td {
    font-size: 24px;
    padding: 7px 10px;
    border-bottom-width: 1.5px;
}

.proj-groups .af-inner .protocol-table th {
    font-size: 15px;
    padding: 9px 6px;
}

.proj-groups .af-inner .protocol-name { font-size: 24px; }

/* Live indicator background on the wall (both cross-table scenes). A single-leg in-play cell already washes
   its whole td amber (scoped .col-cell.playing), which reads fine. A MULTI-leg (double round-robin) cell,
   however, washes only the one in-play LEG — half the cell — which at hall scale looks like a stray patch
   behind the dot rather than a live-cell fill. On the projector, move the amber wash to the WHOLE td and drop
   the per-leg patch, so a live multi-leg cell fills edge-to-edge exactly like the single-leg one (app keeps
   the per-leg fill via the scoped rules — this override is projector-only). */
.proj-groups .af-inner .protocol-table .col-cell.cell-legs.playing,
.proj-pane-card > .af-box .af-inner .protocol-table .col-cell.cell-legs.playing {
    background: var(--tt-tour-badge-amber-bg);
}

.proj-groups .af-inner .protocol-table .cell-leg.playing,
.proj-pane-card > .af-box .af-inner .protocol-table .cell-leg.playing {
    background: transparent;
}

/* Avatars scale to the hall (app is 24px; prototype av ≈ fs·1.5). ::deep is inert in a global sheet, so
   target the MudBlazor class directly (same technique as the podium-avatar overrides below). */
.proj-groups .af-inner .protocol-player .mud-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
}

/* Legend / note are redundant on the wall; the block-head "Группа N" duplicates the card's own title. */
.proj-groups .af-inner .protocol-block-head,
.proj-groups .af-inner .protocol-note,
.proj-groups .af-inner .protocol-legend,
.proj-groups .af-inner .protocol-legs-note { display: none; }

.proj-groups-rotate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}

.proj-groups-rotate-text {
    font-size: 19px;
    font-weight: 600;
    color: #9a958c;
}

.proj-groups-bar {
    width: 54px;
    height: 6px;
    border-radius: 4px;
    background: #e4dfd5;
    overflow: hidden;
    flex-shrink: 0;
}

.proj-groups-bar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #a9a29a;
    animation: proj-fill 11s linear forwards;
}

.proj-groups-dots {
    display: flex;
    gap: 7px;
}

.proj-groups-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d8d3c9;
}

.proj-groups-dot.on { background: #8a857d; }

/* Same intrinsic-width fix as the groups block above, for the round-robin cross-table (rendered directly in
   .proj-pane-card > .af-box — the `>` excludes the groups path nested under .proj-groups). */
.proj-pane-card > .af-box .af-inner .protocol-table {
    width: auto;
    table-layout: auto;
}

/* Keep scoped overflow:hidden so the rounded corners clip the cells (see the groups path for why visible
   gave ragged corners); wrap sizes to content, so hidden doesn't scroll/clip horizontally. */
.proj-pane-card > .af-box .af-inner .protocol-table-wrap {
    border-width: 1.5px;
}

.proj-pane-card > .af-box .af-inner .protocol-table .col-num { width: 46px; }
/* 344px = pre-TTAR name room (262) + rating (82); see the groups path for why. */
.proj-pane-card > .af-box .af-inner .protocol-table .col-name { width: 344px; max-width: 344px; padding-left: 12px; }
/* Body-cell font-size only (see the groups path above) so totals headers stay the plain caption size. */
.proj-pane-card > .af-box .af-inner .protocol-table .col-rating { width: 82px; padding-right: 12px; }
.proj-pane-card > .af-box .af-inner .protocol-table td.col-rating { font-size: 22px; }
.proj-pane-card > .af-box .af-inner .protocol-table .col-cell { width: 56px; height: 56px; }
.proj-pane-card > .af-box .af-inner .protocol-table .col-wl { width: 96px; }
.proj-pane-card > .af-box .af-inner .protocol-table td.col-wl { font-size: 22px; }
.proj-pane-card > .af-box .af-inner .protocol-table .col-pts { width: 70px; }
.proj-pane-card > .af-box .af-inner .protocol-table td.col-pts { font-size: 26px; }
.proj-pane-card > .af-box .af-inner .protocol-table .col-place { width: 62px; }
.proj-pane-card > .af-box .af-inner .protocol-table td.col-place { font-size: 24px; }
.proj-pane-card > .af-box .af-inner .name-dot-lane { width: 13px; }
.proj-pane-card > .af-box .af-inner .name-live-dot { width: 12px; height: 12px; border-radius: 50%; }

/* Bottom row line only (see the groups path above for why a blanket border-width lights up the global reset's
   solid-but-zero borders in currentColor). */
.proj-pane-card > .af-box .af-inner .protocol-table th,
.proj-pane-card > .af-box .af-inner .protocol-table td {
    font-size: 24px;
    padding: 7px 10px;
    border-bottom-width: 1.5px;
}

.proj-pane-card > .af-box .af-inner .protocol-table th {
    font-size: 15px;
    padding: 9px 6px;
}

.proj-pane-card > .af-box .af-inner .protocol-name { font-size: 24px; }

.proj-pane-card > .af-box .af-inner .protocol-player .mud-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
}

/* The reused protocol renders on a dark card in the app but here sits on white — its note/legend/legs hints
   are redundant on the wall. Keep the tables/bracket; hide the paper "note" line, the score/walkover legend
   under a cross-table, and the "place by loser" legs note under a connected bracket. */
.proj-pane-card .protocol-note,
.proj-pane-card .protocol-legend,
.proj-pane-card .protocol-legs-note { display: none; }

/* Round-robin cross scene: the pane already has its own titled header (proj-pane-head), so the reused table's
   inner block-head (title + app play-state caption) is redundant on the wall — hide it (mirrors the groups
   path). The live status still reads from the row highlight + name/cell dots. */
.proj-pane-card > .af-box .af-inner .protocol-block-head { display: none; }

/* Finals scene: ALL finals at once — bracket final(s) + круговой table(s). The cross-table keeps the same hall
   sizing as the standalone Cross scene (it inherits the `> .af-box` hall rules above). The BRACKET, however, is
   drawn at its natural APP size (small equal boxes — the proven layout with all rectangles the same size and names
   never clipped). To make the two proportional on the wall, the bracket is uniformly magnified with `zoom` — that
   scales the WHOLE bracket (boxes, empty slots, connectors, avatars, fonts) by one factor, so its ~12px app name
   lands at the cross-table's 24px hall name and every rectangle stays equal. (`zoom` — not `transform: scale` —
   because it keeps the bracket in normal flow so AutoFit measures the magnified footprint. Projector is Chrome, so
   `zoom` is safe.) This is the reverse of an earlier attempt that bumped only the bracket FONTS: that broke the
   equal-box layout and clipped names. Each final keeps its own block-head — the "основной"/"утешительный" label. */
.proj-pane-card > .af-box.proj-finals .af-inner .protocol-block-head { display: flex; margin-bottom: 8px; }
.proj-pane-card > .af-box.proj-finals .af-inner .protocol-scroll { zoom: 2; }

/* Winner scene */
.proj-winner {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 40px;
    padding: 6px 44px 26px;
    min-height: 0;
}

.proj-winner-podium {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.proj-podium-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.proj-podium-row.big {
    gap: 26px;
    padding: 26px 30px;
    background: linear-gradient(100deg, rgba(201, 162, 39, 0.22), rgba(201, 162, 39, 0.05));
    border: 2px solid rgba(201, 162, 39, 0.55);
}

.proj-podium-place {
    font-size: 32px;
    font-weight: 800;
    width: 40px;
    text-align: center;
}

.proj-podium-row.place-1 .proj-podium-place { color: #c9a227; }
.proj-podium-row.place-2 .proj-podium-place { color: #b7b3ac; }
.proj-podium-row.place-3 .proj-podium-place { color: #b08560; }
.proj-podium-row.big .proj-podium-place { font-size: 52px; width: 60px; }

.proj-podium-row.big .mud-avatar { width: 96px !important; height: 96px !important; font-size: 40px; }
.proj-podium-row .mud-avatar { width: 56px !important; height: 56px !important; }

.proj-podium-body { min-width: 0; }

.proj-podium-label {
    font-size: 21px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d9c48a;
    font-weight: 700;
}

.proj-podium-name {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-podium-row.big .proj-podium-name { font-size: 50px; }

.proj-podium-final {
    font-size: 22px;
    color: #b0aca3;
    padding-left: 6px;
}

.proj-podium-foot {
    margin-top: auto;
    font-size: 21px;
    color: #8f8b83;
}

.proj-winner-protocol {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.proj-winner-protocol-card {
    flex: 1;
    min-height: 0;
    display: flex;
}

.proj-winner-protocol-card .proj-pane { flex: 1; }

/* Idle placeholder */
.proj-idle {
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.proj-idle-name { font-size: 64px; font-weight: 800; }
.proj-idle-sub { font-size: 30px; color: #b0aca3; }

/* Fullscreen button */
.proj-fs {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s;
}

.proj-fs:hover { opacity: 1; }
.proj-fs.hidden { display: none; }
.proj-fs-icon { font-size: 26px !important; color: #fff; }