/* Championship Manager - Vintage Sports Card Theme */
/* Theme: Retro Sports Cards | Inspired by vintage trading cards */
/* Last updated: Dec 24, 2025 */

/* Google Fonts Import - Bebas Neue for display, Lato for body */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@400;700&display=swap');

:root {
    /* Vintage Sports Card Palette */
    --cream: #F5F0E6;
    --teal: #2A9D8F;
    --mustard: #E9C46A;
    --orange: #E76F51;
    --brown: #3D2C29;
    --cherry: #C1292E;

    /* Mapped to existing vars for compatibility */
    --bg-dark: #F5F0E6;
    --bg-medium: #FAF6F0;
    --bg-light: #FFFCF7;
    --bg-card: #ffffff;
    --bg-panel: #ffffff;
    --text-primary: #3D2C29;
    --text-secondary: #5a4a47;
    --text-muted: #8a7a77;
    --accent: #2A9D8F;
    --accent-hover: #238b7e;
    --success: #2A9D8F;
    --warning: #E9C46A;
    --danger: #C1292E;
    --border: #3D2C29;
    --border-light: rgba(61, 44, 41, 0.2);
    --table-header: #3D2C29;
    --table-row-hover: rgba(233, 196, 106, 0.2);

    /* Position colors */
    --pos-gk: #E9C46A;
    --pos-def: #2A9D8F;
    --pos-mid: #1565c0;
    --pos-fwd: #E76F51;
}

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

body {
    font-family: 'Lato', -apple-system, sans-serif;
    background-color: var(--cream);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.5;
    /* Subtle dot pattern background */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233D2C29' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Header */
header {
    background-color: var(--brown);
    padding: 1rem;
    border-bottom: 4px solid var(--mustard);
    position: relative;
}

header h1 {
    text-align: center;
    color: var(--cream);
    margin-bottom: 1rem;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 400;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
}

#user-info {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--cream);
}

#user-info button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--cream);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.2s, border-color 0.2s;
}

#user-info button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

nav button {
    background-color: var(--cream);
    color: var(--brown);
    border: 3px solid var(--brown);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    border-radius: 4px;
}

nav button:hover {
    background-color: var(--teal);
    color: var(--cream);
    border-color: var(--teal);
    transform: translateY(-1px);
}

nav button.active {
    background-color: var(--teal);
    color: var(--cream);
    border-color: var(--teal);
    box-shadow: 3px 3px 0px rgba(42, 157, 143, 0.4);
}

/* Main Content */
main {
    flex: 1;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Footer */
footer {
    background-color: var(--brown);
    padding: 0.75rem;
    text-align: center;
    border-top: 4px solid var(--mustard);
    color: var(--cream);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================================
   QUICK MATCH FLOATING BUTTON - Always visible, one-tap play
   ============================================================================ */
.quick-match-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--teal);
    color: white;
    border: 3px solid var(--brown);
    border-radius: 50px;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--brown);
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-match-fab:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--brown);
    background: var(--teal-dark, #1a6b5a);
}

.quick-match-fab:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--brown);
}

.quick-match-fab.disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.quick-match-fab .fab-icon {
    font-size: 1.2rem;
}

/* Hide on dashboard (already has play button) */
body.view-dashboard .quick-match-fab {
    display: none;
}

/* Pulse animation when match available */
@keyframes fab-pulse {
    0%, 100% { box-shadow: 4px 4px 0px var(--brown); }
    50% { box-shadow: 4px 4px 0px var(--brown), 0 0 0 8px rgba(42, 157, 143, 0.3); }
}

.quick-match-fab.has-match {
    animation: fab-pulse 2s infinite;
}

.quick-match-fab.loading {
    background: var(--text-muted);
    pointer-events: none;
    animation: none;
}

@keyframes fab-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.quick-match-fab.loading .fab-icon {
    animation: fab-spin 1s linear infinite;
}

/* ============================================================================
   ACHIEVEMENT POPUP - Dopamine hit notifications
   ============================================================================ */
.achievement-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    z-index: 10000;
    background: linear-gradient(135deg, var(--brown) 0%, #2d1f1a 100%);
    border: 4px solid var(--mustard);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90%;
    width: 360px;
}

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

.achievement-popup.hide {
    transform: translateX(-50%) translateY(-100px);
    opacity: 0;
}

.achievement-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.achievement-content {
    flex: 1;
}

.achievement-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mustard);
    margin-bottom: 0.2rem;
}

.achievement-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cream);
    margin-bottom: 0.2rem;
}

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

.achievement-points {
    background: var(--mustard);
    color: var(--brown);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
}

/* Achievement unlocked shine animation */
@keyframes achievement-shine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.achievement-popup.show::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(233, 196, 106, 0.3),
        transparent
    );
    background-size: 200% 100%;
    animation: achievement-shine 1s ease-out;
    pointer-events: none;
    border-radius: 8px;
}

/* Player Talk - Post Match */
.talk-players-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.talk-player-row {
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-width: auto;
}

.btn-praise {
    background: var(--teal);
    color: white;
    border: 1px solid var(--teal);
}

.btn-praise:hover {
    background: #238b7e;
}

.btn-criticize {
    background: transparent;
    color: var(--cherry);
    border: 1px solid var(--cherry);
}

.btn-criticize:hover {
    background: var(--cherry);
    color: white;
}

.talk-result {
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.talk-positive {
    background: rgba(42, 157, 143, 0.15);
    color: var(--teal);
}

.talk-negative {
    background: rgba(193, 41, 46, 0.15);
    color: var(--cherry);
}

.talk-neutral {
    background: rgba(233, 196, 106, 0.15);
    color: var(--orange);
}

.talk-skipped {
    color: var(--text-muted);
    text-align: center;
}

/* Enhanced Talk Section */
.talk-section {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: 4px;
}

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

.talk-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-primary);
}

.talk-counter {
    font-size: 0.85rem;
    color: var(--teal);
    font-weight: bold;
}

.talk-subtitle {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.talk-players-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.talk-player-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.talk-player-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.talk-shirt-num {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 1.8rem;
    text-align: center;
}

.talk-rating {
    font-size: 0.85rem;
    min-width: 2.2rem;
    text-align: center;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    color: white;
    font-weight: bold;
}

.talk-player-name {
    cursor: pointer;
    text-decoration: underline;
    color: var(--text-primary);
}

.talk-player-name:hover {
    color: var(--teal);
}

.talk-position {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-dark);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
}

.talk-highlights {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.talk-highlight {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-dark);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.talk-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.btn-expect {
    background: transparent;
    color: var(--orange);
    border: 1px solid var(--orange);
}

.btn-expect:hover {
    background: var(--orange);
    color: var(--bg-dark);
}

.talk-bonus {
    font-size: 0.75rem;
    color: var(--teal);
    margin-left: 0.5rem;
    font-style: italic;
}

/* Sort options - 50s vintage style, discrete */
.talk-sort-options {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.talk-sort-options:hover {
    opacity: 1;
}

.talk-sort-options .sort-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.25rem;
}

.btn-tiny {
    padding: 0.1rem 0.35rem;
    font-size: 0.6rem;
    min-width: auto;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-tiny:hover {
    color: var(--brown);
    border-bottom-color: var(--brown);
}

.btn-tiny.active {
    color: var(--brown);
    border-bottom: 1px solid var(--brown);
    font-weight: 600;
}

/* Talk actions container */
.talk-actions {
    margin-top: 0.4rem;
}

.talk-reaction {
    margin-top: 0.3rem;
}

/* Talked-to state */
.talk-player-row.talked-to {
    opacity: 0.85;
    border-left: 3px solid var(--teal);
}

/* Season Objectives */
.objective-panel {
    min-height: 120px;
}

.objective-panel.needs-objective {
    border: 2px dashed var(--orange);
}

.objective-prompt {
    text-align: center;
}

.objective-suggestion {
    background: var(--bg-dark);
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.objective-icon {
    font-size: 1.5rem;
}

.objective-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.objective-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.objective-info {
    flex: 1;
}

.objective-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-dark);
    border-radius: 4px;
    border-left: 3px solid;
}

.status-icon {
    font-weight: bold;
    font-size: 1.1rem;
}

.objective-rewards {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Generic Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none; /* Don't block clicks when hidden */
    transition: opacity 0.2s ease;
    padding: 1rem;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto; /* Enable clicks when visible */
}

.modal-content {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(-20px);
    transition: transform 0.2s ease;
}

.modal-overlay.show .modal-content {
    transform: translateY(0);
}

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

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

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

/* Objective Modal */
.objective-modal-content {
    max-width: 500px;
}

.objective-modal-content > p {
    padding: 0 1.25rem;
}

.objective-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1.25rem 1.25rem;
}

.objective-option {
    padding: 1rem;
    background: var(--bg-dark);
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.objective-option:hover {
    border-color: var(--teal);
    transform: translateY(-2px);
}

.objective-option.suggested {
    border-color: var(--orange);
}

.objective-option-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suggested-badge {
    font-size: 0.7rem;
    background: var(--orange);
    color: var(--bg-dark);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-weight: bold;
}

.objective-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.objective-stakes {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.objective-success {
    color: var(--success);
}

.objective-fail {
    color: var(--accent);
}

/* Risk badges for objectives */
.risk-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: auto;
}

.risk-badge.risk-too_easy {
    background: var(--text-muted);
    color: var(--bg-dark);
}

.risk-badge.risk-safe {
    background: var(--success);
    color: var(--bg-dark);
}

.risk-badge.risk-realistic {
    background: var(--teal);
    color: var(--bg-dark);
}

.risk-badge.risk-risky {
    background: var(--orange);
    color: var(--bg-dark);
}

.risk-badge.risk-very_risky {
    background: var(--accent);
    color: white;
}

/* Objective option risk styling */
.objective-option.risk-very_risky {
    border-color: var(--accent);
    border-style: dashed;
}

.objective-option.risk-risky {
    border-color: var(--orange);
}

.objective-option.risk-too_easy {
    opacity: 0.7;
}

/* Login Streak Popup */
.streak-popup {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--orange) 0%, var(--cherry) 100%);
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: top 0.4s ease-out;
    min-width: 280px;
}

.streak-popup.show {
    top: 80px;
}

.streak-popup.milestone {
    background: linear-gradient(135deg, var(--mustard) 0%, var(--orange) 100%);
    animation: streak-pulse 0.5s ease-out;
}

@keyframes streak-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

.streak-icon {
    font-size: 2rem;
    animation: streak-fire 0.8s ease-in-out infinite alternate;
}

@keyframes streak-fire {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.1) rotate(5deg); }
}

.streak-content {
    flex: 1;
}

.streak-day-count {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
}

.streak-count {
    font-size: 1.4rem;
}

.streak-message {
    font-size: 0.85rem;
    opacity: 0.9;
}

.streak-reward {
    text-align: center;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.streak-bonus {
    font-size: 1.3rem;
    font-weight: bold;
    font-family: 'Bebas Neue', sans-serif;
}

.streak-bonus-label {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
}

.streak-popup.milestone .streak-icon {
    font-size: 2.5rem;
}

.streak-popup.milestone .streak-bonus {
    font-size: 1.5rem;
    color: var(--brown);
}

/* Streak Narrative Content */
.streak-popup.has-narrative {
    max-width: 400px;
}

.streak-narrative {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.streak-narrative-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-light);
    border-radius: 4px;
}

.streak-narrative-item.sponsor {
    border-left: 3px solid var(--teal);
}

.streak-narrative-item.media {
    border-left: 3px solid var(--orange);
}

.streak-narrative-item.funny {
    border-left: 3px solid var(--brown);
    font-style: italic;
}

.narrative-icon {
    font-size: 1rem;
}

.narrative-text {
    flex: 1;
    color: var(--text-secondary);
}

.narrative-text strong {
    color: var(--text-primary);
}

.narrative-reward {
    font-weight: bold;
    color: var(--success);
    white-space: nowrap;
}

/* Weekly Challenges */
.challenges-panel {
    grid-column: span 2;
}

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

.challenge-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.challenge-item.completed {
    border-color: var(--teal);
    background: rgba(42, 157, 143, 0.1);
}

.challenge-item.claimed {
    opacity: 0.6;
    border-color: var(--text-muted);
}

.challenge-icon {
    font-size: 1.5rem;
    min-width: 2rem;
    text-align: center;
}

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

.challenge-name {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.9rem;
}

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

.challenge-progress-bar {
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    margin-top: 0.4rem;
    overflow: hidden;
}

.challenge-progress-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.challenge-item.completed .challenge-progress-fill {
    background: var(--success);
}

.challenge-reward-area {
    text-align: right;
    min-width: 70px;
}

.challenge-reward {
    font-weight: bold;
    color: var(--mustard);
    font-size: 0.9rem;
}

.challenge-claimed-badge {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-claim {
    background: var(--teal);
    color: white;
    border: none;
    font-weight: bold;
    animation: claim-pulse 1s ease-in-out infinite;
}

@keyframes claim-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.btn-claim:hover {
    background: #238b7e;
    animation: none;
}

@media (max-width: 600px) {
    .challenges-panel {
        grid-column: span 1;
    }
}

/* Achievement Gallery */
.achievement-category {
    margin-bottom: 1.5rem;
}

.achievement-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 2px solid var(--border);
    font-weight: bold;
    color: var(--text-primary);
}

.achievement-category-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.achievement-grid {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.achievement-card.unlocked {
    border-color: var(--teal);
    background: rgba(42, 157, 143, 0.08);
}

.achievement-card.locked {
    opacity: 0.5;
    filter: grayscale(50%);
}

.achievement-card-icon {
    font-size: 1.5rem;
    min-width: 2rem;
    text-align: center;
}

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

.achievement-card-name {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.achievement-card-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.achievement-card-points {
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 40px;
    text-align: right;
}

.achievement-card.unlocked .achievement-card-points {
    color: var(--teal);
}

.achievement-card.locked .achievement-card-points {
    color: var(--text-muted);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

th, td {
    padding: 0.6rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    background-color: var(--table-header);
    color: var(--cream);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

tr:hover {
    background-color: var(--table-row-hover);
}

/* Vintage Cards/Panels (retro-card style) */
.panel {
    background: linear-gradient(to bottom, var(--cream), #fff);
    border: 4px solid var(--brown);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 6px 6px 0px rgba(61, 44, 41, 0.25);
    position: relative;
    overflow: hidden;
}

/* Gradient stripe at top of panels */
.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--mustard) 50%, var(--orange) 100%);
}

.panel-header {
    color: var(--brown);
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--brown);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}

/* Vintage Buttons */
.btn {
    background-color: var(--cream);
    color: var(--brown);
    border: 3px solid var(--brown);
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    border-radius: 6px;
    box-shadow: 4px 4px 0px rgba(61, 44, 41, 0.3);
}

.btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(61, 44, 41, 0.3);
}

.btn-primary {
    background-color: var(--teal);
    border-color: var(--teal);
    color: var(--cream);
    box-shadow: 4px 4px 0px rgba(42, 157, 143, 0.4);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(42, 157, 143, 0.4);
}

.btn-success {
    background-color: var(--teal);
    border-color: var(--teal);
    color: var(--cream);
}

.btn-danger {
    background-color: var(--cherry);
    border-color: var(--cherry);
    color: var(--cream);
    box-shadow: 4px 4px 0px rgba(193, 41, 46, 0.4);
}

/* Vintage Scoreboard (for OVR, scores, etc) */
.scoreboard {
    background-color: var(--brown);
    color: var(--cream);
    font-family: 'Bebas Neue', Impact, sans-serif;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 4px 4px 0px rgba(61, 44, 41, 0.4);
}

/* Vintage Badge (position labels, etc) */
.vintage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

/* Vintage Stat Bar */
.stat-bar-vintage {
    height: 12px;
    background: var(--cream);
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border-light);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.stat-bar-vintage .fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    background: linear-gradient(90deg, var(--teal), var(--mustard));
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}

/* Position badges */
.pos-gk { color: var(--pos-gk); font-weight: 600; }
.pos-def { color: var(--pos-def); font-weight: 600; }
.pos-mid { color: var(--pos-mid); font-weight: 600; }
.pos-fwd { color: var(--pos-fwd); font-weight: 600; }

/* Skill bars */
.skill-value {
    display: inline-block;
    min-width: 2rem;
    text-align: right;
}

.skill-high { color: var(--success); font-weight: 600; }
.skill-mid { color: var(--warning); font-weight: 500; }
.skill-low { color: var(--accent); }

/* Dashboard specific */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.next-match {
    text-align: center;
    padding: 1.5rem;
}

.next-match .teams {
    font-size: 1.2rem;
    margin: 1rem 0;
    font-weight: 600;
}

.next-match .vs {
    color: var(--accent);
    margin: 0 0.5rem;
    font-weight: 700;
}

/* League table specific */
.league-table .position {
    width: 2rem;
    text-align: center;
}

.league-table .team-name {
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.league-table .highlight {
    background-color: var(--table-row-hover);
    border-left: 3px solid var(--accent);
}

/* Squad view specific
   ============================================================================
   IMPORTANT: The class ".player-row" is used in TWO different contexts:
   1. Squad table: <tr class="player-row"> - standard table rows
   2. Formation sidebar: <div class="player-row"> inside .formation-player-list - flex rows

   Formation sidebar styles MUST be scoped to ".formation-player-list .player-row" to
   avoid breaking the squad table layout. See formation section (~line 1027) for details.
   ============================================================================ */
.player-row {
    cursor: pointer;
}

.player-row:hover {
    background-color: var(--table-row-hover);
}

/* Match view */
.match-result {
    text-align: center;
    padding: 2rem;
}

.match-score {
    font-size: 3rem;
    color: var(--accent);
    margin: 1rem 0;
    font-weight: 700;
}

.match-events {
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
    padding: 1rem;
    background-color: var(--bg-light);
    border: 1px solid var(--border);
}

.match-event {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border);
}

.match-event .minute {
    color: var(--text-secondary);
    margin-right: 0.5rem;
    font-weight: 500;
}

.goal-event {
    color: var(--text-primary);
}

/* Card emoji styling - full solid color with thin border for visibility */
.yellow-card, .red-card {
    display: inline-block;
    padding: 0 1px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
    line-height: 1;
}

/* Google yellow star - used for MOTM, star players, etc. */
.google-star {
    color: #FBBC04;
}

/* Man of the Match Award */
.motm-award {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fffef5 0%, #f5f0e0 100%);
    border: 2px solid #d4af37;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.motm-title {
    color: #8b6914;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.motm-player {
    font-size: 1.1rem;
    font-weight: 700;
}

.motm-team {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.motm-reason {
    color: var(--success);
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: italic;
}

/* Loading */
.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

/* Skill Tooltip Button */
.skill-help {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    background-color: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer !important;
    margin-left: 4px;
    vertical-align: middle;
    transition: all 0.2s;
    user-select: none;
}

.skill-help:hover {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
    cursor: pointer !important;
}

/* Tooltip Modal Overlay */
.tooltip-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

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

.tooltip-content {
    background-color: var(--bg-card);
    border: 2px solid var(--accent);
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.tooltip-content h3 {
    color: var(--accent);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-weight: 700;
}

.tooltip-content p {
    color: var(--text-primary);
    line-height: 1.6;
}

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

.tooltip-close:hover {
    color: var(--accent);
}

/* Star Player Badge */
.star-player {
    color: #d4af37;
    margin-left: 4px;
    font-size: 0.9rem;
}

/* Your Team Star (Google-style yellow) */
.your-team-star {
    color: #fbbc04;
    font-size: 1.1em;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
    vertical-align: middle;
}

.star-player-row {
    background-color: rgba(212, 175, 55, 0.08);
}

.star-player-row:hover {
    background-color: rgba(212, 175, 55, 0.15);
}

/* Squad table column alignment */
.squad-table td,
.squad-table th {
    white-space: nowrap;
    text-align: center;
}

.squad-table td:nth-child(3),
.squad-table th:nth-child(3) {
    /* Name column - left align, allow wrapping */
    text-align: left;
    white-space: normal;
    min-width: 120px;
    max-width: 180px;
}

/* Responsive */
@media (max-width: 600px) {
    nav button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    table {
        font-size: 0.8rem;
    }

    th, td {
        padding: 0.4rem 0.3rem;
    }
}

/* Youth Academy */
.youth-row {
    transition: background 0.2s;
}

.youth-row:hover {
    background: var(--table-row-hover);
}

/* Youth Bio - Click to expand */
.youth-bio-cell {
    min-width: 150px;
    max-width: 300px;
    font-style: italic;
    color: var(--text-secondary);
    position: relative;
}

.youth-bio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
    background: var(--bg-light);
    border: 1px solid var(--border);
}

.youth-bio-toggle:hover {
    background: var(--table-row-hover);
    border-color: var(--accent);
}

.youth-bio-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.youth-bio-expand {
    color: var(--accent);
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

.youth-bio-full {
    display: none;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-radius: 4px;
    margin-top: 0.5rem;
    cursor: pointer;
    line-height: 1.5;
    font-style: italic;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    /* Keep within cell bounds */
    max-width: 280px;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.youth-bio-full:hover {
    background: var(--bg-light);
}

.youth-bio-full::after {
    content: ' ▲ tap to close';
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--accent);
    font-style: normal;
}

.btn-promote {
    background: var(--success);
    color: #fff;
    border: none;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
}

.btn-promote:hover {
    background: #256d28;
    transform: scale(1.05);
}

.btn-promote:active {
    transform: scale(0.98);
}

/* Scrollbar styling for light theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Links */
a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Select dropdowns */
select {
    font-family: inherit;
    font-size: inherit;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    background-color: var(--bg-light);
    color: var(--text-primary);
    cursor: pointer;
}

select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Input fields */
input[type="text"],
input[type="number"],
textarea {
    font-family: inherit;
    font-size: inherit;
    padding: 0.5rem;
    border: 1px solid var(--border);
    background-color: var(--bg-light);
    color: var(--text-primary);
}

input:focus,
textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ============================================================================
   FORMATION & LINEUP STYLES
   ============================================================================ */

/* Position fit badge colors */
.position-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    text-transform: uppercase;
}

.position-badge.natural {
    background: #2e7d32;
    color: #fff;
}

.position-badge.comfortable {
    background: #4caf50;
    color: #fff;
}

.position-badge.capable {
    background: #c17900;
    color: #fff;
}

.position-badge.awkward {
    background: #e65100;
    color: #fff;
}

.position-badge.emergency {
    background: #8b2500;
    color: #fff;
}

/* ============================================================================
   FORMATION VIEW - Hattrick Style
   ============================================================================ */

/* Two-column container */
.formation-container {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}

@media (max-width: 768px) {
    .formation-container {
        grid-template-columns: 1fr;
    }
    .formation-right {
        order: -1;
        max-height: 200px;
    }
}

.formation-left,
.formation-right {
    min-width: 0;
}

/* Panel styling */
.formation-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.formation-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--table-header);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.formation-panel-header select {
    padding: 0.25rem 0.5rem;
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

/* Pitch - wider horizontal layout for desktop with vintage pixelated grass */
.formation-pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 5/3;
    /* Base vintage grass gradient */
    background: linear-gradient(180deg, #4a8f5a 0%, #3d7a4d 50%, #4a8f5a 100%);
    overflow: hidden;
}

/* Halftone dot overlay for pixelated vintage feel */
.formation-pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 1px, transparent 1px);
    background-size: 4px 4px;
    z-index: 1;
}

/* Mowing stripe pattern overlay */
.formation-pitch::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0%,
        transparent 8%,
        rgba(255, 255, 255, 0.15) 8%,
        rgba(255, 255, 255, 0.15) 16%
    );
    z-index: 1;
}

@media (max-width: 768px) {
    .formation-pitch {
        aspect-ratio: 4/5;
    }

    /* Vertical mowing stripes for mobile */
    .formation-pitch::after {
        background: repeating-linear-gradient(
            180deg,
            transparent 0%,
            transparent 10%,
            rgba(255, 255, 255, 0.15) 10%,
            rgba(255, 255, 255, 0.15) 20%
        );
    }
}

.pitch-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* ============================================================================
   PITCH SLOTS - Clean Card Design
   Player cards on the tactical pitch
   ============================================================================ */
.pitch-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 125px;
    height: 52px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Inter', sans-serif;
    padding: 2px 3px;
    z-index: 5;
}

.pitch-slot.empty {
    background: rgba(0, 0, 0, 0.4);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    justify-content: center;
    align-items: center;
}

.pitch-slot.filled {
    background: rgba(20, 20, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 3px 4px;
    gap: 5px;
}

.pitch-slot.active {
    border-color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

.pitch-slot:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Drag & drop states */
.pitch-slot.dragging {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.9);
    border-color: #ffd700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    z-index: 100;
}

.pitch-slot.drag-over {
    border-color: #4ecca3 !important;
    border-width: 3px;
    box-shadow: 0 0 20px rgba(78, 204, 163, 0.9), inset 0 0 10px rgba(78, 204, 163, 0.3);
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(78, 204, 163, 0.3) !important;
}

/* Empty slot highlight when dragging over */
.pitch-slot.empty.drag-over {
    background: rgba(78, 204, 163, 0.5) !important;
    border-style: solid;
}

/* Slot face container (left side) */
.slot-face {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Face container in pitch slot
   Drag prevention: pointer-events:none ensures clicks/drags pass through to parent .pitch-slot */
.pitch-slot .player-face-small {
    width: 36px;
    height: 44px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    flex-shrink: 0;
}

/* Slot info container (right side - firstname + surname + OVR stacked) */
.slot-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: 0px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Prevent image/canvas inside face from being dragged separately */
.pitch-slot .player-face-small img,
.pitch-slot .player-face-small canvas {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* First name (right side, top) */
.slot-firstname {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
    text-align: left;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Surname (right side, middle) - main name */
.slot-surname {
    font-size: 0.65rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58px;
    text-align: left;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slot-name {
    font-size: 0.65rem;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44px;
    text-align: left;
    line-height: 1.3;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.slot-ovr {
    font-size: 0.65rem;
    color: var(--mustard);
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Player initials below face (left side) */
.slot-initials {
    font-size: 0.5rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    margin-top: 1px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* OVR label (right side, bottom) */
.slot-ovr-label {
    font-size: 0.55rem;
    color: var(--mustard);
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Position fit percentage (right side) */
.slot-fit {
    font-size: 0.6rem;
    color: var(--teal);
    font-weight: 700;
    text-align: left;
    line-height: 1.3;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Fit colors based on parent slot fit class */
.pitch-slot.can-do .slot-fit {
    color: var(--mustard);
}

.pitch-slot.last-resort .slot-fit {
    color: var(--orange);
}

.slot-number {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.55rem;
    font-weight: bold;
    color: var(--mustard);
    background: rgba(0, 0, 0, 0.5);
    padding: 0 3px;
    border-radius: 2px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 5;
}

.slot-position {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Position fit colors on pitch */
.pitch-slot.natural { border-color: #4ecca3; }
.pitch-slot.comfortable { border-color: #7dcea0; }
.pitch-slot.capable { border-color: #ffc107; }
.pitch-slot.awkward { border-color: #e67e22; }
.pitch-slot.emergency { border-color: #e94560; }

/* Substitutes strip */
.formation-subs-strip {
    background: var(--accent);
    padding: 0.5rem;
}

.formation-subs-header {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
    text-align: center;
}

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

.sub-slot {
    min-width: 70px;
    padding: 0.4rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Inter', sans-serif;
    gap: 0.2rem;
}

.sub-slot.empty {
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    min-height: 60px;
}

.sub-slot.filled {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.sub-slot.active {
    border-color: #ffd700 !important;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.sub-slot:hover {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.6);
}

.sub-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-weight: 600;
}

.sub-desc {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
}

.sub-role-label {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: absolute;
    top: 2px;
    left: 4px;
}

.sub-slot.filled {
    position: relative;
}

.sub-face-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-top: 0.25rem;
}

.sub-face {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Face placeholder with initial */
.sub-face-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark, #1a6b5a) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.sub-face-initial {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

/* Bench player popup */
.bench-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.bench-popup-content {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    min-width: 280px;
    max-width: 90%;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.bench-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.bench-popup-close:hover {
    color: var(--accent);
}

.bench-popup-header {
    text-align: center;
    margin-bottom: 1rem;
}

.bench-popup-role {
    font-size: 0.7rem;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.bench-popup-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bench-popup-pos {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.bench-popup-overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.75rem 0;
}

.bench-popup-ovr-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bench-popup-ovr-value {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.5rem;
    color: var(--brown);
    line-height: 1;
}

.bench-popup-stats {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-dark);
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.bench-popup-extra {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.bench-popup-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.sub-details {
    text-align: center;
}

.sub-name {
    font-size: 0.65rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.1;
    max-width: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub-info {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.sub-rating {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.sub-position {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ===== SUBSTITUTION RULES PANEL ===== */
.sub-rules-panel {
    border-top: 1px solid var(--border-light);
    margin-top: 0.5rem;
}

.sub-rules-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    background: var(--bg-dark);
    transition: background 0.2s;
}

.sub-rules-header:hover {
    background: var(--bg-medium);
}

.sub-rules-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.sub-preset-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: var(--teal);
    color: white;
    border-radius: 4px;
    font-weight: 500;
}

.sub-rules-expand {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.sub-rules-content {
    padding: 0.75rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
}

.sub-preset-section {
    margin-bottom: 0.75rem;
}

.sub-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.sub-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sub-preset-btn {
    flex: 1 1 auto;
    min-width: 125px;
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.sub-preset-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.sub-preset-btn.active {
    background: var(--teal);
    color: white;
    border-color: var(--teal);
}

.sub-custom-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-light);
}

.sub-rules-list {
    margin-bottom: 0.5rem;
}

.sub-rule-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0;
}

.sub-rule-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-style: normal;
}

.sub-preset-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--cream);
    border-radius: 4px;
    border-left: 3px solid var(--teal);
}

.sub-condition-hint {
    margin-top: 0.5rem;
}

.hint-text {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Vice Coach Preview */
.sub-vc-preview {
    margin-top: 0.75rem;
    padding: 0.6rem;
    background: var(--cream);
    border-radius: 6px;
}

.vc-behavior-list {
    margin: 0.4rem 0 0 1rem;
    padding: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.vc-behavior-list li {
    margin-bottom: 0.25rem;
}

.vc-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.vc-stat {
    color: var(--text-secondary);
}

.vc-behavior {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-style: italic;
}

.sub-rule-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
}

.sub-rule-row.disabled {
    opacity: 0.5;
}

.sub-rule-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.sub-rule-text {
    flex: 1;
    color: var(--text-primary);
}

.sub-rule-delete {
    background: none;
    border: none;
    color: var(--cherry);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.sub-rule-delete:hover {
    color: #a01f25;
}

.sub-add-rule {
    background: white;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px dashed var(--border-light);
}

.sub-add-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

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

.sub-add-row span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.sub-select {
    flex: 1;
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: white;
}

.sub-minute {
    width: 50px;
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    text-align: center;
}

/* Vice Coach info box when using VC preset */
.sub-vice-coach-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--warning);
    border-radius: 6px;
    margin-top: 0.5rem;
}

.vc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brown);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.vc-text {
    font-size: 0.8rem;
    color: var(--brown);
    line-height: 1.3;
}

.vc-text strong {
    display: block;
    margin-bottom: 0.15rem;
}

/* ===== POLISHED SUB RULES (1M+ Quality) ===== */

/* Preset button internals */
.sub-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.preset-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.preset-name {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sub-preset-desc {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.preset-desc-icon {
    font-size: 1rem;
}

/* Section header with count */
.sub-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.sub-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Toggle switch for rules */
.sub-rule-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}

.sub-rule-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 18px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.sub-rule-toggle input:checked + .toggle-slider {
    background-color: var(--success);
}

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

/* Rule row info */
.sub-rule-info {
    flex: 1;
    min-width: 0;
}

.sub-rule-players {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.sub-rule-when {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* Empty state */
.sub-rules-empty {
    text-align: center;
    padding: 1rem 0.5rem;
    background: var(--cream);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.empty-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    opacity: 0.6;
}

.empty-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

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

/* Add rule form */
.sub-add-form {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0.6rem;
    margin-top: 0.5rem;
}

.sub-add-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 0.5rem;
}

.sub-add-players {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.sub-arrow {
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sub-add-when {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}

.sub-minute-group,
.sub-condition-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sub-minute-group label,
.sub-condition-group label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sub-minute-group {
    flex: 0 0 50px;
}

.sub-condition-group {
    flex: 1;
}

.sub-add-btn {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
}

.sub-max-rules {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.5rem;
    font-style: italic;
}

.sub-add-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem;
    background: var(--cream);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--warning);
}

.sub-add-hint .hint-icon {
    font-size: 1rem;
}

/* Vice Coach detailed info (when selected) */
.sub-vice-coach-info {
    flex-direction: column;
    gap: 0.6rem;
}

.vc-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.vc-name-info {
    flex: 1;
}

.vc-name-info strong {
    display: block;
    font-size: 0.9rem;
    color: var(--brown);
}

.vc-meta {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.vc-skill {
    font-size: 0.7rem;
    color: var(--mustard);
    font-weight: 500;
}

.vc-style {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(0,0,0,0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.vc-behavior-box {
    background: rgba(255,255,255,0.5);
    border-radius: 4px;
    padding: 0.5rem;
}

.vc-behavior-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.vc-behavior-text {
    font-size: 0.8rem;
    color: var(--brown);
    font-style: italic;
}

/* Action buttons */
.formation-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    justify-content: center;
    border-top: 1px solid var(--border);
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-danger {
    background: var(--cherry);
    color: #fff;
}

.btn-danger:hover {
    background: #a01f25;
}

/* Remove zone for drag-to-remove */
.formation-remove-zone {
    display: none;
    padding: 0.75rem;
    text-align: center;
    background: rgba(193, 41, 46, 0.1);
    border: 2px dashed var(--cherry);
    border-radius: 4px;
    color: var(--cherry);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
    transition: all 0.2s;
}

/* Show remove zone when something is being dragged */
.formation-pitch:has(.pitch-slot.dragging) ~ .formation-remove-zone,
.formation-panel:has(.pitch-slot.dragging) .formation-remove-zone {
    display: block;
}

/* Fallback: always show the zone (for browsers without :has support) */
@supports not selector(:has(*)) {
    .formation-remove-zone {
        display: block;
    }
}

.formation-remove-zone.drag-over {
    background: rgba(193, 41, 46, 0.3);
    border-style: solid;
    transform: scale(1.02);
}

/* Lineup status */
.lineup-status {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.lineup-status.ok {
    color: var(--success);
}

.warning-text {
    color: var(--accent);
}

.warning-text.mild {
    color: var(--warning);
}

/* Player list (right sidebar) */
.formation-player-list {
    max-height: 500px;
    overflow-y: auto;
    background: var(--cream);
}

/* Instruction header when slot is active */
.player-list-instruction {
    padding: 0.6rem 0.8rem;
    background: var(--teal);
    color: var(--cream);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid var(--brown);
}

/* Default state when no slot selected */
.formation-player-list:empty::before {
    content: 'Click a position on the pitch';
    display: block;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .formation-player-list {
        max-height: 180px;
    }
}

/* Formation sidebar player rows
   ============================================================================
   CRITICAL: These styles MUST be scoped to ".formation-player-list .player-row"!

   The class ".player-row" is also used in the squad table as <tr class="player-row">.
   Without the ".formation-player-list" scope, "display: flex" here breaks the squad
   table layout, causing rows to display as giant cards instead of compact table rows.

   See squad view section (~line 258) for the other .player-row usage.
   ============================================================================ */
.formation-player-list .player-row {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    transition: all 0.15s;
    background: var(--cream);
}

.formation-player-list .player-row:last-child {
    border-bottom: none;
}

/* Already in lineup - greyed out */
.formation-player-list .player-row.selected {
    background: var(--table-header);
    opacity: 0.4;
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}

.formation-player-list .player-row.clickable {
    cursor: pointer;
}

.formation-player-list .player-row.clickable:hover {
    background: var(--table-row-hover);
}

/* Yellow highlight for suggested/best-fit players (like hattrick-clone) */
.formation-player-list .player-row.highlight {
    background: rgba(233, 196, 106, 0.35);
    border-left: 3px solid var(--mustard);
}

.formation-player-list .player-row.highlight:hover {
    background: rgba(233, 196, 106, 0.5);
}

/* In-lineup indicator - player already on pitch or bench */
.formation-player-list .player-row.in-lineup {
    opacity: 0.55;
    background: rgba(128, 128, 128, 0.1);
}
.formation-player-list .player-row.in-lineup:hover {
    opacity: 0.7;
}

/* Badge showing player is already in lineup */
.in-lineup-badge {
    color: var(--mustard);
    font-size: 0.65rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Position fit text colors based on fit class */
.formation-player-list .player-row.natural .player-row-fit-text { color: var(--teal); }
.formation-player-list .player-row.comfortable .player-row-fit-text { color: #4caf50; }
.formation-player-list .player-row.capable .player-row-fit-text { color: var(--mustard); }
.formation-player-list .player-row.awkward .player-row-fit-text { color: var(--orange); }
.formation-player-list .player-row.emergency .player-row-fit-text { color: var(--cherry); }

/* Position badge colors in player rows */
.player-row-pos {
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    font-weight: 600;
}

.player-row-num {
    width: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.player-row-name {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-row-pos {
    width: 28px;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Overall rating (when no slot selected) */
.player-row-ovr {
    width: 36px;
    text-align: right;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Fit bar container (when slot selected) */
.player-row-fit-container {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 80px;
}

.player-row-fit-bar {
    flex: 1;
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    min-width: 40px;
}

.player-row-fit-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.player-row-fit-text {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
}

/* OVR displayed inline with fit % */
.player-row-ovr-inline {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-medium);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Header row for alternatives list */
.player-row.header-row {
    background: var(--brown);
    color: var(--cream);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    border-bottom: 2px solid var(--mustard);
    cursor: default;
}

.player-row.header-row:hover {
    background: var(--brown);
}

.header-row .player-row-fit-container {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.header-row .header-fit,
.header-row .header-ovr {
    font-size: 0.65rem;
}

.best-fit-badge {
    color: var(--mustard);
    font-size: 0.8rem;
}

/* Current Player Card (shown when occupied slot selected) */
.current-player-card {
    background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-light) 100%);
    border: 2px solid var(--border);
    border-radius: 6px;
    margin: 0.5rem;
    overflow: hidden;
}

.current-player-header {
    background: var(--brown);
    padding: 0.4rem 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.current-label {
    color: var(--mustard);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.current-player-info {
    padding: 0.6rem;
}

.current-player-name {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.1rem;
    color: var(--brown);
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.current-player-meta {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.current-ovr {
    background: var(--brown);
    color: var(--cream);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
}

.current-pos {
    background: var(--teal);
    color: white;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
}

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

.current-player-details {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.current-form {
    font-size: 0.8rem;
    letter-spacing: -1px;
}

.current-fit {
    font-size: 0.75rem;
    font-weight: 700;
}

.current-player-stats {
    display: flex;
    gap: 0.6rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-light);
    padding-top: 0.4rem;
    margin-top: 0.3rem;
}

.current-player-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-dark);
    border-top: 1px solid var(--border-light);
}

.current-player-actions .btn {
    flex: 1;
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
}

.current-player-actions .btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.current-player-actions .btn-danger:hover {
    background: var(--danger);
    color: white;
}

/* Help message when no slot selected */
.player-list-help {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.player-list-help p {
    margin: 0;
    font-size: 0.9rem;
}

/* Remove option row */
.formation-player-list .player-row.remove-option {
    background: rgba(139, 37, 0, 0.1);
    border-bottom: 2px solid var(--accent);
}

.formation-player-list .player-row.remove-option:hover {
    background: rgba(139, 37, 0, 0.2);
}

.formation-player-list .player-row.remove-option .player-row-num {
    color: var(--accent);
    font-weight: bold;
}

.formation-player-list .player-row.remove-option .player-row-name {
    color: var(--accent);
}

/* Player instruction controls in sidebar */
.instruction-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
}

.instruction-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.instr-btn {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg-light);
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 3px;
    font-family: inherit;
}

.instr-btn:hover {
    background: var(--table-row-hover);
    color: var(--text-primary);
}

.instr-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Instruction indicator on pitch slot */
.slot-instruction {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.5rem;
    line-height: 1;
}

.pitch-slot.offensive .slot-instruction {
    color: #4ecca3;
}

.pitch-slot.defensive .slot-instruction {
    color: #5dade2;
}

/* Slot border color for instruction */
.pitch-slot.offensive {
    border-color: #4ecca3 !important;
}

.pitch-slot.defensive {
    border-color: #5dade2 !important;
}

.pitch-slot.towards-wing {
    border-color: #f39c12 !important;
}

.pitch-slot.towards-middle {
    border-color: #9b59b6 !important;
}

.pitch-slot.towards-wing .slot-instruction,
.pitch-slot.towards-middle .slot-instruction {
    font-size: 0.55rem;
}

/* Header controls for formation and tactic dropdowns */
.header-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.vc-formation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    background: var(--warning);
    color: var(--brown);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Auto-detected formation badge */
.formation-detected {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    background: var(--teal);
    color: var(--brown);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em;
}

#tactic-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#tactic-select {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
}

/* Clickable arrow indicators on pitch slots */
.slot-arrow {
    position: absolute;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 10;
    user-select: none;
    line-height: 1;
    padding: 2px;
}

.slot-arrow:hover {
    color: rgba(255, 255, 255, 0.8);
    transform: scale(1.3);
}

.slot-arrow.on {
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Arrow positions - OUTSIDE the player image */
.slot-arrow.up {
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}

.slot-arrow.down {
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
}

.slot-arrow.left {
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
}

.slot-arrow.right {
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
}

.slot-arrow.up:hover,
.slot-arrow.down:hover {
    transform: translateX(-50%) scale(1.3);
}

.slot-arrow.left:hover,
.slot-arrow.right:hover {
    transform: translateY(-50%) scale(1.3);
}

.slot-arrow.up.on,
.slot-arrow.down.on {
    transform: translateX(-50%);
}

.slot-arrow.left.on,
.slot-arrow.right.on {
    transform: translateY(-50%);
}

/* ============================================================================
   PLAYER POPUP - Quick stats view when clicking player on pitch
   ============================================================================ */
.player-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.player-popup {
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 280px;
    max-width: 90vw;
    position: relative;
    animation: slideUp 0.2s ease;
}

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

.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

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

.popup-header {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.popup-face {
    width: 60px;
    height: 75px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-light);
    flex-shrink: 0;
}

.popup-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popup-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

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

.popup-overall {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 4px;
}

.popup-skills {
    padding: 12px 16px;
}

.skill-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--bg-light);
}

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

.skill-row span:first-child {
    color: var(--text-secondary);
}

.skill-val {
    font-weight: 600;
    color: var(--text-primary);
}

.popup-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

/* Stats Help Modal */
.help-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
    padding: 1rem;
}

.help-modal {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    width: 480px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.2s ease;
}

.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--accent);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}

.help-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
}

.help-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.help-modal-close:hover {
    color: var(--text-primary);
}

.help-modal-content {
    padding: 1rem 1.25rem;
}

.help-section {
    margin-bottom: 1.25rem;
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mustard);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.help-stat {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.help-stat-name {
    font-weight: 600;
    color: var(--teal);
    min-width: 80px;
    flex-shrink: 0;
}

.help-stat-desc {
    color: var(--text-secondary);
}

.help-tip {
    background: rgba(233, 196, 106, 0.15);
    border-left: 3px solid var(--mustard);
    padding: 0.6rem 0.8rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-radius: 0 4px 4px 0;
}

.help-tip strong {
    color: var(--mustard);
}

/* ============================================================================
   NEW SQUAD VIEW STYLES (Simple + Detailed)
   ============================================================================ */

/* Squad Header */
.squad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
}

.squad-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scouting-badge {
    font-size: 0.75rem;
    color: var(--warning);
    font-weight: 500;
}

/* Team Motto */
.team-motto {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    cursor: default;
}

.team-motto[onclick] {
    cursor: pointer;
}

.team-motto[onclick]:hover {
    color: var(--text-primary);
}

.team-motto .edit-icon {
    font-size: 0.75rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.team-motto:hover .edit-icon {
    opacity: 1;
}

.squad-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.team-select {
    padding: 0.4rem 0.75rem;
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.view-toggle-btn {
    padding: 0.4rem 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.view-toggle-btn:hover {
    background: var(--accent-hover);
}

/* Position Filters */
.position-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.pos-filter {
    padding: 0.4rem 1rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
}

.pos-filter:hover {
    background: var(--table-header);
    color: var(--text-primary);
}

.pos-filter.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Filter toggle button */
.pos-filter.filter-toggle {
    background: var(--mustard);
    color: var(--brown);
    border-color: var(--mustard);
    margin-left: auto;
}

.pos-filter.filter-toggle:hover {
    background: #d4a84a;
}

/* Stats sort mode */
.position-filters.stats-filters {
    background: rgba(233, 196, 106, 0.1);
    padding: 0.5rem;
    border-radius: 8px;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.filter-row-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 75px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-filters .pos-filter {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

.stats-filters .pos-filter.filter-toggle {
    margin-left: auto;
}

/* ============================================================================
   SIMPLE VIEW (Mobile-First Cards)
   ============================================================================ */
.squad-simple-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Vintage Player Card (Simple View) */
.squad-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(to bottom, var(--cream), #fff);
    border: 4px solid var(--brown);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 4px 4px 0px rgba(61, 44, 41, 0.25);
    position: relative;
}

/* Dashed inner border for vintage feel */
.squad-card::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px dashed rgba(61, 44, 41, 0.12);
    border-radius: 6px;
    pointer-events: none;
}

.squad-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px rgba(61, 44, 41, 0.3);
}

.squad-card:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(61, 44, 41, 0.25);
}

.squad-card.star {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.2) 0%, #fff 100%);
    border-color: var(--mustard);
}

.squad-card-face {
    flex-shrink: 0;
}

.squad-card-face .player-face-small {
    width: 60px;
    height: 75px;
    background: var(--cream);
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border-light);
}

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

.squad-card-name {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--brown);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 1px;
}

.squad-card-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.squad-card-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.stat-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-badge.goals {
    background: var(--teal);
    color: var(--cream);
}

.stat-badge.assists {
    background: var(--mustard);
    color: var(--brown);
}

.squad-card-right {
    text-align: center;
    flex-shrink: 0;
}

.squad-card-overall {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    /* Scoreboard style */
    background-color: var(--brown);
    color: var(--cream);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 3px 3px 0px rgba(61, 44, 41, 0.4);
}

.squad-card-pos {
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.star-badge {
    color: var(--mustard);
    font-size: 1.2rem;
}

.suspended-icon {
    margin-left: 4px;
    color: var(--cherry);
}

/* ============================================================================
   DETAILED VIEW (Table with Skill Bars)
   ============================================================================ */
.squad-table-wrap {
    overflow-x: auto;
}

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

.squad-detailed-table th {
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.squad-detailed-table th:hover {
    color: var(--accent);
}

.squad-detailed-table th.active {
    color: var(--accent);
}

.sort-arrow {
    display: inline-block;
    width: 12px;
    margin-left: 2px;
}

.squad-detailed-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}

.squad-detailed-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

.squad-detailed-table tbody tr:hover {
    background: var(--table-row-hover);
}

.squad-detailed-table tbody tr.star-row {
    background: linear-gradient(90deg, #fffef8, transparent);
}

.cell-player {
    text-align: left !important;
}

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

.shirt-num {
    width: 24px;
    height: 24px;
    background: var(--table-header);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.player-cell .player-face-small {
    width: 32px;
    height: 40px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.player-info {
    min-width: 0;
}

.player-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-pos {
    font-size: 0.7rem;
}

.cell-value {
    color: var(--success);
    font-weight: 500;
}

/* Skill Bars for Detailed View */
.skill-bar-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.skill-bar {
    width: 50px;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.skill-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.skill-bar-fill.high {
    background: linear-gradient(90deg, var(--success), #4caf50);
}

.skill-bar-fill.mid {
    background: linear-gradient(90deg, var(--warning), #ffa726);
}

.skill-bar-fill.low {
    background: linear-gradient(90deg, var(--accent), #e65100);
}

.skill-bar-wrap .skill-val {
    font-size: 0.7rem;
    color: var(--text-muted);
    width: 18px;
    text-align: right;
}

/* Hattrick-Style Detailed View (Variant C - Vintage) */
.ht-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ht-player {
    background: linear-gradient(to bottom, var(--cream), #fff);
    border: 4px solid var(--brown);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 4px 4px 0px rgba(61, 44, 41, 0.25);
    position: relative;
}

/* Dashed inner border */
.ht-player::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px dashed rgba(61, 44, 41, 0.12);
    border-radius: 6px;
    pointer-events: none;
}

.ht-player:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px rgba(61, 44, 41, 0.3);
}

.ht-player.star {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.25) 0%, #fff 100%);
    border-color: var(--mustard);
}

.ht-top {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: 0.25rem;
}

.ht-face .player-face-medium {
    width: 70px;
    height: 88px;
    background: var(--cream);
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border-light);
}

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

.ht-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.ht-name {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--brown);
    letter-spacing: 1px;
    line-height: 1.1;
}

.ht-overall {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    /* Scoreboard style */
    background-color: var(--brown);
    color: var(--cream);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 3px 3px 0px rgba(61, 44, 41, 0.4);
}

.ht-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ht-quick-stats {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    flex-wrap: wrap;
    background: rgba(61, 44, 41, 0.05);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

.ht-quick-stat span:first-child {
    color: var(--text-muted);
}

.ht-quick-stat span:last-child {
    font-weight: 700;
}

/* Last 5 games form display */
.ht-form-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0.4rem 0.75rem;
    background: rgba(61, 44, 41, 0.03);
    border-radius: 4px;
}

.ht-form-row .form-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.form-pip {
    display: inline-block;
    min-width: 28px;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    text-align: center;
}

.ht-skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--border-light);
}

.ht-skill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.ht-skill-label {
    width: 70px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.ht-skill-bar {
    flex: 1;
    height: 12px;
    background: var(--cream);
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border-light);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.ht-skill-fill {
    height: 100%;
    border-radius: 4px;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}

.ht-skill-fill.excellent { background: linear-gradient(90deg, var(--teal), #4caf50); }
.ht-skill-fill.good { background: linear-gradient(90deg, #1565c0, #42a5f5); }
.ht-skill-fill.average { background: linear-gradient(90deg, var(--mustard), #ffa726); }
.ht-skill-fill.poor { background: linear-gradient(90deg, var(--orange), var(--cherry)); }

.ht-skill-value {
    width: 28px;
    text-align: right;
    font-weight: 700;
    color: var(--brown);
    font-size: 0.9rem;
}

.ht-skill-value {
    width: 24px;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

/* Card badges for yellow/red cards */
.card-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    margin: 0 2px;
}

.card-badge.yellow {
    background: #ffc107;
    color: #000;
}

/* ============================================================================
   BOB VIEW (Card Grid - like hattrick-clone app)
   ============================================================================ */
.bob-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.bob-card {
    background: linear-gradient(to bottom, var(--cream), #fff);
    border: 4px solid var(--brown);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 4px 4px 0px rgba(61, 44, 41, 0.25);
    position: relative;
}

/* Dashed inner border */
.bob-card::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px dashed rgba(61, 44, 41, 0.12);
    border-radius: 6px;
    pointer-events: none;
}

.bob-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px rgba(61, 44, 41, 0.3);
}

.bob-card.star {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.25) 0%, #fff 100%);
    border-color: var(--mustard);
}

.bob-card-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: 0.25rem;
}

.bob-card-avatar {
    flex-shrink: 0;
}

.player-face-bob {
    width: 70px;
    height: 88px;
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-light);
}

.bob-card-title {
    flex: 1;
    min-width: 0;
}

.bob-card-firstname {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.3rem;
    color: var(--brown);
    letter-spacing: 1px;
    line-height: 1;
}

.bob-card-lastname {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.8rem;
    color: var(--brown);
    letter-spacing: 1px;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Captain badges */
.captain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mustard);
    color: var(--brown);
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.5px;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.captain-badge.vc {
    background: var(--teal);
    color: var(--cream);
}

.captain-badge.third {
    background: var(--orange);
    color: var(--brown);
}

/* Captain Panel (Formation View) */
.captain-panel {
    margin-top: 1rem;
}

.captain-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.captain-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.captain-row.vacant {
    opacity: 0.7;
    border-style: dashed;
}

.captain-badge-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
}

.captain-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.captain-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.captain-lead {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

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

.captain-actions {
    display: flex;
    gap: 0.25rem;
}

.captain-select {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: var(--text);
    cursor: pointer;
}

.captain-tip {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s;
}

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

.bob-card-position {
    font-size: 0.7rem;
}

.bob-card-pos-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bob-card-flag {
    font-size: 1rem;
}

.bob-card-overall {
    text-align: center;
    flex-shrink: 0;
}

.bob-card-overall .scoreboard {
    font-size: 2.5rem;
    padding: 0.25rem 0.75rem;
}

.bob-card-overall-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 4px;
}

.bob-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.bob-stat-box {
    background: rgba(61, 44, 41, 0.05);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-light);
}

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

.bob-stat-box-value {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.8rem;
    color: var(--brown);
    line-height: 1;
}

.bob-card-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bob-stat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bob-stat-label {
    width: 55px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bob-stat-bar {
    flex: 1;
    height: 12px;
    background: var(--cream);
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border-light);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.bob-stat-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}

.bob-stat-value {
    width: 35px;
    text-align: right;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--brown);
}

/* Compact strip: #1 · 24y · 😐 · £50K */
.bob-card-strip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: rgba(61, 44, 41, 0.04);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--brown);
}

.strip-item {
    font-weight: 700;
    white-space: nowrap;
}

.strip-sep {
    color: var(--text-muted);
    font-weight: 400;
    user-select: none;
}

.strip-value {
    color: var(--teal);
    font-weight: 700;
}

.strip-gp {
    margin-left: auto;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Slim bars: label-bar-value rows */
.bob-card-bars-slim {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.bob-card-bars-slim .bob-stat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bob-card-bars-slim .bob-stat-label {
    width: 55px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
}

.bob-card-bars-slim .bob-stat-bar {
    flex: 1;
    height: 8px;
    background: var(--cream);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.bob-card-bars-slim .bob-stat-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.bob-card-bars-slim .bob-stat-value {
    width: auto;
    min-width: 36px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Performance row: Avg · Form · Last 5 pills */
.bob-card-perf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.perf-label {
    color: var(--text-muted);
    font-weight: 600;
}

.perf-val {
    font-weight: 700;
}

.perf-dot {
    color: var(--text-muted);
    user-select: none;
}

.perf-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.bob-card-injury {
    margin-top: 0.75rem;
    background: rgba(193, 41, 46, 0.1);
    border: 2px solid var(--cherry);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cherry);
    font-weight: 700;
    font-size: 0.8rem;
}

.bob-card-listed {
    margin-top: 0.5rem;
    background: rgba(233, 196, 106, 0.15);
    border: 2px solid var(--mustard);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mustard);
    font-weight: 700;
    font-size: 0.75rem;
}

/* Injured card overlay */
.bob-card.injured {
    opacity: 0.7;
    position: relative;
}

.bob-card.injured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(193, 41, 46, 0.05) 10px,
        rgba(193, 41, 46, 0.05) 20px
    );
    pointer-events: none;
    border-radius: 12px;
}

/* Player trait badges */
.bob-card-traits {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    min-height: 32px; /* Fixed height for consistent cards */
}

.trait-badge {
    font-size: 1.1rem;
    padding: 0.15rem 0.3rem;
    background: rgba(233, 196, 106, 0.2);
    border-radius: 4px;
    cursor: help;
    flex-shrink: 0;
}

.trait-badge:hover {
    background: rgba(233, 196, 106, 0.4);
    transform: scale(1.1);
}

.trait-badge-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trait-badge-empty {
    /* Invisible placeholder for consistent height */
    display: block;
    height: 1.1rem;
}

/* Traits list in player detail */
.traits-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trait-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.trait-item:hover {
    background: var(--table-row-hover);
}

.trait-item.trait-hidden {
    opacity: 0.6;
    border-style: dashed;
}

.trait-icon {
    font-size: 1.5rem;
    width: 2rem;
    text-align: center;
}

.trait-info {
    flex: 1;
}

.trait-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.trait-effect {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.trait-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-style: italic;
}

/* Responsive: 2 columns on medium screens, 1 on small */
@media (max-width: 768px) {
    .bob-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 480px) {
    .bob-grid {
        grid-template-columns: 1fr;
    }

    .bob-card-lastname {
        font-size: 1.5rem;
    }

    .bob-card-overall .scoreboard {
        font-size: 2rem;
    }
}

.card-badge.red {
    background: #ff4444;
    color: #fff;
}

/* ============================================================================
   BOB VIEW - Player Detail Page
   ============================================================================ */
.bob-detail-container {
    max-width: 900px;
    margin: 0 auto;
}

.bob-detail-card {
    background: linear-gradient(to bottom, var(--cream), #fff);
    border: 4px solid var(--brown);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 6px 6px 0px rgba(61, 44, 41, 0.25);
    position: relative;
    margin-bottom: 1rem;
}

.bob-detail-card::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px dashed rgba(61, 44, 41, 0.12);
    border-radius: 6px;
    pointer-events: none;
}

.bob-detail-card.star {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.25) 0%, #fff 100%);
    border-color: var(--mustard);
}

.bob-detail-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.bob-detail-avatar .player-face-large {
    width: 120px;
    height: 150px;
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid var(--border-light);
}

.bob-detail-title {
    flex: 1;
    min-width: 200px;
}

.bob-detail-firstname {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem;
    color: var(--brown);
    letter-spacing: 1px;
    line-height: 1;
}

.bob-detail-lastname {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 2.5rem;
    color: var(--brown);
    letter-spacing: 2px;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.bob-detail-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.bob-detail-overall {
    text-align: center;
    flex-shrink: 0;
}

.bob-detail-overall-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 4px;
}

.bob-detail-shirt {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    display: inline-block;
}

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

.bob-detail-panel {
    background: linear-gradient(to bottom, var(--cream), #fff);
    border: 4px solid var(--brown);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 4px 4px 0px rgba(61, 44, 41, 0.25);
    position: relative;
}

.bob-detail-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--mustard) 50%, var(--orange) 100%);
    border-radius: 8px 8px 0 0;
}

.bob-detail-panel-header {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.3rem;
    color: var(--brown);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-light);
    margin-top: 0.25rem;
}

.bob-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.bob-detail-info-item {
    background: rgba(61, 44, 41, 0.05);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border-light);
}

.bob-detail-info-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.bob-detail-info-value {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.4rem;
    color: var(--brown);
    line-height: 1;
}

.bob-detail-skills-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bob-detail-stat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bob-detail-stat-label {
    width: 80px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bob-detail-stat-bar {
    flex: 1;
    height: 16px;
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-light);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.bob-detail-stat-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}

.bob-detail-stat-value {
    width: 50px;
    text-align: right;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brown);
}

/* Responsive for Bob Detail */
@media (max-width: 600px) {
    .bob-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .bob-detail-title {
        text-align: center;
    }

    .bob-detail-lastname {
        font-size: 2rem;
    }

    .bob-detail-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .squad-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .squad-controls {
        width: 100%;
        justify-content: space-between;
    }

    .squad-card {
        padding: 0.6rem;
    }

    .squad-card-face .player-face-small {
        width: 40px;
        height: 50px;
    }

    .squad-card-overall {
        font-size: 1.4rem;
    }
}

/* =====================================================
   SCHOOL LEAGUE STYLES
   ===================================================== */

.school-nav-btn {
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    color: white;
    border: 2px solid #2c5f8f;
}

.school-nav-btn:hover {
    background: linear-gradient(135deg, #5aa0e9 0%, #4a90d9 100%);
}

.school-league-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.school-header-panel {
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    color: white;
    border: none;
}

.school-header-panel .panel-header {
    color: white;
    border-bottom-color: rgba(255,255,255,0.3);
}

.school-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Energy Bar */
.energy-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0,0,0,0.2);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.energy-label {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.energy-bar-outer {
    flex: 1;
    height: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
}

.energy-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #ffd700 0%, #ffec80 50%, #ffd700 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.energy-count {
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
}

/* School Grid Layout */
.school-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .school-grid {
        grid-template-columns: 1fr;
    }
}

/* School Team Panel */
.school-team-panel .panel-header {
    font-size: 1.3rem;
}

.school-record {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.school-points {
    font-weight: 700;
    color: var(--teal);
}

.prospects-label {
    font-weight: 700;
    color: var(--brown);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.25rem;
}

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

/* Prospect Card */
.school-prospect-card {
    background: var(--cream);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.school-prospect-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-color: var(--teal);
}

.prospect-position {
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--brown);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.prospect-name {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.1rem;
    color: var(--brown);
    letter-spacing: 0.5px;
}

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

.prospect-stars {
    font-size: 0.7rem;
    margin: 0.25rem 0;
}

.prospect-discovery {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.prospect-discovery .discovery-bar {
    height: 100%;
    background: var(--teal);
    transition: width 0.3s ease;
}

.prospect-move {
    font-size: 0.7rem;
    color: var(--accent);
    margin-top: 0.25rem;
}

/* Next Match Panel */
.school-match-panel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.school-next-match {
    text-align: center;
    padding: 1rem;
}

.match-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.match-teams {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.match-teams .vs {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.match-teams .your-school {
    font-weight: 700;
    color: var(--teal);
}

.play-school-match-btn {
    background: linear-gradient(135deg, var(--teal) 0%, #1a8a7a 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.play-school-match-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26,138,122,0.4);
}

.play-school-match-btn:disabled {
    background: var(--text-secondary);
    cursor: not-allowed;
}

.watch-ad-btn {
    display: block;
    margin-top: 0.75rem;
    background: var(--brown);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.watch-ad-btn:hover {
    background: #5a4a3a;
}

/* Season Complete */
.school-season-complete {
    text-align: center;
    padding: 1.5rem;
}

.school-season-complete .trophy-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.school-season-complete .complete-text {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem;
    color: var(--brown);
    margin-bottom: 1rem;
}

.new-school-season-btn {
    background: var(--teal);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

/* School Table */
.school-table {
    font-size: 0.9rem;
}

.school-table .player-row {
    background: rgba(26,138,122,0.1);
}

.school-table .player-row td {
    font-weight: 600;
}

/* School Tips */
.school-tips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.school-tips li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.school-tips li:last-child {
    border-bottom: none;
}

.school-tips li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: bold;
}

/* School Player Modal */
.school-player-modal {
    max-width: 400px;
}

.school-player-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.player-position-badge {
    font-weight: 700;
    font-size: 1.2rem;
    background: var(--brown);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.player-name-age {
    flex: 1;
}

.player-full-name {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.5rem;
    color: var(--brown);
    letter-spacing: 1px;
}

.player-age-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

.discovery-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.discovery-bar-large {
    height: 12px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.discovery-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal) 0%, #2cb5a0 100%);
    transition: width 0.3s ease;
}

.school-player-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.skill-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--cream);
    border-radius: 4px;
}

.skill-row span:first-child {
    font-weight: 700;
    color: var(--brown);
}

.skill-row span:last-child {
    font-weight: 600;
}

.skills-hidden,
.potential-hidden {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 1rem;
    background: var(--cream);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.school-potential {
    text-align: center;
    font-size: 1.1rem;
    padding: 0.75rem;
    background: var(--cream);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.special-move-revealed {
    text-align: center;
    font-size: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffec80 100%);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
}

.special-move-hidden {
    text-align: center;
    font-size: 0.9rem;
    padding: 0.75rem;
    background: var(--cream);
    border-radius: 8px;
    margin-bottom: 1rem;
    color: var(--accent);
    font-style: italic;
}

.recruit-to-academy-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--teal) 0%, #1a8a7a 100%);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recruit-to-academy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26,138,122,0.4);
}

/* =====================================================
   MARKET NEWS PANEL
   ===================================================== */

.market-news-panel {
    border-left: 4px solid var(--mustard);
}

.market-news-panel .news-section {
    margin-bottom: 0.75rem;
}

.market-news-panel .news-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.market-news-panel .news-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-light);
}

.market-news-panel .news-item:last-child {
    border-bottom: none;
}

.market-news-panel .news-item.hot {
    background: rgba(233, 196, 106, 0.15);
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.market-news-panel .news-item.hot:hover {
    background: rgba(233, 196, 106, 0.3);
}

.market-news-panel .news-icon {
    flex-shrink: 0;
}

.market-news-panel .news-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-news-panel .news-amount {
    font-weight: 700;
    color: var(--teal);
    flex-shrink: 0;
}

/* =====================================================
   VICE COACH STYLES
   ===================================================== */

.vice-coach-panel {
    border-left: 4px solid var(--brown);
}

.vice-coach-panel.delegated {
    border-left-color: var(--teal);
    background: linear-gradient(135deg, rgba(26,138,122,0.05) 0%, transparent 100%);
}

.vice-coach-panel.no-coach {
    border-left-color: var(--text-muted);
}

.vice-coach-info {
    margin-bottom: 1rem;
}

.vc-name {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.4rem;
    color: var(--brown);
    letter-spacing: 1px;
}

.vc-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
}

.vc-skill-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.vc-skill-badge.rookie {
    background: #dc3545;
    color: white;
}

.vc-skill-badge.competent {
    background: #ffc107;
    color: #333;
}

.vc-skill-badge.expert {
    background: #28a745;
    color: white;
}

.vc-stars {
    font-size: 0.8rem;
}

.vc-personality {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.vc-wage {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.vc-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--cream);
    border-radius: 4px;
}

/* Delegation Toggle */
.delegation-toggle {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--cream);
    border-radius: 8px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 48px;
    height: 26px;
    background: var(--text-muted);
    border-radius: 13px;
    position: relative;
    transition: background 0.3s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-label input:checked + .toggle-slider {
    background: var(--teal);
}

.toggle-label input:checked + .toggle-slider::after {
    transform: translateX(22px);
}

.toggle-text {
    font-weight: 600;
    color: var(--brown);
}

.delegation-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    margin-left: 60px;
}

.vc-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.btn-danger {
    background: var(--accent);
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

/* Vice Coach Hiring Modal */
.vc-hiring-modal {
    max-width: 800px;
    width: 95%;
}

.vc-candidates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    padding: 0.5rem;
}

.vc-candidate {
    background: var(--cream);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vc-candidate:hover {
    border-color: var(--teal);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.vc-candidate.too-expensive {
    opacity: 0.6;
}

.vc-candidate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.vc-candidate-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--brown);
}

.vc-candidate-stars {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.vc-candidate-personality {
    font-weight: 700;
    font-size: 1rem;
    color: var(--teal);
    margin: 0.5rem 0 0.25rem;
}

.vc-candidate-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    min-height: 2.8em;
}

.vc-candidate-cost {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
    gap: 0.5rem;
}

.vc-candidate .btn {
    width: 100%;
    margin-top: auto;
    padding: 0.75rem;
}

/* Vice Coach Detail Modal */
.vc-detail-modal {
    max-width: 450px;
}

.vc-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.vc-detail-header h2 {
    margin: 0;
}

.vc-detail-info {
    margin-bottom: 1.5rem;
}

.vc-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.vc-detail-row span:first-child {
    color: var(--text-secondary);
}

.vc-detail-row span:last-child {
    font-weight: 600;
}

.vc-detail-section {
    margin-bottom: 1.5rem;
}

.vc-detail-section h3 {
    font-size: 1rem;
    color: var(--brown);
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.25rem;
}

.vc-record-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.vc-record-stat {
    padding: 0.5rem;
    background: var(--cream);
    border-radius: 4px;
}

.vc-record-stat .stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brown);
}

.vc-record-stat .stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.vc-record-stat.highlight {
    background: var(--teal);
}

.vc-record-stat.highlight .stat-value,
.vc-record-stat.highlight .stat-label {
    color: white;
}

/* ============================================================================
   SEASON END MODAL STYLES
   ============================================================================ */

.season-end-content {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.season-end-header {
    text-align: center;
    padding: 1.5rem;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.season-end-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.season-end-header.champion {
    background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
    color: #1a1a2e;
}

.season-end-header.promoted {
    background: linear-gradient(135deg, var(--teal) 0%, #3aa88a 100%);
    color: white;
}

.season-end-header.relegated {
    background: linear-gradient(135deg, var(--accent) 0%, #c83550 100%);
    color: white;
}

.season-end-header.neutral {
    background: var(--bg-dark);
    color: var(--text-primary);
}

.season-end-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

.season-result-banner {
    font-size: 2rem;
    font-weight: 900;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.season-end-body {
    padding: 1.25rem;
}

.season-end-body h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
    color: var(--brown);
    text-align: center;
}

.season-league {
    text-align: center;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}

.season-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.season-stats-grid .stat-box {
    background: var(--cream);
    padding: 0.5rem;
    border-radius: 4px;
    text-align: center;
}

.season-stats-grid .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.season-stats-grid .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brown);
}

.season-stats-grid .stat-highlight {
    color: var(--teal);
}

/* Season performers cards */
.season-performers {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.performer-card {
    flex: 1;
    min-width: 125px;
    background: var(--cream);
    padding: 0.75rem;
    border-radius: 6px;
    text-align: center;
    border-left: 3px solid var(--teal);
}

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

.performer-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brown);
    margin: 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.performer-stat {
    font-size: 0.8rem;
    color: var(--teal);
    font-weight: 600;
}

/* Season objective result */
.season-objective-result {
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    text-align: center;
}

.season-objective-result.objective-success {
    background: rgba(78, 204, 163, 0.15);
    border: 1px solid var(--success);
}

.season-objective-result.objective-fail {
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid var(--accent);
}

.objective-header {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.objective-outcome {
    font-size: 1rem;
    font-weight: 700;
}

.objective-success .objective-outcome {
    color: var(--success);
}

.objective-fail .objective-outcome {
    color: var(--accent);
}

.objective-reward {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Season finance summary */
.season-finance-summary {
    background: var(--cream);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.season-finance-summary h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--brown);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem;
}

.finance-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.25rem 0;
}

.finance-row.finance-total {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    font-weight: 600;
}

.finance-income {
    color: var(--success);
}

.finance-expense {
    color: var(--accent);
}

/* Season mini table */
.season-table-mini {
    margin-bottom: 1rem;
}

.season-table-mini h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--brown);
}

.season-table-mini table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.season-table-mini th {
    background: var(--cream);
    padding: 0.4rem;
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.season-table-mini td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--border);
}

.season-table-mini .position-champion td {
    background: rgba(255, 215, 0, 0.2);
}

.season-table-mini .position-promoted td {
    background: rgba(78, 204, 163, 0.15);
}

.season-table-mini .position-relegated td {
    background: rgba(233, 69, 96, 0.15);
}

.season-table-mini .player-team td {
    font-weight: 700;
    color: var(--brown);
}

.table-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.legend-champion {
    color: var(--success);
}

.legend-relegated {
    color: var(--accent);
}

/* Season end footer - always visible at bottom */
.season-end-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
    flex-shrink: 0;
    background: var(--bg-medium);
}

.btn-large {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* ============================================================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ============================================================================ */

/* Navigation - wrap on mobile */
@media (max-width: 768px) {
    nav {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;
    }

    nav button {
        flex: 1 1 auto;
        min-width: 60px;
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
    }

    /* Hide less important nav items on very small screens */
    .container {
        padding: 0.5rem;
    }

    .panel {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .panel-header {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    nav button {
        min-width: 50px;
        padding: 0.35rem 0.35rem;
        font-size: 0.65rem;
        letter-spacing: 0;
    }

    /* Stack stats grid on mobile */
    .season-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .season-performers {
        flex-direction: column;
    }

    .performer-card {
        min-width: auto;
    }

    /* Larger touch targets */
    button, .btn {
        min-height: 44px;
    }

    /* Readable text */
    body {
        font-size: 14px;
    }

    /* Formation pitch adjustments */
    .pitch-container {
        padding: 0.5rem;
    }

    .pitch-slot {
        width: 50px;
        height: 60px;
    }

    .slot-player-name {
        font-size: 0.55rem;
    }
}

/* Tables - scrollable on mobile */
@media (max-width: 600px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Squad table adjustments */
    .squad-detailed-table {
        font-size: 0.75rem;
    }

    .squad-detailed-table th,
    .squad-detailed-table td {
        padding: 0.4rem 0.3rem;
    }

    /* Hide less important columns on mobile */
    .squad-detailed-table .hide-mobile {
        display: none;
    }
}

/* Season End Modal mobile */
@media (max-width: 500px) {
    .season-end-content {
        max-width: 95vw;
        margin: 0.5rem;
    }

    .season-result-banner {
        font-size: 1.5rem;
    }

    .season-table-mini {
        font-size: 0.75rem;
    }

    .season-table-mini th,
    .season-table-mini td {
        padding: 0.25rem 0.3rem;
    }
}

/* ============================================================================
   TRANSFER MARKET STYLES
   ============================================================================ */

.transfer-market-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Transfer Window Banner */
.transfer-window-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-weight: 600;
    text-align: center;
    flex-wrap: wrap;
}

.transfer-window-banner.open {
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: white;
    animation: pulse-green 2s infinite;
}

.transfer-window-banner.closed {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.banner-icon {
    font-size: 1.5rem;
}

.banner-countdown {
    font-size: 0.85rem;
    opacity: 0.9;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
}

/* Transfer Tabs */
.transfer-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.transfer-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-main);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.transfer-tab:hover {
    background: var(--bg-card);
    border-color: var(--accent);
}

.transfer-tab.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.tab-badge {
    background: rgba(255,255,255,0.2);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

.transfer-tab.active .tab-badge {
    background: rgba(255,255,255,0.3);
}

/* Position Filters */
.position-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.position-filter {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.position-filter:hover {
    border-color: var(--accent);
    background: var(--bg-light);
}

.position-filter.active {
    background: var(--brown);
    color: var(--cream);
    border-color: var(--brown);
}

/* Transfer Filters Panel */
.transfer-filters-panel {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.filters-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.filters-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

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

/* Filter inputs */
.transfer-filters-panel input[type="text"],
.transfer-filters-panel input[type="number"] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.transfer-filters-panel input[type="text"]:focus,
.transfer-filters-panel input[type="number"]:focus {
    border-color: var(--accent);
    outline: none;
}

.transfer-filters-panel input[type="number"] {
    width: 70px;
}

.transfer-filters-panel input[type="checkbox"] {
    accent-color: var(--accent);
}

/* Filter labels */
.transfer-filters-panel label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

/* Transfer Grid */
.transfer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* Transfer Card */
.transfer-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.transfer-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.transfer-card.hot-deal {
    border-color: #ff6b6b;
    background: linear-gradient(135deg, var(--bg-card), rgba(255, 107, 107, 0.05));
}

.transfer-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.player-position {
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
}

.player-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
}

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

.transfer-card-team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.selling-team-badge {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.transfer-card-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.transfer-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.asking-price {
    font-weight: 700;
    color: var(--success);
    font-size: 0.95rem;
}

.agent-badge {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.hot-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff6b6b;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Free Agent Card */
.free-agent-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.signing-bonus,
.wages {
    font-size: 0.8rem;
}

.signing-bonus {
    color: var(--warning);
}

.agent-info {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Scout Section */
.scout-section,
.reports-section {
    margin-bottom: 1.5rem;
}

.scout-header {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.scout-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

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

.scout-option {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.scout-option:hover:not(.disabled) {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.scout-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scout-level {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.scout-cost {
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.scout-info {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.scout-bonus {
    font-size: 0.7rem;
    color: var(--success);
    margin-top: 0.25rem;
}

/* Scout Report Card */
.scout-report-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.scout-report-card:hover {
    border-color: var(--accent);
}

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

.report-player {
    font-weight: 600;
}

.report-level {
    font-size: 0.7rem;
    background: var(--accent);
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.report-excerpt {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.hidden-trait {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #333;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.report-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.view-full {
    color: var(--accent);
}

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

/* Transfer Empty State */
.transfer-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

/* ============================================================================
   MY OFFERS TAB - Transfer Offer Tracking
   ============================================================================ */

/* Offers Summary Grid */
.offers-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border);
}

.summary-card .count {
    font-size: 1.75rem;
    font-weight: 700;
    display: block;
}

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

.summary-card.pending .count { color: var(--mustard); }
.summary-card.accepted .count { color: var(--teal); }
.summary-card.rejected .count { color: var(--cherry); }
.summary-card.countered .count { color: var(--accent); }

/* Offers Grid */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* Offer Card */
.offer-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.2s;
}

.offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.offer-card.pending { border-color: var(--mustard); }
.offer-card.accepted { border-color: var(--teal); }
.offer-card.rejected { border-color: var(--cherry); }
.offer-card.countered { border-color: var(--accent); }
.offer-card.expired { border-color: var(--text-muted); opacity: 0.7; }

.offer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.offer-player-info h3 {
    margin: 0;
    font-size: 1.1rem;
}

.offer-player-info .team-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.offer-status {
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.offer-status.pending { background: rgba(233, 196, 106, 0.2); color: var(--mustard); }
.offer-status.accepted { background: rgba(42, 157, 143, 0.2); color: var(--teal); }
.offer-status.rejected { background: rgba(231, 111, 81, 0.2); color: var(--cherry); }
.offer-status.countered { background: rgba(244, 162, 97, 0.2); color: var(--accent); }
.offer-status.expired { background: rgba(100, 100, 100, 0.2); color: var(--text-muted); }

.offer-details {
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.offer-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

.offer-row:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.offer-row .label {
    color: var(--text-secondary);
}

.offer-row .value {
    font-weight: 600;
}

.offer-row .value.highlight {
    color: var(--accent);
}

.offer-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.offer-countdown .icon {
    font-size: 1rem;
}

.offer-message {
    background: var(--bg-light);
    border-left: 3px solid var(--accent);
    padding: 0.75rem;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    border-radius: 0 6px 6px 0;
}

.offer-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.offer-actions .btn {
    flex: 1;
    min-width: 125px;
}

/* No Offers State */
.no-offers {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.no-offers-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

/* Transfer Tab Highlight */
.transfer-tab.highlight {
    animation: tabPulse 2s infinite;
}

@keyframes tabPulse {
    0%, 100% { background: var(--bg-card); }
    50% { background: rgba(233, 196, 106, 0.3); }
}

.tab-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--cherry);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.tab-badge.pulse {
    animation: badgePulse 1.5s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ============================================================================
   SCOUT NETWORK - Advanced Player Search
   ============================================================================ */

.scout-network-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.scout-credits {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-dark);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
}

.scout-credits .icon {
    font-size: 1.2rem;
}

.scout-credits .count {
    font-weight: 700;
    color: var(--accent);
}

.scout-search-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: end;
}

.scout-search-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.scout-search-form input,
.scout-search-form select {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.scout-search-form input:focus,
.scout-search-form select:focus {
    border-color: var(--accent);
    outline: none;
}

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

.scout-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.scout-result-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.scout-result-card.unlisted {
    border-style: dashed;
    opacity: 0.9;
}

.scout-result-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.scout-result-name {
    flex: 1;
    font-weight: 600;
}

.scout-result-age {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.scout-result-team {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.scout-result-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.scout-result-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.scout-result-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.scout-result-value {
    font-weight: 700;
    color: var(--accent);
}

.scout-unlisted-badge {
    background: rgba(233, 196, 106, 0.2);
    color: var(--mustard);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

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

/* ============================================================================
   TRANSFER NOTIFICATION - Push-style Alerts
   ============================================================================ */

.transfer-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--bg-card);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    max-width: 350px;
    animation: slideInRight 0.3s ease-out;
}

.transfer-notification.success { border-left: 4px solid var(--teal); }
.transfer-notification.warning { border-left: 4px solid var(--mustard); }
.transfer-notification.error { border-left: 4px solid var(--cherry); }
.transfer-notification.info { border-left: 4px solid var(--text-secondary); }

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.notification-icon {
    font-size: 1.5rem;
}

.notification-title {
    font-weight: 700;
}

.notification-message {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .offers-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .scout-search-form {
        grid-template-columns: 1fr;
    }

    .offers-grid,
    .scout-results-grid {
        grid-template-columns: 1fr;
    }

    .transfer-notification {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

.empty-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Transfer History */
.transfer-history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.transfer-history-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-main);
    border-radius: 4px;
}

.deal-icon {
    font-size: 1.2rem;
}

.deal-text {
    flex: 1;
    font-size: 0.85rem;
}

.deal-amount {
    font-weight: 700;
    font-size: 0.9rem;
}

.deal-amount.positive {
    color: var(--success);
}

.deal-amount.negative {
    color: var(--accent);
}

/* Transfer Modals */
.transfer-modal,
.bidding-modal,
.counter-offer-modal,
.transfer-complete-modal {
    max-width: 480px;
    width: 90%;
    padding: 1.5rem;
}

.transfer-detail-header {
    text-align: center;
    margin-bottom: 1rem;
}

.transfer-detail-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
}

.position-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}

.free-label {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.transfer-detail-info {
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.info-row.highlight {
    background: rgba(233, 69, 96, 0.1);
    margin: 0 -0.75rem;
    padding: 0.5rem 0.75rem;
}

.info-row .asking {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.1rem;
}

.info-row .expensive {
    color: var(--accent);
}

.transfer-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.transfer-actions .btn {
    flex: 1;
}

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

.transfer-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Bidding Modal */
.bidding-header {
    text-align: center;
    margin-bottom: 1rem;
}

.bidding-header h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
}

.bidding-parties {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-main);
    border-radius: 6px;
}

.party {
    text-align: center;
}

.party-badge {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.25rem;
}

.party-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
}

.party-role {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.party-vs {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-muted);
}

.bidding-info {
    margin-bottom: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
}

.info-item .label {
    color: var(--text-secondary);
}

.info-item .value.affordable {
    color: var(--success);
}

.info-item .value.expensive {
    color: var(--accent);
}

.bid-input-section {
    margin-bottom: 1rem;
}

.bid-input-section label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.bid-slider-container {
    margin-bottom: 0.5rem;
}

#bid-slider {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: var(--border);
    border-radius: 4px;
    outline: none;
}

#bid-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.bid-display {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0.5rem 0;
}

.bid-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.bid-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bid-actions .btn {
    flex: 1;
}

.agent-quote {
    background: var(--bg-main);
    padding: 0.75rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.quote-icon {
    font-size: 1.5rem;
}

/* Counter Offer Modal */
.counter-header {
    text-align: center;
    margin-bottom: 1rem;
}

.counter-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.counter-body {
    margin-bottom: 1rem;
}

.counter-amount {
    background: var(--bg-main);
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    margin: 1rem 0;
}

.counter-amount .label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.counter-amount .amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--warning);
}

.agent-says {
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.counter-actions {
    display: flex;
    gap: 0.5rem;
}

.counter-actions .btn {
    flex: 1;
}

/* Transfer Complete Modal */
.transfer-complete-modal {
    text-align: center;
}

.transfer-complete-banner {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    animation: bounce 0.5s ease;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.newspaper-headline {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.transfer-complete-details {
    margin-bottom: 1rem;
}

.transfer-fee {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 0.5rem;
}

/* Listed Players */
.listed-players-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transfer-card.my-listed {
    background: linear-gradient(135deg, var(--bg-card), rgba(76, 175, 80, 0.05));
    border-color: var(--success);
}

.listed-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.listed-actions .btn {
    flex: 1;
    padding: 0.4rem;
    font-size: 0.8rem;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .transfer-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .transfer-tab {
        flex-shrink: 0;
    }

    .transfer-grid {
        grid-template-columns: 1fr;
    }

    .bidding-parties {
        flex-direction: column;
        gap: 0.5rem;
    }

    .party-vs {
        transform: rotate(90deg);
    }
}

/* ============================================================================
   ADDRESS AUTOCOMPLETE STYLES
   ============================================================================ */

.address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.address-suggestion {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.address-suggestion:last-child {
    border-bottom: none;
}

.address-suggestion:hover {
    background: var(--bg-main);
    color: var(--accent);
}

/* ============================================================================
   SECTOR RATINGS VISUALIZATION (Formation View)
   Shows attack/midfield/defense strength based on players and formation
   ============================================================================ */

.sector-ratings-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.sector-ratings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.sector-hint {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 50%;
    font-size: 0.7rem;
    color: var(--text-muted);
    cursor: help;
}

.sector-ratings-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sector-group {
    background: var(--bg-main);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.sector-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

/* Color coding for sector groups */
.sector-group.attack-group {
    border-left: 3px solid var(--cherry);
}

.sector-group.midfield-group {
    border-left: 3px solid var(--mustard);
}

.sector-group.defense-group {
    border-left: 3px solid var(--teal);
}

.sector-group.gk-group {
    border-left: 3px solid var(--accent);
}

.sector-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.sector-row.single {
    grid-template-columns: 1fr;
}

.sector-rating-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sector-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 50px;
    white-space: nowrap;
}

.sector-bar-container {
    flex: 1;
    height: 8px;
    background: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.sector-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sector-value {
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    text-align: right;
}

/* Sector value with visible rating label */
.sector-value-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 90px;
    justify-content: flex-end;
}

.sector-rating-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Toggle-only state (sectors hidden) */
.sector-ratings-toggle-only {
    margin-top: 0.75rem;
    text-align: center;
}

.sector-toggle-btn {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    color: var(--text-secondary);
}

.sector-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

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

/* Header toggle button */
.sector-ratings-header .sector-toggle-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .sector-ratings-container {
        padding: 0.75rem;
    }

    .sector-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .sector-label {
        min-width: 60px;
    }
}

/* ============================================================================
   SECTOR STRENGTH OVERLAY - On-Pitch Zones
   When activated, overlays the pitch with color-coded strength zones
   ============================================================================ */

/* The overlay container */
.sector-overlay {
    display: none;
}

.sector-overlay.active {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.3);
}

/* Individual strength zone */
.strength-zone {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    transition: all 0.3s ease;
}

.strength-zone .zone-rating {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.strength-zone .zone-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    margin-top: 2px;
}

.strength-zone .zone-label {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 1px;
}

/* Zone positions - Horizontal pitch (GK left, attack right) */
.zone-goalkeeper { left: 2%; top: 30%; width: 10%; height: 40%; }
.zone-defenseLeft { left: 14%; top: 5%; width: 14%; height: 28%; }
.zone-defenseCenter { left: 14%; top: 36%; width: 14%; height: 28%; }
.zone-defenseRight { left: 14%; top: 67%; width: 14%; height: 28%; }
.zone-midfield { left: 32%; top: 15%; width: 28%; height: 70%; }
.zone-attackLeft { left: 64%; top: 5%; width: 14%; height: 28%; }
.zone-attackCenter { left: 64%; top: 36%; width: 14%; height: 28%; }
.zone-attackRight { left: 64%; top: 67%; width: 14%; height: 28%; }

/* Rating colors with background */
.strength-zone.excellent { background: rgba(78, 204, 163, 0.7); border-color: #4ecca3; }
.strength-zone.good { background: rgba(139, 195, 74, 0.7); border-color: #8bc34a; }
.strength-zone.average { background: rgba(255, 193, 7, 0.7); border-color: #ffc107; }
.strength-zone.weak { background: rgba(255, 152, 0, 0.7); border-color: #ff9800; }
.strength-zone.poor { background: rgba(244, 67, 54, 0.7); border-color: #f44336; }

/* Total power badge */
.strength-total {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid var(--mustard);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.strength-total .total-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.strength-total .total-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    color: var(--mustard);
}

/* Hide player slots when overlay is active */
.formation-pitch:has(.sector-overlay.active) .pitch-slot {
    opacity: 0;
    pointer-events: none;
}

/* Toggle button */
.sector-toggle-container {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.sector-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================================
   POST-MATCH UI REDESIGN
   Modern, clean match result display
   ============================================================================ */

.match-result-redesign {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Competition Banner */
.match-competition-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.match-competition-banner.league {
    background: linear-gradient(135deg, var(--teal) 0%, #1a7a6f 100%);
    color: white;
}

.match-week {
    opacity: 0.9;
    font-weight: 400;
}

/* Hero Scoreboard */
.match-scoreboard {
    display: flex;
    align-items: stretch;
    padding: 1.5rem 1rem;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-card) 100%);
    border-bottom: 1px solid var(--border-light);
}

.scoreboard-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.scoreboard-team .team-badge {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.scoreboard-team .team-name {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clickable-team {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.clickable-team:hover {
    color: var(--gold);
    text-decoration-style: solid;
}

.scoreboard-team .team-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.scoreboard-center {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

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

.score-display .score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.score-display .score-separator {
    font-size: 2rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.result-badge {
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.result-badge.result-win {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
}

.result-badge.result-loss {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
}

.result-badge.result-draw {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
}

.match-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Tabs Navigation */
.match-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    background: var(--bg-light);
}

.match-tab {
    flex: 1;
    padding: 0.75rem 0.5rem;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    position: relative;
}

.match-tab:hover {
    color: var(--accent);
    background: rgba(42, 157, 143, 0.05);
}

.match-tab.active {
    color: var(--accent);
}

.match-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}

.tab-icon {
    font-size: 1rem;
}

/* Tab Content */
.match-tab-content {
    padding: 1rem;
    min-height: 200px;
}

.tab-panel {
    animation: fadeIn 0.2s ease;
}

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

.section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

/* Match Timeline */
.match-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-light);
    border-radius: 8px;
    transition: transform 0.15s ease;
}

.timeline-event:hover {
    transform: translateX(3px);
}

.timeline-event.right {
    flex-direction: row-reverse;
}

.timeline-event.right:hover {
    transform: translateX(-3px);
}

.timeline-minute {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 35px;
}

.timeline-event.right .timeline-minute {
    text-align: right;
}

.timeline-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
    flex-shrink: 0;
}

.timeline-icon.card-icon {
    background: transparent;
    font-size: 1.2rem;
}

.timeline-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.timeline-event.right .timeline-detail {
    text-align: right;
    align-items: flex-end;
}

.timeline-player {
    font-weight: 600;
    font-size: 0.9rem;
}

.timeline-assist {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* MOTM Section */
.motm-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

/* Match Stats */
.match-stats-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stats-teams {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}

.stats-team-name {
    font-weight: 700;
    font-size: 0.9rem;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-value {
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 40px;
}

.stat-value.home {
    text-align: right;
}

.stat-value.away {
    text-align: left;
}

.stat-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    font-size: 0.7rem;
    text-align: center;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-light);
}

.stat-bar-home,
.stat-bar-away {
    height: 100%;
    transition: width 0.5s ease;
}

/* Notifications Section */
.match-notifications {
    margin: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.notifications-header:hover {
    background: var(--bg-dark);
}

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

.notifications-content {
    padding: 0.5rem;
}

/* Action Buttons */
.match-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
}

.match-actions .btn {
    flex: 1;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .match-scoreboard {
        padding: 1rem 0.5rem;
    }

    .scoreboard-team .team-badge {
        width: 36px;
        height: 36px;
    }

    .scoreboard-team .team-name {
        font-size: 0.85rem;
        max-width: 90px;
    }

    .score-display .score {
        font-size: 2.5rem;
    }

    .result-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.75rem;
    }

    .match-tab {
        padding: 0.6rem 0.25rem;
        font-size: 0.75rem;
    }

    .tab-icon {
        font-size: 0.9rem;
    }

    .timeline-event {
        padding: 0.4rem 0.5rem;
    }

    .timeline-player {
        font-size: 0.8rem;
    }
}

/* ============================================
   Attendance Banner & Formation Shift Styles
   ============================================ */

/* Match Attendance Banner */
.match-attendance-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.attendance-icon {
    font-size: 1.1rem;
}

.attendance-text {
    color: var(--text-secondary);
}

.attendance-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.attendance-badge.sold-out {
    background: var(--success);
    color: white;
}

.attendance-badge.near-cap {
    background: var(--warning);
    color: var(--text-primary);
}

/* Weather display in attendance banner */
.attendance-weather {
    padding: 0.15rem 0.4rem;
    background: var(--bg-card);
    border-radius: 4px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
}

/* Bonus icons in attendance banner */
.attendance-bonuses {
    display: flex;
    gap: 0.2rem;
    margin-left: 0.25rem;
}

.attendance-bonuses .bonus-icon {
    font-size: 0.9rem;
    opacity: 0.9;
}

.attendance-bonuses .bonus-icon.negative {
    opacity: 0.7;
}

/* Formation Shift Section */
.sub-formation-shift {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.formation-shift-active {
    background: var(--bg-light);
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
}

.shift-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.shift-condition {
    color: var(--text-secondary);
}

.shift-arrow {
    color: var(--accent);
    font-weight: bold;
}

.shift-formation {
    color: var(--accent);
    font-weight: bold;
}

.shift-timing {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.formation-shift-form {
    background: var(--bg-light);
    padding: 0.75rem;
    border-radius: 8px;
}

.shift-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.shift-inputs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.shift-inputs .sub-select {
    flex: 1;
}

.shift-timing-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.shift-timing-row span {
    color: var(--text-secondary);
}

.shift-timing-row .sub-minute {
    width: 60px;
}

.shift-timing-row .btn {
    margin-left: auto;
}

/* Timeline shift icon */
.timeline-icon.shift-icon {
    font-size: 0.9rem;
}

/* ==================== */
/* Squad Sub-tabs */
/* ==================== */
.squad-subtabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0.5rem;
}

.squad-subtab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-secondary);
    border-radius: 4px 4px 0 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.squad-subtab:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}

.squad-subtab.active {
    background: var(--accent);
    color: white;
    font-weight: bold;
}

.tab-badge {
    background: var(--accent);
    color: white;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-weight: bold;
}

.squad-subtab.active .tab-badge {
    background: white;
    color: var(--accent);
}

/* ==================== */
/* Medical Centre */
/* ==================== */
.medical-centre {
    padding: 0.5rem 0;
}

.medical-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-dark);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

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

.medical-stat-value {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Bebas Neue', sans-serif;
}

.medical-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.medical-facility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.medical-section {
    margin-bottom: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}

.medical-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-dark);
    font-weight: bold;
    font-size: 0.95rem;
}

.medical-count {
    background: var(--accent);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.85rem;
}

.medical-count.warning {
    background: var(--warning);
    color: var(--brown);
}

.medical-section-content {
    padding: 0.5rem 1rem;
}

.medical-player-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}

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

.medical-player-row:hover {
    background: var(--bg-light);
    margin: 0 -1rem;
    padding: 0.75rem 1rem;
}

.medical-player-face {
    flex-shrink: 0;
}

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

.medical-player-name {
    font-weight: bold;
    font-size: 0.95rem;
}

.medical-player-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.medical-player-status {
    text-align: right;
    flex-shrink: 0;
}

.medical-all-clear {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, rgba(42, 157, 143, 0.1), rgba(42, 157, 143, 0.05));
    border-radius: 8px;
    border: 2px solid var(--success);
    margin-bottom: 1rem;
}

.all-clear-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.all-clear-text {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--success);
}

.all-clear-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .medical-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .medical-player-row {
        flex-wrap: wrap;
    }

    .medical-player-status {
        width: 100%;
        text-align: left;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--border-light);
    }
}

/* ═══════════════════════════════════════════════════════════════
   REBUILD v100 - Clean Client Styles
   ═══════════════════════════════════════════════════════════════ */

/* Base reset for rebuild */
#app {
    min-height: 100vh;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Loading state */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-size: 1.2rem;
    color: var(--text-secondary, #888);
}

/* Panel base */
.panel {
    background: var(--bg-panel, #1a1a2e);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color, #333);
}

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

.panel-header h2 {
    margin: 0;
}

/* Auth panels */
.auth-panel {
    max-width: 400px;
    margin: 2rem auto;
}

.auth-panel h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
    background: var(--bg-input, #0f0f1a);
    color: var(--text-primary, #eee);
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary, #e94560);
}

.error-message {
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid var(--danger, #e94560);
    color: var(--danger, #e94560);
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary, #888);
}

.auth-switch a {
    color: var(--primary, #e94560);
}

/* Buttons */
.btn-primary, .btn-secondary {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary, #e94560);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark, #c73e54);
}

.btn-secondary {
    background: var(--bg-button, #333);
    color: var(--text-primary, #eee);
    border: 1px solid var(--border-color, #444);
}

.btn-secondary:hover {
    background: var(--bg-button-hover, #444);
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary, #e94560);
    cursor: pointer;
    padding: 0.5rem;
    text-decoration: underline;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary, #888);
    padding: 0;
    line-height: 1;
}

/* Team card grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.team-card {
    background: var(--bg-card, #252540);
    border: 2px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.team-card:hover {
    border-color: var(--primary, #e94560);
    transform: translateY(-2px);
}

.team-card .team-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card .team-info {
    font-size: 0.9rem;
    color: var(--text-secondary, #888);
}

/* Dashboard */
.dashboard {
    display: grid;
    gap: 1rem;
}

.team-header h1 {
    margin: 0 0 0.5rem 0;
}

.team-meta {
    display: flex;
    gap: 1.5rem;
    color: var(--text-secondary, #888);
}

.next-match {
    text-align: center;
}

.match-preview {
    padding: 1rem;
}

.match-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.match-teams .vs {
    color: var(--text-secondary, #888);
    font-size: 0.9rem;
}

.match-teams .your-team {
    color: var(--primary, #e94560);
    font-weight: bold;
}

.match-info {
    color: var(--text-secondary, #888);
    margin-bottom: 1rem;
}

.play-btn {
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.nav-btn {
    padding: 1rem;
    background: var(--bg-button, #333);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    color: var(--text-primary, #eee);
    cursor: pointer;
    transition: all 0.2s;
}

.nav-btn:hover {
    background: var(--bg-button-hover, #444);
    border-color: var(--primary, #e94560);
}

/* Mini standings */
.mini-standings table {
    width: 100%;
}

.standings-table th, .standings-table td {
    padding: 0.5rem;
    text-align: left;
}

.standings-table .your-team {
    background: rgba(233, 69, 96, 0.1);
}

/* Squad view */
.squad-view {
    display: grid;
    gap: 1rem;
}

.squad-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

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

.filter-group select {
    padding: 0.5rem;
    background: var(--bg-input, #0f0f1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
    color: var(--text-primary, #eee);
}

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

.player-table th, .player-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #333);
}

.player-table th {
    font-weight: 600;
    color: var(--text-secondary, #888);
    font-size: 0.9rem;
}

.player-row {
    cursor: pointer;
    transition: background 0.2s;
}

.player-row:hover {
    background: var(--bg-hover, #252540);
}

.rating.excellent { color: var(--success, #2a9d8f); }
.rating.good { color: var(--primary, #e94560); }
.rating.average { color: var(--warning, #e9c46a); }
.rating.poor { color: var(--text-secondary, #888); }

.form.excellent { color: var(--success, #2a9d8f); }
.form.good { color: var(--primary, #e94560); }
.form.average { color: var(--warning, #e9c46a); }
.form.poor { color: var(--danger, #e94560); }

.fitness.excellent { color: var(--success, #2a9d8f); }
.fitness.good { color: var(--text-primary, #eee); }
.fitness.average { color: var(--warning, #e9c46a); }
.fitness.poor { color: var(--danger, #e94560); }

/* Player detail panel */
.player-detail {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 100;
    box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}

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

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #333);
}

.detail-row .label {
    color: var(--text-secondary, #888);
}

.skills-grid {
    margin-top: 1rem;
}

.skill-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.skill-name {
    width: 80px;
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
}

.skill-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-input, #0f0f1a);
    border-radius: 4px;
    overflow: hidden;
}

.skill-fill {
    height: 100%;
    background: var(--primary, #e94560);
    border-radius: 4px;
}

.skill-value {
    width: 30px;
    text-align: right;
    font-size: 0.85rem;
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Lineup view */
.lineup-view {
    display: grid;
    gap: 1rem;
}

.lineup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.lineup-actions {
    display: flex;
    gap: 0.5rem;
}

.formation-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.formation-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-button, #333);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    color: var(--text-primary, #eee);
    cursor: pointer;
}

.formation-btn.active {
    background: var(--primary, #e94560);
    border-color: var(--primary, #e94560);
}

.pitch-panel {
    padding: 0;
}

.pitch {
    position: relative;
    width: 100%;
    padding-bottom: 65%;
    background: linear-gradient(180deg, #4a8f5a 0%, #3d7a4d 50%, #4a8f5a 100%);
    border: 3px solid #2d3a1f;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
    border-radius: 8px;
    overflow: hidden;
}

/* Halftone dot overlay for pixelated vintage feel */
.pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 1px, transparent 1px);
    background-size: 4px 4px;
    z-index: 1;
}

/* Mowing stripe pattern overlay */
.pitch::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0%,
        transparent 8%,
        rgba(255, 255, 255, 0.15) 8%,
        rgba(255, 255, 255, 0.15) 16%
    );
    z-index: 1;
}

.pitch-slot {
    position: absolute;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pitch-slot:hover {
    border-color: var(--primary, #e94560);
}

.pitch-slot.filled {
    background: rgba(233, 69, 96, 0.3);
    border-color: var(--primary, #e94560);
}

.pitch-slot.selecting {
    border-color: var(--warning, #e9c46a);
    box-shadow: 0 0 10px var(--warning, #e9c46a);
}

.slot-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
}

.slot-player {
    text-align: center;
}

.slot-player .player-name {
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}

.slot-player .player-rating {
    font-size: 0.7rem;
    color: var(--success, #2a9d8f);
}

.slot-empty {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.3);
}

.bench-panel {
    max-height: 300px;
    overflow-y: auto;
}

.bench-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bench-player {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card, #252540);
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.bench-player:hover {
    border-color: var(--primary, #e94560);
}

.bench-player .pos {
    color: var(--text-secondary, #888);
    font-weight: bold;
}

.bench-player .rating {
    color: var(--success, #2a9d8f);
}

/* Match view */
.match-view {
    display: grid;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.score-panel {
    text-align: center;
    padding: 2rem;
}

.score-panel.win {
    background: linear-gradient(135deg, rgba(42, 157, 143, 0.2), var(--bg-panel, #1a1a2e));
    border-color: var(--success, #2a9d8f);
}

.score-panel.loss {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.2), var(--bg-panel, #1a1a2e));
    border-color: var(--danger, #e94560);
}

.score-panel.draw {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.2), var(--bg-panel, #1a1a2e));
    border-color: var(--warning, #e9c46a);
}

.result-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    background: currentColor;
    color: white;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.win .result-badge { background: var(--success, #2a9d8f); }
.loss .result-badge { background: var(--danger, #e94560); }
.draw .result-badge { background: var(--warning, #e9c46a); color: #333; }

.score-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.score-header .team {
    flex: 1;
    max-width: 200px;
}

.score-header .home { text-align: right; }
.score-header .away { text-align: left; }

.score-header .user-team .team-name {
    color: var(--primary, #e94560);
    font-weight: bold;
}

.score-header .score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 2.5rem;
    font-weight: bold;
}

.score-header .separator {
    color: var(--text-secondary, #888);
}

/* Stats panel - Match Statistics */
.match-stats .stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.match-stats .stat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.match-stats .stat-value {
    min-width: 45px;
    font-weight: bold;
    font-size: 1rem;
    color: var(--brown, #5c4033);
}

.match-stats .stat-value.home { text-align: right; }
.match-stats .stat-value.away { text-align: left; }

.match-stats .stat-bar {
    flex: 1;
    display: flex;
    height: 24px;
    background: var(--bg-panel, #f5f0e6);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-light, #d4c5a9);
}

.match-stats .stat-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.match-stats .stat-fill.home {
    background: var(--teal, #2a9d8f);
    border-radius: 4px 0 0 4px;
}

.match-stats .stat-fill.away {
    background: var(--accent, #e76f51);
    border-radius: 0 4px 4px 0;
    margin-left: auto;
}

.match-stats .stat-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--brown, #5c4033);
    background: rgba(255,255,255,0.85);
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
}

/* Legacy stat-bar-container support */
.stat-bar-container {
    flex: 1;
    display: flex;
    height: 20px;
    background: var(--bg-input, #0f0f1a);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.stat-bar.home { background: var(--primary, #e94560); }
.stat-bar.away { background: var(--text-secondary, #888); }

/* Events panel */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
}

.event.home {
    justify-content: flex-start;
    background: rgba(233, 69, 96, 0.1);
}

.event.away {
    justify-content: flex-end;
    background: rgba(255,255,255,0.05);
}

.event-minute {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    min-width: 30px;
}

.event-icon {
    font-size: 1.1rem;
}

.event-assist {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
}

/* MOTM panel */
.motm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.motm-icon {
    font-size: 1.5rem;
}

.motm-rating {
    background: var(--success, #2a9d8f);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: bold;
}

/* Ratings panel */
.ratings-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}

.rating-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--bg-card, #252540);
    border-radius: 4px;
}

/* Actions panel */
.actions-panel {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Standings view */
.standings-view .standings-table {
    width: 100%;
    border-collapse: collapse;
}

.standings-table.full th,
.standings-table.full td {
    padding: 0.75rem 0.5rem;
}

.standings-table .pos { width: 40px; text-align: center; }
.standings-table .team { min-width: 150px; }
.standings-table .stat { width: 40px; text-align: center; }
.standings-table .pts { font-weight: bold; }
.standings-table .gd { }

.standings-table .promotion td:first-child { 
    border-left: 3px solid var(--success, #2a9d8f); 
}
.standings-table .playoff td:first-child { 
    border-left: 3px solid var(--warning, #e9c46a); 
}
.standings-table .relegation td:first-child { 
    border-left: 3px solid var(--danger, #e94560); 
}

.standings-legend {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.legend-item.promotion { color: var(--success, #2a9d8f); }
.legend-item.playoff { color: var(--warning, #e9c46a); }
.legend-item.relegation { color: var(--danger, #e94560); }

.form-result {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-right: 2px;
}

.form-result.win { background: var(--success, #2a9d8f); color: white; }
.form-result.loss { background: var(--danger, #e94560); color: white; }
.form-result.draw { background: var(--warning, #e9c46a); color: #333; }

/* Fixtures view */
.fixtures-section {
    margin-bottom: 2rem;
}

.fixtures-section h3 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #333);
}

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

.fixture-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-card, #252540);
    border-radius: 4px;
    border-left: 3px solid transparent;
}

.fixture-row.win { border-left-color: var(--success, #2a9d8f); }
.fixture-row.loss { border-left-color: var(--danger, #e94560); }
.fixture-row.draw { border-left-color: var(--warning, #e9c46a); }

.fixture-week {
    width: 70px;
    color: var(--text-secondary, #888);
    font-size: 0.9rem;
}

.fixture-venue {
    width: 30px;
    text-align: center;
    font-weight: bold;
    padding: 0.25rem;
    border-radius: 4px;
}

.fixture-venue.h { background: rgba(42, 157, 143, 0.2); color: var(--success, #2a9d8f); }
.fixture-venue.a { background: rgba(233, 69, 96, 0.2); color: var(--primary, #e94560); }

.fixture-opponent {
    flex: 1;
}

.fixture-score {
    font-weight: bold;
    min-width: 50px;
    text-align: center;
}

.fixture-result {
    width: 30px;
    text-align: center;
    font-weight: bold;
    padding: 0.25rem;
    border-radius: 4px;
}

.fixture-result.win { background: var(--success, #2a9d8f); color: white; }
.fixture-result.loss { background: var(--danger, #e94560); color: white; }
.fixture-result.draw { background: var(--warning, #e9c46a); color: #333; }

.fixture-status {
    width: 50px;
    text-align: center;
    color: var(--text-secondary, #888);
}

/* Training view */
.training-view {
    max-width: 900px;
    margin: 0 auto;
}

.training-info {
    color: var(--text-secondary, #888);
    margin-bottom: 1.5rem;
}

.training-focuses {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.training-focus {
    background: var(--bg-card, #252540);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 1rem;
}

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

.focus-header h4 {
    margin: 0;
}

.focus-positions {
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
}

.focus-players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 40px;
}

.focus-players .empty {
    color: var(--text-secondary, #888);
    font-style: italic;
}

.player-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary, #e94560);
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
}

.player-chip .remove {
    opacity: 0.7;
}

.player-chip:hover .remove {
    opacity: 1;
}

.unassigned-players h3 {
    margin-bottom: 1rem;
}

.player-chip.unassigned {
    background: var(--bg-input, #0f0f1a);
    border: 1px solid var(--border-color, #333);
    color: var(--text-primary, #eee);
}

.player-chip.unassigned select {
    background: var(--bg-button, #333);
    border: none;
    color: var(--text-primary, #eee);
    padding: 0.25rem;
    border-radius: 4px;
    cursor: pointer;
}

/* Transfers view */
.transfers-view {
    max-width: 900px;
    margin: 0 auto;
}

.budget-display {
    font-weight: bold;
    color: var(--success, #2a9d8f);
}

.transfer-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #333);
    padding-bottom: 0.5rem;
}

.tab-btn {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--text-secondary, #888);
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary, #eee);
}

.tab-btn.active {
    background: var(--primary, #e94560);
    color: white;
}

.market-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.market-filters select {
    padding: 0.5rem;
    background: var(--bg-input, #0f0f1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 4px;
    color: var(--text-primary, #eee);
}

.market-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.market-listing {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--bg-card, #252540);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
}

.listing-player .player-name {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.listing-player .player-details {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
}

.listing-player .rating {
    color: var(--success, #2a9d8f);
}

.listing-seller {
    font-size: 0.9rem;
}

.listing-seller .from {
    color: var(--text-secondary, #888);
}

.listing-price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.listing-price .asking {
    font-weight: bold;
}

.listing-price .current {
    color: var(--warning, #e9c46a);
}

.empty-market {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary, #888);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .score-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .score-header .team {
        text-align: center !important;
    }
    
    .market-listing {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .player-detail {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
        transform: none;
        width: auto;
        max-height: 60vh;
    }
    
    .pitch-slot {
        width: 50px;
        height: 50px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   APP HEADER - v101
   ═══════════════════════════════════════════════════════════════ */

.app-header {
    background: var(--brown, #3D2C29);
    color: var(--cream, #F5F0E6);
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-header .logo {
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    color: var(--mustard, #E9C46A);
}

.main-nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.nav-link {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cream, #F5F0E6);
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    transition: all 0.2s;
}

.nav-link:hover, .nav-link:active {
    background: rgba(201, 162, 39, 0.15); border-color: rgba(201, 162, 39, 0.3);
}

.nav-link.active {
    background: #c9a227; color: #2a2520; border-color: #a88a20;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.header-user .user-name {
    font-weight: bold;
}

.header-user .team-name {
    color: var(--mustard, #E9C46A);
}

.btn-logout {
    background: var(--cherry, #C1292E);
    color: white;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-logout:hover {
    background: #a12328;
}

/* Main content area adjustment */
#app {
    min-height: calc(100vh - 60px);
}

/* Update panel to work with light theme */
.panel {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-light, rgba(61, 44, 41, 0.2));
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Light theme form inputs */
.form-group input {
    background: var(--bg-light, #FFFCF7);
    border-color: var(--border-light, rgba(61, 44, 41, 0.2));
    color: var(--text-primary, #3D2C29);
}

.form-group input:focus {
    border-color: var(--teal, #2A9D8F);
    box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.1);
}

/* Button colors for light theme */
.btn-primary {
    background: var(--teal, #2A9D8F);
}

.btn-primary:hover {
    background: var(--accent-hover, #238b7e);
}

.btn-secondary {
    background: var(--cream, #F5F0E6);
    color: var(--text-primary, #3D2C29);
    border: 1px solid var(--border-light, rgba(61, 44, 41, 0.2));
}

.btn-secondary:hover {
    background: var(--bg-medium, #FAF6F0);
}

/* Table row hover */
.player-row:hover,
.standings-table tbody tr:hover {
    background: var(--table-row-hover, rgba(233, 196, 106, 0.2));
}

/* Your team highlight */
.your-team {
    background: rgba(42, 157, 143, 0.1) !important;
}

/* Pitch colors for light theme */
.pitch {
    background: linear-gradient(180deg, #5a9f6a 0%, #4d8a5d 50%, #5a9f6a 100%);
}

.pitch-slot {
    background: rgba(255,255,255,0.9);
    border-color: var(--border, #3D2C29);
    color: var(--text-primary, #3D2C29);
}

.pitch-slot.filled {
    background: rgba(42, 157, 143, 0.9);
    border-color: var(--teal, #2A9D8F);
    color: white;
}

.pitch-slot .slot-label {
    color: var(--text-secondary, #5a4a47);
}

.pitch-slot.filled .slot-label,
.pitch-slot.filled .player-name {
    color: white;
}

/* Score panel colors */
.score-panel.win {
    background: linear-gradient(135deg, rgba(42, 157, 143, 0.15), var(--bg-panel));
    border-color: var(--teal, #2A9D8F);
}

.score-panel.loss {
    background: linear-gradient(135deg, rgba(193, 41, 46, 0.15), var(--bg-panel));
    border-color: var(--cherry, #C1292E);
}

.score-panel.draw {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.15), var(--bg-panel));
    border-color: var(--mustard, #E9C46A);
}

.win .result-badge { background: var(--teal, #2A9D8F); }
.loss .result-badge { background: var(--cherry, #C1292E); }
.draw .result-badge { background: var(--mustard, #E9C46A); }

/* Card/listing backgrounds */
.team-card,
.bench-player,
.market-listing,
.fixture-row,
.training-focus,
.rating-row {
    background: var(--bg-card, #ffffff);
    border-color: var(--border-light, rgba(61, 44, 41, 0.2));
}

.team-card:hover,
.bench-player:hover {
    border-color: var(--teal, #2A9D8F);
}

/* Filter selects */
.filter-group select,
.market-filters select,
.player-chip.unassigned select {
    background: var(--bg-light, #FFFCF7);
    color: var(--text-primary, #3D2C29);
    border-color: var(--border-light, rgba(61, 44, 41, 0.2));
}

/* Player chip */
.player-chip {
    background: var(--teal, #2A9D8F);
}

.player-chip.unassigned {
    background: var(--bg-light, #FFFCF7);
    color: var(--text-primary, #3D2C29);
}

/* Skill bars */
.skill-bar {
    background: var(--bg-medium, #FAF6F0);
}

.skill-fill {
    background: var(--teal, #2A9D8F);
}

/* Stat bars */
.stat-bar-container {
    background: var(--bg-medium, #FAF6F0);
}

.stat-bar.home {
    background: var(--teal, #2A9D8F);
}

.stat-bar.away {
    background: var(--orange, #E76F51);
}

/* Formation selector */
.formation-btn {
    background: var(--bg-light, #FFFCF7);
    color: var(--text-primary, #3D2C29);
    border-color: var(--border-light, rgba(61, 44, 41, 0.2));
}

.formation-btn.active {
    background: var(--teal, #2A9D8F);
    color: white;
    border-color: var(--teal, #2A9D8F);
}

/* Tab buttons */
.tab-btn {
    color: var(--text-secondary, #5a4a47);
}

.tab-btn:hover {
    color: var(--text-primary, #3D2C29);
}

.tab-btn.active {
    background: var(--teal, #2A9D8F);
    color: white;
}

/* Events */
.event.home {
    background: rgba(42, 157, 143, 0.1);
}

.event.away {
    background: rgba(231, 111, 81, 0.1);
}

/* Player detail sidebar */
.player-detail {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-light, rgba(61, 44, 41, 0.2));
}

/* Mobile nav */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .main-nav {
        justify-content: center;
    }
    
    .nav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ============================================================================
   DASHBOARD FIXES - Jan 30, 2026
   ============================================================================ */

/* Fix nav-btn for vintage theme - was using dark bg with brown text (invisible) */
.nav-btn {
    padding: 1rem;
    background: var(--brown) !important;
    border: 2px solid var(--mustard) !important;
    border-radius: 6px;
    color: var(--cream) !important;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-btn:hover {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Dashboard team stats - simple stat boxes (not match stat bars) */
.team-stats .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    flex-direction: unset;
}

.team-stats .stat {
    background: var(--cream);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.team-stats .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brown);
    font-family: 'Bebas Neue', sans-serif;
    line-height: 1;
}

.team-stats .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: static !important;
    transform: none !important;
}

@media (max-width: 600px) {
    .team-stats .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .nav-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================================
   DASHBOARD - Restored Original Layout
   ============================================================================ */

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

/* Panel headers - vintage style */
.panel-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Your Team Panel - the main info panel */
.your-team-panel {
    grid-column: span 1;
}

.your-team-panel .team-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: var(--brown);
    margin: 0 0 0.25rem 0;
    line-height: 1.1;
}

.your-team-panel .team-league {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

.your-team-panel .team-standing {
    background: var(--cream);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-light);
}

.your-team-panel .team-standing p {
    margin: 0.25rem 0;
    font-size: 0.95rem;
}

.your-team-panel .team-standing strong {
    color: var(--brown);
}

.your-team-panel .position strong {
    font-size: 1.1rem;
    color: var(--teal);
}

.your-team-panel .team-finances {
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
}

.your-team-panel .team-finances strong {
    color: var(--teal);
}

/* Next Match Panel */
.next-match .match-preview {
    text-align: center;
}

.next-match .teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.next-match .teams span {
    font-weight: 600;
}

.next-match .teams .your-team {
    color: var(--cherry);
}

.next-match .vs {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.next-match .match-type {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.5rem 0 0.25rem;
}

.next-match .match-week {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.next-match .play-btn {
    width: 100%;
    max-width: 200px;
}

/* Season Info Panel */
.season-info p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

/* Button styles */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--teal);
    color: white;
    border: 2px solid var(--teal);
}

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

.btn-primary:disabled {
    background: var(--text-muted);
    border-color: var(--text-muted);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 0.5rem;
    }
    
    .your-team-panel .team-name {
        font-size: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TRAINING VIEW ENHANCED STYLES (v136)
   ═══════════════════════════════════════════════════════════════ */

.current-focus {
    margin-bottom: 1.5rem;
}

.current-focus h3 {
    margin-bottom: 0.5rem;
}

.focus-display {
    padding: 0.75rem 1rem;
    background: var(--bg-dark);
    border-radius: 8px;
    display: inline-block;
}

.focus-display .skill-name {
    font-weight: 600;
    color: var(--teal);
}

.focus-display .intensity {
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.focus-display .no-focus {
    color: var(--text-secondary);
    font-style: italic;
}

/* Intensity buttons */
.intensity-selector {
    margin-bottom: 1.5rem;
}

.intensity-selector h3 {
    margin-bottom: 0.75rem;
}

.intensity-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.intensity-btn {
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.intensity-btn:hover {
    border-color: var(--teal);
    background: var(--bg-dark);
}

.intensity-btn.active {
    background: var(--teal);
    border-color: var(--teal);
    color: white;
}

.intensity-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Skill selection grid */
.skill-selection {
    margin-bottom: 1.5rem;
}

.skill-selection h3 {
    margin-bottom: 0.75rem;
}

.skill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skill-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.skill-btn:hover {
    border-color: var(--teal);
    background: var(--bg-dark);
    transform: translateY(-2px);
}

.skill-btn.active {
    background: var(--teal);
    border-color: var(--teal);
    color: white;
}

.skill-btn .skill-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.skill-btn .skill-positions {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.skill-btn.active .skill-positions {
    color: rgba(255, 255, 255, 0.8);
}

/* Training tips */
.training-tips {
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.training-tips h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.training-tips ul {
    margin: 0;
    padding-left: 1.25rem;
}

.training-tips li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   TRAINING BUTTON OVERRIDES (v136 fix)
   ═══════════════════════════════════════════════════════════════ */

button.intensity-btn,
.training-view button.intensity-btn {
    padding: 0.5rem 1.25rem !important;
    border: 2px solid var(--brown) !important;
    border-radius: 6px !important;
    background: var(--cream) !important;
    color: var(--brown) !important;
    cursor: pointer;
    font-size: 0.9rem !important;
    font-weight: 500;
    margin-right: 0.5rem;
}

button.intensity-btn:hover {
    border-color: var(--teal) !important;
    background: #fff !important;
}

button.intensity-btn.active {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    color: white !important;
}

button.skill-btn,
.training-view button.skill-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0.75rem 1rem !important;
    border: 2px solid var(--brown) !important;
    border-radius: 8px !important;
    background: var(--cream) !important;
    color: var(--brown) !important;
    cursor: pointer;
    min-width: 140px !important;
    margin: 0.25rem !important;
    text-align: left !important;
}

button.skill-btn:hover {
    border-color: var(--teal) !important;
    background: #fff !important;
    transform: translateY(-2px);
}

button.skill-btn.active {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    color: white !important;
}

button.skill-btn .skill-name {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    display: block !important;
}

button.skill-btn .skill-positions {
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

button.skill-btn.active .skill-positions {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SEASON OBJECTIVES
   ═══════════════════════════════════════════════════════════════ */

.objective-modal-content {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.objective-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.objective-option {
    padding: 1rem;
    background: var(--cream);
    border: 3px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.objective-option:hover {
    border-color: var(--brown);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.objective-option.suggested {
    border-color: var(--teal);
    background: rgba(26, 188, 156, 0.1);
}

.objective-option-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.objective-icon {
    font-size: 1.5rem;
}

.objective-option-header strong {
    font-size: 1.1rem;
    color: var(--brown);
}

.risk-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-weight: bold;
}

.risk-badge.risk-too_easy { background: #bdc3c7; color: #2c3e50; }
.risk-badge.risk-safe { background: var(--teal); color: white; }
.risk-badge.risk-realistic { background: var(--mustard); color: var(--brown); }
.risk-badge.risk-risky { background: var(--orange); color: white; }
.risk-badge.risk-very_risky { background: var(--cherry); color: white; }

.suggested-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    background: var(--teal);
    color: white;
    font-weight: bold;
}

.objective-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.objective-stakes {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.objective-success {
    color: var(--teal);
}

.objective-fail {
    color: var(--cherry);
}

/* Objective Panel (Dashboard) */
.objective-panel {
    background: var(--cream);
    border: 3px solid var(--brown);
    border-radius: 8px;
    overflow: hidden;
}

.objective-panel-header {
    background: var(--brown);
    color: var(--cream);
    padding: 0.75rem 1rem;
    font-weight: bold;
}

.objective-panel-body {
    padding: 1rem;
}

.objective-panel .objective-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--brown);
}

.objective-panel .objective-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.objective-panel.not-set {
    border-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════
   WEEKLY CHALLENGES STYLES (v141)
   ═══════════════════════════════════════════════════════════════ */

.challenges-panel {
    background: var(--cream);
    border: 2px solid var(--border-light);
}

.challenges-panel .panel-header {
    background: var(--brown);
    color: var(--cream);
    padding: 0.75rem;
    font-weight: bold;
}

.challenges-list {
    padding: 0.5rem;
}

.challenge-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border: 2px solid var(--border-light);
    transition: all 0.2s ease;
}

.challenge-item:last-child {
    margin-bottom: 0;
}

.challenge-item.completed {
    border-color: var(--teal);
    background: rgba(64, 128, 128, 0.05);
}

.challenge-item.claimed {
    opacity: 0.6;
    border-color: var(--text-secondary);
}

.challenge-icon {
    font-size: 1.5rem;
    min-width: 2rem;
    text-align: center;
}

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

.challenge-name {
    font-weight: bold;
    color: var(--brown);
    font-size: 0.9rem;
}

.challenge-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 2px;
}

.challenge-source {
    font-size: 0.7rem;
    color: #888;
    font-style: italic;
    margin-top: 2px;
}

.challenge-progress-bar {
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.challenge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--mustard));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.challenge-reward-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    min-width: 70px;
}

.challenge-reward {
    font-weight: bold;
    color: var(--brown);
    font-size: 0.85rem;
}

.challenge-claimed-badge {
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--border-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.btn-claim {
    background: var(--teal) !important;
    color: white !important;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(64, 128, 128, 0.5); }
    50% { box-shadow: 0 0 15px rgba(64, 128, 128, 0.8); }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED LINEUP/TACTICS VIEW - v144 */
/* ═══════════════════════════════════════════════════════════════ */

.lineup-view {
    max-width: 1200px;
    margin: 0 auto;
}

.lineup-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

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

.lineup-title h2 {
    margin: 0;
}

.lineup-count {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
}

.lineup-count.complete {
    background: var(--success);
    color: white;
}

.lineup-count.incomplete {
    background: var(--warning);
    color: var(--brown);
}

.lineup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Tactics Panel */
.tactics-panel {
    padding: 1rem;
    margin-bottom: 1rem;
}

.tactics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.formation-selector label,
.tactic-selector label {
    font-weight: bold;
    margin-right: 0.5rem;
    color: var(--brown);
}

.formation-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.formation-btn {
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--brown);
    border-radius: 4px;
    background: var(--cream);
    color: var(--brown);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.formation-btn:hover {
    background: var(--brown);
    color: var(--cream);
}

.formation-btn.active {
    background: var(--mustard);
    border-color: var(--mustard);
    color: var(--brown);
}

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

.tactic-selector select {
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--brown);
    border-radius: 4px;
    background: var(--cream);
    font-weight: bold;
    cursor: pointer;
}

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

/* Pitch */
.pitch-panel {
    padding: 1rem;
    margin-bottom: 1rem;
}

.pitch {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 3/4;
    background: linear-gradient(180deg, #4a8f5a 0%, #3d7a4d 50%, #4a8f5a 100%);
    border: 3px solid var(--brown);
    border-radius: 8px;
    overflow: hidden;
}

.pitch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 50%;
}

.pitch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255,255,255,0.4);
}

.pitch-slot {
    position: absolute;
    width: 60px;
    height: 55px;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    border: 2px solid var(--cream);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.pitch-slot:hover {
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 10;
}

.pitch-slot.filled {
    background: var(--brown);
    border-color: var(--mustard);
}

.pitch-slot.selecting {
    background: var(--teal);
    border-color: white;
    animation: pulse 1s infinite;
}

.pitch-slot.injured {
    border-color: var(--orange);
}

.pitch-slot.suspended {
    border-color: var(--error);
}

.slot-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-weight: bold;
}

.slot-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.slot-player .player-name {
    font-size: 0.7rem;
    color: var(--cream);
    font-weight: bold;
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slot-player .player-rating {
    font-size: 0.75rem;
    color: var(--mustard);
    font-weight: bold;
}

.slot-player .player-status {
    font-size: 0.65rem;
}

.slot-empty {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.5);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 5px var(--teal); }
    50% { box-shadow: 0 0 15px var(--teal); }
}

/* Bench Section */
.bench-section {
    padding: 1rem;
    margin-bottom: 1rem;
}

.bench-section h3 {
    margin: 0 0 1rem 0;
    color: var(--brown);
}

.bench-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.bench-slot {
    flex: 1;
    min-width: 120px;
    max-width: 180px;
    padding: 0.75rem;
    background: var(--bg-dark);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.bench-slot:hover {
    border-color: var(--teal);
    background: rgba(0,0,0,0.1);
}

.bench-slot.filled {
    border-color: var(--mustard);
}

.bench-pos {
    background: var(--brown);
    color: var(--cream);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.bench-name {
    flex: 1;
    font-weight: bold;
    font-size: 0.85rem;
}

.bench-rating {
    font-weight: bold;
    color: var(--teal);
}

.bench-empty {
    color: var(--text-secondary);
    font-style: italic;
}

/* Players Panel */
.players-panel {
    padding: 1rem;
    margin-bottom: 1rem;
}

.players-panel h3 {
    margin: 0 0 1rem 0;
    color: var(--brown);
}

.players-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.player-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-light);
    border: 2px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.player-card:hover {
    border-color: var(--teal);
    transform: translateY(-2px);
}

.player-card.selectable:hover {
    border-color: var(--mustard);
    background: var(--mustard);
}

.player-card.injured {
    opacity: 0.6;
    border-color: var(--orange);
}

.player-card.suspended {
    opacity: 0.6;
    border-color: var(--error);
}

.player-pos {
    background: var(--brown);
    color: var(--cream);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
}

.player-card .player-name {
    font-weight: bold;
    font-size: 0.85rem;
}

.player-card .player-rating {
    font-weight: bold;
    color: var(--teal);
}

.player-warn {
    font-size: 0.8rem;
}

/* Lineup Warnings */
.lineup-warnings {
    background: var(--warning);
    border-color: var(--orange);
    padding: 1rem;
}

.warning-item {
    padding: 0.5rem;
    color: var(--brown);
    font-weight: bold;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .tactics-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .pitch-slot {
        width: 50px;
        height: 45px;
    }
    
    .bench-slot {
        min-width: 100%;
    }
    
    .player-card {
        flex: 1;
        min-width: 45%;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* POST-MATCH PLAYER TALKS - v146 */
/* ═══════════════════════════════════════════════════════════════ */

.player-talks-panel {
    margin-bottom: 1rem;
}

.player-talks-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.talks-counter {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    background: var(--teal);
    color: white;
    border-radius: 12px;
}

.talks-hint {
    padding: 0 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.talks-hint p {
    margin: 0.5rem 0;
}

.player-talks-list {
    padding: 0.5rem 1rem 1rem;
}

.talk-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border: 2px solid var(--border-light);
    transition: all 0.2s;
}

.talk-player-row:hover {
    border-color: var(--teal);
}

.talk-player-row.talked {
    opacity: 0.7;
    background: var(--bg-dark);
}

.talk-player-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.talk-player-pos {
    background: var(--brown);
    color: var(--cream);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

.talk-player-name {
    font-weight: bold;
    flex: 1;
}

.talk-player-rating {
    font-weight: bold;
    font-size: 1.1rem;
    min-width: 35px;
    text-align: center;
}

.talk-player-highlights {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.talk-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.talk-buttons {
    display: flex;
    gap: 0.5rem;
}

.talk-buttons button {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-praise {
    background: var(--success);
    border: none;
    color: white;
}

.btn-praise:hover:not([disabled]) {
    background: #2a9d5a;
}

.btn-expect {
    background: var(--mustard);
    border: none;
    color: var(--brown);
}

.btn-expect:hover:not([disabled]) {
    background: #c9a23a;
}

.btn-criticize {
    background: var(--orange);
    border: none;
    color: white;
}

.btn-criticize:hover:not([disabled]) {
    background: #d35400;
}

.talk-done {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.talk-reaction {
    max-width: 350px;
    text-align: right;
}

.talk-result {
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.talk-result.talk-positive {
    background: rgba(46, 204, 113, 0.15);
    color: var(--success);
}

.talk-result.talk-negative {
    background: rgba(231, 76, 60, 0.15);
    color: var(--error);
}

.talk-result.talk-neutral {
    background: rgba(149, 165, 166, 0.15);
    color: var(--text-secondary);
}

.morale-change {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: 0.5rem;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .talk-player-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .talk-actions {
        align-items: stretch;
    }
    
    .talk-buttons {
        justify-content: center;
    }
    
    .talk-reaction {
        max-width: 100%;
        text-align: center;
    }
}
/* ═══════════════════════════════════════════════════════════════
   LINEUP VIEW - Enhanced Styles (v150)
   ═══════════════════════════════════════════════════════════════ */

/* Two-column layout */
.lineup-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.lineup-left, .lineup-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Header */
.lineup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

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

.lineup-title h2 {
    margin: 0;
    font-size: 1.25rem;
}

.lineup-count {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: bold;
}

.lineup-count.complete {
    background: var(--success-bg, #d4edda);
    color: var(--success-text, #155724);
}

.lineup-count.incomplete {
    background: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
}

.lineup-actions {
    display: flex;
    gap: 0.5rem;
}

/* Tactics Panel */
.tactics-panel {
    padding: 1rem;
}

.tactics-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.formation-selector, .tactic-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.formation-selector label, .tactic-selector label {
    font-weight: 600;
    color: var(--text-secondary);
}

.formation-buttons {
    display: flex;
    gap: 0.25rem;
}

.formation-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #ddd);
    background: var(--bg-secondary, #f5f5f5);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.formation-btn:hover {
    background: var(--bg-hover, #e0e0e0);
}

.formation-btn.active {
    background: var(--primary-color, #8B4513);
    color: white;
    border-color: var(--primary-color, #8B4513);
}

.tactic-selector select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: white;
}

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

/* Pitch */
.pitch-panel {
    padding: 0;
    overflow: hidden;
}

.pitch-wrapper {
    position: relative;
}

.pitch {
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    background: linear-gradient(180deg, #4a8f5a 0%, #3d7a4d 50%, #4a8f5a 100%);
    border-radius: 8px;
    overflow: hidden;
}

.pitch-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sector-toggle-btn {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 10;
}

.sector-toggle-btn:hover {
    background: rgba(0,0,0,0.8);
}

/* Pitch Slots */
.pitch-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 70px;
    min-height: 50px;
    background: rgba(92, 64, 51, 0.95);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 5;
}

.pitch-slot:hover {
    transform: translate(-50%, -50%) scale(1.05);
    z-index: 10;
}

.pitch-slot.selected {
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.pitch-slot.empty {
    background: rgba(0,0,0,0.3);
    border-style: dashed;
}

.pitch-slot.drag-over {
    border-color: #00ff00;
    background: rgba(0, 255, 0, 0.2);
}

.pitch-slot.dragging {
    opacity: 0.5;
}

/* Position Fit Colors */
.pitch-slot.fit-perfect {
    border-color: #4CAF50;
}

.pitch-slot.fit-good {
    border-color: #FFC107;
}

.pitch-slot.fit-poor {
    border-color: #f44336;
}

.pitch-slot.injured {
    border-color: #ff9800;
}

.pitch-slot.suspended {
    border-color: #f44336;
}

.slot-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2px;
}

.slot-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.slot-player .player-name {
    font-size: 0.8rem;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

.slot-player .player-rating {
    font-size: 0.9rem;
    color: #FFD700;
    font-weight: bold;
}

.slot-player .status-icon {
    font-size: 0.75rem;
}

.slot-empty {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.5);
}

/* Instruction Arrows */
.instruction-arrows {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    pointer-events: none;
}

.arrow {
    position: absolute;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    pointer-events: all;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s;
}

.arrow:hover {
    color: white;
    background: rgba(255,255,255,0.2);
}

.arrow.active {
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

.arrow-up { top: -12px; left: 50%; transform: translateX(-50%); }
.arrow-down { bottom: -12px; left: 50%; transform: translateX(-50%); }
.arrow-middle { right: -14px; top: 50%; transform: translateY(-50%); }
.arrow-wing { left: -14px; top: 50%; transform: translateY(-50%); }

/* Sector Overlay */
.sector-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
}

.strength-zone {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 6px;
    background: rgba(0,0,0,0.7);
    color: white;
    text-align: center;
}

.strength-zone.excellent { background: rgba(76, 175, 80, 0.8); }
.strength-zone.good { background: rgba(139, 195, 74, 0.8); }
.strength-zone.average { background: rgba(255, 193, 7, 0.8); }
.strength-zone.weak { background: rgba(255, 152, 0, 0.8); }
.strength-zone.poor { background: rgba(244, 67, 54, 0.8); }

.zone-rating {
    font-size: 1.1rem;
    font-weight: bold;
}

.zone-name {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.9;
}

.zone-label {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 2px;
}

.hatstats-total {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hatstats-label {
    font-size: 0.7rem;
    opacity: 0.8;
}

.hatstats-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
}

/* Bench Panel */
.bench-panel h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.bench-slots {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bench-slot {
    flex: 1;
    min-width: 125px;
    padding: 0.75rem 0.5rem;
    background: var(--bg-secondary, #f5f5f5);
    border: 2px solid var(--border-color, #ddd);
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.bench-slot:hover {
    border-color: var(--primary-color);
}

.bench-slot.selected {
    border-color: #FFD700;
    box-shadow: 0 0 5px rgba(255,215,0,0.5);
}

.bench-slot.filled {
    background: var(--bg-tertiary, #e8e8e8);
}

.bench-slot.drag-over {
    border-color: #00ff00;
    background: rgba(0,255,0,0.1);
}

.bench-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.bench-player {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bench-pos {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.bench-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.bench-rating {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: bold;
}

.bench-empty {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Substitution Panel */
.sub-rules-panel {
    padding: 0;
}

.sub-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f5f5f5);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.sub-panel-header:hover {
    background: var(--bg-hover, #e8e8e8);
}

.sub-title {
    font-weight: 600;
}

.sub-preset-badge {
    padding: 0.25rem 0.5rem;
    background: var(--primary-color, #8B4513);
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
}

.sub-expand {
    color: var(--text-secondary);
}

.sub-panel-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sub-presets label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.preset-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

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

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

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

/* Custom Rules */
.sub-custom-rules, .formation-shift-section {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.rules-header, .shift-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.rules-header span, .shift-header span {
    font-weight: 600;
    font-size: 0.9rem;
}

.no-rules {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.5rem 0;
}

.rule-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.rule-row.disabled {
    opacity: 0.5;
}

.rule-toggle input {
    width: 16px;
    height: 16px;
}

.rule-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rule-players {
    font-weight: 600;
    font-size: 0.9rem;
}

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

.rule-delete {
    background: none;
    border: none;
    color: #f44336;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
}

/* Add Rule Form */
.add-rule-form, .shift-form {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.rule-form-row, .shift-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.rule-form-row select, .shift-form-row select,
.rule-form-row input, .shift-form-row input {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85rem;
}

.rule-form-row input[type="number"], .shift-form-row input[type="number"] {
    width: 60px;
}

.rule-arrow {
    font-weight: bold;
    color: var(--text-secondary);
}

.rule-form-actions, .shift-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.rule-form-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Formation Shift */
.shift-active {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 6px;
}

.shift-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.shift-condition {
    color: var(--text-secondary);
}

.shift-arrow {
    color: var(--primary-color);
}

.shift-formation {
    color: var(--primary-color);
}

.shift-timing {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0.5rem 0;
}

/* Players Panel */
.players-panel {
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.players-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}

.players-header h3 {
    margin: 0;
    font-size: 1rem;
}

.players-header select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
}

.players-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.player-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.player-card.selectable {
    border-color: #FFD700;
}

.player-card.injured {
    opacity: 0.7;
    background: rgba(255,152,0,0.1);
}

.player-card.suspended {
    opacity: 0.7;
    background: rgba(244,67,54,0.1);
}

.player-card .player-pos {
    width: 30px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.player-card .player-name {
    flex: 1;
    font-size: 0.85rem;
}

.player-card .player-rating {
    font-weight: bold;
    color: var(--primary-color);
}

.player-card .player-warn {
    font-size: 0.8rem;
}

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

/* Warnings Panel */
.warnings-panel h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.warning-item {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.warning-item.info {
    background: var(--info-bg, #e3f2fd);
    color: var(--info-text, #1565c0);
}

.warning-item.warning {
    background: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
}

.warning-item.error {
    background: var(--error-bg, #ffebee);
    color: var(--error-text, #c62828);
}

/* Responsive */
@media (max-width: 900px) {
    .lineup-container {
        grid-template-columns: 1fr;
    }
    
    .lineup-right {
        order: -1;
    }
    
    .players-panel {
        max-height: 300px;
    }
    
    .pitch-slot {
        width: 55px;
        min-height: 40px;
    }
    
    .slot-player .player-name {
        font-size: 0.7rem;
        max-width: 45px;
    }
}

/* Button styles */
.btn-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 4px;
    cursor: pointer;
}

.btn-small:hover {
    background: var(--bg-hover);
}

.btn-small.btn-success {
    background: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

.btn-small.btn-success:hover {
    background: #388E3C;
}

/* Lineup Face Containers */
.slot-face {
    width: 44px;
    height: 55px;
    margin: 0 auto 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.slot-face canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.bench-face {
    width: 36px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    overflow: hidden;
    margin-right: 6px;
}

.bench-face canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.player-card-face {
    width: 28px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
    overflow: hidden;
    margin-right: 6px;
}

.player-card-face canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Adjust slot-player layout for face */
.slot-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Adjust bench-player layout for face */
.bench-player {
    display: flex;
    align-items: center;
}

/* Adjust player-card layout for face */
.player-card {
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINEUP PAGE REDESIGN v2.0 - Targeting 8/10 Quality
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main Layout - Two column with pitch dominant */
.lineup-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 120px);
}

.lineup-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lineup-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Header Panel */
.lineup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(139, 90, 43, 0.95);
    border-radius: 8px;
}

.lineup-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.lineup-count {
    background: #c9302c;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
}

.lineup-count.complete {
    background: #5cb85c;
}

.lineup-actions {
    display: flex;
    gap: 8px;
}

.lineup-actions button {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary {
    background: #5cb85c;
    color: white;
}

.btn-primary:hover {
    background: #4cae4c;
}

.btn-secondary {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.25);
}

/* Tactics Panel - Compact */
.tactics-panel {
    padding: 10px 16px;
    background: rgba(139, 90, 43, 0.9);
    border-radius: 8px;
}

.tactics-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.formation-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.formation-selector label {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

.formation-buttons {
    display: flex;
    gap: 4px;
}

.formation-btn {
    padding: 6px 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
    position: relative;
}

.formation-btn:hover {
    background: rgba(255,255,255,0.2);
}

.formation-btn.active {
    background: #5cb85c;
    border-color: #5cb85c;
}

.tactic-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tactic-selector label {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

.tactic-selector select {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* PITCH - The Star of the Show */
.pitch-panel {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 8px;
    flex: 1;
}

.pitch-wrapper {
    position: relative;
}

.pitch {
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    background: linear-gradient(to bottom, 
        #2d8a2d 0%, #3a9a3a 10%, #2d8a2d 10%, 
        #3a9a3a 20%, #2d8a2d 20%, #3a9a3a 30%,
        #2d8a2d 30%, #3a9a3a 40%, #2d8a2d 40%,
        #3a9a3a 50%, #2d8a2d 50%, #3a9a3a 60%,
        #2d8a2d 60%, #3a9a3a 70%, #2d8a2d 70%,
        #3a9a3a 80%, #2d8a2d 80%, #3a9a3a 90%,
        #2d8a2d 90%, #3a9a3a 100%);
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.3);
}

/* ENLARGED Player Cards on Pitch */
.pitch-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 82px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.pitch-slot:hover {
    transform: translate(-50%, -50%) scale(1.08);
    z-index: 20;
}

.pitch-slot.selected {
    z-index: 25;
}

.pitch-slot.selected::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid #fff;
    border-radius: 10px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Slot content styling */
.slot-face {
    width: 48px;
    height: 48px;
    margin: 0 auto 3px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.slot-face canvas {
    width: 100% !important;
    height: 100% !important;
}

.slot-label {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: bold;
}

.slot-player {
    background: rgba(60, 40, 20, 0.95);
    border-radius: 6px;
    padding: 4px 6px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.slot-player .player-name {
    display: block;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}

.slot-player .player-rating {
    display: inline-block;
    background: #f0ad4e;
    color: #333;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 2px;
}

.slot-empty {
    background: rgba(255,255,255,0.1);
    border: 2px dashed rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 20px 10px;
    color: rgba(255,255,255,0.5);
    font-size: 1.5rem;
}

/* Hide instruction arrows by default - show on hover */
.instruction-arrows {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
    z-index: 30;
}

.pitch-slot:hover .instruction-arrows,
.pitch-slot.selected .instruction-arrows {
    display: flex;
    gap: 6px;
}

.instruction-arrows .arrow {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    transition: all 0.2s;
}

.instruction-arrows .arrow:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

.instruction-arrows .arrow.active {
    background: #5cb85c;
    color: white;
}

/* Sector toggle button */
.sector-toggle-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}

.sector-toggle-btn:hover {
    background: rgba(0,0,0,0.85);
}

/* BENCH - Horizontal, Always Visible */
.bench-panel {
    background: rgba(139, 90, 43, 0.9);
    border-radius: 8px;
    padding: 10px 12px;
}

.bench-panel h3 {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
}

.bench-slots {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.bench-slot {
    flex: 0 0 auto;
    width: 80px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.bench-slot:hover {
    transform: translateY(-2px);
}

.bench-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.bench-face {
    width: 40px;
    height: 40px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.4);
}

.bench-face canvas {
    width: 100% !important;
    height: 100% !important;
}

.bench-player {
    background: rgba(60, 40, 20, 0.9);
    border-radius: 6px;
    padding: 6px;
}

.bench-player .bench-pos {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 2px;
    margin-right: 4px;
}

.bench-player .bench-name {
    display: block;
    color: white;
    font-size: 0.7rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bench-player .bench-rating {
    display: inline-block;
    background: #f0ad4e;
    color: #333;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 3px;
}

.bench-empty {
    background: rgba(255,255,255,0.05);
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 15px 5px;
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
}

/* RIGHT SIDEBAR - Available Players */
.players-panel {
    background: rgba(139, 90, 43, 0.95);
    border-radius: 8px;
    padding: 12px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.players-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.players-header h3 {
    margin: 0;
    font-size: 0.9rem;
    color: white;
}

.players-header select {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.players-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Available Player Cards - Clean Design */
.player-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.player-card:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
}

.player-card.selectable {
    border-color: #5cb85c;
}

.player-card.selectable:hover {
    background: rgba(92, 184, 92, 0.2);
}

.player-card-face {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3);
}

.player-card-face canvas {
    width: 100% !important;
    height: 100% !important;
}

.player-card .player-pos {
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.player-card .player-name {
    flex: 1;
    color: white;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card .player-rating {
    background: #f0ad4e;
    color: #333;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
}

.player-card .player-warn {
    font-size: 0.8rem;
}

/* Substitution Panel - Compact */
.sub-rules-panel {
    background: rgba(139, 90, 43, 0.9);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.75rem;
}

.sub-rules-panel h4 {
    margin: 0 0 8px 0;
    color: white;
    font-size: 0.8rem;
}

/* Warnings Panel */
.warnings-panel {
    background: rgba(192, 57, 43, 0.9);
    border-radius: 8px;
    padding: 10px 12px;
}

.warnings-panel h4 {
    margin: 0 0 6px 0;
    color: white;
    font-size: 0.8rem;
}

.warning-item {
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    padding: 4px 0;
}

/* Fit indicators */
.pitch-slot.fit-perfect .slot-player {
    border: 2px solid #5cb85c;
}

.pitch-slot.fit-good .slot-player {
    border: 2px solid #f0ad4e;
}

.pitch-slot.fit-poor .slot-player {
    border: 2px solid #d9534f;
}

/* Drag states */
.pitch-slot.drag-over,
.bench-slot.drag-over,
.player-card.drag-over {
    outline: 2px dashed #5cb85c;
    outline-offset: 2px;
}

/* Mobile responsive */
@media (max-width: 900px) {
    .lineup-container {
        grid-template-columns: 1fr;
    }
    
    .lineup-right {
        order: -1;
    }
    
    .players-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .player-card {
        flex: 0 0 calc(50% - 4px);
    }
}

/* FIX: Ensure player names are visible on pitch */
.pitch-slot .slot-player {
    background: rgba(50, 35, 20, 0.98) !important;
    padding: 6px 8px 8px !important;
    min-width: 60px;
}

.pitch-slot .slot-player .player-name {
    display: block !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin: 4px 0 2px;
}

.pitch-slot .slot-player .player-rating {
    background: #f5b041 !important;
    color: #1a1a1a !important;
    font-size: 0.75rem !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* Available Players - Better contrast and layout */
.player-card {
    background: rgba(70, 50, 35, 0.95) !important;
    padding: 10px !important;
}

.player-card .player-name {
    color: #fff !important;
    font-size: 0.85rem !important;
}

.player-card .player-rating {
    background: #f5b041 !important;
    color: #1a1a1a !important;
}

/* Bench - Better visibility */
.bench-slot .bench-player {
    background: rgba(50, 35, 20, 0.98) !important;
    padding: 8px !important;
}

.bench-slot .bench-name {
    color: #fff !important;
    font-size: 0.75rem !important;
}

/* FORCE player name visibility - Override all conflicting rules */
.pitch .pitch-slot .slot-player {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(50, 35, 20, 0.98) !important;
    padding: 6px 8px 8px !important;
    border-radius: 6px !important;
}

.pitch .pitch-slot .slot-player .slot-face {
    order: 1;
}

.pitch .pitch-slot .slot-player .player-name {
    order: 2;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    margin: 4px 0 2px !important;
    white-space: nowrap;
    max-width: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.pitch .pitch-slot .slot-player .player-rating {
    order: 3;
    display: inline-block !important;
    background: #f5b041 !important;
    color: #1a1a1a !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
}

/* Player name styling - production */
.pitch-slot .slot-player span.player-name {
    display: block !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 4px !important;
    margin: 3px 0 2px !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65px;
}

/* FINAL FIX: Force player names visible on pitch - maximum specificity */
#pitch .pitch-slot .slot-player .player-name,
.pitch .pitch-slot .slot-player .player-name,
.pitch-slot.filled .slot-player .player-name,
.pitch-slot .slot-player span.player-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
    padding: 2px 4px !important;
    margin: 4px 0 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 62px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Player info wrapper for pitch slots */
.slot-player .player-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 4px !important;
}

.slot-player .player-info .player-name {
    display: block !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.slot-player .player-info .player-rating {
    display: inline-block !important;
    background: #f5b041 !important;
    color: #1a1a1a !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* Fix order for face + player-info layout */
.pitch .pitch-slot .slot-player .slot-face {
    order: 1 !important;
}

.pitch .pitch-slot .slot-player .player-info {
    order: 2 !important;
}

/* Fix GK visibility - add padding to pitch container */
.pitch {
    padding-bottom: 60px !important;
}

/* Ensure pitch slots don't get cropped */
.pitch-slot {
    z-index: 5;
}

/* Fix GK visibility - allow overflow */
.pitch,
.pitch-container,
#pitch {
    overflow: visible !important;
}

/* Ensure GK card is fully visible */
.pitch-slot[data-slot='GK'] {
    margin-bottom: 40px;
}

/* More space for GK rating badge */
.pitch-slot[data-slot='GK'] .player-info {
    margin-bottom: 15px !important;
}

.lineup-left .pitch {
    margin-bottom: 30px !important;
}

/* Sector Strength Panel in Sidebar */
.sector-panel {
    background: rgba(50, 35, 20, 0.95);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.sector-panel h3 {
    font-size: 0.9rem;
    margin: 0 0 10px 0;
    color: #f5b041;
}

.sector-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sector-group {
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 8px;
}

.sector-group-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.sector-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.sector-label {
    width: 20px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
}

.sector-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    overflow: hidden;
}

.sector-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sector-value {
    width: 30px;
    text-align: right;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
}

.sector-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    margin-top: 4px;
}

.sector-total span:first-child {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}

.power-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f5b041;
}

/* ============================================
   PITCH SLOT EXPANSION - Show full names
   ============================================ */

/* Make pitch slots wider to fit full names */
.pitch-slot,
#pitch .pitch-slot,
.pitch .pitch-slot {
    width: 80px !important;
    min-width: 80px !important;
}

/* Remove name truncation - show full names */
.pitch-slot .slot-player span.player-name,
#pitch .pitch-slot .slot-player .player-name,
.pitch .pitch-slot .slot-player .player-name,
.pitch-slot.filled .slot-player .player-name,
.slot-player .player-info .player-name {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 10px !important;
}

/* Bench names - also full */
.bench-player .bench-name {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Available player cards - show full names */
.player-card .player-name,
.available-player .player-name,
.player-mini-card .player-name {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ============================================
   COMPACT LAYOUT - Fit on one screen
   ============================================ */

/* More compact pitch - change aspect ratio */
.pitch,
#pitch {
    aspect-ratio: 4/3 !important;
    max-width: 550px !important;
    max-height: 420px !important;
}

/* Smaller pitch slots for compact view */
.pitch-slot,
#pitch .pitch-slot,
.pitch .pitch-slot {
    width: 70px !important;
    min-width: 70px !important;
    height: auto !important;
}

/* Compact pitch slot player names */
.pitch-slot .slot-player span.player-name,
.slot-player .player-name {
    font-size: 9px !important;
    margin: 2px 0 !important;
}

/* Smaller faces in pitch */
.slot-face {
    width: 36px !important;
    height: 36px !important;
}

/* Reduce lineup header padding */
.lineup-header,
.lineup-controls {
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
}

/* Compact formation buttons */
.formation-btn {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/* Compact substitutes - horizontal layout */
.bench-scroll {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px !important;
}

.bench-slot {
    flex: 0 0 auto !important;
    width: 80px !important;
    padding: 6px !important;
}

/* Compact sidebar panels */
.lineup-right .panel,
.sector-panel,
.team-strength-panel {
    padding: 8px !important;
    margin-bottom: 8px !important;
}

.sector-bar-row {
    margin-bottom: 4px !important;
}

/* Compact available players */
.available-players .player-card,
.player-mini-card {
    padding: 4px 6px !important;
    margin-bottom: 4px !important;
}

/* Reduce main content padding */
.lineup-container,
.lineup-main {
    padding: 8px !important;
    gap: 12px !important;
}

/* Ensure pitch container doesn't overflow */
.pitch-container {
    margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════
   NEW HORIZONTAL LINEUP LAYOUT - Jan 2026
   ═══════════════════════════════════════════════════════════════ */

.lineup-page {
    padding: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.lineup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a3e;
}

.lineup-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lineup-title h2 {
    margin: 0;
    color: #fff;
}

.lineup-count {
    background: #2a2a3e;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    color: #888;
}

.lineup-count.complete {
    background: #27ae60;
    color: #fff;
}

.lineup-actions {
    display: flex;
    gap: 8px;
}

.btn-action {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    background: #2a2a3e;
    color: #fff;
    transition: all 0.2s;
}

.btn-action:hover {
    background: #3a3a4e;
}

.btn-action.primary {
    background: #4ecca3;
    color: #1a1a2e;
}

.btn-action.primary:hover {
    background: #3db892;
}

.btn-action.secondary {
    background: #444;
}

.lineup-controls {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.control-group label {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
}

.formation-buttons {
    display: flex;
    gap: 4px;
}

.formation-btn {
    padding: 6px 12px;
    border: 1px solid #3a3a4e;
    border-radius: 4px;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.formation-btn:hover {
    border-color: #4ecca3;
    color: #4ecca3;
}

.formation-btn.active {
    background: #4ecca3;
    border-color: #4ecca3;
    color: #1a1a2e;
}

.tactic-select {
    padding: 6px 12px;
    border: 1px solid #3a3a4e;
    border-radius: 4px;
    background: #2a2a3e;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.lineup-main {
    display: flex;
    gap: 20px;
}

.lineup-left {
    flex: 1;
    min-width: 0;
}

.lineup-right {
    width: 300px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL PITCH
   ═══════════════════════════════════════════════════════════════ */

.pitch-container {
    background: linear-gradient(180deg, #1a472a 0%, #0d3d1e 100%);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.pitch-field {
    position: relative;
    width: 100%;
    aspect-ratio: 5/3;
    /* Vintage grass gradient */
    background: linear-gradient(180deg, #4a8f5a 0%, #3d7a4d 50%, #4a8f5a 100%);
    border-radius: 4px;
    overflow: hidden;
}

/* Halftone dot overlay for pixelated vintage feel */
.pitch-field::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 1px, transparent 1px);
    background-size: 4px 4px;
    z-index: 1;
}

/* Mowing stripe pattern overlay */
.pitch-field::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.10;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0%,
        transparent 8%,
        rgba(255, 255, 255, 0.2) 8%,
        rgba(255, 255, 255, 0.2) 16%
    );
    z-index: 1;
}

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

.pitch-line-center {
    position: absolute;
    left: 50%;
    top: 5%;
    bottom: 5%;
    width: 2px;
    background: rgba(255,255,255,0.3);
}

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

.pitch-box-left {
    position: absolute;
    left: 0;
    top: 25%;
    width: 12%;
    height: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    border-left: none;
}

.pitch-box-right {
    position: absolute;
    right: 0;
    top: 25%;
    width: 12%;
    height: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    border-right: none;
}

/* ═══════════════════════════════════════════════════════════════
   PITCH CARDS (Players on pitch)
   ═══════════════════════════════════════════════════════════════ */

.pitch-card {
    /* WIDENED 2026-02-03 */
    position: absolute;
    transform: translate(-50%, -50%);
    width: 125px;
    height: 52px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 3px 4px;
    gap: 5px;
    z-index: 5;
    background: rgba(20, 20, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.pitch-card:hover {
    transform: translate(-50%, -50%) scale(1.08);
    z-index: 10;
}

.pitch-card.filled {
    border-color: #3a3a4e;
}

.pitch-card.empty {
    background: rgba(26, 26, 46, 0.7);
    border: 2px dashed #3a3a4e;
}

.pitch-card.empty:hover {
    border-color: #4ecca3;
}

.pitch-card.selected {
    border-color: #4ecca3;
    box-shadow: 0 0 12px rgba(78, 204, 163, 0.5);
}

.pitch-card.fit-perfect {
    border-color: #4ecca3;
}

.pitch-card.fit-good {
    border-color: #8bc34a;
}

.pitch-card.fit-poor {
    border-color: #e74c3c;
}

.card-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.card-face {
    width: 36px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.card-face canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.card-name {
    font-size: 0.65rem;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
    text-align: left;
    line-height: 1.2;
}

.card-rating {
    font-size: 0.65rem;
    font-weight: 700;
    color: #e9c46a;
    text-align: left;
    line-height: 1.2;
}

.card-empty {
    width: 40px;
    height: 40px;
    margin: 8px auto;
    line-height: 40px;
    font-size: 24px;
    color: #555;
}

/* ═══════════════════════════════════════════════════════════════
   DUGOUT BENCH
   ═══════════════════════════════════════════════════════════════ */

.dugout-container {
    background: linear-gradient(180deg, #5d4037 0%, #3e2723 100%);
    border: 2px solid #8d6e63;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.dugout-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #bcaaa4;
    margin-bottom: 10px;
    text-align: center;
}

.dugout-slots {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dugout-slot {
    width: 80px;
    background: rgba(26, 26, 46, 0.9);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.dugout-slot:hover {
    transform: scale(1.05);
}

.dugout-slot.filled {
    border-color: #3a3a4e;
}

.dugout-slot.empty {
    background: rgba(26, 26, 46, 0.5);
    border: 2px dashed #5d5d5d;
}

.bench-role {
    font-size: 9px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}

.bench-face {
    width: 36px;
    height: 36px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: #2a2a3e;
    overflow: hidden;
}

.bench-face canvas {
    width: 36px !important;
    height: 36px !important;
}

.bench-name {
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bench-rating {
    font-size: 11px;
    font-weight: bold;
    color: #4ecca3;
}

.bench-empty {
    font-size: 20px;
    color: #555;
    height: 36px;
    line-height: 36px;
}

.bench-desc {
    font-size: 9px;
    color: #666;
}

/* ═══════════════════════════════════════════════════════════════
   STRENGTH PANEL
   ═══════════════════════════════════════════════════════════════ */

.strength-panel {
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.strength-panel h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #fff;
}

.strength-section {
    margin-bottom: 12px;
}

.strength-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 6px;
}

.strength-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.strength-label {
    width: 50px;
    font-size: 11px;
    color: #aaa;
}

.strength-bar-bg {
    flex: 1;
    height: 8px;
    background: #2a2a3e;
    border-radius: 4px;
    overflow: hidden;
}

.strength-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.strength-value {
    width: 32px;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}

.strength-rating {
    width: 60px;
    font-size: 10px;
    color: #888;
}

.strength-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #2a2a3e;
    margin-top: 12px;
    gap: 4px;
}

.strength-total span {
    font-size: 12px;
    color: #888;
}

.strength-total .power-label {
    font-size: 11px;
    color: #7a6d5d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.strength-total .total-value {
    font-size: 28px;
    font-weight: bold;
    color: #4ecca3;
}

.strength-total .power-tier {
    font-size: 13px;
    color: #d4a574;
    font-style: italic;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   AVAILABLE PLAYERS PANEL
   ═══════════════════════════════════════════════════════════════ */

.players-panel {
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 8px;
    padding: 16px;
}

.players-panel h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #fff;
}

.players-list {
    max-height: 400px;
    overflow-y: auto;
}

.player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.player-row:hover {
    background: #2a2a3e;
}

.player-face-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2a2a3e;
    overflow: hidden;
    flex-shrink: 0;
}

.player-face-mini canvas {
    width: 28px !important;
    height: 28px !important;
}

.player-pos {
    width: 28px;
    font-size: 10px;
    text-align: center;
    padding: 2px 4px;
    background: #2a2a3e;
    border-radius: 3px;
    color: #888;
}

.player-name-row {
    flex: 1;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-rating-row {
    font-size: 12px;
    font-weight: bold;
    color: #4ecca3;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .lineup-main {
        flex-direction: column;
    }

    .lineup-right {
        width: 100%;
        display: flex;
        gap: 16px;
    }

    .strength-panel,
    .players-panel {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .lineup-header {
        flex-direction: column;
        gap: 12px;
    }

    .formation-buttons {
        flex-wrap: wrap;
    }

    .lineup-right {
        flex-direction: column;
    }

    .pitch-card {
    /* WIDENED 2026-02-03 */
    min-width: 76px;
        width: 60px;
        padding: 4px;
    }

    .card-face {
        width: 32px;
        height: 32px;
    }

    .card-face canvas {
        width: 32px !important;
        height: 32px !important;
    }

    .dugout-slot {
        width: 65px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER INSTRUCTION ARROWS
   ═══════════════════════════════════════════════════════════════ */

.slot-arrow {
    position: absolute;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 40, 60, 0.9);
    border: 1px solid rgba(78, 204, 163, 0.3);
    color: #888;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.slot-arrow:hover {
    background: rgba(78, 204, 163, 0.3);
    color: #4ecca3;
    transform: scale(1.1);
}

.slot-arrow.on {
    background: #4ecca3;
    color: #1a1a2e;
    border-color: #4ecca3;
    box-shadow: 0 0 8px rgba(78, 204, 163, 0.5);
}

/* Arrow positions around the card */
.slot-arrow.right {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.slot-arrow.right:hover {
    transform: translateY(-50%) scale(1.1);
}

.slot-arrow.left {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.slot-arrow.left:hover {
    transform: translateY(-50%) scale(1.1);
}

.slot-arrow.up {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.slot-arrow.up:hover {
    transform: translateX(-50%) scale(1.1);
}

.slot-arrow.down {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.slot-arrow.down:hover {
    transform: translateX(-50%) scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER POPUP (detail overlay)
   ═══════════════════════════════════════════════════════════════ */

.player-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.player-popup {
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
    border-radius: 12px;
    width: 320px;
    max-width: 90vw;
    padding: 20px;
    position: relative;
    animation: slideUp 0.2s ease;
}

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

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: #2a2a3e;
    color: #888;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.popup-close:hover {
    background: #e74c3c;
    color: #fff;
}

.popup-header {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.popup-face {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #2a2a3e;
    overflow: hidden;
    flex-shrink: 0;
}

.popup-face canvas {
    width: 80px !important;
    height: 80px !important;
}

.popup-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popup-name {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px 0;
    color: #fff;
}

.popup-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.popup-pos {
    background: #3498db;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.popup-age {
    color: #888;
    font-size: 12px;
}

.popup-rating {
    color: #4ecca3;
    font-weight: bold;
    font-size: 12px;
}

.popup-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: #0f0f1a;
    border-radius: 8px;
}

.popup-stat {
    flex: 1;
    text-align: center;
}

.popup-stat-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}

.popup-stat-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.popup-skills {
    margin-bottom: 16px;
}

.popup-skill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.popup-skill-name {
    width: 70px;
    font-size: 11px;
    color: #aaa;
}

.popup-skill-bar {
    flex: 1;
    height: 6px;
    background: #2a2a3e;
    border-radius: 3px;
    overflow: hidden;
}

.popup-skill-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ecca3, #3498db);
    border-radius: 3px;
}

.popup-skill-val {
    width: 24px;
    font-size: 11px;
    color: #fff;
    text-align: right;
}

.popup-actions {
    display: flex;
    gap: 8px;
}

.popup-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #2a2a3e;
    background: #2a2a3e;
    color: #fff;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.popup-btn:hover {
    background: #3a3a4e;
}

.popup-btn.primary {
    background: #4ecca3;
    border-color: #4ecca3;
    color: #1a1a2e;
}

.popup-btn.primary:hover {
    background: #3dbb92;
}

/* ═══════════════════════════════════════════════════════════════
   LINEUP PAGE - FIXED SIZES
   ═══════════════════════════════════════════════════════════════ */

/* Pitch card - larger for visibility */
.pitch-card {
    /* WIDENED 2026-02-03 */
    min-width: 90px;
    width: 95px;
    padding: 8px 6px;
}

/* Face in pitch - larger and clearer */
.card-face {
    width: 52px;
    height: 52px;
    margin: 6px auto 4px;
    border-radius: 6px;
    background: #2a2a3e;
    overflow: hidden;
}

.card-face canvas {
    width: 52px !important;
    height: 52px !important;
}

/* Name more visible */
.card-name {
    font-size: 12px;
    font-weight: 600;
}

/* Rating more prominent */
.card-rating {
    font-size: 14px;
    font-weight: bold;
}

/* Bench slots - larger faces */
.dugout-slot {
    min-width: 80px;
    padding: 8px;
}

.bench-face {
    width: 44px;
    height: 44px;
    margin: 4px auto;
    border-radius: 6px;
    background: #2a2a3e;
    overflow: hidden;
}

.bench-face canvas {
    width: 44px !important;
    height: 44px !important;
}

.bench-name {
    font-size: 11px;
    font-weight: 600;
}

.bench-rating {
    font-size: 12px;
    font-weight: bold;
    color: #4ecca3;
}

/* Available players - larger face */
.player-face-mini {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #2a2a3e;
    overflow: hidden;
    flex-shrink: 0;
}

.player-face-mini canvas {
    width: 36px !important;
    height: 36px !important;
}

.player-row {
    padding: 8px;
    gap: 10px;
}

.player-name-row {
    font-size: 13px;
}

.player-rating-row {
    font-size: 13px;
    font-weight: bold;
}

.player-pos {
    font-size: 11px;
    padding: 3px 6px;
}

/* ═══════════════════════════════════════════════════════════════
   FACE CANVAS SCALING - Render at 120px, display at container size
   ═══════════════════════════════════════════════════════════════ */

/* Pitch card faces - display at container size */
.card-face canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Bench faces - display at container size */
.bench-face canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Available players list faces */
.player-face-mini canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Popup face */
.popup-face canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   FIX: Rectangular faces (not circular) - matches aspect ratio
   Face canvas is 200x250 (1:1.25 ratio)
   ═══════════════════════════════════════════════════════════════ */

/* Pitch card faces - rectangular, not circular */
.card-face {
    width: 44px;
    height: 55px;
    margin: 4px auto;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Bench faces - rectangular */
.bench-face {
    width: 40px;
    height: 50px;
    margin: 4px auto;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Available players - rectangular */
.player-face-mini {
    width: 32px;
    height: 40px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    flex-shrink: 0;
}

/* Popup face - larger rectangular */
.popup-face {
    width: 80px;
    height: 100px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SUBSTITUTION RULES PANEL
   ═══════════════════════════════════════════════════════════════ */

.sub-rules-panel {
    background: #3e2723;
    border: 2px solid #8d6e63;
    border-radius: 8px;
    margin-top: 12px;
    overflow: hidden;
}

.sub-rules-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    background: #5d4037;
    transition: background 0.2s;
}

.sub-rules-header:hover {
    background: #6d4c41;
}

.sub-rules-title {
    font-weight: 600;
    font-size: 13px;
    color: #fff;
}

.sub-preset-badge {
    font-size: 11px;
    padding: 3px 8px;
    background: #4ecca3;
    color: #1a1a2e;
    border-radius: 4px;
    font-weight: 600;
}

.sub-rules-expand {
    font-size: 10px;
    color: #bcaaa4;
}

.sub-rules-content {
    padding: 14px;
    background: #3e2723;
}

.sub-preset-section {
    margin-bottom: 14px;
}

.sub-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sub-preset-btn {
    flex: 1 1 auto;
    min-width: 70px;
    padding: 8px 6px;
    font-size: 11px;
    border: 1px solid #5d4037;
    border-radius: 6px;
    background: #4e342e;
    color: #bcaaa4;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sub-preset-btn:hover {
    border-color: #4ecca3;
    color: #4ecca3;
}

.sub-preset-btn.active {
    background: #4ecca3;
    color: #1a1a2e;
    border-color: #4ecca3;
}

.preset-icon {
    font-size: 16px;
    line-height: 1;
}

.preset-name {
    font-size: 10px;
    font-weight: 600;
}

.sub-preset-desc {
    font-size: 11px;
    color: #bcaaa4;
    margin-top: 10px;
    padding: 8px 10px;
    background: #4e342e;
    border-radius: 4px;
    border-left: 3px solid #4ecca3;
}

.preset-desc-icon {
    margin-right: 6px;
}

.sub-custom-section {
    padding-top: 12px;
    border-top: 1px dashed #5d4037;
}

.sub-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sub-label {
    font-size: 11px;
    font-weight: 600;
    color: #bcaaa4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sub-count {
    font-size: 10px;
    color: #8d6e63;
}

.sub-rules-list {
    margin-bottom: 10px;
}

.sub-rule-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #4e342e;
    border: 1px solid #5d4037;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 12px;
}

.sub-rule-row.disabled {
    opacity: 0.5;
}

.sub-rule-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #4ecca3;
}

.sub-rule-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-rule-players {
    color: #fff;
    font-weight: 500;
}

.sub-rule-when {
    font-size: 10px;
    color: #bcaaa4;
}

.sub-rule-delete {
    background: none;
    border: none;
    color: #e57373;
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.sub-rule-delete:hover {
    color: #ef5350;
}

.sub-rules-empty {
    text-align: center;
    padding: 16px;
    background: #4e342e;
    border-radius: 6px;
    margin-bottom: 10px;
}

.sub-rules-empty .empty-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.sub-rules-empty .empty-text {
    font-size: 12px;
    color: #bcaaa4;
    font-weight: 500;
}

.sub-rules-empty .empty-hint {
    font-size: 10px;
    color: #8d6e63;
    margin-top: 4px;
}

.sub-max-rules {
    font-size: 11px;
    color: #8d6e63;
    text-align: center;
    padding: 8px;
    background: #4e342e;
    border-radius: 4px;
}

.sub-add-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #bcaaa4;
    padding: 10px;
    background: #4e342e;
    border-radius: 4px;
}

.sub-add-form {
    background: #4e342e;
    padding: 12px;
    border-radius: 6px;
    border: 1px dashed #5d4037;
}

.sub-add-title {
    font-size: 11px;
    font-weight: 600;
    color: #4ecca3;
    margin-bottom: 10px;
}

.sub-add-players {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.sub-arrow {
    color: #bcaaa4;
    font-size: 14px;
}

.sub-select {
    flex: 1;
    padding: 6px 8px;
    font-size: 11px;
    border: 1px solid #5d4037;
    border-radius: 4px;
    background: #3e2723;
    color: #fff;
}

.sub-add-when {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.sub-minute-group,
.sub-condition-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-minute-group label,
.sub-condition-group label {
    font-size: 9px;
    color: #8d6e63;
    text-transform: uppercase;
}

.sub-minute {
    width: 50px;
    padding: 6px 8px;
    font-size: 11px;
    border: 1px solid #5d4037;
    border-radius: 4px;
    background: #3e2723;
    color: #fff;
    text-align: center;
}

.sub-condition-group .sub-select {
    min-width: 90px;
}

.sub-add-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    background: #4ecca3;
    color: #1a1a2e;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.sub-add-btn:hover {
    background: #3db892;
}

/* Card info container for horizontal layout */
.card-info-old {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

/* Empty pitch card styling */
.pitch-card.empty {
    background: rgba(0, 0, 0, 0.4);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    justify-content: center;
    align-items: center;
}

.pitch-card.empty:hover {
    border-color: #4ecca3;
    background: rgba(78, 204, 163, 0.2);
}

/* Card badge position for horizontal cards */
.pitch-card .card-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 10;
}

/* Pitch card hover */
.pitch-card:hover {
    transform: translate(-50%, -50%) scale(1.08);
    z-index: 20;
}

/* Position Fit Indicators for Available Players - v158 */
.player-row.fit-perfect {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.3) 0%, transparent 100%);
    border-left: 3px solid #4CAF50;
}
.player-row.fit-good {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.2) 0%, transparent 100%);
    border-left: 3px solid #FFC107;
}
.player-row.fit-poor {
    opacity: 0.6;
    border-left: 3px solid #666;
}
.player-row.is-swap {
    border-style: dashed;
}
.swap-badge {
    background: #FF9800;
    color: #000;
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    margin-left: auto;
}
.players-panel h4 {
    color: #FFD700;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   LINEUP FIXES - 2026-02-03
   ═══════════════════════════════════════════════════════════════ */

/* Shirt number badge */
.card-shirt {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    z-index: 2;
}

/* OVR label next to rating */
.ovr-label {
    font-size: 8px;
    font-weight: normal;
    color: #aaa;
    margin-left: 2px;
}

/* Zone-based Team Strength */
.strength-pitch {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.zone-row {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.zone-row.midfield-row {
    /* Midfield spans full width */
}

.zone-row.midfield-row .zone-cell {
    flex: 1;
    max-width: 100%;
}

.zone-cell {
    flex: 1;
    min-width: 60px;
    padding: 8px 4px;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.zone-value {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.zone-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card info wrapper - stacks name and rating */
.card-info-old {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card-info .card-name {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-info .card-rating {
    font-size: 13px;
    font-weight: bold;
    color: #e9c46a;
}

/* Fix card-name truncation - allow full width */
.card-info .card-name {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
}

/* Card info - NO overflow hidden */
.card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

/* Card name - no truncation */
.pitch-card .card-info .card-name {
    font-size: 11px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
}

/* Allow overflow from pitch-card for long names */
.pitch-card {
    overflow: visible;
}

.pitch-card .card-name {
    overflow: visible;
    text-overflow: unset;
}

/* Wider pitch cards - 2026-02-03 fix2 */
.pitch-card {
    width: 140px;
}

/* Card name right-aligned with initials format - 2026-02-03 */
.pitch-card .card-info {
    text-align: right;
    align-items: flex-end;
}

.pitch-card .card-info .card-name {
    font-size: 10px;
    font-weight: 600;
    text-align: right;
}

.pitch-card .card-info .card-rating {
    font-size: 9px;
    font-weight: normal;
    color: #e9c46a;
    text-align: right;
}

/* Card name two-line format - 2026-02-03 */
.pitch-card .card-info {
    text-align: left;
    align-items: flex-start;
    gap: 0;
    line-height: 1.1;
}

.pitch-card .card-surname {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

.pitch-card .card-initial {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    text-align: left;
}

.pitch-card .card-rating {
    font-size: 10px;
    font-weight: 600;
    color: #e9c46a;
    text-align: left;
    margin-top: 2px;
}

/* Both initial and surname bold - 2026-02-03 */
.pitch-card .card-initial {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: left;
}

.pitch-card .card-surname {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

/* Universal layout display */
.layout-display {
    font-size: 18px;
    font-weight: 700;
    color: #e9c46a;
    background: rgba(0,0,0,0.3);
    padding: 8px 16px;
    border-radius: 4px;
}

/* Drag and Drop styles */
.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.drag-over {
    outline: 3px dashed #e9c46a !important;
    outline-offset: 2px;
    background: rgba(233, 196, 106, 0.2) !important;
}

.pitch-card, .dugout-slot, .player-row {
    cursor: grab;
}

.pitch-card:active, .dugout-slot:active, .player-row:active {
    cursor: grabbing;
}

.pitch-card.empty {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   POST-MATCH PLAYER RATINGS (Side-by-Side) - v147
   ═══════════════════════════════════════════════════════════════ */

.player-ratings-panel {
    margin-bottom: 1rem;
}

.player-ratings-panel h3 {
    padding: 0.75rem 1rem;
    margin: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
}

.ratings-header {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    font-weight: bold;
    font-size: 0.9rem;
}

.team-header.your-team {
    color: var(--teal);
}

.team-header.opponent {
    color: var(--orange);
    text-align: right;
}

.ratings-grid {
    padding: 0.5rem;
}

.rating-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.rating-player {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: var(--bg-light);
    border-radius: 4px;
    font-size: 0.85rem;
}

.rating-player.your-team {
    border-left: 3px solid var(--teal);
}

.rating-player.opponent {
    border-right: 3px solid var(--orange);
    flex-direction: row-reverse;
}

.rating-player.empty {
    background: transparent;
}

.rating-player .player-pos {
    font-size: 0.7rem;
    background: var(--brown);
    color: var(--cream);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    min-width: 24px;
    text-align: center;
    font-weight: bold;
}

.rating-player .player-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rating-player.your-team .player-name {
    cursor: pointer;
}

.rating-player.your-team .player-name:hover {
    color: var(--teal);
    text-decoration: underline;
}

.rating-player .player-icons {
    font-size: 0.8rem;
}

.rating-player .player-rating {
    font-weight: bold;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    min-width: 32px;
    text-align: center;
    color: white;
}

.rating-player .player-rating.rating-excellent {
    background: var(--success);
}

.rating-player .player-rating.rating-good {
    background: var(--teal);
}

.rating-player .player-rating.rating-average {
    background: var(--text-secondary);
}

.rating-player .player-rating.rating-poor {
    background: var(--orange);
}

/* Compact Player Talks (inside ratings panel) */
.player-talks-compact {
    padding: 1rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.player-talks-compact .talks-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.player-talks-compact .talks-icon {
    font-size: 1.2rem;
}

.player-talks-compact .talks-title {
    font-weight: bold;
    flex: 1;
}

.player-talks-compact .talks-remaining {
    font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
    background: var(--teal);
    color: white;
    border-radius: 10px;
}

.player-talks-compact .talks-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.player-talks-compact .talks-list {
    max-height: 300px;
    overflow-y: auto;
}

.player-talks-compact .talk-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 4px;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
}

.player-talks-compact .talk-player-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.player-talks-compact .talk-pos {
    font-size: 0.7rem;
    background: var(--brown);
    color: var(--cream);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    min-width: 24px;
    text-align: center;
    font-weight: bold;
}

.player-talks-compact .talk-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}

.player-talks-compact .talk-rating {
    font-weight: bold;
    font-size: 0.85rem;
}

.player-talks-compact .talk-buttons {
    display: flex;
    gap: 0.25rem;
}

.player-talks-compact .talk-buttons button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.player-talks-compact .btn-talk.praise {
    background: var(--success);
    color: white;
}

.player-talks-compact .btn-talk.expect {
    background: var(--mustard);
    color: var(--brown);
}

.player-talks-compact .btn-talk.criticize {
    background: var(--orange);
    color: white;
}

.player-talks-compact .btn-talk:hover {
    filter: brightness(1.1);
}

.player-talks-compact .talk-reaction {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-dark);
    border-radius: 3px;
}

.talks-done {
    text-align: center;
    padding: 0.75rem;
    color: var(--success);
    font-size: 0.9rem;
}

/* Mobile responsive for ratings */
@media (max-width: 600px) {
    .rating-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .rating-player.opponent {
        flex-direction: row;
        border-left: 3px solid var(--orange);
        border-right: none;
    }

    .team-header.opponent {
        text-align: left;
    }

    .player-talks-compact .talk-player {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .player-talks-compact .talk-buttons {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CUP STYLES - Domestic Cup Bracket View
   ═══════════════════════════════════════════════════════════════ */

.user-status {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.user-status.not-qualified {
    background: var(--bg-dark);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.user-status.eliminated {
    background: #fde8e8;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.user-status.complete {
    background: #e8f5e9;
    color: var(--success);
    border: 1px solid var(--success);
}

.user-status.active {
    background: #e3f2fd;
    color: var(--brown);
    border: 1px solid var(--accent);
}

.cup-bracket {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
}

.cup-round {
    min-width: 220px;
    flex-shrink: 0;
}

.cup-round h4 {
    margin-bottom: 0.75rem;
    color: var(--teal);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.round-matches {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cup-match {
    background: var(--brown);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border-left: 3px solid var(--mustard);
}

.cup-match.user-match {
    border-left: 3px solid var(--teal);
    background: var(--brown);
    box-shadow: 0 0 0 2px var(--teal);
}

.match-team {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    color: var(--cream);
    font-size: 0.85rem;
}

.match-team .team-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.match-team.winner {
    font-weight: bold;
    color: var(--mustard);
}

.match-team .team-name {
    color: var(--cream);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.match-team .team-score {
    min-width: 24px;
    text-align: right;
    color: white;
    font-weight: bold;
}

.match-note {
    font-size: 0.75rem;
    color: var(--mustard);
    display: block;
    text-align: center;
    margin-top: 0.25rem;
}

.cup-bracket .text-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}