* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif; /* Use Montserrat, fallback to generic sans-serif */
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #333;
    overscroll-behavior-y: contain; /* Prevent background scrolling on touch */
}

/* Logo Style */
#page-logo {
    display: block; /* Ensure it's a block element for margin auto */
    margin: 0 auto 10px auto; /* Center horizontally, add 10px margin below */
    height: 100px;     /* Adjust height as needed */
    width: auto;      /* Maintain aspect ratio */
    max-width: 80%;   /* Prevent logo from getting too wide in container */
}

.game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative; /* Keep for game over message positioning */
    max-width: 95vw;
}

h1 {
    margin-bottom: 10px; /* Keep margin below H1 */
    color: #4a4a4a;
    margin-top: 0; /* Remove top margin if logo provides enough space */
    font-weight: 700; /* Ensure bold weight */
}


.game-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1em;
    font-weight: 700; /* Use the bold weight imported */
    flex-wrap: wrap;
    gap: 10px;
}

#score-display {
    color: #333;
}

#time-info-display {
    color: #333;
    font-weight: 700; /* Ensure bold */
}

/* Timer Bar Styles */
#timer-bar-container {
    height: 20px;
    background-color: #555;
    border: 2px solid #333;
    border-bottom: none;
    box-sizing: border-box;
    margin: 10px auto 0 auto;
    overflow: hidden;
    max-width: 100%;
    /* Width set by JS */
}

#timer-bar {
    height: 100%;
    width: 100%; /* Start full */
    background-color: #4CAF50; /* Initial color (Green) */
    transition: width 0.2s linear, background-color 0.5s ease; /* Smooth transitions */
}

#game-canvas {
    border: 2px solid #333; /* Darker border */
    display: block;
    margin: 0 auto 15px auto; /* Keep margin below canvas */
    background-color: #d0d0d0; /* Slightly darker background for contrast */
    image-rendering: pixelated; /* Hint for sharp rendering */
    image-rendering: crisp-edges;
    max-width: 100%; /* Ensure canvas doesn't overflow its container */
    /* Height/Width set by JS */
}


.controls-area h2 {
    font-size: 1em;
    margin-bottom: 5px;
    color: #555;
    font-weight: 400; /* Use regular weight for this heading */
}

#next-blocks-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Increased spacing */
    margin-bottom: 15px;
    min-height: 60px;
    flex-wrap: wrap;
}

.block-preview {
    width: 100px;
    height: 100px;
    /* Removed background and border */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Allow full block shape */
    position: relative;
}

#reset-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    /* Ensure button uses the font */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Make button text bold */
}

#reset-button:hover {
    background-color: #45a049;
}

/* Game Over Message Styling */
#game-over-message {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85); /* Slightly more opaque */
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 100;
    width: 85%; /* Adjust width */
    max-width: 350px; /* Slightly wider max width */
}

#game-over-message h2 {
    font-weight: 700;
    margin-bottom: 10px;
}

#game-over-message p {
    margin-bottom: 15px; /* Add space below final score */
    font-size: 1.1em;
}

/* High Score Area Styling */
#high-scores-area {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #666; /* Separator line */
    text-align: left; /* Align list items left */
}

#high-scores-area h3 {
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center; /* Center the heading */
    font-size: 1em;
}

#high-scores-list {
    list-style-position: inside; /* Keep numbers inside the box */
    padding-left: 10px; /* Add some padding */
    font-size: 0.95em;
    max-height: 150px; /* Limit height if list gets long */
    overflow-y: auto;  /* Add scroll if needed */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #888 #555; /* For Firefox */
}
/* Styling scrollbar for Webkit browsers (Chrome, Safari) */
#high-scores-list::-webkit-scrollbar {
  width: 8px;
}
#high-scores-list::-webkit-scrollbar-track {
  background: #555;
  border-radius: 4px;
}
#high-scores-list::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
  border: 2px solid #555;
}


#high-scores-list li {
    margin-bottom: 4px;
    padding: 2px 5px;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background for items */
    border-radius: 3px;
}


/* ===========================
   Mobile Responsive Styles
   =========================== */
@media (max-width: 600px) {
    body {
        overscroll-behavior-y: auto;
        min-height: -webkit-fill-available;
    }

     html {
        height: -webkit-fill-available;
     }

    .game-container {
        width: 100%;
        min-width: 300px;
        padding: 10px 5px;
        border-radius: 0;
        box-shadow: none;
        height: auto;
        min-height: 95vh;
    }

     #page-logo {
        height: 80px;
        margin-bottom: 8px;
    }

    h1 {
        font-size: 1.3em;
        margin-bottom: 8px;
    }

    .game-info {
        font-size: 0.9em;
        margin-bottom: 10px;
    }

     #timer-bar-container {
        height: 15px;
        margin-top: 5px;
     }

     #game-canvas {
        margin-bottom: 10px;
     }

    .controls-area h2 {
        font-size: 0.9em;
        margin-bottom: 3px;
    }

    #next-blocks-container {
        gap: 15px; /* Keep increased spacing */
        min-height: 50px;
        margin-bottom: 10px;
    }

    .block-preview {
        width: 100px;
        height: 100px;
    }

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

    #game-over-message {
        padding: 15px;
        width: 90%; /* Adjust width */
    }

     #high-scores-area {
         margin-top: 10px;
         padding-top: 8px;
     }
      #high-scores-list {
          font-size: 0.9em;
          max-height: 120px; /* Reduce max height */
      }
}

@media (max-width: 360px) {
    /* Further adjustments for very small screens */
    .game-info {
        font-size: 0.8em;
    }
    .block-preview {
        width: 100px;
        height: 100px;
    }
    #next-blocks-container {
        min-height: 45px;
        gap: 10px; /* Slightly less gap */
    }
}

/* Landscape considerations */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical spacing if screen is short and wide */
     h1 { margin-bottom: 5px; font-size: 1.1em;}
     .game-info { margin-bottom: 5px; font-size: 0.8em;}
     #timer-bar-container { margin-top: 5px; height: 12px;}
     #game-canvas { margin-bottom: 5px;}
     #next-blocks-container { margin-bottom: 5px; min-height: 45px; gap: 15px;}
     .block-preview { width: 100px; height: 100px;}
     #reset-button { margin-top: 5px; padding: 6px 12px; font-size: 0.8em;}
     .controls-area h2 { font-size: 0.8em; }
     .game-container { padding-top: 5px; padding-bottom: 5px;}
     #game-over-message { padding: 10px; } /* Reduce padding */
     #high-scores-list { max-height: 80px; } /* Further reduce list height */
}