/* «Cómo se juega» del Duelo en texto vivo (games/duelo/guia.js, 1-oct-2026).
   Va dentro de los bloques de js/game-guide.js (.vp-ggs-block.vp-ggs-html). */
.vp-ggs-html { overflow: hidden; background: #0d0a14; flex-shrink: 0; }
/* la pista es una columna flex de alto fijo: sin flex-shrink el bloque se aplastaba */
.dg { position: relative; color: #f2f2f7; font-family: 'DM Sans', system-ui, sans-serif; text-align: left; }
.dg h2, .dg h3, .dg p, .dg ul { margin: 0; }
.dg-h {
  font: 900 clamp(1.15rem, 5.4vw, 1.5rem)/1.1 'Syne', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .02em; color: #ffd36b;
  text-shadow: 0 0 18px rgba(255, 176, 32, .45); margin-bottom: 12px;
}

/* 1 · cabecera con la portada «Choque» */
.dg-cab { display: block; }
.dg-portada { display: block; width: 100%; height: clamp(220px, 62vw, 330px); object-fit: cover; object-position: 50% 0; }
.dg-cab-txt {
  position: relative; margin-top: -64px; padding: 64px 18px 18px;
  background: linear-gradient(180deg, rgba(13, 10, 20, 0), #0d0a14 58%);
}
.dg-ceja {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font: 800 .78rem/1 'DM Sans', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #1a1206; background: linear-gradient(180deg, #f7dc93, #d4a843);
}
.dg-tit {
  margin-top: 8px !important;
  font: 900 clamp(1.7rem, 8.4vw, 2.3rem)/1 'Syne', system-ui, sans-serif; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff, #ffd36b 55%, #ff9a2e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 150, 40, .35));
}
.dg-lead { margin-top: 8px !important; font-size: clamp(.95rem, 4.2vw, 1.08rem); line-height: 1.4; color: #d9d4e6; }

/* 2 · los tres pasos con su pantalla de verdad */
.dg-pasos { display: grid; gap: 12px; padding: 14px; }
.dg-paso {
  display: grid; grid-template-columns: minmax(104px, 38%) 1fr; gap: 14px; align-items: center;
  padding: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 30, 60, .7), rgba(20, 14, 30, .7));
  border: 1px solid rgba(176, 106, 255, .25);
}
.dg-paso:nth-child(2) { border-color: rgba(255, 90, 90, .3); }
.dg-paso:nth-child(3) { border-color: rgba(255, 196, 60, .35); }
.dg-arte { margin: 0; border-radius: 10px; overflow: hidden; background: #000; }
.dg-arte > img { display: block; width: 100%; height: auto; }
.dg-arte-2 > img { aspect-ratio: 600 / 640; object-fit: cover; object-position: 50% 0; }
.dg-mundos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 6px 4px; }
.dg-mundos-n { display: block; padding: 0 0 6px; text-align: center; font: 900 1rem/1 'Syne', system-ui, sans-serif; color: #ffd36b; text-shadow: 0 0 10px rgba(255, 196, 60, .6); }
.dg-mundos img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px; opacity: .45; filter: grayscale(.7); }
.dg-mundos img.on { opacity: 1; filter: none; box-shadow: 0 0 0 1px #ffd36b, 0 0 10px rgba(255, 196, 60, .6); }
.dg-paso-txt h3 { font: 900 clamp(1.02rem, 4.8vw, 1.25rem)/1.1 'Syne', system-ui, sans-serif; text-transform: uppercase; color: #fff; }
.dg-paso-txt p { margin-top: 5px !important; font-size: clamp(.94rem, 3.8vw, 1rem); line-height: 1.38; color: #d2cddf; }
.dg-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 50%;
  font: 900 .95rem/1 'Syne', system-ui, sans-serif; color: #1a1206;
  background: linear-gradient(180deg, #f7dc93, #d4a843); box-shadow: 0 0 12px rgba(212, 168, 67, .6);
}

/* 3 · quién gana */
.dg-gana { padding: 16px 18px 18px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 176, 32, .16), transparent 60%), #0d0a14; }
.dg-gana ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.dg-gana li { position: relative; padding-left: 26px; font-size: clamp(.94rem, 4vw, 1.04rem); line-height: 1.4; color: #e6e1f0; }
.dg-gana li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(#e8443a 0 45deg, #ff8a2b 0 90deg, #f2c230 0 135deg, #49c25a 0 180deg, #2bb3c9 0 225deg, #3b6fe0 0 270deg, #9b4fd8 0 315deg, #d94b9a 0);
  box-shadow: 0 0 8px rgba(255, 196, 60, .55);
}
.dg-gana li:last-child { color: #b9b3c8; font-size: clamp(.94rem, 3.7vw, 1rem); }
.dg-gana li:last-child::before { background: #6c6480; box-shadow: none; }

/* 4 · con quién: las dos tarjetas son la opción de verdad */
.dg-quien { padding: 16px 14px 14px; }
.dg-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-op {
  appearance: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 10px; border-radius: 14px; text-align: left; color: #f2f2f7; font: inherit;
  background: linear-gradient(180deg, rgba(30, 60, 120, .55), rgba(10, 18, 40, .9));
  border: 1.5px solid rgba(80, 160, 255, .7); box-shadow: 0 0 18px rgba(60, 140, 255, .28);
}
.dg-op-amigo {
  background: linear-gradient(180deg, rgba(130, 60, 10, .55), rgba(40, 16, 4, .9));
  border-color: rgba(255, 140, 40, .8); box-shadow: 0 0 18px rgba(255, 130, 30, .28);
}
.dg-op:active { transform: scale(.97); }
.dg-op b { font: 900 clamp(.9rem, 4vw, 1.05rem)/1.1 'Syne', system-ui, sans-serif; text-transform: uppercase; }
.dg-op > span:last-child { font-size: clamp(.94rem, 3.4vw, 1rem); line-height: 1.35; color: #d6d1e2; }
.dg-caras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
.dg-cara { position: relative; display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--c); }
.dg-cara img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 15%; }
.dg-cara i {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 2px 2px; text-align: center;
  font: 800 .75rem/1 'DM Sans', system-ui, sans-serif; font-style: normal; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85));
}
.dg-duo { display: block; width: 100%; border-radius: 8px; overflow: hidden; }
.dg-duo img { display: block; width: 100%; aspect-ratio: 9 / 4; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 359px) { .dg-dos { grid-template-columns: 1fr; } }

/* 5 · ¡Jugar ahora! (tocarlo cierra la guía) */
.vp-ggs-html:has(.dg-jugar) { background: transparent; box-shadow: none; overflow: visible; }
.dg-jugar {
  display: grid; place-items: center; min-height: 74px; border-radius: 16px;
  background: linear-gradient(180deg, #ffe08f, #d4a843 60%, #b8862a);
  box-shadow: 0 10px 28px rgba(212, 168, 67, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.dg-jugar span { white-space: nowrap; text-align: center; font: 900 clamp(1.3rem, 6.4vw, 1.8rem)/1 'Syne', system-ui, sans-serif; text-transform: uppercase; color: #1a1206; letter-spacing: .02em; }

/* 2-oct · letra mínima: lo que se lee ≥15 px y las etiquetas ≥12 px (la ceja
   medía 11,5; los nombres de las caras 10,6; los textos de los pasos 13,8 a 360) */

/* tablet: el escalado de la guía vive ahora en css/game-guide.css, igual para los cinco juegos (5-oct). */