/* ---------- SCENE ---------- */
/* .home-scene est maintenant juste un cadre qui masque les débords
   (overflow hidden) : l'image de fond elle-même est dans deux calques
   séparés (voir css/scene-fx.css) pour pouvoir zoomer doucement et
   suivre la souris sans faire bouger les boutons et le texte. */
.home-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* On réaffiche la lueur et les éléments du fond si nécessaire */
.sky-glow {
  display: block;
}

/* On masque uniquement les montagnes et îles CSS qui font doublon */
.mountains, .floating-island {
  display: none;
}

.island-one {
  width: 210px;
  height: 80px;
  right: 12%;
  top: 25%;
}

.island-two {
  width: 125px;
  height: 50px;
  right: 34%;
  top: 18%;
  transform: rotate(-7deg);
  opacity: .7;
}

/* ---------- SIDE MENU LEFT ---------- */

/* Le menu latéral gauche (Quêtes, Cadeaux, Missions, Événements) est maintenant dans css/side-menu.css */



/* ---------- HERO DISPLAY & BULLE DE DIALOGUE ---------- */
/* On masque définitivement le bonhomme en CSS */
.hero-character {
  display: none !important;
}
/* Position du conteneur */
.hero-container {
  position: absolute;
  left: 33%;
  top: 130px;
  z-index: 10;
  pointer-events: none;
}

/* =====================================================================
   BULLE DE DIALOGUE — style parchemin RPG (fond dégradé, double bordure
   or, petite gemme en pointe qui indique qui parle, au lieu du simple
   rectangle uni d'origine).
   ===================================================================== */
.dialogue-bubble {
  position: relative;
  /* Fond dégradé bleu nuit -> violet (même famille que les autres panneaux) */
  background: linear-gradient(160deg, rgba(28, 16, 52, 0.95) 0%, rgba(10, 8, 20, 0.97) 100%);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 12px 18px;
  max-width: 210px;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(216, 168, 62, 0.25),
    inset 0 0 14px rgba(140, 80, 255, 0.15);
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  animation: floatBubble 3s ease-in-out infinite;
}

/* Liseré fin à l'intérieur de la bordure (effet "double cadre") */
.dialogue-bubble::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(216, 168, 62, 0.3);
  border-radius: 11px;
  pointer-events: none;
}

/* Petite gemme dorée en pointe, à gauche, qui indique qui parle
   (remplace la simple flèche triangulaire d'origine) */
.dialogue-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -21px;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff1b8 0%, var(--gold) 55%, #a8741f 100%);
  border: 1.5px solid var(--void, #090811);
  box-shadow: 0 0 8px rgba(216, 168, 62, 0.5);
}
/* Zone invisible par-dessus le macaque généré par l'IA */
.hero-click-area {
  position: absolute;
  left: 0;
  top: 0;
  width: 32%;
  height: 100%;
  z-index: 9;
  cursor: pointer;
}

/* Transition douce sur le texte du dialogue */
.dialogue-bubble p {
  transition: opacity 0.15s ease-in-out;
  margin: 0;
}

@keyframes floatBubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-character {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 430px;
  height: 610px;
}

.character-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  bottom: 45px;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125,72,157,.45), transparent 65%);
  filter: blur(18px);
}

.character-shadow {
  position: absolute;
  bottom: 14px;
  left: 55px;
  width: 290px;
  height: 65px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  filter: blur(12px);
}

.character-body {
  position: absolute;
  left: 100px;
  bottom: 30px;
  width: 240px;
  height: 500px;
  transform: rotate(-5deg);
}

.hood {
  position: absolute;
  left: 35px;
  top: 30px;
  width: 165px;
  height: 175px;
  border-radius: 48% 52% 45% 45%;
  background: linear-gradient(145deg, #352444, #100d18 70%);
  border: 2px solid rgba(216,168,62,.55);
}

.face {
  position: absolute;
  left: 76px;
  top: 72px;
  width: 90px;
  height: 115px;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(145deg, #f1d7c7, #9e776e);
  box-shadow: inset -12px -6px 20px rgba(50,20,30,.22);
}

.hair {
  position: absolute;
  z-index: 4;
  width: 100px;
  height: 210px;
  background: linear-gradient(160deg, #f3f2ff, #8d8aac);
  border-radius: 70% 30% 70% 30%;
}

.hair-a { left: 46px; top: 38px; transform: rotate(10deg); }
.hair-b { left: 130px; top: 52px; transform: rotate(28deg); }

.cape {
  position: absolute;
  left: 25px;
  top: 180px;
  width: 205px;
  height: 290px;
  background: linear-gradient(145deg, #4d2a63, #17111e 72%);
  clip-path: polygon(10% 0, 90% 8%, 100% 100%, 45% 84%, 0 100%);
  border: 1px solid rgba(216,168,62,.35);
}

.arm {
  position: absolute;
  z-index: 5;
  right: -5px;
  top: 215px;
  width: 110px;
  height: 42px;
  border-radius: 30px;
  background: #17131e;
  transform: rotate(-24deg);
  box-shadow: 0 7px 0 #0b0910;
}

.banana-prop {
  position: absolute;
  z-index: 8;
  right: -38px;
  top: 180px;
  font-size: 54px;
  transform: rotate(-20deg);
  filter: drop-shadow(0 0 9px rgba(255,209,65,.35));
}

/* ---------- EVENT CARDS ---------- */

/* Les cartes d'événements (Événement, Tirage, Bonus) sont maintenant dans css/event-cards.css */



/* ---------- BOUTON JOUER ÉPIQUE ---------- */

.play-wrapper {
  position: absolute;
  z-index: 11;
  right: 60px;
  bottom: 150px; /* Au-dessus de la barre de nav (96px) + dépassement des losanges */
}

.play-button {
  position: relative;
  min-width: 260px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, #5b2b78 0%, #180d24 100%);
  border: 2px solid var(--gold);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  box-shadow: 0 0 30px rgba(216,168,62,.25);
  font-family: "Cinzel", serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold-light);
  transition: .18s ease;
}

.play-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 45px rgba(216,168,62,.45);
  color: #fff;
}

.play-banana {
  font-size: 25px;
}

/* ---------- STREAM FEED ---------- */

.stream-feed {
  position: absolute;
  z-index: 12;
  left: 24px;
  bottom: 150px; /* Au-dessus de la barre de nav (96px) + dépassement des losanges */
  min-width: 310px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px;
  background: rgba(8,6,13,.86);
  border: 1px solid rgba(150,82,193,.45);
  box-shadow: 0 7px 22px rgba(0,0,0,.35);
}

.twitch-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #5b2a78;
  color: #fff;
}

.stream-feed div {
  display: grid;
  gap: 2px;
}

.stream-feed small {
  color: #b27bd0;
  font-size: 8px;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.stream-feed strong {
  font-size: 11px;
}

.feed-spark {
  margin-left: auto;
  color: var(--gold-light);
}