:root{--p-green-900: #063a20;--p-green-800: #0b4d2c;--p-green-700: #0e5934;--p-white: #ffffff;--p-navy-950: #0c0e1a;--p-navy-900: #14172b;--p-navy-800: #1b1f3b;--p-navy-600: #2c3158;--p-ink-500: #4b5170;--p-mist-200: #e7eaf2;--p-mist-100: #f4f6fa;--p-mint-400: #85f7c4;--p-mint-600: #34c98c;--p-blue-500: #2e6bff;--p-yellow-400: #f5c518;--p-red-500: #ef4444;--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;--color-app-bg: var(--p-navy-950);--color-surface: var(--p-navy-900);--color-surface-raised: var(--p-navy-800);--color-border: rgba(231, 234, 242, .12);--color-text: var(--p-mist-100);--color-text-muted: rgba(244, 246, 250, .6);--color-text-on-accent: var(--p-navy-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-lines: rgba(255, 255, 255, .65);--color-team-dot: var(--p-navy-800);--color-team-dot-border: var(--p-white);--color-opposition-dot: var(--p-blue-500);--color-ball: var(--p-yellow-400);--color-danger: var(--p-red-500);color-scheme:dark}@media (prefers-color-scheme: light){:root{--color-app-bg: var(--p-mist-100);--color-surface: var(--p-white);--color-surface-raised: var(--p-mist-100);--color-border: rgba(20, 23, 43, .12);--color-text: var(--p-navy-950);--color-text-muted: rgba(20, 23, 43, .6);color-scheme:light}}*{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%}.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:20;background:var(--color-app-bg);flex-wrap:wrap}.top-bar__title{position:absolute;left:50%;transform:translate(-50%);font-weight:700;font-size:15px;letter-spacing:.01em;white-space:nowrap}.top-bar__actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.opposition-toggle{display:inline-flex;align-items:center;gap:var(--space-2);font-size:13px;color:var(--color-text-muted);padding:0 var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}.opposition-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:13px;font-weight:600;cursor:pointer;transition:transform .1s ease,background .15s ease,border-color .15s ease}.button:hover{border-color:var(--color-accent)}.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;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text);font-size:18px;line-height:1;cursor:pointer}.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:13px;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--active{background:var(--p-navy-950);border-color:var(--p-navy-950);color:var(--p-white)}.pill--selected{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent)}.pill--ghost{background:transparent;border-style:dashed;color:var(--color-text-muted)}.formation-selector{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4)}.formation-selector__sizes,.formation-selector__formations{display:flex;gap:var(--space-2);flex-wrap:wrap}.board{flex:1;display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--space-4) var(--space-4)}.pitch-stage{width:100%;max-width:900px;margin:0 auto;padding:var(--space-6)}.pitch-frame{position:relative;width:100%;aspect-ratio:105 / 68;border-radius:var(--radius-sm);overflow:visible;background:repeating-linear-gradient(90deg,var(--color-pitch-turf) 0,var(--color-pitch-turf) 5.2381%,var(--color-pitch-turf-alt) 5.2381%,var(--color-pitch-turf-alt) 10.4762%);box-shadow:var(--shadow-md);touch-action:none}.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-frame__layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible}.dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab;touch-action:none;z-index:2;-webkit-user-select:none;user-select:none}.dot--dragging{z-index:50;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:#ffffff24;border-style:dashed;border-color:#ffffff80}.dot__label{font-size:10.5px;font-weight:700;color:var(--p-white);background:#0c0e1a8c;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(--p-white);width:26px;height:26px}.dot__remove{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;border:none;background:var(--color-danger);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.ball{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;cursor:grab;touch-action:none;z-index:3}.ball--dragging{cursor:grabbing;z-index:50}.ball__marker{display:block;width:100%;height:100%;border-radius:50%;background:var(--color-ball);border:2px solid rgba(12,14,26,.55);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:200}.bench-ghost .dot__marker{transform:scale(1.15);box-shadow:var(--shadow-lift)}.bench{max-width:900px;margin:0 auto;width:100%}.bench__label{font-size:11px;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:13px;padding:var(--space-2)}.bench-chip{display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.bench-chip--highlighted{border-color:var(--color-accent)}.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:13px;font-weight:600}.bench-chip__role{font-size:11px;color:var(--color-text-muted)}.roster-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:transparent}.roster-drawer{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)}.roster-drawer__header{display:flex;align-items:center;justify-content:space-between}.roster-drawer__header h2{margin:0;font-size:17px}.roster-drawer__hint{margin:0;font-size:12.5px;color:var(--color-text-muted)}.roster-drawer__list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2)}.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:9.5px;font-weight:800;letter-spacing:.04em;color:var(--color-text-on-accent);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)}.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:13px}.roster-row__role{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2);font-size:12px;max-width:118px}.roster-row__remove{width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--color-text-muted);font-size:15px;cursor:pointer;flex-shrink:0}.roster-row__remove:hover{color:var(--color-danger)}.roster-drawer__footer{display:flex;justify-content:space-between;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border)}@media (max-width: 720px){.roster-drawer{top:auto;right:0;left:0;bottom:0;width:100%;min-width:0;max-height:85vh;border-left:none;border-top:1px solid var(--color-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}}