/* ============ رَبْط — التنسيق المشترك لكل الألعاب ============ */
:root{
  --bg:#0e1116; --surface:#171b22; --tile:#242a35; --tile-hover:#2e3543;
  --sel:#5c6474; --text:#f2f4f8; --muted:#9aa3b2; --line:#2a3140;
  --g1:#f2c94c; --g2:#6fcf97; --g3:#56ccf2; --g4:#bb6bd9; --bad:#eb5757;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font-family:"Segoe UI",system-ui,-apple-system,"Noto Naskh Arabic","Tahoma",sans-serif;
  display:flex; flex-direction:column; align-items:center; padding:0 12px 40px;
}

/* ===== شريط علوي + تنقل بين الألعاب ===== */
.topbar{width:100%;max-width:560px}
.topinner{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 8px;gap:8px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;
       color:var(--text);text-decoration:none;letter-spacing:.3px}
.logo{width:25px;height:25px;border-radius:7px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;flex:0 0 auto}
.logo i{display:block}
.logo i:nth-child(1){background:var(--g1)}.logo i:nth-child(2){background:var(--g2)}
.logo i:nth-child(3){background:var(--g3)}.logo i:nth-child(4){background:var(--g4)}
.hbtns{display:flex;gap:6px}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9px;
       padding:6px 11px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.ghost:hover{border-color:var(--muted);color:var(--text)}

.gamesnav{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.gamesnav::-webkit-scrollbar{display:none}
.navlink{flex:0 0 auto;display:flex;align-items:center;gap:5px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  border-radius:99px;padding:6px 11px;font-size:12.5px;font-weight:700;transition:.15s;white-space:nowrap}
.navlink:hover{color:var(--text);border-color:var(--muted)}
.navlink.on{background:var(--text);color:#0e1116;border-color:var(--text)}
.navlink span{font-size:14px}

.wrap{width:100%;max-width:560px}
.subtitle{color:var(--muted);font-size:14px;text-align:center;margin:2px 0 14px}
h1.page{font-size:24px;text-align:center;margin:6px 0 2px}

/* ===== أزرار ===== */
.btn{border-radius:999px;padding:11px 20px;font-size:15px;font-weight:700;cursor:pointer;
     font-family:inherit;border:1px solid var(--line);background:transparent;color:var(--text);transition:.15s}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.primary{background:var(--text);color:#0e1116;border-color:var(--text)}
.btn.primary:disabled{background:#3a4150;color:#7a8496;border-color:#3a4150}
.btn.good{background:var(--g2);color:#12151b;border-color:var(--g2);font-weight:800}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ===== إعلانات ===== */
.ad{width:100%;max-width:560px;min-height:90px;margin:10px 0;display:flex;align-items:center;
    justify-content:center;border:1px dashed var(--line);border-radius:12px;color:#4d5768;font-size:12px;overflow:hidden}
.ad.hidden{display:none}

/* ===== بطاقة النهاية ===== */
.endcard{margin-top:18px;background:var(--surface);border:1px solid var(--line);
         border-radius:16px;padding:18px;text-align:center;display:none}
.endcard h2{margin:0 0 4px;font-size:20px}
.endcard p{margin:0 0 14px;color:var(--muted);font-size:14px}
.emoji{font-size:20px;line-height:1.35;letter-spacing:2px;margin:10px 0 16px;direction:ltr}
.endbtns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;justify-content:center;gap:20px;margin:16px 0 4px;flex-wrap:wrap}
.stat b{display:block;font-size:22px}
.stat span{font-size:11px;color:var(--muted)}
.next{color:var(--muted);font-size:13px;margin-top:12px}

/* ===== نافذة ===== */
dialog{border:1px solid var(--line);background:var(--surface);color:var(--text);
       border-radius:16px;max-width:420px;width:92%;padding:22px;font-family:inherit}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog h3{margin:0 0 10px}
dialog ul{margin:0;padding-inline-start:20px;color:var(--muted);font-size:14px;line-height:1.75}

/* ===== رسالة ===== */
.toast{position:fixed;left:50%;transform:translateX(-50%);top:16px;background:var(--text);color:#0e1116;
  padding:10px 18px;border-radius:10px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;
  transition:.25s;z-index:90}
.toast.show{opacity:1;top:24px}

/* ===== تذييل ===== */
.sitefoot{margin-top:28px;color:#5b6474;font-size:12px;text-align:center;line-height:2;width:100%;max-width:560px}
.sitefoot a{color:#7a8496;text-decoration:none;margin:0 6px}

/* ===== الصفحة الرئيسية ===== */
.hero{text-align:center;margin:10px 0 18px}
.hero h1{font-size:27px;margin:0 0 6px}
.hero p{color:var(--muted);font-size:15px;margin:0}
.cards{display:grid;gap:10px}
.card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
      border-radius:15px;padding:15px 16px;text-decoration:none;color:var(--text);transition:.15s}
.card:hover{border-color:var(--g1);transform:translateY(-2px)}
.card .ic{font-size:27px;width:48px;height:48px;flex:0 0 auto;border-radius:13px;background:var(--tile);
          display:grid;place-items:center}
.card b{display:block;font-size:17px;margin-bottom:2px}
.card small{color:var(--muted);font-size:13px}
.card .go{margin-inline-start:auto;color:var(--muted);font-size:19px}

@media(max-width:420px){
  .card{padding:13px}.card .ic{width:42px;height:42px;font-size:23px}
  .card b{font-size:15px}.card small{font-size:12px}
}