/* Socle des jeux Gromonde : barre, menus (Start / Classement / Paramètres), fin de partie. */
:root {
    --g-fond: #eef1f6;
    --g-carte: #ffffff;
    --g-carte-2: #f3f5f9;
    --g-texte: #141823;
    --g-doux: #65676b;
    --g-bord: #dfe3ea;
    --g-accent: #1877f2;
    --g-accent-2: #7c3aed;
    --g-vert: #16a34a;
    --g-rouge: #e0245e;
    --g-or: #e8a800;
    --g-ombre: 0 8px 30px rgba(15, 23, 42, .18);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) {
        --g-fond: #0f1115; --g-carte: #1a1d23; --g-carte-2: #23272f; --g-texte: #e8eaed; --g-doux: #9aa0a6;
        --g-bord: #2e333b; --g-accent: #4c9aff; --g-ombre: 0 8px 30px rgba(0, 0, 0, .5); color-scheme: dark;
    }
}
:root[data-theme="sombre"] {
    --g-fond: #0f1115; --g-carte: #1a1d23; --g-carte-2: #23272f; --g-texte: #e8eaed; --g-doux: #9aa0a6;
    --g-bord: #2e333b; --g-accent: #4c9aff; --g-ombre: 0 8px 30px rgba(0, 0, 0, .5); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--g-fond); color: var(--g-texte);
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
    touch-action: manipulation;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.gm-app { position: relative; height: 100%; display: flex; flex-direction: column; }
.gm-barre {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 10px;
    padding-top: max(6px, env(safe-area-inset-top));
    background: var(--g-carte); border-bottom: 1px solid var(--g-bord); min-height: 46px;
}
.gm-titre { font-size: 15px; white-space: nowrap; }
.gm-titre i { color: var(--g-accent); }
.gm-statut { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--g-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-classe { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--g-carte-2); color: var(--g-doux); white-space: nowrap; }
.gm-classe.oui { background: rgba(22, 163, 74, .15); color: var(--g-vert); }
.gm-icone {
    width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--g-carte-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.gm-icone:hover { background: var(--g-bord); }
.gm-zone { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Écrans par-dessus le jeu */
.gm-ecran {
    position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(15, 17, 21, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    overflow-y: auto; animation: gm-apparait .18s ease;
}
@keyframes gm-apparait { from { opacity: 0; } }
.gm-carte {
    width: 100%; max-width: 380px; margin: auto; background: var(--g-carte); border-radius: 20px; padding: 22px 20px;
    box-shadow: var(--g-ombre); text-align: center; display: flex; flex-direction: column; gap: 10px;
}
.gm-carte.large { max-width: 460px; }
.gm-carte h1 { margin: 4px 0 0; font-size: 26px; }
.gm-carte h2 { margin: 0 0 4px; font-size: 20px; }
.gm-carte h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--g-doux); }
.gm-logo {
    width: 84px; height: 84px; margin: 0 auto; border-radius: 22px; display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: #fff; background: linear-gradient(135deg, var(--g-accent), var(--g-accent-2));
    box-shadow: 0 6px 20px rgba(24, 119, 242, .35);
}
.gm-joueur { margin: 0; font-size: 13px; color: var(--g-doux); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.gm-joueur img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.gm-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.gm-bouton {
    border: 0; border-radius: 14px; padding: 13px 16px; font-weight: 700; font-size: 16px; cursor: pointer;
    background: var(--g-carte-2); display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform .1s, background .15s;
}
.gm-bouton:active { transform: scale(.97); }
.gm-bouton:hover { background: var(--g-bord); }
.gm-bouton.principal { background: var(--g-accent); color: #fff; }
.gm-bouton.principal:hover { filter: brightness(1.08); background: var(--g-accent); }
.gm-bouton.petit { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.gm-lien { border: 0; background: none; color: var(--g-doux); cursor: pointer; padding: 8px; font-size: 14px; }
.gm-lien:hover { color: var(--g-texte); }
.gm-aide { margin: 0; font-size: 12.5px; color: var(--g-doux); line-height: 1.45; }

.gm-choix { display: grid; gap: 8px; }
.gm-choix button {
    display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
    border: 2px solid var(--g-bord); background: var(--g-carte);
}
.gm-choix button i { font-size: 22px; width: 30px; text-align: center; color: var(--g-accent); }
.gm-choix button small { display: block; color: var(--g-doux); font-size: 12px; margin-top: 2px; }
.gm-choix button.actif { border-color: var(--g-accent); background: rgba(24, 119, 242, .08); }

.gm-segments { display: flex; background: var(--g-carte-2); border-radius: 12px; padding: 3px; gap: 3px; }
.gm-segments button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--g-doux); }
.gm-segments button.actif { background: var(--g-carte); color: var(--g-texte); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.gm-classement { list-style: none; margin: 0; padding: 0; text-align: left; max-height: 50vh; overflow-y: auto; }
.gm-classement li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--g-bord); }
.gm-classement li.moi { background: rgba(24, 119, 242, .08); border-radius: 10px; }
.gm-classement .rang { width: 30px; text-align: center; font-weight: 800; color: var(--g-doux); }
.gm-classement li:nth-child(1) .rang { color: var(--g-or); }
.gm-classement li:nth-child(2) .rang { color: #9ca3af; }
.gm-classement li:nth-child(3) .rang { color: #b45309; }
.gm-classement img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--g-carte-2); }
.gm-classement .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gm-classement .nom small { display: block; font-weight: 400; color: var(--g-doux); font-size: 12px; }
.gm-classement .valeur { font-weight: 800; white-space: nowrap; }
.gm-classement .vide { justify-content: center; color: var(--g-doux); border: 0; padding: 20px; text-align: center; }
.gm-moi { margin: 0; font-size: 14px; font-weight: 600; }

.gm-interrupteur {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
    background: var(--g-carte-2); border-radius: 14px; cursor: pointer; font-weight: 600;
}
.gm-interrupteur span i { width: 22px; color: var(--g-accent); }
.gm-interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.gm-interrupteur > i { position: relative; width: 46px; height: 26px; border-radius: 99px; background: var(--g-bord); transition: background .2s; flex: 0 0 auto; }
.gm-interrupteur > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.gm-interrupteur input:checked + i { background: var(--g-vert); }
.gm-interrupteur input:checked + i::after { transform: translateX(20px); }
.gm-interrupteur input:focus-visible + i { outline: 2px solid var(--g-accent); outline-offset: 2px; }

.gm-fin-icone { font-size: 54px; }
.gm-fin-icone.gagne { color: var(--g-or); }
.gm-fin-icone.perdu { color: var(--g-rouge); }
.gm-fin-icone.nul { color: var(--g-doux); }

.gm-toast {
    position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80;
    background: #111827; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: 90%;
    box-shadow: var(--g-ombre); text-align: center; animation: gm-apparait .2s ease;
}

/* Outils communs aux plateaux */
.gm-panneau { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 8px; }
.gm-joueurs { display: flex; gap: 8px; padding: 8px 10px 0; justify-content: center; }
.gm-pj {
    flex: 1; max-width: 220px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px;
    background: var(--g-carte); border: 2px solid transparent; font-size: 13px; min-width: 0;
}
.gm-pj.actif { border-color: var(--g-accent); }
.gm-pj strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-pj b { font-size: 16px; }