/* moot.ing - McBling Courtroom Theater */
/* Colors: #F0E8E0, #D0A840, #E0E0E8, #90A0B0, #40A8B0, #A0A0B0, #141018, #808890 */
/* Fonts: Bodoni Moda, Libre Caslon Text, Space Mono */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #141018; color: #F0E8E0; font-family: 'Libre Caslon Text', serif; overflow-x: hidden; }

#gavel-opening { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #141018; z-index: 1000; display: flex; align-items: center; justify-content: center; animation: gavelFade 0.8s ease 1.5s forwards; }
#gavel-opening.done { opacity: 0; pointer-events: none; }
.gavel { font-size: 4rem; color: #D0A840; animation: gavelStrike 0.8s ease forwards; }
@keyframes gavelStrike { 0% { transform: rotate(-30deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg) scale(1.1); } 100% { transform: rotate(0deg) scale(1); } }
@keyframes gavelFade { to { opacity: 0; pointer-events: none; } }

#court-header { text-align: center; padding: 4rem 2rem 2rem; }
.court-title { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: clamp(2rem, 4.5vw, 4rem); color: #F0E8E0; letter-spacing: 0.01em; animation: titlePulse 0.3s ease 1s; }
@keyframes titlePulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.court-subtitle { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: #D0A840; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.5rem; }

#courtroom { max-width: 1200px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: 5fr 2fr 5fr; gap: 16px; }

.prosecution-side, .defense-side { display: flex; flex-direction: column; gap: 16px; }

.legal-card { padding: 2rem; position: relative; opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s ease; }
.legal-card.visible { opacity: 1; transform: translateY(0); }

.legal-card.prosecution { background: linear-gradient(135deg, rgba(64, 168, 176, 0.1), rgba(20, 16, 24, 0.8)); border-left: 3px solid #40A8B0; }
.legal-card.defense { background: linear-gradient(135deg, rgba(208, 168, 64, 0.1), rgba(20, 16, 24, 0.8)); border-right: 3px solid #D0A840; text-align: right; }

.card-side { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.75rem; }
.prosecution .card-side { color: #40A8B0; }
.defense .card-side { color: #D0A840; }

.card-heading { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: clamp(1.3rem, 2.5vw, 2rem); color: #E0E0E8; margin-bottom: 0.75rem; }
.card-argument { font-family: 'Libre Caslon Text', serif; font-size: 0.95rem; line-height: 1.8; color: #90A0B0; }

.bench-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 0; }
.bench-divider { width: 2px; height: 100px; background: linear-gradient(to bottom, #808890, #A0A0B0, #D0A840, #A0A0B0, #808890); margin-bottom: 1.5rem; }
.bench-verdict { text-align: center; }
.verdict-label { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: #D0A840; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem; }
.verdict-text { font-family: 'Libre Caslon Text', serif; font-size: 0.8rem; color: #808890; line-height: 1.6; max-width: 180px; }

.chrome-divider { width: 60%; height: 2px; margin: 0 auto 2rem; background: linear-gradient(90deg, transparent, #808890, #A0A0B0, #D0A840, #A0A0B0, #808890, transparent); }

#closing { text-align: center; padding: 4rem 2rem 6rem; }
.closing-title { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.5rem); color: #E0E0E8; margin-bottom: 1rem; }
.closing-text { font-family: 'Libre Caslon Text', serif; font-size: 1rem; color: #90A0B0; max-width: 600px; margin: 0 auto; line-height: 1.8; }

@media (max-width: 768px) {
    #courtroom { grid-template-columns: 1fr; }
    .legal-card.defense { text-align: left; border-right: none; border-left: 3px solid #D0A840; }
    .bench-divider { width: 100px; height: 2px; }
}