body {
            margin: 0;
            padding: 10px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: #000;
            color: #fff;
            touch-action: manipulation;
            color-scheme: dark;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 500px;
            margin: 0 auto;
        }
        .setup-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 500px;
            margin: 20px auto;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 15px;
        }
        .form-group label {
            font-size: 14px;
            color: #8e8e93;
            text-transform: uppercase;
        }
        .form-control {
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #3a3a3c;
            background: #2c2c2e;
            color: #e5e5ea;
            font-size: 16px;
        }
        .btn-primary {
            background: #0a84ff;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
        }
        .panel {
            background: #1c1c1e;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }
        h3 {
            margin-top: 0;
            color: #e5e5ea;
        }
        .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .btn {
            flex: 1;
            min-width: 60px;
            padding: 15px 10px;
            border: 2px solid #3a3a3c;
            border-radius: 8px;
            background: #2c2c2e;
            color: #e5e5ea;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            text-align: center;
        }
        .btn.active {
            border-color: #0a84ff;
            background: #0a84ff;
            color: white;
        }
        .btn.active-success {
            border-color: #32d74b;
            background: #32d74b;
            color: white;
        }
        .btn.active-miss {
            border-color: #ff453a;
            background: #ff453a;
            color: white;
        }
        
        .mode-toggle {
            display: flex;
            background: #1c1c1e;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 15px;
            border: 1px solid #3a3a3c;
        }
        .mode-toggle .btn {
            border: none;
            border-radius: 0;
            background: transparent;
            color: #8e8e93;
        }

        /* Compact setup screen — fits one viewport, scales down on small phones */
        .setup-container {
            gap: 10px;
            margin: 10px auto;
        }
        .setup-container h1 {
            font-size: 22px;
            margin: 0;
        }
        .setup-container .panel {
            padding: 12px;
        }
        .setup-container .form-group {
            margin-bottom: 10px;
            gap: 4px;
        }
        .setup-container .form-control {
            padding: 10px;
            font-size: 15px;
        }
        .setup-container .btn-primary {
            padding: 12px;
            margin-top: 5px;
        }
        .setup-container .btn {
            padding: 10px;
            font-size: 16px;
        }
        .setup-container .mode-toggle {
            margin-bottom: 10px;
        }
        .mode-toggle .btn.active {
            background: #0a84ff;
            color: white;
        }
        
        #court-container {
            position: relative;
            width: 100%;
            border: 2px solid #3a3a3c;
            border-radius: 4px;
            overflow: hidden;
            touch-action: none;
            transition: background 0.3s ease;
        }
        
        #court {
            display: block;
            width: 100%;
            height: 100%;
        }

        #feedback {
            text-align: center;
            font-weight: bold;
            min-height: 24px;
            color: #32d74b;
        }
    
        /* NEW WORKFLOW CSS */
        /* Allow the tracker to grow wider than the 500px setup container so the
           court can reach 600+px on larger screens, per enhancements.md. */
        #tracker-view.container {
            max-width: 720px;
        }
        .court-maximized {
            height: 70vh;
            max-height: 800px;
            display: flex;
            flex-direction: column;
        }
        #court-container {
            flex-grow: 1;
            min-height: 0;
        }
        
        .roster-scroll {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            padding: 10px 0;
            scrollbar-width: none;
        }
        .roster-scroll::-webkit-scrollbar { display: none; }
        .roster-scroll .btn {
            flex: 0 0 auto;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            min-width: 0;
        }
        
        /* Pie wheel popover (donut sectors centered on click).
           position: fixed so clientX/clientY map directly to the viewport
           regardless of where #tracker-view sits on the page. */
        #shot-popover {
            position: fixed;
            display: none;
            transform: translate(-50%, -50%);
            z-index: 100;
            filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
        }
        #shot-popover svg {
            display: block;
        }
        #shot-popover .wedge {
            cursor: pointer;
        }
        #shot-popover .wedge path {
            fill: rgba(28, 28, 30, 0.95);
            stroke-width: 2;
            transition: fill 0.1s;
        }
        #shot-popover .wedge:active path {
            fill: rgba(58, 58, 60, 0.98);
        }

        /* Toast */
        #modifier-toast {
            position: fixed;
            bottom: 120px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(28, 28, 30, 0.95);
            border: 1px solid #3a3a3c;
            padding: 15px;
            border-radius: 12px;
            display: none;
            flex-direction: column;
            gap: 10px;
            z-index: 200;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            width: 90%;
            max-width: 400px;
        }
        
        /* FAB */
        .fab {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #0a84ff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            z-index: 50;
            cursor: pointer;
            border: 2px solid white;
        }
        
        #btn-logout {
            background: #ff453a;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        /* Drawer */
        #stats-drawer {
            position: fixed;
            bottom: -100%;
            left: 0;
            width: 100%;
            height: 70vh;
            background: #1c1c1e;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            z-index: 300;
            transition: bottom 0.3s ease-out;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
        }
        #stats-drawer.open {
            bottom: 0;
        }
        .drawer-handle {
            width: 40px;
            height: 5px;
            background: #3a3a3c;
            border-radius: 3px;
            margin: 10px auto;
        }
        .drawer-content {
            padding: 15px;
            overflow-y: auto;
            flex: 1;
        }


        /* REVIEW MODE (view-only, single window) */
        .review-mode #court-title { display: none; }
        .review-mode #fab-stats { display: none !important; }
        .review-mode .court-maximized {
            height: calc(100vh - 215px);
            margin-bottom: 0 !important;
        }

        #record-actions {
            display: none;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            padding: 8px;
            margin-bottom: 12px;
            background: #1c1c1e;
            border: 1px solid #3a3a3c;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        #record-actions .btn {
            flex: 1 1 30%;
            min-width: 0;
            padding: 12px 4px;
            border-radius: 50px;
            font-size: 15px;
            font-weight: bold;
            white-space: nowrap;
            text-align: center;
        }

        /* Current-period selector (upper-left of the court, below record buttons) */
        .period-control {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 6px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .period-control .period-label {
            font-size: 11px;
            color: #8e8e93;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-right: 2px;
        }
        .period-control .btn {
            min-width: auto;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: bold;
            border: 1px solid #3a3a3c;
            background: #2c2c2e;
            color: #e5e5ea;
        }
        .period-control .btn.active {
            border-color: #0a84ff;
            color: #0a84ff;
            background: rgba(10, 132, 255, 0.15);
        }

        #sub-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.88);
            z-index: 400;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        /* Numeric input buttons */
        #sub-modal button {
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }
        
        #sub-modal input[type="number"] {
            -webkit-appearance: none;
            -moz-appearance: textfield;
            appearance: none;
        }
        
        #sub-modal input[type="number"]::-webkit-outer-spin-button,
        #sub-modal input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        #sub-modal .sub-card {
            background: #1c1c1e;
            border: 1px solid #3a3a3c;
            border-radius: 16px;
            padding: 20px;
            width: 100%;
            max-width: 420px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .active-slots {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .active-slot {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 2px solid #3a3a3c;
            background: #2c2c2e;
            color: #e5e5ea;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .active-slot.selected {
            border-color: #ff453a;
            color: #ff453a;
        }
        .bench-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        .bench-player {
            padding: 10px 14px;
            border-radius: 20px;
            border: 2px solid #3a3a3c;
            background: #2c2c2e;
            color: #e5e5ea;
            font-weight: bold;
            cursor: pointer;
        }
        .bench-player.selected {
            border-color: #32d74b;
            color: #32d74b;
        }

        #lineup-modal {
            display: none;
            flex-direction: column;
            gap: 15px;
            max-width: 500px;
            margin: 20px auto;
        }
        #lineup-modal .sub-card {
            background: #1c1c1e;
            border: 1px solid #3a3a3c;
            border-radius: 16px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .lineup-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        .lineup-player {
            padding: 10px 14px;
            border-radius: 20px;
            border: 2px solid #3a3a3c;
            background: #2c2c2e;
            color: #e5e5ea;
            font-weight: bold;
            cursor: pointer;
        }
        .lineup-player.selected {
            border-color: #32d74b;
            color: #32d74b;
        }
        #lineup-modal .btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Indeterminate loading bar (used by Load Test Data) — communicates
           "working" without faking a real percentage. */
        .indeterminate-track {
            height: 10px;
            background: #2c2c2e;
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #3a3a3c;
            position: relative;
        }
        .indeterminate-track .indeterminate-slider {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 35%;
            border-radius: 5px;
            background: linear-gradient(90deg, #0a84ff, #40a9ff);
            animation: indeterminate-slide 1.1s ease-in-out infinite;
        }
        @keyframes indeterminate-slide {
            0% { left: -35%; }
            100% { left: 100%; }
        }

        /* ===== Pager (chevrons + swipe + dots) ===== */
        .pager {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .pager-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 0 2px 6px;
        }
        .pager-title {
            font-size: 12px;
            color: #8e8e93;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .pager-count {
            font-size: 13px;
            color: #0a84ff;
            font-weight: bold;
            white-space: nowrap;
        }
        .pager-stack {
            position: relative;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        .pager-page {
            display: none;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .pager-page.active {
            display: block;
        }
        .pager-dots {
            display: flex;
            gap: 6px;
            justify-content: center;
            padding: 8px 40px 2px;
            min-height: 17px;
        }
        .pager-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #3a3a3c;
            cursor: pointer;
            transition: background 0.15s;
            flex: 0 0 auto;
        }
        .pager-dot.active {
            background: #0a84ff;
        }
        .pager-chev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 30;
            width: 44px;
            height: 68px;
            border: 1px solid #3a3a3c;
            background: rgba(28, 28, 30, 0.88);
            color: #e5e5ea;
            font-size: 34px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding: 0;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }
        .pager-chev-left { left: 2px; }
        .pager-chev-right { right: 2px; }
        .pager-chev:active { background: #3a3a3c; }
        .pager-chev:disabled { opacity: 0.25; cursor: default; }

        /* ===== Unified tracker pager (Court ⇄ Stats) ===== */
        #tracker-pager {
            flex: 1;
            min-height: 0;
            position: relative;
        }
        #tracker-pager .court-maximized {
            height: calc(100dvh - 190px);
            height: calc(100vh - 190px);
            margin-bottom: 0;
        }
        #tracker-pager .pager-page {
            padding-bottom: 70px;
        }
        .stats-page {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-bottom: 70px;
        }
        .stats-page #view-court-panel {
            margin-bottom: 0;
        }
        .stats-page #view-court-panel .court-title,
        #view-court-title {
            font-size: 14px;
            color: #8e8e93;
            text-transform: uppercase;
        }
        #view-court-panel {
            background: #1c1c1e;
        }

        /* ===== Review mode (full-screen paged) ===== */
        #tracker-view.review-mode {
            height: calc(100vh - 10px);
            height: calc(100dvh - 10px);
            overflow: hidden;
            padding-bottom: env(safe-area-inset-bottom);
        }
        #tracker-view.review-mode #review-area {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        #tracker-view.review-mode #conn-banner,
        #tracker-view.review-mode #conn-status,
        #tracker-view.review-mode .court-maximized {
            margin-bottom: 0;
        }
        #tracker-view.review-mode .court-maximized {
            height: 100%;
            max-height: none;
        }
        .review-mode #stats-bar .stat-summary-row { display: none; }

        /* ===== Summary page ===== */
        .review-summary {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .review-summary .rs-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .review-summary .rs-cell {
            background: #2c2c2e;
            border: 1px solid #3a3a3c;
            border-radius: 10px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .review-summary .rs-label {
            font-size: 11px;
            color: #8e8e93;
            text-transform: uppercase;
        }
        .review-summary .rs-value {
            font-size: 22px;
            font-weight: bold;
            color: #e5e5ea;
        }
        .review-summary .rs-sub {
            font-size: 12px;
            color: #8e8e93;
        }

        /* ===== Compact player card (auto-fit) ===== */
        .pcard-compact {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #2c2c2e;
            border: 1px solid #3a3a3c;
            border-radius: 10px;
            padding: 10px 12px;
            cursor: pointer;
            margin-bottom: 8px;
            touch-action: manipulation;
        }
        .pcard-compact:active { background: #3a3a3c; }
        .pcard-compact .pc-num {
            font-weight: bold;
            color: #0a84ff;
            font-size: 15px;
            min-width: 34px;
        }
        .pcard-compact .pc-name {
            font-weight: bold;
            color: #e5e5ea;
            font-size: 15px;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .pcard-compact .pc-mini {
            font-size: 13px;
            font-weight: bold;
            color: #e5e5ea;
            white-space: nowrap;
        }
        .pcard-compact .pc-mini.pts { color: #32d74b; }
        .pcard-compact .pc-mini.reb { color: #0a84ff; }
        .pcard-compact .pc-mini.ast { color: #ff9f0a; }
        .pcard-compact .pc-expand {
            color: #8e8e93;
            font-size: 18px;
            font-weight: bold;
            padding-left: 4px;
        }
        .pcard-full {
            margin-bottom: 10px;
        }
        .players-page {
            padding-bottom: 60px;
            overflow-y: auto;
        }

        /* ===== Settings modal ===== */
        #settings-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.88);
            z-index: 500;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        #settings-modal .sub-card {
            background: #1c1c1e;
            border: 1px solid #3a3a3c;
            border-radius: 16px;
            padding: 20px;
            width: 100%;
            max-width: 420px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* ===== Expanded selected stat card ===== */
        .detail-panel {
            background: #1c1c1e;
            border: 1px solid #3a3a3c;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 10px;
        }
        .detail-panel .dp-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .detail-panel .dp-close {
            background: transparent;
            border: 1px solid #8e8e93;
            color: #8e8e93;
            border-radius: 6px;
            padding: 6px 12px;
            font-weight: bold;
            cursor: pointer;
            font-size: 13px;
        }

        /* ===== Player detail modal ===== */
        #player-detail-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.88);
            z-index: 450;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }
        #player-detail-modal .sub-card {
            background: #1c1c1e;
            border: 1px solid #3a3a3c;
            border-radius: 16px;
            padding: 16px;
            width: 100%;
            max-width: 460px;
            max-height: 85vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }