:root {
    --kbo-blue: #002561;
    --kbo-red: #D60C0C;
    --field-green: #388E3C;
    --field-dirt: #c29869;
}

/*
   Fantasy Layout
   Note: Main container uses .container from style.css
   Nav uses .sub-gnb from style.css
*/

.fantasy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.fantasy-header h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

/* Cards - Simplified to blend with Record pages */
.fantasy-card {
    margin-bottom: 30px;
    /* Removed background/shadow to match flat style of Record pages inside .container */
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Standard text color instead of KBO blue */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #eee;
}

/* Tables - Inherit from style.css, but ensure width */
.fantasy-table {
    width: 100%;
    /* Remove custom colors to inherit standard table styles */
}

/* Draft Specific */
.draft-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
}

/* Tab Styles (Mobile Only - Default Hidden on Desktop) */
.draft-mobile-tabs {
    display: none;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ddd;
}

.draft-tab {
    padding: 10px 20px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    flex: 1; /* Equal width tabs */
}

.draft-tab.active {
    background: #fff;
    color: var(--kbo-blue);
    border-color: #ddd #ddd #fff; /* Bottom border transparent to merge */
    margin-bottom: -2px; /* Overlap border */
}

/* Mobile Media Query */
@media (max-width: 768px) {
    .draft-container {
        display: block; /* Stack (but we will hide one) */
    }

    .draft-mobile-tabs {
        display: flex; /* Show tabs on mobile */
    }

    /* Hide inactive tabs content */
    .draft-tab-content {
        display: none;
    }

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

    /* Hide Stats Column on Mobile (4th column: Name, Pos, Team, [Stats], Action) */
    .fantasy-table th:nth-child(4),
    .fantasy-table td:nth-child(4) {
        display: none;
    }

    /* Force 4th column visibility for admin tables */
    .fantasy-table.admin-table th:nth-child(4),
    .fantasy-table.admin-table td:nth-child(4) {
        display: table-cell;
    }
}

.position-badge {
    background-color: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #333;
}

.team-badge {
    color: #666;
    font-size: 0.9rem;
}

.btn-primary {
    /* Match style.css buttons (e.g. .btn-search or gnb button) */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: normal;
    font-size: 14px;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-draft {
    background-color: #28a745; /* Green for action */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.btn-draft:hover {
    background-color: #218838;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
.status-WAITING { background-color: #ffc107; color: #333; }
.status-DRAFTING { background-color: #dc3545; animation: pulse 2s infinite; }
.status-FINISHED { background-color: #007bff; }
.status-NORMAL { background-color: #9C27B0; }
.status-ONGOING { background-color: #28a745; animation: pulse 2s infinite; }
.status-REJECT {background-color: #333333;}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* My Team - Field Visualization */
.my-team-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

@media (max-width: 992px) {
    .my-team-container {
        grid-template-columns: 1fr;
    }
}

.baseball-field {
    background-color: var(--field-green);
    /* Simple field graphic using radial gradients */
    background-image:
        radial-gradient(circle at 50% 100%, var(--field-dirt) 15%, transparent 16%),
        radial-gradient(circle at 50% 100%, transparent 60%, var(--field-dirt) 61%, var(--field-dirt) 65%, transparent 66%);
    border-radius: 8px 8px 100px 100px;
    height: 600px;
    position: relative;
    border: 4px solid #fff;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}

.field-position {
    position: absolute;
    width: 100px;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    padding: 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
}

@media (max-width: 576px) {
    .baseball-field {
        height: 400px; /* Shrink height on small mobile */
        border-radius: 8px 8px 50px 50px;
    }
    .field-position {
        width: 70px; /* Shrink cards */
        padding: 2px;
    }
    .field-position .pos-label {
        font-size: 0.6rem;
    }
    .field-position .player-name {
        font-size: 0.7rem;
    }
    .field-position .player-team {
        font-size: 0.6rem;
        display: none; /* Hide team name to save space if needed */
    }
}

.field-position .pos-label {
    display: block;
    font-weight: bold;
    font-size: 0.8rem;
    color: #333;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.field-position .player-name {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
}

.field-position .player-team {
    font-size: 0.7rem;
    color: #666;
}

/* Position Coordinates (Top %, Left %) */
.pos-c  { bottom: 5%; left: 50%; transform: translate(-50%, 0); }
.pos-p  { bottom: 40%; left: 50%; } /* General P spot on field, distinct from roster list */
.pos-1b { bottom: 40%; right: 25%; }
.pos-2b { bottom: 60%; right: 35%; }
.pos-3b { bottom: 40%; left: 25%; }
.pos-ss { bottom: 60%; left: 35%; }
.pos-lf { top: 30%; left: 20%; }
.pos-cf { top: 20%; left: 50%; }
.pos-rf { top: 30%; right: 20%; }
.pos-dh { bottom: 10%; right: 10%; }

.pitcher-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pitcher-slot {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Anchor for tooltip */
}

.pitcher-slot.filled {
    background: #e3f2fd;
    border-color: #90caf9;
}

.pitcher-role {
    font-weight: bold;
    color: #333;
    width: 40px;
}

/* Modal - Handled by fragment but if specific override needed */
.modal-overlay {
    /* Ensure z-index is high enough */
    z-index: 9999;
}

/* Sub Nav */
.fantasy-nav-container {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    overflow-x: auto; /* Enable horizontal scroll on mobile */
    -webkit-overflow-scrolling: touch;
}
.fantasy-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    border-bottom: 1px solid #eee;
    white-space: nowrap; /* Prevent wrapping */
    min-width: min-content; /* Ensure width fits content */
}
.fantasy-nav li {
    margin: 0;
}
.fantasy-nav a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #555;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.fantasy-nav a:hover, .fantasy-nav a.active {
    color: var(--kbo-blue);
    border-bottom-color: var(--kbo-blue);
    background-color: #f8f9fa;
}
.fantasy-nav a.disabled {
    color: #ccc;
    cursor: not-allowed;
}
.fantasy-nav a.disabled:hover {
    background-color: transparent;
    border-bottom-color: transparent;
}

/* Position Colors */
.pos-sp { color: #D60C0C; font-weight: bold; } /* Red */
.pos-rp { color: #FF9800; font-weight: bold; } /* Orange */
.pos-cl { color: #9C27B0; font-weight: bold; } /* Purple */
.pos-c  { color: #795548; font-weight: bold; } /* Brown */
.pos-if { color: #007bff; font-weight: bold; } /* Blue */
.pos-of { color: #28a745; font-weight: bold; } /* Green */
.pos-dh { color: #333; font-weight: bold; }    /* Black */

/* Map specific positions to generic classes */
.pos-1b, .pos-2b, .pos-3b, .pos-ss { color: #007bff; font-weight: bold; }
.pos-lf, .pos-cf, .pos-rf { color: #28a745; font-weight: bold; }

/* Updated Field Positions */
/* Equal spacing for infield: 3B(5%) - SS(35%) - 2B(65%) - 1B(95%) approx */
.pos-c  { bottom: 5%; left: 50%; transform: translate(-50%, 0); }
.pos-1b { bottom: 40%; left: 88%; transform: translate(-50%, 0); } /* Far Right */
.pos-2b { bottom: 60%; left: 62%; transform: translate(-50%, 0); }
.pos-ss { bottom: 60%; left: 38%; transform: translate(-50%, 0); }
.pos-3b { bottom: 40%; left: 12%; transform: translate(-50%, 0); } /* Far Left */

.pos-lf { top: 20%; left: 15%; }
.pos-cf { top: 5%; left: 50%; transform: translate(-50%, 0); }
.pos-rf { top: 20%; right: 0%; }

.pos-dh { bottom: 10%; right: 5%; }
.pos-p { display: none; } /* Hide if any script tries to use it */

/* Bench Slots - Below 3B (bottom: 40%, left: 12%) */
.pos-bench-1 { bottom: 25%; left: 12%; transform: translate(-50%, 0); }
.pos-bench-2 { bottom: 15%; left: 12%; transform: translate(-50%, 0); }
.pos-bench-3 { bottom: 5%; left: 12%; transform: translate(-50%, 0); }

.selected-player {
    border: 3px solid #007bff !important; /* Blue */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    cursor: pointer;
}

/* Player Card Tooltip */
.player-card-tooltip {
    display: none;
    position: absolute;
    top: 100%; /* Show below the element */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 6px;
    z-index: 1000;
    text-align: left;
    pointer-events: none; /* Prevent flickering on hover */
    margin-top: 5px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #333;
}

/* Adjust position for field players to be above if low on screen?
   For now standard bottom is fine, but maybe add arrow? */
.player-card-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

.field-position:hover .player-card-tooltip,
.pitcher-slot:hover .player-card-tooltip {
    display: block;
}

.field-position:hover {
    z-index: 1100; /* Ensure hovered card is on top of others */
}

/* Special adjustment for tooltip inside field positions to override transforms if needed.
   The field-position uses transform: translate(-50%, -50%).
   The tooltip's left:50% + translateX(-50%) centers it relative to the field-position's box. */

/* Modal Specifics */
.details-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.details-section h3 {
    margin-bottom: 15px;
    color: var(--kbo-blue);
}

.tabs-header {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
}

.tab-btn {
    padding: 8px 16px;
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    white-space: nowrap;
    font-weight: bold;
    color: #555;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--kbo-blue);
    color: white;
    border-color: var(--kbo-blue);
}

.tab-btn:hover:not(.active) {
    background: #e9ecef;
}

.tab-content {
    /* reuse my-team-container styles if possible, or flex */
}