*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0a0e17;--panel-bg: rgba(10, 14, 23, .92);--panel-border: rgba(255, 255, 255, .08);--accent-1: #00e5ff;--accent-2: #7c4dff;--accent-glow: rgba(0, 229, 255, .35);--text-primary: #f0f4ff;--text-secondary: #8892a8;--goal-flash-team1: rgba(0, 120, 255, .6);--goal-flash-team2: rgba(255, 50, 50, .6);--font-display: "Orbitron", sans-serif;--font-body: "Outfit", sans-serif;--radius: 12px;--radius-sm: 8px}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-dark);font-family:var(--font-body);color:var(--text-primary)}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;align-items:center;justify-content:center;background:var(--bg-dark)}#canvas-container canvas{display:block;border-radius:8px;box-shadow:0 0 60px #00e5ff26,0 0 120px #0009}#scoreboard{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:10;display:flex;align-items:center;gap:0;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:60px;padding:6px 12px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 4px 30px #00000080,0 0 40px var(--accent-glow);min-width:280px;-webkit-user-select:none;user-select:none}.team-section{display:flex;align-items:center;gap:8px;padding:4px 10px}.team-logo-display{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffffff1a,#ffffff08);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid rgba(255,255,255,.15);flex-shrink:0}.team-logo-display img{width:100%;height:100%;object-fit:cover;border-radius:50%}.team-logo-placeholder{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-secondary)}.team-name{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-primary);white-space:nowrap}#score-center{display:flex;flex-direction:column;align-items:center;padding:2px 16px;border-left:1px solid var(--panel-border);border-right:1px solid var(--panel-border)}#score-text{font-family:var(--font-display);font-size:22px;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#match-timer{font-family:var(--font-body);font-size:10px;color:var(--text-secondary);letter-spacing:2px}.goal-flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,229,255,.3) 0%,transparent 70%);animation:goalPulse 1.2s ease-out forwards}.goal-flash.hidden{display:none}.goal-text{font-family:var(--font-display);font-size:clamp(36px,10vw,80px);font-weight:900;color:#fff;text-shadow:0 0 20px var(--accent-1),0 0 60px var(--accent-2),0 0 120px var(--accent-1);animation:goalScale 1.2s ease-out forwards}@keyframes goalPulse{0%{opacity:0}20%{opacity:1}to{opacity:0}}@keyframes goalScale{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}to{transform:scale(1.4);opacity:0}}#settings-panel{position:fixed;bottom:20px;right:20px;z-index:15}#settings-toggle{width:48px;height:48px;border-radius:50%;border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0006,0 0 20px var(--accent-glow);transition:transform .3s ease,box-shadow .3s ease}#settings-toggle:hover{transform:scale(1.1) rotate(45deg);box-shadow:0 4px 30px #00000080,0 0 40px var(--accent-glow)}#settings-content{position:absolute;bottom:60px;right:0;width:300px;max-height:70vh;overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius);padding:20px;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 8px 40px #0009;transition:opacity .3s ease,transform .3s ease}#settings-content.collapsed{opacity:0;transform:translateY(20px) scale(.95);pointer-events:none}#settings-content h2{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.settings-group{margin-bottom:14px}.settings-group label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.settings-group input[type=text],.settings-group input[type=number]{width:100%;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--panel-border);background:#ffffff0d;color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .2s}.settings-group input[type=text]:focus,.settings-group input[type=number]:focus{border-color:var(--accent-1);box-shadow:0 0 12px var(--accent-glow)}.settings-group input[type=file]{width:100%;font-size:12px;color:var(--text-secondary)}.settings-group input[type=file]::file-selector-button{padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--panel-border);background:#ffffff0d;color:var(--text-primary);font-family:var(--font-body);cursor:pointer;margin-right:8px;transition:background .2s}.settings-group input[type=file]::file-selector-button:hover{background:#ffffff1f}.settings-group input[type=range]{width:100%;accent-color:var(--accent-1)}.button-row{display:flex;gap:8px;margin-top:10px}.btn{flex:1;padding:10px 14px;border:none;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;transition:all .25s ease;letter-spacing:.5px}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;box-shadow:0 4px 16px #00e5ff4d}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #00e5ff66}.btn-secondary{background:#ffffff14;color:var(--text-primary);border:1px solid var(--panel-border)}.btn-secondary:hover:not(:disabled){background:#ffffff24}.btn-record{background:linear-gradient(135deg,#ff1744,#ff6d00);color:#fff;box-shadow:0 4px 16px #ff17444d}.btn-record:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #ff174466}.btn-stop{background:#ffffff14;color:#ff5252;border:1px solid rgba(255,82,82,.3)}.btn-stop:hover:not(:disabled){background:#ff525226}#settings-content::-webkit-scrollbar{width:4px}#settings-content::-webkit-scrollbar-track{background:transparent}#settings-content::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}