/* وش يجمعهم؟ (أكتوبر 2026) — كل الأسماء تبدأ بـ wg- حتى ما تتداخل مع باقي الموقع
   ألوان المستويات: رملي (سهلة) · فيروزي (متوسطة) · عنابي (صعبة) · كحلي (أصعب) */
.wg{--ink:#1F2A44;--sub:#5B6478;--sand:#FBF5EA;--line:#EADFCB;--l1:#E7CF9C;--l1t:#4A3510;--l2:#2A9D8F;--l3:#9B3D3D;--l4:#2B3A67;--gold:#F4B740;--goldsh:#B7801A;
    position:relative;max-width:560px;margin:0 auto;direction:rtl;padding-bottom:112px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.wg [hidden]{display:none!important}
.wg button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* الأزرار */
.wg-btn{display:block;width:100%;max-width:340px;margin:0 auto 10px;border:0;border-radius:16px;padding:13px 10px;font-weight:900;font-size:16px;cursor:pointer;color:var(--ink);background:#fff;box-shadow:0 3px 0 var(--line);line-height:1.35}
.wg-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.wg-btn:disabled{opacity:.45;cursor:default;transform:none}
.wg-main{color:#3A2405;background:linear-gradient(180deg,#FFD27A,var(--gold));box-shadow:0 5px 0 var(--goldsh),0 10px 18px rgba(183,128,26,.22);font-size:18px;padding:15px 10px}
.wg-main:active{box-shadow:0 2px 0 var(--goldsh)}
.wg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:0 auto 10px}
.wg-row .wg-btn{margin:0;font-size:14.5px}
.wg-link{display:block;margin:4px auto 0;border:0;background:none;color:var(--l4);font-weight:900;font-size:14.5px;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:4px}
.wg-small{font-size:12.5px;font-weight:700;color:var(--sub);margin:8px 0 0;line-height:1.7}

/* شاشة البداية */
.wg-panel{position:relative;border-radius:24px;padding:24px 16px 22px;text-align:center;overflow:hidden;background:var(--sand);box-shadow:0 14px 34px rgba(31,42,68,.14);border-top:8px solid var(--l4)}
.wg-hero{display:grid;grid-template-columns:repeat(2,64px);gap:10px;justify-content:center;margin:4px auto 10px}
.wg-hb{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 6px 14px rgba(31,42,68,.18);animation:wg-bob 3s ease-in-out infinite}
.wg-hb:nth-child(2){animation-delay:.4s}.wg-hb:nth-child(3){animation-delay:.8s}.wg-hb:nth-child(4){animation-delay:1.2s}
.wg-title{font-size:36px;font-weight:900;margin:0;color:var(--l4)}
.wg-tag{margin:4px 0 16px;color:var(--sub);font-weight:800;font-size:15.5px;line-height:1.8}
.wg-line{min-height:22px;margin:0 0 10px;font-weight:800;font-size:14px;color:var(--l3)}
.wg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:340px;margin:10px auto 0}
.wg-stats:empty{display:none}
.wg-stat{background:#fff;border-radius:12px;padding:8px 2px;box-shadow:0 2px 0 var(--line)}
.wg-stat b{display:block;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.wg-stat small{display:block;font-size:11px;font-weight:800;color:var(--sub)}

/* ألوان المستويات */
.wg-l1{background:var(--l1);color:var(--l1t)}
.wg-l2{background:var(--l2);color:#fff}
.wg-l3{background:var(--l3);color:#fff}
.wg-l4{background:var(--l4);color:#fff}

/* ساحة اللعب */
.wg-stage{position:relative;display:flex;flex-direction:column;min-height:560px;border-radius:24px;padding:10px;background:var(--sand);box-shadow:0 14px 34px rgba(31,42,68,.14);overflow:hidden}
.wg-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wg-ico{flex:0 0 42px;width:42px;height:42px;border:0;border-radius:14px;background:#fff;font-size:19px;cursor:pointer;box-shadow:0 2px 0 var(--line);color:var(--ink)}
.wg-top-mid{flex:1;min-width:0;text-align:center;line-height:1.3}
.wg-top-mid b{display:block;font-size:16px;font-weight:900;color:var(--l4)}
.wg-top-mid small{display:block;font-size:12.5px;font-weight:800;color:var(--sub)}
.wg-fresh{margin:8px 0 0;background:#DCFCE7;color:#14532D;border-radius:12px;padding:8px 10px;font-weight:900;font-size:14px;text-align:center}
.wg-fresh button{border:0;background:#15803D;color:#fff;border-radius:999px;padding:4px 12px;font-weight:900;margin-inline-start:6px;cursor:pointer}
.wg-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;padding:10px 2px 4px}
.wg-hint-line{background:#FFF7DB;border:2px dashed var(--gold);border-radius:14px;padding:8px 12px;font-weight:900;font-size:14.5px;text-align:center}

/* المجموعات المحلولة */
.wg-solved{display:flex;flex-direction:column;gap:8px}
.wg-solved:empty{display:none}
.wg-band{border-radius:16px;padding:9px 12px 10px;text-align:center;animation:wg-pop .35s cubic-bezier(.2,1.3,.4,1) both;position:relative}
.wg-band-h{display:flex;align-items:center;justify-content:center;gap:6px;font-size:15.5px;line-height:1.4}
.wg-band-h b{font-weight:900}
.wg-band-i{font-size:18px}
.wg-band-w{font-size:14.5px;font-weight:800;opacity:.92;margin-top:2px;line-height:1.6}
.wg-band.missed{opacity:.88;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px)}
.wg-band-m{position:absolute;top:6px;left:8px;font-size:11px;font-weight:900;background:rgba(0,0,0,.18);border-radius:999px;padding:1px 8px}
.wg-l1 .wg-band-m{background:rgba(74,53,16,.15)}

/* الكلمات: بطاقات بحجم الكلمة (مو شبكة مربعات) */
.wg-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:flex-start}
.wg-words:empty{display:none}
.wg-w{flex:0 1 auto;min-width:64px;border:2px solid transparent;border-radius:999px;background:#fff;color:var(--ink);padding:13px 18px;font-size:17px;font-weight:900;cursor:pointer;
    box-shadow:0 3px 0 var(--line);line-height:1.25;transition:background .12s,color .12s,transform .12s}
.wg-w:active{transform:scale(.97)}
.wg-w.on{background:var(--l4);color:#fff;box-shadow:0 3px 0 #18223F;transform:translateY(-2px)}
.wg-w.ok{animation:wg-ok .42s ease both}
.wg-w.shake{animation:wg-shake .45s ease both}

/* التحكم */
.wg-play{margin-top:auto;padding-top:4px}
.wg-cups{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px;font-weight:800;color:var(--sub);font-size:14px}
.wg-cups i{font-style:normal;font-size:20px;width:26px;text-align:center;line-height:1}
.wg-cups i.empty{color:#CBBFA8;font-size:24px}
.wg-acts{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;max-width:420px;margin:0 auto}
.wg-acts .wg-btn{margin:0}
.wg-sm{font-size:15px;padding:12px 6px}
.wg-main.wg-sm{font-size:16px;padding:12px 6px}

/* النهاية */
.wg-end{text-align:center;margin-top:4px}
.wg-end-e{font-size:46px;line-height:1.1}
.wg-end-h{font-size:24px;font-weight:900;color:var(--l4);margin:2px 0}
.wg-end-t{font-size:15px;font-weight:800;color:var(--sub);line-height:1.8;margin:2px auto 8px;max-width:360px}
.wg-end-order{font-size:15px;font-weight:900;margin-bottom:12px;min-height:4px}
.wg-end .la3-story-btn{max-width:340px;margin:0 auto 10px}
.wg-next{font-size:13.5px;font-weight:800;color:var(--sub);margin:4px 0 0;font-variant-numeric:tabular-nums}
.wg-empty{text-align:center;margin:auto 0}
.wg-toast{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);z-index:5;background:rgba(31,42,68,.94);color:#fff;border-radius:999px;padding:9px 16px;font-weight:900;font-size:14.5px;
    white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 20px rgba(0,0,0,.2);pointer-events:none}
.wg-toast.on{animation:wg-toast .3s ease both}

/* النوافذ */
.wg-modal{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(31,42,68,.55)}   /* وسط الشاشة دايماً، فوق شريط الموقع */
.wg-mcard{position:relative;width:100%;max-width:400px;max-height:100%;overflow:auto;background:var(--sand);color:var(--ink);border-radius:22px;padding:20px 16px 14px;text-align:center;
    box-shadow:0 22px 44px rgba(0,0,0,.35);animation:wg-pop .35s cubic-bezier(.2,1.4,.4,1) both}
.wg-mcard-h{font-size:21px;font-weight:900;margin:2px 0 12px;color:var(--l4)}
.wg-how{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;text-align:right}
.wg-how li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:14px;padding:10px 12px;font-size:15px;font-weight:800;line-height:1.75;box-shadow:0 2px 0 var(--line)}
.wg-how li span{font-size:24px;line-height:1.2}
.wg-alist{display:grid;gap:8px}
.wg-arow{display:flex;align-items:center;gap:10px;border:0;border-radius:14px;background:#fff;padding:12px;cursor:pointer;box-shadow:0 2px 0 var(--line);color:var(--ink);text-align:right}
.wg-arow-n{font-weight:900;color:var(--l4);min-width:34px}
.wg-arow-d{flex:1;font-weight:800}
.wg-arow-s{font-weight:900;font-size:13.5px}

@keyframes wg-pop{0%{opacity:0;transform:translateY(8px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes wg-ok{0%{transform:none}40%{transform:translateY(-6px) scale(1.04)}100%{transform:scale(.6);opacity:0}}
@keyframes wg-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes wg-toast{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}   /* إصلاح 23 أكتوبر: الرسالة كانت تطلع مزاحة لليمين */
@keyframes wg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ملء الشاشة على الجوال */
.game-focus-shell.is-focus #wg-game{max-width:none;height:100%;padding:0;display:flex;flex-direction:column}
.game-focus-shell.is-focus .wg-panel{flex:1;border-radius:0;overflow-y:auto;padding-top:calc(60px + env(safe-area-inset-top,0px))}
.game-focus-shell.is-focus .wg-stage{flex:1;min-height:0;border-radius:0;padding:calc(8px + env(safe-area-inset-top,0px)) 10px calc(12px + env(safe-area-inset-bottom,0px))}
.game-focus-shell.is-focus .wg-top{padding-left:46px}   /* زر «إنهاء ملء الشاشة» أعلى اليسار */
/* شريط «العب التالي» يطلع أسفل الشاشة بعد النهاية: نخلي له مكان عشان ما يغطي أزرارنا */
html.la3-next-open .game-focus-shell.is-focus .wg-stage{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}

@media(max-width:380px){
    .wg-w{font-size:15.5px;padding:12px 8px;min-width:64px}
    .wg-title{font-size:31px}
    .wg-band-w{font-size:13.5px}
}
@media(min-width:768px){.wg-stage{min-height:600px;padding:14px}}
@media(min-height:700px){.wg-words{gap:10px}.wg-w{padding:16px 20px;font-size:18.5px}}   /* الجوالات الطويلة: بطاقات أكبر بدل فراغ */
html.la3-next-open .game-focus-shell.is-focus .wg-toast{bottom:268px}
@media(prefers-reduced-motion:reduce){.wg-band,.wg-w.ok,.wg-w.shake,.wg-mcard,.wg-hb,.wg-toast.on{animation-duration:.01s;animation-iteration-count:1}}