/* ============================================================
   game-ux.css — Parcours commun aux jeux spiKto
   ============================================================
   Le patron mis au point sur 2viZu, factorisé pour les autres jeux :

     page de préparation (réglages, règles, aperçu, GO)
     → tutoriel au premier lancement
     → partie en plein écran (game-focus.js)

   La page ne sert qu'à préparer : un seul chemin de lecture, du haut
   vers le bas, qui aboutit à un unique bouton. Jouer se fait ailleurs.

   À inclure APRÈS style.css, et avec game-focus.js.
   ============================================================ */

:root {
    --gx-bleu: #0089D4;
    --gx-bleu-fonce: #00699f;
}

/* ---- Carte de préparation ---------------------------------- */

.setup-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 1.1rem 1rem 1.2rem;
}

/* Accès aux règles : porte la couleur du niveau, posée par le script.
   Les règles ne sont plus étalées sur la page, elles sont à un clic —
   dans le même tutoriel qu'au premier lancement, donc un seul contenu
   à tenir à jour. */
.btn-rules {
    display: block;
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-rules:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-rules:active { transform: translateY(0); }

.btn-go {
    display: block;
    width: 100%;
    background: linear-gradient(145deg, var(--gx-bleu), var(--gx-bleu-fonce));
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.85rem 1rem 0.75rem;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 137, 212, 0.3);
    transition: all 0.22s;
}

.btn-go:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 137, 212, 0.38); }
.btn-go:active { transform: translateY(0); }

.btn-go-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-top: 0.35rem;
}

/* ---- Vignette du paramétrage -------------------------------- */
/* Composée comme une figure : pastille de titre centrée sur le bord
   haut, contenu centré dessous. Petite, figée et non cliquable, pour se
   lire comme une illustration et non comme le jeu lui-même. */

.vignette {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 1.25rem 0.6rem 0.7rem;
    margin: 0.3rem 0 0.75rem;
    background: rgba(250, 247, 240, 0.9);
    border: 1.5px solid #e8dfd0;
    border-radius: 12px;
    pointer-events: none;
    user-select: none;
}

.vg-libelle {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #ece3d5;
    color: #8a7c69;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 50px;
    white-space: nowrap;
}

/* ---- Tutoriel au lancement ---------------------------------- */

.instr-overlay {
    position: fixed;
    inset: 0;
    z-index: 9050;
    background: rgba(35, 25, 45, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.instr-box {
    position: relative;      /* repère de la croix de fermeture */
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.3rem 1.2rem 1.1rem;
    text-align: center;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}

/* UNE PAGE, PRESQUE TOUT L'ÉCRAN, SANS DÉFILER. Sur téléphone la carte
   prend la place : la marge du calque se réduit, la hauteur permise monte,
   et c'est l'illustration qui cède si ça déborde (spiktoGameFocus
   .ajusterVisuel). Le texte, lui, ne bouge pas. */
@media (max-width: 600px) {
    .instr-overlay { padding: 0.45rem; }
    .instr-box { max-height: 97vh; padding: 1rem 0.8rem 0.9rem; border-radius: 16px; }
    .instr-text { font-size: 0.93rem; }
}

/* Une troisième sortie, en plus du clic hors du cadre et de « Compris » :
   c'est celle qu'on cherche d'instinct, en haut à droite. */
.instr-fermer {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #f4efe6;
    color: #8b7d6f;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.instr-fermer:hover { background: #e6ded1; color: #4a3f31; }

/* Le titre laisse la place à la croix */
.instr-step, .instr-title { padding-right: 2rem; }

.instr-step  { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #b3a795; }
.instr-title { font-size: 1.15rem; font-weight: 800; color: var(--gx-bleu); margin: 0.3rem 0 0.5rem; }
.instr-text  { font-size: 0.95rem; color: #555; line-height: 1.5; margin: 0 0 0.9rem; }

.instr-visuel {
    background: #faf7f0;
    border-radius: 14px;
    padding: 0.9rem 0.5rem;
    margin-bottom: 1rem;
    pointer-events: none;
}

.instr-dots { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1rem; }
.instr-dot  { width: 8px; height: 8px; border-radius: 50%; background: #e0d8cb; transition: all 0.2s; }
.instr-dot.on { background: var(--gx-bleu); transform: scale(1.3); }

.instr-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

.instr-actions button {
    flex: 1 1 130px;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    min-height: 46px;
}

.instr-next { background: #fff; color: #6b5c4a; border: 2px solid #ddd2c0; }
.instr-next:hover { border-color: #b9a88f; color: #3f362b; }
.instr-go   { background: linear-gradient(145deg, var(--gx-bleu), var(--gx-bleu-fonce)); color: #fff; border: none; }

.instr-skip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: #8b7d6f;
    cursor: pointer;
}

.instr-skip input { width: 17px; height: 17px; accent-color: var(--gx-bleu); cursor: pointer; }

/* ---- Plein écran du téléphone -------------------------------- */
/* Le contenu utile — du titre au bouton GO — occupe toute la hauteur
   visible ; le retour aux exercices et le pied de page passent sous la
   ligne de flottaison. --header-h est mesurée par le script : l'en-tête
   est collant et sa hauteur change avec la largeur de l'écran. */

@media (max-width: 600px) {
    .ecran-preparation {
        min-height: calc(100vh - var(--header-h, 64px) - 2rem);
        min-height: calc(100svh - var(--header-h, 64px) - 2rem);
        display: flex;
        flex-direction: column;
    }

    /* La carte ne s'étire plus jusqu'en bas de l'écran (Julien, 23 sept. :
       « le GO est trop bas ») : son contenu se serre en haut, et le GO
       vient juste après les règles, sous le pouce. Le conteneur garde sa
       hauteur pour que le retour et le pied restent sous la ligne de
       flottaison. */
    .ecran-preparation .setup-card {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.7rem;
    }

    .ecran-preparation .setup-card > * { margin-bottom: 0; }
}

/* ---- Vignette : grille miniature (jeux de type sudoku) ------- */

.vg-grille {
    display: inline-grid;
    gap: 2px;
}

.vg-case {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1ece3;
    border: 1px solid #d8cbb8;
    border-radius: 3px;
    overflow: hidden;
}

.vg-case img { width: 86%; height: 86%; object-fit: contain; }

/* Case à remplir : c'est le nombre de cases vides que règle le curseur */
.vg-vide { background: #fffdf8; border-style: dashed; }

/* Les deux mots des consignes : FORME en gris, COULEUR lettre par lettre
   dans la couleur de son piKto (spiktoGameFocus.motCouleur). */
.mot-forme   { color: #8b7d6f; font-weight: 800; letter-spacing: 0.03em; }
.mot-couleur { font-weight: 800; letter-spacing: 0.05em; }