/* =========================================================
   RÉGLAGES FACILES — taille du personnage.
   Le nombre de marches et la raideur de l'escalier se règlent
   dans index.php (tableau $config en haut du fichier) car ils
   nécessitent une boucle PHP pour générer les marches.
   La taille du personnage, elle, est une question purement
   visuelle : elle vit ici, avec un réglage distinct par écran.
   ========================================================= */
:root {
  --char-width-desktop: 15%;   /* largeur du personnage en % de la zone de jeu */
  --char-width-mobile: 19%;    /* plus grand sur petit écran pour rester facile à toucher */
  --char-ratio: 12 / 20;       /* ratio largeur/hauteur du sprite (ne pas changer sauf nouveau design) */
}

body {
  background: #111;
  color: #eee;
  font-family: monospace;
  text-align: center;
  padding: 20px;
}
@media (max-width: 600px) {
  body { padding: 8px; }
}

h1 {
  color: #ff8c00;
  letter-spacing: 2px;
  font-size: 2em;
}

#scores {
  margin: 10px 0 20px;
  font-size: 1.2em;
  color: #9f9;
  display: flex;
  justify-content: center;
  gap: 20px;
}

#stairs {
  position: relative;
  width: auto;
  max-width: 100vw;
  max-height: 50dvh;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  background: #1a1a1a;
  border: 2px solid #444;
  overflow: hidden;
}

#character {
  position: absolute;
  width: var(--char-width-desktop);
  aspect-ratio: var(--char-ratio);
  box-sizing: border-box;
  cursor: pointer;
  /* (x,y) désigne les pieds du personnage : on recentre la boîte dessus,
     ce qui permet de changer sa taille (ci-dessus) sans jamais retoucher
     les positions calculées par le PHP. */
  transform: translate(-50%, -100%);
  transition: top var(--step-duration) linear, left var(--step-duration) linear;
  user-select: none;
}
@media (max-width: 600px) {
  #character { width: var(--char-width-mobile); }
}

#character.jump-move {
  transition-duration: var(--jump-duration); /* saut suite à une fessée : plus rapide qu'un pas de patrouille normal */
}

#character.facing-left svg {
  transform: scaleX(-1);
}

#character svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

#character.jump {
  animation: jumpSquash 0.25s ease;
}
@keyframes jumpSquash {
  0%   { transform: translate(-50%, -100%) scale(1, 1); }
  40%  { transform: translate(-50%, -100%) scale(1.3, 0.6); }
  70%  { transform: translate(-50%, -100%) scale(0.8, 1.2); }
  100% { transform: translate(-50%, -100%) scale(1, 1); }
}

.float-text {
  position: absolute;
  left: 50%;
  top: -10%;
  transform: translate(-50%, -100%);
  font-size: 1.6em;
  line-height:1em;
  font-weight: bold;
  white-space: wrap;
  max-width:10em;
  pointer-events: none;
  animation: floatUp 2s ease-out forwards;
  z-index: 5;
}
.float-text.self  { color: #ffcc33; }
.float-text.other { color: #33ccff; }
@keyframes floatUp {
  0%   { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -100%) translateY(-30px); }
}

.weapon-fx {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 3em;
  pointer-events: none;
  animation: weaponZoom 0.4s ease-out forwards;
  z-index: 6;
}
@keyframes weaponZoom {
  0%   { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
}

#weapons {
  margin:auto;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width:clamp(350px,50vw, calc((3/4) * (50dvh))) 
}
.weapon-btn {
  position: relative;
  overflow: hidden;
  font-size: 1.8em;
  padding: 6px 10px;
  background: #222;
  border: 2px solid #444;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
.weapon-icon {
  position: relative;
  z-index: 1;
}
.cd-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.weapon-btn.selected {
  border-color: #ff8c00;
  background: #332200;
}
.weapon-btn.locked {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}
.weapon-btn .lock-badge {
  display: block;
  font-size: 0.35em;
  color: #9f9;
  margin-top: 2px;
}

/* =========================================================
   FOOTER & DISCLAIMER — mention légale toujours visible en
   bas de page, détail complet dans une modale.
   ========================================================= */
#site-footer {
  margin-top: 20px;
  font-size: 0.7em;
  color: #777;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.link-btn {
  background: none;
  border: none;
  color: #9cf;
  text-decoration: underline;
  font-family: inherit;
  font-size: 1em;
  cursor: pointer;
  padding: 0;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  box-sizing: border-box;
}
.modal-overlay.visible {
  display: flex;
}

.modal-box {
  background: #1a1a1a;
  border: 2px solid #444;
  border-radius: 8px;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  text-align: left;
  font-size: 0.85em;
  line-height: 1.5;
  color: #ddd;
}
.modal-box h2 {
  color: #ff8c00;
  font-size: 1.2em;
  margin-top: 0;
}
.modal-box .link-btn {
  display: block;
  margin: 16px auto 0;
  text-align: center;
}

/* =========================================================
   GOLDEN JUICE — tous les 500 points de score global, si le
   joueur est présent : proposition d'activer la séquence.
   Barres + jus + décompte, tout confiné dans #stairs (donc
   sur le même repère en % que le reste).
   ========================================================= */
.vice-bar {
  position: absolute;
  left: 0;
  width: 100%;
  background: repeating-linear-gradient(45deg, #666 0 6px, #444 6px 12px);
  border: 2px solid #222;
  box-sizing: border-box;
  z-index: 15;
  height: 0;
  /* la durée réelle est fixée en JS à chaque étape (double-pressage) */
}
.vice-top { top: 0; }
.vice-bottom { bottom: 0; }

#character.squeezed svg {
  transform: scaleY(0.15);
  transition: transform 0.2s ease-in;
}
#character.facing-left.squeezed svg {
  transform: scaleX(-1) scaleY(0.15);
}

.juice-stream {
  position: absolute;
  height: 0;
  background: linear-gradient(to bottom, #ffcf40, #d68b00);
  z-index: 16;
  transition-property: height;
  transition-timing-function: linear;
}

#juice-puddle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to bottom, #ffb703, #d68b00);
  border-top: 2px solid #7a5200;
  z-index: 17;
  transition-property: height;
  transition-timing-function: ease-out;
}

#juice-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 20;
  background: rgba(0, 0, 0, 0.45);
  text-align: center;
  color: #ffcc33;
  font-weight: bold;
}
#juice-overlay.visible { display: flex; }

#juice-prompt {
  font-size: 1.1em;
  line-height: 1.6;
}
#juice-start-btn {
  font-family: inherit;
  font-weight: bold;
  font-size: 1em;
  padding: 8px 18px;
  margin-top: 8px;
  background: #ff8c00;
  color: #111;
  border: 2px solid #a35a00;
  border-radius: 6px;
  cursor: pointer;
}

#juice-countdown {
  display: none;
  font-size: 1.4em;
}