/* ==========================================================================
   Composants UI — miroir de packages/dsm/origami
   ========================================================================== */

/* --------------------------------------------------------------------------
   AppSpeedLines — 32 rayons alternés depuis un point focal
   -------------------------------------------------------------------------- */

.speed-lines {
  position: relative;
  overflow: hidden;
}

.speed-lines::before {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-conic-gradient(
    from -5.625deg at var(--ray-x, 50%) var(--ray-y, 38%),
    rgb(255 246 230 / 0.075) 0deg 5.625deg,
    transparent 5.625deg 11.25deg
  );
  mask-image: radial-gradient(
    ellipse 75% 70% at var(--ray-x, 50%) var(--ray-y, 38%),
    transparent 8%,
    #000 38%,
    rgb(0 0 0 / 0.25) 78%,
    transparent 100%
  );
}

.speed-lines > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   AppCaption — cartouche de narrateur en papier jauni incliné (-2°)
   -------------------------------------------------------------------------- */

.caption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.35rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: var(--caption);
  color: var(--on-cta);
  border: var(--stroke-comic) solid var(--night);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-caption);
  transform: rotate(var(--caption-tilt));
}

/* --------------------------------------------------------------------------
   AppMarquee — bandeau de borne d'arcade « ULTRA TURBO »
   -------------------------------------------------------------------------- */

.marquee {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  transform: rotate(var(--caption-tilt));
}

.marquee__plate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.3rem 0.85rem;
  background-color: var(--night);
  border: var(--stroke-comic) solid var(--text);
  border-radius: var(--radius-xs);
  box-shadow: 5px 5px 0 var(--fire-body);
  transform: skewX(-10deg);
}

.marquee__edition {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    var(--lightning-core) 0%,
    var(--lightning-body) 42%,
    var(--fire-core) 70%,
    var(--fire-body) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marquee__sub {
  display: inline-block;
  padding: 0.18rem 0.65rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: var(--night);
  color: var(--caption);
  border: var(--stroke-outline) solid var(--caption);
  border-radius: var(--radius-xs);
  box-shadow: 3px 3px 0 var(--night);
}

/* --------------------------------------------------------------------------
   AppComicPanel — case BD (surface sombre + cadre papier 3px + ombre franche)
   -------------------------------------------------------------------------- */

.panel {
  --panel-accent: var(--cta-edge);
  position: relative;
  background-color: var(--surface);
  color: var(--text);
  border: var(--stroke-comic) solid var(--text);
  border-radius: var(--radius-sm);
  box-shadow: 6px 6px 0 var(--panel-accent);
}

.panel--raised {
  background-color: var(--surface-raised);
}

.panel--earth {
  --panel-accent: var(--earth-core);
}

.panel--water {
  --panel-accent: var(--water-body);
}

.panel--air {
  --panel-accent: var(--air-body);
}

.panel--fire {
  --panel-accent: var(--fire-body);
}

.panel--lightning {
  --panel-accent: var(--lightning-body);
}

.panel--soot {
  --panel-accent: var(--soot-body);
}

/* --------------------------------------------------------------------------
   AppButton — bouton « bonbon » (reflet haut + tranche 3D + écrasement)
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--cta);
  --btn-fg: var(--on-cta);
  --btn-edge: var(--cta-edge);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--touch-min);
  padding: 0.7rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  background-image: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.22) 0%,
    rgb(255 255 255 / 0.08) 46%,
    transparent 47%
  );
  border: var(--stroke-outline) solid var(--night);
  border-radius: var(--radius-lg);
  box-shadow:
    0 var(--button-edge) 0 var(--btn-edge),
    var(--shadow-button);
  transition:
    transform var(--dur-fast) var(--ease-pop),
    box-shadow var(--dur-fast) var(--ease-pop),
    background-color var(--dur-fast) var(--ease-standard);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 calc(var(--button-edge) + 2px) 0 var(--btn-edge),
    0 6px 16px rgb(0 0 0 / 0.32);
}

.btn:active {
  transform: translateY(3px) scale(0.97);
  box-shadow:
    0 2px 0 var(--btn-edge),
    0 2px 6px rgb(0 0 0 / 0.2);
}

.btn--sm {
  min-height: 2.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
}

.btn--secondary {
  --btn-bg: var(--surface-raised);
  --btn-fg: var(--text);
  --btn-edge: var(--raised-edge);
  border-color: var(--outline);
}

.btn__icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Badges & puces (chips)
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background-color: var(--surface);
  border: var(--stroke-outline) solid var(--divider);
  border-radius: var(--radius-pill);
}

.chip__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--lightning-body);
  box-shadow: 0 0 6px var(--lightning-core);
  flex-shrink: 0;
}

.chip__dot--fire {
  background-color: var(--fire-body);
  box-shadow: 0 0 6px var(--fire-core);
}

.chip__dot--water {
  background-color: var(--water-body);
  box-shadow: 0 0 6px var(--water-core);
}

.chip__dot--earth {
  background-color: var(--earth-core);
  box-shadow: 0 0 6px var(--earth-rim);
}

/* --------------------------------------------------------------------------
   AppSpeechBubble — bulles des champions (speaks, whispers, grumbles, shouts)
   -------------------------------------------------------------------------- */

.bubble {
  --bubble-accent: var(--cta-edge);
  position: relative;
  display: inline-block;
  padding: 0.6rem 0.95rem;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  background-color: var(--text);
  color: var(--on-cta);
  border: var(--stroke-comic) solid var(--night);
  border-radius: var(--radius-xl);
  box-shadow: 4px 4px 0 var(--bubble-accent);
}

.bubble--whispers {
  border-style: dashed;
  color: var(--ink-soft);
}

.bubble--grumbles {
  border-width: var(--stroke-grumble);
  border-radius: var(--radius-xs);
}

.bubble--shouts {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transform: rotate(-1.5deg) skewX(-5deg);
}

/* --------------------------------------------------------------------------
   AppBurst — étoile d'impact BD
   -------------------------------------------------------------------------- */

.burst {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: var(--lightning-body);
  color: var(--on-cta);
  border: var(--stroke-comic) solid var(--night);
  border-radius: var(--radius-xs);
  box-shadow: 4px 4px 0 var(--fire-body);
  transform: rotate(-4deg);
}

/* --------------------------------------------------------------------------
   Boutons des stores & QR code
   -------------------------------------------------------------------------- */

.stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.stores--center {
  align-items: center;
}

.stores__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.stores--center .stores__badges {
  justify-content: center;
}

.store-badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  transition:
    transform var(--dur-fast) var(--ease-pop),
    filter var(--dur-fast) var(--ease-standard);
}

.store-badge img {
  height: 3.15rem;
  width: auto;
}

.store-badge:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.35));
}

.store-badge:active {
  transform: translateY(1px) scale(0.98);
}

.stores__hint {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.qr-code {
  display: inline-flex;
  padding: var(--space-sm);
  background-color: var(--text);
  border: var(--stroke-comic) solid var(--night);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--cta-edge);
}

/* Avant la sortie : un cartouche « Bientôt » à la place des badges */
.soon {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  background-color: var(--surface);
  border: var(--stroke-comic) solid var(--text);
  border-radius: var(--radius-sm);
  box-shadow: 5px 5px 0 var(--fire-body);
}

.soon__tag {
  padding: 0.12rem 0.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-cta);
  background-color: var(--caption);
  border: var(--stroke-outline) solid var(--night);
  border-radius: var(--radius-xs);
  transform: rotate(-3deg);
}

.soon__hint {
  max-width: 34rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Maquette de téléphone (390 × 844 logiques mis à l'échelle par --scale),
   calquée sur MatchHud : barre haute, étagère de Suie, puits et rail
   -------------------------------------------------------------------------- */

.phone {
  --scale: 0.78;
  --phone-w: 390px;
  --phone-h: 844px;
  --phone-accent: var(--fire-body);
  position: relative;
  width: calc(var(--phone-w) * var(--scale));
  height: calc(var(--phone-h) * var(--scale));
  flex-shrink: 0;
  border-radius: calc(46px * var(--scale));
  background: var(--raised-edge);
  border: var(--stroke-comic) solid var(--text);
  box-shadow:
    10px 10px 0 var(--phone-accent),
    0 24px 48px rgb(0 0 0 / 0.55);
  overflow: hidden;
  user-select: none;
}

.phone--lightning {
  --phone-accent: var(--lightning-body);
}

.phone__notch {
  position: absolute;
  top: calc(10px * var(--scale));
  left: 50%;
  transform: translateX(-50%);
  width: calc(112px * var(--scale));
  height: calc(24px * var(--scale));
  background: var(--raised-edge);
  border-radius: var(--radius-pill);
  z-index: 20;
  border: 1px solid rgb(255 255 255 / 0.1);
}

.phone__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--phone-w);
  height: var(--phone-h);
  transform: scale(var(--scale));
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  padding: 46px 12px 16px;
  gap: 8px;
  overflow: hidden;
  background-color: var(--arena-bottom, var(--night));
}

.phone__screen--forge {
  --arena-top: var(--arena-forge-top);
  --arena-bottom: var(--arena-forge-bottom);
}

.phone__screen--pylon {
  --arena-top: var(--arena-pylon-top);
  --arena-bottom: var(--arena-pylon-bottom);
}

.phone__arena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile de l'arène : le puits reste lisible sans éteindre le décor */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--arena-top, var(--night)) 45%, transparent) 0%,
    color-mix(in srgb, var(--arena-bottom, var(--night)) 70%, transparent) 100%
  );
}

.phone__screen > :not(.phone__arena) {
  position: relative;
  z-index: 1;
}

/* Barre haute : score · TOI VS champion et tempête · pause */
.match-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}

.match-hud__score {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 2px 0 var(--night);
}

.match-hud__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.match-hud__pause {
  justify-self: end;
  width: 26px;
  height: 26px;
  color: var(--text);
}

.versus {
  display: flex;
  align-items: center;
  gap: 6px;
}

.versus__tag {
  padding: 1px 9px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-cta);
  background: var(--text);
  border: 2px solid var(--night);
  box-shadow: 2px 2px 0 var(--night);
  transform: skewX(-12deg);
}

.versus__tag--fire {
  background: var(--fire-rim);
}

.versus__tag--lightning {
  background: var(--lightning-body);
}

.versus__vs {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
  color: var(--text);
  paint-order: stroke fill;
  -webkit-text-stroke: 5px var(--night);
}

/* Tempête : un nuage et ses cinq segments, l'orage et l'alerte une fois là */
.storm {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
}

.storm--raging {
  color: var(--alert);
}

.storm__icon {
  width: 19px;
  height: 19px;
  margin-right: 2px;
}

.storm__seg {
  width: 13px;
  height: 6px;
  border-radius: 2px;
  background: var(--well-rim);
}

.storm__seg--lit {
  background: currentColor;
}

/* Étagère de verre de la Suie en approche */
.garbage-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: rgb(255 255 255 / 0.07);
  border: 1.5px solid var(--well-rim);
  border-radius: var(--radius-sm);
}

.garbage-shelf__icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.garbage-shelf__count {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text);
}

.garbage-pebble {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--soot-rim),
    var(--soot-body) 60%,
    var(--soot-core)
  );
  border: 1.5px solid var(--night);
}

/* Corps du match : le puits à gauche, le rail du champion à droite */
.match-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: start;
}

/* Puits 6 × 12 (AppLumenColors.well #1B1E3A) */
.well {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 12;
  background-color: var(--well);
  background-image:
    linear-gradient(to right, var(--well-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--well-grid) 1px, transparent 1px);
  background-size: calc(100% / 6) calc(100% / 12);
  border: 3px solid var(--text);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 0 2px var(--well-rim),
    6px 6px 0 var(--night);
  overflow: hidden;
}

/* Repère de défaite, en haut de la 3e colonne */
.well__mark {
  position: absolute;
  top: 0;
  left: calc(100% * 2 / 6);
  width: calc(100% / 6);
  height: calc(100% / 12);
  padding: 22%;
  color: rgb(255 255 255 / 0.3);
}

.well__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

.piece {
  --fall: 0;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.piece img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.45));
}

/* Repère d'atterrissage de la paire : un anneau à la couleur de l'élément */
.piece--ghost::after {
  content: "";
  width: 44%;
  height: 44%;
  border-radius: 50%;
  border: 3px solid var(--piece-color);
  opacity: 0.85;
}

.piece--ghost-fire {
  --piece-color: var(--fire-core);
}

.piece--ghost-water {
  --piece-color: var(--water-core);
}

.piece--ghost-earth {
  --piece-color: var(--earth-core);
}

.piece--ghost-air {
  --piece-color: var(--air-core);
}

.piece--ghost-lightning {
  --piece-color: var(--lightning-body);
}

/* Pont de lumière entre deux pièces voisines du même élément */
.piece--link-r::before,
.piece--link-b::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: var(--bridge-color);
  box-shadow: 0 0 8px var(--bridge-color);
  opacity: 0.85;
}

.piece--link-r::before {
  right: -18%;
  top: 34%;
  width: 36%;
  height: 32%;
}

.piece--link-b::after {
  bottom: -18%;
  left: 34%;
  width: 32%;
  height: 36%;
}

.piece--bridge-fire {
  --bridge-color: var(--fire-core);
}

.piece--bridge-water {
  --bridge-color: var(--water-core);
}

.piece--bridge-earth {
  --bridge-color: var(--earth-core);
}

.piece--bridge-air {
  --bridge-color: var(--air-core);
}

.piece--bridge-lightning {
  --bridge-color: var(--lightning-core);
}

/* Chute après un éclat, de --fall cases */
.piece--fell {
  animation: piece-fall var(--dur-normal) var(--ease-decelerate) both;
}

.piece--popping {
  animation: piece-pop 700ms var(--ease-pop) infinite alternate;
}

.piece--melting {
  animation: piece-melt 700ms var(--ease-standard) infinite alternate;
}

.piece--fell.piece--popping {
  animation:
    piece-fall var(--dur-normal) var(--ease-decelerate) both,
    piece-pop 700ms var(--ease-pop) var(--dur-normal) infinite alternate;
}

.piece--fell.piece--melting {
  animation:
    piece-fall var(--dur-normal) var(--ease-decelerate) both,
    piece-melt 700ms var(--ease-standard) var(--dur-normal) infinite alternate;
}

@keyframes piece-fall {
  from {
    transform: translateY(calc(-100% * var(--fall)));
  }
}

@keyframes piece-pop {
  to {
    transform: scale(1.12);
    filter: brightness(1.35) drop-shadow(0 0 8px var(--lightning-core));
  }
}

@keyframes piece-melt {
  to {
    opacity: 0.3;
    transform: scale(0.8);
  }
}

/* Cri de chaîne : « CHAÎNE » et le ×N sur une étoile */
.chain-shout {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
}

.chain-shout::before {
  content: "";
  position: absolute;
  inset: -16px -6px -10px;
  z-index: -1;
  background: var(--fire-body);
  border: 3px solid var(--night);
  clip-path: polygon(
    50% 0%, 61% 30%, 95% 22%, 72% 48%, 98% 74%, 63% 70%,
    50% 100%, 37% 70%, 2% 74%, 28% 48%, 5% 22%, 39% 30%
  );
}

.chain-shout.is-popped {
  animation: shout-pop 380ms var(--ease-pop);
}

.chain-shout__word {
  padding: 1px 8px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-cta);
  background: var(--caption);
  border: 2px solid var(--night);
  box-shadow: 2px 2px 0 var(--night);
}

.chain-shout__count {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--lightning-core);
  paint-order: stroke fill;
  -webkit-text-stroke: 8px var(--night);
}

@keyframes shout-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-6deg) scale(0.4);
  }
}

/* Rail : paires suivantes, plateau et Suie du champion, son médaillon */
.match-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rail-card {
  padding: 6px;
  background: var(--well);
  border: 2px solid var(--well-rim);
  border-radius: var(--radius-sm);
}

.next-pairs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 30px);
  gap: 2px 4px;
  justify-items: center;
}

.next-pairs img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.foe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.foe__garbage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
}

.foe__garbage .garbage-pebble {
  width: 12px;
  height: 12px;
}

.foe__sent {
  position: absolute;
  top: -12px;
  right: -4px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--lightning-core);
  paint-order: stroke fill;
  -webkit-text-stroke: 5px var(--night);
}

.foe__sent.is-popped {
  animation: sent-pop 700ms var(--ease-pop) both;
}

@keyframes sent-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.5);
  }
}

.mini-well {
  width: 100%;
  aspect-ratio: 6 / 12;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 1px;
}

.mini-dot {
  border-radius: 50%;
}

.mini-dot--fire {
  background: var(--fire-body);
}

.mini-dot--water {
  background: var(--water-body);
}

.mini-dot--earth {
  background: var(--earth-core);
}

.mini-dot--air {
  background: var(--air-body);
}

.mini-dot--lightning {
  background: var(--lightning-body);
}

.mini-dot--soot {
  background: var(--soot-body);
}

.medallion {
  width: 80px;
  height: 80px;
  margin-inline: auto;
  border-radius: 50%;
  border: 4px solid var(--phone-accent);
  background: rgb(24 22 31 / 0.55);
  overflow: hidden;
}

.medallion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Réplique du champion, au-dessus de son médaillon (AppSpeechBubble) */
.rail-bubble {
  position: relative;
  padding: 6px 7px;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  background: var(--text);
  color: var(--on-cta);
  border: 2px solid var(--night);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--phone-accent);
}

.rail-bubble--grumbles {
  border-width: 3px;
  border-radius: var(--radius-xs);
}

.rail-bubble--shouts {
  font-weight: 800;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transform: rotate(-2deg);
}

/* Étapes de la démo, sous le téléphone du hero */
.demo-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.demo-dot {
  padding: 0.25rem 0.65rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 2px solid var(--divider);
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-pop);
}

.demo-dot.is-active {
  background: var(--caption);
  color: var(--on-cta);
  border-color: var(--night);
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .piece--fell,
  .piece--popping,
  .piece--melting,
  .chain-shout.is-popped,
  .foe__sent.is-popped {
    animation: none;
  }

  .piece--popping {
    filter: brightness(1.3);
  }

  .piece--melting {
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   FAQ (<details class="faq__item">)
   -------------------------------------------------------------------------- */

.faq {
  max-width: 48rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq__item {
  background-color: var(--surface);
  border: var(--stroke-comic) solid var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.faq__item[open] {
  --panel-accent: var(--lightning-body);
  box-shadow: 6px 6px 0 var(--lightning-body);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.1rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  background-color: var(--cta);
  color: var(--on-cta);
  border: var(--stroke-outline) solid var(--night);
  border-radius: var(--radius-xs);
  box-shadow: 0 3px 0 var(--cta-edge);
  transition: transform var(--dur-fast) var(--ease-pop);
}

.faq__item[open] .faq__question::after {
  content: "−";
  background-color: var(--caption);
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 1.35rem 1.25rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  border-top: var(--stroke-hairline) solid var(--divider);
  padding-top: var(--space-md);
}