/* =========================================================
   مختبر الكلمات — المظهر
   ========================================================= */
.wl-root {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(61, 220, 151, .16), transparent 60%),
        radial-gradient(ellipse at 15% 0%, rgba(157, 123, 255, .18), transparent 50%),
        #050816;
}

/* ---------- الشريط العلوي ---------- */
.wl-hud { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; padding: .55rem .9rem; border-bottom: 1px solid var(--ww-border); background: rgba(8, 12, 32, .7); z-index: 2; }
.wl-stat { display: flex; flex-direction: column; line-height: 1.1; }
.wl-stat span { font-size: .7rem; color: var(--ww-muted); }
.wl-stat b { font-family: var(--ww-font-en); font-size: 1.15rem; color: #fff; }
.wl-power { flex: 1 1 160px; display: flex; align-items: center; gap: .45rem; min-width: 140px; }
.wl-power-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; border: 1px solid rgba(61, 220, 151, .35); }
.wl-power-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #3ddc97, #38e1ff); box-shadow: 0 0 12px rgba(61, 220, 151, .7); transition: width .2s linear; }
.wl-power.low .wl-power-bar { border-color: rgba(255, 93, 115, .6); }
.wl-power.low .wl-power-bar i { background: linear-gradient(90deg, #ff5d73, #ffd23f); animation: wlPulse .6s infinite alternate; }
.wl-power b { font-family: var(--ww-font-en); min-width: 2.2em; text-align: center; }
@keyframes wlPulse { to { opacity: .55; } }
.wl-btns { display: flex; gap: .35rem; margin-inline-start: auto; }

/* ---------- المسرح ---------- */
.wl-stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.8rem, 3vh, 1.6rem); padding: 1rem; overflow: hidden; }
.wl-planet { position: absolute; width: clamp(180px, 40vmin, 340px); aspect-ratio: 1; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -55%; opacity: .16; pointer-events: none; }
[dir="rtl"] .wl-planet { translate: 50% -55%; }
.wl-planet svg { width: 100%; height: 100%; animation: wwPlanetSpin 40s linear infinite; }

.wl-word { position: relative; font-size: clamp(2rem, 8vw, 3.6rem); font-weight: 800; letter-spacing: .04em; min-height: 1.3em; text-shadow: 0 0 22px rgba(56, 225, 255, .45); }
.wl-word[lang="en"] { font-family: var(--ww-font-en); letter-spacing: .12em; }
.wl-built { color: #fff; }
.wl-rest { color: rgba(255, 255, 255, .22); letter-spacing: .25em; }
.wl-solved .wl-built { color: var(--ww-green); text-shadow: 0 0 28px rgba(61, 220, 151, .9); animation: wlPop .45s; }
@keyframes wlPop { 40% { scale: 1.18; } }

.wl-slots { display: flex; gap: .35rem; }
.wl-slots i { width: clamp(16px, 4vw, 26px); height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .15); transition: background .2s; }
.wl-slots i.on { background: var(--ww-cyan); box-shadow: 0 0 10px rgba(56, 225, 255, .8); }
.wl-slots.bad { animation: wwShake .35s; }
.wl-slots.bad i:not(.on) { background: rgba(255, 93, 115, .5); }

/* ---------- الحروف (كرات المختبر) ---------- */
.wl-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.45rem, 1.6vw, .8rem); max-width: 640px; }
.wl-tile {
    --s: clamp(54px, 13vw, 72px);
    width: var(--s); height: var(--s); border-radius: 50%; border: 0; cursor: pointer;
    font: 800 clamp(1.5rem, 6vw, 2.1rem)/1 var(--ww-font-ar); color: #fff;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), rgba(56, 225, 255, .55) 22%, rgba(157, 123, 255, .75) 60%, rgba(40, 24, 110, .95));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 -6px 12px rgba(0, 0, 0, .35), 0 0 18px rgba(157, 123, 255, .4);
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    animation: wlIn .4s backwards cubic-bezier(.3, 1.5, .5, 1), wlFloat 3s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * 45ms), calc(var(--i) * -400ms);
    transition: transform .12s, opacity .2s, filter .2s;
    touch-action: manipulation;
}
.wl-tiles[lang="en"] .wl-tile { font-family: var(--ww-font-en); text-transform: lowercase; }
.wl-tile:hover { transform: translateY(-3px) scale(1.06); }
.wl-tile:active { transform: scale(.94); }
.wl-tile:focus-visible { outline: 3px solid var(--ww-gold); outline-offset: 3px; }
.wl-tile.used { opacity: .15; filter: grayscale(1); transform: scale(.7); cursor: default; animation: none; }
.wl-tile.bad { animation: wwShake .35s; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5), rgba(255, 93, 115, .8) 40%, rgba(110, 20, 40, .95)); }
.wl-tile.hinted { background: radial-gradient(circle at 32% 28%, #fff, rgba(255, 210, 63, .9) 35%, rgba(140, 90, 0, .95)); }
.wl-tile.spin { animation: wlSpin .4s; }
@keyframes wlIn { from { scale: 0; opacity: 0; } }
@keyframes wlFloat { to { translate: 0 -5px; } }
@keyframes wlSpin { 50% { scale: .6; rotate: 180deg; } }
@keyframes wwShake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

.wl-tools { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.wl-tools small { opacity: .7; font-family: var(--ww-font-en); }

.wl-toast { position: absolute; top: 18%; left: 50%; translate: -50% 0; font: 900 1.6rem var(--ww-font-en); color: var(--ww-gold); text-shadow: 0 0 18px rgba(255, 210, 63, .8); opacity: 0; pointer-events: none; }
.wl-toast.show { animation: wlToast 1s; }
@keyframes wlToast { 15% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% -40px; } }

@media (max-width: 575.98px) {
    .wl-hud { gap: .2rem .7rem; padding: .4rem .6rem; }
    .wl-power { order: 9; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .wl-tile { animation: none; }
}

/* ---------- ألعاب المختبر الأخرى (الجمل، الجذور، المعادلات) ---------- */
.wl-prompt { font: 900 clamp(2.2rem, 9vw, 3.8rem)/1.2 var(--ww-font-head); color: #fff; text-shadow: 0 0 26px rgba(157, 123, 255, .6); }
.wl-buffer { min-height: 1.6em; padding: .15rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .3); font: 700 1.2rem var(--ww-font-ar); color: var(--ww-gold); }
.wl-buffer.bad { animation: wwShake .35s; border-color: var(--ww-pink); color: var(--ww-pink); }
.wl-tile.match { outline: 2px solid var(--ww-gold); outline-offset: 2px; }
/* قطع الكلمات والأعداد: كبسولات بدل الكرات */
.wl-tiles-words .wl-tile, .wl-tiles-eq .wl-tile {
    width: auto; height: auto; min-width: 3.2rem; border-radius: 16px; padding: .55rem 1rem;
    font-size: clamp(1.05rem, 4vw, 1.4rem); line-height: 1.3;
    background: linear-gradient(160deg, rgba(56, 225, 255, .55), rgba(157, 123, 255, .8) 60%, rgba(40, 24, 110, .95));
}
.wl-tiles-eq .wl-tile { font-family: var(--ww-font-en); font-size: clamp(1.4rem, 5vw, 1.9rem); min-width: 3.6rem; }
.wl-tiles-words .wl-tile.used, .wl-tiles-eq .wl-tile.used { transform: scale(.85); }
.wl-mode-buffer .wl-word { font-size: clamp(1.25rem, 4.6vw, 2rem); letter-spacing: 0; text-align: center; max-width: 92%; line-height: 1.6; }
.wl-mode-buffer .wl-rest { letter-spacing: 0; }
.wl-tiles-eq ~ .wl-tools, .wl-tiles-eq { direction: ltr; }