:root{--bg1:#0f2b5b;--bg2:#1f6fb2;--bg3:#7fc8f8;--card:rgba(255,255,255,.95);--ink:#14233a;--muted:#5b6b85;--ok:#2ecc71;--bad:#e74c3c;--accent:#ff9f1c;--accent2:#ffbf69;--radius:18px;--page:#dff0fb}*{box-sizing:border-box}body,html{height:100%;margin:0}body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--page);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}body.playing{background:linear-gradient(180deg,var(--bg1) 0,var(--bg2) 55%,var(--bg3) 100%)}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}.hidden{display:none!important}.card{width:min(760px,94vw);max-height:94vh;overflow:auto;background:var(--card);border-radius:var(--radius);box-shadow:0 18px 50px rgba(20,60,110,.18);padding:28px 30px}.card h1{margin:0 0 4px;font-size:28px;letter-spacing:.3px}.card h1 span{color:var(--accent)}.card .sub{margin:0 0 20px;color:var(--muted);font-size:14px}label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}label small{font-weight:400;color:var(--muted)}input[type=text],input[type=url],select,textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:2px solid #d7deea;border-radius:10px;background:#fff;color:var(--ink);outline:0;transition:border-color .15s}input:focus,select:focus,textarea:focus{border-color:var(--bg2)}textarea{min-height:120px;resize:vertical;line-height:1.45}.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cols.three{grid-template-columns:1fr 1fr 1fr}.cols.four{grid-template-columns:1fr 1fr 1fr 1fr}@media (max-width:640px){.cols,.cols.four,.cols.three{grid-template-columns:1fr}}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px}.btn{font:inherit;font-weight:700;font-size:16px;border:0;cursor:pointer;padding:12px 22px;border-radius:12px;color:#fff;background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 6px 0 #c76f00,0 10px 20px rgba(0,0,0,.2);transition:transform .06s,box-shadow .06s}.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c76f00,0 4px 10px rgba(0,0,0,.2)}.btn[disabled]{opacity:.6;cursor:wait}.btn.secondary{background:linear-gradient(180deg,#8fa7c7,#5e7aa3);box-shadow:0 6px 0 #3f5675,0 10px 20px rgba(0,0,0,.2)}.btn.secondary:active{box-shadow:0 2px 0 #3f5675,0 4px 10px rgba(0,0,0,.2)}.btn.ok{background:linear-gradient(180deg,#6ee7a0,var(--ok));box-shadow:0 6px 0 #1e8c4c,0 10px 20px rgba(0,0,0,.2)}.btn.ok:active{box-shadow:0 2px 0 #1e8c4c}.btn.small{font-size:13px;padding:7px 12px;border-radius:9px;box-shadow:0 3px 0 #3f5675}.btn.small:active{transform:translateY(2px);box-shadow:0 1px 0 #3f5675}.btn.big{font-size:22px;padding:16px 40px}.btn.logout{background:linear-gradient(180deg,#ff8a80,var(--bad));box-shadow:0 3px 0 #a93226;margin-left:8px}.btn.logout:active{box-shadow:0 1px 0 #a93226}.err{color:var(--bad);font-size:14px;margin-top:10px;min-height:18px}.hint{color:var(--muted);font-size:13px;margin-top:8px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#14233a;color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:10}.toast.show{opacity:1}.toast.error{background:var(--bad);font-weight:700}.dlg-overlay{position:fixed;inset:0;background:rgba(10,20,40,.55);z-index:50;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.dlg{width:min(440px,92vw);padding:24px 26px}.dlg-msg{font-size:16px;line-height:1.5}.langsel{position:relative;display:inline-block;font-size:13px}.langsel-btn{display:flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:2px solid #d7deea;border-radius:8px;padding:5px 9px;cursor:pointer}.langsel-btn i{font-style:normal;color:var(--muted);font-size:11px}.langsel .flag{display:inline-flex;width:24px;height:16px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.15);flex:0 0 auto}.langsel .flag svg{width:100%;height:100%;display:block}.langsel-menu{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.28);padding:6px;display:none;z-index:40;min-width:160px}.langsel.open .langsel-menu{display:block}.langsel-menu button{display:flex;align-items:center;gap:9px;width:100%;font:inherit;font-size:14px;color:var(--ink);background:0 0;border:0;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;white-space:nowrap}.langsel-menu button:hover{background:#eef3fa}.langsel-menu button.active{background:#ffe9c2;font-weight:700}.langrow{display:flex;justify-content:flex-end;margin:-10px -10px 0 0}.langfixed{position:fixed;top:12px;right:12px;z-index:9}#ipOverlay{position:fixed;inset:0;background:rgba(10,20,40,.6);z-index:20;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}.ip{width:min(720px,94vw)}.ip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.ip-head h2{margin:0;font-size:22px}.ip-tabs{display:flex;gap:4px;background:#eef3fa;border-radius:10px;padding:4px}.ip-tab{font:inherit;font-weight:700;font-size:13px;border:0;background:0 0;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--muted)}.ip-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.12)}.ip-search{display:flex;gap:8px}.ip-search input{flex:1}.ip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:12px;max-height:46vh;overflow:auto}.ip-item{border:3px solid transparent;border-radius:10px;padding:0;background:#eef3fa;cursor:pointer;aspect-ratio:1;overflow:hidden}.ip-item:hover{border-color:var(--accent)}.ip-item img{width:100%;height:100%;object-fit:cover;display:block}.ip-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted);min-height:24px}.ip-credit{margin-left:auto;font-size:12px}.ip-emoji-row{display:flex;gap:8px;margin-bottom:10px}.ip-emoji-row input{flex:1;font-size:24px}.ip-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;max-height:40vh;overflow:auto}.ip-emoji{font-size:26px;border:0;background:#f1f5fb;border-radius:8px;padding:4px 0;cursor:pointer;line-height:1.3}.ip-emoji:hover{background:#ffe9c2}.topbar{position:fixed;top:0;left:0;right:0;z-index:15;height:54px;display:flex;align-items:center;gap:14px;padding:0 16px;background:rgba(10,30,70,.82);backdrop-filter:blur(8px);color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.25)}.topbar .brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:20px}.topbar .brand img{width:28px;height:28px}.topnav{display:flex;align-items:center;gap:4px;margin-left:10px}.topnav .menu-btn,.topnav a{font:inherit;font-size:14px;font-weight:600;color:#fff;text-decoration:none;background:0 0;border:0;padding:8px 12px;border-radius:9px;cursor:pointer;opacity:.9;white-space:nowrap}.topnav .menu-btn:hover,.topnav a:hover{background:rgba(255,255,255,.12);opacity:1}.topnav .menu-btn.active,.topnav a.active{background:rgba(255,255,255,.18);opacity:1}.topnav .menu{position:relative}.topnav .menu-list{position:absolute;left:0;top:calc(100% + 6px);background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.3);padding:6px;display:none;min-width:210px;z-index:40}.topnav .menu.open .menu-list{display:block}.topnav .menu-list a{display:block;color:var(--ink);opacity:1;padding:9px 12px}.topnav .menu-list a:hover{background:#eef3fa}.topbar .spacer{flex:1}.usermenu{position:relative}.user-btn{font:inherit;font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:0;border-radius:9px;padding:7px 12px;cursor:pointer;white-space:nowrap}.user-btn:hover,.usermenu.open .user-btn{background:rgba(255,255,255,.22)}.user-list{position:absolute;right:0;top:calc(100% + 6px);background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.3);padding:6px;display:none;min-width:200px;z-index:40}.usermenu.open .user-list{display:block}.user-list button{display:block;width:100%;text-align:left;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:0 0;border:0;padding:10px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}.user-list button:hover{background:#eef3fa}.user-list button.danger{color:var(--bad)}.user-list button.danger:hover{background:#fdecea}.dlg input[type=password]{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:2px solid #d7deea;border-radius:10px;outline:0}.dlg input[type=password]:focus{border-color:var(--bg2)}.dlg label{margin-top:10px}.topbar .langsel-btn{padding:4px 8px}body.has-topbar #setup{padding-top:62px}body.has-topbar #setup .card{max-height:calc(94vh - 62px)}@media (max-width:720px){.topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}.user-btn span{display:none}body.has-topbar #setup{padding-top:110px}}body.has-preview #setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;padding:16px}body.has-topbar.has-preview #setup{padding-top:62px}body.has-preview #setup .card{width:auto;max-height:calc(100vh - 32px)}body.has-topbar.has-preview #setup .card{max-height:calc(100vh - 78px)}#previewPane{position:sticky;top:16px;height:calc(100vh - 32px);background:#0f2b5b;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 60px rgba(0,0,0,.35)}body.has-topbar #previewPane{top:62px;height:calc(100vh - 78px)}.pv-head{display:flex;align-items:center;gap:8px;padding:8px 12px;color:#fff;background:rgba(0,0,0,.35);font-weight:700;font-size:14px}.pv-head .spacer{flex:1}.pv-head .btn.small{box-shadow:0 3px 0 #3f5675}#previewPane iframe{flex:1;border:0;width:100%;background:#0f2b5b}@media (max-width:960px){body.has-preview #setup{grid-template-columns:1fr}#previewPane{position:fixed;inset:0;z-index:45;border-radius:0;height:auto!important;top:0!important}}.tbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#eef3fa;border-radius:12px;padding:10px 12px;margin:-6px 0 16px;font-size:14px}.tbar input{flex:1;min-width:160px;padding:7px 10px;font-size:14px}.tbar-back{color:var(--bg2);font-weight:700;text-decoration:none;white-space:nowrap}.tbar-user{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}.tbar-user a{color:var(--bg2)}.tbar-local{color:var(--muted);font-size:13px}.share{display:flex;gap:22px;align-items:center;margin-top:18px;padding:18px 20px;background:#f1f5fb;border-radius:14px}@media (max-width:640px){.share{flex-direction:column}}.share-left{flex:1;min-width:0}.share-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}.share-code{font-size:56px;font-weight:900;letter-spacing:.18em;line-height:1.1;color:var(--ink);font-family:Consolas,"Segoe UI",monospace}.share-join{font-size:15px;color:var(--muted);margin:4px 0 10px}.share-join b{color:var(--ink)}.share input{font-size:12px;color:var(--muted);padding:6px 10px}.share-qr{flex:0 0 auto}.share-qr canvas,.share-qr img{display:block;border:6px solid #fff;border-radius:10px}#bigShare{position:fixed;inset:0;z-index:8;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px}.big-label{font-size:clamp(18px, 3vw, 28px);color:var(--muted)}.big-join{font-size:clamp(20px, 3.5vw, 34px);font-weight:700}.big-code{font-size:clamp(80px, 18vw, 200px);font-weight:900;letter-spacing:.15em;line-height:1;font-family:Consolas,"Segoe UI",monospace;margin:8px 0 18px}#bigQr canvas,#bigQr img{display:block}.intro{text-align:center}.intro .q{font-size:clamp(22px, 4vw, 34px);font-weight:800;margin:10px 0 6px}.intro .rule{color:var(--muted);font-size:15px;margin-bottom:22px}.intro .rule b.ok{color:var(--ok)}.intro .rule b.bad{color:var(--bad)}.intro .cols{text-align:left;max-width:520px;margin:0 auto 18px}.intro label{margin-top:0}.lb{width:100%;border-collapse:collapse;font-size:14px;text-align:left}.lb th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:6px 8px;border-bottom:2px solid #e3e8f0}.lb td{padding:8px;border-bottom:1px solid #eef2f7}.lb tr.me td{background:#fff4e0;font-weight:700}.lb td.rank{width:44px;font-weight:800;text-align:center}.lb td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.lb .cls{display:inline-block;background:#eaf0f8;border-radius:6px;padding:1px 7px;font-size:12px;margin-left:6px;color:var(--muted);font-weight:600}.lb-empty{color:var(--muted);font-size:14px;padding:18px;text-align:center}.lb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.lb-head h2{margin:0;font-size:22px}.lb-head select{width:auto;padding:6px 10px;font-size:14px}.lb-wrap{max-height:50vh;overflow:auto;border:1px solid #e3e8f0;border-radius:12px}.myrank{font-size:18px;font-weight:800;margin:4px 0 14px;color:var(--accent)}#lbOverlay{position:fixed;inset:0;background:rgba(10,20,40,.6);z-index:7;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}#game{display:block}.hud{position:absolute;top:0;left:0;right:0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none;z-index:2}.hud .pill{background:rgba(0,0,0,.28);backdrop-filter:blur(4px);border-radius:999px;padding:8px 16px;font-weight:700;font-size:16px;white-space:nowrap}.hud .q{flex:1;text-align:center;font-size:clamp(14px, 2.4vw, 22px);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud .progress{font-variant-numeric:tabular-nums}.hud .pauseBtn{pointer-events:auto;cursor:pointer}#countdown{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(90px, 20vw, 200px);font-weight:900;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.5);z-index:5;pointer-events:none}#pauseOverlay{position:fixed;inset:0;background:rgba(10,20,40,.6);z-index:6;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}.result{text-align:center}.result .big-emoji{font-size:72px;line-height:1}.result h2{font-size:34px;margin:10px 0 4px}.result .msg{color:var(--muted);margin-bottom:20px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 0 20px}@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}.stat{background:#f1f5fb;border-radius:12px;padding:12px 8px}.stat .v{font-size:26px;font-weight:800}.stat .k{font-size:12px;color:var(--muted)}.missed{text-align:left;background:#fff6f5;border:1px solid #f5c6c1;border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:14px}.missed b{color:var(--bad)}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chip{background:#fff;border:1px solid #e3e8f0;border-radius:999px;padding:4px 10px;font-size:13px}.result .lb-wrap{text-align:left;margin-bottom:18px}.ai-btn{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;margin-left:8px}.ai-btn:hover{filter:brightness(1.08)}.ai-dlg{width:min(600px,94vw);max-height:92vh;overflow:auto}.ai-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.ai-head h2{margin:0;font-size:21px;flex:1}.ai-x{background:0 0;border:0;font-size:20px;cursor:pointer;color:var(--muted);padding:4px 8px}.ai-dlg textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:10px 12px;border:2px solid #d7deea;border-radius:10px;outline:0;resize:vertical}.ai-dlg input:focus,.ai-dlg textarea:focus{border-color:var(--bg2)}.ai-dlg input[type=password]{flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 12px;border:2px solid #d7deea;border-radius:10px;outline:0;margin:0}.ai-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.ai-row label{margin:0}.ai-row select{width:auto;margin:0}.ai-keyok .spacer,.ai-row .spacer{flex:1}.ai-status{min-height:22px;margin-top:10px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}.ai-status.bad{color:var(--bad)}.ai-spin{width:16px;height:16px;border:3px solid #c7d2fe;border-top-color:#4f46e5;border-radius:50%;animation:aispin .8s linear infinite;flex:none}@keyframes aispin{to{transform:rotate(360deg)}}.ai-key{margin-top:8px;padding-top:10px;border-top:1px solid #e5eaf2}.ai-key .hint{margin:4px 0 0}.ai-keyok{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}.ai-keyok code{background:#f1f5fb;border-radius:6px;padding:2px 6px}.ai-manual{margin-top:12px;padding-top:10px;border-top:1px solid #e5eaf2}.ai-manual summary{cursor:pointer;font-weight:700;font-size:14px}.ai-manual .row{margin:8px 0}.ai-warn{margin:12px 0 0}.ai-howto{margin:8px 0 4px;background:#f6f8fd;border:1px solid #e3e9f4;border-radius:12px;padding:8px 14px}.ai-howto summary{cursor:pointer;font-weight:700;font-size:14px;color:#3b4a6b}.ai-howto ol{margin:8px 0 10px;padding-left:22px;font-size:14px;line-height:1.55}.ai-howto li{margin:3px 0}.ai-howto .ai-open{display:inline-block;text-decoration:none}.ai-howto .hint{margin:10px 0 2px}.vx{position:fixed;z-index:60;display:flex;align-items:center;gap:2px;background:#fff;border:1px solid #d7deea;border-radius:999px;padding:2px;box-shadow:0 2px 8px rgba(15,43,91,.15)}.vx button{border:0;background:0 0;cursor:pointer;font:inherit;line-height:1;border-radius:999px;color:var(--ink)}.vx .vx-mic{font-size:16px;width:30px;height:26px}.vx .vx-lang{font-size:11px;font-weight:700;padding:0 7px;height:26px;color:var(--muted)}.vx .vx-lang:disabled{cursor:default;opacity:.8}.vx button:hover:not(:disabled){background:#eef3fa}.vx.on{border-color:var(--bad)}.vx.on .vx-mic{background:var(--bad);animation:vxPulse 1s ease-in-out infinite alternate}@keyframes vxPulse{from{box-shadow:0 0 0 0 rgba(231,76,60,.5)}to{box-shadow:0 0 0 6px rgba(231,76,60,0)}}.vx .vx-tip{position:absolute;right:0;bottom:calc(100% + 6px);background:var(--ink);color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;width:max-content;max-width:min(300px,80vw);white-space:normal;line-height:1.35;pointer-events:none}.vx.vx-off .vx-mic{opacity:.55}.vx .vx-tip.hidden{display:none}input.vx-pad,textarea.vx-pad{padding-right:80px!important}#pvFull{display:inline-flex;align-items:center;gap:5px}#pvFull svg{flex:none}#previewPane.pv-full{border-radius:0;box-shadow:none}#previewPane:fullscreen{position:fixed;inset:0;width:100%;height:100%;top:0}#previewPane:-webkit-full-screen{position:fixed;inset:0;width:100%;height:100%;top:0}#previewPane.pv-css-full{position:fixed!important;inset:0!important;top:0!important;height:auto!important;z-index:70}body.pv-noscroll{overflow:hidden}@media (max-width:520px){#pvFull .pv-full-txt{display:none}}.modesel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;padding:8px 10px;background:#f1f6fd;border:1px solid #dfe8f5;border-radius:14px}.modesel .ms-fam{font-weight:800;color:#3b4a6b;margin-right:6px}.modesel .ms-lbl{color:var(--muted);font-size:13px;margin-right:2px}.modesel .ms-btn{font:inherit;font-size:14px;font-weight:700;border:2px solid #d3deee;background:#fff;color:#3b4a6b;border-radius:999px;padding:5px 12px;cursor:pointer}.modesel .ms-btn:hover{border-color:var(--bg2)}.modesel .ms-btn.on{background:var(--bg2);border-color:var(--bg2);color:#fff;cursor:default}