html, body { margin: 0; padding: 0; height: 100%; background: #000; color: #fff; }
body { font-family: Courier New, monospace; }
.viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
img { position: static; max-width: 100%; max-height: 100%; width: auto; height: auto; box-sizing: border-box; margin: 0; padding: 0; }
.nav { position: fixed; bottom: 48px; font-size: 14px; }
.prev { left: 20px; }
.next { right: 20px; }
.center { position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%); font-size: 14px; }
a { color: #fff; text-decoration: none; opacity: 0.9; }
a:hover { opacity: 1; text-decoration: underline; }
.disabled { opacity: 0.3; pointer-events: none; }

/* Footer */
.footer { position: fixed; left: 0; right: 0; bottom: 0; text-align: center; padding: 8px 12px; font-size: 12px; color: #aaa; background: rgba(0,0,0,0.2); }
.footer a { color: #fff; opacity: 0.85; text-decoration: none; }
.footer a:hover { opacity: 1; text-decoration: underline; }