/* ---------- stage + ferris ---------- */
.stage {
  position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 120%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  min-height: 190px; display: grid; place-items: end center; padding: 0 0 14px;
}
.stage .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, transparent, rgba(207,75,18,.10)); }
.ferris-stage { width: 190px; height: 128px; z-index: 1; transform-origin: 50% 100%; }
.ferris-idle { animation: bob 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }
.ferris-eyes { animation: peek 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes peek { 0%, 92%, 100% { transform: translateY(0); } 96% { transform: translateY(1.4px); } }
.clawL { transform-origin: 74px 92px; }
.clawR { transform-origin: 116px 92px; }

/* ---- apparences du crabe (niveau du joueur) ---- */
.crab-armor, .crab-aura, .crab-hat, .crab-torch, .aura-warm { display: none; }
.skin-2 .clawL, .skin-2 .clawR { transform: scale(1.3); }
.skin-3 .clawL, .skin-3 .clawR { transform: scale(1.45); }
.skin-4 .clawL, .skin-4 .clawR { transform: scale(1.5); }
.crab-suit, .crab-helmet { display: none; }
.skin-3 .crab-armor, .skin-4 .crab-armor, .skin-5 .crab-armor { display: block; }
.skin-3 .crab-aura, .skin-4 .crab-aura, .skin-5 .crab-aura { display: block; transform-origin: 50% 62%; animation: auraPulse 2.6s ease-in-out infinite; }
.skin-3.ferris-svg { filter: drop-shadow(0 0 6px rgba(236, 193, 78, .5)); }
@keyframes auraPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* niveau 4 — Ferris explorateur : chapeau + torche */
.skin-4 .crab-hat, .skin-4 .crab-torch, .skin-4 .aura-warm { display: block; }
.skin-4.ferris-svg { filter: drop-shadow(0 0 7px rgba(236, 193, 78, .55)) drop-shadow(0 0 13px rgba(230, 86, 15, .4)); }
.skin-4 .torch-flame { transform-origin: 168px 44px; animation: torchFlicker .16s ease-in-out infinite alternate; }

/* ---- niveau 5 : scaphandre et casque-aquarium ---- */
.skin-5 .crab-suit, .skin-5 .crab-helmet, .skin-5 .aura-warm { display: block; }
/* Le niveau 5 est plus imposant. Corps, scaphandre et casque partagent la
   MÊME transformation, sinon le casque flotterait au-dessus des yeux. Origine
   basse et facteur 1.08 : les bottes et les pinces restent dans le viewBox. */
.skin-5 .ferris-body, .skin-5 .crab-suit, .skin-5 .crab-helmet {
  transform-box: view-box; transform-origin: 95px 104px; transform: scale(1.08);
}
/* Le scaphandre recouvre pattes et pinces : les pinces d'origine sont cachées,
   sinon elles dépasseraient du gant. L'armure ne sert plus — la combinaison
   la remplace. */
.skin-5 .clawL, .skin-5 .clawR, .skin-5 .crab-legs { display: none; }
.skin-5 .crab-armor { display: none; }
.skin-5.ferris-svg { filter: drop-shadow(0 0 8px rgba(140, 205, 240, .55)) drop-shadow(0 0 17px rgba(86, 173, 214, .4)); }
@keyframes torchFlicker {
  from { transform: scaleY(.9) scaleX(1.04) rotate(-3deg); opacity: .9; }
  to   { transform: scaleY(1.1) scaleX(.95) rotate(3deg);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .skin-3 .crab-aura, .skin-4 .crab-aura, .skin-5 .crab-aura,
  .skin-4 .torch-flame { animation: none; }
}

.ferris-stage.happy { animation: hop .55s ease 2; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-24px) scale(1.05, .96); } 70% { transform: translateY(0) scale(1.02, .98); } }
.ferris-stage.happy .clawL { animation: waveL .55s ease 2; }
.ferris-stage.happy .clawR { animation: waveR .55s ease 2; }
@keyframes waveL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-26deg); } }
@keyframes waveR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(26deg); } }

.bubble {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  background: var(--surface); border: 1.5px solid var(--ink); color: var(--ink);
  border-radius: 12px; padding: 9px 14px; max-width: min(80%, 380px);
  font-family: "IBM Plex Mono", monospace; font-size: .88rem; font-weight: 500;
  box-shadow: 0 6px 0 -2px var(--accent-soft); z-index: 3; min-height: 1.2em;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: var(--ink); border-bottom: 0;
}
.bubble .caret { color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bubble[hidden] { display: none; }
.bubble.pop { animation: pop .28s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: translateX(-50%) scale(.8); opacity: 0; } }

/* ---------- Ferris : il attend sur un shell, et vient sur celui qu'on ouvre ---------- */
.concept-ferris {
  position: absolute; right: 0; top: 0; width: 118px; z-index: 5;
  pointer-events: none;
  transition: top .55s cubic-bezier(.3, 1.1, .35, 1);
}
.concept-ferris.no-anim { transition: none; }
.concept-ferris .ferris-stage { width: 100%; height: auto; display: block; }
.concept-ferris.perched { width: 82px; right: 8px; }
.concept-ferris.perched .ferris-stage { filter: drop-shadow(0 3px 9px var(--bg)) drop-shadow(0 0 12px var(--bg)); }
.concept-ferris .bubble {
  left: auto; right: 0; top: auto; bottom: calc(100% - 10px); transform: none;
  max-width: 175px; text-align: center; font-size: .8rem; padding: 7px 12px;
}
.concept-ferris .bubble::after { left: auto; right: 28px; transform: none; }
@media (prefers-reduced-motion: reduce) { .concept-ferris { transition: none; } }

@media (min-width: 1024px) {
  .concept-page { max-width: 950px; }
  .concept-page .concepts-body { padding-right: 148px; }
}
@media (max-width: 560px) {
  .concepts { padding: 4px 14px 0; }
  .concept-ferris.perched { width: 68px; }
  .cexo-head { padding: 13px 14px 10px; }
}

.next-row { display: flex; justify-content: flex-end; gap: 10px; }
.btn-next {
  background: var(--good); color: #fff; border: 0; border-radius: 9px; padding: 10px 22px;
  font-weight: 600; font-family: "IBM Plex Mono", monospace; font-size: .8rem; letter-spacing: .04em;
}
.btn-next:hover { filter: brightness(1.06); }

.finale {
  background: var(--surface); border: 1px solid var(--accent); border-radius: 14px;
  padding: 26px; text-align: center; box-shadow: var(--shadow);
}
.finale h2 { font-size: 1.5rem; color: var(--accent); margin-bottom: 8px; }
.finale p { color: var(--ink-soft); margin: 0 auto; max-width: 44ch; }

.hidden { display: none !important; }