/* Mise en page : un canvas 3D plein écran, des écrans-cartes centrés par-dessus, un HUD discret en haut. */
:root{
  --ciel:#7fd0f5; --ciel-fonce:#4fb4e6; --creme:#fff6dc; --encre:#1d1a2b;
  --carotte:#ff7a1a; --soleil:#ffd23f; --haie:#2f9e44; --danger:#e8334a;
  --titre:"Lilita One","Arial Black",Impact,sans-serif;
  --texte:"Nunito","Trebuchet MS",Verdana,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ciel);color:var(--encre);
  font-family:var(--texte);font-weight:600;font-size:17px;-webkit-user-select:none;user-select:none;touch-action:none}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ---------- écrans ---------- */
.ecran{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;
  background:repeating-conic-gradient(from 0deg at 50% 115%,var(--ciel) 0 9deg,var(--ciel-fonce) 9deg 18deg)}
.ecran.voile{background:rgba(29,26,43,.55)}
.carte{background:var(--creme);border:4px solid var(--encre);border-radius:22px;box-shadow:8px 8px 0 var(--encre);
  padding:26px 26px 22px;width:min(520px,100%);margin:auto;display:flex;flex-direction:column;gap:14px;text-align:center}
h1{font-family:var(--titre);font-weight:400;font-size:clamp(40px,11vw,68px);line-height:.95;margin:0;color:var(--carotte);
  -webkit-text-stroke:2.5px var(--encre);text-shadow:4px 4px 0 var(--encre);letter-spacing:.5px;transform:rotate(-2deg)}
h2{font-family:var(--titre);font-weight:400;font-size:30px;margin:0;line-height:1.05}
p{margin:0;line-height:1.4}
.petit{font-size:14px;opacity:.75}
.choix{display:flex;gap:12px;flex-wrap:wrap}
.choix>*{flex:1 1 180px}
button,.champ{font-family:var(--titre);font-size:20px;border:3px solid var(--encre);border-radius:14px;padding:12px 16px;color:var(--encre)}
button{background:var(--soleil);cursor:pointer;box-shadow:4px 4px 0 var(--encre);transition:transform .08s,box-shadow .08s}
button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--encre)}
button:focus-visible,.champ:focus-visible{outline:4px solid var(--carotte);outline-offset:2px}
button.orange{background:var(--carotte);color:#fff}
button.sobre{background:#fff}
button:disabled{opacity:.5;cursor:default}
button small{display:block;font-family:var(--texte);font-weight:600;font-size:13px;margin-top:3px}
.champ{background:#fff;width:100%;text-align:center;-webkit-user-select:text;user-select:text;font-size:16px;font-family:var(--texte);font-weight:800}
.ligne{display:flex;gap:8px;align-items:stretch}
.ligne .champ{flex:1;min-width:0}
.code{font-family:var(--titre);font-size:40px;letter-spacing:6px;color:var(--carotte);-webkit-text-stroke:1.5px var(--encre);-webkit-user-select:text;user-select:text}
.attente::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:pts 1.2s steps(4) infinite}
@keyframes pts{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.regles{text-align:left;background:#fff;border:3px solid var(--encre);border-radius:14px;padding:12px 14px;font-size:15px}
.regles b{color:var(--carotte)}
.erreur{color:var(--danger);font-weight:800}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 0;display:flex;gap:8px;align-items:flex-start;pointer-events:none;z-index:6}
.puce{background:var(--creme);border:3px solid var(--encre);border-radius:999px;padding:5px 12px;font-family:var(--titre);font-size:17px;box-shadow:3px 3px 0 var(--encre);font-variant-numeric:tabular-nums}
#hud .espace{flex:1}
#hud button{pointer-events:auto;font-size:15px;padding:6px 12px;border-radius:999px;box-shadow:3px 3px 0 var(--encre)}
#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%) rotate(-2deg);z-index:7;pointer-events:none;
  font-family:var(--titre);font-size:clamp(22px,5vw,34px);color:#fff;-webkit-text-stroke:1.5px var(--encre);text-shadow:3px 3px 0 var(--encre);
  text-align:center;width:90%;opacity:0;transition:opacity .2s}
#toast.vu{opacity:1}
#decompte{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:8;pointer-events:none;
  font-family:var(--titre);font-size:min(40vw,240px);color:var(--soleil);-webkit-text-stroke:5px var(--encre);text-shadow:8px 8px 0 var(--encre)}

/* ---------- le seau (vue du fuyard) ---------- */
#seau{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4;background:transparent}
#seau.noir{background:#0b1016}
#fente{position:absolute;left:50%;bottom:-8vh;width:max(135vw,125vh);height:40%;transform-origin:50% 100%;
  border-radius:50% 50% 0 0/100% 100% 0 0;border-top:12px solid #9db3c2;
  box-shadow:0 0 0 300vmax #0b1016,inset 0 26px 40px rgba(5,10,16,.75)}
#seau-msg{position:absolute;left:0;right:0;top:38%;text-align:center;color:#8fa6b6;font-family:var(--titre);font-size:22px;padding:0 20px}
#alerte{position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 120px 40px var(--danger);opacity:0}

/* ---------- commandes tactiles ---------- */
#tactile{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
#tactile .grp{display:grid;gap:10px;pointer-events:auto}
#tactile .g{grid-template-columns:repeat(2,72px)}
#tactile .d{grid-template-columns:repeat(2,72px);grid-template-areas:"s a" "s r"}
#tactile button{width:72px;height:72px;padding:0;font-size:28px;border-radius:50%;background:rgba(255,246,220,.85);touch-action:none}
#tactile button.on{background:var(--soleil);transform:translate(3px,3px);box-shadow:1px 1px 0 var(--encre)}
#b-saut{grid-area:s;align-self:end;font-size:16px!important;background:rgba(255,122,26,.9)!important;color:#fff}
#b-av{grid-area:a}#b-re{grid-area:r}
@media (prefers-reduced-motion:reduce){.attente::after{animation:none;content:"..."}}

/* ---------- choix de la langue ---------- */
.langues{display:flex;gap:6px;justify-content:flex-end;margin:-12px -10px -4px 0}
.langues button{font-size:14px;padding:4px 10px;border-radius:10px;box-shadow:2px 2px 0 var(--encre)}
.langues button.actif{background:var(--carotte);color:#fff}

/* ---------- vidéo d'introduction ---------- */
button.lien-video{align-self:center;background:none;border:none;box-shadow:none;padding:2px 8px;font-size:18px;color:var(--carotte);text-decoration:underline;text-underline-offset:3px}
button.lien-video{animation:flotte 1.8s ease-in-out infinite}
button.lien-video:hover,button.lien-video:focus-visible{animation-play-state:paused}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){button.lien-video{animation:none}}
#e-video{z-index:30;align-items:center}
.carte-video{position:relative;width:min(860px,100%);padding:12px}
#video{display:block;width:100%;max-height:78vh;border-radius:12px;background:#000}
.fermer{position:absolute;top:-16px;right:-16px;z-index:1;width:44px;height:44px;padding:0;border-radius:50%;font-size:20px}