HTML {
  margin: env(safe-area-inset);
  padding: env(safe-area-inset);
}

BODY {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  background-color: #222;
  background-size: 50%;

  margin: 0;
  padding: 0;
}

LABEL {
  display: block;
}

#loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
}

.loading-content {
  text-align: center;
}

.loading-content p {
  color: #ccc;
  font-family: sans-serif;
  font-size: 16px;
  margin-top: 10px;
}

#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 15px 25px;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#toast.show {
  opacity: 1;
}

#page {
  z-index: 10;
}

MAIN {
  display: block;
  visibility: hidden;
  width: 101%;
  height: 100%;
  overflow: hidden;
}

MAIN A,
MAIN DIV,
MAIN IMG {
  display: block;
  background: #222;
}

.flower-image {
  box-sizing: border-box;

  display: block;
  width: 100%;
  height: 100%;

  cursor: pointer;

  background-size: cover;
  background-position: center center;
  border: 0;
  outline: none;

  text-indent: -999em;

  object-fit: cover;
  margin: env(safe-area-inset);
  padding: 0;
}

#history {
  display: none;
}

#contextMenu {
  display: none;
  z-index: 100;
  position: absolute;
  width: auto;

  border: 1px solid #000;

  box-shadow: 7px 7px 4px -6px rgba(0, 0, 0, 0.75);
}

#contextMenu .menu {
  position: relative;
  display: block;

  left: 0px;
  top: 0px;
  height: 20px;

  font-family: sans-serif;
  font-weight: normal;
  white-space: nowrap;

  background-color: #333;
  border-bottom: 1px solid #555;

  margin: 0;
  padding: 5px 1em 0 5px;
}

#contextMenu .menu:last-child {
  border-bottom: 0;
}

#contextMenu .menu A {
  display: block;
  width: 100%;
  height: 100%;

  color: #ccc;
  font-size: 12px;
  text-decoration: none;

  margin: 0;
  padding: 0;
}

#contextMenu .menu A U {
  text-decoration: underline;
}

#contextMenu .menu:hover {
  background-color: #555;
  cursor: pointer;
}

/* Hamburger Menu */
#hamburgerMenu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  cursor: default;
}

#hamburgerMenu:hover {
  opacity: 1;
}

.hamburger-icon {
  width: 30px;
  height: 25px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 201;
}

.hamburger-icon span {
  display: block;
  height: 3px;
  background-color: #ccc;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-dropdown {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background-color: #222;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  z-index: 199;
  padding-top: 80px;
  overflow: hidden;
}

.hamburger-dropdown .menu {
  position: relative;
  display: block;
  height: auto;
  font-family: sans-serif;
  font-weight: normal;
  white-space: nowrap;
  background-color: transparent;
  border-bottom: 1px solid #444;
  margin: 0;
  padding: 15px 20px;
}

.hamburger-dropdown .menu:last-child {
  border-bottom: 0;
}

.hamburger-dropdown .menu A {
  display: block;
  width: 100%;
  height: 100%;
  color: #ccc;
  font-size: 16px;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.hamburger-dropdown .menu A U {
  text-decoration: underline;
}

.hamburger-dropdown .menu:hover {
  background-color: #333;
  cursor: pointer;
}

/* Menu Panels */
.menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding-top: 80px;
}

.menu-panel.submenu {
  transform: translateX(100%);
}

.menu-panel.active {
  transform: translateX(0);
}

.menu-panel.slide-left {
  transform: translateX(-100%);
}

/* Submenu Content */
.submenu-content {
  padding: 20px;
  color: #ccc;
  font-family: sans-serif;
  font-size: 14px;
}

.submenu-content h3 {
  margin: 0 0 15px 0;
  color: #fff;
}

.submenu-content strong {
  display: block;
  margin: 15px 0 10px 0;
  color: #fff;
}

.submenu-content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.submenu-content ul li {
  margin: 5px 0;
  padding: 0;
}

/* Speed Buttons */
.speed-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 15px;
}

.speed-buttons input[type="button"] {
  padding: 8px 4px;
  font-size: 12px;
}

.speed-buttons input[type="button"].selected {
  background-color: #00f;
  color: #fff;
}

/* Music Buttons */
.music-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.music-buttons input[type="button"] {
  padding: 8px;
}

/* Stop Button */
input[type="button"].stop {
  width: 100%;
  padding: 10px;
  background-color: rgb(230, 0, 0);
  color: #fff;
  border: none;
  cursor: pointer;
}

/* Back Button */
.back-button {
  border-bottom: 1px solid #444;
  position: sticky;
  top: 0;
  background-color: #222;
  z-index: 10;
}

.back-button a {
  font-size: 16px;
  font-weight: bold;
}

/* Show dropdown when toggled (via JS) */
#hamburgerMenu.active {
  opacity: 1;
}

#hamburgerMenu.active .hamburger-dropdown {
  right: 0;
}

/* Mobile: animate hamburger icon when active */
#hamburgerMenu.active .hamburger-icon span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

#hamburgerMenu.active .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

#hamburgerMenu.active .hamburger-icon span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  BODY {
    height: 86.5vh;
    overflow: hidden;
  }
}