:root {
  color-scheme: dark;
  font-family: "Tahoma", "Arial", sans-serif;
  background: #102341;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(78, 153, 219, .3), transparent 42%),
    linear-gradient(145deg, #0b1c37, #1b3d67);
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
}

button { font: inherit; }

.app-shell {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

.stage-wrap {
  width: min(100%, calc((100svh - 16px) * 16 / 9));
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: clamp(8px, 1.1vw, 22px);
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255,255,255,.18);
  background: #dff1ff;
}

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  direction: ltr;
  user-select: none;
  -webkit-user-select: none;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease;
  overflow: hidden;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.placed, .art-button {
  position: absolute;
}

.placed {
  pointer-events: none;
}

.art-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 20;
  transition: transform .16s ease, filter .16s ease, opacity .2s ease;
}

.art-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.art-button:hover:not(:disabled),
.art-button:focus-visible:not(:disabled) {
  transform: translateY(-3%) scale(1.06);
  filter: brightness(1.08);
}

.art-button:active:not(:disabled) { transform: scale(.96); }
.art-button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; border-radius: 50%; }
.art-button:disabled { opacity: .45; cursor: default; }

.start-book { left: 16.15%; top: 72.59%; width: 66.35%; height: 24.26%; z-index: 3; }
.title-button { left: 26.2%; top: 28.43%; width: 44.69%; height: 39.07%; z-index: 9; }
.title-button img { animation: title-breathe 3.4s ease-in-out infinite; }
.cover-feather { left: 39.22%; top: 2.59%; width: 22.08%; height: 35.74%; z-index: 8; animation: feather-float 3.8s ease-in-out infinite; }
.trail-pink { left: 28.8%; top: 5.28%; width: 41.93%; height: 33.8%; z-index: 5; animation: trail-pulse 2.8s ease-in-out infinite; }
.trail-blue { left: 35.99%; top: -3.33%; width: 21.09%; height: 43.06%; z-index: 4; animation: trail-pulse 3.3s ease-in-out infinite reverse; }
.sparkle-pink { left: 24.38%; top: 11.57%; width: 17.4%; height: 26.39%; z-index: 6; animation: sparkle 1.9s ease-in-out infinite; }
.sparkle-blue { left: 59.11%; top: -.74%; width: 10.57%; height: 21.39%; z-index: 7; animation: sparkle 2.2s .5s ease-in-out infinite; }
.cover-noura { left: 79.01%; top: 9.63%; width: 9.53%; height: 22.41%; z-index: 8; }
.cover-farah { left: 74.22%; top: 54.07%; width: 19.06%; height: 32.31%; z-index: 7; }
.cover-fareed { left: 12.03%; top: 64.91%; width: 12.34%; height: 20.28%; z-index: 7; }
.start-button { left: 39.32%; top: 66.94%; width: 19.74%; height: 15.83%; z-index: 12; animation: start-invite 1.7s ease-in-out infinite; }
.cover-home { left: 4.22%; top: 5.83%; width: 6.41%; height: 11.3%; }
.cover-sound { left: 12.03%; top: 5.83%; width: 6.41%; height: 11.39%; }
.cover-back { left: 4.64%; top: 82.87%; width: 6.35%; height: 11.2%; }
.cover-next { left: 89.43%; top: 82.87%; width: 6.35%; height: 11.2%; }

.audio-note {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 3.5%;
  translate: -50% 15px;
  margin: 0;
  padding: .55em 1em;
  border-radius: 999px;
  color: #21455f;
  background: rgba(255,255,255,.92);
  font-size: clamp(10px, 1.15vw, 20px);
  direction: rtl;
  opacity: 0;
  transition: opacity .2s, translate .2s;
  box-shadow: 0 6px 18px rgba(40, 80, 110, .22);
}

.audio-note.show { opacity: 1; translate: -50% 0; }

.character-idle { animation: character-idle 2.7s ease-in-out infinite; transform-origin: 50% 100%; }
.delay-a { animation-delay: -.7s; }
.delay-b { animation-delay: -1.4s; }

.sunbeam {
  position: absolute;
  inset: 0;
  background: linear-gradient(119deg, transparent 25%, rgba(255,245,190,.22) 42%, transparent 58%);
  animation: sun-sweep 8s ease-in-out infinite;
  pointer-events: none;
}

.shelf-feather {
  left: 84.2%;
  top: 16.5%;
  width: 8.8%;
  height: 19%;
  object-fit: contain;
  transform: rotate(18deg);
  z-index: 4;
}

.magic-glow {
  position: absolute;
  left: 85.6%;
  top: 21%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, #ffe77b 14%, #ff9f1c 30%, transparent 66%);
  filter: blur(2px);
  z-index: 5;
}

.story-screen.phase-glow .magic-glow { animation: double-glow 2.1s ease-in-out forwards; }

.flying-spark {
  position: absolute;
  left: 88%;
  top: 24%;
  width: 2.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  z-index: 16;
  background: radial-gradient(circle, #fff 0 13%, #fff27d 18%, #ff9f1c 43%, transparent 69%);
  filter: drop-shadow(0 0 9px #ff9f1c);
}

.story-screen.phase-flight .flying-spark {
  animation: spark-to-box 2.2s cubic-bezier(.45,.1,.35,1) forwards;
}

.story-character, .p1-box {
  opacity: .7;
  filter: saturate(.75) brightness(.94);
  transition: opacity .35s, filter .35s, transform .35s;
  transform-origin: 50% 100%;
  z-index: 8;
}

.p1-noura { left: 36.46%; top: 44.54%; width: 4.95%; height: 9.81%; }
.p1-faris { left: 30.89%; top: 69.35%; width: 10.63%; height: 12.41%; }
.p1-box { left: 43.49%; top: 64.07%; width: 10.57%; height: 18.06%; }
.p1-farah { left: 55.05%; top: 67.13%; width: 8.85%; height: 14.35%; }
.p1-fareed { left: 64.84%; top: 72.04%; width: 5.57%; height: 9.26%; }

.story-screen.box-opened .story-character,
.story-screen.box-opened .p1-box {
  opacity: 1;
  filter: none;
}

.story-screen.box-opened .p1-box { animation: box-pop .65s cubic-bezier(.2,1.5,.4,1); }
.story-screen.box-opened .p1-faris { animation: character-jump .7s .18s both; }
.story-screen.box-opened .p1-farah { animation: character-jump .72s .28s both; }
.story-screen.box-opened .p1-fareed { animation: glasses-nod .75s .4s both; }
.story-screen.box-opened .p1-noura { animation: spin-in .85s .22s both; }

.welcome-bubble, .arrived-bubble {
  opacity: 0;
  transform: scale(.72);
  transform-origin: 50% 100%;
  transition: opacity .28s, transform .35s cubic-bezier(.2,1.4,.4,1);
  z-index: 10;
}

.welcome-bubble { left: 24.79%; top: 18.61%; width: 39.11%; height: 32.41%; }
.arrived-bubble { left: 51.98%; top: 49.91%; width: 20.31%; height: 17.13%; }
.arrived-bubble.show, .welcome-bubble.show { opacity: 1; transform: scale(1); }

.box-hotspot {
  position: absolute;
  left: 42%;
  top: 62%;
  width: 14%;
  height: 23%;
  z-index: 18;
  cursor: pointer;
  border: 4px dashed rgba(255, 159, 28, .9);
  border-radius: 42%;
  background: rgba(255,255,255,.06);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s;
  animation: hotspot-pulse 1.35s ease-in-out infinite;
}

.box-hotspot span {
  position: absolute;
  left: 50%;
  bottom: -18%;
  translate: -50% 0;
  white-space: nowrap;
  padding: .45em .8em;
  border-radius: 999px;
  color: #593100;
  background: #fff7c7;
  font-weight: 800;
  font-size: clamp(10px, 1.1vw, 19px);
}

.box-hotspot.ready { opacity: 1; visibility: visible; }
.box-hotspot:focus-visible { outline: 5px solid white; outline-offset: 4px; }

.spark-hotspot {
  position: absolute;
  left: 72%;
  top: 43%;
  width: 7%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 19;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
}

.spark-hotspot.ready { opacity: 1; visibility: visible; }
.spark-core {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffe66d 22%, #ff8c1a 60%, #ff4b00 100%);
  filter: drop-shadow(0 0 10px #ffac2f);
  animation: spark-beat .9s ease-in-out infinite;
}
.spark-ring {
  position: absolute;
  inset: 8%;
  border: 4px solid rgba(255,177,48,.75);
  border-radius: 50%;
  animation: ring-out 1.2s ease-out infinite;
}

.prompt {
  position: absolute;
  left: 50%;
  bottom: 12%;
  translate: -50% 16px;
  z-index: 25;
  min-width: 22%;
  max-width: 62%;
  padding: .65em 1.1em;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 999px;
  color: #315019;
  background: rgba(255, 252, 221, .95);
  box-shadow: 0 8px 25px rgba(80, 65, 15, .26);
  text-align: center;
  direction: rtl;
  font-size: clamp(11px, 1.45vw, 25px);
  font-weight: 800;
  opacity: 0;
  transition: opacity .25s, translate .25s;
}
.prompt.show { opacity: 1; translate: -50% 0; }

.p1-home { left: 3.91%; top: 5.83%; width: 6.41%; height: 11.3%; }
.p1-pause { left: 11.67%; top: 5.83%; width: 6.46%; height: 11.39%; }
.p1-sound { left: 19.38%; top: 5.83%; width: 6.41%; height: 11.39%; }
.p1-exit { left: 83.65%; top: 6.02%; width: 13.23%; height: 10.37%; }
.p1-back { left: 4.32%; top: 82.87%; width: 6.35%; height: 11.2%; }
.p1-next { left: 89.11%; top: 82.87%; width: 6.35%; height: 11.2%; }

.story-screen.is-paused * { animation-play-state: paused !important; }
.story-screen.is-paused::after {
  content: "المشهد متوقف";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 40;
  color: white;
  background: rgba(19, 38, 70, .38);
  font-size: clamp(20px, 3vw, 54px);
  font-weight: 900;
  text-shadow: 0 3px 8px rgba(0,0,0,.4);
  pointer-events: none;
}

.page-turn {
  position: absolute;
  inset: -20%;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateX(100%) rotateY(-35deg);
  transform-origin: left center;
  background: linear-gradient(100deg, rgba(255,255,255,0), #fff8d7 46%, #e7d7ae 52%, rgba(255,255,255,0) 72%);
}
.page-turn.go { animation: page-turn 1.05s ease-in-out forwards; }

.completion {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 5%;
  opacity: 0;
  visibility: hidden;
  background: rgba(19, 46, 75, .46);
  backdrop-filter: blur(5px);
  transition: opacity .35s;
  direction: rtl;
}
.completion.show { opacity: 1; visibility: visible; }
.completion-card {
  width: min(72%, 760px);
  padding: clamp(18px, 4vw, 52px);
  border: clamp(4px, .55vw, 10px) solid #fff;
  border-radius: clamp(22px, 3vw, 50px);
  color: #28451a;
  background: linear-gradient(160deg, #fffef1, #f7f2bd);
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
  text-align: center;
}
.completion-feather { font-size: clamp(38px, 6vw, 100px); }
.completion h1 { margin: .1em 0; color: #ec6a00; font-size: clamp(23px, 4vw, 66px); }
.completion p { margin: .6em auto 1em; max-width: 28em; font-size: clamp(14px, 1.7vw, 28px); line-height: 1.6; }
.completion button {
  margin: .35em;
  padding: .6em 1.1em;
  border: 3px solid #fff;
  border-radius: 999px;
  color: white;
  background: linear-gradient(#ffae22, #ef6500);
  box-shadow: 0 5px 0 #b94300;
  cursor: pointer;
  font-size: clamp(13px, 1.45vw, 24px);
  font-weight: 800;
}

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  color: #315019;
  background: linear-gradient(145deg, #fbffd8, #c6efb4);
  direction: rtl;
  transition: opacity .5s, visibility .5s;
}
.loading-screen.done { opacity: 0; visibility: hidden; }
.loading-screen img { width: min(35vw, 320px); animation: feather-float 1.7s ease-in-out infinite; }
.loading-screen p { margin: 0; font-size: clamp(18px, 2vw, 34px); font-weight: 900; }
.loading-bar { width: min(50vw, 420px); height: 14px; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.8); }
.loading-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff7900,#ffcf33); transition: width .2s; }

.rotate-hint {
  display: none;
  margin: 12px 0 0;
  color: #fff;
  text-align: center;
  direction: rtl;
  font-size: 15px;
}

@media (orientation: portrait) and (max-width: 900px) {
  .app-shell { align-content: center; }
  .rotate-hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@keyframes title-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes feather-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3.5%) rotate(2deg); } }
@keyframes trail-pulse { 0%,100% { opacity: .48; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.035); } }
@keyframes sparkle { 0%,100% { opacity: .45; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.08) rotate(12deg); } }
@keyframes character-idle { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2.2%) rotate(1deg); } }
@keyframes start-invite { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.12); } }
@keyframes sun-sweep { 0%,100% { transform: translateX(-20%); opacity: .2; } 50% { transform: translateX(20%); opacity: .65; } }
@keyframes double-glow { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.2); } 36% { opacity: .2; transform: scale(.75); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes spark-to-box {
  0% { opacity: 0; transform: translate(0,0) scale(.4); }
  18% { opacity: 1; transform: translate(-260%, -70%) scale(1); }
  55% { opacity: 1; transform: translate(-760%, 360%) scale(.8); }
  85% { opacity: 1; transform: translate(-1330%, 980%) scale(1.1); }
  100% { opacity: 0; transform: translate(-1470%, 1120%) scale(.35); }
}
@keyframes hotspot-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,158,27,.75); } 50% { box-shadow: 0 0 0 12px rgba(255,158,27,0); } }
@keyframes box-pop { 0% { transform: scale(.85) rotate(-3deg); } 45% { transform: scale(1.15) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes character-jump { 0% { transform: translateY(18%) scale(.88); } 55% { transform: translateY(-22%) scale(1.08); } 100% { transform: translateY(0) scale(1); } }
@keyframes glasses-nod { 0% { transform: rotate(0); } 38% { transform: rotate(-8deg) translateY(-8%); } 100% { transform: rotate(0); } }
@keyframes spin-in { 0% { transform: scale(.7) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes spark-beat { 0%,100% { transform: scale(.8); } 50% { transform: scale(1.3); } }
@keyframes ring-out { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes page-turn { 0% { opacity: 0; transform: translateX(100%) rotateY(-35deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(-100%) rotateY(35deg); } }