/* ============================================================
   SHARING JESUS CHRIST 2 — Souls of the Streets
   AAA-Quality Stylesheet
   (c) happystoner5420 Games
   ============================================================ */

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

:root {
  --gold: #d4af37;
  --gold-bright: #ffd76b;
  --gold-deep: #8a6f1f;
  --heaven: #7ed6ff;
  --heaven-glow: #d3f4ff;
  --hell: #ff3a1a;
  --hell-glow: #ff8b6b;
  --bg-deep: #0a0a12;
  --bg-mid: #161827;
  --bg-light: #20243a;
  --text-main: #e8e6df;
  --text-dim: #9a9a9a;
  --panel-bg: rgba(15, 18, 32, 0.85);
  --panel-border: rgba(212, 175, 55, 0.5);
}

html, body {
  width:100%; height:100%;
  background:#000;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--text-main);
  overflow:hidden;
  user-select:none;
}

/* ============ SCREENS ============ */
.screen {
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  display:none;
  align-items:center;
  justify-content:center;
}
.screen.active { display:flex; }

/* ============ MAIN MENU ============ */
#main-menu {
  background:
    radial-gradient(ellipse at center top, #2a3a6b 0%, #0a0a12 60%),
    linear-gradient(180deg, #0d1228 0%, #000 100%);
  position:relative;
  overflow:hidden;
}

.bg-clouds {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 600px 200px at 20% 30%, rgba(220,230,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 800px 300px at 80% 20%, rgba(220,230,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 700px 250px at 50% 70%, rgba(220,230,255,0.08) 0%, transparent 60%);
  animation: drift 60s linear infinite;
  pointer-events:none;
}

@keyframes drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}

.bg-light-rays {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,220,140,0.06) 50%, transparent 100%),
    conic-gradient(from 270deg at 50% 0%, transparent 80%, rgba(255,220,140,0.04) 90%, transparent 100%);
  pointer-events:none;
  animation: rays 8s ease-in-out infinite alternate;
}

@keyframes rays {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

.menu-container {
  position:relative;
  z-index:10;
  text-align:center;
  padding:2rem;
  max-width:700px;
  width:90%;
}

#title-art {
  margin: 0 auto 1rem;
  width: 220px;
  height: 220px;
  filter: drop-shadow(0 0 30px rgba(255, 215, 100, 0.5));
}

.game-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: bold;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  text-shadow:
    0 0 12px rgba(255, 215, 100, 0.8),
    0 0 24px rgba(255, 180, 50, 0.5),
    0 2px 4px rgba(0,0,0,0.9);
  margin-bottom: 0.4rem;
  background: linear-gradient(180deg, #ffeb9b 0%, #d4a02e 60%, #8a6515 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.game-subtitle {
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: 0.5em;
  color: #c8c4b3;
  margin-bottom: 2.5rem;
  font-style: italic;
}

.menu-buttons {
  display:flex;
  flex-direction:column;
  gap: 1rem;
  align-items:center;
}

.menu-btn {
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.18em;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(50,50,80,0.7) 0%, rgba(20,20,40,0.85) 100%);
  border: 2px solid var(--gold);
  padding: 0.9rem 2.4rem;
  min-width: 280px;
  border-radius: 4px;
  cursor:pointer;
  transition: all 0.25s ease;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 4px 18px rgba(0,0,0,0.6),
    0 0 12px rgba(212,175,55,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.menu-btn:hover {
  transform: translateY(-2px);
  color:#fff;
  border-color: var(--gold-bright);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 6px 24px rgba(0,0,0,0.7),
    0 0 28px rgba(255,215,100,0.5);
  background: linear-gradient(180deg, rgba(80,70,40,0.8) 0%, rgba(40,30,10,0.9) 100%);
}

.menu-btn:active { transform: translateY(0); }

.menu-btn.danger {
  border-color: #b04020;
  color: #ffb8a0;
}
.menu-btn.danger:hover {
  border-color: #ff7050;
  color: #fff;
  box-shadow: 0 0 28px rgba(255,90,40,0.5);
}

.footer-tag {
  margin-top: 2.5rem;
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

/* ============ INFO PANELS ============ */
#how-to-play, #credits {
  background:
    radial-gradient(ellipse at center, #1a1c30 0%, #000 80%);
}

.info-panel {
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 8px;
  padding: 2rem 2.5rem;
  width: min(800px, 92%);
  max-height: 85vh;
  display:flex;
  flex-direction:column;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 10px 60px rgba(0,0,0,0.85),
    0 0 40px rgba(212,175,55,0.15);
}

.panel-title {
  font-size: 2rem;
  text-align:center;
  letter-spacing: 0.3em;
  color: var(--gold-bright);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--panel-border);
  text-shadow: 0 0 10px rgba(255,215,100,0.4);
}

.info-scroll, .credits-roll {
  overflow-y:auto;
  flex:1;
  padding-right: 0.8rem;
  margin-bottom: 1.5rem;
  line-height: 1.75;
}

.info-scroll p, .credits-roll p {
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.info-scroll strong { color: var(--gold-bright); }

.credits-roll {
  text-align:center;
}
.credits-roll h3 { color: var(--gold-bright); font-size: 1.6rem; letter-spacing: 0.2em; margin-bottom: 0.3rem; }
.credits-roll h4 { color: #c8c4b3; font-style: italic; margin-bottom: 1rem; letter-spacing: 0.4em; }
.credits-roll hr { border: none; border-top: 1px solid var(--panel-border); margin: 1rem auto; width:60%; }
.credits-roll .big { font-size: 1.2rem; color: var(--gold-bright); letter-spacing: 0.15em; }

.verse-quote {
  font-style: italic;
  color: var(--heaven-glow);
  background: rgba(126, 214, 255, 0.06);
  border-left: 3px solid var(--heaven);
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
}

/* Custom scrollbars */
.info-scroll::-webkit-scrollbar, .credits-roll::-webkit-scrollbar,
#bible-verse-list::-webkit-scrollbar {
  width: 8px;
}
.info-scroll::-webkit-scrollbar-track, .credits-roll::-webkit-scrollbar-track,
#bible-verse-list::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.3);
}
.info-scroll::-webkit-scrollbar-thumb, .credits-roll::-webkit-scrollbar-thumb,
#bible-verse-list::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

/* ============ GAME SCREEN ============ */
#game-screen {
  background:
    radial-gradient(ellipse at top, #1a1f3a 0%, #07080f 60%, #000 100%);
  flex-direction:column;
  padding: 0;
  align-items:stretch;
  justify-content:flex-start;
}

#hud {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 0.8rem 1.5rem;
  background: linear-gradient(180deg, rgba(20,22,40,0.95) 0%, rgba(15,17,30,0.9) 100%);
  border-bottom: 2px solid var(--panel-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  gap: 1rem;
  flex-wrap:wrap;
}

.hud-left, .hud-center, .hud-right {
  display:flex; gap: 0.8rem; align-items:center;
}

.hud-card {
  background: rgba(30, 34, 56, 0.6);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 5px;
  padding: 0.4rem 0.9rem;
  min-width: 100px;
  text-align:center;
}
.hud-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.hud-value {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--gold-bright);
}
.hud-value.heaven { color: var(--heaven); text-shadow: 0 0 10px var(--heaven); }
.hud-value.hell { color: var(--hell); text-shadow: 0 0 10px var(--hell); }

.health-bar {
  position:relative;
  width: 240px;
  height: 26px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--gold);
  border-radius: 4px;
  overflow:hidden;
}
#health-fill {
  height:100%;
  width:100%;
  background: linear-gradient(90deg, #2f8a2f 0%, #6fcb6f 50%, #b9ff9b 100%);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.3), 0 0 12px rgba(150,255,120,0.4);
  transition: width 0.5s ease;
}
#health-text {
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  font-weight: bold;
  font-size: 0.95rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.hud-btn {
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  font-weight: bold;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(50,50,80,0.7) 0%, rgba(20,20,40,0.9) 100%);
  border: 2px solid var(--gold);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor:pointer;
  transition: all 0.2s ease;
}
.hud-btn:hover {
  color:#fff;
  border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(255,215,100,0.4);
}
.hud-btn.danger { border-color: #b04020; color: #ffb8a0; }
.hud-btn.danger:hover { border-color: #ff7050; box-shadow: 0 0 16px rgba(255,90,40,0.4); }

/* Encounter Layout */
#encounter {
  flex:1;
  display:grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "scene  npcinfo"
    "dialog dialog"
    "choices choices";
  gap: 1rem;
  padding: 1.2rem;
  overflow:hidden;
}

#scene-art {
  grid-area: scene;
  position:relative;
  border: 2px solid var(--panel-border);
  border-radius: 8px;
  background: #000;
  overflow:hidden;
  min-height: 280px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.8), 0 6px 24px rgba(0,0,0,0.6);
}
#scene-bg {
  position:absolute;
  inset:0;
  overflow:hidden;
}
#scene-bg > * {
  width:100%;
  height:100%;
  display:block;
}

.street-scene {
  position:relative;
  width:100%;
  height:100%;
  background: linear-gradient(180deg, var(--scene-sky-top) 0%, var(--scene-sky-mid) 48%, var(--scene-sky-bottom) 100%);
  isolation:isolate;
}
.scene-sky,
.scene-stars,
.scene-moon,
.scene-aurora,
.scene-light-pool,
.scene-lamp,
.scene-skyline,
.scene-fog,
.scene-sidewalk,
.scene-street,
.scene-reflections,
.scene-grit,
.scene-vignette {
  position:absolute;
}
.scene-sky {
  inset:0;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.08) 0%, transparent 18%),
    radial-gradient(circle at 78% 16%, var(--scene-haze) 0%, transparent 22%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 64%, rgba(0,0,0,0.35) 100%);
}
.scene-stars {
  inset:0 0 48%;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.95) 0 1.4px, transparent 2px),
    radial-gradient(circle at 62% 28%, rgba(255,255,255,0.8) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,0.9) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 43% 44%, rgba(255,255,255,0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 62%, rgba(255,255,255,0.85) 0 1.1px, transparent 1.8px);
}
.scene-moon {
  top: 8%;
  right: 15%;
  width: 72px;
  height: 72px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,1) 0%, var(--scene-moon) 40%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 38px rgba(255,255,255,0.18),
    0 0 90px var(--scene-accent-soft);
}
.scene-aurora {
  inset:-8% -12% 44%;
  background:
    radial-gradient(circle at 20% 65%, var(--scene-accent-soft) 0%, transparent 28%),
    radial-gradient(circle at 80% 58%, var(--scene-haze) 0%, transparent 24%),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.06) 0%, transparent 25%);
  filter: blur(18px);
  opacity: 0.9;
}
.scene-light-pool {
  bottom: 17%;
  width: 30%;
  height: 18%;
  background: radial-gradient(ellipse at center, var(--scene-accent-soft) 0%, transparent 72%);
  filter: blur(12px);
  opacity: 0.95;
  z-index: 2;
}
.scene-light-pool.left { left: -4%; }
.scene-light-pool.right { right: -4%; }
.scene-lamp {
  bottom: 24%;
  width: 12px;
  height: 48%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(35,40,48,0.15) 0%, rgba(8,10,16,0.9) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 3;
}
.scene-lamp.left { left: 10%; }
.scene-lamp.right { right: 10%; }
.scene-lamp::before {
  content:"";
  position:absolute;
  top: 10%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,248,227,0.98) 0%, var(--scene-accent) 35%, rgba(255,255,255,0) 72%);
  box-shadow: 0 0 26px var(--scene-accent-strong);
}
.scene-skyline {
  left:-4%;
  width:108%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.86) 100%),
    radial-gradient(circle, var(--scene-window-soft) 0 18%, transparent 24%),
    url("assets/textures/concrete-color.jpg");
  background-size: cover, 34px 28px, 430px 430px;
  background-position: center, 0 0, center;
  background-blend-mode: soft-light, screen, multiply;
  box-shadow: inset 0 -26px 38px rgba(0,0,0,0.6);
}
.scene-skyline.scene-back {
  bottom: 37%;
  height: 39%;
  clip-path: polygon(0 38%, 8% 23%, 15% 32%, 22% 13%, 31% 27%, 38% 10%, 47% 24%, 57% 15%, 66% 33%, 75% 12%, 84% 26%, 92% 18%, 100% 35%, 100% 100%, 0 100%);
  opacity: 0.58;
  filter: blur(0.4px) saturate(0.85);
}
.scene-skyline.scene-front {
  bottom: 26%;
  height: 51%;
  clip-path: polygon(0 46%, 7% 19%, 15% 30%, 23% 11%, 33% 26%, 41% 6%, 50% 33%, 59% 15%, 68% 29%, 76% 10%, 85% 35%, 93% 21%, 100% 42%, 100% 100%, 0 100%);
  opacity: 0.94;
}
.scene-fog {
  inset: 34% -6% 9%;
  background:
    radial-gradient(circle at 50% 82%, rgba(255,255,255,0.06) 0%, transparent 42%),
    linear-gradient(180deg, transparent 0%, var(--scene-haze-deep) 100%);
  filter: blur(20px);
  opacity: 0.62;
  z-index: 4;
}
.scene-sidewalk {
  left:-7%;
  right:-7%;
  bottom: 16%;
  height: 18%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(0,0,0,0.6) 100%),
    url("assets/textures/concrete-color.jpg");
  background-size: cover, 460px 460px;
  background-blend-mode: overlay, multiply;
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: perspective(960px) rotateX(77deg);
  transform-origin: center bottom;
  z-index: 5;
}
.scene-street {
  left:-8%;
  right:-8%;
  bottom:-10%;
  height: 34%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.46) 34%, var(--scene-street-shadow) 100%),
    url("assets/textures/asphalt-color.webp");
  background-size: cover, 560px 560px;
  background-blend-mode: overlay, normal;
  transform: perspective(880px) rotateX(77deg);
  transform-origin: center bottom;
  box-shadow: inset 0 18px 36px rgba(0,0,0,0.72);
  z-index: 6;
}
.scene-street::before {
  content:"";
  position:absolute;
  left: 9%;
  right: 9%;
  top: 46%;
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(245,206,102,0.58) 0 48px, transparent 48px 82px);
  opacity: 0.6;
}
.scene-street::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 19%, transparent 33%, rgba(255,255,255,0.05) 51%, transparent 67%, rgba(255,255,255,0.07) 83%, transparent 100%);
  opacity: 0.45;
  mix-blend-mode: screen;
}
.scene-reflections {
  left: 5%;
  right: 5%;
  bottom: 9%;
  height: 23%;
  background:
    linear-gradient(90deg, transparent 0%, var(--scene-accent-soft) 18%, transparent 30%, transparent 58%, var(--scene-window-bright) 74%, transparent 86%);
  filter: blur(14px);
  opacity: 0.38;
  transform: perspective(880px) rotateX(76deg);
  transform-origin: center bottom;
  z-index: 7;
}
.scene-grit {
  inset:0;
  background: url("assets/textures/concrete-color.jpg") center/400px 400px;
  mix-blend-mode: overlay;
  opacity: 0.08;
  z-index: 8;
}
.scene-vignette {
  inset:0;
  background:
    radial-gradient(circle at 50% 55%, transparent 28%, rgba(0,0,0,0.22) 66%, rgba(0,0,0,0.72) 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.16) 56%, rgba(0,0,0,0.58) 100%);
  z-index: 9;
}

#npc-portrait,
#player-portrait {
  position:absolute;
  bottom:0;
  display:flex;
  align-items:flex-end;
  z-index: 12;
}
#npc-portrait {
  right: 3%;
  width: 34%;
  height: 90%;
}
#player-portrait {
  left: 3%;
  width: 24%;
  height: 74%;
  z-index: 11;
}
.scene-portrait-card {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius: 26px 26px 10px 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.12) 0%, transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.1) 42%, rgba(0,0,0,0.36) 100%),
    rgba(10,12,18,0.8);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.72),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 28px var(--portrait-glow-soft);
  isolation:isolate;
}
.scene-portrait-card.player {
  border-color: rgba(126,214,255,0.32);
}
.scene-portrait-card.npc {
  border-color: rgba(255,255,255,0.14);
}
.scene-portrait-card::before {
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: -12%;
  height: 28%;
  background: radial-gradient(ellipse at center, var(--portrait-glow) 0%, transparent 72%);
  filter: blur(18px);
  opacity: 0.8;
  z-index: 0;
}
.scene-portrait-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 20%, transparent 72%, rgba(0,0,0,0.46) 100%),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.22) 0%, transparent 24%);
  pointer-events:none;
  z-index: 2;
}
.scene-portrait-photo {
  position:absolute;
  inset:0;
  background-position: var(--portrait-pos);
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(var(--portrait-scale));
  filter: saturate(1.08) contrast(1.03) brightness(0.97);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
  z-index: 1;
}
.scene-portrait-fade {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 36%, rgba(0,0,0,0.8) 100%);
  z-index: 3;
}

#npc-info {
  grid-area: npcinfo;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-y:auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.npc-name {
  font-size: 1.4rem;
  color: var(--gold-bright);
  font-weight: bold;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(255,215,100,0.3);
  margin-bottom: 4px;
}
.npc-meta {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--panel-border);
}
.npc-bio {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #d8d4c8;
}

#dialog-box {
  grid-area: dialog;
  background: linear-gradient(180deg, rgba(25,28,45,0.96) 0%, rgba(15,17,30,0.96) 100%);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 1rem 1.3rem 0.95rem;
  min-height: 190px;
  box-shadow:
    0 0 0 1px rgba(255,215,100,0.1) inset,
    0 8px 30px rgba(0,0,0,0.7),
    0 0 24px rgba(212,175,55,0.15);
}
#speaker {
  font-size: 1rem;
  color: var(--gold-bright);
  font-weight: bold;
  letter-spacing: 0.18em;
  margin-bottom: 0.8rem;
}
#dialog-text {
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
  min-height: 110px;
  max-height: 230px;
  overflow-y:auto;
  padding-right: 0.3rem;
}
.dialog-line {
  max-width: 86%;
  padding: 0.8rem 0.95rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  animation: dialogReveal 0.24s ease;
}
.dialog-line.player {
  margin-left:auto;
  background: linear-gradient(180deg, rgba(20,52,88,0.74) 0%, rgba(12,22,40,0.94) 100%);
  border-color: rgba(126,214,255,0.34);
}
.dialog-line.npc {
  margin-right:auto;
  background: linear-gradient(180deg, rgba(56,48,24,0.48) 0%, rgba(18,20,30,0.94) 100%);
  border-color: rgba(212,175,55,0.24);
}
.dialog-line.prayer,
.dialog-line.scripture {
  margin-left:auto;
  background: linear-gradient(180deg, rgba(68,54,18,0.72) 0%, rgba(23,20,10,0.96) 100%);
  border-color: rgba(255,215,107,0.42);
  box-shadow: 0 0 20px rgba(255,215,107,0.08), 0 10px 26px rgba(0,0,0,0.34);
}
.dialog-line-speaker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: var(--text-dim);
}
.dialog-line.player .dialog-line-speaker { color: var(--heaven-glow); }
.dialog-line.npc .dialog-line-speaker { color: var(--gold-bright); }
.dialog-line.prayer .dialog-line-speaker,
.dialog-line.scripture .dialog-line-speaker { color: #ffe9a0; }
.dialog-line-copy {
  font-size: 1rem;
  line-height: 1.72;
  color: #f1ede0;
}
.dialog-line-copy em {
  color: #fff3bd;
  font-style: italic;
}
@keyframes dialogReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

#choices {
  grid-area: choices;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
}
.choice-btn {
  font-family: 'Georgia', serif;
  font-size: 1rem;
  color: var(--text-main);
  background: linear-gradient(180deg, rgba(40,44,70,0.85) 0%, rgba(20,22,40,0.95) 100%);
  border: 2px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  cursor:pointer;
  transition: all 0.2s ease;
  text-align:left;
  line-height: 1.4;
}
.choice-btn:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(60,55,30,0.85) 0%, rgba(40,30,10,0.95) 100%);
  color:#fff;
  transform: translateX(4px);
  box-shadow: 0 0 16px rgba(255,215,100,0.25);
}
.choice-btn.bible { border-color: var(--heaven); color: var(--heaven-glow); }
.choice-btn.bible:hover { background: linear-gradient(180deg, rgba(20,60,90,0.8) 0%, rgba(10,30,50,0.95) 100%); box-shadow: 0 0 16px rgba(126,214,255,0.4); }
.choice-btn.aggressive { border-color: #b04020; color: #ffb8a0; }
.choice-btn.aggressive:hover { background: linear-gradient(180deg, rgba(80,30,15,0.8) 0%, rgba(40,15,10,0.95) 100%); box-shadow: 0 0 16px rgba(255,90,40,0.4); }

/* ============ MODALS ============ */
.modal {
  display:none;
  position:fixed; inset:0;
  z-index:100;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  align-items:center;
  justify-content:center;
  padding: 2rem;
}
.modal.open { display:flex; }

.modal-box {
  background:
    linear-gradient(180deg, rgba(25,28,45,0.98) 0%, rgba(10,12,22,0.98) 100%);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 2rem 2.5rem;
  width: min(720px, 95%);
  max-height: 90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:
    0 0 0 1px rgba(255,215,100,0.1) inset,
    0 20px 80px rgba(0,0,0,0.9),
    0 0 60px rgba(212,175,55,0.3);
}
.modal-box.small { width: min(420px, 90%); }
.modal-box h2 {
  color: var(--gold-bright);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  text-shadow: 0 0 12px rgba(255,215,100,0.5);
}
.modal-box p { margin-bottom: 1rem; line-height: 1.6; }

/* Bible Modal */
.bible-box {
  width: min(640px, 95%);
}
.bible-cover {
  width: 120px;
  height: 120px;
  margin: 0 auto 0.5rem;
  filter: drop-shadow(0 6px 20px rgba(255,215,100,0.4));
}
.bible-title {
  letter-spacing: 0.4em;
  margin-bottom: 0;
}
.bible-sub {
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.bible-search {
  width:100%;
  margin-bottom: 1rem;
}
.bible-search input {
  width:100%;
  padding: 0.7rem 1rem;
  font-family: Georgia, serif;
  font-size: 1rem;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--text-main);
}
.bible-search input:focus { outline:none; border-color: var(--gold-bright); box-shadow: 0 0 12px rgba(255,215,100,0.3); }

#bible-verse-list {
  width:100%;
  max-height: 50vh;
  overflow-y:auto;
  padding-right: 0.6rem;
  margin-bottom: 1rem;
  text-align:left;
}

.verse-item {
  background: rgba(20,30,50,0.5);
  border: 1px solid rgba(126,214,255,0.3);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
  cursor:pointer;
  transition: all 0.2s ease;
}
.verse-item:hover {
  background: rgba(40,60,100,0.6);
  border-color: var(--heaven);
  transform: translateX(4px);
  box-shadow: 0 0 16px rgba(126,214,255,0.3);
}
.verse-item.recommended {
  border-color: rgba(255,215,107,0.58);
  box-shadow: 0 0 0 1px rgba(255,215,107,0.08) inset;
}
.verse-ref-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 0.8rem;
  margin-bottom: 0.35rem;
}
.verse-badges {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap: 0.35rem;
}
.verse-badge {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: rgba(90,110,160,0.22);
  border: 1px solid rgba(126,214,255,0.28);
  color: #d7ebff;
}
.verse-badge.recommended {
  background: rgba(90,70,18,0.34);
  border-color: rgba(255,215,107,0.5);
  color: #ffe9a0;
}
.verse-badge.subtle {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: #c9c7bd;
}
.verse-ref {
  color: var(--heaven);
  font-weight: bold;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.verse-text {
  color: #e0ecf5;
  font-style: italic;
  line-height: 1.6;
}

/* Judgment Modal */
#judgment-art {
  width: 200px; height: 200px;
  margin-bottom: 1rem;
}
#judgment-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.judgment-box.heaven #judgment-title { color: var(--heaven); text-shadow: 0 0 20px var(--heaven); }
.judgment-box.hell #judgment-title { color: var(--hell); text-shadow: 0 0 20px var(--hell); }
#judgment-death {
  color: #ddd;
  font-style: italic;
  font-size: 1.05rem;
}
#judgment-destination {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  margin: 1rem 0;
}
.judgment-box.heaven #judgment-destination { color: var(--heaven); }
.judgment-box.hell #judgment-destination { color: var(--hell); }

#gameover-stats {
  width:100%;
  margin: 1rem 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stat-card {
  background: rgba(30,34,56,0.6);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 1rem;
}
.stat-card .num { font-size: 2rem; font-weight: bold; color: var(--gold-bright); }
.stat-card .lbl { font-size: 0.85rem; letter-spacing: 0.15em; color: var(--text-dim); }

@media (max-width: 900px) {
  #encounter {
    grid-template-columns: 1fr;
    grid-template-areas: "scene" "npcinfo" "dialog" "choices";
  }
  #hud { gap: 0.5rem; }
  .health-bar { width: 160px; }
  #scene-art { min-height: 360px; }
  #npc-portrait {
    width: 44%;
    height: 86%;
    right: 2%;
  }
  #player-portrait {
    width: 30%;
    height: 68%;
    left: 2%;
  }
  .scene-moon {
    width: 58px;
    height: 58px;
  }
  .dialog-line { max-width: 92%; }
  #dialog-text { max-height: 260px; }
}