/* Base : marges nulles et zones sûres des écrans à encoche (viewport-fit=cover). */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
/* Layout : une console d'arcade centrée, l'écran pixel art en 16:9, contrôles tactiles dessous. Look unique sombre assumé. */
:root{
  --night:#140f1c;
  --panel:#211a2c;
  --ink:#f4f1e8;
  --dim:#a99fb8;
  --gold:#f2c14e;
  --red:#d8433b;
  --outline:#1a1423;
  --f-display:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --f-text:"VT323", ui-monospace, "Courier New", monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--f-text);
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background-image:radial-gradient(circle at 50% 0%, #2a2040 0%, transparent 60%);
  -webkit-user-select:none;user-select:none;
}
header{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
h1{font-family:var(--f-display);font-size:clamp(14px,3.2vw,22px);margin:0;letter-spacing:.06em;color:var(--gold);text-shadow:3px 3px 0 var(--red);text-wrap:balance}
.sub{font-family:var(--f-display);font-size:9px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase}

.console{width:100%;max-width:960px;background:var(--panel);padding:10px;box-shadow:0 0 0 3px var(--outline),0 0 0 6px #3a2f4d,8px 8px 0 6px #0b0810}
.screen{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}

.hud{position:absolute;top:3%;left:2.5%;font-family:var(--f-display);font-size:clamp(7px,1.3vw,11px);background:rgba(26,20,35,.82);color:var(--ink);padding:.6em .8em;box-shadow:0 0 0 2px var(--ink);line-height:1.6;max-width:72%}
.hud b{color:var(--gold);font-weight:400}
.topbtns{position:absolute;top:3%;right:2.5%;display:flex;gap:8px;z-index:3}
.menu-btn{font-family:var(--f-display);font-size:clamp(7px,1.3vw,11px);background:rgba(26,20,35,.82);color:var(--ink);border:0;padding:.6em .8em;box-shadow:0 0 0 2px var(--ink);cursor:pointer;z-index:2}
.menu-btn:hover{background:#3a2f4d}
.menu-btn:focus-visible{outline:3px solid #9fd6e0;outline-offset:3px}

.dialog{position:absolute;left:3%;right:3%;bottom:4%;background:var(--outline);box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--outline);padding:.5em 1em .7em;cursor:pointer;min-height:22%}
.dialog .who{font-family:var(--f-display);font-size:clamp(7px,1.3vw,11px);color:var(--gold);margin-bottom:.4em;letter-spacing:.05em}
.dialog .who.prof{color:#9fd6e0}
.dialog .who.cant{color:#f29bb1}
.dialog .who.tao{color:#f0995a}
.dialog .who.pote{color:#9ccf7a}
.dialog .txt{font-size:clamp(17px,3.3vw,30px);line-height:1.05;min-height:1.1em}
.dialog .next{position:absolute;right:1em;bottom:.5em;font-family:var(--f-display);font-size:10px;color:var(--gold);animation:blink .8s steps(2) infinite}

.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:1.1em;text-align:center;background:rgba(20,15,28,.8);padding:4%;overflow:auto}
.overlay .credits-list{font-size:clamp(15px,2.4vw,21px);color:var(--dim);max-width:44ch}
.overlay h2{font-family:var(--f-display);font-size:clamp(16px,4.4vw,38px);margin:0;color:var(--gold);text-shadow:3px 3px 0 var(--red);letter-spacing:.04em}
.overlay p{margin:0;font-size:clamp(17px,3vw,26px);color:var(--ink);max-width:34ch}
.overlay .tag{font-family:var(--f-display);font-size:clamp(7px,1.3vw,10px);color:var(--dim);letter-spacing:.15em;text-transform:uppercase}
.overlay q{color:#9fd6e0}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.lvl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,560px)}
.lvl-grid .btn{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.dialog{padding:.35em .7em .5em}.dialog .txt{font-size:16px}.overlay{gap:.6em}.overlay p{font-size:16px}.overlay .credits-list{font-size:14px}.lvl-grid{gap:6px}}
.btn{font-family:var(--f-display);font-size:clamp(9px,1.6vw,13px);background:var(--gold);color:var(--outline);border:0;padding:1em 1.4em;cursor:pointer;box-shadow:0 0 0 3px var(--outline),4px 4px 0 3px var(--red)}
.btn:hover{background:#ffd56b}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 3px var(--outline),2px 2px 0 3px var(--red)}
.btn.ghost{background:#3a2f4d;color:var(--ink);box-shadow:0 0 0 3px var(--outline)}
.btn.ghost:hover{background:#4a3d61}
.btn.small{font-size:clamp(7px,1.2vw,10px);padding:.8em 1em}
.btn:focus-visible,.pad:focus-visible{outline:3px solid #9fd6e0;outline-offset:4px}

.pads{display:none;width:100%;max-width:960px;justify-content:space-between;gap:12px}
.pads .grp{display:flex;gap:12px}
.pad{width:64px;height:64px;border:0;background:#3a2f4d;color:var(--ink);font-family:var(--f-display);font-size:14px;box-shadow:0 0 0 3px var(--outline),0 5px 0 3px #0b0810;touch-action:none}
.pad.on{background:var(--gold);color:var(--outline);transform:translateY(3px);box-shadow:0 0 0 3px var(--outline),0 2px 0 3px #0b0810}
.pad.a{background:var(--red)}
@media (pointer:coarse){.pads{display:flex}.keys{display:none}}
.keys{font-family:var(--f-display);font-size:8px;color:var(--dim);letter-spacing:.08em;line-height:2;text-align:center}
.keys kbd{font-family:inherit;color:var(--ink);background:#3a2f4d;padding:2px 5px;box-shadow:0 2px 0 #0b0810}
footer{font-size:18px;color:var(--dim)}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dialog .next{animation:none}}

/* Plot twist 3D de la fin (js/fin3d/) : canevas WebGL et éléments par-dessus le jeu, sous la boîte de dialogue */
.screen canvas.f3{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto}
.f3-fondu{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.f3-bandeau{position:absolute;left:50%;top:5%;transform:translateX(-50%);max-width:70%;font-family:var(--f-display);font-size:clamp(7px,1.3vw,11px);line-height:1.5;letter-spacing:.08em;text-align:center;color:var(--gold);background:var(--outline);padding:.8em 1.2em;box-shadow:0 0 0 3px var(--gold),0 0 0 6px var(--outline);animation:f3-clignote 1s steps(2) infinite}
.f3-strat{position:absolute;left:3%;top:20%;font-family:var(--f-display);font-size:clamp(7px,1.3vw,11px);line-height:1.8;color:var(--ink);background:rgba(26,20,35,.88);padding:.9em 1.1em;box-shadow:0 0 0 2px var(--gold)}
.f3-strat-titre{color:var(--dim);font-size:.8em;letter-spacing:.15em}
.f3-strat-nom{color:var(--gold)}
.f3-strat-code{font-size:1.9em;letter-spacing:.25em;margin:.3em 0}
.f3-strat-code span{color:#5b5b66}
.f3-strat-code span.ok{color:var(--gold);text-shadow:0 0 6px var(--gold)}
.f3-strat-aide{color:var(--dim);font-size:.8em}
.f3-strat.faux{animation:f3-faux .3s}
.f3-strat.fini{box-shadow:0 0 0 2px #9fd6e0}
.f3-pad{position:absolute;right:3%;bottom:5%;display:grid;grid-template-columns:repeat(3,clamp(34px,9vw,52px));grid-template-rows:repeat(3,clamp(34px,9vw,52px));gap:4px}
.f3-pad button{border:0;background:#3a2f4d;color:var(--ink);font-size:16px;box-shadow:0 0 0 2px var(--outline),0 3px 0 2px #0b0810;touch-action:none}
.f3-pad button:active{background:var(--gold);color:var(--outline)}
.f3-pad .f3-H{grid-area:1/2}.f3-pad .f3-G{grid-area:2/1}.f3-pad .f3-D{grid-area:2/3}.f3-pad .f3-B{grid-area:3/2}
@keyframes f3-clignote{50%{opacity:.75}}
@keyframes f3-faux{25%{transform:translateX(-6px);box-shadow:0 0 0 2px var(--red)}75%{transform:translateX(6px);box-shadow:0 0 0 2px var(--red)}}
@media (prefers-reduced-motion:reduce){.f3-bandeau,.f3-strat.faux{animation:none}}