/* === MATCH HUB STYLES === */

.match-hub-block {
    display: flex;
    flex-direction: row; /* Visual Left */
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

/* UI Container */
.match-hub-ui {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    width: 100%;
    max-width: 650px; /* Wider to accommodate split view */
    height: 450px;
    display: flex;
    font-family: 'Montserrat', sans-serif;
}

/* --- Left: Main Area (Placeholder) --- */
.hub-main-area {
    flex: 1.5;
    background: #0f172a;
    position: relative;
    display: flex; flex-direction: column; 
    align-items: center; justify-content: center;
    padding: 20px;
    text-align: center;
    border-right: 1px solid #334155;
    overflow: hidden;
}

.hub-placeholder {
    position: relative; z-index: 2;
}
.ph-icon { font-size: 3rem; margin-bottom: 10px; opacity: 0.8; }
.ph-text { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.ph-sub { font-size: 0.8rem; color: #94a3b8; line-height: 1.5; max-width: 250px; margin: 0 auto; }

/* Fake Field Background */
.ph-bg-effect {
    position: absolute; inset: 0; z-index: 1;
    background: #14532d;
    opacity: 0.1;
    background-image: radial-gradient(#fff 2px, transparent 2px);
    background-size: 30px 30px;
    filter: blur(2px);
}


/* --- Right: Sidebar List --- */
.hub-sidebar {
    flex: 1;
    background: #1e293b;
    display: flex; flex-direction: column;
    overflow-y: auto; /* Scrollable */
}

/* Custom Scrollbar for Sidebar */
.hub-sidebar::-webkit-scrollbar { width: 4px; }
.hub-sidebar::-webkit-scrollbar-track { background: #1e293b; }
.hub-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.hub-section-title {
    padding: 12px 15px;
    background: #1e293b;
    color: #3b82f6; /* Blue Accent */
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    border-bottom: 1px solid #334155;
    position: sticky; top: 0; z-index: 10; /* Sticky Headers */
}

.match-list { padding: 10px; }

/* Match Item */
.match-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; margin-bottom: 6px;
    background: #ffffff05; border: 1px solid transparent;
    border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.match-item:hover { background: #ffffff0d; border-color: #334155; }

.mi-info { display: flex; flex-direction: column; gap: 2px; }
.mi-opp { font-size: 0.85rem; font-weight: 700; color: #fff; }
.mi-meta { font-size: 0.7rem; color: #94a3b8; }

.mi-action { font-size: 0.9rem; opacity: 0.5; transition: opacity 0.2s; }
.match-item:hover .mi-action { opacity: 1; }

/* Score Badges */
.mi-score {
    font-size: 0.8rem; font-weight: 800; padding: 4px 8px; border-radius: 6px; min-width: 40px; text-align: center;
}
.mi-score.win { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.4); }
.mi-score.draw { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); }
.mi-score.loss { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }

/* Responsive */
@media (max-width: 900px) {
    .match-hub-block { flex-direction: column-reverse; gap: 30px; }
    .match-hub-ui { height: auto; flex-direction: column; }
    .hub-main-area { height: 200px; border-right: none; border-bottom: 1px solid #334155; }
    .hub-sidebar { max-height: 300px; }
}