:root{--bg-darker:#020617;--bg-dark:#0f172a;--bg-panel:#1e293b;--text-main:#e2e8f0;--text-muted:#94a3b8;--accent-cyan:#22d3ee;--accent-rose:#f43f5e;--pitch-green:#00ad0e}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-darker);width:100vw;height:100vh;color:var(--text-main);touch-action:none;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.player-card{pointer-events:auto;cursor:grab;z-index:20;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:.75rem;font-weight:700;transition:box-shadow .2s;display:flex;position:absolute;transform:translate(-50%,-50%)}.player-card:active{cursor:grabbing}.player-home{background-color:var(--accent-cyan);color:#cffafe;box-shadow:0 0 10px #22d3ee4d}.player-away{color:#fff1f2;background-color:red;box-shadow:0 0 10px #f43f5e4d}.player-selected{z-index:30;border:2px solid #fff}.player-role{white-space:nowrap;color:#fff;border:1px solid var(--bg-panel);pointer-events:none;background-color:#0f172ae6;border-radius:.25rem;padding:.125rem .5rem;font-size:.625rem;position:absolute;bottom:-1.75rem}@keyframes pulse-radar{0%{opacity:.15;transform:translate(-50%,-50%)scale(.98)}50%{opacity:.08;transform:translate(-50%,-50%)scale(1.02)}to{opacity:.15;transform:translate(-50%,-50%)scale(.98)}}.threat-zone{z-index:15;border-radius:50%;transition:left .4s cubic-bezier(.175,.885,.32,1.275),top .4s cubic-bezier(.175,.885,.32,1.275);animation:3s ease-in-out infinite pulse-radar;position:absolute;pointer-events:none!important}.threat-home{background-color:#000;border:1px solid #000}.threat-away{background-color:var(--accent-rose);border:1px solid var(--accent-rose)}.field-container{aspect-ratio:2/3;background-color:var(--pitch-green);border:2px solid var(--bg-panel);touch-action:none;cursor:crosshair;width:100%;max-width:70vh;position:relative;overflow:hidden}.field-background{pointer-events:none;opacity:.4;width:100%;height:100%;position:absolute;inset:0}.match-ball{z-index:25;cursor:grab;pointer-events:auto;background-color:#f8fafc;border:3px solid #0f172a;border-radius:50%;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;transition:box-shadow .2s;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 10px #00000080}.match-ball:active{cursor:grabbing;box-shadow:0 8px 15px #0009}.match-ball:after{content:"";background-color:#0f172a;border-radius:50%;width:4px;height:4px}.heatmap-canvas{pointer-events:none;z-index:5;opacity:.7;width:100%;height:100%;position:absolute;inset:0}.app-layout{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}@media (width>=768px){.app-layout{flex-direction:row}}.field-section{flex-direction:column;flex:1;justify-content:center;align-items:center;padding:1rem;display:flex;position:relative;overflow:hidden}.dashboard-section{background-color:var(--bg-dark);border-left:1px solid var(--bg-panel);flex-direction:column;gap:1.5rem;width:100%;padding:1.5rem;display:flex;overflow-y:auto}@media (width>=768px){.dashboard-section{width:320px}}.tools-container{background-color:var(--bg-darker);border:1px solid var(--bg-panel);border-radius:.75rem;padding:1rem}.tools-header{color:var(--text-muted);text-transform:uppercase;margin-bottom:.75rem;font-size:.75rem;font-weight:700}.tools-grid{background-color:var(--bg-dark);gap:.5rem;padding:.25rem;display:flex;bottom:.5rem}.tool-button{cursor:pointer;color:var(--text-muted);background:0 0;border:none;flex:1;justify-content:center;align-items:center;padding:.5rem 0;transition:all .2s;display:flex}.tool-button:hover{color:#fff}.tool-button.active-select{color:var(--accent-cyan);background-color:#22d3ee33}.tool-button.active-pass{color:#facc15;background-color:#eab30833}.tool-button.active-run{color:#f97316;background-color:#f9731633}.tool-button.clear-btn:hover{color:var(--accent-rose);background-color:#f43f5e33}.config-card{background-color:var(--bg-darker);border:1px solid var(--bg-panel);border-radius:.75rem;padding:1rem}.formation-btn{background-color:var(--bg-dark);border:1px solid var(--bg-panel);color:var(--text-main);cursor:pointer;border-radius:.375rem;padding:.5rem;font-size:.75rem;font-weight:700;transition:all .2s}.formation-btn:hover{border-color:var(--accent-cyan)}.input-field{background-color:var(--bg-dark);border:1px solid var(--bg-panel);color:#fff;border-radius:.375rem;width:100%;margin-top:.25rem;padding:.375rem .5rem;font-size:.875rem}.input-field:focus{border-color:var(--accent-cyan);outline:none}.phase-overlay{z-index:40;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--bg-panel);background-color:#0f172acc;padding:.25rem;display:flex;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.phase-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:700;transition:all .3s;display:flex}.phase-btn.active-offense{background-color:var(--accent-cyan);color:var(--bg-darker);box-shadow:0 0 15px #22d3ee80}.phase-btn.active-defense{background-color:var(--accent-rose);color:var(--bg-darker);box-shadow:0 0 15px #f43f5e80}.mobile-tabs{background-color:var(--bg-dark);border-bottom:1px solid var(--bg-panel);display:flex}.tab-btn{color:var(--text-muted);text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:1rem;font-size:.875rem;font-weight:700;transition:all .2s}.tab-btn.active-tab{color:var(--accent-cyan);border-bottom:2px solid var(--accent-cyan);background-color:#22d3ee0d}@media (width<=767px){.mobile-hidden{display:none!important}}@media (width>=768px){.mobile-tabs{display:none}}.playbook-list{flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.play-item{background-color:var(--bg-dark);border:1px solid var(--bg-panel);border-radius:.375rem;display:flex;overflow:hidden}.play-load-btn{text-align:left;color:var(--text-main);cursor:pointer;background:0 0;border:none;flex:1;padding:.5rem;font-size:.75rem;font-weight:700;transition:background .2s}.play-load-btn:hover{background-color:#22d3ee1a}.play-delete-btn{border:none;border-left:1px solid var(--bg-panel);color:var(--text-muted);cursor:pointer;background:0 0;padding:.5rem}.play-delete-btn:hover{color:var(--accent-rose);background-color:#f43f5e1a}.save-play-btn{width:100%;color:var(--accent-cyan);border:1px dashed var(--accent-cyan);cursor:pointer;text-transform:uppercase;background-color:#22d3ee1a;border-radius:.375rem;padding:.5rem;font-size:.75rem;font-weight:700;transition:all .2s}.save-play-btn:hover{background-color:var(--accent-cyan);color:var(--bg-darker)}