:root { --coal:#1A1A1A; --aqua:#00F6FF; --lime:#A3FF5A; --grad:linear-gradient(90deg,var(--aqua),var(--lime)); }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; background:#000; color:#fff; font-family:Tajawal, system-ui, sans-serif; }
[hidden] { display:none !important; }
#ar { position:fixed; inset:0; }
#ar video { object-fit:cover; }

/* intro */
#intro { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:16px;
  background:radial-gradient(120% 80% at 50% 20%, #232323, #0b0b0b); }
.card { width:min(400px,100%); text-align:center; display:grid; gap:14px; justify-items:center; }
.card .logo { width:min(64vw,260px); mix-blend-mode:screen; }   /* logo art sits on black */
.card p { line-height:1.7; font-size:17px; opacity:.9; }
#progress { width:100%; height:5px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
#progress i { display:block; height:100%; width:0; background:var(--grad); transition:width .3s; }
#go { font:inherit; font-size:21px; font-weight:900; color:var(--coal); background:var(--grad); border:0; border-radius:99px; padding:13px 38px; cursor:pointer; }
#go:disabled { opacity:.35; }
#status { font-size:13px; opacity:.6; }

/* alignment guide: centred like the camera's optical centre, hints at the bottom */
#guide { position:fixed; inset:0; z-index:10; display:grid; place-items:center; pointer-events:none; }
#guideImg { height:70vh; max-width:92vw; object-fit:contain; opacity:.55; transition:filter .25s, opacity .25s; animation:breathe 2.4s ease-in-out infinite; }
#guide.near #guideImg { opacity:.75; filter:drop-shadow(0 0 10px rgba(0,246,255,.9)); }
#guide.ok #guideImg { opacity:.85; filter:drop-shadow(0 0 16px rgba(163,255,90,1)); }
@keyframes breathe { 50% { transform:scale(1.012); opacity:.8; } }
#guide .hint { position:fixed; bottom:max(44px, env(safe-area-inset-bottom)); inset-inline:16px; text-align:center; font-weight:700; font-size:18px; text-shadow:0 1px 8px rgba(0,0,0,.8); }
#guide .hint small { font-weight:400; font-size:14px; opacity:.85; }
#hold { position:fixed; bottom:max(26px, env(safe-area-inset-bottom)); inset-inline:0; margin:auto; width:min(240px,60vw); height:5px; border-radius:99px; background:rgba(255,255,255,.3); overflow:hidden; }
#hold i { display:block; height:100%; width:0; background:var(--grad); }

/* the show: a 9:16 stage covering the phone screen (whole frame on desktop) */
#stage { position:fixed; left:50%; top:50%; z-index:5; height:max(100vh, calc(100vw * 16 / 9)); aspect-ratio:9/16; transform:translate(-50%,-50%); overflow:hidden; background:#000; }
@media (min-aspect-ratio: 3/4) { #stage { height:100vh; } }
#stage video, #fx, #sky { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#stage video { visibility:hidden; }
#stage video.on { visibility:visible; }
#fx, #sky { pointer-events:none; }

#chips { position:fixed; top:34%; inset-inline:16px; z-index:8; display:flex; flex-direction:column; align-items:flex-start; gap:10px; pointer-events:none; }
.chip { font-weight:900; font-size:clamp(20px,6vw,30px); padding:6px 16px; border-radius:14px; color:var(--coal); background:var(--grad); unicode-bidi:plaintext;
  transform:translateX(40px) scale(.6); opacity:0; transition:transform .35s cubic-bezier(.2,1.6,.4,1), opacity .2s; box-shadow:0 6px 24px rgba(0,246,255,.35); }
.chip.on { transform:none; opacity:1; }
#sub { position:fixed; z-index:8; bottom:max(22px, env(safe-area-inset-bottom)); inset-inline:16px; text-align:center; font-size:clamp(18px,5vw,24px);
  font-weight:700; line-height:1.55; text-shadow:0 2px 10px #000, 0 0 2px #000; pointer-events:none; }
#sub i { font-style:normal; opacity:.35; transition:opacity .12s, color .12s; }
#sub i.said { opacity:1; }
#sub i.now { color:var(--lime); }
#replay { position:fixed; z-index:9; top:max(16px, env(safe-area-inset-top)); inset-inline-start:16px; font:inherit; font-weight:700; font-size:15px;
  color:#fff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.35); border-radius:99px; padding:8px 16px; backdrop-filter:blur(8px); }