:root {
    color-scheme: dark;
    --ink: #fff;
    --muted: #d8cce8;
    --night: #140923;
    --panel: rgba(32, 15, 55, .78);
    --cyan: #19d5dc;
    --pink: #ff3d8d;
    --lime: #b9ff18;
    --yellow: #ffc720;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    color: var(--ink);
    font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 16% 18%, rgba(25, 213, 220, .22), transparent 26rem),
        radial-gradient(circle at 88% 85%, rgba(255, 61, 141, .21), transparent 30rem),
        radial-gradient(circle at 75% 4%, rgba(136, 48, 234, .2), transparent 24rem),
        var(--night);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 4rem);
}

.hero {
    width: min(1100px, 100%);
    padding: clamp(1.5rem, 4vw, 4.5rem);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(42, 19, 70, .88), rgba(18, 7, 33, .76));
    box-shadow: 0 32px 100px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-weight: 900;
    letter-spacing: .18em;
}

.brand img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(25, 213, 220, .35);
}

.intro { margin: clamp(3rem, 7vw, 6.5rem) 0 2.5rem; }
.eyebrow { color: var(--lime); font-weight: 900; letter-spacing: .18em; }

h1 {
    max-width: 850px;
    margin: .5rem 0 1.2rem;
    font-size: clamp(3.2rem, 9vw, 7.8rem);
    line-height: .86;
    letter-spacing: -.065em;
}

h1 em {
    color: transparent;
    font-style: normal;
    background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow));
    background-clip: text;
    -webkit-background-clip: text;
}

.lead {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.1rem, 2.2vw, 1.55rem);
    line-height: 1.55;
}

.join-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(185, 255, 24, .34);
    border-radius: 20px;
    background: rgba(185, 255, 24, .07);
}

.join-card strong { font-size: 1.12rem; }
.join-card p { margin: .35rem 0 0; color: var(--muted); line-height: 1.5; }

.pulse {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 8px rgba(185, 255, 24, .12), 0 0 24px var(--lime);
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.2rem;
}

.features span {
    padding: .65rem .9rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.05);
    font-size: .9rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    .hero { border-radius: 24px; }
    .brand img { width: 52px; height: 52px; }
    .brand { font-size: .85rem; }
    .intro { margin-top: 3.2rem; }
}

.demo-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.25rem 0}.demo-actions a,.demo-button{display:inline-block;padding:1rem 1.3rem;border:0;border-radius:15px;background:var(--lime);color:#140923;font-weight:900;text-decoration:none;cursor:pointer}.demo-actions a+ a{background:var(--cyan)}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;border-bottom:1px solid #ffffff22}.host-layout{min-height:100vh}.login-panel,.phone-card{background:#221238ee;border:1px solid #ffffff2b;border-radius:28px;box-shadow:0 25px 70px #0007}.login-panel{width:min(600px,90%);margin:12vh auto;padding:3rem}.login-panel form{display:flex;gap:1rem}.login-panel input,input{width:100%;padding:1rem;border:1px solid #ffffff35;border-radius:14px;background:#fff;color:#160b22;font-size:1.1rem}#dashboard{display:grid;grid-template-columns:1fr 330px;min-height:calc(100vh - 82px)}.stage{display:grid;align-content:center;padding:4vw;text-align:center}.stage h1{font-size:clamp(2.8rem,7vw,6rem);line-height:.95;margin:.4em 0}.big-code{font-size:clamp(4rem,12vw,10rem);font-weight:1000;color:var(--yellow);margin:.2em}.controls{padding:1.2rem;background:#10071ddd;border-left:1px solid #ffffff1f;overflow:auto}.qr-card,.player-box{padding:1.2rem;margin-bottom:1rem;border-radius:20px;background:#fff;color:#170b23;text-align:center}.qr-card #qr{display:grid;place-items:center}.qr-card p{margin:.5rem}.player-box>strong{display:block;font-size:3rem}.player-pill{display:inline-block;margin:.25rem;padding:.35rem .6rem;border-radius:999px;background:#dafd8c}.player-pill.out{opacity:.45;text-decoration:line-through}.control-buttons{display:grid;gap:.55rem}.control-buttons button,.answer{border:0;border-radius:15px;padding:1rem;font-weight:900;cursor:pointer}.control-buttons button{background:#ffffff14;color:#fff;text-align:left}.control-buttons .danger{background:#9d2149}.host-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.host-options div{display:flex;justify-content:space-between;align-items:center;padding:1.4rem;border:2px solid #ffffff25;border-radius:20px;font-size:1.5rem}.host-options b{color:var(--yellow)}.host-options .winner{border-color:var(--lime);background:#b9ff1820}.correct{color:var(--lime)}.red-green{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.red-green div{padding:3rem;border-radius:25px;font-size:3rem;font-weight:1000}.green{background:#12a952!important;color:#fff!important}.red{background:#e6343a!important;color:#fff!important}.survivors{font-size:2rem}.finalists{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.finalists span{padding:1rem 1.5rem;border-radius:999px;background:var(--lime);color:#142000;font-size:1.4rem;font-weight:900}.player-body{display:grid;place-items:center;padding:1rem;transition:background .4s}.phone{width:min(520px,100%)}.phone-header{display:flex;align-items:center;gap:.7rem;padding:1rem}.phone-header img{width:48px;height:48px;border-radius:50%}.phone-header #status{margin-left:auto;color:var(--muted);font-size:.8rem}.phone-card{padding:clamp(1.4rem,6vw,2.5rem)}.phone-card h1{font-size:clamp(2rem,9vw,3.8rem);line-height:1;margin:.45em 0}.phone-card label{display:block;margin:1rem 0;color:var(--muted)}.phone-card input{margin-top:.35rem}.phone-card .primary{width:100%}.answers{display:grid;gap:.8rem}.answer{width:100%;background:#fff;color:#190b26;text-align:left;font-size:1.12rem}.answer.selected{outline:5px solid var(--yellow)}.answer:disabled{opacity:.65}.answers.split{grid-template-columns:1fr 1fr}.answers.split .answer{text-align:center;min-height:150px;font-size:1.35rem}.result-text{font-size:1.4rem}.result-green{background:#07983c}.result-red{background:#c42134}.result-green .phone-card,.result-red .phone-card{background:#0003}#error{color:#ff8fb5}@media(max-width:800px){#dashboard{grid-template-columns:1fr}.controls{border-left:0;border-top:1px solid #ffffff1f}.host-options,.red-green{grid-template-columns:1fr}.login-panel form{display:grid}}
.host-sequencer .next-step{min-height:86px;background:var(--lime);color:#140923;text-align:center;font-size:1.45rem;box-shadow:0 8px 0 #6e9910}.host-sequencer .next-step:active{transform:translateY(4px);box-shadow:0 4px 0 #6e9910}.host-sequencer .next-step:disabled{opacity:.55;cursor:wait}.space-hint{text-align:center;color:var(--muted);margin:.15rem 0 1rem}.round-intro{width:min(900px,100%);margin:auto;padding:clamp(2rem,5vw,5rem);border:2px solid #ffffff30;border-radius:38px;background:linear-gradient(135deg,#20d9dc22,#ff4f9a22);box-shadow:0 28px 90px #0006}.round-intro .round-number{display:inline-block;margin:0;padding:.65rem 1rem;border-radius:999px;background:var(--lime);color:#140923;font-weight:1000;letter-spacing:.15em}.round-intro h1{margin:.35em 0}.round-intro>p:last-child{font-size:clamp(1.15rem,2vw,1.6rem);color:#e5d9ed}
.host-body{height:100dvh;min-height:0;overflow:hidden}.host-body .host-layout{height:100dvh;min-height:0;overflow:hidden}.host-body:has(> [role="status"]) .host-layout{padding-top:41px}.host-body:has(> [role="status"])>.host-layout{height:100dvh}.host-body>[role="status"]{position:fixed!important}.host-body .topbar{height:clamp(62px,10vh,82px);min-height:62px}.host-body #dashboard{height:calc(100dvh - clamp(62px,10vh,82px));min-height:0;overflow:hidden}.host-body:has(> [role="status"]) #dashboard{height:calc(100dvh - 41px - clamp(62px,10vh,82px))}.host-body .stage{position:relative;height:100%;min-height:0;padding:clamp(12px,2.5vh,28px) clamp(18px,3vw,52px);overflow:hidden}.host-body .controls{height:100%;min-height:0;overflow:hidden;padding:clamp(.65rem,1.6vh,1.2rem)}.host-body .qr-card,.host-body .player-box{padding:clamp(.55rem,1.4vh,1.2rem);margin-bottom:clamp(.45rem,1vh,1rem)}.host-body .qr-card #qr canvas,.host-body .qr-card #qr img{width:min(190px,20vh)!important;height:min(190px,20vh)!important}.host-body .qr-card p{font-size:clamp(.72rem,1.6vh,1rem)}.host-body .player-box>strong{font-size:clamp(1.8rem,5vh,3rem)}.host-body .player-box #players{max-height:clamp(34px,7vh,68px);overflow:hidden}.host-body .player-pill{font-size:clamp(.62rem,1.4vh,.85rem);margin:.12rem;padding:.2rem .42rem}.host-body .host-sequencer .next-step{min-height:clamp(56px,10vh,86px);font-size:clamp(1.05rem,2.5vh,1.45rem)}.host-body .space-hint{font-size:clamp(.68rem,1.5vh,.9rem);margin:.1rem 0 clamp(.35rem,1vh,1rem)}.host-body .control-buttons .danger{padding:clamp(.55rem,1.5vh,1rem)}.question-screen,.result-screen{position:relative;width:100%;height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);align-content:center;gap:clamp(6px,1.2vh,16px)}.question-screen .eyebrow,.result-screen .eyebrow{margin:0}.host-body .question-screen h1,.host-body .result-screen h1{max-width:min(1200px,96%);margin:0 auto;font-size:clamp(2rem,6.2vh,5.3rem);line-height:.98;text-wrap:balance}.host-body .question-screen .host-options,.host-body .result-screen .host-options{align-self:stretch;min-height:0;gap:clamp(.5rem,1.4vh,1rem)}.host-body .host-options div{min-height:0;padding:clamp(.65rem,1.7vh,1.4rem);font-size:clamp(1rem,2.5vh,1.5rem);line-height:1.15}.host-body .red-green{align-self:center;gap:clamp(1rem,2vh,2rem)}.host-body .red-green div{padding:clamp(1.2rem,4vh,3rem);font-size:clamp(1.8rem,5vh,3rem)}.question-stats{display:flex;justify-content:center;gap:clamp(.5rem,1.5vw,1.25rem)}.question-stats>div{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:.45rem;padding:.55rem .9rem;border:1px solid #ffffff2d;border-radius:16px;background:#10071dcc}.question-stats span{grid-column:1/-1;color:var(--muted);font-size:clamp(.62rem,1.4vh,.85rem);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.question-stats strong{font-size:clamp(1.35rem,3.5vh,2.2rem);line-height:1}.question-stats small{color:var(--muted)}.timer-stat.urgent strong{color:var(--pink)}.timer-stat.expired{border-color:var(--pink);background:#ff3d8d22}.answer-lock{position:absolute;inset:0;z-index:5;display:grid;place-items:center;border-radius:28px;background:#090411bb;backdrop-filter:blur(5px)}.answer-lock>div{display:grid;gap:.5rem;padding:clamp(1.2rem,3vw,2.4rem);border:3px solid var(--pink);border-radius:24px;background:#1b0b2b;text-align:center;box-shadow:0 0 70px #ff3d8d66}.answer-lock strong{font-size:clamp(1.8rem,5vw,4.2rem);color:var(--pink)}.answer-lock span{font-size:clamp(1rem,2vw,1.4rem)}.locked-phone{position:relative;min-height:360px}.phone-lock{position:fixed;inset:0;border-radius:0}.host-body .explanation{font-size:clamp(.9rem,2.2vh,1.25rem);margin:.2rem auto;max-width:1000px}.host-body .survivors{font-size:clamp(1.2rem,3vh,2rem);margin:.3rem}@media(max-width:800px){.host-body #dashboard{grid-template-columns:minmax(0,1fr) 250px}.host-body .controls{border-left:1px solid #ffffff1f;border-top:0}.host-body .qr-card #qr{display:none}.host-body .host-options,.host-body .red-green{grid-template-columns:1fr 1fr}}@media(max-height:620px){.host-body .qr-card #qr{display:none}.host-body .qr-card p{margin:.15rem}.host-body .player-box #players{display:none}.question-stats>div{padding:.35rem .65rem}}
.lobby-screen{width:min(1200px,100%);height:100%;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,34%);align-items:center;gap:clamp(20px,5vw,70px);text-align:left}.lobby-copy h1{margin:.15em 0;font-size:clamp(2.5rem,7vh,6rem)}.lobby-copy .big-code{margin:.12em 0;font-size:clamp(3.4rem,11vh,9rem)}.lobby-player-count{font-size:clamp(1rem,2.4vh,1.5rem);font-weight:800}.lobby-qr-card{justify-self:center;display:grid;place-items:center;gap:clamp(.25rem,1vh,.7rem);padding:clamp(.8rem,2vh,1.5rem);border-radius:28px;background:#fff;color:#170b23;box-shadow:0 24px 70px #0007;text-align:center}.lobby-qr-card #lobby-qr canvas,.lobby-qr-card #lobby-qr img{display:block;width:min(280px,27vh,26vw)!important;height:min(280px,27vh,26vw)!important}.lobby-qr-card strong{font-size:clamp(1rem,2.2vh,1.35rem)}.lobby-qr-card span{font-weight:900}@media(max-width:900px){.lobby-screen{grid-template-columns:minmax(0,1fr) minmax(190px,30%);gap:18px}.lobby-qr-card #lobby-qr canvas,.lobby-qr-card #lobby-qr img{width:min(220px,24vh,23vw)!important;height:min(220px,24vh,23vw)!important}}@media(max-height:620px){.lobby-copy h1{font-size:clamp(2rem,7vh,3.4rem)}.lobby-copy .big-code{font-size:clamp(3rem,12vh,5rem)}.lobby-qr-card{padding:.55rem}.lobby-qr-card #lobby-qr canvas,.lobby-qr-card #lobby-qr img{width:min(180px,25vh)!important;height:min(180px,25vh)!important}.lobby-qr-card strong{font-size:.9rem}}
.choice-positive{background:#10cbd1!important;color:#071e2b!important}.choice-negative{background:#8f55e8!important;color:#fff!important}.finish-position{font-size:clamp(7rem,38vw,14rem)!important;line-height:.8!important;margin:.18em 0!important}.result-red .finish-position{color:#fff}.result-green .phone-card,.result-red .phone-card{border-color:#ffffff66}