:root{color-scheme:dark;--bg:#141414;--panel:#202020;--line:#373737;--muted:#aaa7a2;--yellow:#ffca28;--green:#79df9b;--red:#ff7670;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-family:var(--font);background:var(--bg);color:#faf8f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffe082;outline-offset:4px}a{color:inherit;text-decoration:none}button{touch-action:manipulation}.topbar{height:100px;max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid var(--line);gap:20px}.brand{font-size:24px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center}.brand>span:last-child{color:var(--yellow)}.brand-icon{display:grid;place-items:center;width:33px;height:36px;background:var(--yellow);color:#141414;border-radius:10px;font-size:30px;margin-right:10px}.topnote,.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--muted)}.quiet{background:transparent;color:var(--muted);font-size:13px;padding:10px;border:1px solid var(--line);border-radius:9px}.quiet:hover{color:white;border-color:var(--yellow)}main{max-width:1168px;margin:auto;padding:64px 0 48px;min-height:calc(100svh - 180px)}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}.eyebrow{color:var(--yellow);display:flex;gap:8px;align-items:center}.eyebrow:before{content:'';width:6px;height:6px;background:var(--yellow);border-radius:100%}h1{font-size:76px;letter-spacing:-4px;line-height:1.03;margin:25px 0}h1 em{font-style:normal;color:var(--yellow)}.intro{color:var(--muted);font-size:17px;line-height:1.7;max-width:400px}.pills{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}.pill{border:1px solid var(--line);border-radius:30px;padding:8px 12px;font-size:12px;color:#d7d3cc}.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px}.tabs{display:flex;background:#141414;border-radius:12px;padding:5px;margin-bottom:27px;gap:4px}.tabs button{flex:1;padding:12px 7px;border-radius:8px;background:transparent;color:var(--muted);font-size:14px;font-weight:700}.tabs button.active{background:#383527;color:var(--yellow)}h2{font-size:26px;letter-spacing:-.8px;margin:0 0 10px}p{line-height:1.6}p.muted,.muted{color:var(--muted)}.small{font-size:13px}.form{display:grid;gap:18px}.form p{margin:0 0 3px}label{display:grid;gap:8px;font-size:12px;font-weight:700;color:#d7d3cc}input{width:100%;background:#171717;border:1px solid #444;border-radius:10px;padding:15px;color:#fff;min-width:0}input::placeholder{color:#777}input.code{font-size:25px;letter-spacing:8px;font-weight:700;font-variant-numeric:tabular-nums}.row{display:flex;gap:14px}.row>*{flex:1;min-width:0}.primary,.secondary,.good,.bad{border-radius:11px;padding:16px 20px;font-weight:800;min-height:50px;background:var(--yellow);color:#17150e}.primary:hover{background:#ffd54f}.secondary{background:#323232;color:#fff;border:1px solid #4a4a4a}.good{background:var(--green)}.bad{background:var(--red)}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:64px;padding-top:30px;gap:32px}.step{display:flex;align-items:flex-start;gap:16px}.step-number{font-size:12px;color:var(--yellow);border:1px solid #5e5127;border-radius:50%;padding:9px}.step h3{font-size:14px;margin:0 0 5px}.step p{font-size:13px;color:var(--muted);margin:0}footer{max-width:1168px;margin:0 auto;padding:23px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#817f7a;font-size:11px}footer b{color:var(--yellow);padding:0 7px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;background:#4b2724;color:#fff;border:1px solid var(--red);padding:16px 22px;border-radius:12px;z-index:20;box-shadow:0 10px 40px #0009}.game-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}.game-heading h1{font-size:34px;letter-spacing:-1.2px;margin:12px 0 0}.game-meta{display:flex;gap:12px;align-items:center}.code-tag{background:#252319;border:1px solid #67551f;color:var(--yellow);border-radius:12px;padding:12px 17px;letter-spacing:4px;font-size:22px;font-weight:800}.connection{font-size:12px;color:var(--green);margin:10px 0;text-align:right}.connection.lost{color:var(--red)}.game-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px}.arena{text-align:center;padding:30px;position:relative;overflow:hidden;min-height:520px;display:flex;align-items:center;flex-direction:column}.round-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);font-weight:800}.timer{font-size:82px;font-variant-numeric:tabular-nums;letter-spacing:-4px;font-weight:800;line-height:1.2;margin:20px 0 0}.timer-label{color:var(--muted);font-size:13px;min-height:22px;margin:4px 0 24px}.buzzer{border-radius:100%;width:218px;height:218px;flex-shrink:0;background:var(--yellow);color:#211b09;box-shadow:0 9px 0 #a67c00,0 0 0 12px #ffca280b,0 0 0 13px #ffca2825;font-weight:900;font-size:25px;letter-spacing:-.8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;transition:transform .12s,background .15s}.buzzer:active:not(:disabled){transform:translateY(6px);box-shadow:0 3px 0 #a67c00,0 0 0 12px #ffca280b}.buzzer span{font-size:45px;font-weight:400}.buzzer:disabled{opacity:1;background:#303030;color:#777;box-shadow:0 7px 0 #181818,0 0 0 12px #ffffff03,0 0 0 13px #ffffff0a}.buzzer.won:disabled{background:var(--green);color:#143621;box-shadow:0 7px 0 #38744b}.buzzer.lost:disabled{background:#6a302d;color:#ffb7b3;box-shadow:0 7px 0 #3a1d1c}.arena-note{font-size:13px;color:var(--muted);margin:30px 0 0;max-width:400px}.sidebar{display:grid;gap:20px;align-content:start}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-heading h2{font-size:17px;margin:0}.count{color:var(--yellow);background:#39321a;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:800}.players{list-style:none;padding:0;margin:20px 0 0}.players li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid #343434}.avatar{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#343124;color:var(--yellow);font-size:12px;font-weight:800}.player-name{flex:1;overflow-wrap:anywhere;font-size:14px}.players strong{font-size:17px}.players small{color:var(--muted);font-size:11px}.join-card{display:flex;gap:20px;align-items:center}.qr{background:white;padding:9px;border-radius:10px;width:114px;height:114px;flex-shrink:0}.qr canvas{width:96px;height:96px}.join-card p{margin:0 0 10px;font-size:12px;color:var(--muted)}.join-card h3{font-size:15px;margin:0 0 7px}.score{font-size:56px;font-weight:850;color:var(--yellow);letter-spacing:-2px;line-height:1.1}.personal{display:flex;justify-content:space-between;align-items:center}.personal h2{font-size:20px;overflow-wrap:anywhere}.winner{font-size:30px;font-weight:850;margin:10px 0 16px;overflow-wrap:anywhere;max-width:100%}.answer-card{width:100%;margin:auto 0}.answer-card .row{margin-top:26px}.answer-icon{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:#2d382d;color:var(--green);font-size:44px;margin:15px auto}.answer-icon.wrong{background:#412927;color:var(--red)}.game-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:15px}.danger-text{color:var(--red)}.results{max-width:680px;margin:auto;text-align:center}.results h1{font-size:48px;letter-spacing:-2px}.results .players{text-align:left}.results .players li:first-child .avatar{background:var(--yellow);color:#141414}.results .players li:first-child{color:var(--yellow)}.notice{padding:15px;background:#2b281a;border:1px solid #564a24;border-radius:12px;font-size:13px;color:#e5d6a0}.confetti{pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(circle,#ffca28 3px,transparent 4px),radial-gradient(circle,#79df9b 3px,transparent 4px),radial-gradient(circle,#fff 2px,transparent 3px);background-size:67px 91px,113px 71px,89px 131px;animation:fall 4s linear;opacity:.45}@keyframes fall{from{transform:translateY(-100%)}to{transform:translateY(100%)}}.loading{text-align:center;padding:80px}.session-link{display:block;margin-top:18px;font-size:13px;color:var(--yellow)}.end-confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.end-confirm[hidden]{display:none}.pending{color:var(--yellow)}
@media(max-width:1200px){main{padding:48px 30px}footer{margin:0 30px}.hero{gap:40px}h1{font-size:66px}}
@media(max-width:760px){.topbar{height:76px;padding:0 20px}.topnote{display:none}.brand{font-size:22px}main{padding:32px 20px;min-height:calc(100svh - 160px)}.hero{grid-template-columns:1fr;gap:30px}h1{font-size:53px;letter-spacing:-2.7px;margin:18px 0}.intro{font-size:15px;max-width:none;margin:0}.pills{margin-top:20px}.panel{padding:23px;border-radius:18px}.steps{margin-top:36px;grid-template-columns:1fr;gap:20px;padding-top:25px}footer{margin:0 20px;flex-direction:column;gap:8px}.game-grid{grid-template-columns:1fr}.game-heading{align-items:flex-start;margin-bottom:20px}.game-heading h1{font-size:25px;max-width:210px;overflow-wrap:anywhere}.game-meta{flex-direction:column;gap:0;align-items:flex-end}.code-tag{font-size:18px;padding:10px;letter-spacing:2px}.connection{font-size:10px;max-width:135px}.arena{min-height:460px;padding:25px 20px}.timer{font-size:72px}.buzzer{width:195px;height:195px}.game-actions{align-items:flex-start;flex-wrap:wrap}.results h1{font-size:39px}.winner{font-size:27px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.confetti{display:none}}
.answer-card .buzzer{margin:auto}.qr svg{display:block;width:96px;height:96px}
.frozen-time{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:15px;color:var(--muted)}.frozen-time small{font-size:10px;letter-spacing:1px;font-weight:500;margin-left:8px}
