:root{--bg:#121212;--side:#181818;--card:#1c1c1c;--line:#262626;--key:#272727;--ink:#f4f4f2;--grey:#a3a3a3;--grey2:#c6c6c6;--grey3:#8a8a8a;--acc:#ff5a36;--opp:#62a8ff;--ok:#4fd389;--bad:#ff6b5e;--gold:#ffc24a}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:Archivo,system-ui,sans-serif}button,input,select{font-family:inherit}button{cursor:pointer}.app{grid-template-columns:232px minmax(0,1fr);min-height:100vh;display:grid}nav.side{background:var(--side);border-right:1px solid var(--line);flex-direction:column;gap:4px;height:100vh;padding:20px 12px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;padding:0 10px 20px;display:flex}.logo{width:26px;height:26px;position:relative}.logo i{border-radius:3px;width:6px;height:26px;position:absolute;top:0;left:10px}.logo i:first-child{background:var(--acc);transform:rotate(35deg)}.logo i:last-child{background:var(--opp);mix-blend-mode:screen;transform:rotate(-35deg)}.brand b{text-transform:uppercase;font-size:22px;font-weight:900;font-stretch:72%}.tag{color:var(--grey2);background:#272727;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:800}.navbtn{height:40px;color:var(--grey2);text-align:left;background:0 0;border:none;border-radius:10px;justify-content:space-between;align-items:center;padding:0 12px;font-size:14px;font-weight:700;display:flex}.navbtn:hover{background:#232323}.navbtn.on{color:var(--ink);background:#272727}.navbtn span{color:var(--grey3);font-size:12px}.me{background:#1f1f1f;border-radius:12px;align-items:center;gap:10px;margin-top:auto;padding:10px;display:flex}.me .av{background:var(--ok);color:#0a2615;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-weight:900;display:flex}.me div{flex-direction:column;display:flex}.me small{color:var(--grey3);font-size:12px}.me button{color:var(--grey3);background:0 0;border:none;margin-left:auto;font-size:12px}main{min-width:0;padding:32px 40px;position:relative}.kick{letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-size:12px;font-weight:800}h1{text-transform:uppercase;margin:4px 0 0;font-size:48px;font-weight:900;font-stretch:68%;line-height:.9}.head{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;display:flex}.btn{color:#141414;background:#f4f4f2;border:none;border-radius:12px;height:44px;padding:0 20px;font-size:14px;font-weight:800}.btn.acc{background:var(--acc);color:#160806}.btn.sec{color:var(--ink);background:#272727;font-weight:700}.btn.dark{color:var(--ink);background:#141414}.btn.bad{color:var(--bad);background:#272727}.btn:disabled{opacity:.4;cursor:default}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;flex-direction:column;gap:14px;padding:20px;display:flex}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.row{align-items:center;gap:8px;display:flex}.grow{flex:1}.muted{color:var(--grey);font-size:13px}.title24{font-size:24px;font-weight:900;font-stretch:76%;line-height:1.05}label{color:var(--grey2);font-size:13px;font-weight:700}input.in{background:var(--card);height:44px;color:var(--ink);border:1px solid #333;border-radius:10px;outline:none;width:100%;padding:0 12px;font-size:15px;font-weight:700}input.in:focus{border-color:var(--opp)}.builder{grid-template-columns:300px minmax(0,1fr);min-height:100vh;margin:-32px -40px;display:grid}.qlist{border-right:1px solid var(--line);flex-direction:column;gap:6px;padding:24px 12px;display:flex}.qitem{color:var(--ink);text-align:left;background:0 0;border:1px solid #0000;border-radius:12px;align-items:center;gap:12px;padding:12px;display:flex}.qitem.on{background:#272727;border-color:#3a3a3a}.qitem .n{width:26px;color:var(--grey3);font-size:13px;font-weight:800}.qitem .q{flex:1;font-size:16px;font-weight:800}.qitem .a{color:var(--ok);font-size:13px;font-weight:800}.dash{color:var(--ink);background:0 0;border:1px dashed #575757;border-radius:10px;height:44px;font-size:14px;font-weight:700}.edit{flex-direction:column;gap:22px;padding:28px 36px;display:flex}.bigin{background:var(--card);height:72px;color:var(--ink);border:1px solid #333;border-radius:14px;outline:none;width:100%;padding:0 18px;font-size:36px;font-weight:900;font-stretch:72%}.bigin.ans{border:2px solid var(--ok);color:var(--ok);font-stretch:100%}.choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.choice{color:#141414;border-radius:14px;flex-direction:column;justify-content:space-between;height:84px;padding:10px 14px;display:flex}.choice b{font-size:12px;font-weight:900}.choice span{font-size:30px;font-weight:900;font-stretch:72%}.seg{background:var(--card);border-radius:12px;gap:4px;width:max-content;padding:4px;display:flex}.seg button{height:36px;color:var(--grey2);background:0 0;border:none;border-radius:9px;padding:0 16px;font-size:13px;font-weight:800}.seg button.on{color:#141414;background:#f4f4f2}.hostgrid{grid-template-columns:minmax(0,1fr) 380px;gap:32px;display:grid}.opt{border:2px solid var(--line);background:var(--card);color:var(--ink);text-align:left;border-radius:16px;flex-direction:column;gap:6px;padding:18px;display:flex}.opt.on{border-color:var(--acc)}.opt b{font-size:17px;font-weight:800}.opt span{color:var(--grey);font-size:13px;line-height:1.45}.toggle{border:none;border-bottom:1px solid var(--line);height:60px;color:var(--ink);text-align:left;background:0 0;align-items:center;gap:12px;width:100%;padding:0 18px;font-size:15px;font-weight:600;display:flex}.sw{border-radius:999px;width:42px;height:24px;transition:background .15s;position:relative}.sw i{background:#f4f4f2;border-radius:50%;width:18px;height:18px;transition:left .15s;position:absolute;top:3px}.pinbox{background:var(--acc);color:#160806;border-radius:24px;flex-direction:column;gap:12px;padding:24px;display:flex}.pin{font-variant-numeric:tabular-nums;font-size:72px;font-weight:900;font-stretch:66%;line-height:.86}.statgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.stat b{font-size:36px;font-weight:900;font-stretch:72%}.bar{background:#2a2a2a;border-radius:4px;height:8px;overflow:hidden}.bar i{height:100%;display:block}.rep{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;display:grid}table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:14px}th{color:var(--grey3);text-transform:uppercase;letter-spacing:.08em;text-align:right;padding:12px 8px;font-size:12px;font-weight:800}th:first-child,th:nth-child(2){text-align:left}td{text-align:right;border-top:1px solid #242424;padding:9px 8px}td:first-child,td:nth-child(2){text-align:left}.toast{color:#141414;background:#f4f4f2;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.login{flex-direction:column;gap:14px;max-width:420px;margin:12vh auto;padding:0 24px;display:flex}.ctl{flex-wrap:wrap;gap:8px;display:flex}.err{color:var(--bad);min-height:18px;font-size:13px}@media (width<=900px){.app{grid-template-columns:1fr}nav.side{flex-flow:wrap;height:auto;position:static}.hostgrid,.rep,.builder{grid-template-columns:1fr}.statgrid{grid-template-columns:repeat(2,1fr)}main{padding:20px}}select.in{appearance:none;background-image:linear-gradient(45deg,#0000 50%,#a3a3a3 50%),linear-gradient(135deg,#a3a3a3 50%,#0000 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-repeat:no-repeat;background-size:5px 5px;padding-right:32px}.play{flex-direction:column;gap:14px;max-width:480px;margin:0 auto;display:flex}.stack{flex-direction:column;gap:14px;display:flex}.center{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:70vh;display:flex}.rankcard{background:var(--acc);color:#160806;border-radius:24px;flex-direction:column;gap:16px;padding:20px;display:flex}.rankcard .big{text-transform:uppercase;font-size:44px;font-weight:900;font-stretch:68%;line-height:.88}.rankcard small{color:#4a1a0e;font-size:12px;font-weight:700;display:block}.rankcard b{font-size:26px;font-weight:900}.chip{background:#1608061f;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}.chip.blue{border:1.5px solid var(--opp);color:var(--ink);background:#62a8ff1f;padding:8px 12px;font-size:14px}.grid2{grid-template-columns:1fr 1fr;gap:10px;display:grid}.tile{background:var(--card);color:var(--ink);text-align:left;border:none;border-radius:18px;flex-direction:column;gap:8px;min-height:110px;padding:14px;font-size:16px;display:flex;box-shadow:0 4px #080808}.tile .g{background:var(--key);width:38px;height:38px;color:var(--acc);border-radius:11px;justify-content:center;align-items:center;font-size:17px;font-weight:900;display:flex}.duel{flex-direction:column;gap:12px;display:flex}.scores{grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;display:grid}.sc{border-radius:20px;flex-direction:column;padding:10px 14px;display:flex}.sc small{font-size:12px;font-weight:800}.sc b{font-variant-numeric:tabular-nums;font-size:34px;font-weight:900}.sc.acc{background:var(--acc);color:#160806}.sc.opp{background:var(--opp);color:#0b1a2e;text-align:right}.timer{font-variant-numeric:tabular-nums;font-size:48px;font-weight:900;font-stretch:75%}.q{text-align:center;font-variant-numeric:tabular-nums;justify-content:center;align-items:center;min-height:130px;padding:16px 0;font-size:72px;font-weight:900;font-stretch:66%;display:flex}.answer{background:var(--card);border:2px solid var(--acc);font-variant-numeric:tabular-nums;border-radius:18px;justify-content:center;align-items:center;height:76px;font-size:40px;font-weight:800;display:flex;position:relative}.fb{white-space:nowrap;font-size:18px;font-weight:900;animation:.9s ease-out forwards fl;position:absolute;top:-30px;left:50%;transform:translate(-50%)}@keyframes fl{0%{opacity:1;transform:translate(-50%,6px)}to{opacity:0;transform:translate(-50%,-34px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}50%{transform:translate(8px)}75%{transform:translate(-4px)}}.keys{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.keys button{height:62px;color:var(--ink);background:#2a2a2a;border:none;border-radius:14px;font-size:26px;font-weight:700;box-shadow:0 4px #080808}.keys button:active{box-shadow:none;transform:translateY(3px)}.bigtitle{text-transform:uppercase;font-size:96px;font-weight:900;font-stretch:66%;line-height:.82}.stat{background:var(--card);border-radius:16px;flex-direction:column;gap:4px;padding:14px;display:flex}.stat b{font-size:30px;font-weight:900}.pins{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.pins div{background:var(--card);border:2px solid #272727;border-radius:14px;justify-content:center;align-items:center;height:64px;font-size:32px;font-weight:900;display:flex}.pulse{background:var(--acc);border-radius:50%;width:96px;height:96px;animation:1.4s infinite pu}@keyframes pu{0%{box-shadow:0 0 #ff5a36b3}to{box-shadow:0 0 0 60px #ff5a3600}}.vs{font-size:84px;font-style:italic;font-weight:900;font-stretch:62%}.vsname{text-transform:uppercase;font-size:40px;font-weight:900;font-stretch:70%}.avatar{background:var(--opp);color:#0b1a2e;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;font-size:36px;font-weight:900;display:flex}.choice.big{color:#141414;text-align:left;border:none;border-radius:24px;flex-direction:column;justify-content:space-between;height:130px;padding:14px 18px;display:flex}.choice.big b{font-size:22px}.choice.big span{font-size:44px;font-weight:900;font-stretch:72%}.fbscreen{color:#0a2615;border-radius:24px;flex-direction:column;justify-content:center;gap:16px;min-height:70vh;padding:28px;display:flex}.fbscreen small{font-size:13px;font-weight:700;display:block}.fbscreen b{font-size:40px;font-weight:900}.card{background:var(--card);border-radius:16px;padding:14px 16px}.legal{gap:12px;padding:8px 10px;font-size:12px;display:flex}.legal a,.legal button{color:var(--grey3);background:0 0;border:none;padding:0;font-size:12px;text-decoration:underline}.legal{flex-wrap:wrap}.modal{z-index:50;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.dlg{background:var(--card);border-radius:16px;flex-direction:column;gap:12px;width:100%;max-width:400px;padding:22px;display:flex}.dlg h2{margin:0;font-size:20px}
