:root {
  --board: #f7f3ea;
  --board-line: #e5dcc8;
  --ink: #1a2430;
  --coptic-red: #9e2a2f;
  --coptic-blue: #1f4d6e;
  --coptic-green: #2f6b4f;
  --gold: #c9a227;
  --marker-teal: #2a8f9e;
  --marker-orange: #e07a3a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: #2a3340;
  color: var(--ink);
  font-family: "Cairo", Tahoma, sans-serif;
}

.shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0.6rem;
}

.stage {
  position: relative;
  width: min(1180px, 100%);
  aspect-ratio: 16 / 10;
  max-height: calc(100dvh - 1.2rem);
  border-radius: 14px;
  overflow: hidden;
  background: var(--board);
  box-shadow:
    0 0 0 3px #d8c9a8,
    0 0 0 8px #3a4554,
    0 30px 70px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: stretch;
}

/* Whiteboard surface */
.board-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(42, 143, 158, 0.08), transparent 40%),
    radial-gradient(ellipse at 85% 20%, rgba(158, 42, 47, 0.07), transparent 35%),
    radial-gradient(ellipse at 50% 90%, rgba(201, 162, 39, 0.1), transparent 45%),
    linear-gradient(180deg, #fbf8f1, #f3ebdc);
}
.board-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(var(--board-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--board-line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  pointer-events: none;
}
.board-frame {
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(158, 42, 47, 0.18);
  border-radius: 8px;
  pointer-events: none;
}
.board-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(31, 77, 110, 0.15);
  border-radius: 6px;
}

/* مساحة الرسم — منتصف الواجهة بعرض كامل */
.canvas {
  position: relative;
  z-index: 1;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0.15rem 0.4rem 0;
}
.world {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}
.world .actor {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.world .draw-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Marker tray / colorful accents */
.markers {
  position: absolute;
  bottom: 18%;
  left: 1.2rem;
  display: flex;
  gap: 0.35rem;
  z-index: 2;
  opacity: 0.55;
  pointer-events: none;
}
.markers span {
  width: 10px;
  height: 36px;
  border-radius: 3px 3px 2px 2px;
}
.markers .r { background: var(--coptic-red); }
.markers .b { background: var(--coptic-blue); }
.markers .g { background: var(--coptic-green); }
.markers .t { background: var(--marker-teal); }
.markers .y { background: var(--gold); }

.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.25rem;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; min-width: 0; }
.chip {
  justify-self: start;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--coptic-red);
  background: transparent;
  border: 0;
  padding: 0.2rem 0;
  text-shadow: 0 1px 0 rgba(247, 243, 234, 0.9), 0 0 12px rgba(247, 243, 234, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hint {
  justify-self: center;
  position: static;
  inset: auto;
  top: auto;
  z-index: auto;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(26, 36, 48, 0.42);
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}
.scene-pills {
  display: flex;
  gap: 0.3rem;
  justify-self: end;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.scene-pills button {
  width: 26px; height: 7px; border: 0; border-radius: 999px;
  background: rgba(26, 36, 48, 0.15); cursor: pointer; padding: 0;
}
.scene-pills button.active {
  width: 40px;
  background: linear-gradient(90deg, var(--coptic-red), var(--gold));
}

/* نص متمركز تحت الرسم — لا يتداخل معه */
.hud-copy,
.hud-copy.pos-center,
.hud-copy.pos-tr,
.hud-copy.pos-tl,
.hud-copy.pos-mr,
.hud-copy.pos-ml,
.hud-copy.pos-br,
.hud-copy.pos-bl {
  position: relative;
  z-index: 4;
  width: min(720px, calc(100% - 2rem));
  max-width: min(720px, calc(100% - 2rem));
  margin: 0.15rem auto 0.25rem;
  padding: 0.15rem 0.75rem 0.35rem;
  text-align: center;
  inset: auto;
  top: auto;
  bottom: auto;
  background: none;
  border: 0;
  transition: opacity 0.35s ease;
}
.hud-bar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.35rem 1rem 0.75rem;
  pointer-events: none;
}
.hud-bar > * { pointer-events: auto; }
.eyebrow {
  margin: 0;
  color: var(--coptic-red);
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(247, 243, 234, 0.95), 0 0 14px rgba(247, 243, 234, 0.85);
}
.title {
  margin: 0.2rem auto 0.4rem;
  font-family: "Amiri", serif;
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  line-height: 1.28;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(247, 243, 234, 0.95), 0 0 18px rgba(247, 243, 234, 0.9);
}
.body {
  margin: 0 auto;
  white-space: pre-line;
  line-height: 1.75;
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  color: rgba(26, 36, 48, 0.88);
  max-width: 42rem;
  max-height: none;
  overflow: visible;
  text-shadow: 0 1px 0 rgba(247, 243, 234, 0.95), 0 0 14px rgba(247, 243, 234, 0.85);
}
.body.verse {
  color: var(--coptic-blue);
  font-family: "Amiri", serif;
  font-size: clamp(1.3rem, 2.5vw, 1.55rem);
}
.dots { display: flex; gap: 0.3rem; align-items: center; }
.dot {
  width: 8px; height: 8px; border: 0; border-radius: 50%;
  background: rgba(26, 36, 48, 0.22); cursor: pointer; padding: 0;
  box-shadow: 0 0 0 3px rgba(247, 243, 234, 0.55);
}
.dot.active { width: 20px; border-radius: 999px; background: var(--coptic-red); }
.dot.done { background: rgba(158, 42, 47, 0.4); }
.controls { display: flex; gap: 0.4rem; }
.btn {
  border: 1px solid rgba(26, 36, 48, 0.22);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  min-height: 40px;
  padding: 0.35rem 0.95rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(247, 243, 234, 0.9);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: rgba(26, 36, 48, 0.06); }
.btn.primary {
  background: var(--coptic-red);
  color: #fff;
  border-color: transparent;
  text-shadow: none;
  box-shadow: 0 6px 16px rgba(158, 42, 47, 0.25);
}
.btn.primary:hover { filter: brightness(1.05); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 820px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 0.35rem;
  }
  .chip,
  .hint,
  .scene-pills {
    justify-self: center;
  }
  .hint {
    order: 3;
    font-size: 0.6rem;
  }
  .scene-pills {
    justify-content: center;
  }
  .stage {
    aspect-ratio: 10 / 15;
    max-height: none;
    min-height: 88dvh;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .hud-copy,
  .hud-copy.pos-center,
  .hud-copy.pos-tr,
  .hud-copy.pos-tl,
  .hud-copy.pos-mr,
  .hud-copy.pos-ml,
  .hud-copy.pos-br,
  .hud-copy.pos-bl {
    width: calc(100% - 1.5rem);
    max-width: calc(100% - 1.5rem);
    margin-inline: auto;
  }
  .markers { display: none; }
}

/* ——— حركة خلفية خفيفة (لا تلمس الشخصيات) ——— */
@keyframes flame-flicker {
  0%, 100% { transform: scale(1, 1); opacity: 1; }
  35% { transform: scale(0.92, 1.1); opacity: 0.88; }
  65% { transform: scale(1.06, 0.94); opacity: 1; }
}
@keyframes spring-ripple {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.05, 0.96); }
}
@keyframes amb-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  50% { transform: translate(5px, -9px); opacity: 0.5; }
}

.flame-a,
.flame-b {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: flame-flicker 0.85s ease-in-out infinite;
}
.flame-b { animation-duration: 0.65s; animation-delay: 0.12s; }

.spring-water {
  transform-box: fill-box;
  transform-origin: center;
  animation: spring-ripple 2.4s ease-in-out infinite;
}
.spring-arc {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: spring-ripple 1.9s ease-in-out infinite;
  animation-delay: 0.35s;
}

.amb-mote {
  animation: amb-float 3.6s ease-in-out infinite;
  pointer-events: none;
}
.amb-mote:nth-child(2) { animation-duration: 4.2s; animation-delay: 0.6s; }
.amb-mote:nth-child(3) { animation-duration: 3.2s; animation-delay: 1.1s; }
.amb-mote:nth-child(4) { animation-duration: 4.8s; animation-delay: 0.3s; }
.amb-mote:nth-child(5) { animation-duration: 3.9s; animation-delay: 1.5s; }
.amb-mote:nth-child(6) { animation-duration: 4.4s; animation-delay: 0.9s; }

#ambient {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .world * { animation: none !important; transition: none !important; }
}