:root{
  /* ألوان مستخرجة مباشرة من دليل هوية اليوم الوطني السعودي (SND-GUIDELINE):
     الأخضر الغامق أساس النظام البصري، وست ألوان "الطباع" (سمات الهوية) */
  --font: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;

  --g-950:#00272a;   /* أخضر داكن جدًا — خلفية الدليل الرسمية */
  --g-900:#0a3b2e;
  --g-800:#0f5c3f;
  --g-700:#0e7a44;
  --g-600:#049351;   /* الأخضر البرّاق المعتمد لشارات الأقسام في الدليل */
  --g-500:#2fb06a;
  --g-400:#6ecf95;
  --g-200:#c9ecd4;
  --g-100:#e3f7e9;
  --g-50:#f4fdf6;
  --white:#ffffff;
  --cream:#fbfff9;
  --danger:#c8304a;
  --danger-dark:#9f2038;
  --gold:#c79a3d;

  /* ألوان "الطباع" الستّة الرسمية من صفحة عناصر الهوية البصرية */
  --trait-vision:#7c5d21;        /* رؤيتنا */
  --trait-courage:#607c4f;       /* شجاعتنا */
  --trait-determination:#971a4d; /* همتنا */
  --trait-authenticity:#5aba1c;  /* أصالتنا */
  --trait-generosity:#0050af;    /* كرمنا */
  --trait-giving:#6565e0;        /* جودنا */

  --card-bg:#ffffff;
  --card-border:rgba(15,92,63,.16);
  --shadow-soft:0 10px 30px rgba(0,39,42,.10);
  --shadow-med:0 18px 45px rgba(0,39,42,.16);
  --text-main:#0a3a22;
  --text-sub:#0e7a44;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text-main);
  height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(46,138,76,.14), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(12,66,39,.12), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(114,198,141,.10), transparent 40%),
    linear-gradient(150deg,var(--cream) 0%, var(--g-50) 45%, #eefcf3 100%);
  background-size:200% 200%, 200% 200%, 200% 200%, 200% 200%;
  animation: bgDrift 22s ease-in-out infinite;
  transition:background-color .35s ease, color .35s ease;
}
@keyframes bgDrift{
  0%,100%{background-position:0% 0%, 100% 0%, 50% 100%, 0% 0%;}
  50%{background-position:20% 30%, 70% 30%, 40% 70%, 30% 30%;}
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(rgba(18,90,52,.09) 1.6px, transparent 1.6px);
  background-size:26px 26px;
  animation: dotsFloat 30s linear infinite;
}
@keyframes dotsFloat{ from{background-position:0 0;} to{background-position:260px 260px;} }

/* نسيج خطوط شبكية دقيقة أسوة بصفحات دليل الهوية الرسمي */
.grid-texture{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(0,39,42,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,39,42,.06) 1px, transparent 1px);
  background-size:56px 56px;
}
body.dark-mode .grid-texture{
  opacity:.6;
  background-image:
    linear-gradient(rgba(110,207,149,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,207,149,.07) 1px, transparent 1px);
}

/* شريط علوي مصغّر بأسلوب "BRAND GUIDELINES / SAUDI NATIONAL DAY" من الدليل الرسمي */
.brand-strip{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.62rem; font-weight:800; letter-spacing:.08em;
  color:var(--g-600); opacity:.8; padding-bottom:.4rem; margin-bottom:.6rem;
  border-bottom:1px solid var(--card-border);
}
body.dark-mode .brand-strip{ color:var(--g-400); border-color:rgba(114,198,141,.25); }

/* صف الألماسات الفاصل، كما تُستخدم بين العنوان والنص في الدليل الرسمي */
.diamond-divider{ display:flex; justify-content:center; gap:.4rem; margin:0 0 .6rem; }
.diamond-divider span{ width:5px; height:5px; background:var(--g-600); transform:rotate(45deg); opacity:.35; flex-shrink:0; }
.diamond-divider span:nth-child(3n+1){ opacity:.8; }

/* خط أفق معالم المملكة أسفل الشاشة */
.skyline-strip{
  position:fixed; bottom:0; right:0; left:0; height:120px; z-index:0; pointer-events:none;
  background-image:url('/contests/national-day/images/landmarks-skyline.svg');
  background-repeat:repeat-x; background-position:bottom center; background-size:auto 100%;
  opacity:.16;
  animation: skylineDrift 40s linear infinite;
}
@keyframes skylineDrift{ from{ background-position-x:0; } to{ background-position-x:-1600px; } }

/* جزيئات زخرفية طافية */
.floaters{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.floaters span{
  position:absolute; bottom:-10%; font-size:1.4rem; opacity:.16; filter:saturate(.6);
  animation: floatUp linear infinite;
  color:var(--g-700);
}
@keyframes floatUp{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:.22; }
  90%{ opacity:.18; }
  100%{ transform:translateY(-115vh) rotate(300deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ===================== أزرار عامة ===================== */
.btn{
  border:none; cursor:pointer; font-family:inherit; font-weight:800;
  border-radius:14px; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn:active{ transform:translateY(0); }
.btn img.icon{ width:1.05em; height:1.05em; }
.btn-header{ padding:.5rem .9rem; font-size:.8rem; color:#fff; box-shadow:0 8px 18px rgba(5,46,26,.16); white-space:nowrap;}
.btn-wheel{ background:linear-gradient(135deg,var(--g-700),var(--g-600)); }
.btn-help{ background:linear-gradient(135deg,var(--g-600),var(--g-500)); }
.btn-winner{ background:linear-gradient(135deg,var(--g-900),var(--g-800)); }
.btn-end{ background:linear-gradient(135deg,var(--danger),var(--danger-dark)); }
.btn-dark-toggle{
  background:var(--g-100); color:var(--g-900); width:38px; height:38px; padding:0; border-radius:12px;
  font-size:1rem; box-shadow:var(--shadow-soft);
}

/* ===================== الهيدر ===================== */
.site-header{
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--card-border);
  box-shadow:0 10px 30px rgba(5,46,26,.08);
  position:relative; z-index:40; flex-shrink:0;
  padding:.55rem 1.4rem;
}
.header-inner{
  max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.header-actions{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:flex-start; }
.header-right{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
.school-badge{
  display:flex; align-items:center; gap:.5rem; font-weight:900; color:var(--g-900);
  background:linear-gradient(135deg,var(--g-50),#ffffff);
  border:1px solid var(--g-200); padding:.45rem .85rem; border-radius:12px;
  box-shadow:0 8px 20px rgba(18,90,52,.10); white-space:nowrap; font-size:.85rem;
}
.school-icon{ font-size:1.05rem; }

/* ===================== شاشة الإعداد ===================== */
.setup-screen{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:.5rem 1.2rem; position:relative; z-index:1; overflow:hidden;}
.setup-card{
  position:relative; max-width:620px; width:100%; max-height:100%; text-align:center;
  background:linear-gradient(160deg, rgba(255,255,255,.97), rgba(245,255,249,.94));
  border:2px solid rgba(31,107,58,.35);
  border-radius:24px; padding:clamp(.9rem,2.6vh,1.7rem) clamp(1rem,3vw,1.8rem);
  box-shadow:0 34px 80px rgba(5,46,26,.18), 0 0 0 6px rgba(31,107,58,.08), inset 0 1px 0 rgba(255,255,255,.9);
  overflow-y:auto; overflow-x:hidden;
  animation: cardIn .5s ease-out;
  display:flex; flex-direction:column;
}
@keyframes cardIn{ from{opacity:0; transform:scale(.94) translateY(8px);} to{opacity:1; transform:scale(1) translateY(0);} }
.setup-card::after{
  content:""; position:absolute; top:0; right:-40%; width:30%; height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sheen 7s ease-in-out infinite; pointer-events:none;
}
@keyframes sheen{ 0%,55%{ right:130%; } 85%,100%{ right:-40%; } }

.sparkle{ position:absolute; color:var(--gold); opacity:0; font-size:1rem; animation:sparklePop 3.2s ease-in-out infinite; pointer-events:none;}
.sparkle-a{ top:12%; left:10%; animation-delay:.2s; }
.sparkle-b{ top:22%; right:12%; animation-delay:1.1s; }
.sparkle-c{ bottom:16%; left:18%; animation-delay:2s; }
.sparkle-d{ bottom:20%; right:16%; animation-delay:1.6s; }
@keyframes sparklePop{
  0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); }
  50%{ opacity:.9; transform:scale(1.1) rotate(20deg); }
}

/* الشعار الرسمي لليوم الوطني السعودي — مستخرج حرفيًا من دليل الهوية المعتمد
   ويُستخدم كما هو دون أي تحوير أو تدوير أو تغيير شفافية، حفاظًا على سلامته
   البصرية وفق قواعد الاستخدام الرسمية (المساحة الهامشية وسلامة الألوان). */
.hero-logo-img{
  width:min(220px,58%); height:auto; display:block; margin:0 auto .5rem;
  border-radius:10px; box-shadow:0 12px 26px rgba(0,39,42,.30);
  animation: floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

.header-logo-img{ height:40px; width:auto; border-radius:7px; box-shadow:0 6px 14px rgba(0,39,42,.22); display:block; }

/* غلاف زخرفي عام (للصقر ونحوه) — عناصر توضيحية وليست الشعار الرسمي */
.watermark-deco{
  position:absolute; width:230px; height:230px; opacity:.06; pointer-events:none;
  bottom:-40px; left:-40px; transform:rotate(-12deg);
}

.hero-kicker{
  display:inline-block; font-weight:900; color:var(--g-800); background:var(--g-100);
  border:1px solid var(--g-200); padding:.22rem .8rem; border-radius:999px;
  margin-bottom:.5rem; font-size:.72rem; letter-spacing:.02em;
}
.hero-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.3rem,3.6vh,1.9rem); line-height:1.25; margin:0 0 .3rem;
  background:linear-gradient(90deg,var(--g-900),var(--g-600),var(--g-900));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradientMove 6s linear infinite;
}
.hero-subtitle{ color:var(--text-sub); font-size:.78rem; font-weight:700; margin:0 0 .5rem; }@keyframes shineSweep{ 0%,60%{ left:-120%; } 90%,100%{ left:150%; } }.setup-label{ display:block; font-size:.76rem; font-weight:800; color:var(--g-800); margin-bottom:.35rem; }
.team-count-row{ display:flex; justify-content:center; gap:.6rem; margin-bottom:.6rem; }
.team-count-btn{
  width:38px; height:38px; border-radius:12px; font-weight:900; font-size:1rem;
  border:2px solid var(--g-200); background:#fff; color:var(--g-800); cursor:pointer;
  transition:all .2s ease; font-family:inherit;
}
.team-count-btn:hover{ border-color:var(--g-600); transform:translateY(-2px); }
.team-count-btn.active{
  background:linear-gradient(135deg,var(--g-700),var(--g-600)); color:#fff; border-color:var(--g-700);
  box-shadow:0 10px 20px rgba(18,90,52,.25);
}

.team-inputs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem .6rem; margin-bottom:.7rem; }
.team-input-row{ min-width:0; }
.team-input-row{ display:flex; align-items:center; gap:.4rem; }
.team-input-tag{ font-size:.68rem; font-weight:800; color:var(--g-800); width:auto; white-space:nowrap; flex-shrink:0;}
.team-input-row input{
  flex:1; min-width:0; padding:.4rem .6rem; border-radius:10px; border:1px solid var(--g-200);
  font-size:.78rem; font-weight:800; font-family:inherit; color:var(--text-main); background:#fff;
}
.team-input-row input:focus{ outline:none; border-color:var(--g-600); box-shadow:0 0 0 4px var(--g-100); }

.btn-start{
  width:100%; color:#fff; font-weight:900; padding:.7rem; border-radius:14px; font-size:.92rem;
  background:linear-gradient(90deg,var(--g-800),var(--g-500),var(--g-800));
  background-size:220% auto; animation:gradientMove 4s linear infinite;
  box-shadow:0 16px 36px rgba(18,90,52,.30); border:none; cursor:pointer;
  font-family:inherit; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
}
.btn-start img{ width:1.3em; border-radius:3px; }
.btn-start:hover{ transform:translateY(-2px); box-shadow:0 20px 46px rgba(18,90,52,.36); }
@keyframes gradientMove{ to{ background-position:220% center; } }

/* ===================== شاشة اللعبة ===================== */
.game-screen{ flex:1; min-height:0; padding:.7rem 1.2rem .8rem; max-width:1500px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:.6rem; position:relative; z-index:1; overflow:hidden;}
.hidden{ display:none !important; }

.stats-bar{
  flex-shrink:0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem;
  background:var(--card-bg); padding:.5rem 1.1rem; border-radius:14px;
  box-shadow:var(--shadow-soft); border:1px solid var(--card-border);
}
.stats-live{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:.92rem; color:var(--g-900); }
.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--g-500); box-shadow:0 0 0 rgba(46,138,76,.5); animation:pulseDot 1.7s infinite; }
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(46,138,76,.55);}
  70%{ box-shadow:0 0 0 9px rgba(46,138,76,0);}
  100%{ box-shadow:0 0 0 0 rgba(46,138,76,0);}
}
.stats-badge{ background:var(--g-50); color:var(--g-900); padding:.4rem .95rem; border-radius:10px; font-weight:800; font-size:.88rem; border:1px solid var(--g-200); }

.scoreboard{ flex-shrink:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem; }
.team-card{
  background:var(--card-bg); border-radius:16px; padding:.6rem .8rem .7rem; position:relative; overflow:hidden;
  border:1px solid var(--card-border); box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.team-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-med); }
.team-card .accent-bar{ position:absolute; top:0; right:0; left:0; height:5px; }
.team-card-top{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:.5rem;}
.team-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px rgba(0,0,0,.03);}
.team-name{ font-weight:900; font-size:1.15rem; color:var(--g-950); flex:1; text-align:center; }
.team-points-badge{ background:var(--g-50); padding:.28rem .75rem; border-radius:10px; font-weight:800; font-size:.85rem; border:1px solid var(--g-200); white-space:nowrap; color:var(--g-900);}
.team-points-badge b{ color:var(--g-700); font-size:.95rem; }

.score-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; width:100%; background:rgba(31,107,58,.05); padding:.5rem; border-radius:12px; border:1px solid var(--card-border); }
.score-col{ text-align:center; }
.score-label{ font-size:.76rem; font-weight:800; margin-bottom:.25rem; color:var(--g-800); }
.score-controls{ display:flex; align-items:center; justify-content:center; gap:.4rem; }
.score-btn{
  width:26px; height:26px; border-radius:9px; background:#fff; border:1px solid var(--g-200);
  font-weight:900; cursor:pointer; color:var(--g-900); box-shadow:0 3px 8px rgba(0,0,0,.06); transition:transform .15s;
  font-family:inherit; font-size:.9rem; line-height:1;
}
.score-btn:hover{ transform:scale(1.08); background:var(--g-50); }
.score-value{ font-weight:900; font-size:1.2rem; min-width:1.5rem; }
.score-value.pos{ color:var(--g-700); }
.score-value.neg{ color:var(--danger); }

.categories-panel{ background:var(--card-bg); border-radius:20px; padding:.7rem .9rem; border:1px solid var(--card-border); box-shadow:var(--shadow-soft); flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.categories-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.category-col{ display:flex; flex-direction:column; gap:.4rem; min-height:0; }
.category-header{
  padding:.55rem .5rem; border-radius:12px; text-align:center; font-weight:900; font-size:.88rem;
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; line-height:1.25;
  color:#fff; position:relative; overflow:hidden; box-shadow:0 8px 16px rgba(0,39,42,.16);
  background-size:100% 100%, 20px 20px; background-repeat:no-repeat, repeat;
}
.category-header::after{
  content:""; position:absolute; top:0; left:-120%; width:38%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); animation:shineSweep 8s infinite;
}
.cat-index{
  position:absolute; top:6px; inset-inline-start:9px; font-size:.62rem; font-weight:800;
  letter-spacing:.05em; opacity:.8; font-family:"IBM Plex Sans Arabic",sans-serif;
}
.cat-icon{ font-size:1.3rem; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.cat-name{ position:relative; z-index:1; }
/* كل مجال معرفي يأخذ لونه من ألوان "طباعنا" الرسمية الستة في دليل الهوية */
.cat-1{ background-color:var(--trait-vision); background-image:linear-gradient(135deg,#5c4318,var(--trait-vision)),url('/contests/national-day/images/pattern-tile.svg'); }         /* التاريخ ← رؤيتنا (ذهبي) */
.cat-2{ background-color:var(--trait-generosity); background-image:linear-gradient(135deg,#003a7d,var(--trait-generosity)),url('/contests/national-day/images/pattern-tile.svg'); }     /* الجغرافيا ← كرمنا (أزرق) */
.cat-3{ background-color:var(--trait-authenticity); background-image:linear-gradient(135deg,#3f7d10,var(--trait-authenticity)),url('/contests/national-day/images/pattern-tile.svg'); }   /* الهوية والتراث ← أصالتنا (أخضر) */
.cat-4{ background-color:var(--trait-giving); background-image:linear-gradient(135deg,#3f3fae,var(--trait-giving)),url('/contests/national-day/images/pattern-tile.svg'); }         /* رؤية 2030 ← جودنا (بنفسجي) */

.questions-list{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:.4rem; }
.question-btn{
  width:100%; height:100%; padding:.3rem .5rem; border-radius:10px; border:1px solid var(--g-200);
  background:#fff; color:var(--g-950); font-weight:900; font-size:1rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  box-shadow:0 3px 8px rgba(0,0,0,.03); text-align:center;
  transition:all .2s ease; font-family:inherit; min-height:0;
}
.question-btn:hover{ border-color:var(--g-600); transform:translateY(-1px); box-shadow:0 8px 16px rgba(18,90,52,.14); }
.question-btn .tag{ font-size:.64rem; font-weight:800; color:var(--g-600); }
.question-btn.answered .tag{ background:var(--g-100); color:var(--g-800); padding:.1rem .5rem; border-radius:7px; }

/* ===================== النوافذ المنبثقة (المودالز) ===================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,46,26,.62); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:1rem; z-index:50;
}
.modal-overlay.flex{ display:flex; }
.modal-box{
  background:#fff; border-radius:26px; box-shadow:0 30px 70px rgba(5,46,26,.35);
  width:100%; max-height:92vh; overflow-y:auto; position:relative; border:1px solid var(--card-border);
  animation:cardIn .28s ease-out;
}
.modal-close{
  position:absolute; top:1.3rem; left:1.3rem; width:38px; height:38px; border-radius:50%;
  background:var(--g-50); color:var(--g-800); border:none; font-weight:900; font-size:1.05rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.06);
  transition:all .2s ease;
}
.modal-close:hover{ background:#fde2e7; color:var(--danger); transform:rotate(90deg); }

/* سؤال */
#questionModal .modal-box{ max-width:760px; padding:2rem 2.1rem 2.2rem; }
.q-top-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; gap:.6rem; flex-wrap:wrap;}
.q-points-badge{ background:var(--g-100); color:var(--g-900); font-weight:800; padding:.35rem .8rem; border-radius:12px; font-size:.85rem; }
.q-category-badge{ background:linear-gradient(135deg,var(--g-800),var(--g-600)); color:#fff; font-weight:800; padding:.4rem 1rem; border-radius:14px; font-size:.85rem; box-shadow:0 6px 14px rgba(18,90,52,.2);}
.q-text{ font-size:1.4rem; font-weight:900; color:var(--g-950); text-align:center; margin-bottom:1.6rem; line-height:1.7; }

.options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.3rem; }
@media (max-width:620px){ .options-grid{ grid-template-columns:1fr; } }
.option-card{
  width:100%; padding:1rem 1.1rem; border-radius:18px; border:2px solid var(--g-100);
  background:#fff; color:var(--g-950); font-weight:800; font-size:1rem; font-family:inherit;
  display:flex; align-items:center; justify-content:flex-start; gap:1rem; cursor:pointer;
  transition:all .2s ease;
}
.option-card > span:not(.option-letter){ flex:1; text-align:center; }
.option-card:hover{ border-color:var(--g-500); background:var(--g-50); transform:translateY(-2px); }
.option-letter{
  width:36px; height:36px; flex-shrink:0; border-radius:12px; background:var(--g-50);
  color:var(--g-800); font-weight:900; font-size:.9rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--g-100);
}
.option-card.correct{ border-color:var(--g-600); background:var(--g-50); color:var(--g-950); box-shadow:0 0 0 4px var(--g-100); }
.option-card.wrong{ border-color:var(--danger); background:#fdecef; color:#7d1a2e; box-shadow:0 0 0 4px rgba(200,48,74,.14); }
.option-card.dim{ opacity:.5; }

.feedback-box{
  display:none; margin-bottom:1.4rem; padding:.9rem 1.1rem; border-radius:16px;
  align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
}
.feedback-box.show{ display:flex; }
.feedback-box.error{ background:#fdecef; border:1px solid #f6c4cf; }
.feedback-box.success{ background:var(--g-50); border:1px solid var(--g-200); }
.feedback-text.error-text{ color:var(--danger-dark); font-weight:800; font-size:.9rem; }
.feedback-text.success-text{ color:var(--g-800); font-weight:800; font-size:.9rem; }
.btn-reveal{ background:linear-gradient(135deg,var(--g-800),var(--g-700)); color:#fff; padding:.55rem 1rem; border-radius:12px; font-size:.8rem; white-space:nowrap; }

.vote-section{ border-top:1px solid var(--g-100); padding-top:1.4rem; margin-top:.6rem; }
.vote-label{ font-size:.82rem; font-weight:800; color:var(--g-800); text-align:center; margin-bottom:.65rem; }
.vote-label b.correct-word{ color:var(--g-600); font-weight:900; }
.vote-label b.wrong-word{ color:var(--danger); font-weight:900; }
.vote-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:1.2rem; }
.vote-btn{ color:#fff; padding:.55rem 1.05rem; border-radius:12px; font-size:.78rem; font-weight:800; box-shadow:0 5px 12px rgba(0,0,0,.08); }
.vote-btn.correct{ background:linear-gradient(135deg,var(--g-700),var(--g-500)); }
.vote-btn.wrong{ background:linear-gradient(135deg,var(--danger-dark),var(--danger)); }

.btn-close-question{
  display:block; margin:0 auto; background:linear-gradient(135deg,var(--g-900),var(--g-800)); color:#fff;
  padding:.75rem 1.6rem; border-radius:14px; font-size:.9rem; box-shadow:0 10px 22px rgba(5,46,26,.22);
  font-family:inherit; border:none; cursor:pointer;
}

/* عجلة الفريق */
#wheelModal .modal-box{ max-width:420px; padding:2.1rem; text-align:center; }
.wheel-title{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--g-900); margin-bottom:1.4rem; }
.wheel-wrap{ position:relative; width:250px; height:250px; margin:0 auto 1.4rem; display:flex; align-items:center; justify-content:center; }
.wheel-pointer{
  position:absolute; top:-10px; z-index:20; width:0; height:0;
  border-left:11px solid transparent; border-right:11px solid transparent; border-top:20px solid var(--g-900);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.wheel-disc{
  width:100%; height:100%; border-radius:50%; border:6px solid #fff; box-shadow:0 0 0 3px var(--g-200), inset 0 0 25px rgba(0,0,0,.08);
  position:relative; transition:transform 4s cubic-bezier(.15,0,.1,1);
}
.wheel-spin-center{
  position:absolute; z-index:10; width:64px; height:64px; border-radius:50%; background:#fff;
  color:var(--g-900); font-weight:900; font-size:.75rem; box-shadow:0 6px 14px rgba(0,0,0,.18);
  border:2px solid var(--g-200); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:inherit;
}
.wheel-result{ min-height:1.6rem; font-weight:900; color:var(--g-800); margin-bottom:.9rem; font-size:1rem; }
.btn-spin{ width:100%; background:linear-gradient(135deg,var(--g-700),var(--g-600)); color:#fff; padding:.85rem; border-radius:16px; font-size:.95rem; box-shadow:0 12px 26px rgba(18,90,52,.24); font-family:inherit; border:none; cursor:pointer;}

/* الفائز */
#winnerModal .modal-box{ max-width:520px; padding:2.2rem; text-align:center; overflow:hidden; }
.winner-logo-img{ width:min(280px,80%); height:auto; border-radius:10px; margin-bottom:.9rem; box-shadow:0 14px 28px rgba(0,39,42,.30); animation:floatLogo 4s ease-in-out infinite; }
.winner-heading{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--g-900); margin-bottom:.3rem; }
.winner-name{ font-size:1.5rem; font-weight:900; color:var(--g-600); margin-bottom:1.3rem; }
.final-scores-title{ font-size:.9rem; font-weight:800; color:var(--g-800); margin-bottom:.8rem; }
.final-scores-list{ display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.4rem; }
.final-score-row{
  display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border-radius:14px;
  background:var(--g-50); border:1px solid var(--g-100); font-weight:800; font-size:.9rem;
}
.final-score-row .rank-name{ color:var(--g-950); }
.final-score-row .rank-nums{ display:flex; gap:1rem; font-size:.78rem; }
.rank-nums .ok{ color:var(--g-700); }
.rank-nums .no{ color:var(--danger); }
.btn-home{ width:100%; background:linear-gradient(135deg,var(--g-900),var(--g-800)); color:#fff; padding:.9rem; border-radius:16px; font-weight:900; font-size:.95rem; box-shadow:0 12px 26px rgba(5,46,26,.24); font-family:inherit; border:none; cursor:pointer;}

.confetti-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.confetti-piece{
  position:absolute; top:-10%; width:9px; height:14px; border-radius:2px; opacity:.9;
  animation:confettiFall 3.4s linear infinite;
}
@keyframes confettiFall{
  0%{ transform:translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(560px) rotate(540deg); opacity:0; }
}

/* مساعدة */
#helpModal .modal-box{ max-width:460px; padding:2rem 2.1rem; }
.help-title{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--g-900); margin-bottom:1rem; }
.help-list{ font-size:.9rem; color:var(--g-900); line-height:1.9; padding-right:1.1rem; margin:0 0 1.4rem; }
.help-list li{ margin-bottom:.5rem; }
.btn-ok{ width:100%; background:linear-gradient(135deg,var(--g-700),var(--g-600)); color:#fff; padding:.7rem; border-radius:14px; font-weight:800; font-size:.9rem; font-family:inherit; border:none; cursor:pointer;}

/* ===================== الوضع الداكن ===================== */
body.dark-mode{
  background:
    radial-gradient(circle at 12% 8%, rgba(46,138,76,.20), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(0,0,0,.25), transparent 34%),
    linear-gradient(150deg,#02150c 0%, #04241a 55%, #02180f 100%);
  color:#eafff2;
}
body.dark-mode::before{ opacity:.35; }
body.dark-mode .site-header{ background:rgba(4,30,20,.85); border-color:rgba(114,198,141,.22); }
body.dark-mode .school-badge{ background:linear-gradient(135deg,#0a3a22,#062e1b); color:#eafff2; border-color:#2e8a4c; }
body.dark-mode .setup-card,
body.dark-mode .modal-box,
body.dark-mode .team-card,
body.dark-mode .stats-bar,
body.dark-mode .categories-panel,
body.dark-mode .question-btn,
body.dark-mode .option-card,
body.dark-mode .team-input-row input{
  background:#083425; color:#eafff2; border-color:#2e8a4c;
}
body.dark-mode .stats-badge, body.dark-mode .team-points-badge, body.dark-mode .q-points-badge{
  background:#0a4a2f; color:#d9f5e3; border-color:#2e8a4c;
}
body.dark-mode .score-grid{ background:rgba(46,138,76,.12); border-color:#2e8a4c; }
body.dark-mode .score-btn{ background:#0a4a2f; color:#eafff2; border-color:#2e8a4c; }
body.dark-mode .question-btn:hover{ background:#0a4a2f; }
body.dark-mode .team-name,
body.dark-mode .q-text,
body.dark-mode .hero-subtitle,
body.dark-mode .setup-label,
body.dark-mode .vote-label,
body.dark-mode .wheel-title,
body.dark-mode .winner-heading,
body.dark-mode .help-title{ color:#eafff2; }
body.dark-mode .hero-title{ background:linear-gradient(90deg,#eafff2,var(--g-400),#eafff2); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; }
body.dark-mode .option-card.correct{ background:#0a4a2f; }
body.dark-mode .option-card.wrong{ background:#4a1420; color:#ffd7dd; }
body.dark-mode .final-score-row{ background:#0a4a2f; border-color:#2e8a4c; }
body.dark-mode .btn-dark-toggle{ background:#0a4a2f; color:#eafff2; }

@media (max-width:900px){
  .header-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .header-actions{ justify-content:center; order:2; }
  .header-right{ justify-content:center; order:3; }
  .header-logo-img{ order:1; }
  body{ height:auto; min-height:100vh; overflow-y:auto; overflow-x:hidden; }
  .game-screen{ overflow:visible; }
  .categories-grid{ grid-template-columns:repeat(2,1fr); }
  .questions-list{ grid-auto-rows:auto; }
}

.school-badge { text-decoration:none; }

/* شريط الحقوق السفلي */
.rights-bar { flex:none; position:relative; z-index:5; display:flex; flex-direction:column; gap:.1rem; padding:.45rem 1rem calc(.45rem + env(safe-area-inset-bottom)); text-align:center; font-size:.68rem; line-height:1.55; color:var(--g-900); background:rgba(255,255,255,.88); border-top:1px solid var(--g-200); }
.rights-bar .mn-link { font-weight:800; }
body.dark-mode .rights-bar { color:#cfe9d9; background:rgba(6,30,20,.9); border-top-color:#2e8a4c; }

/* قيم style المضمّنة سابقًا */
[data-s="1"] { right:6%; animation-duration:16s; animation-delay:0s; }
[data-s="2"] { right:22%; animation-duration:20s; animation-delay:3s; }
[data-s="3"] { right:40%; animation-duration:18s; animation-delay:6s; }
[data-s="4"] { right:58%; animation-duration:22s; animation-delay:2s; }
[data-s="5"] { right:75%; animation-duration:17s; animation-delay:5s; }
[data-s="6"] { right:90%; animation-duration:19s; animation-delay:8s; }
[data-s="7"] { width:260px; bottom:-30px; right:-50px; left:auto; transform:rotate(8deg); }

/* ملاحظة تظهر في الجوال فقط، بالأحمر، فوق اختيار عدد الفرق وتسميتها: المسابقة مصممة للكمبيوتر */
.desktop-note{ display:none; }
@media (max-width:900px){
  .desktop-note{ display:block; margin:.3rem 0 .8rem; padding:.5rem .75rem; border-radius:12px; font-size:.76rem; font-weight:800; line-height:1.75; text-align:center; color:var(--danger-dark); background:rgba(200,48,74,.09); border:1px solid rgba(200,48,74,.55); }
  body.dark-mode .desktop-note{ color:#ff9eae; background:rgba(200,48,74,.16); border-color:rgba(255,120,140,.5); }
}

/* أسماء الفرق في الجوال: عنوان صغير فوق كل حقل وشبكة 2×2 متوازنة */
@media (max-width:560px){
  .team-input-row{ flex-direction:column; align-items:stretch; gap:.2rem; }
  .team-input-tag{ text-align:center; }
  .team-input-row input{ width:100%; text-align:center; }
}
body.dark-mode .team-input-tag{ color:var(--g-400); }