header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 10px;

}

.logo {
  width: 250px;
  margin-left: 10px;
  flex-direction: row-reverse;
  direction: rtl;
  display: flex;

}

.header-nav {
  justify-content: center;
  display: flex;
  width: 250px;
}

.header-boxes {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  color: #414042;
  font-weight: 550;
  flex-direction: row-reverse;
  direction: rtl;
  display: flex;
  margin: auto;
}

.header1-boxes {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
  color: #ffffff;
  background-color: #007ac0;
  border-style: solid;
  border-color: #007ac0;
  border-width: 10px;
  border-radius: 20px;
  flex-direction: row-reverse;
  direction: rtl;
  display: flex;
  margin: auto;
}

/* ===== Main Page ===== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    overflow-x: hidden;
}

.leaderboard-btn {
    position: relative;
    overflow: visible;
    color: #111827;
    background: #ffffff;
    border: 1px solid #000000;
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease, color .2s ease, border-color .2s ease;
}

.leaderboard-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background: linear-gradient(130deg, #f9a825, #fbbc04, #ff6d00, #e91e63, #9c27b0);
    background-size: 300% 300%;
    animation: rainbowShift 1.2s ease infinite;
    box-shadow: 0 0 24px rgba(251, 188, 4, 0.7), 0 0 48px rgba(233, 30, 99, 0.4);
    color: #ffffff;
    border-color: transparent;
}

.leaderboard-btn:hover .btn-text {
    animation: shake .4s ease;
}

.confetti-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.confetti-piece {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    opacity: 0;
    animation: confettiFly .8s ease forwards;
}

.play-method-card {
    position: relative;
    border: 2px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(66, 133, 244, 0.7), rgba(52, 168, 83, 0.55), rgba(251, 188, 5, 0.6), rgba(234, 67, 53, 0.55)) border-box;
    transition: transform .22s ease, box-shadow .22s ease;
}

.play-method-card-blue {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(66, 133, 244, 0.85), rgba(251, 188, 5, 0.45), rgba(66, 133, 244, 0.55)) border-box;
}

.play-method-card-green {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(52, 168, 83, 0.85), rgba(251, 188, 5, 0.45), rgba(52, 168, 83, 0.55)) border-box;
}

.play-method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10), 0 0 18px rgba(66, 133, 244, 0.12);
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) rotate(-3deg); }
    75% { transform: translateX(4px) rotate(3deg); }
}

@keyframes confettiFly {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}

.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 250px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1rem;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* Mobile nav */
.mobile-menu-toggle {
    display: none;
    margin-right: 0.5rem;
    margin-left: 0;
    color: #374151;
    font-size: 1.15rem;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-nav-menu {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.mobile-nav-menu a {
    display: block;
    font-weight: 600;
    color: #4b5563;
    padding: 0.45rem 0.25rem;
}

.mobile-nav-menu:not(.hidden) {
    display: flex;
}

/* iPhone/Mobile Responsive Adjustments */
@media (max-width: 390px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

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

    nav {
        width: 100% !important;
    }

    nav > div.max-w-7xl {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box !important;
    }

    section,
    #hero,
    #about,
    #goals,
    #games,
    #play-methods,
    #faq,
    footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* prevent fixed-width tailwind utility from pushing page */
    .w-96 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 375px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

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

    nav {
        width: 100% !important;
    }

    nav > div.max-w-7xl {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        box-sizing: border-box !important;
    }

    section,
    #hero,
    #about,
    #goals,
    #games,
    #play-methods,
    #faq,
    footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .w-96 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    nav > div.max-w-7xl {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 0.35rem !important;
        direction: rtl !important;
    }

    .desktop-nav-links {
        display: none !important;
    }

    /* right side group stays right: logo + auth + greeting */
    nav > div.max-w-7xl > .flex.items-center.gap-4 {
        order: 1 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        min-width: 0 !important;
        gap: 0.3rem !important;
        direction: rtl !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4 img.h-10 {
        height: 30px !important;
        width: auto !important;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        order: 2 !important;          /* right side next to auth group */
        margin: 0 !important;
        padding: 0.15rem !important;
        min-width: 20px !important;
    }

    /* left side group: ألعابي + ابدأ اللعب */
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto {
        order: 3 !important;
        margin-right: auto !important; /* pushes this block to far left in RTL */
        margin-left: 0 !important;
        gap: 0.3rem !important;
        direction: rtl !important;
    }

    #nav-greeting {
        display: inline-flex !important;
        max-width: 62px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.64rem !important;
        line-height: 1 !important;
    }

    #nav-login-btn,
    #nav-logout-btn,
    #nav-my-games-btn,
    #nav-leaderboard-btn,
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto a[href="#games"] {
        font-size: 0.66rem !important;
        line-height: 1 !important;
        padding: 0.22rem 0.42rem !important;
        border-radius: 0.46rem !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 769px) {
    .mobile-menu-toggle,
    .mobile-nav-menu {
        display: none !important;
    }

    .desktop-nav-links {
        display: flex !important;
    }
}

/* Compact tablet navbar */
@media (min-width: 769px) and (max-width: 1120px) {
    nav > div.max-w-7xl {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        gap: 0.25rem !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4,
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto {
        gap: 0.3rem !important;
    }

    .desktop-nav-links {
        gap: 0.55rem !important;
        margin-right: 0.55rem !important;
        white-space: nowrap !important;
    }

    .desktop-nav-links a {
        font-size: 0.82rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4 img.h-10 {
        height: 32px !important;
        width: auto !important;
    }

    #nav-login-btn,
    #nav-logout-btn,
    #nav-my-games-btn,
    #nav-leaderboard-btn,
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto a[href="#games"] {
        font-size: 0.76rem !important;
        line-height: 1 !important;
        padding: 0.3rem 0.46rem !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    header {
        margin: 5px;
    }

    /* Reduce padding on mobile for better space usage */
    nav {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    nav div.max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        gap: 0.4rem !important;
    }

    /* Navbar buttons/links smaller on all small frames */
    nav a,
    nav button {
        font-size: 0.75rem !important;
        line-height: 1.1 !important;
        padding: 0.35rem 0.6rem !important;
        border-radius: 0.55rem !important;
        white-space: nowrap !important;
    }

    #nav-login-btn,
    #nav-logout-btn {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.72rem !important;
    }

    #nav-my-games-btn,
    #nav-leaderboard-btn {
        padding: 0.35rem 0.7rem !important;
        font-size: 0.74rem !important;
    }

    nav .hidden.lg\:flex,
    nav .hidden.md\:flex,
    nav .md\:flex {
        gap: 0.45rem !important;
    }

    .mobile-nav-menu a {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
        padding: 0.55rem 1rem !important;
        border-radius: 0 !important;
        font-weight: 700 !important;
    }

    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .max-w-3xl, .max-w-6xl, .max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Main page mobile layout */
@media (max-width: 768px) {
    body {
        min-width: 0;
    }

    nav {
        padding: 0 !important;
    }

    nav > div.max-w-7xl {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.55rem !important;
        padding: 0.75rem 0.9rem !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4:first-child {
        flex: 1 1 auto !important;
        order: 1 !important;
        gap: 0.5rem !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4:first-child img {
        height: 36px !important;
        flex: 0 0 auto !important;
    }

    .mobile-menu-toggle {
        order: 2 !important;
        width: 38px !important;
        height: 38px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.75rem !important;
        background: #ffffff !important;
        color: #1f2937 !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
        gap: 0.45rem !important;
    }

    #nav-login-btn,
    #nav-logout-btn,
    #nav-my-games-btn,
    #nav-leaderboard-btn,
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto a[href="#games"] {
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        padding: 0.42rem 0.7rem !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    #nav-leaderboard-btn {
        max-width: 136px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-nav-menu {
        padding: 0.35rem 1rem 0.9rem !important;
        text-align: right !important;
    }

    .mobile-nav-menu a {
        font-size: 1rem !important;
        padding: 0.7rem 0.5rem !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }

    #hero {
        min-height: calc(100svh - 116px);
        display: flex;
        align-items: center;
        padding: 3rem 1.25rem 3.5rem !important;
    }

    #hero > div {
        width: 100%;
        max-width: 31rem !important;
        padding: 0 !important;
    }

    #hero img[src*="google-developer-group"] {
        height: auto !important;
        width: min(78vw, 270px) !important;
        margin-bottom: 1.35rem !important;
    }

    #hero h1 {
        font-size: clamp(1.65rem, 7vw, 2.15rem) !important;
        line-height: 1.35 !important;
        margin-bottom: 1rem !important;
    }

    #hero h2 {
        font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    #hero .flex.items-center.justify-center.gap-6 {
        gap: clamp(0.8rem, 4vw, 1.35rem) !important;
        margin-bottom: 1.35rem !important;
    }

    #hero img[src*="shape"] {
        height: clamp(34px, 10vw, 48px) !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    #hero .w-96 {
        width: min(100%, 22rem) !important;
        max-width: 100% !important;
    }

    #hero p {
        font-size: clamp(1rem, 4vw, 1.2rem) !important;
        line-height: 1.9 !important;
    }

    #about,
    #goals,
    #games,
    #play-methods,
    #faq {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    #about .grid,
    footer .grid {
        gap: 1.75rem !important;
        text-align: right !important;
    }

    #about .justify-end {
        justify-content: center !important;
    }

    #about img {
        height: 8.5rem !important;
    }

    #goals h2,
    #games h2,
    #play-methods h2,
    #faq h2 {
        font-size: clamp(1.65rem, 6vw, 2rem) !important;
        line-height: 1.35 !important;
    }

    #goals .grid,
    #games .grid,
    #play-methods .grid {
        gap: 1.25rem !important;
    }

    #goals .grid > div,
    .play-method-card {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
    }

    .flip-card-inner {
        height: 220px !important;
    }

    .flip-card-front,
    .flip-card-back {
        padding: 1.5rem !important;
    }

    .flip-card-back p,
    .play-method-card p,
    #faq p {
        font-size: 0.95rem !important;
        line-height: 1.8 !important;
    }

    footer {
        text-align: right !important;
        padding: 2.75rem 1.25rem !important;
    }
}

@media (max-width: 380px) {
    nav > div.max-w-7xl {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto {
        gap: 0.3rem !important;
    }

    #nav-login-btn,
    #nav-logout-btn,
    #nav-my-games-btn,
    #nav-leaderboard-btn,
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto a[href="#games"] {
        font-size: 0.7rem !important;
        padding-left: 0.52rem !important;
        padding-right: 0.52rem !important;
    }

    #nav-leaderboard-btn {
        max-width: 112px !important;
    }

    #hero {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }
}

/* Cleaner mobile navbar: keep only My Games and Start visible */
@media (max-width: 768px) {
    nav > div.max-w-7xl {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        padding: 0.75rem 0.85rem !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4:first-child {
        flex: 0 0 auto !important;
        order: 1 !important;
        gap: 0.45rem !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4:first-child img {
        height: 34px !important;
    }

    #nav-login-btn,
    #nav-logout-btn,
    #nav-leaderboard-btn {
        display: none !important;
    }

    #nav-greeting.hidden {
        display: none !important;
    }

    #nav-greeting:not(.hidden) {
        display: inline-flex !important;
        max-width: 92px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: #374151 !important;
    }

    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto {
        order: 2 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        gap: 0.4rem !important;
    }

    #nav-my-games-btn,
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto a[href="#games"] {
        min-height: 34px !important;
        font-size: 0.78rem !important;
        padding: 0.42rem 0.75rem !important;
        border-radius: 999px !important;
    }

    .mobile-menu-toggle {
        order: 3 !important;
        flex: 0 0 38px !important;
        margin: 0 !important;
    }

    .mobile-nav-menu {
        gap: 0 !important;
        padding: 0.8rem 1rem 1rem !important;
        border-top: 1px solid #eef2f7 !important;
        border-radius: 0 0 1.25rem 1.25rem !important;
        box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
    }

    .mobile-menu-actions {
        display: grid;
        gap: 0.65rem;
        padding: 0.15rem 0 0.85rem;
        margin-bottom: 0.45rem;
        border-bottom: 1px solid #eef2f7;
    }

    .mobile-menu-actions .hidden {
        display: none !important;
    }

    .mobile-menu-actions a,
    .mobile-menu-actions button,
    .mobile-menu-actions span {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px !important;
        font-size: 0.95rem !important;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    #mobile-login-btn {
        color: #1d4ed8;
        border: 1px solid #bfdbfe !important;
        background: #eff6ff;
    }

    #mobile-logout-btn {
        color: #dc2626;
        border: 1px solid #fecaca !important;
        background: #fef2f2;
    }

    #mobile-greeting {
        display: none !important;
    }

    #mobile-leaderboard-btn {
        color: #111827;
        border: 1px solid #fde68a !important;
        background: #fffbeb;
    }

    .mobile-nav-menu > a {
        border-bottom: 0 !important;
        border-radius: 0.85rem !important;
        margin: 0.15rem 0 !important;
        padding: 0.72rem 0.85rem !important;
        color: #374151 !important;
        background: transparent !important;
    }

    .mobile-nav-menu > a:hover {
        background: #f8fafc !important;
        color: #2563eb !important;
    }

    #hero {
        min-height: calc(100svh - 64px);
        padding-top: 3.25rem !important;
    }
}

@media (max-width: 360px) {
    #nav-my-games-btn,
    nav > div.max-w-7xl > .flex.items-center.gap-4.mr-auto a[href="#games"] {
        font-size: 0.7rem !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }
}