:root{--primary-hue:260;--secondary-hue:200;--accent-hue:340;--bg-dark:hsl(var(--primary-hue),20%,8%);--bg-medium:hsl(var(--primary-hue),18%,12%);--bg-light:hsl(var(--primary-hue),15%,16%);--primary:hsl(var(--primary-hue),85%,60%);--primary-light:hsl(var(--primary-hue),85%,70%);--primary-dark:hsl(var(--primary-hue),85%,50%);--secondary:hsl(var(--secondary-hue),80%,55%);--accent:hsl(var(--accent-hue),85%,60%);--text-primary:#f2f2f2;--text-secondary:#b3b3b3;--text-muted:gray;--success:#3cdd71;--warning:#f5c73d;--error:#e64d4d;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--radius-sm:.5rem;--radius-md:1rem;--radius-lg:1.5rem;--radius-xl:2rem;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px rgba(var(--primary-hue),85%,60%,.3);--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease}*{box-sizing:border-box;margin:0;padding:0}html{height:100%;overflow:hidden}body{background:linear-gradient(135deg,var(--bg-dark)0%,var(--bg-medium)100%);color:var(--text-primary);width:100%;height:100%;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;position:fixed;overflow:hidden}.loading-screen{background:linear-gradient(135deg,var(--bg-dark)0%,var(--bg-medium)100%);z-index:9999;width:100%;height:100%;transition:opacity var(--transition-slow),visibility var(--transition-slow);justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.loading-screen.hidden{opacity:0;visibility:hidden}.loading-content{text-align:center}.loading-spinner{width:80px;height:80px;margin:0 auto var(--spacing-md);border:4px solid var(--bg-light);border-top-color:var(--primary);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-content h2{margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.loading-content p{color:var(--text-secondary);font-size:1rem}.game-container{min-height:100vh;transition:opacity var(--transition-slow);flex-direction:column;display:flex}.game-container.hidden{opacity:0;pointer-events:none}.game-header{background:rgba(var(--primary-hue),18%,12%,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-md)var(--spacing-lg);box-shadow:var(--shadow-md);border-bottom:2px solid #ffffff0d;justify-content:space-between;align-items:center;display:flex}.logo{align-items:center;gap:var(--spacing-sm);display:flex}.back-button{color:var(--text-primary);padding:var(--spacing-xs)var(--spacing-md);border-radius:var(--radius-sm);transition:all var(--transition-normal);background:#ffffff1a;border:1px solid #ffffff1a;font-size:.9rem;font-weight:600;text-decoration:none}.back-button:hover{background:#ffffff26;border-color:#fff3;transform:translate(-2px)}.logo-icon{filter:drop-shadow(0 0 10px #ffffff4d);font-size:2.5rem}.logo h1{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:800}.score-display{gap:var(--spacing-lg);display:flex}.score-item{padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);min-width:100px;transition:all var(--transition-normal);background:#ffffff0d;border:1px solid #ffffff1a;flex-direction:column;align-items:center;display:flex}.score-item:hover{box-shadow:var(--shadow-md);background:#ffffff14;transform:translateY(-2px)}.score-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.875rem}.score-value{background:linear-gradient(135deg,var(--primary-light),var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.main-content{gap:var(--spacing-md);padding:var(--spacing-md);flex:1;grid-template-columns:1fr 350px;width:100%;max-width:100vw;height:calc(100vh - 120px);margin:0 auto;display:grid;overflow:hidden}.canvas-container{background:var(--bg-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:2px solid #ffffff0d;height:100%;position:relative;overflow:hidden}#gameCanvas{width:100%;height:100%;display:block}.throw-indicator{bottom:var(--spacing-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-md)var(--spacing-lg);border-radius:var(--radius-xl);align-items:center;gap:var(--spacing-md);opacity:0;transition:opacity var(--transition-normal);pointer-events:none;background:#000000b3;display:flex;position:absolute;left:50%;transform:translate(-50%)}.throw-indicator.active{opacity:1;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:translate(-50%)scale(1)}50%{transform:translate(-50%)scale(1.05)}}.indicator-circle{background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;width:40px;height:40px;animation:1.5s ease-out infinite ripple}@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(var(--primary-hue),85%,60%,.7)}to{box-shadow:0 0 0 20px rgba(var(--primary-hue),85%,60%,0)}}.throw-indicator p{color:var(--text-primary);font-size:1.125rem;font-weight:600}.side-panel{gap:var(--spacing-sm);flex-direction:column;height:100%;padding-right:4px;display:flex;overflow:hidden auto}.side-panel::-webkit-scrollbar{width:6px}.side-panel::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.side-panel::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}.side-panel>div{background:var(--bg-light);border-radius:var(--radius-md);padding:var(--spacing-sm);box-shadow:var(--shadow-md);border:2px solid #ffffff0d}.side-panel h3{margin-bottom:var(--spacing-sm);color:var(--text-primary);align-items:center;gap:var(--spacing-xs);font-size:1rem;font-weight:700;display:flex}.camera-container{aspect-ratio:4/3;background:var(--bg-dark);border-radius:var(--radius-sm);max-height:200px;position:relative;overflow:hidden}#cameraVideo,#cameraCanvas{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}#cameraCanvas{z-index:2}.camera-status{top:var(--spacing-sm);right:var(--spacing-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--radius-sm);align-items:center;gap:var(--spacing-xs);z-index:3;background:#000000b3;font-size:.875rem;display:flex;position:absolute}.status-dot{background:var(--warning);border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite blink}.camera-status.active .status-dot{background:var(--success);animation:none}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.control-buttons{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-direction:column;display:flex}.btn{padding:var(--spacing-md)var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-sm);transition:all var(--transition-normal);border:none;font-family:inherit;font-size:1rem;font-weight:600;display:flex;position:relative;overflow:hidden}.btn:before{content:"";background:#fff3;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn:hover:before{width:300px;height:300px}.btn-icon{z-index:1;font-size:1.5rem}.btn span:not(.btn-icon){z-index:1}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 15px rgba(var(--primary-hue),85%,60%,.4)}.btn-primary:hover{box-shadow:0 6px 20px rgba(var(--primary-hue),85%,60%,.6);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--text-primary);background:#ffffff1a;border:2px solid #fff3}.btn-secondary:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px)}.instructions{border-radius:var(--radius-sm);padding:var(--spacing-sm);background:#ffffff08;border:1px solid #ffffff0d}.instructions h4{margin-bottom:var(--spacing-xs);color:var(--primary-light);font-size:.875rem;font-weight:600}.instructions ul{list-style:none}.instructions li{color:var(--text-secondary);padding:2px 0;font-size:.8rem;line-height:1.4}.stat-grid{gap:var(--spacing-sm);grid-template-columns:1fr 1fr;display:grid}.stat-card{border-radius:var(--radius-md);padding:var(--spacing-md);align-items:center;gap:var(--spacing-sm);transition:all var(--transition-normal);background:#ffffff08;border:1px solid #ffffff0d;display:flex}.stat-card:hover{box-shadow:var(--shadow-sm);background:#ffffff0d;transform:translateY(-2px)}.stat-icon{filter:drop-shadow(0 0 8px #ffffff4d);font-size:2rem}.stat-info{flex-direction:column;display:flex}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.stat-value{color:var(--text-primary);font-size:1.5rem;font-weight:700}.targets-section h3{justify-content:space-between;align-items:center;display:flex}#targetCount{color:var(--text-secondary);font-size:.875rem;font-weight:400}.target-controls{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);grid-template-columns:1fr 1fr;display:grid}.target-types{margin-bottom:var(--spacing-md)}.target-types label{color:var(--text-secondary);margin-bottom:var(--spacing-xs);font-size:.875rem;display:block}.target-select{width:100%;padding:var(--spacing-sm);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal);background:#ffffff0d;border:1px solid #ffffff1a;font-family:inherit;font-size:.9rem}.target-select:hover{background:#ffffff14;border-color:#fff3}.target-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-hue),85%,60%,.2);outline:none}.target-list{border-radius:var(--radius-md);padding:var(--spacing-xs);background:#ffffff08;border:1px solid #ffffff0d;min-height:60px;max-height:120px;overflow-y:auto}.target-list::-webkit-scrollbar{width:6px}.target-list::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.target-list::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}.empty-message{color:var(--text-muted);text-align:center;padding:var(--spacing-md);font-size:.875rem}.target-item{border-radius:var(--radius-sm);padding:var(--spacing-sm);margin-bottom:var(--spacing-xs);transition:all var(--transition-normal);background:#ffffff0d;border:1px solid #ffffff1a;justify-content:space-between;align-items:center;display:flex}.target-item:hover{background:#ffffff14;transform:translate(4px)}.target-item-info{align-items:center;gap:var(--spacing-sm);display:flex}.target-item-icon{font-size:1.5rem}.target-item-name{color:var(--text-primary);font-size:.9rem}.target-item-remove{color:#ef4444;cursor:pointer;width:24px;height:24px;transition:all var(--transition-normal);background:#ef444433;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.target-item-remove:hover{background:#ef444466;transform:scale(1.1)}.target-hint{margin-top:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);border-left:3px solid var(--primary);color:var(--text-secondary);background:#7c3aed1a;font-size:.8rem}.notification-container{bottom:var(--spacing-lg);left:var(--spacing-lg);z-index:10000;gap:var(--spacing-sm);flex-direction:column;display:flex;position:fixed}.notification{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-md)var(--spacing-lg);border-radius:var(--radius-md);border-left:4px solid var(--primary);box-shadow:var(--shadow-lg);align-items:center;gap:var(--spacing-md);background:#000000e6;min-width:300px;animation:.3s slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(-400px)}to{opacity:1;transform:translate(0)}}.notification.success{border-left-color:var(--success)}.notification.error{border-left-color:var(--error)}.notification-icon{font-size:1.5rem}.notification-content{flex:1}.notification-title{margin-bottom:.25rem;font-weight:600}.notification-message{color:var(--text-secondary);font-size:.875rem}@media (max-width:1400px){.main-content{grid-template-columns:1fr 320px}}@media (max-width:1200px){.main-content{gap:var(--spacing-sm);padding:var(--spacing-sm);grid-template-columns:1fr 280px}.side-panel h3{font-size:.9rem}.camera-container{max-height:150px}}@media (max-width:1024px){.main-content{grid-template-columns:1fr;height:auto}.canvas-container{height:50vh;min-height:400px}.side-panel{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));height:auto;display:grid;overflow-y:visible}}@media (max-width:768px){.game-header{gap:var(--spacing-sm);text-align:center;padding:var(--spacing-sm);flex-direction:column}.score-display{justify-content:center;gap:var(--spacing-sm);width:100%}.score-item{min-width:80px;padding:var(--spacing-xs)var(--spacing-sm)}.logo h1{font-size:1.5rem}.main-content{padding:var(--spacing-xs);gap:var(--spacing-xs)}.canvas-container{height:40vh;min-height:300px}.side-panel{grid-template-columns:1fr}}@media (max-width:480px){.score-display{flex-wrap:wrap}.score-item{flex:45%}}