html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
}

#screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
  position: relative;
  text-align: center;
}

#shape {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

#label {
  font-size: 32px;
  color: darkred;
  font-weight: bold;
}

/* --- States --- */
.state-idle {
  background-color: red;
  flex-direction: column;
}

.state-idle #shape {
  background-color: darkred;
  border-radius: 50%;
}

.state-recording {
  background-color: #333;
  flex-direction: column;
}

.state-recording #shape {
  background-color: black;
  border-radius: 0;
}

.state-recording #label {
  color: white;
}

.state-menu {
  flex-direction: column;
  padding: 0;
  height: 100%;
  overflow: auto; /* Allow scrolling if needed */
}

.state-playing {
  background-color: green;
  flex-direction: column;
}

/* --- Menu Sections --- */
.state-menu > div {
  flex: 1;
  width: 100%;
  min-height: 33.333vh; /* Ensure each section takes up at least 1/3 of viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#section-record {
  background-color: red;
}

#section-play {
  background-color: green;
}

#section-save {
  background-color: black;
}

/* Menu section labels */
.state-menu .menu-label-record,
.state-menu .menu-label-play,
.state-menu .menu-label-save {
  font-size: 24px; /* Smaller font for mobile */
  font-weight: bold;
  margin-top: 10px;
  padding: 0 10px; /* Add some horizontal padding */
}

.state-menu .menu-label-record {
  color: darkred;
}

.state-menu .menu-label-play {
  color: lightgray;
}

.state-menu .menu-label-save {
  color: white;
}

/* Shapes in menu */
.menu-shape {
  width: 70px; /* Smaller shapes for mobile */
  height: 70px;
  position: relative;
}

/* Circle for record */
.shape-circle {
  background-color: darkred;
  border-radius: 50%;
}

/* Triangle for play */
.shape-triangle {
  width: 0;
  height: 0;
  border-left: 35px solid lightgreen;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  background: none;
}

/* Square for save */
.shape-square {
  background-color: white;
}

/* Recording pulse states */
.state-recording.pulse-1 {
  background-color: red;
}

.state-recording.pulse-1 #shape {
  background-color: darkred;
  border-radius: 50%;
}

.state-recording.pulse-2 {
  background-color: darkred;
}

.state-recording.pulse-2 #shape {
  background-color: red;
  border-radius: 50%;
}

.state-recording.pulse-1 #label {
  color: darkred;
}

.state-recording.pulse-2 #label {
  color: red;
}

/* Visual square */
.stop-icon {
  width: 50px;
  height: 50px;
  background-color: white;
  margin-bottom: 15px;
}

/* Media queries for smaller screens */
@media screen and (max-height: 600px) {
  #shape, .menu-shape {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  
  .shape-triangle {
    border-left: 25px solid lightgreen;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
  
  .stop-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  
  #label, .state-menu .menu-label-record,
  .state-menu .menu-label-play,
  .state-menu .menu-label-save {
    font-size: 20px;
  }
  
  .state-menu > div {
    min-height: 30vh;
    padding: 5px 0;
  }
}

/* Fix for very small screens */
@media screen and (max-height: 450px) {
  .state-menu {
    display: flex;
    flex-direction: column;
  }
  
  .state-menu > div {
    min-height: 120px; /* Fixed minimum height */
  }
}