* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --red: #FF0A0A;
    --red-dark: #B00000;
    --bg: #0A0A0A;
    --panel: #121212;
    --line: #262626;
    --text: #EDEDED;
    --muted: #8A8A8A;
}

html, body { height: 100%; }

body {
    background: radial-gradient(ellipse at top, #1a0505 0%, var(--bg) 60%);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.back {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 30;
    color: var(--muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(10, 10, 10, .8);
}

.back:hover { color: #fff; border-color: var(--red); }

.game {
    display: grid;
    grid-template-columns: 150px auto 150px;
    gap: 20px;
    align-items: start;
}

/* Panneaux */
.panel { display: flex; flex-direction: column; gap: 14px; }

.box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.box h3 {
    font-size: .68rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mini { display: block; margin: 0 auto; }

.stats { display: grid; gap: 10px; }
.stats span, .topbar span {
    display: block;
    font-size: .62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}

.stats strong {
    font-family: Orbitron, Inter, sans-serif;
    font-size: 1.3rem;
    color: #fff;
}

.keys { text-align: left; font-size: .76rem; color: var(--muted); line-height: 2; }
.keys h3 { justify-content: flex-start; }

kbd {
    display: inline-block;
    min-width: 20px;
    padding: 0 5px;
    margin-right: 4px;
    border: 1px solid #333;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #1A1A1A;
    color: #ddd;
    font: 600 .68rem Inter, sans-serif;
    text-align: center;
    line-height: 1.6;
}

/* Plateau */
.board-wrap {
    position: relative;
    border: 2px solid var(--red);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 10, 10, .2), 0 0 40px rgba(255, 10, 10, .15);
    background: #060606;
    touch-action: none;
}

#board { display: block; }

.popup {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    text-align: center;
    font-family: Orbitron, Inter, sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 18px var(--red);
    pointer-events: none;
    opacity: 0;
}

.popup.show { animation: pop 1s ease-out; }

@keyframes pop {
    0% { opacity: 0; transform: translateY(10px) scale(.9); }
    15% { opacity: 1; transform: translateY(0) scale(1.05); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-24px); }
}

.overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: rgba(6, 6, 6, .86);
    text-align: center;
}

.overlay.hidden { display: none; }

.overlay h1 {
    font-family: Orbitron, Inter, sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: 6px;
    color: #fff;
    text-shadow: 0 0 22px rgba(255, 10, 10, .6);
}

.overlay h2 {
    font-family: Orbitron, Inter, sans-serif;
    font-size: 1.6rem;
    letter-spacing: 3px;
    color: var(--red);
}

.overlay__best, .overlay__detail { color: var(--muted); font-size: .9rem; }
.overlay__best strong { color: #fff; }
.overlay__score { font-size: 1.1rem; }
.overlay__score strong { font-family: Orbitron, sans-serif; font-size: 1.5rem; color: #fff; }
.overlay__record { color: #FFD24A; font-weight: 700; }
.overlay__record.hidden { display: none; }

.btn {
    min-width: 170px;
    padding: 12px 20px;
    border: 1px solid #3A3A3A;
    border-radius: 10px;
    background: #181818;
    color: var(--text);
    font: 700 .9rem Inter, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .1s, border-color .15s;
}

.btn:hover { border-color: var(--red); }
.btn:active { transform: scale(.97); }
.btn--primary { background: linear-gradient(135deg, var(--red), var(--red-dark)); border-color: var(--red); color: #fff; }
.btn--small { min-width: 0; padding: 10px; font-size: .78rem; }

.hint { font-size: .76rem; color: var(--muted); max-width: 240px; line-height: 1.5; }
.hint--touch { display: none; }

/* Mobile */
.topbar, .touch { display: none; }

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    body { align-items: flex-start; padding: 54px 10px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }

    .game {
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        max-width: 420px;
        justify-items: center;
    }

    .panel { display: none; }

    .topbar {
        display: flex;
        width: 100%;
        align-items: stretch;
        gap: 8px;
    }

    .topbar__mini {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 10px;
        color: inherit;
        font: inherit;
    }

    .topbar__stats {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 10px;
        text-align: center;
    }

    .topbar__stats strong { font-family: Orbitron, Inter, sans-serif; font-size: 1.05rem; color: #fff; }

    .touch {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 58px 50px;
        gap: 8px;
    }

    .t-btn {
        border: 1px solid #333;
        border-radius: 12px;
        background: #151515;
        color: var(--red);
        font: 700 1.3rem Inter, sans-serif;
        touch-action: none;
    }

    .t-btn.is-pressed { background: rgba(255, 10, 10, .22); border-color: var(--red); }
    .t-btn--accent { background: rgba(255, 10, 10, .12); border-color: rgba(255, 10, 10, .5); }
    .t-btn--wide { grid-column: span 3; font-size: .9rem; letter-spacing: 2px; color: #fff; }

    .hint--desktop { display: none; }
    .hint--touch { display: block; }
}