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

html, body {
  height: 100%;
  min-height: 100dvh;
  background: #0a0604;
  color: #c8b89a;
  font-family: Georgia, 'Times New Roman', serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============ STATE-DRIVEN SCREENS ============ */

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

.state-input #screen-input { display: flex; }
.state-deliberation #screen-deliberation { display: flex; }
.state-verdict #screen-verdict { display: flex; }

/* ============ EMBERS (CSS particles) ============ */

.embers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.embers::before, .embers::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: rise 8s infinite linear;
}

.embers::before {
  box-shadow:
    10vw 95vh 0 0 #e8531e,
    25vw 90vh 0 0 #ff8c00,
    40vw 85vh 0 0 #e8531e,
    55vw 92vh 0 0 #ff6a00,
    70vw 88vh 0 0 #d4a336,
    85vw 80vh 0 0 #e8531e,
    15vw 87vh 0 0 #ff8c00,
    60vw 95vh 0 0 #d4a336,
    90vw 91vh 0 0 #e8531e,
    35vw 83vh 0 0 #ff6a00;
}

.embers::after {
  animation-delay: -4s;
  box-shadow:
    5vw 92vh 0 0 #ff6a00,
    20vw 88vh 0 0 #e8531e,
    48vw 90vh 0 0 #ff8c00,
    65vw 85vh 0 0 #d4a336,
    78vw 93vh 0 0 #e8531e,
    30vw 96vh 0 0 #ff6a00,
    50vw 82vh 0 0 #e8531e,
    82vw 87vh 0 0 #ff8c00;
}

@keyframes rise {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  50%  { opacity: 0.6; }
  100% { transform: translateY(-110vh) scale(0); opacity: 0; }
}

/* ============ TORCHES ============ */

.torch {
  position: absolute;
  top: 8%;
  width: 8px;
  height: 70px;
  background: linear-gradient(to bottom, #8b6914, #5a3a1a);
  border-radius: 2px;
  z-index: 1;
}

.torch::before {
  content: '';
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 45px;
  background: radial-gradient(ellipse at bottom, #ff6a00 0%, #ffcc00 30%, #ff4500 60%, transparent 75%);
  border-radius: 50% 50% 20% 20%;
  animation: flicker 0.15s infinite alternate;
  filter: blur(1px);
}

.torch::after {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255,120,0,0.25), transparent 65%);
  animation: glow 2s infinite alternate ease-in-out;
}

.torch-left { left: 8%; }
.torch-right { right: 8%; }

@keyframes flicker {
  0%   { transform: translateX(-50%) scaleY(1) rotate(-3deg); opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1.15) rotate(3deg); opacity: 0.8; }
}

@keyframes glow {
  0%   { opacity: 0.3; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.6; transform: translateX(-50%) scale(1.2); }
}

/* ============ DELIBERATION FADE OUT ============ */

#screen-deliberation {
  transition: opacity 0.5s ease-out;
}

#screen-deliberation.fade-out {
  opacity: 0;
}

/* ============ SCREEN 1: INPUT ============ */

.input-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  max-width: 500px;
  width: 100%;
}

.title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 8vw, 3.5rem);
  text-align: center;
  color: #d4a336;
  text-shadow:
    0 0 10px rgba(232,83,30,0.5),
    0 0 30px rgba(232,83,30,0.3),
    0 0 60px rgba(232,83,30,0.1);
  letter-spacing: 0.1em;
  line-height: 1.15;
  margin-bottom: 0.3em;
}

.title-name {
  font-size: 1.3em;
  display: block;
  color: #fff;
  text-shadow:
    0 0 20px rgba(255,160,0,0.8),
    0 0 40px rgba(232,83,30,0.4),
    0 0 80px rgba(232,83,30,0.2);
}

.subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.6rem, 2.5vw, 0.85rem);
  letter-spacing: 0.3em;
  color: #a08050;
  margin-bottom: 0.2em;
}

.edition {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.7rem, 2.5vw, 0.9rem);
  letter-spacing: 0.2em;
  color: #e8531e;
  margin-bottom: 1.5em;
}

.intro {
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  text-align: center;
  line-height: 1.6;
  color: #c8b89a;
  margin-bottom: 1.5em;
}

#conseil-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#question {
  width: 100%;
  padding: 1rem;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  background: rgba(15, 10, 5, 0.8);
  border: 2px solid #5a3a1a;
  border-radius: 4px;
  color: #e8d5b0;
  resize: none;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#question::placeholder {
  color: #7a6040;
  font-style: italic;
}

#question:focus {
  border-color: #d4a336;
  box-shadow: 0 0 15px rgba(212,163,54,0.2), inset 0 0 10px rgba(0,0,0,0.5);
}

#btn-submit {
  background: linear-gradient(135deg, #5a2d0c, #8b4513);
  border: 2px solid #d4a336;
  color: #d4a336;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  padding: 1rem 1.5rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 0 15px rgba(212,163,54,0.2), inset 0 0 15px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

#btn-submit:hover {
  box-shadow: 0 0 25px rgba(232,83,30,0.4), inset 0 0 15px rgba(0,0,0,0.5);
  border-color: #e8531e;
  color: #fff;
}

#btn-submit:active {
  transform: scale(0.97);
  box-shadow: 0 0 35px rgba(232,83,30,0.6);
}

#btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-fire {
  font-size: 1.2em;
}

/* ============ SCREEN 2: DELIBERATION ============ */

#screen-deliberation {
  background: #000;
}

#deliberation-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.deliberation-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  background: rgba(0,0,0,0.55);
  border-radius: 8px;
  backdrop-filter: blur(2px);
  max-width: 90%;
}

.deliberation-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 7vw, 2.8rem);
  color: #d4a336;
  letter-spacing: 0.08em;
  animation: pulse-glow 1.5s ease-in-out infinite;
  margin-bottom: 0.8em;
}

.deliberation-subtitle {
  font-size: clamp(0.9rem, 3.5vw, 1.15rem);
  color: #c8b89a;
  font-style: italic;
  min-height: 1.5em;
  transition: opacity 0.4s ease;
}

@keyframes pulse-glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(232,83,30,0.5), 0 0 20px rgba(232,83,30,0.2);
  }
  50% {
    text-shadow: 0 0 30px rgba(232,83,30,0.9), 0 0 60px rgba(255,160,0,0.4), 0 0 90px rgba(232,83,30,0.2);
  }
}

/* ============ SCREEN 3: VERDICT ============ */

#screen-verdict {
  background: #0a0604;
  animation: verdict-fade-in 1.2s ease-out;
}

.verdict-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  max-width: 550px;
  width: 100%;
}

.verdict-torch-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.torch-mini {
  width: 4px;
  height: 30px;
  background: linear-gradient(to bottom, #8b6914, #5a3a1a);
  border-radius: 2px;
  position: relative;
}

.torch-mini::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 25px;
  background: radial-gradient(ellipse at bottom, #ff6a00 0%, #ffcc00 30%, transparent 70%);
  border-radius: 50% 50% 20% 20%;
  animation: flicker 0.15s infinite alternate;
  filter: blur(1px);
}

.verdict-header {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: #d4a336;
  letter-spacing: 0.1em;
  text-shadow: 0 0 15px rgba(232,83,30,0.5);
}

.verdict-question {
  font-style: italic;
  color: #7a6040;
  font-size: clamp(0.85rem, 3vw, 1rem);
  margin: 0.5em 0 1em;
  text-align: center;
}

.verdict-question::before { content: '« '; }
.verdict-question::after { content: ' »'; }

.verdict-scroll {
  background: linear-gradient(160deg, #1a1008, #0d0905);
  border: 2px solid #5a3a1a;
  border-radius: 4px;
  padding: 1.5rem;
  margin: 0 0.5rem;
  width: 100%;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8),
    0 0 20px rgba(212,163,54,0.1);
  animation: verdict-scroll-in 1.5s ease-out;
  overflow-y: auto;
  max-height: 50vh;
}

.verdict-text {
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  line-height: 1.8;
  color: #e8d5b0;
  white-space: pre-line;
}

@keyframes verdict-fade-in {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes verdict-scroll-in {
  0%   { opacity: 0; transform: scale(0.92); filter: brightness(3); }
  40%  { opacity: 1; filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

.btn-again {
  margin-top: 1.5rem;
  background: transparent;
  border: 1px solid #5a3a1a;
  color: #a08050;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.7rem, 2.5vw, 0.8rem);
  padding: 0.8rem 1.5rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-again:hover {
  border-color: #d4a336;
  color: #d4a336;
  box-shadow: 0 0 10px rgba(212,163,54,0.2);
}

/* ============ SCREEN SHAKE (verdict drama) ============ */

@keyframes screen-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px) rotate(-0.5deg); }
  20% { transform: translateX(4px) rotate(0.5deg); }
  30% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.shake {
  animation: screen-shake 0.6s ease-out;
}

/* ============ RESPONSIVE ============ */

@media (min-width: 768px) {
  .torch-left { left: 15%; }
  .torch-right { right: 15%; }
  .torch { height: 90px; width: 10px; }
}