:root {
    /* Palette */
    --bg: #112730;
    --bg-soft: #18323c;
    --surface: #ffffff;
    --surface-muted: #f4f5fb;
    --ink: #1a1c2e;
    --ink-soft: #565a7e;
    --line: #e4e6f2;

    /* Vendi official palette */
    --vendi-red: #c92031;
    --vendi-teal: #244d59;
    --vendi-blue: #61b0c2;
    --vendi-lime: #b7c033;

    --brand: var(--vendi-red);   /* primary / accent */
    --brand-dark: #a81a28;
    --brand-ink: #ffffff;
    --accent: var(--vendi-teal);
    --ok: #18b06b;
    --bad: #c92031;
    --warn: var(--vendi-lime);

    /* Answer-option colors, by index — the four official colors first */
    --opt-0: var(--vendi-red);
    --opt-1: var(--vendi-teal);
    --opt-2: var(--vendi-lime);
    --opt-3: var(--vendi-blue);
    --opt-4: #e08a1e;
    --opt-5: #7e5ba6;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 10px 40px rgba(15, 18, 38, 0.12);
    --shadow-sm: 0 2px 10px rgba(15, 18, 38, 0.08);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--surface-muted);
    line-height: 1.5;
    min-height: 100vh;
}

/* Play / host screens get the dark immersive background */
body.stage {
    background:
        radial-gradient(1200px 600px at 80% -10%, #244d59 0%, transparent 60%),
        radial-gradient(900px 500px at -10% 110%, #1c3f49 0%, transparent 55%),
        var(--bg);
    color: #fff;
}

a { color: var(--brand); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }

/* Layout -------------------------------------------------------------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.brand {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.brand .dot { color: var(--brand); }
.nav { display: flex; align-items: center; gap: 18px; }
.nav .who { color: var(--ink-soft); font-size: .9rem; }

.container { max-width: 960px; margin: 0 auto; padding: 32px 24px 80px; }
.container.narrow { max-width: 540px; }

/* Cards & panels ------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 18px; }

.stack > * + * { margin-top: 14px; }

/* Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 650;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 11px 18px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-muted); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-lg { padding: 16px 26px; font-size: 1.1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-microsoft {
    background: #fff; color: #2f2f2f; border-color: var(--line);
    font-weight: 600;
}
.btn-microsoft:hover { background: #fafafa; }
.btn-microsoft .ms-logo {
    display: inline-grid; grid-template-columns: 9px 9px; grid-gap: 2px;
}
.btn-microsoft .ms-logo i { width: 9px; height: 9px; display: block; }
.btn-microsoft .ms-logo i:nth-child(1){background:#f25022}
.btn-microsoft .ms-logo i:nth-child(2){background:#7fba00}
.btn-microsoft .ms-logo i:nth-child(3){background:#00a4ef}
.btn-microsoft .ms-logo i:nth-child(4){background:#ffb900}

/* Forms --------------------------------------------------------------- */
label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: 6px; }
input[type=text], input[type=password], input[type=number], textarea, select {
    width: 100%;
    font: inherit;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(201, 32, 49, .18);
}
.field + .field { margin-top: 16px; }
.help { color: var(--ink-soft); font-size: .85rem; margin-top: 5px; }
.form-error { color: var(--bad); font-size: .85rem; margin-top: 5px; }

/* Flash --------------------------------------------------------------- */
.flash { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; font-weight: 500; }
.flash-error { background: #fde8ec; color: #9c1c33; }
.flash-success { background: #e4f7ee; color: #0f6b42; }
.flash-info { background: #e8effd; color: #1c4a9c; }

/* Pills & meta -------------------------------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-muted); color: var(--ink-soft);
    border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600;
}
.muted { color: var(--ink-soft); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spread { display: flex; gap: 10px; flex-wrap: wrap; }

/* Lists --------------------------------------------------------------- */
.list { list-style: none; padding: 0; margin: 0; }
.list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff;
}
.list-item + .list-item { margin-top: 10px; }

/* Stage (player/host live screens) ----------------------------------- */
.stage-wrap { max-width: 880px; margin: 0 auto; padding: 28px 20px 60px; }
.stage-center { min-height: 80vh; display: grid; place-items: center; text-align: center; }
.bigcode {
    font-size: clamp(2.6rem, 9vw, 5rem); font-weight: 900; letter-spacing: .12em;
    background: #fff; color: var(--ink); padding: 10px 26px; border-radius: 16px;
    display: inline-block;
}
.question-text { font-size: clamp(1.5rem, 4.4vw, 2.6rem); font-weight: 800; }

/* Answer option grid */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
@media (max-width: 560px) { .options { grid-template-columns: 1fr; } }
.option {
    --c: var(--brand);
    background: var(--c); color: #fff; border: none; cursor: pointer;
    border-radius: 14px; padding: 22px 20px; font-size: 1.2rem; font-weight: 700;
    text-align: left; display: flex; align-items: center; gap: 14px;
    font-family: inherit; transition: transform .06s ease, filter .15s ease, opacity .2s ease;
    min-height: 84px;
}
.option:hover { filter: brightness(1.06); }
.option:active { transform: scale(.985); }
.option .glyph {
    width: 34px; height: 34px; flex: none; border-radius: 8px;
    background: rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 900;
}
.option.dim { opacity: .35; }
.option.is-correct { outline: 4px solid #fff; }
.option.is-wrong { opacity: .45; }
.option[disabled] { cursor: default; }

.opt-c0 { --c: var(--opt-0); }
.opt-c1 { --c: var(--opt-1); }
.opt-c2 { --c: var(--opt-2); }
.opt-c3 { --c: var(--opt-3); }
.opt-c4 { --c: var(--opt-4); }
.opt-c5 { --c: var(--opt-5); }

/* Player chips (lobby) */
.players { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.player-chip {
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
    padding: 8px 16px; border-radius: 999px; font-weight: 600;
}

/* Leaderboard */
.leaderboard { max-width: 560px; margin: 24px auto 0; }
.lb-row {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.1); border-radius: 12px; padding: 14px 18px;
}
.lb-row + .lb-row { margin-top: 10px; }
.lb-row .rank { font-weight: 900; font-size: 1.3rem; width: 36px; }
.lb-row .name { flex: 1; font-weight: 700; }
.lb-row .pts { font-weight: 800; }
.lb-row.top1 { background: linear-gradient(90deg, #ffd76b, #f0a01e); color: #4a3500; }
.lb-row.top2 { background: rgba(220,224,240,.35); }
.lb-row.top3 { background: rgba(205,160,120,.35); }

.timer-bar { height: 10px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; margin-top: 18px; }
.timer-bar > span { display: block; height: 100%; background: #fff; width: 100%; transition: width 1s linear; }

.waiting { font-size: 1.3rem; opacity: .85; }
.center { text-align: center; }
.mt { margin-top: 22px; }
.big-count { font-size: 3rem; font-weight: 900; }