/* =====================================================================
   دورك أساسي — Kiosk UI
   مصمم على شاشة 1920×1080، ويتكيّف مع أي مقاس عبر وحدة --u
   (1u = بكسل واحد على 1920×1080)
   ===================================================================== */

@font-face { font-family: "Modal3at"; src: url("../fonts/modal3at.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "NotoArabic"; src: url("../fonts/noto-arabic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: block; }
@font-face { font-family: "DINPro"; src: url("../fonts/dinpro-light.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "DINPro"; src: url("../fonts/dinpro-medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "DINPro"; src: url("../fonts/dinpro-bold.woff2") format("woff2"); font-weight: 700; font-display: block; }

:root {
  /* لوحة الحملة */
  --forest: #1E381E;
  --pitch: #386838;
  --sprout: #A0C96B;
  --sprout-hi: #AEDB75;
  --sun: #F7C74F;
  --red: #CC4242;
  --haze: #ECE5D8;      /* ضباب الصورة الرئيسية */
  --paper: #F8F4EC;
  --white: #FFFFFF;
  --ink: var(--forest);
  --ink-2: rgba(30, 56, 30, .74);
  --line: rgba(30, 56, 30, .16);

  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --panel: calc(var(--u) * 560);
  --gutter: calc(var(--u) * 84);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --f-body: "NotoArabic", "DINPro", system-ui, sans-serif;
  --f-display: "Modal3at", "NotoArabic", sans-serif;
}
html[lang="en"] {
  --f-body: "DINPro", "NotoArabic", system-ui, sans-serif;
  --f-display: "DINPro", "NotoArabic", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--forest); }
body {
  font-family: var(--f-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  cursor: default;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
img, svg { display: block; }

#app { position: fixed; inset: 0; overflow: hidden; background: var(--haze); }

/* ---------- الشاشات ---------- */
.screen {
  position: absolute; inset: 0;
  display: grid;
  direction: ltr;                       /* التخطيط الفيزيائي ثابت في اللغتين */
  grid-template-columns: var(--panel) 1fr;
  background: var(--haze);
  animation: enter .42s var(--ease) both;
}
.screen.is-leaving { animation: leave .28s ease both; pointer-events: none; }
.screen--dark { background: var(--forest); color: var(--haze); grid-template-columns: 1fr; }
@keyframes enter { from { opacity: 0; transform: translateX(calc(var(--u) * var(--dx, -36))); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; } }

.content {
  direction: var(--dir, rtl);
  position: relative;
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 150) var(--gutter) calc(var(--u) * 64);
  min-height: 0;
}

/* ---------- لوحة الصورة (قطع مائل يحاكي ألواح الصورة الرئيسية) ---------- */
.panel {
  position: relative; overflow: hidden;
  background: var(--forest) url("../img/kv.webp") no-repeat;
  background-size: auto 118%;
  background-position: var(--px, 30%) 18%;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
.panel::after {   /* شريط أخضر رفيع على الحافة المائلة */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,56,30,0) 55%, rgba(30,56,30,.78) 100%);
}
.panel__988 {
  position: absolute; z-index: 1;
  left: calc(var(--u) * 56); bottom: calc(var(--u) * 52);
  display: flex; align-items: center; gap: calc(var(--u) * 16);
  color: var(--haze);
  font: 500 calc(var(--u) * 26)/1.3 var(--f-body);
  max-width: calc(var(--u) * 400);
}
.panel__988 b { font: 700 calc(var(--u) * 64)/1 "Modal3at", sans-serif; color: var(--sprout-hi); letter-spacing: .02em; }

/* ---------- الشريط العلوي ---------- */
.topbar {
  position: absolute; z-index: 5; inset: 0 0 auto 0;
  height: calc(var(--u) * 128);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u) * 56);
  direction: ltr; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.lockup { height: calc(var(--u) * 70); color: var(--forest); }
.lockup svg { height: 100%; width: auto; }
.screen--dark .lockup, .screen--attract .lockup--on-photo { color: var(--haze); }

.lang {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 14);
  height: calc(var(--u) * 76); min-width: calc(var(--u) * 210);
  padding: 0 calc(var(--u) * 30);
  border-radius: 999px;
  background: var(--haze); color: var(--forest);
  border: calc(var(--u) * 3) solid var(--forest);
  font: 700 calc(var(--u) * 28)/1 "NotoArabic", sans-serif;
  justify-content: center;
}
.lang[lang="en"] { font-family: "DINPro", sans-serif; }
.lang svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.lang:active { transform: scale(.97); }
.screen--dark .lang { background: transparent; color: var(--haze); border-color: rgba(236,229,216,.7); }

/* ---------- التقدم ---------- */
.progress {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 24);
  margin-bottom: calc(var(--u) * 26);
  font: 600 calc(var(--u) * 26)/1.2 var(--f-body); color: var(--ink-2);
}
.progress__label { color: var(--forest); font-weight: 700; }
.progress__track { display: flex; gap: calc(var(--u) * 8); flex: 0 0 auto; }
.progress__seg { width: calc(var(--u) * 64); height: calc(var(--u) * 10); border-radius: 99px; background: var(--line); }
.progress__seg.is-done { background: var(--pitch); }
.progress__seg.is-now { background: var(--sun); }
.progress__hint { margin-inline-start: auto; }

/* ---------- العناوين والنصوص ---------- */
.q {
  font: 700 calc(var(--u) * 48)/1.38 var(--f-body);
  max-width: 30ch;
  margin-bottom: calc(var(--u) * 30);
  text-wrap: balance;
}
html[lang="en"] .q { font-size: calc(var(--u) * 46); line-height: 1.24; max-width: 34ch; }
.sub { font: 400 calc(var(--u) * 30)/1.55 var(--f-body); color: var(--ink-2); max-width: 46ch; margin: calc(var(--u) * -14) 0 calc(var(--u) * 26); }

.display {
  font: 700 calc(var(--u) * 104)/1.1 var(--f-display);
  letter-spacing: 0;
  margin-bottom: calc(var(--u) * 30);
  text-wrap: balance;
}
html[lang="en"] .display { font-size: calc(var(--u) * 88); line-height: 1.02; letter-spacing: -.01em; }
.lead { font: 400 calc(var(--u) * 36)/1.6 var(--f-body); max-width: 40ch; }
html[lang="en"] .lead { line-height: 1.45; }

/* ---------- الخيارات ---------- */
.options { display: flex; flex-direction: column; gap: calc(var(--u) * 14); flex: 0 1 auto; }
.options--grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14) calc(var(--u) * 18); }
.opt {
  position: relative;
  display: flex; align-items: center; gap: calc(var(--u) * 24);
  min-height: calc(var(--u) * 86);
  padding: calc(var(--u) * 16) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 20);
  background: var(--paper);
  border: calc(var(--u) * 3) solid var(--line);
  text-align: start;
  font: 500 calc(var(--u) * 30)/1.35 var(--f-body);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.opt:active { transform: scale(.99); }
.opt__mark {
  flex: 0 0 auto;
  width: calc(var(--u) * 42); height: calc(var(--u) * 42);
  border-radius: 50%;
  border: calc(var(--u) * 3) solid var(--pitch);
  display: grid; place-items: center;
  background: var(--white);
}
.opt__mark svg { width: 62%; height: 62%; opacity: 0; transform: scale(.4); transition: .2s var(--ease); }
.opt[aria-checked="true"] { background: var(--forest); color: var(--haze); border-color: var(--forest); }
.opt[aria-checked="true"] .opt__mark { background: var(--sun); border-color: var(--sun); color: var(--forest); }
.opt[aria-checked="true"] .opt__mark svg { opacity: 1; transform: none; }

/* ---------- الأزرار ---------- */
.actions {
  margin-top: auto; padding-top: calc(var(--u) * 26);
  display: flex; align-items: center; gap: calc(var(--u) * 28);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 18);
  min-height: calc(var(--u) * 100); min-width: calc(var(--u) * 340);
  padding: 0 calc(var(--u) * 52);
  border-radius: 999px;
  font: 700 calc(var(--u) * 36)/1 var(--f-body);
  transition: transform .12s ease, opacity .2s ease, background .2s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
.btn--primary { background: var(--forest); color: var(--haze); }
.btn--primary[aria-disabled="true"] { background: rgba(30,56,30,.28); color: rgba(248,244,236,.9); }
.btn--sun { background: var(--sun); color: var(--forest); }
.btn--ghost { min-width: calc(var(--u) * 220); background: transparent; color: var(--forest); border: calc(var(--u) * 3) solid var(--line); }
.screen--dark .btn--ghost { color: var(--haze); border-color: rgba(236,229,216,.4); }

.required {
  font: 600 calc(var(--u) * 28)/1.3 var(--f-body);
  color: var(--red);
  display: flex; align-items: center; gap: calc(var(--u) * 12);
  opacity: 0; transition: opacity .2s ease;
}
.required svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); flex: 0 0 auto; }
.required.is-on { opacity: 1; animation: nudge .4s ease; }
@keyframes nudge { 25% { transform: translateX(calc(var(--u) * 8)); } 75% { transform: translateX(calc(var(--u) * -8)); } }

/* =====================================================================
   شاشة الجذب
   ===================================================================== */
.screen--attract { grid-template-columns: 1fr; background: var(--haze); cursor: pointer; }
.attract__bg {
  position: absolute; inset: -2%;
  background: url("../img/kv.webp") center 30% / cover no-repeat;
  animation: drift 26s ease-in-out infinite alternate;
  transform-origin: 30% 40%;
}
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
.attract__copy {
  position: absolute; z-index: 2;
  right: calc(var(--u) * 96); top: calc(var(--u) * 150);
  width: calc(var(--u) * 560);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: opacity .5s ease;
}
.screen--attract::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(270deg, rgba(236,229,216,.86) 0, rgba(236,229,216,.6) 26%, rgba(236,229,216,0) 44%);
}
.attract__copy.is-swapping { opacity: 0; }
.attract__wordmark { width: calc(var(--u) * 470); color: var(--forest); margin-bottom: calc(var(--u) * 34); }
.attract__wordmark svg { width: 100%; height: auto; }
.attract__en-title {
  font: 700 calc(var(--u) * 118)/.98 "DINPro", sans-serif;
  color: var(--forest); letter-spacing: -.015em;
  margin-bottom: calc(var(--u) * 40);
}
.attract__sub { font: 600 calc(var(--u) * 34)/1.5 var(--f-body); color: var(--forest); max-width: 22em; margin-bottom: calc(var(--u) * 54); }
.attract__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 20);
  height: calc(var(--u) * 112); padding: 0 calc(var(--u) * 56);
  border-radius: 999px; background: var(--forest); color: var(--haze);
  font: 700 calc(var(--u) * 36)/1 var(--f-body);
  white-space: nowrap;
}
.attract__cta svg { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.attract__cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: calc(var(--u) * 4) solid var(--forest);
  animation: ring 2.4s var(--ease) infinite;
}
@keyframes ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.18, 1.5); } }
.attract__foot {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  height: calc(var(--u) * 150);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u) * 72);
  direction: ltr;
  background: linear-gradient(0deg, rgba(30,56,30,.92), rgba(30,56,30,.72) 60%, rgba(30,56,30,0));
  color: var(--haze);
}
.attract__foot .lockup { color: var(--haze); height: calc(var(--u) * 84); }
.line988 { display: flex; align-items: center; gap: calc(var(--u) * 18); font: 600 calc(var(--u) * 30)/1.2 var(--f-body); }
.line988 b { font: 700 calc(var(--u) * 60)/1 "Modal3at", sans-serif; color: var(--sun); }
.line988 svg { width: calc(var(--u) * 40); height: calc(var(--u) * 40); color: var(--sun); }

/* أوراق تطفو بخفة */
.leaf { position: absolute; z-index: 1; width: calc(var(--u) * 46); color: var(--sprout); opacity: .85; animation: float 14s ease-in-out infinite; }
.leaf:nth-of-type(2) { animation-duration: 18s; animation-delay: -6s; color: var(--pitch); width: calc(var(--u) * 34); }
.leaf:nth-of-type(3) { animation-duration: 22s; animation-delay: -11s; width: calc(var(--u) * 28); }
@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(calc(var(--u) * -60), calc(var(--u) * 40)) rotate(24deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* =====================================================================
   البداية
   ===================================================================== */
.content.welcome { justify-content: center; }
.welcome .actions { margin-top: calc(var(--u) * 40); }
.welcome__mark { width: calc(var(--u) * 420); color: var(--forest); margin: calc(var(--u) * 6) 0 calc(var(--u) * 46); }
.welcome__mark svg { width: 100%; height: auto; }
.welcome .lead { margin-bottom: calc(var(--u) * 20); }
.chip988 {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 10) calc(var(--u) * 26) calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: 999px; background: rgba(160,201,107,.32);
  font: 600 calc(var(--u) * 26)/1.2 var(--f-body);
}
.chip988 b { font: 700 calc(var(--u) * 40)/1 "Modal3at", sans-serif; }

/* =====================================================================
   تعرّف على المركز
   ===================================================================== */
.pillars { display: flex; gap: calc(var(--u) * 22); margin-top: calc(var(--u) * 48); }
.pillar {
  display: flex; align-items: center; gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 18) calc(var(--u) * 30) calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 20);
  background: var(--paper); border: calc(var(--u) * 3) solid var(--line);
  font: 700 calc(var(--u) * 32)/1 var(--f-body);
}
.pillar i {
  width: calc(var(--u) * 62); height: calc(var(--u) * 62); border-radius: 50%;
  display: grid; place-items: center; background: var(--forest); color: var(--sprout-hi);
}
.pillar i svg { width: 56%; height: 56%; }

/* =====================================================================
   الشاشات الداكنة: النتيجة / متى تتصل / الختام
   ===================================================================== */
.dark-wrap {
  direction: var(--dir, rtl);
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr calc(var(--u) * 640);
  gap: calc(var(--u) * 60);
  padding: calc(var(--u) * 160) calc(var(--u) * 110) calc(var(--u) * 90);
  height: 100%;
}
.dark-main { display: flex; flex-direction: column; min-height: 0; }
.dark-side { position: relative; display: flex; align-items: center; justify-content: center; }

.jersey {   /* الرقم 988 بأسلوب رقم القميص */
  font: 700 calc(var(--u) * 330)/.9 "Modal3at", sans-serif;
  color: var(--sprout);
  letter-spacing: .01em;
  direction: ltr;
  position: relative;
}
.jersey::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(var(--u) * -34);
  height: calc(var(--u) * 12); border-radius: 99px;
  background: linear-gradient(90deg, var(--sun) 0 33%, var(--red) 33% 66%, var(--sprout) 66%);
}
.jersey--ghost { color: rgba(160,201,107,.12); font-size: calc(var(--u) * 440); }
.jersey--ghost::after { display: none; }

.status {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 20);
  align-self: flex-start;
  padding: calc(var(--u) * 12) calc(var(--u) * 30) calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: 999px;
  font: 700 calc(var(--u) * 32)/1 var(--f-body);
  margin-bottom: calc(var(--u) * 40);
}
.status i { width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%; display: grid; place-items: center; }
.status i svg { width: 58%; height: 58%; }
.status--ok { background: rgba(160,201,107,.18); color: var(--sprout-hi); }
.status--ok i { background: var(--sprout); color: var(--forest); }
.status--info { background: rgba(247,199,79,.16); color: var(--sun); }
.status--info i { background: var(--sun); color: var(--forest); }
.status i { animation: pop .5s var(--ease) .15s both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

.dark-title { font: 700 calc(var(--u) * 84)/1.15 var(--f-display); color: var(--haze); margin-bottom: calc(var(--u) * 34); text-wrap: balance; max-width: 18ch; }
html[lang="en"] .dark-title { font-size: calc(var(--u) * 72); line-height: 1.05; }
.dark-body { font: 400 calc(var(--u) * 36)/1.6 var(--f-body); color: rgba(236,229,216,.9); max-width: 38ch; }
html[lang="en"] .dark-body { line-height: 1.45; }
.screen--dark .btn--primary { background: var(--sun); color: var(--forest); }

/* متى تتصل بـ988 */
.when__title { font: 700 calc(var(--u) * 62)/1.2 var(--f-display); margin-bottom: calc(var(--u) * 18); max-width: 22ch; }
html[lang="en"] .when__title { font-size: calc(var(--u) * 58); line-height: 1.05; }
.when__body { font: 400 calc(var(--u) * 30)/1.55 var(--f-body); color: rgba(236,229,216,.88); max-width: 46ch; margin-bottom: calc(var(--u) * 26); }
.when__lt { font: 700 calc(var(--u) * 28)/1.3 var(--f-body); color: var(--sprout-hi); margin-bottom: calc(var(--u) * 16); }
.cases { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); }
.cases li {
  display: flex; align-items: center; gap: calc(var(--u) * 18);
  padding: calc(var(--u) * 18) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 18);
  background: rgba(236,229,216,.07); border: calc(var(--u) * 2) solid rgba(236,229,216,.14);
  font: 500 calc(var(--u) * 27)/1.4 var(--f-body);
}
.cases i { flex: 0 0 auto; width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: calc(var(--u) * 14); display: grid; place-items: center; background: var(--sprout); color: var(--forest); }
.cases i svg { width: 60%; height: 60%; }
.safety {
  display: flex; align-items: flex-start; gap: calc(var(--u) * 16);
  margin-top: calc(var(--u) * 22);
  font: 500 calc(var(--u) * 26)/1.5 var(--f-body); color: var(--sun);
  max-width: 56ch;
}
.safety svg { flex: 0 0 auto; width: calc(var(--u) * 38); height: calc(var(--u) * 38); margin-top: calc(var(--u) * 2); }

/* الختام */
.thanks__call { font: 500 calc(var(--u) * 30)/1.5 var(--f-body); color: rgba(236,229,216,.86); margin-top: calc(var(--u) * 34); }
.thanks__side { flex-direction: column; gap: calc(var(--u) * 64); }
.thanks__mark { width: calc(var(--u) * 250); color: var(--haze); }
.thanks__mark svg { width: 100%; height: auto; }
.thanks__en-tag { font: 700 calc(var(--u) * 46)/1 "DINPro", sans-serif; color: var(--haze); }
.qr {
  display: flex; align-items: center; gap: calc(var(--u) * 24);
  padding: calc(var(--u) * 18);
  padding-inline-end: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 24); background: var(--haze); color: var(--forest);
  font: 600 calc(var(--u) * 24)/1.35 var(--f-body);
  max-width: calc(var(--u) * 520);
}
.qr__code { width: calc(var(--u) * 150); height: calc(var(--u) * 150); background: var(--white); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 8); flex: 0 0 auto; }
.qr__code svg { width: 100%; height: 100%; }
.autobar { position: absolute; inset: auto 0 0 0; height: calc(var(--u) * 10); background: rgba(236,229,216,.12); z-index: 3; }
.autobar span { display: block; height: 100%; background: var(--sun); transform-origin: left; animation: shrink linear forwards; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.autonote { position: absolute; z-index: 3; bottom: calc(var(--u) * 26); font: 500 calc(var(--u) * 22)/1 var(--f-body); color: rgba(236,229,216,.6); inset-inline-start: calc(var(--u) * 110); }

/* شريط 988 في الشاشات الداكنة */
.dark-foot {
  position: absolute; z-index: 2; bottom: calc(var(--u) * 40);
  inset-inline-start: calc(var(--u) * 110);
  direction: var(--dir, rtl);
  color: rgba(236,229,216,.85);
}

/* =====================================================================
   تنبيه عدم النشاط + الإشعار
   ===================================================================== */
.idle { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(20,36,20,.62); backdrop-filter: blur(6px); animation: fadein .25s ease; }
.idle[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.idle__card {
  position: relative; width: calc(var(--u) * 760);
  padding: calc(var(--u) * 64) calc(var(--u) * 64) calc(var(--u) * 56);
  border-radius: calc(var(--u) * 36); background: var(--haze); color: var(--forest);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.idle__ring { width: calc(var(--u) * 132); height: calc(var(--u) * 132); transform: rotate(-90deg); margin-bottom: calc(var(--u) * 26); }
.idle__track { fill: none; stroke: var(--line); stroke-width: 8; }
.idle__bar { fill: none; stroke: var(--forest); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 0; }
.idle__bar.is-running { animation: countdown var(--warn, 10s) linear forwards; }
@keyframes countdown { to { stroke-dashoffset: 326.73; } }
.idle__count { position: absolute; top: calc(var(--u) * 64); width: calc(var(--u) * 132); height: calc(var(--u) * 132); display: grid; place-items: center; font: 700 calc(var(--u) * 52)/1 "DINPro", sans-serif; }
.idle__card h2 { font: 700 calc(var(--u) * 52)/1.2 var(--f-body); margin-bottom: calc(var(--u) * 12); }
.idle__card p { font: 400 calc(var(--u) * 30)/1.5 var(--f-body); color: var(--ink-2); margin-bottom: calc(var(--u) * 40); }

.toast {
  position: fixed; z-index: 40; left: 50%; top: calc(var(--u) * 40);
  transform: translateX(-50%);
  max-width: calc(var(--u) * 1100);
  padding: calc(var(--u) * 22) calc(var(--u) * 40);
  border-radius: 999px; background: var(--forest); color: var(--haze);
  font: 600 calc(var(--u) * 28)/1.35 var(--f-body);
  text-align: center;
  animation: fadein .3s ease;
}
.toast[hidden] { display: none; }

/* =====================================================================
   شاشة عمودية 1080×1920 (الكشك الطولي)
   ===================================================================== */
@media (orientation: portrait) {
  :root { --u: min(calc(100vw / 1080), calc(100vh / 1920)); --panel: calc(var(--u) * 660); --gutter: calc(var(--u) * 76); }

  .screen { grid-template-columns: 1fr; grid-template-rows: var(--panel) 1fr; }
  .screen--dark, .screen--attract { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .panel { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); background-size: cover; background-position: var(--px, 30%) 22%; }
  .panel__988 { left: calc(var(--u) * 60); bottom: calc(var(--u) * 40); }

  .topbar { height: calc(var(--u) * 140); padding: 0 calc(var(--u) * 48); }
  .lockup { height: calc(var(--u) * 78); }
  .lang { height: calc(var(--u) * 84); min-width: calc(var(--u) * 230); font-size: calc(var(--u) * 30); }

  .content { padding: calc(var(--u) * 44) var(--gutter) calc(var(--u) * 84); }
  .progress { font-size: calc(var(--u) * 28); margin-bottom: calc(var(--u) * 34); }
  .progress__seg { width: calc(var(--u) * 72); height: calc(var(--u) * 12); }
  .q, html[lang="en"] .q { font-size: calc(var(--u) * 56); max-width: none; margin-bottom: calc(var(--u) * 40); }
  html[lang="en"] .q { font-size: calc(var(--u) * 52); }
  .sub { font-size: calc(var(--u) * 32); max-width: none; margin-top: calc(var(--u) * -18); margin-bottom: calc(var(--u) * 34); }
  .options { gap: calc(var(--u) * 18); }
  .options--grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 18); }
  .opt { min-height: calc(var(--u) * 116); padding: calc(var(--u) * 22) calc(var(--u) * 32); font-size: calc(var(--u) * 34); border-radius: calc(var(--u) * 24); gap: calc(var(--u) * 26); }
  .options--grid .opt { font-size: calc(var(--u) * 32); padding: calc(var(--u) * 20) calc(var(--u) * 24); }
  .opt__mark { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
  .actions { padding-top: calc(var(--u) * 40); gap: calc(var(--u) * 30); }
  .btn { min-height: calc(var(--u) * 120); min-width: calc(var(--u) * 400); font-size: calc(var(--u) * 40); }
  .btn--ghost { min-width: calc(var(--u) * 240); }
  .required { font-size: calc(var(--u) * 30); }

  .display { font-size: calc(var(--u) * 124); }
  html[lang="en"] .display { font-size: calc(var(--u) * 100); }
  .lead { font-size: calc(var(--u) * 40); max-width: none; }
  .content.welcome { justify-content: center; }
  .welcome__mark { width: calc(var(--u) * 460); }
  .pillars { margin-top: calc(var(--u) * 56); gap: calc(var(--u) * 24); }
  .pillar { font-size: calc(var(--u) * 36); padding: calc(var(--u) * 22) calc(var(--u) * 34) calc(var(--u) * 22) calc(var(--u) * 24); }
  .pillar i { width: calc(var(--u) * 72); height: calc(var(--u) * 72); }

  /* شاشة الجذب: الصورة أعلى، والرسالة أسفل */
  .attract__bg {
    inset: 0; animation: none;
    background: var(--haze) url("../img/kv.webp") 35% 0 / auto 54% no-repeat;
  }
  .screen--attract::after { background: linear-gradient(180deg, rgba(236,229,216,0) 38%, var(--haze) 54%); }
  .attract__copy {
    right: auto; left: 50%; top: auto; bottom: calc(var(--u) * 210);
    width: calc(var(--u) * 900); transform: translateX(-50%);
  }
  .attract__wordmark { width: calc(var(--u) * 340); margin-bottom: calc(var(--u) * 30); }
  .attract__en-title { font-size: calc(var(--u) * 116); }
  .attract__sub { font-size: calc(var(--u) * 40); max-width: 20em; margin-bottom: calc(var(--u) * 56); }
  .attract__cta { height: calc(var(--u) * 132); padding: 0 calc(var(--u) * 64); font-size: calc(var(--u) * 42); }
  .attract__foot { height: calc(var(--u) * 170); padding: 0 calc(var(--u) * 56); }
  .attract__foot .lockup { height: calc(var(--u) * 86); }
  .line988 { font-size: calc(var(--u) * 28); }

  /* الشاشات الداكنة */
  .dark-wrap {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    gap: calc(var(--u) * 56);
    padding: calc(var(--u) * 210) calc(var(--u) * 84) calc(var(--u) * 130);
  }
  .dark-side { order: -1; }
  .jersey { font-size: calc(var(--u) * 360); }
  .jersey--ghost { font-size: calc(var(--u) * 400); }
  .dark-title { font-size: calc(var(--u) * 92); max-width: none; }
  html[lang="en"] .dark-title { font-size: calc(var(--u) * 78); }
  .dark-body { font-size: calc(var(--u) * 40); max-width: none; }
  .status { margin-bottom: calc(var(--u) * 44); }
  .status i { width: calc(var(--u) * 76); height: calc(var(--u) * 76); }

  .when__title { font-size: calc(var(--u) * 68); max-width: none; }
  html[lang="en"] .when__title { font-size: calc(var(--u) * 62); }
  .when__body { font-size: calc(var(--u) * 34); max-width: none; }
  .when__lt { font-size: calc(var(--u) * 32); }
  .cases { grid-template-columns: 1fr; gap: calc(var(--u) * 16); }
  .cases li { font-size: calc(var(--u) * 32); padding: calc(var(--u) * 20) calc(var(--u) * 26); }
  .cases i { width: calc(var(--u) * 68); height: calc(var(--u) * 68); }
  .safety { font-size: calc(var(--u) * 30); max-width: none; }

  .thanks__side { flex-direction: row; gap: calc(var(--u) * 70); }
  .thanks__side .jersey { font-size: calc(var(--u) * 260); }
  .thanks__mark { width: calc(var(--u) * 230); }
  .thanks__call { font-size: calc(var(--u) * 34); }
  .qr { font-size: calc(var(--u) * 28); max-width: calc(var(--u) * 600); }
  .qr__code { width: calc(var(--u) * 180); height: calc(var(--u) * 180); }
  .autonote { font-size: calc(var(--u) * 26); inset-inline-start: calc(var(--u) * 84); bottom: calc(var(--u) * 36); }
  .dark-foot { inset-inline-start: calc(var(--u) * 84); }

  .idle__card { width: calc(var(--u) * 900); }
  .idle__card h2 { font-size: calc(var(--u) * 60); }
  .idle__card p { font-size: calc(var(--u) * 34); }
  .toast { font-size: calc(var(--u) * 32); max-width: calc(var(--u) * 980); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .autobar span, .idle__bar.is-running { animation-duration: var(--auto, 12s) !important; }
}

:focus { outline: none; }
:focus-visible { outline: calc(var(--u) * 5) solid var(--sun); outline-offset: calc(var(--u) * 4); }
.status--icon { padding: calc(var(--u) * 12); }