/* ============================================================
   JEU DE DAMES
   assets/css/jeu.css
   Interface du jeu
   ============================================================ */

:root {
    --jeu-bg: #f3f5f8;
    --jeu-card: #ffffff;
    --jeu-text: #1f2937;
    --jeu-muted: #6b7280;
    --jeu-border: #e5e7eb;

    --jeu-primary: #0d6efd;
    --jeu-primary-dark: #084298;
    --jeu-success: #198754;
    --jeu-danger: #dc3545;
    --jeu-warning: #ffc107;

    --board-light: #f0d9b5;
    --board-dark: #b58863;

    --board-border: #6b4f35;

    --piece-light: #f8f9fa;
    --piece-light-border: #c7cbd1;

    --piece-dark: #202124;
    --piece-dark-border: #000000;

    --selected: #ffd43b;
    --possible: rgba(25, 135, 84, 0.65);
    --capture: rgba(220, 53, 69, 0.75);

    --jeu-radius: 14px;

    --jeu-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08);

    --jeu-transition:
        all 0.2s ease;
}


/* ============================================================
   BASE
   ============================================================ */

html,
body {
    min-height: 100%;
}

body.jeu-body {
    margin: 0;
    padding: 0;

    background: var(--jeu-bg);

    color: var(--jeu-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    overflow-x: hidden;
}

.jeu-body a {
    text-decoration: none;
}


/* ============================================================
   CONTENEUR
   ============================================================ */

.jeu-wrapper {
    min-height: 100vh;

    padding:
        20px;
}

.jeu-container {
    width: 100%;

    max-width: 1450px;

    margin: 0 auto;
}


/* ============================================================
   HEADER DU JEU
   ============================================================ */

.jeu-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}

.jeu-title {
    margin: 0;

    font-size: 23px;

    font-weight: 800;

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

.jeu-subtitle {
    margin:
        4px 0 0;

    color: var(--jeu-muted);

    font-size: 12px;
}

.jeu-header-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


/* ============================================================
   BOUTONS
   ============================================================ */

.jeu-btn {
    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        8px 14px;

    border: 0;

    border-radius: 8px;

    background: var(--jeu-primary);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: var(--jeu-transition);
}

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

    color: #ffffff;

    transform:
        translateY(-1px);
}

.jeu-btn-light {
    background: #ffffff;

    color: #374151;

    border:
        1px solid var(--jeu-border);
}

.jeu-btn-light:hover {
    background: #f3f4f6;

    color: #111827;
}

.jeu-btn-success {
    background: var(--jeu-success);
}

.jeu-btn-success:hover {
    background: #146c43;
}

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

.jeu-btn-warning {
    background: var(--jeu-warning);

    color: #212529;
}

.jeu-btn-dark {
    background: #212529;
}

.jeu-btn-dark:hover {
    background: #000000;
}

.jeu-btn:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}


/* ============================================================
   GRILLE PRINCIPALE
   ============================================================ */

.jeu-layout {
    display: grid;

    grid-template-columns:
        minmax(220px, 280px)
        minmax(500px, 760px)
        minmax(220px, 280px);

    justify-content: center;

    align-items: start;

    gap: 18px;
}


/* ============================================================
   COLONNES
   ============================================================ */

.jeu-sidebar {
    display: flex;

    flex-direction: column;

    gap: 15px;
}

.jeu-main {
    min-width: 0;
}


/* ============================================================
   CARTES
   ============================================================ */

.jeu-card {
    background:
        var(--jeu-card);

    border:
        1px solid var(--jeu-border);

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

    box-shadow:
        var(--jeu-shadow);

    overflow:
        hidden;
}

.jeu-card-header {
    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        12px 15px;

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

.jeu-card-title {
    margin:
        0;

    font-size:
        13px;

    font-weight:
        800;
}

.jeu-card-body {
    padding:
        15px;
}


/* ============================================================
   INFORMATIONS JOUEUR
   ============================================================ */

.jeu-player {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.jeu-player-avatar {
    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #e9ecef;

    color:
        #374151;

    font-size:
        13px;

    font-weight:
        800;

    overflow:
        hidden;
}

.jeu-player-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.jeu-player-info {
    min-width:
        0;
}

.jeu-player-name {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        13px;

    font-weight:
        800;
}

.jeu-player-rating {
    margin-top:
        3px;

    color:
        var(--jeu-muted);

    font-size:
        10px;
}

.jeu-player-color {
    width:
        12px;

    height:
        12px;

    margin-left:
        auto;

    border-radius:
        50%;

    border:
        1px solid rgba(0, 0, 0, 0.2);
}

.jeu-player-color.black {
    background:
        #1f2937;
}

.jeu-player-color.white {
    background:
        #f8f9fa;
}


/* ============================================================
   INDICATEUR TOUR
   ============================================================ */

.jeu-turn {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 11px;

    border-radius:
        8px;

    background:
        #f8fafc;

    color:
        var(--jeu-muted);

    font-size:
        11px;

    font-weight:
        700;
}

.jeu-turn.active {
    background:
        #eaf7f0;

    color:
        #146c43;
}

.jeu-turn-dot {
    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #adb5bd;
}

.jeu-turn.active .jeu-turn-dot {
    background:
        var(--jeu-success);

    animation:
        jeu-pulse 1.4s infinite;
}

@keyframes jeu-pulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(25, 135, 84, 0.4);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(25, 135, 84, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(25, 135, 84, 0);
    }

}


/* ============================================================
   HORLOGE
   ============================================================ */

.jeu-clock {
    padding:
        12px;

    text-align:
        center;

    background:
        #111827;

    color:
        #ffffff;

    border-radius:
        10px;

    transition:
        var(--jeu-transition);
}

.jeu-clock.active {
    box-shadow:
        0 0 0 3px
        rgba(13, 110, 253, 0.15);
}

.jeu-clock.low-time {
    background:
        #842029;

    animation:
        jeu-clock-warning 1s infinite;
}

@keyframes jeu-clock-warning {

    50% {
        opacity:
            0.75;
    }

}

.jeu-clock-label {
    display:
        block;

    margin-bottom:
        4px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;
}

.jeu-clock-time {
    font-family:
        "Courier New",
        monospace;

    font-size:
        27px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


/* ============================================================
   MISE
   ============================================================ */

.jeu-bet {
    text-align:
        center;

    padding:
        13px;

    background:
        #fff8df;

    border:
        1px solid #ffecb5;

    border-radius:
        10px;
}

.jeu-bet-label {
    display:
        block;

    color:
        #664d03;

    font-size:
        10px;

    font-weight:
        700;
}

.jeu-bet-value {
    margin-top:
        4px;

    color:
        #997404;

    font-size:
        22px;

    font-weight:
        800;
}

.jeu-bet-currency {
    font-size:
        11px;

    font-weight:
        700;
}


/* ============================================================
   PLATEAU
   ============================================================ */

.jeu-board-wrapper {
    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    padding:
        12px;

    background:
        var(--jeu-card);

    border:
        1px solid var(--jeu-border);

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

    box-shadow:
        var(--jeu-shadow);

    box-sizing:
        border-box;
}

.jeu-board {
    position:
        relative;

    width:
        min(100%, 720px);

    aspect-ratio:
        1 / 1;

    display:
        grid;

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

    grid-template-rows:
        repeat(8, 1fr);

    border:
        7px solid var(--board-border);

    border-radius:
        5px;

    overflow:
        hidden;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.18);
}


/* ============================================================
   CASES
   ============================================================ */

.jeu-cell {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    aspect-ratio:
        1 / 1;

    cursor:
        pointer;

    user-select:
        none;

    -webkit-user-select:
        none;

    transition:
        background 0.15s ease;
}

.jeu-cell.light {
    background:
        var(--board-light);
}

.jeu-cell.dark {
    background:
        var(--board-dark);
}

.jeu-cell:hover {
    filter:
        brightness(1.08);
}

.jeu-cell.disabled {
    cursor:
        default;
}


/* ============================================================
   COORDONNÉES
   ============================================================ */

.jeu-cell-coordinate {
    position:
        absolute;

    pointer-events:
        none;

    font-size:
        clamp(7px, 1vw, 11px);

    font-weight:
        700;

    opacity:
        0.65;
}

.jeu-cell-coordinate.rank {
    left:
        4px;

    top:
        2px;
}

.jeu-cell-coordinate.file {
    right:
        4px;

    bottom:
        2px;
}

.jeu-cell.light .jeu-cell-coordinate {
    color:
        #8b6a48;
}

.jeu-cell.dark .jeu-cell-coordinate {
    color:
        #f0d9b5;
}


/* ============================================================
   CASE SÉLECTIONNÉE
   ============================================================ */

.jeu-cell.selected {
    box-shadow:
        inset 0 0 0 5px
        var(--selected);
}

.jeu-cell.last-move {
    background:
        rgba(255, 212, 59, 0.45);
}


/* ============================================================
   COUPS POSSIBLES
   ============================================================ */

.jeu-cell.possible-move::after {
    content:
        "";

    position:
        absolute;

    width:
        24%;

    height:
        24%;

    border-radius:
        50%;

    background:
        var(--possible);

    box-shadow:
        0 2px 5px
        rgba(0, 0, 0, 0.15);
}

.jeu-cell.possible-capture::after {
    content:
        "";

    position:
        absolute;

    inset:
        10%;

    border:
        4px solid
        var(--capture);

    border-radius:
        50%;

    background:
        transparent;
}


/* ============================================================
   PIÈCES
   ============================================================ */

.jeu-piece {
    position:
        relative;

    width:
        78%;

    height:
        78%;

    border-radius:
        50%;

    z-index:
        3;

    cursor:
        pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.jeu-piece:hover {
    transform:
        scale(1.05);
}

.jeu-piece-white {
    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #f5f5f5 45%,
            #d5d5d5 100%
        );

    border:
        3px solid
        var(--piece-light-border);

    box-shadow:
        inset 0 -5px 0 rgba(0, 0, 0, 0.08),
        0 4px 5px rgba(0, 0, 0, 0.25);
}

.jeu-piece-black {
    background:
        radial-gradient(
            circle at 35% 30%,
            #555555 0%,
            #292929 45%,
            #111111 100%
        );

    border:
        3px solid
        var(--piece-dark-border);

    box-shadow:
        inset 0 -5px 0 rgba(255, 255, 255, 0.05),
        0 4px 5px rgba(0, 0, 0, 0.35);
}


/* ============================================================
   DAME / COURONNE
   ============================================================ */

.jeu-piece.king::after {
    content:
        "♛";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        45%;

    font-weight:
        900;

    color:
        #d4a017;

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, 0.6);
}

.jeu-piece-white.king::after {
    color:
        #b8860b;
}

.jeu-piece-black.king::after {
    color:
        #ffd43b;
}


/* ============================================================
   PIÈCE SÉLECTIONNÉE
   ============================================================ */

.jeu-piece.selected {
    transform:
        scale(1.08);

    box-shadow:
        0 0 0 4px
        rgba(255, 212, 59, 0.8),
        0 5px 10px
        rgba(0, 0, 0, 0.3);
}


/* ============================================================
   ANIMATION DÉPLACEMENT
   ============================================================ */

.jeu-piece.moving {
    animation:
        jeu-piece-move 0.22s ease;
}

@keyframes jeu-piece-move {

    0% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);
    }

}


/* ============================================================
   CAPTURE
   ============================================================ */

.jeu-piece.captured {
    animation:
        jeu-piece-captured 0.25s ease forwards;
}

@keyframes jeu-piece-captured {

    0% {
        transform:
            scale(1);

        opacity:
            1;
    }

    100% {
        transform:
            scale(0);

        opacity:
            0;
    }

}


/* ============================================================
   INDICATEUR DE CAPTURE
   ============================================================ */

.jeu-capture-indicator {
    position:
        absolute;

    top:
        8px;

    right:
        8px;

    min-width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--jeu-danger);

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;

    z-index:
        10;
}


/* ============================================================
   INFORMATION PARTIE
   ============================================================ */

.jeu-status {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        40px;

    padding:
        8px 12px;

    margin-bottom:
        12px;

    background:
        var(--jeu-card);

    border:
        1px solid var(--jeu-border);

    border-radius:
        9px;

    color:
        var(--jeu-muted);

    font-size:
        12px;

    font-weight:
        700;
}

.jeu-status.playing {
    background:
        #eaf7f0;

    border-color:
        #badbcc;

    color:
        #146c43;
}

.jeu-status.waiting {
    background:
        #fff8df;

    border-color:
        #ffecb5;

    color:
        #664d03;
}

.jeu-status.finished {
    background:
        #eef4ff;

    border-color:
        #dbe7ff;

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

.jeu-status-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        currentColor;
}


/* ============================================================
   BARRE DE CONTRÔLE
   ============================================================ */

.jeu-controls {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        14px;
}

.jeu-control-btn {
    min-width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--jeu-border);

    border-radius:
        8px;

    background:
        var(--jeu-card);

    color:
        #374151;

    cursor:
        pointer;

    transition:
        var(--jeu-transition);
}

.jeu-control-btn:hover {
    background:
        #f3f4f6;

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

.jeu-control-btn:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;
}


/* ============================================================
   HISTORIQUE DES COUPS
   ============================================================ */

.jeu-moves {
    max-height:
        360px;

    overflow-y:
        auto;

    scrollbar-width:
        thin;
}

.jeu-moves::-webkit-scrollbar {
    width:
        5px;
}

.jeu-moves::-webkit-scrollbar-thumb {
    background:
        #cbd5e1;

    border-radius:
        20px;
}

.jeu-move {
    display:
        grid;

    grid-template-columns:
        35px 1fr 1fr;

    align-items:
        center;

    min-height:
        38px;

    border-bottom:
        1px solid #edf0f3;

    font-size:
        11px;
}

.jeu-move:last-child {
    border-bottom:
        0;
}

.jeu-move-number {
    color:
        var(--jeu-muted);

    font-weight:
        700;
}

.jeu-move-value {
    font-family:
        "Courier New",
        monospace;

    font-weight:
        700;
}

.jeu-move.current {
    background:
        #eef4ff;

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


/* ============================================================
   CAPTURES
   ============================================================ */

.jeu-captures {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        4px;
}

.jeu-captured-piece {
    width:
        24px;

    height:
        24px;

    border-radius:
        50%;

    box-shadow:
        0 2px 3px
        rgba(0, 0, 0, 0.2);
}

.jeu-captured-piece.white {
    background:
        #f8f9fa;

    border:
        2px solid #c7cbd1;
}

.jeu-captured-piece.black {
    background:
        #242424;

    border:
        2px solid #000000;
}


/* ============================================================
   SCORE
   ============================================================ */

.jeu-score {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}

.jeu-score-item {
    padding:
        12px;

    text-align:
        center;

    background:
        #f8fafc;

    border-radius:
        9px;
}

.jeu-score-value {
    font-size:
        21px;

    font-weight:
        800;
}

.jeu-score-label {
    margin-top:
        3px;

    color:
        var(--jeu-muted);

    font-size:
        10px;
}


/* ============================================================
   CHAT
   ============================================================ */

.jeu-chat {
    display:
        flex;

    flex-direction:
        column;

    height:
        330px;
}

.jeu-chat-messages {
    flex:
        1;

    overflow-y:
        auto;

    padding:
        10px;

    background:
        #f8fafc;
}

.jeu-chat-message {
    max-width:
        82%;

    margin-bottom:
        8px;

    padding:
        7px 10px;

    border-radius:
        10px;

    font-size:
        11px;

    line-height:
        1.4;
}

.jeu-chat-message.me {
    margin-left:
        auto;

    background:
        var(--jeu-primary);

    color:
        #ffffff;

    border-bottom-right-radius:
        3px;
}

.jeu-chat-message.opponent {
    margin-right:
        auto;

    background:
        #e9ecef;

    color:
        #374151;

    border-bottom-left-radius:
        3px;
}

.jeu-chat-input {
    display:
        flex;

    gap:
        7px;

    padding:
        9px;

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

.jeu-chat-input input {
    flex:
        1;

    min-width:
        0;

    height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid var(--jeu-border);

    border-radius:
        8px;

    outline:
        none;

    font-size:
        11px;
}

.jeu-chat-input input:focus {
    border-color:
        var(--jeu-primary);
}


/* ============================================================
   MODAL FIN DE PARTIE
   ============================================================ */

.jeu-result-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(15, 23, 42, 0.72);

    backdrop-filter:
        blur(4px);
}

.jeu-result-modal {
    width:
        100%;

    max-width:
        440px;

    padding:
        30px;

    background:
        #ffffff;

    border-radius:
        16px;

    text-align:
        center;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.25);

    animation:
        jeu-result-in 0.3s ease;
}

@keyframes jeu-result-in {

    from {
        opacity:
            0;

        transform:
            translateY(15px)
            scale(0.97);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}

.jeu-result-icon {
    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    background:
        #eaf7f0;

    color:
        var(--jeu-success);

    font-size:
        30px;
}

.jeu-result-icon.defeat {
    background:
        #fff0f1;

    color:
        var(--jeu-danger);
}

.jeu-result-icon.draw {
    background:
        #fff8df;

    color:
        #997404;
}

.jeu-result-title {
    margin:
        0;

    font-size:
        23px;

    font-weight:
        800;
}

.jeu-result-text {
    margin:
        7px 0 0;

    color:
        var(--jeu-muted);

    font-size:
        13px;
}

.jeu-result-gain {
    margin:
        18px 0;

    font-size:
        24px;

    font-weight:
        800;

    color:
        var(--jeu-success);
}

.jeu-result-actions {
    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    flex-wrap:
        wrap;

    margin-top:
        20px;
}


/* ============================================================
   NOTIFICATION DANS LE JEU
   ============================================================ */

.jeu-notification {
    position:
        fixed;

    top:
        20px;

    left:
        50%;

    z-index:
        10000;

    min-width:
        280px;

    max-width:
        450px;

    padding:
        12px 15px;

    transform:
        translateX(-50%)
        translateY(-100px);

    opacity:
        0;

    background:
        #111827;

    color:
        #ffffff;

    border-radius:
        9px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.2);

    font-size:
        12px;

    font-weight:
        700;

    transition:
        all 0.3s ease;
}

.jeu-notification.show {
    transform:
        translateX(-50%)
        translateY(0);

    opacity:
        1;
}

.jeu-notification.success {
    background:
        var(--jeu-success);
}

.jeu-notification.error {
    background:
        var(--jeu-danger);
}

.jeu-notification.warning {
    background:
        #997404;
}


/* ============================================================
   ATTENTE ADVERSAIRE
   ============================================================ */

.jeu-waiting {
    min-height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}

.jeu-waiting-spinner {
    width:
        40px;

    height:
        40px;

    margin-bottom:
        14px;

    border:
        4px solid #e9ecef;

    border-top-color:
        var(--jeu-primary);

    border-radius:
        50%;

    animation:
        jeu-spin 0.8s linear infinite;
}

@keyframes jeu-spin {

    to {
        transform:
            rotate(360deg);
    }

}

.jeu-waiting-title {
    font-size:
        15px;

    font-weight:
        800;
}

.jeu-waiting-text {
    margin-top:
        5px;

    color:
        var(--jeu-muted);

    font-size:
        11px;
}


/* ============================================================
   RESPONSIVE TABLETTE
   ============================================================ */

@media (max-width: 1200px) {

    .jeu-layout {
        grid-template-columns:
            220px
            minmax(450px, 650px)
            220px;

        gap:
            12px;
    }

    .jeu-wrapper {
        padding:
            15px;
    }

}


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 1000px) {

    .jeu-layout {
        grid-template-columns:
            1fr 1fr;
    }

    .jeu-main {
        grid-column:
            1 / -1;

        grid-row:
            1;
    }

    .jeu-sidebar.left {
        grid-column:
            1;

        grid-row:
            2;
    }

    .jeu-sidebar.right {
        grid-column:
            2;

        grid-row:
            2;
    }

    .jeu-board {
        width:
            min(100%, 700px);
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .jeu-wrapper {
        padding:
            8px;
    }

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

        flex-direction:
            column;

        margin-bottom:
            10px;
    }

    .jeu-title {
        font-size:
            19px;
    }

    .jeu-header-actions {
        width:
            100%;
    }

    .jeu-header-actions .jeu-btn {
        flex:
            1;
    }

    .jeu-layout {
        display:
            flex;

        flex-direction:
            column;

        gap:
            10px;
    }

    .jeu-main {
        order:
            1;

        width:
            100%;
    }

    .jeu-sidebar.left {
        order:
            2;

        width:
            100%;
    }

    .jeu-sidebar.right {
        order:
            3;

        width:
            100%;
    }

    .jeu-board-wrapper {
        padding:
            5px;

        border-radius:
            10px;
    }

    .jeu-board {
        border-width:
            4px;
    }

    .jeu-piece {
        width:
            76%;

        height:
            76%;

        border-width:
            2px;
    }

    .jeu-cell.selected {
        box-shadow:
            inset 0 0 0 3px
            var(--selected);
    }

    .jeu-card-body {
        padding:
            12px;
    }

    .jeu-clock-time {
        font-size:
            23px;
    }

    .jeu-chat {
        height:
            280px;
    }

}


/* ============================================================
   PETIT MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .jeu-wrapper {
        padding:
            5px;
    }

    .jeu-title {
        font-size:
            17px;
    }

    .jeu-subtitle {
        font-size:
            10px;
    }

    .jeu-board-wrapper {
        padding:
            3px;

        border-radius:
            7px;
    }

    .jeu-board {
        border-width:
            3px;
    }

    .jeu-cell-coordinate {
        display:
            none;
    }

    .jeu-piece {
        width:
            72%;

        height:
            72%;
    }

    .jeu-piece.king::after {
        font-size:
            40%;
    }

    .jeu-cell.possible-move::after {
        width:
            20%;

        height:
            20%;
    }

    .jeu-cell.possible-capture::after {
        inset:
            12%;

        border-width:
            2px;
    }

    .jeu-result-modal {
        padding:
            24px 18px;
    }

}


/* ============================================================
   TRÈS PETIT MOBILE
   ============================================================ */

@media (max-width: 360px) {

    .jeu-wrapper {
        padding:
            2px;
    }

    .jeu-board {
        border-width:
            2px;
    }

    .jeu-card-header {
        padding:
            10px 12px;
    }

    .jeu-card-body {
        padding:
            10px;
    }

    .jeu-btn {
        min-height:
            36px;

        padding:
            7px 10px;

        font-size:
            11px;
    }

}


/* ============================================================
   MODE SOMBRE
   ============================================================ */

body.jeu-dark {
    --jeu-bg: #0f172a;
    --jeu-card: #111827;
    --jeu-text: #f3f4f6;
    --jeu-muted: #9ca3af;
    --jeu-border: #374151;
}

body.jeu-dark .jeu-btn-light,
body.jeu-dark .jeu-control-btn {
    background:
        #1f2937;

    color:
        #e5e7eb;

    border-color:
        #4b5563;
}

body.jeu-dark .jeu-status,
body.jeu-dark .jeu-turn,
body.jeu-dark .jeu-score-item {
    background:
        #1f2937;
}

body.jeu-dark .jeu-move {
    border-bottom-color:
        #374151;
}

body.jeu-dark .jeu-move.current {
    background:
        #172554;
}

body.jeu-dark .jeu-chat-messages {
    background:
        #1f2937;
}

body.jeu-dark .jeu-chat-message.opponent {
    background:
        #374151;

    color:
        #f3f4f6;
}


/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */

.jeu-body button:focus-visible,
.jeu-body a:focus-visible {
    outline:
        3px solid
        rgba(13, 110, 253, 0.35);

    outline-offset:
        2px;
}


/* ============================================================
   RÉDUCTION DES ANIMATIONS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}


/* ============================================================
   IMPRESSION
   ============================================================ */

@media print {

    .jeu-header-actions,
    .jeu-controls,
    .jeu-chat,
    .no-print {
        display:
            none !important;
    }

    .jeu-wrapper {
        padding:
            0;
    }

    .jeu-layout {
        display:
            block;
    }

    .jeu-sidebar {
        display:
            none;
    }

    .jeu-board-wrapper {
        box-shadow:
            none;

        border:
            0;
    }

}


/* ============================================================
   FIN jeu.css
   ============================================================ */