* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #17132e;
  font-family: 'Baloo 2', 'Comic Sans MS', 'Segoe UI', Arial, sans-serif;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: fixed;
  top: 18px;
  left: 50%;
  /* --hud-y : decalage vertical reglable a la souris (glisser-deposer), sauvegarde */
  transform: translate(-50%, var(--hud-y, 0px));
  text-align: center;
  color: #4a3b6b;
  user-select: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  padding: 8px 26px 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  cursor: grab;
}

#hud.dragging { cursor: grabbing; }

#hud #objectiveInput { cursor: text; }

#floorLabel {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.25em;
  opacity: 0.5;
}

#floorRow { display: flex; align-items: baseline; justify-content: center; gap: 6px; }

#floor {
  font-size: 44px;
  font-weight: 800;
  color: #ff2d78;
  text-shadow: 0 0 16px rgba(255, 45, 120, 0.5);
  transition: transform 0.12s ease;
}

#floor.bump { transform: scale(1.18) rotate(-3deg); }

#objectiveRow { display: flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 700; opacity: 0.55; }

/* editable au clic, mais ne doit pas ressembler a un champ de formulaire a l'ecran */
#objectiveInput {
  width: 6em; /* assez large pour afficher un objectif a plusieurs chiffres sans le couper */
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

#objectiveInput::-webkit-outer-spin-button,
#objectiveInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#objectiveInput:focus { color: #ff2d78; }

#progressBar {
  width: 160px;
  height: 6px;
  background: rgba(74, 59, 107, 0.15);
  border-radius: 20px;
  margin: 6px auto 4px;
  overflow: hidden;
}

#progressFill {
  height: 100%;
  width: 0%;
  border-radius: 20px;
  background: linear-gradient(90deg, #3fd0ff, #7a5cff);
  transition: width 0.2s ease-out;
}

/* Remplace l'ancienne jauge de likes : etat des effets en cours (vitesse...) */
#statusLine {
  min-height: 16px;
  font-size: 12px;
  font-weight: 800;
  color: #7a5cff;
}

#statusLine:empty { display: none; }

/* Message "tel pseudo a fait tomber N etages" + commentaire rigolo */
#destroyerLog {
  min-height: 14px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
  margin-top: 2px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#destroyerLog:empty { display: none; }

#destroyerLog.flash { animation: destroyerFlash 0.4s ease; }

@keyframes destroyerFlash {
  0% { transform: scale(1.15); color: #ff2d78; }
  100% { transform: scale(1); color: inherit; }
}

/* Calque des effets HTML (gifs, bouton coeur-dans-les-mains) */
#fxLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
}

.fx-gif {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fx-heart-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  padding: 18px 32px;
  border-radius: 999px;
  border: 4px solid #fff;
  background: linear-gradient(160deg, #ff6b9d, #ff2d78);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 45, 120, 0.5);
  animation: heartBtnPulse 1s ease-in-out infinite;
}

@keyframes heartBtnPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

/* Petite fenetre "objectif atteint", juste sous le panneau ETAGE */
#objectiveBanner {
  display: none;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  color: #5a3600;
  background: linear-gradient(160deg, #ffe066, #ffb100);
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(255, 177, 0, 0.45);
  white-space: nowrap;
}

#objectiveBanner.show {
  display: block;
  animation: objectiveIn 0.5s cubic-bezier(.34, 1.56, .64, 1), objectivePulse 1.1s ease-in-out 0.5s infinite;
}

@keyframes objectiveIn {
  0% { opacity: 0; transform: translateY(-14px) scale(0.6) rotate(-6deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes objectivePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* TikTok Univers : l'ecran entier "casse" pendant 60 secondes */
body.tiktok-chaos {
  animation: chaosShake 0.15s steps(2) infinite, chaosHue 1.4s linear infinite;
}

@keyframes chaosShake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-6px, 4px) rotate(-1deg); }
  50% { transform: translate(5px, -3px) rotate(1deg); }
  75% { transform: translate(-3px, -5px) rotate(-0.5deg); }
  100% { transform: translate(4px, 3px) rotate(0.5deg); }
}

@keyframes chaosHue {
  0% { filter: hue-rotate(0deg) contrast(1.1) saturate(1.4); }
  50% { filter: hue-rotate(180deg) contrast(1.5) saturate(2) invert(0.08); }
  100% { filter: hue-rotate(360deg) contrast(1.1) saturate(1.4); }
}

body.tiktok-chaos #floor { color: #ff2d78; }
