/* ==================================================================
   FOXER — العدّ التنازلي والاحتفال (اليوم الوطني العراقي + الافتتاح الرسمي)
   لا أنماط مضمّنة (CSP): كل شيء هنا.
   ================================================================== */
:root { --iq-red: #ce1126; --iq-green: #007a3d; }

/* ----- الشريط العلوي ----- */
.lbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
    padding: 9px 16px; text-align: center; font-weight: 600; font-size: 14px; color: #fff;
    background: linear-gradient(90deg, var(--iq-red), #8a0c1b 45%, var(--iq-green));
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.lbar:hover { filter: brightness(1.08); }
.lbar-time {
    font-family: var(--mono); font-size: 15px; letter-spacing: .06em; direction: ltr; unicode-bidi: isolate;
    background: rgba(0, 0, 0, .35); padding: 2px 10px; border-radius: 8px;
}
.lbar .st-live, .launch .st-live { display: none; }
.lbar.is-live .st-pre, .lbar.is-live .lbar-time, .launch.is-live .st-pre { display: none; }
.lbar.is-live .st-live, .launch.is-live .st-live { display: block; }
.lbar.is-live .st-live { display: inline; }
.launch.is-live button.st-live { display: inline-flex; }

/* ----- بطاقة الرئيسية ----- */
.launch { margin-top: 22px; }
.launch-card {
    position: relative; overflow: hidden; padding: 26px; border-radius: 22px;
    background:
        radial-gradient(900px 260px at 100% 0, rgba(206, 17, 38, .22), transparent 60%),
        radial-gradient(900px 260px at 0 100%, rgba(0, 122, 61, .24), transparent 60%),
        var(--panel);
    border: 1px solid var(--line2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.launch-card > *:not(canvas) { position: relative; z-index: 1; }
.launch-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.launch-flag { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.launch-head h2 { font-size: clamp(19px, 3.2vw, 28px); }
.launch-head p { margin-top: 4px; }

.launch-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; direction: ltr; margin: 6px 0 16px; }
.launch-clock > div {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 16px;
}
.launch-clock b {
    font-family: var(--mono); font-size: clamp(28px, 7vw, 54px); line-height: 1.1; font-variant-numeric: tabular-nums;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.launch-clock span { color: var(--muted); font-size: 13px; }
.launch-gift { margin: 4px 0 16px; color: var(--accent2); font-weight: 600; }
.launch-card .cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

.launch-confetti {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2 !important;
}
.launch.is-live .launch-card { border-color: rgba(46, 204, 113, .55); animation: launch-glow 2.4s var(--ease) infinite alternate; }
@keyframes launch-glow { from { box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } to { box-shadow: 0 18px 60px rgba(46, 204, 113, .28); } }

/* الاحتفال العام (قصاصات تغطي الصفحة) */
.page-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

@media (max-width: 520px) {
    .launch-card { padding: 18px; border-radius: 18px; }
    .launch-clock { gap: 8px; }
    .launch-flag { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .launch.is-live .launch-card { animation: none; }
}

/* ----- نافذة الاحتفال والافتتاح الرسمي + الهدية ----- */
.lov {
    position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(4, 5, 10, .78); overflow-y: auto;
}
.lov[hidden] { display: none; }
.lov-box {
    position: relative; overflow: hidden; width: min(560px, 100%); text-align: center; padding: 30px 24px;
    border-radius: 24px; border: 1px solid rgba(46, 204, 113, .5);
    background:
        radial-gradient(520px 200px at 100% 0, rgba(206, 17, 38, .3), transparent 60%),
        radial-gradient(520px 200px at 0 100%, rgba(0, 122, 61, .32), transparent 60%),
        var(--panel);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
    animation: lov-in .5s var(--ease) both;
}
@keyframes lov-in { from { transform: translateY(18px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.lov-box > *:not(canvas) { position: relative; z-index: 1; }
.lov-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2 !important; }
.lov-x { position: absolute; top: 10px; inset-inline-end: 12px; background: none; border: 0; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; z-index: 3 !important; }
.lov-flag { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.lov-box h2 { font-size: clamp(26px, 6vw, 38px); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lov-sub { margin-top: 8px; font-weight: 700; font-size: 17px; color: var(--accent2); }
.lov-text { margin-top: 12px; color: var(--muted); }
.lov-gift { margin-top: 20px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); }
.lov-gift b { font-size: 18px; }
.lov-gift p { margin: 8px 0 14px; min-height: 22px; }
.lov-gift p.ok { color: var(--ok); font-weight: 700; }
.lov-gift p.err { color: var(--bad); }
.lov-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .lov-box { animation: none; } }