/*
 * Manga panel browser overlay
 * Used by both the in-game story scroll and the public storybook viewer.
 * z-index 99999 sits above game-over modals (9999) but below fatal errors (999999).
 */

#story-image-overlay,
.story-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: storyOverlayFadeIn 180ms ease-out;
    cursor: zoom-out;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
}

/* CRITICAL: display:flex above overrides the UA `[hidden]{display:none}` rule,
   so closing (which sets hidden=true) would leave the overlay stuck on screen.
   Re-assert the hidden contract. */
#story-image-overlay[hidden],
.story-overlay[hidden] {
    display: none !important;
}

@keyframes storyOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.story-overlay .story-overlay-image {
    /* The image owns its touch gestures once it is zoomable, or the browser
       takes the pinch and scales the page instead of the panel. */
    touch-action: none;
    transform-origin: center center;
    will-change: transform;
    /* BIGGER, AND ACTUALLY CENTRED. The reservation below was for a caption
       that does not exist — neither the public viewer nor the in-game overlay
       renders one — and on a flex-centred child a bottom margin shifts the box
       UP by half its value, which is why the panel sat 6px above centre.
       Reclaiming that space centres it exactly and buys ~13% more height. The
       conservative base still clears a caption at every size; the panel takes
       the larger cap only when there is provably none. */
    max-width: 94vw;
    max-height: 82svh;
    border-radius: 10px;
    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(124, 90, 255, 0.18);
    object-fit: contain;
    cursor: default;
    animation: storyImagePop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* A CAPTION, WHEN THERE IS ONE, KEEPS ITS ROOM. Both overlays share the id AND
   the class, so neither selector separates them; what actually differs is
   whether `.story-overlay-meta` is rendered. An engine without `:has()` simply
   keeps 82svh — still more than the 78svh this started at, and never an
   overlap. */
.story-overlay:not(:has(.story-overlay-meta)) .story-overlay-image {
    max-height: 88svh;
}

/* A zoomed panel is being read closely: drop the pop animation so it does not
   fight the transform, and let it grow past the fit box. */
.story-overlay .story-overlay-image.is-zoomed {
    animation: none;
    cursor: grab;
}

@keyframes storyImagePop {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1.0);  opacity: 1; }
}

.story-overlay-prev,
.story-overlay-next,
.story-overlay-close {
    position: absolute;
    border: 1px solid rgba(238, 219, 241, 0.18);
    background: rgba(20, 10, 30, 0.62);
    color: #eedbf1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease,
        opacity 160ms ease,
        box-shadow 160ms ease;
    font-family: inherit;
    line-height: 1;
}

.story-overlay-prev,
.story-overlay-next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-overlay-prev { left: 28px; }
.story-overlay-next { right: 28px; }

.story-overlay-prev:hover:not(:disabled),
.story-overlay-next:hover:not(:disabled),
.story-overlay-close:hover {
    background: rgba(40, 20, 60, 0.85);
    border-color: rgba(255, 215, 130, 0.55);
    box-shadow: 0 0 18px rgba(255, 215, 130, 0.28);
    transform: translateY(-50%) scale(1.06);
}

.story-overlay-close:hover {
    transform: scale(1.08);
}

.story-overlay-prev:focus-visible,
.story-overlay-next:focus-visible,
.story-overlay-close:focus-visible {
    outline: 3px solid #fff2a8;
    outline-offset: 3px;
    border-color: #fff2a8;
    box-shadow: 0 0 0 5px rgba(20, 10, 30, 0.78), 0 0 22px rgba(255, 242, 168, 0.48);
}

.story-overlay-prev:disabled,
.story-overlay-next:disabled {
    opacity: 0.28;
    cursor: not-allowed;
    transform: translateY(-50%);
    box-shadow: none;
}

.story-overlay-close {
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-overlay-meta {
    position: absolute;
    /* Anchor to the bottom of the viewport with safe-area padding, never
       overlap the image (which is capped at max-height 78vh). */
    bottom: max(env(safe-area-inset-bottom, 0px), 28px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(8, 4, 20, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(124, 90, 255, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #eedbf1;
    font-family: inherit;
    text-align: center;
    pointer-events: auto;
    cursor: default;
}

.story-overlay-turn-label {
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffd782;
    text-shadow: 0 0 10px rgba(255, 215, 130, 0.35);
}

.story-overlay-counter {
    font-size: 12px;
    opacity: 0.78;
    letter-spacing: 0.08em;
}

/* Compact tablet/mobile layout */
@media (max-width: 768px) {
    .story-overlay-prev,
    .story-overlay-next {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }
    .story-overlay-prev { left: 12px; }
    .story-overlay-next { right: 12px; }
    .story-overlay-close {
        top: 14px;
        right: 14px;
    }
    .story-overlay .story-overlay-image {
        max-width: 96vw;
        max-height: 80svh;
    }
}

@media (max-width: 480px) {
    .story-overlay-prev,
    .story-overlay-next {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-overlay,
    .story-overlay .story-overlay-image,
    .story-overlay-prev,
    .story-overlay-next,
    .story-overlay-close {
        animation: none;
        transition: none;
    }
}

/* ── Landscape-phone fit (short viewport) ───────────────────────────────────
 * The blocks above are WIDTH-based (max-width:768/480), so a landscape phone at
 * 845x400 (width 845 > 768) gets the DESKTOP sizing: the 78vh image (312px of a
 * 400px viewport) and the bottom-pinned .story-overlay-meta collide in the lower
 * band, dropping the caption on top of the panel art. This height-gated block
 * shrinks the image, compresses the caption to a single row lifted clear of the
 * art, and tucks the 44px controls off the notch. It lives HERE (not mobile.css)
 * because manga-overlay.css is the only stylesheet shared by the in-battle
 * overlay (index.html) AND the standalone /s/ storybook viewer (storybook.html),
 * which never loads mobile.css. Desktop stays byte-identical: no monitor is
 * both landscape and <=560px tall. */
@media (orientation: landscape) and (max-height: 560px) {
    .story-overlay .story-overlay-image {
        max-height: 72svh;
        max-width: 82vw;
        margin-bottom: 0;
    }

    /* One compact row (not the two-line stack), lifted clear of the image and
       above the home indicator. Harmless on the single-line in-battle caption. */
    .story-overlay-meta {
        bottom: max(env(safe-area-inset-bottom, 0px), 8px);
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
        padding: 5px 14px;
    }
    .story-overlay-turn-label { font-size: 12px; }
    .story-overlay-counter { font-size: 11px; }

    /* Keep a real 44px touch size, but inset the controls off the side notch /
       rounded corners of a landscape phone. transform:translateY(-50%) centering
       from the base rule is preserved (untouched here). */
    .story-overlay-prev,
    .story-overlay-next {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
    .story-overlay-prev { left: max(env(safe-area-inset-left, 0px), 10px); }
    .story-overlay-next { right: max(env(safe-area-inset-right, 0px), 10px); }
    .story-overlay-close {
        top: max(env(safe-area-inset-top, 0px), 10px);
        right: max(env(safe-area-inset-right, 0px), 10px);
    }
}