/* «Cómo se juega» del Cazador en texto vivo (games/cazador/guia.js, 1-oct-2026).
   Va dentro de los bloques de js/game-guide.js (.vp-ggs-block.vp-ggs-html).
   Madera y oro de la caseta; color con significado como en el juego: verde el
   paso que enseña, oro las reglas, y cada ronda especial con el color de su
   neón (azul agente, naranja balizas, rosa baldas). */
.vp-ggs-html { overflow: hidden; background: #120c07; flex-shrink: 0; }
.cg { position: relative; color: #fff7e6; font-family: 'DM Sans', system-ui, sans-serif; text-align: left; }
.cg h3, .cg h4, .cg p, .cg ul { margin: 0; }
.cg-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 */
.cg-mision {
  padding: 18px 18px 20px;
  background: radial-gradient(120% 100% at 0% 0%, rgba(243, 210, 122, .18), transparent 60%),
              linear-gradient(180deg, #3a2614, #1c120a);
  box-shadow: inset 0 0 0 2px rgba(243, 210, 122, .55);
}
.cg-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 */
.cg-pasos { display: grid; gap: 12px; padding: 14px; background: #120c07; }
.cg-paso {
  display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 14px; align-items: center;
  padding: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(58, 38, 20, .85), rgba(24, 16, 9, .9));
  border: 1.5px solid rgba(243, 210, 122, .45);
}
.cg-paso-2 { border-color: rgba(255, 90, 74, .55); }
.cg-paso-3 { border-color: rgba(74, 222, 128, .55); }
.cg-arte { margin: 0; border-radius: 10px; overflow: hidden; background: #000; }
.cg-arte > img { display: block; width: 100%; height: auto; }
.cg-paso-1 .cg-arte > img { aspect-ratio: 600 / 340; object-fit: cover; object-position: 50% 0; }
.cg-paso-2 .cg-arte > img { aspect-ratio: 600 / 560; object-fit: cover; object-position: 50% 78%; }
.cg-paso-txt h3 { font: 900 clamp(.95rem, 4.3vw, 1.2rem)/1.1 'Syne', system-ui, sans-serif; text-transform: uppercase; color: #fff; }
.cg-paso-txt p { margin-top: 5px !important; font-size: clamp(.94rem, 4vw, 1.1rem); line-height: 1.38; color: #eadfc8; }
.cg-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 · rondas especiales + combo y reto */
.cg-especiales { padding: 16px 14px 16px; background: radial-gradient(120% 90% at 100% 0%, rgba(243, 210, 122, .14), transparent 60%), #120c07; }
.cg-tres { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cg-esp {
  --c: #5b9dff; display: grid; grid-template-columns: 34% 1fr; grid-template-rows: auto 1fr; column-gap: 10px; row-gap: 4px; align-items: start;
  padding: 8px; border-radius: 12px; min-width: 0;
  background: linear-gradient(180deg, rgba(30, 22, 14, .95), rgba(12, 8, 5, .95));
  border: 1.5px solid var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent);
}
.cg-esp-2 { --c: #ff8a1f; }
.cg-esp-3 { --c: #ff4fa3; }
.cg-esp .cg-arte { grid-row: 1 / 3; }
.cg-esp .cg-arte > img { aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.cg-esp h4 { font: 900 clamp(.95rem, 4.2vw, 1.15rem)/1.1 'Syne', system-ui, sans-serif; text-transform: uppercase; color: var(--c); }
.cg-esp p { font-size: clamp(.94rem, 3.4vw, 1.05rem); line-height: 1.32; color: #eadfc8; }
.cg-extra { list-style: none; padding: 0; margin-top: 12px !important; display: grid; gap: 7px; }
.cg-extra li { position: relative; padding-left: 22px; font-size: clamp(.94rem, 4vw, 1.1rem); line-height: 1.38; color: #fff7e6; }
.cg-extra 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);
}

/* Botones de arriba de la guía: zona táctil de 44 px (medían 69×32 y 78×33). */
.vp-gg--scroll .vp-ggs-back, .vp-gg--scroll .vp-ggs-skip { min-height: 44px; min-width: 44px; }

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