/* ============================================================
   Nyo: El desafío de los números — estilos del juego.
   Todas las reglas están dentro de .nyo-game para no afectar
   el resto de Nyo.cl. Usa las variables de color del sitio.
   ============================================================ */
.nyo-game { margin: 0 0 8px; }
.nyo-game__screen { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.nyo-game__noscript { margin: 0; padding: 40px 20px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* Marcador */
.nyo-game__hud { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 14px; background: var(--band); color: var(--band-ink); font: 600 .82rem var(--font-body); }
.nyo-game__stat { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.nyo-game__stat span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.nyo-game__stat b { font: 600 1rem var(--font-mono); }
.nyo-game__hud-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.nyo-game__tool { min-width: 36px; min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: inherit; font: 600 .8rem var(--font-body); cursor: pointer; }
.nyo-game__tool:hover, .nyo-game__tool:focus-visible { background: rgba(255,255,255,.18); }
.nyo-game__tool[hidden] { display: none; }

/* Escenario y canvas */
.nyo-game__stage { position: relative; width: 100%; background: var(--bg); touch-action: manipulation; }
.nyo-game__canvas { display: block; width: 100%; height: 100%; image-rendering: auto; outline: none; }

/* Capas sobre el canvas: inicio, desafío, pausa, fin */
.nyo-game__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: color-mix(in srgb, var(--band) 58%, transparent); }
.nyo-game__layer[hidden] { display: none; }
.nyo-game__card { width: min(520px, 100%); max-height: 100%; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); text-align: center; }
.nyo-game__card h2 { font-size: 1.35rem; margin: 0 0 6px; }
.nyo-game__card p { margin: 6px 0; color: var(--muted); font-size: .95rem; }
.nyo-game__card .nyo-game__big { color: var(--ink); font: 600 clamp(1.3rem, 4vw, 1.8rem) var(--font-display); margin: 10px 0 14px; }
.nyo-game__eyebrow { display: block; font: 700 .72rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.nyo-game__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.nyo-game__actions .btn { min-height: 46px; }
.nyo-game__play { font-size: 1.15rem; padding: 14px 34px; letter-spacing: .04em; }
.nyo-game__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.nyo-game__option { min-height: 52px; padding: 10px 6px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); font: 600 1.05rem var(--font-mono); cursor: pointer; }
.nyo-game__option:hover, .nyo-game__option:focus-visible { border-color: var(--accent); outline: none; }
.nyo-game__option small { display: block; font: 600 .66rem var(--font-body); color: var(--muted); margin-bottom: 2px; }
.nyo-game__option.is-ok { border-color: #3E8E63; background: color-mix(in srgb, #3E8E63 18%, var(--surface)); }
.nyo-game__option.is-bad { border-color: #B55A5A; background: color-mix(in srgb, #B55A5A 16%, var(--surface)); }
.nyo-game__option:disabled { cursor: default; }
.nyo-game__timer { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 12px; }
.nyo-game__timer i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; }
.nyo-game__feedback { min-height: 1.4em; font-weight: 700; color: var(--ink) !important; }
.nyo-game__feedback a { color: var(--accent); }
.nyo-game__progress { font: 600 .8rem var(--font-body); color: var(--muted); }
.nyo-game__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; text-align: left; margin: 12px 0 4px; font-size: .92rem; }
.nyo-game__stats dt { color: var(--muted); }
.nyo-game__stats dd { margin: 0; font: 600 .95rem var(--font-mono); text-align: right; color: var(--ink); }
.nyo-game__record { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font: 700 .75rem var(--font-body); }
.nyo-game__keys { font-size: .85rem !important; }
.nyo-game__keys kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); font: 600 .78rem var(--font-mono); color: var(--ink); }
.nyo-game__link { background: none; border: 0; color: var(--muted); text-decoration: underline; font: 600 .8rem var(--font-body); cursor: pointer; margin-top: 10px; }

/* Controles táctiles: solo en pantallas táctiles */
.nyo-game__controls { display: none; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 12px 12px; background: var(--surface-2); border-top: 1px solid var(--line); user-select: none; -webkit-user-select: none; touch-action: none; }
.nyo-game__pad { display: flex; gap: 10px; }
.nyo-game__btn { min-width: 64px; min-height: 58px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); border-bottom-width: 3px; background: var(--surface); color: var(--ink); font: 700 1rem var(--font-body); touch-action: none; -webkit-tap-highlight-color: transparent; }
.nyo-game__btn.is-down { background: var(--accent-soft); border-color: var(--accent); transform: translateY(1px); }
.nyo-game__btn--jump { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-hover); min-width: 86px; }
.nyo-game__btn--jump.is-down { background: var(--accent-hover); color: var(--accent-ink); }
.nyo-game__btn--act { font-size: .78rem; letter-spacing: .03em; }
.nyo-game.is-touch .nyo-game__controls { display: flex; }

/* Pantalla completa */
.nyo-game__screen:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; width: 100vw; height: 100vh; background: #000; }
.nyo-game__screen:fullscreen .nyo-game__stage { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; }
.nyo-game__screen:fullscreen .nyo-game__canvas { width: auto; height: auto; }

@media (max-width: 560px) {
  .nyo-game__hud { gap: 4px 12px; padding: 8px 10px; }
  .nyo-game__stat span { font-size: .6rem; }
  .nyo-game__stat b { font-size: .9rem; }
  .nyo-game__card { padding: 16px 14px; }
  .nyo-game__option { font-size: .95rem; min-height: 48px; }
  .nyo-game__btn { min-width: 58px; min-height: 54px; }
}
@media (max-width: 440px) {
  .nyo-game__controls { gap: 8px; padding: 8px 8px 10px; }
  .nyo-game__pad { gap: 8px; }
  .nyo-game__btn { min-width: 52px; padding: 0 10px; }
  .nyo-game__btn--act { font-size: .66rem; padding: 0 8px; letter-spacing: 0; }
  .nyo-game__btn--jump { min-width: 74px; }
  .nyo-game__hud-tools { margin-left: 0; }
}
@media (max-width: 360px) {
  .nyo-game__btn { min-width: 44px; padding: 0 8px; }
  .nyo-game__btn--act { font-size: .6rem; padding: 0 6px; }
  .nyo-game__btn--jump { min-width: 62px; }
}
@media (prefers-reduced-motion: reduce) { .nyo-game__timer i { transition: none !important; } }