/* ==========================================================================
   game_shell.css — coque commune de l'écran de jeu
   --------------------------------------------------------------------------
   Objectif : en partie, l'écran appartient au jeu. L'en-tête reste fixe en
   haut, le plateau occupe tout le reste et défile EN INTERNE (la page, elle,
   ne défile plus). Les encoches et la barre gestuelle sont respectées.

   Ce fichier est chargé APRÈS les CSS de chaque jeu : il ne redessine aucun
   plateau, il cadre. Chaque jeu garde son plateau, ses dimensions internes et
   son identité — on ne les harmonise pas, ce serait les appauvrir.

   Zones standard, pour les jeux à venir (facultatives) :
     .board-zone.board-opponents   adversaires (bande haute)
     .board-zone.board-table       table / défausse / pioche (centre)
     .board-zone.board-self        ma main / mes dés / mes boutons (bande basse)
   ========================================================================== */

:root {
    /* Hauteur de la coque de jeu.
       100svh = la PLUS PETITE hauteur visible (barre d'URL affichée). Avec
       100dvh, la coque prenait la hauteur « barre masquée » : sur un vrai
       téléphone, la dernière rangée (barre d'action) passait sous la barre du
       navigateur — visible à moitié, et incliquable. On budgète toujours sur
       le plus petit écran réel, comme pour les largeurs.
       100vh reste le repli des navigateurs sans svh. */
    --vh-game: 100vh;
    --vh-game: 100svh;
}

/* --------------------------------------------------------------------------
   1. La page ne défile plus en partie : c'est le plateau qui défile.
   Il faut verrouiller les DEUX éléments : en mode standard, c'est <html> qui
   porte le défilement — overflow:hidden sur body seul laissait glisser la page.
   -------------------------------------------------------------------------- */
html.in-game-root {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

html.in-game-root body.in-game {
    height: 100%;
    max-height: 100%;
}
body.in-game {
    display: flex;
    flex-direction: column;
    height: var(--vh-game);
    max-height: var(--vh-game);
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.in-game #game-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 60;
    padding-top: env(safe-area-inset-top);
}

/* Le conteneur global devient une colonne pleine largeur (fini le max-width
   de lecture qui rognait les plateaux sur grand écran). */
body.in-game > .container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* La vue de jeu occupe tout l'espace restant et défile en interne.
   C'est aussi elle qui reçoit le contenu des jeux : plusieurs jeux remplacent
   son innerHTML, d'où le ciblage de #view-game et non d'un enfant. */
body.in-game #view-game {
    flex: 1 1 auto;
    min-height: 0;
    /* Repere pour les plateaux en position absolue (Palace, Traitres) */
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    scrollbar-width: thin;
}

/* Le salon d'attente n'a pas besoin de défiler : il est centré. */
body.in-game #view-waiting-room {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}

/* --------------------------------------------------------------------------
   2. Zones standard (facultatif : les jeux existants ont leur propre plateau)
   -------------------------------------------------------------------------- */
.board-zone {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.board-opponents {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.board-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-self {
    flex: 0 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
}

/* --------------------------------------------------------------------------
   3. Garde d'orientation
   Certains jeux (plateaux larges) ne sont jouables qu'en paysage. Sur un
   téléphone en portrait, on n'affiche pas un plateau illisible : on demande
   de tourner l'appareil, avec une animation qui montre le geste.
   -------------------------------------------------------------------------- */
.orientation-gate {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 12, 22, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: center;
    animation: gate-in 220ms ease-out;
}

.orientation-gate[hidden] {
    display: none;
}

@keyframes gate-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.orientation-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 340px;
}

.orientation-phone {
    width: 74px;
    height: 128px;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    position: relative;
    animation: phone-turn 2.4s ease-in-out infinite;
    transform-origin: center;
}

.orientation-phone::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.55);
}

@keyframes phone-turn {
    0%, 22%   { transform: rotate(0deg); }
    48%, 72%  { transform: rotate(90deg); }
    100%      { transform: rotate(0deg); }
}

.orientation-title {
    font-size: 1.15rem;
    font-weight: 650;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.orientation-hint {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    line-height: 1.45;
}

/* Respect de la préférence système : pas d'animation continue. */
@media (prefers-reduced-motion: reduce) {
    .orientation-phone { animation: none; transform: rotate(90deg); }
    .orientation-gate { animation: none; }
}

/* --------------------------------------------------------------------------
   4. Ajustements mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Pas de marge basse reservee ici : chaque plateau gere son propre espace.
       Les 84 px ajoutes precedemment volaient de la hauteur aux jeux de des. */

    /* La boîte de dés n'est plus fixée : voir dice_board.css. */
}

@media (orientation: landscape) and (max-height: 500px) {
    /* En paysage sur téléphone, la hauteur est rare : on récupère la marge. */
    body.in-game #game-header {
        padding-top: 0;
    }

    body.in-game #view-game {
        padding-bottom: env(safe-area-inset-bottom);
    }
}