.btn-back-to-list-internal {
    display: inline-block;
    padding: 8px 12px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 14px;
    font-family: 'CustomFont', sans-serif;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-bottom: 20px; 
    opacity: 0.7;
}
.btn-back-to-list-internal:hover {
    background-color: var(--hover-bg);
    border-color: var(--accent-color);
    color: var(--accent-color);
    opacity: 1;
}


.match-detail-grid-header {
    display: grid;
    grid-template-columns: 250px 1.5fr 1fr 1fr; 
    gap: 20px 30px; 
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}


.match-detail-image {
    width: 100%;
    aspect-ratio: 16 / 9; 
    height: auto; 
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color); 
}
.match-detail-image img {
    width: 100%;
    height: 100%;
    
    object-fit: contain; 
}


.match-info-col h1 {
    font-size: 24px;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 5px;
    text-align: left;
}
.match-info-col h2 {
    font-size: 18px;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 15px;
    opacity: 0.9;
    text-align: left;
}
.match-info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.detail-item {
    font-size: 14px;
    display: flex;
}
.detail-label {
    opacity: 0.7;
    margin-right: 8px;
    min-width: 100px;  
    flex-shrink: 0;   
}
.detail-value {
    color: var(--text-color);
    font-weight: bold;
    white-space: nowrap; 
}



.match-winners-col,
.match-staff-col {
    padding-top: 5px; 
    text-align: left;
}

.match-winners-col h4,
.match-staff-col h4 {
    font-size: 18px;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.match-winners-col h4 .fas,
.match-staff-col h4 .fas {
    color: var(--accent-color);
    margin-right: 8px;
}

.winner-list,
.staff-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 180px; 
    overflow-y: auto; 
}
.list-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.player-helm-small {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    image-rendering: pixelated;
    border-radius: 4px;
}


.item-info .item-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.2; 
    display: inline-block; 
}
.item-info .item-name:hover {
    text-decoration: none; 
}
.item-info .item-subtext {
    font-size: 13px;
    opacity: 0.7;
    display: block;
    line-height: 1.2; 
}
.item-info .item-subtext strong {
    font-weight: bold;
    opacity: 1;
}

.item-subtext strong.place-1 { color: #FFD700; } 
.item-subtext strong.place-2 { color: #C0C0C0; } 
.item-subtext strong.place-3 { color: #CD7F32; } 


.no-data-text {
    font-style: italic;
    opacity: 0.6;
}


.stats-table-container {
  overflow-x: auto;
  overflow-y: auto; 
  max-height: 600px;  
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--card-bg);
}

#match-stats-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-color);
}
#match-stats-table th,
#match-stats-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
#match-stats-table th {
  background-color: var(--bg-color);
  color: var(--accent-color);
  position: sticky;
  top: 0;
}
#match-stats-table tbody tr:nth-child(even) {
  background-color: rgba(44, 143, 255, 0.05);
}
#match-stats-table tbody tr:hover {
  background-color: var(--hover-bg);
}
#match-stats-table td:nth-child(1), 
#match-stats-table td:nth-child(3), 
#match-stats-table td:nth-child(4), 
#match-stats-table td:nth-child(5), 
#match-stats-table td:nth-child(6) { 
  text-align: center;
  font-weight: bold;
}
#match-stats-table td:nth-child(3) { color: #2ecc71; }
#match-stats-table td:nth-child(4) { color: #e74c3c; }


.player-helm-small-table {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 4px;
    image-rendering: pixelated;
}

#match-stats-table tbody a {
    text-decoration: none;
    font-weight: bold;
    color: var(--text-color);
}
#match-stats-table tbody a:hover {
    text-decoration: none; 
    opacity: 0.8; 
}


.sortable-header {
    cursor: pointer;
    position: relative;
    padding-right: 30px !important; 
}
.sortable-header:hover {
    background-color: var(--hover-bg);
}


.sortable-header::after,
.sortable-header::before {
    position: absolute;
    right: 12px;
    font-size: 20px; 
    transition: opacity 0.2s;
    
    top: 50%;
    transform: translateY(-50%);
}


.sortable-header::before {
    content: '▲'; 
    opacity: 0; 
}


.sortable-header::after {
    content: '▼'; 
    opacity: 0.3; 
}


.sortable-header.sorted-asc::before {
    opacity: 1; 
}
.sortable-header.sorted-asc::after {
    opacity: 0; 
}

.sortable-header.sorted-desc::after {
    opacity: 1; 
}
.sortable-header.sorted-desc::before {
    opacity: 0; 
}


@media (max-width: 1100px) {
    .match-detail-grid-header {
        grid-template-columns: 1fr 1fr;
    }
    .match-detail-image {
        grid-column: 1 / 2;
        grid-row: 1 / 2; 
    }
    .match-info-col {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .match-winners-col {
        grid-column: 1 / 2;
    }
    .match-staff-col {
        grid-column: 2 / 3;
    }
}

@media (max-width: 600px) {
    .match-detail-grid-header {
        grid-template-columns: 1fr; 
    }
    .match-detail-image,
    .match-info-col,
    .match-winners-col,
    .match-staff-col {
        grid-column: 1 / -1; 
    }
    .match-detail-image {
        height: 200px;
    }
}


.winner-list::-webkit-scrollbar,
.staff-list::-webkit-scrollbar {
    width: 8px;
}
.stats-table-container::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.winner-list::-webkit-scrollbar-track,
.staff-list::-webkit-scrollbar-track,
.stats-table-container::-webkit-scrollbar-track {
    background: rgba(31, 31, 31, 0.5);
    border-radius: 4px;
}
.winner-list::-webkit-scrollbar-thumb,
.staff-list::-webkit-scrollbar-thumb,
.stats-table-container::-webkit-scrollbar-thumb {
    background: rgba(44, 143, 255, 0.5);
    border-radius: 4px;
}
.winner-list::-webkit-scrollbar-thumb:hover,
.staff-list::-webkit-scrollbar-thumb:hover,
.stats-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(44, 143, 255, 0.7);
}

/* =========================================
            АНИМАЦИИ ДЕТАЛЕЙ МАТЧА 
   ========================================= */

@keyframes fadeSlideUpDetail {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}


.match-detail-grid-header, .stats-table-container, .hltv-box, .map-box {
    animation: fadeSlideUpDetail 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.match-detail-grid-header { animation-delay: 0.05s; }
.hltv-box:nth-child(1), .map-box:nth-child(1) { animation-delay: 0.15s; }
.hltv-box:nth-child(2), .map-box:nth-child(2) { animation-delay: 0.25s; }


.winner-row, .b-team.winner {
    position: relative;
    overflow: hidden;
}
.winner-row::before, .b-team.winner::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: lightSweep 3s infinite;
}
@keyframes lightSweep {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}


.watch-stream-btn:active, .btn-back-to-list-internal:active, .stream-btn:active {
    transform: scale(0.95) !important;
}