/*
 * Charte reprise du gabarit WEBDEV « 270 Night City » / palette « Night Orange ».
 * Couleurs relevées au pixel sur les captures d'écran (ANALYSE §6.2.5) : le gabarit
 * lui-même n'est pas réutilisable hors de WEBDEV.
 */

:root {
    --fond: #0D0C11;
    --saisie: #323234;
    --texte: #F5F5F7;
    --rejoindre: #F59E0B;
    --touche-a: #268000;
    --touche-b: #FF0000;
    --touche-c: #FFFFFF;
    --touche-d: #FFDA26;
    --touche-pouce: #94C120;
    --contour: #C8C8C8;
    --selection: #22D3EE;
    --erreur: #FF6B6B;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--fond);
    color: var(--texte);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Évite le zoom au double-tap et la sélection de texte parasite sur les touches. */
body {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* ─── Télécommande ──────────────────────────────────────────────────────────── */

.buzzer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 420px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.buzzer__logo img {
    display: block;
    width: min(304px, 80vw);
    height: auto;
}

.buzzer__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 320px;
}

.buzzer__form label {
    display: grid;
    grid-template-columns: 68px 1fr;
    align-items: center;
    gap: 0.75rem;
}

.buzzer__form input {
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--saisie);
    color: var(--texte);
    font-size: 1rem;
}

.buzzer__form input:focus-visible {
    outline: 2px solid var(--rejoindre);
    outline-offset: 1px;
}

.buzzer__form input:disabled {
    opacity: 0.7;
}

.buzzer__join {
    align-self: center;
    min-width: 160px;
    min-height: 44px;
    margin-top: 0.5rem;
    border: none;
    border-radius: 999px;
    background: var(--rejoindre);
    color: #1a1200;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.buzzer__join:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* ─── Touches du boîtier ────────────────────────────────────────────────────── */

.buzzer__keys {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.key-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 1.75rem 2.5rem;
}

.key {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    padding: 0;
    border: 4px solid var(--contour);
    border-radius: 50%;
    color: #000;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    /* Transition sur box-shadow seulement : évite tout recalcul de mise en page
       pendant qu'un joueur martèle les touches. */
    transition: box-shadow 120ms ease-out, transform 80ms ease-out;
}

.key:active {
    transform: scale(0.96);
}

.key--a { background: var(--touche-a); color: #fff; }
.key--b { background: var(--touche-b); color: #fff; }
.key--c { background: var(--touche-c); }
.key--d { background: var(--touche-d); }

.key--thumb {
    background: var(--touche-pouce);
    border-color: var(--touche-pouce);
}

.key__thumb {
    font-size: 3rem;
}

/*
 * Anneau de sélection — remplace le champ IMG_SEL que le WLangage repositionnait et
 * redimensionnait à chaque clic. Une classe posée 3 s donne le même rendu sans
 * manipuler la géométrie (ANALYSE §6.2.6).
 */
.key--selected {
    box-shadow: 0 0 0 6px var(--fond), 0 0 0 12px var(--selection);
}

.buzzer__notice {
    max-width: 320px;
    margin: 0;
    color: var(--rejoindre);
    text-align: center;
    font-size: 0.95rem;
}

.buzzer__leave {
    min-height: 40px;
    padding: 0 1.25rem;
    border: 1px solid var(--contour);
    border-radius: 999px;
    background: transparent;
    color: var(--texte);
    cursor: pointer;
}

.buzzer__error {
    max-width: 320px;
    margin: 0;
    color: var(--erreur);
    text-align: center;
}

/* ─── Console d'animation ───────────────────────────────────────────────────── */

.console {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.console h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

.console__endpoint {
    margin: 0 0 1rem;
    color: #9aa0a6;
    font-size: 0.9rem;
}

.console__toolbar,
.console__keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.console input {
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid #3a3a3d;
    border-radius: 6px;
    background: var(--saisie);
    color: var(--texte);
}

.console button {
    min-height: 36px;
    padding: 0 0.9rem;
    border: none;
    border-radius: 6px;
    background: var(--rejoindre);
    color: #1a1200;
    font-weight: 600;
    cursor: pointer;
}

.console button:disabled {
    background: #3a3a3d;
    color: #8a8a8f;
    cursor: not-allowed;
}

.console__session {
    margin: 0 0 1rem;
}

.console__badge {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--touche-pouce);
    color: #0b1400;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.console__error {
    color: var(--erreur);
}

.console__log {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.console__log th,
.console__log td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #26262b;
    text-align: left;
}

.console__log th {
    color: #9aa0a6;
    font-weight: 600;
}

.console__log td:first-child {
    width: 11rem;
    color: #9aa0a6;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ─── Petits écrans ─────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
    .key {
        width: 96px;
        height: 96px;
        font-size: 2.25rem;
    }

    .key-grid {
        gap: 1.25rem 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .key {
        transition: none;
    }
}