/* ============================================================
   عِزُّنا — نظام التصميم
   لوحة: أخضر سعودي عميق · ذهب · رمل — وعمق ثلاثي الأبعاد حقيقي
   ============================================================ */
@import url('/assets/fonts/fonts.css');

:root {
  /* الألوان */
  --g-900:#02140c; --g-800:#04230f; --g-700:#063a1c; --g-600:#0a5b2d;
  --g-500:#0f7a3d; --g-400:#1a9b52; --g-300:#3cc172;
  --gold-600:#a97b18; --gold-500:#d4a437; --gold-400:#f0c75e; --gold-300:#ffe6a6;
  --sand:#f7f1e4; --sand-2:#efe5d2; --ink:#0b1a12; --ink-2:#31463a;
  --line:rgba(255,255,255,.12); --line-d:rgba(6,40,22,.14);
  --bg:#03170d; --card:rgba(255,255,255,.055); --card-2:rgba(255,255,255,.09);
  --txt:#eaf6ee; --txt-2:#a8c8b5; --txt-3:#7ba38c;
  --ok:#2fd38a; --warn:#f0b429; --dan:#ef5b5b;
  --r:18px; --r-lg:26px; --r-sm:12px;
  --sh-1:0 2px 10px rgba(0,0,0,.28);
  --sh-2:0 18px 40px -18px rgba(0,0,0,.65);
  --sh-3:0 40px 80px -30px rgba(0,0,0,.75);
  --ff:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif;
  --fd:'Aref Ruqaa','IBM Plex Sans Arabic',serif;
  --fq:'Amiri',serif;
}

*,*::before,*::after { box-sizing:border-box; }
svg.ic { width:19px; height:19px; flex:none; vertical-align:-3px; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; }
body {
  margin:0; font-family:var(--ff); color:var(--txt); background:var(--bg);
  font-size:16px; line-height:1.75; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.light { background:var(--sand); color:var(--ink); }
img { max-width:100%; display:block; }
button,input,select,textarea { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { margin:0 0 .4em; line-height:1.3; font-weight:700; }
p { margin:0 0 1em; }
::selection { background:var(--gold-500); color:#20160a; }

/* خلفية المنصة: تدرّج ليل + وهج أخضر + شبكة أرضية */
.bgfx { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.bgfx::before {
  content:''; position:absolute; inset:-20%;
  background:
    radial-gradient(60% 45% at 78% 6%, rgba(26,155,82,.30), transparent 62%),
    radial-gradient(48% 40% at 12% 22%, rgba(212,164,55,.16), transparent 66%),
    radial-gradient(90% 60% at 50% 110%, rgba(10,91,45,.55), transparent 70%),
    linear-gradient(180deg,#02150c 0%, #03190f 45%, #041e11 100%);
}
.bgfx .grid {
  position:absolute; inset:auto 0 -6% 0; height:62vh;
  background-image:linear-gradient(rgba(60,193,114,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(60,193,114,.16) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(70deg); transform-origin:bottom center;
  mask-image:linear-gradient(to top,#000 0%,transparent 88%);
  animation:flow 14s linear infinite;
}
@keyframes flow { to { background-position:0 64px, 64px 0; } }
.bgfx .orb {
  position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(70px); opacity:.35;
  background:radial-gradient(circle,rgba(60,193,114,.5),transparent 68%);
  animation:float 18s ease-in-out infinite;
}
.bgfx .orb.b { right:-120px; top:-80px; }
.bgfx .orb.c { left:-160px; bottom:-120px; background:radial-gradient(circle,rgba(212,164,55,.42),transparent 68%); animation-delay:-7s; }
@keyframes float { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-26px,32px,0)} }

/* ---------- تخطيط ---------- */
.wrap { width:min(1180px,calc(100% - 32px)); margin-inline:auto; }
.row { display:flex; align-items:center; gap:12px; }
.row.wrapy { flex-wrap:wrap; }
.spacer { flex:1; }
.stack { display:grid; gap:14px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.split { display:grid; gap:22px; align-items:start; }
.split.hub { grid-template-columns:1fr 340px; }
.split.hero { grid-template-columns:1.05fr .95fr; align-items:center; }
@media (max-width:900px) {
  .split.hub, .split.hero { grid-template-columns:1fr; }
  .split.hub aside { position:static !important; }
  .split.hero .scene { max-width:420px; margin-inline:auto; }
}
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.center { text-align:center; }
.muted { color:var(--txt-2); }
.small { font-size:13.5px; }
.tiny { font-size:12px; }
.hide { display:none !important; }

/* ---------- الشريط العلوي ---------- */
.nav {
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  padding:14px 22px; backdrop-filter:blur(16px);
  background:linear-gradient(180deg,rgba(2,20,12,.86),rgba(2,20,12,.55));
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand b { display:block; font-family:var(--fd); font-size:22px; letter-spacing:.5px; line-height:1.1; }
.brand small { display:block; color:var(--txt-3); font-size:11.5px; }
.mark {
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,#0f7a3d,#053b1d); border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -12px #000;
  transform-style:preserve-3d;
}
.mark svg { width:26px; height:26px; }

/* ---------- الأزرار ثلاثية الأبعاد ---------- */
.btn {
  --edge:#053b1d;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:15px; border:0; cursor:pointer; font-weight:600; font-size:15px;
  color:#fff; background:linear-gradient(160deg,var(--g-400),var(--g-600));
  box-shadow:0 5px 0 var(--edge), 0 14px 26px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.32);
  transform:translateZ(0); transition:transform .12s, box-shadow .12s, filter .2s;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
}
.btn:hover { filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 7px 0 var(--edge), 0 20px 34px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.32); }
.btn:active { transform:translateY(4px); box-shadow:0 1px 0 var(--edge), 0 6px 14px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; filter:grayscale(.4); }
.btn.gold { --edge:#8a6110; background:linear-gradient(160deg,var(--gold-400),var(--gold-600)); color:#241802; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.btn.ghost { --edge:rgba(0,0,0,.35); background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05)); border:1px solid var(--line); }
.btn.dark { --edge:#01100a; background:linear-gradient(160deg,#0a3d20,#031a0e); }
.btn.dan { --edge:#8e2020; background:linear-gradient(160deg,#f06a6a,#b22c2c); }
.btn.lg { padding:16px 30px; font-size:17px; border-radius:18px; }
.btn.sm { padding:8px 15px; font-size:13.5px; border-radius:11px; box-shadow:0 3px 0 var(--edge), 0 8px 16px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.block { width:100%; }
.btn svg { width:19px; height:19px; flex:none; }

/* ---------- البطاقات ---------- */
.card {
  position:relative; border-radius:var(--r-lg); padding:22px;
  background:linear-gradient(160deg,var(--card-2),var(--card));
  border:1px solid var(--line); box-shadow:var(--sh-2);
  backdrop-filter:blur(10px);
}
.card.pad-sm { padding:16px; border-radius:var(--r); }
.card h3 { font-size:18px; }
.glow { position:relative; }
.glow::after {
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.28),transparent 42%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}

/* بطاقة مائلة تتبع المؤشر */
.tilt {
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
  will-change:transform;
}
.tilt.on {
  transform:perspective(900px) rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg)) translateZ(14px);
  box-shadow:var(--sh-3);
}
.tilt .lift { transform:translateZ(34px); }
.tilt .lift-2 { transform:translateZ(18px); }

/* ---------- الشارات والرقائق ---------- */
.badge {
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  background:linear-gradient(160deg,rgba(212,164,55,.24),rgba(212,164,55,.08));
  border:1px solid rgba(212,164,55,.42); color:var(--gold-300); font-size:13px; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.badge svg { width:16px; height:16px; }
.chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid var(--line); font-size:12.5px; color:var(--txt-2);
}
.chip.ok { background:rgba(47,211,138,.16); border-color:rgba(47,211,138,.4); color:#93f0c4; }
.chip.warn { background:rgba(240,180,41,.16); border-color:rgba(240,180,41,.4); color:#ffdc94; }
.chip.dan { background:rgba(239,91,91,.16); border-color:rgba(239,91,91,.4); color:#ffb4b4; }

/* ---------- الحقول ---------- */
.field { display:block; margin-bottom:14px; }
.field > span { display:block; margin-bottom:7px; font-size:13.5px; color:var(--txt-2); font-weight:600; }
.inp, select.inp, textarea.inp {
  width:100%; padding:13px 15px; border-radius:14px; background:rgba(0,0,0,.28);
  border:1px solid var(--line); color:var(--txt); outline:0; transition:.18s;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
}
.inp:focus { border-color:var(--g-300); box-shadow:inset 0 2px 8px rgba(0,0,0,.35), 0 0 0 4px rgba(60,193,114,.16); }
.inp::placeholder { color:var(--txt-3); }
textarea.inp { min-height:110px; resize:vertical; line-height:1.9; }
select.inp { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ba38c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 14px center; background-size:18px; padding-left:42px; }
.code-inp { font-family:ui-monospace,monospace; letter-spacing:.42em; text-align:center; font-size:26px; font-weight:700; text-transform:uppercase; }

/* ---------- الإحصاءات ---------- */
.stat {
  position:relative; padding:18px; border-radius:var(--r); text-align:center; overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  border:1px solid var(--line); box-shadow:var(--sh-1);
}
.stat b { display:block; font-size:32px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
.stat span { display:block; font-size:12.5px; color:var(--txt-2); }
.stat.gold b { color:var(--gold-400); }

/* ---------- النجوم ---------- */
.stars { display:inline-flex; gap:4px; }
.stars svg { width:20px; height:20px; color:rgba(255,255,255,.22); }
.stars svg.on { color:var(--gold-400); filter:drop-shadow(0 2px 6px rgba(240,199,94,.5)); }

/* ---------- الإشعارات ---------- */
#toast { position:fixed; inset-block-end:22px; inset-inline-start:22px; z-index:120; display:grid; gap:9px; }
#toast .t {
  padding:12px 18px; border-radius:13px; background:rgba(6,40,22,.96); border:1px solid var(--line);
  box-shadow:var(--sh-2); font-size:14px; max-width:min(420px,88vw);
  animation:tin .32s cubic-bezier(.2,1.2,.3,1);
}
#toast .t.ok { border-color:rgba(47,211,138,.55); }
#toast .t.dan { border-color:rgba(239,91,91,.6); }
#toast .t.warn { border-color:rgba(240,180,41,.55); }
@keyframes tin { from{opacity:0;transform:translateY(14px) scale(.96)} }

/* ---------- النوافذ ---------- */
.modal-bg {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(1,10,6,.72); backdrop-filter:blur(7px); animation:fade .22s;
}
.modal {
  width:min(560px,100%); max-height:88vh; overflow:auto; border-radius:24px; padding:26px;
  background:linear-gradient(165deg,#0a2d18,#04190d); border:1px solid var(--line);
  box-shadow:var(--sh-3); animation:pop .34s cubic-bezier(.2,1.15,.3,1);
}
@keyframes fade { from{opacity:0} }
@keyframes pop { from{opacity:0; transform:translateY(20px) scale(.95) rotateX(8deg)} }

/* ---------- الجداول ---------- */
.tbl { width:100%; border-collapse:separate; border-spacing:0 7px; font-size:14px; }
.tbl th { text-align:start; font-size:12px; color:var(--txt-3); font-weight:600; padding:0 12px 4px; }
.tbl td { background:rgba(255,255,255,.05); padding:11px 12px; border-block:1px solid var(--line); }
.tbl tr td:first-child { border-start-start-radius:12px; border-end-start-radius:12px; border-inline-start:1px solid var(--line); }
.tbl tr td:last-child { border-start-end-radius:12px; border-end-end-radius:12px; border-inline-end:1px solid var(--line); }
.tbl tr:hover td { background:rgba(255,255,255,.085); }
.tblwrap { overflow-x:auto; }

/* ---------- لوحة الشرف ---------- */
.lb { display:grid; gap:10px; }
.lb-row {
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:14px;
  padding:12px 16px; border-radius:16px; background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .2s;
}
.lb-row:hover { transform:translateX(-5px); }
.lb-row .no {
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-weight:700;
  background:rgba(255,255,255,.08); border:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.lb-row.r1 { border-color:rgba(240,199,94,.55); background:linear-gradient(160deg,rgba(212,164,55,.22),rgba(212,164,55,.05)); }
.lb-row.r1 .no { background:linear-gradient(160deg,var(--gold-400),var(--gold-600)); color:#241802; box-shadow:0 6px 16px -8px var(--gold-500); }
.lb-row.r2 { border-color:rgba(210,220,225,.4); }
.lb-row.r2 .no { background:linear-gradient(160deg,#e6eef1,#9fb1b8); color:#16242a; }
.lb-row.r3 { border-color:rgba(205,140,85,.45); }
.lb-row.r3 .no { background:linear-gradient(160deg,#e3ab7b,#a86a3c); color:#2a1708; }
.lb-row b { font-size:15.5px; }
.lb-row .sc { font-weight:700; font-size:19px; color:var(--gold-400); font-variant-numeric:tabular-nums; }

/* ---------- المشهد ثلاثي الأبعاد ---------- */
.scene { perspective:1200px; perspective-origin:50% 45%; }
.stage3d {
  position:relative; transform-style:preserve-3d;
  transform:rotateX(calc(9deg + var(--my,0)*-7deg)) rotateY(calc(var(--mx,0)*12deg));
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
/* العلم */
.flag3d { position:relative; transform-style:preserve-3d; }
.flag3d .pole {
  position:absolute; inset-inline-end:-12px; top:-30px; width:10px; height:calc(100% + 86px); border-radius:6px;
  background:linear-gradient(90deg,#8e9aa2,#e6eef1 40%,#7d8991);
  box-shadow:0 20px 34px -16px rgba(0,0,0,.8); transform:translateZ(6px);
}
.flag3d .pole::before {
  content:''; position:absolute; top:-14px; inset-inline-start:-5px; width:19px; height:19px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe9ae,#c99a28);
  box-shadow:0 0 20px rgba(212,164,55,.8);
}
.ksaflag {
  display:block; width:100%; height:auto; transform:translateZ(24px);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));
}

/* نخلة */
.palm { position:absolute; transform:translateZ(60px); filter:drop-shadow(0 18px 22px rgba(0,0,0,.55)); }
.palm svg { width:100%; height:auto; overflow:visible; }
.palm .frond { transform-origin:79px 76px; animation:sway 5.5s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes sway {
  0%,100% { transform:rotate(0) scale(1); filter:brightness(1); }
  50%     { transform:rotate(2.4deg) scale(1.02); filter:brightness(1.16); }
}

/* بطاقات طافية */
.fl { position:absolute; transform-style:preserve-3d; animation:bob 6s ease-in-out infinite; animation-delay:var(--d,0s); }
.fl > div { transform:translateZ(var(--zz,120px)); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.pill3d {
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.26); box-shadow:0 16px 30px -16px #000, inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter:blur(9px); font-size:13.5px; font-weight:600;
}
.pill3d.gold { background:linear-gradient(160deg,rgba(240,199,94,.9),rgba(169,123,24,.85)); color:#241802; border-color:rgba(255,230,166,.7); }
.pill3d svg { width:16px; height:16px; }

/* ---------- المسابقات ---------- */
.qcard {
  position:relative; border-radius:24px; padding:22px; overflow:hidden; cursor:pointer;
  background:linear-gradient(160deg, hsl(var(--h,158) 52% 26% / .92), hsl(var(--h,158) 60% 12% / .95));
  border:1px solid hsl(var(--h,158) 55% 46% / .38);
  box-shadow:var(--sh-2); transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.qcard::before {
  content:''; position:absolute; inset-block-start:-50%; inset-inline-end:-30%; width:72%; height:180%;
  background:radial-gradient(circle, hsl(var(--h,158) 80% 62% / .26), transparent 66%);
  pointer-events:none;
}
.ic3 {
  width:60px; height:60px; border-radius:19px; display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg, hsl(var(--h,158) 62% 48%), hsl(var(--h,158) 70% 24%));
  border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 14px 24px -14px #000;
}
.qcard .ic3 { transform:translateZ(38px); }
.ic3 svg { width:31px; height:31px; }
.qcard h3 { font-size:19.5px; margin:0; }
.qcard .act { font-size:12px; color:rgba(255,255,255,.62); }
.qcard .bar { height:7px; border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden; margin-top:12px; }
.qcard .bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold-400),var(--gold-600)); box-shadow:0 0 14px rgba(240,199,94,.55); transition:width .8s cubic-bezier(.2,.8,.3,1); }
.qcard.done { border-color:rgba(47,211,138,.5); }
.qcard .seal3 {
  position:absolute; inset-block-start:16px; inset-inline-start:16px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; transform:translateZ(46px) rotate(-12deg);
  background:linear-gradient(150deg,var(--gold-400),var(--gold-600)); color:#241802;
  box-shadow:0 12px 22px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5);
}

/* السؤال */
.qbox { perspective:1400px; }
.qface {
  transform-style:preserve-3d; animation:qin .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes qin { from{opacity:0; transform:rotateY(-14deg) translateZ(-70px)} }
.opt {
  position:relative; display:flex; align-items:center; gap:13px; width:100%; text-align:start;
  padding:15px 18px; border-radius:17px; cursor:pointer; margin-bottom:11px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  border:1px solid var(--line); box-shadow:0 4px 0 rgba(0,0,0,.34), var(--sh-1);
  transition:transform .14s, box-shadow .14s, background .2s, border-color .2s;
}
.opt:hover { transform:translateY(-2px); background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); }
.opt:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.34); }
.opt .k {
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; font-weight:700;
  background:rgba(0,0,0,.3); border:1px solid var(--line); font-size:14px;
}
.opt.sel { border-color:var(--gold-500); background:linear-gradient(160deg,rgba(212,164,55,.26),rgba(212,164,55,.08)); }
.opt.sel .k { background:linear-gradient(150deg,var(--gold-400),var(--gold-600)); color:#241802; }
.opt.ok { border-color:rgba(47,211,138,.7); background:linear-gradient(160deg,rgba(47,211,138,.26),rgba(47,211,138,.07)); }
.opt.no { border-color:rgba(239,91,91,.7); background:linear-gradient(160deg,rgba(239,91,91,.22),rgba(239,91,91,.06)); }
.opt.lock { pointer-events:none; }

/* شريط التقدّم في المسابقة */
.beads { display:flex; gap:7px; flex-wrap:wrap; }
.beads i {
  width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5); transition:.3s;
}
.beads i.on { background:linear-gradient(150deg,var(--gold-400),var(--gold-600)); box-shadow:0 0 12px rgba(240,199,94,.6); transform:scale(1.32); }
.beads i.ok { background:linear-gradient(150deg,#4ee0a2,#12915c); }
.beads i.no { background:linear-gradient(150deg,#ff8a8a,#b62d2d); }

/* عناصر السحب والترتيب */
.sortable { display:grid; gap:10px; }
.sortable .it {
  display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:15px; cursor:grab;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:1px solid var(--line); box-shadow:0 4px 0 rgba(0,0,0,.3), var(--sh-1);
  transition:transform .2s, box-shadow .2s;
}
.sortable .it:active { cursor:grabbing; }
.sortable .it.drag { opacity:.45; transform:scale(.98); }
.sortable .it.over { border-color:var(--gold-500); transform:translateY(-3px); }
.sortable .it .n { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:rgba(0,0,0,.3); font-weight:700; flex:none; font-size:13px; }
.sortable .it .mv { display:flex; flex-direction:column; gap:3px; margin-inline-start:auto; }
.sortable .it .mv button { width:28px; height:22px; border-radius:7px; border:1px solid var(--line); background:rgba(255,255,255,.08); cursor:pointer; display:grid; place-items:center; padding:0; }
.sortable .it .mv button:hover { background:rgba(255,255,255,.18); }
.sortable .it .mv svg { width:14px; height:14px; }

/* مطابقة */
.matchbox { display:grid; gap:10px; }
.matchrow { display:grid; grid-template-columns:1fr 1.2fr; gap:10px; align-items:center; }
.matchrow .l { padding:12px 15px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid var(--line); font-weight:600; font-size:14.5px; }

/* سلال التصنيف */
.buckets { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-top:12px; }
.bucket { min-height:96px; padding:12px; border-radius:17px; border:2px dashed var(--line); background:rgba(0,0,0,.2); transition:.2s; }
.bucket.over { border-color:var(--gold-500); background:rgba(212,164,55,.1); }
.bucket h4 { font-size:14px; margin:0 0 8px; color:var(--gold-300); }
.bucket .drop { display:grid; gap:7px; }
.tag {
  padding:9px 13px; border-radius:12px; font-size:13.5px; cursor:grab;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid var(--line); box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.tag.drag { opacity:.4; }

/* خريطة المملكة */
.ksa { width:100%; max-width:520px; margin-inline:auto; }
.ksa path { fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.3); stroke-width:1.4; cursor:pointer; transition:.2s; }
.ksa path:hover { fill:rgba(60,193,114,.3); }
.ksa path.sel { fill:url(#gGold); stroke:var(--gold-400); filter:drop-shadow(0 6px 14px rgba(240,199,94,.4)); }
.ksa path.ok { fill:rgba(47,211,138,.45); stroke:#2fd38a; }
.ksa path.no { fill:rgba(239,91,91,.4); stroke:#ef5b5b; }
.ksa text { fill:var(--txt-2); font-size:13px; font-family:var(--ff); pointer-events:none; }

/* ---------- النتيجة ---------- */
.medal {
  width:150px; height:150px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(from 210deg,#ffe6a6,#d4a437,#8a6110,#f0c75e,#ffe6a6);
  box-shadow:0 26px 50px -20px rgba(212,164,55,.75), inset 0 3px 10px rgba(255,255,255,.55);
  animation:spin3 7s linear infinite; transform-style:preserve-3d;
}
@keyframes spin3 { from{transform:rotateY(0)} to{transform:rotateY(360deg)} }
.medal .in {
  width:114px; height:114px; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:linear-gradient(160deg,#0a5b2d,#03200f); color:#fff; border:3px solid rgba(255,255,255,.28);
}
.medal .in b { font-size:34px; line-height:1; display:block; font-variant-numeric:tabular-nums; }
.medal .in small { font-size:11px; color:var(--gold-300); }

.conf { position:fixed; inset:0; pointer-events:none; z-index:95; overflow:hidden; }
.conf i {
  position:absolute; width:9px; height:15px; opacity:0;
  animation:fall linear forwards;
}
@keyframes fall { 0%{opacity:1; transform:translateY(-20vh) rotate(0)} 100%{opacity:.15; transform:translateY(108vh) rotate(720deg)} }

/* ---------- جدار الوطن ---------- */
.wall { columns:3 300px; column-gap:16px; }
.note {
  break-inside:avoid; margin-bottom:16px; padding:18px; border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  border:1px solid var(--line); box-shadow:var(--sh-2); transform-style:preserve-3d;
  transition:transform .3s;
}
.note:hover { transform:translateY(-4px) rotate(-.4deg); }
.note .who { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:12.5px; color:var(--txt-3); }
.note .av { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-weight:700; font-size:13px; background:linear-gradient(150deg,var(--g-400),var(--g-700)); color:#fff; flex:none; }
.note img { border-radius:14px; margin-bottom:12px; }
.note .vote { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; border:1px solid var(--line); background:rgba(0,0,0,.25); cursor:pointer; font-size:13px; }
.note .vote:hover { border-color:var(--gold-500); color:var(--gold-300); }
.note .vote svg { width:15px; height:15px; }

/* ---------- الشهادة ---------- */
.cert-wrap { perspective:1600px; }
.cert {
  position:relative; width:100%; aspect-ratio:1.414/1; border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,#fffdf7,#f3ead6);
  color:#123; box-shadow:0 44px 80px -34px rgba(0,0,0,.85);
  transform-style:preserve-3d; transition:transform .5s;
}
.cert .frame { position:absolute; inset:16px; border:2px solid var(--gold-600); border-radius:8px; }
.cert .frame::after { content:''; position:absolute; inset:7px; border:1px solid rgba(169,123,24,.45); border-radius:5px; }
.cert .body { position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:6%; gap:.4em; }
.cert h2 { font-family:var(--fd); color:#0a5b2d; margin:0; }
.cert .nm { font-family:var(--fd); font-size:clamp(20px,4.4vw,40px); color:#0a3d20; border-bottom:2px dashed rgba(169,123,24,.5); display:inline-block; padding-bottom:6px; }
.cert .sig { display:flex; justify-content:space-between; position:absolute; inset-inline:9%; bottom:7%; font-size:clamp(9px,1.5vw,13px); color:#3a4a40; }
.cert .wm { position:absolute; inset-block-start:50%; inset-inline-start:50%; translate:-50% -50%; opacity:.05; width:56%; }

/* ---------- شاشة العرض ---------- */
.screen { min-height:100vh; padding:26px 32px; }
.screen h1 { font-family:var(--fd); font-size:clamp(30px,4.6vw,62px); }
.screen .big { font-size:clamp(38px,6vw,86px); font-weight:700; line-height:1; color:var(--gold-400); font-variant-numeric:tabular-nums; }
.marq { overflow:hidden; white-space:nowrap; }
.marq > div { display:inline-flex; gap:34px; animation:mv 34s linear infinite; }
@keyframes mv { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* ---------- عدّاد ---------- */
.count { display:flex; gap:10px; justify-content:center; }
.count .u {
  min-width:76px; padding:12px 10px; border-radius:17px; text-align:center;
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid var(--line); box-shadow:var(--sh-1); transform-style:preserve-3d;
}
.count .u b { display:block; font-size:30px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.count .u span { font-size:11.5px; color:var(--txt-3); }

/* ---------- فراغ ---------- */
.empty { text-align:center; padding:48px 20px; color:var(--txt-3); }
.empty .em-ic { width:66px; height:66px; margin:0 auto 14px; border-radius:22px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.empty .em-ic svg { width:31px; height:31px; }

.skeleton { border-radius:16px; background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 70%); background-size:220% 100%; animation:sk 1.4s linear infinite; }
@keyframes sk { to { background-position:-120% 0; } }

/* ---------- الطباعة ---------- */
@media print {
  body { background:#fff; color:#000; }
  .noprint, .nav, .bgfx { display:none !important; }
  .cert { box-shadow:none; border:1px solid #ccc; }
}

/* ---------- الجوال ---------- */
@media (max-width:760px) {
  .wrap { width:calc(100% - 22px); }
  .nav { padding:10px 12px; gap:8px; }
  .nav .btn.sm { padding:7px 11px; font-size:12.5px; }
  .brand b { font-size:17px; }
  .brand small { display:none; }
  .mark { width:38px !important; height:38px !important; }
  .mark svg { width:21px; height:21px; }
  .wall { columns:1; }
  .matchrow { grid-template-columns:1fr; }
  .card { padding:17px; border-radius:20px; }
  .btn.lg { padding:14px 22px; font-size:15.5px; }
  .scene .fl { display:none; }
  .scene .stage3d { padding:34px 18px 44px; }
  .stat b { font-size:26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}