/* دروب الحروف — الهوية البصرية المشتركة لكل الواجهات */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;700&display=swap');

:root{
  --bg0:#131A24;            /* أعمق طبقة خلفية */
  --bg1:#1C2431;            /* الخلفية الرئيسية */
  --panel:#222E3D;          /* البطاقات */
  --panel-2:#2A3850;        /* بطاقات بارزة */
  --line:#33415577;         /* حدود خفيفة */
  --ink:#F6EFE1;            /* نص أساسي */
  --muted:#93A0B4;          /* نص ثانوي */
  --gold:#E8B15C;           /* ذهب العلامة: الحروف والدروب */
  --gold-soft:#E8C892;
  --teal:#12866F;           /* أخضر الفعل */
  --teal-bright:#63D8C2;    /* توقيت/نجاح */
  --coral:#E76F51;          /* إنذار/قرصان/زر أجيب */
  --font-display:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",sans-serif;
  --font-body:"IBM Plex Sans Arabic","Segoe UI","Geeza Pro",sans-serif;
  --r:16px;
  --shadow:0 8px 24px rgba(0,0,0,.28);
}

html{background:var(--bg0)}
body{
  font-family:var(--font-body); color:var(--ink); direction:rtl; min-height:100vh;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='rgba(232,177,92,0.055)' stroke-width='1.4'/%3E%3C/svg%3E"),
    radial-gradient(1100px 600px at 50% -10%, #24405288 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%);
  background-attachment:fixed;
}

/* ── الشعار ─────────────────────────────── */
.brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 0}
.brand .mark{flex:none}
.brand .wordmark{font-family:var(--font-display);font-weight:800;color:var(--ink);line-height:1}
.brand .wordmark b{color:var(--gold)}
.brand .tagline{color:var(--muted);font-size:12px;letter-spacing:.3px}

/* ── مكونات مشتركة ───────────────────────── */
.card{background:linear-gradient(180deg,var(--panel) 0%,#202A38 100%);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{font-family:var(--font-display);font-weight:700;border:0;border-radius:14px;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,#159078 0%,var(--teal) 100%);
  box-shadow:0 4px 14px rgba(18,134,111,.35), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .06s, filter .15s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{filter:grayscale(.6) brightness(.7);box-shadow:none;cursor:default}
.btn.gold{background:linear-gradient(180deg,#F0BE6E 0%,var(--gold) 100%);color:#2A2313;
  box-shadow:0 4px 14px rgba(232,177,92,.30), inset 0 1px 0 rgba(255,255,255,.35)}
.btn.red{background:linear-gradient(180deg,#F07E5F 0%,var(--coral) 100%);
  box-shadow:0 4px 14px rgba(231,111,81,.35), inset 0 1px 0 rgba(255,255,255,.18)}
.btn.ghost{background:transparent;border:1.5px solid #3B4A5E;color:#C6D0DC;box-shadow:none}

.seg button{border:1.5px solid #3B4A5E;background:#1A2230;color:#C6D0DC;border-radius:12px;
  font-family:var(--font-body);cursor:pointer;transition:all .12s}
.seg button.on{background:linear-gradient(180deg,#159078,var(--teal));border-color:transparent;
  color:#fff;font-weight:700;box-shadow:0 2px 10px rgba(18,134,111,.35)}

/* شارة الحرف: سداسية بلون العلامة */
.hexbadge{background:linear-gradient(160deg,#159078,#0C6355);color:#fff;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800}

/* مفتاح العوالم */
.legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.legend .wchip{display:inline-flex;align-items:center;gap:6px;background:#1A2230;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);white-space:nowrap}
.legend .wchip svg{color:var(--gold);flex:none}

/* مؤقت */
.tmr{font-family:var(--font-display);color:var(--teal-bright)}
.tmr.low{color:var(--coral);animation:tk .5s infinite}
@keyframes tk{50%{opacity:.35}}

::selection{background:var(--gold);color:#22202a}