/* Clean Responsive Styles for Match Page */

/* Dark Mode CSS Variables - Global */
:root {
    --match-bg: #ffffff;
    --match-text: #333333;
    --match-border: #dddddd;
    --match-panel-bg: #ffffff;
    --match-panel-body-bg: #f5f5f5;
    --match-team-cell-bg: #fafafa;
    --match-score-bg: #f8f9fa;
    --match-stadium-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --match-referee-bg: #ffffff;
}

[data-theme="dark"] {
    --match-bg: #1a1a1a;
    --match-text: #e0e0e0;
    --match-border: #444444;
    --match-panel-bg: #2a2a2a;
    --match-panel-body-bg: #1f1f1f;
    --match-team-cell-bg: #222222;
    --match-score-bg: #2a2a2a;
    --match-stadium-bg: linear-gradient(135deg, #4a3d6b 0%, #5a4a7a 100%);
    --match-referee-bg: #2a2a2a;
}

/* Base styles for all screen sizes - ENSURE VISIBILITY */
#commentary-container {
    width: 100% !important;
    clear: both !important;
    display: block !important;
    margin: 15px 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    height: auto !important;
}

#commentary {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--match-bg) !important;
    color: var(--match-text) !important;
    position: relative !important;
}

/* Force commentary table visibility */
.commentary-heading,
.commentary-table,
.commentary-table tbody,
.commentary-table tr,
.commentary-table td {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Commentary column widths - time narrow, comment wide */
.commentary-table {
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1px solid #ddd !important;
}

.commentary-table tr {
    border-bottom: 1px solid #ddd !important;
}

.commentary-table td {
    border: 1px solid #ddd !important;
}

.commentary-table td[width="60"],
.commentary-table td[width="50"],
.commentary-table .comment-time {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 50px !important;
}

.commentary-table .comment-text {
    width: auto !important;
}

.mobile-lineup-section {
    display: block;
}

/* Mobile and Tablet (up to 992px) */
@media (max-width: 992px) {

    /* Container */
    .container {
        padding: 10px;
    }

    /* Panel - Main container card */
    .panel {
        margin-bottom: 20px;
        border: none;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
        overflow: hidden;
        background: var(--match-panel-bg) !important;
    }

    .panel-body {
        padding: 15px;
        overflow: visible;
        background: var(--match-panel-body-bg) !important;
        color: var(--match-text) !important;
    }

    .panel-heading {
        background: linear-gradient(135deg, #337ab7 0%, #5a9fd4 100%) !important;
        border: none;
    }

    [data-theme="dark"] .panel-heading {
        background: linear-gradient(135deg, #2d4a6b 0%, #3a5f8a 100%) !important;
    }

    .panel-heading h3 {
        font-size: 17px;
        padding: 15px;
        margin: 0;
        color: white;
        text-align: center;
        font-weight: bold;
    }

    /* Ensure proper separation after panel */
    .panel-body::after {
        content: "";
        display: block;
        clear: both;
        height: 20px;
    }

    /* Flexbox layout for responsive table - Card Container */
    .match-table {
        width: 100%;
        max-width: 100%;
        display: block;
        border: none;
        background: transparent;
    }

    .match-table tbody {
        display: block;
    }

    .match-table tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background: white;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 15px;
    }

    /* Home team - LEFT side (50% width) */
    .match-table tr td:nth-child(1) {
        order: 1;
        flex: 0 0 50%;
        max-width: 50%;
        padding: 18px 10px;
        text-align: center;
        border: none;
        border-right: 1px solid var(--match-border);
        box-sizing: border-box;
        background: var(--match-team-cell-bg) !important;
        color: var(--match-text) !important;
    }

    /* Away team - RIGHT side (50% width) */
    .match-table tr td:nth-child(3) {
        order: 2;
        flex: 0 0 50%;
        max-width: 50%;
        padding: 18px 10px;
        text-align: center;
        border: none;
        box-sizing: border-box;
        background: var(--match-team-cell-bg) !important;
        color: var(--match-text) !important;
    }

    /* Middle column - BELOW teams (100% width) - Clean & Proper */
    .match-table tr td:nth-child(2) {
        order: 3 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px 15px !important;
        border: none !important;
        border-top: 2px solid var(--match-border) !important;
        box-sizing: border-box !important;
        background: var(--match-bg) !important;
        color: var(--match-text) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Ensure all children of middle column are visible */
    .match-table tr td:nth-child(2) * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force proper display of all direct children */
    .match-table tr td:nth-child(2)>* {
        display: block !important;
        visibility: visible !important;
        margin-bottom: 15px !important;
    }

    /* Tables should display as tables */
    .match-table tr td:nth-child(2)>table {
        display: table !important;
    }

    /* Stadium Card */
    .match-table tr td:nth-child(2) .stadium-name {
        margin: 0 0 15px 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        clear: both !important;
    }

    /* Referee Card */
    .match-table tr td:nth-child(2) .referee-info {
        margin: 0 0 15px 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        clear: both !important;
    }

    /* Score Card - Main focus */
    .match-table tr td:nth-child(2)>table:first-of-type {
        background: var(--match-score-bg) !important;
        border: 3px solid #28a745 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 8px rgba(40, 167, 69, 0.2) !important;
        margin: 0 0 18px 0 !important;
        width: 100% !important;
        display: table !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--match-text) !important;
    }

    .match-table tr td:nth-child(2)>table:first-of-type tbody {
        display: table-row-group !important;
        visibility: visible !important;
    }

    .match-table tr td:nth-child(2)>table:first-of-type tr {
        display: table-row !important;
        visibility: visible !important;
    }

    .match-table tr td:nth-child(2)>table:first-of-type td {
        display: table-cell !important;
        padding: 18px 10px !important;
        border: none !important;
        vertical-align: middle !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Score numbers - big and bold */
    .match-table tr td:nth-child(2)>table:first-of-type td:first-child,
    .match-table tr td:nth-child(2)>table:first-of-type td:last-child {
        background: var(--match-score-bg) !important;
        color: var(--match-text) !important;
        width: 33% !important;
    }

    /* Middle cell (time) - highlighted */
    .match-table tr td:nth-child(2)>table:first-of-type td:nth-child(2) {
        background: linear-gradient(to bottom, #e8f5e9 0%, #d4edda 100%);
        border-left: 2px solid #28a745;
        border-right: 2px solid #28a745;
        width: 38% !important;
        width: 34%;
    }

    /* Goal scorers table */
    .match-table tr td:nth-child(2) .score-table {
        background: var(--match-bg) !important;
        border: 1px solid var(--match-border) !important;
        border-radius: 8px !important;
        margin: 0 0 18px 0 !important;
        overflow: hidden !important;
        display: table !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--match-text) !important;
    }

    .match-table tr td:nth-child(2) .score-table tbody,
    .match-table tr td:nth-child(2) .score-table tr,
    .match-table tr td:nth-child(2) .score-table td {
        display: table-row-group;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .match-table tr td:nth-child(2) .score-table tr {
        display: table-row !important;
    }

    .match-table tr td:nth-child(2) .score-table td {
        display: table-cell !important;
        width: 50% !important;
        border-top: 2px solid red !important;
    }

    /* Commentary container as card */
    #commentary-container {
        background: var(--match-bg) !important;
        border: 3px solid #337ab7 !important;
        border-radius: 12px !important;
        padding: 15px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--match-text) !important;
    }

    [data-theme="dark"] #commentary-container {
        border-color: #2d4a6b !important;
    }

    /* Hide player lineups in team columns */
    .match-table tr td:nth-child(1) .player-table,
    .match-table tr td:nth-child(3) .player-table {
        display: none;
    }

    /* Team cells */
    .team-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 150px;
    }

    /* Team logos - appear first */
    .team-logo {
        max-width: 80px;
        width: 80px;
        height: auto;
        margin: 5px auto 10px auto;
        display: block;
        order: 1;
    }

    /* Team names - appear after logos */
    .team-name {
        font-size: 17px;
        font-weight: bold;
        margin: 0 0 8px 0;
        text-align: center;
        word-wrap: break-word;
        order: 2;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Color code team names */
    .match-table tr td:nth-child(1) .team-name {
        color: #0066cc;
    }

    .match-table tr td:nth-child(3) .team-name {
        color: #cc0000;
    }

    /* Team manager names - appear last */
    .team-manager {
        font-size: 12px;
        line-height: 1.4;
        color: #666;
        margin-top: auto;
        order: 3;
        font-style: italic;
    }

    /* All tables inside middle column - keep as tables */
    .match-table tr td:nth-child(2) table {
        display: table !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 15px !important;
    }

    .match-table tr td:nth-child(2) table tbody {
        display: table-row-group !important;
        visibility: visible !important;
    }

    .match-table tr td:nth-child(2) table tr {
        display: table-row !important;
        visibility: visible !important;
    }

    .match-table tr td:nth-child(2) table td {
        display: table-cell !important;
        padding: 12px 10px !important;
        vertical-align: middle !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Score display */
    .score-display {
        font-size: 36px !important;
        font-weight: bold !important;
        padding: 18px 10px !important;
        color: #333 !important;
        height: auto !important;
    }

    #time_elapsed {
        font-size: 20px !important;
        font-weight: bold !important;
        color: #28a745 !important;
        display: block !important;
        margin: 5px 0 !important;
        height: auto !important;
    }

    /* Match status text (Second Half, etc) */
    .match-table tr td:nth-child(2)>table:first-of-type td:nth-child(2) {
        font-size: 14px !important;
        height: auto !important;
    }

    /* Stadium Card */
    .stadium-name {
        font-size: 16px !important;
        font-weight: bold !important;
        text-align: center !important;
        margin: 0 0 12px 0 !important;
        padding: 12px !important;
        background: var(--match-stadium-bg) !important;
        color: white !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        display: block !important;
        height: auto !important;
    }

    /* Referee info Card */
    .referee-info {
        font-size: 12px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
        background: var(--match-referee-bg) !important;
        color: var(--match-text) !important;
        border-radius: 8px !important;
        border: 1px solid var(--match-border) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
        display: block !important;
        height: auto !important;
    }

    /* Commentary container wrapper as card */
    #commentary-container {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        clear: both !important;
        background: var(--match-bg) !important;
        border: 3px solid #337ab7 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 8px rgba(51, 122, 183, 0.2) !important;
        display: block !important;
        position: relative !important;
        color: var(--match-text) !important;
    }

    [data-theme="dark"] #commentary-container {
        border-color: #2d4a6b !important;
    }

    /* Commentary section - Use 100% for flexibility */
    #commentary {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
        padding: 10px !important;
        background: transparent !important;
        position: relative !important;
        color: var(--match-text) !important;
    }

    /* Force commentary elements to show */
    .commentary-heading {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force commentary table to show as block on mobile */
    #commentary .commentary-table {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    #commentary .commentary-table tbody {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
    }

    #commentary .commentary-table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    #commentary .commentary-table td {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* Time column - narrow badge on mobile */
    #commentary .commentary-table td[width="60"],
    #commentary .commentary-table td[width="50"],
    #commentary .commentary-table .comment-time {
        width: 55px !important;
        max-width: 55px !important;
        display: inline-block !important;
    }

    /* Comment column - full width on mobile */
    #commentary .commentary-table .comment-text {
        width: 100% !important;
        display: block !important;
    }

    /* Facebook embeds on mobile - CRITICAL */
    #commentary .facebook-embed-container,
    #commentary .fb-post,
    #commentary .fb-post iframe,
    #commentary .fb_iframe_widget,
    #commentary .fb_iframe_widget span,
    #commentary .fb_iframe_widget iframe {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    /* Ensure Facebook embed containers are not affected by card layout */
    #commentary .commentary-table td .facebook-embed-container {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        clear: both !important;
    }

    /* Ensure text inside cells is visible */
    #commentary .commentary-table td strong,
    #commentary .commentary-table td span,
    #commentary .commentary-table td p {
        visibility: visible !important;
        opacity: 1 !important;
        color: inherit !important;
    }

    /* Don't override div display for Facebook embeds */
    #commentary .commentary-table td div:not(.facebook-embed-container):not(.fb-post):not(.fb_iframe_widget) {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Score goal table */
    .score-table {
        font-size: 13px !important;
        margin: 15px 0 !important;
        background: white !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        display: table !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .score-table tbody {
        display: table-row-group !important;
    }

    .score-table tr {
        display: table-row !important;
    }

    .score-table td {
        padding: 10px !important;
        display: table-cell !important;
        visibility: visible !important;
    }

    /* Mobile lineups container */
    #mobile-lineups-container {
        width: 100%;
        clear: both;
        margin-top: 0;
        padding-top: 0;
        position: relative;
        display: block;
    }

    /* Mobile lineup sections */
    .mobile-lineup-section {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 30px 0;
        border: 3px solid #337ab7;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        clear: both;
        float: none;
        position: relative;
        z-index: 1;
    }

    .mobile-lineup-section:first-of-type {
        margin-top: 50px;
        /* Space after commentary */
        position: relative;
        top: auto;
    }

    .mobile-lineup-section:last-of-type {
        margin-bottom: 40px;
    }

    /* Prevent lineup sections from floating */
    #mobile-lineups-container {
        position: relative;
    }

    .mobile-lineup-section h4 {
        font-size: 18px;
        font-weight: bold;
        margin: 0;
        padding: 15px;
        background: #337ab7;
        color: white;
        text-align: center;
        text-transform: uppercase;
    }

    .mobile-lineup-section .player-table {
        font-size: 14px;
        width: 100%;
    }

    .mobile-lineup-section .player-table tr {
        display: table-row;
    }

    .mobile-lineup-section .player-table td {
        display: table-cell;
        padding: 10px;
    }

    .mobile-lineup-section .player-table tr.info td {
        background: #d9edf7;
        font-weight: bold;
        text-align: center;
    }
}

/* Mobile specific - smaller teams */
@media (max-width: 768px) {
    .team-logo {
        max-width: 65px;
        width: 65px;
    }

    .team-name {
        font-size: 15px;
    }

    .team-manager {
        font-size: 11px;
    }

    .match-table tr td:nth-child(1),
    .match-table tr td:nth-child(3) {
        padding: 15px 8px;
    }

    .score-display {
        font-size: 30px !important;
    }

    #time_elapsed {
        font-size: 17px !important;
    }

    #commentary {
        height: 100% !important;
        max-height: 100% !important;
    }

    #commentary-container {
        height: auto !important;
        margin: 0 !important;
    }

    .commentary-heading {
        font-size: 14px !important;
    }

    .match-table tr td:nth-child(2) {
        height: auto !important;
    }
}

/* Tablet specific - larger teams */
@media (min-width: 769px) and (max-width: 992px) {
    .team-logo {
        max-width: 95px;
        width: 95px;
    }

    .team-name {
        font-size: 19px;
    }

    .team-manager {
        font-size: 13px;
    }

    .match-table tr td:nth-child(1),
    .match-table tr td:nth-child(3) {
        padding: 20px 12px;
    }

    .score-display {
        font-size: 40px !important;
    }

    #time_elapsed {
        font-size: 22px !important;
    }

    #commentary {
        height: 100% !important;
        max-height: 100% !important;
    }

    #commentary-container {
        height: auto !important;
        margin: 0 !important;
    }

    .commentary-heading {
        font-size: 16px !important;
    }

    .stadium-name {
        font-size: 18px !important;
    }

    .match-table tr td:nth-child(2) {
        height: auto !important;
    }
}

/* Desktop - above 992px - Traditional Layout */
@media (min-width: 993px) {

    /* Hide mobile-only elements */
    .mobile-lineup-section {
        display: none !important;
    }

    /* Container - proper desktop spacing */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* Panel - clean desktop card */
    .panel {
        margin-bottom: 30px;
        border: 1px solid var(--match-border);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        background: var(--match-panel-bg) !important;
    }

    .panel-body {
        padding: 25px;
        background: var(--match-panel-body-bg) !important;
        color: var(--match-text) !important;
    }

    .panel-heading {
        background: linear-gradient(135deg, #337ab7 0%, #5a9fd4 100%) !important;
        border: none;
        padding: 0;
    }

    [data-theme="dark"] .panel-heading {
        background: linear-gradient(135deg, #2d4a6b 0%, #3a5f8a 100%) !important;
    }

    .panel-heading h3 {
        font-size: 20px;
        padding: 18px 25px;
        margin: 0;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    /* Match table - traditional 3-column layout */
    .match-table {
        width: 100%;
        display: table;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
    }

    .match-table tbody {
        display: table-row-group;
    }

    .match-table tr {
        display: table-row;
        background: white;
    }

    /* Home team column - LEFT (20% width) */
    .match-table tr td:nth-child(1) {
        display: table-cell;
        width: 20%;
        padding: 25px 15px;
        vertical-align: top;
        border-right: 1px solid var(--match-border);
        background: var(--match-team-cell-bg) !important;
        color: var(--match-text) !important;
    }

    /* Middle column - SCORE/INFO (60% width) */
    .match-table tr td:nth-child(2) {
        display: table-cell;
        width: 60%;
        padding: 25px 20px;
        vertical-align: top;
        border-right: 1px solid var(--match-border);
        background: var(--match-bg) !important;
        color: var(--match-text) !important;
    }

    /* Away team column - RIGHT (20% width) */
    .match-table tr td:nth-child(3) {
        display: table-cell;
        width: 20%;
        padding: 25px 15px;
        vertical-align: top;
        background: var(--match-team-cell-bg) !important;
        color: var(--match-text) !important;
    }

    /* Team cells - vertical layout */
    .team-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* Team logos */
    .team-logo {
        max-width: 100px;
        width: 100px;
        height: auto;
        margin: 0 auto 15px auto;
        display: block;
    }

    /* Team names */
    .team-name {
        font-size: 20px;
        font-weight: bold;
        margin: 0 0 15px 0;
        text-align: center;
        word-wrap: break-word;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.3;
    }

    /* Color code team names */
    .match-table tr td:nth-child(1) .team-name {
        color: #0066cc;
    }

    .match-table tr td:nth-child(3) .team-name {
        color: #cc0000;
    }

    /* Team manager names */
    .team-manager {
        font-size: 13px;
        line-height: 1.4;
        color: #666;
        margin: 10px 0;
        font-style: italic;
        text-align: center;
    }

    /* Player lineups in team columns - show on desktop */
    .match-table tr td:nth-child(1) .player-table,
    .match-table tr td:nth-child(3) .player-table {
        display: table;
        width: 100%;
        margin-top: 20px;
        font-size: 13px;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
    }

    .player-table tbody {
        display: table-row-group;
    }

    .player-table tr {
        display: table-row;
    }

    .player-table td {
        display: table-cell;
        padding: 8px;
        border-bottom: 1px solid #f0f0f0;
    }

    .player-table tr:last-child td {
        border-bottom: none;
    }

    .player-table tr.info td {
        background: #337ab7;
        color: white;
        font-weight: bold;
        text-align: center;
        padding: 10px 8px;
    }

    /* Score table - main focus */
    .match-table tr td:nth-child(2)>table:first-of-type {
        background: var(--match-score-bg) !important;
        border: 3px solid #28a745;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 3px 8px rgba(40, 167, 69, 0.2);
        margin: 0 0 20px 0;
        width: 100%;
        display: table;
        color: var(--match-text) !important;
    }

    .match-table tr td:nth-child(2)>table:first-of-type tbody {
        display: table-row-group;
    }

    .match-table tr td:nth-child(2)>table:first-of-type tr {
        display: table-row;
    }

    .match-table tr td:nth-child(2)>table:first-of-type td {
        display: table-cell;
        padding: 20px 15px;
        border: none;
        vertical-align: middle;
        text-align: center;
    }

    /* Score display - big and bold */
    .score-display {
        font-size: 42px;
        font-weight: bold;
        color: #333;
        line-height: 1;
    }

    .match-table tr td:nth-child(2)>table:first-of-type td:first-child,
    .match-table tr td:nth-child(2)>table:first-of-type td:last-child {
        background: var(--match-score-bg) !important;
        color: var(--match-text) !important;
        width: 30%;
    }

    /* Middle cell (time/status) - highlighted */
    .match-table tr td:nth-child(2)>table:first-of-type td:nth-child(2) {
        background: linear-gradient(to bottom, #e8f5e9 0%, #d4edda 100%);
        border-left: 2px solid #28a745;
        border-right: 2px solid #28a745;
        width: 40%;
    }

    #time_elapsed {
        font-size: 24px;
        font-weight: bold;
        color: #28a745;
        display: block;
        margin: 5px 0;
    }

    /* Stadium name */
    .stadium-name {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 0 0 15px 0;
        padding: 12px;
        background: var(--match-stadium-bg) !important;
        color: white;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Referee info */
    .referee-info {
        font-size: 13px;
        text-align: center;
        margin-bottom: 15px;
        padding: 12px;
        background: var(--match-referee-bg) !important;
        color: var(--match-text) !important;
        border-radius: 6px;
        border: 1px solid var(--match-border);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    /* Goal scorers table */
    .match-table tr td:nth-child(2) .score-table {
        background: var(--match-bg) !important;
        border: 1px solid var(--match-border);
        border-radius: 6px;
        margin: 0 0 20px 0;
        overflow: hidden;
        display: table;
        width: 100%;
        color: var(--match-text) !important;
    }

    .match-table tr td:nth-child(2) .score-table tbody {
        display: table-row-group;
    }

    .match-table tr td:nth-child(2) .score-table tr {
        display: table-row;
    }

    .match-table tr td:nth-child(2) .score-table td {
        display: table-cell;
        padding: 10px;
        width: 50%;
        border-top: 1px solid #f0f0f0;
        font-size: 14px;
    }

    /* All tables inside middle column */
    .match-table tr td:nth-child(2) table {
        display: table;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-bottom: 15px;
    }

    .match-table tr td:nth-child(2) table tbody {
        display: table-row-group;
    }

    .match-table tr td:nth-child(2) table tr {
        display: table-row;
    }

    .match-table tr td:nth-child(2) table td {
        display: table-cell;
        padding: 12px;
        vertical-align: middle;
    }

    /* Commentary on desktop - traditional style */
    #commentary-container {
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        margin: 0 !important;
        height: auto !important;
        clear: both !important;
    }

    #commentary {
        height: 600px !important;
        max-height: 600px !important;
        padding: 0 !important;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--match-bg) !important;
        border: 1px solid var(--match-border) !important;
        border-radius: 6px !important;
        color: var(--match-text) !important;
    }

    .commentary-heading {
        display: none !important;
    }

    .commentary-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    .commentary-table tbody {
        display: table-row-group !important;
    }

    .commentary-table tr {
        display: table-row !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .commentary-table tr:hover {
        background: #f9f9f9 !important;
    }

    [data-theme="dark"] .commentary-table tr:hover {
        background: #333333 !important;
    }

    .commentary-table td {
        display: table-cell !important;
        padding: 10px !important;
        vertical-align: top !important;
    }

    /* Time column - narrow */
    .commentary-table td[width="60"],
    .commentary-table td[width="50"],
    .commentary-table .comment-time {
        width: 70px !important;
        max-width: 70px !important;
        text-align: center !important;
        font-weight: bold !important;
        border-right: 2px solid #e0e0e0 !important;
    }

    /* Comment column - wide */
    .commentary-table .comment-text {
        width: auto !important;
        line-height: 1.6 !important;
    }
}