*{box-sizing:border-box;margin:0;padding:0}
html,body{
    width:100%;height:100%;
    overflow:hidden;
    background:#000;
    font-family:Impact,'Arial Black',Arial,sans-serif;
    user-select:none;
}

/* Canvas fills screen */
#volcanoCanvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    display:block;
}

/* Title plate */
#titlePlate{
    position:fixed;
    z-index:10;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,228,140,.78);
    font:700 12px Arial,Helvetica,sans-serif;
    letter-spacing:.42em;
    text-transform:uppercase;
    text-shadow:0 0 22px rgba(255,135,0,.9);
    pointer-events:none;
    transition:opacity 1s ease;
}

/* Scene transition */
body.player-mode #volcanoCanvas,
body.player-mode #titlePlate{
    opacity:0;
    transition:opacity 1.25s ease;
    pointer-events:none;
}

/* Media stage */
.mediaStage{
    position:fixed;
    inset:0;
    z-index:1000;
    background:#000;
    opacity:0;
    transform:scale(1.025);
    transition:opacity 1.25s ease,transform 1.25s ease;
    pointer-events:none;
}
body.player-mode .mediaStage{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
}
.mediaStage iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
}
@supports(height:100dvh){
    .mediaStage iframe{height:100dvh;}
}

/* ── SHARE TRIGGER ── */
#shareTrigger{
    position:fixed;
    top:16px;
    left:20px;
    z-index:2000;
    display:none;
    align-items:center;
    gap:8px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,180,60,.3);
    border-radius:4px;
    padding:8px 14px;
    cursor:pointer;
    user-select:none;
    opacity:1;
    transition:background .2s,border-color .2s;
}
body.player-mode #shareTrigger{display:flex;}
#shareTrigger:hover{
    background:rgba(255,60,0,.25);
    border-color:rgba(255,180,60,.6);
}
#shareTrigger .share-icon{
    width:15px;height:15px;
    color:rgba(255,200,80,.85);
    flex-shrink:0;
}
#shareTrigger .share-label{
    font:700 10px Arial,sans-serif;
    letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,210,100,.9);
    white-space:nowrap;
}

/* ── MENU TRIGGER ── */
#menuTrigger{
    position:fixed;
    top:16px;
    right:20px;
    z-index:2000;
    display:none;
    align-items:center;
    gap:8px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,180,60,.3);
    border-radius:4px;
    padding:8px 14px;
    cursor:pointer;
    user-select:none;
    opacity:1;
    transition:background .2s,border-color .2s;
}
body.player-mode #menuTrigger{display:flex;}
#menuTrigger.video-mode{
    background:rgba(0,0,0,1);
    border-color:rgba(255,180,60,.5);
}
#menuTrigger.video-mode:hover{
    background:rgba(40,10,0,1);
    border-color:rgba(255,180,60,.8);
}
#menuTrigger:not(.video-mode):hover{
    background:rgba(255,60,0,.25);
    border-color:rgba(255,180,60,.6);
}
#menuTrigger .more-label{
    font:700 10px Arial,sans-serif;
    letter-spacing:.28em;text-transform:uppercase;
    color:rgba(255,210,100,.9);
}
#menuTrigger .hamburger{display:flex;flex-direction:column;gap:4px;}
#menuTrigger .hamburger span{
    display:block;width:16px;height:2px;
    background:rgba(255,200,80,.85);border-radius:1px;
}

/* ── MENU PANEL ── */
#menuPanel{
    position:fixed;top:0;right:0;bottom:0;
    z-index:1999;width:280px;
    background:linear-gradient(to bottom,#0d0100,#070000);
    border-left:1px solid rgba(255,60,0,.18);
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .8s ease-out;
    display:flex;flex-direction:column;overflow:hidden;
    opacity:1;
}
#menuPanel.open{transform:translateX(0);opacity:1;}
#menuPanel.autohide{opacity:0;pointer-events:none;transition:opacity .8s ease-out;}
#menuHeader{
    padding:20px 20px 14px;
    border-bottom:1px solid rgba(255,60,0,.14);
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
#menuHeader .menuTitle{
    font:700 10px Arial,sans-serif;letter-spacing:.38em;text-transform:uppercase;
    color:rgba(255,160,50,.7);
}
#menuClose{
    background:none;border:none;color:rgba(255,150,50,.6);
    font-size:18px;cursor:pointer;padding:0 2px;line-height:1;
}
#menuClose:hover{color:rgba(255,200,80,.9);}
#parablesList{
    flex:1;overflow-y:auto;padding:8px 0;
    scrollbar-width:thin;scrollbar-color:rgba(255,80,0,.2) transparent;
}
#parablesList::-webkit-scrollbar{width:4px;}
#parablesList::-webkit-scrollbar-thumb{background:rgba(255,80,0,.2);border-radius:2px;}
.parableItem{
    display:block;padding:14px 20px;
    border-bottom:1px solid rgba(255,40,0,.07);
    cursor:pointer;transition:background .15s;
}
.parableItem:hover,.parableItem.active{background:rgba(255,60,0,.1);}
.parableItem .pTitle{
    display:block;font:700 14px Georgia,'Times New Roman',serif;
    color:rgba(255,210,120,.88);margin-bottom:4px;line-height:1.3;
}
.parableItem .pDate{
    display:block;font:400 10px Arial,sans-serif;
    letter-spacing:.1em;color:rgba(255,120,50,.45);
}
.parableItem.active .pTitle{color:rgba(255,230,150,1);}

/* Scrim */
#menuScrim{
    position:fixed;inset:0;z-index:1998;
    background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
}
#menuScrim.open{opacity:1;pointer-events:auto;}

/* ══════════════════════════════════════════
   OLD-SCHOOL ALERT TOAST
   ══════════════════════════════════════════ */
#scriptureToast{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%) scale(0.94);
    z-index:9999;
    width:min(480px,92vw);
    background:#c0c0c0;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
    border-right:2px solid #6b6b6b;
    border-bottom:2px solid #6b6b6b;
    box-shadow:4px 4px 0 #000, inset 1px 1px 0 #dfdfdf;
    font-family:'MS Sans Serif','Segoe UI',Arial,sans-serif;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
#scriptureToast.visible{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
}
#scriptureToast.hiding{
    opacity:0;
    transform:translate(-50%,-50%) scale(0.94);
}
#stTitleBar{
    background:linear-gradient(to right,#000080,#1084d0);
    padding:4px 6px;
    display:flex;align-items:center;justify-content:space-between;
    user-select:none;
}
#stTitleBar .stTitle{
    color:#fff;
    font:700 11px 'MS Sans Serif','Segoe UI',Arial,sans-serif;
    letter-spacing:.04em;
    display:flex;align-items:center;gap:6px;
}
#stTitleBar .stTitle::before{
    content:'⚠';
    font-size:13px;
}
#stCloseBtn{
    width:16px;height:14px;
    background:#c0c0c0;
    border-top:1px solid #fff;
    border-left:1px solid #fff;
    border-right:1px solid #6b6b6b;
    border-bottom:1px solid #6b6b6b;
    display:flex;align-items:center;justify-content:center;
    font:700 10px Arial,sans-serif;
    color:#000;cursor:pointer;
    line-height:1;
    padding:0;
}
#stCloseBtn:active{
    border-top:1px solid #6b6b6b;
    border-left:1px solid #6b6b6b;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}
#stBody{
    padding:16px 18px 12px;
    display:flex;gap:14px;align-items:flex-start;
}
#stIcon{
    font-size:32px;flex-shrink:0;
    line-height:1;
    margin-top:2px;
    filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35));
}
#stRef{
    font:700 11px 'MS Sans Serif','Segoe UI',Arial,sans-serif;
    color:#000080;
    margin-bottom:6px;
    letter-spacing:.02em;
}
#stText{
    font:400 12px/1.55 'MS Sans Serif','Segoe UI',Arial,sans-serif;
    color:#000;
    margin-bottom:10px;
}
#stSub{
    font:italic 400 11px/1.4 'MS Sans Serif','Segoe UI',Arial,sans-serif;
    color:#444;
    margin-bottom:4px;
}
#stDivider{
    height:1px;
    background:linear-gradient(to right,#888,#c0c0c0);
    margin:0 0 10px;
}
#stFooter{
    padding:0 18px 14px;
    display:flex;justify-content:center;align-items:center;gap:10px;
}
#stProgressWrap{
    flex:1;
    height:4px;
    background:#a0a0a0;
    border-top:1px solid #6b6b6b;
    border-left:1px solid #6b6b6b;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    overflow:hidden;
}
#stProgress{
    height:100%;
    width:100%;
    background:linear-gradient(to right,#000080,#1084d0);
    transform-origin:left;
    transition:transform linear;
}
#stOkBtn{
    min-width:72px;
    padding:4px 14px;
    background:#c0c0c0;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
    border-right:2px solid #6b6b6b;
    border-bottom:2px solid #6b6b6b;
    font:700 11px 'MS Sans Serif','Segoe UI',Arial,sans-serif;
    color:#000;cursor:pointer;
    text-align:center;
    letter-spacing:.04em;
}
#stOkBtn:active{
    border-top:2px solid #6b6b6b;
    border-left:2px solid #6b6b6b;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    padding:5px 13px 3px 15px;
}
#stScrim{
    position:fixed;inset:0;
    z-index:9998;
    background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;
    transition:opacity .18s ease;
}
#stScrim.visible{opacity:1;pointer-events:auto;}

/* ── MOBILE OVERLAY CLEARANCE ──────────────────────────────────
   On narrow screens the Share + Menu buttons need clear space
   above the iframe content. Push the mediaStage down and shrink
   it so the buttons float above it unobstructed.
   The --pcc-btn-h variable makes the offset easy to tune.
   ──────────────────────────────────────────────────────────── */
@media(max-width:768px){
    :root{
        --pcc-btn-h: 44px; /* height of the button zone — adjust here */
    }

    /* Push iframe down to clear the button zone */
    body.player-mode .mediaStage{
        top: var(--pcc-btn-h);
        height: calc(100% - var(--pcc-btn-h));
        inset: unset;
        left: 0;
        right: 0;
        bottom: 0;
    }
    body.player-mode .mediaStage iframe{
        height: 100%;
    }

    /* ── BUTTON BAR: evenly spaced across full width ──
       A fixed full-width invisible bar sits at the top.
       The two buttons are absolutely positioned inside it
       via flexbox so gaps left, between, and right are equal.
       ─────────────────────────────────────────────────── */

    /* The bar itself — full width, sits in the button zone */
    body.player-mode #shareTrigger,
    body.player-mode #menuTrigger{
        position: fixed;
        top: 0;
        bottom: unset;
        left: unset;
        right: unset;
        height: var(--pcc-btn-h);
        align-items: center;
    }

    /* Reposition both buttons using equal thirds of viewport */
    /* Left button: centered in left half */
    body.player-mode #shareTrigger{
        left: 25%;
        transform: translateX(-50%);
    }
    /* Right button: centered in right half */
    body.player-mode #menuTrigger{
        left: 75%;
        transform: translateX(-50%);
    }
}