/* ============================================================
   MARVDLE — splash / end-of-game reveal styles
   Split out of daily.css for maintainability. Only daily.html
   uses these rules.
   ============================================================ */

/* ---- SPLASH PAGE REVEAL ---- */
.splash {
    position: relative;
    background: var(--paper);
    border: 4px solid var(--ink);
    box-shadow: 12px 12px 0 var(--ink);
    margin-top: 2rem;
    overflow: hidden;
    padding: 2.5rem 1.8rem;
    isolation: isolate;
}

.splash-rays {
    position: absolute; inset: 0; z-index: 0;
    background:
        repeating-conic-gradient(from -8deg at 65% 55%,
            var(--yellow) 0 8deg,
            var(--paper) 8deg 16deg);
    opacity: 0.85;
}
.splash-vignette {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse at 65% 55%, transparent 18%, rgba(14,13,11,0.0) 30%, rgba(14,13,11,0.20) 80%);
}

.fx {
    position: absolute;
    z-index: 3;
    font-family: var(--display);
    -webkit-text-stroke: 3px var(--ink);
    paint-order: stroke fill;
    pointer-events: none;
    line-height: 0.95;
    letter-spacing: 0.02em;
}
.fx-1 { top: 0.7rem; right: 1.5rem; font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--red); transform: rotate(11deg); }
.fx-2 { bottom: 1rem; left: 1.5rem; font-size: clamp(2rem, 4vw, 3.4rem); color: var(--blue); transform: rotate(-9deg); }
.fx-3 { top: 45%; right: 5%; font-size: 2rem; color: var(--yellow); -webkit-text-stroke: 2px var(--ink); transform: rotate(-22deg); }

.splash-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    align-items: center;
}
@media (max-width: 800px) { .splash-content { grid-template-columns: 1fr; } }

.portrait {
    display: flex; flex-direction: column; align-items: center;
    transform: rotate(-3deg);
    animation: drift 6s ease-in-out infinite;
    --rot: -3deg;
}
.portrait .ph-frame {
    background: var(--paper-hi);
    border: 4px solid var(--ink);
    padding: 0.5rem;
    box-shadow: 10px 10px 0 var(--red);
    width: 100%;
    max-width: 320px;
}
/* On narrow phones the 320px portrait + caption was tall enough to push
   the quote bubble below the auto-scrolled splash viewport. Shrink the
   portrait so name + quote stay above the fold. */
@media (max-width: 500px) {
    .portrait .ph-frame { max-width: 210px; box-shadow: 6px 6px 0 var(--red); }
    .portrait .ph-cap { font-size: 0.85rem; }
}
.portrait .ph-img {
    width: 100%; aspect-ratio: 4/5;
    background-size: cover; background-position: center 18%;
    border: 2px solid var(--ink);
    filter: contrast(1.08) saturate(1.05);
    position: relative;
}

/* Fallback portrait used when /images/ doesn't ship a .webp for this character.
   Mirrors the cover's mystery-frame "?" silhouette so the splash still feels
   on-brand instead of showing a broken-image icon. */
.portrait .ph-img.ph-img--missing {
    filter: none;
    background:
        radial-gradient(circle at 30% 35%, rgba(214,32,44,0.35), transparent 55%),
        radial-gradient(circle, rgba(255,236,164,0.18) 1px, transparent 1.5px) 0 0/6px 6px,
        var(--ink);
}
.portrait .ph-img.ph-img--missing::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse 22px 14px at 18% 22%, var(--paper-hi) 70%, transparent 71%),
        radial-gradient(ellipse 16px 10px at 78% 18%, var(--paper-hi) 70%, transparent 71%),
        radial-gradient(ellipse 28px 18px at 38% 82%, var(--paper-hi) 70%, transparent 71%),
        radial-gradient(ellipse 14px 9px at 88% 70%, var(--paper-hi) 70%, transparent 71%),
        radial-gradient(ellipse 19px 12px at 60% 50%, var(--paper-hi) 70%, transparent 71%);
    opacity: 0.85;
}
.portrait .ph-img.ph-img--missing::after {
    content: '?';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-size: clamp(6rem, 14vw, 10rem);
    color: var(--yellow);
    -webkit-text-stroke: 5px var(--ink);
    paint-order: stroke fill;
    line-height: 1;
    text-shadow: 6px 6px 0 var(--red);
    transform: rotate(-6deg);
}
.portrait .ph-cap {
    margin-top: 0.8rem;
    background: var(--ink); color: var(--paper);
    padding: 0.35rem 0.8rem 0.3rem;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 0.95rem;
    transform: rotate(2deg);
}

.splash-txt { position: relative; }

.splash-over {
    font-family: var(--display);
    letter-spacing: 0.18em;
    font-size: 1rem;
    color: var(--blue);
    margin-bottom: 0.4rem;
}
.splash-name {
    font-family: var(--display);
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.85;
    color: var(--yellow);
    -webkit-text-stroke: 4px var(--ink);
    paint-order: stroke fill;
    text-shadow: 6px 6px 0 var(--red), 6px 6px 0 var(--ink);
    margin-bottom: 0.4rem;
}
.splash-real {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
}

.splash-quote {
    background: var(--paper-hi);
    border: 3px solid var(--ink);
    border-radius: 24px;
    padding: 0.9rem 1.2rem;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 1.2rem;
    position: relative;
    box-shadow: 4px 4px 0 var(--ink);
    transform: rotate(0.6deg);
}
.splash-quote::after {
    content: '';
    position: absolute;
    left: 32px; bottom: -22px;
    width: 0; height: 0;
    border: 12px solid transparent;
    border-top-color: var(--ink); border-bottom: 0;
}
.splash-quote::before {
    content: '';
    position: absolute;
    left: 35px; bottom: -16px;
    width: 0; height: 0;
    border: 9px solid transparent;
    border-top-color: var(--paper-hi); border-bottom: 0;
    z-index: 1;
}

.dossier {
    list-style: none;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    padding: 0.6rem 0;
    margin-bottom: 1.2rem;
}
.dossier li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1.5px dashed rgba(14,13,11,0.3);
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.95rem;
}
.dossier li:last-child { border-bottom: none; }
.dossier li b {
    font-family: var(--display);
    color: var(--red);
    font-weight: 400;
    letter-spacing: 0.12em;
    font-size: 0.9rem;
    align-self: center;
}

.splash-acts { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.splash-pageno {
    position: absolute;
    bottom: 0.8rem; right: 1.2rem;
    z-index: 4;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--paper-hi);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-size: 1.5rem;
}