@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0e17;--bg-secondary: rgba(15, 23, 42, .8);--bg-tertiary: rgba(30, 41, 59, .6);--bg-glass: rgba(255, 255, 255, .03);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-primary: #3b82f6;--accent-secondary: #8b5cf6;--accent-success: #10b981;--accent-warning: #f59e0b;--accent-danger: #ef4444;--accent-cyan: #06b6d4;--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--gradient-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);--gradient-header: linear-gradient(135deg, rgba(59, 130, 246, .15) 0%, rgba(139, 92, 246, .15) 100%);--gradient-card: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .02) 100%);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .4);--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);background-image:radial-gradient(ellipse at 20% 0%,rgba(59,130,246,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(139,92,246,.1) 0%,transparent 50%);color:var(--text-primary);overflow-x:hidden;min-height:100vh}#root{min-height:100vh}.glass{background:var(--gradient-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border)}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#0a0e17,#1a1f2e)}.header{background:#1e293bcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);padding:1rem 2rem}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:1.5rem}.logo{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;color:#f8fafc}.logo-icon{font-size:2rem}.tagline{color:#94a3b8;font-size:.875rem;margin-left:auto;padding:.375rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:2rem}.control-panel{background:#0f172acc;border-bottom:1px solid rgba(255,255,255,.08);padding:.75rem 2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;max-width:1400px;margin:0 auto;width:100%}.control-group{display:flex;align-items:center;gap:.5rem}.control-label{font-size:.7rem;font-weight:600;color:#64748b;text-transform:uppercase}.preset-select{background:#1e293bcc;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.5rem 2rem .5rem .75rem;color:#f8fafc;font-size:.8rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center}.preset-select:focus{border-color:#3b82f6;outline:none}.toggle-btn{display:flex;background:#1e293bcc;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.125rem}.toggle-option{padding:.375rem .75rem;border-radius:.375rem;font-size:.75rem;font-weight:600;color:#64748b;cursor:pointer;transition:all .2s}.toggle-option.active{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff}.control-divider{width:1px;height:1.5rem;background:#ffffff1a}.control-btn{background:#1e293bcc;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.5rem .875rem;color:#e2e8f0;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.control-btn:hover:not(:disabled){border-color:#3b82f6}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.primary{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-color:transparent;color:#fff}.main-content{flex:1;display:flex;gap:1.5rem;padding:1.5rem 2rem;max-width:1400px;margin:0 auto;width:100%}.fielder-panel{width:260px;background:#1e293b99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1rem;height:fit-content}.panel-title{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;margin-bottom:.25rem;color:#f8fafc}.panel-hint{font-size:.7rem;color:#64748b;margin-bottom:.75rem}.fielder-list{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}.fielder-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:.5rem;cursor:pointer;transition:all .2s;background:#ffffff05;border:1px solid transparent}.fielder-item:hover{background:#ffffff0d;border-color:#ffffff1a}.fielder-item.selected{background:#3b82f626;border-color:#3b82f666}.fielder-item .fielder-dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:#fff}.fielder-name{flex:1;font-size:.75rem;font-weight:500;color:#e2e8f0}.fielder-edit-btn{background:none;border:none;cursor:pointer;font-size:.7rem;opacity:.4}.fielder-edit-btn:hover{opacity:1}.fielder-edit-input{flex:1;background:#0000004d;border:1px solid #3b82f6;border-radius:.25rem;padding:.25rem .5rem;color:#f8fafc;font-size:.75rem}.legends-section{border-top:1px solid rgba(255,255,255,.1);padding-top:.75rem;margin-top:.5rem}.legends-section h4,.glossary-section h4{font-size:.65rem;font-weight:700;margin-bottom:.4rem;color:#f8fafc;text-transform:uppercase}.legend-items{display:flex;flex-direction:column;gap:.25rem}.legend-item{display:flex;align-items:center;gap:.4rem;font-size:.6rem;color:#94a3b8}.legend-dot{width:8px;height:8px;border-radius:50%}.legend-dot.mandatory{background:#ef4444}.legend-dot.primary{background:#f97316}.legend-dot.variation{background:#f59e0b}.legend-square{width:8px;height:8px}.legend-square.umpire{background:#22c55e}.legend-square.batsman{background:#3b82f6}.legend-circle-dashed{width:10px;height:10px;border:1px dashed #94a3b8;border-radius:50%}.legend-line{width:12px;height:2px;background:#475569}.glossary-section{border-top:1px solid rgba(255,255,255,.1);padding-top:.75rem;margin-top:.5rem}.glossary-items{display:flex;flex-direction:column;gap:.15rem}.glossary-item{font-size:.6rem;color:#94a3b8;line-height:1.3}.glossary-item strong{color:#e2e8f0;font-weight:600}.field-container{flex:1;display:flex;flex-direction:column;gap:.75rem}.preset-info{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:#1e293b99;border:1px solid rgba(255,255,255,.08);border-radius:.5rem}.preset-name{font-weight:700;color:#f8fafc;font-size:.875rem}.preset-desc{font-size:.8rem;color:#94a3b8}.cricket-field{position:relative;width:100%;aspect-ratio:1;border-radius:50%;cursor:crosshair;box-shadow:0 25px 80px #0009,inset 0 0 100px #0000004d;background:radial-gradient(ellipse at 50% 50%,#4aba5c,#3a9d4a,#2d7a3a 60%,#1e5c28 85%,#154a1f)}.grass-texture{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,transparent 3%,rgba(255,255,255,.03) 3%,rgba(255,255,255,.03) 6%),repeating-linear-gradient(0deg,transparent 0px,transparent 25px,rgba(0,0,0,.02) 25px,rgba(0,0,0,.02) 50px);pointer-events:none;border-radius:50%}.boundary-rope{position:absolute;inset:1.5%;border:5px solid transparent;border-radius:50%;pointer-events:none;background:linear-gradient(#1a1f2e,#1a1f2e) padding-box,repeating-conic-gradient(from 0deg,#fff 0deg 8deg,#e53935 8deg 16deg) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:xor}.thirty-yard-circle{position:absolute;inset:22%;border:3px dashed rgba(255,255,255,.5);border-radius:50%;pointer-events:none;animation:rotateCircle 60s linear infinite;box-shadow:0 0 15px #ffffff1a}@keyframes rotateCircle{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pitch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8%;height:45%;background-color:#c2a278;background-image:linear-gradient(90deg,rgba(0,0,0,.05) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.05) 100%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.1) 0%,transparent 60%),repeating-linear-gradient(0deg,transparent 0px,transparent 4px,rgba(0,0,0,.02) 4px,rgba(0,0,0,.02) 8px);border-radius:2px;pointer-events:none;z-index:5;box-shadow:inset 0 0 20px #0003}.crease{position:absolute;background:#fffffff2;box-shadow:0 0 2px #ffffff4d}.bowling-crease-top{left:50%;top:10%;transform:translate(-50%);width:110%;height:2px}.bowling-crease-bottom{left:50%;bottom:10%;transform:translate(-50%);width:110%;height:2px}.popping-crease-top{left:50%;top:16%;transform:translate(-50%);width:140%;height:2px}.popping-crease-bottom{left:50%;bottom:16%;transform:translate(-50%);width:140%;height:2px}.return-crease-top-left,.return-crease-top-right,.return-crease-bottom-left,.return-crease-bottom-right{width:2px;height:8%;background:#ffffffe6}.return-crease-top-left{left:5%;top:10%}.return-crease-top-right{right:5%;top:10%}.return-crease-bottom-left{left:5%;bottom:10%}.return-crease-bottom-right{right:5%;bottom:10%}.wide-line-top-left,.wide-line-top-right,.wide-line-bottom-left,.wide-line-bottom-right{width:1px;height:6%;background:#ffffff80}.wide-line-top-left{left:15%;top:10%}.wide-line-top-right{right:15%;top:10%}.wide-line-bottom-left{left:15%;bottom:10%}.wide-line-bottom-right{right:15%;bottom:10%}.stumps-container{position:absolute;left:50%;transform:translate(-50%);display:flex;gap:3px;z-index:6;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5))}.stumps-top{top:9%}.stumps-bottom{bottom:9%}.stump{width:4px;height:14px;background:linear-gradient(90deg,#e8d4b8,#fff,#d4c4a8);border-radius:2px;border:1px solid rgba(0,0,0,.1)}.bails{position:absolute;left:50%;transform:translate(-50%);top:-2px;width:16px;height:3px;background:linear-gradient(to bottom,#d4a574,#8d6e4e);border-radius:2px;box-shadow:0 1px 2px #0000004d}.bails-bottom{bottom:-2px;top:auto}.batsman-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:20}.batsman-striker{left:50%;top:35%}.batsman-nonstriker{left:50%;top:65%;transform:translate(-50%,-50%) rotate(180deg)}.batsman-figure{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.batsman-figure .shoulders{position:absolute;width:28px;height:14px;background:linear-gradient(to bottom,#fff,#e2e8f0);border-radius:10px;box-shadow:0 4px 8px #0000004d;z-index:1}.batsman-figure .helmet{position:absolute;width:16px;height:18px;background:radial-gradient(circle at 30% 30%,#2563eb,#1e40af);border-radius:50%;z-index:2;box-shadow:0 2px 4px #0006;border:1px solid rgba(255,255,255,.2)}.batsman-figure .bat{position:absolute;width:8px;height:32px;background:linear-gradient(90deg,#d4a574,#bfa07a);border-radius:2px;top:15px;left:22px;transform:rotate(-15deg);transform-origin:top center;box-shadow:2px 2px 4px #0000004d;border:1px solid #8d6e4e;z-index:0}.batsman-nonstriker .bat.non-striker-bat{left:auto;right:22px;transform:rotate(15deg)}.umpire-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:18}.square-leg-umpire{left:68%;top:50%}.main-umpire{left:50%;top:78%}.umpire-icon{padding:2px 5px;background:#10b981;border:1px solid #6ee7b7;border-radius:3px;font-size:.5rem;font-weight:700;color:#fff}.side-label{position:absolute;top:50%;transform:translateY(-50%);font-size:.6rem;font-weight:800;color:#fff6;pointer-events:none;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.1em;text-transform:uppercase}.side-label.offside{left:4%}.side-label.legside{right:4%}.side-label.flipped{transform:translateY(-50%) rotate(180deg)}.position-labels{position:absolute;inset:0;pointer-events:none;z-index:4}.position-label{position:absolute;transform:translate(-50%,-50%);font-family:Inter,-apple-system,sans-serif;white-space:nowrap;text-align:center;pointer-events:none;background:#ffffff26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 8px #00000026,inset 0 1px #ffffff1a;transition:all .2s ease}.position-label:hover{background:#ffffff40;transform:translate(-50%,-50%) scale(1.05)}.position-label.large{font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);padding:4px 10px}.position-label.small{font-size:.55rem;font-weight:600;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.4);background:#ffffff1a}.fielder-marker{position:absolute;transform:translate(-50%,-50%);cursor:grab;z-index:10;transition:transform .1s}.fielder-marker:active{cursor:grabbing}.fielder-marker.dragging{z-index:50;transform:translate(-50%,-50%) scale(1.2)}.fielder-marker.selected .fielder-dot{box-shadow:0 0 0 3px #3b82f6,0 0 20px #3b82f699,0 0 40px #3b82f64d;animation:pulseGlow 1.5s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 3px #3b82f6,0 0 20px #3b82f699}50%{box-shadow:0 0 0 4px #60a5fa,0 0 30px #3b82f6cc}}.fielder-marker .fielder-dot{width:28px;height:28px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;color:#fff;box-shadow:0 4px 12px #0006,inset 0 2px 4px #fff3;transition:all .2s ease;text-shadow:0 1px 2px rgba(0,0,0,.5)}.fielder-marker:hover .fielder-dot{transform:scale(1.15);box-shadow:0 6px 20px #00000080,0 0 15px #fff3,inset 0 2px 4px #ffffff4d}.fielder-marker.keeper .fielder-dot{width:32px;height:32px;box-shadow:0 4px 15px #f9731680,inset 0 2px 4px #fff3}.bowler-label{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:3px;font-size:.5rem;font-weight:700;color:#fff;background:#ef4444e6;padding:1px 5px;border-radius:2px}.fielder-name-label{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:4px;font-size:.55rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#1e40af,#3b82f6);padding:2px 8px;border-radius:10px;white-space:nowrap;box-shadow:0 2px 6px #0000004d,inset 0 1px 2px #fff3;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);letter-spacing:.02em}.instructions{text-align:center;font-size:.7rem;color:#64748b;padding:.5rem;background:#1e293b80;border-radius:.5rem}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal{background:#1e293bf2;border:1px solid rgba(255,255,255,.1);border-radius:1rem;width:100%;max-width:500px;max-height:80vh;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid rgba(255,255,255,.08)}.modal-header h2{font-size:1rem;font-weight:700;color:#f8fafc}.modal-close{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);font-size:1rem;color:#94a3b8;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:.375rem}.modal-close:hover{background:#ef4444;color:#fff}.modal-content{padding:1rem;overflow-y:auto}.save-form{display:flex;gap:.5rem;margin-bottom:1rem}.save-input{flex:1;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.625rem;color:#f8fafc;font-size:.8rem}.save-input:focus{outline:none;border-color:#3b82f6}.save-btn{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border:none;border-radius:.5rem;padding:.625rem 1rem;color:#fff;font-weight:700;cursor:pointer}.save-btn:disabled{opacity:.5;cursor:not-allowed}.setups-list{display:flex;flex-direction:column;gap:.5rem}.no-setups{text-align:center;padding:2rem 1rem;color:#64748b}.no-setups span{font-size:2rem;display:block;margin-bottom:.5rem;opacity:.5}.setup-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.5rem}.setup-info{display:flex;flex-direction:column;gap:.125rem}.setup-name{font-weight:600;color:#f8fafc;font-size:.8rem}.setup-meta{font-size:.65rem;color:#64748b}.setup-actions{display:flex;gap:.25rem}.action-btn{padding:.3rem .6rem;border-radius:.3rem;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#e2e8f0;font-size:.7rem;font-weight:600;cursor:pointer}.action-btn.load{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-color:transparent}.action-btn.delete:hover{background:#ef4444}@media(max-width:1024px){.main-content{flex-direction:column}.fielder-panel{width:100%;max-height:200px;overflow-y:auto}.field-container{max-width:600px;margin:0 auto}}@media(max-width:768px){.header-content{flex-wrap:wrap;gap:.5rem}.control-panel{justify-content:center}.fielder-panel{max-height:180px}.fielder-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.position-label{font-size:.5rem;padding:2px 4px}.position-label.large{font-size:.55rem}.fielder-dot{width:24px!important;height:24px!important;font-size:.5rem!important}}@media(max-width:640px){.header{padding:.75rem 1rem}.logo{font-size:1.1rem}.logo-icon{font-size:1.5rem}.tagline{display:none}.control-panel{padding:.5rem 1rem;gap:.5rem}.preset-select{padding:.4rem 1.5rem .4rem .5rem;font-size:.7rem}.main-content{padding:.5rem;gap:.5rem}.fielder-panel{max-height:150px;padding:.5rem}.panel-title{font-size:.8rem}.field-container{padding:.5rem}.position-label{font-size:.45rem;padding:1px 3px;border-radius:3px}.position-label.large{font-size:.5rem;padding:2px 4px}.fielder-dot{width:22px!important;height:22px!important;font-size:.45rem!important}.fielder-marker.keeper .fielder-dot{width:26px!important;height:26px!important}.fielder-name-label{font-size:.4rem;padding:1px 4px}.batsman-figure{transform:scale(.8)}.side-label{font-size:.5rem}}@media(max-width:480px){.header{padding:.5rem}.logo{font-size:1rem}.main-content{padding:.25rem}.fielder-panel{max-height:120px}.fielder-list{grid-template-columns:repeat(3,1fr)}.position-label.small{display:none}.fielder-dot{width:20px!important;height:20px!important}.pitch{width:6%}}.footer{text-align:center;padding:1rem 2rem;background:#0f172acc;border-top:1px solid rgba(255,255,255,.08)}.footer p{margin:0;font-size:.75rem;color:#64748b}.visitor-counter{margin-bottom:1rem;display:flex;justify-content:center}.visitor-counter img{border-radius:8px;opacity:.85;transition:opacity .3s ease}.visitor-counter img:hover{opacity:1}.cricket-field.night-mode{background:radial-gradient(ellipse at center,#1e3c1ee6,#143219f2 40%,#0f2814,#0a1e0f);box-shadow:inset 0 0 150px #ffffc81a,0 0 80px #ffdc6426}.cricket-field.night-mode:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 80% at 0% 0%,rgba(255,255,200,.08) 0%,transparent 40%),radial-gradient(ellipse 120% 80% at 100% 0%,rgba(255,255,200,.08) 0%,transparent 40%),radial-gradient(ellipse 120% 80% at 0% 100%,rgba(255,255,200,.08) 0%,transparent 40%),radial-gradient(ellipse 120% 80% at 100% 100%,rgba(255,255,200,.08) 0%,transparent 40%);pointer-events:none;z-index:1;border-radius:50%}.cricket-field.night-mode .grass-texture{background:repeating-linear-gradient(90deg,#1e462366,#19371e66,#1e462366 40px);opacity:.7}.cricket-field.night-mode .pitch{background:linear-gradient(180deg,#d4a85a,#c49548,#b88540,#c49548,#d4a85a);box-shadow:0 0 20px #ffdc644d}.cricket-field.night-mode .boundary-rope{box-shadow:0 0 15px #fff3}.cricket-field.night-mode .thirty-yard-circle{border-color:#fff9;box-shadow:0 0 20px #ffffff26}.cricket-field.night-mode .position-label{background:#00000080;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5)}.cricket-field.night-mode .fielder-dot{box-shadow:0 0 15px #00000080,0 0 5px #ffffc84d}.cricket-field.night-mode .crease{background:#fffffff2;box-shadow:0 0 8px #ffffff80}.cricket-field.night-mode .stump{box-shadow:0 0 5px #fff6}.toggle-btn.night{background:linear-gradient(135deg,#1e3a5f,#0d2137)}