/* 🇸🇦 ND96 — shared theme : National Day 96 */
@font-face { font-family: Cairo; src: url(/vendor/cairo-arabic.woff2) format('woff2'); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Cairo; src: url(/vendor/cairo-latin.woff2) format('woff2'); font-display: swap; }
:root { --green:#06231b; --green2:#0b3d26; --green3:#12703f; --mint:#22c07a; --gold:#d9b45a; --sand:#c9a86a; --cream:#f2efe3; --red:#a8452f; --ink:#04150e;
  /* one scale for the whole app: radii, shadows, hairlines, motion. Everything below uses these so the
     screens read as one product instead of four pages that each picked their own numbers. */
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --line: rgba(242,239,227,.16); --line-strong: rgba(242,239,227,.30);
  --glass: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  --sh-1: 0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.20);
  --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.30);
  --t-fast: .14s cubic-bezier(.3,.8,.4,1); --t-med: .24s cubic-bezier(.3,.8,.4,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; background: var(--green); color: var(--cream); font-family: Cairo, system-ui, sans-serif; }
body { min-height: 100vh; }
a { color: var(--gold); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 18px; }
.sadu { height: 10px; background:
   repeating-linear-gradient(90deg, var(--cream) 0 12px, transparent 12px 24px),
   repeating-linear-gradient(90deg, transparent 0 6px, var(--red) 6px 12px, transparent 12px 18px);
  opacity:.5 }
.card { background: var(--glass); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-1);
  backdrop-filter: blur(6px); animation: rise var(--t-med) both; }
@keyframes rise { from { opacity:0; transform: translateY(8px) } }
.btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; cursor:pointer; border:1px solid var(--line-strong);
  background: var(--glass); color: var(--cream); border-radius:var(--r-md); padding:12px 16px; font:inherit; font-weight:800;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.btn:hover { background: rgba(255,255,255,.13); border-color: rgba(242,239,227,.42); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn:focus-visible { outline:3px solid rgba(34,192,122,.55); outline-offset:2px; }
.btn[disabled], .btn.off { opacity:.45; pointer-events:none; }
.btn.primary { background: linear-gradient(180deg, var(--mint), var(--green3)); border-color: transparent; color:#03210f; }
.btn.gold { background: linear-gradient(180deg, var(--gold), #a97f28); border-color: transparent; color:#2a1c00; }
.btn.big { padding: 20px; font-size: 20px; width:100%; }
.btn.ghost { background: transparent; }
/* the one destructive control: make it look like one, wherever it appears */
.btn.warn { background: rgba(192,57,43,.22); border-color: rgba(255,106,82,.55); color: #ffd9d2; }
.btn.warn:hover { background: rgba(192,57,43,.38); }
.chip { display:inline-flex; gap:6px; align-items:center; background: rgba(255,255,255,.08); border:1px solid var(--line); border-radius:999px; padding:5px 13px; font-size:15px; font-weight:700; transition: background var(--t-fast); }
.dim { opacity:.72; }
.center { text-align:center; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.meter { height: 12px; border-radius: 8px; background: rgba(255,255,255,.12); overflow:hidden; }
.meter > i { display:block; height:100%; background: linear-gradient(90deg, var(--mint), var(--gold)); }
.t1 { color: var(--mint); } .t2 { color: var(--cream); }
h1, h2, h3 { margin: .2em 0; line-height:1.25; }
h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 20px; }
/* menu sections: a quiet label above a group of controls, so a wall of buttons reads as a menu */
.sect { display:flex; align-items:center; gap:10px; margin:18px 0 8px; }
.sect > b { font-size:15px; font-weight:800; opacity:.85; white-space:nowrap }
.sect > i { flex:1; height:1px; background:var(--line); display:block }
.sect > span { font-size:13px; opacity:.55 }
.brand { display:flex; align-items:center; gap:12px; }
.brand .flag { width: 54px; height: 36px; border-radius:6px; border:1px solid rgba(242,239,227,.3); }
.tiny { font-size: 15px; opacity:.7 }
.num { font-variant-numeric: tabular-nums; }
.qr { background:#f7f3e6; padding:12px; border-radius:16px; width: min(340px, 78vw); }
.qr img { width:100%; display:block }
.code { font-size: 54px; font-weight: 900; color: var(--gold); }   /* no letter-spacing anywhere: it breaks Arabic letter joining */
input, select { font: inherit; padding: 13px 15px; border-radius:var(--r-md); border:1px solid rgba(242,239,227,.25); background: rgba(0,0,0,.28); color: var(--cream); width: 100%;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
input::placeholder { color: rgba(242,239,227,.42) }
input:focus, select:focus { outline:none; border-color: rgba(34,192,122,.65); background: rgba(0,0,0,.36); box-shadow: 0 0 0 4px rgba(34,192,122,.14) }
.flash { animation: flash .6s ease } @keyframes flash { from { background: rgba(34,192,122,.35) } }
/* thin, dark scrollbars so a scrolling menu or overlay does not look like a browser default */
* { scrollbar-width: thin; scrollbar-color: rgba(242,239,227,.28) transparent }
*::-webkit-scrollbar { width:10px; height:10px }
*::-webkit-scrollbar-thumb { background: rgba(242,239,227,.24); border-radius:999px }
*::-webkit-scrollbar-track { background: transparent }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important } }

/* ---- Kanz Al-Sahra controller: joystick, quiz overlay, landscape gate ---- */
.rot{max-width:520px;margin:8vh auto}
.rotphone{font-size:74px;animation:rot 2.4s ease-in-out infinite;transform-origin:50% 60%}
@keyframes rot{0%,35%{transform:rotate(0)}65%,100%{transform:rotate(90deg)}}
.hintline{display:flex;align-items:center;gap:14px;justify-content:center;padding:6px 10px;flex-wrap:wrap}
.arrow{display:inline-block;font-size:26px;color:#e9c46a;transition:transform .12s linear}
.touch{flex:1;min-height:38vh;position:relative;border-radius:18px;margin:6px 0;
  background:radial-gradient(circle at 50% 45%,rgba(233,196,106,.10),rgba(6,43,28,.35) 70%);
  border:1px dashed rgba(233,196,106,.35);touch-action:none;user-select:none;overflow:hidden}
.touchhint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(242,239,227,.35);font-size:15px;pointer-events:none}
.stick{position:fixed;width:124px;height:124px;margin-left:-62px;margin-top:-62px;border-radius:50%;
  border:2px solid rgba(233,196,106,.55);background:rgba(6,43,28,.35);opacity:0;transition:opacity .12s;pointer-events:none;z-index:40}
.stick.on{opacity:1}
.knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin-left:-28px;margin-top:-28px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f4e3b0,#c9a24a);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.qz .qzq{font-size:20px;line-height:1.7;margin:10px 0 14px;font-weight:700}
.qzbtns{display:grid;grid-template-columns:1fr;gap:10px}
.qzbtn{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,rgba(242,239,227,.10),rgba(242,239,227,.04));color:#f2efe3;border:1px solid rgba(233,196,106,.4);
  font-family:inherit;font-size:17px;text-align:right}
.qzbtn b{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;
  background:rgba(34,192,122,.25);color:#eafff2;font-size:16px}
.qzbtn:active{transform:scale(.985)}
.qzbtn.picked{background:rgba(233,196,106,.35);border-color:#e9c46a}
.qzbtn[disabled]{opacity:.75}
.chip.gold{background:linear-gradient(180deg,#e9c46a,#c9a24a);color:#062b1c;font-weight:700}