/* judge.quest -- Medieval tribunal theatrical */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --tribunal:#0D0B08;
    --walnut:#1A1510;
    --seal-gold:#C8A96E;
    --amber:#E8B84B;
    --parchment:#D4C5A0;
    --bronze:#8B7D6B;
    --oxblood:#6B2D2D;
    --forge:#3A3228;
    --wax:#8B4513;
    --iron:#6B5B4A;
}

html{scroll-behavior:smooth;font-size:16px}

body{
    background:var(--tribunal);
    color:var(--parchment);
    font-family:'Crimson Pro',serif;
    font-weight:400;
    font-size:1.15rem;
    line-height:1.72;
    overflow-x:hidden;
}

/* Iron chain timeline */
.iron-chain{
    position:fixed;
    left:2rem;
    top:0;
    width:4px;
    height:100vh;
    z-index:50;
    background:repeating-linear-gradient(
        to bottom,
        var(--forge) 0px,
        var(--forge) 14px,
        var(--iron) 14px,
        var(--iron) 16px
    );
}

.chain-glow{
    position:absolute;
    top:50%;left:-4px;
    width:12px;height:40px;
    transform:translateY(-50%);
    background:radial-gradient(ellipse,rgba(200,169,110,0.5),transparent 70%);
    border-radius:50%;
    pointer-events:none;
}

/* Seal nav button */
.seal-nav-btn{
    position:fixed;
    top:1.5rem;right:1.5rem;
    background:none;border:none;
    cursor:pointer;z-index:200;
    transition:transform 0.3s;
}

.seal-nav-btn:hover{transform:scale(1.1)}

.parchment-nav{
    position:fixed;
    top:4rem;right:1.5rem;
    background:linear-gradient(to bottom,var(--parchment),#C4B590);
    padding:1.2rem 1.5rem;
    z-index:190;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    opacity:0;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity 0.3s,transform 0.3s;
    border-radius:2px;
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
}

.parchment-nav.open{
    opacity:1;pointer-events:auto;transform:translateY(0);
}

.nav-entry{
    font-family:'Crimson Pro',serif;
    font-size:0.95rem;
    color:var(--walnut);
    text-decoration:none;
    transition:color 0.2s;
}

.nav-entry:hover{color:var(--oxblood)}

/* Chambers */
.chamber{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem) clamp(4rem,8vw,8rem);
    position:relative;
}

.chain-marker{
    position:absolute;
    left:3.5rem;
    bottom:2rem;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    font-weight:400;
    color:var(--iron);
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.chain-finial{
    color:var(--seal-gold);
}

/* Chamber headings */
.chamber-heading{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(1.5rem,5vw,3rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--seal-gold);
    line-height:0.92;
    margin-bottom:2rem;
    text-align:center;
}

.body-text{
    max-width:38ch;
    margin:0 auto 1.5rem;
    color:var(--parchment);
}

/* Summons (Act I) */
.summons-content{
    text-align:center;
    z-index:2;
}

.summons-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(4rem,11vw,9rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--seal-gold);
    line-height:0.92;
    opacity:0;
    animation:fadeRise 1.2s ease-out 1.5s forwards;
}

.summons-quest{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--iron);
    letter-spacing:0.2em;
    margin-top:0.5rem;
    opacity:0;
    animation:fadeRise 0.8s ease-out 2.5s forwards;
}

@keyframes fadeRise{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}

/* Candle and flame */
.candle{
    position:absolute;
    width:8px;height:60px;
    background:linear-gradient(to bottom,#D4C090,#B8A070);
    border-radius:2px 2px 0 0;
    z-index:1;
}

.candle-left{left:15%;bottom:30%}
.candle-right{right:15%;bottom:35%}
.candle-vl{left:10%;bottom:25%}
.candle-vr{right:10%;bottom:30%}

.flame{
    position:absolute;
    top:-18px;left:50%;
    transform:translateX(-50%);
    width:10px;height:18px;
    background:linear-gradient(to top,var(--amber),var(--seal-gold));
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    animation:flicker 0.7s ease-in-out infinite alternate;
}

.flame-inner{
    position:absolute;
    bottom:2px;left:50%;
    transform:translateX(-50%);
    width:4px;height:8px;
    background:#FFF3C4;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity:0.8;
}

.flame-alt{animation-duration:1.1s;animation-delay:0.3s}
.flame-v1{animation-duration:0.9s;animation-delay:0.1s}
.flame-v2{animation-duration:0.6s;animation-delay:0.5s}

@keyframes flicker{
    0%{transform:translateX(-50%) scaleY(1) scaleX(1);opacity:1}
    30%{transform:translateX(-50%) scaleY(1.1) scaleX(0.9);opacity:0.9}
    60%{transform:translateX(-50%) scaleY(0.85) scaleX(1.05);opacity:1}
    100%{transform:translateX(-50%) scaleY(1.05) scaleX(0.95);opacity:0.85}
}

/* Evidence (Act II) */
.parchment-scroll{
    background:linear-gradient(to bottom,var(--parchment),#C4B590);
    padding:clamp(2rem,4vw,3rem);
    max-width:560px;
    width:100%;
    border-radius:2px;
    position:relative;
    clip-path:inset(0);
    margin-bottom:2rem;
}

.parchment-scroll .chamber-heading,
.parchment-scroll .body-text{
    color:var(--walnut);
}

.leather-card{
    background:var(--walnut);
    border:1px solid var(--seal-gold);
    border-radius:2px;
    padding:clamp(1.2rem,2vw,1.8rem);
    max-width:420px;
    width:100%;
    margin-bottom:1rem;
}

.card-left{align-self:flex-start}
.card-right{align-self:flex-end}

.card-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:var(--iron);
    letter-spacing:0.08em;
    text-transform:uppercase;
    display:block;
    margin-bottom:0.5rem;
}

.card-text{
    font-size:0.95rem;
    color:var(--bronze);
    line-height:1.65;
}

/* Weighing (Act III) */
.weighing-chamber{
    overflow:hidden;
}

.scale-container{
    position:relative;
    width:100%;
    max-width:600px;
    margin:0 auto;
}

.scale-svg{
    width:100%;
    height:auto;
    display:block;
}

#scaleBeam{
    transform-origin:200px 140px;
    transition:transform 0.6s ease;
}

.pan-content{
    max-width:200px;
    position:absolute;
    top:75%;
}

.pan-left-content{left:2%}
.pan-right-content{right:2%}

.pan-text{
    font-family:'Crimson Pro',serif;
    font-size:0.95rem;
    color:var(--parchment);
    line-height:1.6;
    transition:color 0.6s;
}

.pan-text.dimmed{color:var(--iron)}
.pan-text.bright{color:var(--parchment)}

/* Deliberation (Act IV) */
.deliberation-text{
    max-width:32ch;
    text-align:center;
}

.delib-passage{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.delib-passage.visible{
    opacity:1;
    transform:translateY(0);
}

/* Verdict (Act V) */
.verdict-chamber{
    text-align:center;
}

.wax-seal{
    opacity:0;
    transform:scale(0.3);
    transition:opacity 0.5s,transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    margin-bottom:2rem;
}

.wax-seal.stamped{
    opacity:1;
    transform:scale(1);
}

.verdict-statement{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(1.2rem,3vw,2rem);
    color:var(--seal-gold);
    letter-spacing:0.05em;
    max-width:38ch;
    margin:0 auto 2rem;
    line-height:1.3;
    text-transform:uppercase;
}

.verdict-domain{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--parchment);
    letter-spacing:0.1em;
}

/* Responsive */
@media(max-width:768px){
    .iron-chain{left:0.5rem;width:3px}
    .chain-marker{left:1.5rem;font-size:0.65rem}
    .chamber{padding-left:2.5rem;padding-right:1.5rem}
    .candle{display:none}
    .pan-content{position:relative;top:auto;left:auto;right:auto;max-width:100%;margin-top:1rem}
    .pan-left-content,.pan-right-content{left:auto;right:auto}
    .scale-container{display:flex;flex-direction:column;align-items:center}
}

@media(prefers-reduced-motion:reduce){
    .flame,.flame-alt,.flame-v1,.flame-v2{animation:none}
    .summons-title,.summons-quest{opacity:1;animation:none}
    .delib-passage{opacity:1;transform:none;transition:none}
    .wax-seal{opacity:1;transform:none;transition:none}
    #scaleBeam{transition:none}
}