/* Error state: a classified ritual warning, not a generic billboard. */
body[data-cathedral-state="error"] .world-overlay::after {
  content: none;
  display: none;
  animation: none;
}

.error-state-overlay {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.56rem;
  padding: 2rem;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(154, 22, 34, 0.025) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse at center, rgba(82, 8, 15, 0.12), transparent 48%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

body[data-cathedral-state="error"] .error-state-overlay {
  opacity: 1;
  visibility: visible;
  animation: error-state-arrival 520ms steps(5, end) both;
}

.error-state-overlay::before,
.error-state-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(28vw, 22rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 49, 59, 0.38));
}

.error-state-overlay::before { right: calc(50% + 13rem); }
.error-state-overlay::after { left: calc(50% + 13rem); transform: scaleX(-1); }

.error-state-overlay > span {
  color: rgba(177, 83, 85, 0.64);
  font: 700 0.48rem/1 "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.16em;
}

.error-state-overlay > strong {
  position: relative;
  color: rgba(227, 202, 188, 0.48);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(2.1rem, 4.2vw, 4.6rem);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-shadow: 0 0 1.8rem rgba(168, 27, 39, 0.3), 0 1px rgba(0, 0, 0, 0.86);
  white-space: nowrap;
}

.error-state-overlay > strong::before,
.error-state-overlay > strong::after {
  content: "";
  position: absolute;
  top: -0.45rem;
  bottom: -0.45rem;
  width: 0.38rem;
  border-top: 1px solid rgba(196, 64, 70, 0.54);
  border-bottom: 1px solid rgba(196, 64, 70, 0.54);
}

.error-state-overlay > strong::before { left: -1.1rem; border-left: 1px solid rgba(196, 64, 70, 0.54); }
.error-state-overlay > strong::after { right: -1.1rem; border-right: 1px solid rgba(196, 64, 70, 0.54); }

.error-state-overlay > small {
  color: rgba(159, 111, 93, 0.48);
  font: 650 0.42rem/1 "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.22em;
}

.error-state-overlay > i {
  width: 2.8rem;
  height: 1px;
  margin-top: 0.22rem;
  background: linear-gradient(90deg, transparent, rgba(188, 50, 60, 0.72), transparent);
  box-shadow: 0 0 0.5rem rgba(175, 36, 48, 0.24);
}

body .character-speech[data-variant="error"] {
  border-top-color: rgba(168, 55, 62, 0.58);
  border-right-color: rgba(192, 55, 65, 0.78);
  border-bottom-color: rgba(123, 33, 42, 0.62);
  border-left-color: #a83a43;
  background: linear-gradient(102deg, rgba(35, 8, 12, 0.97), rgba(12, 5, 7, 0.96) 62%, rgba(48, 8, 14, 0.94));
  box-shadow: -0.9rem 0.8rem 2rem rgba(0, 0, 0, 0.46), inset 1rem 0 1.4rem rgba(132, 35, 44, 0.045);
}

body .character-speech[data-variant="error"] header {
  border-right-color: rgba(176, 58, 63, 0.24);
  background: rgba(54, 11, 16, 0.44);
}

body .character-speech[data-variant="error"] header span {
  color: transparent;
  font-size: 0;
}

body .character-speech[data-variant="error"] header span::after {
  content: "Q1 // LINE SEVERED";
  color: rgba(201, 85, 88, 0.68);
  font: 700 0.4rem/1 "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.04em;
}

body .character-speech[data-variant="error"] header b {
  color: rgba(239, 218, 205, 0.88);
}

body .character-speech[data-variant="error"] #character-speech-text {
  color: rgba(244, 221, 211, 0.9);
  text-shadow: 0 0 0.5rem rgba(151, 38, 46, 0.18), 0 1px 0.18rem rgba(0, 0, 0, 0.78);
}

body .character-speech[data-variant="error"] .active-entity-card {
  --entity-glow: #a24a4f;
  opacity: 0.36;
  filter: grayscale(1) sepia(0.4) hue-rotate(304deg);
}

@keyframes error-state-arrival {
  0% { opacity: 0; transform: scaleY(0.02); filter: brightness(2); }
  34% { opacity: 0.88; transform: scaleY(1.04); }
  55% { opacity: 0.32; transform: translateX(-0.25rem); }
  72% { opacity: 0.82; transform: translateX(0.12rem); }
  100% { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 780px) {
  .error-state-overlay > strong { font-size: 1.65rem; letter-spacing: 0.1em; }
  .error-state-overlay::before { right: calc(50% + 8rem); }
  .error-state-overlay::after { left: calc(50% + 8rem); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-cathedral-state="error"] .error-state-overlay { animation: none; }
}