.image-viewer-open { overflow:hidden; scrollbar-gutter:stable; }
.image-viewer {
  box-sizing:border-box; width:max-content; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px);
  padding:0; margin:auto; color:#3b2d1e; background:#efe2cf; border:2px solid #72522f;
  border-radius:2px; box-shadow:0 8px 45px #000b; font:13px Arial,Helvetica,sans-serif;
}
.image-viewer:not([open]) { display:none; }
.image-viewer[open] { display:flex; flex-direction:column; }
.image-viewer::backdrop { background:rgba(0,0,0,.82); }
.image-viewer-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 12px; border-bottom:1px solid #9c805a; }
.image-viewer-heading strong { color:#900; font-size:14px; line-height:1.4; }
.image-viewer button { flex-shrink:0; font:inherit; color:#5a2508; cursor:pointer; padding:5px 9px; background:#ead8b8; border:1px solid #9f8056; border-radius:2px; }
.image-viewer button:hover { background:#fff0d3; }
.image-viewer button:focus-visible { outline:2px solid #c18c39; outline-offset:2px; }
.image-viewer button:disabled { opacity:.4; cursor:default; }
.image-viewer button[hidden] { display:none; }
.image-viewer-close span { margin-left:6px; font-size:20px; line-height:12px; vertical-align:-1px; }
.image-viewer-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:10px; min-height:100px; overflow:auto; background:#21180f; }
.image-viewer-map { position:relative; display:inline-block; line-height:0; }
.image-viewer-image { display:block; width:auto; height:auto; max-width:min(1100px,calc(100vw - 56px)); max-height:calc(100dvh - 152px); object-fit:contain; }
.image-viewer-loading { position:absolute; color:#eedec4; margin:10px; }
.image-viewer-navigation { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:9px 12px; border-top:1px solid #9c805a; }
.image-viewer-count { flex:1; text-align:center; color:#6c563c; font-size:12px; }
a[data-image-viewer],.map-enlarge { cursor:zoom-in; }
.trainer-map .map-enlarge { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; z-index:1; }
.trainer-map .map-enlarge:hover { background:transparent; }
.map-enlarge span { position:absolute; right:5px; bottom:5px; padding:5px 7px; font:11px Arial,sans-serif; color:#542b0e; background:#f0dec2; border:1px solid #8d704c; opacity:0; }
.map-enlarge:hover span,.map-enlarge:focus-visible span { opacity:1; }
@media(max-width:600px) { .image-viewer-heading { gap:10px; padding:8px; } .image-viewer-heading strong { font-size:12px; } .image-viewer-navigation { padding:8px; gap:8px; } }