/* judge.club -- Isometric jewel-toned judicial complex */

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

:root{
    --amethyst:#5B2C8E;
    --emerald:#1A7A4C;
    --ruby:#9B1B30;
    --obsidian:#0F0F14;
    --sapphire:#2A3B6E;
    --jewel-mist:#3D2F6B;
    --deep-onyx:#1A1A24;
    --pearl:#EDE8E3;
    --silver:#9A96A0;
    --gold-thread:#C9A84C;
}

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

body{
    background:var(--obsidian);
    color:var(--pearl);
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Isometric Nav */
.iso-nav{
    position:fixed;
    right:1.5rem;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:1.2rem;
}

.nav-cube{
    width:24px;height:24px;
    position:relative;
    display:block;
    text-decoration:none;
    transform:rotateX(60deg) rotateZ(-45deg);
    transform-style:preserve-3d;
    transition:transform 0.3s ease;
}

.cube-face{
    position:absolute;
    display:block;
}

.cube-face.top{
    width:24px;height:24px;
    background:var(--sapphire);
    transform:translateZ(12px);
    opacity:0.5;
    transition:opacity 0.3s,background 0.3s;
}

.cube-face.left{
    width:24px;height:24px;
    background:var(--jewel-mist);
    transform:rotateX(-90deg) translateZ(12px);
    opacity:0.5;
    transition:opacity 0.3s,background 0.3s;
}

.cube-face.right{
    width:24px;height:24px;
    background:var(--deep-onyx);
    transform:rotateY(90deg) translateZ(12px);
    opacity:0.5;
    transition:opacity 0.3s,background 0.3s;
}

.nav-cube.active .cube-face.top{background:var(--amethyst);opacity:1}
.nav-cube.active .cube-face.left{background:var(--emerald);opacity:1}
.nav-cube.active .cube-face.right{background:var(--ruby);opacity:1}

.nav-cube[data-section="lobby"].active .cube-face.top{background:var(--amethyst)}
.nav-cube[data-section="chamber"].active .cube-face.top{background:var(--emerald)}
.nav-cube[data-section="deliberation"].active .cube-face.top{background:var(--ruby)}
.nav-cube[data-section="verdict"].active .cube-face.top{background:var(--gold-thread)}

/* Tribunal Sections */
.tribunal-section{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
}

/* Isometric scene containers */
.iso-scene{
    position:relative;
    width:100%;
    max-width:1100px;
    min-height:70vh;
}

/* Parallax layers */
.parallax-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    transition:transform 0.1s linear;
}

/* Isometric blocks */
.iso-block{
    position:absolute;
    left:var(--x,50%);
    top:var(--y,50%);
    width:60px;
    height:calc(var(--h,3) * 20px);
    transform-style:preserve-3d;
}

.iso-block::before{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:60px;height:60px;
    background:var(--sapphire);
    transform:rotateX(60deg) rotateZ(-45deg);
}

.iso-block::after{
    content:'';
    position:absolute;
    bottom:0;left:15px;
    width:40px;
    height:calc(var(--h,3) * 20px);
    background:linear-gradient(to right,var(--jewel-mist) 50%,var(--deep-onyx) 50%);
}

.iso-block.block-amethyst::before{background:var(--amethyst)}
.iso-block.block-amethyst::after{background:linear-gradient(to right,#7B3CB0 50%,#4A1D6E 50%)}

.iso-block.block-emerald::before{background:var(--emerald)}
.iso-block.block-emerald::after{background:linear-gradient(to right,#239B60 50%,#125A38 50%)}

.iso-block.block-ruby::before{background:var(--ruby)}
.iso-block.block-ruby::after{background:linear-gradient(to right,#C02040 50%,#7A1225 50%)}

/* Lobby */
.lobby-title{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    z-index:5;
}

.hero-domain{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5.5rem);
    letter-spacing:0.01em;
    color:var(--pearl);
    line-height:1.1;
}

.dot-gold{color:var(--gold-thread)}

.hero-sub{
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,1rem);
    color:var(--silver);
    letter-spacing:0.04em;
    margin-top:0.75rem;
}

/* Tech overlay SVG */
.tech-overlay{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:1;
}

.delib-overlay{
    opacity:0.8;
}

/* Chamber section */
.chamber-scene{
    display:flex;
    flex-direction:column;
    gap:2rem;
    align-items:center;
}

.chamber-bench{
    background:var(--deep-onyx);
    border:1px solid var(--gold-thread);
    padding:clamp(2rem,3vw,3rem);
    max-width:640px;
    width:100%;
    position:relative;
}

.chamber-gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    max-width:640px;
    width:100%;
}

.gallery-block{
    background:var(--deep-onyx);
    border:1px solid var(--jewel-mist);
    padding:clamp(1.5rem,2vw,2rem);
    position:relative;
}

.block-label{
    font-family:'Fira Code',monospace;
    font-size:0.7rem;
    letter-spacing:0.06em;
    color:var(--silver);
    display:block;
    margin-bottom:0.75rem;
}

.section-heading{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(1.5rem,2.5vw,2.5rem);
    letter-spacing:0.01em;
    color:var(--pearl);
    margin-bottom:1rem;
    line-height:1.3;
}

.body-text{
    color:var(--pearl);
    line-height:1.75;
}

/* Build-block animation */
.build-block{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.4s cubic-bezier(0.34,1.56,0.64,1),
               transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.build-block.built{
    opacity:1;
    transform:translateY(0);
}

/* Shake on hover (deliberation tremor) */
.chamber-bench:hover,
.gallery-block:hover{
    animation:shake 0.3s ease;
}

@keyframes shake{
    0%{transform:translateX(0)}
    25%{transform:translateX(-2px)}
    50%{transform:translateX(2px)}
    75%{transform:translateX(-1px)}
    100%{transform:translateX(0)}
}

/* Collage strips */
.collage-strip{
    position:absolute;
    top:10%;
    width:3px;
    height:80%;
    background:var(--gold-thread);
    opacity:0.2;
}

.strip-left{left:clamp(1rem,3vw,3rem)}
.strip-right{right:clamp(1rem,3vw,3rem)}

/* Deliberation section */
.deliberation-scene{
    display:flex;
    justify-content:center;
}

.delib-stack{
    display:flex;
    flex-direction:column;
    gap:1rem;
    max-width:580px;
    width:100%;
}

.delib-block{
    background:var(--deep-onyx);
    border:1px solid var(--jewel-mist);
    padding:clamp(1.5rem,2.5vw,2.5rem);
    position:relative;
}

.delib-quote{
    font-family:'Libre Baskerville',serif;
    font-style:italic;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--gold-thread);
    line-height:1.4;
    text-align:center;
}

/* Verdict section */
.verdict-section{
    background:var(--ruby);
    flex-direction:column;
    text-align:center;
}

.verdict-content{
    max-width:580px;
}

.verdict-block{
    padding:2rem;
    border:1px solid rgba(237,232,227,0.2);
}

.verdict-text{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(1rem,1.3vw,1.2rem);
    color:var(--pearl);
    line-height:1.75;
}

.verdict-domain{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--pearl);
    margin-top:2rem;
    letter-spacing:0.02em;
}

.verdict-code{
    font-family:'Fira Code',monospace;
    font-size:0.75rem;
    color:rgba(237,232,227,0.5);
    letter-spacing:0.08em;
    display:block;
    margin-top:1rem;
}

/* Responsive */
@media(max-width:768px){
    .iso-nav{display:none}
    .chamber-gallery{grid-template-columns:1fr}
    .iso-block{display:none}
    .parallax-layer{display:none}
    .lobby-title{position:relative;top:auto;left:auto;transform:none}
    .lobby-scene{display:flex;align-items:center;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
    .build-block{opacity:1;transform:none;transition:none}
    .chamber-bench:hover,.gallery-block:hover{animation:none}
}