/**
 * qol-la-tqol.css — هوية «قول لا تقول» بأسلوب Neobrutalism
 * =========================================================
 * لوحة خضراء: أخضر عميق للأساس، ليموني للإبراز، ومرجاني للخطأ (متمّم الأخضر).
 * حدود سوداء سميكة، ظلال حادة بلا تدرّج، وتركيز دائم على البطاقة.
 * لا موارد خارجية إطلاقاً (لا CDN ولا خطوط شبكة) — التزاماً بمعيار ألعاب عبقر.
 */

/* ═══════════ الخط ═══════════
 * Cairo محليّ داخل مجلد اللعبة (لا شبكة ولا CDN) ليكون الشكل واحداً على كل
 * جهاز مهما اختلف خط نظامه. الأوزان المتاحة 500/700/900 فقط — فلا تطلب 800
 * أو 600 في أي قاعدة، لأن المتصفح سيقفز للأثقل ويختلّ التدرّج.
 */
@font-face {
    font-family: 'Cairo';
    src: url('assets/fonts/cairo-500.woff2') format('woff2');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('assets/fonts/cairo-700.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('assets/fonts/cairo-900.woff2') format('woff2');
    font-weight: 900; font-display: swap;
}

/* ═══════════ الأساس ═══════════ */
:root {
    --ink: #06170D;
    --paper: #DFF3E3;
    --card: #FFFFFF;

    --green: #12924C;
    --green-bright: #2BD16C;
    --green-deep: #0B6B37;
    --lime: #C9F24C;
    --mint: #9FE7BC;
    --cream: #FFF6D5;
    --coral: #FF5A47;
    --amber: #FFB020;
    --muted: #46644F;

    --bd: 4px;
    --radius: 18px;
    --shadow: 6px 6px 0 var(--ink);
    --shadow-sm: 4px 4px 0 var(--ink);
    --shadow-lg: 10px 10px 0 var(--ink);
    --font: 'Cairo', "Segoe UI", system-ui, -apple-system, "Tahoma", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    /* أندرويد يضخّم خطوط بعض الكتل تلقائياً (Font Boosting) فيكبر العنصر
       ويخرج عن الشاشة. هذا السطر يوقف التضخيم ويثبّت القياسات كما صُمّمت. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    color: var(--ink);
    background-color: var(--paper);
    /* شبكة نقاط خفيفة تعطي إحساس الورق المطبوع */
    background-image: radial-gradient(rgba(6, 23, 13, .22) 1.3px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-tap-highlight-color: transparent;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════ الهيكل والشاشات ═══════════ */
.shell {
    height: 100vh;
    height: 100dvh;
    display: block;
}

.screen {
    display: none;
    height: 100%;
    flex-direction: column;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.screen.is-active { display: flex; animation: screen-in .2s ease-out; }
@keyframes screen-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.stack {
    width: min(560px, 100%);
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0;
}
/* مساحة تُبقي المحتوى بعيداً عن زرّي «الرئيسية» و«الصوت» العائمين */
.screen:not(.screen-play) .stack { padding-top: 52px; }
#screen-setup .stack { padding-bottom: 24px; }
.stack-center { text-align: center; }

/* شاشة اللعب لا تُمرَّر إطلاقاً: العناصر تتقاسم الارتفاع */
.screen-play {
    position: relative;
    overflow: hidden;
    gap: 9px;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

/* ═══════════ عناصر مشتركة ═══════════ */
.btn {
    font-family: inherit;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
    font-weight: 900;
    color: var(--ink);
    background: var(--card);
    border: var(--bd) solid var(--ink);
    border-radius: var(--radius);
    padding: 15px 18px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .07s ease, box-shadow .07s ease;
    -webkit-user-select: none;
    user-select: none;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-go {
    background: var(--green-bright);
    font-size: clamp(1.1rem, 5vw, 1.4rem);
    padding: 17px 18px;
}
.btn-yes { background: var(--green-bright); }
.btn-no { background: var(--coral); color: #fff; }
.btn-resume { background: var(--lime); }

.btn-link {
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-deep);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    cursor: pointer;
    padding: 8px;
}

.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 900;
    color: var(--ink);
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 7px 13px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.chip-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.chip-home.is-exit { background: var(--coral); color: #fff; }
.chip-sound { padding: 7px 11px; }
/* الزران معاً أعلى اليمين: الجهة اليسرى محجوزة لشعار المنصة العائم فوق الـ iframe */
.chips {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;   /* فيزيائي عمداً: في RTL يعني inline-end اليسار وهو مكان شعار المنصة */
    z-index: 40;
    display: flex;
    gap: 8px;
}

.note {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
}
.note-small { font-size: .85rem; }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 60;
    background: var(--ink);
    color: var(--lime);
    font-weight: 700;
    font-size: .95rem;
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    max-width: 90vw;
    text-align: center;
}

/* ═══════════ 1) الإعداد ═══════════ */
.brand { text-align: center; margin-bottom: 2px; }
.brand-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: clamp(2.1rem, 10.5vw, 3rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -1px;
}
/* الشارتان من قالب واحد: أخضر للفعل، مرجاني للنهي — متطابقتان شكلاً */
.brand-title span,
.brand-title em {
    font-style: normal;
    display: block;
    padding: 4px 24px;
    border: var(--bd) solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.brand-title span {
    background: var(--green-bright);
    color: var(--ink);
    transform: rotate(1.6deg);
}
.brand-title em {
    background: var(--coral);
    color: #fff;
    transform: rotate(-2deg);
}
.brand-tag {
    margin: 14px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
}

.panel {
    background: var(--card);
    border: var(--bd) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 9px; }
.field-label { font-size: 1rem; font-weight: 900; }

.stepper { display: flex; align-items: stretch; gap: 10px; }
.step-btn {
    flex: 0 0 56px;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    background: var(--mint);
    border: var(--bd) solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.step-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.step-btn:disabled { opacity: .4; cursor: not-allowed; }
.step-value {
    flex: 1;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    background: var(--paper);
    border: var(--bd) solid var(--ink);
    border-radius: 14px;
    padding: 8px;
}

/* حقول الأسماء: flex عمودي لا grid، لأن عنصر الـ grid يحمل min-width: auto
   فلا ينكمش دون عرضه الطبيعي، وحقل النص له عرض افتراضي (نحو 20 حرفاً) فيدفع
   الصف خارج الشاشة يساراً على بعض المتصفحات. ونمط width:0 + flex-grow أدناه
   هو الوحيد الذي لا ينكسر في أي محرك: العرض يأتي من المساحة المتاحة لا من
   المحتوى الافتراضي للحقل. */
.team-inputs { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
/* scroll-margin يترك مساحة فوق الحقل عند تمريره تلقائياً، فلا يختفي
   خلف الأزرار العائمة ولا خلف لوحة مفاتيح الجوال */
.team-input {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: 100%;
    scroll-margin: 72px 0 28px;
}
.team-dot {
    flex: 0 0 34px;
    height: 34px;
    border: 3px solid var(--ink);
    border-radius: 10px;
}
.team-input input {
    flex: 1 1 auto;
    width: 0;              /* مع flex-grow: يملأ المتاح ولا يتمدّد بعرضه الافتراضي */
    min-width: 0;
    max-width: 100%;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--paper);
    border: var(--bd) solid var(--ink);
    border-radius: 14px;
    padding: 11px 13px;
}
.team-input input:focus { outline: 3px solid var(--green); outline-offset: 2px; }

.choice-row { display: flex; gap: 10px; }
.choice {
    flex: 1;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 900;
    background: var(--paper);
    border: var(--bd) solid var(--ink);
    border-radius: 14px;
    padding: 13px 8px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.choice.is-on { background: var(--lime); }
.choice:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* ═══════════ 2) التسليم ═══════════ */
.round-chip {
    align-self: center;
    margin: 0;
    font-size: .95rem;
    font-weight: 900;
    background: var(--green-deep);
    color: var(--lime);
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 7px 16px;
    box-shadow: var(--shadow-sm);
}
/* لون خلفية البطاقة يضبطه JS بلون الفريق، فيصير لكل دور هوية بصرية */
.handoff-card {
    position: relative;
    background: var(--green-deep);
    color: #fff;
    border: var(--bd) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 26px 18px 20px;
    text-align: center;
    transform: rotate(-1.2deg);
}
.handoff-badge {
    position: absolute;
    top: -16px;
    inset-inline-start: -8px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--lime);
    color: var(--ink);
    border: var(--bd) solid var(--ink);
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 900;
    transform: rotate(-7deg);
}
.handoff-kicker { margin: 0; font-size: 1.05rem; font-weight: 900; opacity: .9; }
.handoff-team {
    margin: 6px 0 0;
    font-size: clamp(2rem, 11vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    word-break: break-word;
}
.handoff-meta {
    margin: 12px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    opacity: .92;
}
.handoff-meta b { opacity: .6; }

.handoff-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
}
.handoff-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    font-weight: 700;
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 14px;
    padding: 9px 12px;
}
.hs-num {
    flex: 0 0 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: var(--green-deep);
    color: var(--lime);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 900;
}

.scores-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin: 4px 0 0;
    padding: 0;
}
.scores-strip li {
    display: inline-flex;
    align-items: stretch;
    font-size: .85rem;
    font-weight: 900;
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
}
.scores-strip .nm { padding: 5px 12px; }
/* الرقم في خانة داكنة مستقلة: فاصل بصري صريح بين الاسم والنتيجة */
.scores-strip .sc {
    padding: 5px 10px;
    min-width: 2.4em;
    text-align: center;
    background: var(--ink);
    color: var(--lime);
    font-variant-numeric: tabular-nums;
}
.scores-strip li.is-turn { background: var(--mint); }
.scores-strip li.is-turn .sc { background: var(--green-deep); }
.scores-mini li { font-size: .75rem; border-width: 2px; }
.scores-mini .nm { padding: 4px 10px; }
.scores-mini .sc { padding: 4px 8px; }

/* ═══════════ 3) اللعب ═══════════ */
.play-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding-top: 52px; /* مساحة للأزرار العائمة */
}
.timer {
    font-size: clamp(1.7rem, 8vw, 2.3rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    color: var(--lime);
    background: var(--green-deep);
    border: var(--bd) solid var(--ink);
    border-radius: 14px;
    padding: 4px 14px;
    box-shadow: var(--shadow-sm);
}
.timer.is-hot {
    background: var(--coral);
    color: #fff;
    animation: heartbeat .7s ease-in-out infinite;
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
.play-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.play-team { font-size: 1rem; font-weight: 900; }
.play-score {
    font-size: .9rem;
    font-weight: 900;
    background: var(--green-bright);
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 3px 12px;
}

/* شريط الوقت: توتر بصري بلا أرقام */
.time-bar {
    flex: 0 0 auto;
    height: 14px;
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
}
.time-bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--green-bright);
    border-inline-end: 3px solid var(--ink);
    transition: width .12s linear;
}
.time-bar.is-hot i { background: var(--coral); }

/* ── البطاقة ──
 * قاعدة القياس: للبطاقة "حجم أساس" واحد هو
 *     font-size: min(4.2cqi, 4cqh)
 * أي أصغر من: 4.2% من عرض البطاقة، و4% من ارتفاع مسرح البطاقة. وكل ما بداخلها
 * (خطوط، حشوات، فجوات، سماكة حدود) بوحدة em من هذا الأساس، وبارتفاع سطر مصرّح
 * دائماً. النتيجة: البطاقة تتصرف كوحدة واحدة تتقلّص كاملةً على الشاشات القصيرة،
 * ولا يتغيّر تخطيطها باختلاف خط النظام — وهذا سبب وجود الشق الثاني (4cqh):
 * بدونه يعتمد الارتفاع على مقاييس الخط، فتنضغط الكلمة تحت شارة «لا تقول» على
 * أجهزة خطُّها العربي أطول سطراً (أندرويد) رغم سلامتها على غيرها.
 *
 * وارتفاع البطاقة يأتي من محتواها لا من نسبة ثابتة، فيستحيل أن تُقصّ كلمة
 * ممنوعة أو تتداخل مع غيرها مهما كان الجهاز. والعرض محدود بـ 88cqh فتبقى
 * النسبة قريبة من 0.9 على كل المقاسات.
 */
.card-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    touch-action: none;
    container-type: size;
}
.card-frame {
    position: relative;
    width: min(100%, 440px);            /* احتياطي لمتصفح بلا Container Queries */
    width: min(100%, 440px, 88cqh);
    max-height: 100%;
    container-type: inline-size;
}

/* طبقتان خلف البطاقة تعطيان إحساس رزمة أوراق حقيقية */
.card-stack { position: absolute; inset: 0; pointer-events: none; }
.card-stack span {
    position: absolute;
    inset: 0;
    border: var(--bd) solid var(--ink);
    border-radius: 24px;
    background: var(--mint);
}
.card-stack span:first-child { transform: rotate(-3.5deg) translateY(6px); background: var(--lime); }
.card-stack span:last-child { transform: rotate(2.5deg) translateY(3px); }

.word-card {
    position: relative;
    z-index: 1;
    font-size: 17px;                    /* احتياطي */
    font-size: min(4.2cqi, 4cqh);
    line-height: 1.35;
    background: var(--card);
    border: var(--bd) solid var(--ink);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    padding-bottom: .8em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
}
.word-card.is-dragging { cursor: grabbing; }
.word-card.is-settling { transition: transform .18s ease-out; }
.word-card.is-flying { transition: transform .22s ease-in, opacity .22s ease-in; opacity: 0; }
.word-card.is-entering { animation: pop-in .18s ease-out; }
@keyframes pop-in {
    from { transform: scale(.92) translateY(14px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.card-top {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
    background: var(--green-deep);
    color: var(--lime);
    border-bottom: .22em solid var(--ink);
    padding: .32em .9em;
    font-size: .9em;
    line-height: 1.4;
    font-weight: 900;
}
.card-index {
    background: var(--lime);
    color: var(--ink);
    border: .12em solid var(--ink);
    border-radius: 999px;
    min-width: 2em;
    text-align: center;
    padding: 0 .5em;
    font-variant-numeric: tabular-nums;
}

.word-wrap {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    width: 100%;
    padding: .45em .8em;
    min-height: 0;
}
.word {
    position: relative;
    margin: 0;
    font-size: 2.9em;
    font-weight: 900;
    /* الحروف العربية النازلة (ي، ج، ر) تحتاج سطراً أوسع وإلا اصطدمت بما تحتها */
    line-height: 1.34;
    text-align: center;
    word-break: break-word;
    padding: 0 .1em;
}
/* شطبة ليمونية خلف الكلمة تعطيها ثقل «قلم التحديد» */
.word::before {
    content: "";
    position: absolute;
    inset-inline: -.08em;
    bottom: .16em;
    height: .3em;
    background: var(--lime);
    transform: rotate(-1.2deg);
    z-index: -1;
}

.taboo-label {
    position: relative;
    margin: 0;
    font-size: .95em;
    line-height: 1.4;
    font-weight: 900;
    color: #fff;
    background: var(--coral);
    border: .16em solid var(--ink);
    border-radius: 999px;
    padding: .16em 1.1em;
    flex: 0 0 auto;
}
.taboo-list {
    list-style: none;
    margin: 0;
    padding: 0 .8em;
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .38em;
}
.taboo-list li {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 1.2em;
    line-height: 1.4;
    font-weight: 700;
    background: var(--paper);
    border: .13em solid var(--ink);
    border-radius: .55em;
    padding: .26em .6em;
}
.taboo-list li::before {
    content: "✕";
    flex: 0 0 auto;
    font-size: .78em;
    font-weight: 900;
    color: #fff;
    background: var(--coral);
    border: .14em solid var(--ink);
    border-radius: .35em;
    width: 1.7em;
    text-align: center;
}

/* الختمان يظهران فوق البطاقة أثناء السحب فقط، بعيداً عن الكلمة */
.stamp {
    position: absolute;
    top: 26%;
    z-index: 3;
    font-size: 1.5em;
    line-height: 1.3;
    font-weight: 900;
    color: #fff;
    border: .18em solid var(--ink);
    border-radius: .4em;
    padding: .18em .5em;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
}
.stamp-yes { right: 5%; background: var(--green-bright); color: var(--ink); transform: rotate(-12deg); }
.stamp-no { left: 5%; background: var(--coral); transform: rotate(12deg); }

/* تلميح السحب — يظهر على أول بطاقة في أول جولة فقط */
.swipe-hint {
    position: absolute;
    left: 50%;
    bottom: -12px;
    z-index: 4;
    margin: 0;
    font-size: .78rem;
    font-weight: 900;
    color: var(--lime);
    background: var(--ink);
    border-radius: 999px;
    padding: 6px 14px;
    white-space: nowrap;
    animation: hint-float 1.7s ease-in-out infinite;
}
.swipe-hint[hidden] { display: none; }
@keyframes hint-float {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -5px); }
}

.actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}
.actions .btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 8px;
}
.btn-main { font-size: clamp(1rem, 4.4vw, 1.2rem); font-weight: 900; }
.btn-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(.65rem, 3vw, .8rem);
    font-weight: 700;
    opacity: .85;
}
.btn-hint i { font-style: normal; font-size: 1.2em; line-height: 1; }

.play-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.btn-report {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .8rem;
    text-decoration-thickness: 2px;
    padding: 4px;
    color: var(--muted);
}
/* شريط النقاط في شاشة اللعب يبقى سطراً واحداً مهما كثرت الفرق (يُمرَّر أفقياً)،
   فلا يلتفّ سطرين ويقضم ارتفاع البطاقة — والبطاقة هي بطل الشاشة */
.play-foot .scores-strip {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
}
.play-foot .scores-strip::-webkit-scrollbar { display: none; }
/* تلاشٍ عند الحافة يوضّح أن هناك فرقاً أخرى خلفها — يُفعّل فقط عند الحاجة */
.play-foot .scores-strip.is-scroll {
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent);
    mask-image: linear-gradient(to left, #000 88%, transparent);
}
.play-foot .scores-strip li { flex: 0 0 auto; }

/* العدّ التنازلي قبل انطلاق الجولة */
.countdown {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(6, 23, 13, .95);
}
.countdown[hidden] { display: none; }
.countdown-label { margin: 0; font-size: 1.15rem; font-weight: 900; color: #fff; opacity: .85; }
.countdown-num {
    margin: 0;
    font-size: clamp(5rem, 34vw, 9rem);
    font-weight: 900;
    line-height: 1;
    color: var(--lime);
    font-variant-numeric: tabular-nums;
}
.countdown-num.pop { animation: count-pop .4s ease-out; }
@keyframes count-pop {
    from { transform: scale(.55); opacity: .25; }
    to { transform: scale(1); opacity: 1; }
}
.countdown-team { margin: 0; font-size: 1.15rem; font-weight: 900; color: #fff; }

/* ═══════════ 4) النتيجة ═══════════ */
.result-title {
    margin: 0;
    font-size: clamp(1.5rem, 7vw, 2.1rem);
    font-weight: 900;
    text-align: center;
    line-height: 1.3;
}
.result-count { margin: 0; text-align: center; font-size: 1.1rem; font-weight: 700; }
.result-count strong, .result-points strong { font-size: 1.4rem; }
.result-points {
    margin: 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 900;
    background: var(--lime);
    border: var(--bd) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px;
}

.words-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 9px;
}
.word-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
    cursor: pointer;
    width: 100%;
}
.word-chip:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.word-chip.is-correct { background: var(--mint); }
.word-chip.is-wrong { background: #FFD9D3; }
.word-chip .mark { flex: 0 0 auto; font-size: 1.05rem; }
.word-chip .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.words-empty {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    color: var(--muted);
    padding: 14px;
}

/* ═══════════ 5) النهاية ═══════════ */
.trophy { margin: 0; font-size: clamp(3rem, 16vw, 5rem); line-height: 1; }
.final-title { margin: 0; font-size: clamp(1.6rem, 8vw, 2.2rem); font-weight: 900; }
.final-winner {
    margin: 0;
    font-size: clamp(1.8rem, 10vw, 2.6rem);
    font-weight: 900;
    background: var(--lime);
    border: var(--bd) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    transform: rotate(-1deg);
}
.standings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.standings li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 900;
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 11px 14px;
}
.standings .rank {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--green-deep);
    color: var(--lime);
    border: 3px solid var(--ink);
    border-radius: 10px;
    font-size: .95rem;
}
.standings li:first-child .rank { background: var(--lime); color: var(--ink); }
.standings .pts { font-variant-numeric: tabular-nums; }

/* ═══════════ النوافذ ═══════════ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(6, 23, 13, .6);
    display: grid;
    place-items: center;
    padding: 16px;
}
.modal[hidden] { display: none; }
.modal-box {
    width: min(520px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--card);
    border: var(--bd) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.modal-box h2 { margin: 0; font-size: 1.5rem; font-weight: 900; color: var(--green-deep); }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; font-size: 1rem; padding: 14px 10px; }
.rules-list { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 9px; }
.rules-list li { font-size: 1rem; font-weight: 700; line-height: 1.6; }

/* ═══════════ شاشات صغيرة الارتفاع ═══════════ */
@media (max-height: 660px) {
    .play-bar { padding-top: 46px; }
    .time-bar { height: 10px; }
    .handoff-card { padding: 20px 14px 16px; }
    .handoff-steps li { padding: 7px 10px; font-size: .88rem; }
    .actions .btn { padding: 9px 8px; }
}

/* ═══════════ الشاشات الكبيرة ═══════════ */
@media (min-width: 700px) and (min-height: 700px) {
    .screen-play { max-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
    .word-card, .timer.is-hot, .swipe-hint, .screen.is-active, .countdown-num {
        animation: none !important;
        transition: none !important;
    }
}