@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@300;400;500&display=swap";[data-theme=dark]{--bg-app: #24282f;--bg-field: #2e3440;--bg-field-end: #3a3f4b;--bg-sidebar: #2a2f38;--bg-input: #353b46;--text-primary: #e8eaed;--text-secondary: #9aa0a6;--accent: #4ade80;--accent-hover: #22c55e;--border: #454c59;--radius: 8px;--shadow: 0 4px 24px rgba(0, 0, 0, .25);--toolbar-bg: rgba(38, 43, 52, .8);--toolbar-bg-hover: rgba(58, 65, 78, .9);--toolbar-active-bg: rgba(74, 222, 128, .2);--toolbar-active-border: rgba(74, 222, 128, .4);--tooltip-bg: rgba(28, 32, 38, .95)}[data-theme=light]{--bg-app: #f0f2f5;--bg-field: #e4e8ec;--bg-field-end: #d8dce2;--bg-sidebar: #ffffff;--bg-input: #f5f6f8;--text-primary: #1a1d23;--text-secondary: #5f6570;--accent: #16a34a;--accent-hover: #15803d;--border: #d1d5db;--radius: 8px;--shadow: 0 4px 24px rgba(0, 0, 0, .08);--toolbar-bg: rgba(255, 255, 255, .85);--toolbar-bg-hover: rgba(240, 242, 245, .95);--toolbar-active-bg: rgba(22, 163, 74, .15);--toolbar-active-border: rgba(22, 163, 74, .4);--tooltip-bg: rgba(255, 255, 255, .97)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:var(--bg-app);color:var(--text-primary);height:100vh;height:100dvh;overflow:hidden;touch-action:none}#root{height:100vh;height:100dvh}.app-container{display:flex;height:100vh;height:100dvh;padding:8px;gap:8px}.field-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,var(--bg-field) 0%,var(--bg-field-end) 100%);border-radius:12px;overflow:hidden;min-width:0}.cricket-field-wrapper{position:static}.field-container canvas{border-radius:12px;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.field-actions{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;z-index:10}.field-actions-top-row{display:flex;flex-direction:row;align-items:center;gap:6px}.preset-select{height:36px;background:var(--toolbar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-family:inherit;font-size:13px;padding:0 8px;cursor:pointer;outline:none;transition:all .2s ease}.preset-select:hover{background:var(--toolbar-bg-hover);color:var(--text-primary);border-color:var(--accent)}.preset-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px #4ade8033}.field-toolbar{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:12px;z-index:10}.field-toolbar .field-toolbar-btn{width:48px;height:48px;border-radius:12px}.field-toolbar-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--toolbar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;padding:0;position:relative}.field-toolbar-btn:hover{background:var(--toolbar-bg-hover);color:var(--text-primary);border-color:var(--accent);transform:translateY(-1px)}.field-toolbar-btn.active{color:var(--accent);border-color:var(--toolbar-active-border);box-shadow:0 0 10px #4ade8026}.zoom-controls{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;gap:12px;z-index:10}.zoom-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:var(--toolbar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;padding:0;position:relative}.zoom-btn:hover{background:var(--toolbar-bg-hover);color:var(--text-primary);border-color:var(--accent);transform:translateY(-2px)}.zoom-btn:active{transform:scale(.95)}.gameplan-logo{position:absolute;bottom:24px;left:24px;font-family:Oswald,sans-serif;color:var(--text-secondary);opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:10;transition:opacity .3s ease;display:flex;flex-direction:column;align-items:flex-start}.gameplan-logo>span:first-child{font-size:32px;font-weight:500;letter-spacing:4px;line-height:1}.app-version{font-family:system-ui,-apple-system,sans-serif;font-size:11px;font-weight:500;letter-spacing:1px;margin-top:4px;margin-left:2px}.github-badge{pointer-events:auto;color:inherit;opacity:.6;margin-left:6px;vertical-align:middle;transition:opacity .2s ease}.github-badge:hover{opacity:1;color:var(--accent)}.field-container:hover .gameplan-logo{opacity:.8}.share-popup{position:absolute;top:120px;left:56px;width:240px;background:var(--bg-sidebar);border:1px solid var(--border);border-radius:10px;padding:10px;z-index:20;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}.share-popup-url{font-family:Inter,monospace;font-size:10px;color:var(--accent);word-break:break-all;line-height:1.4;padding:8px 32px 8px 8px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;text-decoration:none;display:block;transition:color .15s ease}.share-popup-url:hover{color:var(--accent-hover);text-decoration:underline}.share-popup-copy{position:absolute;right:14px;bottom:14px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--toolbar-bg);color:var(--text-secondary);cursor:pointer;padding:0;transition:all .2s ease}.share-popup-copy:hover{color:var(--accent);border-color:var(--accent);background:var(--toolbar-bg-hover)}.field-toolbar-btn:after,.zoom-btn:after{content:attr(data-tooltip);position:absolute;background:var(--surface);color:var(--text-primary);padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;border:1px solid var(--border);box-shadow:0 2px 4px #0003;z-index:20}.field-toolbar .field-toolbar-btn:after{right:120%;top:50%;transform:translateY(-50%)}.field-toolbar .field-toolbar-btn:before{content:"";position:absolute;right:calc(100% + 3px);top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--border);pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:20}.field-actions .field-toolbar-btn:after{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.field-actions .field-toolbar-btn:before{content:"";position:absolute;top:50%;left:calc(100% + 3px);transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--border);pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:20}.zoom-btn:after{right:120%;top:50%;transform:translateY(-50%)}.field-toolbar-btn:hover:after,.field-toolbar-btn:hover:before,.zoom-btn:hover:after{opacity:1}.sidebar-backdrop{position:fixed;inset:0;background:#0006;z-index:90;opacity:0;pointer-events:none;transition:opacity .3s ease}.sidebar-backdrop.visible{opacity:1;pointer-events:auto}.sidebar{position:fixed;top:8px;right:8px;width:260px;background:var(--bg-sidebar);border:1px solid var(--border);border-radius:12px;padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;z-index:100;transform:translate(calc(100% + 16px));transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow)}.sidebar.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;justify-content:space-between}.sidebar-close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--toolbar-bg);color:var(--text-secondary);cursor:pointer;transition:all .15s ease;padding:0;flex-shrink:0}.sidebar-close-btn:hover{color:var(--text-primary);border-color:var(--accent);background:var(--toolbar-bg-hover)}.sidebar-section-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}.divider{border:none;border-top:1px solid var(--border);margin:12px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border:none;border-radius:var(--radius);font-family:Inter,sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease;width:100%}.btn-primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);color:#111}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px #4ade804d}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent);transform:translateY(-1px)}.section-title{font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}.name-inputs{display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto}.name-input{width:100%;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:Inter,sans-serif;font-size:16px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.name-input::placeholder{color:var(--text-secondary)}.name-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px #4ade8026}.name-input.highlighted{border-color:var(--accent);box-shadow:0 0 0 2px #4ade8040}.action-buttons{display:flex;gap:10px}.action-buttons .btn{flex:1}.sidebar::-webkit-scrollbar,.name-inputs::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track,.name-inputs::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb,.name-inputs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover,.name-inputs::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@media(max-width:768px){.app-container{padding:4px;gap:4px}.field-toolbar{top:8px;right:8px;gap:6px}.field-toolbar .field-toolbar-btn{width:36px;height:36px;border-radius:8px}.zoom-controls{bottom:-56px;left:50%;right:auto;transform:translate(-50%);flex-direction:row;gap:8px}.cricket-field-wrapper{position:relative}.field-container{padding-bottom:60px}.zoom-btn{width:36px;height:36px;border-radius:8px}.field-actions{top:8px;left:8px;gap:4px}.sidebar{top:4px;right:4px;bottom:4px;width:calc(100vw - 8px);max-width:320px}.field-toolbar-btn:after,.field-toolbar-btn:before{display:none}}@media(max-width:480px){.field-toolbar .field-toolbar-btn,.field-toolbar-btn,.zoom-btn{width:28px;height:28px;border-radius:6px}.field-toolbar-btn svg,.zoom-btn svg{width:16px;height:16px}.sidebar{width:calc(100vw - 8px);max-width:none;border-radius:8px}.sidebar-title{font-size:1.2rem}}.help-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;display:flex;justify-content:center;align-items:center;padding:10vh 10vw}.help-modal-content{background:var(--bg-sidebar);border:1px solid var(--border);border-radius:16px;width:100%;max-width:700px;max-height:100%;position:relative;box-shadow:var(--shadow);color:var(--text-primary);display:flex;flex-direction:column;overflow:hidden}.help-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid var(--border)}.help-modal-header h2{font-size:22px;font-weight:600;margin:0}.help-modal-close{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.help-modal-close:hover{color:var(--text-primary);background:var(--bg-input)}.help-modal-body{padding:32px;overflow-y:auto;display:flex;flex-direction:column;gap:28px}.help-section{display:flex;flex-direction:column}.help-section h3{font-size:16px;font-weight:600;color:var(--accent);margin-bottom:12px}.help-section p{font-size:15px;line-height:1.6;color:var(--text-secondary);margin-bottom:10px}.help-section p:last-child{margin-bottom:0}.help-icon-list{display:flex;flex-direction:column;gap:10px}.help-icon-row{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4;color:var(--text-secondary)}.help-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--toolbar-bg);border:1px solid var(--border);border-radius:6px;color:var(--accent)}.help-intro-list{list-style-type:disc;padding-left:24px;color:var(--text-secondary);font-size:15px;line-height:1.6}.help-intro-list li{margin-bottom:8px}.help-intro-list li:last-child{margin-bottom:0}.help-two-column{display:flex;gap:24px}.help-two-column .help-section{flex:1}@media(max-width:768px){.help-two-column{flex-direction:column;gap:28px}}