/* =========================================================
   11 · Bonus stage (#off-code)
   Nivel de bonus: bloques «?» sobre una plataforma de ladrillo.
   Al golpear cada bloque sale el objeto de una afición; lo que
   cuenta cada una queda escrito en el subsuelo, bajo la plataforma.
   Sin JS (y con movimiento reducido) se ven ya golpeados.
   ========================================================= */

.stage--bonus { background: linear-gradient(180deg, #06051a, #1a1460); }
.bonus .stage-title { max-width: 18ch; }

/* Alturas del nivel: objeto · bloque · plataforma */
.bonus__items {
  --item-h: 64px;
  --block-h: 68px;
  --ground-h: 30px;
  --ground-top: calc(var(--item-h) + var(--block-h));
  --soil-top: calc(var(--ground-top) + var(--ground-h));

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(24px, 4vh, 48px) 0 0;
  padding: 0 0 28px;
  list-style: none;
  /* Plataforma de ladrillo y subsuelo de tierra, continuos para toda la fila */
  background:
    linear-gradient(#e8823a, #e8823a) 0 var(--ground-top) / 100% 4px no-repeat,
    repeating-linear-gradient(0deg, #2a1206 0 2px, transparent 2px 13px) 0 var(--ground-top) / 100% var(--ground-h) no-repeat,
    repeating-linear-gradient(90deg, #2a1206 0 2px, transparent 2px 26px) 0 var(--ground-top) / 100% var(--ground-h) no-repeat,
    linear-gradient(#b5482a, #b5482a) 0 var(--ground-top) / 100% var(--ground-h) no-repeat,
    radial-gradient(circle, rgb(255 190 120 / .07) 1.5px, transparent 2px) 0 var(--soil-top) / 18px 18px,
    linear-gradient(transparent var(--soil-top), #1c0f10 var(--soil-top), #120910);
}

.power {
  display: grid;
  grid-template-rows: var(--item-h) var(--block-h) var(--ground-h) auto;
  align-content: start;
  justify-items: start;
  padding-right: clamp(16px, 2.4vw, 32px);
}
.power:first-child .power__block,
.power:first-child h3,
.power:first-child p { margin-left: 16px; }

/* Objeto que sale del bloque */
.power__item {
  grid-row: 1;
  align-self: end;
  width: 52px;
  height: 52px;
  margin: 0 0 4px 6px;
  color: var(--c);
  filter: drop-shadow(3px 3px 0 var(--ink));
  transition: transform 420ms steps(7), opacity 160ms steps(2);
}
.power:first-child .power__item { margin-left: 22px; }
.power__item svg { width: 100%; height: 100%; --b: var(--ink); }

/* Bloque: «?» dorado antes del golpe, bloque usado después */
.power__block {
  position: relative;
  z-index: 1;
  grid-row: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 4px solid var(--ink);
  background:
    radial-gradient(circle, rgb(0 0 0 / .35) 2px, transparent 2.5px) 4px 4px / 48px 48px,
    #8a4b00;
  box-shadow: inset -5px -5px 0 rgb(0 0 0 / .3), inset 5px 5px 0 rgb(255 255 255 / .18);
}
.power__q {
  width: 24px;
  height: 32px;
  color: #6a3200;
  opacity: 0;
}
.power.is-closed .power__block {
  background:
    radial-gradient(circle, rgb(90 40 0 / .6) 2px, transparent 2.5px) 4px 4px / 48px 48px,
    var(--gold);
}
.power.is-closed .power__q { opacity: 1; }
.power.is-closed .power__item { opacity: 0; transform: translateY(64px); }

/* Lo que cuenta cada afición, escrito en el subsuelo */
.power h3 {
  grid-row: 4;
  margin-top: 22px;
  color: var(--c);
  font: 400 1.25rem/1.1 var(--f-display);
  text-shadow: 2px 2px 0 var(--ink);
}
.power p {
  grid-row: 5;
  margin: 8px 0 0;
  max-width: 34ch;
  color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .power__block { transition: transform 120ms steps(2); }
  .power:hover .power__block { transform: translateY(-6px); }
}

/* Tableta y móvil: los cuatro bloques siguen en una sola fila sobre una
   única plataforma; los textos bajan al subsuelo como una lista. */
@media (max-width: 1100px) {
  .bonus__items { grid-template-rows: var(--item-h) var(--block-h) var(--ground-h); }
  .power { display: contents; }
  .power__item,
  .power__block { justify-self: center; }
  .power:first-child .power__item,
  .power:first-child .power__block { margin-left: 0; }
  .power:nth-child(1) > * { grid-column: 1; }
  .power:nth-child(2) > * { grid-column: 2; }
  .power:nth-child(3) > * { grid-column: 3; }
  .power:nth-child(4) > * { grid-column: 4; }
  .power h3,
  .power p { grid-column: 1 / -1 !important; margin-left: 16px !important; margin-right: 16px; }
  .power:nth-child(1) h3 { grid-row: 4; }
  .power:nth-child(1) p { grid-row: 5; }
  .power:nth-child(2) h3 { grid-row: 6; }
  .power:nth-child(2) p { grid-row: 7; }
  .power:nth-child(3) h3 { grid-row: 8; }
  .power:nth-child(3) p { grid-row: 9; }
  .power:nth-child(4) h3 { grid-row: 10; }
  .power:nth-child(4) p { grid-row: 11; }
  .power p { max-width: 60ch; }
}

@media (max-width: 560px) {
  .power__block { width: 56px; height: 56px; }
  .power__item { width: 44px; height: 44px; margin-left: 0; }
}