/* =========================================================
   حرب الكلمات - Word War : تنسيقات اللعبة
   ========================================================= */
:root {
    --ww-bg: #060a1a;
    --ww-bg2: #0e1638;
    --ww-panel: rgba(14, 22, 56, .82);
    --ww-border: rgba(120, 160, 255, .25);
    --ww-text: #e8f0ff;
    --ww-muted: #8ea2cf;
    --ww-cyan: #38e1ff;
    --ww-violet: #9d7bff;
    --ww-pink: #ff5d73;
    --ww-gold: #ffd23f;
    --ww-green: #3ddc97;
    /* خطوط النظام للنصوص والأرقام؛ خط العناوين الرئيسي معرّف في cosmos.css. */
    --ww-font-ar: ui-sans-serif, system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
    --ww-font-en: ui-sans-serif, system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
    --ww-font-head: ui-sans-serif, system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
    --bs-body-font-family: var(--ww-font-ar);
}

html { background: var(--ww-bg); }
body.ww-body {
    background: radial-gradient(1200px 600px at 50% -10%, #1b2a6b 0%, var(--ww-bg2) 35%, var(--ww-bg) 100%) fixed;
    color: var(--ww-text);
    font-family: var(--ww-font-ar);
    min-height: 100dvh;
}

/* ---------- الجذر ---------- */
.ww-root {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 70px);
    min-height: 420px;
    border: 1px solid var(--ww-border);
    border-radius: 16px;
    overflow: hidden;
    background: #050816;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 0 80px rgba(56, 225, 255, .05);
}

/* ---------- شريط المعلومات ---------- */
.ww-hud {
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem 1rem;
    flex-wrap: wrap;
    padding: .5rem .9rem .7rem;
    background: linear-gradient(180deg, rgba(20, 30, 75, .95), rgba(10, 16, 44, .95));
    border-bottom: 1px solid var(--ww-border);
    z-index: 5;
}
.ww-stat { display: flex; flex-direction: column; line-height: 1.1; min-width: 3.2rem; }
.ww-label { font-size: .7rem; color: var(--ww-muted); }
.ww-val { font-family: var(--ww-font-en); font-weight: 700; font-size: 1.05rem; color: var(--ww-text); font-variant-numeric: tabular-nums; }
.ww-val.ww-hot { color: var(--ww-gold); text-shadow: 0 0 10px rgba(255, 210, 63, .7); }
.ww-diff { font-family: var(--ww-font-ar); font-size: .9rem; padding: 0 .5rem; border-radius: 99px; width: fit-content; }
.ww-diff-easy { background: rgba(61, 220, 151, .18); color: var(--ww-green); }
.ww-diff-medium { background: rgba(255, 210, 63, .18); color: var(--ww-gold); }
.ww-diff-hard { background: rgba(255, 93, 115, .18); color: var(--ww-pink); }
.ww-lives i { font-style: normal; color: #3a4466; margin-inline-end: 1px; transition: color .3s, transform .3s; }
.ww-lives i.on { color: var(--ww-pink); text-shadow: 0 0 8px rgba(255, 93, 115, .7); }
.ww-hud-btns { margin-inline-start: auto; display: flex; gap: .4rem; }
.ww-btn-icon {
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--ww-border); background: rgba(255, 255, 255, .06);
    color: var(--ww-text); font-size: 1rem; cursor: pointer; transition: background .2s;
}
.ww-btn-icon:hover { background: rgba(56, 225, 255, .18); }
.ww-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); }
.ww-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--ww-cyan), var(--ww-violet)); transition: width .4s; box-shadow: 0 0 8px var(--ww-cyan); }

/* ---------- ساحة المعركة ---------- */
.ww-field { position: relative; flex: 1; overflow: hidden; cursor: text; touch-action: manipulation; }
.ww-stars, .ww-fx { position: absolute; inset: 0; pointer-events: none; }
.ww-stars { z-index: 0; }
.ww-enemies { position: absolute; inset: 0; z-index: 1; }
.ww-fx { z-index: 2; }
.ww-floaters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ww-danger {
    position: absolute; inset-inline: 0; bottom: 0; height: 90px; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgba(255, 59, 59, .18), transparent);
    opacity: .35;
}
.ww-danger.ww-flash { animation: wwFlash .5s ease-out; }
@keyframes wwFlash { 0% { opacity: 1; background: linear-gradient(0deg, rgba(255, 59, 59, .6), transparent); } 100% { opacity: .35; } }

/* ---------- بطاقات الكلمات ---------- */
.ww-enemy {
    position: absolute; top: 0; left: 0;
    padding: .35rem .8rem .5rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(40, 52, 110, .95), rgba(22, 30, 70, .95));
    border: 1.5px solid rgba(120, 160, 255, .45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .3) inset;
    white-space: nowrap;
    will-change: transform;
    user-select: none;
    transition: border-color .2s, box-shadow .2s;
}
.ww-enemy[lang="ar"] { font-family: var(--ww-font-ar); font-size: 1.35rem; font-weight: 700; }
.ww-enemy[lang="en"] { font-family: var(--ww-font-en); font-size: 1.2rem; font-weight: 700; letter-spacing: .03em; }
.ww-word { display: block; line-height: 1.5; }
.ww-typed { color: var(--ww-cyan); text-shadow: 0 0 10px rgba(56, 225, 255, .8); }
.ww-rest { color: #fff; }
.ww-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ww-bar i { display: block; height: 100%; width: 0; background: var(--ww-cyan); transition: width .08s; }
.ww-enemy[dir="rtl"] .ww-bar { direction: rtl; }
.ww-enemy.ww-target { border-color: var(--ww-cyan); box-shadow: 0 0 0 2px rgba(56, 225, 255, .35), 0 0 22px rgba(56, 225, 255, .45); z-index: 2; }
.ww-enemy.ww-warn { border-color: var(--ww-pink); animation: wwPulse .6s infinite alternate; }
.ww-enemy.ww-target.ww-warn { border-color: var(--ww-gold); }
@keyframes wwPulse { to { box-shadow: 0 0 20px rgba(255, 93, 115, .7); } }
.ww-enemy.ww-err .ww-word { animation: wwErr .25s; }
@keyframes wwErr { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); color: var(--ww-pink); } 75% { transform: translateX(5px); } }
.ww-enemy.ww-boom { animation: wwBoom .45s ease-out forwards; }
@keyframes wwBoom { 0% { filter: brightness(3); } 100% { opacity: 0; filter: brightness(3) blur(6px); scale: 1.6; } }
.ww-enemy.ww-crash { animation: wwCrash .4s ease-out forwards; }
@keyframes wwCrash { 100% { opacity: 0; scale: .6; filter: hue-rotate(-60deg) brightness(2); } }

/* ---------- المركبة ---------- */
.ww-ship {
    position: absolute; left: 0; bottom: 6px; width: 64px; height: 72px; z-index: 4;
    transform-origin: 50% 70%;
    filter: drop-shadow(0 0 10px rgba(56, 225, 255, .5));
    pointer-events: none;
}
.ww-ship svg { width: 100%; height: 100%; display: block; }
.ww-flame {
    position: absolute; left: 50%; bottom: -12px; width: 14px; height: 22px; margin-left: -7px;
    background: radial-gradient(ellipse at 50% 20%, #fff 0%, #ffd23f 30%, #ff5d00 60%, transparent 70%);
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    animation: wwFlame .08s infinite alternate;
}
@keyframes wwFlame { from { transform: scaleY(.8); opacity: .8; } to { transform: scaleY(1.2); opacity: 1; } }

/* ---------- عناصر عائمة ---------- */
.ww-floater {
    position: absolute; transform: translate(-50%, -50%);
    font-family: var(--ww-font-en); color: var(--ww-gold); font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(255, 210, 63, .8);
    animation: wwFloat .9s ease-out forwards; text-align: center;
}
.ww-floater small { display: block; color: var(--ww-cyan); font-size: .8rem; }
@keyframes wwFloat { to { transform: translate(-50%, -140%); opacity: 0; } }

.ww-banner {
    position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
    z-index: 6; text-align: center; pointer-events: none;
    font-family: var(--ww-font-ar); font-weight: 800; font-size: clamp(1.6rem, 5vw, 3rem);
    color: #fff; text-shadow: 0 0 20px var(--ww-violet), 0 0 40px var(--ww-cyan);
    animation: wwBanner 1.9s ease-out forwards; white-space: nowrap;
}
.ww-banner small { display: block; font-size: .45em; color: var(--ww-cyan); font-weight: 600; }
@keyframes wwBanner {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    25% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -70%); }
}

.ww-toast {
    position: absolute; top: 12px; left: 50%; transform: translate(-50%, -20px);
    z-index: 7; padding: .45rem 1rem; border-radius: 99px;
    background: rgba(255, 93, 115, .92); color: #fff; font-weight: 700; font-size: .9rem;
    opacity: 0; transition: .3s; pointer-events: none; white-space: nowrap;
}
.ww-toast.ww-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- الطبقة العلوية (بداية/إيقاف/نهاية) ---------- */
.ww-overlay {
    position: absolute; inset: 0; z-index: 8;
    display: none; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(4, 7, 20, .65); backdrop-filter: blur(4px);
    cursor: default; overflow-y: auto;
}
.ww-overlay.ww-show { display: flex; animation: wwFade .25s; }
@keyframes wwFade { from { opacity: 0; } }
.ww-card-panel {
    width: min(520px, 100%);
    background: var(--ww-panel); border: 1px solid var(--ww-border); border-radius: 18px;
    padding: 1.4rem 1.4rem 1.2rem; text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(157, 123, 255, .15);
    font-family: var(--ww-font-ar);
}
.ww-card-panel h2 { font-weight: 800; margin-bottom: .4rem; }
.ww-title { font-size: clamp(1.8rem, 6vw, 2.6rem); background: linear-gradient(90deg, var(--ww-cyan), var(--ww-violet), var(--ww-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ww-sub { color: var(--ww-muted); }
.ww-howto { list-style: none; padding: 0; margin: 1rem 0; text-align: start; display: grid; gap: .45rem; }
.ww-howto li { padding: .45rem .7rem; background: rgba(255, 255, 255, .04); border-radius: 10px; font-size: .95rem; }
.ww-howto li.ww-kb { background: rgba(255, 210, 63, .1); color: var(--ww-gold); }
.ww-panel-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.ww-btn {
    border: 1px solid var(--ww-border); background: rgba(255, 255, 255, .07); color: var(--ww-text);
    padding: .55rem 1.2rem; border-radius: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
    transition: transform .15s, background .2s, box-shadow .2s;
}
.ww-btn:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.ww-btn-primary { background: linear-gradient(90deg, #1fb7e0, #7a5cff); border-color: transparent; box-shadow: 0 6px 20px rgba(122, 92, 255, .4); }
.ww-btn-primary:hover { background: linear-gradient(90deg, #38e1ff, #9d7bff); }
.ww-btn-lg { font-size: 1.15rem; padding: .7rem 2rem; }
.ww-final-score { font-family: var(--ww-font-en); font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 900; color: var(--ww-gold); text-shadow: 0 0 24px rgba(255, 210, 63, .5); }
.ww-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .8rem 0; }
.ww-stats-grid div { background: rgba(255, 255, 255, .05); border-radius: 10px; padding: .4rem; }
.ww-stats-grid span { display: block; font-size: .75rem; color: var(--ww-muted); }
.ww-stats-grid b { font-family: var(--ww-font-en); font-size: 1.1rem; }
.ww-gameover-extra:empty { display: none; }
.ww-gameover-extra { margin-top: .6rem; }

/* حقل الإدخال المخفي (يستقبل الكتابة على الحاسوب والجوال) */
.ww-input {
    position: absolute; bottom: 0; left: 50%; width: 1px; height: 1px;
    opacity: 0; border: 0; padding: 0; font-size: 16px; /* 16px يمنع التكبير التلقائي في iOS */
    pointer-events: none;
}

/* اهتزاز الشاشة عند خسارة حياة */
.ww-shake { animation: wwShake .35s; }
@keyframes wwShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); }
    60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); }
}

/* ---------- الاستجابة للشاشات الصغيرة ---------- */
@media (max-width: 575.98px) {
    .ww-root { border-radius: 0; border-inline: 0; height: calc(100dvh - 58px); }
    .ww-hide-xs { display: none; }
    .ww-hud { gap: .2rem .8rem; padding: .4rem .6rem .6rem; }
    .ww-enemy[lang="ar"] { font-size: 1.1rem; }
    .ww-enemy[lang="en"] { font-size: 1rem; }
    .ww-ship { width: 50px; height: 56px; }
    .ww-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ww-shake, .ww-enemy.ww-warn, .ww-flame { animation: none !important; }
}

/* ======================= صفحات الموقع (القائمة) ======================= */
.ww-nav { background: rgba(8, 12, 32, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ww-border); }
.ww-nav .navbar-brand { font-weight: 800; background: linear-gradient(90deg, var(--ww-cyan), var(--ww-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ww-hero h1 { font-weight: 900; font-size: clamp(2.2rem, 7vw, 4rem); background: linear-gradient(90deg, var(--ww-cyan), var(--ww-violet), var(--ww-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ww-panel { background: var(--ww-panel); border: 1px solid var(--ww-border); border-radius: 16px; padding: 1.2rem; }
.ww-panel h5 { font-weight: 800; }
.ww-choice .btn-check + .btn { border-color: var(--ww-border); color: var(--ww-text); background: rgba(255, 255, 255, .04); }
.ww-choice .btn-check:checked + .btn { background: linear-gradient(90deg, #1fb7e0, #7a5cff); border-color: transparent; color: #fff; }
.ww-stage { border: 1px solid var(--ww-border); border-radius: 14px; padding: .9rem; background: rgba(255, 255, 255, .03); height: 100%; }
.ww-stage h6 { font-weight: 800; color: var(--ww-cyan); }
.ww-stage p { color: var(--ww-muted); font-size: .85rem; }
.ww-level-btn {
    width: 46px; height: 46px; border-radius: 12px; font-family: var(--ww-font-en); font-weight: 700;
    border: 1px solid var(--ww-border); background: rgba(56, 225, 255, .08); color: var(--ww-text);
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    transition: .15s;
}
.ww-level-btn:hover { background: rgba(56, 225, 255, .25); color: #fff; transform: translateY(-2px); }
.ww-level-btn.locked { opacity: .35; pointer-events: none; }
.ww-level-btn { position: relative; }
.ww-level-btn.locked::after { content: '🔒'; font-size: .7rem; position: absolute; top: -6px; inset-inline-end: -4px; }
.ww-level-btn.done { border-color: var(--ww-green); }
.ww-table { --bs-table-bg: transparent; --bs-table-color: var(--ww-text); --bs-table-border-color: var(--ww-border); }
.ww-table thead th { color: var(--ww-muted); font-weight: 600; font-size: .8rem; }
.ww-rank { font-family: var(--ww-font-en); font-weight: 900; }
.ww-rank-1 { color: var(--ww-gold); } .ww-rank-2 { color: #cfd8e6; } .ww-rank-3 { color: #e09a5a; }
.ww-input-dark { background: rgba(255, 255, 255, .06) !important; border-color: var(--ww-border) !important; color: var(--ww-text) !important; }
.ww-input-dark::placeholder { color: var(--ww-muted); }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ======================= لوحة المفاتيح الظاهرة ======================= */
.ww-kbd-wrap {
    padding: .5rem .6rem .6rem;
    background: linear-gradient(180deg, rgba(10, 16, 44, .95), rgba(14, 22, 56, .95));
    border-top: 1px solid var(--ww-border);
    z-index: 5;
}
.ww-kbd-wrap[hidden] { display: none !important; }
.ww-kbd { display: flex; flex-direction: column; gap: 4px; max-width: 720px; margin: 0 auto; user-select: none; }
.ww-kbd-row { display: flex; gap: 4px; }
.ww-key {
    --fc: #6b7aa8;
    position: relative; flex: 1 1 0; min-width: 0; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1px solid rgba(255, 255, 255, .08);
    background: color-mix(in srgb, var(--fc) 16%, #111a3d);
    border-bottom: 3px solid color-mix(in srgb, var(--fc) 70%, transparent);
    color: var(--ww-text); font-weight: 700; font-size: .95rem;
    transition: background .12s, transform .08s, box-shadow .12s;
}
.ww-key-main { font-family: var(--ww-font-ar); line-height: 1; }
.ww-key-sub { position: absolute; top: 2px; inset-inline-start: 4px; font-size: .55rem; color: var(--ww-muted); font-family: var(--ww-font-en); }
.ww-side { background: rgba(255, 255, 255, .03); border-bottom-color: rgba(255, 255, 255, .06); }
.ww-space { flex: 0 0 42%; margin: 0 auto; }
.ww-home::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 10px; height: 2px; margin-left: -5px; border-radius: 2px; background: var(--ww-text); opacity: .7; }
/* ألوان الأصابع */
.ww-f-lp { --fc: #ff5d73; } .ww-f-lr { --fc: #ff9f43; } .ww-f-lm { --fc: #ffd23f; } .ww-f-li { --fc: #3ddc97; }
.ww-f-ri { --fc: #38e1ff; } .ww-f-rm { --fc: #5b8cff; } .ww-f-rr { --fc: #9d7bff; } .ww-f-rp { --fc: #ff6fd8; }
.ww-f-th { --fc: #8ea2cf; }
.ww-key.ww-next {
    background: var(--fc); color: #0a0f26;
    box-shadow: 0 0 0 2px #fff, 0 0 16px var(--fc);
    transform: translateY(-1px);
}
.ww-key.ww-next .ww-key-sub { color: #0a0f26; }
.ww-key.ww-hit { animation: wwKeyHit .25s; }
.ww-key.ww-bad { animation: wwKeyBad .3s; }
@keyframes wwKeyHit { 50% { transform: translateY(2px); box-shadow: 0 0 12px var(--ww-green); } }
@keyframes wwKeyBad { 50% { background: var(--ww-pink); transform: translateY(2px); } }

/* الخريطة الحرارية في نهاية اللعبة */
.ww-heat-wrap { margin-top: .8rem; padding: .7rem; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.ww-heat-title { font-size: .85rem; color: var(--ww-muted); margin-bottom: .45rem; }
.ww-kbd-mini { gap: 3px; }
.ww-kbd-mini .ww-kbd-row { gap: 3px; }
.ww-kbd-mini .ww-kbd-row:nth-child(2) { padding-inline-start: 4%; }
.ww-kbd-mini .ww-kbd-row:nth-child(3) { padding-inline-start: 8%; padding-inline-end: 4%; }
.ww-kbd-mini .ww-key { height: 24px; font-size: .78rem; border-bottom-width: 1px; --fc: #1a2450; background: #141d44; }
.ww-kbd-mini .ww-key.ww-heat { background: var(--heat); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); border-color: transparent; }
.ww-kbd-mini .ww-key.ww-heat-none { opacity: .4; }
.ww-weak { margin-top: .5rem; font-size: .9rem; }
.ww-weak b { display: inline-block; min-width: 1.6em; padding: 0 .3em; margin: 0 .1em; border-radius: 6px; background: rgba(255, 93, 115, .2); color: var(--ww-pink); font-size: 1.05rem; }

/* ======================= القدرات المساعدة ======================= */
.ww-enemy.ww-power { display: flex; align-items: center; gap: .4rem; border-color: var(--ww-gold); background: linear-gradient(180deg, rgba(90, 70, 10, .95), rgba(50, 38, 8, .95)); box-shadow: 0 0 18px rgba(255, 210, 63, .45); animation: wwPowerGlow 1s infinite alternate; }
.ww-enemy.ww-power .ww-word, .ww-enemy.ww-power .ww-bar { flex: 1; }
.ww-enemy.ww-power { flex-wrap: wrap; }
.ww-enemy.ww-power .ww-bar { flex-basis: 100%; }
.ww-power-icon { font-size: 1.2rem; color: var(--ww-gold); }
.ww-power-freeze .ww-power-icon { color: #9feaff; }
.ww-power-shield .ww-power-icon { color: var(--ww-green); }
@keyframes wwPowerGlow { to { box-shadow: 0 0 30px rgba(255, 210, 63, .8); } }
.ww-field.ww-frozen .ww-enemy { filter: hue-rotate(160deg) saturate(.6) brightness(1.15); }
.ww-field.ww-frozen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at center, transparent 50%, rgba(140, 220, 255, .22)); box-shadow: inset 0 0 60px rgba(160, 230, 255, .45); }
.ww-shield { position: absolute; inset: -14px -12px -6px; border-radius: 50%; border: 2px solid rgba(61, 220, 151, .8); box-shadow: 0 0 18px rgba(61, 220, 151, .6), inset 0 0 18px rgba(61, 220, 151, .35); opacity: 0; transform: scale(.7); transition: .3s; }
.ww-ship.ww-shielded .ww-shield { opacity: 1; transform: scale(1); }
.ww-lives .ww-shield-ic { color: var(--ww-green); font-style: normal; margin-inline-start: 4px; }
.ww-toast.ww-toast-good { background: rgba(255, 210, 63, .95); color: #2a1e00; }
.ww-enemy.ww-launched { animation: wwLaunch .35s ease-out; }
@keyframes wwLaunch { from { scale: .3; opacity: 0; } }

/* ======================= الزعيم ======================= */
.ww-enemy.ww-boss {
    width: min(300px, 80%); padding: .3rem .5rem .5rem; text-align: center;
    background: none; border: 0; box-shadow: none;
}
.ww-boss-hp { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 0 10% .3rem; border: 1px solid rgba(255, 255, 255, .2); }
.ww-boss-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ww-pink), var(--ww-gold)); transition: width .3s; }
.ww-enemy.ww-boss[dir="rtl"] .ww-boss-hp { direction: rtl; }
.ww-boss-card {
    display: inline-block; margin-top: -.4rem; padding: .3rem .9rem .45rem; border-radius: 10px;
    background: linear-gradient(180deg, rgba(60, 30, 100, .97), rgba(30, 14, 56, .97));
    border: 1.5px solid var(--ww-violet); box-shadow: 0 0 20px rgba(157, 123, 255, .5);
}
.ww-enemy.ww-boss[lang="ar"] .ww-boss-card { font-size: 1.5rem; }
.ww-enemy.ww-boss.ww-target .ww-boss-card { border-color: var(--ww-cyan); box-shadow: 0 0 24px rgba(56, 225, 255, .6); }
.ww-enemy.ww-boss.ww-target { box-shadow: none; }
.ww-enemy.ww-boss.ww-warn { animation: none; }
.ww-enemy.ww-boss.ww-warn .ww-boss-card { border-color: var(--ww-pink); }
.ww-enemy.ww-boss.ww-boss-hurt .ww-boss-ship { animation: wwHurt .3s; }
@keyframes wwHurt { 30% { filter: brightness(3); transform: translateY(-6px); } }
.ww-progress-bar.ww-boss-prog { background: linear-gradient(90deg, var(--ww-pink), var(--ww-gold)); box-shadow: 0 0 8px var(--ww-pink); }

@media (max-width: 575.98px) {
    .ww-kbd-wrap { display: none !important; } /* على الجوال تظهر لوحة مفاتيح الجهاز */
}
@media (max-height: 640px) {
    .ww-key { height: 24px; font-size: .8rem; }
}

/* ======================= وضع القصة ======================= */
.ww-passage { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(4, 7, 20, .45); }
.ww-passage[hidden] { display: none; }
.ww-passage-card {
    width: min(760px, 100%); padding: 1.1rem 1.3rem 1rem; border-radius: 18px;
    background: var(--ww-panel); border: 1px solid var(--ww-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(56, 225, 255, .12);
    font-family: var(--ww-font-ar); animation: wwFade .3s;
}
.ww-passage-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; color: var(--ww-text); font-size: 1.1rem; }
.ww-passage-ch { font-size: .8rem; color: var(--ww-cyan); padding: .1rem .55rem; border-radius: 99px; background: rgba(56, 225, 255, .12); }
.ww-passage-text { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 2; color: rgba(232, 240, 255, .55); white-space: pre-wrap; word-break: break-word; }
.ww-passage-text[lang="en"] { font-family: var(--ww-font-en); font-size: clamp(1rem, 2.2vw, 1.25rem); line-height: 1.9; }
.ww-p-typed { color: var(--ww-cyan); }
.ww-p-cur { color: #fff; background: rgba(56, 225, 255, .22); border-bottom: 3px solid var(--ww-cyan); border-radius: 3px; animation: wwCaret 1s infinite; }
.ww-p-cur.ww-err { animation: wwErr .25s; background: rgba(255, 93, 115, .35); border-bottom-color: var(--ww-pink); }
@keyframes wwCaret { 50% { border-bottom-color: transparent; } }
.ww-passage-foot { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; color: var(--ww-muted); font-size: .8rem; }
.ww-passage-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ww-passage-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ww-cyan), var(--ww-violet)); transition: width .1s; }
.ww-passage[dir="rtl"] .ww-passage-bar { direction: rtl; }
.ww-reward { margin: .2rem 0 .4rem; color: var(--ww-gold); font-weight: 700; }
.ww-story-hint { color: var(--ww-gold); font-size: .9rem; margin: .4rem 0 0; }

/* بطاقات فصول القصة في القائمة */
.ww-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.ww-chapter {
    position: relative; display: flex; flex-direction: column; gap: .2rem; text-align: start;
    padding: .8rem; border-radius: 14px; border: 1px solid var(--ww-border); color: var(--ww-text); text-decoration: none;
    background: linear-gradient(160deg, rgba(56, 225, 255, .1), rgba(157, 123, 255, .08)); cursor: pointer; font: inherit;
    transition: transform .15s, border-color .15s;
}
.ww-chapter:hover { transform: translateY(-2px); border-color: var(--ww-cyan); color: var(--ww-text); }
.ww-chapter small { color: var(--ww-cyan); font-size: .75rem; }
.ww-chapter b { font-size: 1rem; }
.ww-chapter span { color: var(--ww-muted); font-size: .78rem; }
.ww-chapter.locked { opacity: .4; pointer-events: none; }
.ww-chapter.locked::after { content: '🔒'; position: absolute; top: .5rem; inset-inline-end: .6rem; }
.ww-chapter.done { border-color: var(--ww-green); }
.ww-chapter.done::after { content: '🗺️'; position: absolute; top: .5rem; inset-inline-end: .6rem; }
@media (max-width: 760px) { .ww-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================= مركبة الشبح ======================= */
.ww-ghost-ship { position: absolute; left: 0; bottom: 10px; width: 64px; height: 72px; z-index: 3; opacity: .32; filter: grayscale(1) brightness(1.6) drop-shadow(0 0 8px rgba(200, 210, 255, .6)); pointer-events: none; animation: wwGhostFloat 2.4s ease-in-out infinite; }
.ww-ghost-ship svg { width: 100%; height: 100%; display: block; }
.ww-ghost-ship[hidden] { display: none; }
@keyframes wwGhostFloat { 50% { margin-bottom: 6px; } }
.ww-ghost-stat[hidden] { display: none; }
.ww-val.ww-ahead { color: var(--ww-green); }
.ww-val.ww-behind { color: var(--ww-pink); }
.ww-ghost-result { margin: .1rem 0 .3rem; color: var(--ww-muted); font-weight: 700; }
.ww-ghost-result.win { color: var(--ww-green); }
@media (max-width: 575.98px) { .ww-ghost-ship { width: 50px; height: 56px; } }

/* ======================= تقدّم اللاعب ======================= */
.ww-profile { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; }
.ww-num { font-family: var(--ww-font-en); font-variant-numeric: tabular-nums; }
.ww-pf-level { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #1fb7e0, #7a5cff); box-shadow: 0 0 18px rgba(122, 92, 255, .45); line-height: 1; }
.ww-pf-level small { font-size: .6rem; opacity: .85; }
.ww-pf-level b { font-family: var(--ww-font-en); font-size: 1.4rem; }
.ww-pf-xp { flex: 1 1 200px; min-width: 0; }
.ww-pf-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--ww-muted); margin-bottom: .3rem; }
.ww-pf-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ww-pf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ww-cyan), var(--ww-violet)); border-radius: 8px; transition: width .5s; }
[dir="rtl"] .ww-pf-bar { direction: rtl; }
.ww-pf-goal { display: flex; align-items: center; gap: .5rem; }
.ww-pf-goal svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.ww-pf-goal circle { fill: none; stroke-width: 3.5; }
.ww-pf-goal .bg { stroke: rgba(255, 255, 255, .1); }
.ww-pf-goal .fg { stroke: var(--ww-gold); stroke-linecap: round; transition: stroke-dasharray .5s; }
.ww-pf-goal.done .fg { stroke: var(--ww-green); }
.ww-pf-goal div { display: flex; flex-direction: column; line-height: 1.15; }
.ww-pf-goal small, .ww-pf-streak small { font-size: .7rem; color: var(--ww-muted); }
.ww-pf-goal span { font-size: .7rem; color: var(--ww-muted); }
.ww-pf-select { background: rgba(255, 255, 255, .06); color: var(--ww-text); border: 1px solid var(--ww-border); border-radius: 8px; padding: .15rem .3rem; font-family: var(--ww-font-en); font-size: .8rem; }
.ww-pf-select option { background: #0e1638; }
.ww-pf-streak { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ww-pf-streak b { font-family: var(--ww-font-en); font-size: 1.1rem; color: var(--ww-gold); }

/* ملخص نهاية الجولة */
.ww-gs { margin-bottom: .7rem; padding: .6rem .8rem; border-radius: 12px; background: rgba(122, 92, 255, .12); border: 1px solid rgba(157, 123, 255, .3); text-align: start; }
.ww-gs-xp { font-family: var(--ww-font-en); font-weight: 800; color: var(--ww-violet); font-size: 1.05rem; }
.ww-gs-up { color: var(--ww-gold); font-family: var(--ww-font-ar); margin-inline-start: .4rem; }
.ww-gs-goal { margin-top: .35rem; font-size: .85rem; color: var(--ww-muted); }
.ww-gs-goal .ww-pf-bar { margin-top: .3rem; }
.ww-gs-goal .ww-pf-bar i { background: var(--ww-gold); }
.ww-gs-done { margin-top: .35rem; color: var(--ww-green); font-weight: 800; }

/* ======================= النص المخصص ======================= */
.ww-custom textarea { width: 100%; min-height: 110px; resize: vertical; background: rgba(255, 255, 255, .05); color: var(--ww-text); border: 1px solid var(--ww-border); border-radius: 12px; padding: .6rem .8rem; font: 1rem/1.7 var(--ww-font-ar); }
.ww-custom textarea:focus { outline: 2px solid var(--ww-cyan); outline-offset: 1px; }
.ww-custom-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.ww-custom-count { color: var(--ww-muted); font-size: .85rem; }
.ww-custom-count b { font-family: var(--ww-font-en); color: var(--ww-text); }

/* الأرقام بإشاراتها (+10، ×5) تُعرض دائماً من اليسار لليمين حتى في الواجهة العربية */
.ww-val:not(.ww-diff):not(.ww-lives), .ww-num, .ww-final-score, .ww-gs-xp, .ww-stats-grid b { direction: ltr; unicode-bidi: isolate; }
.ww-stat .ww-val { width: fit-content; }
.ww-btn.disabled, .ww-btn:disabled { opacity: .45; pointer-events: none; }
.ww-btn-icon.ww-off { opacity: .45; text-decoration: line-through; }

/* ======================= البطاقات الخاصة ======================= */
.ww-enemy.ww-special { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ww-enemy.ww-special .ww-word { flex: 1; }
.ww-enemy.ww-special .ww-bar { flex-basis: 100%; }
.ww-enemy.ww-gold { background: linear-gradient(180deg, #8a6a12, #4d3a06); border-color: #ffd23f; box-shadow: 0 0 16px rgba(255, 210, 63, .5); }
.ww-enemy.ww-gold .ww-rest { color: #fff4c2; }
.ww-enemy.ww-armor { background: linear-gradient(180deg, #4a5677, #252d45); border: 3px solid #b8c6e8; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), 0 0 12px rgba(184, 198, 232, .35); }
.ww-enemy.ww-armor-broken { border-style: dashed; border-color: #8ea2cf; }
.ww-enemy.ww-armor-broken .ww-power-icon { opacity: .35; }
.ww-enemy.ww-split { border-style: dashed; border-color: #ff6fd8; }
.ww-enemy.ww-child { padding: .2rem .6rem .35rem; border-color: #ff6fd8; }
.ww-enemy.ww-child[lang="ar"] { font-size: 1.1rem; }
.ww-time-stat[hidden] { display: none !important; }

/* ======================= الشارات ورسم التقدّم ======================= */
.ww-badges-head { display: flex; justify-content: flex-end; margin: -2.1rem 0 .6rem; color: var(--ww-muted); }
.ww-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.ww-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem; padding: .6rem .4rem; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); opacity: .5; }
.ww-badge.on { opacity: 1; background: linear-gradient(160deg, rgba(255, 210, 63, .14), rgba(157, 123, 255, .1)); border-color: rgba(255, 210, 63, .4); }
.ww-badge-ic { font-size: 1.6rem; line-height: 1.2; }
.ww-badge b { font-size: .85rem; }
.ww-badge small { font-size: .7rem; color: var(--ww-muted); }
.ww-gs-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .6rem; }
.ww-gs-badges > span:first-child { font-weight: 700; color: var(--ww-gold); }
.ww-badge-chip { padding: .2rem .6rem; border-radius: 99px; background: rgba(255, 210, 63, .16); border: 1px solid rgba(255, 210, 63, .45); font-weight: 700; font-size: .85rem; animation: wwPop .5s ease-out; }
@keyframes wwPop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } }
.ww-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ww-chart { margin: 0; padding: .6rem .7rem .3rem; border-radius: 12px; background: rgba(255, 255, 255, .03); min-width: 0; }
.ww-chart figcaption { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; color: var(--ww-muted); margin-bottom: .2rem; }
.ww-chart figcaption b { font-size: 1.2rem; margin-inline-start: auto; }
.ww-chart small.up { color: var(--ww-green); } .ww-chart small.down { color: var(--ww-pink); }
.ww-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ww-chart svg text { fill: var(--ww-muted); font: 10px var(--ww-font-en); }
.ww-chart svg .grid { stroke: rgba(255, 255, 255, .08); }
.ww-chart-empty { color: var(--ww-muted); text-align: center; padding: 1.2rem .5rem; font-size: .9rem; }
@media (max-width: 575.98px) { .ww-charts { grid-template-columns: minmax(0, 1fr); } }

/* بطاقات التحديات في القائمة */
.ww-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.ww-mode { display: flex; flex-direction: column; gap: .2rem; text-align: start; padding: .8rem; border-radius: 14px; border: 1px solid var(--ww-border); color: var(--ww-text); background: linear-gradient(160deg, rgba(255, 93, 115, .1), rgba(255, 210, 63, .06)); cursor: pointer; font: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.ww-mode:hover { transform: translateY(-2px); border-color: var(--ww-gold); color: var(--ww-text); }
.ww-mode .ww-mode-ic { font-size: 1.4rem; }
.ww-mode b { font-size: 1rem; }
.ww-mode span { color: var(--ww-muted); font-size: .8rem; }
.ww-mode small { color: var(--ww-gold); font-size: .78rem; }
@media (max-width: 760px) { .ww-modes { grid-template-columns: minmax(0, 1fr); } }
.ww-badges-head { margin: 0 0 .5rem; justify-content: flex-start; }

/* ======================= خط البطاقات وحجمها ======================= */
.ww-root .ww-enemy[lang="ar"] { font-family: var(--ww-font-ar); font-size: calc(1.35rem * var(--ww-card-scale, 1)); }
.ww-root .ww-enemy[lang="en"] { font-family: var(--ww-font-en); font-size: calc(1.2rem * var(--ww-card-scale, 1)); }
.ww-root .ww-enemy.ww-child[lang="ar"] { font-size: calc(1.1rem * var(--ww-card-scale, 1)); }
@media (max-width: 575.98px) {
    .ww-root .ww-enemy[lang="ar"] { font-size: calc(1.1rem * var(--ww-card-scale, 1)); }
    .ww-root .ww-enemy[lang="en"] { font-size: calc(1rem * var(--ww-card-scale, 1)); }
}

/* ======================= الدروس والباقات والبرنامج والمتجر ======================= */
.ww-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.ww-tile { display: flex; flex-direction: column; gap: .15rem; text-align: start; padding: .75rem; border-radius: 14px; border: 1px solid var(--ww-border); background: rgba(255, 255, 255, .03); color: var(--ww-text); cursor: pointer; font: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.ww-tile:hover { transform: translateY(-2px); border-color: var(--ww-cyan); color: var(--ww-text); }
.ww-tile .ww-tile-ic { font-size: 1.3rem; line-height: 1.2; }
.ww-tile b { font-size: .95rem; }
.ww-tile span { color: var(--ww-muted); font-size: .76rem; }
.ww-tile small { color: var(--ww-cyan); font-size: .72rem; }
.ww-program-head, .ww-shop-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; color: var(--ww-muted); }
.ww-program-head .ww-pf-bar { flex: 1; }
.ww-program { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.ww-day { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: .6rem .35rem; border-radius: 12px; border: 1px solid var(--ww-border); background: rgba(255, 255, 255, .03); color: var(--ww-text); font: inherit; cursor: pointer; min-width: 0; }
.ww-day small { color: var(--ww-muted); font-size: .7rem; }
.ww-day .ww-day-ic { font-size: 1.4rem; }
.ww-day b { font-size: .82rem; }
.ww-day span { color: var(--ww-muted); font-size: .68rem; line-height: 1.3; }
.ww-day em { font-style: normal; font-size: .66rem; color: var(--ww-gold); }
.ww-day.today { border-color: var(--ww-gold); background: linear-gradient(160deg, rgba(255, 210, 63, .14), rgba(255, 93, 115, .08)); box-shadow: 0 0 16px rgba(255, 210, 63, .25); }
.ww-day.done { border-color: var(--ww-green); background: rgba(61, 220, 151, .08); }
.ww-day.locked { opacity: .45; cursor: default; }
.ww-day:disabled { cursor: default; }
@media (max-width: 900px) { .ww-program { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ww-program { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ww-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.ww-shop-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem; border-radius: 14px; border: 1px solid var(--ww-border); background: rgba(255, 255, 255, .03); }
.ww-shop-item.on { border-color: var(--ww-cyan); box-shadow: 0 0 16px rgba(56, 225, 255, .25); }
.ww-shop-ship { width: 54px; height: 62px; position: relative; filter: drop-shadow(0 0 8px var(--laser)); }
.ww-shop-ship svg { width: 100%; height: 100%; }
.ww-shop-ship::after { content: ''; position: absolute; left: 50%; top: -10px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 3px; background: var(--laser); box-shadow: 0 0 8px var(--laser); }
.ww-shop-item .ww-btn { padding: .3rem .8rem; font-size: .85rem; }
.ww-shop-on { color: var(--ww-cyan); font-weight: 700; font-size: .85rem; }
.ww-coin { color: var(--ww-gold); }
.ww-look { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-start; }
.ww-look label { display: block; color: var(--ww-muted); font-size: .8rem; margin-bottom: .3rem; }
.ww-look select { background: rgba(255, 255, 255, .06); color: var(--ww-text); border: 1px solid var(--ww-border); border-radius: 10px; padding: .35rem .6rem; font: inherit; }
.ww-look select option { background: #0e1638; }
.ww-font-sample { margin-top: .4rem; padding: .3rem .8rem; border-radius: 10px; border: 1.5px solid rgba(120, 160, 255, .45); background: linear-gradient(180deg, rgba(40, 52, 110, .95), rgba(22, 30, 70, .95)); font-weight: 700; display: inline-block; }

/* ======================= أسطول البكسل آرت ======================= */
.ww-pixel-ship { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; user-select: none; }
.ww-ship .ww-pixel-ship { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .15)); }
.ww-ship { height: 64px; }
.ww-ghost-ship { height: 64px; }
.ww-shop { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ww-shop-item { text-align: center; }
.ww-shop-ship { width: 78px; height: 72px; }
.ww-shop-ship::after { top: -12px; }
.ww-shop-item:not(.owned):not(.on) .ww-shop-ship { filter: drop-shadow(0 0 8px var(--laser)) saturate(.75); }
.ww-shop-skill { display: flex; gap: .3rem; align-items: flex-start; justify-content: center; font-size: .74rem; color: var(--ww-muted); line-height: 1.45; min-height: 3.2em; }
.ww-shop-skill i { font-style: normal; }
.ww-ship-skill-li { display: flex; align-items: center; gap: .6rem; background: rgba(56, 225, 255, .08) !important; }
.ww-mini-ship { width: 40px; height: 36px; flex: none; }
@media (max-width: 575.98px) { .ww-ship, .ww-ghost-ship { height: 52px; } }
.ww-ship, .ww-ghost-ship { width: 80px; height: 74px; }
@media (max-width: 575.98px) { .ww-ship, .ww-ghost-ship { width: 60px; height: 56px; } }

/* ======================= الأشياء الساقطة (الإصدار 8) ======================= */
.ww-enemy.ww-fade { animation: wwFadeOut .45s forwards; }
@keyframes wwFadeOut { to { opacity: 0; transform: translateY(20px); } }
.ww-clue { flex-basis: 100%; display: block; font-size: .62em; font-weight: 600; color: #c8f5e0; line-height: 1.5; unicode-bidi: plaintext; white-space: normal; max-width: 220px; }
.ww-enemy.ww-math .ww-clue { direction: ltr; unicode-bidi: isolate; font-family: var(--ww-font-en); font-size: .8em; color: #fff; }

/* نيزك */
.ww-enemy.ww-meteor { border-radius: 50%; min-width: 46px; min-height: 46px; justify-content: center; text-align: center;
    background: radial-gradient(circle at 35% 30%, #a0714a, #5a3a20 60%, #2e1c0e); border: 2px solid #ff8a3c;
    box-shadow: 0 -14px 22px rgba(255, 120, 40, .65), 0 -26px 30px rgba(255, 200, 60, .3); }
.ww-enemy.ww-meteor .ww-bar { display: none; }
.ww-enemy.ww-meteor .ww-rest { color: #fff; text-shadow: 0 0 6px #ff8a3c; }
/* لغم */
.ww-enemy.ww-mine { background: repeating-linear-gradient(45deg, #5a0f16 0 8px, #3a0a0f 8px 16px); border: 2px solid #ff3b3b;
    box-shadow: 0 0 14px rgba(255, 59, 59, .5); animation: wwMine 1s infinite alternate; }
.ww-enemy.ww-mine .ww-rest { color: #ffb0b0; }
@keyframes wwMine { to { box-shadow: 0 0 24px rgba(255, 59, 59, .85); } }
/* متعرجة */
.ww-enemy.ww-zig { border: 2px dotted #c58cff; }
/* صندوق غامض */
.ww-enemy.ww-mystery { background: linear-gradient(180deg, #6b4a1c, #3d2a0e); border: 2px dashed #ffd23f; }
/* بلورة */
.ww-enemy.ww-crystal { background: linear-gradient(160deg, rgba(43, 212, 255, .35), rgba(157, 123, 255, .35)); border: 2px solid #9feaff;
    box-shadow: 0 0 16px rgba(159, 234, 255, .55); }
/* كبسولة حياة */
.ww-enemy.ww-life { background: linear-gradient(180deg, #7a1a2c, #4a0c18); border: 2px solid #ff5d73; border-radius: 99px; }
/* عملة */
.ww-enemy.ww-coincard { background: linear-gradient(180deg, #8a6a12, #4d3a06); border: 2px solid #ffd23f; border-radius: 99px; }
/* مبعثرة */
.ww-enemy.ww-scr { border: 2px solid #ff9f43; }
.ww-enemy.ww-scr .ww-rest { color: #ffd9a0; letter-spacing: .05em; }
/* تعليمية */
.ww-enemy.ww-edu { background: linear-gradient(180deg, #11493a, #0a2c23); border: 2px solid #3ddc97; max-width: 260px; }
.ww-enemy.ww-edu .ww-rest { color: #7ff0c0; letter-spacing: .15em; }
.ww-enemy.ww-translate .ww-clue { font-size: .8em; color: #fff; }

/* سحابة الغبار: صورة سحابة بخلفية شفافة تعبر الساحة وتحجب ما خلفها (z-index فوق البطاقات) */
.ww-cloud { position: absolute; left: -40%; width: clamp(200px, 34%, 360px); aspect-ratio: 301 / 169; z-index: 3; pointer-events: none;
    background: url("../images/dust-cloud.png") center / 100% 100% no-repeat;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(190, 210, 255, .35));
    animation: wwCloud 8.5s linear forwards, wwCloudBob 2.4s ease-in-out infinite alternate; }
@keyframes wwCloud { to { left: 112%; } }
@keyframes wwCloudBob { from { translate: 0 -6px; scale: 1; } to { translate: 0 7px; scale: 1.04; } }
@media (prefers-reduced-motion: reduce) { .ww-cloud { animation: wwCloud 8.5s linear forwards; } }

/* القدرات الجديدة */
.ww-field.ww-lens .ww-enemy:not(.ww-boss) { scale: 1.22; }
.ww-enemy { transition: scale .3s; }
.ww-root.ww-doubling [data-hud="score"] { color: var(--ww-gold); text-shadow: 0 0 12px rgba(255, 210, 63, .9); }
.ww-root.ww-doubling [data-hud="score"]::after { content: ' ×2'; font-size: .7em; }
.ww-drone { position: absolute; left: 0; top: 0; width: 28px; height: 28px; z-index: 4; font-size: 24px; line-height: 28px; text-align: center;
    filter: drop-shadow(0 0 8px rgba(56, 225, 255, .8)); pointer-events: none; }
.ww-power-magnet .ww-power-icon, .ww-power-blackhole .ww-power-icon { color: #c58cff; }

/* المتجر: طريقة الإطلاق */
.ww-shop-fire { font-size: .7rem; color: var(--ww-cyan); line-height: 1.4; }

/* ======================= حرب الأرقام (الإصدار 9) ======================= */
.ww-enemy.ww-eq, .ww-boss-card.ww-eq { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; font-family: var(--ww-font-ar); font-size: 1.4rem; font-weight: 800; }
.ww-enemy.ww-eq .ww-clue, .ww-boss-card.ww-eq .ww-clue { flex-basis: auto; display: inline; font-size: 1em; font-weight: 800; color: #fff; white-space: nowrap; max-width: none; unicode-bidi: isolate; line-height: 1.5; }
.ww-enemy.ww-eq .ww-word, .ww-boss-card.ww-eq .ww-word { display: inline; }
.ww-enemy.ww-eq .ww-rest, .ww-boss-card.ww-eq .ww-rest { color: var(--ww-gold); letter-spacing: .08em; }
.ww-enemy.ww-eq .ww-bar, .ww-boss-card.ww-eq .ww-bar { flex-basis: 100%; }
.ww-enemy.ww-eq .ww-power-icon { font-size: .9em; }
.ww-enemy.ww-eq:not(.ww-special):not(.ww-power) { background: linear-gradient(180deg, rgba(30, 64, 110, .96), rgba(14, 34, 66, .96)); border-color: rgba(56, 225, 255, .45); }
.ww-enemy.ww-meteor.ww-eq { border-radius: 999px; }
.ww-boss-card.ww-eq { display: inline-flex; font-size: 1.6rem; }

/* اختيار القسم: الكلمات أو الأرقام */
.ww-tracks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.ww-track { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; cursor: pointer; text-align: start; color: inherit;
    background: linear-gradient(180deg, rgba(30, 40, 86, .9), rgba(16, 22, 52, .9)); border: 2px solid rgba(120, 160, 255, .25); transition: border-color .2s, box-shadow .2s, transform .15s; }
.ww-track:hover { transform: translateY(-2px); border-color: rgba(56, 225, 255, .5); }
.ww-track.on { border-color: var(--ww-cyan); box-shadow: 0 0 0 2px rgba(56, 225, 255, .25), 0 0 24px rgba(56, 225, 255, .25); }
.ww-track-ic { font-size: 2rem; line-height: 1; }
.ww-track b { display: block; font-size: 1.15rem; }
.ww-track-txt { display: block; min-width: 0; }
.ww-track-desc { display: block; font-size: .8rem; color: #a9b6d8; }
.ww-track-num.on { border-color: var(--ww-gold); box-shadow: 0 0 0 2px rgba(255, 210, 63, .2), 0 0 24px rgba(255, 210, 63, .2); }
body.ww-num-track .ww-words-only { display: none !important; }
body:not(.ww-num-track) .ww-num-only { display: none !important; }
.ww-opbtns { display: flex; flex-wrap: wrap; gap: .35rem; }
.ww-opbtns button { min-width: 2.6rem; padding: .3rem .7rem; border-radius: 8px; border: 1.5px solid rgba(120, 160, 255, .3); background: rgba(20, 28, 64, .8); color: #dfe8ff; font-weight: 800; font-size: 1rem; }
.ww-opbtns button.on { border-color: var(--ww-gold); color: var(--ww-gold); background: rgba(255, 210, 63, .1); }
@media (max-width: 575.98px) { .ww-tracks { gap: .5rem; } .ww-track { padding: .6rem .45rem; gap: .4rem; justify-content: center; } .ww-track-ic { font-size: 1.25rem; } .ww-track-desc { display: none; } .ww-track b { font-size: .9rem; white-space: nowrap; } }

/* حرب الأرقام: قائمة المراجعة في شاشة النهاية */
.ww-missed { margin: .6rem 0; padding: .6rem .8rem; border-radius: 12px; background: rgba(255, 93, 115, .08); border: 1px solid rgba(255, 93, 115, .3); }
.ww-missed-list { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: .35rem; }
.ww-missed-list span { padding: .15rem .55rem; border-radius: 8px; background: rgba(255, 255, 255, .08); font-weight: 800; font-size: 1.05rem; unicode-bidi: isolate; }
.ww-num-table { min-width: 7rem; }

/* وضع الفصل الدراسي */
.ww-nav-class { white-space: nowrap; }
.ww-code-input { font-family: var(--ww-font-en); font-size: 1.3rem; letter-spacing: .25em; text-align: center; }
.ww-class-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.ww-class-ic { font-size: 1.8rem; }
.ww-class-activity { flex-basis: 100%; }
@media (min-width: 768px) { .ww-class-activity { flex-basis: auto; } }
.ww-board-head { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; }
.ww-class-code { font-family: var(--ww-font-en); font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; letter-spacing: .12em; color: var(--ww-gold); line-height: 1.1; text-shadow: 0 0 24px rgba(255, 210, 63, .35); }
.ww-join-url { font-family: var(--ww-font-en); font-size: .8rem; }
.ww-qr { width: 132px; height: 132px; background: #fff; border-radius: 10px; padding: 4px; }
.ww-qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 767.98px) { .ww-board-head { grid-template-columns: 1fr; text-align: center; } .ww-qr { margin: 0 auto; } }
.ww-activity-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.ww-activity-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: #a9b6d8; min-width: 9rem; }
.ww-activity-form label[hidden] { display: none; }
.ww-act-btns { display: flex; gap: .5rem; margin-inline-start: auto; }
.ww-activity-status { font-size: .95rem; }
.ww-live-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ww-green); box-shadow: 0 0 10px var(--ww-green); animation: wwBlink 1s infinite alternate; }
@keyframes wwBlink { to { opacity: .35; } }
.ww-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #4b5576; vertical-align: middle; }
.ww-dot.on { background: var(--ww-green); box-shadow: 0 0 8px var(--ww-green); }
.ww-state { font-size: .8rem; padding: .1rem .45rem; border-radius: 6px; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.ww-state.play { color: var(--ww-cyan); }
.ww-state.done { color: var(--ww-gold); }
.ww-state.off { color: #6c7699; }
.ww-roster li { display: flex; align-items: center; gap: .45rem; padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ww-results li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ww-results small { flex-basis: 100%; }
.ww-pins { padding: .6rem; border-radius: 10px; background: rgba(255, 210, 63, .08); border: 1px dashed rgba(255, 210, 63, .45); }
.ww-btn-sm { padding: .3rem .7rem; font-size: .85rem; }
.ww-btn-xs { padding: .15rem .5rem; font-size: .75rem; }
.ww-btn-danger { border-color: rgba(255, 93, 115, .5); color: #ff8a9b; }

/* ======================= النيازك والمذنّبات (الإصدار 11) =======================
   البطاقة نفسها شفافة: ::after جسم الصخرة، و ::before ذيل اللهب خلفه (من meteors.js) */
.ww-enemy.ww-rocky {
    background: none !important; border-color: transparent !important; box-shadow: none !important;
    border-radius: 999px; padding: .55rem 1.15rem .75rem;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 6px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9);
}
.ww-enemy.ww-rocky::after {
    content: ''; position: absolute; inset: -4% -3%; z-index: -1; pointer-events: none;
    background: var(--rock) center / 100% 100% no-repeat;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .45));
}
.ww-enemy.ww-rocky::before {
    content: ''; position: absolute; z-index: -2; pointer-events: none;
    left: 20%; right: 20%; bottom: 38%; height: clamp(4.2rem, 230%, 7.4rem);
    background: var(--tail) center bottom / 100% 100% no-repeat;
    transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 100%;
    animation: wwTail .35s infinite alternate ease-in-out;
}
@keyframes wwTail { from { scale: 1 .94; opacity: .85; } to { scale: 1 1.06; opacity: 1; } }
.ww-enemy.ww-rocky .ww-bar { background: rgba(0, 0, 0, .35); }
.ww-enemy.ww-rocky.ww-target { filter: drop-shadow(0 0 6px rgba(56, 225, 255, .95)) drop-shadow(0 0 14px rgba(56, 225, 255, .6)); }
.ww-enemy.ww-rocky.ww-warn { animation: wwRockWarn .5s infinite alternate; }
@keyframes wwRockWarn { from { filter: drop-shadow(0 0 2px rgba(255, 93, 115, .4)); } to { filter: drop-shadow(0 0 12px rgba(255, 60, 80, 1)); } }
.ww-enemy.ww-rocky.ww-target.ww-warn { animation: none; filter: drop-shadow(0 0 8px rgba(255, 210, 63, 1)); }
/* اللغم عائق يجب تجنبه: وهج أحمر نابض حول الجسم (مع أيقونة 💣) */
.ww-enemy.ww-rocky.ww-mine { animation: none; }
.ww-enemy.ww-rocky.ww-mine::after { animation: wwMineGlow .7s infinite alternate; }
@keyframes wwMineGlow { from { filter: drop-shadow(0 0 4px rgba(255, 59, 59, .55)); } to { filter: drop-shadow(0 0 13px rgba(255, 59, 59, 1)); } }
.ww-enemy.ww-rocky.ww-meteor { border-radius: 50%; padding: .7rem .9rem; }
.ww-enemy.ww-rocky .ww-rest { color: #fff; }
.ww-enemy.ww-rocky.ww-eq .ww-rest { color: #ffe066; }
.ww-enemy.ww-rocky.ww-boom::before { display: none; }

/* سفينة الزعيم البلّورية */
/* مركبة الزعيم بكسل آرت (مثل مركبات اللاعبين): بكسلات حادة ووهج أحمر ونبض خفيف للمحرك */
.ww-boss-ship .ww-boss-img { width: 100%; height: auto; aspect-ratio: 81 / 64; object-fit: initial; filter: drop-shadow(0 0 12px rgba(255, 70, 60, .55)) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); animation: wwBossHover 1.6s infinite alternate ease-in-out; }
@keyframes wwBossHover { from { translate: 0 -2px; } to { translate: 0 3px; } }
.ww-enemy.ww-boss { width: min(340px, 88%); }
.ww-boss-card { background: linear-gradient(180deg, rgba(20, 50, 110, .97), rgba(10, 24, 60, .97)); border-color: #7fe6ff; box-shadow: 0 0 20px rgba(56, 160, 255, .55); }

/* ======================= خريطة المجرة (الإصدار 12) ======================= */
.ww-galaxy { position: relative; display: block !important; }
.ww-galaxy-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; font-weight: 700; }
.ww-galaxy-head b { color: var(--ww-gold); font-size: 1.15rem; }
.ww-galaxy-head small { color: var(--ww-muted, #8c97b8); }
.ww-galaxy-map { position: relative; border-radius: 16px; overflow: hidden; background:
    radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 72% 34%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 40% 62%, #fff9, transparent), radial-gradient(1px 1px at 88% 80%, #fff7, transparent),
    radial-gradient(1px 1px at 25% 88%, #fff7, transparent), linear-gradient(180deg, #0d1233, #1a0f3a); }
.ww-gsector { position: absolute; left: 0; right: 0; background: radial-gradient(60% 80% at 50% 50%, var(--tint), transparent 70%); border-bottom: 1px dashed rgba(255, 255, 255, .07); }
.ww-gsector-name { position: absolute; top: .45rem; inset-inline-start: .7rem; font-size: .78rem; font-weight: 800; color: #cfd8ff; opacity: .75; letter-spacing: .02em; }
.ww-gpath { position: absolute; inset: 0; pointer-events: none; }
.ww-gpath-all { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 3; stroke-dasharray: 7 8; stroke-linecap: round; }
.ww-gpath-done { fill: none; stroke: #38e1ff; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 5px #38e1ff); }
.ww-gpath-ch { stroke: rgba(255, 210, 63, .35); stroke-width: 3; stroke-dasharray: 3 6; stroke-linecap: round; }
.ww-gpath-ch.open { stroke: rgba(255, 210, 63, .8); }
.ww-gnode { position: absolute; width: var(--sz); height: var(--sz); translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; transition: scale .15s; z-index: 2; }
.ww-gnode:hover:not(.locked) { scale: 1.1; }
.ww-gplanet svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.ww-gnode.locked .ww-gplanet { filter: grayscale(.85) brightness(.55); }
.ww-gnode.locked { cursor: not-allowed; }
.ww-gnode.current::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 3px solid var(--ww-gold); box-shadow: 0 0 16px rgba(255, 210, 63, .6); animation: wwGPulse 1.2s infinite ease-in-out; }
@keyframes wwGPulse { 50% { scale: 1.12; opacity: .6; } }
.ww-gnum { position: absolute; left: 50%; top: 50%; translate: -50% -50%; min-width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%;
    background: rgba(10, 14, 40, .78); border: 2px solid rgba(255, 255, 255, .7); font-family: var(--ww-font-en); font-weight: 800; font-size: .85rem; }
.ww-gnode.boss .ww-gnum { border-color: #ff5d73; }
.ww-gnum i { position: absolute; top: -1.1em; font-style: normal; font-size: .95em; }
.ww-gnode.current .ww-gnum { background: var(--ww-gold); color: #241a00; border-color: #fff; }
.ww-gstars { position: absolute; left: 50%; bottom: -1.05rem; translate: -50% 0; white-space: nowrap; font-size: .95rem; line-height: 1; direction: ltr; }
.ww-gstars i { font-style: normal; color: rgba(255, 255, 255, .22); text-shadow: 0 1px 2px #000; }
.ww-gstars i.on { color: var(--ww-gold); text-shadow: 0 0 6px rgba(255, 210, 63, .8), 0 1px 1px #000; }
.ww-gnode.locked .ww-gstars { display: none; }
.ww-gch { position: absolute; translate: -50% -50%; width: 6.4rem; height: 4.2rem; padding: .3rem .2rem 0; border: 0; color: #fff; cursor: pointer; z-index: 2;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background: linear-gradient(160deg, #6a3dd8, #2a1470); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: scale .15s; }
.ww-gch:hover:not(.locked) { scale: 1.08; }
.ww-gch.done { background: linear-gradient(160deg, #c9871a, #6a3f06); }
.ww-gch.locked { background: linear-gradient(160deg, #3a3f55, #1c2033); cursor: not-allowed; opacity: .75; }
.ww-gch-ic { font-size: 1.15rem; line-height: 1; }
.ww-gch b { font-size: .68rem; line-height: 1.25; }
.ww-gch .ww-gstars { position: static; translate: none; font-size: .72rem; }
.ww-gship { position: absolute; translate: -50% -50%; width: 46px; height: 42px; z-index: 3; pointer-events: none; animation: wwGBob 1.6s infinite ease-in-out; filter: drop-shadow(0 0 8px rgba(56, 225, 255, .6)); }
.ww-gship.flying { transition: left 1.4s cubic-bezier(.45, .05, .35, 1), top 1.4s cubic-bezier(.45, .05, .35, 1); }
.ww-gship img, .ww-gship .ww-gship-img { width: 100%; height: 100%; image-rendering: pixelated; }
@keyframes wwGBob { 50% { transform: translateY(-5px); } }
@media (max-width: 575.98px) { .ww-gnum { font-size: .72rem; } .ww-gch { width: 5.3rem; height: 3.6rem; } .ww-gch b { font-size: .6rem; } .ww-gship { width: 36px; height: 33px; } }

/* نجوم نهاية المستوى داخل الساحة */
.ww-stars-pop { position: absolute; left: 50%; top: 58%; translate: -50% -50%; z-index: 30; text-align: center; pointer-events: none; animation: wwPopOut 2.6s forwards; }
.ww-stars-row i { font-style: normal; font-size: 3.2rem; color: rgba(255, 255, 255, .18); display: inline-block; margin: 0 .1em; text-shadow: 0 2px 4px #000; animation: wwStarIn .45s backwards cubic-bezier(.3, 1.6, .5, 1); }
.ww-stars-row i.on { color: var(--ww-gold); text-shadow: 0 0 18px rgba(255, 210, 63, .9), 0 2px 3px #000; }
.ww-stars-row i:nth-child(2) { font-size: 4rem; translate: 0 -.25em; }
.ww-stars-title { font-weight: 800; color: #fff; text-shadow: 0 2px 6px #000; }
@keyframes wwStarIn { from { scale: 0; rotate: -90deg; opacity: 0; } }
@keyframes wwPopOut { 85% { opacity: 1; } to { opacity: 0; translate: -50% -70%; } }
.ww-run-stars { margin: -.2rem 0 .6rem; font-weight: 700; color: #dfe6ff; }
.ww-run-star { color: var(--ww-gold); font-size: 1.3rem; text-shadow: 0 0 8px rgba(255, 210, 63, .8); }

/* ======================= بطاقة الكوكب: نهاية المستوى والجولة (الإصدار 13) ======================= */
.ww-planet-card { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;
    background: radial-gradient(60% 55% at 50% 52%, rgba(40, 20, 90, .55), rgba(5, 8, 25, .25) 70%, transparent); animation: wwPcIn .35s ease-out; }
.ww-planet-card.out { animation: wwPcOut .4s forwards; }
@keyframes wwPcIn { from { opacity: 0; } }
@keyframes wwPcOut { to { opacity: 0; scale: 1.08; } }
.ww-pc-score { font-family: var(--ww-font-en); font-weight: 900; font-size: clamp(2.6rem, 9vw, 4.4rem); line-height: 1; color: #fff; letter-spacing: .04em;
    text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 22px rgba(160, 120, 255, .6); }
.ww-pc-best { margin-top: .35rem; font-weight: 800; color: var(--ww-gold); font-size: 1rem; text-shadow: 0 2px 4px #000; }
.ww-pc-best b { font-family: var(--ww-font-en); }
.ww-pc-best.new { animation: wwNewBest .6s 3 alternate; }
@keyframes wwNewBest { to { scale: 1.12; text-shadow: 0 0 14px rgba(255, 210, 63, 1); } }
.ww-pc-planet { position: relative; width: clamp(140px, 30vmin, 210px); aspect-ratio: 1; margin: 1.1rem 0 .4rem; }
.ww-pc-planet svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; z-index: 1; animation: wwPlanetSpin 14s linear infinite; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
@keyframes wwPlanetSpin { to { rotate: 360deg; } }
.ww-pc-glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 220, 255, .55), rgba(120, 140, 255, .25) 55%, transparent 75%); animation: wwGlow 2.2s infinite alternate ease-in-out; }
@keyframes wwGlow { to { scale: 1.08; opacity: .75; } }
.ww-pc-orbit { position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .22); z-index: 2; animation: wwOrbit 5s linear infinite; }
.ww-pc-orbit i { position: absolute; top: -.7em; left: 50%; translate: -50% 0; font-style: normal; font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(56, 225, 255, .8)); }
@keyframes wwOrbit { to { rotate: 360deg; } }
.ww-planet-card .ww-stars-row i { animation-name: wwStarIn; animation-duration: .45s; animation-fill-mode: backwards; }
.ww-pc-title { margin-top: .2rem; font-weight: 800; font-size: 1.1rem; color: #fff; text-shadow: 0 2px 6px #000; }
.ww-over-planet { display: flex; justify-content: center; margin: -.4rem 0 -.2rem; }
.ww-over-planet .ww-pc-planet { width: clamp(96px, 22vmin, 140px); margin: .3rem 0; }
.ww-over .ww-pc-best { margin: -.2rem 0 .3rem; }
@media (max-height: 640px) { .ww-over-planet .ww-pc-planet { width: 84px; } }
/* المحتوى الطويل في النافذة يبدأ من الأعلى بدل أن يُقص (التوسيط الآمن) */
.ww-overlay.ww-show { align-items: safe center; }
.ww-overlay > .ww-card-panel { margin-block: auto; }

/* ======================= الخطوط (الإصدار 15) ======================= */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ww-nav .navbar-brand { font-family: var(--ww-font-head); font-weight: 700; letter-spacing: 0; }
h1, .h1 { font-weight: 900; }
body, button, input, select, textarea, .btn, .form-control, .form-select, .table { font-family: var(--ww-font-ar); }
.ww-num, .ww-val, .ww-final-score, .ww-pc-score { font-variant-numeric: tabular-nums; }

/* ---------- ألعاب الأسئلة على محرك المعركة (حرب الإملاء والترجمة والأسئلة) ---------- */
.ww-enemy.ww-qa, .ww-boss-card.ww-qa { font-size: 1.15rem; flex-direction: column; align-items: center; row-gap: .1em; max-width: 260px; }
.ww-enemy.ww-qa .ww-clue, .ww-boss-card.ww-qa .ww-clue { display: block; white-space: normal; unicode-bidi: plaintext; font-size: .82em; font-weight: 700; text-align: center; max-width: 240px; }
.ww-enemy.ww-qa .ww-word { direction: inherit; }
.ww-enemy.ww-qa .ww-rest { letter-spacing: .12em; }
.ww-enemy.ww-flash .ww-rest { color: #fff; letter-spacing: normal; text-shadow: 0 0 12px rgba(255, 255, 255, .9); }
.ww-enemy.ww-qa { cursor: pointer; }