/* ── Pasto World — l'écran seul. Le téléphone est le hardware. ───────
   Le contenu reste du HTML sémantique (lisible par les assistants) ;
   tout l'habillage est ici. Palette LCD : 4 verts.                    */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --lcd0:#0f380f; --lcd1:#306230; --lcd2:#8bac0f; --lcd3:#9bbc0f;
  --room:#141416; --bezel:#2a2c31;
  --pix:"Press Start 2P",ui-monospace,Menlo,monospace;
  --mono:"VT323",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--lcd3)}
body{margin:0;min-height:100svh;background:var(--lcd3);color:var(--lcd0);font:22px/1.3 var(--mono);-webkit-font-smoothing:none}

/* L'écran : plein cadre sur mobile, centré dans un fin biseau sur grand écran */
.screen{position:relative;min-height:100svh;padding:14px 16px 28px;max-width:100%}
@media (min-width:700px){
  html,body{background:var(--room)}
  .screen{max-width:620px;min-height:auto;margin:32px auto;border:10px solid var(--bezel);border-radius:8px 8px 28px 8px;
    box-shadow:0 0 0 2px #000,0 30px 80px rgba(0,0,0,.6);background:var(--lcd3);padding:18px 22px 30px}
}

/* Barre d'état en haut de l'écran */
.bar{display:flex;align-items:center;gap:10px;font:8px var(--pix);color:var(--lcd1);letter-spacing:.06em;margin:0 0 14px;padding-bottom:8px;border-bottom:2px dotted var(--lcd1);text-transform:uppercase}
.bar .dot{width:7px;height:7px;background:var(--lcd0);box-shadow:0 0 0 2px var(--lcd2)}
.bar .sp{flex:1}
.bar a{color:var(--lcd1);text-decoration:none}

/* Contenu */
h1{font:14px/1.5 var(--pix);margin:0 0 .8em;text-transform:uppercase}
h2{font:10px/1.6 var(--pix);margin:1.6em 0 .5em;text-transform:uppercase;border-bottom:2px dotted var(--lcd1);padding-bottom:.3em}
p,li{margin:0 0 .7em}
ol,ul{padding-left:1.2em}
.lead{color:var(--lcd1)}
a{color:var(--lcd0);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
code{font-family:var(--mono);background:var(--lcd2);padding:0 4px}
.small,.note{font-size:18px;color:var(--lcd1)}
.fragment{display:inline-block;font:16px/1 var(--pix);letter-spacing:.1em;background:var(--lcd0);color:var(--lcd3);padding:10px 14px;margin:.5em 0}
img{max-width:100%;height:auto;display:block;border:3px solid var(--lcd0)}
textarea,input{width:100%;font:18px/1.35 var(--mono);padding:8px;border:3px solid var(--lcd0);background:var(--lcd2);color:var(--lcd0);outline:none;border-radius:0}
textarea{min-height:12rem}
label{display:block;font:9px var(--pix);margin:.9em 0 .35em;text-transform:uppercase}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:.9em 0}
.btn{display:inline-block;font:9px/1 var(--pix);padding:10px 12px;border:3px solid var(--lcd0);background:var(--lcd2);color:var(--lcd0);text-decoration:none !important;cursor:pointer;box-shadow:3px 3px 0 var(--lcd0)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--lcd0)}
.btn.primary{background:var(--lcd0);color:var(--lcd3);box-shadow:3px 3px 0 var(--lcd1)}
.credits{margin-top:2.5em;padding-top:.8em;border-top:2px dotted var(--lcd1);font-size:17px;color:var(--lcd1)}
.credits a{color:var(--lcd1)}

/* Texte présent dans la page mais pas affiché : écrit pour le guide.
   (Les assistants lisent le texte sans calculer le CSS ; l'humain ne le voit pas.) */
.ghost{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Navigation bas d'écran */
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:2em;font:9px var(--pix)}
.nav a{text-decoration:none;border:3px solid var(--lcd0);padding:8px 10px;box-shadow:3px 3px 0 var(--lcd0)}
.nav a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--lcd0)}
.nav .sp{flex:1}

/* Boot */
.boot{position:fixed;inset:0;background:var(--lcd3);display:flex;align-items:center;justify-content:center;z-index:9;animation:bootout .4s ease-in 1.6s forwards}
.boot span{font:16px var(--pix);color:var(--lcd0);animation:drop 1.4s steps(14) forwards}
@keyframes drop{from{transform:translateY(-220px);opacity:.2}to{transform:none;opacity:1}}
@keyframes bootout{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.boot{display:none}}