@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   تحدي التركيز — لوحة القيادة
   أسماء المتغيرات محفوظة كما هي، والقيم مشحونة:
   --paper* = الأسطح  ·  --ink* = النص
   ═══════════════════════════════════════════ */

:root {
    --paper:      #0E1119;   /* الخلفية الأساسية */
    --paper-hi:   #171D2A;   /* سطح مرتفع */
    --paper-lo:   #090C12;   /* سطح غائر */
    --ink:        #F2F5FA;   /* النص الأساسي */
    --ink-soft:   #9AA6BC;
    --ink-faint:  #626E86;
    --rule:       #2A3448;
    --rule-soft:  #1C2333;

    --signal:     #FF5A36;   /* الطاقة: الأفعال والإبرة */
    --signal-lo:  #E8431F;
    --alert:      #FF3B5C;   /* الخطأ والفقد */
    --ok:         #2BE38F;   /* الإنجاز والأرقام القياسية */
    --gold:       #FFC442;   /* السلاسل والمكافأة */

    --grid: 26px;
    --r: 8px;
    --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45);
    --glow: 0 0 0 1px rgba(255,90,54,.35), 0 6px 22px rgba(255,90,54,.22);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--rule-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
    background-size: var(--grid) var(--grid);
    -webkit-font-smoothing: antialiased;
}

/* أرقام لاتينية في كل مكان */
body, input, button, .mono { font-feature-settings: "lnum" 1; }

/* ── نصوص مشتركة ── */
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.eyebrow {
    font-size: .7rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
}

/* ── الترويسة ── */
.station {
    width: 100%;
    background: var(--paper-hi);
    border-bottom: 1px solid var(--rule);
    padding: 22px 20px 18px;
    text-align: center;
}
.station h1 {
    margin: 0; font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 700;
    letter-spacing: -.01em;
}
.station .sub { margin: 6px 0 0; color: var(--ink-soft); font-size: .93rem; font-weight: 300; }
.station .strip {
    display: flex; justify-content: center; gap: 6px; margin-top: 14px;
}
.station .strip i {
    display: block; width: 26px; height: 3px; background: var(--rule);
}
.station .strip i:nth-child(4) { background: var(--signal); box-shadow: 0 0 12px rgba(255,90,54,.8); }
.station .strip i { animation: eq 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .09s); }
.station .strip i:nth-child(1) { --i: 0; } .station .strip i:nth-child(2) { --i: 1; }
.station .strip i:nth-child(3) { --i: 2; } .station .strip i:nth-child(4) { --i: 3; }
.station .strip i:nth-child(5) { --i: 4; } .station .strip i:nth-child(6) { --i: 5; }
.station .strip i:nth-child(7) { --i: 6; }
@keyframes eq { 0%, 100% { transform: scaleY(1); opacity: .55; } 50% { transform: scaleY(1.9); opacity: 1; } }
.station { background: linear-gradient(180deg, #141A26 0%, #0E1119 100%); }

/* ── لوحات ── */
.panel {
    background: var(--paper-hi);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.panel:where(.game-card, .daily) { background: linear-gradient(180deg, #1A2130 0%, #151B27 100%); }

/* ── أزرار ── */
.btn {
    font-family: inherit; font-size: 1.02rem; font-weight: 700;
    padding: 14px 30px; border-radius: var(--r); cursor: pointer;
    border: none; background: var(--signal); color: #fff;
    box-shadow: var(--glow);
    transition: box-shadow .18s, transform .08s, background .15s;
    animation: cta-pulse 2.6s ease-in-out infinite;
}
@keyframes cta-pulse {
    0%, 100% { box-shadow: var(--glow); }
    50%      { box-shadow: 0 0 0 1px rgba(255,90,54,.5), 0 6px 34px rgba(255,90,54,.42); }
}
.btn:hover { background: var(--signal-lo); box-shadow: 0 0 0 1px rgba(255,90,54,.5), 0 10px 30px rgba(255,90,54,.35); transform: translateY(-1px); animation-play-state: paused; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; animation: none; }
.btn-quiet {
    background: transparent; color: var(--ink); border-color: var(--rule);
}
.btn-quiet:hover { background: var(--paper-lo); }
.btn-alert { background: var(--alert); border-color: var(--alert); }
.btn-alert:hover { background: #A50D26; }

a { color: var(--signal); }

/* ── حقول ── */
.field {
    width: 100%; padding: 13px 15px; margin-bottom: 10px;
    border: 1px solid var(--rule); border-radius: var(--r);
    background: var(--paper-lo); color: var(--ink);
    font-family: inherit; font-size: 1rem;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255,90,54,.15); }

/* ── إتاحة ── */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── رابط الرجوع في صفحات الألعاب ── */
.back-link {
    position: fixed; top: 14px; right: 16px; z-index: 100;
    font-family: 'IBM Plex Mono', monospace; font-size: .85rem; font-weight: 500;
    color: var(--ink); text-decoration: none;
    background: var(--paper-hi); border: 1px solid var(--rule);
    padding: 7px 14px; border-radius: var(--r);
}
.back-link:hover { border-color: var(--signal); color: var(--signal); }

/* ── شريط علوي داخل الألعاب ── */
.gauge-bar {
    width: 100%; background: linear-gradient(180deg, #1A2130 0%, #141A26 100%);
    border-bottom: 1px solid var(--rule);
    padding: 15px 20px; display: flex; justify-content: center; gap: 38px;
}
.gauge { text-align: center; }
.gauge .k { font-size: .7rem; letter-spacing: .12em; color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; }
.gauge .v { font-size: 1.9rem; font-weight: 700; margin-top: 2px;
    font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.gauge .v.alert { color: var(--alert); }

/* ── طبقات البداية/النهاية في الألعاب ── */
.overlay {
    position: absolute; inset: 0; z-index: 20;
    background: rgba(14,17,25,.96);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 24px;
}
.overlay h2 { margin: 0 0 6px; font-size: 1.7rem; font-weight: 700; }
.overlay p { margin: 0 0 4px; color: var(--ink-soft); }
.overlay .big {
    font-family: 'IBM Plex Mono', monospace; font-size: 3.4rem; font-weight: 600;
    margin: 10px 0 4px;
}
.overlay .btn { margin-top: 22px; }

/* ═══════════════════════════════════════════
   المكوّنات
   ═══════════════════════════════════════════ */

.wrap { width: 92%; max-width: 940px; margin: 0 auto; }
.stack > * + * { margin-top: 20px; }

/* ── القراءة الرئيسية: مقياس معايرة ── */
.readout { padding: 26px 22px 22px; text-align: center; }
.readout .eyebrow { margin-bottom: 10px; }
.readout .value {
    font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
    font-size: clamp(3.6rem, 15vw, 5.6rem); font-weight: 700;
    line-height: 1; letter-spacing: -.03em;
    animation: glow-pulse 2.8s ease-in-out infinite;
}
@keyframes glow-pulse {
    0%, 100% { text-shadow: 0 0 30px rgba(255,90,54,.28); }
    50%      { text-shadow: 0 0 52px rgba(255,90,54,.5); }
}
.readout .value.pump { animation: pump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pump { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }
.readout .unit { font-size: .95rem; color: var(--ink-faint); margin-top: 4px; }

/* المقياس نفسه — العلامة المميزة */
.scale { position: relative; height: 46px; margin: 20px 0 6px; }
.scale .track {
    position: absolute; inset-block: 18px 14px; inset-inline: 0;
    background: var(--paper-lo); border: 1px solid var(--rule);
}
.scale .ticks {
    position: absolute; inset-inline: 0; top: 0; height: 14px;
    background-image: repeating-linear-gradient(to left, var(--rule) 0 1px, transparent 1px 10%);
}
.scale .fill {
    position: absolute; inset-block: 18px 14px; inset-inline-start: 0;
    width: 0%; background: var(--signal); transition: width .9s cubic-bezier(.22,1,.36,1);
}
.scale .goal {
    position: absolute; top: 8px; bottom: 6px; width: 2px;
    background: var(--ok); inset-inline-start: 80%;
}
.scale .goal::after {
    content: 'هدف ٨٠٠'; position: absolute; top: -14px; inset-inline-start: 50%;
    transform: translateX(50%); white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace; font-size: .6rem; color: var(--ok);
}
.scale .needle {
    position: absolute; top: 4px; bottom: 2px; width: 2px;
    background: var(--alert); inset-inline-start: 0;
    transition: inset-inline-start .9s cubic-bezier(.22,1,.36,1);
}
.scale .needle::before {
    content: ''; position: absolute; top: -1px; inset-inline-start: -3px;
    border: 4px solid transparent; border-top-color: var(--alert);
}
.scale-legend {
    display: flex; justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--ink-faint);
}

/* ── سطر التقدّم ── */
.progress-line { margin-top: 16px; }
.progress-line .label { font-size: .85rem; color: var(--ink-soft); margin-bottom: 7px; }
.progress-line .bar { height: 4px; background: var(--paper-lo); border: 1px solid var(--rule); }
.progress-line .bar i { display: block; height: 100%; background: var(--ink); width: 0%; transition: width .8s ease; }
.progress-line .note { font-size: .78rem; color: var(--ink-faint); margin-top: 7px; }

.rank-chip {
    display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .82rem;
    border: 1px solid var(--rule); border-radius: 99px; padding: 5px 14px;
    color: var(--ink-soft); background: var(--paper);
}

/* ── شريط المستخدم ── */
.userbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 18px; flex-wrap: wrap;
}
.userbar .who { font-size: .95rem; }
.userbar .who b { font-weight: 600; }
.streak {
    font-family: 'IBM Plex Mono', monospace; font-size: .82rem; font-weight: 600;
    border: 1px solid rgba(255,196,66,.4); color: var(--gold);
    background: rgba(255,196,66,.08); padding: 5px 13px; border-radius: 99px;
    animation: gold-pulse 2.2s ease-in-out infinite;
}
@keyframes gold-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255,196,66,0); }
    50%      { box-shadow: 0 0 14px rgba(255,196,66,.35); }
}

/* ── تحدي اليوم ── */
.daily {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px; flex-wrap: wrap;
    border-inline-start: 4px solid var(--signal);
    animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe {
    0%,100% { box-shadow: var(--shadow); }
    50%     { box-shadow: var(--shadow), 0 0 26px rgba(255,90,54,.18); }
}
.daily.done { animation: none; }
.daily.done { border-inline-start-color: var(--ok); }
.daily .lead { display: flex; align-items: center; gap: 14px; }
.daily .mark { font-size: 1.9rem; }
.daily .k { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .12em; color: var(--signal); font-weight: 600; }
.daily.done .k { color: var(--ok); }
.daily .v { font-size: 1.2rem; font-weight: 600; }
.daily-done-tag { color: var(--ok); font-weight: 600; font-size: .95rem; }

/* ── شبكة الألعاب ── */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.game-card {
    position: relative; padding: 18px; text-align: center;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .15s, transform .12s;
}
.game-card:hover { border-color: var(--signal); transform: translateY(-3px); box-shadow: var(--shadow), 0 0 22px rgba(255,90,54,.15); }
.game-card.is-daily { border-color: var(--signal); box-shadow: var(--shadow), 0 0 20px rgba(255,90,54,.2); }
.game-card .idx {
    position: absolute; top: 10px; inset-inline-start: 12px;
    font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--ink-faint);
}
.game-card .mark { font-size: 1.8rem; }
.game-card .name { font-weight: 600; font-size: 1.02rem; }
.game-card .metric { font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: var(--ink-faint); min-height: 1em; }
.game-card .go {
    margin-top: auto; text-decoration: none; font-weight: 600; font-size: .92rem;
    border: 1px solid var(--rule); border-radius: var(--r); padding: 9px;
    color: var(--ink); background: var(--paper);
}
.game-card:hover .go { border-color: var(--signal); color: var(--signal); }
.game-card .daily-badge {
    position: absolute; top: 10px; inset-inline-end: 12px;
    font-family: 'IBM Plex Mono', monospace; font-size: .6rem; font-weight: 600;
    background: var(--signal); color: #fff; padding: 3px 9px; border-radius: 99px;
    box-shadow: 0 0 14px rgba(255,90,54,.5);
}

/* ── المكافأة ── */
.reward { padding: 20px; border-inline-start: 4px solid var(--rule); }
.reward.unlocked { border-inline-start-color: var(--ok); }
.reward .headline { font-weight: 600; margin-bottom: 8px; }
.code {
    font-family: 'IBM Plex Mono', monospace; font-size: 1.6rem; font-weight: 700;
    letter-spacing: .14em; background: rgba(43,227,143,.07); border: 1px dashed var(--ok);
    color: var(--ok); padding: 13px 22px; border-radius: var(--r);
    display: inline-block; margin: 10px 0; user-select: all;
    box-shadow: 0 0 26px rgba(43,227,143,.18);
}
.reward-meter { height: 4px; background: var(--paper-lo); border: 1px solid var(--rule); margin: 10px 0 7px; }
.reward-meter i { display: block; height: 100%; background: var(--ok); width: 0%; transition: width .8s ease; }

/* ── لوحة الشرف ── */
.lb { list-style: none; padding: 0; margin: 0; }
.lb li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 4px; border-bottom: 1px solid var(--rule-soft); font-size: .95rem;
}
.lb li:last-child { border-bottom: none; }
.lb-rank { font-family: 'IBM Plex Mono', monospace; color: var(--ink-faint); width: 2.2rem; }
.lb .who { flex: 1; font-weight: 500; }
.lb-score { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
.lb li.me { background: rgba(255,90,54,.08); }
.lb li:nth-child(1) .lb-score { color: var(--gold); }

/* ── الرسم البياني ── */
#iq-chart { width: 100%; height: 130px; display: block; }
.chart-empty { color: var(--ink-faint); font-size: .88rem; text-align: center; padding: 24px 0; }

/* ── تسجيل الدخول ── */
.auth { width: 92%; max-width: 380px; margin: 34px auto; padding: 26px 24px; }
.auth h2 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 600; }
.auth .lead { color: var(--ink-soft); font-size: .88rem; margin: 0 0 18px; }
.tabs { display: flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.tabs button {
    flex: 1; padding: 10px; background: transparent; border: none; cursor: pointer;
    font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-soft);
}
.tabs button.active { background: var(--signal); color: #fff; }
.auth .msg { font-size: .85rem; min-height: 20px; line-height: 1.6; color: var(--alert); margin-bottom: 8px; }
.auth .msg.ok { color: var(--ok); }
.auth .quiet-link {
    background: none; border: none; color: var(--ink-soft); font-family: inherit;
    font-size: .82rem; cursor: pointer; text-decoration: underline; margin-top: 9px;
}
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: .78rem; margin: 18px 0 14px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.gbtn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--paper-lo); border: 1px solid var(--rule); border-radius: var(--r);
    padding: 13px; font-family: inherit; font-size: .96rem; font-weight: 600;
    color: var(--ink); cursor: pointer; transition: border-color .15s;
}
.gbtn:hover { border-color: var(--ink-faint); }
.gbtn .g { color: var(--signal); font-weight: 700; }
.hint { color: var(--alert); font-size: .8rem; margin-top: 10px; line-height: 1.6; text-align: center; }

/* ── زر المشاركة ── */
.share {
    width: 100%; padding: 14px; background: transparent; color: var(--ink);
    border: 1px solid var(--rule); border-radius: var(--r); font-family: inherit;
    font-size: .98rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s;
}
.share:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 560px) {
    .games { grid-template-columns: 1fr 1fr; }
    .game-card .name { font-size: .92rem; }
}

/* ── تصحيح: السكربت يضبط display:flex على هذين القسمين،
      فلا بد من تحديد الاتجاه هنا وإلا رُصّت العناصر أفقياً ── */
#login-section { flex-direction: column; align-items: stretch; }
#games-section { flex-direction: column; align-items: stretch; }
#discount-code-box { flex-direction: column; align-items: flex-start; gap: 4px; }