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

:root {
  --sepia: #F5E6C8;
  --sepia-dark: #D4C4A8;
  --smoke-gray: #3D3D3D;
  --bourbon: #D4A84B;
  --blood-red: #8B2500;
  --noir-black: #1A1A1A;
  --aged-paper: #E8DCC4;
  --ink: #2C2416;
  --brass: #B5A642;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
  75% { opacity: 0.95; }
  90% { opacity: 0.85; }
}

@keyframes smoke {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-100px) translateX(20px) scale(1.5);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-200px) translateX(-10px) scale(2);
    opacity: 0;
  }
}

@keyframes neonGlow {
  0%, 100% {
    text-shadow: 
      0 0 10px #ff6b6b,
      0 0 20px #ff6b6b,
      0 0 40px #ff6b6b,
      0 0 80px #ff0000;
  }
  50% {
    text-shadow: 
      0 0 5px #ff6b6b,
      0 0 10px #ff6b6b,
      0 0 20px #ff6b6b,
      0 0 40px #ff0000;
  }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes stampSlam {
  0% {
    transform: scale(3) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-8deg);
    opacity: 1;
  }
}

@keyframes venetianSway {
  0%, 100% { transform: translateY(0) skewY(0deg); }
  50% { transform: translateY(5px) skewY(0.5deg); }
}

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

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

body {
  font-family: 'Courier Prime', 'Courier New', monospace;
  background: var(--noir-black);
  color: var(--sepia);
  min-height: 100vh;
  overflow-x: hidden;
}

.app-container {
  position: relative;
  min-height: 100vh;
}

/* Film Grain Overlay */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Venetian Shadows */
.venetian-shadows {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 30px,
    rgba(0,0,0,0.15) 30px,
    rgba(0,0,0,0.15) 35px
  );
  animation: venetianSway 8s ease-in-out infinite;
}

/* Entry Screen */
.entry-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
  position: relative;
  overflow: hidden;
}

.skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(0deg, #1a1a1a, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cpath d='M0 200 L0 150 L50 150 L50 100 L80 100 L80 80 L100 80 L100 60 L120 60 L120 100 L150 100 L150 130 L200 130 L200 90 L220 90 L220 50 L240 50 L240 90 L280 90 L280 110 L320 110 L320 70 L350 70 L350 40 L370 40 L370 70 L400 70 L400 120 L450 120 L450 80 L480 80 L480 60 L500 60 L500 30 L520 30 L520 60 L550 60 L550 100 L600 100 L600 140 L650 140 L650 100 L680 100 L680 70 L700 70 L700 50 L730 50 L730 90 L780 90 L780 120 L830 120 L830 80 L860 80 L860 110 L900 110 L900 150 L950 150 L950 130 L1000 130 L1000 200 Z' fill='%231a1a1a'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
}

.smoke-container {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.smoke-particle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(150,150,150,0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: smoke 6s ease-out infinite;
}

.smoke-particle:nth-child(odd) {
  left: -30px;
}

.smoke-particle:nth-child(even) {
  left: 30px;
}

.neon-sign-container {
  position: relative;
  z-index: 10;
}

.neon-sign {
  text-align: center;
  padding: 2rem 3rem;
  border: 4px solid var(--blood-red);
  background: rgba(0,0,0,0.8);
}

.neon-sign.flicker {
  animation: flicker 0.1s ease-in-out;
}

.neon-text {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 900;
  color: #ff6b6b;
  animation: neonGlow 2s ease-in-out infinite;
  letter-spacing: 0.1em;
}

.neon-subtitle {
  font-family: 'Special Elite', cursive;
  font-size: 1.2rem;
  color: var(--bourbon);
  margin-top: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.door-knocker {
  margin-top: 3rem;
  padding: 1.2rem 2.5rem;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 3px solid var(--brass);
  color: var(--sepia);
  font-family: 'Special Elite', cursive;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  animation: fadeIn 1s ease-out, pulse 2s ease-in-out infinite;
}

.door-knocker:hover {
  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(212, 168, 75, 0.3);
}

.knocker-ring {
  font-size: 1.5rem;
}

.music-notes {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-size: 1.5rem;
  color: var(--bourbon);
  opacity: 0.4;
  animation: pulse 3s ease-in-out infinite;
}

/* Main Header */
.main-header {
  background: linear-gradient(180deg, #1a1815 0%, #0f0d0a 100%);
  border-bottom: 3px solid var(--brass);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lamp-icon {
  font-size: 2rem;
}

.lamp-icon.flickering {
  animation: flicker 3s ease-in-out infinite;
}

.nameplate {
  text-align: center;
  flex: 1;
}

.nameplate h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--bourbon);
  font-weight: 700;
}

.nameplate p {
  font-family: 'Special Elite', cursive;
  font-size: 0.9rem;
  color: var(--sepia-dark);
  letter-spacing: 0.2em;
}

.badge {
  background: var(--brass);
  color: var(--noir-black);
  padding: 0.3rem 0.8rem;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 2px;
}

/* Main Content */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: calc(100vh - 200px);
}

/* Case Intake Form */
.desk-surface {
  background: linear-gradient(135deg, #3d3529 0%, #2a241c 100%);
  border-radius: 4px;
  padding: 2rem;
  box-shadow: 
    inset 0 2px 10px rgba(0,0,0,0.5),
    0 10px 40px rgba(0,0,0,0.5);
}

.case-intake-form {
  background: var(--aged-paper);
  color: var(--ink);
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 
    4px 4px 0 rgba(0,0,0,0.2),
    0 0 20px rgba(0,0,0,0.1);
  position: relative;
}

.case-intake-form::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(139, 90, 43, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.form-header {
  text-align: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.form-header h2 {
  font-family: 'Special Elite', cursive;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
}

.form-subtitle {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: 'Special Elite', cursive;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  font-family: 'Courier Prime', monospace;
  font-size: 1rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid #999;
  color: var(--ink);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--bourbon);
  box-shadow: 0 0 5px rgba(212, 168, 75, 0.3);
}

.form-section {
  background: rgba(0,0,0,0.05);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.form-section h3 {
  font-family: 'Special Elite', cursive;
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-group.half {
  flex: 1;
}

.evidence-section {
  margin-bottom: 1.5rem;
}

.evidence-toggle {
  background: none;
  border: none;
  font-family: 'Special Elite', cursive;
  font-size: 1rem;
  color: var(--blood-red);
  cursor: pointer;
  padding: 0.5rem 0;
  width: 100%;
  text-align: left;
}

.evidence-toggle:hover {
  color: var(--bourbon);
}

.evidence-fields {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0,0,0,0.03);
  animation: fadeIn 0.3s ease-out;
}

.submit-button {
  width: 100%;
  padding: 1.2rem;
  background: linear-gradient(135deg, var(--brass) 0%, #8a7a32 100%);
  border: none;
  color: var(--noir-black);
  font-family: 'Special Elite', cursive;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.1em;
}

.submit-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(181, 166, 66, 0.4);
}

.submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Interrogation Room */
.interrogation-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.interrogation-room {
  width: 100%;
  max-width: 800px;
}

.portraits-row {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2rem;
}

.portrait {
  transition: all 0.3s ease;
}

.portrait.speaking {
  transform: scale(1.1);
}

.portrait-frame {
  width: 100px;
  height: 120px;
  background: var(--aged-paper);
  border: 4px solid var(--brass);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}

.portrait-frame.malone {
  border-color: var(--bourbon);
}

.portrait-frame.barley {
  border-color: #6b8e6b;
}

.portrait-image {
  font-size: 3rem;
}

.portrait-name {
  font-family: 'Special Elite', cursive;
  font-size: 0.7rem;
  color: var(--ink);
  margin-top: 0.5rem;
}

.dialog-area {
  margin-bottom: 2rem;
}

.dialog-bubble {
  background: var(--aged-paper);
  color: var(--ink);
  padding: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
  animation: fadeIn 0.5s ease-out;
}

.dialog-bubble.malone {
  border-left: 4px solid var(--bourbon);
}

.dialog-bubble.barley {
  border-left: 4px solid #6b8e6b;
  font-style: italic;
}

.speaker-name {
  font-family: 'Special Elite', cursive;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--blood-red);
}

.dialog-text {
  font-family: 'Courier Prime', monospace;
  line-height: 1.6;
}

.cursor {
  animation: blink 0.7s infinite;
}

.response-options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.response-button {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 2px solid var(--brass);
  color: var(--sepia);
  font-family: 'Courier Prime', monospace;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.response-button:hover {
  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
  border-color: var(--bourbon);
  transform: translateX(5px);
}

.waiting-indicator {
  text-align: center;
  font-size: 2rem;
  color: var(--bourbon);
  animation: pulse 1s ease-in-out infinite;
}

/* Case File */
.casefile-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case-file {
  width: 100%;
  max-width: 700px;
}

.case-file-inner {
  background: var(--aged-paper);
  color: var(--ink);
  padding: 3rem;
  position: relative;
  box-shadow: 
    5px 5px 0 rgba(0,0,0,0.2),
    0 0 40px rgba(0,0,0,0.3);
  animation: fadeIn 0.5s ease-out;
}

.stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Special Elite', cursive;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border: 4px solid var(--blood-red);
  color: var(--blood-red);
  transform: rotate(-8deg);
  animation: stampSlam 0.5s ease-out;
}

.stamp.solved {
  background: rgba(139, 37, 0, 0.1);
}

.case-header {
  text-align: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.case-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--blood-red);
  margin-bottom: 1rem;
}

.case-meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-family: 'Courier Prime', monospace;
  font-size: 0.9rem;
  color: #666;
}

.case-section {
  margin-bottom: 2rem;
}

.case-section h2 {
  font-family: 'Special Elite', cursive;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  border-bottom: 1px solid #999;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.case-section p {
  font-family: 'Courier Prime', monospace;
  line-height: 1.7;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.evidence-item {
  font-family: 'Courier Prime', monospace;
  font-size: 0.9rem;
  padding: 0.3rem 0;
}

.suspects-list {
  list-style: none;
  padding: 0;
}

.suspects-list li {
  font-family: 'Courier Prime', monospace;
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.suspects-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--blood-red);
}

.verdict-text {
  font-style: italic;
  background: rgba(0,0,0,0.05);
  padding: 1rem;
}

.sentence-text {
  background: rgba(212, 168, 75, 0.1);
  padding: 1rem;
  border-left: 3px solid var(--bourbon);
}

.case-footer {
  text-align: right;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #999;
  font-family: 'Special Elite', cursive;
  font-style: italic;
}

.case-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.action-button {
  padding: 1rem 1.5rem;
  font-family: 'Special Elite', cursive;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid;
}

.action-button.print {
  background: var(--smoke-gray);
  border-color: var(--sepia);
  color: var(--sepia);
}

.action-button.new {
  background: var(--bourbon);
  border-color: var(--bourbon);
  color: var(--noir-black);
}

.action-button.appeal {
  background: transparent;
  border-color: var(--blood-red);
  color: var(--blood-red);
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Footer */
.main-footer {
  background: linear-gradient(180deg, #0f0d0a 0%, #1a1815 100%);
  border-top: 3px solid var(--brass);
  padding: 2rem;
  text-align: center;
  font-family: 'Special Elite', cursive;
}

.main-footer p {
  color: var(--sepia-dark);
  margin-bottom: 0.5rem;
}

.tagline {
  font-style: italic;
  color: var(--bourbon);
}

.berrry-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--bourbon);
  text-decoration: none;
  font-size: 0.8rem;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.berrry-link:hover {
  opacity: 1;
}

/* Print Styles */
@media print {
  .main-header,
  .main-footer,
  .case-actions,
  .film-grain,
  .venetian-shadows {
    display: none !important;
  }
  
  .case-file-inner {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  body {
    background: white;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .neon-text {
    font-size: 2rem;
  }
  
  .neon-subtitle {
    font-size: 0.9rem;
  }
  
  .header-content {
    flex-direction: column;
    text-align: center;
  }
  
  .badge {
    margin-top: 0.5rem;
  }
  
  .nameplate h1 {
    font-size: 1.4rem;
  }
  
  .main-content {
    padding: 1rem;
  }
  
  .desk-surface {
    padding: 1rem;
  }
  
  .case-intake-form {
    padding: 1.5rem;
  }
  
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .portraits-row {
    gap: 1.5rem;
  }
  
  .portrait-frame {
    width: 80px;
    height: 100px;
  }
  
  .portrait-image {
    font-size: 2.5rem;
  }
  
  .case-file-inner {
    padding: 1.5rem;
  }
  
  .case-title {
    font-size: 1.4rem;
  }
  
  .stamp {
    font-size: 1rem;
    top: 10px;
    right: 10px;
  }
  
  .case-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .case-actions {
    flex-direction: column;
  }
  
  .action-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .neon-sign {
    padding: 1.5rem 1rem;
  }
  
  .neon-text {
    font-size: 1.5rem;
  }
  
  .door-knocker {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }
}