#rules-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:16px 64px;border:0;background:transparent;color:#fff;overflow:hidden}
#rules-viewer[open]{display:flex;align-items:center;justify-content:center}
#rules-viewer::backdrop{background:#000e}
#rules-viewer-pages{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0}
#rules-viewer-pages img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none}
#rules-viewer-pages img[hidden]{display:none}
.rules-viewer-toolbar button{position:absolute;padding:8px 14px;font-size:36px;line-height:1;border:0;background:#0005;color:#fff;border-radius:8px;cursor:pointer}
#rules-viewer-prev{left:8px;top:50%;transform:translateY(-50%)}
#rules-viewer-next{right:8px;top:50%;transform:translateY(-50%)}
#rules-viewer-close{right:12px;top:8px}
#rules-viewer-count{position:absolute;transform:translate(-100%,-100%);font-size:18px;font-weight:700;color:#facc15;background:#1a0f08e6;padding:4px 12px;border-radius:8px;box-shadow:0 4px 8px #0005;pointer-events:none;z-index:1}
#rules-viewer :focus-visible{outline:2px solid #facc15;outline-offset:2px}
@media(max-width:640px){#rules-viewer{padding:12px 42px}.rules-viewer-toolbar button{padding:6px 10px;font-size:28px}#rules-viewer-prev{left:0}#rules-viewer-next{right:0}}