:root{--purple:#4c1d95;--purple2:#6d28d9;--orange:#f97316;--ink:#17142a;--muted:#6b7280;--cream:#faf9f7}*{box-sizing:border-box}body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream)}h1,h2,.brand{font-family:'Plus Jakarta Sans',sans-serif}.landing{background:radial-gradient(circle at 70% 35%,rgba(255,255,255,.18),transparent 23%),linear-gradient(120deg,#3b137b,#6d28d9 60%,#4c1d95);color:#fff;overflow:hidden;position:relative}.landing:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent)}.landing>*{position:relative}.brand{display:flex;align-items:center;gap:.7rem;color:#fff;font-weight:800;font-size:1.05rem}.brand-mark{width:2.1rem;height:2.1rem;border-radius:.7rem;background:var(--orange);display:grid;place-items:center;color:white;font-size:1rem;box-shadow:0 8px 20px #f9731644}.btn-ghost{color:white;border:1px solid #ffffff50;border-radius:12px;padding:.65rem 1rem}.btn-ghost:hover{background:#fff;color:var(--purple)}.hero-grid{min-height:calc(100vh - 150px);display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}.eyebrow{font-size:.78rem;letter-spacing:.14em;font-weight:800;color:#fcd34d}.pulse-dot{display:inline-block;width:8px;height:8px;background:#34d399;border-radius:50%;margin-right:.5rem;box-shadow:0 0 0 6px #34d39922}.hero-copy h1{font-size:clamp(3.2rem,6vw,6rem);line-height:.95;letter-spacing:-.055em;margin:1.2rem 0}.hero-copy h1 span{color:#fbbf24}.hero-copy>p{font-size:1.12rem;line-height:1.7;color:#e9ddff;max-width:580px}.join-card{background:#fff;color:var(--ink);padding:1rem 1rem .75rem;border-radius:18px;max-width:570px;margin-top:2rem}.join-card .form-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.join-card .form-control{border:2px solid #e5e7eb;border-radius:12px!important;margin-right:.6rem;font-weight:700;letter-spacing:.13em}.btn-accent{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:800;border-radius:12px!important}.btn-accent:hover{background:#ea580c;border-color:#ea580c;color:#fff}.demo-pins{display:flex;gap:1.5rem;color:#7c7485;font-size:.78rem;margin-top:.7rem}.hero-visual{position:relative;display:grid;place-items:center;min-height:520px}.quiz-preview{position:relative;width:min(430px,90%);background:#fff;color:var(--ink);border-radius:28px;padding:1.6rem;transform:rotate(2deg);z-index:2}.preview-top,.preview-footer{display:flex;justify-content:space-between;align-items:center;color:#81778a;font-size:.78rem;font-weight:700}.timer-pill{background:#fef3c7;color:#b45309;padding:.45rem .75rem;border-radius:99px}.preview-icon{width:58px;height:58px;border-radius:17px;background:#ede9fe;display:grid;place-items:center;font-size:1.7rem;margin:2.5rem auto 1.2rem}.quiz-preview h2{text-align:center;font-size:1.45rem}.preview-bars{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.5rem 0}.preview-bars i{height:56px;border-radius:12px;background:#ef4444}.preview-bars i:nth-child(2){background:#3b82f6}.preview-bars i:nth-child(3){background:#f59e0b}.preview-bars i:nth-child(4){background:#16a34a}.preview-footer strong{color:#16a34a;font-size:1.1rem}.float-chip{position:absolute;background:#fff;color:var(--ink);padding:.7rem 1rem;border-radius:99px;font-weight:800;box-shadow:0 12px 40px #240b4655;z-index:3}.chip-one{right:0;top:22%}.chip-two{left:2%;bottom:25%;color:#16a34a}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:340px;height:340px;background:#f9731633;right:5%;top:12%}.orb-two{width:200px;height:200px;background:#fbbf2430;left:10%;bottom:8%}.landing-footer{display:flex;justify-content:space-between;color:#cfc2e8;font-size:.78rem;padding-bottom:1.5rem}.center-page{min-height:100vh;background:linear-gradient(145deg,#32106e,#6d28d9);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;padding:1.5rem}.glass-card{width:min(460px,100%);background:#ffffff14;border:1px solid #ffffff2b;backdrop-filter:blur(15px);border-radius:24px;padding:2.3rem;text-align:center;box-shadow:0 30px 80px #1c073555}.glass-card h1{font-size:2rem;margin-top:.7rem}.glass-card p{color:#ddd1f4}.glass-card .form-control{border:0;padding:.9rem}.room-label{display:inline-block;border-radius:99px;background:#ffffff18;padding:.45rem .8rem;color:#fcd34d;font-size:.75rem;font-weight:800;letter-spacing:.12em}.status-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#ef4444;font-size:2rem;font-weight:800}.game-shell{min-height:100vh;background:linear-gradient(135deg,#35116f,#5b21b6);color:white}.game-header{height:74px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1c}.player-badge{background:#ffffff15;border:1px solid #ffffff1e;padding:.55rem .9rem;border-radius:99px;font-size:.86rem}.player-badge span{font-weight:800;color:#fbbf24}.game-stage{min-height:calc(100vh - 74px);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}.wait-card,.result-card{max-width:650px;text-align:center}.wait-animation{width:90px;height:90px;border-radius:28px;background:#ffffff12;display:grid;place-items:center;font-size:2.4rem;margin:0 auto 1.5rem;animation:float 2s ease-in-out infinite}.question-wrap{width:min(1040px,100%)}.question-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.question-counter{font-weight:800;letter-spacing:.08em}.timer{width:62px;height:62px;border-radius:50%;background:#fff;color:var(--purple);display:grid;place-items:center;font:800 1.3rem 'Plus Jakarta Sans';box-shadow:0 0 0 7px #ffffff1a}.question-title{font-size:clamp(1.65rem,3.5vw,3rem);text-align:center;max-width:900px;margin:1rem auto 2.2rem;line-height:1.2}.answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.answer-btn{min-height:100px;border:0;border-radius:18px;color:#fff;display:flex;align-items:center;text-align:left;padding:1.2rem;font-size:1.08rem;font-weight:700;transition:.18s transform,.18s opacity}.answer-btn:hover{transform:translateY(-3px)}.answer-btn b{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;border-radius:12px;background:#0002;margin-right:1rem;font-size:1.2rem}.answer-btn:nth-child(1){background:#e94646}.answer-btn:nth-child(2){background:#367bdc}.answer-btn:nth-child(3){background:#e9a11b}.answer-btn:nth-child(4){background:#2a9d52}.answer-btn.selected{outline:5px solid white;transform:scale(.98)}.answer-btn.disabled{opacity:.35;pointer-events:none}.result-mark{font-size:5rem}.result-card h1{font-size:clamp(2rem,5vw,3.6rem)}.explanation{background:#ffffff12;border:1px solid #ffffff20;padding:1rem 1.25rem;border-radius:16px;color:#ede8fa}.podium{display:flex;align-items:flex-end;justify-content:center;gap:.5rem;margin:2rem auto}.podium>div{width:120px;border-radius:14px 14px 0 0;background:#ffffff18;padding:1rem .5rem}.podium .first{height:160px;background:#f59e0b}.podium .second{height:130px}.podium .third{height:105px}.host-page{min-height:100vh;background:#f6f5f3}.host-nav{height:70px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding-inline:3vw}.host-nav .brand{color:var(--ink)}.live-label{font-size:.8rem;font-weight:700}.live-label i{display:inline-block;width:8px;height:8px;background:#22c55e;border-radius:50%;margin-right:.35rem}.eyebrow.dark{color:var(--purple)}.host-title{font-size:clamp(1.7rem,3vw,2.6rem);margin:.3rem 0 0}.room-panel{background:#fff;border:1px solid #e5e7eb;border-radius:20px;overflow:hidden;box-shadow:0 12px 35px #2112380c}.room-panel-head{background:linear-gradient(135deg,#4c1d95,#6d28d9);color:white;padding:1.4rem;display:flex;justify-content:space-between;gap:1rem}.room-panel-head.orange{background:linear-gradient(135deg,#b45309,#f97316)}.room-panel-head small{font-weight:800;letter-spacing:.12em;opacity:.7}.room-panel-head h2{font-size:1.45rem;margin:.25rem 0}.room-panel-head p{font-size:.8rem;margin:0;opacity:.8}.pin-block{text-align:right}.pin-block strong{display:block;font-size:1.75rem;letter-spacing:.1em}.room-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid #eee}.room-metrics div{padding:1rem;border-right:1px solid #eee}.room-metrics div:last-child{border:0}.room-metrics small{display:block;color:#9ca3af;font-size:.65rem;letter-spacing:.1em;font-weight:800}.room-metrics strong{font-size:.95rem}.host-question{padding:1.2rem;min-height:150px}.host-placeholder{height:110px;display:grid;place-items:center;background:#fafafa;border:1px dashed #d1d5db;border-radius:12px;color:#9ca3af}.host-q-title{font-weight:800;line-height:1.35}.stat-row{display:grid;grid-template-columns:24px 1fr 30px;gap:.5rem;align-items:center;font-size:.75rem;margin:.55rem 0}.stat-bar{height:7px;background:#eee;border-radius:10px;overflow:hidden}.stat-bar i{display:block;height:100%;background:var(--purple)}.players-list{padding:0 1.2rem 1rem;display:flex;gap:.4rem;flex-wrap:wrap;min-height:30px}.player-chip{background:#f3f0fa;padding:.35rem .6rem;border-radius:99px;font-size:.72rem}.host-actions{display:flex;gap:.6rem;padding:1rem 1.2rem;background:#fafafa;border-top:1px solid #eee}.host-actions .actionBtn{flex:1}.host-actions .btn{border-radius:10px;font-weight:700}@keyframes float{50%{transform:translateY(-8px)}}@media(max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center;padding-top:3rem}.hero-copy>p,.join-card{margin-left:auto;margin-right:auto}.hero-visual{min-height:420px}.landing-footer{margin-top:3rem}.chip-one{right:5%}.chip-two{left:5%}}@media(max-width:600px){.hero-copy h1{font-size:3.2rem}.join-card .input-group{display:block}.join-card .form-control,.join-card .btn{width:100%;margin:0 0 .6rem}.demo-pins{justify-content:center;flex-wrap:wrap}.answers-grid{grid-template-columns:1fr}.answer-btn{min-height:76px}.question-title{margin-bottom:1.3rem}.room-panel-head{flex-direction:column}.pin-block{text-align:left}.landing-footer{flex-direction:column;gap:.4rem}.hero-visual{min-height:350px}.quiz-preview{transform:none}}