/* =============================================================
   DIYFOMO — Juegos analógicos (juegos.html, generado por deploy_pkg/juegos_gen.py)
   Reutiliza tokens de styles.css y piezas de portafolio.css (pf-hero, work-*, pf-cta-in).
   ============================================================= */

/* Hero: fichas y dado flotando */
.jg-hero { padding-bottom: 60px; }
.jg-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.jg-float { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.jg-float i { position: absolute; border-radius: 50%; opacity: .9; animation: jgBob 7s ease-in-out infinite; }
.jg-float .c1 { width: 70px; height: 70px; right: 12%; top: 20%; background: var(--g1); box-shadow: inset 0 -8px 0 rgba(0,0,0,.25); }
.jg-float .c2 { width: 46px; height: 46px; right: 26%; top: 58%; background: var(--g4); box-shadow: inset 0 -6px 0 rgba(0,0,0,.25); animation-delay: -2.4s; }
.jg-float .c3 { width: 34px; height: 34px; right: 6%; top: 66%; background: var(--g3); box-shadow: inset 0 -5px 0 rgba(0,0,0,.25); animation-delay: -4.2s; }
.jg-float .jg-die { position: absolute; right: 16%; top: 36%; width: 110px; height: 110px; color: var(--accent); fill: var(--accent); transform: rotate(14deg); animation: jgSpin 12s ease-in-out infinite; opacity: .85; }
@keyframes jgBob { 50% { transform: translateY(-16px); } }
@keyframes jgSpin { 50% { transform: rotate(-8deg) translateY(-10px); } }

/* Tres formas de tenerlo */
.jg-ways-grid { display: grid; gap: 20px; }
.jg-way { padding: 28px; border-radius: 28px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; transition: border-color .4s, transform .6s var(--ease-out); }
.jg-way:hover { border-color: rgba(212, 255, 58, .35); transform: translateY(-4px); }
.jg-way h3 { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.jg-way-desc { color: #d4d2da; }
.jg-way .ticks { margin-top: auto; }
.jg-way-ic, .jg-v-ic { display: grid; place-items: center; border-radius: 14px; background: rgba(212, 255, 58, .12); color: var(--accent); flex: none; }
.jg-way-ic { width: 52px; height: 52px; }
.jg-way-ic svg { width: 28px; height: 28px; }

/* Catálogo */
.jg-cat { padding-top: 0; }
.jg-games { display: grid; gap: 28px; }
.jg-game { display: grid; border-radius: 28px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .4s; }
.jg-game:hover { border-color: rgba(212, 255, 58, .35); }
.jg-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #07090d; }
.jg-cover img { width: 100%; height: 100%; object-fit: cover; }
.jg-cover-art { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(circle at 20% 20%, rgba(255, 45, 135, .45), transparent 45%), radial-gradient(circle at 85% 80%, rgba(47, 123, 255, .45), transparent 50%), radial-gradient(circle at 70% 15%, rgba(25, 227, 168, .3), transparent 40%), #120f18; }
.jg-cover-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.jg-cover-art::after { content: attr(data-n); position: absolute; top: 16px; left: 16px; font-family: var(--mono); font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.jg-cover-art .jg-die { position: relative; width: 84px; height: 84px; color: var(--ink); fill: var(--ink); transform: rotate(-10deg); transition: transform .8s var(--ease-out); }
.jg-game:hover .jg-cover-art .jg-die { transform: rotate(20deg) scale(1.06); }
.jg-cover-art b { position: relative; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4vw, 56px); line-height: 1; }
.jg-status { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgba(11, 10, 15, .75); backdrop-filter: blur(8px); border: 1px solid var(--line-2); }
.jg-status.is-venta { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.jg-status.is-preventa { color: var(--accent); border-color: rgba(212, 255, 58, .5); }
.jg-body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.jg-tagline { font-size: 18px; color: var(--ink); }
.jg-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-block: 1px solid var(--line); }
.jg-meta small { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute-2); margin-bottom: 4px; }
.jg-meta b { font-weight: 500; font-size: 14px; }
.jg-variants { display: grid; gap: 10px; }
.jg-v { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.jg-v > div { flex: 1; min-width: 0; }
.jg-v b { display: block; font-size: 14px; font-weight: 600; }
.jg-v small { display: block; color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }
.jg-v-ic { width: 38px; height: 38px; border-radius: 11px; }
.jg-v-ic svg { width: 20px; height: 20px; }
.jg-v .btn { padding: 9px 14px; font-size: 13px; }
.jg-variants-soon .jg-v { opacity: .75; }
.is-teaser .work-name { color: var(--mute); }
.is-teaser > .jg-body > .btn { align-self: flex-start; }

/* A medida */
.jg-custom { border-top: 1px solid var(--line); }
.jg-custom-grid { display: grid; gap: 48px; align-items: start; }
.jg-steps { display: grid; gap: 18px; margin-top: 36px; counter-reset: s; }
.jg-steps li { display: flex; gap: 16px; align-items: flex-start; }
.jg-steps span { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 4px 10px; flex: none; margin-top: 2px; }
.jg-steps b { display: block; font-size: 17px; font-weight: 600; }
.jg-steps p { color: var(--mute); font-size: 15px; }
.jg-form-title { font-family: var(--serif); font-size: 34px; line-height: 1.05; margin-bottom: 4px; }
.jg-row { display: grid; gap: 16px; }

/* Lista de lanzamiento */
.jg-wl { padding-top: 0; }
.jg-wl-in { align-items: center; }

/* Juegos online y enlaces entre páginas */
.jg-cover-art.is-online { background: radial-gradient(circle at 80% 20%, rgba(123, 60, 255, .55), transparent 50%), radial-gradient(circle at 15% 85%, rgba(25, 227, 168, .35), transparent 45%), radial-gradient(circle at 50% 50%, rgba(212, 255, 58, .10), transparent 60%), #0e0c16; }
.jg-cover-art.is-online::before { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; }
.jg-cover-art.is-online .jg-die { width: 110px; transform: none; }
.jg-game:hover .jg-cover-art.is-online .jg-die { transform: translateY(-4px) scale(1.05); }
.jg-status.is-jugable { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.jg-status.is-beta { color: var(--accent); border-color: rgba(212, 255, 58, .5); }
.jg-also { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(212, 255, 58, .12); color: var(--accent); margin-top: -6px; }
.jg-also svg { width: 16px; height: 16px; }
a.jg-also:hover { background: rgba(212, 255, 58, .22); }
.jg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jg-chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: #d4d2da; }
.work-cta .btn svg { width: 18px; height: 18px; }
.jg-cross { display: grid; gap: 16px; align-items: center; margin-top: 36px; padding: 22px 24px; border-radius: 24px; border: 1px dashed rgba(212, 255, 58, .35); background: rgba(212, 255, 58, .04); }
.jg-cross b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }
.jg-cross p { color: var(--mute); margin-top: 4px; }
.jg-cross .btn { justify-self: start; }
.jg-cross .jg-way-ic svg { width: 28px; height: 28px; }
.jg-ic-die { width: 26px; height: 26px; fill: currentColor; }
@media (min-width: 900px) {
  .jg-cross { grid-template-columns: auto 1fr auto; gap: 22px; }
}

/* Pestañas: juegos de mesa | juegos online */
.jg-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(11, 10, 15, .55); backdrop-filter: blur(8px); max-width: 100%; }
.jg-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--mute); white-space: nowrap; transition: color .25s, background .25s; }
.jg-tabs a:hover { color: var(--ink); }
.jg-tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.jg-tabs svg { width: 18px; height: 18px; flex: none; }
.jg-tabs .jg-ic-die { width: 16px; height: 16px; }
.jg-hero .eyebrow { display: flex; width: max-content; max-width: 100%; }
@media (max-width: 420px) { .jg-tabs a { padding: 8px 11px; font-size: 13px; gap: 6px; } }

@media (min-width: 720px) {
  .jg-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .jg-ways-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jg-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jg-custom-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .jg-wl-in { grid-template-columns: 1.2fr 1fr; }
}
@media (max-width: 719px) {
  .jg-float .jg-die { width: 64px; height: 64px; right: 6%; top: 14%; }
  .jg-float .c1 { width: 40px; height: 40px; right: 26%; top: 10%; }
  .jg-float .c2, .jg-float .c3 { display: none; }
  .jg-hero-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .jg-float i, .jg-float .jg-die { animation: none; }
}