*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;height:100%;background:#0a0a0a;color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overscroll-behavior:none}body{touch-action:manipulation}.app{display:flex;flex-direction:column;height:100dvh;padding-top:env(safe-area-inset-top)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px;position:sticky;top:0;background:#0a0a0a;z-index:10}.team-tabs{display:flex;gap:6px}.team-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#1a1a1a;color:#aaa;border:1px solid #232323;border-radius:10px;padding:8px 14px;font-size:14px;font-weight:600;min-height:36px;cursor:pointer}.team-tab.active{color:#fff;background:#2a2a2a;border-color:#c8102e;box-shadow:inset 0 -2px #c8102e}.save-flash{font-size:12px;color:#4ade80;opacity:0;transition:opacity .25s}.save-flash.on{opacity:1}.formation-row{display:flex;gap:6px;overflow-x:auto;padding:6px 12px 10px;scrollbar-width:none}.formation-row::-webkit-scrollbar{display:none}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:0 0 auto;background:#1a1a1a;color:#ddd;border:1px solid #232323;border-radius:14px;padding:8px 14px;font-size:14px;font-weight:600;min-height:36px;cursor:pointer}.chip.active{background:#c8102e;border-color:#c8102e;color:#fff}.pitch-wrap{flex:1 1 auto;min-height:0;padding:0 8px;display:flex}.pitch{position:relative;flex:1;border-radius:14px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.pitch-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.bubble{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:12px;font-weight:600;color:#fff;background:#141414eb;border:1.5px solid #f5f5f5;border-radius:999px;padding:7px 10px;min-height:36px;min-width:56px;max-width:110px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.pitch-bubble{position:absolute;transform:translate(-50%,50%);cursor:grab;touch-action:none;z-index:2;background:#c8102eeb;border-color:#fff;box-shadow:0 2px 6px #0006}.pitch-bubble.dragging{z-index:5;transform:translate(-50%,50%) scale(1.08);cursor:grabbing;box-shadow:0 6px 16px #0009}.bubble-name{display:block;overflow:hidden;text-overflow:ellipsis;max-width:90px}.sheet{background:#111;border-top:1px solid #232323;border-top-left-radius:16px;border-top-right-radius:16px;padding-bottom:env(safe-area-inset-bottom);max-height:55dvh;display:flex;flex-direction:column;flex-shrink:0}.sheet.collapsed{max-height:44px}.sheet-handle{position:relative;display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px;cursor:pointer;min-height:36px}.handle-bar{width:36px;height:4px;border-radius:2px;background:#444;margin:0 auto}.sheet-counter{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;color:#888}.sheet-counter .ok{color:#4ade80}.sheet-team-label,.sheet-section,.sheet-counter-desktop,.desktop-only{display:none}.sheet-tabs{display:flex;gap:6px;padding:4px 12px 8px}.tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;background:#1a1a1a;color:#aaa;border:1px solid #232323;border-radius:10px;padding:8px;font-size:13px;font-weight:600;min-height:36px;cursor:pointer}.tab.active{color:#fff;background:#2a2a2a}.pane{display:none;flex:1;min-height:0;overflow-y:auto}.pane.mobile-active{display:block}.bench{padding:4px 12px 16px}.bench-grid{display:flex;flex-wrap:wrap;gap:6px}.bench-bubble{cursor:pointer;background:#1f1f1f;border-color:#3a3a3a}.bench-bubble:active{background:#2a2a2a}.empty{color:#666;font-size:13px;text-align:center;padding:20px 8px}.roster{padding:4px 12px 16px;display:flex;flex-direction:column;gap:10px}.roster-input{width:100%;min-height:120px;resize:vertical;background:#1a1a1a;color:#f5f5f5;border:1px solid #232323;border-radius:10px;padding:10px;font-size:14px;font-family:inherit}.roster-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#1a1a1a;color:#f5f5f5;border:1px solid #2a2a2a;border-radius:10px;padding:10px;font-size:14px;font-weight:600;min-height:44px;cursor:pointer}.btn.primary{background:#c8102e;border-color:#c8102e}.sync-panel{display:flex;flex-direction:column;gap:10px;padding:4px 12px 16px}.sync-status-row{display:flex;align-items:center;gap:8px}.sync-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 10px;border-radius:999px;border:1px solid #2a2a2a;background:#1a1a1a}.sync-badge.dim{color:#aaa}.sync-badge.ok{color:#4ade80;border-color:#1d4d2e;background:#0c1f14}.sync-badge.err{color:#f87171;border-color:#4d1d1d;background:#1f0c0c}.sync-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sync-actions .btn{width:100%}.sync-code-card{background:#181818;border:1px solid #232323;border-radius:12px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:8px}.sync-code-label{font-size:12px;color:#888}.sync-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:28px;letter-spacing:.08em;font-weight:700;color:#fff;padding:6px 0;-webkit-user-select:all;user-select:all}.sync-code-meta{font-size:12px;color:#666}.sync-enter{display:flex;flex-direction:column;gap:8px}.sync-input{width:100%;background:#1a1a1a;color:#f5f5f5;border:1px solid #232323;border-radius:10px;padding:12px;font-size:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:center;text-transform:uppercase}.sync-error{font-size:12px;color:#f87171}@media (min-width: 900px){.app{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"topbar topbar" "sidebar pitch";gap:16px;padding:16px;max-width:1400px;margin:0 auto;height:100dvh}.topbar{grid-area:topbar;padding:0;background:transparent;position:static}.formation-row{display:none}.pitch-wrap{grid-area:pitch;padding:0;align-items:center;justify-content:center}.pitch{flex:0 1 auto;width:min(100%,calc((100dvh - 80px) * 2 / 3));aspect-ratio:2 / 3;max-height:calc(100dvh - 80px);border:1px solid #232323}.sheet{grid-area:sidebar;max-height:none;height:100%;border:1px solid #232323;border-radius:14px;background:#111;overflow-y:auto;padding:14px;gap:12px}.sheet.collapsed{max-height:none}.sheet-handle{display:none}.sheet-team-label{display:block;color:#c8102e;font-size:18px;font-weight:700;padding:0 2px 4px;border-bottom:1px solid #232323}.sheet-section{display:block}.section-label{color:#888;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 2px 8px}.sheet-formations .formation-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.sheet-formations .chip{width:100%;padding:8px 6px;font-size:13px;border-radius:8px}.sheet-tabs{display:none}.pane{display:block;overflow:visible}.desktop-only{display:block}.roster,.bench,.sync-panel{padding:0}.pane-sync{margin-top:4px;padding-top:12px;border-top:1px solid #232323}.roster-input{min-height:110px}.bench{border-top:1px solid #232323;padding-top:12px;margin-top:4px}.sheet-counter-desktop{display:block;text-align:right;font-size:12px;color:#888;padding-top:4px}.sheet-counter-desktop .ok{color:#4ade80;font-weight:700}}