body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 5px;
	-khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    body {
        padding: 8px; /* Slightly more padding on mobile for better touch targets */
    }

    .level-buttons {
        flex-direction: column;
        align-items: center;
        gap: calc(var(--cell-size) * 0.2);
    }

    /* Make statistics table more compact on small screens */
    #stats-popup table {
        width: 98% !important;
        font-size: calc(var(--cell-size) * 0.25) !important;
    }

    #stats-popup th, #stats-popup td {
        padding: calc(var(--cell-size) * 0.04) !important;
    }
}

.celestial-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.sky-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
        #FFB6C1 0%,    /* warm peach-pink */
        #FFE4E1 20%,   /* light pink */
        #E6E6FA 40%,   /* lavender */
        #DDA0DD 60%,   /* plum */
        #BA55D3 80%,   /* medium orchid */
        #9370DB 100%   /* medium purple */
    );
}

.cloud-wisps, .crescent-moons, .stars, .sparkles, .starry-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Floating animations */
.moon {
    animation: float 8s ease-in-out infinite;
}

.moon-1 { animation-delay: 0s; }
.moon-2 { animation-delay: 2s; }
.moon-3 { animation-delay: 4s; }
.moon-4 { animation-delay: 6s; }

.star {
    animation: twinkle 4s ease-in-out infinite alternate, float 6s ease-in-out infinite;
}

.star-1 { animation-delay: 0s; }
.star-2 { animation-delay: 1s; }
.star-3 { animation-delay: 2s; }
.star-4 { animation-delay: 3s; }
.star-5 { animation-delay: 4s; }

.sparkle {
    animation: twinkle 3s ease-in-out infinite alternate, sparkle-float 5s ease-in-out infinite;
}

.sparkle-1 { animation-delay: 0s; }
.sparkle-2 { animation-delay: 0.3s; }
.sparkle-3 { animation-delay: 0.6s; }
.sparkle-4 { animation-delay: 0.9s; }
.sparkle-5 { animation-delay: 1.2s; }
.sparkle-6 { animation-delay: 1.5s; }
.sparkle-7 { animation-delay: 1.8s; }
.sparkle-8 { animation-delay: 2.1s; }
.sparkle-9 { animation-delay: 2.4s; }
.sparkle-10 { animation-delay: 2.7s; }

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

@keyframes sparkle-float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    33% { transform: translateY(-5px) translateX(3px); }
    66% { transform: translateY(3px) translateX(-2px); }
}

.game-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: calc(100vh - 160px); /* Leave more space for UI elements */
    max-width: 100vw;
}

#game-board {
    display: grid;
    --cell-size: min(calc(95vw / 7), calc(calc(100vh - 160px) * 0.9 / 7.5), 60px);
    --gap-size: 2px;
    --border-width: calc(var(--cell-size) * 0.05);
    grid-template-columns: repeat(7, var(--cell-size));
    grid-template-rows: repeat(7, var(--cell-size));
    gap: var(--gap-size);
    border: var(--border-width) solid rgba(255, 255, 255, 0.3);
    border-radius: calc(var(--cell-size) * 0.033);
    width: calc(7 * var(--cell-size) + 6 * var(--gap-size) + 2 * var(--border-width));
    height: calc(7 * var(--cell-size) + 6 * var(--gap-size) + 2 * var(--border-width) + var(--cell-size) * 0.5);
    position: relative;
	background-color: rgba(129, 29, 116, 0.8);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

#about {
	color: #FFE4E1;
	font-weight: bold;
	padding: calc(var(--cell-size) * 0.5);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	margin: calc(var(--cell-size) * 0.5) 0;
}

#about p {
	margin: calc(var(--cell-size) * 0.2) 0;
	line-height: 1.6;
	font-weight: bold;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
}
.white {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(129, 29, 116, 0.8);
}
.pink {
    background-color: rgba(255, 182, 193, 0.9);
    border: 1px solid rgba(129, 29, 116, 0.8);
}
.player, .obstacle, .obstacle2, .obstacle3, .obstacle4 {
    position: absolute;
    transition: all 0.1s ease-out; /* Smooth visual movement */
    background: none; /* Remove default background */
    user-select: none; /* Disable text selection */
}
.player {
    width: calc(2 * var(--cell-size)); /* Width for 2 grid cells */
    height: var(--cell-size);
    z-index: 2;
    cursor: move;
    --oscillation-amplitude: -2px;
    --oscillation-amplitude-mid: 1px;
    --oscillation-amplitude-end: -1px;
    --oscillation-scale-1: 1.02;
    --oscillation-scale-2: 0.98;
    --oscillation-scale-3: 1.01;
    --oscillation-duration: 3s;
    animation: player-oscillation var(--oscillation-duration) ease-in-out infinite;
}

.player.excited {
    --oscillation-amplitude: -5px;
    --oscillation-amplitude-mid: 3px;
    --oscillation-amplitude-end: -3px;
    --oscillation-scale-1: 1.08;
    --oscillation-scale-2: 0.92;
    --oscillation-scale-3: 1.06;
    --oscillation-duration: 1s;
}

@keyframes player-oscillation {
    0%, 100% { transform: translateY(0px) scale(1); }
    25% { transform: translateY(var(--oscillation-amplitude)) scale(var(--oscillation-scale-1)); }
    50% { transform: translateY(var(--oscillation-amplitude-mid)) scale(var(--oscillation-scale-2)); }
    75% { transform: translateY(var(--oscillation-amplitude-end)) scale(var(--oscillation-scale-3)); }
}
.player img, .obstacle img, .obstacle2 img, .obstacle3 img, .obstacle4 img {
    pointer-events: none;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none; /* Disable image dragging in Webkit browsers */
    user-drag: none; /* Disable image dragging in Firefox */
}
.obstacle, .obstacle2, .obstacle3, .obstacle4 {
    z-index: 1;
    cursor: move;
    transition: all 0.3s ease;
    animation: oscillate 2s ease-in-out infinite;
}

.obstacle.excited, .obstacle2.excited, .obstacle3.excited, .obstacle4.excited {
    animation: oscillate-fast 1s ease-in-out infinite;
}

@keyframes oscillate {
    0%, 100% { transform: translateY(0px) scale(1); }
    25% { transform: translateY(-2px) scale(1.02); }
    50% { transform: translateY(1px) scale(0.98); }
    75% { transform: translateY(-1px) scale(1.01); }
}

@keyframes oscillate-fast {
    0%, 100% { transform: translateY(0px) scale(1); }
    25% { transform: translateY(-5px) scale(1.08); }
    50% { transform: translateY(3px) scale(0.92); }
    75% { transform: translateY(-3px) scale(1.06); }
}
.obstacle { height: calc(2 * var(--cell-size)); width: var(--cell-size); } /* Height for 2 grid cells */
.obstacle2 { height: var(--cell-size); width: calc(2 * var(--cell-size)); } /* Width for 2 grid cells */
.obstacle3 { height: calc(3 * var(--cell-size)); width: var(--cell-size); } /* Height for 3 grid cells */
.obstacle4 { height: var(--cell-size); width: calc(3 * var(--cell-size)); } /* Width for 3 grid cells */
.goal-obstacle {
    position: absolute;
    height: calc(0.6 * var(--cell-size));
    width: calc(1 * var(--cell-size));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
} /* 37.5% height (25% smaller), 75% width, centered content */

.goal-obstacle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.win {
    background-color: rgba(50, 205, 50, 0.8); /* lime green - lighter */
    border: 3px solid rgba(34, 139, 34, 1); /* forest green - darker */
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.6);
}

#game-board::before {
    content: "Time: " attr(data-time) " | Steps: " attr(data-steps) " | Cats removed: " attr(data-removals);
    position: absolute;
    left: calc(var(--cell-size) * 0.083);
    bottom: calc(var(--cell-size) * 0.083);
    color: #FFE4E1;
    font-family: Arial, sans-serif;
    font-size: calc(var(--cell-size) * 0.2);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    font-weight: bold;
}
#game-board::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensure clicks go through to elements beneath */
    background-position: 0 0, 0 0;
    z-index: -1; /* Place behind the game elements */
}

button span {
  display: none;
}

/* Status Popup */
#status-popup {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(255, 182, 193, 0.95), /* warm pink */
        rgba(147, 112, 219, 0.85), /* medium purple */
        rgba(230, 230, 250, 0.95), /* lavender */
        rgba(221, 160, 221, 0.9)   /* plum */
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1001;
    font-size: calc(var(--cell-size) * 0.25);
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

#status-popup p, #status-popup div {
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

#status-popup img {
	max-width: 80%;
    max-height: 80%;
    padding: 20px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Stats Popup */
#stats-popup {
    display: none;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: calc(var(--cell-size) * 0.5) 0;
    box-sizing: border-box;
    background: linear-gradient(135deg,
        rgba(255, 182, 193, 0.95), /* warm pink */
        rgba(147, 112, 219, 0.85), /* medium purple */
        rgba(230, 230, 250, 0.95), /* lavender */
        rgba(221, 160, 221, 0.9)   /* plum */
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1001;
    font-size: calc(var(--cell-size) * 0.4);
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

#stats-popup h2 {
    margin-bottom: calc(var(--cell-size) * 0.333);
    font-size: calc(var(--cell-size) * 0.5);
    color: #FFE4E1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    font-weight: bold;
}

/* Center text within table cells and table itself */
#stats-popup table {
    margin: 0 auto;  /* Center the table */
    border-collapse: collapse;
    width: 100%;  /* Use full available width */
    max-width: 1000px;  /* Allow larger tables */
    font-size: calc(var(--cell-size) * 0.28);
    background: rgba(255, 182, 193, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 12px;
    border: 2px solid rgba(221, 160, 221, 0.4);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

#stats-popup th, #stats-popup td {
    text-align: center;  /* Center text within cells */
    border: 1px solid rgba(255, 182, 193, 0.4);
    padding: calc(var(--cell-size) * 0.08);
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
    font-weight: bold;
}

#stats-popup th {
    background: linear-gradient(135deg, rgba(221, 160, 221, 0.8), rgba(147, 112, 219, 0.8));
    color: #8B4513;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}


#stats-popup .level-stats-header {
    width: 90%;
    color: #2c1810;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    font-weight: bold;
    margin-bottom: calc(var(--cell-size) * 0.2);
    text-align: center;
}

#stats-popup .level-stats {
    width: 90%;
    flex: 1;
    min-height: 0;
    max-height: 50vh; /* Reduced height since header is outside */
    overflow-y: auto; /* Add scrollbar here */
    position: relative;
}

#stats-popup td {
    background: rgba(255, 228, 225, 0.9);
}


/* Level completed popup styling */
.level-completed-popup {
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important; /* Ensure full height even for level completed */
}

.level-completed-content {
    background: linear-gradient(135deg,
        rgba(255, 182, 193, 0.95), /* warm pink */
        rgba(147, 112, 219, 0.85), /* medium purple */
        rgba(230, 230, 250, 0.95), /* lavender */
        rgba(221, 160, 221, 0.9)   /* plum */
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid rgba(221, 160, 221, 0.6);
    border-radius: 20px;
    padding: calc(var(--cell-size) * 0.8);
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.level-completed-content h2 {
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
    font-size: calc(var(--cell-size) * 0.6);
    margin-bottom: calc(var(--cell-size) * 0.4);
    font-weight: bold;
}

.level-completed-content h3 {
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    font-size: calc(var(--cell-size) * 0.4);
    margin-bottom: calc(var(--cell-size) * 0.2);
    font-weight: bold;
}

.level-completed-content p {
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    font-size: calc(var(--cell-size) * 0.25);
    margin: calc(var(--cell-size) * 0.1) 0;
    line-height: 1.4;
}

.level-completed-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--cell-size) * 0.5);
    margin: calc(var(--cell-size) * 0.3) 0;
}

.level-completed-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--cell-size) * 0.5);
    margin: calc(var(--cell-size) * 0.3) 0;
}

#level-prev, #level-next, #level-home, #level-stats {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.8), rgba(221, 160, 221, 0.8));
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    height: clamp(30px, calc(var(--cell-size) * 0.6), 45px);
    width: clamp(70px, calc(var(--cell-size) * 2), 120px);
    min-height: 30px;
    min-width: 70px;
    max-height: 45px;
    max-width: 120px;
    color: #2c1810;
    font-weight: bold;
    font-size: clamp(10px, calc(var(--cell-size) * 0.25), 14px);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    padding: 0 8px;
    box-sizing: border-box;
}

#level-prev:hover, #level-next:hover, #level-home:hover, #level-stats:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(221, 160, 221, 0.9), rgba(255, 182, 193, 0.9));
}


#stats-popup::-webkit-scrollbar {
    width: 8px;
}

#stats-popup::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#stats-popup::-webkit-scrollbar-thumb {
    background: rgba(255, 182, 193, 0.5);
    border-radius: 4px;
}

#stats-popup::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 182, 193, 0.7);
}

#stats-popup .stats-header {
    margin-bottom: calc(var(--cell-size) * 0.5);
    text-align: center;
    width: 100%;
    flex-shrink: 0;
}

#stats-popup .total-stats {
    margin-bottom: calc(var(--cell-size) * 0.5);
    width: 90%;
    flex-shrink: 0;
    color: #FFE4E1;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    font-weight: bold;
    text-align: center;
}


#stats-popup .level-stats table {
    border-collapse: collapse;
    width: 100%;
    background: transparent;
}

#stats-popup .level-stats .table-container {
    width: 100%;
    display: inline-block; /* Fit content */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
}

#stats-popup .level-stats thead {
    background: rgba(255, 182, 193, 0.8);
    position: sticky;
    top: 0;
    z-index: 1;
}

#stats-popup .level-stats thead th {
    background: rgba(221, 160, 221, 0.7);
    padding: calc(var(--cell-size) * 0.083);
    border: 1px solid rgba(255, 182, 193, 0.4);
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
    font-weight: bold;
}

#stats-popup .level-stats thead th:last-child {
    width: calc(var(--cell-size) * 2);
    min-width: 60px;
    max-width: 85px;
}

#stats-popup .level-stats tbody {
    background: transparent;
}

#stats-popup .level-stats tbody td {
    background: rgba(255, 240, 245, 0.9);
    padding: calc(var(--cell-size) * 0.06);
    border: 1px solid rgba(255, 182, 193, 0.4);
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
}

#stats-popup .level-stats tbody td:last-child {
    width: calc(var(--cell-size) * 2);
    min-width: 60px;
    max-width: 85px;
    text-align: center; /* Center the play button */
}

/* Buttons */
button {
	border:0;
    background:transparent;
	background-size: contain;
    padding: 5px;
	background-repeat: no-repeat;
}

#stats-popup .close-button {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 182, 193, 0.8));
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	width: calc(var(--cell-size) * 0.667);
	height: calc(var(--cell-size) * 0.667);
	min-width: 40px;
	min-height: 40px;
	color: #2c1810;
	position: relative;
	align-self: flex-end;
	margin-right: calc(var(--cell-size) * 0.5);
	font-size: calc(var(--cell-size) * 0.667);
	font-weight: bold;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

#stats-popup .close-button:hover {
	transform: translateY(-2px) scale(1.1);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 182, 193, 0.8));
}

#prevLevel {
	background: linear-gradient(135deg, rgba(221, 160, 221, 0.8), rgba(255, 182, 193, 0.8));
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	height: calc(var(--cell-size) * 0.667);
	width: calc(var(--cell-size) * 0.667);
	min-height: 44px;
	min-width: 44px;
	background-image: url(img/left.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	touch-action: manipulation;
}

#prevLevel:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#nextLevel {
	background: linear-gradient(135deg, rgba(221, 160, 221, 0.8), rgba(255, 182, 193, 0.8));
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	height: calc(var(--cell-size) * 0.667);
	width: calc(var(--cell-size) * 0.667);
	min-height: 44px;
	min-width: 44px;
	background-image: url(img/right.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	touch-action: manipulation;
}

#nextLevel:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#level-selector {
    position: absolute;
    top: max(10px, 2vh);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
    display: none;
}

.level-selector-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 8px 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    max-width: 95vw;
}

#level-selector button {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 182, 193, 0.8));
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #2c1810;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#level-selector button:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 182, 193, 0.9));
}

#level-selector button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

#level-selector button:disabled:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#levelTitle {
    color: #FFE4E1;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Fullscreen mode adjustments */
:fullscreen {
    background: black;
}

:fullscreen body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

:fullscreen .game-container {
    max-height: 100vh;
    max-width: 100vw;
    flex-shrink: 0;
}

/* WebKit fullscreen support */
:-webkit-full-screen {
    background: black;
}

:-webkit-full-screen body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

:-webkit-full-screen .game-container {
    max-height: 100vh;
    max-width: 100vw;
    flex-shrink: 0;
}

/* Only resize level selector on very small screens */
@media (max-width: 480px) {
    #levelTitle {
        font-size: 12px;
    }

    .level-selector-content {
        padding: 6px 12px;
        gap: 6px;
    }

    #level-selector button {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .option-button {
        max-width: 100%;
        font-size: calc(var(--cell-size) * 0.25);
        padding: 0 15px;
    }

    .options-menu {
        padding: 15px;
        gap: 12px;
        max-width: 95%;
        width: 95%;
    }
}

.level-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.level-completion {
    display: flex;
    gap: 5px;
    align-items: center;
}

.level-completion img {
    width: 20px;
    height: 20px;
}


#bottom-buttons {
    position: absolute;
    bottom: max(5px, 0.5vh);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 50;
    padding: max(5px, 1vh) max(10px, 2vw);
    max-width: 98vw;
    box-sizing: border-box;
}

#bottom-buttons.grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: max(8px, 1vh) max(10px, 1.5vw);
    justify-items: center;
    align-items: center;
    max-height: min(140px, 30vh);
    padding: max(5px, 0.8vh);
}

#bottom-buttons.hidden {
    display: none;
}


/* Level completion stars display */
.level-completion-stars {
    text-align: center;
    margin: 10px 0;
}

.level-completion-stars img {
    vertical-align: middle;
}

/* Default 3x2 button layout for all screen sizes */


.level-buttons-top {
    text-align: center;
    margin-bottom: 10px;
    color: #FFE4E1;
	font-size: calc(var(--cell-size) * 0.75);
	font-weight: bold;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

#undoButton, #resetLevel, #removeObstacle, #statsButton, #optionsButton, #mainMenuButton, #cancelRemove {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.8), rgba(221, 160, 221, 0.8));
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    height: clamp(30px, calc(var(--cell-size) * 0.6), 45px);
    width: clamp(70px, calc(var(--cell-size) * 2), 120px);
    min-height: 30px;
    min-width: 70px;
    max-height: 45px;
    max-width: 120px;
    color: #2c1810;
    font-weight: bold;
    font-size: clamp(10px, calc(var(--cell-size) * 0.25), 14px);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    padding: 0 8px;
    box-sizing: border-box;
}

@keyframes screenShake {
    0% { transform: translateX(0) translateY(0); }
    12.5% { transform: translateX(-5px) translateY(-3px); }
    25% { transform: translateX(-8px) translateY(2px); }
    37.5% { transform: translateX(3px) translateY(-4px); }
    50% { transform: translateX(6px) translateY(3px); }
    62.5% { transform: translateX(-4px) translateY(-2px); }
    75% { transform: translateX(2px) translateY(4px); }
    87.5% { transform: translateX(-2px) translateY(-1px); }
    100% { transform: translateX(0) translateY(0); }
}

@keyframes player-intro-jump {
    0% { transform: translateY(calc(-0.5 * (var(--cell-size) + 2px))); } /* Jump up half distance */
    20% { transform: translateY(0px); } /* Back to row 4 */
    40% { transform: translateY(calc(-0.5 * (var(--cell-size) + 2px))); } /* Jump up again */
    60% { transform: translateY(0px); } /* Back to row 4 */
    80% { transform: translateY(calc(-0.5 * (var(--cell-size) + 2px))); } /* Jump up third time */
    100% { transform: translateY(0px); } /* Final return to row 4 */
}

@keyframes goal-intro-slide {
    0% { transform: translateX(0px); } /* Start at column 5 */
    20% { transform: translateX(calc(2 * (var(--cell-size) + 2px))); } /* Slide to column 7 */
    40% { transform: translateX(0px); } /* Back to column 5 */
    60% { transform: translateX(calc(2 * (var(--cell-size) + 2px))); } /* Slide right again */
    80% { transform: translateX(0px); } /* Back to column 5 */
    100% { transform: translateX(calc(2 * (var(--cell-size) + 2px))); } /* Final position at column 7 */
}

.screen-shake {
    animation: screenShake 0.5s ease-in-out;
}

.player {
    position: absolute;
    height: var(--cell-size);      /* 1 cell tall */
    width: calc(2 * var(--cell-size));  /* 2 cells wide */
    display: flex;
    align-items: center;
    justify-content: center;
}

.player img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-intro-animating {
    animation: player-intro-jump 1.5s ease-in-out;
}

.goal-obstacle.goal-intro-animating {
    animation: goal-intro-slide 1.5s ease-in-out;
}

.options-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 20px auto;
    max-width: 400px;
    width: 90%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 20px;
    backdrop-filter: blur(5px);
    color: #FFE4E1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.options-menu label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
    cursor: pointer;
    margin: 0;
}

.option-button {
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.8), rgba(135, 206, 235, 0.8));
    border: 3px solid rgba(70, 130, 180, 0.7);
    width: 100%;
    max-width: 320px;
    border-radius: 25px;
    height: calc(var(--cell-size) * 0.8);
    min-height: 44px;
    color: #2c1810;
    font-weight: bold;
    font-size: calc(var(--cell-size) * 0.3);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    touch-action: manipulation;
    padding: 0 20px;
    position: relative;
}

.option-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.9), rgba(135, 206, 235, 0.9));
}

.option-button.enabled {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 182, 193, 0.8));
    border-color: rgba(255, 255, 255, 0.7);
}

.option-button.enabled:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 182, 193, 0.9));
}

.option-button input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.status-text {
    font-weight: bold;
    font-size: calc(var(--cell-size) * 0.25);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    margin-left: auto;
    margin-right: 0;
    min-width: 35px;
    text-align: right;
}



#startGameBtn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 182, 193, 0.8));
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    height: calc(var(--cell-size) * 1.0);
    width: calc(var(--cell-size) * 4.0);
    min-height: 44px;
    min-width: 88px;
    color: #2c1810;
    font-weight: bold;
    font-size: calc(var(--cell-size) * 0.4);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    margin: 10px;
}

#enableAudioBtn:hover, #disableAudioBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 182, 193, 0.9));
}

#undoButton:hover, #resetLevel:hover, #removeObstacle:hover, #statsButton:hover, #optionsButton:hover, #mainMenuButton:hover, #cancelRemove:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.9), rgba(221, 160, 221, 0.9));
}


#playButton {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 182, 193, 0.8));
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px;
	height: calc(var(--cell-size) * 0.8);
    width: calc(var(--cell-size) * 2.5);
    min-height: 35px;
    min-width: 70px;
    color: #2c1810;
    font-weight: bold;
    font-size: calc(var(--cell-size) * 0.3);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

#playButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.9), rgba(221, 160, 221, 0.9));
}

#backButton {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 182, 193, 0.8));
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    height: calc(var(--cell-size) * 0.8);
    width: calc(var(--cell-size) * 2.5);
    min-height: 35px;
    min-width: 70px;
    color: #2c1810;
    font-weight: bold;
    font-size: calc(var(--cell-size) * 0.3);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

#backButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.9), rgba(221, 160, 221, 0.9));
}

#goto {
    background: linear-gradient(135deg, rgba(221, 160, 221, 0.8), rgba(255, 182, 193, 0.8));
    border: 1px solid rgba(255, 182, 193, 0.6);
    border-radius: 8px;
    height: calc(var(--cell-size) * 0.6);
    width: calc(var(--cell-size) * 1.8);
    min-height: 25px;
    min-width: 50px;
    max-height: 35px;
    max-width: 80px;
    color: #8B4513;
    font-weight: bold;
    font-size: calc(var(--cell-size) * 0.2);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

#goto:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.9), rgba(221, 160, 221, 0.9));
}

#playButton {
    margin: 10px;
}