/* ==========================================================================
   صفحة المسبحة / عدّاد الأذكار
   ========================================================================== */

body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* أيقونتا الوضع الليلي/النهاري */

/* ---------- التخطيط ---------- */
.counter-page {
    position: relative;
    z-index: 1;
    width: min(100% - 2rem, 560px);
    margin-inline: auto;
    padding: clamp(18px, 4vw, 34px) 0 calc(48px + var(--safe-b));
    display: grid;
    gap: clamp(16px, 3vw, 24px);
    /* توسيط رأسي عندما يكون في الشاشة متّسع */
    min-height: calc(100dvh - var(--topbar-h));
    align-content: center;
    animation: fade-up .5s var(--ease) both;
}

/* عناصر الشبكة ترفض الانكماش دون عرض محتواها افتراضياً،
   فيتمدّد العمود ويخرج المحتوى عن مركز الشاشة. */
.counter-page > * {
    min-width: 0;
    width: 100%;
}

/* ---------- اختيار الذكر ---------- */
.dhikr-picker { min-width: 0; }

.dhikr-picker__scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scroll-snap-type: x proximity;
    /* «safe» يمنع قصّ أول عنصر عند امتلاء الشريط */
    justify-content: safe center;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
}

.dhikr-picker__scroll::-webkit-scrollbar { height: 0; }

.dhikr-picker__scroll .chip {
    scroll-snap-align: center;
    flex: none;
}

/* ---------- بطاقة العدّاد ---------- */
.counter-card {
    background: var(--surface-glass);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(20px, 5vw, 34px) clamp(16px, 4vw, 30px);
    display: grid;
    justify-items: center;
    gap: clamp(14px, 3vw, 22px);
    position: relative;
    overflow: hidden;
}

/* لا يتجاوز أي عنصر عرض البطاقة، وإلا اتّسع العمود وانزاح العدّاد عن المنتصف */
.counter-card > * {
    max-width: 100%;
    min-width: 0;
}

.counter-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-500), var(--gold-500), var(--brand-500));
}

.dhikr-text {
    margin: 0;
    font-family: 'Uthman Taha', 'Lotus Shami', serif;
    font-size: clamp(1.5rem, 5.5vw, 2.1rem);
    line-height: 1.8;
    text-align: center;
    color: var(--brand-700);
    min-height: 2.4em;
    display: grid;
    place-items: center;
    transition: opacity var(--dur) var(--ease);
}

[data-theme="dark"] .dhikr-text { color: var(--brand-300); }

.dhikr-text.is-swapping { opacity: 0; }

/* ---------- الدائرة القابلة للضغط ---------- */
.tap-ring {
    position: relative;
    /* يتقلّص مع عرض الشاشة وارتفاعها معاً — يمنع الطفح في الوضع الأفقي */
    width: min(68vw, 42vh, 258px);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background:
        radial-gradient(circle at 50% 32%, var(--surface-2) 0%, var(--surface) 70%);
    box-shadow:
        var(--shadow-md),
        inset 0 0 0 1px var(--border);
    display: grid;
    place-items: center;
    transition: transform .18s var(--ease), box-shadow var(--dur) var(--ease);
    touch-action: manipulation;
}

@media (hover: hover) {
    .tap-ring:hover { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--brand-300); }
    .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

.tap-ring:active { transform: scale(.965); }

.tap-ring__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg) scaleX(-1); /* البدء من الأعلى باتجاه اليمين (RTL) */
    overflow: visible;
}

.tap-ring__track,
.tap-ring__bar {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
}

.tap-ring__track { stroke: var(--border); }

.tap-ring__bar {
    stroke: url(#ringGrad);
    stroke-dasharray: 666;
    stroke-dashoffset: 666;
    transition: stroke-dashoffset .45s var(--ease);
    filter: drop-shadow(0 3px 8px rgba(17, 124, 100, .35));
}

.tap-ring__inner {
    display: grid;
    justify-items: center;
    gap: 2px;
    z-index: 1;
    pointer-events: none;
}

.tap-ring__count {
    font-size: clamp(3.4rem, 15vw, 5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
}

.tap-ring__count.is-bumping { animation: pop .32s var(--ease); }

.tap-ring__target {
    font-size: 1rem;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.tap-ring__target b { color: var(--brand-600); }

/* موجة الضغط */
.tap-ring__ripple {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-400) 0%, transparent 65%);
    opacity: 0;
    pointer-events: none;
}

.tap-ring__ripple.is-on {
    animation: ripple .5s var(--ease);
}

@keyframes ripple {
    0%   { opacity: .35; transform: scale(.6); }
    100% { opacity: 0;   transform: scale(1.15); }
}

/* الرقم الطائر +1 */
.tap-ring__float {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-500);
    opacity: 0;
    pointer-events: none;
}

.tap-ring__float.is-on { animation: float-up .8s var(--ease); }

.tap-hint {
    margin: -6px 0 0;
    font-size: .92rem;
    color: var(--text-mute);
    text-align: center;
}

/* تلميح لوحة المفاتيح لا معنى له على شاشات اللمس */
@media (hover: none) {
    .kbd-hint { display: none; }
}

kbd {
    font-family: inherit;
    font-size: .85em;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-soft);
}

/* ---------- الهدف ---------- */
.targets {
    display: grid;
    gap: 8px;
    justify-items: center;
    width: 100%;
    max-width: 400px;
}

.targets__label {
    font-size: .92rem;
    color: var(--text-mute);
    font-weight: 600;
}

/* أعمدة متساوية — لا تفيض مهما ضاقت الشاشة */
.targets__chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
}

.targets__chips .chip {
    min-width: 0;
    padding: 7px 4px;
    font-size: .92rem;
    text-align: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- الإجراءات ---------- */
.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.actions .btn { min-width: 0; }

/* ---------- الإحصائيات ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 8px;
    text-align: center;
    display: grid;
    gap: 2px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.stat b {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

[data-theme="dark"] .stat b { color: var(--brand-300); }

.stat small {
    font-size: .82rem;
    color: var(--text-mute);
}

/* ---------- النافذة المنبثقة ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 26, 21, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fade-in .25s var(--ease);
}

.modal[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal__card {
    width: min(100%, 400px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 30px 24px 24px;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 12px;
    animation: modal-in .4s var(--ease);
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(24px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

.modal__badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand-500), var(--brand-700));
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.modal__badge svg { width: 32px; height: 32px; }

.modal__card h2 {
    margin: 0;
    font-size: 1.7rem;
    color: var(--brand-700);
}

[data-theme="dark"] .modal__card h2 { color: var(--brand-300); }

.modal__card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.05rem;
}

.modal__card b { color: var(--gold-600); }

[data-theme="dark"] .modal__card b { color: var(--gold-400); }

.modal__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

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

/* الجوال — عمودي */
@media (max-width: 560px) {
    .counter-page {
        width: min(100% - 1.5rem, 560px);
        gap: 14px;
    }

    .counter-card {
        border-radius: var(--r-lg);
        padding: 22px 14px 24px;
    }

    .actions { gap: 8px; }
    .targets__chips { gap: 5px; }
    .targets__chips .chip { font-size: .88rem; padding-inline: 2px; }

    .stats { gap: 8px; }
    .stat { padding: 12px 4px; }
    .stat small { font-size: .74rem; }

    /* التنبيه يرتفع فوق حافة الشاشة السفلية */
    .toast { bottom: calc(16px + var(--safe-b)); }
}

/* الشاشات الضيقة جداً */
@media (max-width: 380px) {
    .topbar__brand span:last-child { display: none; }
    .topbar__actions .btn span { display: none; }
    .topbar__actions .btn { padding-inline: 14px; }
    .tap-hint { font-size: .84rem; }
}

/* الجوال — أفقي: تقليص رأسي لأن ارتفاع الشاشة شحيح */
@media (max-height: 520px) and (orientation: landscape) {
    .counter-page {
        min-height: 0;
        gap: 12px;
        padding-top: 12px;
    }

    .counter-card { gap: 12px; padding: 16px 14px; }
    .dhikr-text { font-size: 1.3rem; min-height: 0; line-height: 1.6; }
    .tap-ring { width: min(46vh, 200px); }
    .tap-hint { display: none; }
    .footnote { display: none; }
}