:root{--ink:#f8fbff;--muted:#a9c3df;--navy:#06162d;--navy2:#0a2345;--panel:#0e2c53cc;--panel2:#123762;--line:#ffffff20;--blue:#20b7f5;--violet:#7868ff;--mint:#51e0b8;--gold:#ffc75d;--red:#ff6b79;--shadow:0 24px 70px #0007;color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:var(--navy)}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 80% -10%,#164f8d 0,transparent 42%),linear-gradient(165deg,#081d3b 0%,#051327 72%);font-size:17px;padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(88px + env(safe-area-inset-bottom)) env(safe-area-inset-left);overflow-x:hidden}
button,input,select{font:inherit}.ambient{position:fixed;border-radius:50%;filter:blur(90px);opacity:.16;pointer-events:none}.ambient-a{width:320px;height:320px;background:#20b7f5;left:-160px;top:20%}.ambient-b{width:300px;height:300px;background:#7868ff;right:-180px;bottom:10%}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px,calc((100vw - 1120px)/2));background:#06162ddc;border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;color:white;background:none;border:0;text-align:right;padding:0}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,var(--blue),var(--violet));font-size:24px;font-weight:900;box-shadow:0 10px 26px #178dd044}.brand b,.brand small{display:block}.brand b{font-size:18px}.brand small{font-size:11px;color:var(--muted);margin-top:2px}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:#ffffff0d;color:white}.connection{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}.connection i{width:8px;height:8px;border-radius:50%;background:#789}.connection.online i{background:var(--mint);box-shadow:0 0 14px var(--mint)}.connection.error i{background:var(--red)}
#app{position:relative;z-index:1;width:min(1120px,100%);min-height:calc(100vh - 140px);margin:auto;padding:24px 16px 50px}.screen{animation:rise .32s ease both}.center{min-height:55vh;display:grid;place-content:center;text-align:center}.hero{display:grid;gap:24px;align-items:center;padding:14px 0 26px}.eyebrow{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:7px 12px;border-radius:999px;background:#51e0b819;border:1px solid #51e0b83d;color:#8df1d5;font-size:13px;font-weight:800}.hero h1{font-size:clamp(36px,10vw,68px);line-height:1.08;margin:14px 0 12px;letter-spacing:-.04em}.hero h1 span{background:linear-gradient(90deg,#69d7ff,#a99fff);-webkit-background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:19px;line-height:1.75;margin:0;max-width:680px}.hero-art{position:relative;min-height:220px;display:grid;place-items:center}.orbit{width:200px;height:200px;border:1px solid #ffffff27;border-radius:50%;display:grid;place-items:center;animation:spin 18s linear infinite}.orbit:before,.orbit:after{content:"";position:absolute;border-radius:50%}.orbit:before{width:130px;height:130px;border:1px dashed #ffffff33}.orbit:after{width:18px;height:18px;background:var(--gold);top:18px;right:48%;box-shadow:0 0 30px var(--gold)}.trophy{font-size:72px;filter:drop-shadow(0 12px 25px #0007);animation:float 3s ease-in-out infinite}.stat-float{position:absolute;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:#0d2d54dd;backdrop-filter:blur(12px);font-size:13px;box-shadow:var(--shadow)}.stat-float.one{right:4%;top:34px}.stat-float.two{left:3%;bottom:25px}
.action-grid{display:grid;gap:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;border-radius:17px;border:1px solid transparent;padding:13px 18px;font-weight:800;color:white;cursor:pointer;transition:.18s transform,.18s filter}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg,#119fe8,#665cf2);box-shadow:0 12px 32px #147dcc55}.btn-secondary{background:#ffffff0e;border-color:var(--line)}.btn-mint{background:linear-gradient(135deg,#1fac87,#299fd2)}.btn-danger{background:#ff647522}.btn:disabled{opacity:.45;cursor:not-allowed}.link-btn{border:0;background:none;color:#7dd9ff;text-decoration:underline;text-underline-offset:4px;padding:8px}.mini{min-height:40px;padding:8px 13px;border-radius:13px;font-size:14px}
.card{background:linear-gradient(155deg,#12365fdd,#0b2749dd);border:1px solid var(--line);border-radius:25px;padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.card h2,.card h3{margin-top:0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px}.section-title h2{font-size:27px;margin:0}.section-title p{color:var(--muted);margin:5px 0 0}.grid{display:grid;gap:15px}.two{grid-template-columns:1fr}.three{grid-template-columns:1fr}.feature{position:relative;overflow:hidden}.feature .ficon{font-size:28px;margin-bottom:10px}.feature h3{margin:0 0 7px;font-size:18px}.feature p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}
.field{display:grid;gap:7px;margin-bottom:14px}.field label{font-size:14px;color:#d8eaff;font-weight:700}.field small{color:var(--muted)}input,select{width:100%;min-height:51px;border:1px solid #ffffff24;border-radius:15px;background:#041a34aa;color:white;padding:12px 14px;outline:0}input:focus,select:focus{border-color:#43c5ff;box-shadow:0 0 0 3px #24b9f526}input::placeholder{color:#7190ae}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #ffffff12}.switch{position:relative;width:51px;height:29px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:#49617b;border-radius:999px;transition:.2s}.slider:before{content:"";position:absolute;width:23px;height:23px;right:3px;top:3px;border-radius:50%;background:white;transition:.2s}.switch input:checked+.slider{background:var(--blue)}.switch input:checked+.slider:before{transform:translateX(-22px)}
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-card{padding:15px 10px;text-align:center;border:1px solid var(--line);border-radius:17px;background:#ffffff08;color:white}.mode-card.active{border-color:#4bcaff;background:#1e99d52b;box-shadow:inset 0 0 0 1px #4bcaff}.mode-card b,.mode-card small{display:block}.mode-card small{color:var(--muted);font-size:12px;margin-top:4px}
.room-code{font-size:clamp(36px,12vw,64px);letter-spacing:.14em;font-weight:900;direction:ltr;text-align:center;color:#8de7ff;text-shadow:0 0 28px #20b7f577}.room-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.pill{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;background:#ffffff0c;border:1px solid var(--line);font-size:13px;color:var(--muted)}.players{display:grid;gap:9px}.player{display:flex;align-items:center;gap:11px;padding:12px;border-radius:16px;background:#ffffff09;border:1px solid #ffffff12}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#2bbbf5,#735cff);font-weight:900}.player-info{flex:1}.player-info b,.player-info small{display:block}.player-info small{color:var(--muted);font-size:12px}.ready{color:var(--mint);font-weight:800;font-size:13px}.not-ready{color:var(--gold);font-size:13px}.progress{height:10px;border-radius:999px;background:#ffffff14;overflow:hidden}.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--blue));transition:width .3s}.countdown{font-size:120px;font-weight:900;color:#fff;text-shadow:0 0 55px #29c2ff;animation:pulse 1s ease infinite}
.question-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.timer{position:relative;width:66px;height:66px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--blue) var(--timer,100%),#ffffff18 0);font-weight:900}.timer:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#0b2749}.timer span{position:relative}.question-card{padding:22px}.question-card h1{font-size:clamp(25px,7vw,39px);line-height:1.45;margin:8px 0 22px}.answers{display:grid;gap:11px}.answer{position:relative;display:flex;align-items:center;gap:13px;text-align:right;width:100%;min-height:64px;padding:13px;border:1px solid #ffffff1f;border-radius:17px;background:#ffffff0b;color:white}.answer .letter{flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#ffffff13;font-weight:900}.answer:hover,.answer.selected{border-color:#4bcaff;background:#168ece26}.answer.correct{border-color:var(--mint);background:#3be0ad22}.answer.wrong{border-color:var(--red);background:#ff647522}.answer:disabled{opacity:1}.feedback{margin-top:17px;padding:15px;border-radius:16px;background:#041a34aa;border:1px solid var(--line);line-height:1.7}.feedback a{color:#7dd9ff}.score-pop{font-size:22px;color:var(--gold);font-weight:900}
.leaderboard{display:grid;gap:9px}.rank{display:grid;grid-template-columns:40px 44px 1fr auto;align-items:center;gap:10px;padding:11px;border-radius:16px;background:#ffffff09;border:1px solid #ffffff10}.rank:first-child{background:linear-gradient(90deg,#ffc75d20,#ffffff08);border-color:#ffc75d55}.rank-num{font-size:21px;font-weight:900;text-align:center}.rank-score{font-weight:900;color:#8de7ff}.podium{display:flex;align-items:end;justify-content:center;gap:9px;min-height:220px;padding-top:25px}.pod{width:30%;max-width:150px;text-align:center}.pod .head{width:50px;height:50px;margin:0 auto 8px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#2bbbf5,#735cff);font-weight:900}.pod .base{display:grid;place-items:center;border-radius:17px 17px 5px 5px;background:#ffffff10;border:1px solid var(--line);font-size:28px;font-weight:900}.pod.p1 .base{height:125px;background:#ffc75d22}.pod.p2 .base{height:90px}.pod.p3 .base{height:70px}.pod small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice{padding:13px 15px;border:1px solid #5ed2ff42;background:#20b7f513;border-radius:15px;color:#d8f4ff;line-height:1.65}.warning{border-color:#ffc75d55;background:#ffc75d12}.success{border-color:#51e0b855;background:#51e0b812}.danger{border-color:#ff6b7955;background:#ff6b7912}.steps{counter-reset:step;display:grid;gap:11px}.step{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start}.step:before{counter-increment:step;content:counter(step);width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#1aa8ef;font-weight:900}.step p{margin:4px 0;color:var(--muted);line-height:1.6}.copy-row{display:flex;gap:8px}.copy-row input{direction:ltr;font-size:13px}.toast{position:fixed;z-index:100;right:50%;top:84px;transform:translateX(50%) translateY(-16px);padding:11px 16px;border-radius:14px;background:#e9f8ff;color:#06203d;font-weight:800;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translateX(50%) translateY(0)}.spinner{width:54px;height:54px;margin:auto;border:5px solid #ffffff22;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}.empty{text-align:center;padding:30px 15px;color:var(--muted)}.empty .big{font-size:50px;display:block;margin-bottom:10px}
.bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px max(8px,calc((100vw - 680px)/2)) calc(8px + env(safe-area-inset-bottom));background:#06162df2;border-top:1px solid var(--line);backdrop-filter:blur(18px)}.bottom-nav button{display:grid;place-items:center;gap:2px;border:0;background:none;color:#8eabc7;font-size:11px}.bottom-nav button span{font-size:22px;color:#d7ebff}
.hr{height:1px;background:#ffffff14;margin:18px 0}.muted{color:var(--muted)}.ltr{direction:ltr;text-align:left}.hidden{display:none!important}.mt{margin-top:15px}.stack{display:grid;gap:12px}.space{display:flex;align-items:center;justify-content:space-between;gap:12px}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#ffffff12;font-size:12px}.kicker{color:var(--blue);font-size:13px;font-weight:800}.confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}.confetti i{position:absolute;width:9px;height:15px;animation:fall 2.8s linear forwards}
@media(min-width:700px){body{padding-bottom:20px}.bottom-nav{display:none}#app{padding-top:42px}.hero{grid-template-columns:1.15fr .85fr;min-height:430px}.action-grid{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:repeat(3,1fr)}.question-card{padding:34px}.answers{grid-template-columns:1fr 1fr}.form-wide{max-width:760px;margin:auto}.lobby-grid{grid-template-columns:1.05fr .95fr}}
@media(max-width:430px){.connection span{display:none}.connection{padding:9px}.topbar{padding:10px 12px}.hero-art{min-height:190px}.orbit{width:170px;height:170px}.card{padding:17px}.question-card h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes pulse{50%{transform:scale(1.12)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.8}}