/* MegaPets Bajki: component-scoped original book animation. */
.mp-tale-reader {
    margin-top: 0;
}

.mp-tale-reader__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 340px;
    padding: clamp(14px, 2.6vw, 34px) clamp(6px, 1.8vw, 22px) clamp(22px, 3.4vw, 42px);
    overflow: visible;
    background: transparent;
    /* One shared camera for the book: the turning leaf is a rigid plane, so
       perspective never warps rendered glyphs. */
    perspective: 3000px;
    perspective-origin: 50% 46%;
    opacity: 1;
    visibility: visible;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    transition:
        opacity 240ms ease,
        visibility 0s linear 0s;
}

.mp-tale-reader__opening {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-height: 290px;
    padding: 0 12px 14px;
    overflow: hidden;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition:
        max-height 320ms ease,
        padding 320ms ease,
        opacity 260ms ease,
        visibility 0s linear 320ms;
}

.mp-tale-reader__opening-window,
.mp-tale-reader__opening-window * {
    box-sizing: border-box;
}

.mp-tale-reader__opening-window {
    /* A compact loading indicator, without a video or external media. */
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: min(100%, 220px);
    overflow: hidden;
    border: 0;
    border-radius: var(--mp-radius-small, 4px);
    background: var(--mp-color-surface, #ffffff);
    box-shadow: none;
}

.mp-tale-reader__loading {
    padding-top: 12px;
    border-top: 0;
}

.mp-tale-reader__loading {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 6px 14px 10px;
    border-top: 1px solid var(--mp-standard-separator-line-color, rgba(199, 154, 87, 0.16));
    background: var(--mp-color-surface, #ffffff);
}

.mp-tale-reader__status {
    min-height: 20px;
    margin: 0;
    color: var(--mp-color-brown-chocolate, #6b5643);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    text-align: center;
}

.mp-tale-reader__loading-track {
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mp-color-background-soft, #f4ece2);
}

.mp-tale-reader__loading-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--mp-color-gold-dark, #b8833e);
    transition: width 180ms ease-out;
}

.mp-tale-reader.is-ready .mp-tale-reader__opening,
.mp-tale-reader__opening.is-leaving {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
}

.mp-tale-reader:not(.is-ready):not(.is-error) .mp-tale-reader__stage,
.mp-tale-reader.is-error .mp-tale-reader__stage {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mp-tale-reader:not(.is-ready) .mp-tale-reader__controls,
.mp-tale-reader:not(.is-ready) .mp-tale-reader__tools,
.mp-tale-reader:not(.is-ready) .mp-tale-reader__notice {
    display: none;
}

.mp-tale-reader__book {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, var(--mp-tale-page-w, minmax(0, 1fr)));
    width: var(--mp-tale-book-w, min(100%, 1040px));
    height: var(--mp-tale-page-h, auto);
    aspect-ratio: 839.04 / 595.32;
    filter: none;
    transform: none;
    transform-style: preserve-3d;
    user-select: none;
}

.mp-tale-reader__book::before,
.mp-tale-reader__book::after {
    display: none;
    content: none;
}

/* --------------------------------------------------------------------------
   Book body: the physical stack of leaves under the two rendered pages.
   Thickness moves from the right block to the left one as the reader advances.
   ========================================================================== */

.mp-tale-reader__body {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
}

/* No paper block by default: the pages rest on a soft contact shadow.
   Add is-body on the book element to bring the visible thickness back. */
.mp-tale-reader__body-half,
.mp-tale-reader__body-spine {
    display: none;
}

.mp-tale-reader__book.is-body .mp-tale-reader__body-half {
    display: block;
    position: absolute;
    top: 4px;
    bottom: calc(-1 * var(--mp-stack, 7px));
    background: linear-gradient(180deg, #f7f3ea, #ece5d9 62%, #ddd4c5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mp-tale-reader__body-half--left {
    --mp-stack: var(--mp-tale-stack-left, 5px);

    right: 50%;
    left: -3px;
    border-radius: 2px 0 0 3px;
}

.mp-tale-reader__body-half--right {
    --mp-stack: var(--mp-tale-stack-right, 10px);

    right: -3px;
    left: 50%;
    border-radius: 0 2px 3px 0;
}

.mp-tale-reader__book.is-body .mp-tale-reader__body-spine {
    display: block;
    position: absolute;
    top: 2px;
    bottom: calc(-1 * max(var(--mp-tale-stack-left, 5px), var(--mp-tale-stack-right, 10px)));
    left: 50%;
    width: clamp(14px, 2vw, 22px);
    border-radius: 0 0 30% 30%;
    background: linear-gradient(
        90deg,
        rgba(96, 82, 66, 0.16),
        rgba(244, 239, 230, 0.95) 46%,
        rgba(244, 239, 230, 0.95) 54%,
        rgba(96, 82, 66, 0.16)
    );
    transform: translateX(-50%);
}

.mp-tale-reader__body-shadow {
    position: absolute;
    right: 4px;
    bottom: calc(-10px - max(var(--mp-tale-stack-left, 5px), var(--mp-tale-stack-right, 10px)));
    left: 4px;
    height: 26px;
    background: radial-gradient(
        56% 100% at 50% 0%,
        rgba(42, 34, 27, 0.26),
        rgba(42, 34, 27, 0) 76%
    );
}

.mp-tale-reader__book.is-single .mp-tale-reader__body-half--left,
.mp-tale-reader__book.is-single .mp-tale-reader__body-spine {
    display: none !important;
}

.mp-tale-reader__book.is-body.is-single .mp-tale-reader__body-half--right {
    --mp-stack: 8px;

    right: -3px;
    left: -3px;
    border-radius: 2px 2px 3px 3px;
}

.mp-tale-reader__book.is-single {
    grid-template-columns: var(--mp-tale-page-w, minmax(0, 1fr));
    width: var(--mp-tale-page-w, min(100%, 570px));
    height: var(--mp-tale-page-h, auto);
    aspect-ratio: 419.52 / 595.32;
}

.mp-tale-reader__page {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--mp-tale-page-w, auto);
    height: var(--mp-tale-page-h, auto);
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    filter: none;
    transform: none;
}

.mp-tale-reader__page--left {
    grid-column: 1;
}

.mp-tale-reader__page--right {
    grid-column: 2;
}

.mp-tale-reader__page.is-blank {
    background: #ffffff;
}

.mp-tale-reader__page canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
    filter: none;
    image-rendering: auto;
    transform: none;
}

/* MP4 pojawia się zgodnie z wybranym trybem czytania. Canvas PDF pozostaje
   pod spodem jako natychmiastowy i bezpieczny fallback. */
.mp-tale-reader__animation {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.mp-tale-reader__animation.is-replace { background: #ffffff; }
.mp-tale-reader__animation.is-overlay { background: transparent; }
.mp-tale-reader__animation.is-ready.is-active { opacity: 1; }
.mp-tale-reader.is-turning .mp-tale-reader__animation { opacity: 0; }

.mp-tale-reader.is-ready .mp-tale-reader__page:not(.is-blank) {
    cursor: pointer;
}

.mp-tale-reader__page.is-blank canvas {
    visibility: hidden;
}

.mp-tale-reader__book.is-single .mp-tale-reader__page--left,
.mp-tale-reader__book.is-single .mp-tale-reader__spine {
    display: none;
}

.mp-tale-reader__book.is-single .mp-tale-reader__page--right {
    grid-column: 1;
}

.mp-tale-reader__spine {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 50%;
    width: clamp(18px, 2.6vw, 34px);
    background: linear-gradient(
        90deg,
        rgba(63, 52, 40, 0) 0%,
        rgba(63, 52, 40, 0.07) 30%,
        rgba(63, 52, 40, 0.2) 47%,
        rgba(63, 52, 40, 0.24) 50%,
        rgba(63, 52, 40, 0.16) 53%,
        rgba(63, 52, 40, 0.05) 72%,
        rgba(63, 52, 40, 0) 100%
    );
    box-shadow: none;
    transform: translateX(-50%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   3D leaf turn (desktop spread)
   The leaf is one rigid plane carrying two pixel-exact page bitmaps. Because
   nothing is curled, skewed or scaled per-column, text never distorts, and at
   0deg / 180deg the composite transform is the identity, so both rest states
   are perfectly sharp.
   ========================================================================== */

.mp-tale-reader__leaf-layer {
    top: 0;
    transform-style: preserve-3d;
}

.mp-tale-reader__leaf {
    position: absolute;
    z-index: 2;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.mp-tale-reader__leaf-layer.is-forward .mp-tale-reader__leaf {
    transform-origin: left center;
    transform: rotateY(0deg);
}

.mp-tale-reader__leaf-layer.is-backward .mp-tale-reader__leaf {
    transform-origin: right center;
    transform: rotateY(0deg);
}

.mp-tale-reader__leaf-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(116, 101, 84, 0.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mp-tale-reader__leaf-face--back {
    transform: rotateY(180deg);
}

.mp-tale-reader__leaf-face canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
    image-rendering: auto;
}

.mp-tale-reader__leaf-shade {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.mp-tale-reader__leaf-face--front .mp-tale-reader__leaf-shade {
    background: linear-gradient(
        90deg,
        rgba(42, 34, 27, 0.34),
        rgba(42, 34, 27, 0.12) 26%,
        rgba(42, 34, 27, 0.04) 70%,
        rgba(42, 34, 27, 0.14) 100%
    );
}

.mp-tale-reader__leaf-face--back .mp-tale-reader__leaf-shade {
    background: linear-gradient(
        270deg,
        rgba(42, 34, 27, 0.36),
        rgba(42, 34, 27, 0.14) 26%,
        rgba(42, 34, 27, 0.04) 74%,
        rgba(42, 34, 27, 0.12) 100%
    );
}

/* Shadow the leaf casts on the half it is about to cover. */
.mp-tale-reader__leaf-shadow {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.mp-tale-reader__leaf-layer.is-forward .mp-tale-reader__leaf-shadow {
    right: 100%;
    background: linear-gradient(
        270deg,
        rgba(42, 34, 27, 0.42),
        rgba(42, 34, 27, 0.16) 22%,
        rgba(42, 34, 27, 0) 62%
    );
}

.mp-tale-reader__leaf-layer.is-backward .mp-tale-reader__leaf-shadow {
    left: 100%;
    background: linear-gradient(
        90deg,
        rgba(42, 34, 27, 0.42),
        rgba(42, 34, 27, 0.16) 22%,
        rgba(42, 34, 27, 0) 62%
    );
}

.mp-tale-reader__leaf-layer.is-forward.is-running .mp-tale-reader__leaf {
    animation: mp-tale-leaf-forward var(--mp-tale-turn-duration, 1080ms) cubic-bezier(0.42, 0.02, 0.22, 1) both;
}

.mp-tale-reader__leaf-layer.is-backward.is-running .mp-tale-reader__leaf {
    animation: mp-tale-leaf-backward var(--mp-tale-turn-duration, 1080ms) cubic-bezier(0.42, 0.02, 0.22, 1) both;
}

.mp-tale-reader__leaf-layer.is-running .mp-tale-reader__leaf-face--front .mp-tale-reader__leaf-shade {
    animation: mp-tale-leaf-front-shade var(--mp-tale-turn-duration, 1080ms) cubic-bezier(0.42, 0.02, 0.22, 1) both;
}

.mp-tale-reader__leaf-layer.is-running .mp-tale-reader__leaf-face--back .mp-tale-reader__leaf-shade {
    animation: mp-tale-leaf-back-shade var(--mp-tale-turn-duration, 1080ms) cubic-bezier(0.42, 0.02, 0.22, 1) both;
}

.mp-tale-reader__leaf-layer.is-running .mp-tale-reader__leaf-shadow {
    animation: mp-tale-leaf-cast var(--mp-tale-turn-duration, 1080ms) cubic-bezier(0.42, 0.02, 0.22, 1) both;
}

@keyframes mp-tale-leaf-forward {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(-180deg);
    }
}

@keyframes mp-tale-leaf-backward {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(180deg);
    }
}

@keyframes mp-tale-leaf-front-shade {
    0% {
        opacity: 0;
    }

    52% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.55;
    }
}

@keyframes mp-tale-leaf-back-shade {
    0% {
        opacity: 0.7;
    }

    52% {
        opacity: 0.62;
    }

    100% {
        opacity: 0;
    }
}

@keyframes mp-tale-leaf-cast {
    0% {
        opacity: 0;
    }

    38% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
    }
}

.mp-tale-reader__turn-layer {
    position: absolute;
    z-index: 8;
    overflow: visible;
    pointer-events: none;
}

.mp-tale-reader__turn-clip {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    will-change: clip-path;
}

.mp-tale-reader__turn-clip canvas {
    display: block;
    background: transparent;
    filter: none;
    image-rendering: auto;
    transform: none;
}

.mp-tale-reader__turn-layer.is-style-mask.is-forward.is-running .mp-tale-reader__turn-clip {
    animation: mp-tale-flat-reveal-forward var(--mp-flat-duration, 680ms) cubic-bezier(0.45, 0.04, 0.18, 1) both;
}

.mp-tale-reader__turn-layer.is-style-mask.is-backward.is-running .mp-tale-reader__turn-clip {
    animation: mp-tale-flat-reveal-backward var(--mp-flat-duration, 680ms) cubic-bezier(0.45, 0.04, 0.18, 1) both;
}

/* Slide: the whole outgoing spread travels off the stage, e-reader style. */
.mp-tale-reader__turn-layer.is-style-slide.is-running .mp-tale-reader__turn-clip {
    box-shadow: 0 0 24px rgba(42, 34, 27, 0.22);
}

.mp-tale-reader__turn-layer.is-style-slide.is-forward.is-running .mp-tale-reader__turn-clip {
    animation: mp-tale-slide-forward var(--mp-flat-duration, 680ms) cubic-bezier(0.34, 0.02, 0.16, 1) both;
}

.mp-tale-reader__turn-layer.is-style-slide.is-backward.is-running .mp-tale-reader__turn-clip {
    animation: mp-tale-slide-backward var(--mp-flat-duration, 680ms) cubic-bezier(0.34, 0.02, 0.16, 1) both;
}

/* Lift: the sheet rises a hair and dissolves. Calmest of the set. */
.mp-tale-reader__turn-layer.is-style-lift.is-running .mp-tale-reader__turn-clip {
    animation: mp-tale-lift var(--mp-flat-duration, 680ms) cubic-bezier(0.3, 0.04, 0.2, 1) both;
}

@keyframes mp-tale-slide-forward {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-102%);
    }
}

@keyframes mp-tale-slide-backward {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(102%);
    }
}

@keyframes mp-tale-lift {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.035);
    }
}

/* Soft leaf: the same rigid turn without the dramatic shading. */
.mp-tale-reader__leaf-layer.is-soft .mp-tale-reader__leaf-shade,
.mp-tale-reader__leaf-layer.is-soft .mp-tale-reader__leaf-shadow {
    animation: none !important;
    opacity: 0 !important;
}

.mp-tale-reader__leaf-layer.is-soft .mp-tale-reader__leaf-face {
    box-shadow: 0 0 0 1px rgba(116, 101, 84, 0.16);
}

@keyframes mp-tale-flat-reveal-forward {
    from {
        clip-path: inset(0 0 0 0);
    }

    to {
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes mp-tale-flat-reveal-backward {
    from {
        clip-path: inset(0 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 100%);
    }
}

/* While the cover swings, the half it sweeps into is nothing at all: no paper,
   no shadow plate, no duplicate of the page carried on the cover's back. */
.mp-tale-reader__book.is-cover-turn .mp-tale-reader__page--left,
.mp-tale-reader__book.is-cover-turn .mp-tale-reader__page--left.is-blank {
    background: transparent;
    box-shadow: none;
}

.mp-tale-reader__book.is-cover-turn .mp-tale-reader__leaf-shadow,
.mp-tale-reader__book.is-cover-turn .mp-tale-reader__body-shadow {
    display: none;
}

.mp-tale-reader__book.is-cover-turn .mp-tale-reader__body-half--left,
.mp-tale-reader__book.is-cover-turn .mp-tale-reader__body-spine {
    display: none;
}

/* Pan mode (narrow screens): the full spread stays intact and the stage shows
   one page at a time; turning slides the book to the next page. */
.mp-tale-reader__stage.is-pan {
    place-items: center start;
    overflow: hidden;
    padding-inline: 0;
}

.mp-tale-reader__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
}

.mp-tale-reader__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid var(--mp-color-border-subtle, rgba(199, 154, 87, 0.24));
    border-radius: 999px;
    background: var(--mp-color-surface, #ffffff);
    color: var(--mp-color-brown-chocolate, #6b5643);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.mp-tale-reader__control:hover:not(:disabled),
.mp-tale-reader__control:focus-visible:not(:disabled) {
    border-color: var(--mp-color-border-interactive, rgba(184, 131, 62, 0.48));
    background: var(--mp-color-cream, #f7efe2);
    outline: none;
    transform: translateY(-1px);
}

.mp-tale-reader__control:disabled {
    opacity: 0.34;
    cursor: not-allowed;
}

.mp-tale-reader__control[hidden] {
    display: none;
}

.mp-tale-reader__counter {
    min-width: 128px;
    margin: 0;
    color: var(--mp-color-dark, #2a221b);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
}

/* Page tools: jump field and position slider. */
.mp-tale-reader__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px auto 0;
}

.mp-tale-reader__jump {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mp-tale-reader__jump-label {
    color: var(--mp-color-grey, #5b544d);
    font-size: 12px;
    font-weight: 600;
}

.mp-tale-reader__jump-input {
    width: 74px;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid var(--mp-color-border-subtle, rgba(199, 154, 87, 0.24));
    border-radius: 999px;
    background: var(--mp-color-surface, #ffffff);
    color: var(--mp-color-dark, #2a221b);
    font: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.mp-tale-reader__jump-input:focus-visible {
    border-color: var(--mp-color-gold-dark, #b8833e);
    outline: none;
}

.mp-tale-reader__slider {
    width: min(320px, 46vw);
    accent-color: var(--mp-color-gold-dark, #b8833e);
    cursor: pointer;
}

.mp-tale-reader__slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mp-tale-reader__notice,
.mp-tale-reader__error {
    max-width: 720px;
    margin: 14px auto 0;
    color: var(--mp-color-grey, #5b544d);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.mp-tale-reader.is-error .mp-tale-reader__opening {
    max-height: 76px;
    padding: 0 12px 18px;
    opacity: 1;
    visibility: visible;
}

.mp-tale-reader.is-error .mp-tale-reader__loading-track {
    display: none;
}

.mp-tale-reader.is-error .mp-tale-reader__status {
    color: #8a3e32;
}

.mp-tale-reader:fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: clamp(10px, 2vw, 28px);
    overflow: auto;
    background: var(--mp-color-page, #fbfbfb);
}

.mp-tale-reader:fullscreen .mp-tale-reader__stage {
    flex: 1;
    min-height: 0;
}

.mp-tale-reader:fullscreen .mp-tale-reader__book {
    width: var(--mp-tale-book-w);
    height: var(--mp-tale-page-h);
}


@media (max-width: 544px) {
    .mp-tale-reader__opening-window {
        width: min(100%, 280px);
    }
}

@media (max-width: 760px) {



    .mp-tale-reader__stage {
        min-height: 360px;
        padding: 8px 0 30px;
    }

    .mp-tale-reader__control-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .mp-tale-reader__control {
        min-width: 44px;
        padding-inline: 13px;
        font-size: 18px;
    }

    .mp-tale-reader__counter {
        min-width: 105px;
        font-size: 12px;
    }

    .mp-tale-reader__control--fullscreen {
        order: 4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-tale-reader__opening,
    .mp-tale-reader__loading-fill {
        transition-duration: 1ms;
    }

    .mp-tale-reader__turn-clip,
    .mp-tale-reader__leaf,
    .mp-tale-reader__leaf-shade,
    .mp-tale-reader__leaf-shadow {
        animation-duration: 1ms !important;
    }
}



/* Native audio panel adapted from the supplied product plugin. */
.mp-tale-audio {
    display: grid;
    grid-template-columns:
        44px
        minmax(150px, .55fr)
        minmax(260px, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(166, 118, 61, 0.18);
    border-radius: 16px;
    background: #fff;
    color: #705d53;
    font-family: var(
        --mp-font-body,
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
    box-shadow: 0 6px 18px rgba(91, 64, 51, 0.045);
}

.mp-tale-audio__caption {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.mp-tale-audio__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid rgba(148, 99, 40, 0.2);
    border-radius: 50%;
    background: #f8ecdc;
    color: #946328;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.42);
}

.mp-tale-audio__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.mp-tale-audio__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.mp-tale-audio__eyebrow {
    display: block;
    margin: 0;
    color: #946328;
    font-size: 10px;
    font-weight: var(--mp-font-weight-medium, 500);
    line-height: 1.35;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mp-tale-audio__title {
    display: block;
    min-width: 0;
    margin: 0;
    color: #5b4033;
    font-family: var(
        --mp-font-accent,
        "Source Serif 4",
        Georgia,
        "Times New Roman",
        serif
    );
    font-size: 17px;
    font-style: normal;
    font-weight: var(--mp-font-weight-medium, 500);
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.mp-tale-audio__player {
    display: block;
    grid-column: 3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f4e9dc;
    color-scheme: light;
    accent-color: #946328;
    box-shadow: none;
}

/* Public story shell: no global resets, no extra font or network dependency. */
.mp-tales, .mp-tales-catalog {
    box-sizing:border-box;
    --mp-tales-ink:var(--mp-color-dark,#2d241f);
    --mp-tales-gold:var(--mp-color-gold-dark,#b98235);
    --mp-tales-border:var(--mp-color-border-subtle,#ead6b7);
    color:var(--mp-tales-ink);
    font-family:var(--mp-font-body,"Manrope",Arial,sans-serif);
    line-height:1.6;
}
.mp-tales *, .mp-tales-catalog * { box-sizing:border-box; }
.mp-tales :is(img,canvas,video,audio),
.mp-tales-catalog :is(img,video) { -webkit-touch-callout:none;-webkit-user-select:none;user-select:none; }
.mp-tales audio::-webkit-media-controls-download-button { display:none !important; }
.mp-tales [hidden] { display:none !important; }
.mp-tales {
    width:100%;max-width:1180px;min-width:0;
    margin:24px auto 32px;
    padding:clamp(14px,2.5vw,30px);
    border:1px solid var(--mp-tales-border);
    border-radius:22px;
    background:linear-gradient(155deg,#fffdf9 0%,#fff 65%);
    box-shadow:0 12px 36px rgba(67,42,19,.035);
}
.mp-tales:focus { outline:none; }
.mp-tales:focus-visible { outline:2px solid var(--mp-tales-gold);outline-offset:5px; }
.mp-tales__header { text-align:center;margin:2px 0 24px; }
.mp-tales__eyebrow { margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-tales-gold); }
.mp-tales h2.mp-tales__title { margin:0;color:var(--mp-tales-ink);font-family:var(--mp-font-accent,"Source Serif 4",Georgia,serif);font-size:clamp(25px,3.5vw,38px);font-weight:500;line-height:1.2;overflow-wrap:anywhere; }
.mp-tales__age { display:inline-block;margin:12px 0 0;padding:3px 12px;border-radius:99px;background:#f8efdf;color:#78572e;font-size:12px; }
.mp-tales__footer { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--mp-tales-border);font-size:12px;color:#706051; }
.mp-tales .mp-tale-audio { margin:0 0 12px; }
.mp-tale-audio__error { grid-column:1/-1;margin:4px 0 0;color:#8a3e32;font-size:12px; }
.mp-tales .mp-tale-reader__opening-window { width:min(100%,380px);background:transparent; }
.mp-tales .mp-tale-reader__loading { padding:18px 12px;border:0;background:transparent; }
.mp-tales .mp-tale-reader__status { font-size:12px; }
.mp-tales .mp-tale-reader__control { font-family:inherit;letter-spacing:normal;text-transform:none;line-height:1.2;min-height:44px; }
.mp-tales .mp-tale-reader__control:focus-visible { outline:2px solid var(--mp-tales-gold);outline-offset:3px; }
.mp-tales .mp-tale-reader__jump-input { width:64px;min-height:40px;margin:0;padding:7px 6px;color:#805721;border-color:var(--mp-tales-border);background:#fff; }
.mp-tales .mp-tale-reader__jump-input:focus-visible { outline:2px solid var(--mp-tales-gold);outline-offset:2px;box-shadow:none; }
.mp-tales .mp-tale-reader__jump { margin:0; }
.mp-tales .mp-tale-reader__slider { height:26px;margin:0;padding:0;min-width:0; }
.mp-tales:fullscreen { max-width:none;margin:0;border:0;border-radius:0;height:100%;background:#fffcf7; }
.mp-tales:fullscreen .mp-tales__header { display:none; }
.mp-tales:fullscreen .mp-tales__footer { margin-top:10px;padding-top:8px; }
.mp-tales:fullscreen .mp-tale-audio { max-width:900px;margin:0 auto 8px; }
.mp-tales:fullscreen .mp-tale-reader__stage { flex:1 1 0;overflow:hidden; }
.mp-tales:fullscreen .mp-tale-reader__controls, .mp-tales:fullscreen .mp-tale-reader__tools, .mp-tales:fullscreen .mp-tale-audio, .mp-tales:fullscreen .mp-tale-modes, .mp-tales:fullscreen .mp-tales__footer { flex-shrink:0; }
.mp-tales-catalog { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:26px 0; }
.mp-tales-catalog--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mp-tales-catalog--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.mp-tales-card { margin:0;border:1px solid var(--mp-tales-border);border-radius:18px;background:#fff;min-width:0;overflow:hidden;transition:box-shadow 180ms ease,transform 180ms ease; }
.mp-tales-card:hover { box-shadow:0 12px 30px rgba(64,41,18,.09);transform:translateY(-3px); }
.mp-tales-catalog .mp-tales-card__link { display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;box-shadow:none;border:0; }
.mp-tales-card__link:focus-visible { outline:3px solid var(--mp-tales-gold);outline-offset:-4px; }
.mp-tales-card__cover { display:grid;place-items:center;isolation:isolate;aspect-ratio:5/4;background:linear-gradient(135deg,#fcf7ef,#f5ead7);padding:22px;overflow:hidden; }
.mp-tales-card__image { display:block;grid-area:1/1;width:100%;height:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(39,24,13,.1)); }
.mp-tales-card__animation { display:block;grid-area:1/1;z-index:1;width:100%;height:100%;max-height:300px;object-fit:contain;opacity:0;pointer-events:none;filter:drop-shadow(0 5px 7px rgba(39,24,13,.1));transition:opacity 180ms ease; }
.mp-tales-card__animation.is-playing { opacity:1; }
.mp-tales-card__placeholder { display:grid;grid-area:1/1;gap:12px;place-items:center;color:var(--mp-tales-gold);font-family:Georgia,serif;font-size:15px;letter-spacing:.08em; }
.mp-tales-card__placeholder svg { width:80px;height:80px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round; }
.mp-tales-card__body { display:flex;flex-direction:column;flex:1;padding:22px; }
.mp-tales-card__meta { display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:10px;letter-spacing:.04em;color:#805721;margin:0 0 12px; }
.mp-tales-catalog h3.mp-tales-card__title { font-family:var(--mp-font-accent,"Source Serif 4",Georgia,serif);font-size:24px;font-weight:500;line-height:1.2;margin:0 0 12px;color:var(--mp-tales-ink);overflow-wrap:anywhere; }
.mp-tales-card__excerpt { margin:0 0 20px;font-size:13px;line-height:1.65;color:#706051; }
.mp-tales-card__cta { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--mp-tales-border);font-size:12px;font-weight:600;color:#805721; }
.mp-tales-card__cta span { font-size:22px;line-height:1; }
@media(max-width:900px) { .mp-tales-catalog--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
    .mp-tales { border-radius:16px;padding:14px 10px; }
    .mp-tales .mp-tale-audio { display:flex;flex-wrap:wrap;gap:10px;padding:12px;border-radius:13px; }
    .mp-tales .mp-tale-audio__caption { flex:1 1 100%; }
    .mp-tales .mp-tale-audio__player { flex:1 1 100%;width:100%; }
    .mp-tales .mp-tale-audio__error { flex:1 1 100%; }
    .mp-tales .mp-tale-reader__controls { gap:8px; }
    .mp-tales .mp-tale-reader__tools { gap:9px; }
    .mp-tales .mp-tale-reader__slider { flex:1 1 70px;width:auto;max-width:280px; }
    .mp-tales__footer { justify-content:center;text-align:center; }
    .mp-tales-catalog { gap:16px;grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mp-tales:fullscreen .mp-tale-audio { display:grid;grid-template-columns:1fr;margin-bottom:4px; }
    .mp-tales:fullscreen .mp-tale-audio__caption { display:none; }
    .mp-tales:fullscreen .mp-tale-audio__player { grid-column:1; }
}
@media(max-width:520px) { .mp-tales-catalog { grid-template-columns:1fr; } .mp-tales-card__cover { aspect-ratio:4/3; } }
@media(prefers-reduced-motion:reduce) { .mp-tales-card { transition:none; } .mp-tales-card:hover { transform:none; } .mp-tales-card__animation { display:none;transition:none; } }
@media print { .mp-tale-reader__controls,.mp-tale-reader__tools,.mp-tale-audio,.mp-tale-modes { display:none; } }
/* Keep the page position control in the same warm palette as the book. */
.mp-tales .mp-tale-reader__slider { -webkit-appearance:none;appearance:none;background:transparent;border:0;box-shadow:none; }
.mp-tales .mp-tale-reader__slider::-webkit-slider-runnable-track { height:4px;border:0;border-radius:99px;background:#ead6b7; }
.mp-tales .mp-tale-reader__slider::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:-5.5px;border:2px solid #fff;border-radius:50%;background:var(--mp-tales-gold);box-shadow:0 0 0 1px #d5b786; }
.mp-tales .mp-tale-reader__slider::-moz-range-track { height:4px;border:0;border-radius:99px;background:#ead6b7; }
.mp-tales .mp-tale-reader__slider::-moz-range-progress { height:4px;border-radius:99px;background:var(--mp-tales-gold); }
.mp-tales .mp-tale-reader__slider::-moz-range-thumb { width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:var(--mp-tales-gold);box-shadow:0 0 0 1px #d5b786; }
.mp-tales .mp-tale-reader__slider:focus-visible { outline:2px solid var(--mp-tales-gold);outline-offset:4px;border-radius:99px; }
/* Touch devices must not retain a desktop hover highlight after a tap. */
@media(hover:none) {
    .mp-tales .mp-tale-reader__control:hover { background:var(--mp-color-surface,#fff);border-color:var(--mp-tales-border);color:var(--mp-color-brown-chocolate,#6b5643); }
    .mp-tales-card:hover { transform:none;box-shadow:none; }
}

/* Premium reading modes: one clear choice replaces the technical sync toggle. */
.mp-tales .mp-tale-modes { position:relative;margin:0 0 14px;padding:14px;border:1px solid rgba(185,130,53,.28);border-radius:18px;background:linear-gradient(145deg,#fffdf8 0%,#fbf2e4 100%);box-shadow:0 7px 22px rgba(91,64,51,.05); }
.mp-tales .mp-tale-modes__label { margin:0 0 10px;color:#805721;font-size:10px;font-weight:700;line-height:1.35;letter-spacing:.11em;text-transform:uppercase; }
.mp-tales .mp-tale-modes__grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }
.mp-tales .mp-tale-mode { display:flex;align-items:center;gap:9px;min-width:0;min-height:64px;margin:0;padding:10px 11px;border:1px solid #e2d3bd;border-radius:13px;background:rgba(255,255,255,.82);color:#5b4033;font:500 12px/1.25 var(--mp-font-body,"Manrope",Arial,sans-serif);text-align:left;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer;transition:border-color 160ms ease,background 160ms ease,box-shadow 160ms ease,transform 160ms ease; }
.mp-tales .mp-tale-mode:hover:not(:disabled) { border-color:#c99a58;background:#fff;transform:translateY(-1px); }
.mp-tales .mp-tale-mode:focus-visible { outline:2px solid #946328;outline-offset:3px; }
.mp-tales .mp-tale-mode[aria-checked="true"] { border-color:#b98235;background:#fffaf1;box-shadow:0 0 0 2px rgba(185,130,53,.13),0 7px 16px rgba(91,64,51,.06); }
.mp-tales .mp-tale-mode:disabled { cursor:not-allowed;opacity:.42;filter:saturate(.45); }
.mp-tales .mp-tale-mode__icon { display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#f4e4cc;color:#946328;font:700 15px/1 Georgia,serif;letter-spacing:-.08em; }
.mp-tales .mp-tale-mode[aria-checked="true"] .mp-tale-mode__icon { background:linear-gradient(145deg,#c89245,#8e5d26);color:#fff;box-shadow:0 4px 10px rgba(142,93,38,.2); }
.mp-tales .mp-tale-mode__copy { display:grid;gap:3px;min-width:0; }
.mp-tales .mp-tale-mode__copy strong { color:inherit;font-size:12px;font-weight:700;overflow-wrap:anywhere; }
.mp-tales .mp-tale-mode__copy small { color:#7b6d60;font-size:10px;font-weight:400;line-height:1.3;overflow-wrap:anywhere; }
.mp-tales .mp-tale-modes__status { min-height:18px;margin:9px 2px 0;color:#705d53;font-size:11px;line-height:1.45; }
.mp-tales .mp-tale-sync__status { color:#705d53;font-size:12px;line-height:1.45; }
.mp-tales .mp-tale-audio > [data-mp-tale-sync-notice] { grid-column:1/-1;flex:1 1 100%;margin:0;min-width:0; }
.mp-tales[data-reading-mode="animated"] .mp-tale-audio,
.mp-tales[data-reading-mode="static"] .mp-tale-audio { display:none !important; }
@media(max-width:820px){.mp-tales .mp-tale-modes__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.mp-tales .mp-tale-modes{padding:11px}.mp-tales .mp-tale-mode{min-height:59px;padding:8px}.mp-tales .mp-tale-mode__icon{flex-basis:30px;width:30px;height:30px}}
@media(max-height:560px) and (orientation:landscape){.mp-tales:fullscreen .mp-tale-modes{padding:7px 9px;margin-bottom:5px}.mp-tales:fullscreen .mp-tale-mode{min-height:38px;padding:4px 7px}.mp-tales:fullscreen .mp-tale-mode__icon{width:26px;height:26px;flex-basis:26px}.mp-tales:fullscreen .mp-tale-mode__copy small,.mp-tales:fullscreen .mp-tale-modes__status,.mp-tales:fullscreen .mp-tale-modes__label{display:none}}

/* Czytana strona rozkładówki.
   Strony 2 i 3 są na ekranie jednocześnie, więc znacznik strony 3 nie przewraca
   liścia. Zamiast przygaszania drugiej połowy — czytana strona delikatnie połyskuje,
   jakby padało na nią światło. Nic nie znika i nic nie ciemnieje. */
.mp-tales .mp-tale-reader__page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
    background:
        linear-gradient(112deg, transparent 40%, rgba(255,255,255,.60) 47%, rgba(255,246,226,.38) 52%, transparent 60%),
        radial-gradient(130% 78% at 50% 50%, rgba(255,203,120,.14), transparent 70%);
    background-repeat: no-repeat;
    background-size: 240% 100%, 100% 100%;
    background-position: 150% 0, 50% 50%;
}
.mp-tales[data-mp-tale-sync="following"][data-mp-tale-spoken="left"] .mp-tale-reader__page--left::after,
.mp-tales[data-mp-tale-sync="following"][data-mp-tale-spoken="right"] .mp-tale-reader__page--right::after {
    opacity: 1;
    animation: mp-tale-gleam 5.5s ease-in-out 400ms infinite;
}
.mp-tales.is-turning .mp-tale-reader__page::after { opacity: 0; animation: none; }
@keyframes mp-tale-gleam {
    0%, 8%   { background-position: 150% 0, 50% 50%; }
    46%, 100% { background-position: -70% 0, 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-tales .mp-tale-reader__page::after { animation: none !important; background-position: 50% 0, 50% 50%; }
	.mp-tales .mp-tale-reader__animation { display: none !important; }
}

/* Panel diagnostyczny (?bajka-debug=1) — widzi go tylko redaktor. */
.mp-tale-debug { position:fixed;right:12px;bottom:12px;z-index:99999;max-width:min(94vw,470px);max-height:72vh;overflow:auto;padding:10px 12px;border:1px solid #3a3a3a;border-radius:10px;background:rgba(22,22,22,.94);color:#f2eee6;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.mp-tale-debug b { color:#ffd79a; }
.mp-tale-debug i { color:#ff9c8a;font-style:normal; }
.mp-tale-debug u { color:#9ad1ff;text-decoration:none; }
.mp-tale-debug table { width:100%;margin:8px 0;border-collapse:collapse; }
.mp-tale-debug th, .mp-tale-debug td { padding:2px 5px;border-bottom:1px solid #333;text-align:left;vertical-align:top; }
.mp-tale-debug th { color:#9ad1ff;font-weight:400; }

/* 1.5.8: centred reading, responsive finger swipes and a cinema-like fullscreen. */
.mp-tale-reader__stage:not(.is-pan) .mp-tale-reader__book { justify-self:center; }
.mp-tale-reader__book {
    translate:var(--mp-tale-swipe-x,0px) 0;
}
.mp-tale-reader__book.is-swipe-dragging {
    will-change:translate,transform;
}
.mp-tale-reader__leaf-layer.is-mobile-cover .mp-tale-reader__leaf-shadow {
    right:0;
    left:0;
    width:100%;
    background:linear-gradient(90deg,rgba(24,17,12,.42),rgba(24,17,12,.15) 30%,rgba(24,17,12,0) 72%);
}
.mp-tale-reader__leaf-layer.is-mobile-cover.is-backward .mp-tale-reader__leaf-shadow {
    background:linear-gradient(270deg,rgba(24,17,12,.42),rgba(24,17,12,.15) 30%,rgba(24,17,12,0) 72%);
}

.mp-tales::backdrop {
    background:#090705;
}
.mp-tales:fullscreen {
    width:100vw;
    max-width:none;
    height:100vh;
    height:100dvh;
    margin:0;
    padding:clamp(7px,1.2vw,16px);
    overflow:hidden;
    border:0;
    border-radius:0;
    color:#f8efe3;
    background:
        radial-gradient(ellipse at 50% 47%,rgba(108,79,49,.42) 0%,rgba(42,31,22,.96) 54%,#0b0806 100%);
    box-shadow:none;
}
.mp-tales:fullscreen .mp-tales__header,
.mp-tales:fullscreen .mp-tale-modes,
.mp-tales:fullscreen .mp-tales__footer {
    display:none !important;
}
.mp-tales:fullscreen .mp-tale-audio {
    display:grid;
    grid-template-columns:1fr;
    width:min(720px,100%);
    margin:0 auto 5px;
    padding:5px 9px;
    border-color:rgba(236,205,159,.22);
    background:rgba(25,18,13,.76);
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.mp-tales:fullscreen .mp-tale-audio__caption,
.mp-tales:fullscreen .mp-tale-sync__status {
    display:none;
}
.mp-tales:fullscreen .mp-tale-audio__player {
    grid-column:1;
    width:100%;
    height:38px;
    margin:0;
}
.mp-tales:fullscreen .mp-tale-reader__stage {
    flex:1 1 0;
    min-height:0;
    padding:5px 10px 9px;
    overflow:hidden;
    perspective:3600px;
}
.mp-tales:fullscreen .mp-tale-reader__book {
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.52));
}
.mp-tales:fullscreen .mp-tale-reader__controls {
    gap:8px;
    margin:5px auto 0;
}
.mp-tales:fullscreen .mp-tale-reader__tools {
    gap:9px;
    margin:3px auto 0;
}
.mp-tales:fullscreen .mp-tale-reader__control {
    min-height:38px;
    padding:7px 13px;
    border-color:rgba(237,208,165,.3);
    background:rgba(255,249,239,.1);
    color:#fff8ee;
    backdrop-filter:blur(7px);
}
.mp-tales:fullscreen .mp-tale-reader__control:hover:not(:disabled),
.mp-tales:fullscreen .mp-tale-reader__control:focus-visible:not(:disabled) {
    border-color:rgba(237,208,165,.62);
    background:rgba(255,249,239,.18);
}
.mp-tales:fullscreen .mp-tale-reader__counter,
.mp-tales:fullscreen .mp-tale-reader__jump-label {
    color:#f8efe3;
}
.mp-tales:fullscreen .mp-tale-reader__jump-input {
    min-height:36px;
    border-color:rgba(237,208,165,.32);
    background:rgba(255,249,239,.1);
    color:#fff8ee;
}
.mp-tales:fullscreen .mp-tale-reader__slider::-webkit-slider-runnable-track {
    background:rgba(237,208,165,.42);
}
.mp-tales:fullscreen .mp-tale-reader__slider::-moz-range-track {
    background:rgba(237,208,165,.42);
}
@media(max-width:760px) {
    .mp-tales:fullscreen { padding:5px; }
    .mp-tales:fullscreen .mp-tale-audio { padding:3px 6px;margin-bottom:3px; }
    .mp-tales:fullscreen .mp-tale-reader__stage { padding:3px 0 6px; }
    .mp-tales:fullscreen .mp-tale-reader__controls { margin-top:3px; }
    .mp-tales:fullscreen .mp-tale-reader__tools { margin-top:1px; }
}

/* 1.5.9: centre the complete reader shell, not only the rendered book. */
section.mp-tales.mp-tale-reader {
    width:min(100%,1180px);
    max-width:1180px;
    margin-top:24px;
    margin-right:auto !important;
    margin-bottom:32px;
    margin-left:auto !important;
    float:none;
    clear:both;
    justify-self:center;
    align-self:center;
}

/* Side hints are real navigation buttons. They stay out of sight on desktop
   and reveal only the direction that is currently available on a phone. */
.mp-tale-reader__edge-nav {
    display:none;
}

@media(max-width:760px) {
    .mp-tale-reader__edge-nav {
        position:absolute;
        z-index:18;
        top:50%;
        display:grid;
        place-items:center;
        width:44px;
        height:48px;
        margin:0;
        padding:0;
        border:0;
        border-radius:50%;
        background:transparent;
        color:#71491f;
        box-shadow:none;
        font:400 28px/1 Georgia,serif;
        cursor:pointer;
        opacity:.92;
        transform:translateY(-50%);
        transition:opacity 180ms ease,visibility 180ms ease,transform 180ms ease;
        -webkit-tap-highlight-color:transparent;
    }
    .mp-tale-reader__edge-nav span {
        display:grid;
        place-items:center;
        width:30px;
        height:30px;
        border:1px solid rgba(139,94,39,.34);
        border-radius:50%;
        background:rgba(255,250,241,.9);
        box-shadow:0 4px 12px rgba(45,31,18,.17);
        -webkit-backdrop-filter:blur(6px);
        backdrop-filter:blur(6px);
    }
    .mp-tale-reader__edge-nav--previous { left:max(0px,env(safe-area-inset-left)); }
    .mp-tale-reader__edge-nav--next { right:max(0px,env(safe-area-inset-right)); }
    .mp-tale-reader__edge-nav:not(:disabled):focus-visible {
        outline:2px solid #946328;
        outline-offset:3px;
    }
    .mp-tale-reader__edge-nav:not(:disabled):active {
        transform:translateY(-50%) scale(.94);
    }
    .mp-tale-reader__edge-nav:not(:disabled):active span { background:#fff4df; }
    .mp-tale-reader__edge-nav:disabled {
        visibility:hidden;
        pointer-events:none;
        opacity:0;
        transform:translateY(-50%) scale(.82);
    }
    .mp-tale-reader__edge-nav:not(:disabled) span {
        animation:mp-tale-edge-hint 1.25s ease-in-out 2;
    }
    .mp-tales:fullscreen .mp-tale-reader__edge-nav {
        background:transparent;
        color:#fff6e8;
        box-shadow:none;
    }
    .mp-tales:fullscreen .mp-tale-reader__edge-nav span {
        border-color:rgba(255,232,197,.42);
        background:rgba(24,17,12,.72);
        box-shadow:0 4px 13px rgba(0,0,0,.3);
    }
}

@keyframes mp-tale-edge-hint {
    0%,100% { transform:translateX(0); }
    50% { transform:translateX(var(--mp-tale-edge-nudge,3px)); }
}
.mp-tale-reader__edge-nav--previous span { --mp-tale-edge-nudge:-3px; }

@media(max-width:380px) {
    .mp-tale-reader__edge-nav { width:40px;height:44px;font-size:26px; }
    .mp-tale-reader__edge-nav span { width:28px;height:28px; }
}

@media(prefers-reduced-motion:reduce) {
    .mp-tale-reader__edge-nav,
    .mp-tale-reader__edge-nav:not(:disabled) span { animation:none;transition-duration:1ms; }
}

/* 1.5.10: Astra can reserve an empty sidebar for a single tale. In that case
   auto margins centre the reader inside the left column instead of the page.
   Tale pages use the full content row, so the complete reader shell lands on
   the actual screen centre. Header, footer and other site areas are untouched. */
body.single-mp_tale .site-content > .ast-container {
    display:block;
    width:100%;
    max-width:none;
}
body.single-mp_tale .site-content #primary,
body.single-mp_tale .site-content .content-area {
    float:none;
    width:100% !important;
    max-width:none;
    margin-right:auto;
    margin-left:auto;
    padding-right:0 !important;
    padding-left:0 !important;
    border-right:0 !important;
    border-left:0 !important;
}
body.single-mp_tale .site-content #secondary,
body.single-mp_tale .site-content .widget-area {
    display:none !important;
}
body.single-mp_tale .site-content .site-main,
body.single-mp_tale .site-content article,
body.single-mp_tale .site-content .entry-content {
    width:100%;
    max-width:none;
}