/* البحث عن الكلمات (أكتوبر 2026) — كل الأسماء تبدأ بـ ws- حتى ما تتداخل مع باقي الموقع
   الألوان: أخضر مزرق (تيل) للواجهة، وورق فاتح للشبكة، وأقلام تظليل ملوّنة للكلمات اللي تلقاها */
.ws{--ink:#0F172A;--sub:#4B5B6E;--brand:#0F766E;--brand2:#14B8A6;--brandsh:#115E59;--mint:#F0FDFA;--mint2:#E3F7F2;--line:#C9ECE5;--paper:#FFFEF9;--gold:#F59E0B;--goldsh:#B45309;--bad:#DC2626;
    position:relative;max-width:880px;margin:0 auto;direction:rtl;padding-bottom:112px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ws [hidden]{display:none!important}
.ws button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* الأزرار */
.ws-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}
.ws-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.ws-btn:disabled{opacity:.45;cursor:default;transform:none}
.ws-main{color:#fff;background:linear-gradient(180deg,#14A394,var(--brand));box-shadow:0 5px 0 var(--brandsh),0 10px 18px rgba(15,118,110,.25);font-size:18px;padding:15px 10px}
.ws-main:active{box-shadow:0 2px 0 var(--brandsh)}
.ws-alt{color:#422006;background:linear-gradient(180deg,#FCD34D,#F59E0B);box-shadow:0 5px 0 var(--goldsh),0 10px 18px rgba(180,83,9,.2);font-size:17px}
.ws-alt:active{box-shadow:0 2px 0 var(--goldsh)}
.ws-alt small{font-size:13px;font-weight:800;opacity:.8}
.ws-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:0 auto 10px}
.ws-row .ws-btn{margin:0;font-size:14.5px}
.ws-link{display:block;margin:4px auto 0;border:0;background:none;color:var(--brand);font-weight:900;font-size:14.5px;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:4px}
.ws-small{font-size:12.5px;font-weight:700;color:var(--sub);margin:8px 0 0;line-height:1.7}
.ws-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)}

/* شاشة البداية */
.ws-panel{position:relative;max-width:560px;margin:0 auto;border-radius:24px;padding:22px 16px 20px;text-align:center;overflow:hidden;background:linear-gradient(180deg,var(--mint),#fff 70%);box-shadow:0 14px 34px rgba(15,118,110,.14);border-top:8px solid var(--brand)}
.ws-hero{position:relative;width:200px;height:200px;margin:4px auto 14px;border-radius:22px;background:var(--paper);box-shadow:0 10px 24px rgba(15,118,110,.18),0 0 0 6px #fff;padding:10px;box-sizing:border-box}
.ws-hero-svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.ws-hero-svg line{stroke-width:.78;stroke-linecap:round;opacity:0;animation:ws-hl .5s ease-out forwards}
.ws-hero-svg .h1{stroke:#FDE047;animation-delay:.3s}
.ws-hero-svg .h2{stroke:#86EFAC;animation-delay:.8s}
.ws-hero-svg .h3{stroke:#93C5FD;animation-delay:1.3s}
.ws-hero-g{position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:100%;direction:rtl}
.ws-hero-g i{font-style:normal;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:900;color:var(--ink)}
.ws-hero-mag{position:absolute;left:-14px;bottom:-12px;font-size:46px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2));animation:ws-bob 2.6s ease-in-out infinite}
.ws-title{font-size:34px;font-weight:900;margin:0;color:var(--brand);line-height:1.3}
.ws-tag{margin:4px 0 16px;color:var(--sub);font-weight:800;font-size:15.5px;line-height:1.8}
.ws-line{min-height:22px;margin:0 0 12px;font-weight:800;font-size:14px;color:var(--brand)}
.ws-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:340px;margin:10px auto 0}
.ws-stats:empty{display:none}
.ws-stat{background:#fff;border-radius:12px;padding:8px 2px;box-shadow:0 2px 0 var(--line)}
.ws-stat b{display:block;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.ws-stat small{display:block;font-size:10.5px;font-weight:800;color:var(--sub)}

/* المراحل */
.ws-lvp{text-align:right;padding:14px 12px 18px}
.ws-lv-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ws-lv-top b{flex:1;font-size:20px;font-weight:900;color:var(--brand)}
.ws-lv-count{font-weight:900;font-size:14px;color:var(--goldsh);background:#FEF3C7;border-radius:999px;padding:6px 12px;font-variant-numeric:tabular-nums}
.ws-pack{background:#fff;border-radius:18px;padding:12px;margin-bottom:12px;box-shadow:0 3px 0 var(--line)}
.ws-pack.cur{box-shadow:0 0 0 2px var(--brand2),0 3px 0 var(--line)}
.ws-pack-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ws-pack-i{font-size:28px;line-height:1}
.ws-pack-t{flex:1;min-width:0}
.ws-pack-t b{display:block;font-size:17px;font-weight:900}
.ws-pack-t small{display:block;font-size:12px;font-weight:800;color:var(--sub);line-height:1.5}
.ws-pack-n{font-weight:900;font-size:14px;color:var(--brand);font-variant-numeric:tabular-nums}
.ws-lvgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.ws-lv{position:relative;border:0;border-radius:13px;background:var(--mint);height:56px;padding:4px 0;cursor:pointer;color:var(--ink);box-shadow:0 2px 0 var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.ws-lv b{font-size:18px;font-weight:900;line-height:1.1}
.ws-lv small{font-size:10px;line-height:1.1;letter-spacing:-1px;min-height:11px}
.ws-lv.done{background:#CCFBF1}
.ws-lv.lock{background:#F1F5F9;color:#94A3B8;cursor:default;box-shadow:none}
.ws-lv.lock b{font-size:14px}
.ws-lv.next{background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brandsh);animation:ws-pulse 1.6s ease-in-out infinite}
.ws-lv:not(.lock):active{transform:translateY(2px)}

/* ساحة اللعب */
.ws-stage{position:relative;display:flex;flex-direction:column;gap:8px;min-height:560px;border-radius:24px;padding:10px;background:linear-gradient(180deg,var(--mint),#F7FEFC);box-shadow:0 14px 34px rgba(15,118,110,.14);overflow:hidden}
.ws-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ws-top-mid{flex:1;min-width:0;text-align:center;line-height:1.3}
.ws-top-mid b{display:block;font-size:16px;font-weight:900;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-top-mid small{display:block;font-size:12.5px;font-weight:800;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-timer{flex:0 0 auto;min-width:70px;text-align:center;background:#fff;border-radius:999px;padding:8px 10px;font-weight:900;font-size:14.5px;color:var(--brandsh);box-shadow:0 2px 0 var(--line);font-variant-numeric:tabular-nums;direction:ltr}
.ws-fresh{background:#DCFCE7;color:#14532D;border-radius:12px;padding:8px 10px;font-weight:900;font-size:14px;text-align:center}
.ws-fresh button{border:0;background:#15803D;color:#fff;border-radius:999px;padding:4px 12px;font-weight:900;margin-inline-start:6px;cursor:pointer}
.ws-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}

/* قائمة الكلمات */
.ws-wordsbox{flex:0 0 auto;background:#fff;border-radius:16px;padding:8px 10px 10px;box-shadow:0 2px 0 var(--line)}
.ws-words-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ws-words-h span{font-weight:900;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-words-h b{font-weight:900;font-size:13.5px;color:#fff;background:var(--brand);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
.ws-words{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ws-w{position:relative;border:0;border-radius:999px;padding:5px 11px;background:var(--mint);color:var(--ink);font-weight:800;font-size:15px;line-height:1.35;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
.ws-w.got{background:var(--wc,#FDE047);box-shadow:none;color:rgba(15,23,42,.62);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(15,23,42,.55)}
.ws-w.rev::after,.ws-w.hinted::after{content:'💡';font-size:11px;margin-inline-start:3px;text-decoration:none;display:inline-block}
.ws-w.sel{box-shadow:inset 0 0 0 2.5px var(--gold);background:#FFFBEB}
.ws-w.pop{animation:ws-chip .45s cubic-bezier(.2,1.6,.4,1) both}

/* الشبكة */
.ws-boardwrap{flex:0 0 auto;display:flex;justify-content:center;align-items:flex-start;min-width:0}
.ws-board{--n:10;--fs:20px;position:relative;width:100%;max-width:560px;aspect-ratio:1/1;border-radius:16px;background-color:var(--paper);
    background-image:linear-gradient(rgba(15,118,110,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(15,118,110,.07) 1px,transparent 1px);
    background-size:calc(100% / var(--n)) calc(100% / var(--n));box-shadow:0 0 0 2px var(--line),0 8px 20px rgba(15,118,110,.12);
    touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;overflow:hidden}
.ws-board.done{cursor:default}
.ws-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ws-cells{position:absolute;inset:0;z-index:1;display:grid;direction:rtl;pointer-events:none}
.ws-c{position:relative;display:flex;align-items:center;justify-content:center;font-size:var(--fs);font-weight:800;color:var(--ink);line-height:1;transition:transform .12s,color .12s}
.ws-c.got{font-weight:900}
.ws-c.on{color:var(--brandsh);font-weight:900;transform:scale(1.14)}
.ws-c.anc::before{content:'';position:absolute;inset:8%;border-radius:50%;box-shadow:0 0 0 2.5px var(--brand2)}
.ws-c.hint::after{content:'';position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 0 3px var(--gold);background:rgba(245,158,11,.18);animation:ws-ring 1.2s ease-in-out infinite}
.ws-pill{stroke-width:.78;stroke-linecap:round;opacity:.9;animation:ws-hl .3s ease-out both}
.ws-pill.rev{opacity:.5}
.ws-sel{stroke:rgba(20,184,166,.32);stroke-width:.8;stroke-linecap:round}
.ws-bad{stroke:rgba(220,38,38,.38);stroke-width:.8;stroke-linecap:round;animation:ws-fade .65s ease-in forwards}
.ws-board.win{animation:ws-win .8s cubic-bezier(.2,1.4,.4,1) both}

/* تحت الشبكة */
.ws-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:46px}
.ws-say{flex:1;min-width:0;margin:0;font-size:14px;font-weight:900;color:var(--sub);line-height:1.5}
.ws-say.ok{color:#15803D}.ws-say.warn{color:#B45309}.ws-say.bad{color:var(--bad)}.ws-say.tip{color:var(--brand)}.ws-say.live{color:var(--brandsh);font-size:17px}
.ws-sm{flex:0 0 auto;width:auto;min-width:112px;margin:0;font-size:15px;padding:11px 14px}
.ws-res{background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brandsh)}

/* الكمبيوتر: الشبكة يمين والكلمات يسار */
.ws-area.wide{display:grid;grid-template-columns:auto minmax(220px,1fr);grid-template-areas:'board words' 'board bar';grid-template-rows:auto 1fr;column-gap:16px;row-gap:10px;align-items:start}
.ws-area.wide .ws-boardwrap{grid-area:board}
.ws-area.wide .ws-wordsbox{grid-area:words;padding:12px 14px 14px}
.ws-area.wide .ws-bar{grid-area:bar;flex-direction:column;align-items:stretch;text-align:center}
.ws-area.wide .ws-words{justify-content:flex-start}
.ws-area.wide .ws-w{font-size:16px;padding:6px 13px}
.ws-area.wide .ws-sm{width:100%;max-width:none}

/* النهاية */
.ws-end{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(240,253,250,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow-y:auto}
.ws-end-card{width:100%;max-width:380px;max-height:100%;overflow-y:auto;background:#fff;border-radius:22px;padding:18px 14px 14px;text-align:center;box-shadow:0 18px 40px rgba(15,118,110,.25)}
.ws-end.anim .ws-end-card{animation:ws-in .45s cubic-bezier(.2,1.4,.4,1) both}
.ws-end-e{font-size:46px;line-height:1.1}
.ws-end-h{font-size:24px;font-weight:900;color:var(--brand);margin:4px 0}
.ws-end-stars{display:flex;justify-content:center;gap:6px;margin:2px 0 6px;font-size:34px;line-height:1;color:#E2E8F0}
.ws-end-stars span.on{color:var(--gold);text-shadow:0 2px 0 var(--goldsh)}
.ws-end-stars span{animation:ws-star .5s cubic-bezier(.2,1.6,.4,1) both}
.ws-end-stars span:nth-child(2){animation-delay:.12s}.ws-end-stars span:nth-child(3){animation-delay:.24s}
.ws-end-stats{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:6px 0 8px}
.ws-es{background:var(--mint);border-radius:12px;padding:7px 10px;min-width:70px}
.ws-es b{display:block;font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;direction:ltr}
.ws-es small{display:block;font-size:11px;font-weight:800;color:var(--sub)}
.ws-end-t{font-size:14.5px;font-weight:800;color:var(--sub);line-height:1.7;margin:2px auto 12px;max-width:340px}
.ws-end .la3-story-btn{max-width:340px;margin:0 auto 10px}
.ws-next{font-size:13.5px;font-weight:800;color:var(--sub);margin:4px 0 0;font-variant-numeric:tabular-nums}
.ws-next:empty{display:none}
.ws-empty{text-align:center;margin:auto 0}
.ws-toast{position:absolute;left:50%;top:62px;transform:translateX(-50%);z-index:6;background:rgba(15,23,42,.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}
.ws-toast.on{animation:ws-toast .3s ease both}

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

@keyframes ws-in{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes ws-hl{0%{opacity:0;stroke-width:.25}100%{opacity:.9;stroke-width:.78}}
@keyframes ws-fade{0%{opacity:1}100%{opacity:0}}
@keyframes ws-chip{0%{transform:scale(.7)}100%{transform:none}}
@keyframes ws-ring{0%,100%{transform:scale(.92);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes ws-pulse{0%,100%{box-shadow:0 3px 0 var(--brandsh),0 0 0 0 rgba(20,184,166,.5)}50%{box-shadow:0 3px 0 var(--brandsh),0 0 0 6px rgba(20,184,166,0)}}
@keyframes ws-win{0%{transform:none}35%{transform:scale(1.035) rotate(-.6deg)}70%{transform:scale(.99) rotate(.3deg)}100%{transform:none}}
@keyframes ws-star{0%{transform:scale(0) rotate(-30deg)}100%{transform:none}}
@keyframes ws-bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes ws-toast{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}

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

@media(max-width:380px){
    .ws-title{font-size:30px}
    .ws-w{font-size:14px;padding:4px 9px}
    .ws-sm{min-width:98px;font-size:14px;padding:10px 10px}
    .ws-timer{min-width:62px;font-size:13.5px;padding:7px 8px}
    .ws-lvgrid{gap:5px}
    .ws-lv{height:52px}
}
@media(max-height:680px){
    .ws-hero{width:170px;height:170px}
    .ws-hero-g i{font-size:20px}
    .ws-wordsbox{padding:6px 8px 8px}
    .ws-words-h{margin-bottom:4px}
    .ws-w{padding:3px 9px;font-size:14px}
    .ws-words{gap:5px}
    .ws-bar{min-height:42px}
}
@media(prefers-reduced-motion:reduce){.ws-hero-svg line,.ws-pill,.ws-w.pop,.ws-mcard,.ws-toast.on,.ws-board.win,.ws-end.anim .ws-end-card,.ws-c.hint::after,.ws-lv.next,.ws-hero-mag,.ws-end-stars span{animation-duration:.01s;animation-iteration-count:1}}
