.pplc {
    --pplc-black: #070707;
    --pplc-charcoal: #11110f;
    --pplc-graphite: #1b1a17;
    --pplc-gold: #b7964d;
    --pplc-gold-bright: #c8aa63;
    --pplc-gold-soft: rgba(183, 150, 77, 0.42);
    --pplc-ivory: #f1ecdf;
    --pplc-muted: #b9b2a4;
    --pplc-danger: #b15c52;
    width: 100%;
    margin: clamp(2rem, 5vw, 4.5rem) auto;
    color: var(--pplc-ivory);
    isolation: isolate;
}

.pplc *,
.pplc *::before,
.pplc *::after {
    box-sizing: border-box;
}

.pplc-header {
    width: min(100%, 860px);
    margin: 0 auto clamp(1rem, 2.5vw, 1.65rem);
    text-align: center;
}

.pplc--inline .pplc-header {
    width: min(100%, 760px);
}

.pplc--archive {
    margin-block: clamp(1.5rem, 3.5vw, 2.75rem);
}

.pplc--archive .pplc-header,
.pplc--archive .pplc-player {
    width: min(100%, 720px);
}

.pplc--archive .pplc-header {
    margin-bottom: 1rem;
}

.pplc-eyebrow {
    margin: 0 0 0.55rem;
    color: var(--pplc-gold);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.45;
    text-transform: uppercase;
}

.pplc-title {
    margin: 0;
    color: var(--pplc-ivory);
    font-family: Cinzel, Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 4vw, 2.65rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

.pplc--inline .pplc-title,
.pplc--archive .pplc-title {
    font-size: clamp(1.35rem, 3.4vw, 2.05rem);
}

.pplc-intro {
    max-width: 720px;
    margin: 0.85rem auto 0;
    color: var(--pplc-muted);
    font-size: clamp(0.98rem, 2vw, 1.08rem);
    line-height: 1.7;
    text-wrap: pretty;
}

.pplc--archive .pplc-intro {
    max-width: 650px;
    font-size: 0.98rem;
}

.pplc-player {
    width: min(100%, 840px);
    margin-inline: auto;
}

.pplc--inline .pplc-player {
    width: min(100%, 760px);
}

.pplc-immersive {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pplc-gold-soft);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% -20%, rgba(183, 150, 77, 0.11), transparent 42%),
        linear-gradient(180deg, #161511 0%, var(--pplc-black) 100%);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(241, 236, 223, 0.04);
    contain: layout paint;
}

.pplc-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--pplc-black);
}

.pplc-stage::before,
.pplc-stage::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    content: '';
    pointer-events: none;
}

.pplc-stage::before {
    background: radial-gradient(circle at 50% 44%, transparent 60%, rgba(0, 0, 0, 0.13) 100%);
}

.pplc-stage::after {
    border: 1px solid rgba(240, 224, 178, 0.08);
    box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.12);
}

.pplc-video,
.pplc-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pplc-video {
    position: relative;
    z-index: 1;
    background: var(--pplc-black);
}

.pplc-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    transition: opacity 260ms ease;
}

.pplc-is-media-ready .pplc-poster {
    opacity: 0;
    pointer-events: none;
}

.pplc-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0.9rem;
    border-top: 1px solid rgba(183, 150, 77, 0.2);
    background: rgba(9, 9, 8, 0.97);
}

.pplc-button {
    min-height: 46px;
    margin: 0;
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(183, 150, 77, 0.45);
    border-radius: 10px;
    background: #171611;
    color: var(--pplc-ivory);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.pplc-button:hover {
    border-color: var(--pplc-gold);
    background: #211f18;
}

.pplc-button:active {
    transform: translateY(1px);
}

.pplc-button:focus-visible {
    outline: 3px solid rgba(241, 236, 223, 0.9);
    outline-offset: 3px;
}

.pplc-button[hidden] {
    display: none !important;
}

.pplc-button--sound {
    border-color: var(--pplc-gold);
    background: var(--pplc-gold);
    color: #0b0a08;
}

.pplc-button--sound:hover,
.pplc-button--sound[aria-pressed='true'] {
    background: var(--pplc-gold-bright);
    color: #080705;
}

.pplc-control-note {
    margin: 0;
    padding: 0 0.9rem 0.85rem;
    background: rgba(9, 9, 8, 0.97);
    color: #938b7d;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.pplc-support {
    padding: 1rem 0.15rem 0;
}

.pplc-details {
    border-top: 1px solid rgba(183, 150, 77, 0.3);
    border-bottom: 1px solid rgba(183, 150, 77, 0.18);
    color: var(--pplc-muted);
}

.pplc-details summary {
    padding: 0.9rem 0.15rem;
    color: var(--pplc-ivory);
    font-weight: 700;
    cursor: pointer;
}

.pplc-details summary:focus-visible {
    outline: 3px solid rgba(183, 150, 77, 0.65);
    outline-offset: 3px;
}

.pplc-details-body {
    padding: 0 0.15rem 1rem;
    font-size: 0.94rem;
    line-height: 1.65;
}

.pplc-scripture-list {
    margin: 0 0 0.8rem;
    padding-left: 1.25rem;
}

.pplc-details-body p,
.pplc-summary {
    color: var(--pplc-muted);
}

.pplc-summary {
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
}

.pplc-summary--visually-hidden,
.pplc-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.pplc-cta-wrap {
    margin: 1.35rem auto 0;
    text-align: center;
}

.pplc-cta {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.15rem;
    border: 1px solid var(--pplc-gold);
    border-radius: 10px;
    background: transparent;
    color: var(--pplc-ivory);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.pplc-cta:hover {
    background: var(--pplc-gold);
    color: #090806;
}

.pplc-cta:focus-visible {
    outline: 3px solid rgba(241, 236, 223, 0.9);
    outline-offset: 3px;
}

.pplc-error,
.pplc-noscript {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    z-index: 5;
    width: min(calc(100% - 2rem), 560px);
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(177, 92, 82, 0.75);
    border-radius: 8px;
    background: rgba(22, 8, 7, 0.92);
    color: var(--pplc-ivory);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
    transform: translateX(-50%);
}

.pplc-admin-warning {
    margin-block: 1.5rem;
    padding: 1rem;
    border-left: 4px solid #b7964d;
    background: #fff8df;
    color: #211b0f;
}

.pplc-immersive:fullscreen,
.pplc-immersive:-webkit-full-screen {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: #000;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.pplc-immersive:fullscreen .pplc-stage,
.pplc-immersive:-webkit-full-screen .pplc-stage {
    width: min(100vw, calc(100vh - 112px));
    height: min(100vw, calc(100vh - 112px));
    margin: auto;
    aspect-ratio: 1 / 1;
}

.pplc-immersive:fullscreen .pplc-controls,
.pplc-immersive:-webkit-full-screen .pplc-controls,
.pplc-immersive:fullscreen .pplc-control-note,
.pplc-immersive:-webkit-full-screen .pplc-control-note {
    width: min(100%, 840px);
    margin-inline: auto;
}

@media (max-width: 640px) {
    .pplc {
        margin-block: 2rem;
    }

    .pplc-header {
        padding-inline: 0.2rem;
    }

    .pplc-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
        padding: 0.72rem;
    }

    .pplc-button {
        min-width: 0;
        padding-inline: 0.55rem;
        font-size: 0.84rem;
    }

    .pplc-button--sound {
        grid-column: 1 / -1;
    }

    .pplc-immersive {
        border-radius: 13px;
    }

    .pplc-control-note {
        padding-inline: 0.7rem;
    }
}

@media (max-width: 370px) {
    .pplc-button {
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pplc-poster,
    .pplc-button,
    .pplc-cta {
        transition: none;
    }

    .pplc-button:active {
        transform: none;
    }
}