/* سلّم الكلمات (أكتوبر 2026) — كل الأسماء تبدأ بـ wl- حتى ما تتداخل مع باقي الموقع
   ألوان خشب السلّم: برتقالي محروق وبني، والنتيجة: أخضر قربت · أصفر نفس البعد · أحمر بعدت */
.wl{--ink:#1C1917;--sub:#6B5E55;--cream:#FFF7ED;--line:#F1DEC6;--wood:#C2410C;--woodsh:#7C2D12;--gold:#F4B740;--goldsh:#B7801A;--g:#16A34A;--y:#E9A21B;--r:#DC2626;
    position:relative;max-width:560px;margin:0 auto;direction:rtl;padding-bottom:112px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.wl [hidden]{display:none!important}
.wl button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* الأزرار */
.wl-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}
.wl-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.wl-btn:disabled{opacity:.45;cursor:default;transform:none}
.wl-main{color:#fff;background:linear-gradient(180deg,#EA580C,var(--wood));box-shadow:0 5px 0 var(--woodsh),0 10px 18px rgba(194,65,12,.25);font-size:18px;padding:15px 10px}
.wl-main:active{box-shadow:0 2px 0 var(--woodsh)}
.wl-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:0 auto 10px}
.wl-row .wl-btn{margin:0;font-size:14.5px}
.wl-link{display:block;margin:4px auto 0;border:0;background:none;color:var(--wood);font-weight:900;font-size:14.5px;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:4px}
.wl-small{font-size:12.5px;font-weight:700;color:var(--sub);margin:8px 0 0;line-height:1.7}

/* شاشة البداية */
.wl-panel{position:relative;border-radius:24px;padding:22px 16px 20px;text-align:center;overflow:hidden;background:var(--cream);box-shadow:0 14px 34px rgba(124,45,18,.14);border-top:8px solid var(--wood)}
.wl-hero{position:relative;display:grid;gap:6px;justify-content:center;margin:2px auto 12px;padding:6px 26px;width:max-content;
    background:linear-gradient(90deg,transparent 0 10px,#C9A27A 10px 16px,transparent 16px calc(100% - 16px),#C9A27A calc(100% - 16px) calc(100% - 10px),transparent calc(100% - 10px))}
.wl-hr{display:flex;gap:4px;justify-content:center;animation:wl-in .4s ease both}
.wl-hr2{animation-delay:.15s}.wl-hr3{animation-delay:.3s}.wl-hr4{animation-delay:.45s}
.wl-hr i{font-style:normal;width:38px;height:38px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900;box-shadow:0 2px 0 var(--line)}
.wl-hr i.c{background:var(--wood);color:#fff;box-shadow:0 2px 0 var(--woodsh)}
.wl-hr4 i{background:#DCFCE7}
.wl-hr4 i.c{background:var(--g);box-shadow:0 2px 0 #0F7A36}
.wl-title{font-size:36px;font-weight:900;margin:0;color:var(--wood)}
.wl-tag{margin:4px 0 16px;color:var(--sub);font-weight:800;font-size:15.5px;line-height:1.8}
.wl-line{min-height:22px;margin:0 0 10px;font-weight:800;font-size:14px;color:var(--wood)}
.wl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:340px;margin:10px auto 0}
.wl-stats:empty{display:none}
.wl-stat{background:#fff;border-radius:12px;padding:8px 2px;box-shadow:0 2px 0 var(--line)}
.wl-stat b{display:block;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.wl-stat small{display:block;font-size:11px;font-weight:800;color:var(--sub)}

/* ساحة اللعب */
.wl-stage{position:relative;display:flex;flex-direction:column;min-height:600px;border-radius:24px;padding:10px;background:var(--cream);box-shadow:0 14px 34px rgba(124,45,18,.14);overflow:hidden}
.wl-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wl-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)}
.wl-top-mid{flex:1;min-width:0;text-align:center;line-height:1.3}
.wl-top-mid b{display:block;font-size:16px;font-weight:900;color:var(--wood)}
.wl-top-mid small{display:block;font-size:12.5px;font-weight:800;color:var(--sub)}
.wl-fresh{margin:8px 0 0;background:#DCFCE7;color:#14532D;border-radius:12px;padding:8px 10px;font-weight:900;font-size:14px;text-align:center}
.wl-fresh button{border:0;background:#15803D;color:#fff;border-radius:999px;padding:4px 12px;font-weight:900;margin-inline-start:6px;cursor:pointer}
.wl-goal{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 0;background:#fff;border-radius:14px;padding:8px 12px;box-shadow:0 2px 0 var(--line)}
.wl-goal-w{font-size:16px;font-weight:900}
.wl-goal-n{font-size:13px;font-weight:800;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.wl-body{flex:1 1 auto;min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 2px 6px}
.wl-body>*{flex-shrink:0}

/* السلّم */
.wl-ladder{list-style:none;margin:0 auto;padding:4px 0;max-width:330px;position:relative}
.wl-ladder::before,.wl-ladder::after{content:'';position:absolute;top:0;bottom:0;width:6px;border-radius:3px;background:#E2C29B}
.wl-ladder::before{right:44px}.wl-ladder::after{left:44px}
.wl-rung{position:relative;display:flex;align-items:center;gap:8px;padding:5px 0}
.wl-rung.new{animation:wl-in .3s ease both}
.wl-rn{flex:0 0 46px;text-align:center;font-size:12px;font-weight:900;color:var(--sub);position:relative;z-index:1}
.wl-rung.start .wl-rn{color:var(--wood)}
.wl-mk{flex:0 0 46px;text-align:center;font-size:16px;position:relative;z-index:1}
.wl-tiles{flex:1;display:flex;justify-content:center;gap:5px;position:relative;z-index:1}
.wl-t{width:44px;height:44px;border-radius:11px;background:#fff;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:900;color:var(--ink);box-shadow:0 2px 0 var(--line);padding:0;line-height:1}
.wl-t.hit{border-bottom-color:var(--g)}
.wl-t.ch{background:#FFEDD5;color:var(--woodsh)}
.wl-tiles.big .wl-t{width:62px;height:62px;font-size:32px;border-radius:14px;cursor:pointer;box-shadow:0 4px 0 var(--line);background:#fff;color:var(--ink)}
.wl-tiles.big .wl-t.hit{border-color:transparent;border-bottom-color:var(--g)}
.wl-tiles.big .wl-t.sel{border-color:var(--wood);transform:translateY(-4px);box-shadow:0 0 0 3px rgba(194,65,12,.2),0 8px 14px rgba(124,45,18,.18)}
.wl-tiles.ghost .wl-t{background:transparent;border:2px dashed #E2C29B;box-shadow:none;color:#B49274}
.wl-rung.goal .wl-rn{font-size:18px}
.wl-rung.won .wl-t{background:var(--g);color:#fff;box-shadow:0 2px 0 #0F7A36}
.wl-rung.now{padding:8px 0}
.wl-mk.g,.wl-mk.y,.wl-mk.r{font-size:15px}
.shake{animation:wl-shake .45s ease both}

/* الحروف والأزرار تحت */
.wl-play{flex:0 0 auto;padding-top:6px;border-top:2px solid var(--line)}
.wl-say{min-height:22px;margin:0 0 6px;text-align:center;font-size:14px;font-weight:900;color:var(--sub);line-height:1.5}
.wl-say.ok{color:#15803D}.wl-say.warn{color:#B45309}.wl-say.bad{color:var(--r)}.wl-say.tip{color:var(--wood)}
.wl-keys{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-width:440px;margin:0 auto 8px;transition:opacity .15s}
.wl-keys.off{opacity:.5}
.wl-k{height:42px;border:0;border-radius:10px;background:#fff;font-size:19px;font-weight:900;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--line);padding:0}
.wl-k:active{transform:translateY(1px);box-shadow:none}
.wl-k:disabled{opacity:.35;cursor:default}
.wl-k.tg{background:#DCFCE7}
.wl-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:440px;margin:0 auto}
.wl-acts .wl-btn{margin:0}
.wl-sm{font-size:14px;padding:10px 4px}

/* النهاية */
.wl-end{text-align:center;margin-top:8px}
.wl-end-e{font-size:44px;line-height:1.1}
.wl-end-h{font-size:24px;font-weight:900;color:var(--wood);margin:2px 0}
.wl-end-t{font-size:15px;font-weight:800;color:var(--sub);line-height:1.8;margin:2px auto 10px;max-width:380px}
.wl-sol{max-width:380px;margin:0 auto 12px;background:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 2px 0 var(--line)}
.wl-sol b{display:block;font-size:13.5px;color:var(--wood);margin-bottom:2px}
.wl-sol-p{font-size:18px;font-weight:900;line-height:1.7}
.wl-end .la3-story-btn{max-width:340px;margin:0 auto 10px}
.wl-next{font-size:13.5px;font-weight:800;color:var(--sub);margin:4px 0 0;font-variant-numeric:tabular-nums}
.wl-empty{text-align:center;margin:auto 0}
.wl-toast{position:absolute;left:50%;top:62px;transform:translateX(-50%);z-index:5;background:rgba(28,25,23,.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}
.wl-toast.on{animation:wl-toast .3s ease both}

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

@keyframes wl-in{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes wl-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes wl-toast{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}

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

@media(max-width:380px){
    .wl-t{width:40px;height:40px;font-size:21px}
    .wl-tiles.big .wl-t{width:54px;height:54px;font-size:28px}
    .wl-k{height:38px;font-size:17px}
    .wl-keys{gap:4px}
    .wl-title{font-size:31px}
    .wl-ladder::before{right:40px}.wl-ladder::after{left:40px}
    .wl-rn,.wl-mk{flex-basis:40px}
}
@media(max-height:680px){.wl-t{width:38px;height:38px;font-size:20px}.wl-rung{padding:3px 0}.wl-k{height:36px}}
@media(prefers-reduced-motion:reduce){.wl-rung.new,.wl-hr,.wl-mcard,.wl-toast.on,.shake{animation-duration:.01s;animation-iteration-count:1}}