:root {
  color-scheme: dark;
  --ink: #fff3cf;
  --muted: #ffd98a;
  --shadow: #1b1026;
  --bg: #17112b;
  --cabinet: #2d1f52;
  --panel: #3c2b6f;
  --panel-dark: #23183f;
  --line: #080611;
  --yellow: #ffd84d;
  --orange: #ff9f3d;
  --green: #63e672;
  --red: #ff5c70;
  --blue: #54c7ff;
  --pink: #ff7bd8;
  --skin: #d99b65;
  --robe: #f5ead0;
  --disciple-robe: #58a6ff;
  --pixel: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: "Courier New", ui-monospace, monospace;
  color: var(--ink);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.035) 75%) 0 0 / 16px 16px,
    #10101f;
  image-rendering: pixelated;
}

button,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.game-screen {
  width: min(1440px, 100vw);
  height: 100vh;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-rows: 86px 66px minmax(180px, 29vh) minmax(250px, 1fr);
  gap: 8px;
  background: linear-gradient(180deg, #33245f, #17112b);
  border-left: var(--pixel) solid var(--line);
  border-right: var(--pixel) solid var(--line);
}

.hud,
.meters,
.playfield,
.encounter,
.pixel-panel,
.modal-card {
  border: var(--pixel) solid var(--line);
  box-shadow:
    inset calc(var(--pixel) * -1) calc(var(--pixel) * -1) 0 rgba(0, 0, 0, 0.35),
    inset var(--pixel) var(--pixel) 0 rgba(255, 255, 255, 0.12);
}

.hud {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.5fr) 104px;
  gap: 8px;
  padding: 8px;
  background: var(--cabinet);
}

.title-lockup {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cross-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--pixel) solid var(--line);
  background: var(--yellow);
  color: var(--line);
  font-size: 2rem;
  font-weight: 900;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--yellow);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.05rem, 2.4vw, 1.9rem);
  line-height: 1;
  text-shadow: 3px 3px 0 var(--line);
}

h2 {
  font-size: clamp(1.25rem, 2.7vw, 2.2rem);
  line-height: 1;
  text-shadow: 3px 3px 0 var(--line);
}

.disciple-card {
  min-width: 0;
  padding: 8px;
  background: var(--panel-dark);
  border: var(--pixel) solid var(--line);
}

#discipleTagline {
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(0.7rem, 1.15vw, 0.92rem);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-button {
  display: grid;
  place-items: center;
  padding: 4px;
  border: var(--pixel) solid var(--line);
  background: var(--yellow);
  color: var(--line);
  box-shadow: inset -4px -4px 0 var(--orange);
  font-weight: 900;
}

.timer-button span {
  font-size: 2.15rem;
  line-height: 1;
}

.timer-button small {
  font-size: 0.68rem;
  line-height: 1;
}

.timer-button.ready {
  animation: blink 900ms steps(2, end) infinite;
}

.timer-button.danger {
  background: var(--red);
  color: #fff;
  box-shadow: inset -4px -4px 0 #9b2235;
}

.meters {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px minmax(360px, 1.35fr) 104px;
  gap: 8px;
  padding: 8px;
  background: #21183e;
}

.meter-card {
  min-width: 0;
  padding: 8px;
  border: var(--pixel) solid var(--line);
  background: var(--panel);
}

.meter-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.meter-card strong {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.15rem;
}

.conviction-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
}

.meter {
  height: 18px;
  border: var(--pixel) solid var(--line);
  background: #160f28;
}

.meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--green));
  transition: width 160ms steps(8, end);
}

.progress-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
}

.disciple-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin: 0;
  padding: 0;
}

.disciple-track li {
  height: 18px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #140d24;
  color: transparent;
}

.disciple-track li.current {
  background: var(--yellow);
}

.disciple-track li.complete {
  background: var(--green);
}

.secondary-button,
.miracle-button,
.composer button,
.modal-card button {
  min-height: 42px;
  border: var(--pixel) solid var(--line);
  background: var(--blue);
  color: var(--line);
  box-shadow: inset -4px -4px 0 #2179a6;
  font-weight: 900;
  text-transform: uppercase;
}

.miracle-button {
  background: var(--pink);
  box-shadow: inset -4px -4px 0 #a63488;
}

.secondary-button:hover,
.miracle-button:hover,
.composer button:hover,
.modal-card button:hover,
.timer-button:hover {
  transform: translateY(-1px);
}

.secondary-button:disabled,
.miracle-button:disabled,
.composer button:disabled,
.timer-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.65);
  opacity: 0.62;
  transform: none;
}

.playfield {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(#10101f 0 0) padding-box;
}

.elevator {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49%, rgba(0, 0, 0, 0.24) 50%, transparent 51%),
    repeating-linear-gradient(90deg, #616b7a 0 34px, #525a69 34px 38px);
}

.elevator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  background: repeating-linear-gradient(90deg, #3a4050 0 24px, #2c3140 24px 48px);
  border-top: var(--pixel) solid var(--line);
}

.floor-display {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 4px 14px;
  border: var(--pixel) solid var(--line);
  background: #161015;
  color: var(--green);
  font-weight: 900;
}

.elevator-doors {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49%, var(--line) 49% 51%, transparent 51%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 4px, transparent 4px 20px);
}

.sprite-wrap {
  position: absolute;
  bottom: 24px;
  z-index: 3;
  width: 132px;
  height: 170px;
  margin: 0;
  display: grid;
  justify-items: center;
}

.jesus-wrap {
  left: 24%;
}

.disciple-wrap {
  right: 24%;
}

.sprite-wrap figcaption {
  align-self: end;
  padding: 2px 6px;
  border: 2px solid var(--line);
  background: var(--yellow);
  color: var(--line);
  font-size: 0.72rem;
  font-weight: 900;
}

.sprite {
  position: relative;
  width: 96px;
  height: 138px;
}

.sprite span {
  position: absolute;
  display: block;
}

.halo {
  left: 22px;
  top: 0;
  width: 52px;
  height: 16px;
  border: 5px solid var(--yellow);
  background: transparent;
}

.head {
  left: 26px;
  top: 28px;
  width: 44px;
  height: 40px;
  background: var(--skin);
  border: var(--pixel) solid var(--line);
}

.hair {
  left: 20px;
  top: 22px;
  width: 56px;
  height: 24px;
  background: #4b2d22;
  border: var(--pixel) solid var(--line);
}

.eye {
  top: 44px;
  width: 6px;
  height: 6px;
  background: var(--line);
  z-index: 2;
}

.eye.left {
  left: 38px;
}

.eye.right {
  left: 54px;
}

.mouth {
  left: 40px;
  top: 58px;
  width: 18px;
  height: 5px;
  background: var(--line);
  z-index: 2;
}

.sprite.smiling .mouth {
  top: 56px;
  height: 10px;
  border-bottom: 5px solid var(--line);
  background: transparent;
}

.sprite.frowning .mouth {
  top: 61px;
  height: 10px;
  border-top: 5px solid var(--line);
  background: transparent;
}

.robe {
  left: 20px;
  top: 70px;
  width: 56px;
  height: 50px;
  background: var(--robe);
  border: var(--pixel) solid var(--line);
}

.disciple .robe {
  background: var(--disciple-robe);
}

.sash {
  left: 45px;
  top: 70px;
  width: 10px;
  height: 54px;
  background: #d54b4b;
  border-left: 2px solid var(--line);
  border-right: 2px solid var(--line);
}

.disciple .sash {
  background: var(--yellow);
}

.arm {
  top: 78px;
  width: 18px;
  height: 42px;
  background: var(--skin);
  border: var(--pixel) solid var(--line);
}

.arm.left {
  left: 4px;
  transform: rotate(8deg);
}

.arm.right {
  right: 4px;
  transform: rotate(-8deg);
}

.leg {
  top: 118px;
  width: 20px;
  height: 18px;
  background: #3c2b22;
  border: var(--pixel) solid var(--line);
}

.leg.left {
  left: 25px;
}

.leg.right {
  right: 25px;
}

.encounter {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(300px, 1.25fr);
  grid-template-rows: minmax(0, 1fr) 84px;
  gap: 8px;
  padding: 8px;
  background: #1f1738;
}

.pixel-panel {
  min-height: 0;
  overflow: hidden;
  padding: 10px;
  background: var(--panel-dark);
}

.panel-title {
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.dossier-grid div {
  min-height: 54px;
  padding: 6px;
  border: 2px solid var(--line);
  background: #181128;
}

.dossier-grid dt {
  color: var(--orange);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dossier-grid dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  line-height: 1.18;
}

#dossierNote {
  margin-top: 8px;
  color: var(--muted);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  line-height: 1.2;
}

.hint-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.hint-list span {
  padding: 3px 6px;
  border: 2px solid var(--line);
  background: var(--green);
  color: var(--line);
  font-size: 0.68rem;
  font-weight: 900;
}

.chat-log {
  height: calc(100% - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.message {
  padding: 7px;
  border: 2px solid var(--line);
  background: #171024;
  color: var(--ink);
  font-size: clamp(0.7rem, 1.05vw, 0.88rem);
  line-height: 1.22;
}

.message strong {
  display: inline;
  margin-right: 6px;
  color: var(--yellow);
  text-transform: uppercase;
}

.message.player {
  background: #32304f;
}

.message.disciple {
  background: #17334e;
}

.message.system {
  background: #213d28;
}

.composer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 130px 118px;
  gap: 8px;
}

textarea {
  width: 100%;
  min-height: 0;
  height: 84px;
  resize: none;
  border: var(--pixel) solid var(--line);
  padding: 10px;
  outline: none;
  color: var(--ink);
  background: #120d20;
  box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.35);
  line-height: 1.25;
}

textarea:focus {
  border-color: var(--yellow);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 16, 31, 0.84);
}

.modal[hidden] {
  display: none;
}

.modal-card {
  width: min(560px, 100%);
  padding: 24px;
  background: var(--panel);
}

.modal-card p {
  margin: 12px 0 18px;
  color: var(--muted);
  line-height: 1.35;
}

.start-card {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: clamp(16px, 2vw, 26px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(84, 199, 255, 0.12), transparent 36%),
    linear-gradient(225deg, rgba(255, 92, 112, 0.14), transparent 42%),
    var(--panel);
}

.start-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: var(--pixel) solid var(--line);
}

.start-hero .eyebrow {
  color: var(--yellow);
}

.start-hero h2 {
  position: relative;
  display: inline-grid;
  margin: 0;
  color: var(--yellow);
  line-height: 0.78;
  text-transform: uppercase;
  text-shadow:
    4px 4px 0 #080611,
    8px 8px 0 #ff5c70,
    12px 12px 0 #54c7ff;
  transform: skew(-8deg);
}

.start-hero h2 span {
  font-size: clamp(1.45rem, 5vw, 3.8rem);
}

.start-hero h2 strong {
  color: var(--green);
  font-size: clamp(1.65rem, 5.8vw, 4.4rem);
}

.start-subtitle {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--ink);
  font-size: clamp(0.78rem, 1.6vw, 1rem);
}

.start-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.start-panel {
  min-height: 0;
  padding: 12px;
  border: 3px solid var(--line);
  background: rgba(18, 13, 32, 0.88);
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, 0.32),
    inset 4px 4px 0 rgba(255, 255, 255, 0.08);
}

.premise-panel {
  display: grid;
  align-content: center;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 8px),
    rgba(18, 13, 32, 0.92);
}

.start-kicker {
  display: inline-block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 3px 7px;
  border: 2px solid var(--line);
  background: var(--yellow);
  color: var(--line);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.start-panel h3 {
  margin: 0 0 8px;
  color: var(--green);
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  line-height: 1;
  text-transform: uppercase;
}

.start-panel p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(0.7rem, 1.25vw, 0.88rem);
  line-height: 1.28;
}

.rules-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: clamp(0.68rem, 1.18vw, 0.84rem);
  line-height: 1.25;
}

.rules-list li + li {
  margin-top: 4px;
}

.miracle-pips {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
}

.miracle-pips span {
  width: 22px;
  height: 22px;
  border: 3px solid var(--line);
  background: var(--green);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.start-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 12px;
  align-items: stretch;
}

.start-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.start-stats span {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 6px;
  border: 3px solid var(--line);
  background: #181128;
  color: var(--yellow);
  font-size: clamp(0.64rem, 1.15vw, 0.82rem);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.start-card #playButton {
  min-height: 50px;
  border: var(--pixel) solid var(--line);
  background: var(--green);
  color: var(--line);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 900;
  text-transform: uppercase;
  box-shadow:
    inset -5px -5px 0 rgba(0, 0, 0, 0.25),
    inset 5px 5px 0 rgba(255, 255, 255, 0.28);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes blink {
  50% {
    filter: brightness(1.35);
  }
}

@media (max-width: 980px), (max-height: 680px) {
  .game-screen {
    grid-template-rows: 74px 58px minmax(140px, 25vh) minmax(230px, 1fr);
    gap: 6px;
    padding: 6px;
  }

  .hud {
    grid-template-columns: 210px minmax(220px, 1fr) 86px;
    padding: 6px;
  }

  .cross-mark {
    width: 38px;
    height: 38px;
    font-size: 1.55rem;
  }

  .title-lockup {
    grid-template-columns: 38px 1fr;
  }

  .timer-button span {
    font-size: 1.75rem;
  }

  .meters {
    grid-template-columns: minmax(180px, 1fr) 118px minmax(220px, 1.2fr) 88px;
    padding: 6px;
  }

  .sprite-wrap {
    transform: scale(0.78);
    transform-origin: bottom center;
  }

  .jesus-wrap {
    left: 17%;
  }

  .disciple-wrap {
    right: 17%;
  }

  .encounter {
    padding: 6px;
    gap: 6px;
    grid-template-rows: minmax(0, 1fr) 72px;
  }

  textarea {
    height: 72px;
  }

  .start-card {
    gap: 9px;
    padding: 12px;
  }

  .start-hero {
    padding-bottom: 8px;
  }

  .start-subtitle {
    margin-top: 10px;
    line-height: 1.25;
  }

  .start-layout {
    gap: 7px;
  }

  .start-panel {
    padding: 8px;
  }

  .start-panel p,
  .rules-list {
    line-height: 1.22;
  }

  .start-kicker {
    margin-bottom: 5px;
  }

  .start-cta {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 8px;
  }

  .start-stats {
    gap: 6px;
  }

  .start-stats span,
  .start-card #playButton {
    min-height: 42px;
  }
}

.game-logo {
  position: relative;
  display: inline-grid;
  gap: 0;
  line-height: 0.82;
  text-transform: uppercase;
  transform: skew(-8deg);
}

.game-logo span {
  color: #fff;
  font-size: clamp(0.9rem, 1.9vw, 1.45rem);
  text-shadow:
    3px 3px 0 var(--line),
    5px 5px 0 #c11d73;
}

.game-logo strong {
  display: block;
  color: var(--yellow);
  font-size: clamp(1.35rem, 3.25vw, 2.65rem);
  text-shadow:
    3px 3px 0 var(--line),
    6px 6px 0 #e23b3b,
    9px 9px 0 #256dff;
}

.playfield {
  background:
    radial-gradient(circle at 50% 0, rgba(255, 216, 77, 0.18), transparent 32%),
    #080611;
}

.cutscene-stage {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}

.portrait-screen {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: var(--pixel) solid var(--line);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #102944, #321847 54%, #0a0614);
  box-shadow:
    inset -6px -6px 0 rgba(0, 0, 0, 0.38),
    inset 6px 6px 0 rgba(255, 255, 255, 0.09);
}

.disciple-screen {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #3d1625, #182b4f 58%, #0a0614);
}

.screen-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  padding: 3px 7px;
  border: 2px solid var(--line);
  background: var(--yellow);
  color: var(--line);
  font-size: 0.68rem;
  font-weight: 900;
}

.screen-caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  min-height: 24px;
  padding: 5px 7px;
  border: 2px solid var(--line);
  background: rgba(8, 6, 17, 0.88);
  color: var(--ink);
  font-size: clamp(0.68rem, 1vw, 0.86rem);
  font-weight: 900;
  text-transform: uppercase;
}

.mega-face {
  --face-skin: var(--skin);
  --face-hair: #4b2d22;
  position: absolute;
  left: 50%;
  top: 51%;
  width: 230px;
  height: 190px;
  transform: translate(-50%, -50%) scale(1.05);
}

.mega-face span {
  position: absolute;
  display: block;
}

.mega-face .head {
  left: 38px;
  top: 34px;
  width: 154px;
  height: 124px;
  border: 6px solid var(--line);
  background: var(--face-skin);
  box-shadow:
    inset -16px -16px 0 rgba(95, 52, 37, 0.24),
    8px 8px 0 rgba(0, 0, 0, 0.35);
}

.mega-face .hair {
  left: 30px;
  top: 16px;
  width: 170px;
  height: 54px;
  border: 6px solid var(--line);
  background: var(--face-hair);
  box-shadow: inset -14px -10px 0 rgba(0, 0, 0, 0.28);
}

.mega-face .halo {
  left: 62px;
  top: -2px;
  width: 106px;
  height: 24px;
  border: 7px solid var(--yellow);
  box-shadow: 0 0 0 4px var(--line);
}

.mega-face .brow {
  top: 76px;
  width: 45px;
  height: 8px;
  background: var(--line);
  z-index: 2;
}

.mega-face .brow.left {
  left: 67px;
}

.mega-face .brow.right {
  right: 67px;
}

.mega-face .eye {
  top: 92px;
  width: 22px;
  height: 24px;
  border: 5px solid var(--line);
  background: #fff7e0;
  z-index: 2;
}

.mega-face .eye::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--line);
}

.mega-face .eye.left {
  left: 78px;
}

.mega-face .eye.right {
  right: 78px;
}

.mega-face .nose {
  left: 108px;
  top: 102px;
  width: 16px;
  height: 28px;
  border-right: 5px solid #7c4a35;
  border-bottom: 5px solid #7c4a35;
  z-index: 2;
}

.mega-face .mouth {
  left: 84px;
  top: 139px;
  width: 64px;
  height: 12px;
  background: var(--line);
  z-index: 3;
}

.mega-face .beard {
  left: 58px;
  top: 128px;
  width: 114px;
  height: 44px;
  border: 6px solid var(--line);
  background: #593326;
  z-index: 1;
}

.disciple-face {
  --face-hair: #332018;
}

.jesus-face.calm .brow.left {
  transform: rotate(-4deg);
}

.jesus-face.calm .brow.right {
  transform: rotate(4deg);
}

.jesus-face.calm .mouth {
  height: 10px;
  background: var(--line);
}

.jesus-face.thinking {
  animation: thinkBob 420ms steps(2, end) infinite;
}

.jesus-face.thinking .brow.left {
  transform: rotate(13deg);
}

.jesus-face.thinking .brow.right {
  transform: rotate(-13deg);
}

.jesus-face.thinking .mouth {
  left: 96px;
  width: 40px;
  height: 22px;
  border: 6px solid var(--line);
  background: #321018;
}

.sweat {
  width: 14px;
  height: 22px;
  border: 4px solid var(--line);
  background: var(--blue);
  opacity: 0;
  z-index: 5;
}

.sweat.one {
  right: 36px;
  top: 60px;
}

.sweat.two {
  left: 34px;
  top: 88px;
}

.sweat.three {
  right: 52px;
  top: 124px;
}

.thinking .sweat,
.awe .sweat {
  opacity: 1;
  animation: sweatDrop 680ms steps(3, end) infinite;
}

.thinking .sweat.two,
.awe .sweat.two {
  animation-delay: 160ms;
}

.thinking .sweat.three,
.awe .sweat.three {
  animation-delay: 320ms;
}

.disciple-face.happy .brow.left,
.disciple-face.happy .brow.right {
  transform: rotate(0deg);
}

.disciple-face.happy .eye {
  height: 12px;
  top: 100px;
  background: var(--line);
}

.disciple-face.happy .eye::after {
  display: none;
}

.disciple-face.happy .mouth {
  top: 128px;
  height: 34px;
  border: 6px solid var(--line);
  background: #fff7e0;
}

.disciple-face.skeptical .brow.left {
  transform: rotate(13deg);
}

.disciple-face.skeptical .brow.right {
  transform: rotate(-10deg);
}

.disciple-face.skeptical .mouth {
  left: 92px;
  width: 48px;
}

.disciple-face.mad {
  animation: madShake 220ms steps(2, end) infinite;
}

.disciple-face.mad .head {
  background: #e07055;
}

.disciple-face.mad .brow.left {
  transform: rotate(24deg);
}

.disciple-face.mad .brow.right {
  transform: rotate(-24deg);
}

.disciple-face.mad .eye {
  background: #ffd9d9;
}

.disciple-face.mad .mouth {
  left: 90px;
  top: 132px;
  width: 54px;
  height: 26px;
  border: 6px solid var(--line);
  background: #3b0710;
}

.disciple-face.inquisitive .brow.left {
  transform: rotate(-18deg);
}

.disciple-face.inquisitive .brow.right {
  transform: rotate(-18deg);
}

.disciple-face.inquisitive .eye.right {
  top: 86px;
}

.disciple-face.inquisitive .mouth {
  left: 102px;
  width: 28px;
  height: 24px;
  border: 6px solid var(--line);
  background: #fff7e0;
}

.disciple-face.awe {
  animation: awePulse 500ms steps(2, end) infinite;
}

.disciple-face.awe .head {
  background: #f0b27a;
}

.disciple-face.awe .brow.left {
  transform: rotate(-20deg);
}

.disciple-face.awe .brow.right {
  transform: rotate(20deg);
}

.disciple-face.awe .eye {
  top: 84px;
  width: 30px;
  height: 34px;
}

.disciple-face.awe .mouth {
  left: 98px;
  top: 130px;
  width: 34px;
  height: 34px;
  border: 6px solid var(--line);
  background: #1b1026;
}

.jesus-screen.miracle-mode .jesus-face {
  display: none;
}

.miracle-scene {
  position: absolute;
  inset: 0;
  display: none;
  background: linear-gradient(#17365c, #0a0614);
}

.jesus-screen.miracle-mode .miracle-scene {
  display: block;
}

.miracle-scene span {
  position: absolute;
  display: block;
}

.miracle-scene .sun {
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  border: 5px solid var(--line);
  background: var(--yellow);
}

.mini-jesus {
  left: 50%;
  bottom: 52px;
  width: 34px;
  height: 72px;
  transform: translateX(-50%);
  border: 5px solid var(--line);
  background: var(--robe);
  box-shadow:
    0 -24px 0 -5px var(--skin),
    0 -30px 0 -1px var(--line),
    0 -48px 0 -13px var(--yellow);
  z-index: 3;
}

.wave {
  left: 0;
  right: 0;
  height: 18px;
  border-top: 5px solid var(--line);
  background: var(--blue);
  animation: waves 520ms steps(3, end) infinite;
}

.wave.one {
  bottom: 35px;
}

.wave.two {
  bottom: 14px;
  animation-delay: 160ms;
}

.jar {
  display: none;
  bottom: 44px;
  width: 42px;
  height: 62px;
  border: 5px solid var(--line);
  background: #d7b381;
}

.jar.one {
  left: 28%;
}

.jar.two {
  right: 28%;
}

.spirit {
  display: none;
  left: 58%;
  top: 32px;
  width: 70px;
  height: 78px;
  border: 5px solid var(--line);
  background: #d9e7ff;
  transform: skew(-8deg);
  animation: spiritShake 180ms steps(2, end) infinite;
}

.spark {
  width: 24px;
  height: 24px;
  background: var(--yellow);
  border: 4px solid var(--line);
  animation: blink 240ms steps(2, end) infinite;
}

.spark.one {
  left: 22%;
  top: 28px;
}

.spark.two {
  right: 20%;
  top: 92px;
}

.miracle-scene.wine {
  background: linear-gradient(#3b174c, #1c0c29);
}

.miracle-scene.wine .wave,
.miracle-scene.wine .sun {
  display: none;
}

.miracle-scene.wine .jar {
  display: block;
}

.miracle-scene.wine .jar::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 26px;
  background: #9e1038;
}

.miracle-scene.exorcism {
  background: linear-gradient(#15151e, #35121b);
}

.miracle-scene.exorcism .wave,
.miracle-scene.exorcism .sun,
.miracle-scene.exorcism .jar {
  display: none;
}

.miracle-scene.exorcism .spirit {
  display: block;
}

@keyframes thinkBob {
  50% {
    transform: translate(-50%, -52%) scale(1.05);
  }
}

@keyframes sweatDrop {
  50% {
    transform: translateY(10px);
  }
}

@keyframes madShake {
  50% {
    transform: translate(-51%, -50%) scale(1.05);
  }
}

@keyframes awePulse {
  50% {
    filter: brightness(1.25);
  }
}

@keyframes waves {
  50% {
    transform: translateX(12px);
  }
}

@keyframes spiritShake {
  50% {
    transform: translateX(-10px) skew(8deg);
  }
}

@media (max-width: 980px), (max-height: 680px) {
  .mega-face {
    transform: translate(-50%, -50%) scale(0.78);
  }
}

/* Anime cutscene pass: sharp, saturated, late-arcade drama. */
.hud {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(#161116, #080611);
}

.title-lockup {
  grid-template-columns: 34px 1fr;
}

.cross-mark {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #f7f7f7, #8a8d93 42%, #f7f7f7 58%, #292d35);
  color: #07060b;
  font-size: 1.45rem;
  box-shadow:
    inset -3px -3px 0 #30333d,
    inset 3px 3px 0 #ffffff;
}

.game-logo {
  position: relative;
  width: 190px;
  height: 52px;
  display: block;
  transform: skew(-13deg);
  filter: drop-shadow(4px 5px 0 #000);
}

.game-logo span,
.game-logo strong {
  position: absolute;
  left: 42px;
  z-index: 2;
  display: block;
  letter-spacing: -1px;
  line-height: 0.82;
  text-transform: uppercase;
}

.game-logo span {
  top: 0;
  color: #e9edf7;
  font-size: 1.32rem;
  text-shadow:
    2px 0 0 #3d424d,
    -2px 0 0 #ffffff,
    0 3px 0 #060508,
    3px 5px 0 #581ca8;
}

.game-logo strong {
  top: 22px;
  color: #ccff35;
  font-size: 1.56rem;
  text-shadow:
    2px 0 0 #fbfff0,
    0 3px 0 #191a12,
    4px 5px 0 #8b1235;
}

.logo-wing {
  position: absolute;
  z-index: 1;
  height: 16px;
  border: 3px solid #07060b;
  background:
    linear-gradient(90deg, #ffffff, #a6acb9 35%, #363b48 36% 56%, #f7f7f7 58%, #737987);
  clip-path: polygon(0 55%, 78% 0, 100% 20%, 42% 76%, 100% 100%, 72% 100%);
}

.logo-wing.left {
  left: 0;
  top: 4px;
  width: 92px;
}

.logo-wing.right {
  right: 0;
  bottom: 6px;
  width: 112px;
  transform: scaleX(-1);
}

.portrait-screen {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 34%, rgba(255, 241, 113, 0.2), transparent 24%),
    linear-gradient(135deg, #e63f1f 0 42%, #70114f 43% 64%, #0c0a16 65%);
}

.disciple-screen {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 52% 32%, rgba(84, 199, 255, 0.18), transparent 26%),
    linear-gradient(135deg, #14214e 0 40%, #7d1037 41% 64%, #0c0a16 65%);
}

.portrait-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.14) 12% 13%, transparent 13% 72%, rgba(0, 0, 0, 0.3) 72% 100%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 18%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.mega-face {
  --face-skin: #b9aa78;
  --face-shadow: #5a513e;
  --face-hair: #063f3f;
  width: 280px;
  height: 220px;
  top: 54%;
  transform: translate(-50%, -50%) scale(1.05);
}

.mega-face .head {
  left: 74px;
  top: 42px;
  width: 122px;
  height: 132px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(21, 19, 18, 0.48) 0 23%, transparent 24%),
    linear-gradient(135deg, #f0d394 0 34%, var(--face-skin) 35% 70%, var(--face-shadow) 71%);
  clip-path: polygon(23% 4%, 78% 0, 96% 26%, 86% 78%, 55% 100%, 22% 84%, 7% 34%);
  box-shadow:
    0 0 0 6px var(--line),
    12px 10px 0 rgba(0, 0, 0, 0.45);
}

.mega-face .hair {
  left: 48px;
  top: -22px;
  width: 178px;
  height: 120px;
  border: 0;
  background:
    repeating-linear-gradient(90deg, #021d22 0 9px, #17a78e 9px 15px, #063f3f 15px 23px),
    #063f3f;
  clip-path: polygon(36% 0, 64% 0, 75% 58%, 92% 72%, 82% 92%, 61% 76%, 51% 100%, 41% 76%, 18% 94%, 10% 74%, 27% 56%);
  box-shadow:
    0 0 0 6px var(--line),
    inset -18px -8px 0 rgba(0, 0, 0, 0.42);
}

.jesus-face .hair {
  left: 28px;
  top: 10px;
  width: 220px;
  height: 150px;
  background:
    repeating-linear-gradient(90deg, #271810 0 12px, #7b4a25 12px 19px, #1d120c 19px 28px);
  clip-path: polygon(18% 8%, 82% 6%, 96% 30%, 90% 92%, 70% 100%, 60% 54%, 50% 100%, 38% 54%, 27% 100%, 8% 92%, 2% 30%);
}

.mega-face .halo {
  left: 72px;
  top: 2px;
  width: 136px;
  height: 20px;
  border: 0;
  background: linear-gradient(90deg, #fff7af, #ffbf2f, #fff7af);
  clip-path: polygon(0 38%, 85% 0, 100% 34%, 15% 100%);
  box-shadow:
    0 0 0 4px var(--line),
    0 0 18px #ffea57;
}

.mega-face .brow {
  top: 95px;
  width: 48px;
  height: 10px;
  z-index: 4;
  background: #110d11;
}

.mega-face .brow.left {
  left: 90px;
}

.mega-face .brow.right {
  right: 90px;
}

.mega-face .eye {
  top: 106px;
  width: 36px;
  height: 21px;
  border: 0;
  background: #fbf7db;
  z-index: 3;
  clip-path: polygon(0 44%, 28% 0, 100% 28%, 78% 86%, 20% 100%);
  box-shadow:
    0 0 0 5px var(--line),
    inset 21px 0 0 #d92757;
}

.mega-face .eye::after {
  left: 21px;
  top: 5px;
  width: 8px;
  height: 8px;
  background: #ff315f;
  box-shadow: 0 0 8px #ff315f;
}

.mega-face .eye.left {
  left: 96px;
}

.mega-face .eye.right {
  right: 96px;
  transform: scaleX(-1);
}

.jesus-face .eye {
  box-shadow:
    0 0 0 5px var(--line),
    inset 21px 0 0 #214b75;
}

.jesus-face .eye::after {
  background: #2ec9ff;
  box-shadow: 0 0 8px #2ec9ff;
}

.mega-face .nose {
  left: 137px;
  top: 118px;
  width: 22px;
  height: 34px;
  border-right: 5px solid #383124;
  border-bottom: 5px solid #383124;
  z-index: 4;
  transform: skew(-12deg);
}

.mega-face .beard {
  left: 80px;
  top: 144px;
  width: 128px;
  height: 62px;
  border: 0;
  background: linear-gradient(135deg, #151017, #321b18 54%, #080611);
  clip-path: polygon(8% 0, 92% 0, 80% 64%, 52% 100%, 22% 66%);
  box-shadow: 0 0 0 6px var(--line);
}

.disciple-face .beard {
  background: linear-gradient(135deg, #160d0a, #422316 58%, #080611);
}

.mega-face .mouth {
  left: 116px;
  top: 158px;
  width: 54px;
  height: 10px;
  background: #080611;
  z-index: 5;
}

.jesus-face.calm .mouth {
  left: 120px;
  top: 156px;
  width: 48px;
  height: 8px;
  background: #080611;
}

.jesus-face.thinking .mouth {
  left: 122px;
  top: 154px;
  width: 42px;
  height: 22px;
  border: 5px solid var(--line);
  background: #271019;
  clip-path: polygon(12% 0, 88% 0, 100% 76%, 50% 100%, 0 76%);
}

.jesus-face.thinking .brow.left {
  transform: rotate(17deg);
}

.jesus-face.thinking .brow.right {
  transform: rotate(-17deg);
}

.sweat {
  width: 13px;
  height: 24px;
  border: 3px solid var(--line);
  background: #54c7ff;
  clip-path: polygon(50% 0, 100% 58%, 50% 100%, 0 58%);
}

.sweat.one {
  right: 42px;
  top: 76px;
}

.sweat.two {
  left: 48px;
  top: 104px;
}

.sweat.three {
  right: 64px;
  top: 142px;
}

.disciple-face.happy .eye {
  top: 111px;
  height: 10px;
  background: #080611;
  clip-path: polygon(0 50%, 25% 0, 100% 50%, 78% 100%, 20% 100%);
  box-shadow: 0 0 0 5px var(--line);
}

.disciple-face.happy .mouth {
  left: 104px;
  top: 140px;
  width: 76px;
  height: 38px;
  border: 5px solid var(--line);
  background:
    linear-gradient(#fff 0 40%, #ff4d7d 41%);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}

.disciple-face.skeptical .brow.left {
  transform: rotate(18deg);
}

.disciple-face.skeptical .brow.right {
  transform: rotate(-18deg);
}

.disciple-face.skeptical .mouth {
  left: 112px;
  top: 158px;
  width: 58px;
  height: 8px;
}

.disciple-face.mad .head {
  background:
    linear-gradient(90deg, rgba(21, 19, 18, 0.48) 0 23%, transparent 24%),
    linear-gradient(135deg, #ffb057 0 30%, #d6533d 31% 72%, #7a1a2e 73%);
}

.disciple-face.mad .brow.left {
  transform: rotate(30deg);
}

.disciple-face.mad .brow.right {
  transform: rotate(-30deg);
}

.disciple-face.mad .eye {
  background: #ffe1c7;
  box-shadow:
    0 0 0 5px var(--line),
    inset 20px 0 0 #ff153d,
    0 0 12px #ff153d;
}

.disciple-face.mad .mouth {
  left: 110px;
  top: 142px;
  width: 66px;
  height: 34px;
  border: 5px solid var(--line);
  background: #3b0710;
  clip-path: polygon(0 18%, 100% 0, 86% 100%, 12% 82%);
}

.disciple-face.inquisitive .brow.left {
  transform: rotate(-24deg);
}

.disciple-face.inquisitive .brow.right {
  transform: rotate(-24deg);
}

.disciple-face.inquisitive .eye.right {
  top: 96px;
  height: 28px;
}

.disciple-face.inquisitive .mouth {
  left: 126px;
  top: 148px;
  width: 34px;
  height: 28px;
  border: 5px solid var(--line);
  background: #fbf7db;
  clip-path: polygon(16% 0, 100% 18%, 84% 100%, 0 82%);
}

.disciple-face.awe .eye {
  top: 94px;
  width: 44px;
  height: 42px;
  clip-path: polygon(0 22%, 50% 0, 100% 22%, 86% 100%, 16% 100%);
  box-shadow:
    0 0 0 5px var(--line),
    inset 28px 0 0 #ff315f,
    0 0 16px #ff315f;
}

.disciple-face.awe .mouth {
  left: 124px;
  top: 145px;
  width: 42px;
  height: 44px;
  border: 5px solid var(--line);
  background: #10000a;
  clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
}

.miracle-scene {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 8px),
    linear-gradient(#f04420 0 38%, #1d1d46 39% 100%);
}

.miracle-scene .sun {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #fff7af 0 34%, #ffbf2f 35%);
  clip-path: polygon(50% 0, 62% 32%, 100% 18%, 75% 50%, 100% 82%, 62% 68%, 50% 100%, 38% 68%, 0 82%, 25% 50%, 0 18%, 38% 32%);
}

.mini-jesus {
  width: 44px;
  height: 86px;
  background:
    linear-gradient(90deg, #151017 0 22%, #f4ecd4 23% 74%, #8b1235 75%);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

.wave {
  height: 24px;
  background:
    repeating-linear-gradient(90deg, #54c7ff 0 18px, #fff 18px 24px, #14569b 24px 42px);
}

.miracle-scene.wine {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 8px),
    linear-gradient(#3b174c 0 45%, #9e1038 46% 100%);
}

.miracle-scene.wine .jar {
  width: 58px;
  height: 76px;
  background: linear-gradient(90deg, #f2c284, #8d5f3a);
  clip-path: polygon(24% 0, 76% 0, 92% 22%, 84% 100%, 16% 100%, 8% 22%);
}

.miracle-scene.exorcism {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 8px),
    linear-gradient(#080611 0 42%, #3b0710 43% 100%);
}

.miracle-scene.exorcism .spirit {
  width: 96px;
  height: 104px;
  background:
    radial-gradient(circle at 62% 34%, #ff315f 0 8%, transparent 9%),
    linear-gradient(135deg, #d9e7ff, #4a3a86 62%, #090510);
  clip-path: polygon(28% 0, 100% 24%, 78% 100%, 0 74%);
}

@media (max-width: 980px), (max-height: 680px) {
  .game-logo {
    width: 150px;
    height: 44px;
  }

  .game-logo span {
    left: 34px;
    font-size: 1.02rem;
  }

  .game-logo strong {
    left: 34px;
    top: 18px;
    font-size: 1.2rem;
  }

  .logo-wing.left {
    width: 70px;
  }

  .logo-wing.right {
    width: 86px;
  }

  .mega-face {
    transform: translate(-50%, -50%) scale(0.72);
  }
}

/* Portrait fixes and disciple variants. */
.mega-face .eye {
  top: 104px;
  width: 30px;
  height: 20px;
}

.mega-face .eye.left {
  left: 105px;
  right: auto;
}

.mega-face .eye.right {
  left: auto;
  right: 100px;
}

.mega-face .brow.left {
  left: 100px;
}

.mega-face .brow.right {
  right: 100px;
}

.mega-face .nose {
  left: 132px;
}

.mega-face .mouth {
  left: 111px;
}

.disciple-face.disciple-0 {
  --face-skin: #c79b67;
  --face-shadow: #6e4332;
  --face-hair: #1d1410;
}

.disciple-face.disciple-0 .hair {
  background: repeating-linear-gradient(90deg, #15100e 0 14px, #5c3822 14px 21px, #21130d 21px 30px);
  clip-path: polygon(10% 18%, 84% 2%, 98% 34%, 86% 96%, 66% 58%, 50% 100%, 34% 58%, 14% 96%, 2% 36%);
}

.disciple-face.disciple-1 {
  --face-skin: #d3a36e;
  --face-shadow: #7c513d;
}

.disciple-face.disciple-1 .hair {
  background: repeating-linear-gradient(90deg, #2b160e 0 12px, #8c5128 12px 18px, #3b2114 18px 27px);
  clip-path: polygon(18% 10%, 70% 0, 94% 22%, 84% 72%, 64% 92%, 52% 56%, 36% 100%, 20% 62%, 4% 84%, 4% 32%);
}

.disciple-face.disciple-2 {
  --face-skin: #c88b5b;
  --face-shadow: #713a2d;
}

.disciple-face.disciple-2 .hair {
  background: repeating-linear-gradient(90deg, #071b23 0 10px, #1ca6a0 10px 15px, #0b3b48 15px 23px);
  clip-path: polygon(34% 0, 66% 0, 78% 80%, 94% 94%, 70% 100%, 56% 62%, 44% 100%, 30% 62%, 8% 98%, 22% 80%);
}

.disciple-face.disciple-3 {
  --face-skin: #e0b076;
  --face-shadow: #8b5c45;
}

.disciple-face.disciple-3 .hair {
  background: linear-gradient(90deg, #12080f, #6b174d 42%, #140814);
  clip-path: polygon(6% 28%, 34% 0, 76% 2%, 96% 30%, 88% 96%, 70% 68%, 56% 100%, 38% 68%, 22% 100%, 10% 70%);
}

.disciple-face.disciple-4 {
  --face-skin: #bfa26a;
  --face-shadow: #5c5640;
}

.disciple-face.disciple-4 .hair {
  background: repeating-linear-gradient(90deg, #101010 0 18px, #4d4b47 18px 24px, #191817 24px 32px);
  clip-path: polygon(12% 18%, 42% 0, 82% 8%, 98% 32%, 78% 58%, 74% 100%, 52% 70%, 30% 100%, 24% 58%, 2% 36%);
}

.disciple-face.disciple-5 {
  --face-skin: #d0a15e;
  --face-shadow: #76502f;
}

.disciple-face.disciple-5 .hair {
  background: repeating-linear-gradient(90deg, #25140b 0 9px, #d9b24f 9px 14px, #5f3c16 14px 24px);
  clip-path: polygon(18% 0, 92% 12%, 90% 48%, 74% 88%, 58% 56%, 48% 100%, 34% 58%, 16% 92%, 4% 48%);
}

.disciple-face.disciple-6 {
  --face-skin: #b98158;
  --face-shadow: #593a2c;
}

.disciple-face.disciple-6 .hair {
  background: linear-gradient(90deg, #12090f, #3a173d 45%, #171019);
  clip-path: polygon(8% 24%, 24% 2%, 78% 2%, 96% 24%, 96% 72%, 72% 88%, 58% 62%, 44% 96%, 28% 62%, 6% 88%);
}

.disciple-face.disciple-7 {
  --face-skin: #c9996c;
  --face-shadow: #744b34;
}

.disciple-face.disciple-7 .hair {
  background: repeating-linear-gradient(90deg, #0a1023 0 13px, #4157b8 13px 18px, #111a41 18px 28px);
  clip-path: polygon(22% 0, 74% 0, 96% 26%, 86% 60%, 98% 90%, 68% 82%, 52% 100%, 34% 82%, 4% 90%, 16% 60%, 4% 28%);
}

.disciple-face.disciple-8 {
  --face-skin: #d7ad7a;
  --face-shadow: #7d6244;
}

.disciple-face.disciple-8 .hair {
  background: linear-gradient(90deg, #0f2214, #477a35 45%, #182612);
  clip-path: polygon(24% 8%, 52% 0, 82% 8%, 98% 34%, 84% 100%, 60% 62%, 50% 94%, 38% 62%, 16% 100%, 2% 34%);
}

.disciple-face.disciple-9 {
  --face-skin: #c89468;
  --face-shadow: #654833;
}

.disciple-face.disciple-9 .hair {
  background: repeating-linear-gradient(90deg, #1d1010 0 11px, #a64a3a 11px 16px, #3d1c1b 16px 25px);
  clip-path: polygon(8% 30%, 30% 0, 76% 0, 98% 28%, 80% 48%, 90% 92%, 62% 78%, 48% 100%, 34% 78%, 8% 92%, 18% 48%);
}

.disciple-face.disciple-10 {
  --face-skin: #b77d54;
  --face-shadow: #59302a;
}

.disciple-face.disciple-10 .hair {
  background: repeating-linear-gradient(90deg, #0a0c12 0 10px, #d54b4b 10px 14px, #1c1010 14px 22px);
  clip-path: polygon(38% 0, 60% 0, 86% 38%, 96% 96%, 70% 76%, 58% 100%, 48% 70%, 36% 100%, 22% 76%, 4% 96%, 12% 38%);
}

.disciple-face.disciple-11 {
  --face-skin: #c0a46e;
  --face-shadow: #514b35;
}

.disciple-face.disciple-11 .hair {
  background: linear-gradient(90deg, #090710, #3a2d76 42%, #090710);
  clip-path: polygon(4% 36%, 28% 4%, 84% 8%, 98% 38%, 84% 80%, 96% 100%, 64% 88%, 50% 100%, 34% 88%, 4% 100%, 16% 80%);
}

/* Three-panel miracle slideshows. */
.miracle-scene .slide-title,
.miracle-scene .boat,
.miracle-scene .shore,
.miracle-scene .table,
.miracle-scene .cup,
.miracle-scene .synagogue,
.miracle-scene .crowd,
.miracle-scene .spark {
  display: none;
}

.miracle-scene .slide-title {
  left: 12px;
  top: 12px;
  z-index: 5;
  padding: 5px 8px;
  border: 3px solid var(--line);
  background: var(--yellow);
  color: var(--line);
  font-size: 0.72rem;
  font-weight: 900;
}

.miracle-scene .slide-title::after {
  content: "SIGN";
}

.miracle-scene.water.slide-1 .slide-title::after {
  content: "STORM";
}

.miracle-scene.water.slide-2 .slide-title::after {
  content: "ON THE SEA";
}

.miracle-scene.water.slide-3 .slide-title::after {
  content: "PEACE";
}

.miracle-scene.wine.slide-1 .slide-title::after {
  content: "EMPTY JARS";
}

.miracle-scene.wine.slide-2 .slide-title::after {
  content: "WATER TO WINE";
}

.miracle-scene.wine.slide-3 .slide-title::after {
  content: "THE FEAST";
}

.miracle-scene.exorcism.slide-1 .slide-title::after {
  content: "CAPERNAUM";
}

.miracle-scene.exorcism.slide-2 .slide-title::after {
  content: "REBUKE";
}

.miracle-scene.exorcism.slide-3 .slide-title::after {
  content: "SET FREE";
}

.miracle-scene.slide-1 .slide-title,
.miracle-scene.slide-2 .slide-title,
.miracle-scene.slide-3 .slide-title {
  display: block;
}

.miracle-scene .boat {
  left: 18%;
  bottom: 44px;
  width: 86px;
  height: 32px;
  border: 5px solid var(--line);
  background: #7c4a22;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 18% 100%);
  z-index: 3;
}

.miracle-scene .shore {
  right: 0;
  bottom: 0;
  width: 35%;
  height: 56px;
  background: repeating-linear-gradient(90deg, #d7b381 0 16px, #9d7344 16px 30px);
  border-top: 5px solid var(--line);
  z-index: 2;
}

.miracle-scene.water.slide-1 .boat,
.miracle-scene.water.slide-1 .shore,
.miracle-scene.water.slide-2 .boat,
.miracle-scene.water.slide-3 .shore {
  display: block;
}

.miracle-scene.water.slide-1 .mini-jesus {
  left: 78%;
  transform: translateX(-50%) scale(0.7);
}

.miracle-scene.water.slide-2 .mini-jesus {
  left: 50%;
  transform: translateX(-50%) scale(1.05);
}

.miracle-scene.water.slide-3 .wave {
  height: 12px;
  filter: brightness(1.25);
}

.miracle-scene .table {
  left: 18%;
  right: 18%;
  bottom: 38px;
  height: 24px;
  border: 5px solid var(--line);
  background: #7c4a22;
  z-index: 2;
}

.miracle-scene .cup {
  left: 50%;
  bottom: 70px;
  width: 28px;
  height: 34px;
  transform: translateX(-50%);
  border: 4px solid var(--line);
  background: #d8d8e8;
  z-index: 4;
}

.miracle-scene.wine.slide-1 .jar,
.miracle-scene.wine.slide-2 .jar,
.miracle-scene.wine.slide-3 .jar,
.miracle-scene.wine.slide-3 .table,
.miracle-scene.wine.slide-3 .cup {
  display: block;
}

.miracle-scene.wine.slide-1 .jar::after {
  height: 6px;
  background: #54c7ff;
}

.miracle-scene.wine.slide-2 .jar::after {
  height: 42px;
  background: linear-gradient(#54c7ff 0 28%, #9e1038 29%);
}

.miracle-scene.wine.slide-3 .cup {
  background: linear-gradient(#d8d8e8 0 35%, #9e1038 36%);
}

.miracle-scene.wine.slide-2 .spark,
.miracle-scene.wine.slide-3 .spark {
  display: block;
}

.miracle-scene .synagogue {
  left: 12%;
  right: 12%;
  bottom: 16px;
  height: 88px;
  border: 5px solid var(--line);
  background:
    linear-gradient(90deg, transparent 0 18%, #3b2d51 18% 28%, transparent 28% 72%, #3b2d51 72% 82%, transparent 82%),
    linear-gradient(#766a89, #332642);
  clip-path: polygon(8% 18%, 50% 0, 92% 18%, 100% 100%, 0 100%);
}

.miracle-scene .crowd {
  bottom: 24px;
  width: 30px;
  height: 42px;
  border: 4px solid var(--line);
  background: #c89468;
  z-index: 4;
}

.miracle-scene .crowd.one {
  left: 20%;
}

.miracle-scene .crowd.two {
  right: 20%;
}

.miracle-scene.exorcism.slide-1 .synagogue,
.miracle-scene.exorcism.slide-1 .crowd,
.miracle-scene.exorcism.slide-2 .synagogue,
.miracle-scene.exorcism.slide-2 .spirit,
.miracle-scene.exorcism.slide-2 .spark,
.miracle-scene.exorcism.slide-3 .synagogue,
.miracle-scene.exorcism.slide-3 .crowd,
.miracle-scene.exorcism.slide-3 .mini-jesus {
  display: block;
}

.miracle-scene.exorcism.slide-1 .spirit,
.miracle-scene.exorcism.slide-3 .spirit {
  display: none;
}

.miracle-scene.exorcism.slide-3 .mini-jesus {
  left: 34%;
}

/* More natural 90s anime portrait pass. */
.portrait-screen {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 22%),
    linear-gradient(135deg, #d9cda2 0 38%, #9f916d 39% 58%, #373d50 59% 100%);
}

.disciple-screen {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 20%),
    linear-gradient(135deg, #c9b982 0 36%, #7e8565 37% 58%, #31384f 59% 100%);
}

.portrait-screen::before {
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(255, 255, 255, 0.2) 17% 18%, transparent 18% 76%, rgba(0, 0, 0, 0.18) 76% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 48%);
  mix-blend-mode: normal;
}

.mega-face {
  --face-skin: #d1a06f;
  --face-shadow: #a06c4f;
  --face-hair: #171414;
  width: 270px;
  height: 222px;
  top: 56%;
  transform: translate(-50%, -50%) scale(1.02);
}

.mega-face::before {
  content: "";
  position: absolute;
  left: 106px;
  top: 156px;
  width: 56px;
  height: 52px;
  border: 4px solid #141018;
  background: linear-gradient(90deg, var(--face-shadow), var(--face-skin) 48%, #e0b17c);
  z-index: 0;
}

.mega-face::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -8px;
  height: 56px;
  border: 5px solid #141018;
  background:
    linear-gradient(90deg, #6b1e2d 0 18%, #e8dcc0 19% 42%, #b12f38 43% 52%, #e8dcc0 53% 78%, #6b1e2d 79%);
  clip-path: polygon(12% 12%, 88% 12%, 100% 100%, 0 100%);
  z-index: 0;
}

.mega-face .head {
  left: 76px;
  top: 35px;
  width: 118px;
  height: 142px;
  border: 4px solid #141018;
  background:
    linear-gradient(105deg, rgba(255, 239, 196, 0.75) 0 24%, transparent 25%),
    linear-gradient(90deg, #a87256 0 16%, var(--face-skin) 17% 67%, #e0b17c 68% 100%);
  clip-path: polygon(22% 3%, 76% 0, 94% 24%, 90% 70%, 74% 92%, 51% 100%, 28% 92%, 10% 70%, 6% 26%);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.mega-face .hair {
  left: 58px;
  top: 8px;
  width: 152px;
  height: 92px;
  border: 4px solid #141018;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.28), transparent 12%),
    repeating-linear-gradient(100deg, #0e0d0f 0 13px, #2b2528 13px 22px, #080709 22px 30px);
  clip-path: polygon(16% 28%, 32% 6%, 62% 0, 88% 16%, 98% 42%, 88% 72%, 72% 96%, 66% 58%, 48% 74%, 32% 58%, 22% 98%, 6% 70%);
  box-shadow: none;
  z-index: 4;
}

.jesus-face .hair {
  left: 48px;
  top: 10px;
  width: 178px;
  height: 126px;
  background:
    radial-gradient(circle at 44% 18%, rgba(255, 238, 180, 0.2), transparent 12%),
    repeating-linear-gradient(100deg, #24130d 0 14px, #6a4227 14px 24px, #17100c 24px 34px);
  clip-path: polygon(10% 20%, 30% 4%, 64% 0, 88% 16%, 98% 46%, 88% 96%, 70% 80%, 60% 100%, 48% 66%, 36% 100%, 24% 80%, 8% 96%, 2% 48%);
}

.mega-face .halo {
  left: 64px;
  top: 3px;
  width: 140px;
  height: 16px;
  border: 3px solid #141018;
  background: linear-gradient(90deg, #fff8b8, #d7b33f, #fff8b8);
  clip-path: ellipse(50% 48% at 50% 50%);
  box-shadow: 0 0 10px rgba(255, 231, 96, 0.8);
  z-index: 1;
}

.mega-face .brow {
  top: 91px;
  width: 36px;
  height: 5px;
  background: #171217;
  z-index: 5;
}

.mega-face .brow.left {
  left: 92px;
}

.mega-face .brow.right {
  right: 92px;
}

.mega-face .eye {
  top: 101px;
  width: 26px;
  height: 13px;
  border: 0;
  background: #fff3d8;
  clip-path: polygon(0 54%, 22% 14%, 78% 0, 100% 48%, 75% 88%, 20% 100%);
  box-shadow: 0 0 0 3px #141018;
  z-index: 5;
}

.mega-face .eye::after {
  left: 11px;
  top: 3px;
  width: 7px;
  height: 7px;
  background: #2b1d1b;
  box-shadow: none;
}

.mega-face .eye.left {
  left: 101px;
  right: auto;
}

.mega-face .eye.right {
  left: auto;
  right: 101px;
  transform: scaleX(-1);
}

.jesus-face .eye {
  box-shadow: 0 0 0 3px #141018;
}

.jesus-face .eye::after {
  background: #33465f;
  box-shadow: none;
}

.mega-face .nose {
  left: 128px;
  top: 111px;
  width: 18px;
  height: 28px;
  border-right: 3px solid #6e4936;
  border-bottom: 3px solid #6e4936;
  transform: skew(-8deg);
  z-index: 5;
}

.mega-face .beard {
  left: 87px;
  top: 140px;
  width: 96px;
  height: 42px;
  border: 4px solid #141018;
  background: linear-gradient(#2f211b, #181011);
  clip-path: polygon(8% 0, 92% 0, 78% 68%, 52% 100%, 22% 68%);
  box-shadow: none;
  z-index: 3;
}

.disciple-face .beard {
  display: none;
}

.disciple-face.disciple-0 .beard,
.disciple-face.disciple-2 .beard,
.disciple-face.disciple-10 .beard,
.disciple-face.disciple-11 .beard {
  display: block;
  height: 30px;
  top: 150px;
  background: linear-gradient(#3a251b, #171010);
}

.mega-face .mouth {
  left: 113px;
  top: 151px;
  width: 44px;
  height: 5px;
  background: #171217;
  z-index: 6;
}

.jesus-face.calm .mouth {
  left: 114px;
  top: 150px;
  width: 42px;
  height: 5px;
}

.jesus-face.thinking .mouth {
  left: 120px;
  top: 148px;
  width: 30px;
  height: 14px;
  border: 3px solid #141018;
  background: #382126;
  clip-path: ellipse(50% 48% at 50% 50%);
}

.jesus-face.thinking .brow.left {
  transform: rotate(10deg);
}

.jesus-face.thinking .brow.right {
  transform: rotate(-10deg);
}

.disciple-face.happy .eye {
  top: 105px;
  height: 5px;
  background: #171217;
  clip-path: none;
  box-shadow: 0 0 0 2px #141018;
}

.disciple-face.happy .mouth {
  left: 103px;
  top: 139px;
  width: 62px;
  height: 28px;
  border: 3px solid #141018;
  background: linear-gradient(#fff3d8 0 36%, #7d1c2c 37%);
  clip-path: polygon(6% 0, 94% 0, 78% 100%, 22% 100%);
}

.disciple-face.skeptical .brow.left {
  transform: rotate(9deg);
}

.disciple-face.skeptical .brow.right {
  transform: rotate(-9deg);
}

.disciple-face.skeptical .mouth {
  left: 111px;
  top: 151px;
  width: 46px;
  height: 5px;
}

.disciple-face.mad .head {
  background:
    linear-gradient(105deg, rgba(255, 229, 183, 0.58) 0 22%, transparent 23%),
    linear-gradient(90deg, #a45d4a 0 16%, #cf7c5e 17% 68%, #e3a071 69% 100%);
}

.disciple-face.mad .brow.left {
  transform: rotate(18deg);
}

.disciple-face.mad .brow.right {
  transform: rotate(-18deg);
}

.disciple-face.mad .eye {
  background: #ffe2cf;
  box-shadow: 0 0 0 3px #141018;
}

.disciple-face.mad .eye::after {
  background: #3b1618;
}

.disciple-face.mad .mouth {
  left: 106px;
  top: 138px;
  width: 58px;
  height: 24px;
  border: 3px solid #141018;
  background: #4b1017;
  clip-path: polygon(0 18%, 100% 0, 86% 100%, 12% 82%);
}

.disciple-face.inquisitive .brow.left {
  transform: rotate(-12deg);
}

.disciple-face.inquisitive .brow.right {
  transform: rotate(-12deg);
}

.disciple-face.inquisitive .eye.right {
  top: 96px;
  height: 16px;
}

.disciple-face.inquisitive .mouth {
  left: 121px;
  top: 143px;
  width: 28px;
  height: 20px;
  border: 3px solid #141018;
  background: #fff3d8;
  clip-path: ellipse(50% 48% at 50% 50%);
}

.disciple-face.awe .eye {
  top: 96px;
  width: 34px;
  height: 24px;
  clip-path: ellipse(50% 48% at 50% 50%);
  box-shadow: 0 0 0 3px #141018;
}

.disciple-face.awe .mouth {
  left: 119px;
  top: 139px;
  width: 32px;
  height: 32px;
  border: 3px solid #141018;
  background: #1a0d13;
  clip-path: ellipse(50% 48% at 50% 50%);
}

.disciple-face.disciple-1 .head,
.disciple-face.disciple-4 .head,
.disciple-face.disciple-7 .head {
  height: 150px;
  clip-path: polygon(24% 3%, 76% 0, 92% 20%, 88% 76%, 70% 94%, 50% 100%, 30% 94%, 12% 76%, 8% 22%);
}

.disciple-face.disciple-3 .head,
.disciple-face.disciple-8 .head {
  width: 108px;
  left: 82px;
}

.disciple-face.disciple-5 .head,
.disciple-face.disciple-10 .head {
  width: 128px;
  left: 70px;
}

/* Cinematic miracle slideshow retone. */
.miracle-scene {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px),
    linear-gradient(#8aa0a6 0 42%, #3d5d73 43% 100%);
}

.miracle-scene .slide-title {
  background: rgba(246, 233, 188, 0.95);
  color: #141018;
}

.miracle-scene .sun {
  background: radial-gradient(circle, #fff2b6 0 34%, #d7a64a 35%);
  clip-path: ellipse(50% 48% at 50% 50%);
  opacity: 0.9;
}

.mini-jesus {
  width: 38px;
  height: 92px;
  background:
    linear-gradient(90deg, #3b1c1c 0 20%, #e8dcc0 21% 70%, #7f2630 71%);
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}

.wave {
  background:
    repeating-linear-gradient(90deg, #6fa7c6 0 18px, #dfeef5 18px 24px, #2f5e7d 24px 44px);
}

.miracle-scene.wine {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px),
    linear-gradient(#b38d68 0 44%, #624339 45% 100%);
}

.miracle-scene.exorcism {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px),
    linear-gradient(#8f8462 0 38%, #4c4936 39% 100%);
}

.miracle-scene.exorcism .spirit {
  background:
    radial-gradient(circle at 62% 34%, #f7ebe2 0 8%, transparent 9%),
    linear-gradient(135deg, #d8d0c8, #736e86 62%, #2b2633);
  opacity: 0.88;
}

/* Glam portrait pass: less pixel-villain, more dramatic close-up headshot. */
.portrait-screen {
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.58), transparent 14%),
    radial-gradient(circle at 62% 42%, rgba(255, 210, 170, 0.24), transparent 28%),
    linear-gradient(115deg, #ead8af 0 32%, #b7a57c 33% 55%, #404858 56% 100%);
}

.disciple-screen {
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.48), transparent 14%),
    radial-gradient(circle at 60% 45%, rgba(180, 220, 255, 0.18), transparent 28%),
    linear-gradient(115deg, #ded0a0 0 32%, #9b9875 33% 55%, #3c4351 56% 100%);
}

.mega-face {
  --face-skin: #d6a374;
  --face-light: #ffe1b3;
  --face-shadow: #8e5f49;
  --face-hair: #201713;
  --lip: #6f2d2e;
  width: 260px;
  height: 222px;
  top: 56%;
  transform: translate(-50%, -50%) scale(1);
  filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, 0.32));
}

.mega-face::before {
  left: 107px;
  top: 150px;
  width: 50px;
  height: 54px;
  border: 0;
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(90deg, var(--face-shadow), var(--face-skin) 45%, var(--face-light));
  box-shadow: inset -10px 0 18px rgba(90, 50, 36, 0.22);
}

.mega-face::after {
  left: 22px;
  right: 22px;
  bottom: -10px;
  height: 68px;
  border: 0;
  border-radius: 70px 70px 8px 8px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.9) 0 12%, transparent 13%),
    linear-gradient(90deg, #4e1f28 0 18%, #f3ead6 19% 41%, #a01f2f 42% 53%, #f3ead6 54% 78%, #4e1f28 79%);
  clip-path: none;
}

.mega-face .head {
  left: 72px;
  top: 28px;
  width: 122px;
  height: 150px;
  border: 0;
  border-radius: 46% 46% 44% 44% / 36% 36% 54% 54%;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 237, 198, 0.95) 0 12%, transparent 13%),
    radial-gradient(circle at 64% 54%, rgba(136, 76, 56, 0.18) 0 20%, transparent 21%),
    linear-gradient(100deg, var(--face-shadow) 0 16%, var(--face-skin) 17% 66%, var(--face-light) 67% 100%);
  box-shadow:
    inset -18px -12px 26px rgba(86, 48, 36, 0.25),
    inset 12px 0 22px rgba(255, 232, 188, 0.32),
    0 0 0 4px #171018;
  clip-path: none;
}

.mega-face .hair {
  left: 50px;
  top: 0;
  width: 165px;
  height: 94px;
  border: 0;
  border-radius: 52% 48% 38% 34% / 52% 56% 36% 34%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.22), transparent 12%),
    linear-gradient(110deg, #0e0b0c 0 18%, var(--face-hair) 19% 64%, #070506 65%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 18px);
  box-shadow:
    inset -18px -10px 28px rgba(0, 0, 0, 0.36),
    0 0 0 4px #171018;
  clip-path: none;
}

.mega-face .hair::before,
.mega-face .hair::after {
  content: "";
  position: absolute;
  display: block;
  background: inherit;
  border-radius: 50%;
}

.mega-face .hair::before {
  left: -10px;
  top: 35px;
  width: 42px;
  height: 98px;
  transform: rotate(8deg);
}

.mega-face .hair::after {
  right: -4px;
  top: 34px;
  width: 34px;
  height: 84px;
  transform: rotate(-8deg);
}

.jesus-face .hair {
  left: 36px;
  top: -2px;
  width: 194px;
  height: 138px;
  border-radius: 52% 48% 34% 34% / 42% 46% 44% 44%;
  background:
    radial-gradient(circle at 42% 14%, rgba(255, 230, 170, 0.22), transparent 12%),
    repeating-linear-gradient(105deg, #160d09 0 16px, #6a4026 16px 27px, #22140d 27px 40px);
}

.jesus-face .halo {
  left: 56px;
  top: -2px;
  width: 150px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, #fff9c8, #ffc947, #fff9c8);
  box-shadow:
    0 0 0 3px #171018,
    0 0 18px rgba(255, 236, 118, 0.9);
}

.mega-face .brow {
  top: 88px;
  width: 34px;
  height: 5px;
  border-radius: 4px;
  background: #1b1112;
}

.mega-face .brow.left {
  left: 93px;
}

.mega-face .brow.right {
  right: 93px;
}

.mega-face .eye {
  top: 98px;
  width: 27px;
  height: 13px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 62% 48%, #141018 0 18%, transparent 19%),
    radial-gradient(circle at 72% 36%, #ffffff 0 8%, transparent 9%),
    #fff5dd;
  box-shadow:
    0 0 0 2px #171018,
    0 4px 0 rgba(95, 51, 45, 0.24);
  clip-path: none;
}

.mega-face .eye::after {
  display: none;
}

.mega-face .eye.left {
  left: 96px;
}

.mega-face .eye.right {
  right: 96px;
  transform: none;
}

.jesus-face .eye {
  background:
    radial-gradient(circle at 62% 48%, #1c3446 0 18%, transparent 19%),
    radial-gradient(circle at 72% 36%, #ffffff 0 8%, transparent 9%),
    #fff5dd;
}

.mega-face .nose {
  left: 126px;
  top: 108px;
  width: 16px;
  height: 31px;
  border: 0;
  border-right: 3px solid rgba(82, 48, 37, 0.62);
  border-bottom: 3px solid rgba(82, 48, 37, 0.62);
  border-radius: 0 0 8px 0;
  transform: skew(-7deg);
}

.mega-face .mouth {
  left: 112px;
  top: 146px;
  width: 42px;
  height: 7px;
  border-radius: 0 0 22px 22px;
  background: var(--lip);
}

.mega-face .beard {
  left: 80px;
  top: 132px;
  width: 106px;
  height: 54px;
  border: 0;
  border-radius: 20px 20px 48px 48px;
  background:
    radial-gradient(circle at 50% 0, transparent 0 22%, #302018 23%),
    linear-gradient(#4d3021, #211510);
  box-shadow:
    inset -10px -10px 16px rgba(0, 0, 0, 0.28),
    0 0 0 3px #171018;
  clip-path: none;
}

.disciple-face .beard {
  display: none;
}

.disciple-face.disciple-0 .beard,
.disciple-face.disciple-2 .beard,
.disciple-face.disciple-10 .beard,
.disciple-face.disciple-11 .beard {
  display: block;
  left: 86px;
  top: 142px;
  width: 94px;
  height: 38px;
  border-radius: 18px 18px 38px 38px;
}

.jesus-face.calm .mouth {
  left: 112px;
  top: 145px;
  width: 43px;
  height: 7px;
}

.jesus-face.thinking .mouth {
  left: 118px;
  top: 144px;
  width: 30px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #5b2228;
  box-shadow: 0 0 0 3px #171018;
}

.disciple-face.happy .eye {
  top: 101px;
  height: 6px;
  border-radius: 12px;
  background: #171018;
}

.disciple-face.happy .mouth {
  left: 103px;
  top: 136px;
  width: 62px;
  height: 28px;
  border: 0;
  border-radius: 10px 10px 34px 34px;
  background:
    linear-gradient(#fff4df 0 35%, #8c2633 36%);
  box-shadow: 0 0 0 3px #171018;
  clip-path: none;
}

.disciple-face.skeptical .mouth {
  left: 111px;
  top: 147px;
  width: 45px;
  height: 6px;
  border-radius: 12px;
}

.disciple-face.mad .head {
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 224, 184, 0.72) 0 12%, transparent 13%),
    linear-gradient(100deg, #aa6655 0 16%, #d08a6e 17% 66%, #efb282 67% 100%);
}

.disciple-face.mad .mouth {
  left: 106px;
  top: 137px;
  width: 56px;
  height: 24px;
  border: 0;
  border-radius: 10px 10px 20px 20px;
  background: #4b1017;
  box-shadow: 0 0 0 3px #171018;
  clip-path: none;
}

.disciple-face.inquisitive .mouth {
  left: 121px;
  top: 140px;
  width: 28px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #fff3d8;
  box-shadow: 0 0 0 3px #171018;
  clip-path: none;
}

.disciple-face.awe .eye {
  top: 93px;
  width: 34px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 56% 54%, #151018 0 18%, transparent 19%),
    radial-gradient(circle at 72% 34%, #ffffff 0 9%, transparent 10%),
    #fff7e9;
  box-shadow: 0 0 0 3px #171018;
}

.disciple-face.awe .mouth {
  left: 118px;
  top: 136px;
  width: 32px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #1a0d13;
  box-shadow: 0 0 0 3px #171018;
  clip-path: none;
}

.disciple-face.disciple-0 { --face-hair: #21150f; --face-skin: #c79262; --face-light: #f2c189; --face-shadow: #8f5b3d; }
.disciple-face.disciple-1 { --face-hair: #2c1d14; --face-skin: #d4a071; --face-light: #f3ca98; --face-shadow: #966449; }
.disciple-face.disciple-2 { --face-hair: #17171b; --face-skin: #c08b62; --face-light: #e7b481; --face-shadow: #81533e; }
.disciple-face.disciple-3 { --face-hair: #281f2f; --face-skin: #deb07e; --face-light: #f5cca0; --face-shadow: #9f7052; }
.disciple-face.disciple-4 { --face-hair: #111111; --face-skin: #c0a071; --face-light: #ddc091; --face-shadow: #827052; }
.disciple-face.disciple-5 { --face-hair: #4f3217; --face-skin: #d0a060; --face-light: #ecc98b; --face-shadow: #8b6139; }
.disciple-face.disciple-6 { --face-hair: #22151b; --face-skin: #b88058; --face-light: #dfa77a; --face-shadow: #784c37; }
.disciple-face.disciple-7 { --face-hair: #101625; --face-skin: #ca9869; --face-light: #efbe8b; --face-shadow: #81593f; }
.disciple-face.disciple-8 { --face-hair: #24311f; --face-skin: #d2a978; --face-light: #f0ca98; --face-shadow: #8d6a4c; }
.disciple-face.disciple-9 { --face-hair: #3d1b16; --face-skin: #c79367; --face-light: #e7b786; --face-shadow: #81553e; }
.disciple-face.disciple-10 { --face-hair: #151010; --face-skin: #b97d55; --face-light: #dfa174; --face-shadow: #704333; }
.disciple-face.disciple-11 { --face-hair: #191426; --face-skin: #c2a16c; --face-light: #dfc28e; --face-shadow: #81704e; }

/* Cutscenes: more grounded cinematic backgrounds. */
.miracle-scene {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(#9bb4bd 0 42%, #4e7184 43% 100%);
}

.miracle-scene.wine {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(#c4a47c 0 42%, #6a4b3f 43% 100%);
}

.miracle-scene.exorcism {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(#9a906a 0 40%, #5b573e 41% 100%);
}

/* Requested title direction. */
.game-logo {
  width: 218px;
}

.game-logo span {
  left: 28px;
  top: 0;
  font-size: 1.04rem;
}

.game-logo strong {
  left: 58px;
  top: 24px;
  font-size: 1.58rem;
}

/* Reset Jesus into a normal-looking person: natural long hair, beard, suit. */
.jesus-face {
  --face-hair: #4b2f1f;
  --face-skin: #d2a071;
  --face-light: #f0bf8e;
  --face-shadow: #8a5b43;
}

.jesus-face .hair {
  left: 58px;
  top: 8px;
  width: 150px;
  height: 122px;
  border-radius: 48% 48% 42% 42% / 40% 40% 48% 48%;
  background:
    radial-gradient(circle at 42% 16%, rgba(255, 225, 170, 0.2), transparent 12%),
    linear-gradient(90deg, #23150f 0 16%, #6b432b 17% 36%, #3f2619 37% 63%, #6b432b 64% 84%, #23150f 85%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 20px);
  box-shadow:
    inset -12px -12px 22px rgba(0, 0, 0, 0.26),
    0 0 0 4px #171018;
}

.jesus-face .hair::before {
  left: -14px;
  top: 38px;
  width: 34px;
  height: 92px;
  border-radius: 24px;
  transform: rotate(5deg);
}

.jesus-face .hair::after {
  right: -14px;
  top: 38px;
  width: 34px;
  height: 92px;
  border-radius: 24px;
  transform: rotate(-5deg);
}

.jesus-face .head {
  left: 74px;
  top: 34px;
  width: 118px;
  height: 144px;
  border-radius: 46% 46% 44% 44% / 36% 36% 54% 54%;
}

.jesus-face .beard {
  display: block;
  left: 83px;
  top: 133px;
  width: 100px;
  height: 52px;
  border-radius: 20px 20px 44px 44px;
  background:
    radial-gradient(circle at 50% 0, transparent 0 22%, #4b2f1f 23%),
    linear-gradient(90deg, #2a190f, #654028 48%, #2a190f);
  box-shadow:
    inset -8px -8px 14px rgba(0, 0, 0, 0.24),
    0 0 0 3px #171018;
}

.jesus-face::after {
  left: 24px;
  right: 24px;
  height: 70px;
  background:
    linear-gradient(90deg, #151a24 0 25%, #f7eedc 26% 41%, #8c2432 42% 50%, #f7eedc 51% 66%, #151a24 67%),
    linear-gradient(#202838, #0b0f18);
  border-radius: 60px 60px 8px 8px;
}

.jesus-face::before {
  background:
    linear-gradient(90deg, #7b4c35, #d3a06f 45%, #f6c790);
}

.jesus-face .brow.left {
  left: 94px;
}

.jesus-face .brow.right {
  right: 94px;
}

.jesus-face .eye.left {
  left: 99px;
}

.jesus-face .eye.right {
  right: 99px;
}

/* Generated portrait layer. Keeps the old CSS faces as fallback markup only. */
.portrait-screen .mega-face {
  display: none;
}

.portrait-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.02);
  transition:
    filter 160ms steps(2, end),
    transform 160ms steps(2, end);
}

.portrait-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 50% 34%, transparent 0 38%, rgba(4, 2, 11, 0.38) 74%);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.screen-label,
.screen-caption,
.miracle-scene {
  z-index: 5;
}

.portrait-image.thinking {
  animation: portraitThink 520ms steps(2, end) infinite;
  filter: saturate(0.96) contrast(1.08) brightness(0.96);
}

.portrait-image.calm {
  filter: saturate(1.06) contrast(1.03) brightness(1.02);
}

.portrait-image.happy {
  filter: saturate(1.2) contrast(1.08) brightness(1.12);
  transform: scale(1.045);
}

.portrait-image.skeptical,
.portrait-image.inquisitive {
  filter: saturate(1.02) contrast(1.1) brightness(0.98);
}

.portrait-image.mad {
  filter: saturate(1.45) contrast(1.18) brightness(0.88) hue-rotate(-10deg);
  transform: scale(1.075) translateY(1%);
}

.portrait-image.awe {
  filter: saturate(0.9) contrast(1.25) brightness(1.22);
  animation: portraitAwe 160ms steps(2, end) infinite;
}

.jesus-screen.miracle-mode .portrait-image {
  opacity: 0;
}

@keyframes portraitThink {
  0%,
  100% {
    transform: scale(1.02) translateX(0);
  }
  50% {
    transform: scale(1.035) translateX(2px);
  }
}

@keyframes portraitAwe {
  0%,
  100% {
    transform: scale(1.06) translateX(-1px);
  }
  50% {
    transform: scale(1.08) translateX(1px);
  }
}