/* Shared result card styles for matches and player pages */

.match-card {
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 20px;
}

.match-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
}

.match-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.match-id {
    color: #666;
    font-size: 0.85em;
    font-weight: 500;
}

.match-rounds {
    color: #666;
    font-size: 0.85em;
}

.match-result {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 15px;
}

.player {
    flex: 1;
    text-align: center;
    font-weight: bold;
    position: relative;
}

.result-icon {
    display: block;
    font-size: 1.5em;
    margin-bottom: 8px;
}

.player-name, .player-name-display {
    display: block;
    font-size: 1.1em;
    color: #2c5f2d;
    margin-bottom: 5px;
    text-decoration: none;
}

.player-score {
    display: block;
    font-size: 0.85em;
    color: #666;
}

.vs-divider {
    font-weight: bold;
    font-size: 1em;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.vs-divider .score {
    font-size: 1.8em;
    font-weight: bold;
    color: #2c5f2d;
    line-height: 1;
}

.vs-divider .vs-text {
    font-size: 0.85em;
    color: #999;
}

.outcome-label {
    font-size: 0.85em;
    font-weight: 700;
    color: #555;
    margin-bottom: 6px;
}

.match-outcome.win { color: #2c5f2d; font-weight:700; }
.match-outcome.loss { color: #c41e3a; font-weight:700; }

/* Stripe pseudo: positioned on the left for the first player and on the right for the last player
   Color is determined by whether the element has .winner or .loser so the stripe appears
   on the correct side even if player order changes. */
.match-card .player::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 6px;
    border-radius: 4px;
    /* hidden by default until positioned */
    opacity: 0;
}

.match-result > .player:first-child::before {
    left: -18px;
    opacity: 1;
}

.match-result > .player:last-child::before {
    right: -18px;
    left: auto;
    opacity: 1;
}

/* Colors by role and position */
.match-result > .player:first-child.winner::before,
.match-result > .player:last-child.winner::before {
    background: linear-gradient(180deg, #2c5f2d, #4a8c4b);
}

.match-result > .player:first-child.loser::before,
.match-result > .player:last-child.loser::before {
    background: linear-gradient(180deg, #c41e3a, #e74c3c);
}

/* Always show quick-stats */
.quick-stats {
    display: block;
    margin-top: 10px;
    font-size: 0.95em;
    color: #555;
}

/* Instagram placeholder */
.insta-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
}
.insta-placeholder .load-insta {
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    background: #2c5f2d;
    color: white;
    cursor: pointer;
}

/* Round details layout (shared) */
.round-details { margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }
.rounds-list { margin-top: 15px; }
.round-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 15px; align-items: center; padding: 10px 15px; background: #f9f9f9; border-radius: 5px; margin-bottom: 8px; }
.round-label { font-weight: 500; color: #333; min-width: 80px; }
.round-winner { color: #333; font-size: 0.95em; }
.round-winner strong { color: #2c5f2d; }
.round-ratings { color: #666; font-size: 0.9em; white-space: nowrap; }
.rating-change { color: #2c5f2d; font-weight: bold; font-size: 0.9em; white-space: nowrap; }