:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden}.App{width:100vw;height:100vh;position:relative;overflow:hidden}.side-menu{position:absolute;top:0;left:-320px;width:300px;height:100vh;background:#141414f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;transition:left .3s ease-in-out;border-right:1px solid rgba(255,255,255,.1);box-shadow:5px 0 15px #00000080;color:#fff;display:flex;flex-direction:column}.side-menu.open{left:0}.menu-header{padding:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}.menu-header h2{margin:0;font-size:1.5rem;color:#fff}.close-btn{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:0;line-height:1}.close-btn:hover{color:#ff4d4d}.menu-content{padding:20px;overflow-y:auto}.control-group{margin-bottom:25px}.control-group h3{margin-top:0;margin-bottom:15px;font-size:1rem;color:#ddd;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:5px}.description{margin-top:10px;font-size:.85rem;color:#aaa;line-height:1.4}.restart-menu-btn{width:100%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px;border-radius:10px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px}.restart-menu-btn:hover{background:#fff3;border-color:#fff}.difficulty-selector{margin-top:15px;padding:0 5px}.difficulty-slider{-webkit-appearance:none;width:100%;height:6px;background:#444;border-radius:5px;outline:none;margin-bottom:10px}.difficulty-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#2196f3;cursor:pointer;box-shadow:0 0 5px #00000080;transition:transform .2s}.difficulty-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.difficulty-label{text-align:center;color:#2196f3;font-weight:600;font-size:.95rem;background:#2196f31a;padding:5px;border-radius:6px}.segmented-control{background:#ffffff14;border-radius:12px;padding:4px;display:flex;position:relative;margin-bottom:15px;box-shadow:inset 0 2px 4px #0003}.segmented-option{flex:1;text-align:center;padding:8px 12px;cursor:pointer;z-index:1;color:#aaa;font-size:.9rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:10px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px}.segmented-option:hover:not(.active){color:#ddd;background:#ffffff0d}.segmented-option.active{color:#fff;background:#2196f3;box-shadow:0 2px 8px #2196f366;font-weight:600}.segmented-option.team-white.active{background:#e0e0e0;color:#333;box-shadow:0 2px 8px #ffffff4d}.segmented-option.team-black.active{background:#333;color:#fff;box-shadow:0 2px 8px #00000080;border:1px solid rgba(255,255,255,.1)}.sub-control{margin-top:15px;animation:slideDown .3s ease-out forwards;opacity:0;transform:translateY(-10px)}.sub-control p{margin:0 0 10px 4px;font-size:.85rem;color:#ccc;font-weight:500}@keyframes slideDown{to{opacity:1;transform:translateY(0)}}.theme-selector{display:grid;grid-template-columns:1fr 1fr;gap:12px}.theme-btn{height:60px;border-radius:12px;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:all .3s ease;padding:0}.theme-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0000004d}.theme-btn.active{border-color:#2196f3;box-shadow:0 0 0 2px #2196f34d,0 4px 8px #0000004d}.theme-name{position:absolute;bottom:0;left:0;right:0;background:#000000b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fff;font-size:.75rem;padding:6px;text-align:center;font-weight:500}.menu-trigger{position:absolute;top:20px;left:20px;z-index:50;background:#14141499;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:1.5rem;width:45px;height:45px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.menu-trigger:hover{background:#2196f3cc;border-color:transparent;transform:scale(1.05)}.menu-trigger.hidden{opacity:0;pointer-events:none;transform:translate(-20px)}.canvas-container{width:100%;height:100%;background:#111}.toggle-switch{position:relative;display:flex;align-items:center;cursor:pointer;font-size:1rem;margin-bottom:10px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:relative;display:inline-block;width:52px;height:28px;background-color:#ffffff1a;border-radius:34px;transition:.4s;margin-right:15px;box-shadow:inset 0 2px 4px #0003}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;border-radius:50%;transition:.4s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(24px)}.slider.round{border-radius:34px}.menu-content::-webkit-scrollbar{width:6px}.menu-content::-webkit-scrollbar-track{background:#ffffff0d}.menu-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.menu-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.game-over-overlay{position:absolute;top:0;left:0;width:100vw;height:100vh;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .5s ease-out}.game-over-modal{background:#191919f2;padding:40px 60px;border-radius:20px;text-align:center;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #00000080;animation:scaleUp .3s cubic-bezier(.175,.885,.32,1.275);max-width:90%}.game-over-modal h2{font-size:3rem;margin:0 0 20px;background:linear-gradient(45deg,#fff,#aaa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.game-result{font-size:1.2rem;color:#ddd;margin-bottom:30px;line-height:1.5}.restart-btn{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;border:none;padding:15px 30px;font-size:1.1rem;font-weight:600;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #2196f366}.restart-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #2196f399;background:linear-gradient(135deg,#42a5f5,#2196f3)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}