* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  font-family:'Trebuchet MS', 'Segoe UI', sans-serif;
  overflow:hidden;
}
#gameWrap {
  position:relative;
  width:800px;
  max-width:96vw;
  box-shadow:0 0 40px rgba(0,0,0,0.6);
  border-radius:14px;
  overflow:hidden;
  border:3px solid #2c2c2c;
}
canvas {
  display:block;
  width:100%;
  background:#87CEEB;
}
.overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:rgba(10,15,30,0.55);
  backdrop-filter:blur(2px);
}
.hidden { display:none; }
h1 {
  font-size:2.6em;
  margin-bottom:6px;
  text-shadow:0 3px 10px rgba(0,0,0,0.6);
  letter-spacing:1px;
}
h1 span { color:#ffcf6b; }
p.subtitle {
  margin-bottom:22px;
  font-size:1.05em;
  opacity:0.9;
}
.btn {
  padding:12px 34px;
  font-size:1.1em;
  border:none;
  border-radius:30px;
  background:linear-gradient(145deg,#ff9d5c,#f9764f);
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 6px 0 #c9542f, 0 8px 16px rgba(0,0,0,0.35);
  transition:transform .08s ease;
}
.btn:active {
  transform:translateY(4px);
  box-shadow:0 2px 0 #c9542f, 0 4px 10px rgba(0,0,0,0.35);
}
.instructions {
  margin-top:18px;
  font-size:0.85em;
  opacity:0.75;
}
#hud {
  position:absolute;
  top:12px;
  right:18px;
  color:#fff;
  font-size:1.3em;
  font-weight:bold;
  text-shadow:0 2px 4px rgba(0,0,0,0.5);
  pointer-events:none;
}
#goStats {
  font-size:1.15em;
  line-height:1.7;
  margin-bottom:20px;
}
#goStats b { color:#ffcf6b; }

/* ---- Écran de sélection de difficulté ---- */
.diffGrid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin:10px 0 14px;
}
.diffCard {
  width:150px;
  padding:16px 10px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-weight:bold;
  font-size:1.05em;
  cursor:pointer;
  transition:transform .1s ease, background .15s ease;
}
.diffCard:hover { transform:translateY(-3px); }
.diffCard small {
  display:block;
  font-weight:normal;
  font-size:0.75em;
  opacity:0.85;
  margin-top:4px;
}
.diffCard.facile    { border-color:#5fd16b; background:rgba(95,209,107,0.18); }
.diffCard.facile:hover    { background:rgba(95,209,107,0.32); }
.diffCard.normal     { border-color:#5fa8d1; background:rgba(95,168,209,0.18); }
.diffCard.normal:hover    { background:rgba(95,168,209,0.32); }
.diffCard.difficile  { border-color:#e8963f; background:rgba(232,150,63,0.18); }
.diffCard.difficile:hover { background:rgba(232,150,63,0.32); }
.diffCard.cauchemar {
  border-color:#c9484d;
  background:rgba(120,50,52,0.35);
  color:#d8b3b3;
  cursor:not-allowed;
  opacity:0.75;
}
.diffCard.cauchemar:hover { transform:none; background:rgba(120,50,52,0.35); }
#lockedMsg {
  font-size:0.9em;
  color:#ff9d9d;
  min-height:1.4em;
  margin-top:2px;
}
.backLink {
  margin-top:8px;
  font-size:0.85em;
  opacity:0.7;
  text-decoration:underline;
  cursor:pointer;
}

/* ---- Bannière de biome ---- */
#biomeBanner {
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -100%);
  padding:10px 26px;
  background:rgba(20,20,30,0.65);
  color:#fff;
  font-size:1.15em;
  font-weight:bold;
  letter-spacing:0.5px;
  border-radius:0 0 12px 12px;
  text-shadow:0 2px 5px rgba(0,0,0,0.6);
  transition:transform 0.5s ease, opacity 0.5s ease;
  opacity:0;
  pointer-events:none;
}
#biomeBanner.show {
  transform:translate(-50%, 0);
  opacity:1;
}

/* ---- Liens du menu (mentions légales / support) ---- */
.footerLinks {
  position:absolute;
  bottom:16px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:0.78em;
}
.footerLinks a {
  color:rgba(255,255,255,0.65);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.3);
  padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}
.footerLinks a:hover {
  color:#ffcf6b;
  border-color:#ffcf6b;
}

/* ---- Écran d'intro (splash au chargement du site) ---- */
#introScreen {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#0a0d16;
  z-index:50;
  cursor:pointer;
  transition:opacity .6s ease;
}
#introScreen.fadeOut { opacity:0; pointer-events:none; }
.introLogo {
  font-size:4.2em;
  transform:scale(0.4);
  opacity:0;
  animation:introLogoPop 1.1s cubic-bezier(.25,1.6,.4,1) 0.15s forwards;
}
.introTitle {
  margin-top:14px;
  font-size:1.6em;
  font-weight:bold;
  color:#fff;
  letter-spacing:3px;
  opacity:0;
  animation:introTitleFade 0.8s ease 0.9s forwards;
}
.introTitle span { color:#ffcf6b; }
.introBar {
  margin-top:22px;
  width:160px;
  height:3px;
  background:rgba(255,255,255,0.15);
  border-radius:3px;
  overflow:hidden;
  opacity:0;
  animation:introTitleFade 0.5s ease 1.2s forwards;
}
.introBar::after {
  content:'';
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ff9d5c,#ffcf6b);
  animation:introBarFill 1.4s ease 1.2s forwards;
}
.introSkip {
  position:absolute;
  bottom:20px;
  font-size:0.75em;
  color:rgba(255,255,255,0.4);
  opacity:0;
  animation:introTitleFade 0.5s ease 1.6s forwards;
}
@keyframes introLogoPop {
  0%   { transform:scale(0.4); opacity:0; }
  60%  { transform:scale(1.15); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes introTitleFade {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes introBarFill {
  from { width:0%; }
  to   { width:100%; }
}