/* =========================================================
   JEUX OS — feuille commune (menu + 3 jeux)
   Module isolé : aucun fichier extérieur, aucune police web.
   Pensé pour iOS 9.3 / Safari 9 et les vieilles tablettes.
   Palette 4 tons façon Game Boy.
   ========================================================= */
html,body{
  margin:0; padding:0; height:100%;
  background:#0f380f; color:#9bbc0f;
  font-family:"Courier New",Courier,monospace;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a{ color:#9bbc0f; }

/* ---------- MENU ---------- */
.os-menu{ max-width:560px; margin:0 auto; padding:14px 16px 30px; }
.os-retour{ display:inline-block; padding:12px 0; font-size:16px; font-weight:bold; text-decoration:none; }
.os-menu h1{ margin:8px 0 4px; font-size:34px; letter-spacing:4px; }
.os-menu p{ margin:0 0 18px; font-size:15px; line-height:1.5; color:#8bac0f; }
.os-jeu{
  display:block; margin:0 0 14px; padding:18px 16px;
  background:#306230; border:4px solid #9bbc0f;
  text-decoration:none; color:#9bbc0f; font-size:26px; font-weight:bold; letter-spacing:3px;
  min-height:56px; line-height:56px;
}
.os-jeu:active{ background:#9bbc0f; color:#0f380f; }
.os-jeu small{ display:block; font-size:13px; line-height:1.4; letter-spacing:0; font-weight:normal; color:#8bac0f; }
.os-jeu:active small{ color:#0f380f; }
/* Icônes en pixels (box-shadow) : pas d'image, pas d'emoji récent */
.os-ico{ float:left; width:56px; height:56px; margin-right:16px; position:relative; }
.os-ico i{ position:absolute; left:0; top:0; width:8px; height:8px; background:transparent; }
.ico-snake i{ box-shadow:8px 8px #9bbc0f,16px 8px #9bbc0f,24px 8px #9bbc0f,24px 16px #9bbc0f,24px 24px #9bbc0f,32px 24px #9bbc0f,40px 24px #9bbc0f,40px 32px #9bbc0f,40px 40px #0f380f,16px 40px #8bac0f; }
.ico-tetris i{ box-shadow:8px 16px #9bbc0f,16px 16px #9bbc0f,24px 16px #9bbc0f,16px 24px #9bbc0f,32px 32px #8bac0f,40px 32px #8bac0f,32px 40px #8bac0f,40px 40px #8bac0f; }
.ico-quest i{ box-shadow:16px 0 #9bbc0f,24px 0 #9bbc0f,16px 8px #9bbc0f,24px 8px #8bac0f,8px 16px #9bbc0f,16px 16px #9bbc0f,24px 16px #9bbc0f,32px 16px #9bbc0f,16px 24px #9bbc0f,24px 24px #9bbc0f,8px 32px #9bbc0f,32px 32px #9bbc0f,0 40px #8bac0f,8px 40px #8bac0f,16px 40px #8bac0f,24px 40px #8bac0f,32px 40px #8bac0f,40px 40px #8bac0f; }
.ico-tower i{ box-shadow:0 0 #8bac0f,8px 0 #8bac0f,16px 0 #8bac0f,24px 16px #9bbc0f,32px 16px #9bbc0f,40px 16px #9bbc0f,0 32px #9bbc0f,8px 32px #9bbc0f,16px 32px #9bbc0f,32px 24px #9bbc0f,32px 32px #8bac0f,32px 40px #9bbc0f; }
.ico-course i{ box-shadow:24px 0 #9bbc0f,16px 8px #9bbc0f,24px 8px #9bbc0f,32px 8px #9bbc0f,24px 16px #0f380f,16px 24px #9bbc0f,24px 24px #9bbc0f,32px 24px #9bbc0f,16px 32px #9bbc0f,32px 32px #9bbc0f,24px 40px #9bbc0f,8px 8px #8bac0f,8px 40px #8bac0f,40px 8px #8bac0f,40px 40px #8bac0f; }

/* ---------- ÉCRAN DE JEU ---------- */
body.os-j{ overflow:hidden; position:fixed; width:100%;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#barre{
  position:absolute; left:0; right:0; top:0; height:44px; line-height:44px;
  background:#306230; font-size:16px; font-weight:bold; white-space:nowrap; overflow:hidden;
  display:-webkit-box; display:-webkit-flex; display:flex;
}
#barre > *{ display:block; padding:0 10px; }
#retour{ text-decoration:none; }
#titre{ -webkit-box-flex:1; -webkit-flex:1; flex:1; letter-spacing:2px; overflow:hidden; }
#sc{ color:#0f380f; background:#9bbc0f; }
#pause{ min-width:24px; text-align:center; cursor:pointer; border-left:2px solid #0f380f; }

#zone{ position:absolute; left:0; right:0; top:44px; bottom:0; overflow:hidden; touch-action:none; }
#cadre{ position:absolute; left:0; top:0; }
#jeu{ display:block; background:#9bbc0f; }
.pad{ position:absolute; text-align:center; }
.btn{
  display:inline-block; margin:6px; text-align:center; vertical-align:middle;
  background:#306230; color:#9bbc0f; border:4px solid #8bac0f;
  font-weight:bold; cursor:pointer; touch-action:manipulation;
}
.btn.on{ background:#9bbc0f; color:#0f380f; }
body.pay .btn{ display:block; margin:8px auto; }

/* Écran titre / pause / game over, posé sur le canvas */
#ecran{
  position:absolute; left:0; top:0; right:0; bottom:0;
  background:#0f380f; background:rgba(15,56,15,.88);
  text-align:center; color:#9bbc0f;
}
#ecran.cache{ display:none; }
#e-in{ position:absolute; left:0; right:0; top:50%; margin-top:-80px; }
#e-titre{ font-size:26px; font-weight:bold; letter-spacing:3px; margin:0 6px 8px; }
#e-msg{ font-size:15px; line-height:1.5; margin:0 8px 14px; min-height:22px; }
#e-btn{
  display:inline-block; padding:0 22px; height:60px; line-height:60px;
  background:#9bbc0f; color:#0f380f; font-size:20px; font-weight:bold; letter-spacing:2px;
  border:4px solid #8bac0f; cursor:pointer;
}

/* =========================================================
   AJOUT — commandes et appareils
   · pas de défilement / rebond pendant le jeu ;
   · boutons sans zoom au double appui, sans sélection de texte.
   ========================================================= */
body.os-j{ overflow:hidden; overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.btn{ touch-action:none; -webkit-user-select:none; user-select:none; min-width:48px; min-height:48px; }
#e-btn, #pause{ touch-action:manipulation; }
#e-msg small{ font-size:12px; line-height:1.4; }