/**
 * بانر ترويج لعبة صايع بحر
 * يُستخدم في فوتر mytayibat.com لتحويل الزوار إلى لاعبين
 */

.game-promo-banner {
    position: relative;
    background: linear-gradient(135deg, #061826 0%, #0a4d68 45%, #088395 100%);
    padding: 3rem 0;
    margin: 3rem 0 0;
    overflow: hidden;
    color: #fff;
}

/* تجاوز ألوان h2/نصوص الثيم الداكن على الخلفية البحرية */
.game-promo-banner h2,
.game-promo-banner .game-promo-banner__title,
.game-promo-banner .game-promo-banner__badge,
.game-promo-banner .game-promo-banner__highlights li {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.game-promo-banner__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* أمواج متحركة */
.game-promo-banner__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23ffffff'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23ffffff'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
    background-size: 50% 100%;
    opacity: 0.15;
    animation: game-promo-wave 15s linear infinite;
}

.game-promo-banner__wave--2 {
    animation-duration: 20s;
    animation-direction: reverse;
    opacity: 0.1;
}

@keyframes game-promo-wave {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* فقاعات */
.game-promo-banner__bubble {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    animation: game-promo-bubble 8s ease-in-out infinite;
}

.game-promo-banner__bubble--1 {
    bottom: 10%;
    left: 15%;
    animation-delay: 0s;
}

.game-promo-banner__bubble--2 {
    bottom: 20%;
    right: 25%;
    width: 40px;
    height: 40px;
    animation-delay: 2s;
}

.game-promo-banner__bubble--3 {
    bottom: 15%;
    left: 60%;
    width: 25px;
    height: 25px;
    animation-delay: 4s;
}

@keyframes game-promo-bubble {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-100px) scale(1.2);
        opacity: 0;
    }
}

/* أسماك متحركة */
.game-promo-banner__fish {
    position: absolute;
    font-size: 2rem;
    animation: game-promo-swim 15s linear infinite;
}

.game-promo-banner__fish--1 {
    top: 20%;
    animation-delay: 1s;
}

.game-promo-banner__fish--2 {
    top: 60%;
    animation-delay: 5s;
    animation-duration: 20s;
}

@keyframes game-promo-swim {
    from {
        left: -5%;
        transform: scaleX(1);
    }
    49% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
    99% {
        transform: scaleX(-1);
    }
    to {
        left: 105%;
        transform: scaleX(1);
    }
}

.game-promo-banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.game-promo-banner__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.game-promo-banner__icon {
    font-size: 2.5rem;
    line-height: 1;
}

.game-promo-banner__badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.45rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.game-promo-banner__title {
    font-size: clamp(1.5rem, 4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.35);
}

.game-promo-banner__highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 520px;
}

.game-promo-banner__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.95;
}

.game-promo-banner__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.game-promo-banner__cta-primary {
    min-width: 220px;
}

.game-promo-banner__play-badge {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.game-promo-banner__play-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.game-promo-banner__play-badge img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%;
}

.game-promo-banner__link {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.game-promo-banner__link:hover {
    color: #fde047;
    opacity: 1;
}

.btn-game {
    background: linear-gradient(135deg, #fde047 0%, #f5c842 100%);
    color: #061826;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(253, 224, 71, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-game:hover {
    background: linear-gradient(135deg, #f5c842 0%, #fde047 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(253, 224, 71, 0.55);
    color: #061826;
}

/* العناصر المرئية - محاكاة شاشة اللعبة (ديسكتوب فقط) */
.game-promo-banner__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: game-promo-float 3s ease-in-out infinite;
}

@keyframes game-promo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.game-promo-banner__mockup {
    position: relative;
    width: 260px;
    height: 440px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 28px;
    padding: 14px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 8px rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    animation: game-promo-device-float 3s ease-in-out infinite;
}

@keyframes game-promo-device-float {
    0%, 100% {
        transform: translateY(0) rotateY(-8deg);
    }
    50% {
        transform: translateY(-12px) rotateY(-8deg);
    }
}

.game-promo-banner__screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #061826 0%, #05668d 50%, #028090 100%);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.game-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.game-screen__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid rgba(253, 224, 71, 0.3);
}

.game-screen__logo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.game-screen__coins {
    background: rgba(253, 224, 71, 0.2);
    padding: 4px 10px;
    border-radius: 15px;
    border: 1px solid rgba(253, 224, 71, 0.45);
}

.game-screen__harbor {
    position: relative;
    height: 130px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 18px 15px;
}

.game-screen__ship {
    font-size: 2.25rem;
    animation: game-promo-ship-bob 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.game-screen__ship--1 { animation-delay: 0s; }
.game-screen__ship--2 { animation-delay: 0.5s; font-size: 2.75rem; }
.game-screen__ship--3 { animation-delay: 1s; }

@keyframes game-promo-ship-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.game-screen__water {
    flex: 1;
    background: linear-gradient(
        180deg,
        rgba(5, 102, 141, 0.3) 0%,
        rgba(2, 128, 144, 0.5) 50%,
        rgba(0, 180, 216, 0.7) 100%
    );
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}

.game-screen__fish {
    font-size: 1.5rem;
    animation: game-promo-fish-swim 4s linear infinite;
    position: absolute;
}

.game-screen__fish:nth-child(1) { top: 20%; animation-delay: 0s; }
.game-screen__fish:nth-child(2) { top: 50%; animation-delay: 1.5s; }
.game-screen__fish:nth-child(3) { top: 70%; animation-delay: 3s; font-size: 2rem; }

@keyframes game-promo-fish-swim {
    from { left: -10%; transform: scaleX(1); }
    48% { transform: scaleX(1); }
    50% { transform: scaleX(-1); }
    98% { transform: scaleX(-1); }
    to { left: 110%; transform: scaleX(1); }
}

.game-screen__ui {
    padding: 16px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.game-screen__btn {
    display: inline-block;
    background: linear-gradient(135deg, #fde047 0%, #f5c842 100%);
    color: #061826;
    padding: 10px 28px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(253, 224, 71, 0.35);
    animation: game-promo-button-glow 2s ease-in-out infinite;
}

@keyframes game-promo-button-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(253, 224, 71, 0.35); }
    50% { box-shadow: 0 4px 22px rgba(253, 224, 71, 0.65); }
}

.game-promo-banner__features {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.game-feature {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

/* تقليل الحركة لمن يفضّل ذلك */
@media (prefers-reduced-motion: reduce) {
    .game-promo-banner__wave,
    .game-promo-banner__bubble,
    .game-promo-banner__fish,
    .game-promo-banner__visual,
    .game-promo-banner__mockup,
    .game-screen__ship,
    .game-screen__fish,
    .game-screen__btn {
        animation: none !important;
    }
}

/* تنسيق عناوين الأقسام في الفوتر */
.footer-col__section-title {
    color: var(--accent-color, #10b981);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col__section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* موبايل — بانر مضغوط بدون mockup */
@media (max-width: 768px) {
    .game-promo-banner {
        padding: 2rem 0;
        margin-top: 2rem;
    }

    .game-promo-banner__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0;
    }

    .game-promo-banner__content {
        align-items: center;
        gap: 1rem;
    }

    .game-promo-banner__icon {
        font-size: 2rem;
    }

    .game-promo-banner__title {
        font-size: 1.5rem;
    }

    .game-promo-banner__highlights {
        align-items: center;
        text-align: right;
        width: 100%;
        max-width: 320px;
    }

    .game-promo-banner__highlights li {
        font-size: 0.95rem;
        justify-content: flex-start;
        width: 100%;
    }

    .game-promo-banner__actions {
        align-items: center;
        width: 100%;
    }

    .game-promo-banner__cta-primary {
        width: 100%;
        max-width: 300px;
    }

    .game-promo-banner__play-badge img {
        height: 48px;
    }

    .game-promo-banner__visual {
        display: none;
    }

    .game-promo-banner__fish {
        font-size: 1.5rem;
    }
}

/* ── صندوق استراحة (jadwal · allowed) ── */
.mt-game-break-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(8, 131, 149, 0.25);
    background: linear-gradient(135deg, rgba(6, 24, 38, 0.04) 0%, rgba(8, 131, 149, 0.08) 100%);
    box-shadow: 0 4px 20px rgba(6, 24, 38, 0.06);
}

.mt-game-break-card__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.mt-game-break-card__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #088395;
}

.mt-game-break-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #061826;
}

.mt-game-break-card__text {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #374151;
}

.mt-game-break-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.mt-game-break-card__link {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0a4d68;
    text-decoration: none;
}

.mt-game-break-card__link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .mt-game-break-card {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── رسالة PDF بعد التحميل ── */
.mt-pdf-game-promo {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(8, 131, 149, 0.35);
    background: linear-gradient(135deg, #061826 0%, #0a4d68 100%);
    color: #fff;
}

.mt-pdf-game-promo[hidden] {
    display: none !important;
}

.mt-pdf-game-promo__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.mt-pdf-game-promo__text {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.55;
    opacity: 0.95;
}

.mt-pdf-game-promo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.mt-pdf-game-promo__actions .btn-game {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}