/* ==============================================================================
   MDT Debate Timer: shared styles for the landing and debater pages.
   Designed, built and deployed by Lucas & Max, two brothers who do speech &
   debate and wanted to give back to the community.
   Used by the start page, the debater join page, the room display and the
   disclaimer. The judge page has its own judge.css, but the timer-state colors
   below mean the same thing on both, so a room reads as one app.
   ============================================================================== */

/* ---- 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);
    --blue: #5a9fe8; --blue-dim: rgba(90,159,232,0.15);
    --green: #34c77b; --green-dim: rgba(52,199,123,0.12);
    --red: #f0524f; --red-dim: rgba(240,82,79,0.15);
    --purple: #b89ffc;
    /* timer states: one meaning each, the same on the judge page, phones and the room display */
    --run: #6cb6ff;            /* a clock is ticking (frame, dot, bar) */
    --run-digits: #d6ebff;     /* running digits: light, so they read in glare and from across the room */
    --warn: #ffc94a;           /* last 30 seconds, and nothing else */
    --over: #ff6e6b;           /* time's up / overtime */
    --done: #4fd18b;           /* finished */
    --paused-digits: rgba(237,240,247,0.55);
    --go: #3d8fe0;             /* Start / Resume buttons */
    --side: #c4b5fd;           /* AFF / NEG labels (solid = Affirmative, outline = Negative) */
    --text: #edf0f7; --text-dim: #aab3d0; --text-muted: #7a87a8;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Instrument Sans', system-ui, sans-serif;
    --display: 'Syne', system-ui, sans-serif;
    --radius: 12px; --radius-sm: 8px;
}

/* ---- base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* stop iPhone Safari from bumping up font sizes when the phone turns sideways */
html { -webkit-text-size-adjust: 100%; }
/* soft glow in the top left over the flat background; "fixed" so it doesn't scroll away */
body { background: radial-gradient(1200px 600px at 20% -10%, #26304a 0%, var(--bg) 60%) fixed, var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; line-height: 1.45; }
a { color: var(--gold); }
/* env(safe-area-inset-*) keeps content off the notch and home bar on iPhones;
   the big bottom padding leaves room for the toast and the browser's toolbar */
.wrap { max-width: 860px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* ---- top bar: wordmark, room code, connection dot ---- */
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.wordmark span { color: var(--gold); }
a.wordmark.home-link { color: var(--text); text-decoration: none; }
.top-room { font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim); }
.top-room b { color: var(--gold); letter-spacing: 0.08em; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-muted); }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.conn.off .dot { background: #f0b429; }

/* ---- panels, labels, inputs ---- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.panel h2 { font-family: var(--display); font-size: 1.15rem; margin-bottom: 6px; }
.muted { color: var(--text-muted); font-size: 0.85rem; }
.dim { color: var(--text-dim); }
.label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 14px 0 6px; display: block; }
.input, select.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: 1rem; padding: 11px 12px; outline: none; }
.input:focus { border-color: var(--gold); }
.code-input { font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.25em; text-transform: uppercase; text-align: center; }
/* side-by-side fields that wrap to one per line on narrow phones */
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

/* ---- buttons: gold = main action, blue = Start/Resume, outline red = End ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-bright); background: var(--surface2); color: var(--text); font-family: var(--sans); font-weight: 600; font-size: 0.9rem; padding: 10px 16px; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--text-muted); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #0a0c12; font-weight: 700; }
.btn-start { background: var(--go); border-color: var(--go); color: #fff; }
.btn-pause { background: transparent; border-color: rgba(255,255,255,0.35); color: var(--text); }
.btn-end { background: transparent; border-color: rgba(255,110,107,0.65); color: var(--over); }
.btn-end:hover { background: rgba(255,110,107,0.1); border-color: var(--over); }
.btn svg { flex-shrink: 0; }
.btn-big { font-size: 1.05rem; padding: 14px 28px; min-width: 160px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link-btn { background: none; border: none; color: var(--gold); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; padding: 0; }
.pill { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; border: 1px solid; }
/* Sides have their own color (violet, not used by any timer state) and differ by shape:
   Affirmative is a solid pill, Negative an outlined one, crossfire ("Both") neutral.
   Solid vs hollow reads from across the room and doesn't depend on color vision. */
.pill.pro { color: #1b1530; background: var(--side); border-color: var(--side); }
.pill.opp { color: var(--side); background: transparent; border: 1.5px solid var(--side); }
.pill.both { color: var(--text-dim); border-color: var(--border-bright); background: rgba(255,255,255,0.04); }
/* state chips: a word for every timer state
   (a word AND a color, so nobody has to rely on color vision to know it's overtime) */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 99px; padding: 3px 10px; 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); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mdtLive 1.6s ease-in-out infinite; }
/* the "live" dot pulses a soft ring, like it's breathing; off for reduced motion */
@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; } }

/* ---- toast: little message that slides up from the bottom, then fades ---- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); background: var(--surface2); border: 1px solid var(--border-bright); border-left: 3px solid var(--gold); color: var(--text); font-size: 0.9rem; padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: all 0.25s; z-index: 2000; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- footer ---- */
.footer { text-align: center; color: var(--text-muted); font-size: 0.75rem; margin-top: 30px; }
.footer a { color: var(--text-muted); text-underline-offset: 3px; }
.footer a:hover { color: var(--text-dim); }