:root{
  --blue:#2E93C9; --blue-d:#1B6188; --orange:#FD7430; --ink:#0d1922; --u:12px; --ar:16/9;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#0a1420; color:#fff; direction:rtl;
  font-family:"Segoe UI","Noto Sans Arabic","Tahoma",system-ui,sans-serif;
  display:grid; place-items:center; min-height:100vh; padding:16px; gap:14px;
}
.shell{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:1200px}

/* the video frame */
.frame{
  position:relative; width:100%; aspect-ratio:var(--ar); max-height:82vh;
  background:#0b1020; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55); outline:1px solid rgba(255,255,255,.06);
}
.frame.portrait{max-width:min(430px,92vw)}

/* screenshot layers (crossfade) */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .5s ease}
.shot.on{opacity:1}
.stage{position:absolute;inset:0;overflow:hidden}
.stage.kb .shot.on{animation:kb linear forwards}
@keyframes kb{from{transform:scale(1.005)}to{transform:scale(1.05)}}

/* top title chip */
.title{
  position:absolute; inset-block-start:calc(var(--u)*1.6); inset-inline-start:calc(var(--u)*1.8); z-index:5;
  background:rgba(13,25,34,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:calc(var(--u)*.55) calc(var(--u)*1.3); font-weight:800; font-size:calc(var(--u)*1.25);
  display:flex; align-items:center; gap:calc(var(--u)*.6);
}
.title .dot{width:calc(var(--u)*.7);height:calc(var(--u)*.7);border-radius:50%;background:var(--orange)}
.brandtag{position:absolute;inset-block-start:calc(var(--u)*1.6);inset-inline-end:calc(var(--u)*1.8);z-index:5;
  font-weight:800;font-size:calc(var(--u)*1.15);opacity:.92;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.brandtag b{color:#7fc5ec}

/* caption bar */
.cap{
  position:absolute; inset-inline:calc(var(--u)*1.6); inset-block-end:calc(var(--u)*3.2); z-index:6;
  background:linear-gradient(0deg,rgba(9,16,26,.92),rgba(9,16,26,.74));
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:calc(var(--u)*1.05) calc(var(--u)*1.4); text-align:center;
  font-size:calc(var(--u)*1.5); line-height:1.65; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* progress */
.bar{position:absolute;inset-inline:0;inset-block-end:0;height:calc(var(--u)*.5);background:rgba(255,255,255,.14);z-index:6}
.bar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--orange))}
.ticks{position:absolute;inset-inline:0;inset-block-end:calc(var(--u)*.5);height:calc(var(--u)*.5);display:flex;gap:2px;z-index:6;pointer-events:none}
.ticks span{flex:1;opacity:.0}

/* overlays */
.ov{position:absolute;inset:0;z-index:8;display:none;place-items:center;background:rgba(6,12,20,.6);backdrop-filter:blur(3px);cursor:pointer}
.ov.show{display:grid}
.ov .msg{background:rgba(13,25,34,.9);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:calc(var(--u)*1.6) calc(var(--u)*2.4);font-weight:800;font-size:calc(var(--u)*1.6);text-align:center}
.ov .msg .sub{font-weight:500;font-size:calc(var(--u)*1.1);opacity:.8;margin-top:.5rem}
.ov .btn{margin-top:1rem;background:var(--blue);border:none;color:#fff;font-weight:800;font-size:calc(var(--u)*1.2);padding:.6rem 1.6rem;border-radius:999px;cursor:pointer}

/* controls */
.ctrls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:14px}
.ctrls button{background:#16283a;color:#dfeaf3;border:1px solid #24384a;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;font-family:inherit;font-size:13px}
.ctrls button:hover{background:#1e3346}
.ctrls button.pri{background:var(--blue);color:#fff;border-color:var(--blue)}
.ctrls button.on{background:var(--orange);color:#fff;border-color:var(--orange)}
.ctrls .sep{width:1px;height:22px;background:#2a3f52;margin:0 4px}
.note{color:#9fb4c4;font-size:12.5px;text-align:center;max-width:640px}
.note b{color:#ffb27a}

/* record mode: hide everything but the frame */
body.rec{background:#000;padding:0}
body.rec .ctrls,body.rec .note{display:none}
body.rec .shell{max-width:none;gap:0}
body.rec .frame{max-height:100vh;height:100vh;width:100vw;border-radius:0;box-shadow:none;outline:none}

/* ===== الموبايل/الشاشة الضيّقة: تخطيط عمودي (الصورة فوق، التعليق تحتها — بلا تغطية) ===== */
.frame.narrow{aspect-ratio:auto;height:auto;max-height:none;display:flex;flex-direction:column;background:#0b1020}
.frame.narrow .stage{position:relative;width:100%;aspect-ratio:16/9;flex:none}
.frame.narrow .shot{object-fit:cover}
.frame.narrow .brandtag{display:none}
.frame.narrow .title{inset-block-start:9px;inset-inline-start:9px;font-size:13px;padding:.3rem .7rem}
.frame.narrow .cap{position:static;inset:auto;transform:none;margin:0;border:0;border-radius:0;
  background:#0e2233;text-align:center;line-height:1.65;font-size:clamp(14px,calc(var(--u)*1.7),19px);
  padding:14px 14px;box-shadow:none}
.frame.narrow .bar{position:static;height:5px}
.frame.narrow .ticks{display:none}
/* الملء الكامل على الموبايل: توسيط المحتوى العمودي داخل الشاشة */
body.rec .frame.narrow{height:100vh;justify-content:center}