/* =============================================
   Tournoi Round Robin — Thème Jeux de Société
   Feutre vert + Or + Bois/Bronze
   ============================================= */

:root {
    --bg-main: #0f1a1f;              /* nuit profonde */
    --bg-felt: #143827;              /* feutre de table */
    --bg-felt-light: #1b4a34;
    --bg-card: #1d2a30;              /* tuile sombre */
    --bg-surface: #243239;
    --bg-wood: #3d2a1e;              /* bois */
    --bg-wood-light: #5c3d2a;

    --accent-gold: #e3b23c;          /* or laiton */
    --accent-gold-bright: #f5d97a;
    --accent-bronze: #b87333;
    --accent-blue: #4f8ef7;
    --accent-green: #4ade80;
    --accent-red: #f87171;
    --accent-cream: #f5e6d0;

    --text-primary: #f3ead8;
    --text-muted: #a39a85;
    --text-gold: #e3b23c;

    --radius: 14px;
    --radius-lg: 20px;

    --shadow-tile: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(227,178,60,0.08) inset;
    --shadow-glow: 0 0 24px rgba(227,178,60,0.35);
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
    background:
        radial-gradient(ellipse at top, rgba(227,178,60,0.06), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(79,142,247,0.04), transparent 60%),
        var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}

/* ── Topbar (index.php) ────────────────────── */

.has-topbar .main-display {
    height: calc(100vh - 72px);
}

.topbar {
    height: 72px;
    background: linear-gradient(180deg, #1d2a30 0%, #152024 100%);
    border-bottom: 2px solid var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-brand {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-brand .dice {
    font-size: 30px;
    filter: drop-shadow(0 0 6px rgba(227,178,60,0.5));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-4px) rotate(2deg); }
}

.topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.topbar-actions .btn {
    min-height: 48px;
    padding: 8px 18px;
    font-size: 16px;
}

/* ── Boutons tactiles ──────────────────────── */

.btn {
    min-height: 64px;
    font-size: 18px;
    border-radius: 12px;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-weight: 700;
    transition: transform 0.12s, box-shadow 0.2s, filter 0.15s;
    border: none;
    position: relative;
    letter-spacing: 0.3px;
}

.btn:active { transform: scale(0.97); }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: linear-gradient(180deg, #5a96f7, #3d7de0);
    color: #fff;
    box-shadow: 0 3px 0 #2d5fb0, 0 4px 12px rgba(79,142,247,0.3);
}

.btn-success {
    background: linear-gradient(180deg, #5ee29a, #3cc177);
    color: #0f1a1f;
    box-shadow: 0 3px 0 #2a8f56, 0 4px 12px rgba(74,222,128,0.25);
}

.btn-warning {
    background: linear-gradient(180deg, #f5d97a, #d9a528);
    color: #1a1205;
    box-shadow: 0 3px 0 #9c7a1c, 0 4px 12px rgba(227,178,60,0.3);
}

.btn-danger {
    background: linear-gradient(180deg, #fb8c8c, #dc5c5c);
    color: #fff;
    box-shadow: 0 3px 0 #a83d3d, 0 4px 12px rgba(248,113,113,0.25);
}

.btn-outline-light {
    border: 2px solid rgba(227,178,60,0.4);
    color: var(--text-primary);
    background: rgba(227,178,60,0.05);
    box-shadow: none;
}

.btn-outline-light:hover, .btn-outline-light:active {
    background: rgba(227,178,60,0.15);
    border-color: var(--accent-gold);
    color: var(--accent-gold-bright);
}

.btn-lg {
    min-height: 72px;
    font-size: 20px;
    padding: 16px 32px;
}

/* ── Inputs tactiles ───────────────────────── */

.form-control, .form-select {
    min-height: 56px;
    font-size: 18px;
    border-radius: 12px;
    background: rgba(15,26,31,0.6);
    border: 2px solid rgba(227,178,60,0.2);
    color: var(--text-primary);
    padding: 12px 16px;
    touch-action: manipulation;
}

.form-control:focus, .form-select:focus {
    background: rgba(15,26,31,0.8);
    border-color: var(--accent-gold);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(227,178,60,0.2);
}

.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-muted); font-weight: 600; }

/* Options du dropdown : forcer fond/texte clair (par défaut, le navigateur les rend
   en noir-sur-blanc ou noir-sur-fond-OS, illisible sur thème sombre) */
.form-select option,
select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ── Cards (tuiles) ────────────────────────── */

.card {
    background: linear-gradient(180deg, #1f2d33 0%, #15222a 100%);
    border: 1px solid rgba(227,178,60,0.12);
    border-radius: var(--radius);
    color: var(--text-primary);
    box-shadow: var(--shadow-tile);
    overflow: hidden;
}

.card-header {
    background: linear-gradient(180deg, rgba(227,178,60,0.1), rgba(227,178,60,0.02));
    border-bottom: 1px solid rgba(227,178,60,0.2);
    font-family: 'Cinzel', 'Georgia', serif;
    font-weight: 700;
    font-size: 20px;
    padding: 16px 20px;
    letter-spacing: 0.5px;
    color: var(--accent-gold);
}

.card-body { padding: 20px; }

/* ── Tables ────────────────────────────────── */

/* Override des variables Bootstrap 5.3 pour que le texte reste lisible */
/* sur le fond sombre (sinon .table-striped force le texte en noir) */
.table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(227,178,60,0.08);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: rgba(227,178,60,0.04);
    --bs-table-hover-color: var(--accent-gold-bright);
    --bs-table-hover-bg: rgba(227,178,60,0.1);
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 0;
    border-color: rgba(227,178,60,0.1);
}

.table > thead > tr > th {
    background: rgba(227,178,60,0.08);
    color: var(--accent-gold) !important;
    border-bottom: 2px solid var(--accent-gold);
    padding: 14px 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
}

.table > tbody > tr > td {
    padding: 12px;
    vertical-align: middle;
}

.table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

/* ── Badges (jetons) ───────────────────────── */

.badge {
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid rgba(0,0,0,0.2);
}

.badge-pending  { background: #64748b; color: #fff; }
.badge-active   {
    background: linear-gradient(180deg, #5a96f7, #3d7de0);
    color: #fff;
    animation: pulseChip 1.5s infinite;
    box-shadow: 0 0 14px rgba(79,142,247,0.5);
}
.badge-finished {
    background: linear-gradient(180deg, #5ee29a, #3cc177);
    color: #0f1a1f;
}

@keyframes pulseChip {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* ── Podium ────────────────────────────────── */

.rank-1 { color: var(--accent-gold-bright); font-weight: 900; text-shadow: 0 0 12px rgba(227,178,60,0.4); }
.rank-2 { color: #d6d6d6; font-weight: 800; }
.rank-3 { color: #cd7f32; font-weight: 800; }

/* ── Navbar (admin) ────────────────────────── */

.navbar {
    background: linear-gradient(180deg, #1d2a30 0%, #152024 100%) !important;
    border-bottom: 2px solid var(--accent-gold);
    padding: 12px 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}

.navbar-brand {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--accent-gold) !important;
    letter-spacing: 1px;
}

.nav-link {
    color: var(--text-muted) !important;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 20px !important;
    border-radius: 8px;
    touch-action: manipulation;
}

.nav-link.active, .nav-link:hover {
    color: var(--accent-gold-bright) !important;
    background: rgba(227,178,60,0.08);
}

/* ── Nav tabs (admin) ──────────────────────── */

.nav-tabs {
    border-bottom: 2px solid rgba(227,178,60,0.2);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    min-height: 56px;
}

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--accent-gold);
    color: var(--accent-gold) !important;
}

/* ── Accordion ─────────────────────────────── */

.accordion-item {
    background: var(--bg-card);
    border: 1px solid rgba(227,178,60,0.12);
    margin-bottom: 10px;
    border-radius: var(--radius) !important;
    overflow: hidden;
}

.accordion-button {
    background: linear-gradient(180deg, #26363d, #1a262c);
    color: var(--text-primary);
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 20px;
    font-weight: 700;
    min-height: 60px;
    touch-action: manipulation;
    letter-spacing: 0.5px;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, #1a4e33, #143827);
    color: var(--accent-gold-bright);
    box-shadow: inset 0 -2px 0 var(--accent-gold);
}

.accordion-button::after { filter: invert(1) sepia(1) hue-rotate(18deg) saturate(4); }

.accordion-body {
    background: var(--bg-card);
    padding: 20px;
    color: var(--text-primary);
}

/* ── Alert / Messages ──────────────────────── */

.alert {
    border-radius: var(--radius);
    font-size: 17px;
    padding: 14px 18px;
    border: none;
}

.alert-success {
    background: rgba(74, 222, 128, 0.12);
    color: var(--accent-green);
    border-left: 4px solid var(--accent-green);
}

.alert-danger {
    background: rgba(248, 113, 113, 0.12);
    color: var(--accent-red);
    border-left: 4px solid var(--accent-red);
}

/* ── Register page ─────────────────────────── */

.register-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px;
}

.register-title {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 34px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 32px;
    color: var(--accent-gold);
    letter-spacing: 1.5px;
    text-shadow: 0 0 18px rgba(227,178,60,0.3);
}

.player-list-item {
    background: linear-gradient(180deg, #26363d, #1a262c);
    padding: 14px 20px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 18px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(227,178,60,0.08);
    transition: transform 0.15s, border-color 0.15s;
}

.player-list-item span,
.player-list-item strong {
    color: var(--text-primary);
}

.player-list-item:hover {
    border-color: rgba(227,178,60,0.3);
    transform: translateX(3px);
}

.player-list-item .num {
    background: linear-gradient(180deg, var(--accent-gold), var(--accent-bronze));
    color: #1a1205;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ── Index — écran principal ───────────────── */

.main-display {
    min-height: calc(100vh - 72px);     /* prend tout l'espace dispo, mais peut grandir */
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 14px;
    padding: 16px;
}

/* Tailles minimales raisonnables pour les sections du haut, le classement
   prend ensuite la place qu'il lui faut sans contrainte. */
.has-topbar .main-display .current-match { min-height: 40vh; }
.has-topbar .main-display .next-section  { min-height: 220px; }

/* Conteneur "match en cours" — un seul (par défaut) ou plusieurs (grid) */

.current-match {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.current-match:not(.current-match-list) {
    background:
        radial-gradient(circle at 30% 30%, rgba(227,178,60,0.08), transparent 60%),
        linear-gradient(180deg, #1a4e33 0%, #0f3322 100%);
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius-lg);
    padding: 20px;
    align-items: center;
    justify-content: center;
    box-shadow:
        var(--shadow-glow),
        inset 0 0 40px rgba(0,0,0,0.4),
        0 10px 30px rgba(0,0,0,0.5);
}

.current-match:not(.current-match-list)::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(227,178,60,0.25);
    border-radius: calc(var(--radius-lg) - 6px);
    pointer-events: none;
}

/* ── Layout admin : rectangles en grille auto-fit ── */

.current-match-grid-admin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
    padding: 4px 0;
    background: transparent;
    border: none;
    box-shadow: none;
    align-items: stretch;
    justify-content: stretch;
}

/* ── Tuile match en cours (admin) ──────────── */

.active-match-tile {
    background:
        radial-gradient(circle at 30% 20%, rgba(227,178,60,0.1), transparent 60%),
        linear-gradient(180deg, #1a4e33 0%, #0f3322 100%);
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 18px 16px;
    gap: 12px;
    box-shadow:
        0 0 18px rgba(227,178,60,0.25),
        inset 0 0 30px rgba(0,0,0,0.4),
        0 8px 22px rgba(0,0,0,0.5);
    position: relative;
    min-height: 280px;
}

.active-match-tile::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(227,178,60,0.22);
    border-radius: calc(var(--radius-lg) - 6px);
    pointer-events: none;
}

.amt-round {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: var(--accent-gold);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.35);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(227,178,60,0.3);
    align-self: center;
}

.amt-versus {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

.amt-name {
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    word-wrap: break-word;
    max-width: 100%;
    padding: 0 4px;
}

.amt-name.p1 { color: #ffe9b8; }
.amt-name.p2 { color: #c8eaff; }

.amt-vs {
    font-family: 'Cinzel', serif;
    color: var(--accent-gold-bright);
    font-weight: 900;
    font-size: 16px;
    background: rgba(0,0,0,0.4);
    padding: 4px 12px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    box-shadow: 0 0 14px rgba(227,178,60,0.4);
    min-width: 50px;
    margin: 2px 0;
}

/* Bandeau jeu (dans tuile) */
.amt-game {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border: 1px dashed rgba(227,178,60,0.3);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 40px;
}

.amt-game:hover {
    background: rgba(227,178,60,0.12);
    border-color: var(--accent-gold);
    border-style: solid;
}

.amt-game.has-game {
    background: linear-gradient(90deg, rgba(227,178,60,0.18), rgba(227,178,60,0.05));
    border-style: solid;
    border-color: var(--accent-gold);
}

.amt-game.has-game strong {
    color: var(--accent-gold-bright);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}

.amt-game.no-game strong {
    color: var(--text-muted);
}

.amt-game-action {
    margin-left: auto;
    font-size: 11px;
    color: var(--accent-gold);
    background: rgba(0,0,0,0.45);
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Boutons résultat (dans tuile) */
.amt-controls {
    display: flex;
    gap: 6px;
    width: 100%;
}

.amt-controls .amt-btn {
    flex: 1;
    min-height: 60px;
    padding: 8px 4px;
    font-size: 12px;
    line-height: 1.15;
    border-radius: 8px;
    text-align: center;
    min-width: 0;
}

.amt-controls .amt-btn strong {
    display: block;
    font-size: 13px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Layout liste : empile chaque match en une ligne pleine largeur ── */

.current-match-list {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0;
    gap: 12px;
    align-items: stretch;
    justify-content: center;     /* lignes centrées verticalement quand peu nombreuses */
}

/* ── Une ligne = un match en cours ─────────── */

.active-match-line {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    background:
        linear-gradient(90deg, rgba(26,78,51,0.5) 0%, rgba(15,51,34,0.7) 100%);
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius);
    box-shadow:
        0 0 18px rgba(227,178,60,0.25),
        inset 0 0 24px rgba(0,0,0,0.35);
    position: relative;
    flex-wrap: wrap;
    min-height: 88px;
}

.active-match-line::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(227,178,60,0.18);
    border-radius: calc(var(--radius) - 4px);
    pointer-events: none;
}

.aml-round {
    flex: 0 0 auto;
    color: var(--accent-gold);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    background: rgba(0,0,0,0.35);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(227,178,60,0.3);
    white-space: nowrap;
}

.aml-versus {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 0;
}

.aml-name {
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 800;
    color: var(--text-primary);
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

.aml-name.aml-p1 { color: #ffe9b8; text-align: right; }
.aml-name.aml-p2 { color: #c8eaff; text-align: left; }

.aml-vs {
    font-family: 'Cinzel', serif;
    color: var(--accent-gold-bright);
    font-weight: 900;
    font-size: clamp(16px, 1.6vw, 22px);
    background: rgba(0,0,0,0.4);
    padding: 6px 14px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    box-shadow: 0 0 14px rgba(227,178,60,0.4);
    flex-shrink: 0;
    min-width: 56px;
    text-align: center;
}

.aml-controls {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.aml-controls .aml-btn {
    min-height: 56px;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1.2;
    max-width: 180px;
}

.aml-controls .aml-btn strong {
    display: inline-block;
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
    vertical-align: middle;
    white-space: nowrap;
}

.current-match .waiting {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: clamp(24px, 3vw, 40px);
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* Wrapper de la ligne haute (round / versus / boutons) pour laisser place
   au bandeau jeu en dessous */
.active-match-line .aml-top {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    width: 100%;
}

/* Bandeau jeu sous la ligne match */
.aml-game {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(0,0,0,0.3);
    border: 1px dashed rgba(227,178,60,0.3);
    border-radius: 8px;
    font-size: 16px;
    color: var(--text-primary);
    width: 100%;
    margin-top: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.aml-game:hover {
    background: rgba(227,178,60,0.1);
    border-color: var(--accent-gold);
    border-style: solid;
}

.aml-game.has-game {
    background: linear-gradient(90deg, rgba(227,178,60,0.18), rgba(227,178,60,0.05));
    border-style: solid;
    border-color: var(--accent-gold);
}

.aml-game.has-game strong {
    color: var(--accent-gold-bright);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}

.aml-game.no-game strong {
    color: var(--text-muted);
}

.aml-game-change {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent-gold);
    background: rgba(0,0,0,0.4);
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* ── Prochains matchs ──────────────────────── */

.next-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 8px;
}

.next-section h2, .standings-section h2 {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 10px;
    flex-shrink: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pawn {
    font-size: 22px;
    filter: drop-shadow(0 0 4px rgba(227,178,60,0.4));
}

.next-cards {
    display: flex;
    gap: 14px;
    flex: 1;
    min-height: 0;
}

.next-card {
    flex: 1;
    background: linear-gradient(180deg, #26363d, #172328);
    border: 1px solid rgba(227,178,60,0.15);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 14px;
    min-height: 160px;                /* assure 3 lignes : joueur 1 / VS / joueur 2 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s, border-color 0.2s;
}

.next-card:hover { border-color: rgba(227,178,60,0.4); transform: translateY(-2px); }

.next-card .round-label {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 14px;
    color: var(--accent-gold);
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.next-card .matchup {
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.next-card .matchup .vs-small {
    color: var(--accent-gold);
    font-size: 14px;
    display: block;
    margin: 6px 0;
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
}

/* ── Classement section ────────────────────── */

.standings-section {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

.standings-section .table-responsive {
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius);
    border: 1px solid rgba(227,178,60,0.1);
    overflow: hidden;
}

/* ── Classement : tableau qui s'étend pour montrer tous les joueurs ─── */
/* Pas de squish, lignes de taille fixe et lisible, la page scrolle si
   jamais le contenu dépasse la viewport (rare avec ≤ 16 joueurs). */

.standings-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.standings-grid .sg-header,
.standings-grid .sg-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 70px 70px 70px 100px;
    align-items: center;
    padding: 14px 18px;
    gap: 6px;
}

.standings-grid .sg-header {
    background: rgba(227,178,60,0.1);
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--accent-gold);
}

.standings-grid .sg-row {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(227,178,60,0.08);
    transition: background 0.15s;
}

.standings-grid .sg-row:nth-child(odd) {
    background: rgba(227,178,60,0.04);
}

.standings-grid .sg-row:hover {
    background: rgba(227,178,60,0.1);
}

.standings-grid .sg-row:last-child {
    border-bottom: none;
}

.standings-grid .sg-rank-col,
.standings-grid .sg-num {
    text-align: center;
}

.standings-grid .sg-rank {
    font-size: 26px;
    font-weight: 800;
}

.standings-grid .sg-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.standings-grid .sg-pts {
    color: var(--accent-gold-bright);
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 26px;
}

.standings-grid .sg-rank-1 {
    background: linear-gradient(90deg, rgba(227,178,60,0.2), rgba(227,178,60,0.04));
}
.standings-grid .sg-rank-1 .sg-rank,
.standings-grid .sg-rank-1 .sg-name {
    color: var(--accent-gold-bright);
    font-weight: 900;
    text-shadow: 0 0 12px rgba(227,178,60,0.4);
}
.standings-grid .sg-rank-2 .sg-rank,
.standings-grid .sg-rank-2 .sg-name {
    color: #d6d6d6;
    font-weight: 800;
}
.standings-grid .sg-rank-3 .sg-rank,
.standings-grid .sg-rank-3 .sg-name {
    color: #cd7f32;
    font-weight: 800;
}

/* ── Progress ──────────────────────────────── */

.progress {
    height: 24px;
    border-radius: 12px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(227,178,60,0.1);
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--accent-green), #8eecb8);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f1a1f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ── Admin match card ──────────────────────── */

.match-card {
    background: linear-gradient(180deg, #26363d, #172328);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid rgba(227,178,60,0.1);
    color: var(--text-primary);
}

.match-card span:not([class*="badge"]):not([class*="text-"]),
.match-card strong {
    color: var(--text-primary);
}

.match-players {
    font-size: 20px;
    font-weight: 700;
    flex: 1;
    color: var(--text-primary);
}

.match-players .vs-text {
    color: var(--accent-gold);
    margin: 0 10px;
    font-family: 'Cinzel', serif;
}

.match-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.result-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

.result-buttons .btn {
    flex: 1;
    min-height: 72px;
    font-size: 18px;
}

/* ── Modal de random de jeu ───────────────── */

.game-random-display {
    background:
        radial-gradient(circle at 50% 50%, rgba(227,178,60,0.15), transparent 70%),
        rgba(0,0,0,0.4);
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius);
    padding: 24px 16px;
    margin: 16px 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4), 0 0 24px rgba(227,178,60,0.2);
}

.grd-prompt {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.grd-cycling {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--accent-gold-bright);
    letter-spacing: 1px;
    animation: grdShake 0.15s infinite;
}

.grd-result {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: 900;
    color: var(--accent-gold-bright);
    letter-spacing: 1.5px;
    text-shadow: 0 0 20px rgba(227,178,60,0.6);
    animation: grdPop 0.4s ease-out;
}

.grd-result strong { font-weight: 900; }

@keyframes grdShake {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(2px); }
}

@keyframes grdPop {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

/* Liste des jeux dans le modal pour pick manuel */
.game-pick-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.game-pick-item {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(227,178,60,0.15);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-align: center;
}

.game-pick-item:hover {
    background: rgba(227,178,60,0.12);
    border-color: var(--accent-gold);
}

.game-pick-item.selected {
    background: rgba(227,178,60,0.2);
    border-color: var(--accent-gold);
    border-width: 2px;
    transform: scale(1.02);
}

/* Liste des jeux côté admin (onglet Jeux) */
.game-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #26363d, #1a262c);
    border: 1px solid rgba(227,178,60,0.08);
    border-radius: 10px;
    margin-bottom: 10px;
    color: var(--text-primary);
    flex-wrap: wrap;
}

.game-row-info { flex: 1; min-width: 200px; }

.game-row-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-row-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Page publique joueurs ─────────────────── */

.public-page-title {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    color: var(--accent-gold);
    letter-spacing: 2px;
    margin: 12px 0 8px;
    text-shadow: 0 0 20px rgba(227,178,60,0.3);
}

.public-rank-badge {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-bronze));
    color: #1a1205;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}

.public-card { max-width: 920px; margin-left: auto; margin-right: auto; }

.topbar-actions .active-link {
    background: rgba(227,178,60,0.18);
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold-bright) !important;
}

/* ── Cartes profil joueur (onglet Joueurs admin) ─── */

.player-card {
    background: linear-gradient(180deg, #26363d 0%, #18242a 100%);
    border: 1px solid rgba(227,178,60,0.12);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 14px;
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    transition: border-color 0.2s, transform 0.15s;
}

.player-card:hover { border-color: rgba(227,178,60,0.3); }

.player-card.is-inactive {
    opacity: 0.6;
    filter: grayscale(0.4);
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(227,178,60,0.15);
}

.player-card-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 220px;
}

.player-card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-bronze));
    color: #1a1205;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.3);
}

.player-card-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.player-card-email {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.player-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.player-row-actions .btn-sm {
    min-height: 40px;
    font-size: 14px;
    padding: 6px 14px;
}

/* Stats en grille (6 cartouches) */
.player-card-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.player-card-stats .stat {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(227,178,60,0.08);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    min-width: 0;
}

.player-card-stats .stat-value {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.player-card-stats .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.player-card-stats .stat-w .stat-value { color: var(--accent-green); }
.player-card-stats .stat-d .stat-value { color: var(--accent-gold); }
.player-card-stats .stat-l .stat-value { color: var(--accent-red); }

/* Win rate avec couleur par performance */
.player-card-stats .stat-wr {
    border-width: 2px;
}

.player-card-stats .stat-wr.wr-elite {
    background: rgba(227,178,60,0.15);
    border-color: var(--accent-gold);
}
.player-card-stats .stat-wr.wr-elite .stat-value { color: var(--accent-gold-bright); text-shadow: 0 0 12px rgba(227,178,60,0.4); }

.player-card-stats .stat-wr.wr-good {
    background: rgba(74,222,128,0.1);
    border-color: rgba(74,222,128,0.4);
}
.player-card-stats .stat-wr.wr-good .stat-value { color: var(--accent-green); }

.player-card-stats .stat-wr.wr-mid {
    background: rgba(248,200,113,0.08);
    border-color: rgba(248,200,113,0.3);
}
.player-card-stats .stat-wr.wr-mid .stat-value { color: #f8c871; }

.player-card-stats .stat-wr.wr-low {
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.3);
}
.player-card-stats .stat-wr.wr-low .stat-value { color: var(--accent-red); }

.player-card-stats .stat-wr.wr-neutral .stat-value {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .player-card-stats { grid-template-columns: repeat(3, 1fr); }
    .player-card-stats .stat-value { font-size: 22px; }
}

/* ── Séparateur de cycle dans l'accordion matchs ─── */

.cycle-divider {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 18px 0 12px 0;
    margin-top: 16px;
    border-top: 1px dashed rgba(227,178,60,0.3);
    text-align: center;
    text-shadow: 0 0 14px rgba(227,178,60,0.3);
}

.cycle-divider:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.cycle-divider small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: none;
    margin-top: 4px;
}

.round-cycle-tag {
    background: var(--accent-gold);
    color: #1a1205;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    margin-right: 12px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.accordion-button:not(.collapsed) .round-cycle-tag {
    background: var(--accent-gold-bright);
}

/* ── Picker de cycles (admin) ──────────────── */

.cycles-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 8px 0;
}

.cycles-picker .btn {
    min-width: 56px;
    min-height: 56px;
    font-size: 28px;
    font-weight: 800;
    padding: 0;
    line-height: 1;
}

.cycles-value {
    font-family: 'Cinzel', serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--accent-gold);
    min-width: 72px;
    text-align: center;
    text-shadow: 0 0 16px rgba(227,178,60,0.4);
    letter-spacing: 1px;
}

/* ── Encadré d'estimation du tournoi ───────── */

.estimate-box {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(227,178,60,0.15);
    border-radius: var(--radius);
    padding: 14px 18px;
}

.estimate-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(227,178,60,0.08);
    font-size: 16px;
}

.estimate-row:last-child { border-bottom: none; }

.estimate-row .estimate-label {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

.estimate-row .estimate-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 18px;
}

.estimate-highlight {
    background: rgba(227,178,60,0.08);
    border-radius: 8px;
    padding: 8px 12px;
    border-bottom: none !important;
    margin: 4px -6px;
}

.estimate-highlight .estimate-label {
    color: var(--accent-gold);
}

.estimate-highlight .estimate-value {
    color: var(--accent-gold-bright);
    font-family: 'Cinzel', serif;
    font-size: 24px;
}

/* ── Login ─────────────────────────────────── */

.login-container {
    max-width: 480px;
    margin: 80px auto;
    padding: 20px;
}

/* ── Modal (inscription sur index) ─────────── */

.modal-content {
    background: linear-gradient(180deg, #1f2d33 0%, #15222a 100%);
    border: 1px solid rgba(227,178,60,0.25);
    border-radius: var(--radius);
    color: var(--text-primary);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(227,178,60,0.15);
}

.modal-header {
    border-bottom: 1px solid rgba(227,178,60,0.2);
    background: linear-gradient(180deg, rgba(227,178,60,0.1), transparent);
}

.modal-title {
    font-family: 'Cinzel', serif;
    color: var(--accent-gold);
    letter-spacing: 0.5px;
}

.modal-body { padding: 24px; }

/* ── Scrollbar ─────────────────────────────── */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-gold), var(--accent-bronze));
    border-radius: 6px;
}

/* ── Animations ────────────────────────────── */

.fade-in { animation: fadeIn 0.4s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Tournoi terminé ───────────────────────── */

.tournament-finished {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-bronze));
    color: #1a1205;
    text-align: center;
    padding: 24px;
    border-radius: var(--radius);
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 0 40px rgba(227,178,60,0.5), inset 0 2px 0 rgba(255,255,255,0.3);
    animation: celebrate 2s ease-in-out infinite;
}

@keyframes celebrate {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

/* ── Responsive ────────────────────────────── */

@media (max-width: 768px) {
    html { font-size: 16px; }

    .topbar {
        height: auto;
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .topbar-brand { font-size: 20px; }
    .topbar-actions { flex-wrap: wrap; }
    .topbar-actions .btn { min-height: 42px; padding: 6px 12px; font-size: 14px; }

    .has-topbar .main-display,
    .main-display {
        height: auto;
        grid-template-rows: auto;
        overflow: auto;
    }

    .next-cards { flex-direction: column; }

    .live-controls { flex-direction: column; }
    .live-controls .live-btn { min-height: 62px; }

    /* Sur mobile, la grille admin passe en 1 colonne (auto-fit le fait déjà
       avec minmax(290px, 1fr) sur ≤290px de large) */
    .current-match-grid-admin { grid-template-columns: 1fr; }
    .active-match-tile { min-height: 240px; padding: 16px 14px; }
    .amt-name { font-size: 24px; }
    .amt-controls .amt-btn { min-height: 56px; font-size: 12px; }
    .amt-controls .amt-btn strong { font-size: 13px; }

    /* Match en cours mobile (mode invité) : retour au format vertical empilé */
    .active-match-line {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 18px 16px;
        min-height: 0;
        text-align: center;
    }

    .aml-round {
        align-self: center;
        font-size: 12px;
        padding: 6px 14px;
    }

    .aml-versus {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .aml-name,
    .aml-name.aml-p1,
    .aml-name.aml-p2 {
        font-size: 26px;
        text-align: center;
        white-space: normal;       /* permet le retour à la ligne sur petits écrans */
        flex: 0 0 auto;
        max-width: 100%;
    }

    .aml-vs {
        font-size: 14px;
        padding: 4px 12px;
        min-width: 50px;
        align-self: center;
    }

    .aml-controls {
        width: 100%;
        gap: 6px;
    }

    .aml-controls .aml-btn {
        flex: 1 1 0;
        min-height: 64px;
        font-size: 12px;
        padding: 8px 4px;
        max-width: none;
        line-height: 1.2;
    }

    .aml-controls .aml-btn strong {
        display: block;
        margin: 2px 0 0 0;
        max-width: none;
        font-size: 13px;
        white-space: normal;
    }

    /* Classement mobile : on cache V/É/D pour donner toute la place au nom */
    .standings-grid .sg-header > :nth-child(n+3):nth-child(-n+5),
    .standings-grid .sg-row > :nth-child(n+3):nth-child(-n+5) {
        display: none;
    }
    .standings-grid .sg-header,
    .standings-grid .sg-row {
        grid-template-columns: 44px minmax(0, 1fr) 70px;
        padding: 10px 14px;
        gap: 8px;
    }
    .standings-grid .sg-row { font-size: 16px; }
    .standings-grid .sg-rank,
    .standings-grid .sg-pts { font-size: 18px; }
}