/* =====================================================================
   Safari Panique — styles propres au jeu (préfixe sp-)
   La barre, le plein écran et les infobulles sont dans css/games.css.
   ===================================================================== */

/* Barre commune aux couleurs du jeu */
.sp-jeu {
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px : ne pas changer */
  --mgb-fond:
    radial-gradient(
      90% 200% at 0% 0%,
      rgba(255, 176, 58, 0.35),
      transparent 55%
    ),
    radial-gradient(
      60% 160% at 100% 100%,
      rgba(90, 200, 90, 0.25),
      transparent 60%
    ),
    linear-gradient(120deg, #1c3a1e, #2e5a24 55%, #3a2a14);
  --mgb-accent: #ffc94a;
  --mgb-titre: linear-gradient(100deg, #fff4c8, #ffc94a 45%, #ff8a3a);
  --mgb-police-titre: "Lilita One", "Madimi One", sans-serif;
  --mgb-doux: #c8d8a8;
  --mg-stat-largeur: 3em;
  --mg-fs-fond: #0e1a0e;
  --mg-bulle-fond: #1c2e14;
}

.sp-jeu .mg-barre-titre {
  font-size: 1.75em;
  letter-spacing: 0.01em;
}

.sp-jeu .sp-stat-large {
  --mg-stat-largeur: 4.6em;
}

.sp-jeu [hidden] {
  display: none !important;
}

.sp-arme {
  width: 32px;
  height: 20px;
  image-rendering: pixelated;
}

/* Zone de jeu : même largeur que la barre (css/games.css), hauteur posée par game.js (ajuster) */
.sp-zone {
  position: relative;
  box-sizing: border-box;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 40%, #2a3a1a, #0e1a0e);
  box-shadow:
    0 14px 40px -14px rgba(20, 30, 10, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Plein écran : la zone prend toute la place sous la barre */
.sp-jeu.mg-fs .sp-zone {
  align-self: stretch;
  width: auto;
  flex: 1;
  min-height: 0;
}

.sp-ecran {
  position: absolute;
  cursor: crosshair; /* on vise à la souris */
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- Jauge de l'animal géant ---------- */
.sp-boss {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  animation: sp-apparait 0.6s ease-out;
}
.sp-boss-nom {
  display: block;
  font:
    1.3em "Lilita One",
    sans-serif;
  color: #fff4c8;
  letter-spacing: 0.03em;
  text-shadow:
    0 2px 0 #4a2a0a,
    0 0 10px rgba(255, 140, 40, 0.6);
}
.sp-boss-jauge {
  height: 10px;
  margin-top: 2px;
  padding: 2px;
  background: #2a1a0a;
  border: 2px solid #f4d890;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.sp-boss-jauge i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffe07a, #ff9a2a 55%, #d8601a);
  transition: width 0.2s;
}

/* ---------- Écrans superposés ---------- */
.sp-voile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(
    70% 80% at 50% 50%,
    rgba(20, 14, 4, 0.2),
    rgba(14, 10, 2, 0.7)
  );
  z-index: 5;
  animation: sp-apparait 0.35s ease-out;
}
.sp-titre {
  background: radial-gradient(
    60% 70% at 50% 45%,
    rgba(20, 14, 4, 0.05),
    rgba(14, 10, 2, 0.6)
  );
}
/* Intermèdes et victoire : la scène reste visible derrière la carte */
.sp-voile.sp-transparent {
  align-items: flex-start;
  padding-top: 6%;
  background: linear-gradient(
    180deg,
    rgba(14, 10, 2, 0.45),
    rgba(14, 10, 2, 0) 70%
  );
}

@keyframes sp-apparait {
  from {
    opacity: 0;
  }
}

/* La carte : un panneau de bois sur une toile de safari */
.sp-carte {
  position: relative;
  max-width: 560px;
  text-align: center;
  color: #4a2c12;
  font-family: "Pixelify Sans", "Outfit", sans-serif;
  padding: 24px 34px 20px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(120, 80, 30, 0.05) 0 2px,
      transparent 2px 7px
    ),
    linear-gradient(180deg, #fff3cf, #f0d698);
  border: 3px solid #7a4a1e;
  box-shadow:
    0 0 0 5px #c8873a,
    0 0 0 8px #4a2a0e,
    0 22px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 30px rgba(160, 100, 30, 0.25);
  animation: sp-rebond 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes sp-rebond {
  from {
    transform: scale(0.85) rotate(-2deg);
  }
}

/* Clous du panneau */
.sp-carte::before,
.sp-carte::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #9a7a4a 45%, #4a2a0e);
}
.sp-carte::before {
  left: 8px;
}
.sp-carte::after {
  right: 8px;
}

.sp-surtitre {
  margin: 0;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #2e7a22;
}

.sp-grand-titre {
  margin: 2px 0 8px;
  font-family: "Lilita One", sans-serif;
  font-size: clamp(2.3em, 6vw, 3.8em);
  line-height: 1.05;
  color: #ffb02a;
  -webkit-text-stroke: 2px #5a2a08;
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 #5a2a08,
    0 8px 18px rgba(90, 42, 8, 0.35);
}

.sp-recit {
  margin: 0 0 16px;
  line-height: 1.45;
  font-size: 1.05em;
}
.sp-recit b {
  color: #c2410c;
}

.sp-difficulte {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sp-diff {
  font:
    600 0.95em "Pixelify Sans",
    sans-serif;
  color: #6a4a22;
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(122, 74, 30, 0.35);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.sp-diff:hover {
  border-color: #7a4a1e;
}
.sp-diff[aria-checked="true"] {
  color: #fff;
  background: linear-gradient(180deg, #ff9a3a, #e0601a);
  border-color: #7a2e08;
  box-shadow: 0 3px 0 #7a2e08;
}

.sp-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sp-btn {
  font:
    700 1.1em "Pixelify Sans",
    sans-serif;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 10px 24px;
  border: 2px solid #1e4a12;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, #7ad04a, #3a8a22);
  box-shadow:
    0 5px 0 #1e4a12,
    0 10px 20px rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition:
    transform 0.08s,
    filter 0.15s;
}
.sp-btn:hover {
  filter: brightness(1.1);
}
.sp-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #1e4a12;
}
.sp-btn-or {
  color: #4a2a08;
  text-shadow: none;
  border-color: #7a4a0e;
  background: linear-gradient(180deg, #ffe07a, #f0a82a);
  box-shadow:
    0 5px 0 #7a4a0e,
    0 10px 20px rgba(0, 0, 0, 0.3);
}
.sp-btn-sobre {
  color: #4a2c12;
  text-shadow: none;
  border-color: #7a4a1e;
  background: linear-gradient(180deg, #fff3cf, #e0c080);
  box-shadow:
    0 5px 0 #7a4a1e,
    0 10px 20px rgba(0, 0, 0, 0.3);
}

.sp-touches {
  margin: 16px 0 0;
  font-size: 0.85em;
  color: #7a5a32;
}
.sp-touches kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 5px;
  margin: 0 1px;
  font: inherit;
  color: #4a2c12;
  background: #fff8e0;
  border: 1px solid #b08850;
  border-bottom-width: 3px;
  border-radius: 4px;
}

/* ---------- Commandes tactiles ---------- */
.sp-tactile {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 14px;
  pointer-events: none;
  z-index: 4;
}
.sp-tactile button {
  pointer-events: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(20, 30, 10, 0.4);
  color: #fff;
  font-size: 22px;
  touch-action: none;
}
.sp-tactile button.sp-appui {
  background: rgba(255, 201, 74, 0.55);
}
.sp-croix {
  display: grid;
  grid-template: "a h b" 54px "g . d" 54px "c s e" 54px / 54px 54px 54px;
  gap: 2px;
}
.sp-croix [data-t="haut"] {
  grid-area: h;
}
.sp-croix [data-t="gauche"] {
  grid-area: g;
}
.sp-croix [data-t="droite"] {
  grid-area: d;
}
.sp-croix [data-t="bas"] {
  grid-area: s;
}
.sp-boutons-ab {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.sp-boutons-ab [data-t="saut"] {
  width: 66px;
  height: 66px;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .sp-jeu .sp-stat-record,
  .sp-jeu .sp-stat-fruits {
    display: none;
  }
  .sp-carte {
    padding: 18px 16px;
  }
  .sp-difficulte {
    flex-wrap: wrap;
  }
}

/* Mode test (?god) */
.sp-god {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 6;
  padding: 3px 8px;
  border-radius: 6px;
  font: 600 0.75em "Pixelify Sans", sans-serif;
  color: #fff4c8;
  background: rgba(194, 65, 12, 0.85);
  pointer-events: none;
}