@import "https://fonts.googleapis.com/css2?family=Teko:wght@500;700&family=Inter:wght@400;600;800&family=Orbitron:wght@600;800;900&display=swap";:root{--primary-green:#0f6;--primary-accent:#0df;--dark-bg:#0a1018e0;--xbox-green:#107c10;--hud-border:#ffffff2e;--panel-glow:0 8px 32px 0 #0000005e}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{color:#fff;background-color:#060a0f;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}#canvas-container{z-index:1;width:100vw;height:100vh;position:absolute;top:0;left:0}.hud-layer{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.scoreboard-header{pointer-events:auto;background:linear-gradient(#060c14f2 0%,#060c1499 75%,#0000 100%);justify-content:space-between;align-items:center;gap:16px;padding:14px 28px;display:flex}.tournament-title{align-items:center;gap:12px;display:flex}.xbox-logo-pill{color:#fff;letter-spacing:1px;background:linear-gradient(135deg,#107c10,#1eb81e);border-radius:4px;padding:5px 12px;font-family:Orbitron,sans-serif;font-size:13px;font-weight:800;box-shadow:0 0 15px #107c1099}.match-category{letter-spacing:2px;color:#9cb3c9;text-transform:uppercase;font-family:Orbitron,sans-serif;font-size:13px}.title-details{flex-direction:column;gap:4px;display:flex}.mode-switcher{align-items:center;gap:6px;display:flex}.mode-pill{color:#9cb3c9;cursor:pointer;letter-spacing:1px;background:#101a26b3;border:1px solid #00ddff40;border-radius:4px;padding:3px 9px;font-family:Orbitron,sans-serif;font-size:9px;font-weight:700;transition:all .2s}.mode-pill:hover{color:#fff;background:#00ddff26;border-color:#0df}.mode-pill.active{color:#060c14;background:linear-gradient(135deg,#0df,#08c);border-color:#0df;font-weight:800;box-shadow:0 0 10px #0df6}.main-scoreboard{backdrop-filter:blur(12px);background:#0c1622e0;border:1px solid #00ddff40;border-radius:12px;align-items:center;gap:18px;padding:6px 20px;display:flex;box-shadow:0 4px 24px #00000080,inset 0 1px #ffffff26}.player-score-card{flex-direction:column;align-items:center;min-width:80px;display:flex}.player-badge{letter-spacing:1px;color:#0df;align-items:center;gap:6px;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;display:flex}.player-badge.p2{color:#f90}.serve-dot{opacity:0;background:#fc0;border-radius:50%;width:8px;height:8px;transition:opacity .2s;display:inline-block;box-shadow:0 0 8px #fc0}.serve-dot.active{opacity:1}.score-digit{color:#fff;text-shadow:0 0 10px #fff6;font-family:Teko,sans-serif;font-size:46px;font-weight:700;line-height:46px}.vs-divider{color:#fff6;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700}.hud-actions{flex-wrap:wrap;gap:8px;display:flex}.hud-btn{border:1px solid var(--hud-border);color:#fff;cursor:pointer;backdrop-filter:blur(8px);background:#14202ed9;border-radius:8px;align-items:center;gap:6px;padding:7px 13px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.hud-btn:hover{background:#00ddff40;border-color:#0df;transform:translateY(-1px);box-shadow:0 0 14px #0df6}.hud-btn.active{color:#000;background:linear-gradient(135deg,#0a6,#0f8);border-color:#0f8;font-weight:700;box-shadow:0 0 16px #0f89}.hud-btn.vr-active{color:#000;background:linear-gradient(135deg,#08c,#0ef);border-color:#0ef;font-weight:800;box-shadow:0 0 18px #00eeffb3}.hud-btn.calibrated-pulse{transform:scale(1.06);color:#fff!important;background:linear-gradient(135deg,#107c10,#52b052)!important;border-color:#52b052!important;font-weight:800!important;box-shadow:0 0 22px #52b052e6!important}.btn-pip-quick-center.calibrated-pulse{transform:scale(1.05);color:#fff!important;background:#107c10!important;border-color:#52b052!important;box-shadow:0 0 12px #52b052e6!important}.hud-btn.primary{color:#000;background:linear-gradient(135deg,#08c,#0df);border-color:#0df;font-weight:800;box-shadow:0 0 14px #0df6}.hud-btn.primary:hover{filter:brightness(1.15);transform:translateY(-1px)}.hud-btn.difficulty-btn{letter-spacing:.5px;justify-content:center;min-width:96px;font-weight:700;transition:all .22s cubic-bezier(.4,0,.2,1)}.hud-btn.difficulty-btn.easy{color:#0f8;background:#00ff881f;border-color:#0f8;box-shadow:0 0 12px #00ff8840}.hud-btn.difficulty-btn.easy:hover{background:#00ff883d;transform:translateY(-1px);box-shadow:0 0 18px #00ff888c}.hud-btn.difficulty-btn.medium{color:#fb0;background:#ffbb0024;border-color:#fb0;box-shadow:0 0 12px #ffbb004d}.hud-btn.difficulty-btn.medium:hover{background:#ffbb0047;transform:translateY(-1px);box-shadow:0 0 18px #fb09}.hud-btn.difficulty-btn.hard{color:#f37;background:linear-gradient(135deg,#ff005540,#ff440038);border-color:#f05;box-shadow:0 0 14px #f056}.hud-btn.difficulty-btn.hard:hover{background:linear-gradient(135deg,#ff005561,#ff440059);transform:translateY(-1px);box-shadow:0 0 22px #ff0055b3}.hud-btn.danger{background:#b42828cc;border-color:#f44}.hud-btn.danger:hover{background:#f44;box-shadow:0 0 12px #ff444480}.player-stamina-card{pointer-events:auto;backdrop-filter:blur(8px);background:#080e16d9;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:10px;padding:6px 14px;transition:all .2s;display:flex;position:absolute;box-shadow:0 4px 16px #0009}.player-stamina-card.p1{bottom:24px;right:40px}.player-stamina-card.p2{top:100px;left:40px}.tag-badge{color:#0df;letter-spacing:.5px;background:#153250;border-radius:3px;padding:2px 7px;font-family:Orbitron,sans-serif;font-size:11px;font-weight:800}.player-stamina-card.p2 .tag-badge{color:#fa0;background:#422410}.stamina-bar-container{background:#111a24;border:1.5px solid #284460;border-radius:2px;width:90px;height:10px;position:relative;overflow:hidden}.stamina-bar-fill{background:linear-gradient(90deg,#107c10,#0f6);width:20%;height:100%;transition:width .25s cubic-bezier(.1,.9,.2,1);box-shadow:0 0 8px #0f69}.stamina-bar-fill.hyper{background:linear-gradient(90deg,#f05,#fd0);animation:.6s infinite alternate pulseSmash;box-shadow:0 0 14px #f30}@keyframes pulseSmash{0%{filter:brightness()}to{filter:brightness(1.6)}}.toast-container{pointer-events:none;z-index:50;flex-direction:column;align-items:center;display:flex;position:absolute;top:72px;left:50%;transform:translate(-50%)}.action-toast{letter-spacing:1.5px;color:#0f8;text-transform:uppercase;text-shadow:0 0 8px #00ff8880;opacity:0;backdrop-filter:blur(8px);background:#08101ae0;border:1px solid #00ff8880;border-radius:6px;padding:5px 18px;font-family:Orbitron,sans-serif;font-size:13px;font-weight:700;transition:all .2s ease-out;transform:translateY(-8px);box-shadow:0 4px 16px #0009}.action-toast.show{opacity:1;transform:translateY(0)}.serve-prompt-container{pointer-events:auto;z-index:40;align-items:center;gap:12px;display:flex;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.serve-prompt{letter-spacing:1px;color:#0df;backdrop-filter:blur(10px);cursor:pointer;background:#0c1622e6;border:1px solid #00ddff80;border-radius:20px;padding:10px 24px;font-size:13px;font-weight:700;transition:all .2s;animation:1.2s ease-in-out infinite bounceHint;box-shadow:0 0 20px #00ddff4d}.serve-prompt:hover{color:#0f8;background:#0df3;border-color:#0f8;box-shadow:0 0 25px #00ff8880}@keyframes bounceHint{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.webcam-pip{pointer-events:auto;backdrop-filter:blur(10px);background:#0a101af0;border:1px solid #0f86;border-radius:12px;width:420px;transition:width .25s,height .25s;position:absolute;bottom:24px;left:24px;overflow:hidden;box-shadow:0 8px 30px #000000b3}.webcam-pip.pip-large{width:520px}.webcam-pip.pip-large .pip-viewport{height:292px}.webcam-pip.pip-compact{width:300px}.webcam-pip.pip-compact .pip-viewport{height:169px}.pip-header{background:#101a26f2;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.pip-title{letter-spacing:.5px;text-transform:uppercase;color:#0f8;align-items:center;gap:6px;font-size:11px;font-weight:700;display:flex}.pip-size-btn{color:#9cb3c9;cursor:pointer;letter-spacing:.5px;background:#ffffff14;border:1px solid #fff3;border-radius:6px;padding:2px 8px;font-size:9.5px;font-weight:700;transition:all .2s}.pip-size-btn:hover{color:#0f8;background:#0f83;border-color:#0f8}.status-indicator-dot{background:#555;border-radius:50%;width:8px;height:8px}.status-indicator-dot.active{background:#0f8;box-shadow:0 0 8px #0f8}.pip-viewport{background:#050b11;width:100%;height:236px;transition:height .25s;position:relative}#webcam-video{opacity:.01;pointer-events:none;z-index:-1;width:1px;height:1px;position:absolute;top:0;left:0}#webcam-canvas{object-fit:contain;background:#050b11;width:100%;height:100%;transition:transform .2s;display:block;transform:scaleX(1)}#webcam-canvas.mirrored{transform:scaleX(-1)}.pip-footer{color:#9cb3c9;background:#060c14e6;justify-content:space-between;align-items:center;padding:6px 10px;font-size:10px;display:flex}.filter-badge{color:#0df;font-weight:600}.btn-pip-quick-center{color:#0f8;cursor:pointer;background:#0f83;border:1px solid #0f8;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.btn-pip-quick-center:hover{color:#000;background:#0f8}.modal-overlay{backdrop-filter:blur(14px);z-index:100;opacity:0;pointer-events:none;visibility:hidden;cursor:pointer;background:#04080ee0;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .25s,visibility .25s;display:flex;position:fixed;top:0;left:0}.modal-overlay.open{opacity:1;pointer-events:auto;visibility:visible}.modal-card{cursor:default;background:linear-gradient(135deg,#0e1826fa,#080e18fa);border:1px solid #0df6;border-radius:16px;width:90%;max-width:520px;max-height:90vh;padding:26px;position:relative;overflow-y:auto;box-shadow:0 12px 48px #000c,0 0 30px #0df3}.modal-close{color:#8fa5ba;cursor:pointer;background:0 0;border:none;font-size:24px;position:absolute;top:18px;right:18px}.modal-title{color:#fff;align-items:center;gap:10px;margin-bottom:6px;font-family:Orbitron,sans-serif;font-size:19px;font-weight:800;display:flex}.modal-subtitle{color:#8fa5ba;margin-bottom:20px;font-size:13px;line-height:1.5}.mp-section{background:#121e3099;border:1px solid #ffffff1a;border-radius:12px;margin-bottom:16px;padding:16px}.mp-section h4{color:#0df;margin-bottom:8px;font-size:13px;font-weight:700}.room-display{align-items:center;gap:10px;margin-top:10px;display:flex}.room-code-tag{color:#0f8;letter-spacing:2px;text-align:center;background:#06101c;border:1px solid #0f8;border-radius:8px;flex:1;padding:8px 16px;font-family:Orbitron,sans-serif;font-size:20px;font-weight:800}.room-input{color:#fff;text-transform:uppercase;background:#06101c;border:1px solid #fff3;border-radius:8px;width:100%;margin-bottom:10px;padding:10px 14px;font-family:Orbitron,sans-serif;font-size:16px}.modal-btn{color:#000;cursor:pointer;background:linear-gradient(135deg,#08c,#0df);border:none;border-radius:8px;width:100%;padding:11px;font-family:Orbitron,sans-serif;font-size:13px;font-weight:800;transition:all .2s}.modal-btn:hover{filter:brightness(1.15);box-shadow:0 0 16px #00ddff80}.modal-btn.secondary{color:#fff;background:#ffffff1a;border:1px solid #fff3;margin-top:8px}.modal-btn.secondary:hover{background:#fff3}.modal-btn.success{color:#000;background:linear-gradient(135deg,#107c10,#0f6);box-shadow:0 0 15px #00ff6680}.calibration-guide-box{background:#08101ab3;border:1px solid #00ff884d;border-radius:10px;margin-bottom:16px;padding:14px}.calibration-row{justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;display:flex}.calibration-row label{color:#9cb3c9;font-weight:600}.slider-ctrl{align-items:center;gap:10px;width:58%;display:flex}.slider-ctrl input[type=range]{accent-color:#0f8;flex:1}.slider-val{text-align:right;color:#0f8;min-width:32px;font-family:Orbitron,sans-serif;font-size:11px}.live-direction-badge{color:#0f8;letter-spacing:1px;background:#081822;border:1px solid #0f8;border-radius:6px;padding:4px 10px;font-family:Orbitron,sans-serif;font-size:12px;font-weight:800}.matchover-card{text-align:center;max-width:440px}.trophy-icon{margin-bottom:10px;font-size:54px}.winner-headline{color:#fd0;text-shadow:0 0 20px #fd09;margin-bottom:12px;font-family:Orbitron,sans-serif;font-size:28px;font-weight:900}.final-score-box{color:#fff;letter-spacing:4px;margin-bottom:24px;font-family:Teko,sans-serif;font-size:64px;font-weight:700;line-height:64px}@media (width<=768px){.scoreboard-header{padding:8px 12px}.tournament-title .match-category{display:none}.score-digit{font-size:36px}.webcam-pip{width:150px;bottom:14px;left:14px}.pip-viewport{height:95px}.game-select-grid{grid-template-columns:1fr}.camera-select-row{grid-template-columns:1fr 1fr}}
