/* ===== CSS Variables ===== */
:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-card: #1e1e2a;
    --border-color: #2a2a3a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #6a6a7a;
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-success: #22c55e;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --pitch-classic: #2d8f4e;
    --pitch-dark: #1a5c32;
    --pitch-light: #4ade80;
    --pitch-night: #1e3a2f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    background: rgba(10, 10, 15, 0.92);
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    color: var(--text-muted);
    backdrop-filter: blur(4px);
}

.site-footer a {
    color: var(--accent-primary);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* ===== Header ===== */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.logo:hover {
    color: var(--text-primary);
}

.app-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    object-fit: contain;
}

.usmnt-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #002868, #001845);
    border: 1px solid #bf0a30;
    border-radius: var(--radius-md);
    color: white;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.usmnt-link-disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.usmnt-link:hover {
    background: linear-gradient(135deg, #bf0a30, #8b0721);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(191, 10, 48, 0.3);
}

.usmnt-flag {
    font-size: 1.125rem;
}

@media (max-width: 768px) {
    .usmnt-link span:not(.usmnt-flag) {
        display: none;
    }
    
    .usmnt-link {
        padding: 0.5rem 0.625rem;
    }

    .site-footer {
        bottom: calc(58px + env(safe-area-inset-bottom));
        font-size: 0.66rem;
        gap: 0.4rem;
        padding: 0.3rem 0.5rem;
    }
}

.nav-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: var(--radius-lg);
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.nav-tab.active {
    background: var(--accent-primary);
    color: white;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
    position: relative;
    align-items: center;
}

.donate-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 36px;
    min-width: 74px;
    padding: 0 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid #1e4ed8;
    background: linear-gradient(135deg, #0070e0, #003087);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.donate-mini i {
    font-size: 0.9rem;
}

.donate-mini:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .donate-mini {
        min-width: 40px;
        width: 40px;
        padding: 0;
        gap: 0;
    }

    .donate-mini span {
        display: none;
    }
}

.history-actions {
    display: flex;
    gap: 0.375rem;
}

.history-btn {
    padding: 0.5rem 0.625rem;
    min-width: 38px;
    justify-content: center;
}

.history-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.formation-learn-bubble {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: min(300px, 90vw);
    background: var(--bg-card);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    box-shadow: var(--shadow-lg);
    z-index: 150;
}

.formation-learn-bubble.hidden {
    display: none;
}

.formation-learn-title {
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.formation-learn-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.625rem;
}

.formation-learn-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.winning-card.formation-card-focus {
    outline: 2px solid var(--accent-warning);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.autosave-row {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.autosave-status {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.autosave-status.saved {
    color: var(--accent-success);
}

.autosave-status.cleared {
    color: var(--accent-warning);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

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

.btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--accent-primary);
}

/* Export Dropdown */
.export-dropdown {
    position: relative;
    display: flex;
}

.export-dropdown .btn-primary:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.export-dropdown-toggle {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    padding: 0.625rem 0.75rem !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.export-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    min-width: 200px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 1000;
}

.export-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.export-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.export-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.export-option i {
    width: 16px;
    color: var(--accent-primary);
}

/* ===== Main Content ===== */
.main-content {
    height: calc(100vh - 60px);
    overflow: hidden;
}

.main-content.scroll-unlocked {
    height: auto;
    min-height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 2.25rem;
}

.tab-content {
    display: none;
    height: 100%;
}

.tab-content.active {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.main-content.scroll-unlocked .tab-content,
.main-content.scroll-unlocked .tab-content.active {
    height: auto;
    min-height: 100%;
}

/* ===== Builder Layout ===== */
.builder-container {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    height: 100%;
    gap: 0;
}

.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 1rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.right-sidebar {
    border-right: none;
    border-left: 1px solid var(--border-color);
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* ===== Panels ===== */
.panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.panel-header:hover {
    background: var(--bg-tertiary);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.panel-title i {
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.panel-toggle {
    font-size: 0.625rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.panel.collapsed .panel-toggle {
    transform: rotate(-90deg);
}

.panel-content {
    padding: 0 1rem 1rem;
}

.panel.collapsed .panel-content {
    display: none;
}

/* Legacy support - panels without header */
.panel:not(:has(.panel-header)) {
    padding: 1rem;
}

.panel:not(:has(.panel-header)) .panel-title {
    margin-bottom: 0.875rem;
}

/* Touch improvements */
* {
    -webkit-tap-highlight-color: transparent;
}

input, button, select, textarea {
    touch-action: manipulation;
}

/* Prevent text selection on UI elements */
.panel-header,
.nav-tab,
.mobile-nav-btn,
.formation-btn,
.phase-btn,
.pitch-option,
.jersey-option {
    user-select: none;
    -webkit-user-select: none;
}

/* ===== Formation Grid ===== */
.formation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}

.formation-search-wrap {
    margin-bottom: 0.625rem;
}

/* ===== Formation Folders ===== */
.formation-folder {
    margin-bottom: 0.75rem;
}

.formation-folder:last-child {
    margin-bottom: 0;
}

.formation-folder-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.formation-folder-header:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
}

.folder-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.folder-title i {
    color: var(--accent-primary);
    font-size: 0.75rem;
}

.folder-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.folder-arrow {
    font-size: 0.625rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.formation-folder-header.collapsed .folder-arrow {
    transform: rotate(-90deg);
}

.formation-folder-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 0.375rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.formation-folder-content.open {
    max-height: 500px;
    padding: 0.625rem;
    margin-top: 0.375rem;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.formation-btn {
    padding: 0.55rem 0.45rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.formation-folder.hidden,
.formation-btn.hidden {
    display: none;
}

.formation-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.formation-btn.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ===== Form Elements ===== */
.form-group {
    margin-bottom: 0.875rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: flex;
    gap: 0.75rem;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0.875rem;
}

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.input::placeholder {
    color: var(--text-muted);
}

/* ===== Pitch Options ===== */
.pitch-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.pitch-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pitch-option:hover {
    border-color: var(--border-color);
}

.pitch-option.active {
    border-color: var(--accent-primary);
}

.pitch-preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
}

.pitch-preview.classic { background: var(--pitch-classic); }
.pitch-preview.dark { background: var(--pitch-dark); }
.pitch-preview.light { background: var(--pitch-light); }
.pitch-preview.night { background: var(--pitch-night); }

.pitch-option span {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ===== Jersey Options ===== */
.jersey-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.jersey-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.jersey-option:hover {
    border-color: var(--border-color);
}

.jersey-option.active {
    border-color: var(--accent-primary);
}

.jersey-preview {
    width: 32px;
    height: 32px;
    background: #e63946;
    border: 2px solid white;
}

.jersey-preview.circle {
    border-radius: 50%;
}

.jersey-preview.shirt {
    border-radius: 4px 4px 8px 8px;
    clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%);
}

.jersey-preview.modern {
    border-radius: 8px;
    background: linear-gradient(135deg, #e63946, #c1121f);
}

.jersey-option span {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* ===== Color Pickers ===== */
.color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.color-row label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.color-picker {
    width: 40px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    background: none;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.color-presets {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.color-preset {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.color-preset:hover {
    transform: scale(1.15);
    border-color: white;
}

.color-preset:nth-child(1) { background: linear-gradient(135deg, #e63946, #ffffff); }
.color-preset:nth-child(2) { background: linear-gradient(135deg, #1d3557, #f1faee); }
.color-preset:nth-child(3) { background: linear-gradient(135deg, #2a9d8f, #264653); }
.color-preset:nth-child(4) { background: linear-gradient(135deg, #f77f00, #003049); }
.color-preset:nth-child(5) { background: linear-gradient(135deg, #7209b7, #f72585); }
.color-preset:nth-child(6) { background: linear-gradient(135deg, #023e8a, #caf0f8); }

/* ===== Toggle Switch ===== */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.toggle-row:last-child {
    margin-bottom: 0;
}

.toggle-row label:first-child {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-tertiary);
    border-radius: 24px;
    transition: var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.toggle input:checked + .toggle-slider {
    background: var(--accent-primary);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* ===== Player Badges ===== */
.player-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.badge-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.badge-btn:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.badge-btn.active {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.card-icon {
    width: 14px;
    height: 18px;
    border-radius: 2px;
}

.card-icon.yellow {
    background: #fbbf24;
}

.card-icon.red {
    background: #ef4444;
}

/* ===== Pitch Container ===== */
.pitch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg-primary);
    overflow: hidden;
}

.pitch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

/* ===== Phase Toggle ===== */
.phase-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    width: 100%;
    max-width: 500px;
}

.phase-toggle {
    display: flex;
    position: relative;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 4px;
    border: 1px solid var(--border-color);
}

.phase-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast);
    position: relative;
    z-index: 2;
}

.phase-btn i {
    font-size: 0.875rem;
}

.phase-btn.active {
    color: white;
}

.phase-btn[data-phase="possession"].active {
    color: white;
}

.phase-btn[data-phase="defensive"].active {
    color: white;
}

.phase-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    z-index: 1;
}

.phase-toggle.defensive .phase-slider {
    left: calc(50%);
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.copy-phase-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.copy-phase-btn:hover {
    background: var(--bg-card);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.copy-phase-btn i {
    font-size: 0.75rem;
}

.timeline-spotlight {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.45rem 0 0.6rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-md);
    background: linear-gradient(120deg, rgba(99, 102, 241, 0.14), rgba(59, 130, 246, 0.08));
}

.timeline-spotlight-copy strong {
    display: block;
    font-size: 0.83rem;
    line-height: 1.25;
}

.timeline-spotlight-copy p {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.timeline-spotlight-kicker {
    display: inline-block;
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.08rem 0.35rem;
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.22);
    color: var(--accent-primary);
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.line-tools {
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    margin-bottom: 0;
    gap: 0.75rem;
}

.line-tools-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.line-tools-style {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.annotation-style-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
}

.line-tool-btn.active {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    color: var(--text-primary);
}

.line-tools-color {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.annotation-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    pointer-events: none;
}

body.annotation-mode-active .pitch {
    cursor: crosshair;
}

.pitch {
    touch-action: none;
}

@media (max-width: 900px) {
    .history-actions {
        display: none;
    }

    .formation-learn-bubble {
        right: 0.25rem;
        width: min(280px, 92vw);
    }

    .timeline-spotlight {
        flex-direction: column;
        align-items: flex-start;
    }
}

.annotation-line {
    stroke-width: 0.8;
    fill: none;
    opacity: 0.92;
}

.annotation-ball {
    pointer-events: none;
}

.annotation-ball-outer {
    fill: #f8fafc;
    stroke: #0f172a;
    stroke-width: 0.22;
    opacity: 0.97;
}

.annotation-ball-core {
    fill: #0f172a;
    opacity: 0.9;
}

.team-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

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

.formation-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
}

.phase-indicator {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.phase-indicator.defensive {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Pitch border color based on phase */
.pitch.defensive-phase {
    box-shadow: var(--shadow-xl), 0 0 0 2px rgba(239, 68, 68, 0.3);
}

.pitch.possession-phase {
    box-shadow: var(--shadow-xl), 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    border: 1px solid var(--accent-primary);
    color: var(--text-primary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all var(--transition-normal);
    z-index: 9999;
}

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

/* Phase toggle responsive */
@media (max-width: 768px) {
    .phase-toggle-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .phase-toggle {
        flex: 1;
        min-width: 200px;
        max-width: 300px;
    }
    
    .copy-phase-btn {
        flex-shrink: 0;
    }
    
    .phase-btn span {
        display: none;
    }
    
    .phase-btn {
        padding: 0.625rem 1rem;
    }
    
    .copy-phase-btn {
        font-size: 0.6875rem;
        padding: 0.375rem 0.625rem;
    }

    .line-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .line-tools-buttons {
        justify-content: space-between;
    }
}

.pitch {
    position: relative;
    width: 500px;
    height: 700px;
    background: var(--pitch-classic);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: background var(--transition-normal);
}

.pitch.dark { background: var(--pitch-dark); }
.pitch.light { background: var(--pitch-light); }
.pitch.night { background: var(--pitch-night); }

/* ===== Pitch Markings ===== */
.pitch-markings {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.center-circle {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.center-line {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
}

.center-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.penalty-area {
    position: absolute;
    width: 66%;
    height: 16%;
    left: 17%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.penalty-area.top {
    top: 0;
    border-top: none;
}

.penalty-area.bottom {
    bottom: 0;
    border-bottom: none;
}

.goal-area {
    position: absolute;
    width: 32%;
    height: 6%;
    left: 34%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.goal-area.top {
    top: 0;
    border-top: none;
}

.goal-area.bottom {
    bottom: 0;
    border-bottom: none;
}

.penalty-spot {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.penalty-spot.top {
    top: 11%;
}

.penalty-spot.bottom {
    bottom: 11%;
}

.penalty-arc {
    position: absolute;
    width: 80px;
    height: 40px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 0 80px 80px;
}

.penalty-arc.top {
    top: 16%;
    border-top: none;
}

.penalty-arc.bottom {
    bottom: 16%;
    transform: translateX(-50%) rotate(180deg);
}

.corner-arc {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.corner-arc.top-left {
    top: -8px;
    left: -8px;
    border-radius: 0 0 100% 0;
    border-top: none;
    border-left: none;
}

.corner-arc.top-right {
    top: -8px;
    right: -8px;
    border-radius: 0 0 0 100%;
    border-top: none;
    border-right: none;
}

.corner-arc.bottom-left {
    bottom: -8px;
    left: -8px;
    border-radius: 0 100% 0 0;
    border-bottom: none;
    border-left: none;
}

.corner-arc.bottom-right {
    bottom: -8px;
    right: -8px;
    border-radius: 100% 0 0 0;
    border-bottom: none;
    border-right: none;
}

/* ===== Snap Guides ===== */
.snap-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.snap-guide-h,
.snap-guide-v,
.snap-guide-center-h,
.snap-guide-center-v {
    position: absolute;
    background: rgba(99, 102, 241, 0.8);
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 5;
}

.snap-guide-h {
    height: 1px;
    left: 0;
    right: 0;
    box-shadow: 0 0 4px rgba(99, 102, 241, 0.8);
}

.snap-guide-v {
    width: 1px;
    top: 0;
    bottom: 0;
    box-shadow: 0 0 4px rgba(99, 102, 241, 0.8);
}

.snap-guide-center-h {
    height: 2px;
    left: 0;
    right: 0;
    top: 50%;
    background: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

.snap-guide-center-v {
    width: 2px;
    top: 0;
    bottom: 0;
    left: 50%;
    background: rgba(251, 191, 36, 0.8);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

.snap-guide-h.visible,
.snap-guide-v.visible,
.snap-guide-center-h.visible,
.snap-guide-center-v.visible {
    opacity: 1;
}

/* ===== Players ===== */
.players-container {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.player {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: grab;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
    z-index: 10;
    user-select: none;
}

.player:active {
    cursor: grabbing;
    z-index: 20;
}

.player.selected {
    z-index: 30;
}

.player.selected .player-avatar {
    box-shadow: 0 0 0 3px var(--accent-primary), 0 0 20px rgba(99, 102, 241, 0.5);
}

.player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e63946;
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.player-avatar.shirt {
    border-radius: 8px 8px 16px 16px;
}

.player-avatar.modern {
    border-radius: 12px;
    background: linear-gradient(135deg, #e63946, #c1121f);
}

.player:hover .player-avatar {
    transform: scale(1.1);
}

.player-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
}

.player-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-position {
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}

.player-position.position-changed {
    color: #fbbf24;
    transform: scale(1.2);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

/* Linked Sub Display */
.player-linked-sub {
    font-size: 0.5rem;
    font-weight: 500;
    color: rgba(139, 92, 246, 0.9);
    background: rgba(0, 0, 0, 0.6);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    margin-top: 1px;
    text-shadow: none;
    white-space: nowrap;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-linked-sub i {
    font-size: 0.4rem;
    margin-right: 2px;
}

/* Inline Editing */
.player-inline-edit {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    z-index: 100;
}

.inline-name-input {
    width: 100px;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    background: var(--bg-card);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.inline-name-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.player.editing {
    z-index: 50;
}

.player.editing .player-avatar {
    box-shadow: 0 0 0 3px var(--accent-primary), 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Edit hint on hover */
.player::after {
    content: 'Double-tap to edit';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    color: var(--accent-primary);
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.player.selected::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .player::after {
        content: 'Hold to edit';
    }
}

.player-badges-display {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.player-badge.goal {
    background: white;
    color: #1a1a25;
}

.player-badge.yellow {
    background: #fbbf24;
}

.player-badge.red {
    background: #ef4444;
}

.player-badge.captain {
    background: #fbbf24;
    color: #1a1a25;
}

.player-badge.sub {
    background: var(--accent-primary);
    color: white;
}

.match-info-display {
    width: 100%;
    max-width: 500px;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-height: 32px;
}

/* ===== Tactics Tab ===== */
.tactics-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.tactics-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tactics-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tactics-header p {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.tactics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tactic-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.tactic-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.tactic-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.tactic-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tactic-origin {
    font-size: 0.75rem;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
}

.tactic-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.tactic-formations {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tactic-formation-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* ===== Modal ===== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9);
    transition: transform var(--transition-normal);
}

.modal.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
}

.modal-close:hover {
    background: var(--accent-danger);
    color: white;
}

.modal-body {
    padding: 2rem;
}

.modal-body h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.modal-origin {
    font-size: 0.875rem;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
}

.modal-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

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

.modal-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.modal-section ul {
    list-style: none;
}

.modal-section li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.modal-section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
}

.modal-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-tag {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
}

/* ===== Mobile Navigation ===== */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    z-index: 101;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius-md);
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-btn i {
    font-size: 1.25rem;
}

.mobile-nav-btn:hover,
.mobile-nav-btn.active {
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .builder-container {
        grid-template-columns: 260px 1fr 260px;
    }
}

@media (max-width: 1024px) {
    .builder-container {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 60px);
    }
    
    /* Horizontal scrolling sidebars */
    .sidebar {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        max-height: none;
        transform: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        box-shadow: none;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.75rem;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    
    .sidebar.open {
        transform: none;
    }
    
    .right-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-color);
        border-bottom: none;
        order: 1;
    }
    
    .right-sidebar.open {
        transform: none;
    }
    
    /* Panels in horizontal mode */
    .sidebar .panel {
        flex: 0 0 auto;
        width: 260px;
        min-width: 260px;
        margin-bottom: 0;
        scroll-snap-align: start;
    }
    
    .sidebar .panel-content {
        max-height: 300px;
        overflow-y: auto;
    }
    
    /* Hide overlay and mobile nav slide controls */
    .sidebar-overlay {
        display: none !important;
    }
    
    .mobile-nav {
        display: block;
    }
    
    /* Mobile nav simplified - 3 buttons */
    .mobile-nav-btn {
        flex: 1;
    }
    
    /* Hide desktop nav tabs */
    .header .nav-tabs {
        display: none;
    }
    
    .pitch-container {
        flex: 1;
        padding-bottom: 70px;
        order: 0;
    }
    
    .pitch {
        width: 100%;
        max-width: 420px;
        aspect-ratio: 0.7;
        height: auto;
    }
    
    .team-header,
    .match-info-display {
        max-width: 420px;
    }
    
    /* Scroll indicator - fade effect on edges */
    .sidebar {
        position: relative;
    }
    
    .sidebar::before,
    .sidebar::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        width: 20px;
        flex: 0 0 20px;
        pointer-events: none;
        z-index: 2;
    }
    
    .sidebar::before {
        left: 0;
        background: linear-gradient(to right, var(--bg-secondary), transparent);
    }
    
    .sidebar::after {
        right: 0;
        background: linear-gradient(to left, var(--bg-secondary), transparent);
    }
    
    /* Scroll hint for panels */
    .sidebar .panel {
        position: relative;
    }
    
    /* Hide collapsed panels' content completely */
    .sidebar .panel.collapsed .panel-content {
        display: none;
    }
    
    /* Scroll hint */
    .scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(99, 102, 241, 0.1);
        border: 1px dashed var(--accent-primary);
        border-radius: var(--radius-md);
        color: var(--accent-primary);
        font-size: 0.75rem;
        font-weight: 500;
        flex: 0 0 auto;
        min-width: 140px;
        animation: pulse-hint 2s ease-in-out infinite;
    }
    
    @keyframes pulse-hint {
        0%, 100% { opacity: 0.7; }
        50% { opacity: 1; }
    }
    
    .scroll-hint.hidden {
        display: none;
    }
}

@media (min-width: 1025px) {
    .scroll-hint {
        display: none;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 0.625rem 1rem;
        gap: 0.5rem;
    }
    
    .logo {
        font-size: 1rem;
    }
    
    .logo i {
        font-size: 1.125rem;
    }
    
    .header-actions {
        gap: 0.375rem;
    }
    
    .header-actions .btn {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }
    
    /* Hide button text on mobile, show only icons */
    .header-actions .btn span:not(.sr-only) {
        display: none;
    }
    
    .header-actions .btn i {
        margin-right: 0;
    }
    
    .sidebar {
        width: 85vw;
        max-width: 320px;
    }
    
    .pitch-wrapper {
        padding: 0.5rem;
    }
    
    .pitch {
        max-width: 100%;
        aspect-ratio: 0.65;
    }
    
    .team-header,
    .match-info-display {
        max-width: 100%;
    }
    
    .team-header {
        padding: 0.5rem 0.75rem;
    }
    
    .team-name {
        font-size: 0.875rem;
    }
    
    .formation-name {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
    
    .phase-indicator {
        font-size: 0.5rem;
        padding: 0.125rem 0.25rem;
    }
    
    .player {
        width: 48px;
        height: 48px;
    }
    
    .player-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8125rem;
        /* Larger touch target */
        min-width: 44px;
        min-height: 44px;
    }
    
    .player-name {
        font-size: 0.5625rem;
        max-width: 55px;
    }
    
    .player-position {
        font-size: 0.5rem;
    }
    
    .player::after {
        bottom: -16px;
        font-size: 0.5rem;
    }
    
    .inline-name-input {
        width: 120px;
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
    }
    
    .phase-toggle-container {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    
    .phase-toggle {
        width: 100%;
        max-width: 280px;
    }
    
    .phase-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .copy-phase-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.6875rem;
    }
    
    /* Subs bench mobile */
    .subs-bench {
        margin: 0.5rem;
        padding: 0.75rem;
        max-width: 100%;
    }
    
    .subs-header h3 {
        font-size: 0.75rem;
    }
    
    .sub-player {
        padding: 0.375rem 0.5rem;
    }
    
    .sub-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }
    
    .sub-name {
        font-size: 0.6875rem;
        max-width: 55px;
    }
    
    .sub-position {
        font-size: 0.5625rem;
    }
    
    /* Squad panel mobile */
    .squad-panel {
        margin: 0.5rem;
        max-width: 100%;
    }
    
    .tactics-header h1 {
        font-size: 1.75rem;
    }
    
    /* Better touch targets */
    .formation-btn {
        padding: 0.625rem 0.5rem;
        min-height: 44px;
    }
    
    .toggle {
        width: 48px;
        height: 26px;
    }
    
    .toggle-slider:before {
        width: 20px;
        height: 20px;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(22px);
    }
}

@media (max-width: 480px) {
    .header {
        padding: 0.5rem 0.75rem;
    }
    
    .logo span {
        display: none;
    }
    
    .pitch {
        aspect-ratio: 0.6;
    }
    
    .player {
        width: 44px;
        height: 44px;
    }
    
    .player-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    .player-name {
        font-size: 0.5rem;
        max-width: 45px;
    }
    
    .player-position {
        font-size: 0.4375rem;
    }
    
    .player::after {
        display: none;
    }
    
    .inline-name-input {
        width: 110px;
        font-size: 1rem;
    }
    
    .phase-btn span {
        display: none;
    }
    
    .copy-phase-btn {
        font-size: 0.625rem;
    }
    
    .copy-phase-btn i + span {
        display: none;
    }
    
    .mobile-nav-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.5625rem;
    }
    
    .mobile-nav-btn i {
        font-size: 1.125rem;
    }
    
    /* Better touch targets on mobile */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .toggle {
        width: 52px;
        height: 28px;
    }
    
    .sub-player {
        min-height: 44px;
    }
}

/* ===== Tactics Page Layout ===== */
.tactics-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Full Guide Styles ===== */
.guide-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.guide-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.guide-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.guide-header p {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.guide-content {
    max-width: 800px;
    margin: 0 auto;
}

.guide-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.guide-toc {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.12));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    margin-bottom: 1.35rem;
}

.guide-toc strong {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.guide-toc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.guide-toc-links a {
    text-decoration: none;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    background: rgba(15, 23, 42, 0.18);
}

.guide-toc-links a:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.guide-section:last-child {
    border-bottom: none;
}

.guide-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.guide-section h2 i {
    color: var(--accent-primary);
    font-size: 1.25rem;
}

.guide-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin: 1.5rem 0 0.75rem;
}

.guide-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.guide-section ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.guide-section li {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.guide-section li strong {
    color: var(--text-primary);
}

.guide-callout {
    background: rgba(99, 102, 241, 0.1);
    border-left: 4px solid var(--accent-primary);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    display: flex;
    gap: 1rem;
}

.guide-callout i {
    color: var(--accent-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.guide-callout p {
    margin: 0;
    font-size: 0.9375rem;
}

.guide-callout.final {
    background: rgba(139, 92, 246, 0.1);
    border-left-color: var(--accent-secondary);
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.guide-callout.final i {
    color: var(--accent-secondary);
}

.guide-callout.final p {
    font-style: italic;
    font-size: 1.125rem;
}

/* System Deep Dives */
.system-deep-dive {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.system-deep-dive h3 {
    color: var(--text-primary);
    margin-top: 0;
    font-size: 1.25rem;
}

.system-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.meta-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
}

.system-deep-dive ul {
    background: var(--bg-tertiary);
    padding: 1rem 1rem 1rem 2rem;
    border-radius: var(--radius-md);
}

/* Concept Cards */
.concept-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.concept-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.concept-card p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Choice Table */
.choice-table {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
}

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

.choice-row:first-child {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
}

.choice-if,
.choice-then {
    padding: 1rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.choice-if {
    border-right: 1px solid var(--border-color);
}

.choice-row:first-child .choice-if,
.choice-row:first-child .choice-then {
    color: var(--text-primary);
}

/* Guide Responsive */
@media (max-width: 768px) {
    .guide-container {
        padding: 1rem;
    }
    
    .guide-header h1 {
        font-size: 1.75rem;
    }
    
    .guide-section h2 {
        font-size: 1.25rem;
    }
    
    .choice-row {
        grid-template-columns: 1fr;
    }
    
    .choice-if {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-tertiary);
        font-weight: 500;
    }
    
    .choice-row:first-child {
        display: none;
    }
}

/* ===== Asymmetric Systems Styles ===== */
.asymmetric-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.asymmetric-header {
    text-align: center;
    margin-bottom: 2rem;
}

.asymmetric-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.asymmetric-header p {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Explanation Section */
.asymmetric-explanation {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.asymmetric-definition {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.asymmetric-benefits {
    margin-bottom: 1.5rem;
}

.asymmetric-benefits h3,
.asymmetric-types h3,
.asymmetric-spotting h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.asymmetric-benefits h3 i,
.asymmetric-types h3 i,
.asymmetric-spotting h3 i {
    color: var(--accent-primary);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.benefit-card {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
}

.benefit-card h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 0.375rem;
}

.benefit-card p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.types-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.type-tag {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--bg-tertiary);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    flex: 1;
    min-width: 180px;
}

.type-tag-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-secondary);
}

.type-tag-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.spotting-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spotting-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.spotting-item i {
    color: var(--success-color);
    margin-top: 0.25rem;
}

/* Systems Section */
.asymmetric-systems-section {
    margin-bottom: 2rem;
}

.asymmetric-systems-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.asymmetric-systems-section h2 i {
    color: var(--accent-primary);
}

.asymmetric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

/* System Card */
.asymmetric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.asymmetric-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.asymmetric-card-header {
    margin-bottom: 1rem;
}

.asymmetric-card-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.asymmetric-card-team {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.asymmetric-card-formations {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.formation-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
}

.formation-tag.base {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.formation-tag.actual {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.formation-arrow {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.asymmetric-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.asymmetric-card-sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.side-preview {
    background: var(--bg-tertiary);
    padding: 0.75rem;
    border-radius: var(--radius-md);
}

.side-preview.left {
    border-left: 3px solid #3b82f6;
}

.side-preview.right {
    border-left: 3px solid #f59e0b;
}

.side-preview-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.side-preview.left .side-preview-label {
    color: #3b82f6;
}

.side-preview.right .side-preview-label {
    color: #f59e0b;
}

.side-preview-structure {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Asymmetric Modal */
.asymmetric-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.asymmetric-modal.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.asymmetric-modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    position: relative;
    margin-top: 2rem;
}

.asymmetric-modal-body {
    padding: 2rem;
}

.asymmetric-modal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.asymmetric-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.asymmetric-modal-team {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.asymmetric-modal-formations {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.modal-formation-tag {
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
}

.modal-formation-tag.base {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.modal-formation-tag.actual {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
}

.asymmetric-modal-section {
    margin-bottom: 1.5rem;
}

.asymmetric-modal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.asymmetric-modal-section h3 i {
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.asymmetric-modal-section p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Side-by-side comparison */
.sides-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.side-detail {
    background: var(--bg-tertiary);
    padding: 1.25rem;
    border-radius: var(--radius-md);
}

.side-detail.left {
    border-top: 3px solid #3b82f6;
}

.side-detail.right {
    border-top: 3px solid #f59e0b;
}

.side-detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.side-detail-header i {
    font-size: 1rem;
}

.side-detail.left .side-detail-header i {
    color: #3b82f6;
}

.side-detail.right .side-detail-header i {
    color: #f59e0b;
}

.side-detail-header h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.side-detail-structure {
    font-size: 0.875rem;
    color: var(--accent-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.side-detail-players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.player-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.side-detail-role {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Principles list */
.principles-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.principle-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.principle-item i {
    color: var(--accent-primary);
    margin-top: 0.25rem;
}

/* Weaknesses */
.weaknesses-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.weakness-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    padding: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
}

.weakness-item i {
    color: #ef4444;
    margin-top: 0.25rem;
}

/* Asymmetric Responsive */
@media (max-width: 768px) {
    .asymmetric-container {
        padding: 1rem;
    }
    
    .asymmetric-header h1 {
        font-size: 1.75rem;
    }
    
    .asymmetric-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .types-list {
        flex-direction: column;
    }
    
    .type-tag {
        min-width: auto;
    }
    
    .asymmetric-card-sides {
        grid-template-columns: 1fr;
    }
    
    .sides-comparison {
        grid-template-columns: 1fr;
    }
    
    .asymmetric-modal {
        padding: 1rem;
    }
    
    .asymmetric-modal-content {
        margin-top: 1rem;
    }
    
    .asymmetric-modal-body {
        padding: 1.5rem;
    }
}

/* ===== Specialized Roles Styles ===== */
.roles-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.roles-header {
    text-align: center;
    margin-bottom: 2rem;
}

.roles-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.roles-header p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.roles-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.roles-filters .filter-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.roles-filters .filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.roles-filters .filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Role Card */
.role-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.role-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.role-card.attacking::before { background: linear-gradient(180deg, #ef4444, #f97316); }
.role-card.midfield::before { background: linear-gradient(180deg, #3b82f6, #06b6d4); }
.role-card.defensive::before { background: linear-gradient(180deg, #10b981, #14b8a6); }
.role-card.goalkeeper::before { background: linear-gradient(180deg, #8b5cf6, #a855f7); }

.role-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.role-card-header {
    margin-bottom: 1rem;
}

.role-card-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.role-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.role-category-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.role-category-badge.attacking { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.role-category-badge.midfield { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.role-category-badge.defensive { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.role-category-badge.goalkeeper { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.role-position-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.role-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.role-card-players {
    margin-bottom: 1rem;
}

.role-card-players-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.role-famous-players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.role-player-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.role-card-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.role-attribute-tag {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
}

/* Role Modal */
.role-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.role-modal.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.role-modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    position: relative;
    margin-top: 2rem;
}

.role-modal-body {
    padding: 2rem;
}

.role-modal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.role-modal-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.role-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.role-modal-origin {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
}

.role-modal-section {
    margin-bottom: 1.5rem;
}

.role-modal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.role-modal-section h3 i {
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.role-modal-section p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Famous Players Grid */
.famous-players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.famous-player-card {
    background: var(--bg-tertiary);
    padding: 0.875rem;
    border-radius: var(--radius-md);
}

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

.famous-player-team {
    font-size: 0.75rem;
    color: var(--accent-primary);
    margin-bottom: 0.125rem;
}

.famous-player-era {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.famous-player-note {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Attributes Grid */
.attributes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attribute-tag {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-md);
    color: var(--accent-primary);
    font-weight: 500;
}

/* Systems Tags */
.systems-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.system-tag {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-secondary);
    border-radius: var(--radius-md);
}

/* Strengths and Weaknesses */
.strengths-weaknesses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.strengths-list,
.weaknesses-list-role {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.strength-item,
.weakness-item-role {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
}

.strength-item {
    background: rgba(16, 185, 129, 0.1);
}

.strength-item i {
    color: #10b981;
    margin-top: 0.125rem;
}

.weakness-item-role {
    background: rgba(239, 68, 68, 0.1);
}

.weakness-item-role i {
    color: #ef4444;
    margin-top: 0.125rem;
}

/* How to Spot */
.how-to-spot {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-primary);
}

.how-to-spot p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Modern Evolution */
.modern-evolution {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    padding: 1rem;
    border-radius: var(--radius-md);
}

.modern-evolution p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Roles Responsive */
@media (max-width: 768px) {
    .roles-container {
        padding: 1rem;
    }
    
    .roles-header h1 {
        font-size: 1.75rem;
    }
    
    .roles-grid {
        grid-template-columns: 1fr;
    }
    
    .famous-players-grid {
        grid-template-columns: 1fr;
    }
    
    .strengths-weaknesses {
        grid-template-columns: 1fr;
    }
    
    .role-modal {
        padding: 1rem;
    }
    
    .role-modal-content {
        margin-top: 1rem;
    }
    
    .role-modal-body {
        padding: 1.5rem;
    }
}

/* ===== Winning Formations Styles ===== */
.winning-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.winning-header {
    text-align: center;
    margin-bottom: 2rem;
}

.winning-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.winning-header h1 i {
    color: #f59e0b;
}

.winning-header p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.winning-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Winning Formation Card */
.winning-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.winning-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

.winning-card-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.winning-rank {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
}

.winning-rank.rank-1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.winning-rank.rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.winning-rank.rank-3 { background: linear-gradient(135deg, #b45309, #92400e); }
.winning-rank.rank-4 { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.winning-rank.rank-5 { background: linear-gradient(135deg, #10b981, #059669); }

.winning-card-title {
    flex: 1;
}

.winning-card-title h3 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.winning-peak-era {
    font-size: 0.875rem;
    color: var(--accent-primary);
    font-weight: 500;
}

.winning-trophies-preview {
    display: flex;
    gap: 1rem;
}

.trophy-stat {
    text-align: center;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.trophy-stat-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.trophy-stat-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.winning-card-body {
    padding: 1.5rem;
}

.winning-why {
    margin-bottom: 1.5rem;
}

.winning-why h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.winning-why p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.winning-teams {
    margin-bottom: 1.5rem;
}

.winning-teams h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.winning-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.winning-team-item {
    background: var(--bg-tertiary);
    padding: 0.75rem;
    border-radius: var(--radius-md);
}

.winning-team-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.winning-team-trophies {
    font-size: 0.75rem;
    color: var(--accent-primary);
    margin-bottom: 0.125rem;
}

.winning-team-manager {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.winning-requirements {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-primary);
}

.winning-requirements h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.winning-requirements p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Trophy Summary */
.trophy-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.trophy-summary h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trophy-summary h3 i {
    color: #f59e0b;
}

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

.trophy-summary-item {
    text-align: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.trophy-summary-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.trophy-summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.trophy-summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== Tactical Approaches Styles ===== */
.approaches-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.approaches-header {
    text-align: center;
    margin-bottom: 2rem;
}

.approaches-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.approaches-header h1 i {
    color: var(--accent-primary);
}

.approaches-header p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.approach-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.approach-filters .filter-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.approach-filters .filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.approach-filters .filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.approaches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

/* Approach Card */
.approach-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.approach-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.approach-card.pressing::before { background: linear-gradient(90deg, #ef4444, #f97316); }
.approach-card.defensive::before { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.approach-card.possession::before { background: linear-gradient(90deg, #10b981, #14b8a6); }
.approach-card.transition::before { background: linear-gradient(90deg, #f59e0b, #eab308); }
.approach-card.attacking::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
.approach-card.positional::before { background: linear-gradient(90deg, #8b5cf6, #a855f7); }

.approach-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.approach-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.approach-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.approach-card.pressing .approach-icon { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.approach-card.defensive .approach-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.approach-card.possession .approach-icon { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.approach-card.transition .approach-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.approach-card.attacking .approach-icon { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.approach-card.positional .approach-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.approach-card-title h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.approach-category-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.approach-category-badge.pressing { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.approach-category-badge.defensive { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.approach-category-badge.possession { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.approach-category-badge.transition { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.approach-category-badge.attacking { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.approach-category-badge.positional { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.approach-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.approach-card-philosophy {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.approach-card-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.approach-team-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.approach-risk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.risk-level {
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.risk-level.high { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.risk-level.medium { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.risk-level.low { background: rgba(16, 185, 129, 0.15); color: #10b981; }

/* Approach Modal */
.approach-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.approach-modal.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.approach-modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    position: relative;
    margin-top: 2rem;
}

.approach-modal-body {
    padding: 2rem;
}

.approach-modal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.approach-modal-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.approach-modal-philosophy {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.approach-modal-section {
    margin-bottom: 1.5rem;
}

.approach-modal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.approach-modal-section h3 i {
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.pioneers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.pioneer-card {
    background: var(--bg-tertiary);
    padding: 0.875rem;
    border-radius: var(--radius-md);
}

.pioneer-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pioneer-team {
    font-size: 0.75rem;
    color: var(--accent-primary);
}

.pioneer-era {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.principles-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.principle-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.principle-item i {
    color: var(--accent-primary);
    margin-top: 0.125rem;
}

.requires-countered {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.requires-list,
.countered-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.requires-item,
.countered-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
}

.requires-item {
    background: rgba(16, 185, 129, 0.1);
}

.requires-item i {
    color: #10b981;
}

.countered-item {
    background: rgba(239, 68, 68, 0.1);
}

.countered-item i {
    color: #ef4444;
}

.formations-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.formation-tag {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-secondary);
    border-radius: var(--radius-md);
}

.modern-teams-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modern-team-tag {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

/* Concepts Section */
.concepts-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.concepts-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.concepts-section h2 i {
    color: #f59e0b;
}

.concepts-section > p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.study-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 1.25rem;
}

.study-toolbar.compact {
    margin-top: 0;
}

.concept-compare-panel {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(15, 23, 42, 0.12));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.9rem;
    margin-bottom: 1rem;
}

.compare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.compare-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.55rem 0 0.8rem;
}

.compare-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.compare-slot {
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    min-height: 138px;
}

.compare-slot.empty {
    color: var(--text-muted);
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
}

.compare-slot.filled {
    border-style: solid;
    background: rgba(15, 23, 42, 0.24);
}

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

.compare-slot.filled p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.compare-slot-bottom {
    font-size: 0.75rem;
    color: var(--accent-primary);
    border-top: 1px solid var(--border-color);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

.concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.concept-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all var(--transition-fast);
}

.concept-card.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

.concept-card:hover {
    border-color: var(--accent-primary);
}

.concept-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.concept-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.concept-card > p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.concept-examples {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.concept-example {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-left: 0.75rem;
    border-left: 2px solid var(--accent-primary);
}

.concept-importance {
    font-size: 0.8125rem;
    color: var(--accent-primary);
    font-style: italic;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.concept-compare-toggle {
    margin-top: 0.75rem;
}

/* Approaches Responsive */
@media (max-width: 768px) {
    .winning-container,
    .approaches-container {
        padding: 1rem;
    }
    
    .winning-header h1,
    .approaches-header h1 {
        font-size: 1.75rem;
    }
    
    .winning-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .winning-trophies-preview {
        width: 100%;
        justify-content: space-between;
    }
    
    .winning-teams-grid {
        grid-template-columns: 1fr;
    }
    
    .approaches-grid {
        grid-template-columns: 1fr;
    }
    
    .concepts-grid {
        grid-template-columns: 1fr;
    }

    .compare-slots {
        grid-template-columns: 1fr;
    }
    
    .requires-countered {
        grid-template-columns: 1fr;
    }
    
    .pioneers-grid {
        grid-template-columns: 1fr;
    }
    
    .approach-modal {
        padding: 1rem;
    }
    
    .approach-modal-content {
        margin-top: 1rem;
    }
    
    .approach-modal-body {
        padding: 1.5rem;
    }
}

/* ===== Coaching Profiles Styles ===== */
.coaches-container {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.coaches-header {
    text-align: center;
    margin-bottom: 2rem;
}

.coaches-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coaches-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.coaches-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.search-box input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.coaches-filters .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.coaches-filters .filter-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.coaches-filters .filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.coaches-filters .filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.sort-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-select label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sort-select select {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

/* Coaches Grid */
.coaches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Coach Card */
.coach-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.coach-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.coach-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.coach-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.coach-info {
    flex: 1;
    min-width: 0;
}

.coach-info h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.coach-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.coach-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.coach-trophies {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fbbf24;
}

.coach-trophies i {
    font-size: 0.875rem;
}

.coach-systems {
    margin-bottom: 1rem;
}

.coach-systems-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.system-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.system-bar-label {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-bar-track {
    width: 80px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.system-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.system-bar-value {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--accent-primary);
    min-width: 32px;
    text-align: right;
}

.coach-philosophy {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coach-clubs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.club-tag {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

/* Coach Modal */
.coach-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.coach-modal.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.coach-modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    max-width: 700px;
    width: 100%;
    position: relative;
    margin-top: 2rem;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 1;
}

.modal-close:hover {
    background: var(--error-color);
    border-color: var(--error-color);
    color: white;
}

.coach-modal-body {
    padding: 2rem;
}

.coach-modal-header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.coach-modal-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.coach-modal-info h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.coach-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.coach-modal-meta span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.coach-modal-meta i {
    color: var(--accent-primary);
}

.coach-modal-trophies {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fbbf24;
}

.coach-modal-trophies span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.coach-modal-section {
    margin-bottom: 1.5rem;
}

.coach-modal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coach-modal-section h3 i {
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.coach-modal-philosophy {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-primary);
}

.coach-modal-systems {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-system-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.modal-system-info {
    flex: 1;
}

.modal-system-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.modal-system-formation {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.modal-system-bar-track {
    width: 120px;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.modal-system-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
}

.modal-system-percentage {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 45px;
    text-align: right;
}

.coach-modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coach-modal-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.coach-modal-list li i {
    color: var(--success-color);
    margin-top: 0.25rem;
}

.coach-quote {
    font-size: 1.125rem;
    color: var(--text-primary);
    font-style: italic;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: var(--radius-md);
}

.coach-quote::before {
    content: '"';
    font-size: 3rem;
    color: var(--accent-primary);
    line-height: 0;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.coach-modal-clubs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.coach-modal-clubs .club-tag {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

/* Coaches Responsive */
@media (max-width: 768px) {
    .coaches-container {
        padding: 1rem;
    }
    
    .coaches-header h1 {
        font-size: 1.75rem;
    }
    
    .coaches-filters {
        flex-direction: column;
    }
    
    .search-box {
        max-width: none;
    }
    
    .coaches-grid {
        grid-template-columns: 1fr;
    }
    
    .coach-modal {
        padding: 1rem;
    }
    
    .coach-modal-header {
        flex-direction: column;
        text-align: center;
    }
    
    .coach-modal-avatar {
        margin: 0 auto;
    }
    
    .coach-modal-meta {
        justify-content: center;
    }
    
    .coach-modal-trophies {
        justify-content: center;
    }
}

/* ===== Sub Navigation ===== */
.sub-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.sub-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sub-nav-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.sub-nav-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-color: transparent;
}

.sub-nav-btn i {
    font-size: 1rem;
}

/* ===== Sub Tab Content ===== */
.sub-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}

.sub-tab-content.active {
    display: block;
}

/* ===== Category Filters ===== */
.category-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* ===== Updated Tactic Card ===== */
.tactic-card {
    position: relative;
    overflow: hidden;
}

.tactic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tactic-card:hover::before {
    opacity: 1;
}

.tactic-era {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.tactic-category {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.tactic-category.possession { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.tactic-category.pressing { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.tactic-category.defensive { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.tactic-category.attacking { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.tactic-category.classic { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.tactic-category.transition { background: rgba(236, 72, 153, 0.2); color: #ec4899; }

/* ===== Formation Animation Styles ===== */
.formation-animation-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.formation-animation-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.formation-animation-section h2 i {
    color: var(--accent-primary);
}

.animation-subtitle {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.animation-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

/* Animation Pitch */
.animation-pitch {
    position: relative;
    aspect-ratio: 1.4 / 1;
    background: linear-gradient(to bottom, 
        #1a472a 0%, #1a472a 49.5%, 
        #fff 49.5%, #fff 50.5%, 
        #1a472a 50.5%, #1a472a 100%);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid #fff;
}

.pitch-markings {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.center-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
}

.penalty-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 18%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.penalty-box.top { top: 0; border-top: none; }
.penalty-box.bottom { bottom: 0; border-bottom: none; }

.goal-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 7%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.goal-box.top { top: 0; border-top: none; }
.goal-box.bottom { bottom: 0; border-bottom: none; }

/* Formation Dots */
.formation-dots {
    position: absolute;
    inset: 0;
}

.formation-dot {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.formation-dot.gk { background: linear-gradient(135deg, #f59e0b, #d97706); }
.formation-dot.def { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.formation-dot.mid { background: linear-gradient(135deg, #10b981, #059669); }
.formation-dot.att { background: linear-gradient(135deg, #ef4444, #dc2626); }

.formation-dot.entering {
    animation: dotEnter 0.6s ease-out;
}

@keyframes dotEnter {
    from {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Animation Info Panel */
.animation-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.animation-year {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.animation-formation-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.animation-era {
    font-size: 0.9375rem;
    color: var(--accent-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.animation-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Animation Controls */
.animation-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.anim-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.anim-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.anim-btn.play-btn {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.anim-btn.play-btn:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    transform: scale(1.05);
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.speed-control input[type="range"] {
    width: 80px;
    accent-color: var(--accent-primary);
}

/* Animation Timeline Bar */
.animation-timeline-bar {
    position: relative;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-bottom: 1.5rem;
    overflow: visible;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.timeline-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 1;
}

.timeline-marker:hover {
    transform: scale(1.3);
    border-color: var(--accent-primary);
}

.timeline-marker.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.2);
}

.timeline-marker::after {
    content: attr(data-year);
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.timeline-marker:hover::after,
.timeline-marker.active::after {
    opacity: 1;
}

/* Formation Legend */
.formation-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.legend-item .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.legend-item .dot.gk { background: linear-gradient(135deg, #f59e0b, #d97706); }
.legend-item .dot.def { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.legend-item .dot.mid { background: linear-gradient(135deg, #10b981, #059669); }
.legend-item .dot.att { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* Animation Section Responsive */
@media (max-width: 768px) {
    .formation-animation-section {
        padding: 1.25rem;
    }
    
    .animation-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .animation-pitch {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .animation-info {
        padding: 1rem;
    }
    
    .animation-year {
        font-size: 3rem;
    }
    
    .animation-formation-name {
        font-size: 1.5rem;
    }
    
    .animation-controls {
        flex-wrap: wrap;
    }
    
    .speed-control {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .timeline-marker::after {
        display: none;
    }
    
    .formation-legend {
        gap: 1rem;
    }
}

/* ===== Timeline ===== */
.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    overflow-y: auto;
}

.timeline-header {
    text-align: center;
    margin-bottom: 2rem;
}

.timeline-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.timeline-header p {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Timeline Filters */
.timeline-filters {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.timeline-filters .filter-group {
    margin-bottom: 1rem;
}

.timeline-filters .filter-group:last-child {
    margin-bottom: 0;
}

.timeline-filters .filter-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.timeline-filters .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.timeline-filters .filter-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.timeline-filters .filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.timeline-filters .filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* Regional Styles Section */
.regional-styles-section,
.evolution-diagram-section,
.timeline-main-section {
    margin-bottom: 3rem;
}

.regional-styles-section h2,
.evolution-diagram-section h2,
.timeline-main-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.regional-styles-section h2 i,
.evolution-diagram-section h2 i,
.timeline-main-section h2 i {
    color: var(--accent-primary);
}

.regional-styles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.regional-style-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.regional-style-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}

.regional-style-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.regional-flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.regional-flag.english { background: linear-gradient(135deg, #dc2626, #fff); }
.regional-flag.italian { background: linear-gradient(135deg, #16a34a, #fff, #dc2626); }
.regional-flag.dutch { background: linear-gradient(135deg, #ea580c, #fff, #2563eb); }
.regional-flag.spanish { background: linear-gradient(135deg, #dc2626, #facc15, #dc2626); }
.regional-flag.german { background: linear-gradient(135deg, #000, #dc2626, #facc15); }
.regional-flag.brazilian { background: linear-gradient(135deg, #16a34a, #facc15); }
.regional-flag.argentine { background: linear-gradient(135deg, #3b82f6, #fff, #3b82f6); }
.regional-flag.portuguese { background: linear-gradient(135deg, #16a34a, #dc2626); }
.regional-flag.french { background: linear-gradient(135deg, #2563eb, #fff, #dc2626); }
.regional-flag.japanese { background: linear-gradient(135deg, #ffffff, #ef4444); }

.regional-style-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.regional-style-era {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.regional-style-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.regional-value-tag {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.regional-style-philosophy {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Evolution Diagram */
.evolution-paths {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.evolution-path {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: all var(--transition-fast);
}

.evolution-path:hover {
    border-color: var(--accent-primary);
}

.evolution-from,
.evolution-to {
    flex: 1;
    text-align: center;
}

.evolution-formation {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.evolution-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.evolution-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
}

.evolution-arrow i {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.evolution-year {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--accent-secondary);
    background: rgba(139, 92, 246, 0.15);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.evolution-catalyst {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 120px;
}

/* Timeline Main */
.timeline-wrapper {
    position: relative;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, 
        var(--accent-primary) 0%,
        var(--accent-secondary) 50%,
        var(--accent-primary) 100%
    );
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 1rem 0;
}

.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
    padding-right: 3rem;
    padding-left: 0;
}

.timeline-item:nth-child(even) .timeline-content {
    padding-left: 3rem;
}

.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: var(--bg-primary);
    border: 4px solid var(--accent-primary);
    border-radius: 50%;
    z-index: 10;
    transition: all var(--transition-fast);
}

/* Timeline dot colors by event type */
.timeline-item[data-type="system_birth"] .timeline-dot { border-color: #10b981; }
.timeline-item[data-type="system_death"] .timeline-dot { border-color: #ef4444; }
.timeline-item[data-type="system_evolution"] .timeline-dot { border-color: #f59e0b; }
.timeline-item[data-type="milestone"] .timeline-dot { border-color: #6366f1; }
.timeline-item[data-type="regional_style"] .timeline-dot { border-color: #8b5cf6; }
.timeline-item[data-type="system_dominance"] .timeline-dot { border-color: #3b82f6; }

.timeline-item:hover .timeline-dot {
    transform: translateX(-50%) scale(1.3);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.timeline-item[data-type="system_birth"]:hover .timeline-dot { background: #10b981; }
.timeline-item[data-type="system_death"]:hover .timeline-dot { background: #ef4444; }
.timeline-item[data-type="system_evolution"]:hover .timeline-dot { background: #f59e0b; }
.timeline-item[data-type="milestone"]:hover .timeline-dot { background: #6366f1; }
.timeline-item[data-type="regional_style"]:hover .timeline-dot { background: #8b5cf6; }
.timeline-item[data-type="system_dominance"]:hover .timeline-dot { background: #3b82f6; }

.timeline-content {
    width: calc(50% - 30px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all var(--transition-normal);
}

.timeline-item:hover .timeline-content {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.15);
}

.timeline-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.timeline-year {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
}

.timeline-era {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.timeline-type-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.timeline-type-badge.system_birth { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.timeline-type-badge.system_death { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.timeline-type-badge.system_evolution { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.timeline-type-badge.milestone { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.timeline-type-badge.regional_style { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.timeline-type-badge.system_dominance { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

.timeline-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.timeline-description {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.timeline-formation {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-secondary);
    background: rgba(139, 92, 246, 0.15);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
}

.timeline-formation i {
    font-size: 0.625rem;
}

.timeline-regional {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.timeline-regional i {
    font-size: 0.5625rem;
}

.timeline-significance {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--success-color);
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--border-color);
}

.timeline-killed,
.timeline-dominance {
    display: block;
    font-size: 0.6875rem;
    margin-top: 0.375rem;
}

.timeline-killed {
    color: #ef4444;
}

.timeline-killed i {
    margin-right: 0.25rem;
}

.timeline-dominance {
    color: #3b82f6;
}

.timeline-dominance i {
    margin-right: 0.25rem;
}

/* Regional Modal */
.regional-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.regional-modal.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.regional-modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    position: relative;
    margin-top: 2rem;
    padding: 2rem;
}

.regional-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.regional-modal-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.regional-modal-era {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.regional-modal-section {
    margin-bottom: 1.5rem;
}

.regional-modal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.regional-modal-section h3 i {
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.regional-modal-section p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.regional-modal-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.regional-modal-value {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.regional-modal-formations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.regional-modal-formation {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-secondary);
    border-radius: var(--radius-md);
}

.regional-modal-coaches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.regional-modal-coach {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
    border-radius: var(--radius-md);
}

/* ===== Timeline Responsive ===== */
@media (max-width: 768px) {
    .timeline-container {
        padding: 1rem;
    }
    
    .timeline-filters {
        padding: 1rem;
    }
    
    .timeline-filters .filter-buttons {
        gap: 0.375rem;
    }
    
    .timeline-filters .filter-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
    
    .regional-styles-grid {
        grid-template-columns: 1fr;
    }
    
    .regional-style-card {
        padding: 1rem;
    }
    
    .evolution-path {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .evolution-arrow {
        transform: rotate(90deg);
    }
    
    .evolution-arrow i {
        transform: rotate(-90deg);
    }
    
    .evolution-catalyst {
        transform: rotate(-90deg);
        white-space: nowrap;
    }
    
    .timeline-line {
        left: 20px;
    }
    
    .timeline-item,
    .timeline-item:nth-child(odd) {
        flex-direction: row;
    }
    
    .timeline-dot {
        left: 20px;
    }
    
    .timeline-content,
    .timeline-item:nth-child(odd) .timeline-content {
        width: calc(100% - 60px);
        margin-left: 50px;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: left;
    }
    
    .timeline-badges {
        flex-wrap: wrap;
    }
    
    .timeline-header h1 {
        font-size: 1.5rem;
    }
    
    .sub-nav {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
    }
    
    .sub-nav-btn {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
    
    .category-filters {
        padding: 0 1rem;
    }
    
    .regional-modal {
        padding: 1rem;
    }
    
    .regional-modal-content {
        margin-top: 1rem;
        padding: 1.5rem;
    }
    
    .regional-styles-section h2,
    .evolution-diagram-section h2,
    .timeline-main-section h2 {
        font-size: 1rem;
    }
}

/* ===== Updated Modal for More Tactics Info ===== */
.modal-key-figures {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.modal-figure {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
}

.modal-figure i {
    color: var(--accent-primary);
    font-size: 0.75rem;
}

.modal-era-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-secondary);
    background: rgba(139, 92, 246, 0.15);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    margin-left: 0.5rem;
}

/* ===== Positions Section ===== */
.positions-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.positions-header {
    text-align: center;
    margin-bottom: 2rem;
}

.positions-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.positions-header p {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.position-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.position-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.position-filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.position-filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.pos-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.pos-dot.gk { background: #f59e0b; }
.pos-dot.def { background: #3b82f6; }
.pos-dot.mid { background: #22c55e; }
.pos-dot.fwd { background: #ef4444; }

.positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.position-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.position-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.position-card.goalkeeper::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.position-card.defender::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.position-card.midfielder::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.position-card.forward::before { background: linear-gradient(90deg, #ef4444, #f87171); }

.position-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.position-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.position-abbr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 800;
    color: white;
}

.position-abbr.goalkeeper { background: linear-gradient(135deg, #f59e0b, #d97706); }
.position-abbr.defender { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.position-abbr.midfielder { background: linear-gradient(135deg, #22c55e, #16a34a); }
.position-abbr.forward { background: linear-gradient(135deg, #ef4444, #dc2626); }

.position-title-area {
    flex: 1;
    margin-left: 1rem;
}

.position-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.position-zone {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.position-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.position-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.position-attribute {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.position-roles-count {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-weight: 600;
}

/* ===== Position Modal ===== */
.position-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.position-modal-abbr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

.position-modal-title h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.position-modal-zone {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.position-modal-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.position-modal-attributes {
    margin-bottom: 1.5rem;
}

.position-modal-attributes h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.attributes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attribute-tag {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.position-roles {
    margin-top: 1.5rem;
}

.position-roles h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.role-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.role-card:last-child {
    margin-bottom: 0;
}

.role-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.role-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.role-players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.role-player {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* ===== Positions Responsive ===== */
@media (max-width: 768px) {
    .positions-header h1 {
        font-size: 1.75rem;
    }
    
    .positions-grid {
        grid-template-columns: 1fr;
    }
    
    .position-filters {
        padding: 0 1rem;
    }
    
    .position-filter-btn {
        flex: 1;
        justify-content: center;
        min-width: 100px;
    }
}

/* ===== Community Section ===== */
.community-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.community-header {
    text-align: center;
    margin-bottom: 2rem;
}

.community-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.community-header p {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.community-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.community-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 0.5rem;
    width: min(1100px, 100%);
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.page-indicator {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 110px;
    text-align: center;
}

.checkbox-inline {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.checkbox-inline input {
    accent-color: var(--accent-primary);
}

.match-plan-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.match-plan-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.74rem;
    padding: 0.4rem 0.45rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.match-plan-btn.active {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.15);
}

.match-plan-output {
    display: grid;
    gap: 0.45rem;
}

.match-plan-summary {
    font-size: 0.8rem;
    color: var(--text-primary);
    margin: 0;
}

.match-plan-phase {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.42rem 0.5rem;
}

.match-plan-sub-title {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.match-plan-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.match-plan-subs li {
    font-size: 0.76rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.5rem;
}

.match-plan-subs .minute {
    color: var(--accent-primary);
    font-weight: 700;
}

.match-plan-subs .suggestion {
    color: var(--text-primary);
    font-weight: 600;
}

.sort-buttons {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: var(--radius-lg);
}

.sort-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sort-btn:hover {
    color: var(--text-primary);
}

.sort-btn.active {
    background: var(--accent-primary);
    color: white;
}

.community-type-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.type-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.type-filter-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-secondary);
}

.type-filter-btn.active {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--accent-secondary);
    color: var(--text-primary);
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.lineup-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.lineup-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.lineup-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.lineup-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.lineup-card-formation {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
}

.lineup-card-meta-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.lineup-card-type {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.18rem 0.45rem;
    border-radius: var(--radius-sm);
}

.lineup-card-type.lineup {
    background: rgba(99, 102, 241, 0.16);
    color: var(--accent-primary);
}

.lineup-card-type.camp {
    background: rgba(34, 197, 94, 0.14);
    color: var(--accent-success);
}

.lineup-card-author {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.lineup-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Tactical News + Fixtures ===== */
.news-container,
.fixtures-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.news-header,
.fixtures-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.news-header h1,
.fixtures-header h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}

.news-header p,
.fixtures-header p {
    color: var(--text-secondary);
}

.news-toolbar,
.fixtures-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.news-source-chips,
.fixture-status-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.news-chip,
.fixture-chip {
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.news-chip:hover,
.fixture-chip:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.news-chip.active,
.fixture-chip.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

.fixture-day-filter {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.fixture-day-filter label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.fixture-date-select {
    min-width: 170px;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
}

.news-updated-label,
.fixtures-updated-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.news-feed-list,
.fixtures-list,
.scanner-picks-grid {
    display: grid;
    gap: 0.75rem;
}

.news-item,
.fixture-item,
.scanner-pick {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.news-item-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.news-source {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.news-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.news-title {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.news-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.news-title a:hover {
    color: var(--accent-primary);
}

.news-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.scanner-radar {
    width: min(340px, 80vw);
    height: min(340px, 80vw);
    margin: 0 auto 1.25rem auto;
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.04) 70%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    overflow: hidden;
}

.scanner-ring {
    position: absolute;
    border: 1px dashed rgba(16, 185, 129, 0.5);
    border-radius: 50%;
    inset: 16%;
}

.scanner-ring.ring-b { inset: 30%; }
.scanner-ring.ring-c { inset: 43%; }

.scanner-sweep {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, rgba(16, 185, 129, 0.45), rgba(16, 185, 129, 0));
    animation: scannerSweep 3s linear infinite;
}

.scanner-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.9);
}

@keyframes scannerSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scanner-top-picks,
.fixtures-list-section {
    margin-top: 1.25rem;
}

.fixture-email-signup {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.fixture-email-signup h2 {
    font-size: 1.02rem;
    margin-bottom: 0.4rem;
}

.fixture-email-signup p {
    font-size: 0.84rem;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
}

.fixture-email-form-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.fixture-email-form-row .input {
    min-width: 240px;
    flex: 1;
}

.fixture-email-status {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.fixture-email-status.success {
    color: var(--accent-success);
}

.fixture-email-status.error {
    color: var(--accent-danger);
}

.scanner-top-picks h2,
.fixtures-list-section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.scanner-picks-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.scanner-pick {
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.scanner-pick.active {
    border-color: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.16);
}

.scanner-pick-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
}

.scanner-badge {
    font-weight: 700;
    color: #10b981;
}

.scanner-score {
    color: var(--text-muted);
    font-weight: 600;
}

.scanner-pick h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.scanner-pick p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}

.scanner-pick ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.fixture-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.fixture-main h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.fixture-matchup-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.team-badge {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

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

.fixture-meta {
    text-align: right;
    display: grid;
    gap: 0.2rem;
}

.fixture-state {
    font-size: 0.72rem;
    font-weight: 700;
}

.fixture-state.in { color: #ef4444; }
.fixture-state.pre { color: #f59e0b; }
.fixture-state.post { color: #10b981; }

.fixture-status,
.fixture-time {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.fixture-watch-line {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.fixture-watch-line i {
    color: var(--accent-primary);
}

.fixture-watch-line a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}

.fixture-watch-line a:hover {
    text-decoration: underline;
}

.fixture-scoreline {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.news-empty,
.fixtures-empty {
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    background: var(--bg-card);
}

@media (max-width: 768px) {
    .news-container,
    .fixtures-container {
        padding: 1.25rem;
    }

    .news-header h1,
    .fixtures-header h1 {
        font-size: 1.5rem;
    }

    .fixture-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .fixture-meta {
        text-align: left;
    }
}

.lineup-card-preview {
    margin: 0.75rem 0 0.9rem;
}

.mini-pitch {
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.08));
    padding: 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.mini-row {
    display: flex;
    justify-content: center;
    gap: 0.22rem;
    min-height: 9px;
}

.mini-player-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(14, 23, 40, 0.45);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.12);
}

.lineup-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.lineup-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.lineup-stat i {
    font-size: 0.75rem;
}

.lineup-stat.timestamp {
    width: 100%;
    padding-top: 0.25rem;
    margin-top: 0.2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.lineup-stat.likes i { color: #ef4444; }
.lineup-stat.views i { color: var(--accent-primary); }

.community-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.number-roles-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}

.number-role-card {
    display: flex;
    gap: 0.65rem;
    padding: 0.7rem;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.number-role-card h3 {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.number-role-card p {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.number-pill {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.community-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.community-empty h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* ===== Share Modal ===== */
.share-modal-content {
    max-width: 450px;
}

.share-modal-body {
    padding: 2rem;
    text-align: center;
}

.share-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.share-icon i {
    font-size: 1.5rem;
    color: white;
}

.share-modal-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.share-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.share-form {
    text-align: left;
    margin-bottom: 1.5rem;
}

.share-form .form-group {
    margin-bottom: 1rem;
}

.textarea {
    min-height: 80px;
    resize: vertical;
}

.btn-large {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
}

.share-result {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.share-success-icon {
    width: 48px;
    height: 48px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.share-success-icon i {
    font-size: 1.5rem;
    color: var(--accent-success);
}

.share-result h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--accent-success);
}

.share-link-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.share-link-input {
    flex: 1;
    font-size: 0.8125rem;
    background: var(--bg-tertiary);
}

.share-code-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.share-code-label strong {
    color: var(--accent-primary);
    font-family: monospace;
    letter-spacing: 0.1em;
}

.share-result-actions {
    margin-top: 1rem;
}

.share-result-actions .btn {
    width: 100%;
}

/* ===== Community Responsive ===== */
@media (max-width: 768px) {
    .community-header h1 {
        font-size: 1.75rem;
    }
    
    .community-grid {
        grid-template-columns: 1fr;
    }
    
    .sort-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .community-filters {
        grid-template-columns: 1fr 1fr;
    }

    .community-filters .btn {
        grid-column: 1 / -1;
    }

    .lineup-card-preview {
        margin: 0.65rem 0 0.75rem;
    }

    .mini-pitch {
        padding: 0.4rem 0.45rem;
        gap: 0.24rem;
    }

    .mini-player-dot {
        width: 6px;
        height: 6px;
    }
}

/* ===== Substitutes Bench ===== */
.subs-bench {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 500px;
}

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

.subs-header h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subs-header h3 i {
    color: var(--accent-primary);
}

.subs-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subs-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.subs-hint {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subs-hint i {
    color: var(--accent-primary);
}

.subs-hint.hidden {
    display: none;
}

/* Link Sub Section */
.link-sub-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.link-sub-section label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.link-sub-section select {
    width: 100%;
    margin-bottom: 0.375rem;
}

.link-sub-hint {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin: 0;
}

.btn-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

.subs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 50px;
}

.sub-player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sub-player:hover {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

.sub-player.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.sub-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: white;
}

.sub-info {
    display: flex;
    flex-direction: column;
}

.sub-assignment {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 130px;
}

.sub-assignment-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sub-assign-select {
    font-size: 0.66rem;
    padding: 0.2rem 0.3rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    max-width: 170px;
}

.sub-link-summary {
    font-size: 0.62rem;
    color: var(--text-muted);
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sub-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub-position {
    font-size: 0.625rem;
    color: var(--text-muted);
}

.sub-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.625rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.sub-player:hover .sub-remove {
    opacity: 1;
}

.sub-remove:hover {
    color: var(--accent-danger);
}

.sub-inline-edit {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
    max-width: 100px;
}

.sub-info {
    display: flex;
    flex-direction: column;
}

.subs-empty {
    width: 100%;
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ===== Camp/Squad Mode ===== */
.panel-description {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.squad-size-control {
    margin-top: 0.75rem;
}

.squad-size-control label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.squad-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.squad-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.625rem 0.5rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.squad-preset-btn:hover {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

.squad-preset-btn.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
}

.preset-number {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.squad-preset-btn.active .preset-number {
    color: var(--accent-primary);
}

.preset-label {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.squad-size-options {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.squad-size-btn {
    flex: 1;
    padding: 0.5rem 0.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.squad-size-btn:hover {
    border-color: var(--accent-primary);
}

.squad-size-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.custom-size-row {
    display: flex;
    gap: 0.375rem;
}

.custom-size-row .input-sm {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
}

/* Squad Panel */
.squad-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 500px;
}

.squad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.squad-header h2 {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.squad-header h2 i {
    color: var(--accent-primary);
}

.squad-counter {
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.squad-counter.at-limit {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.squad-counter.near-limit {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.squad-list {
    max-height: 400px;
    overflow-y: auto;
}

.squad-category {
    margin-bottom: 1rem;
}

.squad-category:last-child {
    margin-bottom: 0;
}

.squad-category-header {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.squad-player-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 0.375rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.squad-player-row:hover {
    background: var(--bg-primary);
}

.squad-player-row.starting {
    border-left: 3px solid var(--accent-primary);
}

.squad-player-row.substitute {
    border-left: 3px solid var(--accent-secondary);
}

.squad-player-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.squad-player-details {
    flex: 1;
    min-width: 0;
}

.squad-player-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.squad-player-position {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.squad-player-link {
    display: block;
    font-size: 0.62rem;
    color: var(--accent-secondary);
    margin-top: 0.1rem;
}

.squad-player-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.squad-player-badge.starting {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
}

.squad-player-badge.sub {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-secondary);
}

.squad-player-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.squad-player-row:hover .squad-player-remove {
    opacity: 1;
}

.squad-player-remove:hover {
    color: var(--accent-danger);
}

.squad-actions {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.squad-actions .btn {
    width: 100%;
}

/* Add Player Modal */
.add-player-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.add-player-form .form-row {
    display: flex;
    gap: 0.75rem;
}

.add-player-form .form-row .form-group {
    flex: 1;
}

/* Squad Mode Active State */
.pitch-container.squad-mode .pitch-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.pitch-container.squad-mode .squad-panel {
    display: block;
}

/* ===== Builder Mobile First Overrides ===== */
.builder-mobile-jump {
    display: none;
}

@media (max-width: 900px) {
    .main-content {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 5.25rem;
    }

    .tab-content,
    .tab-content.active {
        height: auto;
        min-height: 100%;
    }

    #builder-tab {
        padding: 0.5rem;
        scroll-padding-top: 6.5rem;
    }

    .builder-mobile-jump {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
        position: sticky;
        top: 60px;
        z-index: 95;
        background: var(--bg-primary);
        padding: 0.35rem 0.15rem 0.5rem;
    }

    .builder-mobile-jump-btn {
        min-height: 42px;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .builder-mobile-jump-btn.active {
        border-color: var(--accent-primary);
        color: var(--text-primary);
        background: rgba(99, 102, 241, 0.16);
    }

    .builder-container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-height: 0;
    }

    .sidebar,
    .right-sidebar {
        width: 100%;
        max-width: none;
        display: block;
        overflow: visible;
        padding: 0;
        border: none;
        background: transparent;
    }

    .sidebar::before,
    .sidebar::after,
    .scroll-hint {
        display: none !important;
    }

    .sidebar .panel {
        width: 100%;
        min-width: 0;
        margin-bottom: 0.6rem;
    }

    .panel-header {
        min-height: 48px;
    }

    .pitch-container {
        order: 0;
        padding: 0;
        align-items: stretch;
        overflow: visible;
    }

    .pitch-wrapper {
        width: 100%;
        max-width: 100%;
        align-items: stretch;
    }

    #builderSetupSection,
    #builderPitchSection,
    #builderCustomizeSection {
        scroll-margin-top: 7rem;
    }

    .phase-toggle-container,
    .timeline-spotlight,
    .team-header,
    .line-tools,
    .pitch,
    .subs-bench,
    .squad-panel,
    .match-info-display {
        max-width: 100%;
    }

    .phase-toggle-container {
        position: sticky;
        top: 103px;
        z-index: 92;
        background: var(--bg-primary);
        margin-bottom: 0.5rem;
        padding: 0.4rem 0;
    }

    .phase-toggle {
        width: 100%;
        max-width: none;
    }

    .phase-btn {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    .copy-phase-btn {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    .line-tools {
        gap: 0.5rem;
        border-radius: 0;
        padding: 0.6rem;
    }

    .line-tools-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .line-tools-style {
        justify-content: space-between;
        width: 100%;
    }

    .annotation-style-select {
        flex: 1;
        min-height: 36px;
    }

    .line-tools-buttons .btn {
        justify-content: center;
        min-height: 42px;
        padding: 0.4rem;
        font-size: 0.72rem;
    }

    .line-tools-color {
        justify-content: space-between;
        width: 100%;
    }

    .pitch {
        width: 100%;
        height: auto;
        aspect-ratio: 0.69;
        border-radius: 0;
    }

    .subs-bench,
    .squad-panel {
        margin: 0;
        border-radius: var(--radius-md);
    }

    .subs-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .sub-player {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
    }

    .sub-assignment {
        min-width: 0;
    }

    .sub-assign-select,
    .sub-link-summary {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .builder-mobile-jump {
        top: 56px;
    }

    .builder-mobile-jump-btn {
        min-height: 40px;
        font-size: 0.72rem;
    }

    .phase-toggle-container {
        top: 98px;
    }

    .timeline-spotlight-copy p {
        font-size: 0.64rem;
    }

    .line-tools-buttons .btn {
        font-size: 0.66rem;
    }

    .pitch {
        aspect-ratio: 0.66;
    }

    .mobile-nav-btn {
        min-height: 44px;
    }
}