:root {
            --bg-dark: #0a0a0f;
            --bg-card: #12121a;
            --bg-input: #1a1a25;
            --neon-red: #ff2d55;
            --neon-green: #39ff14;
            --neon-blue: #00d4ff;
            --neon-yellow: #ffea00;
            --neon-purple: #bf00ff;
            --text-primary: #ffffff;
            --text-secondary: #8888aa;
            --border-glow: rgba(0, 212, 255, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 80%;
        }

        body {
            font-family: 'Exo 2', sans-serif;
            background: var(--bg-dark);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(ellipse at 20% 20%, rgba(191, 0, 255, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(255, 45, 85, 0.05) 0%, transparent 70%);
            pointer-events: none;
            z-index: -1;
        }

        /* Announcement Bar */
        .announcement-bar {
            background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue));
            padding: 0.15rem;
            text-align: center;
        }

        /* Header */
        .header {
            background: linear-gradient(180deg, rgba(18, 18, 26, 0.95) 0%, rgba(10, 10, 15, 0.9) 100%);
            border-bottom: 1px solid var(--border-glow);
            padding: 1rem 1.5rem;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1000;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .zoom-controls {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .zoom-btn {
            width: 28px;
            height: 28px;
            border: 1px solid var(--border-glow);
            border-radius: 6px;
            background: var(--bg-card);
            color: var(--text-primary);
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding: 0;
        }

        .zoom-btn:active {
            background: var(--neon-blue);
            color: white;
        }

        .zoom-level {
            color: var(--text-secondary);
            font-size: 0.75rem;
            min-width: 36px;
            text-align: center;
        }

        .logo {
            font-family: 'Orbitron', monospace;
            font-size: 1.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--neon-red), var(--neon-purple), var(--neon-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 2px;
        }

        .announcement-btn {
            background: var(--bg-card);
            border: 2px solid var(--neon-purple);
            border-radius: 12px;
            padding: 0.5rem 1.5rem;
            color: var(--neon-purple);
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .announcement-btn:hover {
            background: rgba(191, 0, 255, 0.2);
            transform: scale(1.05);
        }

        /* Announcement Modal Styles */
        .announcement-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .announcement-overlay.active {
            display: flex;
        }

        .announcement-popup {
            background: var(--bg-card);
            border: 2px solid var(--neon-purple);
            border-radius: 16px;
            padding: 2rem;
            max-width: 650px;
            width: 95%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 0 30px rgba(191, 0, 255, 0.5);
            position: relative;
        }

        .announcement-popup h2 {
            color: var(--neon-purple);
            font-family: 'Orbitron', monospace;
            margin-bottom: 1.5rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .announcement-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.2s;
        }

        .announcement-close:hover {
            color: var(--neon-red);
        }

        .announcement-section {
            margin-bottom: 1.5rem;
        }

        .announcement-section h3 {
            color: var(--neon-blue);
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .recipient-checkboxes {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .recipient-checkbox {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .recipient-checkbox:hover {
            border-color: var(--neon-purple);
            background: rgba(191, 0, 255, 0.1);
        }

        .recipient-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: var(--neon-purple);
        }

        .recipient-checkbox label {
            flex: 1;
            cursor: pointer;
            color: var(--text-primary);
        }

        .recipient-checkbox .recipient-desc {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        .team-select-container {
            display: none;
            margin-top: 0.75rem;
            padding: 0.75rem;
            background: rgba(0, 212, 255, 0.05);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
        }

        .team-select-container.visible {
            display: block;
        }

        .team-checkboxes {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            max-height: 150px;
            overflow-y: auto;
        }

        .team-checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .team-checkbox-item:hover {
            border-color: var(--neon-blue);
        }

        .team-checkbox-item input {
            cursor: pointer;
            accent-color: var(--neon-blue);
        }

        .team-checkbox-item label {
            cursor: pointer;
            font-size: 0.85rem;
        }

        .player-select-container {
            margin-top: 0.75rem;
        }

        .player-select-row {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .player-select-row select {
            flex: 1;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 0.5rem;
            color: var(--text-primary);
            font-family: inherit;
        }

        .player-select-row select:focus {
            outline: none;
            border-color: var(--neon-blue);
        }

        .player-select-row button {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-weight: 600;
        }

        .btn-add-player {
            background: var(--neon-green);
            color: #000;
        }

        .selected-players {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .selected-player-tag {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.75rem;
            background: rgba(57, 255, 20, 0.2);
            border: 1px solid var(--neon-green);
            border-radius: 20px;
            font-size: 0.85rem;
            color: var(--neon-green);
        }

        .selected-player-tag .remove-player {
            cursor: pointer;
            font-weight: bold;
            color: var(--neon-red);
        }

        .message-textarea {
            width: 100%;
            min-height: 100px;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 0.75rem;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 1rem;
            resize: vertical;
        }

        .message-textarea:focus {
            outline: none;
            border-color: var(--neon-purple);
            box-shadow: 0 0 10px rgba(191, 0, 255, 0.3);
        }

        .char-counter {
            text-align: right;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        .char-counter.warning {
            color: var(--neon-yellow);
        }

        .char-counter.error {
            color: var(--neon-red);
        }

        .announcement-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 1.5rem;
        }

        .announcement-actions button {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-cancel-announcement {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            color: var(--text-secondary);
        }

        .btn-cancel-announcement:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .btn-send-announcement {
            background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
            border: none;
            color: white;
        }

        .btn-send-announcement:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(191, 0, 255, 0.5);
        }

        .btn-send-announcement:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* Confirmation overlay */
        .announcement-confirm-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2100;
            justify-content: center;
            align-items: center;
        }

        .announcement-confirm-overlay.active {
            display: flex;
        }

        .announcement-confirm-popup {
            background: var(--bg-card);
            border: 2px solid var(--neon-yellow);
            border-radius: 16px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            text-align: center;
            box-shadow: 0 0 30px rgba(255, 234, 0, 0.3);
        }

        .announcement-confirm-popup h3 {
            color: var(--neon-yellow);
            font-family: 'Orbitron', monospace;
            margin-bottom: 1rem;
        }

        .recipient-summary {
            background: var(--bg-input);
            border-radius: 8px;
            padding: 1rem;
            margin: 1rem 0;
            text-align: left;
            max-height: 200px;
            overflow-y: auto;
        }

        .recipient-summary p {
            margin: 0.5rem 0;
            color: var(--text-secondary);
        }

        .recipient-summary strong {
            color: var(--neon-green);
        }

        .confirm-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 1.5rem;
        }

        .btn-confirm-send {
            background: var(--neon-green);
            border: none;
            color: #000;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            cursor: pointer;
        }

        .btn-confirm-cancel {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            color: var(--text-secondary);
            padding: 0.75rem 2rem;
            border-radius: 8px;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            cursor: pointer;
        }

        .btn-history {
            background: var(--bg-input);
            border: 1px solid var(--neon-yellow);
            color: var(--neon-yellow);
        }

        .btn-history:hover {
            background: rgba(255, 234, 0, 0.1);
        }

        /* History Modal */
        .announcement-history-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2100;
            justify-content: center;
            align-items: center;
        }

        .announcement-history-overlay.active {
            display: flex;
        }

        .announcement-history-popup {
            background: var(--bg-card);
            border: 2px solid var(--neon-yellow);
            border-radius: 16px;
            padding: 2rem;
            max-width: 700px;
            width: 95%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 0 30px rgba(255, 234, 0, 0.3);
            position: relative;
        }

        .announcement-history-popup h2 {
            color: var(--neon-yellow);
            font-family: 'Orbitron', monospace;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .history-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
        }

        .history-close:hover {
            color: var(--neon-red);
        }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .history-item {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 1rem;
            position: relative;
        }

        .history-item.public {
            border-color: var(--neon-green);
        }

        .history-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        .history-item-date {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .history-item-recipients {
            font-size: 0.85rem;
            color: var(--neon-blue);
            margin-bottom: 0.5rem;
        }

        .history-item-message {
            color: var(--text-primary);
            font-style: italic;
            padding: 0.5rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        .history-delete-btn {
            background: none;
            border: none;
            color: var(--neon-red);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
        }

        .history-delete-btn:hover {
            color: #ff6b6b;
        }

        .history-empty {
            text-align: center;
            color: var(--text-secondary);
            padding: 2rem;
        }

        .history-public-badge {
            display: inline-block;
            background: var(--neon-green);
            color: #000;
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            margin-left: 0.5rem;
            font-weight: 700;
        }

        /* Virtual Keyboard Styles - Fixed Overlay */
        .virtual-keyboard-overlay {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 3000;
            background: var(--bg-card);
            border-top: 2px solid var(--neon-purple);
            box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
            padding: 1rem;
            padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
        }

        .virtual-keyboard-overlay.visible {
            display: block;
        }

        .keyboard-message-preview {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            max-height: 80px;
            overflow-y: auto;
        }

        .keyboard-message-preview textarea {
            width: 100%;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 1rem;
            font-family: inherit;
            resize: none;
            outline: none;
            min-height: 50px;
        }

        .keyboard-message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .keyboard-message-header .char-count {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .keyboard-message-header .char-count.warning {
            color: var(--neon-yellow);
        }

        .keyboard-message-header .char-count.error {
            color: var(--neon-red);
        }

        .keyboard-close-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.25rem;
        }

        .keyboard-close-btn:hover {
            color: var(--neon-red);
        }

        .virtual-keyboard {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .keyboard-row {
            display: flex;
            justify-content: center;
            gap: 0.4rem;
        }

        .key {
            min-width: 50px;
            height: 58px;
            background: var(--bg-input);
            border: 2px solid var(--border-glow);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 1.4rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.1s;
            user-select: none;
        }

        .key:hover {
            background: rgba(0, 212, 255, 0.2);
            border-color: var(--neon-blue);
        }

        .key:active {
            background: var(--neon-blue);
            color: #000;
            transform: scale(0.95);
        }

        .key.space {
            min-width: 220px;
            flex: 1;
            max-width: 350px;
        }

        .key.backspace {
            min-width: 85px;
            font-size: 1.2rem;
        }

        .key.shift {
            min-width: 70px;
            font-size: 1.1rem;
        }

        .key.shift.active {
            background: var(--neon-purple);
            border-color: var(--neon-purple);
            color: #fff;
        }

        .key.enter {
            min-width: 85px;
            font-size: 1.1rem;
            background: var(--neon-green);
            color: #000;
            border-color: var(--neon-green);
            font-weight: 700;
        }

        .tournament-info {
            display: flex;
            gap: 1.5rem;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .tournament-info span {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .tournament-info .value {
            color: var(--neon-blue);
        }

        .header-links {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .header-links a {
            color: var(--neon-blue);
            text-decoration: none;
            font-size: 0.7rem;
            font-family: 'Orbitron', monospace;
            padding: 0.2rem 0.6rem;
            border: 1px solid var(--border-glow);
            border-radius: 6px;
            transition: all 0.3s;
        }

        .header-links a:hover {
            background: rgba(0, 212, 255, 0.15);
            border-color: var(--neon-blue);
        }

        /* Tab Navigation - Now Sticky */
        .tab-nav {
            display: flex;
            flex-wrap: wrap;
            background: var(--bg-card);
            border-bottom: 2px solid var(--border-glow);
            position: sticky;
            top: 0;
            z-index: 2000;
            pointer-events: auto;
            isolation: isolate;
        }

        .tab-btn {
            flex: 1 1 0;
            min-width: 0;
            padding: 0.7rem 0.4rem;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-family: 'Orbitron', monospace;
            font-size: clamp(0.55rem, 1.8vw, 0.8rem);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            text-transform: uppercase;
            letter-spacing: clamp(0px, 0.3vw, 1px);
            pointer-events: auto;
            z-index: 1;
            white-space: nowrap;
        }

        .tab-btn:hover {
            color: var(--text-primary);
            background: rgba(0, 212, 255, 0.1);
        }

        .tab-btn.active {
            color: var(--neon-blue);
            text-shadow: 0 0 10px var(--neon-blue);
        }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
            box-shadow: 0 0 15px var(--neon-blue);
        }

        /* Systems Tab with expand arrow */
        .tab-btn.systems-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .tab-btn.systems-tab .expand-arrow {
            transition: transform 0.3s ease;
            font-size: 0.7rem;
        }

        .tab-btn.systems-tab.expanded .expand-arrow {
            transform: rotate(180deg);
        }

        /* Collapsible Systems Row */
        .systems-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.4rem;
            padding: 0;
            background: rgba(18, 18, 26, 0.95);
            border-bottom: 1px solid var(--border-glow);
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
            position: sticky;
            top: 32px;
            z-index: 2000;
        }

        .systems-row.expanded {
            max-height: 120px;
            opacity: 1;
            padding: 0.5rem 0.5rem;
        }

        .system-btn {
            padding: 0.4rem 0.6rem;
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            color: var(--text-secondary);
            font-family: 'Orbitron', monospace;
            font-size: clamp(0.55rem, 1.6vw, 0.75rem);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: clamp(0px, 0.2vw, 1px);
            white-space: nowrap;
        }

        .system-btn:hover {
            color: var(--text-primary);
            border-color: var(--neon-purple);
            background: rgba(191, 0, 255, 0.1);
        }

        .system-btn.active {
            color: var(--neon-purple);
            border-color: var(--neon-purple);
            background: rgba(191, 0, 255, 0.2);
            box-shadow: 0 0 10px rgba(191, 0, 255, 0.3);
        }

        /* Toast */
        .toast {
            position: fixed;
            top: 5rem;
            left: 50%;
            transform: translateX(-50%) translateY(-100px);
            background: var(--bg-card);
            border: 2px solid var(--neon-yellow);
            border-radius: 12px;
            padding: 1rem 2rem;
            color: var(--neon-yellow);
            font-family: 'Exo 2', sans-serif;
            font-size: 1.2rem;
            z-index: 2100;
            opacity: 0;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: 0 0 30px rgba(255, 234, 0, 0.5);
            pointer-events: none;
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: auto;
        }

        .toast-close {
            background: var(--neon-red);
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        /* Main Content */
        .main-content {
            padding: 1rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Overview Section */
        .overview-section {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .overview-header {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .overview-stat {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
        }

        .overview-stat label {
            display: block;
            font-size: 0.7rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

        .overview-stat .value {
            font-family: 'Orbitron', monospace;
            font-size: 1.2rem;
            color: var(--neon-green);
        }

        .start-game-btn {
            background: linear-gradient(135deg, var(--neon-green), var(--neon-blue));
            border: none;
            border-radius: 12px;
            padding: 1rem 2rem;
            color: white;
            font-family: 'Orbitron', monospace;
            font-size: 1.2rem;
            cursor: pointer;
            margin-bottom: 1.5rem;
            display: block;
            width: 100%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
            transition: all 0.3s ease;
        }

        .start-game-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(57, 255, 20, 0.5);
        }

        .overview-table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
            display: block;
        }

        .overview-table table {
            width: 100%;
            min-width: 800px;
        }

        .overview-table th {
            background: var(--bg-input);
            padding: 0.75rem;
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.75rem;
            text-transform: uppercase;
            border: 1px solid var(--border-glow);
        }

        .overview-table th.color-header {
            font-weight: 700;
        }

        .overview-table th.red-header { color: var(--neon-red); }
        .overview-table th.green-header { color: var(--neon-green); }
        .overview-table th.blue-header { color: var(--neon-blue); }
        .overview-table th.yellow-header { color: var(--neon-yellow); }

        .overview-table td {
            padding: 0.75rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }

        .overview-table tr:hover {
            background: rgba(0, 212, 255, 0.1);
            cursor: pointer;
        }

        .overview-table tr.game-odd-filled {
            background: rgba(255, 0, 255, 0.2); /* Dark magenta */
        }

        .overview-table tr.game-even-filled {
            background: rgba(0, 212, 255, 0.15); /* Dark cyan */
        }

        .overview-table tr.free-time {
            background: rgba(255, 234, 0, 0.1);
            cursor: default;
        }

        .overview-table tr.free-time:hover {
            background: rgba(255, 234, 0, 0.15);
        }

        .overview-table tr.free-time td {
            color: var(--neon-yellow);
            font-weight: 600;
        }

        /* Sticky first column for overview table (Game #) */
        .overview-table th:first-child,
        .overview-table td:first-child {
            position: sticky;
            left: 0;
            background: var(--bg-card);
            z-index: 10;
        }
        
        .overview-table th:first-child {
            background: var(--bg-input);
            z-index: 11;
        }

        .game-number {
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            color: var(--neon-purple);
        }

        .calculated-time {
            background: rgba(0, 100, 0, 0.3);
            font-style: italic;
        }

        /* Export Section */
        .export-section {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            margin-top: 1.5rem;
        }

        /* Game Nav */
        .game-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .nav-arrow {
            width: 50px;
            height: 50px;
            background: var(--bg-card);
            border: 2px solid var(--border-glow);
            border-radius: 50%;
            color: var(--neon-blue);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-arrow:hover:not(:disabled) {
            background: rgba(0, 212, 255, 0.2);
            box-shadow: 0 0 20px var(--neon-blue);
            transform: scale(1.1);
        }

        .nav-arrow:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .game-indicator {
            font-family: 'Orbitron', monospace;
            font-size: 1.2rem;
            color: var(--text-primary);
            min-width: 150px;
            text-align: center;
        }

        .game-indicator span {
            color: var(--neon-purple);
            font-weight: 700;
        }

        .nav-with-break {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 1.5rem;
        }

        .break-reminder {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--neon-yellow);
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            text-shadow: 0 0 10px var(--neon-yellow);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                text-shadow: 0 0 10px var(--neon-yellow);
            }
            50% {
                opacity: 0.6;
                text-shadow: 0 0 20px var(--neon-yellow);
            }
        }

        /* Time Section */
        .time-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .time-card {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1rem;
        }

        .time-card label {
            display: block;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }

        .time-card input {
            width: 100%;
            background: var(--bg-input);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 8px;
            padding: 0.75rem;
            color: var(--text-primary);
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
        }

        .time-card input:focus {
            outline: none;
            border-color: var(--neon-blue);
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
        }

        .now-btn {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            border: none;
            border-radius: 6px;
            padding: 0.5rem 1rem;
            color: white;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.8rem;
            cursor: pointer;
            margin-top: 0.5rem;
            transition: all 0.3s ease;
        }

        .now-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(191, 0, 255, 0.5);
        }

        .add-penalty-btn {
            background: linear-gradient(135deg, var(--neon-red), var(--neon-purple));
            border: none;
            border-radius: 6px;
            padding: 0.6rem 1.2rem;
            color: white;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .add-penalty-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }

        /* Start Page Overlay */
        .start-page-overlay {
            position: fixed;
            top: 100px;
            left: 0;
            width: 100%;
            height: calc(100% - 100px);
            background: linear-gradient(135deg, var(--bg-dark) 0%, #1a0a2e 50%, var(--bg-dark) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        .start-page-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .start-page-content {
            text-align: center;
            animation: fadeInUp 1s ease;
            margin-top: 4rem;
        }

        .welcome-text {
            font-family: 'Exo 2', sans-serif;
            font-size: 2rem;
            color: var(--neon-cyan);
            margin-bottom: 1rem;
            opacity: 0.9;
            font-weight: 300;
        }

        .tournament-name-bubble {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            border-radius: 20px;
            padding: 3rem 5rem;
            margin-bottom: 2rem;
            box-shadow: 0 0 40px rgba(191, 0, 255, 0.6), 0 0 80px rgba(0, 212, 255, 0.4);
            animation: glow 3s ease-in-out infinite;
        }

        .tournament-name-text {
            font-family: 'Orbitron', sans-serif;
            font-size: 4rem;
            font-weight: 900;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.2rem;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
        }

        .tournament-subtitle {
            font-family: 'Exo 2', sans-serif;
            font-size: 1.5rem;
            color: var(--neon-cyan);
            margin-bottom: 3rem;
            opacity: 0.9;
        }

        .start-btn {
            background: linear-gradient(135deg, var(--neon-red), var(--neon-purple));
            border: 2px solid var(--neon-cyan);
            border-radius: 12px;
            padding: 1.5rem 4rem;
            color: white;
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
        }

        .start-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(255, 45, 85, 0.8);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 40px rgba(191, 0, 255, 0.6), 0 0 80px rgba(0, 212, 255, 0.4);
            }
            50% {
                box-shadow: 0 0 60px rgba(191, 0, 255, 0.8), 0 0 120px rgba(0, 212, 255, 0.6);
            }
        }

        /* Teams Container */
        .teams-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .team-card {
            background: var(--bg-card);
            border: 4px solid var(--border-glow);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .team-card[data-color="red"] {
            border-color: var(--neon-red);
            box-shadow: 0 0 30px rgba(255, 45, 85, 0.2);
        }

        .team-card[data-color="green"] {
            border-color: var(--neon-green);
            box-shadow: 0 0 30px rgba(57, 255, 20, 0.2);
        }

        .team-card[data-color="blue"] {
            border-color: var(--neon-blue);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
        }

        .team-card[data-color="yellow"] {
            border-color: var(--neon-yellow);
            box-shadow: 0 0 30px rgba(255, 234, 0, 0.2);
        }

        .team-header {
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .team-header select {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            color: var(--text-primary);
            font-family: 'Exo 2', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            min-width: 150px;
        }

        .color-select {
            display: flex;
            gap: 0.5rem;
        }

        .color-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            filter: brightness(0.5);
        }

        .color-btn:hover {
            transform: scale(1.5);
            filter: brightness(1);
        }

        .color-btn.active {
            border-color: white;
            box-shadow: 0 0 15px currentColor;
            transform: scale(1.5);
            filter: brightness(1);
        }

        .color-btn.red { background: var(--neon-red); }
        .color-btn.green { background: var(--neon-green); }
        .color-btn.blue { background: var(--neon-blue); }
        .color-btn.yellow { background: var(--neon-yellow); }

        .team-body {
            padding: 1rem;
        }

        .player-header {
            display: grid;
            grid-template-columns: 50px 1fr 45px 80px;
            gap: 0.5rem;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.65rem;
        }

        .player-header.with-pack {
            grid-template-columns: 50px 1fr 45px 60px 80px;
        }

        .player-header span {
            font-family: 'Orbitron', monospace;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
        }

        .player-header span:first-child {
            text-align: left;
        }

        .player-header span:nth-child(3),
        .player-header span:nth-child(4),
        .player-header span:nth-child(5) {
            text-align: right;
        }

        .player-row {
            display: grid;
            grid-template-columns: 50px 1fr 45px 80px;
            gap: 0.5rem;
            align-items: center;
            padding: 0.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            margin-bottom: 0.5rem;
        }

        .player-row.with-pack {
            grid-template-columns: 50px 1fr 45px 60px 80px;
        }

        .player-row > *:nth-child(3),
        .player-row > *:nth-child(4),
        .player-row > *:nth-child(5) {
            justify-self: end;
        }

        .player-rank {
            text-align: center;
            font-weight: bold;
            color: var(--neon-yellow);
            font-size: 0.9rem;
        }

        .player-row:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .player-row.benched {
            opacity: 0.5;
        }

        .player-row.ejected {
            opacity: 0.6;
        }

        .player-row.ejected .score-input {
            color: #888 !important;
            border-color: #666 !important;
        }

        .player-row.player-group-highlight {
            background: rgba(0, 212, 255, 0.08);
            border-left: 3px solid var(--neon-blue);
            padding-left: calc(0.5rem - 3px);
        }

        .player-row.player-total-row {
            background: rgba(255, 234, 0, 0.1);
            font-style: italic;
            margin-bottom: 1rem;
        }

        .player-name {
            font-weight: 600;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: all 0.2s ease;
            font-size: 0.9rem;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .player-name:hover {
            background: rgba(255, 234, 0, 0.2);
        }
        /* Sitting-out marker: visual-only strike-through on just the name text. */
        .player-name-text {
            display: inline-block;
            white-space: nowrap;
        }
        .player-name.sitting-out .player-name-text {
            text-decoration: line-through;
            text-decoration-color: var(--neon-red);
            text-decoration-thickness: 2px;
        }

        /* Captain PIN modal — mirrored from armv styles. */
        .pin-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 3000;
            justify-content: center;
            align-items: center;
        }
        .pin-overlay.active { display: flex; }
        .pin-popup {
            background: var(--bg-card);
            border: 2px solid var(--neon-purple);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            width: 320px;
            box-shadow: 0 0 30px rgba(191, 0, 255, 0.3);
        }
        .pin-popup h3 {
            color: var(--neon-purple);
            font-family: 'Orbitron', monospace;
            margin-bottom: 1.5rem;
        }
        .pin-display {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .pin-dot {
            width: 20px; height: 20px;
            border-radius: 50%;
            border: 2px solid var(--border-glow);
            background: transparent;
            transition: background 0.15s;
        }
        .pin-dot.filled {
            background: var(--neon-purple);
            border-color: var(--neon-purple);
        }
        .pin-error {
            color: var(--neon-red);
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            font-weight: 600;
        }
        .pin-numpad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }
        .pin-key {
            padding: 1rem;
            font-size: 1.4rem;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 10px;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.15s;
        }
        .pin-key:active {
            background: var(--neon-purple);
            color: #000;
        }
        .pin-key-cancel { color: var(--neon-red); border-color: rgba(255, 45, 85, 0.3); }
        .pin-key-back { color: var(--neon-yellow); border-color: rgba(255, 234, 0, 0.3); }


        .remove-player-btn {
            margin-left: 0.5rem;
            padding: 0.1rem 0.4rem;
            background: var(--neon-red);
            color: white;
            border: none;
            border-radius: 3px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .remove-player-btn:hover {
            background: #ff5577;
            transform: scale(1.1);
        }

        .sub-badge {
            display: inline-block;
            margin-left: 0.5rem;
            padding: 0.15rem 0.4rem;
            background: var(--neon-purple);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            border-radius: 3px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .checkbox-cell {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1rem;
        }

        .checkbox-cell input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .checkbox-cell input[type="checkbox"].late-check:checked {
            accent-color: var(--neon-red);
        }

        .checkbox-cell input[type="checkbox"].warning-check:checked {
            accent-color: var(--neon-yellow);
        }

        .penalty-cell select {
            width: 100%;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 6px;
            padding: 0.4rem;
            color: var(--neon-red);
            font-family: 'Orbitron', monospace;
            font-size: 0.85rem;
            text-align: center;
            cursor: pointer;
        }

        .pack-number {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 6px;
            padding: 0.4rem 0.5rem;
            color: var(--text-primary);
            font-family: 'Orbitron', monospace;
            font-size: 0.85rem;
            width: 100%;
            text-align: center;
        }

        .pack-number.duplicate {
            background: rgba(255, 45, 85, 0.3);
            border-color: var(--neon-red);
            box-shadow: 0 0 20px rgba(255, 45, 85, 0.8);
        }

        .score-input {
            background: var(--bg-input);
            border: 2px solid var(--border-glow);
            border-radius: 8px;
            padding: 0.5rem;
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
            text-align: right;
            width: 100%;
            cursor: pointer;
        }

        .score-input.team-red { color: var(--neon-red); border-color: var(--neon-red); }
        .score-input.team-green { color: var(--neon-green); border-color: var(--neon-green); }
        .score-input.team-blue { color: var(--neon-blue); border-color: var(--neon-blue); }
        .score-input.team-yellow { color: var(--neon-yellow); border-color: var(--neon-yellow); }

        .add-player-btn {
            background: var(--bg-input);
            border: 2px dashed var(--border-glow);
            border-radius: 8px;
            padding: 0.75rem;
            color: var(--neon-blue);
            font-family: 'Exo 2', sans-serif;
            font-size: 0.9rem;
            cursor: pointer;
            margin-top: 0.5rem;
            width: 100%;
            transition: all 0.3s ease;
        }

        .add-player-btn:hover {
            background: rgba(0, 212, 255, 0.1);
            border-color: var(--neon-blue);
        }

        .team-footer {
            padding: 1rem;
            background: rgba(0, 0, 0, 0.3);
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 1rem;
            align-items: center;
        }

        .team-total {
            font-family: 'Orbitron', monospace;
        }

        .team-total label {
            font-size: 0.7rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            display: block;
            margin-bottom: 0.25rem;
        }

        .team-total .value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--neon-green);
            text-shadow: 0 0 15px var(--neon-green);
        }

        .penalty-input, .place-select, .eliminated-check {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .penalty-input label, .place-select label, .eliminated-check label {
            font-size: 0.7rem;
            color: var(--text-secondary);
            text-transform: uppercase;
        }

        .penalty-input input {
            width: 60px;
            background: var(--bg-input);
            border: 1px solid var(--neon-red);
            border-radius: 6px;
            padding: 0.4rem;
            color: var(--neon-red);
            font-family: 'Orbitron', monospace;
            text-align: center;
        }

        .penalty-input input.mismatch {
            background: rgba(255, 234, 0, 0.3);
            border-color: var(--neon-yellow);
            box-shadow: 0 0 20px rgba(255, 234, 0, 0.8);
        }

        .team-card.first-place-glow {
            box-shadow: 0 0 40px rgba(0, 212, 255, 0.8);
            animation: glow-blue 2s infinite;
        }

        @keyframes glow-blue {
            0%, 100% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.8); }
            50% { box-shadow: 0 0 60px rgba(0, 212, 255, 1); }
        }

        .place-select select {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 6px;
            padding: 0.4rem;
            color: var(--text-primary);
            font-family: 'Orbitron', monospace;
        }

        .place-select.first-place-indicator {
            background: rgba(0, 212, 255, 0.3);
            border-radius: 8px;
            padding: 0.5rem;
            box-shadow: 0 0 25px rgba(0, 212, 255, 0.8);
        }

        .eliminated-check input[type="checkbox"] {
            width: 24px;
            height: 24px;
            cursor: pointer;
            accent-color: var(--neon-red);
        }

        /* Marshal Section */
        .marshal-section {
            background: var(--bg-card);
            border: 1px solid var(--neon-purple);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .marshal-section h3 {
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem;
            color: var(--neon-purple);
            margin-bottom: 0.75rem;
        }

        .marshal-select {
            background: var(--bg-input);
            border: 1px dashed var(--neon-purple);
            border-radius: 20px;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            color: var(--neon-purple);
            font-family: 'Exo 2', sans-serif;
            cursor: pointer;
        }

        /* Comment Section */
        .comment-section {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .comment-section label {
            display: block;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

        .comment-section textarea {
            width: 100%;
            min-height: 80px;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 0.75rem;
            color: var(--text-primary);
            font-family: 'Exo 2', sans-serif;
            font-size: 0.9rem;
            resize: vertical;
        }

        /* Number Pad */
        .number-pad-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .number-pad-overlay.active {
            display: flex;
        }

        .number-pad {
            background: var(--bg-card);
            border: 2px solid var(--neon-blue);
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 0 50px rgba(0, 212, 255, 0.5);
        }

        .number-pad-player-name {
            background: var(--bg-input);
            border: 2px solid var(--neon-purple);
            border-radius: 8px;
            padding: 0.75rem;
            font-family: 'Exo 2', sans-serif;
            font-size: 1.2rem;
            text-align: center;
            color: var(--neon-purple);
            margin-bottom: 1rem;
            min-width: 250px;
        }

        .number-pad-display {
            background: var(--bg-input);
            border: 2px solid var(--border-glow);
            border-radius: 8px;
            padding: 1rem;
            font-family: 'Orbitron', monospace;
            font-size: 2rem;
            text-align: right;
            color: var(--neon-green);
            margin-bottom: 1rem;
            min-width: 250px;
            min-height: 60px;
        }

        .number-pad-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .number-pad-nav {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
        }

        .number-pad-nav-btn {
            background: var(--bg-input);
            border: 2px solid var(--neon-purple);
            border-radius: 8px;
            padding: 1rem;
            font-family: 'Exo 2', sans-serif;
            font-size: 1rem;
            color: var(--neon-purple);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .number-pad-nav-btn:hover {
            background: rgba(191, 0, 255, 0.2);
            transform: scale(1.05);
        }

        .number-pad-btn {
            background: var(--bg-input);
            border: 2px solid var(--border-glow);
            border-radius: 8px;
            padding: 1.5rem;
            font-family: 'Orbitron', monospace;
            font-size: 1.5rem;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .number-pad-btn:hover {
            background: rgba(0, 212, 255, 0.2);
            border-color: var(--neon-blue);
            transform: scale(1.05);
        }

        .number-pad-btn.clear {
            background: var(--neon-red);
            color: white;
        }

        .number-pad-btn.ok {
            background: var(--neon-green);
            color: white;
            grid-column: span 2;
        }

        .number-pad-btn.question {
            background: var(--neon-yellow);
            color: black;
        }

        /* Player Details Popup */
        .player-details-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .player-details-overlay.active {
            display: flex;
        }

        .player-details-popup {
            background: var(--bg-card);
            border: 2px solid var(--neon-blue);
            border-radius: 16px;
            padding: 2rem;
            padding-right: 5rem; /* Make room for vertical buttons */
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
            position: relative;
        }

        .player-details-popup h2 {
            color: var(--neon-blue);
            font-family: 'Orbitron', monospace;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .player-details-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .player-details-form .form-field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .player-details-form label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 600;
        }

        .player-details-form input,
        .player-details-form select,
        .player-details-form textarea {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 0.75rem;
            color: var(--text-primary);
            font-size: 1rem;
            font-family: inherit;
        }

        .player-details-form input:focus,
        .player-details-form select:focus,
        .player-details-form textarea:focus {
            outline: none;
            border-color: var(--neon-blue);
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
        }

        .player-details-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 1rem;
        }

        .player-details-actions .btn {
            padding: 0.75rem 1.5rem;
            white-space: nowrap;
        }

        .player-details-actions .btn:hover {
            /* Normal hover effect */
        }

        /* Player Game Scores Table */
        .player-game-scores-table {
            max-height: 400px;
            overflow-y: auto;
            margin: 1rem 0;
        }

        .player-game-scores-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .player-game-scores-table th {
            background: var(--bg-dark);
            color: var(--neon-blue);
            padding: 0.75rem;
            text-align: left;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .player-game-scores-table td {
            padding: 0.75rem;
            border-bottom: 1px solid var(--border-glow);
        }

        .player-game-scores-table tr:hover {
            background: rgba(0, 212, 255, 0.1);
        }

        /* Rankings Panel */
        .rankings-panel {
            display: none;
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 16px;
            padding: 1.5rem;
        }

        .rankings-panel.active {
            display: block;
        }

        .rankings-table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
            display: block;
        }

        .rankings-table table {
            width: 100%;
        }

        .rankings-table th {
            background: var(--bg-input);
            padding: 0.75rem;
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            border: 1px solid var(--border-glow);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .rankings-table td {
            padding: 0.75rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .rankings-table tr:hover {
            background: rgba(0, 212, 255, 0.1);
        }

        /* Sticky first two columns for rankings table (Rank and Team) */
        .rankings-table th:first-child,
        .rankings-table td:first-child {
            position: sticky;
            left: 0;
            background: var(--bg-input);
            z-index: 12;
        }
        
        .rankings-table th:nth-child(2),
        .rankings-table td:nth-child(2) {
            position: sticky;
            left: 60px; /* Approximate width of Rank column */
            background: var(--bg-card);
            z-index: 11;
        }
        
        .rankings-table th:nth-child(2) {
            background: var(--bg-input);
        }
        
        .rankings-table td:first-child {
            background: var(--bg-card);
        }

        .h2h-results {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1.5rem;
        }

        .h2h-summary {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .h2h-stat {
            text-align: center;
        }

        .h2h-stat .h2h-count {
            font-family: 'Orbitron', monospace;
            font-size: 2rem;
            font-weight: 700;
        }

        .h2h-stat .h2h-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        .h2h-section-label {
            font-family: 'Orbitron', monospace;
            font-size: 0.85rem;
            color: var(--neon-purple);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin: 0.25rem 0 0.5rem;
        }

        .h2h-section-hint {
            color: var(--text-secondary);
            font-family: 'Exo 2', sans-serif;
            font-size: 0.75rem;
            text-transform: none;
            letter-spacing: 0;
            margin-left: 0.4rem;
        }

        .h2h-divider {
            border-top: 1px solid var(--border-glow);
            margin: 1.25rem 0 0.75rem;
        }

        .h2h-fair-table {
            width: 100%;
            margin-top: 0.75rem;
            border-collapse: collapse;
            font-size: 0.9rem;
        }

        .h2h-fair-table th,
        .h2h-fair-table td {
            padding: 0.4rem 0.6rem;
            text-align: left;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .h2h-fair-table th {
            color: var(--text-secondary);
            font-family: 'Orbitron', monospace;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .h2h-fair-table .h2h-frac {
            font-family: 'Orbitron', monospace;
            color: var(--text-primary);
        }

        .h2h-fair-table .h2h-fair-avg td {
            border-top: 2px solid var(--border-glow);
            border-bottom: none;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
        }

        .h2h-game-list {
            max-height: 300px;
            overflow-y: auto;
            margin-top: 1rem;
        }

        .h2h-game-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.4rem 0.75rem;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-size: 0.9rem;
        }

        .h2h-game-row:last-child {
            border-bottom: none;
        }

        .ap-value {
            color: var(--neon-green);
            font-family: 'Orbitron', monospace;
            font-weight: 700;
        }

        .penalty-link {
            color: var(--neon-red);
            cursor: pointer;
            text-decoration: underline;
            transition: all 0.2s ease;
        }

        .penalty-link:hover {
            color: var(--neon-yellow);
            text-shadow: 0 0 10px var(--neon-yellow);
        }

        /* Team Management */
        .team-management {
            display: none;
        }

        .team-management.active {
            display: block;
        }

        .teams-grid {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            overflow-x: auto;
        }

        .teams-grid table {
            width: 100%;
            border-collapse: collapse;
        }

        .teams-grid th {
            background: var(--bg-input);
            padding: 0.75rem;
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            border: 1px solid var(--border-glow);
        }

        .teams-grid td {
            padding: 0.75rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .teams-grid .captain {
            background: rgba(255, 234, 0, 0.2);
            font-weight: 700;
            color: var(--neon-yellow);
        }

        .teams-grid .duplicate-player {
            background: rgba(255, 45, 85, 0.3) !important;
            border: 2px solid var(--neon-red) !important;
            color: var(--neon-red) !important;
        }

        /* Team Edit Modal */
        .team-edit-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        .team-edit-modal.active {
            display: flex;
        }

        .team-edit-dialog {
            background: var(--bg-card);
            border: 2px solid var(--neon-blue);
            border-radius: 12px;
            padding: 2rem;
            min-width: 400px;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }

        .team-edit-dialog h3 {
            font-family: 'Orbitron', monospace;
            color: var(--neon-blue);
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
        }

        .team-edit-dialog label {
            display: block;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .team-edit-dialog input {
            width: 100%;
            padding: 0.75rem;
            background: var(--bg-input);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }

        .team-edit-dialog input:focus {
            outline: none;
            border-color: var(--neon-blue);
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
        }

        .team-edit-buttons {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .team-edit-dialog button {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: 8px;
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .team-edit-dialog .btn-save {
            background: var(--neon-green);
            color: var(--bg-dark);
            font-weight: 700;
        }

        .team-edit-dialog .btn-save:hover {
            box-shadow: 0 0 15px var(--neon-green);
            transform: translateY(-2px);
        }

        .team-edit-dialog .btn-cancel {
            background: var(--bg-input);
            color: var(--text-primary);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .team-edit-dialog .btn-cancel:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .team-edit-dialog .btn-delete {
            width: 100%;
            background: rgba(255, 45, 85, 0.2);
            color: var(--neon-red);
            border: 1px solid var(--neon-red);
            margin-top: 1rem;
        }

        .team-edit-dialog .btn-delete:hover {
            background: rgba(255, 45, 85, 0.3);
            box-shadow: 0 0 15px rgba(255, 45, 85, 0.5);
        }

        /* Shirts Modal */
        .shirt-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        .shirt-modal.active {
            display: flex;
        }

        .shirt-modal-dialog {
            background: var(--bg-card);
            border: 2px solid var(--neon-blue);
            border-radius: 12px;
            padding: 2rem;
            max-width: 90vw;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
            min-width: 350px;
        }

        .shirt-modal-dialog h3 {
            font-family: 'Orbitron', monospace;
            color: var(--neon-blue);
            margin-bottom: 1rem;
            font-size: 1.3rem;
            text-align: center;
        }



        .shirt-grid table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .shirt-grid th {
            background: var(--bg-input);
            padding: 0.5rem 1rem;
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.8rem;
            color: var(--neon-blue);
            border-bottom: 1px solid var(--border-glow);
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .shirt-grid td {
            padding: 0.5rem 1rem;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            color: var(--text-primary);
        }

        .shirt-grid td:first-child {
            font-weight: 600;
            color: var(--neon-yellow);
            text-align: left;
        }

        .shirt-grid tr:hover td {
            background: rgba(0, 212, 255, 0.05);
        }

        .shirt-modal-footer {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 1.5rem;
        }

        /* Players Panel */
        .players-panel {
            display: none;
        }

        .players-panel.active {
            display: block;
        }

        .info-panel {
            display: none;
        }

        .info-panel.active {
            display: block;
        }

        /* schedule and other info sub-views are inside .info-panel now */

        .public-info-content {
            line-height: 1.7;
            padding: 1rem;
        }

        .public-info-content a {
            color: var(--neon-blue);
            text-decoration: underline;
        }

        .public-info-content h3,
        .public-info-content h4 {
            color: var(--neon-blue);
        }

        /* Pay Info Grid */
        #payInfoTable {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        #payInfoTable thead {
            position: sticky;
            top: 0;
            z-index: 2;
        }
        #payInfoTable th {
            background: #0d0d1a;
            padding: 0.75rem;
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            border: 1px solid var(--border-glow);
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
            position: sticky;
            top: 0;
            z-index: 2;
            box-shadow: 0 -30px 0 0 #0d0d1a, 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        #payInfoTable th:hover {
            background: rgba(0, 212, 255, 0.15);
            color: var(--neon-blue);
        }
        #payInfoTable td {
            padding: 0.75rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        #payInfoTable tbody tr:nth-child(even) {
            background: rgba(50, 50, 60, 0.5);
        }
        .pay-status-paid {
            color: var(--neon-green);
            font-weight: 600;
        }
        .pay-status-unpaid {
            color: var(--neon-red);
            font-weight: 600;
        }

        .players-grid {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 16px;
            padding: 1.5rem;
            overflow-x: auto;
        }

        /* Frozen header styles - only applied when .frozen-headers class is added */
        .players-grid.frozen-headers {
            max-height: 600px;
            overflow-y: scroll;
            position: relative;
            border-radius: 0 0 16px 16px;
            padding-top: 0;
        }

        /* Top scrollbar for players frozen header mode */
        .players-top-scrollbar {
            display: none;
            overflow-x: auto;
            overflow-y: hidden;
            height: 18px;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-bottom: none;
            border-radius: 16px 16px 0 0;
        }

        .players-top-scrollbar.visible {
            display: block;
        }

        .players-top-scrollbar-inner {
            height: 1px;
        }

        .players-grid.frozen-headers th {
            position: sticky;
            top: 0;
            background: #0d0d1a !important;
            z-index: 2;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .players-grid table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .players-grid th {
            background: var(--bg-input);
            padding: 0.75rem;
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            border: 1px solid var(--border-glow);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .players-grid th:hover {
            background: rgba(0, 212, 255, 0.2);
        }

        .players-grid td {
            padding: 0.75rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .players-grid td:nth-child(2) {
            text-align: left;
            color: var(--neon-green);
            font-weight: 600;
        }

        /* Sticky Player column only for players table */
        .players-grid th:nth-child(2),
        .players-grid td:nth-child(2) {
            position: sticky;
            left: 0;
            z-index: 3;
            background: #0f0f1a;
        }

        .players-grid th:nth-child(2) {
            z-index: 4;
            background: #0d0d1a;
        }

        /* Alternating row colors for players table */
        .players-grid tbody tr:nth-child(even) {
            background: rgba(50, 50, 60, 0.5);
        }

        .players-grid tbody tr:nth-child(even) td:nth-child(2) {
            background: #1a1a2a;
        }

        /* Make player names clickable */
        .players-grid td:nth-child(2) {
            cursor: pointer;
        }

        .players-grid td:nth-child(2):hover {
            color: var(--neon-blue);
            text-decoration: underline;
        }

        /* Green glow for players who played > 50% of max games */
        .player-games-high {
            color: var(--neon-green);
            text-shadow: 0 0 8px rgba(0, 255, 100, 0.6);
        }

        /* Settings Panel */
        .settings-panel {
            display: none;
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 16px;
            padding: 2rem;
        }

        .settings-panel.active {
            display: block;
        }

        .settings-title {
            font-family: 'Orbitron', monospace;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--neon-purple);
        }

        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .settings-card {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .settings-card:hover {
            border-color: var(--neon-blue);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
        }

        .settings-card h3 {
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
            margin-bottom: 0.5rem;
            color: var(--neon-blue);
        }

        .settings-card p {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .system-config {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .system-config h3 {
            font-family: 'Orbitron', monospace;
            color: var(--neon-blue);
            margin-bottom: 1rem;
        }

        .config-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }

        .config-field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .config-field label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
        }

        .config-field input,
        .config-field select {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 6px;
            padding: 0.5rem;
            color: var(--text-primary);
            font-family: 'Exo 2', sans-serif;
        }

        .checkbox-field {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .config-field input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .team-editor {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 16px;
            padding: 2rem;
        }

        .team-editor h3 {
            font-family: 'Orbitron', monospace;
            margin-bottom: 1rem;
            color: var(--neon-purple);
        }

        .team-editor textarea {
            width: 100%;
            height: 200px;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 1rem;
            color: var(--text-primary);
            font-family: 'Exo 2', sans-serif;
            font-size: 0.9rem;
            resize: vertical;
        }

        .btn-row {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-family: 'Exo 2', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            color: white;
        }

        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(0, 212, 255, 0.5);
        }

        .btn-secondary {
            background: var(--bg-input);
            color: var(--text-primary);
            border: 1px solid var(--border-glow);
        }

        .btn-danger {
            background: linear-gradient(135deg, var(--neon-red), #ff6b6b);
            color: white;
        }

        /* Hidden Inputs */
        .hidden-input {
            display: none;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .teams-container {
                grid-template-columns: 1fr;
            }

            .player-header,
            .player-row {
                font-size: 0.75rem;
            }

            .number-pad-display {
                font-size: 1.5rem;
            }

            .number-pad-btn {
                padding: 1rem;
                font-size: 1.2rem;
            }
        }

        /* Kanban Board Styles */
        .kanban-container {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            padding: 1rem;
            min-height: 600px;
        }

        .kanban-column {
            flex: 0 0 210px;
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
        }

        .kanban-column-header {
            padding: 1rem;
            background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-blue) 100%);
            border-radius: 12px 12px 0 0;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            font-size: 1.1rem;
            text-align: center;
            cursor: pointer;
        }

        .kanban-column-body {
            padding: 0.5rem;
            min-height: 100px;
        }

        .kanban-player-card {
            background: var(--bg-input);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 8px;
            padding: 0.75rem;
            margin-bottom: 0.5rem;
            cursor: grab;
            transition: all 0.2s ease;
        }

        .kanban-player-card:hover {
            border-color: var(--neon-blue);
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
            transform: translateY(-2px);
        }

        .kanban-player-card.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .kanban-player-card.captain {
            border-left: 4px solid var(--neon-yellow);
            background: linear-gradient(90deg, rgba(255, 234, 0, 0.1) 0%, var(--bg-input) 10%);
        }

        .kanban-player-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .kanban-player-real-name {
            font-size: 0.85rem;
            color: var(--neon-blue);
        }

        .kanban-column-body.drag-over {
            background: rgba(0, 212, 255, 0.1);
            border: 2px dashed var(--neon-blue);
        }

        .kanban-empty-state {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--text-secondary);
            font-style: italic;
        }

        .kanban-player-card.drop-above {
            border-top: 3px solid var(--neon-blue);
            margin-top: -1px;
        }

        .kanban-player-card.drop-below {
            border-bottom: 3px solid var(--neon-blue);
            margin-bottom: -1px;
        }

        /* Details View Styles */
        .details-scroll-wrapper {
            overflow-x: auto;
            overflow-y: visible;
            max-width: 100%;
            border: 1px solid var(--border-glow);
            border-radius: 8px;
        }

        .details-scroll-wrapper.frozen-headers {
            max-height: 600px;
            overflow-y: auto;
            border-radius: 0 0 8px 8px;
        }

        /* Top scrollbar for frozen header mode */
        .details-top-scrollbar {
            display: none;
            overflow-x: auto;
            overflow-y: hidden;
            height: 18px;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
        }

        .details-top-scrollbar.visible {
            display: block;
        }

        .details-top-scrollbar-inner {
            height: 1px;
        }

        .details-table-container {
            min-width: max-content;
        }

        .details-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        .details-table th,
        .details-table td {
            padding: 0.4rem 0.5rem;
            border: 1px solid var(--border-glow);
            white-space: nowrap;
        }

        .details-table th {
            background: #1a1a2e;
            color: var(--neon-blue);
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 2;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .details-table th:first-child,
        .details-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 3;
        }

        .details-table th:first-child {
            z-index: 4;
            background: #1a1a2e;
        }

        .details-table td:first-child {
            font-weight: 600;
            color: var(--neon-green);
            background: #0f0f1a;
            border-right: 2px solid var(--neon-blue);
        }

        .details-table tbody tr:hover {
            background: rgba(0, 212, 255, 0.1);
        }

        .details-table input[type="text"],
        .details-table input[type="tel"],
        .details-table input[type="email"],
        .details-table select {
            width: 100%;
            min-width: 80px;
            padding: 0.3rem 0.4rem;
            background: var(--bg-input);
            border: 1px solid transparent;
            border-radius: 4px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.85rem;
        }

        .details-table input[type="text"]:focus,
        .details-table input[type="tel"]:focus,
        .details-table input[type="email"]:focus,
        .details-table select:focus {
            border-color: var(--neon-blue);
            outline: none;
        }

        .details-table input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .details-table .input-wide {
            min-width: 120px;
        }

        .details-table .input-narrow {
            min-width: 60px;
        }

        .details-table .saving {
            opacity: 0.6;
        }

        .details-table .save-error {
            border-color: var(--neon-red) !important;
        }

        .details-table .save-success {
            border-color: var(--neon-green) !important;
        }

        /* Game Photos - Camera Button */
        .camera-btn {
            width: 44px;
            height: 44px;
            background: var(--bg-card);
            border: 2px solid var(--neon-purple);
            border-radius: 50%;
            color: var(--neon-purple);
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 1rem;
        }

        .camera-btn:hover {
            background: rgba(191, 0, 255, 0.2);
            box-shadow: 0 0 15px var(--neon-purple);
            transform: scale(1.1);
        }

        /* Game Notify Button */
        .notify-btn {
            width: 44px;
            height: 44px;
            background: var(--bg-card);
            border: 2px solid var(--neon-yellow);
            border-radius: 50%;
            color: var(--neon-yellow);
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 1rem;
        }

        .notify-btn:hover {
            background: rgba(255, 234, 0, 0.2);
            box-shadow: 0 0 15px var(--neon-yellow);
            transform: scale(1.1);
        }

        /* Notify Confirmation Modal */
        .notify-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .notify-modal.visible {
            display: flex;
        }

        .notify-modal-content {
            background: var(--bg-card);
            border: 2px solid var(--neon-yellow);
            border-radius: 16px;
            max-width: 500px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 0 30px rgba(255, 234, 0, 0.3);
        }

        .notify-modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-glow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notify-modal-header h3 {
            font-family: 'Orbitron', monospace;
            color: var(--neon-yellow);
            margin: 0;
            font-size: 1.2rem;
        }

        .notify-modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
        }

        .notify-modal-body {
            padding: 1.5rem;
        }

        .notify-message-preview {
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            font-style: italic;
            color: var(--text-primary);
        }

        .notify-recipients-title {
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem;
            color: var(--neon-blue);
            margin-bottom: 0.75rem;
        }

        .notify-recipient-list {
            max-height: 250px;
            overflow-y: auto;
        }

        .notify-recipient {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            border-bottom: 1px solid var(--border-glow);
        }

        .notify-recipient:last-child {
            border-bottom: none;
        }

        .notify-recipient-name {
            font-weight: 600;
            color: var(--text-primary);
        }

        .notify-recipient-team {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .notify-recipient-method {
            display: flex;
            gap: 0.5rem;
        }

        .notify-method-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .notify-method-badge.email {
            background: rgba(0, 212, 255, 0.2);
            color: var(--neon-blue);
        }

        .notify-method-badge.sms {
            background: rgba(57, 255, 20, 0.2);
            color: var(--neon-green);
        }

        .notify-no-recipients {
            text-align: center;
            color: var(--text-secondary);
            padding: 2rem;
            font-style: italic;
        }

        .notify-modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-glow);
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }

        .notify-btn-cancel {
            padding: 0.75rem 1.5rem;
            background: var(--bg-input);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: 'Exo 2', sans-serif;
            cursor: pointer;
        }

        .notify-btn-send {
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, var(--neon-yellow), var(--neon-green));
            border: none;
            border-radius: 8px;
            color: #000;
            font-family: 'Orbitron', monospace;
            font-weight: 600;
            cursor: pointer;
            opacity: 0.5;
        }

        .notify-btn-send:disabled {
            cursor: not-allowed;
        }

        .game-nav-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        /* Photo Gallery Section */
        .photo-gallery-section {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1rem;
            margin-top: 1rem;
        }

        .photo-gallery-section label {
            display: block;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            margin-bottom: 0.75rem;
        }

        .photo-thumbnails {
            display: flex;
            gap: 0.75rem;
            overflow-x: auto;
            padding: 0.5rem 0;
            scrollbar-width: thin;
            scrollbar-color: var(--neon-purple) var(--bg-dark);
        }

        .photo-thumbnails::-webkit-scrollbar {
            height: 6px;
        }

        .photo-thumbnails::-webkit-scrollbar-track {
            background: var(--bg-dark);
            border-radius: 3px;
        }

        .photo-thumbnails::-webkit-scrollbar-thumb {
            background: var(--neon-purple);
            border-radius: 3px;
        }

        .photo-thumbnail {
            flex-shrink: 0;
            width: 100px;
            height: 75px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid var(--border-glow);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .photo-thumbnail:hover {
            border-color: var(--neon-purple);
            box-shadow: 0 0 10px var(--neon-purple);
            transform: scale(1.05);
        }

        .photo-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .photo-loading {
            width: 100px;
            height: 75px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-input);
            border-radius: 8px;
            border: 2px dashed var(--border-glow);
            color: var(--text-secondary);
            font-size: 0.75rem;
        }

        .no-photos {
            color: var(--text-secondary);
            font-style: italic;
            font-size: 0.85rem;
        }

        /* Photo Lightbox */
        .photo-lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .photo-lightbox.visible {
            display: flex;
        }

        .lightbox-header {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            gap: 1rem;
            z-index: 10001;
        }

        .lightbox-btn {
            width: 50px;
            height: 50px;
            background: var(--bg-card);
            border: 2px solid var(--border-glow);
            border-radius: 50%;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-btn:hover {
            background: rgba(191, 0, 255, 0.3);
            border-color: var(--neon-purple);
        }

        .lightbox-btn.delete-btn:hover {
            background: rgba(255, 45, 85, 0.3);
            border-color: var(--neon-red);
            color: var(--neon-red);
        }

        .lightbox-image {
            max-width: 90vw;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 80px;
            background: var(--bg-card);
            border: 2px solid var(--border-glow);
            color: var(--text-primary);
            font-size: 2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .lightbox-nav:hover {
            background: rgba(0, 212, 255, 0.2);
            border-color: var(--neon-blue);
        }

        .lightbox-nav.prev {
            left: 1rem;
            border-radius: 8px 0 0 8px;
        }

        .lightbox-nav.next {
            right: 1rem;
            border-radius: 0 8px 8px 0;
        }

        .lightbox-counter {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
            color: var(--text-secondary);
        }

        /* Camera Capture Modal */
        .camera-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .camera-modal.visible {
            display: flex;
        }

        .camera-preview {
            max-width: 90vw;
            max-height: 70vh;
            border-radius: 12px;
            border: 3px solid var(--neon-purple);
        }

        .camera-controls {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
        }

        .capture-btn {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--neon-purple), var(--neon-red));
            border: 4px solid white;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 30px var(--neon-purple);
        }

        .capture-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0 50px var(--neon-purple);
        }

        .camera-cancel-btn {
            padding: 1rem 2rem;
            background: var(--bg-card);
            border: 2px solid var(--neon-red);
            border-radius: 8px;
            color: var(--neon-red);
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .camera-cancel-btn:hover {
            background: rgba(255, 45, 85, 0.2);
        }

        .camera-header {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 10001;
        }

        .camera-close-btn {
            width: 50px;
            height: 50px;
            background: var(--bg-card);
            border: 2px solid var(--border-glow);
            border-radius: 50%;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .camera-close-btn:hover {
            background: rgba(255, 45, 85, 0.3);
            border-color: var(--neon-red);
        }

        /* Hidden file input for camera */
        .camera-input {
            display: none;
        }

        /* Public Announcement Banner */
        .announcement-banner {
            background: linear-gradient(135deg, #ffea00, #ffd700);
            color: #000;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 0.95rem;
            position: relative;
        }

        .announcement-banner .banner-message {
            flex: 1;
            text-align: center;
        }

        .announcement-banner .banner-close {
            background: none;
            border: none;
            color: #000;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0 0.3rem;
            opacity: 0.6;
        }

        .announcement-banner .banner-close:hover {
            opacity: 1;
        }

        /* Announcement History Popup */
        .ann-history-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        .ann-history-overlay.active {
            display: flex;
        }

        .ann-history-popup {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1.5rem;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .ann-history-popup h3 {
            font-family: 'Orbitron', monospace;
            color: var(--neon-yellow);
            margin-bottom: 1rem;
        }

        .ann-history-item {
            padding: 0.75rem;
            background: var(--bg-input);
            border-radius: 8px;
            margin-bottom: 0.5rem;
            border-left: 3px solid var(--neon-yellow);
        }

        .ann-history-item .ann-date {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.25rem;
        }

        .ann-history-item .ann-msg {
            color: var(--text-primary);
        }

        .ann-tab-btn {
            background: none;
            border: none;
            color: var(--neon-yellow);
            font-size: clamp(0.6rem, 1.8vw, 0.85rem);
            font-family: 'Exo 2', sans-serif;
            font-weight: 600;
            cursor: pointer;
            padding: 0.5rem 0.4rem;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .ann-tab-btn:hover {
            text-shadow: 0 0 8px var(--neon-yellow);
        }

        .ann-count-badge {
            background: var(--neon-yellow);
            color: #000;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.1rem 0.4rem;
            border-radius: 10px;
            margin-left: 0.3rem;
        }

        .ann-history-item .ann-subject {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--neon-yellow);
            margin-bottom: 0.25rem;
        }
        /* ==================== PUBLIC HOTEL VIEW ==================== */
        .pub-hotel-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
        }
        .pub-hotel-room {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 10px;
            overflow: hidden;
        }
        .pub-hotel-room-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.4rem 0.6rem;
            border-bottom: 1px solid var(--border-glow);
            font-family: 'Orbitron', monospace;
            font-size: 0.75rem;
            font-weight: 700;
            gap: 0.3rem;
        }
        .pub-hotel-room.paid .pub-hotel-room-header {
            background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 212, 255, 0.08));
            color: #00ff88;
        }
        .pub-hotel-room.unpaid .pub-hotel-room-header {
            background: linear-gradient(135deg, rgba(255, 68, 68, 0.15), rgba(255, 68, 68, 0.05));
            color: #ff4444;
        }
        .pub-hotel-status {
            font-size: 0.6rem;
            font-family: 'Exo 2', sans-serif;
            font-weight: 600;
            padding: 1px 6px;
            border-radius: 4px;
        }
        .pub-hotel-room.paid .pub-hotel-status {
            background: rgba(0, 255, 136, 0.2);
            color: #00ff88;
        }
        .pub-hotel-room.unpaid .pub-hotel-status {
            background: rgba(255, 68, 68, 0.2);
            color: #ff4444;
        }
        .pub-hotel-bed-type {
            font-size: 0.55rem;
            font-family: 'Exo 2', sans-serif;
            font-weight: 600;
            padding: 1px 5px;
            border-radius: 3px;
            text-transform: uppercase;
        }
        .pub-hotel-bed-type.double {
            background: rgba(0, 212, 255, 0.15);
            color: #00d4ff;
        }
        .pub-hotel-bed-type.single {
            background: rgba(255, 165, 0, 0.15);
            color: #ffa500;
        }
        .pub-hotel-room-body {
            padding: 0.4rem;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            min-height: 30px;
        }
        .pub-hotel-person {
            padding: 0.25rem 0.5rem;
            background: var(--bg-input);
            border-radius: 5px;
            font-size: 0.8rem;
            border-left: 3px solid var(--neon-blue);
        }
        .pub-hotel-person.placeholder {
            border-left-color: #ffdd00;
            font-style: italic;
        }
        .pub-hotel-person-team {
            color: var(--text-secondary);
            font-size: 0.7rem;
        }
        .pub-hotel-note {
            padding: 0.3rem 0.5rem;
            font-size: 0.7rem;
            color: #ffdd57;
            font-style: italic;
            border-top: 1px solid var(--border-glow);
            margin-top: 0.2rem;
        }
        .pub-hotel-night-btns {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .pub-hotel-night-btns .btn {
            flex: 1;
        }
        /* ===== Mobile Responsive ===== */
        @media (max-width: 768px) {
            /* Header & Logo */
            .header-top {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            .logo {
                font-size: 1.1rem;
            }
            .zoom-controls {
                gap: 0.2rem;
            }
            .zoom-controls .btn {
                padding: 0.3rem 0.6rem;
                font-size: 0.75rem;
            }
            .tournament-info {
                flex-wrap: wrap;
                gap: 0.4rem 1rem;
                font-size: 0.75rem;
            }

            /* Tab Navigation */
            .tab-btn {
                padding: 0.6rem 0.3rem;
                letter-spacing: 0;
            }

            /* Systems Row */
            .systems-row.expanded {
                max-height: 150px;
            }
            .system-btn {
                padding: 0.35rem 0.5rem;
                letter-spacing: 0;
            }

            /* Overview Cards */
            .overview-header {
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }

            /* Teams Container (card grid) */
            .teams-container {
                grid-template-columns: 1fr;
            }

            /* Kanban Columns */
            .kanban-column {
                flex: 0 0 80vw;
            }

            /* Player Rankings */
            .player-header,
            .player-row {
                grid-template-columns: 35px 1fr 35px 60px;
                gap: 0.3rem;
                padding: 0.5rem;
                font-size: 0.7rem;
            }
            .player-header.with-pack,
            .player-row.with-pack {
                grid-template-columns: 35px 1fr 35px 45px 60px;
            }

            /* Players Stats Table */
            .players-grid {
                padding: 0.5rem;
                font-size: 0.7rem;
            }
            .players-grid table {
                font-size: 0.7rem;
            }
            .players-grid th,
            .players-grid td {
                padding: 0.3rem 0.4rem;
            }

            /* Players Tab Mode Buttons */
            .players-panel > div:first-of-type .btn {
                padding: 0.5rem 0.3rem;
                font-size: 0.75rem;
            }

            /* Payment Info Table */
            #payInfoGridView table {
                font-size: 0.7rem;
            }
            #payInfoGridView th,
            #payInfoGridView td {
                padding: 0.3rem 0.4rem;
                white-space: nowrap;
            }

            /* Hotel Grid */
            .pub-hotel-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 0.5rem;
            }
            .pub-hotel-room {
                padding: 0;
            }
            .pub-hotel-room-header {
                padding: 0.4rem 0.5rem;
                font-size: 0.75rem;
            }
            .pub-hotel-player {
                padding: 0.25rem 0.5rem;
                font-size: 0.7rem;
            }
            .pub-hotel-note {
                padding: 0.2rem 0.4rem;
                font-size: 0.65rem;
            }

            /* Hotel Night Buttons */
            .pub-hotel-night-btns .btn {
                padding: 0.5rem 0.3rem;
                font-size: 0.8rem;
            }

            /* Modals */
            .team-edit-dialog {
                min-width: unset;
                width: 95%;
                padding: 1.25rem;
            }
            .player-details-popup {
                padding: 1.25rem;
                padding-right: 3.5rem;
                width: 95%;
                min-width: unset;
            }

            /* Settings title */
            .settings-title {
                font-size: 1.1rem;
            }

            /* Bottom bar */
            #playersBottomBar {
                flex-wrap: wrap;
            }

            /* Start Page */
            .start-page-content {
                margin-top: 2rem;
                padding: 0 1rem;
            }
            .welcome-text {
                font-size: 1.3rem;
            }
            .tournament-name-bubble {
                padding: 1.5rem 1.5rem;
                border-radius: 14px;
            }
            .tournament-name-text {
                font-size: clamp(1.5rem, 8vw, 4rem);
                letter-spacing: 0.1rem;
                word-break: break-word;
            }
            .tournament-subtitle {
                font-size: 1rem;
                margin-bottom: 2rem;
            }
            .start-btn {
                padding: 1rem 2.5rem;
                font-size: 1.1rem;
            }
        }

        /* Extra small phones */
        @media (max-width: 400px) {
            .logo {
                font-size: 0.95rem;
            }
            .tab-btn {
                padding: 0.5rem 0.2rem;
            }
            .system-btn {
                padding: 0.3rem 0.4rem;
            }
            .overview-header {
                grid-template-columns: 1fr;
            }
            .pub-hotel-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        /* ==================== PUBLIC SCHEDULE VIEW ==================== */
        .pub-schedule-container {
            padding: 0.5rem 0;
        }
        .pub-schedule-grid-wrapper {
            display: flex;
            gap: 0;
            overflow-x: auto;
        }
        .pub-schedule-col-time {
            width: 60px;
            min-width: 60px;
            flex-shrink: 0;
        }
        .pub-schedule-day-group {
            flex: 1;
            min-width: 140px;
            display: flex;
            flex-direction: column;
            border-left: 1px solid var(--border-glow);
        }
        .pub-schedule-day-header {
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.7rem;
            color: var(--neon-blue);
            padding: 0.2rem 0;
            background: rgba(0, 212, 255, 0.06);
            border-bottom: 1px solid var(--border-glow);
            height: 20px;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .pub-schedule-day-columns {
            display: flex;
            position: relative;
        }
        .pub-schedule-col-activity {
            flex: 1;
            min-width: 90px;
            position: relative;
        }
        .pub-schedule-col-bus {
            width: 50px;
            min-width: 50px;
            flex-shrink: 0;
            position: relative;
            border-left: 1px solid rgba(136, 136, 170, 0.15);
        }
        .pub-schedule-col-header {
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 0.6rem;
            color: var(--neon-blue);
            padding: 0.15rem 0;
            border-bottom: 1px solid var(--border-glow);
            height: 18px;
            line-height: 18px;
        }
        .pub-schedule-col-header.bus-header {
            color: #ff6600;
        }
        .pub-schedule-slot {
            height: 28px;
            border-bottom: 1px solid rgba(136, 136, 170, 0.1);
            box-sizing: border-box;
        }
        .pub-schedule-slot-hour {
            border-bottom-color: rgba(136, 136, 170, 0.25);
        }
        .pub-schedule-time-label {
            height: 28px;
            line-height: 28px;
            font-size: 0.65rem;
            color: var(--text-secondary);
            text-align: right;
            padding-right: 4px;
            border-bottom: 1px solid rgba(136, 136, 170, 0.1);
            white-space: nowrap;
        }
        .pub-schedule-time-label-hour {
            color: var(--text-primary);
            font-weight: 600;
            border-bottom-color: rgba(136, 136, 170, 0.25);
        }
        .pub-schedule-time-spacer {
            height: 20px;
            border-bottom: 1px solid var(--border-glow);
        }
        .pub-schedule-time-subheader {
            height: 18px;
            border-bottom: 1px solid var(--border-glow);
        }
        .pub-schedule-event {
            position: absolute;
            left: 2px;
            right: 2px;
            border-radius: 6px;
            padding: 2px 6px;
            font-size: 0.75rem;
            color: #fff;
            overflow: visible;
            z-index: 10;
            display: flex;
            flex-direction: column;
            box-shadow: 0 1px 4px rgba(0,0,0,0.4);
        }
        .pub-schedule-event-name {
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
            flex-shrink: 0;
        }
        .pub-schedule-event-time {
            font-size: 0.65rem;
            opacity: 0.85;
            white-space: nowrap;
        }
        .pub-schedule-event-comment {
            font-size: 0.6rem;
            opacity: 0.7;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.3;
        }
        .pub-schedule-bus-event {
            position: absolute;
            left: 2px;
            right: 2px;
            border-radius: 6px;
            padding: 2px 4px;
            font-size: 0.7rem;
            color: #fff;
            overflow: visible;
            z-index: 10;
            display: flex;
            flex-direction: column;
            box-shadow: 0 1px 4px rgba(0,0,0,0.4);
        }
        /* Player row highlight on click */
        #playersTable tbody tr.row-highlighted td {
            background: rgba(0, 212, 255, 0.3) !important;
        }
        /* Hide native disclosure marker so our custom ▶ caret can live in the summary. */
        details > summary::-webkit-details-marker { display: none; }
        details[open] > summary span.pubq-caret { transform: rotate(90deg); }

        /* ==================== public MPA additions ==================== */
        /* Tab bar + systems row are real links in the MPA — style anchors
           exactly like the SPA's buttons. */
        .tab-nav a.tab-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            text-decoration: none;
            text-align: center;
            box-sizing: border-box;
        }
        .systems-row a.system-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
        a.ann-tab-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
        /* Email/text badges for the announcements page (admin history look) */
        .history-email-badge {
            background: var(--neon-blue);
            color: black;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            margin-left: 0.5rem;
            font-family: 'Orbitron', monospace;
        }
        .history-text-badge {
            background: var(--neon-green);
            color: black;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            margin-left: 0.5rem;
            font-family: 'Orbitron', monospace;
        }
        .history-item.email { border-left: 3px solid var(--neon-blue); }
        .history-item.text { border-left: 3px solid var(--neon-green); }

        /* Centered site badge in the header (ADMIN / PUBLIC) */
        .header-top { position: relative; }
        .site-badge {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            font-size: clamp(0.8rem, 2vw, 1.2rem);
            color: #ffffff;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            pointer-events: none;
        }