/* OX GAMES — الطبقة المشتركة لصفحات الحساب
   ------------------------------------------------------------
   كانت «حسابي» تحمل هذه القواعد داخلها، فأي صفحة جديدة إما تنسخها
   فتتخلف عنها مع أول تعديل، أو تخترع ألوانا أخرى فتبدو موقعا آخر.
   هنا مصدر واحد: الألوان، الشريط العلوي، الأزرار، البطاقات، الحقول.
   تُحمَّل قبل ستايل الصفحة، فالصفحة تزيد ولا تعيد. */

:root{
  --bg:#0a0c14; --bg2:#0e111c; --surface:#131725; --surface2:#181e30; --surface3:#1b2437;
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.13);
  --soft:rgba(255,255,255,.04); --soft2:rgba(255,255,255,.08);
  --text:#dfe4f0; --muted:#8892ac; --dim:#626c85;
  --a1:#22d3ee; --a2:#4f7cff; --a-mid:#3b9dff; --ink:#04121e;
  --gold:#fbbf24; --gr:#34d399; --red:#fb7185; --pur:#a855f7;
  --sh:0 20px 52px rgba(0,0,0,.42); --r:22px;
}
:root[data-mode="light"]{
  --bg:#e4e7ee; --bg2:#eef1f7; --surface:#f2f4f8; --surface2:#eceff5; --surface3:#e6eaf2;
  --line:rgba(12,18,38,.09); --line2:rgba(12,18,38,.16);
  --soft:rgba(12,18,38,.035); --soft2:rgba(12,18,38,.07);
  --text:#232b39; --muted:#636f86; --dim:#8b94a6;
  --ink:#f2f4f8;
  --sh:0 14px 36px rgba(20,30,60,.10);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:Alexandria,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;min-height:100dvh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 60% at 50% -10%,#16243f 0%,var(--bg) 58%)}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:Alexandria,sans-serif}
[hidden]{display:none!important}

/* ===== الشريط العلوي ===== */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:11px;padding:11px 18px;
  /* كان `backdrop-filter:blur(16px)`. والرأسُ لاصقٌ فوق حقل نجومٍ
     يُرسم كلَّ إطار، فكان المُركِّب يُعيد طمس الخلفية ستّين مرّة في
     الثانية — ثمنٌ يدفعه كلُّ زائر، ووميضٌ يراه من يرسم بمعالجه.
     وعند ٩٦٪ عتامة لا يظهر من الطمس شيءٌ يُذكر، فذهب الثمن وبقي
     المظهر. */
  background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--line)}
.top img.lg{height:28px;width:auto;display:block}
.sp{flex:1}
.coins{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;font-weight:800;
  font-size:14px;background:linear-gradient(100deg,rgba(251,191,36,.16),rgba(251,191,36,.05));
  border:1px solid rgba(251,191,36,.42);color:var(--gold);font-variant-numeric:tabular-nums}

/* ===== الأزرار ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;cursor:pointer;
  border:1px solid var(--line2);background:var(--soft);color:var(--text);padding:9px 16px;border-radius:13px;
  font-weight:800;font-size:13.5px;transition:transform .14s,border-color .14s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--a1) 55%,transparent)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.go{background:linear-gradient(100deg,var(--a1),var(--a-mid) 50%,var(--a2));color:var(--ink);border:0;
  box-shadow:0 10px 26px color-mix(in srgb,var(--a2) 26%,transparent)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:10px}
.btn.gold{background:linear-gradient(100deg,#fde68a,var(--gold));color:#241800;border:0}
.btn.ghost{background:transparent}
/* أهداف اللمس لا تقل عن ٤٢ بكسل — إرشاد آبل وجوجل معا */
@media(hover:none){ .btn{min-height:42px} }

/* ===== الهيكل ===== */
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 90px}
.card{background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);
  border-radius:var(--r);padding:19px 20px;margin-bottom:16px;box-shadow:var(--sh)}
.card h2{font-size:17px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.card .cd{color:var(--muted);font-size:12.6px;margin:0 0 15px;line-height:1.65}
.note{color:var(--muted);font-size:12.4px;line-height:1.7}
.k{font-size:10.5px;letter-spacing:2.2px;color:var(--dim);font-weight:800;margin-bottom:8px}
.sep{height:1px;background:var(--line);margin:16px 0}

/* ===== الحقول ===== */
input{font-family:inherit;background:var(--soft);color:var(--text);border:1px solid var(--line2);
  border-radius:13px;padding:10px 13px;font-size:14px;width:100%}
input:focus{outline:0;border-color:var(--a1)}
input::placeholder{color:var(--dim)}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.row>.f{flex:1;min-width:150px}

/* ===== أرقام صغيرة ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.st{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center;
  min-width:0;overflow:hidden}
/* الرقم يصغر وحده حتى يسع الصندوق: تاريخ مثل 2036-09-07 كان ينكسر سطرين */
.st b{display:block;font-size:clamp(15px,4.6vw,21px);font-variant-numeric:tabular-nums;
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr}
.st span{display:block;font-size:11.4px;color:var(--muted);line-height:1.5;margin-top:2px}

/* ===== حالات ===== */
.empty{text-align:center;color:var(--muted);font-size:13px;padding:26px 12px}
.empty .ic{font-size:32px;display:block;margin-bottom:9px;opacity:.55}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--surface3);
  border:1px solid var(--a1);padding:11px 20px;border-radius:14px;font-weight:800;z-index:99;box-shadow:var(--sh);font-size:13.5px}
.toast.bad{border-color:var(--red)}
.gate{max-width:430px;margin:14vh auto;text-align:center}

/* ===== الجوال ===== */
@media(max-width:560px){
  .wrap{padding:14px 12px 80px}
  .top{gap:8px;padding:9px 12px}
  .top img.lg{height:24px}
  .btn{padding:8px 12px;font-size:12.8px}
  .coins{padding:6px 12px;font-size:13px}
  .card{padding:16px 14px;margin-bottom:12px;border-radius:19px}
  .card h2{font-size:16px}
  .stats{gap:8px}
  .st{padding:10px 8px}
  /* الحقل والزر سطرا كاملا: أسهل باللمس من زر ضيق بجانب حقل */
  .row>.f{flex:1 1 100%}
  .row>.btn{flex:1 1 100%}
}