/* Earnvato Games — صفحات الشرح والسياسات + شريط الموقع */
@font-face{font-family:Cairo;src:url(/fonts/cairo.woff2) format("woff2");font-display:swap;unicode-range:U+0600-06FF,U+200C-200E,U+2018-2019}
:root{
  --bg1:#0b1530; --bg2:#13254f; --card:#16264d; --line:rgba(255,255,255,.09);
  --gold:#f5c542; --gold2:#ffdd7a; --teal:#2ec4b6; --text:#eef2ff; --muted:#a8b3d6;
}
html{scroll-behavior:smooth}
body.site{
  margin:0; min-height:100dvh; color:var(--text);
  font:16px/1.75 Cairo,system-ui,sans-serif; direction:rtl; text-align:right;
  background:radial-gradient(1200px 600px at 80% -10%,#1a2d63 0%,transparent 55%),linear-gradient(180deg,var(--bg1),var(--bg2) 40%,#0a1228);
}
.site a{color:var(--gold2); text-decoration:none}
.site a:hover{text-decoration:underline}
.site-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:rgba(11,21,48,.72); backdrop-filter:blur(10px); position:sticky; top:0; z-index:20;
}
.site-brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; text-decoration:none}
.site-brand img{width:36px; height:36px; border-radius:10px}
.site-nav{display:flex; gap:14px; flex-wrap:wrap; font-size:14px; font-weight:700}
.site-nav a{color:var(--muted)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--gold)}
.site-wrap{max-width:860px; margin:0 auto; padding:28px 18px 64px}
.site h1{font-size:clamp(26px,4vw,40px); margin:0 0 8px; color:#fff}
.site .lead{color:var(--muted); font-size:17px; margin:0 0 22px}
.site h2{font-size:22px; margin:28px 0 10px; color:var(--gold)}
.site h3{font-size:18px; margin:18px 0 8px; color:#fff}
.site p,.site li{color:#dbe3ff}
.site ul,.site ol{padding-inline-start:1.3em}
.site .card{
  background:linear-gradient(170deg,rgba(30,41,82,.92),rgba(13,20,48,.94));
  border:1px solid var(--line); border-radius:18px; padding:18px 18px 8px; margin:16px 0;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.site .cta{
  display:inline-flex; align-items:center; gap:8px; margin:8px 0 4px;
  background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#1a1404 !important;
  font-weight:900; padding:11px 18px; border-radius:999px; text-decoration:none !important;
}
.site .ghost{
  display:inline-flex; margin:8px 10px 4px 0; padding:10px 14px; border-radius:999px;
  border:1px solid var(--line); color:var(--text) !important; text-decoration:none !important; font-weight:700;
}
.site-foot{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:10px 16px;
}
.site-help-fab{
  position:fixed; inset-inline-start:12px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:99999; pointer-events:auto;
  background:rgba(11,21,48,.92); color:#ffdd7a; border:1px solid #f5c542; border-radius:999px;
  padding:9px 14px; font:800 13px Cairo,system-ui,sans-serif; text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.hub-site{margin-top:18px; width:100%; text-align:right; position:relative; z-index:3}
.hub-how{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px; padding:8px 12px; margin:0 0 12px}
.hub-how summary{cursor:pointer; font-weight:800; color:var(--gold); list-style:none; padding:8px 4px}
.hub-how summary::-webkit-details-marker{display:none}
.hub-how article{padding:4px 4px 12px; border-top:1px solid var(--line); margin-top:6px}
.hub-how h3{margin:10px 0 4px; font-size:16px}
.hub-how p,.hub-how li{color:var(--muted); font-size:14px; line-height:1.65}
.hub-legal,.rules-more{display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:center; font-size:13px; font-weight:700}
.hub-legal a,.rules-more a{color:var(--muted)}
.hub-legal a:hover{color:var(--gold)}
#screenHub.active{align-items:flex-start; overflow-y:auto}
@media (max-width:640px){
  .site-top{padding:12px}
  .site-nav{font-size:12px; gap:10px}
}