/* Раздел «Справка к игре»: миниатюры снимков встроенной справки и просмотр крупно (help-gallery.js). */
.help-gallery{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.help-gallery li{margin:0}
.help-gallery a{display:block;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--soft);cursor:zoom-in;transition:border-color .15s,box-shadow .15s}
.help-gallery a:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(48,45,41,.12)}
.help-gallery a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.help-gallery img{display:block;width:100%;height:auto;aspect-ratio:16/9}
@media (max-width:700px){.help-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(20,18,16,.9);padding:60px 72px}
.lightbox[hidden]{display:none}
.lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%}
.lightbox-figure img{display:block;max-width:min(1280px,100%);max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);background:#000}
.lightbox-count{margin-top:12px;color:#f2eee8;font-size:14px}
.lightbox button{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font:400 30px/1 system-ui,sans-serif;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.28)}
.lightbox button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lightbox-close{top:12px;right:12px}
.lightbox-prev{left:12px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:12px;top:50%;transform:translateY(-50%)}
body.lightbox-open{overflow:hidden}
@media (max-width:700px){
  .lightbox{padding:60px 8px 80px}
  .lightbox-figure img{max-height:calc(100vh - 190px)}
  .lightbox-prev,.lightbox-next{top:auto;bottom:14px;transform:none}
  .lightbox-prev{left:calc(50% - 60px)}
  .lightbox-next{right:calc(50% - 60px)}
}