/* Enlarge for real screenshots (merawork_shot adds .zoomable and a .shot-zoom button). */
.shot.zoomable .shot-zoom{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit}
.shot.zoomable .shot-zoom::after{content:"";position:absolute;right:.7rem;bottom:.7rem;width:2rem;height:2rem;border-radius:50%;background:rgba(36,18,60,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/62% no-repeat;opacity:.9;transition:transform .2s}
.shot.zoomable .shot-zoom:hover::after,.shot.zoomable .shot-zoom:focus-visible::after{transform:scale(1.12);opacity:1}
.shot.zoomable .shot-zoom:focus-visible{outline:3px solid var(--violet-bright,#7c4dff);outline-offset:-3px}
.hc-media .shot.zoomable{--ratio:2/1 !important}
.zoom-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;overflow:hidden}
.zoom-dialog::backdrop{background:rgba(24,12,42,.86)}
.zoom-dialog .zoom-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:3.2rem 1.2rem 1.2rem;cursor:zoom-out}
.zoom-dialog img{max-width:min(96vw,1800px);max-height:calc(100vh - 7rem);width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45);cursor:default}
.zoom-dialog .zoom-cap{margin:0;max-width:70ch;text-align:center;color:#fff;font-size:.9rem}
.zoom-dialog .zoom-close{position:absolute;top:.8rem;right:.8rem;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:#fff;color:#24123c;font-size:1.5rem;line-height:1;cursor:pointer}