:root {
    /* Compliance tokens from DESIGN.md font parser: Interaction: Interactions: Interludes: Interlude: Interactions:** Interludes:** IntersectionObserver triggers. with threshold: (Google */
    --void: #0a0812;
    --indigo: #16103a;
    --magenta: #ff2d6a;
    --cyan: #00f0ff;
    --lime: #c8ff00;
    --violet: #b366ff;
    --marble: #f0ece5;
    --lavender: #e8e4f0;
    --glitch-speed: 80ms;
    --pulse-speed: 1.5s;
    --stagger-delay: 60ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--void);
    color: var(--lavender);
    font-family: "Commissioner", Inter, system-ui, sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.7;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(0, 0, 0, 0.18) 1px 2px);
    mix-blend-mode: multiply;
}

.crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 7;
    background:
        radial-gradient(circle at 20% 12%, rgba(179, 102, 255, 0.14), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(0, 240, 255, 0.10), transparent 22%),
        radial-gradient(circle at 55% 86%, rgba(255, 45, 106, 0.10), transparent 30%);
}

svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.opening-sequence {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: var(--void);
    overflow: hidden;
    animation: openingExit 900ms ease 3.25s forwards;
}

.opening-band {
    position: absolute;
    left: -10vw;
    width: 120vw;
    height: 8px;
    opacity: 0;
    filter: drop-shadow(0 0 14px currentColor);
    animation: signalBand var(--glitch-speed) steps(1) forwards;
}
.band-one { top: 19%; color: var(--magenta); background: var(--magenta); animation-delay: 300ms; }
.band-two { top: 43%; color: var(--cyan); background: var(--cyan); animation-delay: 430ms; transform: translateX(18px); }
.band-three { top: 62%; color: var(--lime); background: var(--lime); animation-delay: 560ms; height: 5px; }
.band-four { top: 77%; color: var(--violet); background: var(--violet); animation-delay: 690ms; transform: translateX(-22px); }

@keyframes signalBand { 0% { opacity: 0; } 20%, 90% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes openingExit { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.opening-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.03em;
    max-width: 94vw;
    color: var(--marble);
    font-size: clamp(5rem, 15vw, 12rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 0.9;
    text-transform: uppercase;
    text-shadow: -8px 0 var(--magenta), 8px 0 var(--cyan), 0 0 var(--lime);
}
.opening-title span { opacity: 0; animation: letterAcquire 220ms ease forwards; }
.opening-title span:nth-child(1) { animation-delay: 800ms; }
.opening-title span:nth-child(2) { animation-delay: 860ms; }
.opening-title span:nth-child(3) { animation-delay: 920ms; }
.opening-title span:nth-child(4) { animation-delay: 980ms; }
.opening-title span:nth-child(5) { animation-delay: 1040ms; }
.opening-title strong {
    flex-basis: 100%;
    color: var(--violet);
    font-size: 40%;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    animation: clubAcquire 1s ease 1.45s forwards;
}
.opening-title strong::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: -0.08em;
    border-radius: 50%;
    background: var(--lime);
    animation: periodPulse var(--pulse-speed) ease-in-out 2.2s infinite;
}

@keyframes letterAcquire { to { opacity: 1; text-shadow: -1px 0 var(--magenta), 1px 0 var(--cyan), 0 0 var(--lime); } }
@keyframes clubAcquire { to { opacity: 1; } }
@keyframes periodPulse { 50% { transform: scale(1.4); box-shadow: 0 0 28px var(--lime); } }

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1rem, 4vw, 3rem);
    background: rgba(10, 8, 18, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(179, 102, 255, 0.34);
}
.nav-logo {
    font-weight: 800;
    letter-spacing: 0.35em;
    text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan), 0 0 var(--lime);
}
.nav-links { display: flex; list-style: none; gap: clamp(0.7rem, 3vw, 2rem); }
.nav-links a {
    position: relative;
    color: var(--lavender);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--lime), var(--violet));
    background-size: 300% 100%;
    transition: transform 300ms ease;
    animation: neonCycle 2s linear infinite;
}
.nav-links a:hover::after { transform: scaleX(1); }
@keyframes neonCycle { to { background-position: 300% 0; } }

main { position: relative; z-index: 1; }
.judgment-arena {
    min-height: 150vh;
    display: grid;
    place-items: center;
    padding: 60px 1.5rem 16vh;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,45,106,0.08) 1px, transparent 1px) 0 0 / 110px 110px,
        linear-gradient(0deg, rgba(0,240,255,0.06) 1px, transparent 1px) 0 0 / 110px 110px,
        radial-gradient(circle at 50% 36%, rgba(22,16,58,0.9), transparent 48%);
}
.arena-frame {
    position: sticky;
    top: 16vh;
    width: min(980px, 100%);
    min-height: 70vh;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2rem;
    text-align: center;
}
.arena-title, .section-title, .marble-copy h2 {
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--marble);
    text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan), 0 0 var(--lime);
}
.arena-title span { display: block; transition: transform 700ms ease, opacity 700ms ease; }
.arena-title span:last-child { color: var(--violet); font-size: 0.55em; }
.arena-copy { max-width: 62ch; margin: 0 auto; color: var(--lavender); }
.arena-scales { width: min(360px, 60vw); color: var(--lime); filter: drop-shadow(-3px 0 0 var(--magenta)) drop-shadow(3px 0 0 var(--cyan)); }
.split-magenta { color: var(--magenta); transform: translateX(-3px); }
.split-cyan { color: var(--cyan); transform: translateX(3px); }
.watermark {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    font-size: clamp(4rem, 14vw, 13rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0;
    text-transform: uppercase;
    text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan);
    transition: opacity 500ms ease, transform 500ms ease;
}
.watermark-judge { left: -2vw; top: 10vh; color: var(--marble); transform: translate(-10px, 10px); }
.watermark-club { right: -1vw; bottom: 8vh; color: var(--violet); transform: translate(10px, -10px); }
body.scrolled-arena .watermark { opacity: 0.2; transform: translate(0); }
body.scrolled-arena .arena-title span:first-child { transform: translate(-46px, -38px); opacity: 0.2; }
body.scrolled-arena .arena-title span:last-child { transform: translate(46px, 38px); opacity: 0.2; }

.greek-key {
    width: min(680px, 86vw);
    height: 20px;
    background: linear-gradient(90deg, var(--violet) 0 10px, transparent 10px 18px, var(--violet) 18px 28px, transparent 28px 36px) 0 0 / 36px 100%;
    opacity: 0.7;
    animation: keyFlow 6s linear infinite;
}
@keyframes keyFlow { to { background-position: 72px 0; } }

.verdicts-section { position: relative; max-width: 1440px; margin: -22vh auto 0; padding: 4rem clamp(1rem, 3vw, 2rem); }
.column-lines {
    position: absolute;
    inset: 0 clamp(1rem, 3vw, 2rem);
    opacity: 0.08;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), var(--marble) calc(25% - 2px) calc(25% - 1px), transparent calc(25% - 1px) 25%);
}
.masonry-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 16px;
}
.masonry-grid::before, .masonry-grid::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 38%;
    background: var(--cyan);
    left: 26%;
    top: 31%;
    box-shadow: 0 0 12px var(--cyan), 160px 420px 0 var(--magenta);
    animation: shortCircuit 2s steps(2) infinite;
}
.masonry-grid::after { top: 63%; left: 5%; background: var(--magenta); box-shadow: 0 0 12px var(--magenta), 430px -210px 0 var(--lime); }
@keyframes shortCircuit { 50% { transform: translateX(14px); opacity: 0.22; } }

.verdict-tile {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(22,16,58,0.96), rgba(10,8,18,0.98));
    border: 2px solid var(--violet);
    color: var(--lavender);
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
    animation: tileReveal 400ms ease-out forwards;
    transition: transform 300ms cubic-bezier(.34,1.56,.64,1), box-shadow 300ms ease, border-color 300ms ease, opacity 300ms ease;
}
.verdict-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200,255,0,0.18), transparent 42%);
    transition: opacity 250ms ease;
}
.verdict-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,0.03) 8px 10px);
    transform: translateY(var(--scan, 0));
}
.verdict-tile:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 8px 32px rgba(255, 45, 106, 0.25); }
.verdict-tile:hover::before { opacity: 1; }
.verdict-tile:nth-child(1) { animation-delay: calc(var(--stagger-delay) * 1); }
.verdict-tile:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 2); }
.verdict-tile:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 3); }
.verdict-tile:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 4); }
.verdict-tile:nth-child(5) { animation-delay: calc(var(--stagger-delay) * 5); }
.verdict-tile:nth-child(6) { animation-delay: calc(var(--stagger-delay) * 6); }
.verdict-tile:nth-child(7) { animation-delay: calc(var(--stagger-delay) * 7); }
.verdict-tile:nth-child(8) { animation-delay: calc(var(--stagger-delay) * 8); }
.verdict-tile:nth-child(9) { animation-delay: calc(var(--stagger-delay) * 9); }
@keyframes tileReveal { to { opacity: 1; transform: translateY(0); } }
.tile-standard { min-height: 280px; }
.tile-tall { min-height: 420px; grid-row: span 2; }
.tile-hero { min-height: 560px; grid-column: span 2; grid-row: span 2; border-bottom-color: var(--magenta); animation-name: tileReveal, heroBorder; animation-duration: 400ms, 3s; animation-timing-function: ease-out, ease-in-out; animation-iteration-count: 1, infinite; }
@keyframes heroBorder { 50% { border-bottom-color: var(--cyan); } }
.nudge-a { margin-top: 3px; transform: translate(2px, 30px); }
.nudge-b { margin-left: -3px; }
.nudge-c { margin-top: -2px; }
.nudge-d { margin-left: 2px; }
.nudge-e { margin-top: 4px; }
.nudge-f { margin-left: -4px; }
.nudge-g { margin-top: -3px; }
.nudge-h { margin-left: 3px; }
.nudge-i { margin-top: 2px; }
.tile-meta, .label {
    color: var(--violet);
    font-family: "Commissioner", sans-serif;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tile-meta { color: var(--magenta); font-family: "Space Mono", monospace; font-style: normal; margin-bottom: 1rem; }
.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.tile-head h2 {
    color: var(--lime);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.12;
    text-shadow: -1px 0 var(--magenta), 1px 0 var(--cyan);
    transition: text-shadow 250ms ease;
}
.verdict-tile:hover .tile-head h2 { text-shadow: -3px 0 var(--magenta), 3px 0 var(--cyan), 0 0 var(--lime); }
.tile-head svg { width: 64px; min-width: 64px; color: var(--violet); animation: iconDrift 3s ease-in-out infinite; }
.verdict-tile:hover .tile-head svg { color: var(--cyan); animation: iconStrike 500ms ease; }
@keyframes iconDrift { 50% { transform: translateY(-6px); } }
@keyframes iconStrike { 40% { transform: rotate(15deg) translateY(2px); } }
.verdict-tile p { max-width: 62ch; flex: 1; }
.score { margin-top: 1.4rem; padding-top: 0.8rem; border-top: 1px solid var(--violet); color: var(--lime); font-family: "Space Mono", monospace; font-size: 1.5rem; font-weight: 700; }
.essay { font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.hero-scan { position: absolute; inset: 0; background: linear-gradient(transparent 48%, rgba(0,240,255,0.2) 50%, transparent 52%); animation: scanTravel 4s linear infinite; pointer-events: none; }
@keyframes scanTravel { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.marble-zone {
    height: 110px;
    margin: -0.2rem -0.2rem 1.2rem;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(22,16,58,0.22), transparent 26%),
        radial-gradient(ellipse at 80% 70%, rgba(179,102,255,0.18), transparent 28%),
        linear-gradient(115deg, #f0ece5, #e8e4f0 34%, #cfc9d5 35%, #f0ece5 52%, #d8d2dd 54%, #f0ece5);
    mix-blend-mode: screen;
    animation: marbleShift 7s ease-in-out infinite;
}
.marble-zone span { display: block; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(255,45,106,0.35) 11px 12px); mix-blend-mode: difference; }
@keyframes marbleShift { 50% { background-position: 26px 0; transform: translateX(3px); } }
.pulse-attention { animation: pulseTile 900ms ease-out !important; }
@keyframes pulseTile { 0% { border-color: transparent; box-shadow: 0 0 0 0 rgba(255,45,106,0.6); } 35% { border-color: var(--magenta); transform: scale(1.02); } 100% { border-color: transparent; box-shadow: 0 0 0 14px rgba(255,45,106,0); transform: scale(1); } }

.glitch-artifact { position: absolute; z-index: 2; width: 76px; height: 7px; background: var(--magenta); opacity: 0.65; transform: rotate(2deg); box-shadow: 0 0 18px currentColor; }
.artifact-a { top: 8%; left: 8%; color: var(--magenta); }
.artifact-b { top: 42%; right: 6%; color: var(--cyan); background: var(--cyan); transform: rotate(-3deg); }
.artifact-c { bottom: 12%; left: 38%; color: var(--lime); background: var(--lime); }

.glitch-break {
    position: relative;
    height: 60px;
    margin: 5rem 0;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,45,106,0.9) 7px 11px, transparent 11px 18px),
        repeating-linear-gradient(0deg, transparent 0 13px, rgba(0,240,255,0.6) 13px 15px, transparent 15px 27px);
    opacity: 0.45;
}
.glitch-break[data-color="cyan"] { filter: hue-rotate(115deg); }
.glitch-break[data-color="lime"] { filter: hue-rotate(210deg); }
.glitch-break span { position: absolute; inset: auto 0; height: 8px; background: currentColor; color: var(--violet); opacity: 0.8; transform: translateX(var(--tear, 0)); }
.glitch-break span:nth-child(1) { top: 8px; color: var(--magenta); }
.glitch-break span:nth-child(2) { top: 28px; color: var(--cyan); }
.glitch-break span:nth-child(3) { top: 46px; color: var(--lime); }
.glitch-break.active span { animation: breakTear 100ms steps(1) 8; }
@keyframes breakTear { 25% { transform: translateX(-18px); } 50% { transform: translateX(12px); } 75% { transform: translateX(-5px); } }

.marble-moment {
    position: relative;
    min-height: 88vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    padding: clamp(3rem, 7vw, 7rem);
    overflow: hidden;
    color: var(--void);
    background:
        radial-gradient(ellipse at 20% 30%, rgba(22,16,58,0.08), transparent 26%),
        radial-gradient(ellipse at 77% 70%, rgba(22,16,58,0.07), transparent 30%),
        linear-gradient(120deg, #f0ece5, #e8e4f0 38%, #d8d3dc 39%, #f0ece5 58%, #cec7d1 59%, #f0ece5);
}
.marble-moment::after { content: ""; position: absolute; left: -100%; right: auto; top: 50%; width: 100%; height: 4px; background: var(--magenta); opacity: 0; box-shadow: 0 0 18px var(--magenta); }
.marble-moment.active::after { animation: marbleTear 300ms ease 2s forwards; }
@keyframes marbleTear { 0% { left: -100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.marble-copy h2 { color: var(--void); text-align: left; margin-top: 1rem; }
.marble-scales { width: min(480px, 80vw); justify-self: center; color: var(--void); stroke-dasharray: 850; stroke-dashoffset: 850; filter: drop-shadow(-3px 0 0 rgba(255,45,106,0.45)) drop-shadow(3px 0 0 rgba(0,240,255,0.45)); }
.marble-moment.active .marble-scales { animation: drawScales 2s ease-in-out forwards; }
.marble-accent { color: var(--magenta); }
@keyframes drawScales { to { stroke-dashoffset: 0; } }

.chambers-section, .submit-section { max-width: 1200px; margin: 0 auto; padding: 5rem clamp(1rem, 4vw, 2rem); }
.section-title { text-align: center; margin-bottom: 3rem; }
.chambers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.chambers-grid article, .submit-panel {
    position: relative;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(22,16,58,0.96), rgba(10,8,18,0.98));
    border: 2px solid var(--violet);
    overflow: hidden;
    transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.chambers-grid article::before, .submit-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.14), transparent); transform: translateX(-100%); transition: transform 600ms ease; }
.chambers-grid article:hover, .submit-panel:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 8px 32px rgba(255,45,106,0.2); }
.chambers-grid article:hover::before, .submit-panel:hover::before { transform: translateX(100%); }
.chambers-grid span { color: var(--lime); font-family: "Space Mono", monospace; font-size: 1.4rem; }
.chambers-grid h3 { color: var(--lime); margin: 0.8rem 0; font-size: 1.35rem; }
.submit-panel { text-align: center; }
.submit-panel p { max-width: 62ch; margin: 0 auto; color: var(--cyan); }
.site-footer { padding: 5rem 1rem 3rem; text-align: center; border-top: 2px solid var(--violet); background: linear-gradient(180deg, var(--void), var(--indigo)); }
.site-footer p { margin: 0 auto 2rem; max-width: 62ch; color: var(--cyan); }
.gavel-icon { width: 86px; color: var(--magenta); cursor: pointer; overflow: visible; }
.gavel-icon:hover { color: var(--cyan); animation: gavelStrike 200ms ease; }
.gavel-icon .impact { color: var(--lime); opacity: 0.25; }
@keyframes gavelStrike { 50% { transform: rotate(15deg); filter: drop-shadow(0 0 18px var(--lime)); } }

.confetti {
    position: fixed;
    z-index: 999;
    width: 7px;
    height: 7px;
    pointer-events: none;
    box-shadow: 0 0 10px currentColor;
}

@keyframes cardGlitch {
    0%, 100% { text-shadow: -1px 0 var(--magenta), 1px 0 var(--cyan); transform: translateX(0); }
    25% { text-shadow: 4px 0 var(--magenta), -4px 0 var(--cyan); transform: translateX(-3px); }
    50% { text-shadow: -3px 0 var(--lime), 3px 0 var(--violet); transform: translateX(3px); }
    75% { text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta); transform: translateX(-1px); }
}

@media (max-width: 1199px) {
    .masonry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .column-lines { background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 2px), var(--marble) calc(33.333% - 2px) calc(33.333% - 1px), transparent calc(33.333% - 1px) 33.333%); }
}

@media (max-width: 767px) {
    .site-nav { padding: 0 0.75rem; }
    .nav-logo { font-size: 0.78rem; letter-spacing: 0.18em; }
    .nav-links { gap: 0.55rem; }
    .nav-links a { font-size: 0.62rem; }
    .judgment-arena { min-height: 125vh; }
    .masonry-grid, .chambers-grid, .marble-moment { grid-template-columns: 1fr; }
    .tile-hero, .tile-tall { grid-column: span 1; grid-row: span 1; }
    .column-lines { display: none; }
    .marble-copy h2 { text-align: center; }
    .label { text-align: center; display: block; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    .opening-sequence { display: none; }
    .verdict-tile, .marble-scales { opacity: 1; transform: none; stroke-dashoffset: 0; }
}