/* Visor de imagenes del juego (inc/viewer.php). */
.viewer{min-width:0}
.viewer-stage{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  border:1px solid var(--navy-3);background:#04141f}
.viewer-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .45s ease}
.viewer-slide.is-on{opacity:1}
.viewer-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:12px}
.viewer-thumb{position:relative;display:block;padding:0;border:2px solid transparent;border-radius:9px;
  overflow:hidden;background:#04141f;cursor:pointer;opacity:.6;aspect-ratio:16/9;
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease}
.viewer-thumb:hover{opacity:1;transform:translateY(-2px)}
.viewer-thumb.is-on{opacity:1;border-color:var(--amber)}
.viewer-thumb:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.viewer-thumb img{width:100%;height:100%;object-fit:cover}
.viewer-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--amber)}
.viewer.is-running .viewer-thumb.is-on .viewer-bar{animation:viewer-bar var(--iv,3000ms) linear forwards}
@keyframes viewer-bar{to{width:100%}}
@media (max-width:540px){.viewer-thumbs{gap:6px}.viewer-thumb{border-radius:7px}}
@media (prefers-reduced-motion:reduce){.viewer-slide{transition:none}.viewer-bar{display:none}}