/* Players module styles. Shared hero, podium and player-card rules live in upgrade.css. */

@media (max-width: 520px) {
    .page-index .hero,
    .page-index .hero-content,
    .page-index .region-tabs,
    .page-index .ranking-panel {
        max-width: 100%;
        min-width: 0;
    }

    .page-index .hero-points {
        flex-wrap: wrap;
    }
}

/* Ladder filters */
.ladder-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Ladder table */
.ladder-summary {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--green-700);
    color: white;
    border-radius: 50%;
    font-weight: bold;
}

.rank-badge.is-unranked {
    background: var(--muted);
    opacity: 0.6;
}

.player-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-primary {
    font-size: 1.125rem;
    font-weight: bold;
}

.score-caption {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.125rem;
}

/* Profile */
.profile-header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
}

.profile-info h1 {
    margin-bottom: 0.5rem;
}

.profile-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--muted);
}

.public-no {
    font-family: monospace;
    background: var(--surface-soft);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    padding: 1.5rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--green-700);
}

.stat-label {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.stat-caption {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* Elo trend chart */
.elo-trend {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 200px;
    padding: 1rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
}

.elo-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.elo-bar-fill {
    width: 100%;
    background: var(--green-600);
    border-radius: 0.25rem 0.25rem 0 0;
    transition: height 0.3s ease;
}

.elo-value {
    position: absolute;
    bottom: 100%;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

/* H2H section */
.h2h {
    background: var(--surface-soft);
    padding: 1rem;
    border-radius: var(--radius);
}

.h2h-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Match status labels */
.match-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.match-status-confirmed { background: var(--green-100); color: var(--green-800); }
.match-status-pending { background: var(--orange-100); color: var(--orange-800); }
.match-status-rejected { background: var(--red-100); color: var(--red-800); }
.match-status-voided { background: var(--gray-100); color: var(--gray-800); }

.match-result {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    margin-right: 0.5rem;
}

.match-result.win { background: var(--green-100); color: var(--green-800); }
.match-result.loss { background: var(--red-100); color: var(--red-800); }

/* Ratings list */
.ratings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rating-item {
    padding: 1rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
}

.rating-score {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--green-700);
    margin-right: 0.5rem;
}

.rating-evidence {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--green-100);
    color: var(--green-800);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.rating-comment {
    margin-top: 0.5rem;
    line-height: 1.5;
}

.rating-meta {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted);
}

/* Achievements */
.achievements-mini {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.achievement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.25rem;
}

/* Passport */
.passport-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1rem;
}

.passport-card {
    background: white;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.passport-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--green-700);
}

.passport-brand {
    font-weight: bold;
    color: var(--green-700);
}

.passport-stamp {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--muted);
    letter-spacing: 0.1em;
}

.passport-player {
    text-align: center;
    margin-bottom: 2rem;
}

.passport-name {
    font-size: 1.5rem;
    margin: 1rem 0 0.5rem;
}

.passport-number {
    font-family: monospace;
    color: var(--muted);
    font-size: 0.875rem;
}

.passport-info {
    margin-top: 0.5rem;
    color: var(--muted);
}

.passport-ntrp {
    text-align: center;
    padding: 1.5rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.ntrp-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--green-700);
    margin: 0.5rem 0;
}

.ntrp-caption {
    font-size: 0.875rem;
    color: var(--muted);
}

.passport-score-strip {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.score-item {
    text-align: center;
}

.score-label {
    font-size: 0.75rem;
    color: var(--muted);
}

.score-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--green-700);
    margin-top: 0.25rem;
}

.passport-details {
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.detail-label {
    font-weight: 500;
    color: var(--muted);
}

.passport-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.credential-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--green-100);
    color: var(--green-800);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
}

.credential-default {
    color: var(--muted);
    font-size: 0.875rem;
}

.credential-detail {
    width: 100%;
    font-size: 0.875rem;
    color: var(--muted);
    margin-top: 0.5rem;
}

.passport-achievements {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.achievement-item {
    flex: 1;
    text-align: center;
    padding: 1rem;
    border-radius: var(--radius);
    color: white;
}

.achievement-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.achievement-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.passport-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.passport-date {
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.passport-notes {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.5;
}

.passport-notes p {
    margin-bottom: 0.5rem;
}

/* More menu */
.more-menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.more-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface-soft);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: background 0.2s;
}

.more-item:hover {
    background: var(--green-50);
}

.more-icon {
    font-size: 2rem;
}

.more-content {
    flex: 1;
}

.more-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.more-description {
    font-size: 0.875rem;
    color: var(--muted);
}

/* Responsive */
@media (max-width: 760px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-stats {
        gap: 1rem;
    }

    .ladder-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats {
        grid-template-columns: 1fr;
    }

    .elo-trend {
        height: 150px;
    }
}