:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --sand:#E6D2B0; --sand-2:#D9C29B; --red:#8C2A22; --ink:#231A17;
  --wool:#FBF5EA; --wool-edge:#BFA985; --ochre:#D39A2E; --text:#231A17; --muted:#6B5646;
  --panel:#F3E6CF; --ok:#2F6B3A;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:inherit}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--sand:#1F1714;--sand-2:#2B201B;--text:#F3E9DA;--muted:#B7A290;--panel:#2E231E;--wool:#F4EBDC;--wool-edge:#8F7B60;--ok:#7FC08A}
}
:root[data-theme="dark"]{--sand:#1F1714;--sand-2:#2B201B;--text:#F3E9DA;--muted:#B7A290;--panel:#2E231E;--wool:#F4EBDC;--wool-edge:#8F7B60;--ok:#7FC08A}
body{margin:0;min-height:100%;overflow-x:hidden;background:var(--sand);color:var(--text);font-family:"Tajawal",system-ui,"Segoe UI",Tahoma,sans-serif;-webkit-tap-highlight-color:transparent}
.sadu{height:18px;background-color:var(--red);border-bottom:3px solid var(--ink);background-repeat:repeat-x;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 18 L9 4 L18 18 Z' fill='%23231A17'/%3E%3Cpath d='M18 18 L27 4 L36 18 Z' fill='%23FBF5EA'/%3E%3Cpath d='M6 18 L9 13 L12 18Z' fill='%23D39A2E'/%3E%3Cpath d='M24 18 L27 13 L30 18Z' fill='%238C2A22'/%3E%3C/svg%3E")}
.app{max-width:480px;margin:0 auto;padding:12px 14px 24px}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
h1{font-family:"Reem Kufi","Tajawal",sans-serif;font-size:2rem;margin:0;line-height:1;color:var(--red)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1{color:var(--ochre)}}
:root[data-theme="dark"] h1{color:var(--ochre)}
h2{font-family:"Reem Kufi",sans-serif;font-size:1.45rem;margin:.2rem 0 .8rem}
.tag{font-size:.85rem;color:var(--muted)}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
.hidden{display:none!important}
.pill{background:var(--panel);border:2px solid var(--text);color:var(--text);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.95rem;white-space:nowrap}
.primary{display:block;width:100%;background:var(--red);color:#FBF5EA;border:none;border-radius:14px;padding:14px;font-size:1.1rem;font-weight:700;box-shadow:0 4px 0 var(--ink)}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.primary:disabled{opacity:.5}
.ghost{display:block;width:100%;background:none;border:2px solid var(--text);color:var(--text);border-radius:14px;padding:12px;font-weight:700;font-size:1rem}
.stack{display:grid;gap:10px}
.muted{color:var(--muted)}
.err{color:#C0392B;font-weight:700;min-height:1.2em;font-size:.95rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#FF8A7A}}

/* نماذج */
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border-radius:14px;padding:4px;margin-bottom:14px}
.tabs button{background:none;border:none;color:var(--text);padding:10px;border-radius:10px;font-weight:700;font-size:1rem}
.tabs button[aria-selected="true"]{background:var(--wool);color:var(--ink)}
label{display:block;font-weight:700;font-size:.95rem;margin-bottom:4px}
input,select{width:100%;font:inherit;font-size:1rem;padding:12px;border-radius:12px;border:2px solid var(--wool-edge);background:var(--wool);color:var(--ink)}
.captcha{display:flex;gap:8px;align-items:center}
.captcha .img{background:var(--wool);border-radius:10px;min-width:160px;height:56px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.captcha button{background:none;border:none;color:var(--text);font-size:1.3rem}
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* الرئيسية */
.balance{background:var(--ink);color:#FBF5EA;border-radius:18px;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.balance b{font-family:"Reem Kufi",sans-serif;font-size:2rem;line-height:1}
.balance small{display:block;color:#CDBBA6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.banner{margin-top:14px;background:var(--panel);border-radius:14px;padding:10px;display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text)}
.banner img,.banner video{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:none}
.banner small{color:var(--muted)}

/* اللعبة */
.status{display:flex;justify-content:space-between;align-items:center;font-size:.95rem;margin-bottom:8px}
.status b{font-family:"Reem Kufi",sans-serif;font-size:1.1rem}
.boardwrap{background:var(--sand-2);border-radius:18px;padding:10px 6px;display:flex;justify-content:center}
.board{position:relative;direction:ltr}
.tile{position:absolute;border:1.5px solid var(--wool-edge);background:var(--wool);border-radius:9px;box-shadow:0 4px 0 var(--wool-edge);
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:filter .15s;overflow:hidden;color:var(--ink)}
.tile img{width:78%;height:78%;object-fit:contain;pointer-events:none}
.tile.blocked{filter:brightness(.5) saturate(.5);cursor:default}
.side{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.side .tile{position:relative}
.bar{margin-top:12px;background:var(--ink);border-radius:14px;padding:8px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;direction:ltr}
.slot{aspect-ratio:1;border-radius:8px;background:#3a2b25;display:flex;align-items:center;justify-content:center}
.slot .tile{position:relative;width:100%;height:100%;box-shadow:0 2px 0 var(--wool-edge);cursor:default}
.slot.pop .tile{animation:pop .18s ease-out}
.slot.clear .tile{animation:clear .22s ease-in forwards}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes clear{to{transform:scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.slot.pop .tile,.slot.clear .tile{animation:none}}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tool{background:var(--panel);color:var(--text);border:2px solid var(--text);border-radius:12px;padding:9px 4px;font-weight:700;font-size:.95rem}
.tool small{display:block;font-weight:400;color:var(--muted);font-size:.75rem;margin-top:2px}
.tool:disabled{opacity:.45}
.sponsors{margin-top:10px;font-size:.8rem;color:var(--muted);text-align:center}

/* متجر */
.pkg{background:var(--panel);border-radius:16px;padding:14px;display:grid;gap:10px}
.pkg .top{display:flex;justify-content:space-between;align-items:baseline}
.pkg .pts{font-family:"Reem Kufi",sans-serif;font-size:1.6rem}
.pkg .bonus{color:var(--ok);font-weight:700;font-size:.9rem}
.pkg .pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.pkg .pay button{background:var(--wool);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:10px 6px;font-weight:700}
.pkg .pay small{display:block;font-weight:400}

/* الترتيب */
.rrow{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px dashed var(--muted)}
.rrow.me{background:var(--panel);border-radius:10px;border-bottom-color:transparent}
.rrow .n{font-family:"Reem Kufi",sans-serif;font-size:1.2rem;text-align:center}
.meter{height:8px;background:var(--sand-2);border-radius:4px;margin-top:5px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--red)}

/* نوافذ */
.overlay{position:fixed;inset:0;background:rgba(20,12,10,.72);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.card{background:var(--panel);color:var(--text);border-radius:18px;max-width:380px;width:100%;padding:22px 18px;text-align:center;border-top:10px solid var(--red);max-height:90vh;overflow:auto}
.card p{line-height:1.7;margin:.3rem 0 1rem}
.card .big{font-size:3rem;line-height:1;margin:.2rem 0}
.adbox{background:var(--wool);color:var(--ink);border-radius:12px;padding:12px;margin:8px 0 12px}
.adbox img,.adbox video{max-width:100%;max-height:45vh;border-radius:8px;display:block;margin:0 auto 8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#FBF5EA;padding:12px 18px;border-radius:12px;z-index:60;font-weight:700;max-width:90vw}

/* المناطق والتحديات */
.linklike{background:none;border:none;color:#F3D9A4;font-weight:700;padding:2px 0;font-size:.85rem;text-decoration:underline;display:block;margin-inline-start:auto}
.hcard{background:var(--panel);border-radius:16px;padding:14px;margin-bottom:12px}
.hhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.hhead b{font-family:"Reem Kufi",sans-serif;font-size:1.15rem}
.hhead small{color:var(--muted)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.vs .nm{font-weight:700;font-size:1.05rem}
.vs .sc{font-family:"Reem Kufi",sans-serif;font-size:2rem;line-height:1.1}
.vs .sub{font-size:.78rem;color:var(--muted)}
.vs .x{font-size:1.2rem;color:var(--muted)}
.tug{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-top:10px;background:var(--sand-2)}
.tug i{display:block;height:100%}
.tug .me{background:var(--red)}.tug .them{background:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tug .them{background:#8F7B60}}
:root[data-theme="dark"] .tug .them{background:#8F7B60}
.note{font-size:.8rem;color:var(--muted);margin:.6rem 0 0;line-height:1.6}
.seg{display:flex;gap:4px;overflow-x:auto;background:var(--panel);border-radius:14px;padding:4px;margin-bottom:14px;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;background:none;border:none;color:var(--text);padding:9px 12px;border-radius:10px;font-weight:700;font-size:.92rem;white-space:nowrap}
.seg button[aria-selected="true"]{background:var(--wool);color:var(--ink)}
.rrow .meta{font-size:.78rem;color:var(--muted)}
.lock{background:var(--panel);border-radius:14px;padding:18px;text-align:center;line-height:1.7}
.lock .big{font-size:2.4rem}
.timer{font-family:"Reem Kufi",sans-serif;font-size:1.1rem;direction:ltr}
.dmatch{background:var(--panel);border-radius:12px;padding:10px 12px;margin-bottom:8px;display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;text-align:center}
.dmatch .w{color:var(--ok);font-weight:700}
.dmatch small{display:block;color:var(--muted);font-size:.75rem}
.picker{text-align:right}
.picker select{margin-bottom:10px}

/* الحسابات */
.linkbtn{background:none;border:none;color:var(--text);font-weight:700;text-decoration:underline;padding:6px;font-size:.95rem;justify-self:center}
.hint{display:block;color:var(--muted);font-size:.8rem;margin-top:4px;line-height:1.5}
.phone{display:flex;align-items:stretch;direction:ltr}
.phone span{background:var(--panel);border:2px solid var(--wool-edge);border-right:none;border-radius:12px 0 0 12px;padding:0 10px;display:flex;align-items:center;font-weight:700;color:var(--text)}
.phone input{border-radius:0 12px 12px 0}
.human{min-height:0}
.recap{display:flex;justify-content:center;min-height:78px}
.notice{background:var(--ochre);color:#231A17;border-radius:14px;padding:12px 14px;margin-bottom:12px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.notice small{color:#3a2b25}
.notice .pill{background:#FBF5EA;border-color:#231A17;color:#231A17}
.hcard.stack{display:grid;gap:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{display:inline-block;font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:999px;border:1.5px solid currentColor;margin-inline-start:4px}
.badge.ok{color:var(--ok)}.badge.no{color:#B0662E}.badge.soon{color:var(--muted)}
.bonus{border:2px dashed var(--ochre)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);vertical-align:middle;margin-inline-start:4px}
input:disabled{opacity:.7}

/* البنر */
.banner{position:relative;margin:0 0 12px}
#gameBanner{margin-top:12px}
.banner .adtag{position:absolute;top:6px;left:8px;font-size:.65rem;font-weight:700;color:var(--muted);border:1px solid var(--muted);border-radius:6px;padding:0 5px}
.banner.nolink{cursor:default}