/* ============================================================
   من الهامور؟ — الأنماط المشتركة
   مبنية حرفيًا على رموز نظام تصميم «من الهامور» v1.0
   ============================================================ */

/* ---------- الخطوط ---------- */
@font-face { font-family:"Graphik Arabic"; src:url("../fonts/GraphikArabic-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Graphik Arabic"; src:url("../fonts/GraphikArabic-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Graphik Arabic"; src:url("../fonts/GraphikArabic-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Graphik Arabic"; src:url("../fonts/GraphikArabic-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Graphik Arabic"; src:url("../fonts/GraphikArabic-Black.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Graphik Arabic"; src:url("../fonts/GraphikArabic-Super.ttf") format("truetype"); font-weight:900; font-display:swap; }

/* ---------- رموز التصميم (tokens.css من نظام التصميم) ---------- */
:root {
  /* الهوية */
  --hamoor-gold:      #FDB515;
  --hamoor-orange:    #F5901E;
  --hamoor-maroon:    #A83A22;
  --hamoor-maroon-dk: #7C2915;
  --hamoor-cream:     #FFF1C9;
  --hamoor-paper:     #FFFCF4;
  --hamoor-ink:       #241C15;

  /* الميكانيكا */
  --factory:    #2FA24E;  --factory-dk: #1E7A38;  --factory-bg: #E6F5E9;
  --attack:     #E63B2E;  --attack-dk:  #B62518;  --attack-bg:  #FCE7E4;
  --defense:    #2C7BD4;  --defense-dk: #1B5AA6;  --defense-bg: #E4EFFB;

  /* المحايدات */
  --ink-900:#241C15; --ink-700:#4A3F33; --ink-500:#7A6E5E;
  --ink-300:#C9BCA6; --ink-200:#E5DBC6; --ink-100:#F3ECDC;

  /* المسافات (أساس 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;

  /* الزوايا */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* الحدود */
  --bd-thin:1.5px; --bd:2.5px; --bd-heavy:3.5px;

  /* الظلال الصلبة */
  --sh-sm:3px 3px 0 var(--ink-900);
  --sh-md:5px 5px 0 var(--ink-900);
  --sh-lg:8px 8px 0 var(--ink-900);

  /* الخطوط */
  --font:"Graphik Arabic", system-ui, sans-serif;
  --w-body:400; --w-med:500; --w-bold:700; --w-black:800; --w-super:900;
}

/* ---------- الأساس ---------- */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font); background:var(--hamoor-paper); color:var(--ink-900);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a { color:#B5651A; text-decoration:none; }
::selection { background:var(--hamoor-gold); color:var(--ink-900); }
input, select, button, textarea { font-family:inherit; }

/* ---------- البطاقات ---------- */
.card {
  background:#fff; border:var(--bd) solid var(--ink-900);
  border-radius:var(--r-lg); box-shadow:4px 4px 0 var(--ink-900);
}
.card-flat { box-shadow:none; }
.card-dark {
  background:var(--ink-900); color:var(--hamoor-paper);
  border:var(--bd) solid var(--ink-900); border-radius:var(--r-lg);
  box-shadow:6px 6px 0 rgba(36,28,21,.28);
}

/* ---------- الأزرار (ترتفع عند التمرير، تنضغط عند النقر) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:var(--w-black); font-size:16px; padding:13px 22px;
  border-radius:14px; border:var(--bd) solid var(--ink-900);
  box-shadow:4px 4px 0 var(--ink-900); cursor:pointer;
  transition:all .12s ease; color:var(--ink-900); background:var(--hamoor-paper);
  text-decoration:none; user-select:none;
}
.btn:hover  { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink-900); }
.btn:active { transform:translate(2px,2px); box-shadow:0 0 0 var(--ink-900); }
.btn-gold   { background:var(--hamoor-gold); }
.btn-green  { background:var(--factory); color:#fff; }
.btn-red    { background:var(--attack); color:#fff; }
.btn-blue   { background:var(--defense); color:#fff; }
.btn-dark   { background:var(--ink-900); color:var(--hamoor-gold); }
.btn-ghost  { background:transparent; border-color:transparent; box-shadow:none; }
.btn-ghost:hover { background:var(--ink-100); transform:none; box-shadow:none; }
.btn-sm { font-size:13px; padding:8px 15px; border-radius:var(--r-sm); border-width:2px; box-shadow:var(--sh-sm); }
.btn-lg { font-size:19px; padding:17px 30px; border-radius:16px; border-width:3px; box-shadow:var(--sh-md); }
.btn-block { width:100%; }
.btn:disabled, .btn.disabled {
  background:var(--ink-200); color:#A79A85; border-color:var(--ink-300);
  box-shadow:none; cursor:not-allowed; transform:none;
}

/* ---------- الحقول ---------- */
.field-label { display:block; font-weight:var(--w-bold); font-size:14px; margin-bottom:8px; }
.input, .select {
  width:100%; font-size:16px; padding:13px 16px;
  border:var(--bd) solid var(--ink-900); border-radius:12px;
  background:#fff; color:var(--ink-900); outline:none; transition:box-shadow .12s ease;
}
.input:focus, .select:focus { box-shadow:0 0 0 4px var(--hamoor-cream); border-color:var(--hamoor-orange); }
.select { font-weight:var(--w-med); cursor:pointer; }
.input-id {
  font-family:ui-monospace, monospace; font-size:22px; font-weight:var(--w-bold);
  letter-spacing:.34em; text-align:center; padding:14px 16px;
  border:var(--bd) dashed var(--ink-900); border-radius:12px;
  background:var(--hamoor-cream); text-transform:uppercase;
}
.input-id:focus { border-style:solid; border-color:var(--hamoor-orange); }
.field-hint { font-size:12.5px; color:var(--ink-500); margin-top:7px; }
.field-error { font-size:12.5px; color:var(--attack-dk); margin-top:7px; font-weight:600; }

/* ---------- الشارات ---------- */
.pill {
  display:inline-flex; align-items:center; gap:7px;
  border-radius:var(--r-pill); padding:6px 15px;
  font-weight:var(--w-bold); font-size:14px; border:2px solid;
}
.pill-open      { background:var(--factory-bg); color:var(--factory-dk); border-color:var(--factory-dk); }
.pill-locked    { background:var(--ink-100); color:var(--ink-500); border-color:var(--ink-300); }
.pill-protected { background:var(--defense-bg); color:var(--defense-dk); border-color:var(--defense); }
.pill-progress  { background:var(--hamoor-cream); color:#A05A00; border-color:var(--hamoor-orange); }
.pill-war       { background:var(--attack-bg); color:var(--attack-dk); border-color:var(--attack); }
.pill-done      { background:var(--ink-900); color:var(--hamoor-gold); border-color:var(--ink-900); }

.badge-money {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--hamoor-gold); color:var(--ink-900);
  border:var(--bd) solid var(--ink-900); border-radius:var(--r-pill);
  padding:9px 18px; font-weight:var(--w-super); font-size:18px; box-shadow:var(--sh-sm);
}
.rank-chip {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-pill);
  border:2px solid var(--ink-900); font-weight:var(--w-super); flex:none;
}
.rank-1 { background:var(--hamoor-gold); }
.rank-2 { background:var(--ink-300); }
.rank-3 { background:#E0A66A; }
.rank-n { background:var(--ink-100); border-color:var(--ink-300); color:var(--ink-500); }

.avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-pill);
  border:2px solid var(--ink-900); font-weight:var(--w-black); flex:none; font-size:16px;
}

/* ---------- شريط الأخبار ---------- */
.ticker-wrap {
  background:var(--ink-900); color:var(--hamoor-gold);
  border-bottom:var(--bd) solid var(--ink-900);
  overflow:hidden; white-space:nowrap; position:relative;
}
.ticker-inner {
  display:inline-block; padding:9px 0; font-weight:var(--w-bold); font-size:14px;
  animation:tickerMove 45s linear infinite; padding-inline-start:100%;
}
.ticker-wrap:hover .ticker-inner { animation-play-state:paused; }
.ticker-item { margin-inline-end:56px; }
.ticker-item.t-attack { color:#FF8A80; }
.ticker-item.t-shield { color:#8EC9FF; }
.ticker-item.t-reveal { color:#FFE082; }
.ticker-item.t-market { color:#A5E8B5; }
@keyframes tickerMove { 0% { transform:translateX(0); } 100% { transform:translateX(100%); } }

/* ---------- التوستات ---------- */
#toasts {
  position:fixed; top:14px; inset-inline:14px; z-index:2000;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
  max-width:440px; margin-inline:auto;
}
.toast {
  display:flex; align-items:center; gap:13px;
  border:var(--bd) solid; border-radius:var(--r-md); padding:14px 16px;
  font-size:14px; pointer-events:auto;
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);
}
.toast.hide { animation:toastOut .25s ease forwards; }
.toast-icon {
  flex:none; width:38px; height:38px; border-radius:var(--r-sm);
  border:2px solid var(--ink-900); display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:var(--w-black);
}
.toast-title { font-weight:var(--w-black); font-size:15px; }
.toast-sub { color:var(--ink-700); font-size:13px; }
.toast-success { background:var(--factory-bg); border-color:var(--factory-dk); box-shadow:4px 4px 0 var(--factory-dk); }
.toast-success .toast-icon { background:var(--factory); color:#fff; }
.toast-success .toast-title { color:var(--factory-dk); }
.toast-danger { background:var(--attack-bg); border-color:var(--attack); box-shadow:4px 4px 0 var(--attack); }
.toast-danger .toast-icon { background:var(--attack); color:#fff; }
.toast-danger .toast-title { color:var(--attack-dk); }
.toast-info { background:var(--hamoor-cream); border-color:var(--hamoor-orange); box-shadow:4px 4px 0 var(--hamoor-orange); }
.toast-info .toast-icon { background:var(--hamoor-gold); color:var(--ink-900); }
.toast-info .toast-title { color:#A05A00; }
.toast-defense { background:var(--defense-bg); border-color:var(--defense); box-shadow:4px 4px 0 var(--defense); }
.toast-defense .toast-icon { background:var(--defense); color:#fff; }
.toast-defense .toast-title { color:var(--defense-dk); }
@keyframes toastIn  { from { opacity:0; transform:translateY(-18px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateY(-14px) scale(.95); } }

/* ---------- النوافذ المنبثقة ---------- */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(36,28,21,.55); backdrop-filter:blur(4px);
  z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px;
  animation:fadeIn .2s ease;
}
.modal {
  background:var(--hamoor-paper); border:var(--bd-heavy) solid var(--ink-900);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  padding:24px; animation:modalIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fadeIn  { from { opacity:0; } }
@keyframes modalIn { from { opacity:0; transform:scale(.9) translateY(20px); } }

/* ---------- خيارات السؤال ---------- */
.answer-opt {
  display:flex; align-items:center; gap:12px; width:100%; text-align:right;
  padding:15px 16px; border:var(--bd) solid var(--ink-900); border-radius:14px;
  background:#fff; font-weight:var(--w-bold); font-size:16px; cursor:pointer;
  transition:all .12s ease; color:var(--ink-900);
}
.answer-opt:hover { background:var(--hamoor-cream); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink-900); }
.answer-opt .opt-letter {
  flex:none; width:30px; height:30px; border-radius:8px; border:2px solid var(--ink-900);
  background:var(--hamoor-cream); display:flex; align-items:center; justify-content:center;
  font-weight:var(--w-black); font-size:15px;
}
.answer-opt.selected { background:var(--hamoor-gold); box-shadow:4px 4px 0 var(--ink-900); transform:translate(-1px,-1px); }
.answer-opt.selected .opt-letter { background:var(--ink-900); color:var(--hamoor-gold); }
.answer-opt.correct { background:var(--factory-bg); box-shadow:4px 4px 0 var(--factory-dk); }
.answer-opt.correct .opt-letter { background:var(--factory); color:#fff; }
.answer-opt.wrong { background:var(--attack-bg); box-shadow:none; }
.answer-opt.wrong .opt-letter { background:var(--attack); color:#fff; }
.answer-opt:disabled { cursor:default; opacity:1; }
.answer-opt:disabled:hover { transform:none; }
.answer-opt.dimmed { opacity:.45; }

/* ---------- حلقة المؤقّت ---------- */
.timer-ring {
  width:110px; height:110px; border-radius:var(--r-pill);
  border:var(--bd) solid var(--ink-900); box-shadow:4px 4px 0 var(--ink-900);
  display:flex; align-items:center; justify-content:center; margin-inline:auto;
}
.timer-core {
  width:80px; height:80px; border-radius:var(--r-pill); background:#fff;
  border:var(--bd) solid var(--ink-900);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.timer-core .t-num { font-size:32px; font-weight:var(--w-super); }
.timer-core .t-lbl { font-size:11px; color:var(--ink-500); font-weight:600; margin-top:3px; }
.timer-ring.urgent { animation:hamoorPulse .8s ease-in-out infinite; }
.timer-ring.urgent .t-num { color:var(--attack-dk); }

/* ---------- التبويبات السفلية (جوال أولًا) ---------- */
.bottom-nav {
  position:fixed; bottom:0; inset-inline:0; z-index:500;
  background:var(--hamoor-paper); border-top:var(--bd) solid var(--ink-900);
  display:flex; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  gap:4px;
}
.bottom-nav .nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; border-radius:12px; border:none; background:transparent;
  font-weight:var(--w-bold); font-size:11.5px; color:var(--ink-700); cursor:pointer;
  transition:all .12s ease;
}
.bottom-nav .nav-item .nav-icon { font-size:21px; }
.bottom-nav .nav-item.active { background:var(--ink-900); color:var(--hamoor-gold); }
.bottom-nav .nav-item .nav-dot {
  position:absolute; top:4px; inset-inline-end:calc(50% - 18px);
  width:9px; height:9px; border-radius:var(--r-pill);
  background:var(--attack); border:1.5px solid var(--ink-900);
}

/* ---------- حركات اللعبة (Game Juice) ---------- */
@keyframes hamoorFloat { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-10px) rotate(3deg); } }
@keyframes hamoorPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@keyframes shake {
  0%,100% { transform:translate(0); }
  15% { transform:translate(-8px,4px) rotate(-.6deg); }
  30% { transform:translate(7px,-3px) rotate(.5deg); }
  45% { transform:translate(-6px,2px); }
  60% { transform:translate(5px,-4px) rotate(-.4deg); }
  75% { transform:translate(-3px,2px); }
  90% { transform:translate(2px,-1px); }
}
body.shaking { animation:shake .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes popIn { from { opacity:0; transform:scale(.5); } 60% { transform:scale(1.1); } to { opacity:1; transform:scale(1); } }
.pop-in { animation:popIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes glowGold {
  0%,100% { box-shadow:4px 4px 0 var(--ink-900), 0 0 0 rgba(253,181,21,0); }
  50% { box-shadow:4px 4px 0 var(--ink-900), 0 0 22px rgba(253,181,21,.75); }
}
.glow-top { animation:glowGold 2.2s ease-in-out infinite; }
@keyframes balanceFlash { 0% { color:var(--factory-dk); transform:scale(1.12); } 100% { color:inherit; transform:scale(1); } }
.flash-up { animation:balanceFlash .8s ease; }
@keyframes balanceFlashDown { 0% { color:var(--attack-dk); transform:scale(1.12); } 100% { color:inherit; transform:scale(1); } }
.flash-down { animation:balanceFlashDown .8s ease; }

/* قصاصات الاحتفال */
.confetti {
  position:fixed; top:-14px; z-index:3000; pointer-events:none;
  width:10px; height:14px; border:1.5px solid var(--ink-900);
  animation:confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform:translateY(105vh) rotate(720deg); opacity:.9; }
}

/* ---------- وضع الإخفاء (مثل تطبيقات البنوك) ---------- */
.sensitive { transition: filter .18s ease; }
body.privacy .sensitive {
  filter: blur(9px);
  pointer-events: none;
  user-select: none;
}
#btn-privacy {
  background: var(--hamoor-cream); border: 2px solid var(--ink-900); border-radius: 10px;
  cursor: pointer; font-size: 15px; padding: 5px 8px; line-height: 1;
  box-shadow: 2px 2px 0 var(--ink-900); transition: all .12s ease;
}
#btn-privacy:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink-900); }
body.privacy #btn-privacy { background: var(--ink-900); }

/* ---------- عناصر عامة ---------- */
.section-title { font-size:22px; font-weight:var(--w-super); margin:0 0 4px; }
.section-sub { font-size:13px; color:var(--ink-500); font-weight:600; margin:0 0 14px; }
.divider { height:1.5px; background:var(--ink-200); border:none; margin:14px 0; }
.stat-box { border:2px solid var(--ink-900); border-radius:12px; padding:11px 8px; text-align:center; }
.stat-box .stat-num { font-size:20px; font-weight:var(--w-super); }
.stat-box .stat-lbl { font-size:11.5px; color:var(--ink-500); font-weight:600; }
.hidden { display:none !important; }
.muted { color:var(--ink-500); }
.money { font-variant-numeric:tabular-nums; }

/* ---------- سطح المكتب ---------- */
@media (min-width: 860px) {
  .desktop-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
}