/* ===========================================================================
   Dunkin' — "ايش قهوتك من دانكن"
   موقع تفاعلي لشاشة إيفنت 1080×1920 طولي.

   كل الإحداثيات بالبكسل في فضاء 1080×1920 — نفس فضاء التصميم بالظبط،
   ومستخرجة من ملف التصميم مباشرة.
   =========================================================================== */

/* ------------------------------ الخطوط ------------------------------ */
@font-face {
  font-family: 'Dunkin Arabic';
  src: url('../assets/fonts/DunkinSansArabic-Book.ttf') format('truetype');
  font-weight: 400; font-display: block;
}
@font-face {
  font-family: 'Dunkin Arabic Display';
  src: url('../assets/fonts/DunkinSansArabic-Display.ttf') format('truetype');
  font-weight: 400; font-display: block;
}
@font-face {
  font-family: 'Dunkin Sans';
  src: url('../assets/fonts/DunkinSans-Book.woff2') format('woff2');
  font-weight: 400; font-display: block;
}
@font-face {
  font-family: 'Dunkin Sans';
  src: url('../assets/fonts/DunkinSans-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-display: block;
}

:root {
  --orange:  #EF6A00;
  --magenta: #C63663;
  --display: 'Dunkin Arabic Display', 'Dunkin Sans', system-ui, sans-serif;
  --book:    'Dunkin Arabic', 'Dunkin Sans', system-ui, sans-serif;
  --dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cg fill='none' stroke='%23EF6A00' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M4 22 L12 8'/%3E%3Cpath d='M19 24 L27 6'/%3E%3Cpath d='M34 22 L42 8'/%3E%3C/g%3E%3C/svg%3E");
}

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

html {
  width: 100%; height: 100%; overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  /* position:fixed على الـbody بس — بيمنع السحب والارتداد على iOS */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0;
  background: linear-gradient(to bottom,
              var(--pad-top, #000) 0 50%, var(--pad-bottom, #000) 50% 100%);
  overflow: hidden;
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* الأزرار محتاجة تسمح باللمس */
.btn, .card { touch-action: manipulation; }
/* في الإيفنت (شاشة لمس) أضف class="kiosk" على <body> عشان يختفي المؤشر */
body.kiosk, body.kiosk * { cursor: none; }

/* --------------------- المسرح: 1080×1920 ثابت --------------------- */
#stage {
  position: absolute; top: 0; left: 0;
  width: 1080px; height: 1920px;
  transform-origin: top left;     /* التحجيم والتوسيط بيتحسبوا في app.js */
  overflow: hidden; background: #fff;
}

.screen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .22s ease;
}
.screen.on { opacity: 1; visibility: visible; }

/* كل عنصر داخل الشاشة موضوع بإحداثيات مطلقة */
.screen > * { position: absolute; }

img { display: block; -webkit-user-drag: none; pointer-events: none; }

/* أسطر النص: بدون التفاف، وارتفاع سطر 1.2 زي التصميم */
.t { white-space: nowrap; line-height: 1.2; }

/* --- أيقونات أحادية اللون: mask عشان تتلوّن من الـCSS بـcolor --- */
.ico {
  background: currentColor;
  -webkit-mask: var(--src) center/contain no-repeat;
          mask: var(--src) center/contain no-repeat;
}

/* ------------------------- ترويسة مشتركة ------------------------- */
.logo { left: 44px; top: 79px;  width: 391px;   height: 75.6px;
        --src: url('../assets/vector/logo.svg'); }
.back { left: 914px; top: 74px; width: 119.1px; height: 75px; padding: 0;
        --src: url('../assets/vector/back.svg'); }
.back::after { border-radius: 20px; }
.white  { color: #fff; }
.pink   { color: var(--magenta); }
.orange { color: var(--orange); }
/* نفس الألوان بأولوية أعلى عشان تغلب قواعد الأزرار */
.ico.white { color: #fff; } .ico.pink { color: var(--magenta); } .ico.orange { color: var(--orange); }

/* ------------------------- شريط التقدّم ------------------------- */
.steps { left: 43.3px; width: 993.5px; height: 78.4px; }
.steps i {
  position: absolute; top: 0; width: 227px; height: 78.4px;
  border-radius: 999px; border: 3px solid currentColor;
}
.steps i:nth-child(1) { left: 0; }
.steps i:nth-child(2) { left: 250.4px; }
.steps i:nth-child(3) { left: 500.8px; }
.steps i:nth-child(4) { left: 751.2px; }
.steps i.done { background: currentColor; }

/* ----------------------- أزرار قابلة للضغط ----------------------- */
.btn { cursor: pointer; border: 0; background: none; font: inherit; }
.btn.ico { background: currentColor; }   /* الأيقونات القابلة للضغط تفضل mask ملوّن */
.btn::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit;
  background: transparent; transition: background .09s linear;
}
.btn.down::after       { background: rgba(0, 0, 0, .12); }
.btn.light-on-dark.down::after { background: rgba(255, 255, 255, .20); }

/* =========================== ١ · الهبوط =========================== */
/* شبكة أمان: لو app.js ما نزلش لأي سبب (شبكة، نشر لسه بيتم)،
   شاشة الهبوط تفضل ظاهرة بدل شاشة بيضا فاضية. أول ما الجافاسكربت
   يشتغل بيحط .js على <html> فالقاعدة دي بتتلغي وتشتغل .on عادي. */
html:not(.js) #s-landing { opacity: 1; visibility: visible; }

#s-landing { background: var(--orange); --pad-top: #EF6A00; --pad-bottom: #EF6A00; }
#s-landing .blob  { left: -316.4px; top: 549.8px; width: 1797px; height: 852.8px; color: #fff;
                    --src: url('../assets/vector/blob.svg'); }
#s-landing .hero  { left: -40px; top: 666px; width: 1140px; height: 642px; }
#s-landing h1 {
  right: 50.6px; top: 203.8px;
  font: 120px/144px var(--display); color: #fff;
}
#s-landing .cup   { left: 339.4px; top: 355.4px; width: 102.6px; height: 143.4px; }
#s-landing .sub   { right: 218.9px; top: 1423.7px; font: 72px/1.2 var(--display); color: #fff; }
#s-landing .start {
  left: 159.1px; top: 1561.8px; width: 761.8px; height: 143.3px;
  background: #fff; border-radius: 999px;
}
#s-landing .start .play { position: absolute; left: 55.5px; top: 18px; width: 107.2px; height: 107.2px; }
#s-landing .start span {
  position: absolute; right: 64.2px; top: 23.3px;
  font: 72px/1.2 var(--display); color: var(--magenta);
}

/* =========================== ٢ · الجنس =========================== */
#s-gender { background: #8D827A; --pad-top: #897D76; --pad-bottom: #95918D; }
#s-gender .bg { left: -28.6px; top: -12.3px; width: 1128px; height: 1949px; }
/* طبقة التعتيم اللي في التصميم — محسوبة من الأصل: 0.467×الصورة + 37.7 */
#s-gender .veil { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(71, 71, 71, .533); }
#s-gender .steps { top: 251.3px; color: #fff; }
#s-gender h1 { right: 167px; top: 520.2px; font: 139px/1.2 var(--display); color: #fff; }
#s-gender .pick {
  width: 475.1px; height: 252.2px; background: #fff; border-radius: 999px;
  font: 100px/252.2px var(--display); color: var(--magenta); text-align: center;
}
#s-gender .pick.f { left: 296px;   top: 879.5px; }
#s-gender .pick.m { left: 302.3px; top: 1209.5px; }

/* ===================== ٣ · السؤال الأول ===================== */
#s-q1 { background: #fff; --pad-top: #FFFFFF; --pad-bottom: #FFFFFF; }
#s-q1 .steps { top: 251.3px; color: var(--magenta); }
#s-q1 h1 { left: 0; right: 0; top: 408.4px; text-align: center;
           font: 90px/108px var(--display); color: var(--orange); }
#s-q1 .cup { left: 137px; top: 532.6px; width: 70.8px; height: 99px; }
#s-q1 .machine { left: 341.8px; top: 681.2px; width: 405.1px; height: 506.1px; }
#s-q1 .opt {
  width: 475.1px; height: 252.2px; background: var(--magenta);
  border-radius: 999px; display: grid; place-items: center;
  font: 48px/72px var(--book); color: #fff; text-align: center;
}
#s-q1 .opt:nth-of-type(1) { left: 556.5px; top: 1200.8px; }
#s-q1 .opt:nth-of-type(2) { left: 49.2px;  top: 1200.8px; }
#s-q1 .opt:nth-of-type(3) { left: 555.7px; top: 1513.7px; }
#s-q1 .opt:nth-of-type(4) { left: 48.4px;  top: 1513.7px; }

/* ================= ٤/٥ · السؤال الثاني (الأيقونات) ================= */
.s-q2 { background: #fff; --pad-top: #FFFFFF; --pad-bottom: #FFFFFF; }
.s-q2 .steps { top: 277.9px; color: var(--magenta); }
.s-q2 h1 { left: 0; right: 0; text-align: center; font: 90px/108px var(--display); color: var(--orange); }
#s-q2-m h1 { top: 414.6px; }
#s-q2-f h1 { top: 400.4px; }
.s-q2 .word {
  background: var(--magenta); border-radius: 56px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px 8px;
}
.s-q2 .word img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.s-q2 .word b {
  font: 56px/1.2 var(--display); color: #fff; font-weight: 400;
  display: flex; align-items: center;
}
.s-q2 .word b::before, .s-q2 .word b::after {
  content: ''; width: 46px; height: 30px; flex: none;
  background: var(--dash) center/contain no-repeat;
}
.s-q2 .word b::before { margin-left: 16px; }     /* بديل gap لكروم القديم */
.s-q2 .word b::after  { margin-right: 16px; transform: scaleX(-1); }

/* ================= ٦/٧ · السؤال الثالث (الكبسولات) ================= */
.s-q3 { background: #fff; --pad-top: #FFFFFF; --pad-bottom: #FFFFFF; }
.s-q3 h1 { left: 0; right: 0; text-align: center; font: 90px/108px var(--display); color: var(--orange); }
#s-q3-m .steps { top: 268.3px; color: var(--magenta); }
#s-q3-f .steps { top: 245.7px; color: var(--magenta); }
#s-q3-m h1 { top: 374.4px; }
#s-q3-f h1 { top: 350.9px; }
.s-q3 .cap {
  width: 459.9px; height: 335.2px; background: #fff;
  border: 1px solid var(--magenta); border-radius: 40px;
}
.s-q3 .cap img { position: absolute; }
.s-q3 .cap b {
  position: absolute; left: 0; right: 0; top: 260px;
  font: 48px/1.2 var(--display); font-weight: 400;
  color: var(--magenta); text-align: center;
}
/* إزاحة الكبسولة داخل كل كارت — مأخوذة من التصميم بالظبط */
.cap:nth-of-type(1) img { left: 19.6px; top: -90.4px;  width: 460.4px; }
.cap:nth-of-type(2) img { left: 39.9px; top: -100.3px; width: 382.1px; }
.cap:nth-of-type(3) img { left: 14.3px; top: -73.1px;  width: 469.6px; }
.cap:nth-of-type(4) img { left: 3.1px;  top: -77.4px;  width: 443.6px; }
.cap:nth-of-type(5) img { left: 1.8px;  top: -75.8px;  width: 456.6px; }
.cap:nth-of-type(6) img { left: 39.9px; top: -77.4px;  width: 487.7px; }

/* ---- إحداثيات الكروت الست: مقاسة من التصميم كارت كارت ----
   (التصميم نفسه فيه تفاوت بسيط بين الكروت، وده بيتنقل زي ما هو) */
#s-q2-m .word:nth-of-type(1) { left: 75px;  top: 761px;  width: 444px; height: 328px; }
#s-q2-m .word:nth-of-type(2) { left: 565px; top: 758px;  width: 445px; height: 331px; }
#s-q2-m .word:nth-of-type(3) { left: 73px;  top: 1119px; width: 448px; height: 300px; }
#s-q2-m .word:nth-of-type(4) { left: 562px; top: 1119px; width: 448px; height: 300px; }
#s-q2-m .word:nth-of-type(5) { left: 71px;  top: 1448px; width: 453px; height: 344px; }
#s-q2-m .word:nth-of-type(6) { left: 561px; top: 1447px; width: 451px; height: 346px; }

#s-q2-f .word:nth-of-type(1) { left: 58px;  top: 755px;  width: 452px; height: 333px; }
#s-q2-f .word:nth-of-type(2) { left: 554px; top: 751px;  width: 454px; height: 337px; }
#s-q2-f .word:nth-of-type(3) { left: 53px;  top: 1115px; width: 459px; height: 306px; }
#s-q2-f .word:nth-of-type(4) { left: 551px; top: 1115px; width: 458px; height: 306px; }
#s-q2-f .word:nth-of-type(5) { left: 48px;  top: 1449px; width: 467px; height: 349px; }
#s-q2-f .word:nth-of-type(6) { left: 550px; top: 1449px; width: 463px; height: 350px; }

#s-q3-m .cap:nth-of-type(1) { left: 68px;  top: 668px;    }
#s-q3-m .cap:nth-of-type(2) { left: 551px; top: 682.1px;  }
#s-q3-m .cap:nth-of-type(3) { left: 68px;  top: 1089.6px; }
#s-q3-m .cap:nth-of-type(4) { left: 551px; top: 1089.6px; }
#s-q3-m .cap:nth-of-type(5) { left: 68px;  top: 1498.3px; }
#s-q3-m .cap:nth-of-type(6) { left: 551px; top: 1511.2px; }

#s-q3-f .cap:nth-of-type(1) { left: 65px;  top: 644.5px;  }
#s-q3-f .cap:nth-of-type(2) { left: 548px; top: 658.6px;  }
#s-q3-f .cap:nth-of-type(3) { left: 65px;  top: 1066.1px; }
#s-q3-f .cap:nth-of-type(4) { left: 548px; top: 1066.1px; }
#s-q3-f .cap:nth-of-type(5) { left: 65px;  top: 1474.8px; }
#s-q3-f .cap:nth-of-type(6) { left: 548px; top: 1487.7px; }

/* ========================= ٨ · شاشة الانتقال ========================= */
#s-loading { background: #1a1008; --pad-top: #140701; --pad-bottom: #170903; }
#s-loading .bg { left: -54.1px; top: -37.3px; width: 1203.3px; height: 1983.7px; }
/* تعتيم التصميم: الصورة × 0.336 */
#s-loading .veil { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .664); }
#s-loading .l1 { left: 255px; top: 439.3px; font: 150px/1.2 var(--display); color: #fff; }
#s-loading .l2 { left: 255px; top: 619.3px; font: 150px/1.2 var(--display); color: #fff; }
#s-loading .l3 { left: 255px; top: 799.3px; font: 150px/1.2 var(--display); color: #fff; }

/* ========================== ٩ · النتيجة ========================== */
#s-result { background: #000; --dy: 0px; --pad-top: #2a2018; --pad-bottom: #120801; }
#s-result .logo { left: 50%; transform: translateX(-50%); top: 110px; }
#s-result .bg { left: 0; top: 0; width: 1080px; height: 1920px; object-fit: cover; }
/* شاددو من تحت لفوق عشان النص يبان أوضح فوق الصورة */
#s-result .scrim {
  top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
  background: linear-gradient(to top,
              rgba(20, 8, 0, .82) 0%,
              rgba(20, 8, 0, .72) 22%,
              rgba(20, 8, 0, .45) 45%,
              rgba(20, 8, 0, .12) 62%,
              rgba(20, 8, 0,  0)  76%);
}
#s-result .kicker { left: 0; right: 0; top: calc(940.4px + var(--dy)); font: 90px/1.2 var(--book);    color: #fff; text-align: center; }
#s-result .name   { left: 0; right: 0; top: calc(1074px + var(--dy)); font: 90px/1.2 var(--display); color: #fff; text-align: center; }
#s-result .badge {
  left: 81.9px; top: calc(1240px + var(--dy)); width: 916.2px; height: 119px; border-radius: 999px;
  font: 80px/119px var(--display); color: #fff; text-align: center;
}
#s-result .desc {
  left: 40px; right: 40px; top: calc(1367px + var(--dy));
  font: 48px/66px var(--book); color: #fff; text-align: center; white-space: normal;
}
#s-result .cta {
  /* اتوسّع عن التصميم (746.6px) عشان النص الجديد الأطول يدخل جوّه */
  left: 80px; top: calc(1680px + var(--dy) * .35); width: 920px; height: 122.2px;
  background: var(--orange); border-radius: 999px;
  font: 50px/122.2px var(--display); color: #fff; text-align: center;
  white-space: nowrap;
}

/* ======================= ١٠ · النكهات (هيرو) ======================= */
#s-flavors { background: #7A3B0A; --pad-top: #8F3509; --pad-bottom: #886965; }
#s-flavors .bg { left: -19.1px; top: -51.5px; width: 1119.3px; height: 1988.9px; }
/* تعتيم دافئ زي التصميم: ضرب في #977878 */
#s-flavors .veil { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: #977878; mix-blend-mode: multiply; }
#s-flavors .logo { left: 50%; transform: translateX(-50%); top: 282px; width: 391px; color: #fff; }
#s-flavors .title {
  left: 81px; top: 554px; width: 911px; height: 156px; border-radius: 999px;
  background: rgba(255, 255, 255, .17);
  font: 72px/156px var(--display); color: #fff; text-align: center;
}

/* ======================= ١١ · شبكة النكهات ======================= */
#s-grid {
  --pad-top: #F37009; --pad-bottom: #8C3C00;
  background: radial-gradient(120% 90% at 50% 12%, #F97A16 0, var(--orange) 42%, #8A3B00 100%);
}
#s-grid .logo { left: 50%; transform: translateX(-50%); top: 74px; color: #fff; }
#s-grid h1 {
  left: 60px; right: 60px; top: 232px; height: 128px; border-radius: 999px;
  background: rgba(255, 255, 255, .17);
  font: 72px/128px var(--display); color: #fff; text-align: center;
}
#s-grid .cards {
  left: 60px; top: 404px; width: 960px;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 404px; grid-gap: 30px 32px; gap: 30px 32px;
}
#s-grid .card {
  position: relative; border-radius: 40px; padding: 18px 20px;
  background: #fff; border: 0;
  box-shadow: 0 10px 30px rgba(90, 30, 0, .18);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#s-grid .card img { width: 100%; height: 248px; object-fit: contain; margin-bottom: 10px; }
#s-grid .en  { font: 800 32px/1.06 'Dunkin Sans', sans-serif; color: var(--magenta); direction: ltr; }
#s-grid .note{ font: 400 18px/1.4 'Dunkin Sans', sans-serif; color: rgba(60,30,10,.62);
               letter-spacing: .06em; direction: ltr; margin-top: 4px; }
#s-grid .int { margin-top: auto; display: flex; align-items: center; }
#s-grid .int > * + * { margin-right: 12px; }
#s-grid .bar { position: relative; width: 150px; height: 10px; border-radius: 5px; background: rgba(0,0,0,.12); }
#s-grid .bar i { position: absolute; top: 0; bottom: 0; left: 0; height: 100%; border-radius: 5px; background: var(--orange); }
#s-grid .dot {
  min-width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange); color: #fff; border: 0;
  font: 800 24px/1 'Dunkin Sans', sans-serif;
}
#s-grid .again {
  left: 50%; transform: translateX(-50%); bottom: 62px;
  padding: 26px 84px; border-radius: 999px; background: #fff;
  font: 46px/1 var(--display); color: var(--magenta);
}

/* وضع الفحص: ?debug=1 */
body.debug .btn { outline: 2px dashed rgba(0,200,255,.9); }
body.nohero .hero { display: none; }   /* لضبط مكان صورة الهيرو */