html,body{height:100%;margin:0;background:#000;overflow:hidden;overscroll-behavior:none}
body{
    font-family:'VT323',monospace;
    /* Mobile : pas de zoom au double-tap, pas de menu au appui long, pas de sélection */
    touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
    -webkit-tap-highlight-color:transparent;
}
/* Zone utilisable de l'écran, sans l'encoche ni les barres système */
#frame{
    position:fixed;inset:0;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing:border-box;display:flex;align-items:center;justify-content:center;
}
/* Le jeu en 960x640, mis à l'échelle de l'écran par ecran.js */
#game{
    cursor:url(images/curseur.png) 15 15,crosshair;
    position:relative;flex:none;width:960px;height:640px;overflow:hidden;display:flex;flex-direction:column;image-rendering:pixelated;
    transform:scale(var(--scale,1));
}

/* Invitation à tourner le téléphone (portrait sur écran tactile uniquement) */
#rotate{display:none}
@media (orientation:portrait) and (pointer:coarse){
    #rotate{
        display:flex;position:fixed;inset:0;z-index:100;background:#000;
        flex-direction:column;align-items:center;justify-content:center;
        color:#f4f1d0;font-size:28px;text-align:center;
    }
    #rotate .phone{font-size:64px;animation:turn 2s ease-in-out infinite}
}
@keyframes turn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#scene{position:relative;width:100%;flex:1;background:#000;overflow:hidden}
/* Image de fond, placée et dimensionnée par layoutScene() dans game.js */
#bgLayer,#fgLayer{position:absolute;background-size:100% 100%;image-rendering:pixelated;
    /* calques fixés une fois pour toutes : le décor ne bouge pas d'un pixel au survol */
    will-change:transform;transform:translateZ(0)}
/* Premier plan : entre les personnages "derrière" (z 4) et ceux "devant" (z 6) */
#fgLayer{z-index:5;pointer-events:none;display:none}
#fgLayer.active{display:block}
.character{z-index:6}
.character.behind{z-index:4}
/* Calques d'animation du décor, superposés à l'image de fond */
.fx-layer{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.fx-layer[hidden]{display:none}
.character{position:absolute;font-size:90px;user-select:none}
.character img{display:block;image-rendering:pixelated}
.character .parle,.character .cligne{position:absolute;left:0;top:0;visibility:hidden}
.character.talking .parle{visibility:visible}
.character.talking .repos{visibility:hidden}
/* Le clignement passe devant tout le reste */
.character.blinking .cligne{visibility:visible}
.character.blinking .repos,.character.blinking .parle{visibility:hidden}
/* Vue sans visage (ex. vraiment de dos) : ni bouche ni clignement */
.character.sans-visage .parle,.character.sans-visage .cligne{display:none}
.character.sans-visage .repos{visibility:visible!important}
/* (de face, les images de bouche et d'yeux sont celles de face : voir orienter() dans game.js) */
/* Marche vers la droite : image retournée */
.character.flip img{transform:scaleX(-1)}

/* Zones de sortie vers une autre scène */
.exit{position:absolute}
/* seuls les passages qui ont un nom au survol changent la souris */
.exit[data-label],.exit.curseur{cursor:url(images/curseur_actif.png) 15 15,pointer}
/* zone bloquée sans message (data/zones.js) : invisible et non cliquable */
.exit.inactive{pointer-events:none}
/* Infobulle des sorties et des personnages : un seul élément, toujours au premier plan (game.js) */
#infobulle{
    position:absolute;z-index:25;padding:4px 10px;white-space:nowrap;
    background:#2f5a2a;border:3px solid #a8d672;outline:2px solid #0f2a0c;
    color:#f4f1d0;font-size:20px;text-shadow:2px 2px 0 #0f2a0c;pointer-events:none;
}
#infobulle[hidden]{display:none}

/* Fondu au noir lors d'un changement de scène */
#scene::before{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .3s;z-index:30}
#scene.fading::before{opacity:1}

/* Dialogue écrit directement dans l'image, au-dessus de celui qui parle (sans boîte) */
.bubble{
    position:absolute;
    width:max-content;max-width:440px;box-sizing:border-box;padding:2px 4px;
    text-align:center;color:var(--couleur,#f4f1d0);
    user-select:none;outline:none;
    z-index:10;
}
.bubble.hidden{display:none}
#speaker{display:none}
#dialogText{
    font-size:26px;line-height:1.05;
    /* contour noir sur tout le tour, pour rester lisible sur n'importe quel décor */
    text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;
}
/* narration (personne ne parle) : en haut, en italique */
.bubble.narration #dialogText{font-style:italic;color:#e8e2c8}
#nextHint{display:none}
@keyframes blink{50%{opacity:0}}

/* Barre du bas : panneau de pierre gravée (images/interface/barre.png, 960x140, créé par generer_barre.py).
   Les 10 emplacements sont creusés dans l'image : les cases ci-dessous tombent exactement dessus. */
#inventoryBar{position:relative;flex:none;height:140px;box-sizing:border-box;
    background:#22252f url(images/interface/barre.png) 0 0/960px 140px no-repeat;image-rendering:pixelated}
#items{display:grid;grid-template-columns:repeat(5,56px);grid-template-rows:repeat(2,56px);gap:6px;justify-content:center;padding-top:14px}
.slot{position:relative;box-sizing:border-box;width:56px;height:56px;border:2px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;font-size:40px}
.slot img{width:44px;height:44px;image-rendering:pixelated;object-fit:contain}

/* Infobulle avec le nom de l'objet au survol */
.slot[data-name]{cursor:url(images/curseur_actif.png) 15 15,pointer}
.slot[data-name]::after{
    content:attr(data-name);
    position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
    padding:4px 10px;white-space:nowrap;
    background:#2f5a2a;border:3px solid #a8d672;outline:2px solid #0f2a0c;
    color:#f4f1d0;font-family:'VT323',monospace;font-size:20px;text-shadow:2px 2px 0 #0f2a0c;
    pointer-events:none;visibility:hidden;z-index:20;
}
.slot[data-name]:hover::after,.slot.show-tip::after{visibility:visible}

/* Personnage avec une infobulle : curseur actif */
.character[data-label],.character.curseur{cursor:url(images/curseur_actif.png) 15 15,pointer}

/* Boutons Save / Nouvelle partie, en bas à droite de l'inventaire */
#saveBox{position:absolute;right:14px;bottom:12px;display:flex;gap:8px}
/* boutons de pierre à bord de bronze, posés dans le plateau creusé à droite de la barre */
#saveBox button{
    font-family:'VT323',monospace;font-size:22px;line-height:1;padding:6px 14px;height:36px;
    background:linear-gradient(#5a6078,#3a3e50 55%,#2c2f3d);
    border:2px solid;border-color:#c4943e #5a3a12 #5a3a12 #c4943e;outline:2px solid #0e0f16;
    color:#ecc870;text-shadow:2px 2px 0 #14151c;cursor:url(images/curseur_actif.png) 15 15,pointer;
}
#saveBox button:hover{color:#fff0b8}
#saveBox button:active{transform:translateY(1px);background:linear-gradient(#2c2f3d,#3a3e50)}
/* les trois boutons remplissent le plateau creusé (x 752 à 951 dans barre.png), à égale distance */
#saveBox{bottom:14px;left:758px;right:14px;justify-content:space-between}
#saveBox button{flex:1 1 0;padding:6px 0;text-align:center}

/* Bouton son coupé */
#muteBtn.muet{text-decoration:line-through;opacity:.6}

/* Réponses au choix, à la place de l'inventaire */
#choix{
    position:absolute;inset:0;z-index:3;background:#191a24 url(images/interface/barre_choix.png) 0 0/960px 140px no-repeat;
    display:flex;flex-direction:column;justify-content:center;gap:0;padding:0 48px;
}
#choix[hidden]{display:none}
#choix .choice{
    all:unset;font-family:'VT323',monospace;font-size:22px;line-height:1.1;color:#e8dcc0;
    text-shadow:2px 2px 0 #0b0b10;cursor:url(images/curseur_actif.png) 15 15,pointer;
}
#choix .choice::before{content:'▸ ';color:#c4943e}
#choix .choice:hover,#choix .choice:focus{color:#f0c860}
#choix .choice.used{color:#8f8a7c}

/* « Quitter la conversation » : toujours en dernier, plus discret */
#choix .quitter{
    all:unset;position:absolute;top:16px;right:30px;width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    font-family:'VT323',monospace;font-size:30px;line-height:1;color:#d9483b;text-shadow:2px 2px 0 #0f2a0c;
    cursor:url(images/curseur_actif.png) 15 15,pointer;
}
#choix .quitter:hover,#choix .quitter:focus{color:#ff7a6a;outline:2px solid #d9483b}
#choix.serre{gap:0}
#choix.serre .choice{font-size:19px;line-height:1.05}

/* Nouvel objet dans l'inventaire : il grossit et s'entoure d'une aura dorée pendant une seconde */
.slot.nouveau{animation:objetNouveau 1s ease-out;z-index:1}
@keyframes objetNouveau{
    0%  {transform:scale(1);   box-shadow:0 0 0 0 rgba(244,211,94,.95);border-color:#f4d35e}
    25% {transform:scale(1.35);box-shadow:0 0 18px 7px rgba(244,211,94,.9);border-color:#f4d35e}
    60% {transform:scale(1.1); box-shadow:0 0 12px 4px rgba(244,211,94,.5)}
    100%{transform:scale(1);   box-shadow:0 0 0 0 rgba(244,211,94,0)}
}

/* Petites bêtes du décor (bestioles.js) : au-dessus du décor, sous les personnages */
.enigme{position:absolute;z-index:3;image-rendering:pixelated}
.enigme.cliquable{cursor:url(images/curseur_actif.png) 15 15,pointer}
.bestiole{position:absolute;z-index:5;pointer-events:none;image-rendering:pixelated;transform-origin:50% 50%}

/* Lieu et date de la page, en haut à droite (toujours visibles) */
#lieuDate{
    position:absolute;top:8px;right:14px;z-index:9;text-align:right;pointer-events:none;
    font-family:'VT323',monospace;color:#e6dcef;line-height:1;
    text-shadow:2px 2px 0 #1a1230,-1px -1px 0 #1a1230,1px -1px 0 #1a1230,-1px 1px 0 #1a1230;
}
#lieuDate[hidden]{display:none}
#lieuDate .lieu{font-size:34px}
#lieuDate .date{font-size:26px;opacity:.9}

/* Scène jouée toute seule (ex. Nicolas boit la potion) : on ne peut plus cliquer ailleurs */
.voile-cinematique{position:absolute;inset:0;z-index:20}
/* tout devient noir autour de Nicolas */
.noir-cinematique{position:absolute;inset:0;z-index:8;background:#000;opacity:0;transition:opacity 2.6s ease-in;pointer-events:none}
.noir-cinematique.visible{opacity:1}
/* carton d'époque (ex. « CLOVIS – Premier roi des Francs ») sur l'écran noir */
.carton-epoque{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;
    pointer-events:none;opacity:0;transition:opacity 1.8s ease;font-family:'VT323',monospace;text-align:center}
.carton-epoque.visible{opacity:1}
.carton-epoque .titre{font-size:120px;line-height:1;letter-spacing:14px;color:#e9c46a;text-shadow:4px 4px 0 #5a3410}
.carton-epoque .sous-titre{font-size:34px;margin-top:10px;color:#e6dcef;letter-spacing:2px}

/* Bourse (solidus) : petite plaque gravée posée sur l'arc de bronze du panneau gauche de la barre */
#bourse{position:absolute;left:170px;top:53px;width:134px;height:46px;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(#2a2d3a,#1c1e28);border:2px solid;border-color:#5a3a12 #c4943e #c4943e #5a3a12;outline:2px solid #0e0f16;
    font-family:'VT323',monospace;font-size:30px;line-height:1;color:#ecc870;text-shadow:2px 2px 0 #14151c;pointer-events:auto}
#bourse .piece{width:24px;height:24px;flex:none;background:url(images/interface/solidus.svg) 0 0/24px 24px no-repeat;image-rendering:pixelated}
#bourse.change{animation:bourseChange .9s ease-out}
@keyframes bourseChange{0%{color:#fff;transform:scale(1.15)}100%{color:#ecc870;transform:scale(1)}}

/* Chasse aux rats (enigmes.js) */
.enigme.rats{image-rendering:pixelated;pointer-events:none;z-index:7}
.rats-voile{cursor:url(images/curseur_actif.png) 15 15,pointer}
.rats-hud{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:21;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:6px;font-family:'VT323',monospace;color:#ecc870;
    text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000}
.rats-hud .compte{font-size:30px}
.rats-hud .compte.plus{animation:bourseChange .4s ease-out}
.rats-hud .temps{width:300px;height:12px;background:#1c1e28;border:2px solid #c4943e;outline:2px solid #0e0f16}
.rats-hud .barre{height:100%;width:100%;background:#a8d672}
.rats-hud .barre.presse{background:#d9483b}
.rats-hud .message{margin-top:120px;font-size:30px;line-height:1.15;text-align:center;color:#f4f1d0;max-width:620px}
.rats-hud .message .gros{font-size:64px;color:#ecc870}

/* morceau du décor qui passe devant une petite bête (bestioles.js : devant) */
.bestiole-devant{position:absolute;z-index:5;pointer-events:none;image-rendering:pixelated}

/* jeu de construction (enigmes.js, type 'construction') */
.construction-hud .message{margin-top:6px;font-size:26px;max-width:900px}
.construction-hud .message .gros{font-size:48px}
#scene.main-construction,#scene.main-construction *{cursor:url(images/curseur_actif.png) 15 15,grab!important}