:root{--bni-red:#cf2030;--bni-red-shade:#a11926;--dark-grey:#64666a;--dark-grey-tint:#8a8c90;--sterling-grey:#c8c8c8;--sterling-grey-shade:#a8a8a8;--white:#fff}*{box-sizing:border-box}body{color:#222;-webkit-font-smoothing:antialiased;background-color:#111;margin:0;font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif}h1,h2,h3,.serif{font-family:Noto Serif TC,Source Han Serif TC,serif}h2{margin:0 0 12px;font-size:22px;font-weight:700}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.status-overlay{z-index:1000;text-align:center;color:var(--white);background:#111111eb;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.status-overlay.hidden{display:none!important}.spinner{border:4px solid var(--sterling-grey);border-top-color:var(--bni-red);border-radius:50%;width:48px;height:48px;margin-bottom:20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.reconnect-banner{background:var(--bni-red-shade);color:var(--white);z-index:999;justify-content:center;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:700;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 2px 10px #0006}.reconnect-banner.hidden{display:none!important}.topbar{color:var(--white);background:#000;border-bottom:1px solid #222;justify-content:space-between;align-items:center;padding:14px 24px;font-size:13px;display:flex}.skip-btn{background:var(--dark-grey);color:var(--white);cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-family:inherit;font-size:12px;font-weight:700;transition:background .2s}.skip-btn:hover{background:var(--dark-grey-tint)}.skip-btn.hidden{display:none!important}.tug-container{margin:16px 24px}.tug{background:var(--sterling-grey);border-radius:999px;height:26px;display:flex;overflow:hidden;box-shadow:inset 0 2px 6px #0000004d}.tug .green{width:50%;color:var(--white);background:#2f7d4f;justify-content:flex-end;align-items:center;padding-right:10px;font-size:12px;font-weight:700;transition:width .4s ease-out;display:flex}.tug .gold{background:var(--bni-red);width:50%;color:var(--white);align-items:center;padding-left:10px;font-size:12px;font-weight:700;transition:width .4s ease-out;display:flex}.canvas-wrap{background:radial-gradient(circle at 50% 30%,#2a2a2a,#0d0d0d);border-radius:16px;width:100%;height:280px;margin:16px 0;position:relative;overflow:hidden;box-shadow:inset 0 0 50px #cf203026}.canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.fallback-2d-stage{background:radial-gradient(circle at 50% 30%,#2a2a2a,#0d0d0d);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.fallback-2d-stage img{object-fit:contain;filter:drop-shadow(0 0 20px #cf203099);width:100px;height:100px;animation:2s ease-in-out infinite alternate floatMascot}@keyframes floatMascot{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.question-card{border-left:5px solid var(--bni-red);color:var(--white);background:#1a1a1a;border-radius:12px;margin:20px 24px;padding:22px}.question-card .cat{color:var(--sterling-grey);font-size:12px}.question-card .q{color:var(--white);margin:10px 0 18px;font-family:Noto Serif TC,Source Han Serif TC,serif;font-size:20px;font-weight:700}.opts{grid-template-columns:1fr 1fr;gap:12px;display:grid}.opt{color:var(--white);background:#262626;border:1px solid #333;border-radius:8px;padding:14px;font-size:14px;transition:all .2s}.opt.correct{border-color:var(--bni-red);background:#cf203033}.timer{text-align:center;color:var(--bni-red);font-variant-numeric:tabular-nums;margin:10px 0;font-size:44px;font-weight:900}.leaderboard{margin:20px 24px}.leaderboard .row{color:var(--white);background:#1a1a1a;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 16px;font-size:14px;display:flex}.leaderboard .row:first-child{border-left:4px solid var(--bni-red)}.badge{background:var(--bni-red);color:var(--white);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}.host-wrap{color:var(--white);background:#111;min-height:100vh;padding-bottom:40px}.stage-card{text-align:center;background:radial-gradient(circle at 50% 30%,#2a2a2a,#0d0d0d);border:1px solid #2a2a2a;border-radius:16px;margin:20px 24px;padding:24px;position:relative;box-shadow:inset 0 0 60px #cf203026}.stage-desc{color:var(--sterling-grey);margin-top:8px;font-size:12px}