/* =========================
   Layout
========================= */

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.navbar {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.main-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
}


/* =========================
   Navbar
========================= */

.navbar-brand {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.navbar-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.navbar-toggle {
    display: none;

    background: transparent;
    border: none;

    color: var(--color-primary);

    font-size: var(--font-size-xl);

    cursor: pointer;
}

.navbar-toggle span {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px 0;

    background-color: var(--color-primary);

    border-radius: var(--radius-pill);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

/* --------Navbar Toggle — Open State--------- */

.navbar-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* ------------------------------------------- */

.navbar-link {
    padding: var(--space-2) var(--space-3);

    color: var(--color-text-muted);

    border-radius: var(--radius-md);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.navbar-link:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

.navbar-link--primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.navbar-link--primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-surface);
}

.navbar-logout {
    border: 0;
    background: transparent;

    color: var(--color-danger);

    padding: var(--space-2) var(--space-3);

    border-radius: var(--radius-md);

    font: inherit;
    cursor: pointer;

    transition:
        background-color 0.2s ease;
}

.navbar-logout:hover {
    background-color: #fef2f2;
}

/* =========================
   Hero
========================= */

.hero {
    padding: var(--space-8) 0;
}

.hero-content {
    max-width: 760px;
    margin: 0 auto;

    padding: var(--space-8);

    text-align: center;

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.hero-badge {
    display: inline-flex;

    margin-bottom: var(--space-4);
    padding: var(--space-1) var(--space-3);

    background-color: var(--color-background);
    color: var(--color-primary);

    border-radius: var(--radius-pill);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.hero-title {
    margin-bottom: var(--space-4);

    color: var(--color-text);

    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

.hero-text {
    max-width: 600px;
    margin: 0 auto var(--space-6);

    color: var(--color-text-muted);

    font-size: var(--font-size-lg);
    line-height: 1.9;
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: var(--space-3);

    flex-wrap: wrap;
}


/* =========================
   Buttons
========================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-2) var(--space-4);

    border: 1px solid transparent;
    border-radius: var(--radius-md);

    font-weight: var(--font-weight-medium);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.1s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover {
    background-color: var(--color-background);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-surface);
}


/* =========================
   Cards
========================= */

.card {
    background-color: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    padding: var(--space-5);

    box-shadow: var(--shadow-sm);
}

.card-title {
    margin-bottom: var(--space-3);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}


/* =========================
   Forms
========================= */

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;

    margin-bottom: var(--space-2);

    font-weight: var(--font-weight-medium);
}

input,
select,
textarea {
    width: 100%;

    padding: var(--space-2) var(--space-3);

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    color: var(--color-text);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* =========================
   Checkbox Groups
========================= */

.auth-form input[type="checkbox"] {
    width: auto;

    margin: 0;

    flex-shrink: 0;

    accent-color: var(--color-primary);
}

.auth-form #id_members {
    margin: var(--space-2) 0 0;
    padding: 0;

    list-style: none;
}

.auth-form #id_members li {
    margin-bottom: var(--space-2);
}

.auth-form #id_members label {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    margin: 0;

    font-weight: var(--font-weight-normal);

    cursor: pointer;
}


/* =========================
   Authentication
========================= */

.auth-page {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.auth-card {
    padding: var(--space-7);

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.auth-header {
    margin-bottom: var(--space-6);

    text-align: center;
}

.auth-title {
    margin-bottom: var(--space-2);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.auth-subtitle {
    color: var(--color-text-muted);
}

.auth-form p {
    margin-bottom: var(--space-4);
}

.auth-form label {
    display: block;

    margin-bottom: var(--space-2);

    font-weight: var(--font-weight-medium);
}

.auth-form input {
    width: 100%;
}

.auth-submit {
    width: 100%;
    margin-top: var(--space-2);
}

.auth-footer {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: var(--space-2);

    margin-top: var(--space-6);
    padding-top: var(--space-5);

    border-top: 1px solid var(--color-border);

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}

.auth-footer a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.auth-footer a:hover {
    color: var(--color-primary-dark);
}


/* =========================
   Form Errors
========================= */

.errorlist {
    margin: var(--space-2) 0 0;
    padding: 0;

    list-style: none;

    color: var(--color-danger);

    font-size: var(--font-size-sm);
}

.errorlist li {
    margin-bottom: var(--space-1);
}

.auth-form .errorlist {
    margin-top: var(--space-2);
}


/* =========================
   Profile
========================= */

.profile-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.profile-card {
    background-color: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    padding: var(--space-7);

    box-shadow: var(--shadow-sm);
}

.profile-header {
    display: flex;
    align-items: center;

    gap: var(--space-4);

    margin-bottom: var(--space-7);
}

.profile-avatar {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background-color: var(--color-primary);
    color: var(--color-surface);

    border-radius: 50%;

    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.profile-title {
    margin-bottom: var(--space-1);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.profile-subtitle {
    color: var(--color-text-muted);
}

.profile-info {
    display: grid;

    gap: var(--space-3);
}

.profile-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    padding: var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.profile-label {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.profile-value {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}


/* =========================
   Alerts / Messages
========================= */

.alert {
    padding: var(--space-3) var(--space-4);

    margin-bottom: var(--space-4);

    border-radius: var(--radius-md);

    border: 1px solid transparent;
}

.messages {
    margin-bottom: var(--space-4);
}

.alert-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: var(--color-success);
}

.alert-warning {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: var(--color-warning);
}

.alert-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: var(--color-danger);
}

.alert-error {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: var(--color-danger);
}

.alert-info {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: var(--color-primary);
}


/* =========================
   Tables
========================= */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;

    border-collapse: collapse;

    background-color: var(--color-surface);
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);

    border-bottom: 1px solid var(--color-border);

    text-align: right;
}

.table th {
    background-color: var(--color-background);
    font-weight: var(--font-weight-semibold);
}

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


/* =========================
   Badges
========================= */

.badge {
    display: inline-flex;
    align-items: center;

    padding: 2px var(--space-2);

    border-radius: var(--radius-pill);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.badge-success {
    background-color: #dcfce7;
    color: var(--color-success);
}

.badge-warning {
    background-color: #fef3c7;
    color: var(--color-warning);
}

.badge-danger {
    background-color: #fee2e2;
    color: var(--color-danger);
}

.badge-info {
    background-color: #dbeafe;
    color: var(--color-primary);
}


/* =========================
   Empty State
========================= */

.empty-state {
    padding: var(--space-7);

    text-align: center;

    color: var(--color-text-muted);

    background-color: var(--color-surface);

    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

/* =========================
   Team Cards
========================= */

.page-header {
    margin-bottom: var(--space-7);
}

.page-title {
    margin-bottom: var(--space-2);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.page-description {
    color: var(--color-text-muted);
}


.card-list {
    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(280px, 1fr)
    );

    gap: var(--space-5);
}


.team-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-5);
}


.team-card__content {
    min-width: 0;
}


.team-card .card-title {
    margin-bottom: var(--space-2);
}


.team-card .card-title a {
    color: var(--color-text);

    transition:
        color 0.2s ease;
}


.team-card .card-title a:hover {
    color: var(--color-primary);
}


.team-card__score {
    margin: 0;

    color: var(--color-text-muted);
}


.team-card__score strong {
    color: var(--color-primary);

    font-size: var(--font-size-lg);
}


.team-card__action {
    flex-shrink: 0;
}

/* =========================
   Team Detail
========================= */

.team-profile-card {
    margin-bottom: var(--space-5);
}

.team-profile-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-5);

    padding-bottom: var(--space-5);

    border-bottom: 1px solid var(--color-border);
}

.team-profile-card__header .card-title {
    margin-bottom: var(--space-2);
}

.team-profile-card__captain {
    margin: 0;

    color: var(--color-text-muted);
}

.team-profile-card__score {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: var(--space-5);
}

.team-profile-card__score span {
    color: var(--color-text-muted);

    font-weight: var(--font-weight-medium);
}

.team-profile-card__score strong {
    color: var(--color-primary);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}


/* =========================
   Team Statistics
========================= */

.stats-grid {
    display: grid;

    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.stat-card {
    text-align: center;
}

.stat-card__label {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}

.stat-card__value {
    display: block;

    color: var(--color-text);

    font-size: var(--font-size-xl);
}


/* =========================
   Team Results
========================= */

.team-result {
    padding: var(--space-3) 0;

    border-bottom: 1px solid var(--color-border);
}

.team-result:last-child {
    border-bottom: 0;
}


/* =========================
   Team Members
========================= */

.team-members {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);
}

.team-member {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    padding: var(--space-3) var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.team-member__name {
    font-weight: var(--font-weight-medium);
}

.team-member__score {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}

.team-member__score strong {
    color: var(--color-primary);
}


/* =========================
   Text Helpers
========================= */

.text-muted {
    color: var(--color-text-muted);
}

/* =========================
   Team Members Management
========================= */

.team-members-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.team-members-page .page-header {
    margin-bottom: var(--space-6);
}

.team-members-card {
    margin-bottom: var(--space-5);
}

.team-member__content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.badge-primary {
    background-color: #e0e7ff;
    color: var(--color-primary);

    padding: 2px var(--space-2);

    border-radius: var(--radius-pill);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.member-add-form {
    max-width: 500px;
}


/* =========================
   Tournaments
========================= */

.tournaments-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}


/* =========================
   Tournament Cards
========================= */

.tournament-card {
    display: flex;
    flex-direction: column;

    gap: var(--space-5);
}

.tournament-card__title {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    flex-wrap: wrap;
}

.tournament-card__title .card-title {
    margin: 0;
}

.tournament-card__title .card-title a {
    color: var(--color-text);

    transition: color 0.2s ease;
}

.tournament-card__title .card-title a:hover {
    color: var(--color-primary);
}


/* =========================
   Tournament Info
========================= */

.tournament-card__info {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-3);
}

.tournament-info-item {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);

    padding: var(--space-3);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.tournament-info-label {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}

.tournament-info-value {
    color: var(--color-text);

    font-weight: var(--font-weight-medium);
}


/* =========================
   Tournament Footer
========================= */

.tournament-card__footer {
    display: flex;
    justify-content: flex-start;

    padding-top: var(--space-2);

    border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {

    .tournaments-page {
        padding: var(--space-6) 0;
    }

    .tournament-card__info {
        grid-template-columns: 1fr;
    }

    .tournament-card__footer .btn {
        width: 100%;
    }

}

/* =========================
   Tournament Detail
========================= */

.tournament-detail-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.tournament-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);
}


/* =========================
   Tournament Information
========================= */

.tournament-info-card {
    margin-bottom: var(--space-5);
}

.tournament-detail-info {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-3);
}


/* =========================
   Registration
========================= */

.tournament-registration-card {
    margin-bottom: var(--space-5);
}

.card-description {
    margin-bottom: var(--space-4);

    color: var(--color-text-muted);
}


/* =========================
   Status
========================= */

.tournament-status-card {
    display: flex;
    align-items: flex-start;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.status-card-icon {
    flex-shrink: 0;

    font-size: var(--font-size-2xl);
}


/* =========================
   Tournament Progress
========================= */

.tournament-progress-card {
    margin-bottom: var(--space-5);
}

.tournament-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.progress-info {
    display: flex;
    justify-content: space-between;

    gap: var(--space-5);

    margin-bottom: var(--space-3);
}

.progress-info > div {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);
}

.progress-bar {
    width: 100%;
    height: 10px;

    overflow: hidden;

    background-color: var(--color-background);

    border-radius: var(--radius-pill);
}

.progress-bar__value {
    height: 100%;

    background-color: var(--color-primary);

    border-radius: inherit;

    transition: width 0.3s ease;
}


/* =========================
   Champion
========================= */

.tournament-champion-card {
    display: flex;
    align-items: center;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.champion-icon {
    font-size: var(--font-size-3xl);
}

.champion-name {
    display: block;

    color: var(--color-primary);

    font-size: var(--font-size-xl);
}


/* =========================
   Section Headers
========================= */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-4);
}


/* =========================
   Rounds
========================= */

.round-list {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);
}

.round-item {
    padding: var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.round-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    margin-bottom: var(--space-3);
}

.round-item__details {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-3);
}

.round-item__details > div {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);
}

.round-label {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}


/* =========================
   Tournament Teams
========================= */

.tournament-team-list {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);
}

.tournament-team-item {
    padding: var(--space-3) var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    font-weight: var(--font-weight-medium);
}


/* =========================
   Matches
========================= */

.match-list {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);
}

.match-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    padding: var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    color: var(--color-text);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.match-item:hover {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
}

.match-teams {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    min-width: 0;
}

.match-teams strong {
    color: var(--color-primary);

    white-space: nowrap;
}


/* =========================
   Ranking Link
========================= */

.tournament-ranking-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-5);

    margin-bottom: var(--space-5);
}

.tournament-ranking-link .card-title {
    margin-bottom: var(--space-1);
}


/* =========================
   AI Prediction
========================= */

.ai-prediction-card {
    margin-bottom: var(--space-5);
}

.ai-champion {
    display: flex;
    align-items: flex-start;

    gap: var(--space-4);

    margin-bottom: var(--space-6);

    padding: var(--space-5);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.ai-champion__icon {
    flex-shrink: 0;

    font-size: var(--font-size-2xl);
}

.ai-champion__name {
    display: block;

    margin: var(--space-1) 0 var(--space-3);

    color: var(--color-primary);

    font-size: var(--font-size-xl);
}

.ai-ranking {
    margin-bottom: var(--space-6);
}

.ai-ranking h3,
.ai-reasons h3 {
    margin-bottom: var(--space-3);
}

.ai-reasons ul {
    margin: 0;
    padding-right: var(--space-5);
}

.ai-reasons li {
    margin-bottom: var(--space-2);
}


/* =========================
   Tournament Detail Responsive
========================= */

@media (max-width: 768px) {

    .tournament-detail-page {
        padding: var(--space-6) 0;
    }

    .tournament-detail-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .tournament-detail-info {
        grid-template-columns: 1fr;
    }

    .tournament-status-card {
        flex-direction: column;
    }

    .tournament-section-header {
        flex-direction: column;
    }

    .progress-info {
        flex-direction: column;

        gap: var(--space-3);
    }

    .round-item__details {
        grid-template-columns: 1fr;
    }

    .match-item {
        align-items: stretch;

        flex-direction: column;
    }

    .match-teams {
        justify-content: space-between;

        width: 100%;
    }

    .tournament-ranking-link {
        align-items: stretch;

        flex-direction: column;
    }

    .tournament-ranking-link .btn {
        width: 100%;
    }

    .ai-champion {
        flex-direction: column;
    }

    .table-wrapper {
        overflow-x: auto;
    }

}

/* =========================
   Leaderboard
========================= */

.leaderboard-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.leaderboard-card {
    padding: 0;
    overflow: hidden;
}

.leaderboard-table {
    margin: 0;
}

.leaderboard-table th,
.leaderboard-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.leaderboard-rank {
    font-weight: var(--font-weight-semibold);
    text-align: center !important;
}

.leaderboard-team {
    min-width: 180px;
}

.leaderboard-points {
    color: var(--color-primary);
}


/* =========================
   Leaderboard Responsive
========================= */

@media (max-width: 768px) {

    .leaderboard-page {
        padding: var(--space-6) 0;
    }

    .leaderboard-card {
        overflow: hidden;
    }

    .leaderboard-table {
        min-width: 760px;
    }

}

/* =========================
   Match List
========================= */

.match-list-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.match-cards {
    display: flex;
    flex-direction: column;

    gap: var(--space-4);
}

.match-card {
    display: flex;
    flex-direction: column;

    gap: var(--space-4);
}


/* =========================
   Tournament
========================= */

.match-card__tournament {
    display: flex;
    align-items: center;

    gap: var(--space-2);

    padding-bottom: var(--space-3);

    border-bottom: 1px solid var(--color-border);
}

.match-label {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}


/* =========================
   Match Main
========================= */

.match-card__main {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-4);

    padding: var(--space-3);

    color: var(--color-text);

    border-radius: var(--radius-md);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.match-card__main:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

.match-team {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    min-width: 140px;

    font-weight: var(--font-weight-medium);
}

.match-team:first-child {
    justify-content: flex-end;
}

.match-team:last-child {
    justify-content: flex-start;
}

.match-team strong {
    color: var(--color-primary);

    font-size: var(--font-size-xl);
}

.match-separator {
    color: var(--color-text-muted);

    font-weight: var(--font-weight-semibold);

    white-space: nowrap;
}


/* =========================
   Result
========================= */

.match-card__result {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    padding-top: var(--space-3);

    border-top: 1px solid var(--color-border);
}

.match-card__result > div {
    display: flex;
    align-items: center;

    gap: var(--space-3);
}

.match-card__date {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}


/* =========================
   Match List Responsive
========================= */

@media (max-width: 768px) {

    .match-list-page {
        padding: var(--space-6) 0;
    }

    .match-card__main {
        gap: var(--space-2);
    }

    .match-team {
        min-width: 0;

        gap: var(--space-2);
    }

    .match-team span {
        overflow-wrap: anywhere;
    }

    .match-card__result {
        align-items: flex-start;

        flex-direction: column;
    }

    .match-card__date {
        width: 100%;
    }

}

 /* =========================
    Match Detail
 ========================= */

.match-detail-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}


/* =========================
   Match Header
========================= */

.match-detail-header {
    margin-bottom: var(--space-5);
}

.match-detail-teams {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-5);

    padding: var(--space-5) 0;

    text-align: center;
}

.match-detail-team {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    min-width: 180px;

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.match-detail-team:first-child {
    justify-content: flex-end;
}

.match-detail-team:last-child {
    justify-content: flex-start;
}

.match-detail-team strong {
    color: var(--color-primary);

    font-size: var(--font-size-2xl);
}

.match-detail-vs {
    color: var(--color-text-muted);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);

    white-space: nowrap;
}

.match-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: var(--space-4);

    padding-top: var(--space-5);

    border-top: 1px solid var(--color-border);
}

.match-detail-meta > div {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);
}


/* =========================
   Status
========================= */

.match-status-card {
    margin-bottom: var(--space-7);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.match-progress-info {
    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );

    gap: var(--space-4);
}

.match-progress-info > div {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);

    padding: var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.match-progress-info strong {
    color: var(--color-text);
}


/* =========================
   Team Sections
========================= */

.match-team-section {
    margin-bottom: var(--space-7);
}

.match-team-section .page-title {
    margin-bottom: var(--space-4);
}

.match-players-table th,
.match-players-table td {
    vertical-align: middle;
}

.match-players-table td:last-child,
.match-players-table th:last-child {
    text-align: center;
}


/* =========================
   AI Report
========================= */

.match-ai-section {
    margin-top: var(--space-7);
}

.ai-report-card {
    overflow: hidden;
}

.ai-report-content {
    padding: var(--space-5);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    line-height: 1.9;
}


/* =========================
   Small Button
========================= */

.btn-sm {
    padding: var(--space-1) var(--space-3);

    font-size: var(--font-size-sm);
}


/* =========================
   Match Detail Responsive
========================= */

@media (max-width: 768px) {

    .match-detail-page {
        padding: var(--space-6) 0;
    }

    .match-detail-teams {
        gap: var(--space-3);
    }

    .match-detail-team {
        min-width: 0;

        flex: 1;

        font-size: var(--font-size-base);
    }

    .match-detail-team strong {
        font-size: var(--font-size-xl);
    }

    .match-detail-meta {
        grid-template-columns: 1fr;
    }

    .section-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .match-players-table {
        min-width: 720px;
    }

    .ai-report-content {
        padding: var(--space-4);
    }

}

/* =========================
   Gameplay
========================= */

.gameplay-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}


/* =========================
   Gameplay Header
========================= */

.gameplay-header {
    margin-bottom: var(--space-7);
}

.gameplay-header .page-header {
    margin-bottom: var(--space-6);
}


.gameplay-info-grid {
    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(200px, 1fr)
    );

    gap: var(--space-4);
}


.gameplay-info-item {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    padding: var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}


/* =========================
   Questions
========================= */

.gameplay-section {
    margin-bottom: var(--space-7);
}


.gameplay-card {
    padding: var(--space-6);
}


.gameplay-question {
    padding: var(--space-5) 0;

    border-bottom: 1px solid var(--color-border);
}


.gameplay-question:first-child {
    padding-top: 0;
}


.gameplay-question:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.gameplay-question__title {
    margin-bottom: var(--space-4);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);

    color: var(--color-text);
}


.gameplay-question__input {
    width: 100%;
}


.gameplay-question__input input,
.gameplay-question__input select,
.gameplay-question__input textarea {
    width: 100%;
}


/* =========================
   Gameplay Actions
========================= */

.gameplay-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: var(--space-6);
    padding-top: var(--space-5);

    border-top: 1px solid var(--color-border);
}


/* =========================
   Gameplay Responsive
========================= */

@media (max-width: 768px) {

    .gameplay-page {
        padding: var(--space-6) 0;
    }

    .gameplay-card {
        padding: var(--space-4);
    }

    .gameplay-question {
        padding: var(--space-4) 0;
    }

    .gameplay-actions {
        justify-content: stretch;
    }

    .gameplay-actions .btn {
        width: 100%;
    }

}

/* =========================
   Gameplay Checkbox Alignment
========================= */

.gameplay-question__input label {
    display: flex;
    align-items: center;

    gap: var(--space-2);

    width: 100%;

    text-align: right;

    direction: rtl;

    cursor: pointer;
}


.gameplay-question__input input[type="checkbox"] {
    width: auto;

    flex: 0 0 auto;

    margin: 0;

    vertical-align: middle;
}


.gameplay-question__input label span {
    flex: 1;

    min-width: 0;

    text-align: right;
}

/* =========================
   Gameplay Choice Inputs
========================= */

.gameplay-question__input input[type="radio"],
.gameplay-question__input input[type="checkbox"] {
    width: auto;

    flex: 0 0 auto;

    margin: 0;

    padding: 0;
}


.gameplay-question__input label {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: var(--space-2);

    width: 100%;

    direction: rtl;

    text-align: right;

    cursor: pointer;

    line-height: 1.8;
}

/* =========================
   Game Result
========================= */

.game-result-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}


.game-result-header {
    margin-bottom: var(--space-5);
}


.game-result-header .page-header {
    margin-bottom: 0;
}


/* =========================
   Result Grid
========================= */

.game-result-card {
    margin-bottom: var(--space-5);
}


.game-result-grid {
    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(200px, 1fr)
    );

    gap: var(--space-4);
}


.game-result-item {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    padding: var(--space-4);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}


.game-result-label {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}


.game-result-item strong {
    color: var(--color-text);

    font-size: var(--font-size-lg);
}


/* =========================
   Final Score Highlight
========================= */

.game-result-item--highlight {
    background-color: #eef2ff;

    border-color: #c7d2fe;
}


.game-result-item--highlight strong {
    color: var(--color-primary);

    font-size: var(--font-size-2xl);
}


/* =========================
   Actions
========================= */

.game-result-actions {
    display: flex;
    justify-content: flex-start;

    gap: var(--space-3);
}


/* =========================
   Responsive
========================= */

@media (max-width: 768px) {

    .game-result-page {
        padding: var(--space-6) 0;
    }

    .game-result-grid {
        grid-template-columns: 1fr;
    }

    .game-result-actions {
        justify-content: stretch;
    }

    .game-result-actions .btn {
        width: 100%;
    }

}

/* =========================
   Leaderboard
========================= */

.leaderboard-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}


.leaderboard-page .page-header {
    margin-bottom: var(--space-6);
}


/* =========================
   Leaderboard Rank
========================= */

.leaderboard-page .table th:first-child,
.leaderboard-page .table td:first-child {
    width: 80px;

    text-align: center;
}


.leaderboard-page .table td:first-child strong {
    font-size: var(--font-size-lg);
}


/* =========================
   Top Rank
========================= */

.leaderboard-page .table tbody tr:first-child {
    background-color: #eef2ff;
}


.leaderboard-page .table tbody tr:first-child td {
    font-weight: var(--font-weight-medium);
}


/* =========================
   Team Name
========================= */

.leaderboard-page .table td:nth-child(2) {
    font-weight: var(--font-weight-medium);
}


/* =========================
   Points
========================= */

.leaderboard-page .table td:nth-child(3) strong {
    color: var(--color-primary);

    font-size: var(--font-size-lg);
}


/* =========================
   Mobile
========================= */

@media (max-width: 768px) {

    .leaderboard-page {
        padding: var(--space-6) 0;
    }

    .leaderboard-page .table {
        min-width: 650px;
    }

}