/* An image promises an action: open a world, open a profile, or explore the artwork. */
.image-link{position:relative;display:block;min-width:0;cursor:zoom-in}
.image-link:focus-visible{outline:3px solid var(--brand-gold);outline-offset:5px}
.image-zoom-hint,.person-mark .image-zoom-hint{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border:1px solid #d0a14470;border-radius:30px;background:#141427e8;color:var(--brand-white);font:500 .875rem/1.3 var(--sans);text-shadow:none;pointer-events:none;transition:background .2s,border-color .2s,translate .2s}
.image-zoom-hint .icon{width:17px;height:17px;color:var(--brand-gold)}
.image-link:hover .image-zoom-hint,.image-link:focus-visible .image-zoom-hint{background:#21223c;border-color:var(--brand-gold);translate:0 -3px}
.image-link>img{transition:filter .35s}
.image-link:hover>img{filter:brightness(1.07)}
.character-card:focus-within{border-color:var(--brand-gold);box-shadow:0 20px 50px -20px #0009}
.character-art.image-link{flex:none}
.character-profile{cursor:pointer;border-radius:0 0 11px 11px}
.character-profile:focus-visible{outline-offset:-5px}
.character-profile:hover h2{text-decoration:underline;text-decoration-color:var(--brand-gold-ink);text-decoration-thickness:1px;text-underline-offset:7px}
.character-profile .character-link .icon{transition:translate .2s}
.character-profile:hover .character-link .icon{translate:4px 0}
.hero-image-link{position:absolute;inset:0;z-index:0}
.hero-image-link .image-zoom-hint{top:24px;right:30px;bottom:auto}
.hub-hero-inner{pointer-events:none}
.hub-hero-inner>div{pointer-events:auto}
.hero-image-link:focus-visible{outline-offset:-7px}
.hub-hero .atmosphere,.hub-hero .hero-depth-line{pointer-events:none}
.image-viewer{width:min(1400px,calc(100vw - 32px));height:min(960px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #d0a14470;border-radius:14px;background:#101123;color:var(--brand-white);box-shadow:0 25px 100px #000b;overflow:hidden}
.image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.image-viewer::backdrop{background:#070a18eb;backdrop-filter:blur(12px)}
.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 24px;border-bottom:1px solid #ffffff20;background:#181a2d}
.viewer-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-gold);margin:0 0 7px}
.viewer-toolbar h2{font:400 clamp(1.4rem,2vw,2rem)/1.25 var(--serif);margin:0;overflow-wrap:anywhere}
.image-viewer button{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:10px;min-width:44px;min-height:44px;padding:9px 14px;border:1px solid #ffffff30;border-radius:6px;color:var(--brand-white);background:#22253c;font:500 .875rem/1.3 var(--sans);cursor:pointer;transition:background .2s,border-color .2s}
.image-viewer button:hover:enabled{background:#343850;border-color:var(--brand-gold)}
.image-viewer button:disabled{opacity:.4;cursor:default}
.image-viewer button:focus-visible,.viewer-stage:focus-visible{outline:2px solid var(--brand-gold);outline-offset:-3px}
.image-viewer [hidden]{display:none!important}
.viewer-stage{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none;user-select:none;background:radial-gradient(ellipse at center,#2c304c,#111326 75%);cursor:zoom-in}
.viewer-stage.is-zoomed{cursor:grab}
.viewer-stage.is-dragging{cursor:grabbing}
.viewer-image{grid-area:1/1;max-width:none;max-height:none;object-fit:contain;transform-origin:center;pointer-events:none;user-select:none;will-change:transform}
.viewer-status{position:absolute;inset:auto 20px;text-align:center;color:#d8dce9;font-size:1rem}
.viewer-footer{padding:14px 20px 16px;border-top:1px solid #ffffff20;background:#181a2d}
.viewer-controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.viewer-controls>span,.viewer-controls>output{font-size:.875rem;font-variant-numeric:tabular-nums;color:#d8dce9}
.viewer-controls>output{min-width:46px}
.viewer-separator{width:1px;height:25px;background:#ffffff25;margin-inline:4px}
.viewer-help{margin:12px 0 0;text-align:center;color:#c0c5d7;font-size:.8125rem}
.viewer-credit{margin:7px 0 0;text-align:center;color:#aeb4c9;font-size:.75rem}
@media(max-width:760px){
 .hero-image-link .image-zoom-hint{top:12px;right:15px}
 .image-viewer{width:100vw;height:100dvh;border:0;border-radius:0}
 .viewer-toolbar{padding:16px;gap:15px}
 .viewer-toolbar h2{font-size:1.4rem}
 .viewer-toolbar button{padding:9px 11px}
 .viewer-footer{padding:12px}
 .viewer-controls{gap:7px}
 .viewer-controls button{padding-inline:10px}
 .viewer-separator{display:none}
 .viewer-help{font-size:.75rem}
 .image-zoom-hint,.person-mark .image-zoom-hint{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.image-zoom-hint,.image-link>img,.character-profile .character-link .icon,.image-viewer button{transition:none}.image-link:hover .image-zoom-hint,.image-link:focus-visible .image-zoom-hint{translate:none}}
.motion-off .image-zoom-hint,.motion-off .character-profile .character-link .icon{transition:none;translate:none!important}