.app{width:100%;background:linear-gradient(135deg,#e3f2fd,#bbdefb);min-height:100vh;padding:2rem 1rem}.container{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001a;padding:2rem;border:1px solid #e0e0e0}.header{text-align:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #e0e0e0}.header-logo{max-width:200px;height:auto;margin-bottom:1rem}.header h1{font-size:2rem;color:#1976d2;margin-bottom:.5rem;font-weight:700;text-shadow:0 2px 4px rgba(25,118,210,.1)}.header p{color:#616161;font-size:1rem}.sections{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2rem}.sections>.section:first-child{grid-column:1 / -1}.section{background:#f5f5f5;border-radius:8px;padding:1.5rem;border:1px solid #e0e0e0}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.section-title{font-size:1.25rem;font-weight:600;color:#212121}.toggle-switch{position:relative;width:48px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#bdbdbd;transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.toggle-slider{background-color:#1976d2}input:checked+.toggle-slider:before{transform:translate(24px);background-color:#fff}.section-content{display:flex;flex-direction:column;gap:1.5rem}.mod-category{display:flex;flex-direction:column;gap:.75rem}.mod-category-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.5rem;border-bottom:1px solid #e0e0e0}.mod-category-title{font-size:1rem;font-weight:600;color:#424242}.clear-button{padding:.4rem .875rem;background:#e0e0e0;color:#616161;border:1px solid #bdbdbd;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s}.clear-button:hover{background:#bdbdbd;border-color:#9e9e9e;color:#212121}.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}.mod-box{padding:1rem;background:#fff;border-radius:8px;border:2px solid #e0e0e0;color:#616161;font-size:.95rem;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s;text-align:center;position:relative}.mod-box:hover{background:#fafafa;border-color:#bdbdbd}.mod-box.active{background:#1976d21a;border-color:#1976d2;color:#1976d2}.mod-box.disabled{border-color:#da3633;background:#da36331a;color:#da3633;cursor:not-allowed;position:relative}.mod-box.disabled:hover{background:#da363326;border-color:#da3633}.mod-box.disabled[title]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#da3633;color:#fff;padding:.5rem .75rem;border-radius:6px;white-space:nowrap;font-size:.85rem;font-weight:600;margin-bottom:.5rem;box-shadow:0 4px 12px #da363366;z-index:1000}.mod-box.disabled[title]:hover:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#da3633;margin-bottom:-6px;z-index:1000}.mod-box-recommended{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#ffa726,#fb8c00);color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px #ff980066;white-space:nowrap;z-index:1}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{font-weight:500;color:#616161;font-size:.95rem}.form-input,.form-select{padding:.75rem;border:1px solid #bdbdbd;border-radius:6px;font-size:1rem;transition:border-color .2s;background:#fff;color:#212121}.form-input:focus,.form-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d226}.player-list{display:flex;flex-direction:column;gap:1rem}.player-item{display:flex;gap:1rem;align-items:flex-end}.player-item>div{flex:1}.remove-button{padding:.75rem 1rem;background:#da3633;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.95rem;transition:background .2s}.remove-button:hover{background:#b62324}.rtts-save-header .remove-button{padding:.5rem 1rem;font-size:.875rem;height:fit-content;align-self:center}.add-button{padding:.75rem 1.5rem;background:#1976d2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.95rem;transition:background .2s;align-self:flex-start}.add-button:hover{background:#1565c0}.add-button:disabled{background:#e0e0e0;cursor:not-allowed;color:#9e9e9e}.add-button.disabled-with-tooltip{position:relative}.add-button.disabled-with-tooltip[title]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#da3633;color:#fff;padding:.5rem .75rem;border-radius:6px;white-space:nowrap;font-size:.85rem;font-weight:600;margin-bottom:.5rem;box-shadow:0 4px 12px #da363366;z-index:1000}.add-button.disabled-with-tooltip[title]:hover:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#da3633;margin-bottom:-6px;z-index:1000}.toggle-row{display:flex;flex-wrap:wrap;gap:8px}.toggle-btn{padding:8px 16px;background:#fff;border:1px solid #bdbdbd;color:#616161;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s;white-space:nowrap}.toggle-btn:hover{border-color:#1976d2;background:#1976d20d}.toggle-btn.active{border-color:#1976d2;background:#1976d2;color:#fff}.sensitivity-control{display:flex;align-items:center;gap:1rem}.sensitivity-slider{flex:1;height:8px;border-radius:4px;background:#e0e0e0;outline:none;-webkit-appearance:none}.sensitivity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#1976d2;cursor:pointer;box-shadow:0 2px 4px #1976d24d}.sensitivity-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#1976d2;cursor:pointer;border:none;box-shadow:0 2px 4px #1976d24d}.sensitivity-value{min-width:60px;text-align:center;font-weight:600;color:#1976d2;font-size:1.25rem}.generate-button{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff;border:none;border-radius:8px;font-size:1.125rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #1976d24d,0 0 20px #1976d21a,inset 0 1px #fff3;animation:subtle-glow 2s ease-in-out infinite}@keyframes subtle-glow{0%,to{box-shadow:0 4px 12px #1976d24d,0 0 20px #1976d21a,inset 0 1px #fff3}50%{box-shadow:0 4px 12px #1976d266,0 0 25px #1976d233,inset 0 1px #ffffff40}}.generate-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #1976d280,0 0 30px #1976d24d,inset 0 1px #ffffff4d;animation:none}.generate-button:active{transform:translateY(0)}.generate-button.success{background:linear-gradient(135deg,#2e7d32,#1b5e20);box-shadow:0 4px 12px #2e7d324d,0 0 20px #2e7d321a,inset 0 1px #fff3;animation:none}.generate-button.error{background:linear-gradient(135deg,#d32f2f,#c62828);box-shadow:0 4px 12px #d32f2f4d,0 0 20px #d32f2f1a,inset 0 1px #fff3;animation:none}.generate-button.shake{animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}.saves-input{display:flex;flex-direction:column;gap:.5rem}.saves-input label{font-weight:500;color:#616161;font-size:.95rem}.saves-list{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.save-item{display:flex;gap:.75rem;align-items:center}.save-item span{min-width:60px;color:#616161;font-size:.9rem}.keybinds-change-btn{padding:.5rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background .2s}.keybinds-change-btn:hover{background:#1565c0}.keybinds-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:500;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.keybinds-modal{background:#fff;border-radius:12px;padding:2rem;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;border:1px solid #e0e0e0}.keybinds-modal-header{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;position:relative}.keybinds-modal-title{color:#212121;font-size:1.5rem;font-weight:600;text-align:center;flex:1}.keybinds-modal-close{position:absolute;right:0;top:0;background:none;border:none;color:#da3633;font-size:1.5rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.keybinds-modal-close:hover{transform:scale(1.1)}.keybinds-modal-subtitle{text-align:center;margin-bottom:1.5rem;font-size:.875rem;color:#757575}.keybinds-list{display:flex;flex-direction:column;gap:1rem}.keybind-row{display:flex;gap:1rem}.keybind-item{flex:1;display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;padding:1rem;border-radius:8px;transition:background .2s;border:1px solid #e0e0e0}.keybind-item:hover{background:#eee}.keybind-action-label{color:#212121;font-weight:500;font-size:.95rem}.keybind-svg-btn{background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s}.keybind-svg-btn:hover{transform:scale(1.1)}.keybinds-save-btn{background:#1976d2;color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-weight:600;cursor:pointer;width:100%;margin-top:1rem;font-size:1rem;transition:background .2s}.keybinds-save-btn:hover{background:#1565c0}.keybinds-select-panel{position:relative}.keybinds-back-btn{background:#e0e0e0;color:#212121;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;margin-bottom:1rem;font-size:.875rem;transition:background .2s}.keybinds-back-btn:hover{background:#bdbdbd}.keybind-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}.keybind-option-btn{background:#f5f5f5;border:2px solid #e0e0e0;padding:1.5rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.keybind-option-btn:hover{background:#eee;border-color:#1976d2;transform:scale(1.05)}@media (max-width: 1200px){.sections{grid-template-columns:1fr}.sections>.section:first-child{grid-column:1}}.rtts-save-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.save-label{min-width:60px;color:#616161;font-size:.95rem;font-weight:500}.rtts-name-input{flex:1;min-width:150px}.player-type-selector{display:flex;gap:.5rem}.configure-pitches-btn{padding:.5rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background .2s;display:flex;align-items:center;gap:.5rem}.configure-pitches-btn:hover{background:#1565c0}.pitch-summary{font-size:.85rem}.configure-text{font-weight:600}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.nested-dialog{z-index:1100}.dialog-content{background:#fff;border-radius:12px;padding:2rem;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;border:1px solid #e0e0e0}.pitch-dialog{max-width:800px}.pitch-type-dialog{max-width:500px}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.dialog-header h3{color:#212121;font-size:1.5rem;font-weight:600;margin:0}.dialog-close{background:none;border:none;color:#da3633;font-size:2rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s;line-height:1}.dialog-close:hover{transform:scale(1.1)}.dialog-body{margin-bottom:1.5rem}.dialog-footer{display:flex;gap:1rem;justify-content:flex-end;padding-top:1rem;border-top:1px solid #e0e0e0}.button-primary{padding:.75rem 1.5rem;background:#1976d2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:600;transition:background .2s}.button-primary:hover{background:#1565c0}.button-secondary{padding:.75rem 1.5rem;background:#e0e0e0;color:#212121;border:1px solid #bdbdbd;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:500;transition:all .2s}.button-secondary:hover{background:#bdbdbd;border-color:#9e9e9e}.pitch-slots-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1.5rem}.pitch-slot-card{position:relative;display:flex;flex-direction:column;align-items:center}.pitch-slot-button{width:100%;padding:1rem;background:#fff;border:2px solid #bdbdbd;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.5rem}.pitch-slot-button:hover{border-color:#1976d2;background:#1976d20d}.pitch-slot-button.filled{border-color:#1976d2;background:#1976d21a}.pitch-slot-button.locked{opacity:.4;cursor:not-allowed;pointer-events:none}.pitch-button-svg{display:flex;align-items:center;justify-content:center}.pitch-button-svg svg{filter:invert(1) grayscale(1)}.pitch-slot-value{color:#212121;font-size:.85rem;font-weight:500;text-align:center;min-height:2.5rem;display:flex;align-items:center}.pitch-slot-button.filled .pitch-slot-value{color:#1976d2}.pitch-slot-image-container{width:100%;max-width:100px;height:80px;display:flex;align-items:center;justify-content:center;overflow:hidden}.pitch-slot-image{max-width:100%;max-height:100%;object-fit:contain;filter:invert(1) grayscale(1)}.pitch-slot-image.mirrored{transform:scaleX(-1)}.pitch-remove-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:#da3633;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s}.pitch-remove-x:hover{background:#b62324;transform:scale(1.1)}.pitch-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1rem}.pitch-type-button{padding:1rem;background:#fff;border:2px solid #bdbdbd;border-radius:8px;color:#212121;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s;text-align:center}.pitch-type-button:hover{border-color:#1976d2;background:#1976d21a;color:#1976d2}.pitch-type-button.disabled{border-color:#da3633;background:#da363326;color:#ff6b6b;cursor:not-allowed;position:relative}.pitch-type-button.disabled:hover{background:#da363326}.pitch-type-button.disabled[title]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#da3633;color:#fff;padding:.5rem .75rem;border-radius:6px;white-space:nowrap;font-size:.85rem;font-weight:600;margin-bottom:.5rem;box-shadow:0 4px 12px #da363366;z-index:1000}.pitch-type-button.disabled[title]:hover:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#da3633;margin-bottom:-6px;z-index:1000}.pitch-type-header{display:flex;align-items:center;justify-content:space-between}.pitch-type-back-btn{padding:.5rem 1rem;background:#e0e0e0;color:#212121;border:1px solid #bdbdbd;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:500;transition:all .2s}.pitch-type-back-btn:hover{background:#bdbdbd;border-color:#9e9e9e}.header-spacer{width:88px}@media (max-width: 768px){.container{padding:1.5rem}.header h1{font-size:1.5rem}.mod-grid{grid-template-columns:1fr}.player-item{flex-direction:column;align-items:stretch}.remove-button{width:100%}.keybinds-modal{width:95%;padding:1.5rem}.keybind-options-grid{grid-template-columns:repeat(2,1fr)}.rtts-save-header{flex-direction:column;align-items:stretch}.save-label{width:100%}.player-type-selector{width:100%;flex-wrap:wrap}.player-type-selector .toggle-btn{flex:1}.pitch-slots-grid{grid-template-columns:repeat(2,1fr)}.pitch-type-grid{grid-template-columns:1fr}.dialog-content{width:95%;padding:1.5rem}}.guide-button{margin-top:1rem;padding:.5rem 1.5rem;background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff;border:none;border-radius:6px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #1976d24d}.guide-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #1976d280}.guide-button:active{transform:translateY(0)}.guide-dialog{max-width:700px;max-height:85vh;overflow-y:auto}.guide-content{padding:1.5rem 0}.guide-subtitle{color:#616161;font-size:.95rem;margin-bottom:2rem;text-align:center}.guide-section{margin-bottom:2rem}.guide-section h3{color:#1976d2;font-size:1.25rem;font-weight:600;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #e3f2fd}.guide-section ul{list-style:none;padding:0;margin:0}.guide-section li{padding:.4rem 0 .4rem 1.5rem;position:relative;color:#424242;line-height:1.6}.guide-section li:before{content:"•";position:absolute;left:0;color:#1976d2;font-size:1.5rem;line-height:1.6}.guide-section strong{color:#1976d2;font-weight:600}.guide-note{margin-top:1rem;padding:.75rem 1rem;background:#e3f2fd;border-left:4px solid #1976d2;border-radius:4px;font-size:.9rem;color:#424242}.guide-note a{color:#1976d2;text-decoration:none;font-weight:600}.guide-note a:hover{text-decoration:underline}.controls-grid{display:grid;gap:1rem;margin-top:1rem}.control-item{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:#f5f5f5;border-radius:6px;border:1px solid #e0e0e0}.control-key{font-family:Courier New,monospace;font-weight:600;color:#1976d2;background:#fff;padding:.25rem .75rem;border-radius:4px;border:1px solid #1976d2;white-space:nowrap;min-width:140px;text-align:center}.control-desc{color:#424242;flex:1}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0d1117;min-height:100vh}#root{max-width:1400px;margin:0 auto}