: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}.verify-modal{background:var(--white);color:#222;border:1px solid #ddd;border-radius:24px;max-width:380px;margin:40px auto;overflow:hidden;box-shadow:0 8px 30px #0003}.verify-modal.hidden{display:none!important}.verify-header{background:var(--bni-red);color:var(--white);text-align:center;padding:16px;font-size:16px;font-weight:700}.verify-body{padding:24px}.field{margin-bottom:16px}.field label{color:var(--dark-grey);margin-bottom:6px;font-size:13px;display:block}.field input{border:1px solid var(--sterling-grey);color:#222;background:#fafafa;border-radius:6px;width:100%;padding:10px 12px;font-size:14px}.field input:focus{border-color:var(--bni-red);outline:none}.btn-primary{background:var(--bni-red);width:100%;color:var(--white);cursor:pointer;border:none;border-radius:8px;padding:14px;font-family:inherit;font-size:15px;font-weight:700;transition:background .2s;display:block}.btn-primary:hover{background:var(--bni-red-shade)}.hint-error{color:var(--bni-red-shade);border-left:3px solid var(--bni-red);background:#fdecec;border-radius:6px;margin-top:12px;padding:10px 12px;font-size:12px}.player-mobile-view{max-width:480px;color:var(--white);background:#111;min-height:100vh;margin:0 auto;display:block}.player-top{background:#000;border-bottom:1px solid #222;justify-content:space-between;padding:16px;font-size:12px;display:flex}.mascot-box{text-align:center;padding:16px 0 10px}.mascot-box .dot{background:radial-gradient(circle at 35% 30%, #ffffff4d, transparent), var(--bni-red);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto;font-size:36px;transition:all .3s;display:flex;box-shadow:0 0 30px #cf203080}.mascot-box img{object-fit:contain;width:80px;height:80px}.mascot-box .state{text-align:center;color:var(--sterling-grey);margin-top:8px;font-size:12px}.player-q{border-left:4px solid var(--bni-red);color:var(--white);background:#1a1a1a;border-radius:10px;margin:16px;padding:16px;font-size:15px}.answer-grid{grid-template-columns:1fr 1fr;gap:12px;padding:4px 16px 24px;display:grid}.ans-btn{background:var(--dark-grey);color:var(--white);text-align:center;cursor:pointer;border:none;border-radius:12px;padding:26px 0;font-family:inherit;font-size:18px;font-weight:800;transition:all .15s ease-in-out}.ans-btn:active,.ans-btn.selected{transform:scale(.96);box-shadow:0 0 12px #fff6}.ans-btn:first-child{background:var(--bni-red)}.ans-btn:disabled{opacity:.5;cursor:not-allowed}.player-desktop-view{max-width:1080px;color:var(--white);background:#111;min-height:100vh;margin:0 auto;display:none}@media (width>=768px){.player-mobile-view{display:none}.player-desktop-view{flex-direction:row;display:flex}}.player-desktop-view .left-col{text-align:center;border-right:1px solid #2a2a2a;flex-direction:column;flex:0 0 360px;align-items:center;padding:32px;display:flex}.player-desktop-view .left-col img{object-fit:contain;width:140px;height:140px}.player-desktop-view .left-col .state{color:var(--sterling-grey);margin-top:12px;font-size:14px;line-height:1.6}.player-desktop-view .left-col .q-box{border-left:4px solid var(--bni-red);text-align:left;background:#1a1a1a;border-radius:10px;width:100%;margin-top:24px;padding:20px;font-family:Noto Serif TC,Source Han Serif TC,serif;font-size:16px}.player-desktop-view .right-col{flex-direction:column;flex:1;justify-content:center;padding:32px;display:flex}.answer-grid-wide{grid-template-columns:1fr 1fr;gap:20px;display:grid}.answer-grid-wide .ans-btn{border-radius:14px;padding:40px 0;font-size:22px}