/* =========================================================================
   Aswar playable — styles. Portrait 1080×1920 logical stage, letterboxed in
   landscape (PRD §2). All animation is CSS; JS only toggles classes.
   Brand palette: navy #0C1430 / #2A3D71, cyan #40B8E9, yellow #F5C416,
   teal #41B2B2, light #DBE5F3, red #E5484D.
   ========================================================================= */

/* Brand typeface (Frutiger LT Arabic) — shipped per owner instruction,
   overriding the PRD §2 system-stack default. */
@font-face {
  font-family: "Frutiger LT Arabic";
  src: url("assets/fonts/FrutigerLTArabic-55Roman.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Frutiger LT Arabic";
  src: url("assets/fonts/FrutigerLTArabic-65Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Frutiger LT Arabic";
  src: url("assets/fonts/FrutigerLTArabic-75Black.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* Brand palette only (Aswar Brand Guidelines v2.3); tints are alpha values
   of these same hexes. */
:root {
  --navy-dark: #0C1430;
  --navy: #2A3D71;
  --cyan: #40B8E9;
  --yellow: #F5C416;
  --teal: #41B2B2;
  --light: #DBE5F3;
  --red: #E5484D;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  display: flex;
  background: var(--navy-dark); /* landscape letterbox backdrop */
  font-family: "Frutiger LT Arabic", -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- portrait stage -------------------------------------------------- */
#stage {
  position: relative;
  margin: auto;
  width: min(100vw, 56.25vh);
  height: min(100vh, 177.78vw);
  width: min(100vw, 56.25dvh);
  height: min(100dvh, 177.78vw);
  overflow: hidden;
  background: var(--navy-dark);
  touch-action: manipulation;
  /* JS sets font-size ∝ stage width; everything below scales in em */
}

/* ---- scene plates ----------------------------------------------------- */
.plate {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0;
}
.plate.visible { opacity: 1; }

#platePlaceholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2em;
  background: linear-gradient(180deg, var(--navy) 0%, rgba(64,184,233,.75) 100%);
  z-index: 0;
  text-align: center;
}
#platePlaceholder.on { display: flex; }
#platePlaceholder.win { background: linear-gradient(180deg, var(--teal) 0%, var(--cyan) 100%); }
#platePhLabel {
  color: #fff;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.8;
  text-shadow: 0 2px 8px rgba(12,20,48,.4);
  background: rgba(12,20,48,.35);
  border: .12em dashed rgba(255,255,255,.6);
  border-radius: .8em;
  padding: 1em 1.2em;
}

/* ---- screens ---------------------------------------------------------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 1;
}
.screen.active { display: block; }

.intro-bg {
  background: linear-gradient(175deg, var(--navy-dark) 0%, var(--navy-dark) 40%, var(--navy) 85%, var(--cyan) 160%);
}

/* floating blurred drift circles (INTRO/M2/END ambience) */
.drift {
  position: absolute;
  border-radius: 50%;
  filter: blur(2.2em);
  opacity: .3;
  animation: drift 11s ease-in-out infinite alternate;
  pointer-events: none;
}
.d1 { width: 11em; height: 11em; background: var(--cyan);  top: 8%;  right: -3em; }
.d2 { width: 8em;  height: 8em;  background: var(--teal);  bottom: 18%; left: -2.5em; animation-delay: -4s; }
.d3 { width: 6em;  height: 6em;  background: var(--yellow); top: 42%; left: 18%; opacity: .18; animation-delay: -8s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(1.6em, 2.4em) scale(1.15); }
}

/* ---- INTRO ------------------------------------------------------------ */
#scrIntro { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 2em 1.5em; text-align: center; }
#scrIntro.active { display: flex; }

#introLogo { width: 44%; max-width: 14em; margin-bottom: 1.6em; }

#introTitle {
  color: #fff;
  font-size: 2em;
  font-weight: 800;
  line-height: 1.65;
  margin-bottom: 1.4em;
  text-shadow: 0 .1em .9em rgba(64,184,233,.35);
}

.btn-primary {
  display: block;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)) var(--yellow);
  color: var(--navy-dark);
  font-family: inherit;
  font-size: 1.45em;
  font-weight: 800;
  padding: .75em 2.2em;
  border-radius: 3em;
  box-shadow: 0 .35em 1.2em rgba(245,196,22,.45), inset 0 -0.15em 0 rgba(12,20,48,.12);
}
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ---- mission header toast --------------------------------------------- */
#toastHeader {
  position: absolute;
  top: 40%;
  left: 8%;
  right: 8%;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .7em;
  pointer-events: none;
}
#toastHeader.on { display: flex; animation: toastIn .35s ease both; }
#toastHeader .chip {
  background: var(--navy-dark);
  color: var(--yellow);
  border: .1em solid var(--cyan);
  font-size: 1.5em;
  font-weight: 800;
  padding: .45em 1.4em;
  border-radius: 3em;
  box-shadow: 0 .4em 1.4em rgba(12,20,48,.45);
}
#toastHeader .brief {
  background: rgba(255,255,255,.96);
  color: var(--navy-dark);
  font-size: 1.1em;
  font-weight: 700;
  padding: .5em 1.1em;
  border-radius: 1em;
  box-shadow: 0 .3em 1em rgba(12,20,48,.3);
  white-space: pre-line; /* copy carries its own line breaks */
  text-align: center;
  line-height: 1.9;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-1.2em); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- M1 overlays ------------------------------------------------------- */
#glow {
  position: absolute;
  width: 9em; height: 9em;
  margin: -4.5em 0 0 -4.5em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,196,22,.55) 0%, rgba(245,196,22,.18) 45%, transparent 70%);
  animation: glowPulse 1.6s ease-in-out infinite;
  pointer-events: none;
  display: none;
  z-index: 2;
}
#glow.on { display: block; }
@keyframes glowPulse {
  0%, 100% { transform: scale(.85); opacity: .75; }
  50%      { transform: scale(1.15); opacity: 1; }
}

#bubbleQ {
  position: absolute;
  width: 2.4em; height: 2.4em;
  margin: -1.2em 0 0 -1.2em;
  background: #fff;
  border-radius: 50% 50% 50% 12%;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 1.3em;
  font-weight: 800;
  box-shadow: 0 .2em .8em rgba(12,20,48,.25);
  animation: bob 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
#bubbleQ.on { display: flex; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.45em); }
}

#speech {
  position: absolute;
  max-width: 46%;
  background: #fff;
  color: var(--navy-dark);
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.5;
  padding: .6em 1em;
  border-radius: 1.1em 1.1em .2em 1.1em;
  box-shadow: 0 .25em 1em rgba(12,20,48,.3);
  display: none;
  z-index: 3;
  pointer-events: none;
}
#speech.on { display: block; animation: popIn .25s ease both; }
@keyframes popIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- product tray (bottom sheet) --------------------------------------- */
#tray {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 2.5%;
  z-index: 4;
  display: none;
  gap: .6em;
  padding: .7em;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 1.4em;
  box-shadow: 0 .5em 2em rgba(12,20,48,.35);
}
#tray.on { display: flex; animation: trayUp .4s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes trayUp {
  from { opacity: 0; transform: translateY(45%); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 5.5em;                /* ≥88px logical tap target (PRD §3.2) */
  border: .22em solid transparent;
  border-radius: 1em;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  padding: .55em .35em .5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4em;
  box-shadow: 0 .15em .6em rgba(12,20,48,.18);
}
.card img {
  width: 3.6em; height: 3.6em;
  object-fit: contain;
  pointer-events: none;
}
.card .pname {
  font-size: .78em;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}
.card.correct { border-color: var(--teal); box-shadow: 0 0 1.2em rgba(65,178,178,.85); }
.card.wrong   { border-color: var(--red);   animation: shake .45s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-.45em); }
  40% { transform: translateX(.4em); }
  60% { transform: translateX(-.3em); }
  80% { transform: translateX(.2em); }
}

/* flying card ghost */
.fly {
  position: absolute;
  z-index: 6;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.4,.1,.4,1), opacity .5s ease;
  pointer-events: none;
}

/* ---- hint pointer ------------------------------------------------------ */
#hint {
  position: absolute;
  width: 2.6em; height: 3.1em;
  left: 50%; top: 42%;
  margin-left: -1.3em;
  z-index: 7;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 .2em .5em rgba(12,20,48,.4));
}
#hint.on { display: block; animation: tapTap .8s ease-in-out 2; }
#hint svg { width: 100%; height: 100%; }
@keyframes tapTap {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(.5em) scale(.82); }
}

/* ---- M2 matching -------------------------------------------------------- */
#scrM2 { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.5em; }
#scrM2.active { display: flex; }
#m2title {
  color: #fff;
  font-size: 1.5em;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 .1em .9em rgba(64,184,233,.35);
  z-index: 1;
}
#m2grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8em;
  width: 84%;
  z-index: 1;
}
.mcard {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 5.5em;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 600px;
  padding: 0;
}
.mcard .inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .4s ease;
}
.mcard.flip .inner { transform: rotateY(180deg); }
.mcard .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: .9em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mcard .back {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 90%);
  border: .12em solid rgba(64,184,233,.5);
}
.mcard .back img { width: 62%; opacity: .8; }
.mcard .front {
  background: #fff;
  transform: rotateY(180deg);
  border: .22em solid transparent;
}
.mcard .front img { width: 74%; height: 74%; object-fit: contain; }
.mcard.matched .front {
  border-color: var(--teal);
  box-shadow: 0 0 1.1em rgba(65,178,178,.9);
}

/* ---- M3 ----------------------------------------------------------------- */
.m3-bg { background: linear-gradient(175deg, #fff 0%, var(--light) 100%); }
#scrM3 { flex-direction: column; align-items: center; justify-content: center; gap: 1.1em; padding: 1.2em; }
#scrM3.active { display: flex; }
#m3q {
  color: var(--navy-dark);
  font-size: 1.45em;
  font-weight: 800;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
}
#scrM3.revealed #m3q { opacity: 1; transition: opacity .3s ease; }
.panel {
  width: 92%;
  border: .22em solid #fff;
  border-radius: 1.4em;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  padding: .9em;
  display: none;
  flex-direction: column;
  gap: .7em;
  box-shadow: 0 .4em 1.6em rgba(12,20,48,.16);
  text-align: right;
}
#scrM3.revealed .panel { display: flex; animation: panelIn .4s ease both; }
#scrM3.revealed #panelApp { animation-delay: .12s; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(1.2em); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-title {
  color: var(--navy-dark);
  font-size: 1.15em;
  font-weight: 800;
}
.map-art { width: 100%; height: auto; border-radius: .8em; }
.badges { display: flex; flex-wrap: wrap; gap: .5em; }
.badge {
  font-size: .95em;
  font-weight: 800;
  padding: .35em .9em;
  border-radius: 2em;
}
.badge.warn { background: rgba(229,72,77,.10); color: var(--red); border: 1px solid rgba(229,72,77,.45); }
.badge.good { background: rgba(65,178,178,.14); color: var(--navy); border: 1px solid rgba(65,178,178,.55); }
.panel.shake { animation: shake .45s ease; border-color: var(--red); }
.panel.chosen { border-color: var(--teal); animation: chosenPulse .6s ease; }
@keyframes chosenPulse {
  0%   { box-shadow: 0 0 0 0 rgba(65,178,178,.7); }
  100% { box-shadow: 0 0 0 1.4em rgba(65,178,178,0); }
}

/* app mock inside panel B (placeholder until real screenshot — PRD §8.4) */
.appmock {
  display: flex;
  flex-direction: column;
  gap: .55em;
  background: rgba(219,229,243,.55);
  border-radius: .9em;
  padding: .7em;
}
.appbar {
  background: var(--navy);
  border-radius: .55em;
  padding: .4em .7em;
  display: flex;
  align-items: center;
}
.appbar img { height: 1.15em; }
.approw {
  display: flex;
  align-items: center;
  gap: .7em;
  background: #fff;
  border-radius: .6em;
  padding: .5em .7em;
  color: var(--navy-dark);
  font-size: 1.05em;
}
.ups-art { width: 2.6em; height: 2.6em; flex: 0 0 auto; }
.appbtn {
  background: var(--yellow);
  color: var(--navy-dark);
  font-weight: 800;
  text-align: center;
  border-radius: .6em;
  padding: .45em;
  font-size: 1em;
}

/* ---- toast (generic) ----------------------------------------------------- */
#toast {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-dark);
  color: #fff;
  font-size: 1.2em;
  font-weight: 800;
  padding: .55em 1.4em;
  border-radius: 2em;
  box-shadow: 0 .3em 1.2em rgba(12,20,48,.4);
  display: none;
  z-index: 60;
  white-space: nowrap;
}
#toast.on { display: block; animation: toastIn .3s ease both; }

/* ---- END ------------------------------------------------------------------ */
#scrEnd { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.3em; padding: 1.2em 1.2em 5.5em; }
#scrEnd.active { display: flex; }

#banner {
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)) var(--yellow);
  color: var(--navy-dark);
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  white-space: pre-line; /* copy carries its own line breaks */
  padding: .65em 1.2em;
  border-radius: 1em;
  box-shadow: 0 .5em 1.6em rgba(245,196,22,.4);
  animation: bannerDrop .6s cubic-bezier(.2,1.2,.4,1) both;
  z-index: 2;
}
@keyframes bannerDrop {
  from { opacity: 0; transform: translateY(-3em) scale(.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#endBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  width: 100%;
  animation: cardIn .5s ease .45s both;
  z-index: 2;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(1.4em) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#appShot {
  width: 52%;
  background: #fff;
  border-radius: 1.2em;
  padding: 1.1em .9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6em;
  box-shadow: 0 .4em 1.6em rgba(12,20,48,.35);
}
#appShot img { width: 70%; }

#endCard {
  width: 88%;
  background: #fff;
  border-radius: 1.3em;
  padding: 1.1em 1em;
  text-align: center;
  box-shadow: 0 .5em 2em rgba(12,20,48,.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8em;
}
#endOffer {
  color: var(--navy-dark);
  font-size: 1.25em;
  font-weight: 800;
  line-height: 1.6;
}

#coupon {
  position: relative;
  border: .16em dashed var(--navy);
  background: rgba(219,229,243,.35);
  border-radius: .9em;
  padding: .6em 2em;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: .15em;
}
#coupon::before, #coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.1em; height: 1.1em;
  margin-top: -.55em;
  background: #fff;
  border-radius: 50%;
}
#coupon::before { right: -.72em; }
#coupon::after  { left: -.72em; }
#couponLabel { font-size: .85em; color: var(--navy); font-weight: 700; font-style: normal; }
#couponCode {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--navy-dark);
  letter-spacing: .04em;
  direction: ltr;
}
#copiedNote {
  color: var(--teal);
  font-weight: 800;
  font-size: .95em;
  visibility: hidden;
  min-height: 1.4em;
}
#copiedNote.on { visibility: visible; }

#endCta {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 1.25em;
  white-space: nowrap;
}
#endCta.pulse { animation: pulseCta 1.4s ease-in-out infinite; }
@keyframes pulseCta {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.06); }
}

/* ---- confetti ---------------------------------------------------------- */
#confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 70;
}
.cf {
  position: absolute;
  top: -4%;
  width: .55em;
  height: .9em;
  border-radius: .12em;
  animation: cfFall linear both;
}
@keyframes cfFall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(115vh) rotate(540deg); opacity: .7; }
}

/* ---- mission wipe -------------------------------------------------------- */
#wipe {
  position: absolute;
  inset: -2% -4%;
  background: linear-gradient(105deg, transparent 6%, var(--navy-dark) 22%, var(--navy) 50%, var(--navy-dark) 78%, transparent 94%);
  transform: translateX(-130%);
  z-index: 90;
  pointer-events: none;
}
#wipe.run { animation: wipeRun .7s ease-in-out both; }
@keyframes wipeRun {
  from { transform: translateX(-130%); }
  45%  { transform: translateX(0); }
  55%  { transform: translateX(0); }
  to   { transform: translateX(130%); }
}