:root{--p-green-900: #063a20;--p-green-800: #0b4d2c;--p-green-700: #0e5934;--p-green-600: #1c7a42;--p-court-red-700: #8c3a28;--p-court-blue-900: #1c2b52;--grey-950: #0c0e1a;--grey-900: #14172b;--grey-800: #1b1f3b;--grey-700: #242849;--grey-600: #2c3158;--grey-500: #4b5170;--grey-400: #6b7191;--grey-300: #9aa0bd;--grey-200: #e7eaf2;--grey-100: #f4f6fa;--grey-50: #ffffff;--p-mint-400: #85f7c4;--p-mint-600: #34c98c;--p-blue-500: #2e6bff;--p-red-500: #ef4444;--p-orange-500: #ff8f1f;--p-orange-700: #cc6f0f;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-pill: 999px;--shadow-sm: 0 1px 2px rgba(12, 14, 26, .16);--shadow-md: 0 6px 16px rgba(12, 14, 26, .22);--shadow-lift: 0 10px 24px rgba(12, 14, 26, .35);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;--text-2xs: 10px;--text-xs: 11px;--text-sm: 13px;--text-md: 14px;--text-lg: 15px;--text-xl: 18px;--z-piece: 2;--z-piece-ball: 3;--z-canvas: 10;--z-sticky: 20;--z-dragging: 50;--z-modal: 100;--z-overlay-top: 200;--color-app-bg: var(--grey-950);--color-surface: var(--grey-900);--color-surface-raised: var(--grey-800);--color-border: rgba(231, 234, 242, .12);--color-surface-hover: rgba(231, 234, 242, .12);--color-text: var(--grey-100);--color-text-muted: rgba(244, 246, 250, .6);--color-text-on-accent: var(--grey-950);--color-accent: var(--p-mint-400);--color-accent-strong: var(--p-mint-600);--color-pitch-turf: var(--p-green-800);--color-pitch-turf-alt: var(--p-green-700);--color-pitch-turf-kids: var(--p-green-600);--color-pitch-turf-futsal: var(--p-court-red-700);--color-pitch-surround-futsal: var(--p-court-blue-900);--color-pitch-lines: rgba(255, 255, 255, .65);--color-team-dot: var(--p-blue-500);--color-team-dot-border: var(--grey-50);--color-opposition-dot: var(--grey-800);--color-danger: var(--p-red-500);--color-draw: var(--p-orange-500);--color-cone: var(--p-orange-500);--color-cone-base: var(--p-orange-700);--color-selected-bg: var(--grey-100);--color-selected-border: var(--grey-100);--color-selected-text: var(--grey-950);--color-selected-text-muted: rgba(20, 23, 43, .6);--color-selected-surface: rgba(20, 23, 43, .2);--color-marker-empty: rgba(255, 255, 255, .4);--color-marker-empty-border: rgba(255, 255, 255, .5);--color-label-bg: rgba(12, 14, 26, .55);--color-scrim: rgba(12, 14, 26, .5);color-scheme:dark}@media (prefers-color-scheme: light){:root{--color-app-bg: var(--grey-100);--color-surface: var(--grey-50);--color-surface-raised: var(--grey-100);--color-border: rgba(20, 23, 43, .12);--color-text: var(--grey-950);--color-text-muted: rgba(20, 23, 43, .6);--color-selected-bg: var(--grey-950);--color-selected-border: var(--grey-950);--color-selected-text: var(--grey-100);--color-selected-text-muted: rgba(244, 246, 250, .6);--color-selected-surface: rgba(244, 246, 250, .2);color-scheme:light}}:root[data-theme=light]{--color-app-bg: var(--grey-100);--color-surface: var(--grey-50);--color-surface-raised: var(--grey-100);--color-border: rgba(20, 23, 43, .12);--color-text: var(--grey-950);--color-text-muted: rgba(20, 23, 43, .6);--color-selected-bg: var(--grey-950);--color-selected-border: var(--grey-950);--color-selected-text: var(--grey-100);--color-selected-text-muted: rgba(244, 246, 250, .6);--color-selected-surface: rgba(244, 246, 250, .2);color-scheme:light}:root[data-theme=dark]{--color-app-bg: var(--grey-950);--color-surface: var(--grey-900);--color-surface-raised: var(--grey-800);--color-border: rgba(231, 234, 242, .12);--color-text: var(--grey-100);--color-text-muted: rgba(244, 246, 250, .6);--color-selected-bg: var(--grey-100);--color-selected-border: var(--grey-100);--color-selected-text: var(--grey-950);--color-selected-text-muted: rgba(20, 23, 43, .6);--color-selected-surface: rgba(20, 23, 43, .2);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--color-app-bg);color:var(--color-text);font-family:var(--font-sans);overflow-x:hidden;-webkit-tap-highlight-color:transparent}button,input,select{font-family:inherit;color:inherit}.app{display:flex;flex-direction:column;min-height:100%}.app-loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-text-muted, var(--color-text));font-family:var(--font-sans)}.top-bar{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-app-bg);flex-wrap:wrap}.top-bar__title{position:absolute;left:50%;transform:translate(-50%);font-weight:700;font-size:var(--text-lg);letter-spacing:.01em;white-space:nowrap}.top-bar__actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.checkbox-toggle{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);padding:0 var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-toggle input{accent-color:var(--color-accent);width:16px;height:16px}.button{border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:transform .1s ease,background .15s ease,border-color .15s ease}.button:hover{background:var(--color-surface-hover)}.button:active{transform:scale(.97)}.button--primary{background:var(--color-accent);color:var(--color-text-on-accent);border-color:var(--color-accent)}.button--primary:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong)}.button--ghost{background:transparent}.button:disabled{opacity:.4;cursor:not-allowed}.icon-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);font-size:var(--text-xl);line-height:1;cursor:pointer}.icon-button:hover{background:var(--color-surface-hover)}.icon-button:disabled{opacity:.4;cursor:not-allowed}.pill{border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease}.pill:active{transform:scale(.96)}.pill--selected{background:var(--color-selected-bg);border-color:var(--color-selected-border);color:var(--color-selected-text)}.pill--ghost{background:transparent;border-style:dashed;color:var(--color-text-muted)}.sidebar{display:flex;flex-direction:column;gap:var(--space-4);width:240px;flex-shrink:0}@media (min-width: 1025px){.sidebar{padding-top:var(--space-6);position:sticky;top:59px;max-height:calc(100vh - 59px);overflow-y:auto}}.options-panel{display:flex;flex-direction:column;gap:var(--space-3)}.options-panel__toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.options-panel__toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;cursor:pointer}.options-panel__body{display:flex;flex-direction:column;gap:var(--space-4);padding:0 var(--space-4) var(--space-3)}.options-panel__heading{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-2)}.options-panel__group+.options-panel__group .options-panel__heading{margin-top:var(--space-5)}.options-panel__sizes,.options-panel__formations{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-2)}.options-panel__step3{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.options-panel__subgroup+.options-panel__subgroup{margin-top:var(--space-4)}.options-panel__subheading{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin-bottom:var(--space-1)}.options-panel .pill:hover{background:var(--color-surface-hover)}.options-panel .pill--selected,.options-panel .pill--selected:hover{background:var(--color-selected-bg);border-color:var(--color-selected-border);color:var(--color-selected-text)}.board{flex:1;display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6) var(--space-4) var(--space-4)}.pitch-stage{flex:1;min-width:0;max-width:900px;margin:0 auto;padding:var(--space-6)}.pitch-frame{position:relative;width:100%;aspect-ratio:99 / 68;border-radius:var(--radius-sm);overflow:visible;--stripe-angle: 90deg;background:repeating-linear-gradient(var(--stripe-angle),var(--color-pitch-turf) 1.9417%,var(--color-pitch-turf) 7.2815%,var(--color-pitch-turf-alt) 7.2815%,var(--color-pitch-turf-alt) 12.6213%);box-shadow:var(--shadow-md);touch-action:pan-y}.pitch-frame--vertical{aspect-ratio:68 / 99;--stripe-angle: 180deg}.pitch-frame.pitch-frame--kids{background:var(--color-pitch-turf-kids)}.pitch-frame.pitch-frame--futsal{background:var(--color-pitch-surround-futsal)}.pitch-frame--armed{cursor:copy}.pitch-frame__svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;color:var(--color-pitch-lines);display:block}.pitch-svg__turf{fill:transparent}.pitch-svg__field--futsal{fill:var(--color-pitch-turf-futsal)}.pitch-frame__layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible}.drawing-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:var(--z-canvas);cursor:crosshair;touch-action:none}.drawing-layer__svg{display:block;width:100%;height:100%}.drawing-layer__stroke{fill:none;stroke:var(--color-draw);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab;touch-action:none;z-index:var(--z-piece);-webkit-user-select:none;user-select:none}.dot--dragging{z-index:var(--z-dragging);cursor:grabbing}.dot__marker{width:30px;height:30px;border-radius:50%;background:var(--color-team-dot);border:2.5px solid var(--color-team-dot-border);box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease}.dot--dragging .dot__marker{transform:scale(1.22);box-shadow:var(--shadow-lift)}.dot--highlighted .dot__marker{box-shadow:0 0 0 3px var(--color-accent),var(--shadow-sm)}.dot--blank .dot__marker{background:var(--color-marker-empty);border-style:dashed;border-color:var(--color-marker-empty-border)}.dot__label{font-size:var(--text-2xs);font-weight:700;color:var(--grey-50);background:var(--color-label-bg);padding:1px 6px;border-radius:var(--radius-pill);white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.dot--opposition .dot__marker{background:var(--color-opposition-dot);border-color:var(--grey-50);width:26px;height:26px}.dot--cone .dot__marker{display:block;border-radius:0;background:transparent;border:none;box-shadow:none;filter:drop-shadow(var(--shadow-sm))}.dot--cone.dot--dragging .dot__marker{filter:drop-shadow(var(--shadow-lift))}.dot__cone-body{fill:var(--color-cone);stroke:var(--color-cone)}.dot__cone-base{fill:var(--color-cone-base);stroke:var(--color-cone-base)}.dot__remove{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;border:none;background:var(--color-danger);color:var(--grey-50);font-size:var(--text-sm);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ball{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;z-index:var(--z-piece-ball)}.ball--dragging{cursor:grabbing;z-index:var(--z-dragging)}.ball__marker{display:block;width:22px;height:22px;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease}.ball--dragging .ball__marker{transform:scale(1.25);box-shadow:var(--shadow-lift)}.bench-ghost{position:fixed;top:0;left:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;z-index:var(--z-overlay-top)}.bench-ghost .dot__marker{transform:scale(1.15);box-shadow:var(--shadow-lift)}.bench{width:100%}.bench__label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-2)}.bench__list{display:flex;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:56px}.bench__empty{color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-2)}.bench-chip{position:relative;display:flex;align-items:center;gap:var(--space-2);min-height:44px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.bench-chip--highlighted{border-color:var(--color-accent)}.bench-chip--armed{border-color:var(--color-accent);background:var(--color-surface-hover)}.bench-chip__tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--space-2);background:var(--color-accent);color:var(--color-text-on-accent);font-size:var(--text-xs);font-weight:700;white-space:nowrap;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);pointer-events:none;z-index:var(--z-overlay-top)}.bench-chip__marker{width:20px;height:20px;border-radius:50%;background:var(--color-team-dot);border:2px solid var(--color-team-dot-border);flex-shrink:0}.bench-chip__name{font-size:var(--text-sm);font-weight:600}.teams-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);background:transparent}.teams-modal{position:fixed;top:0;right:0;bottom:0;width:min(420px,42vw);min-width:340px;background:var(--color-surface);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lift);display:flex;flex-direction:column;padding:var(--space-4);gap:var(--space-3)}.teams-modal__header{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.teams-modal__header h2{flex:1;min-width:0;margin:0;font-size:var(--text-xl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.teams-modal__viewport{flex:1;overflow:hidden}.teams-modal__panels{display:flex;width:200%;height:100%;transition:transform .25s ease}.teams-modal__panels--roster{transform:translate(-50%)}.teams-modal__panel{width:50%;height:100%;min-height:0;flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-3)}.roster-panel__hint{margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}.roster-panel__list,.team-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2)}.team-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);border:1px solid transparent;background:var(--color-surface-raised)}.team-row--highlighted{background:var(--color-selected-bg);border-color:var(--color-selected-border)}.team-row--highlighted .team-row__remove{color:var(--color-selected-text-muted)}.team-row--highlighted .team-row__name{background:var(--color-selected-surface);border-color:transparent;color:var(--color-selected-text)}.team-row--highlighted .team-row__name::placeholder{color:var(--color-selected-text-muted)}.team-row__dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex-shrink:0}.team-row__dot--placeholder{visibility:hidden}.team-row__name{flex:1;min-width:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2);font-size:var(--text-sm)}.team-row__go{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:var(--color-accent);color:var(--color-text-on-accent);font-size:var(--text-md);font-weight:700;cursor:pointer;flex-shrink:0;transition:background .15s ease}.team-row__go:hover{background:var(--color-accent-strong)}.team-row__remove{width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--color-text-muted);font-size:var(--text-lg);cursor:pointer;flex-shrink:0}.team-row__remove:hover{color:var(--color-danger)}.roster-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);border:1px solid transparent;background:var(--color-surface-raised);cursor:pointer}.roster-row--highlighted{border-color:var(--color-accent)}.roster-row__badge{font-size:var(--text-2xs);font-weight:800;letter-spacing:.04em;color:var(--grey-50);background:var(--color-text-muted);border-radius:var(--radius-sm);padding:2px 5px;flex-shrink:0;min-width:26px;text-align:center}.roster-row--starter .roster-row__badge{background:var(--color-accent);color:var(--color-text-on-accent)}.roster-row__name{flex:1;min-width:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2);font-size:var(--text-sm)}.roster-row__remove{width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--color-text-muted);font-size:var(--text-lg);cursor:pointer;flex-shrink:0}.roster-row__remove:hover{color:var(--color-danger)}.roster-panel__footer{display:flex;justify-content:space-between;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border);flex-shrink:0}.roster-panel__footer-actions{display:flex;align-items:center;gap:var(--space-2)}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-overlay-top);background:var(--color-scrim);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.confirm-dialog{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);padding:var(--space-5);max-width:320px;width:100%}.confirm-dialog p{margin:0 0 var(--space-4);font-size:var(--text-md)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2)}.confirm-dialog__actions--start{justify-content:flex-start}.onboarding-dialog__title{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:700}.onboarding-dialog__body--desktop{display:none}@media (min-width: 1025px){.onboarding-dialog__body--mobile{display:none}.onboarding-dialog__body--desktop{display:block}}.onboarding-dialog .onboarding-dialog__micro{margin:var(--space-6) 0 0;text-align:left;font-size:var(--text-2xs);color:var(--color-text-muted);opacity:.6}@media (max-width: 1024px){.top-bar{justify-content:space-between}.top-bar__title{position:static;transform:none}.board{flex-direction:column;align-items:stretch;padding:var(--space-3) var(--space-2) var(--space-2)}.sidebar{width:100%}.pitch-stage{flex:none;margin:0;padding:var(--space-2)}.options-panel__body--closed,.theme-toggle--desktop{display:none}}@media (min-width: 1025px){.options-panel__toggle,.theme-toggle--mobile{display:none}}@media (max-width: 720px){.teams-modal{top:33vh;top:33dvh;right:0;left:0;bottom:0;width:100%;min-width:0;border-left:none;border-top:1px solid var(--color-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.roster-row__name,.team-row__name{font-size:16px}}