/* Accueil du jeu (08-accueil.js) et message du telephone couche : memes couleurs, polices et boutons que la ville
   (combat.css) ; le haut, la scene, la frise et le bas comme en jeu, la scene un peu moins haute (place des boutons
   et de la sauvegarde sur un petit telephone). */
.accueil { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--sable); }
.accueil-haut { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--terre-fonce); }
.retour-portail { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
                  font: 800 15px Nunito, sans-serif; color: var(--encre); text-decoration: none; background: var(--sable);
                  border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 #5e2410; }
.retour-portail:active { transform: translateY(3px); box-shadow: 0 1px 0 #5e2410; }
.accueil-haut button.son { margin-left: auto; }
/* le bouton son (01-son.js), dessine comme « ← Petit Olympe » ; le meme dans le sac (combat.css) */
button.son { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--encre);
             background: var(--sable); border: 3px solid var(--encre); border-radius: 10px; box-shadow: 0 4px 0 #5e2410;
             cursor: pointer; }
button.son svg { width: 22px; height: 22px; }
button.son:active { transform: translateY(3px); box-shadow: 0 1px 0 #5e2410; }

/* la route d'Athenes : le premier plan du film de Marathon (le portique, l'Acropole au loin) */
.accueil-scene { position: relative; flex: 0 0 50cqh; overflow: hidden;
                 background: url(../assets/decors/course-marathon.webp) left bottom / auto 100% no-repeat; }
.accueil-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.titre { position: absolute; left: 50%; top: 5cqh; transform: translateX(-50%); width: min(86%, 340px);
         padding: 12px 18px 14px; text-align: center; background: var(--sable); border: 3px solid var(--encre);
         border-radius: 14px; box-shadow: 0 5px 0 var(--terre-fonce); }
.titre h1 { font: 700 30px/1.05 Cinzel, serif; color: var(--terre-fonce); }
.titre h1 small { display: block; font-size: 20px; color: var(--terre); }
.titre p { margin-top: 8px; font-size: 15px; line-height: 1.35; text-wrap: balance; }

.accueil-bas { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
               gap: 12px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); color: var(--sable);
               background: var(--terre);
               background-image: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.08) 18px 20px); }
.accueil-bas button { min-height: 48px; padding: 0 26px; font: 800 17px Nunito, sans-serif; color: var(--encre);
                      background: var(--sable); border: 3px solid var(--encre); border-radius: 12px;
                      box-shadow: 0 5px 0 #5e2410; cursor: pointer; }
.accueil-bas button:active { transform: translateY(4px); box-shadow: 0 1px 0 #5e2410; }
.accueil-bas .jouer { min-width: 200px; min-height: 58px; font-size: 21px; background: var(--or); }
.accueil-bas .jouer small { display: block; margin-top: -2px; font-size: 13px; }
.accueil-bas .gestes { min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: 0 4px 0 #5e2410; }
/* la sauvegarde et les liens, sur un fond plus sombre (lisibles en petit) */
.pied { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 360px; margin-top: 4px;
        padding: 10px 14px 6px; background: var(--terre-fonce); border-radius: 12px; }
.sauvegarde { font-size: 13px; line-height: 1.35; text-align: center; text-wrap: balance; }
.accueil-bas a { color: #fff3c9; font-weight: 800; }
.liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; font-size: 13px; }
.liens a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-height: 700px) {
  .accueil-scene { flex-basis: 46cqh; }
  .titre { top: 3cqh; padding: 8px 14px 10px; }
  .titre h1 { font-size: 26px; }
  .titre p { font-size: 14px; }
  .accueil-bas { gap: 8px; }
}
@media (hover: hover) {
  .retour-portail:hover, .accueil-bas button:hover { filter: brightness(1.06); }
}

/* telephone couche (meme regle que matchMedia dans 09-demarrage.js) : le jeu attend qu'on le tourne */
.tourne { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .tourne { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 14px; padding: 20px; text-align: center; background: var(--terre-fonce); }
  .tourne svg { width: 72px; height: 72px; }
  .tourne p { max-width: 320px; font: 800 16px/1.35 Nunito, sans-serif; color: var(--sable); }
  .tourne b { display: block; margin-bottom: 4px; font: 700 22px Cinzel, serif; color: var(--or); }
}