/* ==========================================================================
   مافيا — نوار سينمائي
   لون تمييز واحد. الظل يصنع العمق. الحركة تُحجز للحظات التي تستحقها.
   ========================================================================== */

@font-face {
    font-family: 'AAGalaxy';
    src: url('../../fonts/AA-GALAXY.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── الأسطح: أربعة مستويات، الفارق بينها خافت عمداً ── */
    --bg:      #0b0b0c;
    --surf-1:  #141416;
    --surf-2:  #1b1b1e;
    --surf-3:  #232327;

    --line:    #26262b;
    --line-2:  #34343b;

    /* ── النص: ثلاثة مستويات فقط ── */
    --fg:      #f0efec;
    --fg-2:    #9d9da4;
    --fg-3:    #6e6e75;

    /* ── لون تمييز واحد. حين يظهر، فهو يعني: هنا دورك ── */
    --accent:     #d19a3d;
    --accent-ink: #170f02;
    --accent-dim: rgba(209, 154, 61, 0.13);
    --accent-line:rgba(209, 154, 61, 0.34);

    /* ── لونان دلاليان لا ثالث لهما ── */
    --danger:     #c8493f;
    --danger-dim: rgba(200, 73, 63, 0.13);
    --ok:         #5b9a6a;
    --ok-dim:     rgba(91, 154, 106, 0.13);

    /* ── ألوان الأدوار: تُحقن من JS، وهذه احتياطية ── */
    --role: var(--fg-2);
    --role-dim: rgba(255, 255, 255, 0.05);

    /* ── سُلّم مسافات على 4px ── */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    /* ── سُلّم طباعي: ستة أحجام ── */
    --t-xs: 11px; --t-sm: 13px; --t-md: 15px;
    --t-lg: 19px; --t-xl: 26px; --t-2xl: 34px;

    --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px;

    /* ── ميزانية الحركة: سرعتان فقط ── */
    --fast: 140ms;
    --slow: 320ms;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --shadow-1: 0 2px 8px rgba(0, 0, 0, .5);
    --shadow-2: 0 18px 40px -20px rgba(0, 0, 0, .9);
    --shadow-3: 0 30px 60px -24px rgba(0, 0, 0, .95);
}

/* إخفاء شريط التمرير */
::-webkit-scrollbar { display: none; }
html { -ms-overflow-style: none; scrollbar-width: none; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'AAGalaxy', 'Segoe UI', Tahoma, system-ui, sans-serif;
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
    /* letter-spacing لا يُستخدم إطلاقاً — يفكّ اتصال الحروف العربية */
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   مزاج الوقت — الفرق الوحيد بين الليل والنهار كان نقطة بحجم 7px.
   هنا تبرد الأسطح كلها ليلاً وتشتدّ العتمة، فيُحَسّ مرور الوقت لا يُقرأ.
   ========================================================================== */

/* النهار: أسطح مرفوعة ودفء خفيف وعتمة حواف خافتة */
html[data-mood="day"] {
    --bg:     #1c1b21;
    --surf-1: #26242d;
    --surf-2: #2e2c36;
    --surf-3: #393742;
    --line:   #3c3946;
    --line-2: #4d4a58;
    --fg-2:   #b3b1bb;
    --fg-3:   #857f8d;
    --veil:   rgba(255, 190, 120, .05);
    --vignette-strength: .30;
}

/* الليل: أسطح غائرة وبرودة زرقاء وعتمة حواف شديدة */
html[data-mood="night"] {
    --bg:     #06060b;
    --surf-1: #0d0d14;
    --surf-2: #13131b;
    --surf-3: #1b1b25;
    --line:   #21212c;
    --line-2: #2f2f3c;
    --fg-2:   #9d9da4;
    --fg-3:   #6e6e75;
    --veil:   rgba(26, 42, 80, .36);
    --vignette-strength: .88;
}

body {
    transition: background-color 800ms var(--ease);
}

/* الڤينييت: مصدر العمق الأساسي بدل الظلال الملونة */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 70% at 50% -10%,
        transparent 30%,
        rgba(0, 0, 0, var(--vignette-strength, .68)) 100%);
    transition: background 800ms var(--ease);
}

/* غلالة باردة تُلقى على المشهد ليلاً وتنقشع نهاراً */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--veil, transparent);
    transition: background-color 800ms var(--ease);
}

.hidden { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.app {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--s4) var(--s4) var(--s8);
}

/* ==========================================================================
   شريط السياق
   ========================================================================== */

.topbar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0 var(--s4);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s5);
}

.topbar-round {
    font-size: var(--t-xs);
    color: var(--fg-3);
}

.topbar-phase {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-lg);
    font-weight: 600;
    margin-top: 2px;
}

/* المعيّن الصغير: مؤشّر المرحلة، لونه يقول ليل أم نهار */
.topbar-phase .marker {
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--accent);
    transform: rotate(45deg);
    flex: 0 0 auto;
    transition: background var(--slow) var(--ease);
}
.topbar.is-night .marker { background: #5c8fd6; }
.topbar.is-vote  .marker { background: var(--danger); }

.topbar-tools {
    margin-right: auto;
    display: flex;
    gap: var(--s1);
}

.icon-btn {
    /* ٤٤×٤٤ — أدنى هدف لمسٍ مريح على الجوال (توصية Apple وGoogle). */
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surf-1);
    color: var(--fg-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--fg); border-color: var(--line-2); }
.icon-btn:active { background: var(--surf-2); }
.setup-exit:hover,
.btn-end-round:hover { color: var(--danger); border-color: rgba(200, 73, 63, .4); }

/* مخرج شاشة الإعداد — في زاوية شريط السياق نفسها، فلا يتنقّل المخرج بين
   موضعين. (.app أصلاً position: relative.) */
.setup-exit { position: absolute; top: var(--s4); left: var(--s4); z-index: 5; }

/* «إنهاء الجولة» بالعبارة لا بأيقونة منزل: الزرّ لا يعود إلى «بيت» بل يُنهي
   الجولة ويعود إلى شاشة الإعداد — وهو نصّ نافذة التأكيد نفسها. وكان
   `aria-label` يقول ذلك فيسمعه قارئ الشاشة ولا يراه أحد. */
.btn-end-round {
    height: 44px; padding: 0 var(--s3);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surf-1);
    color: var(--fg-2);
    font-family: inherit; font-size: var(--t-sm); font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.btn-end-round:active { background: var(--surf-2); }

/* ==========================================================================
   الأزرار — لغة واحدة
   ========================================================================== */

.btn {
    font-family: inherit;
    font-size: var(--t-md);
    font-weight: 600;
    padding: var(--s3) var(--s5);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--fast) var(--ease),
                background var(--fast), border-color var(--fast), opacity var(--fast);
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost { background: transparent; color: var(--fg-2); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--fg); background: var(--surf-1); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

.btn-full {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: var(--s5) auto 0;
}
.sheet .btn-full { margin-top: var(--s4); }
.sheet .btn-full + .btn-full { margin-top: var(--s2); }

/* ==========================================================================
   شاشة الإعداد
   ========================================================================== */

/**
 * fill-mode = backwards لا both في كل حركة تستخدم transform.
 * مع both يبقى transform مطبَّقاً بعد انتهاء الحركة (ولو كمصفوفة هوية)،
 * وأي transform غير none يجعل العنصر الحاوية المرجعية لأي position:fixed
 * بداخله — فتتوسّط النوافذ داخل القسم بدل الشاشة وتخرج من الإطار.
 */
.screen { animation: screenIn var(--slow) var(--ease-out) backwards; }

@keyframes screenIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.setup-intro { text-align: center; padding: var(--s7) 0 var(--s6); }

.game-title {
    font-size: var(--t-2xl);
    font-weight: 700;
    line-height: 1;
}
/* الخط الوحيد الملون في شاشة الإعداد */
.game-title::after {
    content: '';
    display: block;
    width: 40px; height: 2px;
    background: var(--accent);
    margin: var(--s3) auto 0;
}

.game-sub {
    font-size: var(--t-sm);
    color: var(--fg-3);
    margin-top: var(--s3);
}

.panel {
    background: var(--surf-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--s5);
}

.field { margin-bottom: var(--s6); }
.field:last-of-type { margin-bottom: 0; }

.field-label {
    display: block;
    font-size: var(--t-xs);
    color: var(--fg-3);
    margin-bottom: var(--s3);
}

.screen-hint {
    font-size: var(--t-sm);
    color: var(--fg-2);
    text-align: center;
    margin-bottom: var(--s5);
}

/* ── حقول الأسماء ── */

.names-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--s2);
}

.names-grid input {
    font-family: inherit;
    font-size: var(--t-md);
    padding: var(--s3);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    width: 100%;
    transition: border-color var(--fast);
}
.names-grid input::placeholder { color: var(--fg-3); }
.names-grid input:focus {
    outline: none;
    border-color: var(--accent-line);
}

/* ── المُدرّج ── */

.stepper {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.step-btn {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surf-2);
    color: var(--fg-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color var(--fast), border-color var(--fast), transform var(--fast);
}
.step-btn svg { width: 18px; height: 18px; }
.step-btn:hover:not(.disabled) { color: var(--accent); border-color: var(--accent-line); }
.step-btn:active:not(.disabled) { transform: scale(.94); }
.step-btn.disabled { opacity: .3; cursor: not-allowed; }

.step-value {
    font-family: inherit;
    font-size: var(--t-lg);
    font-weight: 600;
    width: 56px; height: 40px;
    text-align: center;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.step-value::-webkit-inner-spin-button,
.step-value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step-value:focus { outline: none; border-color: var(--accent-line); }

.stepper.compact .step-btn { width: 34px; height: 34px; }
.stepper.compact .step-value { width: 46px; height: 34px; font-size: var(--t-md); }
.stepper.tiny .step-btn { width: 30px; height: 30px; }
.stepper.tiny .step-btn svg { width: 15px; height: 15px; }
.stepper.tiny .step-value { width: 52px; height: 30px; font-size: var(--t-sm); }

/* ── خلايا الأدوار ── */

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s2);
}

.role-cell {
    background: var(--surf-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    align-items: center;
}

.role-cell-head {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-sm);
    color: var(--fg-2);
}

.role-glyph { width: 18px; height: 18px; }
.role-cell[data-role="mafia"]     .role-glyph { color: var(--danger); }
.role-cell[data-role="doctor"]    .role-glyph { color: #5c8fd6; }
.role-cell[data-role="detective"] .role-glyph { color: var(--accent); }
.role-cell[data-role="citizen"]   .role-glyph { color: var(--fg-3); }

.role-cell.is-derived { opacity: .72; }

.derived-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 34px;
    justify-content: center;
}
.derived-value > span:first-child {
    font-size: var(--t-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.derived-note { font-size: var(--t-xs); color: var(--fg-3); }

.balance-hint {
    font-size: var(--t-xs);
    color: var(--fg-3);
    text-align: center;
    margin-top: var(--s3);
    min-height: 16px;
}
.balance-hint.warn { color: var(--danger); }

/* سعة الأفعال الليلية */
.capacity-panel {
    margin-top: var(--s3);
    border-top: 1px solid var(--line);
}
/* الصف يخفت حين لا يوجد صاحب الدور أصلاً */
.capacity-panel .option-row.is-off { opacity: .4; pointer-events: none; }

/* ── صفوف الخيارات ── */

.option-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-top: 1px solid var(--line);
}
.option-row:first-child { border-top: none; }

.option-label {
    font-size: var(--t-md);
    color: var(--fg);
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
}
.option-note { font-size: var(--t-xs); color: var(--fg-3); }

.switch {
    position: relative;
    width: 44px; height: 24px;
    flex: 0 0 auto;
}
.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--surf-3);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    transition: background var(--fast), border-color var(--fast);
}
.slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    right: 3px; top: 3px;
    border-radius: 50%;
    background: var(--fg-2);
    transition: transform var(--fast) var(--ease), background var(--fast);
}
input:checked + .slider { background: var(--accent-dim); border-color: var(--accent-line); }
input:checked + .slider::before { transform: translateX(-20px); background: var(--accent); }
input:focus-visible + .slider { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ==========================================================================
   بطاقات اللاعبين — عمودية 3:4، قلب ثلاثي الأبعاد
   ========================================================================== */

.cards-grid {
    display: grid;
    /* حدّ أدنى مرتفع: البطاقة تُقرأ من حول الطاولة لا من فوق الجهاز */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--s3);
}

.pcard {
    position: relative;
    aspect-ratio: 3 / 4;
    border: none;
    background: none;
    padding: 0;
    perspective: 900px;
    cursor: pointer;
    font-family: inherit;
    /* الزرّ لا يرث لون النص من الصفحة، فيأخذ لون النظام الداكن دون هذا */
    color: var(--fg);
    -webkit-tap-highlight-color: transparent;
}
.pcard:disabled { cursor: default; }

/* الوجهان يدوران معاً داخل هذه الطبقة */
.pcard-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 520ms var(--ease-out);
}
.pcard.is-open .pcard-inner { transform: rotateY(180deg); }

.pcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surf-1);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--fast);
}

/* الوجه المغلق: الاسم هو البطل — يُقرأ من حول الطاولة لا من فوق الجهاز */
.pcard-front {
    align-items: center;
    justify-content: center;
    padding: var(--s4) var(--s2);
    text-align: center;
}

.pcard-name {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    word-break: break-word;
    width: 100%;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

/* الحجم يتدرّج مع طول الاسم كي يملأ البطاقة دون أن يفيض */
.pcard-name.len-short  { font-size: 2.1rem; }
.pcard-name.len-medium { font-size: 1.6rem; }
.pcard-name.len-long   { font-size: 1.25rem; }
.pcard-name.len-xl     { font-size: 1rem; }

.pcard-meta {
    font-size: var(--t-xs);
    color: var(--fg-3);
    margin-top: var(--s2);
}

/* بطاقة محجوبة: غيرها مفتوح الآن */
.pcard.is-blocked { cursor: not-allowed; }
.pcard.is-blocked .pcard-face {
    opacity: .28;
    border-color: var(--line);
    box-shadow: none;
}

.pcard-corner {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    color: var(--fg-3);
    display: grid;
    place-items: center;
}
.pcard-corner svg { width: 16px; height: 16px; }

/* ── الوجه الخلفي: شريط الصورة المُدوتَنة + لوحة الاسم ── */

.pcard-back {
    transform: rotateY(180deg);
    background: var(--surf-1);
    border-color: var(--role);
    justify-content: flex-end;
}

/* شريط الصورة: يشغل أعلى البطاقة، وأسفله تذوب في السطح */
.role-art {
    position: absolute;
    inset: 0 0 auto 0;
    height: 58%;
    overflow: hidden;
    isolation: isolate;   /* يحصر mix-blend-mode داخل الشريط */
}

/* الصورة رمادية ومعتمة — الأصل مُشبَّع ومتنافر بين الأدوار */
.role-art .art-photo {
    position: absolute;
    inset: 0;
    background-image: var(--art);
    background-repeat: no-repeat;
    background-size: var(--art-zoom, 240%) auto;
    background-position: var(--art-focus, 50% 100%);
    filter: grayscale(1) contrast(1.3) brightness(.44);
}

/* الصبغة: توحّد الأدوار الأربعة تحت لوحة واحدة */
.role-art .art-tint {
    position: absolute;
    inset: 0;
    background: var(--role);
    mix-blend-mode: color;
    opacity: .88;
}

/* حبيبات دقيقة تكسر نعومة الفيكتور وتخفي التكبير */
.role-art .art-grain {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#fff .5px, transparent .5px);
    background-size: 3px 3px;
    opacity: .42;
    mix-blend-mode: overlay;
}

/* تلاشٍ سفلي يذيب الحدّ مع اللوحة، وتعتيم علوي يخفي أي بقايا نص مطبوع */
.role-art .art-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--surf-1) 2%,
        rgba(20, 20, 22, .5) 42%,
        rgba(20, 20, 22, .12) 74%,
        rgba(20, 20, 22, .58) 100%);
}

/* شارة الدور في الزاوية */
.pcard-mark {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    z-index: 3;
    color: var(--role);
    opacity: .9;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}
.pcard-mark svg { width: 19px; height: 19px; }

/* لوحة الاسم */
.pcard-plate {
    position: relative;
    z-index: 2;
    padding: var(--s3);
    text-align: center;
    border-top: 1px solid var(--role);
    background: var(--role-dim);
}
.pcard-role {
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--role);
}
.pcard-tagline {
    font-size: var(--t-xs);
    color: var(--fg-2);
    margin-top: 2px;
}
.pcard-hint { font-size: var(--t-xs); color: var(--fg-3); margin-top: var(--s1); }

/* بديل بلا صورة — الدور المجهول */
.role-art.is-blank .art-photo { background: var(--role-dim); filter: none; }
.role-art.is-blank .art-tint { display: none; }
.role-art .art-glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--role);
    opacity: .5;
}
.role-art .art-glyph svg { width: 42px; height: 42px; }

/* حالات */
.pcard.is-idle:hover .pcard-face { border-color: var(--accent-line); }
.pcard.is-idle:active .pcard-inner { transform: scale(.97); }
.pcard.is-idle.is-open:active .pcard-inner { transform: rotateY(180deg) scale(.97); }

/* البطاقة المقفلة: القفل وحده يميّزها — الاسم يبقى ناصعاً كما هو */
.pcard.is-locked { cursor: default; }
.pcard.is-locked .pcard-face { background: var(--surf-2); }
.pcard.is-locked .pcard-corner { color: var(--accent); }
.pcard.is-locked .pcard-meta { opacity: .75; }

.pcard.is-out { cursor: default; }
.pcard.is-out .pcard-face {
    opacity: .45;
    border-style: dashed;
    box-shadow: none;
}
.pcard.is-out .pcard-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.pcard.is-out .pcard-corner { color: var(--danger); }

/* البطاقة المُقصاة تميل قليلاً — أثر باقٍ يجعل الخروج مرئياً في الشبكة */
.pcard.is-out { transform: rotate(var(--tilt, -1.4deg)); }

/* وسقوط لمرة واحدة في اللحظة التي يخرج فيها اللاعب */
.pcard.is-falling { animation: cardFall 620ms var(--ease-out) backwards; }

@keyframes cardFall {
    0%   { transform: translateY(-7px) rotate(0deg); }
    55%  { transform: translateY(5px) rotate(calc(var(--tilt, -1.4deg) * 2)); }
    100% { transform: translateY(0) rotate(var(--tilt, -1.4deg)); }
}

/* المتحدث الآن */
.pcard.is-speaking .pcard-face {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-2);
}

/* شريط تقدّم المؤقّت — يزحف من اليمين لليسار */
.speak-bar {
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--accent);
    transform-origin: right;
    transform: scaleX(1);
    z-index: 3;
}

.speak-clock {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--t-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(9, 9, 10, .86);
    color: var(--fg);
    z-index: 2;
}
.pcard.is-speaking .speak-clock { display: flex; }
.pcard.is-speaking .speak-clock.is-urgent { color: var(--danger); }

/* ==========================================================================
   أهداف الليل
   ========================================================================== */

.night-head {
    text-align: center;
    padding: var(--s6) 0 var(--s5);
}
.night-glyph {
    width: 40px; height: 40px;
    color: var(--role);
    margin-bottom: var(--s3);
}
.night-head h2 { font-size: var(--t-xl); font-weight: 600; }
.night-head p { font-size: var(--t-sm); color: var(--fg-2); margin-top: var(--s2); }

.target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s2);
}

.target {
    font-family: inherit;
    font-size: var(--t-md);
    font-weight: 500;
    padding: var(--s4) var(--s3);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surf-1);
    color: var(--fg);
    cursor: pointer;
    transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.target:hover { border-color: var(--line-2); }
.target:active { transform: scale(.98); }
.target.is-selected {
    border-color: var(--role);
    background: var(--role-dim);
    box-shadow: 0 0 0 1px var(--role);
}
/* زميل لا يُختار — يبدو عادياً تماماً كي لا ينكشف لمن يراقب */
.target.is-inert { cursor: default; }
.target.is-inert:hover { border-color: var(--line); }
.target.is-inert:active { transform: none; }

/* ==========================================================================
   التصويت
   ========================================================================== */

.vote-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s2);
}

.vote-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surf-1);
    cursor: pointer;
    transition: border-color var(--fast), background var(--fast), transform var(--fast);
    text-align: right;
    font-family: inherit;
    color: var(--fg);
    width: 100%;
}
.vote-row:hover { border-color: var(--line-2); }
.vote-row:active { transform: scale(.99); }
.vote-row.has-votes { border-color: var(--accent-line); background: var(--accent-dim); }

.vote-name { font-size: var(--t-md); font-weight: 500; }
.vote-sub { font-size: var(--t-xs); color: var(--fg-3); margin-top: 2px; }

.vote-tally {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.vote-num {
    font-size: var(--t-sm);
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
    margin-left: var(--s1);
    min-width: 12px;
    text-align: center;
}

.pip {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: pipIn 220ms var(--ease-out) backwards;
}
.pip.is-empty { background: var(--line-2); animation: none; }

@keyframes pipIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.vote-remove {
    width: 26px; height: 26px;
    flex: 0 0 auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--fg-3);
    display: none;
    place-items: center;
    cursor: pointer;
    transition: color var(--fast), border-color var(--fast);
}
.vote-remove svg { width: 13px; height: 13px; }
.vote-row.has-votes .vote-remove { display: grid; }
.vote-remove:hover { color: var(--danger); border-color: rgba(200, 73, 63, .4); }

/* ==========================================================================
   التبرير
   ========================================================================== */

.justify-queue {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin-bottom: var(--s5);
}

.queue-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    color: var(--fg-3);
    font-size: var(--t-sm);
    transition: all var(--fast);
}
.queue-row.is-current {
    border-color: var(--accent-line);
    background: var(--accent-dim);
    color: var(--fg);
}
.queue-row.is-done { opacity: .45; }
.queue-order {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surf-2);
    display: grid;
    place-items: center;
    font-size: var(--t-xs);
    flex: 0 0 auto;
}
.queue-row.is-current .queue-order { background: var(--accent); color: var(--accent-ink); }
.queue-votes { margin-right: auto; font-size: var(--t-xs); }

.speaker {
    text-align: center;
    padding: var(--s6) var(--s4);
    background: var(--surf-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}
.speaker-kicker { font-size: var(--t-xs); color: var(--fg-3); }
.speaker-name { font-size: var(--t-xl); font-weight: 600; margin-top: var(--s2); }

/* حلقة المؤقّت */
.ring-wrap {
    position: relative;
    width: 132px; height: 132px;
    margin: var(--s5) auto;
}
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surf-3); stroke-width: 4; }
.ring-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke var(--slow);
}
.ring-wrap.is-urgent .ring-fill { stroke: var(--danger); }
.ring-time {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--t-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ring-wrap.is-urgent .ring-time { color: var(--danger); }

.speaker-actions {
    display: flex;
    gap: var(--s2);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--s4);
}

/* ==========================================================================
   الطبقات المنبثقة
   ========================================================================== */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(6, 6, 7, .84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
    animation: fadeIn var(--fast) backwards;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet {
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surf-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--s6) var(--s5);
    text-align: center;
    box-shadow: var(--shadow-3);
    animation: sheetIn var(--slow) var(--ease-out) backwards;
}

@keyframes sheetIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.sheet-kicker { font-size: var(--t-xs); color: var(--fg-3); margin-bottom: var(--s4); }
.sheet-title  { font-size: var(--t-xl); font-weight: 600; }
.sheet-desc   { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.75; margin-top: var(--s3); }

.sheet-actions {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s5);
}
.sheet-actions .btn { flex: 1; }

/* القرص الدائري — يظهر بتكبير خفيف */
.orb {
    width: 92px; height: 92px;
    margin: 0 auto var(--s4);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--role-dim);
    border: 1px solid var(--role);
    animation: orbIn 420ms var(--ease-out) backwards;
}
.orb svg { width: 42px; height: 42px; color: var(--role); }

/* لوحة فنّ الدور في شاشة الليل — نفس معالجة البطاقة بمقاس أعرض */
.role-panel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--role);
    background: var(--surf-2);
    margin-bottom: var(--s4);
    animation: orbIn 460ms var(--ease-out) backwards;
}
.role-panel .art-photo {
    position: absolute;
    inset: 0;
    background-image: var(--art);
    background-repeat: no-repeat;
    background-size: var(--art-zoom, 150%) auto;
    background-position: var(--art-focus, 50% 100%);
    filter: grayscale(1) contrast(1.3) brightness(.44);
}
.role-panel .art-tint {
    position: absolute; inset: 0;
    background: var(--role);
    mix-blend-mode: color;
    opacity: .88;
}
.role-panel .art-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(#fff .5px, transparent .5px);
    background-size: 3px 3px;
    opacity: .42;
    mix-blend-mode: overlay;
}
.role-panel .art-fade {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11, 11, 12, .92) 4%, rgba(11, 11, 12, .2) 70%);
}
.role-panel .panel-glyph {
    position: absolute;
    top: var(--s3); right: var(--s3);
    z-index: 2;
    color: var(--role);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .9));
}
.role-panel .panel-glyph svg { width: 26px; height: 26px; }

.orb-night { --role: #5c8fd6; --role-dim: rgba(92, 143, 214, .12); }
.orb-dawn  { --role: var(--accent); --role-dim: var(--accent-dim); }

@keyframes orbIn {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: none; }
}

.sheet-handoff .sheet-title { color: var(--role); }

.night-order {
    list-style: none;
    text-align: right;
    margin: var(--s4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}
.night-order li {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-sm);
    color: var(--fg-2);
    padding: var(--s2) var(--s3);
    background: var(--surf-2);
    border-radius: var(--r-sm);
}
.night-order svg { width: 16px; height: 16px; color: var(--role); }

/* ── جدول الحالة ── */

.status-list {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin-bottom: var(--s4);
}
.status-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surf-2);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
}
.status-row svg { width: 16px; height: 16px; color: var(--role); flex: 0 0 auto; }
.status-row .val {
    margin-right: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.status-row.is-total { background: transparent; border: 1px solid var(--line); }

/* ── نتيجة التحقيق ── */

.verdict-name { font-size: var(--t-xl); font-weight: 600; margin-bottom: var(--s4); }

.verdict {
    font-size: var(--t-lg);
    font-weight: 600;
    padding: var(--s4);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    animation: orbIn 380ms var(--ease-out) backwards;
}
.verdict.is-mafia { color: var(--danger); background: var(--danger-dim); border-color: rgba(200, 73, 63, .4); }
.verdict.is-clean { color: var(--ok);     background: var(--ok-dim);     border-color: rgba(91, 154, 106, .4); }

/* نتائج تحقيق متعددة: صف لكل هدف */
.verdict-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: var(--s4) 0;
}
.verdict-list .verdict {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    font-size: var(--t-md);
    padding: var(--s3);
    margin: 0;
    width: 100%;
    max-width: 100%;
    white-space: normal;
}
.verdict-who { color: var(--fg); font-weight: 700; }

/* عدّاد الاختيار حين تتجاوز السعة هدفاً واحداً */
.selection-count {
    font-size: var(--t-xs);
    color: var(--role, var(--accent));
    margin-top: var(--s2);
    font-variant-numeric: tabular-nums;
}

/* ── روليت الاغتيال ── */

.roulette {
    font-size: var(--t-xl);
    font-weight: 700;
    min-height: 56px;
    display: grid;
    place-items: center;
    margin: var(--s4) 0;
    color: var(--fg-2);
}
.roulette.is-settled { animation: settle 480ms var(--ease-out) backwards; }
.roulette.is-kill { color: var(--danger); }
.roulette.is-safe { color: var(--ok); }

@keyframes settle {
    0%   { transform: scale(.7); opacity: 0; }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── كشف الدور ── */

.reveal-name { font-size: var(--t-xl); font-weight: 600; margin-bottom: var(--s5); }

.reveal-stage {
    width: 116px; height: 116px;
    margin: 0 auto var(--s4);
    perspective: 700px;
}

.reveal-disc {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
    background: var(--role-dim);
    border: 1px solid var(--role);
    transition: background var(--fast), border-color var(--fast);
}
/* الصورة داخل القرص — تظهر فقط حين يستقرّ الدور */
.reveal-disc .art-photo {
    position: absolute;
    inset: 0;
    background-image: var(--art);
    background-repeat: no-repeat;
    background-size: var(--art-zoom, 260%) auto;
    background-position: var(--art-focus, 50% 100%);
    filter: grayscale(1) contrast(1.3) brightness(.42);
    opacity: 0;
    transition: opacity var(--slow);
}
.reveal-disc .art-tint {
    position: absolute; inset: 0;
    background: var(--role);
    mix-blend-mode: color;
    opacity: 0;
    transition: opacity var(--slow);
}
.reveal-disc.is-final .art-photo { opacity: 1; }
.reveal-disc.is-final .art-tint  { opacity: .88; }

.reveal-disc svg {
    position: relative;
    z-index: 2;
    width: 52px; height: 52px;
    color: var(--role);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .9));
}

/* دورة أثناء تبديل الأدوار، ثم استقرار */
.reveal-disc.is-cycling { animation: cycle 120ms linear infinite; }
.reveal-disc.is-final   { animation: reveal 620ms var(--ease-out) backwards; }

@keyframes cycle {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes reveal {
    0%   { transform: rotateY(0) scale(1); }
    45%  { transform: rotateY(180deg) scale(1.1); }
    100% { transform: rotateY(360deg) scale(1); }
}

.reveal-label { font-size: var(--t-xs); color: var(--fg-3); }
.reveal-role {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--role);
    margin-top: var(--s1);
    min-height: 34px;
}

/* ==========================================================================
   النتائج والفوز
   ========================================================================== */

.plain-result {
    text-align: center;
    padding: var(--s7) var(--s4);
    background: var(--surf-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}
.plain-result p { font-size: var(--t-md); color: var(--fg-2); }

.recount {
    text-align: center;
    padding: var(--s6) var(--s4);
    background: var(--danger-dim);
    border: 1px solid rgba(200, 73, 63, .4);
    border-radius: var(--r-xl);
}
.recount h2 { font-size: var(--t-lg); font-weight: 600; color: var(--danger); }
.recount p { font-size: var(--t-sm); color: var(--fg-2); margin-top: var(--s3); line-height: 1.75; }

.win {
    text-align: center;
    padding: var(--s7) var(--s5);
    background: var(--surf-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}
.win-crown {
    width: 38px; height: 38px;
    color: var(--accent);
    margin-bottom: var(--s3);
    animation: orbIn 500ms var(--ease-out) backwards;
}
.win h2 { font-size: var(--t-xl); font-weight: 700; }
.win-why { font-size: var(--t-sm); color: var(--fg-2); margin-top: var(--s2); }

.roster {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    max-width: 380px;
    margin: var(--s6) auto 0;
}

/* الظهور المتدرّج: كل صف بعد الذي قبله */
.roster-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surf-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-align: right;
    animation: rowIn 420ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes rowIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.roster-row svg { width: 17px; height: 17px; color: var(--role); flex: 0 0 auto; }
.roster-label { font-size: var(--t-sm); color: var(--fg-2); }
.roster-names { margin-right: auto; font-size: var(--t-sm); }

/* ==========================================================================
   سجل الجولة — القصة التي جرت، من سجلّ الأحداث الذي يحفظه المحرّك
   ========================================================================== */

.timeline {
    max-width: 380px;
    margin: var(--s6) auto 0;
    text-align: right;
    border-top: 1px solid var(--line);
    padding-top: var(--s5);
}

.timeline-title {
    font-size: var(--t-xs);
    color: var(--fg-3);
    text-align: center;
    margin-bottom: var(--s4);
}

.timeline-chapter {
    font-size: var(--t-xs);
    color: var(--fg-3);
    margin: var(--s4) 0 var(--s2);
    display: flex;
    align-items: center;
    gap: var(--s2);
}
.timeline-chapter:first-child { margin-top: 0; }
.timeline-chapter svg { width: 13px; height: 13px; }
.timeline-chapter::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* الخيط الرأسي الذي يربط الأحداث */
.timeline-event {
    position: relative;
    padding: var(--s2) var(--s5) var(--s2) 0;
    font-size: var(--t-sm);
    color: var(--fg-2);
    line-height: 1.6;
}
.timeline-event::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: 5px;
    width: 1px;
    background: var(--line);
}
.timeline-event::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 2px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--surf-3);
    border: 1px solid var(--role, var(--line-2));
}
.timeline-event:last-child::before { bottom: 50%; }

.timeline-event.is-death::after { background: var(--danger); border-color: var(--danger); }
.timeline-event.is-safe::after  { background: var(--ok); border-color: var(--ok); }

.timeline-who { color: var(--fg); font-weight: 600; }
.timeline-role { color: var(--role, var(--fg-2)); }

/* ==========================================================================
   لحظات السرد — الشاشة السوداء التي يقولها الراوي البشري
   ========================================================================== */

.narration {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: #05050a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    padding: var(--s6);
    text-align: center;
    cursor: pointer;
    animation: fadeIn 220ms backwards;
}

.narration.is-leaving { animation: fadeOut 320ms var(--ease) forwards; }

@keyframes fadeOut { to { opacity: 0; } }

.narration-line {
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--fg);
    opacity: 0;
    animation: lineIn 900ms var(--ease-out) forwards;
}
.narration-line.is-accent { color: var(--role, var(--accent)); }

@keyframes lineIn {
    0%   { opacity: 0; transform: translateY(10px); filter: blur(3px); }
    35%  { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}

.narration-skip {
    position: absolute;
    bottom: var(--s6);
    font-size: var(--t-xs);
    color: var(--fg-3);
    opacity: 0;
    animation: lineIn 600ms var(--ease-out) 1400ms forwards;
}

/* ==========================================================================
   الشاشات الصغيرة
   ========================================================================== */

@media (max-width: 600px) {
    /* حشو أضيق: كل بكسل يذهب إلى البطاقات */
    .app { padding: var(--s2) var(--s2) var(--s7); }

    .setup-intro { padding: var(--s6) 0 var(--s5); }
    .panel { padding: var(--s4); }

    /* عمودان صريحان — auto-fill بحدّ 190px كان سيهبط إلى عمود واحد */
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s2);
    }
    /* أطول قليلاً من 3:4 فتكسب البطاقة حجماً دون أن تفقد عموداً */
    .pcard { aspect-ratio: 2 / 3; }

    .pcard-back svg { width: 40px; height: 40px; }
    .speak-clock { font-size: var(--t-xl); }

    .vote-list { grid-template-columns: 1fr; }
    .target-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

    .names-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .roles-grid { grid-template-columns: 1fr 1fr; }

    .ring-wrap { width: 108px; height: 108px; }
    .sheet { padding: var(--s5) var(--s4); }

    /* التوهّج الزجاجي مكلف على الأجهزة الضعيفة */
    .overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 6, 7, .95); }
}

/* ==========================================================================
   الشاشات القصيرة
   شريط التمرير مخفي في كل التطبيق، فالمحتوى الفائض داخل النافذة يختفي
   بلا أي إشارة. نُقلّص الحشو والعناصر بدل الاعتماد على التمرير.
   ========================================================================== */

@media (max-height: 620px) {
    .sheet { padding: var(--s4); }
    .sheet-kicker { margin-bottom: var(--s3); }

    .orb { width: 60px; height: 60px; margin-bottom: var(--s3); }
    .orb svg { width: 28px; height: 28px; }

    .sheet-title { font-size: var(--t-lg); }
    .sheet-desc { font-size: var(--t-xs); line-height: 1.6; margin-top: var(--s2); }

    .night-order { margin-top: var(--s3); }
    .night-order li { padding: var(--s1) var(--s2); font-size: var(--t-xs); }
    .night-order svg { width: 14px; height: 14px; }

    .role-panel { margin-bottom: var(--s3); }
    .reveal-stage { width: 84px; height: 84px; margin-bottom: var(--s3); }
    .reveal-disc svg { width: 38px; height: 38px; }
    .reveal-name { font-size: var(--t-lg); margin-bottom: var(--s3); }
    .reveal-role { font-size: var(--t-lg); min-height: 26px; }

    .verdict { font-size: var(--t-md); padding: var(--s3); margin: var(--s3) auto; }
    .verdict-name { font-size: var(--t-lg); margin-bottom: var(--s3); }

    .roulette { font-size: var(--t-lg); min-height: 40px; margin: var(--s3) 0; }
    .sheet .btn-full { margin-top: var(--s3); }
    .sheet .btn { padding: var(--s2) var(--s4); }
}

/* ==========================================================================
   احترام تفضيل تقليل الحركة
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
    .pcard-inner { transition: none; }
}