/* Local Cairo Font (Offline Support) */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Cairo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Cairo-Bold.ttf') format('truetype');
}

/* Local Changa Font (Arabic + Latin Support) */
@font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Changa-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Changa';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Changa-Bold.woff2') format('woff2');
}

html,
body {
    margin: 0;
    padding: 0;
    background: #000;
    /* FORCE BLACK BACKGROUND */
    width: 100%;
    height: 100%;
    /* Prevent browser interference */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior: none;
}

/* Allow text selection only in specific elements if needed */
input,
textarea,
select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Prevent image dragging */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Re-enable pointer events for clickable images */
img.clickable,
.logo-wrapper img {
    pointer-events: auto;
}

/* Smooth Menu Transitions - Fade Effect */
#mainMenu,
#levelSelectMenu,
#optionsMenu,
#pauseMenu,
#victoryScreen {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#mainMenu.hidden,
#levelSelectMenu.hidden,
#optionsMenu.hidden,
#pauseMenu.hidden,
#victoryScreen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
    /* SWAPPED from flex to none for performance testing */
}

/* Juicy Button Interactions - Tactile Feel */
button:active {
    transform: scale(0.95);
    transition: transform 0.05s ease-out;
}

body {
    /* Animated Gradient Background: Deep Space Purple/Blue */
    background: linear-gradient(-45deg, #181425, #2e2252, #3e6990, #181425);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Cairo', sans-serif;
    color: white;
    user-select: none;
    touch-action: none;
    /* Arabic Default */
}

/* Gameplay Mode: Pure Black Background */
body.game-active {
    background: black !important;
    animation: none !important;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

canvas {
    image-rendering: pixelated;
    /* Keep game retro */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#ui {
    position: absolute;
    top: 20px;
    left: 20px;
    pointer-events: none;
    /* Let clicks pass through */
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 8px;
    /* backdrop-filter: blur(5px); */
    direction: ltr;
    /* Keep game hints LTR if English */
}

/* Glassmorphism Menus */
#menu,
#pauseMenu,
#victoryScreen,
#optionsMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 45, 0.3);
    /* Semi-transparent */
    /* backdrop-filter: blur(15px); REMOVED */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: white;
    z-index: 10;
    transition: opacity 0.5s ease;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
}

/* Ensure main menu content doesn't get squished */
body.desktop #menu {
    min-height: 100%;
}

body.desktop #menu .logo-wrapper {
    flex-shrink: 0;
    min-width: 200px;
}

body.desktop #menu .menu-buttons {
    flex-shrink: 0;
}

body.desktop #menu .controls-hint,
body.desktop #menu .credits {
    flex-shrink: 0;
}

/* Pause Menu - Compact for low resolutions */
body.desktop #pauseMenu {
    gap: 12px;
    /* backdrop-filter: blur(10px); */
}

#pauseMenu {
    /* backdrop-filter: blur(10px); */
    background: rgba(26, 26, 45, 0.5);
}

body.desktop #pauseMenu h1 {
    font-size: clamp(1.5em, 4vw, 3em);
    margin-bottom: 10px;
}

body.desktop #pauseMenu button {
    padding: 10px 25px;
    font-size: clamp(0.9em, 2vw, 1.3em);
    min-width: clamp(150px, 30vw, 250px);
}

/* Victory Screen - Compact for low resolutions */
body.desktop #victoryScreen {
    gap: 12px;
}

body.desktop #victoryScreen h1 {
    font-size: clamp(1.5em, 4vw, 3em);
}

body.desktop #victoryScreen p {
    font-size: clamp(0.9em, 2vw, 1.2em);
}

body.desktop #victoryScreen button {
    padding: 10px 25px;
    font-size: clamp(0.9em, 2vw, 1.3em);
}

/* Fixed-size Options Menu - Fills Screen */
body.desktop #optionsMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
    background: rgba(20, 20, 35, 0.95);
    /* backdrop-filter: blur(15px); */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Contained content area */
body.desktop #optionsMenu>* {
    max-width: 450px;
    width: 100%;
}

body.desktop #optionsMenu h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
}

body.desktop #optionsMenu h2 {
    font-size: 1.4rem;
    margin: 20px 0 10px 0;
    text-align: center;
}

body.desktop #optionsMenu .opt-row {
    width: 100%;
    max-width: 450px;
    margin: 8px 0;
    padding: 12px 16px;
}

body.desktop #optionsMenu #bindingsList {
    width: 100%;
    max-width: 450px;
    min-height: 150px;
    max-height: 250px;
    padding: 15px;
    overflow-y: auto;
    flex-shrink: 0;
}

body.desktop #optionsMenu button {
    margin-top: 15px;
}

.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    /* Fix for lingering blur */
}

/* Floating Logo Wrapper */
.logo-wrapper {
    position: relative;
    width: clamp(150px, 40vw, 400px);
    max-height: 30vh;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
}

/* Floating Logo */
.floating-logo {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    animation: float 4s ease-in-out infinite;
}

/* DEMO Badge style moved to logo-styles.css */

@keyframes demoPulse {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(163, 40, 88, 0.6),
            0 0 40px rgba(163, 40, 88, 0.3),
            0 4px 15px rgba(0, 0, 0, 0.4);
        transform: rotate(-15deg) scale(1);
    }

    50% {
        box-shadow:
            0 0 30px rgba(163, 40, 88, 0.8),
            0 0 60px rgba(163, 40, 88, 0.5),
            0 4px 20px rgba(0, 0, 0, 0.5);
        transform: rotate(-15deg) scale(1.05);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

h1,
h2,
label,
p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#menu h1,
#pauseMenu h1,
#victoryScreen h1,
#optionsMenu h1 {
    font-size: 4em;
    margin-bottom: 20px;
    color: #a32858;
    /* Logo Pink */
    text-shadow: 4px 4px 0 #000;
}

/* Button Styling */
button {
    font-family: 'Cairo', sans-serif;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 300px;
}

#menu button,
#pauseMenu button,
#victoryScreen button,
#optionsMenu #backBtn,
#levelSelectMenu .back-btn,
#creditsScreen .back-btn {
    /* Match settings-expand-btn style */
    background: linear-gradient(135deg, rgba(62, 105, 144, 0.3) 0%, rgba(94, 49, 91, 0.3) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    padding: 15px 0;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: none;
    width: auto;
    min-width: 300px;
    padding: 15px 40px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a32858;
}

#menu button:hover,
#pauseMenu button:hover,
#victoryScreen button:hover,
#optionsMenu #backBtn:hover,
#levelSelectMenu .back-btn:hover {
    background: linear-gradient(135deg, rgba(94, 49, 91, 0.4) 0%, rgba(163, 40, 88, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(163, 40, 88, 0.3);
}

/* Options Rows - RTL Layout */
.opt-row {
    margin: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 400px;
    font-size: 1.2em;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px;
    border-radius: 15px;
    direction: rtl;
    /* RTL: Label Right, Input Left */
}

.opt-row label {
    text-align: right;
}

input[type=range] {
    width: 200px;
    accent-color: #a32858;
}

/* Premium Custom Checkbox Styling */
input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(62, 105, 144, 0.3) 0%, rgba(94, 49, 91, 0.3) 100%);
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* backdrop-filter: blur(5px); */
}

input[type=checkbox]:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(94, 49, 91, 0.4) 0%, rgba(163, 40, 88, 0.4) 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(163, 40, 88, 0.3);
}

input[type=checkbox]:checked {
    background: linear-gradient(135deg, #a32858 0%, #5e315b 100%);
    border-color: #a32858;
    box-shadow: 0 0 15px rgba(163, 40, 88, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2);
}

input[type=checkbox]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

input[type=checkbox]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(163, 40, 88, 0.3);
}

input[type=checkbox]:active {
    transform: scale(0.95);
}

/* Premium Select Dropdown Styling */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: linear-gradient(135deg, rgba(62, 105, 144, 0.4) 0%, rgba(94, 49, 91, 0.4) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 15px 10px 35px;
    /* RTL: more padding on left for arrow */
    color: white;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    min-width: 150px;
    /* backdrop-filter: blur(5px); */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Custom dropdown arrow - positioned on left for RTL */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='rgba(255,255,255,0.7)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    text-align: center;
    direction: rtl;
}

select:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(94, 49, 91, 0.5) 0%, rgba(163, 40, 88, 0.5) 100%);
    box-shadow: 0 6px 20px rgba(163, 40, 88, 0.4);
    transform: translateY(-2px);
}

select:focus {
    outline: none;
    border-color: #a32858;
    box-shadow: 0 0 0 3px rgba(163, 40, 88, 0.3);
}

select option {
    background: #1a1a2d;
    color: white;
    padding: 10px;
}

.sm-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9em;
}

.sm-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: white;
}

/* Settings Expand Buttons */
.settings-expand-btn {
    width: 400px;
    margin: 8px 0;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(62, 105, 144, 0.3) 0%, rgba(94, 49, 91, 0.3) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    font-family: 'Cairo', sans-serif;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    direction: rtl;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.settings-expand-btn:hover {
    background: linear-gradient(135deg, rgba(94, 49, 91, 0.4) 0%, rgba(163, 40, 88, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.settings-expand-btn.active {
    background: linear-gradient(135deg, rgba(163, 40, 88, 0.4) 0%, rgba(94, 49, 91, 0.4) 100%);
    border-color: #a32858;
}

/* Settings Reset Button */
.settings-reset-btn {
    width: 400px;
    margin: 20px 0 10px 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(180, 40, 40, 0.4) 0%, rgba(120, 20, 20, 0.4) 100%);
    border: 2px solid rgba(255, 100, 100, 0.3);
    border-radius: 12px;
    color: white;
    font-family: 'Cairo', sans-serif;
    font-size: 0.95em;
    cursor: pointer;
    text-align: center;
    direction: rtl;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.settings-reset-btn:hover {
    background: linear-gradient(135deg, rgba(200, 50, 50, 0.5) 0%, rgba(150, 30, 30, 0.5) 100%);
    border-color: rgba(255, 100, 100, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(200, 50, 50, 0.3);
}

/* Bindings Panels (Collapsible) */
.bindings-panel {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px 20px;
    border-radius: 12px;
    width: 400px;
    box-sizing: border-box;
    margin: 5px 0 15px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bindings-panel.hidden {
    display: none;
}

/* Platform-specific visibility */
/* Keyboard bindings - desktop only */
body.mobile #keyboardBindingsBtn,
body.mobile #keyboardBindingsList {
    display: none !important;
}

/* Touch controls - mobile only */
body.desktop #editControlsBtn {
    display: none !important;
}

/* Legacy bindingsList - keep for compatibility */
#bindingsList {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
    max-height: 300px;
    overflow-y: auto;
    width: 400px;
}

.bind-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    direction: rtl;
    /* RTL: Label Right, Button Left */
}

.bind-row:last-child {
    border-bottom: none;
}

.bind-row span {
    font-size: 1em;
}

.controls-hint {
    margin-top: 30px;
    opacity: 0.8;
    font-size: 0.9em;
    direction: rtl;
}

#bg-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    /* Soft, Pleasing Atmospheric Gradient */
    background: radial-gradient(circle at center,
            #4a2858 0%,
            #2e2252 40%,
            #1a1530 80%,
            #0d0b1a 100%);
}

/* Aurora/Energy Wave Effect */
.aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(163, 40, 88, 0.05) 20%,
            rgba(62, 105, 144, 0.08) 40%,
            rgba(94, 49, 91, 0.06) 60%,
            transparent 100%);
    filter: blur(60px);
    animation: auroraWave 20s ease-in-out infinite;
}

.aurora::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -20%;
    width: 140%;
    height: 60%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(94, 49, 91, 0.08) 25%,
            rgba(163, 40, 88, 0.1) 50%,
            rgba(62, 105, 144, 0.08) 75%,
            transparent 100%);
    filter: blur(80px);
    animation: auroraShift 30s ease-in-out infinite alternate;
}

@keyframes auroraWave {

    0%,
    100% {
        opacity: 0.7;
        transform: translateY(0) scaleY(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-30px) scaleY(1.15);
    }
}

@keyframes auroraShift {
    0% {
        transform: translateX(-15%) skewX(-8deg);
    }

    100% {
        transform: translateX(15%) skewX(8deg);
    }
}

/* Atmospheric Dust Particles */
.atmospheric-dust {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    opacity: 0.6;
    animation: floatDust linear infinite;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255, 180, 220, 0.3);
}

/* God Rays Effect */
.godray {
    position: absolute;
    top: -20%;
    left: 50%;
    width: 100px;
    height: 150%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            transparent 100%);
    transform-origin: top center;
    pointer-events: none;
    filter: blur(20px);
    opacity: 0.5;
    animation: godraySway 15s ease-in-out infinite alternate;
}

@keyframes godraySway {
    0% {
        transform: translateX(-50%) rotate(-15deg);
        opacity: 0.3;
    }

    100% {
        transform: translateX(-50%) rotate(15deg);
        opacity: 0.6;
    }
}

/* Cinematic Vignette Overlay */
.vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
}

/* Shooting Star Effect */
.shooting-star {
    position: absolute;
    height: 2px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
    animation: shoot 2s ease-out forwards;
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
}

@keyframes shoot {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(-45deg) scale(0.8);
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-500px) translateY(500px) rotate(-45deg) scale(1);
    }
}

@keyframes floatDust {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.8;
        transform: translateY(-40vh) translateX(20px) scale(1.2);
    }

    90% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translateY(-100vh) translateX(-20px) scale(0.8);
    }
}

/* Nebula Clouds */
.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: floatNebula 20s infinite alternate ease-in-out;
}

@keyframes floatNebula {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }

    100% {
        transform: translate(100px, -50px) scale(1.3);
        opacity: 0.7;
    }
}

/* Rotating Star Layers */
.star-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vmax;
    /* Enough to cover diagonal rotation */
    height: 200vmax;
    transform: translate(-50%, -50%);
    animation: rotateGalaxy linear infinite;
}

.layer-1 {
    animation-duration: 180s;
    opacity: 0.6;
}

/* Far background */
.layer-2 {
    animation-duration: 120s;
    opacity: 0.8;
}

/* Midground */
.layer-3 {
    animation-duration: 80s;
    opacity: 1.0;
}

/* Foreground */

@keyframes rotateGalaxy {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Individual Stars */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    animation: pulseStar var(--duration, 3s) infinite ease-in-out alternate;
    animation-delay: var(--delay, 0s);
}

@keyframes pulseStar {
    0% {
        opacity: 0.5;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.star.pink {
    background: #ff7aa2;
    box-shadow: 0 0 10px #ff7aa2;
    color: #ff7aa2;
}

.star.purple {
    background: #d0a3ff;
    box-shadow: 0 0 10px #d0a3ff;
    color: #d0a3ff;
}

.star.blue {
    background: #a6e1fa;
    box-shadow: 0 0 10px #a6e1fa;
    color: #a6e1fa;
}

@media screen and (max-height: 500px) {
    .floating-logo {
        max-height: 100px;
        width: auto;
    }

    .logo-wrapper {
        width: auto;
        max-width: 200px;
        margin-bottom: 10px;
    }

    #menu h1 {
        font-size: 1.5em;
        margin-bottom: 5px;
    }

    button {
        padding: 8px 16px;
        font-size: 0.9em;
    }

    .menu-buttons {
        gap: 8px;
    }

    .controls-hint {
        font-size: 0.7em;
        margin-top: 10px;
    }

    .credits {
        font-size: 0.7em;
    }
}

/* TOUCH CONTROLS OVERLAY (ADDED) */
#touch-controls {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
    touch-action: none;
    background: transparent !important;
    /* Ensure transparent */
}

.touch-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: auto;
}

.touch-zone.left {
    left: 0;
    width: 50%;
}

.touch-zone.right {
    right: 0;
    width: 50%;
    pointer-events: none;
}

/* Joystick Visuals */
.joy-base {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.joy-stick {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.joy-base.hidden,
.joy-stick.hidden {
    opacity: 0;
}

/* Buttons */
.touch-btn {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 2em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    user-select: none;
    /* backdrop-filter: blur(5px); */
}

.touch-btn.pressed {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.95);
}

.btn-jump {
    bottom: 40px;
    right: 40px;
    background: rgba(0, 200, 0, 0.3);
}

.btn-dash {
    bottom: 60px;
    right: 140px;
    background: rgba(200, 0, 0, 0.3);
}

.btn-pause {
    top: 20px !important;
    bottom: auto !important;
    right: 20px !important;
    left: auto !important;
    width: 50px;
    height: 50px;
    font-size: 1.2em;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    z-index: 2000;
}

/* Override Mobile Landscape Layout */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #menu {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .floating-logo {
        display: block !important;
        width: 250px;
        margin: 0 20px 0 0;
    }

    #menu h1 {
        display: none;
    }

    #menu button {
        padding: 8px 0;
        min-width: 220px;
        font-size: 1.1em;
    }
}

/* D-pad Container - 8-Direction Static Input */
.dpad-container {
    position: absolute;
    width: 150px;
    height: 150px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    pointer-events: auto;
    touch-action: none;
}

/* D-pad Buttons */
.dpad-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    color: white;
    font-size: 1.2em;
    user-select: none;
    pointer-events: auto;
    touch-action: none;
    /* backdrop-filter: blur(5px); */
    transition: background 0.1s, transform 0.1s;
}

/* Level Cards Polished */
.level-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    overflow: hidden;
    /* backdrop-filter: blur(10px); */
}

.level-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-color: #ff64aa;
}

.dpad-btn.pressed {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0.95);
    border-color: white;
}

/* Cardinal directions - slightly larger */
.dpad-up,
.dpad-down,
.dpad-left,
.dpad-right {
    background: rgba(255, 255, 255, 0.2);
}

/* Diagonal directions - slightly different styling */
.dpad-up-left,
.dpad-up-right,
.dpad-down-left,
.dpad-down-right {
    background: rgba(255, 255, 255, 0.1);
    font-size: 1em;
}


/* FORCE LANDSCAPE IN PORTRAIT - CLEANED */
@media screen and (orientation: portrait) {
    html {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        position: static !important;
    }

    body {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100vh !important;
        height: 100vw !important;
        transform: translate(-50%, -50%) rotate(90deg) !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    #touch-controls {
        position: fixed !important;
        width: 100vw !important;
        height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
        pointer-events: none;
        z-index: 2000 !important;
    }

    /* Rotate the visual elements to match the sideways game */
    .touch-btn {
        transform: rotate(90deg) !important;
    }

    .touch-btn.pressed {
        transform: rotate(90deg) scale(0.95) !important;
    }

    /* D-pad rotation for portrait mode */
    .dpad-container {
        transform: rotate(90deg) !important;
    }

    .dpad-btn.pressed {
        transform: scale(0.95) !important;
    }

    /* 
       Reposition Buttons for Portrait (Physical Bottom-Left) 
       Mapping: 
       Land Right (X) -> Port Bottom (Y)
       Land Bottom (Y) -> Port Left (X)
    */
    .btn-jump {
        right: auto !important;
        left: 40px !important;
        bottom: 40px !important;
    }

    .btn-dash {
        right: auto !important;
        left: 60px !important;
        bottom: 140px !important;
    }

    /* Adjust specific buttons if needed for "Visual" placement */
    /* Since we are in Portrait Screen Space:
       Bottom-Right is "Top-Right" of Game? 
       No. 
       If phone is Portrait. Bottom-Right (Physical) is where the buttons are.
       If we hold phone sideways (Landscape). Bottom-Right (Physical) becomes Top-Right (Visual).
       We want buttons at "Game Bottom-Right".
       "Game Bottom-Right" is "Physical Bottom-Left"? (If Home button right).
       
       Wait.
       If Home Button Right.
       Top of Phone is Left. Bottom of Phone is Right.
       Left of Phone is Top. Right of Phone is Bottom.
       
       We want Buttons at "Game Bottom-Right".
       Game Bottom-Right -> Physical Right-Bottom.
       This IS Physical Bottom-Right.
       
       So positioning is correct?
       Let's stick to standard positioning first. Use the individual rotation to look good.
    */

    #menu {
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: center !important;
    }

    .floating-logo {
        display: block !important;
        width: 250px !important;
        margin: 0 20px 0 0 !important;
    }

    #menu h1 {
        display: none !important;
    }

    #menu button {
        padding: 8px 0 !important;
        min-width: 220px !important;
        font-size: 1.1em !important;
    }
}

/* Controls Editor UI */
#controls-editor-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    pointer-events: none;
    /* Let clicks pass to controls for dragging */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center vertically */
    padding: 20px;
    box-sizing: border-box;
}

#controls-editor-ui .editor-panel {
    pointer-events: auto;
    /* Enable interaction with panel */
    background: rgba(0, 0, 0, 0.9);
    padding: 25px 30px;
    border-radius: 15px;
    border: 2px solid #a32858;
    text-align: center;
    /* backdrop-filter: blur(10px); */
    max-width: 90%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#controls-editor-ui .editor-panel.panel-hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

/* Toggle Panel Button */
.toggle-panel-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 12px 20px;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #a32858;
    color: white;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    transition: all 0.3s ease;
    direction: rtl;
}

.toggle-panel-btn:hover {
    background: rgba(163, 40, 88, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(163, 40, 88, 0.4);
}

.toggle-panel-btn.panel-visible {
    background: #a32858;
}

#controls-editor-ui h2 {
    margin: 0 0 20px 0;
    font-size: 1.4em;
    color: white;
}

.slider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    width: 300px;
}

.slider-row label {
    font-size: 1em;
}

.editor-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

/* Edit Mode Visuals for Controls */
.edit-mode .dpad-container,
.edit-mode .touch-btn {
    border: 2px dashed yellow !important;
    background: rgba(255, 255, 0, 0.2) !important;
    cursor: move;
}

.edit-mode .dpad-btn {
    border: 1px dashed yellow !important;
}


/* Mobile / Portrait Menu Adaptations */
@media screen and (orientation: portrait) {
    /* Menus need to be sized for the Rotated View */
    /* Since Body is rotated 90deg, width/height are swapped in screen space, 
       but we are inside the rotated body, so 100% width is 100% 'Height' of phone.
       Wait.
       Body is 100vh width, 100vw height.
       So children of body (menus) should just fill that.
    */

    #optionsMenu,
    #pauseMenu,
    #victoryScreen {
        width: 85vh !important;
        /* Slightly less than full height (width of phone) */
        height: 90vw !important;
        /* Fill most of width (height of phone) */
        padding: 10px !important;
        overflow-y: auto !important;
        /* Allow scrolling if list is long */
    }

    #optionsMenu h1,
    #pauseMenu h1 {
        font-size: 2em !important;
        margin-bottom: 10px !important;
    }

    #optionsMenu h2 {
        font-size: 1.5em !important;
        margin: 10px 0 !important;
    }

    .opt-row {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .opt-row label {
        font-size: 1.2em !important;
    }

    button {
        padding: 12px 24px !important;
        font-size: 1.2em !important;
    }

    /* Bindings List Compact Mode */
    #bindingsList .bind-row {
        display: flex;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 5px 0;
    }

    #bindingsList span {
        text-align: left !important;
        width: auto !important;
    }
}


/* Desktop: Hide Mobile Controls Options */
body.desktop #editControlsBtn {
    display: none !important;
}

body.desktop #touch-controls {
    display: none !important;
}

/* 
   ==========================================================================
   FINAL MOBILE UI OVERRIDES - CONSOLIDATED & CLEANED
   ==========================================================================
*/

/* -----------------------------------------------------
   SETTINGS MENU - NATIVE APP FEEL
   ----------------------------------------------------- */

body.mobile #optionsMenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: #111 !important;
    /* Solid dark background */
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}

/* Visibility Fix for Hidden Menu */
body.mobile #optionsMenu.hidden,
body.mobile #levelSelectMenu.hidden,
body.mobile #pauseMenu.hidden,
body.mobile #victoryScreen.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Header */
body.mobile h1 {
    font-size: 2em !important;
    margin: 20px 0 20px 0 !important;
    width: 100% !important;
    text-align: center !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #151515 !important;
}

/* Rows - Full Width List Items */
body.mobile .opt-row {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: rtl !important;
    /* RTL: Label Right, Input Left */
}

body.mobile .opt-row label {
    font-size: 1.2em !important;
    margin: 0 !important;
    text-align: right !important;
}

/* Sliders - Clean Native Look */
body.mobile input[type=range] {
    width: 75% !important;
    /* Wider sliders */
    height: 30px !important;
    margin-right: 15px !important;
    transform: none !important;
    /* Reset zoom */
    accent-color: #a32858 !important;
    /* Standard Accent */
}

/* Checkboxes */
body.mobile input[type=checkbox] {
    width: 25px !important;
    height: 25px !important;
    margin-right: 15px !important;
}

/* Mobile Select Dropdown */
body.mobile select {
    min-width: 120px !important;
    padding: 12px 35px 12px 12px !important;
    font-size: 1em !important;
    margin-right: 10px !important;
}

/* Mobile Settings Expand Buttons */
body.mobile .settings-expand-btn {
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 15px 20px !important;
    font-size: 1.1em !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Mobile Bindings Panels */
body.mobile .bindings-panel {
    width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px 15px !important;
}

/* Mobile Reset Button */
body.mobile .settings-reset-btn {
    width: 100% !important;
    margin: 15px 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* Hide Clutter */
body.mobile #bindingsList {
    display: none !important;
}

body.mobile #optionsMenu h2 {
    display: none !important;
}

/* Back Button */
body.mobile #optionsMenu #backBtn {
    width: 90% !important;
    margin: 10px auto 30px auto !important;
    padding: 15px !important;
    font-size: 1.2em !important;
    border-radius: 10px !important;
    background: #555 !important;
    position: static !important;
    display: block !important;
    order: 11 !important;
    /* Below Edit Btn */
}


/* -----------------------------------------------------
/* -----------------------------------------------------
   LEVEL SELECT - RESTORED LIST VIEW (Portrait)
   ----------------------------------------------------- */

body.mobile #levelSelectMenu {
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #111 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

body.mobile #levelSelectMenu h1 {
    font-size: 1.5em !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    flex-shrink: 0 !important;
}

body.mobile .level-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    padding-bottom: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    max-height: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}

/* List Item Row (The "Cool" Old Design) */
body.mobile .level-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 20px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #181818 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    /* Text Right, Stars Left */
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 80px !important;
    text-align: right !important;
}

/* Alternating Colors */
body.mobile .level-card:nth-child(even) {
    background: #202025 !important;
}

body.mobile .level-info {
    text-align: right !important;
    flex: 1 !important;
    margin: 0 !important;
    width: auto !important;
}

body.mobile .level-title {
    font-size: 1.3em !important;
    display: block !important;
    margin-bottom: 5px !important;
}

body.mobile .level-stars {
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
    width: auto !important;
    justify-content: flex-start !important;
}

body.mobile .level-stars .star {
    font-size: 1.4em !important;
    margin: 0 !important;
    opacity: 1 !important;
    color: #444 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.mobile .level-stars .star.filled {
    color: #ffd700 !important;
}

/* -----------------------------------------------------
   FORCED LANDSCAPE / REAL LANDSCAPE OVERRIDES
   ----------------------------------------------------- */
@media (orientation: landscape) {
    body.mobile #levelSelectMenu {
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.85) !important;
    }

    body.mobile .level-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 20px !important;
        padding: 20px !important;
        padding-bottom: 80px !important;
        max-width: 1200px !important;
        justify-content: center !important;
    }

    body.mobile .level-card {
        flex-direction: column !important;
        border-radius: 15px !important;
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(0, 0, 0, 0.4) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        text-align: center !important;
        justify-content: center !important;
    }

    body.mobile .level-card:nth-child(even) {
        background: rgba(0, 0, 0, 0.4) !important;
    }

    body.mobile .level-info {
        text-align: center !important;
    }

    body.mobile .level-stars {
        justify-content: center !important;
    }
}

/* -------------------------------------------
/* [Forced Horizontal Hack Removed for Stability] */


/* Meta / Checkmark / Download */
body.mobile .level-meta {
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
    /* Push buttons to far left */
}

body.mobile .checkmark {
    margin: 0 !important;
    font-size: 1.5em !important;
}

/* Download Button - RESTORED */
body.mobile .replay-export-btn {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1.2em !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px !important;
    color: white !important;
    /* Ensure visible */
}

/* Hide Controls Hint on Mobile */
body.mobile .controls-hint {
    display: none !important;
}

/* Level Select Layout Fix */
body.mobile #levelSelectMenu {
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.mobile #levelSelectMenu .level-list {
    width: 100% !important;
    height: calc(100% - 60px) !important;
    /* Leave space for back button */
    padding: 20px 20px 80px 20px !important;
    /* Bottom padding for back button overlap */
    margin: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    /* Adaptive grid for rotated view */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    overflow-y: auto !important;
}

/* Level Select Back Button */
body.mobile #levelSelectMenu .back-btn {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    /* Compact button */
    font-size: 1.1em !important;
    border-radius: 0 !important;
    background: #3e6990 !important;
    z-index: 20 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile Fullscreen Button - Force Visible In-Game */
body.mobile #fullscreenBtn {
    display: flex !important;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 99999;
    /* Ensure on top of everything */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    padding-bottom: 4px;
    /* Align icon */
}

body.mobile #fullscreenBtn.hidden {
    display: none !important;
}

/* Interaction Fixes */
button,
.level-card,
#fullscreenBtn {
    touch-action: manipulation !important;
    cursor: pointer;
}

/* -----------------------------------------------------
   MOBILE MAIN MENU REDESIGN - IMMACULATE SPLIT LAYOUT
   ----------------------------------------------------- */

body.mobile #menu {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Determine Layout based on orientation below */
}

/* Portrait: Stacked (Logo Top, Buttons Bottom) */
@media (orientation: portrait) {
    body.mobile #menu {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px !important;
    }

    body.mobile .logo-wrapper {
        width: 80% !important;
        max-width: 400px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    body.mobile .menu-buttons {
        width: 80% !important;
        max-width: 300px !important;
    }
}

/* Landscape: Split Screen (Logo Left, Buttons Right) */
@media (orientation: landscape) {
    body.mobile #menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 0 !important;
    }

    /* Left Half: Logo */
    body.mobile .logo-wrapper {
        grid-column: 1 !important;
        width: fit-content !important;
        /* CRITICAL: Hug the content */
        max-width: 80% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        /* Ensure badge anchors here */
        display: block !important;
        flex: unset !important;
        /* Disable flex growing */
        /* Sizing - increased for better visibility */
        transform: scale(1.3);
    }

    body.mobile .floating-logo {
        max-width: 100% !important;
        width: 400px !important;
        display: block !important;
    }

    /* Right Half: Buttons */
    body.mobile .menu-buttons {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        gap: 10px !important;
        flex: unset !important;
    }

    body.mobile .menu-buttons button {
        width: 70% !important;
        max-width: 300px !important;
        min-width: unset !important;
        margin: 0 !important;
        font-size: 1em !important;
        padding: 8px 0 !important;
    }
}



/* Credits Signature */
.credits {
    position: fixed;
    bottom: 15px;
    right: 20px;
    font-size: 1em;
    /* Default Desktop */
    color: rgba(255, 255, 255, 0.5);
    z-index: 100000;
    /* Above everything */
    pointer-events: none;
    font-family: 'Cairo', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin: 0;
    padding: 0;
    width: auto;
}

/* Mobile Adjustments for Credits */
body.mobile .credits {
    font-size: 0.8em !important;
    bottom: 10px !important;
    right: 15px !important;
    /* Ensure it stays in corner and does not affect layout */
    transform: none !important;
    text-align: right !important;
    width: auto !important;
    position: fixed !important;
}

/* -------------------------------------------
   PORTRAIT BLOCKER (Force Landscape)
   ------------------------------------------- */
#portraitBlocker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000 !important;
    z-index: 2147483647;
    /* Max integer z-index */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Cairo', sans-serif;
    text-align: center;
    /* Allow touch on blocking element so we can have a button if needed, 
       but it covers everything else. */
}

#portraitBlocker.hidden {
    display: none !important;
}

#portraitBlocker h1 {
    margin-top: 30px;
    font-size: 2em;
    color: #a32858;
}

#portraitBlocker p {
    font-size: 1.2em;
    opacity: 0.8;
    margin-top: 10px;
}

/* Phone Rotating Animation */
.phone-icon {
    width: 60px;
    height: 100px;
    border: 4px solid white;
    border-radius: 10px;
    position: relative;
    animation: rotatePhone 2s infinite ease-in-out;
}

/* Screen line inside phone */
.phone-icon::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 5px;
    right: 5px;
    bottom: 10px;
    background: rgba(255, 255, 255, 0.1);
}

@keyframes rotatePhone {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(90deg);
    }

    70% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Utility to Force Hide Touch Controls */
.force-hidden-controls {
    display: none !important;
}

/* ===========================================
   LTR (Left-to-Right) Language Overrides
   Applied when body[dir="ltr"] is set
   =========================================== */

body[dir="ltr"] {
    direction: ltr;
}

/* LTR: Reverse opt-row direction */
body[dir="ltr"] .opt-row {
    direction: ltr;
    justify-content: space-between;
}

body[dir="ltr"] .opt-row label {
    text-align: left;
}

/* LTR: Select dropdown padding */
body[dir="ltr"] select {
    padding: 10px 35px 10px 15px;
    background-position: right 15px center;
}

/* LTR: Bindings list direction */
body[dir="ltr"] .bindings-list {
    direction: ltr;
}

/* LTR: Settings reset button */
body[dir="ltr"] .settings-reset-btn {
    direction: ltr;
}

/* LTR: Controls hint alignment */
body[dir="ltr"] .controls-hint {
    text-align: center;
}

/* LTR: Credits alignment */
body[dir="ltr"] .credits {
    text-align: center;
}

/* LTR: Menu buttons */
body[dir="ltr"] .menu-buttons {
    direction: ltr;
}

/* LTR: Slider row */
body[dir="ltr"] .slider-row {
    direction: ltr;
}

body[dir="ltr"] .slider-row label {
    text-align: left;
}

/* LTR: Bind row */
body[dir="ltr"] .bind-row {
    direction: ltr;
}

/* LTR: Level select */
body[dir="ltr"] .level-card {
    direction: ltr;
}

body[dir="ltr"] .level-info {
    text-align: left;
}

/* LTR: Editor panel */
body[dir="ltr"] .editor-panel {
    direction: ltr;
}

/* LTR: Settings expand buttons */
body[dir="ltr"] .settings-expand-btn {
    direction: ltr;
}

body[dir="ltr"] .settings-reset-btn {
    direction: ltr;
}

/* LTR: Mobile overrides */
@media (max-width: 1024px),
(hover: none),
(pointer: coarse) {
    body[dir="ltr"].mobile .opt-row {
        direction: ltr;
    }

    body[dir="ltr"].mobile .opt-row label {
        text-align: left;
    }
}

/* ========================================
   MOBILE LEVEL SELECT - HORIZONTAL SWIPE
   ======================================== */
body.mobile #levelSelectMenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 15px 0 !important;
    justify-content: flex-start !important;
    padding-top: 40px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    background: rgba(26, 26, 45, 0.98) !important;
}

body.mobile #levelSelectMenu h1 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

body.mobile #levelSelectMenu .level-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: none !important;
    gap: 15px !important;
    padding: 20px calc((100vw - (3 * calc((100vw - 60px) / 3)) - 30px) / 2 + 10px) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
}

body.mobile #levelSelectMenu .level-list .level-card {
    /* Width = (screen width - left/right padding - 2 gaps) / 3 */
    flex: 0 0 calc((100vw - 60px) / 3) !important;
    min-width: calc((100vw - 60px) / 3) !important;
    max-width: calc((100vw - 60px) / 3) !important;
    height: 160px !important;
    padding: 15px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 15px !important;
    gap: 8px !important;
    scroll-snap-align: start !important;
}

body.mobile #levelSelectMenu .level-card .level-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

body.mobile #levelSelectMenu .level-card .level-title {
    font-size: 1.1em !important;
    margin: 0 !important;
}

body.mobile #levelSelectMenu .level-card .level-stars {
    font-size: 1em !important;
}

body.mobile #levelSelectMenu .level-card .level-stars .star {
    font-size: 1em !important;
}

body.mobile #levelSelectMenu .level-card .level-meta {
    margin-top: 8px;
    padding: 0;
    border: none;
}

body.mobile #levelSelectMenu .level-card .checkmark {
    font-size: 1.2em;
}

body.mobile #levelSelectMenu .level-card .locked-msg {
    font-size: 0.6em;
    margin-top: 5px;
}

body.mobile #levelSelectMenu .level-card.locked {
    opacity: 0.5;
}

body.mobile #levelSelectMenu .back-btn {
    margin-top: 20px;
    padding: 12px 35px;
    font-size: 1em;
}

/* Scroll indicator arrow */
body.mobile #levelSelectMenu .level-list::after {
    content: '→';
    position: sticky;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    pointer-events: none;
    animation: pulseArrow 1.5s ease-in-out infinite;
}

@keyframes pulseArrow {

    0%,
    100% {
        opacity: 0.5;
        transform: translateY(-50%) translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) translateX(5px);
    }
}

/* Square/portrait screens - show 2 cards instead of 3 */
@media (max-aspect-ratio: 4/3) {
    body.mobile #levelSelectMenu .level-list .level-card {
        flex: 0 0 calc((100vw - 45px) / 2) !important;
        min-width: calc((100vw - 45px) / 2) !important;
        max-width: calc((100vw - 45px) / 2) !important;
        height: 180px !important;
    }

    body.mobile #levelSelectMenu .level-card .level-title {
        font-size: 1.2em !important;
    }
}

/* Very tall/portrait screens - show 2 larger cards */
@media (max-aspect-ratio: 1/1) {
    body.mobile #levelSelectMenu .level-list .level-card {
        flex: 0 0 calc((100vw - 45px) / 2) !important;
        min-width: calc((100vw - 45px) / 2) !important;
        max-width: calc((100vw - 45px) / 2) !important;
        height: 200px !important;
    }

    body.mobile #levelSelectMenu .level-card .level-title {
        font-size: 1.3em !important;
    }

    body.mobile #levelSelectMenu .level-card .level-stars {
        font-size: 1.1em !important;
    }
}

/* Mobile Matrix Card - Special Green Glitch Design */
body.mobile #levelSelectMenu .level-card.matrix-card {
    background: linear-gradient(135deg, rgba(0, 50, 0, 0.9) 0%, rgba(0, 20, 0, 0.95) 100%) !important;
    border: 2px solid #00ff41 !important;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.3), inset 0 0 20px rgba(0, 255, 65, 0.1) !important;
    animation: matrixGlitch 3s infinite !important;
}

body.mobile #levelSelectMenu .level-card.matrix-card .level-title {
    color: #00ff41 !important;
    text-shadow: 0 0 10px #00ff41 !important;
}

body.mobile #levelSelectMenu .level-card.matrix-card .glitch-star {
    color: #00ff41 !important;
    text-shadow: 0 0 8px #00ff41 !important;
}

body.mobile #levelSelectMenu .level-card.matrix-card .overflow-star {
    color: #ff0040 !important;
    text-shadow: 0 0 10px #ff0040 !important;

}

body.mobile #levelSelectMenu .level-card.matrix-card .glitch-error {
    color: #ff0040 !important;
    font-size: 1em !important;
    position: relative !important;
    top: 4px !important;
}

body.mobile #levelSelectMenu .level-card.matrix-card .matrix-error-msg {
    color: #ff0040 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.5em !important;
    margin-top: 5px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

body.mobile #levelSelectMenu .level-card.matrix-card .matrix-stars-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1px !important;
}

/* Make Matrix stars area stack vertically on mobile */
body.mobile #levelSelectMenu .level-card.matrix-card .level-stars {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
}

/* ========================================
   MOBILE THEMED LEVEL CARDS
   ======================================== */

/* Mobile Training Card - Warm Sanaa Rooftop Theme */
body.mobile #levelSelectMenu .level-card.training-card {
    background: linear-gradient(135deg, rgba(180, 120, 80, 0.9) 0%, rgba(140, 90, 60, 0.95) 100%) !important;
    border: 2px solid #d4a574 !important;
    box-shadow: 0 0 15px rgba(212, 165, 116, 0.3) !important;
}

body.mobile #levelSelectMenu .level-card.training-card .level-title {
    color: #ffe4c4 !important;
}

body.mobile #levelSelectMenu .level-card.training-card .training-badge {
    font-size: 0.8em !important;
    color: #ffd4a8 !important;
    padding: 4px 8px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
}

/* Mobile Temple Card - Deep Jungle Stone Theme */
body.mobile #levelSelectMenu .level-card.temple-card {
    background: linear-gradient(135deg, #3d3d52 0%, #2b2b3b 100%) !important;
    border: 2px solid #606080 !important;
    box-shadow: 0 0 15px rgba(96, 96, 128, 0.3) !important;
}

body.mobile #levelSelectMenu .level-card.temple-card .level-title {
    color: #a0a0c0 !important;
}

body.mobile #levelSelectMenu .level-card.temple-card .level-stars .star.filled {
    color: #ffeb3b !important;
    filter: drop-shadow(0 0 4px rgba(255, 235, 59, 0.6)) !important;
}

/* Mobile Space Card - Icy Blue Space Theme */
body.mobile #levelSelectMenu .level-card.space-card {
    background: linear-gradient(135deg, rgba(20, 40, 80, 0.9) 0%, rgba(10, 20, 50, 0.95) 100%) !important;
    border: 2px solid #5dade2 !important;
    box-shadow: 0 0 15px rgba(93, 173, 226, 0.3) !important;
}

body.mobile #levelSelectMenu .level-card.space-card .level-title {
    color: #aed6f1 !important;
}

body.mobile #levelSelectMenu .level-card.space-card .level-stars .star.filled {
    color: #85c1e9 !important;
}

/* Confirmation Modal - Added to ensure visibility */
#confirmModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* backdrop-filter: blur(10px); */
    z-index: 20000 !important;
    /* Extremely high to cover everything */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

#confirmModal.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.modal-content {
    background: linear-gradient(135deg, #2e2252 0%, #181425 100%);
    padding: 30px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    font-family: 'Cairo', sans-serif;
    color: white;
}

.warning-icon {
    font-size: 3em;
    margin-bottom: 15px;
    animation: pulse 2s infinite;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.confirm-btn {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    border: 2px solid #e74c3c;
    border-radius: 10px;
    padding: 10px 25px;
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(192, 57, 43, 0.4);
}

.cancel-btn {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border: 2px solid #5d6d7e;
    border-radius: 10px;
    padding: 10px 25px;
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(44, 62, 80, 0.4);
}

/* ========================================
   CREDITS SCREEN
   ======================================== */

#creditsScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 30px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
}

#creditsScreen h1 {
    font-size: 2.2em;
    color: #c94b7c;
    margin-bottom: 5px;
}

.credits-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
}

/* Credits row - matches opt-row style */
.credits-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(20, 25, 40, 0.9) 0%, rgba(30, 35, 55, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 18px 25px;
    gap: 20px;
}

.credits-label {
    color: #c94b7c;
    font-size: 1.1em;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.credits-value {
    color: white;
    font-size: 1.2em;
    text-align: left;
}

.credits-names {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05em;
}

/* Inspiration note - centered, subtle */
.credits-note {
    justify-content: center;
    background: linear-gradient(135deg, rgba(15, 20, 35, 0.7) 0%, rgba(25, 30, 50, 0.7) 100%);
    border: 1px solid rgba(163, 40, 88, 0.2);
}

.credits-note span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95em;
    font-style: italic;
}

/* Disclaimer - subdued style */
.credits-disclaimer {
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(135deg, rgba(10, 15, 25, 0.8) 0%, rgba(20, 25, 40, 0.8) 100%);
    border: 1px solid rgba(100, 100, 100, 0.15);
}

.credits-disclaimer .credits-label {
    font-size: 0.9em;
    color: rgba(163, 40, 88, 0.7);
}

.credits-disclaimer span:not(.credits-label) {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
}

#creditsScreen .back-btn {
    margin-top: 10px;
}

/* Mobile Pause Menu - prevent clipping */
body.mobile #pauseMenu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 90vh !important;
    padding: 20px !important;
    gap: 15px !important;
}

body.mobile #pauseMenu h1 {
    font-size: 1.3em !important;
    margin-bottom: 5px !important;
}

body.mobile #pauseMenu button {
    padding: 10px 20px !important;
    font-size: 1em !important;
    min-width: 200px !important;
}

/* ========================================
   MOBILE CREDITS - CLEAN MINIMAL DESIGN
   ======================================== */

body.mobile #creditsScreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 20px;
    gap: 15px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(20, 25, 45, 0.95) 0%, rgba(35, 30, 55, 0.95) 100%);
}

body.mobile #creditsScreen h1 {
    font-size: 1.5em;
    color: #c94b7c;
    margin: 0;
    flex-shrink: 0;
}

body.mobile .credits-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 5px;
    max-height: unset;
}

/* Simple text-based credits for mobile */
body.mobile .credits-row {
    background: none;
    border: none;
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

body.mobile .credits-label {
    color: #c94b7c;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3px;
}

body.mobile .credits-value {
    color: white;
    font-size: 1.1em;
    text-align: center;
}

body.mobile .credits-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: white;
    font-size: 1em;
    text-align: center;
}

/* Divider line between sections */
body.mobile .credits-row:not(:last-child)::after {
    content: '';
    display: block;
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 75, 124, 0.3), transparent);
    margin-top: 15px;
}

/* Inspiration note */
body.mobile .credits-note {
    background: none;
    border: none;
    padding: 10px 0;
}

body.mobile .credits-note span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
    font-style: italic;
}

/* Disclaimer */
body.mobile .credits-disclaimer {
    background: none;
    border: none;
    padding: 10px 0;
    gap: 5px;
}

body.mobile .credits-disclaimer .credits-label {
    font-size: 0.85em;
    color: rgba(201, 75, 124, 0.6);
}

body.mobile .credits-disclaimer span:not(.credits-label) {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75em;
}

/* Back button */
body.mobile #creditsScreen .back-btn {
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 40px !important;
    font-size: 1.1em !important;
}

/* ========================================
   CONTROLLER UI FOCUS INDICATOR
   ======================================== */

/* Focus indicator for gamepad navigation */
.ui-focused {
    outline: 3px solid #a32858 !important;
    outline-offset: 4px;
    box-shadow: 0 0 20px rgba(163, 40, 88, 0.6), 0 0 40px rgba(163, 40, 88, 0.4) !important;
    animation: uiFocusPulse 1.2s ease-in-out infinite;
    position: relative;
    z-index: 100;
}

/* Level cards get a special glow effect */
.level-card.ui-focused {
    transform: translateY(-5px) scale(1.02);
    border-color: #a32858 !important;
}

/* Buttons get slight scale on focus */
button.ui-focused,
.lang-btn.ui-focused {
    transform: translateY(-3px) scale(1.02);
}

/* Sliders and checkboxes */
input[type="range"].ui-focused,
input[type="checkbox"].ui-focused {
    outline-offset: 6px;
}

/* Dropdown focus */
select.ui-focused {
    border-color: #a32858 !important;
}

@keyframes uiFocusPulse {

    0%,
    100% {
        outline-color: #a32858;
        box-shadow: 0 0 20px rgba(163, 40, 88, 0.6), 0 0 40px rgba(163, 40, 88, 0.4);
    }

    50% {
        outline-color: #d94080;
        box-shadow: 0 0 30px rgba(217, 64, 128, 0.7), 0 0 50px rgba(217, 64, 128, 0.5);
    }
}

/* ==========================================
   Changelog Popup Styles
   ========================================== */
.changelog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.changelog-overlay.visible {
    opacity: 1;
}

.changelog-popup {
    background: linear-gradient(135deg, rgba(30, 25, 50, 0.95) 0%, rgba(45, 35, 70, 0.95) 100%);
    border: 2px solid rgba(163, 40, 88, 0.5);
    border-radius: 20px;
    padding: 30px 40px;
    max-width: 600px;
    max-height: 80vh;
    width: 90%;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 60px rgba(163, 40, 88, 0.3),
        0 25px 50px rgba(0, 0, 0, 0.5);
    animation: popupSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.changelog-popup.rtl {
    direction: rtl;
    text-align: right;
}

@keyframes popupSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.changelog-title {
    font-family: 'Cairo', sans-serif;
    font-size: 2em;
    color: #a32858;
    margin: 0 0 5px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.changelog-version {
    font-family: 'Cairo', sans-serif;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    text-align: center;
    padding: 5px 15px;
    background: rgba(163, 40, 88, 0.2);
    border-radius: 20px;
    display: inline-block;
    align-self: center;
}

.changelog-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 20px;
}

.changelog-popup.rtl .changelog-content {
    padding-right: 0;
    padding-left: 10px;
}

.changelog-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.changelog-item:last-child {
    border-bottom: none;
}

.changelog-icon {
    font-size: 1.5em;
    flex-shrink: 0;
    width: 35px;
    text-align: center;
}

.changelog-text {
    font-family: 'Cairo', sans-serif;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.changelog-text strong {
    color: #fff;
    font-weight: 700;
}

.changelog-btn {
    font-family: 'Cairo', sans-serif;
    font-size: 1.2em;
    padding: 12px 40px;
    background: linear-gradient(135deg, #a32858 0%, #5e315b 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    align-self: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(163, 40, 88, 0.4);
}

.changelog-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(163, 40, 88, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

.changelog-btn:active {
    transform: scale(0.98);
}

/* Mobile adjustments for changelog */
@media (max-width: 600px) {
    .changelog-popup {
        padding: 20px 25px;
        max-height: 85vh;
    }

    .changelog-title {
        font-size: 1.6em;
    }

    .changelog-version {
        font-size: 0.9em;
    }

    .changelog-item {
        gap: 10px;
    }

    .changelog-icon {
        font-size: 1.3em;
        width: 30px;
    }

    .changelog-text {
        font-size: 0.85em;
    }
}