/* ==============================================================================
   MDT Debate Timer: styles for the judge page (/judge).
   Designed, built and deployed by Lucas & Max, two brothers who do speech &
   debate and wanted to give back to the community.
   Layout lives in judge.html, timer logic in judge.js, rooms in judge-room.js.
   The file has two parts: the page's original styles first, then the timer theme
   at the very end. The theme comes last so it wins over earlier rules: when a
   card color up top looks wrong, check the bottom first (that's where it's decided).
   Color language (same as mdt.css, the phones and the room display): blue = a clock
   is running, amber = last 30 seconds, red = time's up, green = done, dashed white
   = paused, solid white = up next, violet = sides. Gold is MDT itself (buttons, links).
   ============================================================================== */

        /* ─── COLOR TOKENS AND FONTS ─── */
        :root {
            --bg: #1c2132;
            --surface: #252c3f;
            --surface2: #2c3450;
            --surface3: #323c5a;
            --border: rgba(255,255,255,0.12);
            --border-bright: rgba(255,255,255,0.22);
            --gold: #f0b429;
            --gold-dim: rgba(240,180,41,0.15);
            --gold-glow: rgba(240,180,41,0.35);
            --blue: #5a9fe8;
            --blue-dim: rgba(90,159,232,0.15);
            --blue-glow: rgba(90,159,232,0.4);
            --green: #34c77b;
            --green-dim: rgba(52,199,123,0.12);
            --red: #f0524f;
            --red-dim: rgba(240,82,79,0.15);
            --red-glow: rgba(240,82,79,0.4);
            --purple: #b89ffc;
            --purple-dim: rgba(184,159,252,0.15);
            --teal: #2dd4bf;
            --text: #edf0f7;
            --text-dim: #aab3d0;
            --text-muted: #7a87a8;
            --mono: 'JetBrains Mono', monospace;
            --sans: 'Instrument Sans', sans-serif;
            --display: 'Syne', sans-serif;
            --radius: 12px;
            --radius-sm: 8px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--sans);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* two faint glows (blue top left, gold bottom right) behind everything; fixed so
           they don't scroll, pointer-events none so they never eat a tap */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: 
                radial-gradient(ellipse 60% 40% at 10% 0%, rgba(90,159,232,0.08) 0%, transparent 60%),
                radial-gradient(ellipse 40% 30% at 90% 100%, rgba(240,180,41,0.07) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        /* z-index 1 lifts the page above the body::before glow */
        .app {
            position: relative;
            z-index: 1;
            max-width: 960px;
            margin: 0 auto;
            padding: 24px 20px 60px;
        }

        /* ─── HEADER ─── */
        .topbar {
            display: flex;
            align-items: center;
            gap: 16px;
            row-gap: 12px;
            margin-bottom: 28px;
            flex-wrap: wrap;
        }

        .wordmark {
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.3rem;
            letter-spacing: -0.02em;
            color: var(--text);
            flex-shrink: 0;
        }

        .wordmark span {
            color: var(--gold);
        }

        .topbar-divider {
            width: 1px;
            height: 28px;
            background: var(--border-bright);
            flex-shrink: 0;
        }

        .format-select-wrap {
            position: relative;
            flex-shrink: 0;
        }

        /* format picker: appearance none drops the browser's own arrow (it looks different on
           every OS), and ::after below draws our gold one instead */
        .format-select-wrap select {
            appearance: none;
            background: var(--surface2);
            border: 1px solid var(--border-bright);
            border-radius: 100px;
            color: var(--text);
            font-family: var(--sans);
            font-size: 0.85rem;
            font-weight: 600;
            padding: 8px 36px 8px 16px;
            cursor: pointer;
            outline: none;
            transition: border-color 0.2s;
            min-width: 200px;
        }

        .format-select-wrap select:focus {
            border-color: var(--gold);
        }

        /* pointer-events none so a tap on the arrow still opens the select underneath */
        .format-select-wrap::after {
            content: '▾';
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gold);
            font-size: 0.85rem;
            pointer-events: none;
        }

        /* the open dropdown list is drawn by the OS; without these it can show light text
           on a light list on some systems */
        .format-select-wrap select option,
        .format-select-wrap select optgroup {
            background: var(--surface2);
            color: var(--text);
            font-weight: normal;
        }

        .format-select-wrap select optgroup {
            color: var(--text-muted);
            font-size: 0.75rem;
        }

        .format-select-wrap.locked {
            opacity: 0.55;
        }

        /* OSDA / NSDA switch: a two-button segmented pill, only shown for formats where
           the rules actually differ (judge.js turns it on). Ohio rules vs national rules, real. */
        .rules-toggle { display: inline-flex; flex-shrink: 0; background: var(--surface2); border: 1px solid var(--border-bright); border-radius: 100px; padding: 3px; gap: 2px; }
        .rules-toggle button { background: transparent; border: none; color: var(--text-muted); font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; padding: 5px 11px; border-radius: 100px; cursor: pointer; transition: background 0.15s, color 0.15s; }
        .rules-toggle button:hover { color: var(--text); }
        .rules-toggle button.on { background: var(--gold); color: #111; }

        /* keep old pill styles for reference but hide */
        .format-pill { display: none; }


        /* row 1: the buttons, Start page first and New Round last; row 2: format, rules and the switches */
        .topbar-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex: 1 1 auto;
            flex-wrap: wrap;
        }
        .topbar-actions #btn-newround { margin-left: auto; }
        .topbar-settings {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            flex-basis: 100%;
        }
        .topbar-settings .toggle-group { margin-left: 0; }   /* right next to the format menu */

        .toggle-group {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: 100px;
            padding: 6px 14px;
        }

        .toggle-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-dim);
            cursor: pointer;
            transition: color 0.2s;
        }

        /* the switches: the real checkbox is hidden, and the label's .toggle-switch is drawn
           instead. input:checked ~ .toggle-switch works because the input comes first. */
        .toggle-item input[type="checkbox"] {
            display: none;
        }

        .toggle-switch {
            width: 28px;
            height: 16px;
            background: var(--surface3);
            border-radius: 100px;
            position: relative;
            transition: background 0.2s;
            flex-shrink: 0;
            border: 1px solid var(--border-bright);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 10px;
            height: 10px;
            background: var(--text-muted);
            border-radius: 50%;
            transition: all 0.2s;
        }

        .toggle-item input:checked ~ .toggle-switch {
            background: var(--gold);
            border-color: var(--gold);
        }

        .toggle-item input:checked ~ .toggle-switch::after {
            left: 14px;
            background: #0a0c12;
        }

        .toggle-item input:checked ~ span {
            color: var(--gold);
        }

        /* ─── TOP BAR BUTTONS ─── */
        .btn {
            border: none;
            border-radius: var(--radius-sm);
            font-family: var(--sans);
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            padding: 8px 14px;
            transition: all 0.2s;
            letter-spacing: 0.01em;
        }

        .btn-ghost {
            background: var(--surface2);
            color: var(--text-dim);
            border: 1px solid var(--border);
        }

        .btn-ghost:hover { color: var(--text); border-color: var(--border-bright); }

        .btn-danger-ghost {
            background: transparent;
            color: var(--red);
            border: 1px solid rgba(240,82,79,0.3);
        }

        .btn-danger-ghost:hover { background: var(--red-dim); }
        .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 7px 9px; line-height: 0; }
        .btn-icon svg { display: block; }
        #btn-count.on { color: var(--gold); border-color: rgba(240,180,41,0.6); }
        /* New Round is red on purpose: it wipes the round, so it should never look like a casual tap */
        .btn-reset { background: #d93a37; color: #fff; border: 1px solid #d93a37; font-weight: 700; }
        .btn-reset:hover { background: #ef4b48; border-color: #ef4b48; }

        /* ─── TOTAL TIME BANNER ─── */
        .time-banner {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 18px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        /* the gold stripe on the left edge */
        .time-banner::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--gold);
        }

        .time-banner-label {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .time-banner-values {
            display: flex;
            align-items: baseline;
            gap: 12px;
        }

        .time-banner-main {
            font-family: var(--mono);
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .time-banner-prep {
            font-family: var(--mono);
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        /* ─── STICKY MINI TIMER ─── */
        /* parked just above the screen (translateY -100%) and slid down by judge.js once the
           big time banner scrolls out of view. -webkit-backdrop-filter is for Safari/iPad. */
        .sticky-timer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 900;
            background: rgba(28, 33, 50, 0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-bright);
            padding: 8px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transform: translateY(-100%);
            transition: transform 0.25s ease;
        }

        .sticky-timer.visible {
            transform: translateY(0);
        }


        .sticky-timer-label {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .sticky-timer-value {
            font-family: var(--mono);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: -0.02em;
        }

        .sticky-timer-prep {
            font-family: var(--mono);
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-left: 8px;
        }

        /* ─── TEAM SETUP PANELS (PF, Policy and the general one share these) ─── */
        .pf-panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .pf-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s;
        }

        .pf-panel-header:hover { background: rgba(255,255,255,0.02); }

        .pf-panel-title {
            font-family: var(--display);
            font-weight: 700;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pf-panel-title .badge-opt {
            font-family: var(--sans);
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-muted);
            background: var(--surface3);
            padding: 2px 8px;
            border-radius: 100px;
        }

        .pf-caret {
            color: var(--text-muted);
            transition: transform 0.3s;
        }

        /* closed by default; judge.js opens it when the header is tapped */
        .pf-body {
            display: none;
            border-top: 1px solid var(--border);
        }

        .pf-body-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
        }

        .pf-coin-bar {
            grid-column: 1 / -1;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border);
        }

        .pf-coin-bar span {
            font-size: 0.85rem;
            color: var(--text-dim);
        }

        .btn-coin {
            background: linear-gradient(135deg, #f0b429, #e09a10);
            color: #0a0c12;
            border: none;
            border-radius: var(--radius-sm);
            padding: 8px 16px;
            font-family: var(--sans);
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            box-shadow: 0 4px 12px rgba(240,180,41,0.25);
        }

        .btn-coin:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(240,180,41,0.35); }

        .pf-team {
            padding: 20px;
        }

        /* the line between the two team columns (turns into a line under it on phones) */
        .pf-team:first-of-type { border-right: 1px solid var(--border); }

        .pf-team h4 {
            font-family: var(--display);
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-dim);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .pf-field {
            margin-bottom: 10px;
        }

        .pf-field label {
            display: block;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 5px;
        }

        .pf-field input, .pf-field select {
            width: 100%;
            background: var(--surface3);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-family: var(--sans);
            font-size: 0.875rem;
            padding: 9px 12px;
            outline: none;
            transition: border-color 0.2s;
        }

        .pf-field input:focus, .pf-field select:focus {
            border-color: var(--gold);
        }

        .pf-field input::placeholder { color: var(--text-muted); }

        .pf-field select option { background: var(--surface2); }

        .t2-side-static {
            background: var(--surface3);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-family: var(--sans);
            font-size: 0.875rem;
            padding: 9px 12px;
            width: 100%;
        }

        /* ─── SECTION HEADING ─── */
        .section-heading {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* the thin rule that fills the rest of the row after the heading text */
        .section-heading::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        /* ─── PREP SECTION ─── */
        /* Sticky with a solid background, so the prep timers stay pinned at the top while you
           scroll the speeches and the cards slide under it cleanly. Off on very short screens
           (see the end of RESPONSIVE), and it also holds the round rail and the now strip. */
        #prep-section {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--bg);
            padding: 16px 0 12px;
            margin-bottom: 8px;
        }

        .prep-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        /* ─── STAGE CARDS (one per speech) ─── */
        /* States come from judge.js as classes: active, paused, completed, next-up, locked.
           Several of these colors are replaced by the timer theme at the end of the file. */
        .stage-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .stage-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px 18px 20px;
            position: relative;
            overflow: hidden;
            transition: all 0.25s ease;
        }

        .stage-card.completed {
            opacity: 0.55;
            background: var(--surface);
        }

        .stage-card.active {
            border-color: var(--blue);
            background: linear-gradient(135deg, rgba(74,144,217,0.07) 0%, var(--surface) 50%);
            box-shadow: 0 0 0 1px rgba(74,144,217,0.3), 0 8px 32px rgba(74,144,217,0.12);
        }

        .stage-card.next-up {
            border-color: rgba(240,180,41,0.3);
            background: linear-gradient(135deg, rgba(240,180,41,0.04) 0%, var(--surface) 50%);
        }

        .stage-card.locked {
            opacity: 0.35;
        }

        .stage-card.paused {
            border-color: rgba(240,180,41,0.4);
        }

        /* PREP CARD */
        .prep-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px 16px 18px;
            position: relative;
            overflow: hidden;
            transition: all 0.25s ease;
        }

        .prep-card.active {
            border-color: var(--purple);
            background: linear-gradient(135deg, rgba(167,139,250,0.07) 0%, var(--surface) 60%);
            box-shadow: 0 0 0 1px rgba(167,139,250,0.25), 0 6px 24px rgba(167,139,250,0.1);
        }

        .prep-card.completed {
            opacity: 0.5;
        }

        .prep-card.paused {
            border-color: rgba(240,180,41,0.4);
        }

        /* ─── ACCENT BAR ─── */
        /* (the timer theme hides this bar: the border and chip carry the state instead) */
        .accent-bar {
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: transparent;
            transition: background 0.3s;
        }

        .stage-card.active .accent-bar { background: var(--blue); }
        .stage-card.next-up .accent-bar { background: rgba(240,180,41,0.5); }
        .stage-card.completed .accent-bar { background: var(--green); }
        .prep-card.active .accent-bar { background: var(--purple); }
        .prep-card.completed .accent-bar { background: var(--green); }
        .prep-card.paused .accent-bar, .stage-card.paused .accent-bar { background: var(--gold); }

        /* ─── PROGRESS BAR ─── */
        /* width is set by judge.js; the 1s linear transition makes it glide between ticks
           instead of jumping. A finished card's bar is forced back to zero (!important beats
           the inline width judge.js left behind). */
        .progress-track {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: rgba(255,255,255,0.04);
        }

        .progress-fill {
            height: 100%;
            transition: width 1s linear, background 0.3s;
            background: rgba(255,255,255,0.1);
        }

        .stage-card.active .progress-fill { background: var(--blue); }
        .stage-card.completed .progress-fill { width: 0 !important; background: var(--green); }
        .prep-card.active .progress-fill { background: var(--purple); }
        .prep-card.completed .progress-fill { width: 0 !important; }
        .stage-card.paused .progress-fill, .prep-card.paused .progress-fill { background: var(--gold); }

        /* ─── CARD LAYOUT ─── */
        .card-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .card-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--surface3);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--mono);
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-muted);
            flex-shrink: 0;
            transition: all 0.25s;
        }

        .stage-card.active .card-number {
            background: var(--blue);
            border-color: var(--blue);
            color: #fff;
            box-shadow: 0 0 12px rgba(74,144,217,0.5);
        }

        .stage-card.completed .card-number {
            background: var(--green);
            border-color: var(--green);
            color: #fff;
        }

        .stage-card.next-up .card-number {
            border-color: rgba(240,180,41,0.5);
            color: var(--gold);
        }

        /* min-width 0 lets long speech names shrink and wrap instead of shoving the timer
           off the card (flex items won't go below their content width without it) */
        .card-info {
            flex: 1;
            min-width: 0;
        }

        .card-name {
            font-family: var(--display);
            font-weight: 700;
            font-size: 0.95rem;
            line-height: 1.3;
            color: var(--text);
        }

        .card-name strong { font-weight: 800; }

        .card-sub {
            display: block;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 5px;
        }

        .side-pill {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 100px;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-top: 5px;
        }

        /* first-draft side colors; the timer theme below swaps them for the violet ones */
        .side-pill.pro { background: rgba(74,144,217,0.15); color: #7ab8f0; border: 1px solid rgba(74,144,217,0.25); }
        .side-pill.opp { background: rgba(240,82,79,0.12); color: #f08080; border: 1px solid rgba(240,82,79,0.25); }
        .side-pill.both { background: rgba(52,199,123,0.12); color: #70e0a8; border: 1px solid rgba(52,199,123,0.25); }

        /* the little italic line for the judge to read out ("Negative, you have 3 minutes for Cross-Examination.") */
        .judge-script {
            font-family: var(--sans);
            font-style: italic;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 5px;
            display: block;
            border-left: 2px solid var(--border-bright);
            padding-left: 8px;
        }

        /* mono digits so 1:11 and 8:88 are the same width and the clock doesn't wiggle */
        .card-timer {
            font-family: var(--mono);
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: var(--text);
            text-align: center;
            min-width: 110px;
            flex-shrink: 0;
            transition: color 0.3s;
        }

        .card-timer.overtime { color: var(--red); }
        .stage-card.active .card-timer { color: var(--blue); }
        .prep-card.active .card-timer { color: var(--purple); }

        .prep-card .card-timer {
            font-size: 1.6rem;
            min-width: 85px;
        }

        .checkmark-icon {
            display: none;
            color: var(--green);
            font-size: 1.3rem;
            flex-shrink: 0;
        }

        .stage-card.completed .checkmark-icon,
        .prep-card.completed .checkmark-icon { display: block; }

        /* ─── CARD ACTIONS ─── */
        .card-actions {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-shrink: 0;
        }

        .action-btn {
            border: none;
            border-radius: var(--radius-sm);
            font-family: var(--sans);
            font-weight: 700;
            font-size: 0.78rem;
            cursor: pointer;
            padding: 8px 14px;
            transition: all 0.2s;
            letter-spacing: 0.02em;
        }

        .action-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .action-start {
            background: var(--blue);
            color: #fff;
        }

        .action-start:hover:not(:disabled) {
            background: #5aa3e8;
            box-shadow: 0 4px 12px rgba(74,144,217,0.35);
            transform: translateY(-1px);
        }

        .action-pause {
            background: var(--gold);
            color: #0a0c12;
        }

        .action-pause:hover {
            background: #f5c040;
            transform: translateY(-1px);
        }

        .action-reset {
            background: var(--surface3);
            color: var(--text-dim);
            border: 1px solid var(--border);
        }

        .action-reset:hover { background: var(--red-dim); color: var(--red); border-color: rgba(240,82,79,0.3); }

        /* stage card buttons: Start/Pause + Reset on one row, End speech underneath spanning both */
        .stage-card .card-actions { flex-direction: column; align-items: stretch; gap: 6px; }
        .card-actions-row { display: flex; gap: 6px; }
        .card-actions-row .action-btn { flex: 1 1 auto; }
        .action-end { background: #c62828; color: #fff; width: 100%; }
        .action-end:hover { background: #e53935; }
        .stage-card.completed .action-start { opacity: 0.85; }
        .action-reset-icon {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            transition: all 0.2s;
        }

        .action-reset-icon:hover { background: var(--red-dim); color: var(--red); }

        /* ─── FLOW DRAWER (quick notes under a speech) ─── */
        .flow-drawer {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
        }

        .flow-drawer textarea {
            width: 100%;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-family: var(--sans);
            font-size: 0.85rem;
            padding: 10px 12px;
            resize: vertical;
            min-height: 90px;
            outline: none;
            transition: border-color 0.2s;
        }

        .flow-drawer textarea::placeholder { color: var(--text-muted); }
        .flow-drawer textarea:focus { border-color: var(--blue); }

        /* ─── MODALS ─── */
        /* hidden by default; openModal() in judge.js switches it to display: flex to center the box */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(6px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        /* max-height + overflow so tall dialogs scroll inside instead of off the screen */
        .modal {
            background: var(--surface);
            border: 1px solid var(--border-bright);
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            max-height: 86vh;
            overflow-y: auto;
            box-shadow: 0 24px 80px rgba(0,0,0,0.5);
            animation: modal-in 0.25s ease;
        }

        @keyframes modal-in {
            from { opacity: 0; transform: translateY(12px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px 16px;
            border-bottom: 1px solid var(--border);
        }

        .modal-title {
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.1rem;
        }

        .modal-close {
            background: var(--surface3);
            border: none;
            color: var(--text-muted);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .modal-close:hover { background: var(--red-dim); color: var(--red); }

        .modal-body {
            padding: 20px 24px 24px;
        }

        .modal-note {
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 20px;
            line-height: 1.5;
        }

        /* ─── ANALYTICS (time used per team, after the round) ─── */
        /* stacked bars: used (blue), prep used (purple), the rest grey */
        .analytics-team-block {
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 14px;
        }

        .analytics-team-name {
            font-family: var(--display);
            font-weight: 700;
            font-size: 0.9rem;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .zero-prep-badge {
            font-family: var(--sans);
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--red);
            background: var(--red-dim);
            padding: 3px 8px;
            border-radius: 100px;
            border: 1px solid rgba(240,82,79,0.25);
        }

        .bar-row {
            margin-bottom: 10px;
        }

        .bar-row-label {
            font-size: 0.75rem;
            color: var(--text-dim);
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
        }

        .bar-row-label span:last-child {
            color: var(--text-muted);
        }

        .bar-track {
            height: 20px;
            background: var(--surface3);
            border-radius: 4px;
            overflow: hidden;
            display: flex;
        }

        .bar-used {
            background: var(--blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: rgba(255,255,255,0.8);
        }

        .bar-prep-used {
            background: var(--purple);
        }

        .bar-unused {
            background: var(--surface3);
            flex: 1;
        }

        /* ─── ANALYTICS LEGEND ─── */
        .analytics-legend {
            display: flex;
            gap: 16px;
            font-size: 0.76rem;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--text-dim);
        }

        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 2px;
        }

        /* ─── COIN ─── */
        /* A real 3D flip: perspective on the box, preserve-3d on the inner part, and both faces
           stacked with backface-visibility hidden so only the side facing you shows. Tails is
           pre-turned 180deg. The long cubic-bezier makes it slow down like a real coin. Ate. */
        .coin-container {
            perspective: 800px;
            width: 140px;
            height: 140px;
            margin: 24px auto;
            cursor: pointer;
        }

        .coin-inner {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 2s cubic-bezier(0.4, 0.2, 0.2, 1);
        }

        .coin-face {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.1rem;
        }

        .coin-heads {
            background: radial-gradient(circle at 35% 35%, #ffe066, #c8800a);
            color: #7a4800;
            border: 6px solid #d4900e;
            box-shadow: 0 0 30px rgba(240,180,41,0.5);
        }

        .coin-tails {
            background: radial-gradient(circle at 35% 35%, #8a9ab0, #3d4a5c);
            color: #c0cad8;
            border: 6px solid #5a6a7a;
            transform: rotateY(180deg);
        }

        .coin-neutral {
            background: radial-gradient(circle at 35% 35%, #2e3548, #1a1f2e);
            color: var(--text-muted);
            border: 6px solid var(--border-bright);
        }

        .coin-result {
            text-align: center;
            font-family: var(--display);
            font-size: 1.4rem;
            font-weight: 800;
            min-height: 36px;
            color: var(--gold);
            margin: 12px 0 20px;
        }

        /* ─── CONFIRM (our own are-you-sure box; red OK by default, .neutral = gold) ─── */
        .confirm-modal {
            max-width: 380px;
            text-align: center;
        }

        .confirm-modal .modal-body {
            padding: 24px;
        }

        .confirm-title {
            font-family: var(--display);
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .confirm-msg {
            color: var(--text-dim);
            font-size: 0.875rem;
            margin-bottom: 24px;
            line-height: 1.5;
        }

        .confirm-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .btn-confirm-ok {
            background: var(--red);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            padding: 10px 22px;
            font-family: var(--sans);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-confirm-ok:hover { background: #e04340; }
        .btn-confirm-ok.neutral { background: var(--gold); color: #0a0c12; }
        .btn-confirm-ok.neutral:hover { background: var(--gold); filter: brightness(1.08); }

        .btn-confirm-cancel {
            background: var(--surface3);
            color: var(--text-dim);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 10px 22px;
            font-family: var(--sans);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-confirm-cancel:hover { background: var(--surface2); }

        /* ─── INSTRUCTIONS (the Judge's Quick Guide) ─── */
        .instructions-modal { max-width: 640px; }
        .instructions-modal .modal-body { max-height: min(76vh, 760px); overflow-y: auto; }
        .instr-part { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); }
        .instr-lead { font-size: 0.82rem; color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px; line-height: 1.5; }

        .instr-section {
            margin-bottom: 22px;
        }

        .instr-heading {
            font-family: var(--display);
            font-weight: 800;
            font-size: 0.95rem;
            color: var(--gold);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .instr-num {
            width: 22px;
            height: 22px;
            background: var(--gold);
            color: #0a0c12;
            border-radius: 50%;
            font-size: 0.7rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .instr-body {
            font-size: 0.875rem;
            color: var(--text-dim);
            line-height: 1.65;
        }

        .instr-body strong { color: var(--text); }

        .instr-mockup {
            background: var(--surface3);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 12px 16px;
            margin: 10px 0;
            font-size: 0.82rem;
            color: var(--text-dim);
        }

        /* ─── FLASH OVERLAY ─── */
        /* Full-screen big-word messages ("Copied!"). Always in the page, just invisible and
           click-through (pointer-events none) until .show fades it in. */
        .flash-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s;
        }

        .flash-overlay.show { opacity: 1; }

        .flash-text {
            font-family: var(--display);
            font-size: clamp(80px, 20vw, 260px);
            font-weight: 800;
            color: #fff;
            text-shadow: 0 0 60px rgba(255,255,255,0.3);
            letter-spacing: -0.04em;
            line-height: 1;
        }

        /* ─── PERIPHERAL TIMER ALERTS ─── */
        /* At 30 seconds left the live card glows amber, at 0 it double-pulses red, and the
           time banner (and the sticky timer, if showing) flashes too. You see it out of the
           corner of your eye while flowing, nothing jumps in front of your notes.
           !important so the animation beats the card's own state shadows. */
        @keyframes cardGlow30 {
            0%   { box-shadow: 0 0 0 0 rgba(240,180,41,0); border-color: var(--border); }
            25%  { box-shadow: 0 0 0 8px rgba(240,180,41,0.5), 0 0 32px rgba(240,180,41,0.3); border-color: rgba(240,180,41,0.8); }
            55%  { box-shadow: 0 0 0 8px rgba(240,180,41,0.5), 0 0 32px rgba(240,180,41,0.3); border-color: rgba(240,180,41,0.8); }
            100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); border-color: var(--border); }
        }
        @keyframes cardGlow0 {
            0%   { box-shadow: 0 0 0 0 rgba(240,82,79,0); border-color: var(--border); }
            20%  { box-shadow: 0 0 0 10px rgba(240,82,79,0.6), 0 0 40px rgba(240,82,79,0.4); border-color: rgba(240,82,79,0.9); }
            40%  { box-shadow: 0 0 0 4px rgba(240,82,79,0.3); border-color: rgba(240,82,79,0.5); }
            60%  { box-shadow: 0 0 0 10px rgba(240,82,79,0.6), 0 0 40px rgba(240,82,79,0.4); border-color: rgba(240,82,79,0.9); }
            100% { box-shadow: 0 0 0 0 rgba(240,82,79,0); border-color: var(--border); }
        }
        @keyframes bannerFlash30 {
            0%,100% { background: var(--surface); }
            30%, 60% { background: rgba(240,180,41,0.18); }
        }
        @keyframes bannerFlash0 {
            0%,100% { background: var(--surface); }
            25%, 50%, 75% { background: rgba(240,82,79,0.2); }
        }
        .card-glow-30 { animation: cardGlow30 1.4s ease !important; }
        .card-glow-0  { animation: cardGlow0  1.6s ease !important; }
        .banner-flash-30 { animation: bannerFlash30 1.4s ease forwards !important; }
        .banner-flash-0  { animation: bannerFlash0  1.6s ease forwards !important; }

        /* ─── TOAST ─── */
        /* one line on desktop; on phones it may wrap (see RESPONSIVE) */
        .toast {
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%) translateY(12px);
            background: var(--surface2);
            border: 1px solid var(--border-bright);
            border-left: 3px solid var(--gold);
            color: var(--text);
            font-family: var(--sans);
            font-size: 0.85rem;
            font-weight: 500;
            padding: 12px 20px;
            border-radius: var(--radius-sm);
            box-shadow: 0 8px 32px rgba(0,0,0,0.35);
            white-space: nowrap;
            max-width: calc(100vw - 32px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 9998;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* ─── MDT: ROOM, CARDS, ADVANCED ─── */
        /* the room window (code, QR, seats), shared evidence cards and moving a round
           between devices */
        .btn-room { background: rgba(240,180,41,0.12); border: 1px solid rgba(240,180,41,0.45); color: var(--gold); }
        .btn-room:hover { background: rgba(240,180,41,0.2); }
        .btn-room.open { background: var(--gold); color: #0a0c12; border-color: var(--gold); }
        .btn-gold { background: var(--gold); color: #0a0c12; border: none; font-weight: 700; }
        .btn-gold:hover { filter: brightness(1.08); }
        .btn-gold:disabled { opacity: 0.5; cursor: not-allowed; }
        #btn-advanced.adv-on { color: var(--gold); border-color: rgba(240,180,41,0.45); }
        .count-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 9px; background: var(--gold); color: #0a0c12; font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center; }
        .mdt-input { width: 100%; background: var(--surface3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--sans); font-size: 0.875rem; padding: 9px 12px; outline: none; }
        .mdt-input:focus { border-color: var(--gold); }
        .room-code-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
        /* the version tag in the Quick Guide's title */
        .mdt-release { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; color: var(--text-muted); margin-left: 8px; letter-spacing: 0; }
        /* the tour: #tour-block is an invisible full-screen layer that eats taps, #tour-ring
           is the gold outline around the thing we're explaining, and its giant 9999px
           box-shadow darkens everything else. That's the spotlight trick, no extra overlay
           needed. On narrow phones the tip is docked to the bottom instead of floating. */
        .tour-offer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
        .tour-offer span { font-size: 0.82rem; color: var(--text-muted); }
        #tour-block, #tour-ring, #tour-tip { display: none; }
        body.touring #tour-block { display: block; position: fixed; inset: 0; z-index: 9700; }
        body.touring #tour-ring { display: block; position: fixed; z-index: 9710; border-radius: 12px; pointer-events: none;
            box-shadow: 0 0 0 3px #f0b429, 0 0 0 9999px rgba(6, 8, 14, 0.62); transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s; }
        body.touring #tour-tip { display: block; position: fixed; z-index: 9720; width: min(340px, calc(100vw - 20px)); background: var(--surface); border: 1px solid var(--border-bright);
            border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
        body.touring #tour-tip.docked { left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; }
        .tt-head { display: flex; justify-content: space-between; align-items: center; }
        .tt-step { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
        .tt-x { background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 4px; }
        .tt-title { font-family: var(--display); font-size: 1.05rem; margin: 4px 0 6px; }
        .tt-text { font-size: 0.88rem; color: var(--text-dim); line-height: 1.5; }
        .tt-btns { display: flex; justify-content: space-between; margin-top: 12px; }
        /* QR codes need a white background and a quiet border, or phone cameras struggle */
        .room-qr { width: 132px; height: 132px; background: #fff; border-radius: 10px; padding: 6px; flex-shrink: 0; }
        .pair-lead { font-size: 0.88rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
        .pair-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
        .pair-row .room-qr { width: 156px; height: 156px; }
        .pair-how { flex: 1; min-width: 180px; font-size: 0.88rem; color: var(--text); line-height: 1.45; }
        .pair-or { color: var(--text-muted); font-size: 0.8rem; margin-top: 8px; }
        .pair-code { font-family: var(--mono); font-weight: 800; font-size: 1.9rem; letter-spacing: 0.12em; margin-top: 6px; color: var(--text); }
        .pair-status { margin-top: 14px; font-size: 0.82rem; color: var(--text-muted); }
        .pair-status.done { color: var(--done, #4fd18b); font-weight: 600; }
        /* bar at the bottom when this device holds a backup of another room's round: "Take over" */
        #backup-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 8000; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
            max-width: min(640px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 12px; background: #1d2333; border: 1px solid rgba(240,180,41,0.55);
            box-shadow: 0 8px 30px rgba(0,0,0,0.45); font-size: 0.85rem; color: var(--text); }
        #backup-bar .bb-btns { display: flex; gap: 8px; margin-left: auto; }
        /* "the round moved to another device" screen: above the modals, below the tour */
        #moved-ov { z-index: 9500; }
        .room-code { font-family: var(--mono); font-size: 2.4rem; font-weight: 800; letter-spacing: 0.12em; color: var(--gold); line-height: 1.1; }
        .room-link { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); word-break: break-all; margin: 6px 0 10px; }
        .room-section-title { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 8px; }
        .seat-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
        .seat-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
        .seat-table td.seat-label { color: var(--text-muted); white-space: nowrap; width: 1%; }
        .seat-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
        /* seat dots: green = joined, amber = away (phone dropped off), grey = waiting */
        .seat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-bright); }
        .seat-dot.on { background: var(--green, #34c77b); }
        .seat-dot.away { background: #f0b429; }
        .mini-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; font-size: 0.72rem; padding: 3px 8px; cursor: pointer; }
        .mini-btn:hover { color: var(--text); border-color: var(--text-muted); }
        .room-closed-banner { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
        /* drop zone for adding evidence cards (files or a link) */
        .drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--border-bright); border-radius: var(--radius-sm); padding: 22px 14px; cursor: pointer; background: rgba(74,144,217,0.06); transition: background 0.15s, border-color 0.15s; text-align: center; }
        .drop-zone:hover, .drop-zone.drag { background: rgba(74,144,217,0.14); border-color: var(--blue); }
        .drop-zone.busy { background: rgba(52,199,123,0.14); border-color: var(--green, #34c77b); }
        .drop-zone-title { font-weight: 700; color: var(--text); font-size: 0.9rem; }
        .drop-zone-sub { font-size: 0.75rem; color: var(--text-muted); }
        .dz-pick { font-size: 0.9rem; padding: 9px 22px; margin-bottom: 4px; }
        .card-add-row { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
        /* touch screens (phones, iPad without a mouse) can't really drag a file in from the
           desktop, so we hide the "or drag files" line there */
        @media (hover: none) { .dz-drag { display: none; } }
        .card-tile.is-link { border-left: 4px solid var(--blue, #5a9fe8); }
        .ct-link { font-size: 0.72rem; color: #1e3a8a; word-break: break-all; line-height: 1.35; }
        /* evidence cards look like white paper cards; auto-fill fits as many 180px columns as
           the width allows, no media queries needed */
        .card-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
        .card-tile { position: relative; background: #fff; color: #1a1a2e; border-radius: 8px; padding: 12px 12px 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 6px; min-height: 112px; }
        .card-tile .ct-name { font-weight: 700; font-size: 0.85rem; line-height: 1.3; word-break: break-word; padding-right: 18px; }
        .card-tile .ct-meta { font-size: 0.72rem; color: #5b6475; line-height: 1.4; }
        .card-tile .ct-actions { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
        .card-tile .ct-actions button { background: #eef2ff; border: 1px solid #c7d2fe; color: #1e3a8a; border-radius: 6px; font-size: 0.72rem; font-weight: 600; padding: 4px 8px; cursor: pointer; }
        .card-tile .ct-actions button:hover { background: #e0e7ff; }
        .card-tile .ct-x { position: absolute; top: 6px; right: 8px; background: none; border: none; color: #9aa3b5; font-size: 0.95rem; cursor: pointer; }
        .card-tile .ct-x:hover { color: #c62828; }
        .card-tile .ct-saved { font-size: 0.68rem; color: #2e7d32; font-weight: 600; }
        .cards-empty { color: var(--text-muted); font-size: 0.85rem; padding: 14px 0; grid-column: 1 / -1; }

/* the small, quiet text link in the footer */
.admin-link { background: none; border: none; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; opacity: 0.7; }
.admin-link:hover { opacity: 1; color: var(--text-dim); }
.admin-link.adv-on { color: var(--gold); opacity: 0.9; }

.room-code-say { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.02em; margin: 2px 0 8px; }

/* Finish Round (always available) and the finished banner */
.mdt-finish-btn { border: none; border-radius: var(--radius-sm); padding: 10px 28px; font-size: 0.85rem; font-weight: 700; font-family: var(--sans);
    letter-spacing: 0.05em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: #fff; background: #b71c1c; }
.mdt-finish-btn:hover { background: #d32f2f; }
.mdt-done { border: 1px solid rgba(240,180,41,0.45); background: rgba(240,180,41,0.08); border-radius: var(--radius); padding: 16px 18px; color: var(--text); }
.mdt-done-title { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--gold); margin-bottom: 4px; }
.mdt-done-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }

        /* ─── FOOTER ─── */
        .footer {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.78rem;
            margin-top: 40px;
            padding-bottom: 20px;
            line-height: 2;
        }

        .footer a { color: var(--text-muted); text-underline-offset: 3px; }
        .footer a:hover { color: var(--text-dim); }

        .kbd {
            display: inline-flex;
            align-items: center;
            background: var(--surface2);
            border: 1px solid var(--border-bright);
            border-radius: 4px;
            padding: 1px 6px;
            font-family: var(--mono);
            font-size: 0.8em;
            color: var(--text-dim);
        }

        /* ─── RESPONSIVE ─── */
        /* Phones and small tablets: team columns stack, card rows wrap, and the speech buttons get
           bigger (13px padding) so you can hit Start with a thumb mid-crossfire. */
        @media (max-width: 700px) {
            .pf-body-inner { grid-template-columns: 1fr; }
            .pf-team:first-of-type { border-right: none; border-bottom: 1px solid var(--border); }
            .topbar { gap: 10px; }
            .topbar-divider { display: none; }
            .time-banner-main { font-size: 1.7rem; }
            .card-row { flex-wrap: wrap; }
            .card-timer { min-width: auto; }
            .card-actions { width: 100%; justify-content: flex-end; }
            .stage-card .card-actions-row .action-btn, .stage-card .action-end { padding: 13px 14px; font-size: 0.9rem; }
            .card-actions-row .action-btn { flex: 1 1 0; }
            .prep-grid { grid-template-columns: 1fr 1fr; }
        }
        /* tiny screens: hide the read-aloud line and the flow box to save room */
        @media (max-width: 520px) {
            .judge-script, .flow-drawer { display: none; }
        }
        @media (max-width: 640px) {
            .toast { white-space: normal; width: max-content; line-height: 1.4; }
        }
        /* Narrow OR short (a phone sideways, an iPad with the keyboard up): squeeze the pinned
           prep cards so they don't eat half the screen */
        @media (max-width: 560px), (max-height: 540px) {
            .prep-card { padding: 10px 12px 12px; }
            .prep-card .card-sub, .prep-card .side-pill { display: none; }
            .prep-card .card-timer { font-size: 1.5rem; min-width: 0; }
            #prep-section { padding: 8px 0 8px; }
            #prep-section .section-heading { margin-bottom: 8px; }
        }
        /* phones: two small prep cards side by side, long names cut off with "..." */
        @media (max-width: 560px) {
            .prep-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
            .prep-card .card-row { flex-wrap: wrap; row-gap: 6px; }
            .prep-card .card-info { flex: 1 1 0; min-width: 0; }
            .prep-card .card-name { font-size: 0.92rem; }
            .prep-card .card-row { column-gap: 6px; }
            .prep-card .card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .prep-card .card-actions { width: 100%; justify-content: space-between; }
            .prep-card .card-actions .action-btn { flex: 1 1 auto; }
        }
        @media (max-width: 760px) {
            .prep-card .card-info { min-width: 0; }
            .prep-card .card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        }
        @media (max-width: 400px) {
            .prep-card { padding-left: 10px; padding-right: 10px; }
            .prep-card .card-timer { font-size: 1.25rem; }
            .prep-card .card-name { font-size: 0.86rem; }
        }
        /* very short screens: don't pin the prep timers at all */
        @media (max-height: 460px) {
            #prep-section { position: static; }
        }
    

/* ── timer theme: one color, one meaning (same as the phones and the room display) ── */
        /* It sits last (it used to be its own block at the end of <head>), so it wins over the
           page's original card styles above. Same tokens as mdt.css. */
        :root { --run: #6cb6ff; --run-digits: #d6ebff; --warn: #ffc94a; --over: #ff6e6b; --done: #4fd18b; --paused-digits: rgba(237,240,247,0.55); --go: #3d8fe0; }
        .accent-bar { display: none; }
        .stage-card.next-up { border-color: rgba(255,255,255,0.45); background: var(--surface); }
        .stage-card.next-up .card-number { background: transparent; border-color: var(--text); color: var(--text); }
        .stage-card.active, .prep-card.active {
            border-color: var(--run);
            background: linear-gradient(135deg, rgba(108,182,255,0.07) 0%, var(--surface) 55%);
            box-shadow: 0 0 0 1px var(--run), 0 8px 30px rgba(108,182,255,0.12);
        }
        .stage-card.active .card-timer, .prep-card.active .card-timer { color: var(--run-digits); }
        .stage-card.active .card-number { background: var(--run); border-color: var(--run); color: #0d1626; }
        .stage-card.active .progress-fill, .prep-card.active .progress-fill { background: var(--run); }
        /* t-warn / t-over come from judge.js: the frame turns amber in the last 30 s, red when time's up */
        .stage-card.active.t-warn {
            border-color: var(--warn);
            background: linear-gradient(135deg, rgba(255,201,74,0.08) 0%, var(--surface) 55%);
            box-shadow: 0 0 0 2px var(--warn), 0 8px 30px rgba(255,201,74,0.18);
        }
        .stage-card.active.t-warn .progress-fill { background: var(--warn); }
        .stage-card.active.t-over {
            border-color: var(--over);
            background: linear-gradient(135deg, rgba(255,110,107,0.09) 0%, var(--surface) 55%);
            box-shadow: 0 0 0 2px var(--over), 0 8px 30px rgba(255,110,107,0.2);
        }
        .stage-card.active.t-over .progress-fill { background: var(--over); }
        .card-timer.overtime, .stage-card .card-timer.overtime, .stage-card.active .card-timer.overtime { color: var(--over); }
        /* paused: dashed frame and dimmed digits, so it looks "on hold", not live and not done */
        .stage-card.paused, .prep-card.paused { border: 1px dashed rgba(255,255,255,0.4); box-shadow: none; background: var(--surface); }
        .stage-card.paused .card-timer, .prep-card.paused .card-timer { color: var(--paused-digits); }
        .stage-card.paused .card-timer.overtime { color: var(--over); }
        .stage-card.paused .progress-fill, .prep-card.paused .progress-fill { background: rgba(255,255,255,0.35); }
        .stage-card.completed .card-number { background: rgba(79,209,139,0.15); border-color: rgba(79,209,139,0.6); color: var(--done); }
        .checkmark-icon { color: var(--done); }
        /* sides: their own violet, so blue, red and green stay free for timer states; told apart
           by their words and by shape (AFF solid, NEG outline, Both neutral) */
        .side-pill.pro { background: #c4b5fd; color: #1b1530; border: 1px solid #c4b5fd; }
        .side-pill.opp { background: transparent; color: #c4b5fd; border: 1.5px solid #c4b5fd; }
        .side-pill.both { background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--border-bright); }
        /* a word for every state, above the clock */
        /* the chip sits in a column above the digits; min-height keeps the clock from jumping
           when a card has no chip */
        .card-clock { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; min-width: 110px; }
        .prep-card .card-clock { min-width: 85px; }
        .card-clock .card-timer { min-width: 0; }
        .state-chip { display: flex; min-height: 20px; align-items: center; }
        .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 99px; padding: 2px 9px; border: 1px solid var(--border-bright); color: var(--text-dim); white-space: nowrap; }
        .chip.run { color: var(--run); border-color: rgba(108,182,255,0.5); }
        .chip.warn { color: #111318; background: var(--warn); border-color: var(--warn); }
        .chip.over { color: #fff; background: var(--over); border-color: var(--over); }
        .chip.paused, .chip.next { color: var(--text); border-color: rgba(255,255,255,0.45); }
        .chip.done { color: var(--done); border-color: rgba(79,209,139,0.5); }
        /* the pulsing dot on the running chip; no pulse for people who turned off motion */
        .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mdtLive 1.6s ease-in-out infinite; }
        @keyframes mdtLive { 0%, 100% { box-shadow: 0 0 0 0 rgba(108,182,255,0.55); } 50% { box-shadow: 0 0 0 4px rgba(108,182,255,0); } }
        @media (prefers-reduced-motion: reduce) { .chip .dot { animation: none; } }
        /* buttons by role, not by state */
        .action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .action-btn svg { flex-shrink: 0; }
        .action-start { background: var(--go); color: #fff; }
        .action-start:hover:not(:disabled) { background: #4f9cea; box-shadow: 0 4px 12px rgba(61,143,224,0.35); }
        .action-pause { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.35); }
        .action-pause:hover { background: rgba(255,255,255,0.08); }
        .action-end { background: transparent; color: var(--over); border: 1px solid rgba(255,110,107,0.6); }
        .action-end:hover { background: rgba(255,110,107,0.1); border-color: var(--over); }
        /* reopen a finished speech: just a quiet link, because it's rare (and rarely needed mid-round) */
        .action-reopen { background: none; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; padding: 8px 6px; font-weight: 600; }
        .action-reopen:hover { color: var(--text); }
        .card-actions-row .action-reset-icon { flex: 0 0 auto; }
        /* Up next: unmistakable, not faint */
        .stage-card.next-up { border-color: rgba(237,240,247,0.85); box-shadow: 0 0 0 1px rgba(237,240,247,0.85), 0 10px 30px rgba(0,0,0,0.35); background: var(--surface2); }
        .stage-card.next-up::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #edf0f7; }
        .stage-card.next-up .chip.next { background: #edf0f7; color: #111318; border-color: #edf0f7; }
        /* a quick white outline blink after jumping to a card from the round rail */
        .stage-card.jumped { animation: mdtJump 1.4s ease; }
        @keyframes mdtJump { 0%, 100% { outline: 0 solid transparent; } 20%, 60% { outline: 3px solid rgba(237,240,247,0.6); outline-offset: 3px; } }
        /* pinned area: prep, round progress, current speech */
        /* no-prep: formats without prep pools (Congress, Extemp) keep the pinned area for the rail */
        #prep-section.no-prep { padding-top: 8px; }
        #prep-section.no-prep > .section-heading, #prep-section.no-prep > .prep-grid { display: none; }
        /* the round rail: one segment per speech, tap one to jump to it */
        .round-rail { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
        #prep-section.no-prep .round-rail { margin-top: 0; }
        .rr-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; min-width: 8.5em; }
        .rr-segs { flex: 1; display: flex; gap: 3px; }
        .rr-seg { flex: 1; height: 8px; border-radius: 3px; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.10); }
        .rr-seg:hover { background: rgba(255,255,255,0.3); }
        .rr-seg.done { background: rgba(79,209,139,0.55); }
        .rr-seg.cur.run { background: var(--run); height: 12px; }
        .rr-seg.cur.next { background: #edf0f7; height: 12px; }
        /* outline with a negative offset draws the dashes inside the segment, so it doesn't grow */
        .rr-seg.cur.paused { background: transparent; outline: 1.5px dashed rgba(237,240,247,0.7); outline-offset: -1.5px; height: 12px; }
        /* the now strip: a compact bar with the current speech, used when its card can't be pinned */
        .now-strip { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 14px 10px 16px; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border-bright); }
        .now-strip[hidden] { display: none; } /* our display: flex would otherwise beat the hidden attribute */
        .now-strip.ns-next { border-color: rgba(237,240,247,0.85); box-shadow: 0 0 0 1px rgba(237,240,247,0.85); }
        .now-strip.ns-run { border-color: var(--run); box-shadow: 0 0 0 1px var(--run); }
        .now-strip.ns-warn { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn); }
        .now-strip.ns-over { border-color: var(--over); box-shadow: 0 0 0 2px var(--over); }
        .now-strip.ns-paused { border-style: dashed; border-color: rgba(255,255,255,0.45); }
        .now-strip.ns-next .chip.next { background: #edf0f7; color: #111318; border-color: #edf0f7; }
        .ns-name { flex: 1; min-width: 0; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ns-name strong { font-family: var(--display); }
        .ns-name .card-sub { display: inline; margin-left: 6px; color: var(--text-muted); font-size: 0.8rem; }
        .ns-time { font-family: var(--mono); font-weight: 700; font-size: 1.5rem; color: var(--text); }
        .now-strip.ns-run .ns-time, .now-strip.ns-warn .ns-time { color: var(--run-digits); }
        .now-strip.ns-paused .ns-time { color: var(--paused-digits); }
        .ns-time.overtime { color: var(--over) !important; }
        .ns-acts { display: flex; gap: 6px; }
        .ns-acts .action-btn { white-space: nowrap; }
        .ns-jump { background: transparent; border: 1px solid var(--border-bright); color: var(--text-dim); border-radius: var(--radius-sm); padding: 7px; cursor: pointer; display: inline-flex; }
        .ns-jump:hover { color: var(--text); border-color: var(--text-muted); }
        /* the current speech's card, pinned while scrolling */
        /* judge.js measures the pinned prep area and sets --pin-top, so the card sticks right under
           it (200px is just a fallback). Solid background so scrolled cards don't show through. */
        .stage-card.pin-now { position: sticky; top: var(--pin-top, 200px); bottom: 10px; z-index: 40; background-color: var(--surface2); }
        .stage-card.pin-now.active, .stage-card.pin-now.paused { background-color: var(--surface); }
        /* phones: the strip wraps into two rows; order sets chip, name, time, then the buttons */
        @media (max-width: 640px) {
            .now-strip { flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
            .ns-chip { order: 0; }
            .ns-name { order: 1; flex: 1 1 60%; }
            .ns-time { order: 2; font-size: 1.25rem; }
            .ns-acts { order: 3; flex: 1 1 auto; }
            .ns-acts .action-btn { flex: 1 1 0; padding: 10px 8px; white-space: nowrap; }
            .ns-jump { order: 4; }
            .rr-label { min-width: 0; }
        }
        /* round over: prep used vs left */
        .prep-card.prep-summary { border-style: solid; }
        .prep-sum { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .ps-used { font-size: 0.85rem; color: var(--text); }
        .ps-used b { font-family: var(--mono); }
        .ps-left { font-size: 0.78rem; color: var(--text-muted); font-family: var(--mono); }
        /* audio settings: where the bells ring */
        .bell-where { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; font-size: 0.86rem; }
        .bell-where .bw-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
        .bell-where label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .bw-status, .bw-note { font-size: 0.78rem; color: var(--text-muted); }

/* Room window: which display rings the bells */
.bell-pick { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 5px; }
.bell-pick .bp-head { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.bell-pick label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); font-size: 0.82rem; }

/* ---------------------------------------------------------------------------
   Team Setup for every format (LD, Big Questions, Extemp Debate, plus the extra
   Policy buttons). Same look as the PF panel: little copy icon in the header,
   a footer row with the "sides come from your pairing" note and the swap button.
   --------------------------------------------------------------------------- */
.ts-copy { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--text-muted); opacity: 0.4; transition: all 0.2s; display: flex; align-items: center; }
.ts-copy:hover, .ts-copy:focus-visible { opacity: 1; color: var(--gold); }
.ts-order { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.pf-field[hidden], .ts-per-side[hidden], #gen-teams[hidden], #gen-head[hidden], #gen-coin[hidden] { display: none; }
.ts-team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ts-mini { display: flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-family: var(--sans); font-size: 0.7rem; font-weight: 600; padding: 4px 8px; cursor: pointer; transition: all 0.2s; }
.ts-mini:hover, .ts-mini:focus-visible { border-color: var(--gold); color: var(--gold); }
.ts-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding: 12px 16px 4px; border-top: 1px solid var(--border); }
.ts-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; max-width: 430px; flex: 1 1 260px; }
.ts-foot-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-btn { display: flex; align-items: center; gap: 6px; background: var(--surface3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-family: var(--sans); font-size: 0.78rem; font-weight: 600; padding: 7px 13px; cursor: pointer; transition: all 0.2s; }
.ts-btn:hover, .ts-btn:focus-visible { border-color: var(--blue); color: var(--blue); }
.ts-per-side { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.ts-per-side select { background: var(--surface3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--sans); font-size: 0.8rem; padding: 6px 8px; }
/* a name or code a debater typed on their phone (the judge can still change it) */
.phone-tag { margin-left: 6px; font-size: 0.66rem; letter-spacing: 0.04em; color: #7ee2a8; background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.35); border-radius: 100px; padding: 1px 7px; text-transform: none; font-weight: 600; white-space: nowrap; }

/* the coin is a drawn US quarter: the SVG brings its own silver, so the face is just a round frame */
.coin-container { width: 170px; height: 170px; }
.coin-face.coin-quarter { background: none; border: 0; box-shadow: 0 10px 28px rgba(0,0,0,0.45); padding: 0; overflow: hidden; }
.coin-face.coin-quarter svg { display: block; }