/* =========================================================================
   Snacky Snake — feuille de style.
   Plein écran, priorité iPhone portrait, zones sécuritaires, aucun geste natif
   parasite. L'interface est fixe au-dessus du Canvas.
   ========================================================================= */

:root{
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --accent:#325aaf;
  --accent-2:#5a82e0;
  --ink:#22323f;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  background:#7fc26b;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

body{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:6px;
  gap:6px;
}
body>.gx-site-header,
body>.gx-site-footer{
  width:100%;
  max-width:540px;
  margin:0 auto;
  flex:none;
}
body>.gx-site-footer .gx-site-footer__inner{
  min-height:48px;
  padding:7px 10px;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  text-align:left;
}
body>.gx-site-footer .gx-site-footer__brand{
  justify-content:flex-start;
  flex-direction:row;
  gap:8px;
}
body>.gx-site-footer .gx-site-footer__brand img{height:28px;}
body>.gx-site-footer .gx-site-footer__tagline,
body>.gx-site-footer .gx-site-footer__nav{display:none;}
body>.gx-site-footer .gx-site-language{justify-content:flex-end;margin-left:0;}
#snake-shell{
  position:relative;
  height:100%;
  width:auto;
  max-width:100%;
  aspect-ratio:9 / 16;
  justify-self:center;
  min-height:0;
  overflow:hidden;
  border-radius:16px;
}

/* Conteneur plein écran : barre haute (stats) · plateau · barre basse (curseur) */
#game-wrap{
  position:absolute; inset:0;
  display:block;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background:#4f8f4c; /* extérieur du plateau : masque tout ce qui déborde du canvas */
}
#bottombar{
  position:absolute;inset:0;z-index:12;pointer-events:none;
}

/* Le shell complet est limité à 9:16 sur ordinateur. Le plateau utilise toute
   sa largeur; sur mobile le shell devient pleine largeur et utilise la hauteur
   restante sans imposer un second ratio à l'intérieur. */
#stage{
  position:absolute;inset:0;
  align-self:stretch;
  width:100%; max-width:100%;
  border-radius:24px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
#game-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; touch-action:none;
}
/* Cadre décoratif sur le bord du plateau */
#game-frame{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  border:4px solid rgba(255,255,255,.8); border-radius:24px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
}


.hidden{ display:none !important; }

/* ---------- HUD (stats en haut à gauche, sous le logo) ---------- */
.hud{
  position:absolute; top:max(7px,var(--safe-t)); left:8px; right:8px; z-index:18;
  display:flex; align-items:center; justify-content:space-between; gap:7px;
  height:56px;
  padding:7px 8px;
  border:2px solid rgba(113,74,31,.72);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(247,227,154,.94),rgba(171,124,55,.92));
  box-shadow:0 4px 0 rgba(75,49,24,.55),0 7px 15px rgba(22,48,20,.28);
}
.hud.hidden{display:none!important;}

#frame-tools{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:5px;
  flex:0 0 auto;
}

.chips{ display:flex; gap:5px; flex-wrap:nowrap; pointer-events:none; min-width:0; height:40px; }
.chip{
  background:linear-gradient(180deg,rgba(255,250,217,.96),rgba(230,208,137,.94));
  border:1px solid rgba(110,72,31,.5);
  border-radius:12px; padding:4px 7px; color:#385022;
  font-size:10px; line-height:1.1; text-align:center; min-width:48px;
  height:40px; overflow:hidden; white-space:nowrap;
  box-shadow:inset 0 1px rgba(255,255,255,.8),0 2px 3px rgba(70,48,20,.2);
}
.chip b{
  display:block; font-size:15px; line-height:18px; color:#203d1b;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.hud-buttons{ display:flex; gap:8px; pointer-events:auto; }
.icon-btn{
  width:38px; height:38px; border:2px solid rgba(71,92,35,.75); cursor:pointer;
  border-radius:50%; background:linear-gradient(180deg,#eaf4b4,#79a64a); color:#24431e;
  font-size:17px; box-shadow:inset 0 2px rgba(255,255,255,.58),0 3px 0 #49662d,0 5px 8px rgba(0,0,0,.2);
}
.icon-btn:active{ transform:scale(.96); }
.snake-leader-tool svg{display:block;width:23px;height:23px;margin:auto;fill:currentColor;}

/* ---------- Flèches de direction (bas de l'écran) ---------- */
.steer{
  position:absolute;left:0;right:0;bottom:max(9px,var(--safe-b));
  display:flex;align-items:flex-end;justify-content:space-between;
  width:100%;height:clamp(76px,14vh,118px);pointer-events:none;
}
.turn-btn{
  width:clamp(112px,27vw,154px);height:clamp(72px,14vw,92px);
  padding:0;border:0;border-radius:0;background-color:transparent;
  background-position:center;background-repeat:no-repeat;background-size:contain;
  filter:drop-shadow(0 5px 4px rgba(29,48,17,.42));
  touch-action:none;cursor:pointer;
  pointer-events:auto;
}
.turn-left{background-image:url("../assets/images/ui/turn-left-v38.webp");margin-left:-4px;}
.turn-right{background-image:url("../assets/images/ui/turn-right-v38.webp");margin-right:-4px;}
.turn-btn.pressed,.turn-btn:active{transform:translateY(3px) scale(.94);filter:brightness(1.12) drop-shadow(0 3px 2px rgba(29,48,17,.4));}

/* ---------- Écrans (menu / pause / gameover) ---------- */
.screen{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  background:rgba(20,40,25,.28); backdrop-filter:blur(2px);
}
#screen-gameover{
  justify-content:flex-end;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  padding:0;
}
#screen-gameover[data-collision="rock"]{background-image:linear-gradient(rgba(10,35,18,.08),rgba(10,35,18,.30)),url("../assets/images/gameover-rock-v35.jpg");}
#screen-gameover[data-collision="bush"]{background-image:linear-gradient(rgba(10,35,18,.08),rgba(10,35,18,.30)),url("../assets/images/gameover-bush-v35.jpg");}
#screen-gameover[data-collision="stump"]{background-image:linear-gradient(rgba(10,35,18,.08),rgba(10,35,18,.30)),url("../assets/images/gameover-stump-v35.jpg");}
#screen-gameover[data-collision="pond"]{background-image:linear-gradient(rgba(10,35,18,.08),rgba(10,35,18,.30)),url("../assets/images/gameover-pond-v35.jpg");}
#screen-gameover .gameover-content{
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(24px,5vh,44px) max(20px,calc(var(--safe-r) + 20px)) max(24px,calc(var(--safe-b) + 24px));
  gap:10px;
  border:0;
  border-radius:0;
  color:#fff;
  background:linear-gradient(180deg,rgba(8,28,14,0),rgba(8,28,14,.78) 18%,rgba(8,28,14,.94));
  box-shadow:none;
  backdrop-filter:none;
}
#screen-gameover .panel h2{
  color:#fff;
  font-size:clamp(30px,7vw,44px);
  text-shadow:0 3px 12px rgba(0,0,0,.8);
}
#screen-gameover .over-line,
#screen-gameover .newbest{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
#screen-gameover .newbest{color:#e8ff8e;font-size:18px;}
.gameover-actions{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;width:min(440px,100%);margin-top:5px;}
#screen-gameover .big-btn,
#screen-gameover .ghost-btn{
  min-height:52px;margin:0;border:1px solid rgba(255,255,255,.45);
  color:#173a20;background:linear-gradient(180deg,#d9f57a,#85c946);
  box-shadow:0 5px 0 #397d35,0 9px 20px rgba(0,0,0,.3);
}
#screen-gameover .ghost-btn{color:#fff;background:rgba(24,75,35,.86);box-shadow:0 5px 0 #173f22,0 9px 20px rgba(0,0,0,.3);}
.share-title{font-size:13px;font-weight:800;margin-top:8px;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.88);}
.share-actions{display:flex;justify-content:center;gap:9px;width:min(440px,100%);}
.share-btn{
  min-width:46px;height:46px;padding:0 13px;border:1px solid rgba(255,255,255,.5);
  border-radius:23px;color:#fff;background:rgba(15,48,25,.82);
  font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.share-native{display:flex;align-items:center;gap:7px;padding:0 17px;}
.share-native span{font-size:14px;}
.share-facebook{background:#1877f2}.share-x{background:#111}.share-whatsapp{background:#25d366;font-size:12px}
.share-btn:active{transform:scale(.96);}
#screen-menu{
  background:
    linear-gradient(180deg,rgba(8,32,18,.04) 0%,rgba(8,32,18,.08) 48%,rgba(7,28,15,.52) 100%),
    url("../assets/images/menu-background-v29.jpg") center/cover no-repeat;
  justify-content:flex-end;
  padding-bottom:max(calc(var(--safe-b) + 36px),8vh);
}
#screen-menu .panel{
  width:min(88%,420px);
  max-width:420px;
  padding:18px 12px;
  gap:10px;
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
  border:0;
}
#screen-menu .game-title{
  color:#fff;
  font-size:clamp(42px,10vw,62px);
  line-height:1;
  text-shadow:0 4px 0 rgba(25,86,37,.72),0 8px 20px rgba(0,0,0,.5);
}
#screen-menu .hint{
  color:#fff;
  font-size:16px;
  font-weight:750;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
#screen-menu .big-btn{
  width:min(310px,100%);
  min-height:58px;
  border:2px solid rgba(230,255,179,.75);
  color:#173a20;
  background:linear-gradient(180deg,#d9f57a,#85c946);
  box-shadow:0 7px 0 #397d35,0 12px 25px rgba(0,0,0,.34);
}
#screen-menu .ghost-btn{
  min-height:46px;
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(17,64,29,.72);
  box-shadow:0 5px 15px rgba(0,0,0,.25);
}
.panel{
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border-radius:22px; padding:26px 24px; text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  max-width:min(420px, 88vw); width:100%;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.game-title{ margin:0; font-size:34px; font-weight:800; color:var(--ink); letter-spacing:.5px; }
.panel h2{ margin:0; font-size:26px; color:var(--ink); }
.hint{ margin:0; color:#5a6b80; font-size:15px; }
.over-line{ color:var(--ink); font-size:17px; font-weight:600; }
.newbest{ color:#2e9e6b; font-weight:800; font-size:16px; }

.big-btn{
  border:none; cursor:pointer; width:100%; min-height:52px;
  border-radius:26px; background:var(--accent); color:#fff;
  font-size:18px; font-weight:800; margin-top:4px;
}
.big-btn:active{ transform:translateY(1px); }
.ghost-btn{
  border:none; cursor:pointer; min-height:44px; padding:0 18px;
  border-radius:22px; background:rgba(0,0,0,.06); color:var(--ink);
  font-size:15px; font-weight:600;
}

/* ---------- Barre de langues ---------- */
.langbar{
  position:absolute; left:0; right:0;
  bottom:calc(var(--safe-b) + 12px);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:0 14px; max-width:100%;
  display:none !important;
}
.langbar button{
  width:34px; height:34px; padding:0; border:none; background:none; cursor:pointer;
  border-radius:50%; overflow:hidden; opacity:.55;
  transition:opacity .12s, transform .12s, box-shadow .12s;
}
.langbar button svg{ display:block; width:100%; height:100%; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.langbar button:hover{ opacity:1; transform:scale(1.08); }
.langbar button.active{ opacity:1; box-shadow:0 0 0 3px var(--accent-2); }

/* ---------- Indice paysage ---------- */
.landscape-hint{
  position:absolute; z-index:30; left:50%; bottom:calc(var(--safe-b) + 10px);
  transform:translateX(-50%);
  background:rgba(255,255,255,.9); color:var(--ink);
  padding:8px 14px; border-radius:16px; font-size:13px; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18); max-width:80vw;
}

/* ---------- Classement ---------- */
.snake-leader-overlay{
  position:absolute;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:14px;background:rgba(10,24,16,.72);backdrop-filter:blur(4px);
}
.snake-leader-overlay.show{display:flex;}
.snake-leader-card{
  width:min(500px,100%);max-height:92%;overflow:auto;background:#fff;color:var(--ink);
  border-radius:20px;padding:18px;box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.snake-leader-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.snake-leader-top h2{margin:0;font-size:24px;}
.snake-leader-close{
  width:38px;height:38px;border:0;border-radius:50%;background:#edf1f5;color:var(--ink);
  cursor:pointer;font-size:26px;line-height:1;
}
.snake-leader-tabs{display:flex;gap:6px;overflow-x:auto;padding:14px 0 10px;}
.snake-leader-tab{
  flex:0 0 auto;border:0;border-radius:18px;background:#edf1f5;color:#506174;
  padding:8px 11px;font-weight:800;cursor:pointer;
}
.snake-leader-tab.active{background:var(--accent);color:#fff;}
.snake-leader-head,.snake-leader-row{
  display:grid;grid-template-columns:36px minmax(90px,1fr) 78px 46px;
  align-items:center;gap:6px;padding:10px 3px;border-bottom:1px solid #e2e7ed;
}
.snake-leader-head{color:#718196;font-size:11px;font-weight:800;text-transform:uppercase;}
.snake-leader-row.me{background:#e8efff;border-radius:10px;}
.snake-leader-rank{text-align:center;font-weight:900;}
.snake-leader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750;}
.snake-leader-score,.snake-leader-games{text-align:right;font-variant-numeric:tabular-nums;}
.snake-leader-score{color:var(--accent);font-weight:900;}
.snake-leader-message{padding:24px 6px;text-align:center;color:#718196;}

@media(max-width:700px){
  body{padding:4px;gap:4px;}
  #snake-shell{
    width:calc(100% + 8px);
    height:100%;
    max-width:none;
    margin-left:-4px;
    margin-right:-4px;
    aspect-ratio:auto;
    border-radius:0;
    justify-self:stretch;
  }
  #stage{width:100%;border-radius:0;}
  #game-frame{border-left:0;border-right:0;border-radius:0;}
  body>.gx-site-header .gx-site-header__inner{padding-top:5px;padding-bottom:5px;grid-template-rows:38px 34px;}
  body>.gx-site-header .gx-site-brand img{height:36px;}
  body>.gx-site-footer .gx-site-footer__inner{padding:5px 8px;min-height:42px;}
  body>.gx-site-footer .gx-site-footer__brand img{height:24px;}
  body>.gx-site-footer .gx-site-footer__copy{font-size:10px;}
  body>.gx-site-footer .gx-site-language select{min-height:32px;}
  .hud{top:max(5px,var(--safe-t));padding:6px 7px;height:54px;}
  .chips{gap:4px;flex-wrap:nowrap;width:auto;}
  .chip{padding:4px 5px;min-width:0;flex:1;height:40px;}
  .chip b{font-size:14px;}
  #frame-tools{gap:4px;}
  .icon-btn{width:35px;height:35px;font-size:15px;}
  .steer{height:clamp(76px,15vh,112px);}
  .turn-btn{width:clamp(116px,31vw,148px);height:clamp(70px,20vw,92px);}
}

/* L'avertissement d'orientation ne doit jamais apparaître sur ordinateur. */
@media(min-width:701px){
  .landscape-hint{display:none !important;}
}