/* overlays.css — the two full-viewport layers: the full-screen player and
   the album story reader. Both sit above everything in layout.css. */

/* ---- Full-screen player ---- */

.mu-fp-wrap {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--mu-bg);
    overflow-y: auto;
}
.mu-fp-wrap[hidden] { display: none; }

.mu-fp {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px clamp(16px, 4vw, 32px) calc(100px + env(safe-area-inset-bottom, 0px));
}

.mu-fp__body { display: block; }

@media (min-width: 900px) {
    .mu-fp { max-width: 1080px; }
    .mu-fp__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }
    .mu-fp__hero { align-items: flex-start; text-align: left; margin-top: 24px; }
    .mu-fp__transport { justify-content: flex-start; }
    .mu-fp__actions { justify-content: flex-start; }
    .mu-fp__right {
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
}

.mu-fp__close {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text);
    cursor: pointer;
}
.mu-fp__close:hover { background: rgba(232, 234, 237, 0.08); }

.mu-fp__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 12px 0 28px; }
.mu-cover--fp { width: min(320px, 70vw); aspect-ratio: 1; border-radius: 12px; }
.mu-cover--fp span { font-size: 3rem; }
.mu-fp__title { margin: 0; font-size: 22px; font-weight: 700; }
.mu-fp__artist { margin: 0; color: var(--blurb); font-size: 14px; }

.mu-fp__transport { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 16px; }
.mu-playbtn--lg { width: 62px; height: 62px; }
.mu-fp__seek { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.mu-fp__seek .mu-range { flex: 1; }

.mu-fp__actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 32px; }

.mu-fp__subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--label);
}
.mu-fp__lyrics { margin-bottom: 32px; }
.mu-fp__lyrics-body {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--text);
}
.mu-fp__queue { margin-bottom: 20px; }
/* The full player's column is narrower than the main view queue rows were
   sized for — drop the mood/duration columns here rather than truncate
   titles down to a couple of letters. */
.mu-fp__queue .mu-track {
    grid-template-columns: 36px 22px minmax(0, 1fr) auto 28px;
    gap: 6px;
}
.mu-fp__queue .mu-track__mood, .mu-fp__queue .mu-track__dur { display: none; }
/* Below 760px the index column is display:none, so the dead 22px track above
   would shift every cell left (title crushed into 22px). Re-declare without
   it so play/body/votes/share land on real tracks. */
@media (max-width: 760px) {
    .mu-fp__queue .mu-track { grid-template-columns: 36px minmax(0, 1fr) auto 28px; }
}

@media (max-width: 720px) {
    .mu-lb--song .mu-lb__row,
    .mu-lb--song .mu-lb__labels { grid-template-columns: 28px 30px minmax(0, 1fr) 52px 56px; }
    .mu-lb--song .mu-lb__meta { display: none; }
    .mu-lb--lyricist .mu-lb__row,
    .mu-lb--lyricist .mu-lb__labels,
    .mu-lb--generator .mu-lb__row,
    .mu-lb--generator .mu-lb__labels { grid-template-columns: 28px minmax(0, 1fr) 52px 56px; }
    .mu-lb--lyricist .mu-lb__meta,
    .mu-lb--generator .mu-lb__meta { display: none; }
}

/* ---- Story overlay ---- */

.mu-story-overlay {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.mu-story-overlay[hidden] { display: none; }
.mu-story__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px);
}
.mu-story__card {
    position: relative; z-index: 1;
    width: 100%; max-width: 540px; max-height: 80vh;
    display: flex; flex-direction: column;
    /* The shell does not define --card, so without this fallback the card is
       transparent and the album art shows through the text. A style preset
       below overrides it. */
    background: var(--card, #14161a); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
}
.mu-story__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.mu-story__title {
    font-size: 16px; font-weight: 600; margin: 0;
    color: var(--text); letter-spacing: 0.03em;
}
.mu-story__close {
    background: none; border: none; color: var(--blurb);
    font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px;
}
.mu-story__close:hover { color: var(--text); }
@media (min-width: 760px) {
    .mu-story__card { max-width: 1000px; height: min(82vh, 660px); }
}

/* The book. A page paints --paper when a preset defines one, else the card
   colour: it must be opaque, because a turning leaf passes over other pages. */
.mu-book {
    position: relative; flex: 1; min-height: 0;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr);
    perspective: 2400px; overflow: hidden;
}
.mu-book.is-single { grid-template-columns: 1fr; }
.mu-book.is-single .mu-book__page--left { display: none; }
.mu-book__page {
    position: relative; overflow-y: auto; padding: 28px 32px 36px;
    background: var(--paper, var(--card, #14161a));
    color: var(--ink, var(--text)); font-size: 15px; line-height: 1.7;
}
.mu-book__page--left { border-right: 1px solid var(--line); }
.mu-book.is-single .mu-book__page { padding: 24px 20px 32px; }
.mu-book__folio {
    margin-top: 28px; text-align: center; font-size: 12px; opacity: 0.6;
}
.mu-story__end {
    display: grid; place-items: center; height: 100%;
    font-size: 32px; opacity: 0.35;
}

/* The turning leaf: hinged on the gutter, two faces, back face pre-rotated so
   it reads correctly once the leaf has swung over. */
.mu-book__leaf {
    position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3;
    pointer-events: none; transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(0.45, 0.05, 0.25, 1);
}
.mu-book__leaf--fwd { right: 0; transform-origin: left center; }
.mu-book__leaf--fwd.is-turning { transform: rotateY(-180deg); }
.mu-book__leaf--back { left: 0; transform-origin: right center; }
.mu-book__leaf--back.is-turning { transform: rotateY(180deg); }
.mu-book__face {
    position: absolute; inset: 0; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 0 36px rgba(0, 0, 0, 0.4);
}
.mu-book__face--back { transform: rotateY(180deg); }
.mu-story__page-title {
    font-size: 18px; font-weight: 600; margin: 0 0 12px;
    color: var(--ink, var(--text));
}
.mu-story__text { max-width: 60ch; }
.mu-story__text--center { text-align: center; margin-inline: auto; }
/* Verse is written with deliberate line breaks; escHtml turns those into
   <br>, so the only job here is to stop the measure fighting them. */
.mu-story__text--verse { max-width: 46ch; line-height: 1.9; }
.mu-story__text--epigraph {
    max-width: 44ch; font-size: 0.92em; font-style: italic;
    color: var(--ink-soft, var(--blurb)); margin-inline: auto;
}
.mu-story__dropcap {
    float: left; font-size: 3.1em; line-height: 0.82;
    padding: 0.06em 0.1em 0 0; font-weight: 600;
    color: var(--blood, inherit);
}

/* Style presets: each re-points the card's own tokens, so one set of rules
   above serves every book. System stacks only — no web font is fetched, so
   the player keeps working offline and needs no build step. */
.mu-story--parchment {
    --card: #f3e9d2; --line: #d8c4a0; --text: #3a2f21; --blurb: #6b5942;
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}
.mu-story--parchment .mu-book__page { line-height: 1.85; }
.mu-story--noir {
    --card: #12100f; --line: #3a3532; --text: #ece7e1; --blurb: #9b918a;
    font-family: 'Hoefler Text', 'Times New Roman', Times, serif;
}
.mu-story--noir .mu-book__page { letter-spacing: 0.01em; }
.mu-story--noir .mu-story__page-title { letter-spacing: 0.06em; text-transform: uppercase; }
.mu-story--cosmic {
    --card: #0f1626; --line: #2b3a5c; --text: #dce6fb; --blurb: #8ea0c8;
}
.mu-story--cosmic .mu-book__page { letter-spacing: 0.035em; line-height: 1.9; }

/* Gothic: a dark leather cover round aged-paper pages. The paper is built from
   gradients and an inline SVG noise tile — no image request, works offline. */
.mu-story--gothic {
    --card: #150d0c; --line: #4a2925; --text: #e8dcc4; --blurb: #a48f76; --focus: #b3212a;
    --ink: #2a1a10; --ink-soft: #6a4b35; --blood: #7a0f14;
    --paper:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        radial-gradient(ellipse at 50% 40%, #e3d1a8 0%, #d1b98a 65%, #b0925e 100%);
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    border-color: #5a2a25;
    box-shadow: 0 30px 90px #000, 0 0 0 5px #1f1210;
}
.mu-story--gothic .mu-story__title {
    font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
}
.mu-story--gothic .mu-book { margin: 0 18px; }
.mu-story--gothic .mu-book__page {
    line-height: 1.8;
    scrollbar-width: thin; scrollbar-color: rgba(90, 43, 37, 0.55) transparent;
    box-shadow: inset 0 0 70px rgba(70, 35, 10, 0.4);
}
.mu-story--gothic .mu-book__page--left {
    border-right: 0;
    box-shadow: inset -28px 0 28px -22px rgba(0, 0, 0, 0.55), inset 0 0 70px rgba(70, 35, 10, 0.4);
}
.mu-story--gothic .mu-book__page--right:not(.mu-book__face) {
    box-shadow: inset 28px 0 28px -22px rgba(0, 0, 0, 0.55), inset 0 0 70px rgba(70, 35, 10, 0.4);
}
.mu-story--gothic .mu-book.is-single .mu-book__page--right {
    box-shadow: inset 0 0 70px rgba(70, 35, 10, 0.4);
}
.mu-story--gothic .mu-story__page-title {
    color: var(--blood); font-size: 15px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
}
.mu-story--gothic .mu-story__page-title::after {
    content: '\2766'; display: block; margin-top: 6px;
    font-size: 16px; letter-spacing: 0;
}
.mu-story--gothic .mu-story__dropcap { font-size: 3.5em; font-weight: 700; }
.mu-story--gothic .mu-story__text--verse { font-style: italic; }
.mu-story--gothic .mu-story__nav { border-color: #5a2a25; }
.mu-story__footer {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line);
}
.mu-story__nav {
    background: none; border: 1px solid var(--line); border-radius: 50%;
    width: 36px; height: 36px; font-size: 16px;
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 160ms var(--ease);
}
.mu-story__nav:hover:not(:disabled) { border-color: var(--focus); }
.mu-story__nav:disabled { opacity: 0.3; cursor: default; }
.mu-story__dots { display: flex; gap: 6px; }
.mu-story__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--line); cursor: pointer;
    transition: background 160ms var(--ease);
}
.mu-story__dot.is-active { background: var(--focus); }
.mu-story__counter { font-size: 12px; color: var(--blurb); min-width: 40px; text-align: center; }