/* «Cómo se juega» de Pass or Smash en texto vivo (games/passorsmash/guia.js, 1-oct-2026).
   Va dentro de los bloques de js/game-guide.js (.vp-ggs-block.vp-ggs-html).
   Color con significado como en el juego: rojo PASS/falsa, verde SMASH/verdadera,
   oro la carta y la racha. Letra de lectura ≥ 15 px, etiquetas ≥ 12 px. */
.vp-ggs-html { overflow: hidden; background: #07060a; flex-shrink: 0; }
.pg { position: relative; color: #fff; font-family: 'DM Sans', system-ui, sans-serif; text-align: left; }
.pg h3, .pg p, .pg ul { margin: 0; }
.pg-h {
  font: 900 clamp(1.15rem, 5.4vw, 1.6rem)/1.1 'Syne', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .02em; color: #f3d27a;
  text-shadow: 0 2px 0 #5a3d08, 0 0 18px rgba(243, 210, 122, .45); margin-bottom: 10px;
}

/* 2 · la misión: rojo a la izquierda, verde a la derecha */
.pg-mision {
  padding: 18px 18px 20px;
  background: radial-gradient(90% 120% at 0% 100%, rgba(255, 77, 77, .22), transparent 60%),
              radial-gradient(90% 120% at 100% 100%, rgba(74, 222, 128, .22), transparent 60%),
              linear-gradient(180deg, #16121c, #0b0910);
  box-shadow: inset 0 0 0 2px rgba(243, 210, 122, .55);
}
.pg-mision p { font: 700 clamp(1rem, 4.4vw, 1.25rem)/1.4 'DM Sans', system-ui, sans-serif; color: #fff7e6; }

/* 3 · los tres pasos, con su pantalla de verdad */
.pg-pasos { display: grid; gap: 12px; padding: 14px; background: #07060a; }
.pg-paso {
  --c: #f3d27a;
  display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 14px; align-items: center;
  padding: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(28, 22, 34, .92), rgba(10, 8, 14, .95));
  border: 1.5px solid var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent);
}
.pg-paso-2 { --c: #4ade80; }
.pg-arte { margin: 0; border-radius: 10px; overflow: hidden; background: #000; }
.pg-arte > img { display: block; width: 100%; height: auto; }
.pg-paso-2 .pg-arte > img { aspect-ratio: 600 / 640; object-fit: cover; object-position: 50% 0; }
.pg-paso-txt h3 { font: 900 clamp(.95rem, 4.3vw, 1.2rem)/1.1 'Syne', system-ui, sans-serif; text-transform: uppercase; color: var(--c, #fff); }
.pg-paso-2 .pg-paso-txt h3 { background: linear-gradient(90deg, #ff6b6b, #4ade80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-paso-txt p { margin-top: 5px !important; font-size: clamp(.94rem, 4vw, 1.1rem); line-height: 1.38; color: #ece6f2; }
.pg-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);
}

/* 4 · lo que tienes que saber */
.pg-reglas { padding: 16px 16px 18px; background: radial-gradient(120% 90% at 100% 0%, rgba(243, 210, 122, .14), transparent 60%), #07060a; }
.pg-reglas ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.pg-reglas li { position: relative; padding-left: 22px; font-size: clamp(.94rem, 4vw, 1.1rem); line-height: 1.38; color: #fff7e6; }
.pg-reglas li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d4a843); box-shadow: 0 0 8px rgba(243, 210, 122, .7);
}
.pg-reglas li:nth-child(2)::before { background: radial-gradient(circle at 35% 30%, #ffd0d0, #ff4d4d); box-shadow: 0 0 8px rgba(255, 77, 77, .7); }
.pg-reglas li:nth-child(3)::before { background: radial-gradient(circle at 35% 30%, #d4ffe2, #22c55e); box-shadow: 0 0 8px rgba(74, 222, 128, .7); }