/* Vertige : gravure à l'encre (linogravure). Encre noire, os clair, un rubis pour ce qui compte ; chaque puits a sa
   couleur. Titres en Big Shoulders Display (condensée, industrielle), texte en Barlow Semi Condensed. Boutons et
   panneaux en CSS (taille-douce : filet clair intérieur, hachures), icônes et objets peints par Codex.
   Pensé téléphone debout d'abord (360 × 740) ; sur PC, une colonne centrée. */
@font-face { font-family: 'Big Shoulders Display'; src: url(polices/big-shoulders.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url(polices/barlow-sc-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url(polices/barlow-sc-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
:root {
  --encre: #111014; --encre2: #1b191e; --os: #efe6d2; --os-doux: rgba(239, 230, 210, .62); --rubis: #ff2d6f; --rubis-sombre: #a3123f;
  --accent: #e0763a; --marge: 12px; --col: min(100vw, 480px);
  --hachures: repeating-linear-gradient(135deg, rgba(239, 230, 210, .05) 0 1px, transparent 1px 6px);
  --titre: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--encre); color: var(--os);
  font: 500 16px/1.25 'Barlow Semi Condensed', system-ui, sans-serif; font-synthesis: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none; }
img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; padding: 0; border: 0; background: none; }
[hidden] { display: none !important; }
#jeu { position: fixed; inset: 0; touch-action: none; }
#jeu canvas { display: block; touch-action: none; }
body:not(.en-partie) #jeu { visibility: hidden; }

/* Fond des menus : la capsule dans le puits (Codex), voilée à l'encre. */
#fond-menus { position: fixed; inset: 0; z-index: 1; background: var(--encre); }
#fond-menus .illustration, #titre .illustration { position: absolute; inset: 0; background: url(img/fond.webp) center 30% / cover no-repeat; }
#fond-menus .illustration { background-image: url(img/fond-flou.webp); opacity: .55; }
#fond-menus .voile { position: absolute; inset: 0; background: linear-gradient(rgba(17, 16, 20, .55), rgba(17, 16, 20, .92) 70%), var(--hachures); }
body.en-partie #fond-menus { display: none; }

/* ---------- Boutons ---------- */
.bouton-vif { position: relative; min-height: 52px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--rubis) var(--hachures); color: var(--encre); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--rubis), inset 0 0 0 4px var(--os), 0 5px 0 var(--rubis-sombre), 0 7px 0 #000;
  font: 800 21px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; transition: transform .07s, box-shadow .07s; }
.bouton-vif.grand { min-height: 64px; padding: 0 56px; font-size: 28px; }
.bouton-vif.petit { min-height: 40px; padding: 0 14px; font-size: 16px; }
.bouton-vif .ic { width: 24px; height: 24px; object-fit: contain; filter: invert(1) brightness(.1); }
.bouton-vif:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.bouton-vif.appuye, .bouton-vif:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--rubis), inset 0 0 0 4px var(--os), 0 1px 0 var(--rubis-sombre), 0 3px 0 #000; }
.bouton-filet { min-height: 46px; padding: 0 18px; border: 2px solid rgba(239, 230, 210, .55); border-radius: 3px; background: rgba(17, 16, 20, .7) var(--hachures);
  font: 700 18px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--os); transition: transform .07s; }
.bouton-filet.petit { min-height: 36px; font-size: 15px; padding: 0 12px; }
.lien-texte { color: var(--os-doux); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
button.appuye:not(.bouton-vif), button:active:not(.bouton-vif) { transform: scale(.97); filter: brightness(1.2); }
.rond { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(239, 230, 210, .5); background: rgba(17, 16, 20, .75); }
.rond .ic { width: 22px; height: 22px; object-fit: contain; }
.ic { display: block; }

/* ---------- Panneaux ---------- */
.panneau { position: relative; padding: 16px 16px; border-radius: 3px; background: rgba(17, 16, 20, .9) var(--hachures);
  box-shadow: inset 0 0 0 2px var(--os), inset 0 0 0 5px var(--encre), inset 0 0 0 6px rgba(239, 230, 210, .35), 0 8px 24px rgba(0, 0, 0, .5); }
.panneau h3 { margin: 0 0 8px; font: 800 15px/1 var(--titre); letter-spacing: .2em; text-transform: uppercase; color: var(--rubis); }
.pile { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.centre { margin: auto; text-align: center; }
.texte-centre { text-align: center; }
.regle { margin: 4px 0; color: var(--os); font-size: 16px; text-align: center; }
.petit { margin: 4px 0; color: var(--os-doux); font-size: 14px; line-height: 1.3; }
.petit.fort { color: var(--os); font-weight: 600; }
.ligne-boutons { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------- Écrans ---------- */
.ecran { position: fixed; inset: 0; z-index: 10; }
.ecran.voile { z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(10, 9, 12, .72); padding: var(--marge); }
.barre-haut { position: absolute; top: env(safe-area-inset-top); left: 0; right: 0; margin: 0 auto; width: var(--col); height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 var(--marge); }
.barre-haut h2 { margin: 0; font: 800 26px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.retour { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(239, 230, 210, .5); background: rgba(17, 16, 20, .75); }
.retour .ic { width: 22px; height: 22px; object-fit: contain; }
.compte { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 800 22px/1 var(--titre); color: var(--os); }
.compte::before, .etoile { content: ''; display: inline-block; width: 18px; height: 18px; background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.compte::before { color: var(--rubis); background: var(--rubis); }
.contenu { position: absolute; top: calc(64px + env(safe-area-inset-top)); bottom: 0; left: 0; right: 0; margin: 0 auto; width: var(--col);
  padding: 4px var(--marge) 84px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; touch-action: pan-y; }

/* Titre */
#titre { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 9vh 0 11vh; opacity: 0; transition: opacity .45s; }
#titre.ouvert { opacity: 1; }
#titre.sortie { opacity: 0; pointer-events: none; }
#titre .illustration::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(17, 16, 20, .55), rgba(17, 16, 20, .1) 40%, rgba(17, 16, 20, .75)); }
#titre .titre-jeu { position: relative; width: min(88vw, 620px); max-height: 30vh; object-fit: contain; filter: drop-shadow(0 6px 0 #000); }
#titre .bas { position: relative; }

/* Menu : colonne qui descend, comme le puits. */
#menu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 64px 0 56px; }
.haut-menu { position: absolute; top: calc(var(--marge) + env(safe-area-inset-top)); left: 0; right: 0; margin: 0 auto; width: var(--col); padding: 0 var(--marge); display: flex; justify-content: space-between; align-items: center; }
.coin { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 6px; border: 2px solid rgba(239, 230, 210, .45); border-radius: 3px; background: rgba(17, 16, 20, .8);
  font: 800 18px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; }
.coin img { width: 34px; height: 34px; object-fit: contain; }
.titre-menu { width: min(76vw, 400px); max-height: 17vh; object-fit: contain; filter: drop-shadow(0 4px 0 #000); }
.modes { width: var(--col); padding: 0 var(--marge); display: flex; flex-direction: column; gap: 10px; }
.mode { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; min-height: 78px; padding: 10px 14px; text-align: left;
  border-radius: 3px; background: rgba(17, 16, 20, .88) var(--hachures);
  box-shadow: inset 0 0 0 2px rgba(239, 230, 210, .8), inset 0 0 0 5px var(--encre), inset 4px 0 0 5px var(--accent); transition: transform .08s; }
.mode .ic { width: 46px; height: 46px; object-fit: contain; }
.mode b { display: block; font: 800 26px/1 var(--titre); letter-spacing: .06em; text-transform: uppercase; }
.mode small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.2; color: var(--os-doux); }
.mode em { font: 800 17px/1.1 var(--titre); font-style: normal; color: var(--os); text-align: right; display: flex; align-items: center; gap: 5px; max-width: 90px; }
.mode em .etoile { color: var(--rubis); background: var(--rubis); width: 15px; height: 15px; flex: none; }
.mode.principal { background: var(--rubis) var(--hachures); color: var(--encre); box-shadow: inset 0 0 0 2px var(--rubis), inset 0 0 0 4px var(--os), 0 5px 0 var(--rubis-sombre), 0 7px 0 #000; }
.mode.principal small, .mode.principal em { color: rgba(17, 16, 20, .78); }
.mode.principal .ic { filter: invert(1) brightness(.12); }
.mode.principal em .etoile { background: var(--encre); }
#liens-plateforme { position: absolute; left: var(--marge); bottom: calc(var(--marge) + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: calc(100% - 100px); }
.lien { height: 22px; padding: 0 9px; border-radius: 3px; background: #000; font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .78); position: relative; }
.lien::after { content: ''; position: absolute; inset: -10px -4px; }

/* Campagne : chaque puits est une bande taillée dans sa matière. */
#liste-puits { display: flex; flex-direction: column; gap: 10px; }
.puits { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; min-height: 84px; padding: 12px 16px 12px 20px; text-align: left; border-radius: 3px; overflow: hidden;
  background: var(--fond) center / 64px 64px repeat; box-shadow: inset 0 0 0 2px var(--os), inset 0 0 0 5px var(--encre); }
.puits::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 16, 20, .94) 30%, rgba(17, 16, 20, .55)); }
.puits::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--a); }
.puits > * { position: relative; z-index: 1; }
.puits b { font: 800 25px/1 var(--titre); letter-spacing: .05em; text-transform: uppercase; color: var(--os); }
.puits b i { font-style: normal; color: var(--a); margin-right: 8px; }
.puits small { grid-column: 1; font-size: 14px; color: var(--os-doux); }
.puits .etoiles { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
.puits .etoile { width: 20px; height: 20px; background: rgba(239, 230, 210, .2); }
.puits .etoile.oui { background: var(--rubis); }
.puits.verrou { filter: grayscale(.85) brightness(.55); }
.puits .cadenas { grid-column: 2; grid-row: 1 / span 2; width: 26px; height: 26px; object-fit: contain; opacity: .8; }
.bande-puits { min-height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 2px; background: var(--fond) center / 56px 56px repeat; box-shadow: inset 0 0 0 2px var(--a); }
.bande-puits b { font: 800 24px/1 var(--titre); letter-spacing: .05em; text-transform: uppercase; background: rgba(17, 16, 20, .82); padding: 6px 10px; border-radius: 2px; }

/* Hangar */
#liste-capsules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carte-capsule { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: 3px; background: rgba(17, 16, 20, .88) var(--hachures);
  box-shadow: inset 0 0 0 2px rgba(239, 230, 210, .45); }
.carte-capsule img { width: 92px; height: 92px; object-fit: contain; }
.carte-capsule b { font: 800 22px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; }
.carte-capsule.verrou img { filter: grayscale(1) brightness(.3); }
.carte-capsule.choisie { box-shadow: inset 0 0 0 2px var(--rubis), inset 0 0 0 5px var(--encre), inset 0 0 0 6px var(--rubis); }
.carte-capsule .prix { font-size: 14px; color: var(--os-doux); display: flex; gap: 5px; align-items: center; }
.carte-capsule .prix .etoile { width: 14px; height: 14px; background: var(--rubis); }

/* Multijoueur */
#sans-compte { align-self: stretch; }
.pile-multi { display: flex; flex-direction: column; gap: 12px; }
.pile-multi > .panneau:first-child { display: flex; flex-direction: column; align-items: center; }
.sous-bouton { margin: 8px 0 0; font-size: 14px; color: var(--os-doux); text-align: center; }
#liste-amis, #defi-amis { display: flex; flex-direction: column; gap: 6px; }
.ami { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 8px; border: 1px solid rgba(239, 230, 210, .2); border-radius: 3px; background: rgba(0, 0, 0, .35); text-align: left; width: 100%; }
.ami.hors-ligne { opacity: .5; }
.ami-av { flex: 0 0 34px; height: 34px; border-radius: 3px; background: rgba(239, 230, 210, .12) center / cover; }
.ami-nom { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ami-nom b { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ami-nom small { color: var(--os-doux); font-size: 13px; }
.ami-inviter, .ami-score { font: 800 17px/1 var(--titre); color: var(--rubis); letter-spacing: .08em; text-transform: uppercase; }
.ami.invite .ami-inviter { color: var(--os); }
.ami.moi { border-color: var(--rubis); }
.vide { color: var(--os-doux); font-size: 14px; margin: 4px 0; }
#places { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.place { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(239, 230, 210, .3); border-radius: 3px; background: rgba(0, 0, 0, .35); min-width: 0; }
.place.libre { opacity: .45; border-style: dashed; }
.place .ami-av { width: 34px; height: 34px; flex: none; }
.place span { display: flex; flex-direction: column; min-width: 0; }
.place b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place small { font-size: 12px; color: var(--rubis); text-transform: uppercase; letter-spacing: .1em; }
.place img { width: 30px; height: 30px; object-fit: contain; margin-left: auto; }
#choix-puits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#choix-puits button { height: 52px; border-radius: 3px; background: var(--fond) center / 52px repeat; box-shadow: inset 0 0 0 2px rgba(239, 230, 210, .25); font: 800 24px/1 var(--titre); color: var(--os); text-shadow: 0 2px 0 #000; }
#choix-puits button.pris { box-shadow: inset 0 0 0 3px var(--a), 0 0 0 2px var(--os); }
#choix-puits button:disabled { filter: grayscale(1) brightness(.4); }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; }
.reglage > span { font-weight: 600; font-size: 18px; }
.interrupteur { width: 58px; height: 30px; border-radius: 3px; border: 2px solid rgba(239, 230, 210, .45); background: rgba(0, 0, 0, .5); position: relative; flex: none; }
.interrupteur i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 2px; background: rgba(239, 230, 210, .45); transition: left .15s, background .15s; }
.interrupteur[aria-checked="true"] { border-color: var(--rubis); }
.interrupteur[aria-checked="true"] i { left: 31px; background: var(--rubis); }
.choix-langue { display: flex; gap: 6px; }
.choix-langue button { min-width: 74px; height: 42px; padding: 0 10px; border: 2px solid rgba(239, 230, 210, .3); border-radius: 3px; background: rgba(0, 0, 0, .4); font-weight: 600; }
.choix-langue button.actif { border-color: var(--rubis); color: #fff; }
.version-jeu { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--os-doux); margin-top: 4px; flex-wrap: wrap; }
.bouton-app { min-height: 50px; padding: 0 22px; border-radius: 4px; font-weight: 600; font-size: 18px; color: #fff; }
.bouton-app.whatsapp { background: #1fa855; }
.bouton-app.telegram { background: #2a9ad6; }

/* ---------- En partie ---------- */
/* --jx, --jl : la colonne du puits à l'écran (posées par jeu.js) ; --bas : le bandeau des commandes. */
#hud { position: fixed; top: 0; bottom: var(--bas, 0px); left: var(--jx, 0px); width: var(--jl, 100vw); z-index: 20; pointer-events: none; }
#b-pause { position: absolute; pointer-events: auto; top: calc(6px + env(safe-area-inset-top)); left: 6px; width: 48px; height: 48px; display: grid; place-items: center; }
#b-pause img { width: 24px; height: 24px; opacity: .85; filter: drop-shadow(0 1px 2px #000); }
#plaques { position: absolute; top: calc(58px + env(safe-area-inset-top)); left: 8px; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 3px; background: rgba(17, 16, 20, .55); }
#plaques img { width: 26px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
#plaques img.perdue { filter: grayscale(1) brightness(.35); opacity: .6; }
#plaques img.bouclier { filter: drop-shadow(0 0 4px #5ee3ff); }
#profondeur { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 0; right: 0; margin: auto; width: fit-content; text-align: center; padding: 3px 10px; border-radius: 3px; background: rgba(17, 16, 20, .7); }
#profondeur b { display: block; min-width: 3.2em; font: 800 30px/1 var(--titre); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
#profondeur small { display: block; font-size: 12px; color: var(--os-doux); letter-spacing: .12em; text-transform: uppercase; }
#eclats-hud { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 10px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 3px; background: rgba(17, 16, 20, .7); }
#eclats-hud img { width: 14px; height: 24px; object-fit: contain; }
#eclats-hud b { min-width: 2.2em; font: 800 26px/1 var(--titre); font-variant-numeric: tabular-nums; color: var(--rubis); }
#charges { position: absolute; right: 6px; top: 64px; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 3px; background: rgba(17, 16, 20, .55); }
#charges i { width: 12px; height: 15px; border-radius: 2px; background: var(--os); box-shadow: inset 0 0 0 2px #fff; }
#charges i.vide { background: rgba(239, 230, 210, .14); box-shadow: none; }
#charges.a-sec { animation: secoue .3s; }
#combo { position: absolute; top: 25%; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity .2s; }
#combo.on { opacity: 1; }
#combo small { display: block; font: 800 15px/1 var(--titre); letter-spacing: .3em; text-transform: uppercase; color: var(--os-doux); }
#combo b { display: block; font: 900 64px/1 var(--titre); color: var(--rubis); -webkit-text-stroke: 2px #111014; text-shadow: 0 4px 0 #000; }
#combo b.saute { animation: saute .18s ease-out; }
@keyframes saute { 0% { transform: scale(1.3); } 100% { transform: none; } }
#jauge-course { position: absolute; left: 14px; top: 190px; bottom: 20px; width: 8px; border-radius: 4px; background: rgba(239, 230, 210, .15); display: none; }
#jauge-course.on { display: block; }
#jauge-course i { position: absolute; left: -5px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid #111014; transition: top .2s linear; }
#jauge-course i.moi { width: 22px; height: 22px; left: -7px; margin-top: -11px; border-color: #fff; }
#message { position: absolute; left: 6%; right: 6%; top: 11%; text-align: center; font: 900 40px/1.05 var(--titre); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .25s;
  -webkit-text-stroke: 1.5px #111014; text-shadow: 0 4px 0 #000; }
#message.on { opacity: 1; }
#message small { display: block; font: 600 17px/1.2 'Barlow Semi Condensed', sans-serif; letter-spacing: 0; margin-top: 6px; text-transform: none; color: var(--os); -webkit-text-stroke: 0; }
#aide { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0 auto; width: fit-content; max-width: 90%; padding: 6px 12px; border-radius: 3px;
  background: rgba(17, 16, 20, .85); font-size: 15px; font-weight: 600; text-align: center; opacity: 0; transition: opacity .3s; }
#aide.on { opacity: 1; }

/* Commandes tactiles : le tableau de bord de la capsule (Codex), touches gravées, icônes blanches seules. */
#commandes { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bas, 0px); z-index: 21; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(var(--bas, 0px) * .2) 16px calc(var(--bas, 0px) * .1 + env(safe-area-inset-bottom)); background: #0b0a0d url(img/tableau.webp) center / 100% 100% no-repeat; }
#commandes .groupe { display: flex; gap: 10px; height: 100%; align-items: center; }
.commande { position: relative; height: min(100%, 92px); aspect-ratio: 1; display: grid; place-items: center; touch-action: none;
  background: url(img/touche.webp) center / contain no-repeat; transition: transform .05s, filter .05s; }
.commande.grosse { height: min(112%, 104px); background-image: url(img/touche-tir.webp); }
.commande img { width: 44%; height: 44%; object-fit: contain; filter: drop-shadow(0 2px 0 #000); }
.commande.appuye { transform: translateY(3px) scale(.96); filter: brightness(.8); }
/* Initiation : c'est le bouton lui-même qui s'anime (porteur, 25 oct. 2026). */
.commande.eclaire { animation: appelle 1s ease-in-out infinite; }
.commande.eclaire::after { content: ''; position: absolute; inset: -5px; border-radius: 14px; box-shadow: 0 0 0 3px var(--rubis), 0 0 18px var(--rubis); animation: halo 1s ease-in-out infinite; pointer-events: none; }
.commande.grosse.eclaire::after { border-radius: 50%; }
@keyframes appelle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes halo { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
#charges.eclaire { box-shadow: 0 0 0 3px var(--rubis); animation: halo 1s ease-in-out infinite; }

/* Sur le sas : entrer dans la boutique, ou descendre. */
#choix-sas { position: fixed; z-index: 22; left: var(--jx, 0px); width: var(--jl, 100vw); bottom: calc(var(--bas, 0px) + 18%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
#choix-sas button { min-width: 220px; }
#choix-sas .ic { width: 26px; height: 26px; }
#choix-sas .bouton-vif .ic { filter: invert(1) brightness(.1); }

/* Boutique */
#station .panneau { width: min(440px, 100%); max-height: 100%; overflow-y: auto; }
#station h2 { margin: 0; text-align: center; font: 900 38px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
#station-bourse { display: flex; justify-content: center; align-items: center; gap: 6px; font: 800 32px/1 var(--titre); color: var(--rubis); }
#station-bourse img { width: 16px; height: 28px; object-fit: contain; }
#station-bourse small { font: 600 15px/1 'Barlow Semi Condensed', sans-serif; color: var(--os-doux); margin-left: 4px; }
#offres { display: flex; flex-direction: column; gap: 8px; }
.offre { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 10px 10px 12px; border-radius: 3px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 2px rgba(239, 230, 210, .25); }
.offre > img { width: 38px; height: 38px; object-fit: contain; }
.offre b { display: block; font: 800 22px/1 var(--titre); letter-spacing: .05em; text-transform: uppercase; }
.offre small { display: block; font-size: 14px; color: var(--os-doux); margin-top: 3px; }
.offre .achat { min-width: 92px; min-height: 46px; padding: 0 10px; font-size: 20px; gap: 4px; }
.offre .achat img { width: 11px; height: 20px; object-fit: contain; }
.offre .achat.etat { background: rgba(239, 230, 210, .08); color: var(--os-doux); box-shadow: inset 0 0 0 2px rgba(239, 230, 210, .3); font-size: 15px; cursor: default; }
.offre.prise { box-shadow: inset 0 0 0 2px #9dffcf; }
#station-continuer { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#station-continuer .ic { width: 22px; height: 22px; }

/* Réglages ouverts en pleine partie : au-dessus de tout le jeu. */
body.en-partie #reglages { z-index: 35; background: rgba(10, 9, 12, .96); }

/* Fin */
.fin { width: min(400px, 100%); text-align: center; }
.fin h2, #pause h2 { margin: 0; font: 900 36px/1 var(--titre); letter-spacing: .06em; text-transform: uppercase; }
#gros-fin { display: flex; justify-content: center; align-items: baseline; gap: 8px; min-height: 70px; font: 900 72px/1 var(--titre); color: var(--os); text-shadow: 0 4px 0 #000; }
#gros-fin small { font-size: 24px; color: var(--os-doux); }
#gros-fin .etoile { width: 54px; height: 54px; background: rgba(239, 230, 210, .15); align-self: center; }
#gros-fin .etoile.oui { background: var(--rubis); }
#detail-fin { color: var(--os-doux); font-size: 16px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
#detail-fin b { color: var(--os); }
#detail-fin .rang { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 2px; background: rgba(0, 0, 0, .35); }
#detail-fin .rang.moi { box-shadow: inset 0 0 0 2px var(--rubis); }
#pause .panneau { width: min(320px, 100%); }

/* Initiation : une bulle en haut (icône + une consigne), jamais sur le puits sous la capsule. */
#tuto { position: fixed; z-index: 25; top: calc(64px + env(safe-area-inset-top)); left: 0; right: 0; margin: auto; width: min(460px, calc(100% - 24px)); padding: 10px 10px 10px 12px; border-radius: 3px;
  background: rgba(17, 16, 20, .96); box-shadow: inset 0 0 0 2px var(--os); display: flex; align-items: center; gap: 10px; transition: opacity .2s; }
#tuto.efface { opacity: .35; }
#tuto .tuto-ic { flex: none; width: 44px; height: 44px; object-fit: contain; }
#tuto .tuto-txt { flex: 1; min-width: 0; }
#tuto small { display: block; color: var(--rubis); font: 800 13px/1 var(--titre); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 3px; }
#tuto p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; }
#tuto em { display: block; font-style: normal; color: var(--rubis); font-weight: 600; font-size: 16px; margin-top: 3px; }
#tuto em.secoue { animation: secoue .3s; }
#tuto button { flex: none; }
#tuto.gel { box-shadow: inset 0 0 0 3px var(--rubis); }
@keyframes secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#tuto-fin .appris { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#tuto-fin .appris span { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 3px; background: rgba(0, 0, 0, .35); font-size: 17px; }
#tuto-fin .appris img { width: 34px; height: 34px; object-fit: contain; }

/* Tourner le téléphone (ecran.js) */
#tourner { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: var(--encre) var(--hachures); text-align: center; padding: 20px; }
#tourner.on, #tourner.visible { display: flex; }
#tourner img { width: min(60vw, 300px); }
#tourner p { font-size: 20px; font-weight: 600; margin: 12px 0; }
#tourner .aide { font-size: 14px; color: var(--os-doux); }

/* Toasts : en haut, sous la barre. */
#toasts { position: fixed; z-index: 60; top: calc(70px + env(safe-area-inset-top)); left: 0; right: 0; margin: auto; width: fit-content; max-width: calc(100% - 24px); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 3px; background: rgba(17, 16, 20, .96); box-shadow: inset 0 0 0 2px rgba(239, 230, 210, .5); font-weight: 600; font-size: 15px; animation: toast 2.9s forwards; }
.toast i { flex: none; width: 10px; height: 10px; transform: rotate(45deg); background: var(--os); }
.toast.erreur { box-shadow: inset 0 0 0 2px var(--rubis); } .toast.erreur i { background: var(--rubis); }
.toast.reussite i { background: #9dffcf; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-height: 640px) {
  .mode { min-height: 64px; padding: 8px 12px; } .mode b { font-size: 22px; } .mode small { font-size: 13px; }
  .titre-menu { max-height: 13vh; }
}