@font-face { font-family: "Saudi"; src: url("../fonts/Saudi-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Saudi"; src: url("../fonts/Saudi-Bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
/* وحدة القياس u تتناسب مع الشاشة: 1u = 1% من العرض على شاشة 3:2 (وتصغر تلقائيًا في النسب الأعرض) */
:root {
  --u: min(1vw, 1.5vh);
  --green: #006c35;
  --green-dark: #00401f;
  --gold: #c9a24b;
  --enter: 800ms;
  --exit: 700ms;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Saudi", "Tajawal", "Segoe UI", Tahoma, sans-serif;
  color: #fff;
  background: var(--green-dark);
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 2);
  gap: calc(var(--u) * 1.5);
}
body.idle { cursor: none; }

/* فيديو الخلفية يغطي الشاشة كاملة مهما كان حجمها (يُقص الزائد ولا يتشوه)، وصورة القماش احتياطًا إن لم يعمل الفيديو (وتظهر أثناء تحميله) */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--green-dark) url("../img/bg-wall.jpg") center / cover no-repeat; }
.bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
/* تعتيم خفيف يحافظ على وضوح العنوان والنصوص فوق الفيديو */
.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%); }

header, main, .empty { position: relative; z-index: 1; }

header { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 9); }
.titles h1 { margin: 0; font-size: calc(var(--u) * 4.4); font-weight: 800; line-height: 1.2; }
.titles p { margin: calc(var(--u) * .4) 0 0; font-size: calc(var(--u) * 1.9); color: #f0dfae; }

.qr { width: calc(var(--u) * 9); height: calc(var(--u) * 9); padding: calc(var(--u) * .6); background: #fff; border-radius: calc(var(--u) * 1); flex: none; }
.qr svg { display: block; width: 100%; height: 100%; }

/* شبكة البطاقات: 5 في الصف وآخر صف يتوسط إن كانت البطاقات أقل من 10 */
main { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: calc(var(--u) * 1.5); }
.card {
  width: calc((100% - var(--u) * 6) / 5);
  height: calc((100% - var(--u) * 1.5) / 2);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--u) * 1.6);
  color: #16241c; background: #fff;
  border-radius: calc(var(--u) * 1.4);
  border-top: calc(var(--u) * .7) solid var(--accent, var(--green));
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(0,0,0,.28);
  overflow: hidden; opacity: 0;
  animation-duration: var(--enter); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.9,.3,1.15);
}
.card.in { animation-name: cardIn; }
.card.out { animation-name: cardOut; animation-duration: var(--exit); animation-timing-function: ease-in; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.8) rotate(1.5deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes cardOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(calc(var(--u) * -6)) scale(.85); }
}

.msg { margin: 0; flex: 1; display: flex; align-items: center; font-weight: 700; line-height: 1.5; word-break: break-word; overflow: hidden; }
.msg.l { font-size: calc(var(--u) * 2.5); }
.msg.m { font-size: calc(var(--u) * 2); }
.msg.s { font-size: calc(var(--u) * 1.65); }
.who { padding-top: calc(var(--u) * .9); border-top: 2px dashed #d9e4dd; }
.who .n { font-size: calc(var(--u) * 1.8); font-weight: 800; color: var(--accent, var(--green)); }
.who .j { font-size: calc(var(--u) * 1.4); color: #5a6b62; }

/* شاشة الانتظار */
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty h2 { margin: 0; font-size: calc(var(--u) * 7); }
.empty p { margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); font-size: calc(var(--u) * 2.6); color: #f0dfae; }
.qr.big { width: calc(var(--u) * 24); height: calc(var(--u) * 24); padding: calc(var(--u) * 1.5); }
body.is-empty header .qr { visibility: hidden; }

/* ============ عناصر مشتركة بين النمطين ============ */
.card { position: relative; }
.serial-tag {
  position: absolute; top: calc(var(--u) * 1.2); left: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .2) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1);
  background: #f7f1df; border: calc(var(--u) * .18) solid var(--gold); color: #6b5a26;
  font-size: calc(var(--u) * 1.7); font-weight: 800; line-height: 1.4;
}
.logo { position: relative; width: calc(var(--u) * 20); height: calc(var(--u) * 8); flex: none; display: flex; align-items: center; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.logo.has-img img { display: block; }
.logo.has-img .ph { display: none; }
.logo .ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border: calc(var(--u) * .2) dashed rgba(255,255,255,.55); border-radius: calc(var(--u) * 1);
  color: rgba(255,255,255,.8); font-size: calc(var(--u) * 1.7); font-weight: 700; background: rgba(0,0,0,.18);
}
.logo-org { justify-content: flex-end; }
.logo-nd { justify-content: flex-start; }

/* النمط القديم: يخفي عناصر النمط الجديد */
body.classic .logo, body.classic .bar, body.classic .corner, body.classic .serial-tag { display: none; }
/* النمط الجديد: يخفي عناصر النمط القديم */
body.cards4 .classic-only { display: none; }

/* ============ نمط 4 بطاقات في صف واحد ============ */
/* الأشرطة المسننة في الفيديو تشغل نحو 10% من الأعلى والأسفل، فنُبقي المحتوى بينها */
body.cards4 { --safe: calc(var(--u) * 7.6); padding: var(--safe) calc(var(--u) * 3); gap: calc(var(--u) * 1); }
body.cards4 header { height: calc(var(--u) * 9); }
body.cards4 .titles { text-align: center; flex: 1; }
body.cards4 .titles h1 { font-size: calc(var(--u) * 4); }
body.cards4 .titles p { font-size: calc(var(--u) * 1.8); }

body.cards4 main { flex-wrap: nowrap; align-content: stretch; align-items: stretch; gap: calc(var(--u) * 1.8); }
body.cards4 .card {
  width: calc((100% - var(--u) * 5.4) / 4); height: 100%;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2) calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 1.8); border-top-width: calc(var(--u) * .9);
}
body.cards4 .msg { padding-top: calc(var(--u) * 1.4); }
body.cards4 .msg.l { font-size: calc(var(--u) * 2.6); }
body.cards4 .msg.m { font-size: calc(var(--u) * 2); }
body.cards4 .msg.s { font-size: calc(var(--u) * 1.6); }
body.cards4 .who { padding-top: calc(var(--u) * 1.1); }
body.cards4 .who .n { font-size: calc(var(--u) * 1.9); line-height: 1.35; }
body.cards4 .who .j { font-size: calc(var(--u) * 1.4); }

/* الشريط السفلي: الخط المؤقت ودوائر الصفحات */
.bar { position: relative; z-index: 1; height: calc(var(--u) * 10.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .9); }
.timer { width: calc(var(--u) * 36); height: calc(var(--u) * .9); border-radius: calc(var(--u) * 1); background: rgba(255,255,255,.22); overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: right center; background: linear-gradient(90deg, #c9a24b, #f0dfae); }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.pager { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.dots { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.dot { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-radius: 50%; background: rgba(255,255,255,.4); transition: all .4s; }
.dot.edge { transform: scale(.6); opacity: .7; }
.dot.active { width: calc(var(--u) * 3.4); border-radius: calc(var(--u) * 1); background: var(--gold); box-shadow: 0 0 calc(var(--u) * 1) rgba(201,162,75,.8); }
.pageno { font-size: calc(var(--u) * 1.6); font-weight: 700; color: #f0dfae; min-width: calc(var(--u) * 6); direction: ltr; unicode-bidi: isolate; text-align: center; }
.bar.single .timer, .bar.single .pager { visibility: hidden; }

/* ركن أسفل اليسار: QR صغير وتحته العدّاد */
.corner { position: fixed; z-index: 2; left: calc(var(--u) * 3); bottom: calc(var(--u) * 7.6); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); }
.qr.small { width: calc(var(--u) * 6); height: calc(var(--u) * 6); padding: calc(var(--u) * .4); border-radius: calc(var(--u) * .7); }
.count { display: flex; align-items: baseline; gap: calc(var(--u) * .6); padding: calc(var(--u) * .3) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1); background: rgba(0,0,0,.35); white-space: nowrap; }
.count span { font-size: calc(var(--u) * 1.3); color: #f0dfae; }
.count b { font-size: calc(var(--u) * 2.4); font-weight: 800; color: #fff; }
.count b.pop { animation: pop .6s ease; }
@keyframes pop { 40% { transform: scale(1.5); color: #f0dfae; } }

/* صفحة البداية وشاشة الانتظار: نخفي الشريط السفلي والركن */
body.is-empty .bar, body.is-empty .corner { display: none; }

/* ============ شاشة السحب ============ */
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.draw { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.draw > *:not(.rays) { position: relative; z-index: 1; }
/* أشعة ذهبية دوّارة خلف المحتوى */
.rays {
  position: absolute; left: 50%; top: 50%; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax;
  background: repeating-conic-gradient(from 0deg, rgba(201,162,75,.20) 0 5deg, rgba(201,162,75,0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 22%, transparent 55%);
  mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 22%, transparent 55%);
  animation: raysSpin 60s linear infinite;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }
.draw-title { margin: 0; font-size: calc(var(--u) * 5); font-weight: 800; line-height: 1.2; color: #f7e7b0; text-shadow: 0 0 calc(var(--u) * 2) rgba(201,162,75,.8), 0 calc(var(--u) * .3) calc(var(--u) * .6) rgba(0,0,0,.5); }
.draw-sub { margin: calc(var(--u) * .3) 0 0; font-size: calc(var(--u) * 2); color: #fff; opacity: .9; }
.draw-msg { min-height: calc(var(--u) * 5); margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.6); font-size: calc(var(--u) * 3); font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; text-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(0,0,0,.5); }
.draw-msg.idle { animation: idlePulse 1.6s ease-in-out infinite; color: #f7e7b0; }
@keyframes idlePulse { 50% { transform: scale(1.08); opacity: .75; } }
.draw-msg.countdown { font-size: calc(var(--u) * 8); color: #f7e7b0; animation: countPop .95s ease-out; text-shadow: 0 0 calc(var(--u) * 2.5) rgba(201,162,75,.9); }
@keyframes countPop { from { transform: scale(2.4); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); } }
.draw-msg.spinning { color: #f7e7b0; animation: idlePulse .8s ease-in-out infinite; }
.draw-msg.reveal, .draw-msg.done { color: #f7e7b0; animation: revealIn .6s cubic-bezier(.2,1.4,.3,1); }
.draw-msg.absent { color: #ff9c92; animation: revealIn .5s ease-out; }
@keyframes revealIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.draw-cards { display: flex; gap: calc(var(--u) * 3.2); justify-content: center; }
.dcard {
  position: relative; width: calc(var(--u) * 24); height: calc(var(--u) * 22);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .5);
  padding: calc(var(--u) * 2) calc(var(--u) * 1.6); color: #16241c; background: #fff;
  border-radius: calc(var(--u) * 1.8); border-top: calc(var(--u) * .9) solid var(--gold);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.5) rgba(0,0,0,.35); overflow: hidden;
  transition: filter .5s, opacity .5s;
}
.dslot { position: absolute; top: calc(var(--u) * 1.1); right: calc(var(--u) * 1.1); width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); line-height: calc(var(--u) * 3.6); border-radius: 50%; background: linear-gradient(135deg, #f7e7b0, #c9a24b); color: #4a3a10; font-size: calc(var(--u) * 2); font-weight: 800; }
.dserial { font-size: calc(var(--u) * 6.4); font-weight: 800; line-height: 1.1; color: var(--green); font-variant-numeric: tabular-nums; }
.dname { font-size: calc(var(--u) * 2.5); font-weight: 800; line-height: 1.3; min-height: calc(var(--u) * 3.3); }
.djob { font-size: calc(var(--u) * 1.7); color: #5a6b62; min-height: calc(var(--u) * 2.2); }
.dstamp { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: calc(var(--u) * 4.2); font-weight: 800; color: #c62828; background: rgba(255,255,255,.55); transform: rotate(-14deg); border: calc(var(--u) * .4) solid #c62828; margin: calc(var(--u) * 4); border-radius: calc(var(--u) * 1); }
.dcard.empty { opacity: .55; }
.dcard.empty .dserial { color: #b9c7bf; }
.dcard.spinning { box-shadow: 0 0 calc(var(--u) * 3) rgba(201,162,75,.9), 0 calc(var(--u) * 1) calc(var(--u) * 2.5) rgba(0,0,0,.35); }
.dcard.spinning .dserial { color: #b58f2e; }
.dcard.spinning .dname { color: #5a6b62; }
.dcard.won { animation: wonPop .9s cubic-bezier(.2,1.5,.3,1); box-shadow: 0 0 calc(var(--u) * 3.5) rgba(201,162,75,.95), 0 calc(var(--u) * 1) calc(var(--u) * 2.5) rgba(0,0,0,.35); }
@keyframes wonPop { 0% { transform: scale(.85); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
.dcard.absent > :not(.dstamp) { filter: grayscale(1); opacity: .55; }
.dcard.absent .dstamp { display: flex; }

/* ============ تعديلات: الشعاران والركنان السفليان وبطاقات السحب ============ */
/* الشعاران في أعلى الشاشة بهامش خفيف من الأشرطة، وبعيدان عن البطاقات */
body.cards4 header { height: calc(var(--u) * 10); align-items: flex-start; padding-top: calc(var(--u) * .8); margin-bottom: calc(var(--u) * 1.4); }
body.cards4 .logo { height: calc(var(--u) * 7); }
body.cards4 .logo-org { width: calc(var(--u) * 20); }
body.cards4 .logo-nd { width: calc(var(--u) * 15.5); }
body.cards4 .logo-org img { object-position: right center; }
body.cards4 .logo-nd img { object-position: left center; }
body.cards4 .titles { align-self: center; }

/* الـ QR أسفل اليسار وعدد المشاركات أسفل اليمين، بهامش خفيف فوق الشريط السفلي */
.corner { display: block; bottom: calc(var(--u) * 8.2); }
.countbox {
  position: fixed; z-index: 2; right: calc(var(--u) * 3); bottom: calc(var(--u) * 8.2);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .3);
  padding: calc(var(--u) * .8) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 1.2);
  background: rgba(0,0,0,.35); text-align: center;
}
.countbox span { font-size: calc(var(--u) * 1.5); color: #f0dfae; }
.countbox b { font-size: calc(var(--u) * 4.2); font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.countbox b.pop { animation: pop .6s ease; }
body.classic .countbox, body.is-empty .countbox { display: none; }

/* شاشة السحب: بلا سطر «شاركنا رسالتك...»، وبطاقات أكبر تعرض نص رسالة الفائز بدل المهنة */
body.is-draw .titles p { display: none; }
.draw-title { font-size: calc(var(--u) * 4.4); }
.draw-msg { min-height: calc(var(--u) * 4.4); margin: calc(var(--u) * .8) 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.8); }
.draw-cards { gap: calc(var(--u) * 2.6); }
.dcard { width: calc(var(--u) * 27); height: calc(var(--u) * 23); padding: calc(var(--u) * 2.2) calc(var(--u) * 1.8) calc(var(--u) * 1.6); justify-content: flex-start; gap: calc(var(--u) * .3); }
.dserial { font-size: calc(var(--u) * 5.2); }
.dname { font-size: calc(var(--u) * 2.3); min-height: 0; }
.djob { display: none; }
.dmsg {
  flex: 1; min-height: 0; width: 100%; margin-top: calc(var(--u) * .7); padding-top: calc(var(--u) * .8);
  border-top: 2px dashed #d9e4dd; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u) * 2.1); font-weight: 700; line-height: 1.5; color: #2a3a31; word-break: break-word;
}
.dcard.empty .dmsg, .dcard.spinning .dmsg { visibility: hidden; }
.dcard.won .dmsg { animation: revealIn .7s ease-out .25s both; }

/* ============ الأربعة في الزوايا والبطاقات في وسط الشاشة (نمط 4 بطاقات) ============ */
/* الشعاران والـ QR والعدّاد ثابتة قرب الزوايا بغض النظر عن الأشرطة المسننة في الخلفية */
body.cards4 { padding: calc(var(--u) * 1.5) calc(var(--u) * 3); gap: calc(var(--u) * 1.5); }
body.cards4 header { height: calc(var(--u) * 7); padding-top: 0; margin-bottom: 0; align-items: center; justify-content: center; }
body.cards4 .logo { position: fixed; top: calc(var(--u) * 1.5); z-index: 3; height: calc(var(--u) * 7); }
body.cards4 .logo-org { right: calc(var(--u) * 2); }
body.cards4 .logo-nd { left: calc(var(--u) * 2); }
.corner { left: calc(var(--u) * 2); bottom: calc(var(--u) * 1.5); }
.qr.small { width: calc(var(--u) * 12); height: calc(var(--u) * 12); padding: calc(var(--u) * .7); border-radius: calc(var(--u) * 1); }
.countbox { right: calc(var(--u) * 2); bottom: calc(var(--u) * 1.5); height: calc(var(--u) * 12); justify-content: center; padding: 0 calc(var(--u) * 3); gap: calc(var(--u) * .6); }
.countbox span { font-size: calc(var(--u) * 1.8); }
.countbox b { font-size: calc(var(--u) * 5.4); }

/* البطاقات في وسط المساحة بين العنوان والخط المؤقت، بارتفاع لا يتجاوز 36 وحدة كي لا تلامس ركني الأسفل */
body.cards4 main { justify-content: center; align-content: center; align-items: center; }
body.cards4 .card { height: min(100%, calc(var(--u) * 36)); }
body.cards4 .msg.l { font-size: calc(var(--u) * 2.9); }
body.cards4 .msg.m { font-size: calc(var(--u) * 2.3); }
body.cards4 .msg.s { font-size: calc(var(--u) * 1.85); }
body.cards4 .who .n { font-size: calc(var(--u) * 2.1); }
body.cards4 .who .j { font-size: calc(var(--u) * 1.5); }
/* الخط المؤقت والدوائر تحت البطاقات مباشرة (فوق الشريط السفلي المسنن) */
body.cards4 .bar { height: calc(var(--u) * 10); justify-content: flex-start; padding-top: calc(var(--u) * .8); }

/* شاشة السحب: مساحة أكبر بعد تحرير الهوامش */
.draw-title { font-size: calc(var(--u) * 5); }
.dcard { width: calc(var(--u) * 29); height: calc(var(--u) * 26); }
.dserial { font-size: calc(var(--u) * 5.8); }
.dname { font-size: calc(var(--u) * 2.5); }
.dmsg { font-size: calc(var(--u) * 2.3); }
/* إنزال البطاقات قليلًا كي يقع مركزها في منتصف الشاشة تمامًا */
body.cards4 main { padding-top: calc(var(--u) * 3); }
/* رفع محتوى شاشة السحب قليلًا كي يتوسط الشاشة تمامًا */
body.cards4 .draw { padding-bottom: calc(var(--u) * 8.4); }
/* شاشة السحب: المحتوى أعلى قليلًا وبطاقات أطول لتتسع رسالة الفائز الطويلة */
body.cards4 .draw { justify-content: flex-start; padding-top: calc(var(--u) * 1.2); padding-bottom: 0; }
.dcard { height: calc(var(--u) * 31); }