/* TORCH IT! — l'interface (17 oct 2026, plan du penseur « accueil et menus ») : un seul kit pour les boutons, les
   panneaux et les icônes, dans le style des personnages peints — contour sombre épais, reflet en haut, rebord en
   relief qui s'écrase quand on appuie ; orange feu pour l'action principale, violet farceur pour le reste, rouge
   braise pour effacer, or pour les étoiles. Tout se mesure en « px du jeu » : les menus vivent dans un calque de
   540 × 960 posé exactement sur le terrain (js/menus.js le met à l'échelle). Boutons : 72 px du jeu au moins. */
:root { --fond:#0d0b14; --texte:#fff6e8; --encre:#1b0d05; --orange1:#ffc04d; --orange2:#ff761a;
  --violet1:#9468f2; --violet2:#5530b0; --rouge1:#ff6b55; --rouge2:#bd2418; --or:#ffd25e; --nuit:18,15,44;
  --bois:none;
  --contour: 0 3px 0 var(--encre), 0 -2px 0 var(--encre), 3px 0 0 var(--encre), -3px 0 0 var(--encre),
             2px 3px 0 var(--encre), -2px 3px 0 var(--encre), 2px -2px 0 var(--encre), -2px -2px 0 var(--encre); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--fond); color:var(--texte);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow:hidden;
  -webkit-user-select:none; user-select:none; touch-action:none; }
#jeu { display:block; width:100%; height:100%; outline:none; }
.cache { display:none !important; }

/* ── Le calque du terrain ─────────────────────────────────────────────────────────────────────── */
.cadre { position:absolute; left:0; top:0; width:540px; height:960px; transform-origin:0 0; }
#cadre-hud { position:fixed; z-index:20; pointer-events:none; }
#hud { position:absolute; left:0; right:0; top:0; height:100px; display:flex; align-items:center; gap:12px;
  padding:14px 16px; pointer-events:none; }
#hud > * { pointer-events:auto; }
#score { margin-right:auto; display:flex; align-items:center; gap:4px; font-size:36px; font-weight:900;
  font-variant-numeric:tabular-nums; text-shadow:var(--contour); }
#score img { height:60px; width:auto; }

#voile { position:fixed; inset:0; z-index:10; background:rgba(9,7,20,.74); }
#voile.clair { background:radial-gradient(ellipse at 50% 62%, rgba(9,7,20,.15), rgba(9,7,20,.45)); }   /* accueil : la scène se voit */
#voile.bas { background:linear-gradient(to bottom, rgba(9,7,20,0) 34%, rgba(9,7,20,.88) 62%); }        /* fin de niveau : on voit la tour */
#voile.page { cursor:pointer; }
.ecran { position:absolute; inset:0; }

/* ── Boutons ──────────────────────────────────────────────────────────────────────────────────── */
.btn { font:inherit; font-weight:900; color:var(--texte); border:4px solid var(--encre); border-radius:22px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; position:relative;
  min-height:72px; min-width:72px; padding:0 22px; letter-spacing:.01em; line-height:1.05; text-shadow:var(--contour);
  box-shadow:0 7px 0 var(--encre), inset 0 5px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(0,0,0,.2);
  transition:transform .06s, box-shadow .06s, filter .12s; -webkit-tap-highlight-color:transparent; }
.btn:active:not(:disabled), .btn.appuye { transform:translateY(5px);
  box-shadow:0 2px 0 var(--encre), inset 0 4px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.2); }
@media (hover:hover) { .btn:hover:not(:disabled) { filter:brightness(1.12); } }
.btn:focus { outline:none; }
.btn:focus-visible { outline:5px solid var(--or); outline-offset:5px; }
.btn:disabled { opacity:.4; cursor:default; }
.btn.principal { background:linear-gradient(var(--orange1), var(--orange2)); font-size:40px; }
.btn.secondaire { background:linear-gradient(var(--violet1), var(--violet2)); font-size:32px; }
.btn.danger { background:linear-gradient(var(--rouge1), var(--rouge2)); font-size:30px; }
.btn.icone { width:72px; height:72px; padding:0; background:linear-gradient(var(--violet1), var(--violet2)); border-radius:20px; }
.btn.icone.petit { width:72px; height:72px; }
.btn .ico { width:46px; height:46px; flex:none; }
.btn.principal .ico, .btn.secondaire .ico, .btn.danger .ico { width:40px; height:40px; }
.btn small { display:block; font-size:24px; font-weight:800; opacity:.92; margin-top:2px; }
.btn .etiq { display:block; }
.ico-ombre { fill:var(--encre); stroke:var(--encre); stroke-width:13; stroke-linecap:round; stroke-linejoin:round; }
.ico-ombre.ico-t { fill:none; }
.ico-plein { fill:var(--texte); }
.ico-trait { fill:none; stroke:var(--texte); stroke-width:6.5; stroke-linecap:round; stroke-linejoin:round; }

/* ── Panneaux ─────────────────────────────────────────────────────────────────────────────────── */
.carte { background:linear-gradient(rgba(var(--nuit),.94), rgba(var(--nuit),.94)), var(--bois);
  background-size:auto, 240px; border:4px solid var(--encre); border-radius:30px; text-align:center;
  box-shadow:0 10px 0 rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.12); padding:26px 24px; }
.carte h1, .carte h2 { font-size:44px; font-weight:900; line-height:1.12; text-shadow:var(--contour); }
.carte p { font-size:28px; line-height:1.3; }

/* ── Accueil ──────────────────────────────────────────────────────────────────────────────────── */
.coin { position:absolute; top:16px; display:flex; gap:12px; }
.coin-g { left:16px; }
.coin-d { right:16px; }
.pastille { height:72px; padding:0 14px; gap:8px; font-size:28px; background:linear-gradient(var(--violet1), var(--violet2)); }
.pastille span { opacity:.5; }
.pastille span.actif { opacity:1; color:var(--or); }
.pastille span + span::before { content:'·'; margin-right:8px; opacity:.6; color:var(--texte); }
#titre-jeu { position:absolute; left:10px; right:10px; top:108px; }
#logo { display:block; width:520px; height:170px; margin:0 auto; }
/* l'accroche choisie par Rastlin (17 oct) : la voix des farceurs, dans une bulle qui sort du fort ; le titre leur répond */
#devise { position:absolute; left:18px; top:278px; width:336px; margin:0; padding:10px 14px; box-sizing:border-box; text-align:left;
  font-size:28px; line-height:1.15; font-weight:800; color:#2a1608; background:#fff3d6; border:4px solid #140a04; border-radius:22px;
  box-shadow:0 5px 0 #140a04; }
#devise:empty { display:none; }
#devise::after { content:''; position:absolute; right:-26px; bottom:22px; border:14px solid transparent; border-left:22px solid #140a04; border-right:0; }
#devise::before { content:''; position:absolute; right:-17px; bottom:26px; border:10px solid transparent; border-left:16px solid #fff3d6; border-right:0; z-index:1; }
#btn-jouer { position:absolute; left:110px; top:524px; width:320px; height:104px; font-size:46px; flex-direction:column; gap:0; }
#btn-niveaux, #btn-autre { position:absolute; left:110px; width:320px; height:84px; flex-direction:row; gap:12px; font-size:30px; }
#btn-niveaux { top:648px; }
#btn-autre { top:750px; }
#btn-niveaux .bloc, #btn-autre .bloc { display:flex; flex-direction:column; align-items:center; white-space:nowrap; }
#btn-autre { padding:0 14px; font-size:28px; }
#pied { position:absolute; left:0; right:0; bottom:16px; text-align:center; font-size:20px; opacity:.6; text-shadow:var(--contour); }
/* JOUER « respire » (+4 % toutes les 1,4 s) : son texte et sa lueur, pas sa boîte (le bouton ne bouge pas sous le doigt) */
#btn-jouer::before { content:''; position:absolute; inset:0; border-radius:18px; pointer-events:none; }
@keyframes respire { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes lueur { 0%,100% { box-shadow:0 0 0 0 rgba(255,170,60,0); } 50% { box-shadow:0 0 26px 8px rgba(255,170,60,.5); } }
.anime #btn-jouer .etiq { animation:respire 1.4s ease-in-out infinite; }
.anime #btn-jouer::before { animation:lueur 1.4s ease-in-out infinite; }

/* ── Panneau : cartes d'histoire, pause, fin de niveau ─────────────────────────────────────────── */
#panneau { display:flex; align-items:center; justify-content:center; padding:24px; }
#panneau.bas { align-items:flex-end; padding-bottom:70px; }
#panneau .carte { width:100%; max-width:500px; display:flex; flex-direction:column; align-items:center; gap:14px; }
#panneau .entete { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; }
#panneau .entete h1 { flex:1; }
#panneau.page h1 { min-height:2.3em; display:flex; align-items:center; justify-content:center; font-size:38px; }
#panneau.page .carte { cursor:pointer; }
#vignette { width:320px; height:140px; }
#sous-titre:empty, #detail:empty, #detail-or:empty, #titre:empty { display:none; }
#detail { color:#efeaf7d0; }
#detail-or { color:var(--or); font-weight:800; }
#etoiles { display:flex; gap:14px; justify-content:center; height:76px; }
#etoiles .ico { width:76px; height:76px; transition:transform .2s; }
#etoiles .vide .ico-plein, #etoiles .vide .ico-trait { fill:#3d3560; stroke:#3d3560; }
#etoiles .pleine .ico-plein { fill:var(--or); }
#etoiles .pose { animation:pose .25s ease-out; }
@keyframes pose { from { transform:scale(1.8) rotate(-20deg); opacity:0; } to { transform:scale(1); opacity:1; } }
.rangee { display:flex; gap:14px; justify-content:center; align-items:center; width:100%; }
.rangee.deux .btn { font-size:28px; padding:0 14px; flex:1 1 0; max-width:220px; min-height:80px; white-space:nowrap; }
.rangee.deux:not(:has(.btn:not(.cache))) { display:none; }
.rangee .btn.principal { min-width:200px; min-height:96px; font-size:40px; }
.colonne { display:flex; flex-direction:column; gap:14px; width:100%; align-items:center; }
.colonne .btn { width:100%; max-width:440px; min-height:80px; font-size:30px; padding:6px 18px; }

/* ── Niveaux ──────────────────────────────────────────────────────────────────────────────────── */
.barre { position:absolute; left:16px; right:16px; top:16px; height:76px; display:flex; align-items:center; gap:16px; }
.barre h2 { flex:1; font-size:44px; font-weight:900; text-shadow:var(--contour); }
.barre .total { font-size:30px; font-weight:900; color:var(--or); text-shadow:var(--contour); display:flex; align-items:center; gap:6px; }
.barre .total .ico { width:34px; height:34px; }
.barre .total .ico-plein { fill:var(--or); }
#niveaux .chapitres { position:absolute; left:16px; right:16px; top:108px; display:flex; flex-direction:column; gap:14px; }
.chapitre { padding:12px 14px 14px; border-radius:26px; text-align:left; }
.chapitre .bandeau { display:flex; align-items:center; gap:12px; height:72px; }
.chapitre .bandeau canvas { width:132px; height:58px; border-radius:12px; flex:none; background:rgba(0,0,0,.25); }
.chapitre .bandeau .nom { flex:1; font-size:28px; font-weight:900; line-height:1.1; text-shadow:var(--contour); }
.chapitre.verrouille { opacity:.55; filter:saturate(.4); }
/* 18 oct (Rastlin) : le 📖 porte son nom, « Lire », sous l'icône — au doigt il n'y a pas d'infobulle. Même taille de bouton. */
.chapitre .bandeau .btn.lire { flex-direction:column; gap:0; padding:2px 0 0; line-height:1; }
.chapitre .bandeau .btn.lire .ico { width:38px; height:38px; }
.chapitre .bandeau .btn.lire .etiq { margin-top:0; line-height:1; }   /* petite ligne du bouton : 24 px (.btn small) */
.medaillons { display:flex; justify-content:space-between; margin-top:10px; }
.medaillon { width:84px; height:110px; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0;
  cursor:pointer; font:inherit; color:var(--texte); -webkit-tap-highlight-color:transparent; }
.medaillon .rond { width:84px; height:84px; border-radius:50%; border:4px solid var(--encre); display:grid; place-items:center;
  font-size:38px; font-weight:900; text-shadow:var(--contour); background:linear-gradient(var(--violet1), var(--violet2));
  box-shadow:0 6px 0 var(--encre), inset 0 4px 0 rgba(255,255,255,.3); position:relative; }
.medaillon:active .rond { transform:translateY(4px); box-shadow:0 2px 0 var(--encre); }
.medaillon:focus { outline:none; }
.medaillon:focus-visible .rond { outline:5px solid var(--or); outline-offset:4px; }
.medaillon.gagne .rond { background:linear-gradient(var(--orange1), var(--orange2)); }
.medaillon.ferme .rond { background:linear-gradient(#5a5470, #34304a); }
.medaillon.ferme .rond .ico { width:44px; height:44px; }
/* l'anneau orange qui pulse sur le prochain niveau : une ombre portée (rien ne dépasse de la boîte du médaillon) */
.medaillon.prochain .rond { animation:anneau 1.2s ease-in-out infinite; }
@keyframes anneau { 0%,100% { box-shadow:0 6px 0 var(--encre), inset 0 4px 0 rgba(255,255,255,.3), 0 0 0 4px rgba(255,118,26,.3); }
  50% { box-shadow:0 6px 0 var(--encre), inset 0 4px 0 rgba(255,255,255,.3), 0 0 0 9px rgba(255,118,26,1); } }
.medaillon .passe-ico { position:absolute; right:-4px; top:-6px; width:32px; height:32px; }   /* la pastille « passé », en coin */
.medaillon .passe-ico .ico { width:100%; height:100%; display:block; }
.medaillon .petites { display:flex; gap:1px; height:22px; }
.medaillon .petites .ico { width:24px; height:24px; }
.medaillon .petites .vide .ico-plein { fill:#3d3560; }
.medaillon .petites .pleine .ico-plein { fill:var(--or); }
.medaillon.secoue .rond { animation:secoue .3s; }
@keyframes secoue { 20%,60% { transform:translateX(-7px); } 40%,80% { transform:translateX(7px); } }
#btn-la-fin { position:absolute; left:130px; width:280px; height:76px; bottom:22px; }

/* ── Options ──────────────────────────────────────────────────────────────────────────────────── */
#options .reglages { position:absolute; left:16px; right:16px; top:108px; bottom:16px; display:flex; flex-direction:column; gap:10px; }
.ligne { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:80px; padding:6px 18px;
  border-radius:22px; font-size:28px; font-weight:800; text-shadow:var(--contour); }
.ligne > span { flex:1; text-align:left; }
.ligne input[type=range] { -webkit-appearance:none; appearance:none; width:250px; height:76px; background:transparent; cursor:pointer; touch-action:none; }
.ligne input[type=range]::-webkit-slider-runnable-track { height:18px; border-radius:9px; background:#2c2550; border:3px solid var(--encre); }
.ligne input[type=range]::-moz-range-track { height:18px; border-radius:9px; background:#2c2550; border:3px solid var(--encre); }
.ligne input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:56px; height:56px; margin-top:-22px; border-radius:50%;
  border:4px solid var(--encre); background:linear-gradient(var(--orange1), var(--orange2)); box-shadow:0 4px 0 var(--encre); }
.ligne input[type=range]::-moz-range-thumb { width:56px; height:56px; border-radius:50%; border:4px solid var(--encre);
  background:linear-gradient(var(--orange1), var(--orange2)); }
.ligne input[type=range]:focus-visible { outline:5px solid var(--or); outline-offset:2px; border-radius:20px; }
.bascule { -webkit-appearance:none; appearance:none; width:112px; height:60px; border-radius:30px; border:4px solid var(--encre);
  background:#2c2550; position:relative; cursor:pointer; flex:none; transition:background .15s; }
.bascule::after { content:''; position:absolute; top:4px; left:4px; width:44px; height:44px; border-radius:50%;
  background:#c9c1e6; border:3px solid var(--encre); transition:left .15s; }
.bascule:checked { background:linear-gradient(var(--orange1), var(--orange2)); }
.bascule:checked::after { left:54px; background:var(--texte); }
.bascule:focus-visible { outline:5px solid var(--or); outline-offset:3px; }
.segments { display:flex; gap:10px; }
.segments .btn { font-size:28px; height:72px; min-height:72px; padding:0 14px; background:linear-gradient(#5a5470, #34304a); }
.segments .btn.actif { background:linear-gradient(var(--orange1), var(--orange2)); }
.ligne.bouton { cursor:pointer; border:4px solid var(--encre); box-shadow:0 6px 0 var(--encre); color:var(--texte); font:inherit; font-size:28px; font-weight:800; width:100%; }
.ligne.bouton .ico { width:40px; height:40px; }
#btn-effacer { margin-top:30px; align-self:center; width:400px; height:76px; }
#clavier-liste { position:absolute; inset:0; padding:108px 16px 16px; }
#clavier-liste .carte { text-align:left; }
#clavier-liste dl { display:grid; grid-template-columns:auto 1fr; gap:14px 18px; font-size:28px; align-items:center; }
#clavier-liste dt { font-weight:900; color:var(--or); text-shadow:var(--contour); white-space:nowrap; }
#clavier-liste dt kbd { font:inherit; border:3px solid var(--encre); border-radius:10px; padding:2px 10px; background:#2c2550; }

/* ── Crédits ──────────────────────────────────────────────────────────────────────────────────── */
#credits .carte { position:absolute; left:12px; right:12px; top:104px; bottom:12px; display:flex; flex-direction:column; gap:10px; align-items:center; overflow:hidden; padding:18px 20px; }
#credits canvas { width:300px; height:98px; flex:none; }
#credits p { font-size:28px; line-height:1.22; }
#credits .ia { text-align:left; display:flex; flex-direction:column; gap:6px; font-size:28px; line-height:1.18; }
#credits .ia b { color:var(--or); font-size:30px; text-shadow:var(--contour); }
#credits .merci { font-size:32px; font-weight:900; color:var(--or); text-shadow:var(--contour); margin-top:auto; }
#credits .version { font-size:20px; opacity:.6; }

/* ── Confirmation ─────────────────────────────────────────────────────────────────────────────── */
.modale { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:rgba(9,7,20,.7); padding:24px; }
.modale .carte { display:flex; flex-direction:column; gap:22px; align-items:center; width:100%; }
.modale .btn { width:340px; }
#btn-confirm-annuler { height:96px; }
#btn-confirm-effacer { height:76px; }

/* ── Téléphone couché ─────────────────────────────────────────────────────────────────────────── */
#tourne { display:none; position:fixed; inset:0; z-index:50; background:var(--fond); place-items:center; padding:12px; }
#tourne .carte { display:flex; align-items:center; gap:18px; padding:14px 22px; }
#tourne img { height:110px; width:auto; }
#tourne p { font-size:24px; font-weight:900; text-shadow:var(--contour); }
@media (orientation:landscape) and (max-height:500px) { #tourne { display:grid; } }

@media (prefers-reduced-motion:reduce) { .anime #btn-jouer .etiq, .anime #btn-jouer::before, .medaillon.prochain .rond { animation:none !important; } }
.immobile * { animation:none !important; transition:none !important; }
.ico.or .ico-plein { fill:var(--or); }
small .ico { width:22px; height:22px; vertical-align:-3px; }
/* JOUER : le logo s'envole et les boutons descendent (0,25 s), puis la carte du chapitre arrive */
#accueil #titre-jeu, #accueil #devise, #accueil > .btn, #accueil .coin { transition:transform .25s ease-in, opacity .25s ease-in; }
#accueil.depart #titre-jeu, #accueil.depart #devise { transform:translateY(-220px); opacity:0; }
#accueil.depart > .btn, #accueil.depart .coin { transform:translateY(260px); opacity:0; }