body { background: #eaf6fb; min-height:100vh; }
    #hangman-container { max-width: 480px; margin: 32px auto 0 auto; padding: 24px;
      background: #fff; border-radius: 16px; box-shadow:0 5px 28px #87b2c390; }
    #puzzle { font-size:2.1em; letter-spacing: 0.18em; margin-bottom:18px; word-spacing: .2em; }
    #guesses, #message { font-size: 1.17em; margin: 8px 0 10px 0;}
    #letters { margin: 1em 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;}
    #letters button { min-width:2.6rem; height:2.6rem; margin:2px;
      font-size:1.18em; font-weight:500; border-radius:.5em;
      border:1.5px solid #88bbce; background:#eaf6fb;
      transition: background .2s, color.2s;}
    #letters button:disabled{ color:#bbc; background:#f5f7f9;}
    #reset { margin: 16px 0 8px 0; font-size: 1.22em;}
    #confetti-canvas { display:none; position:fixed; top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999;}
  </style>
  <style>
.horizontal-links {
  display: flex;
  justify-content: center;
  gap: 2em;
  list-style-type: none;
  padding: 0;
}
.horizontal-links a {
  color: white;
  text-decoration: none;
}
body {
  background-color:#04AA6D;
	 background-size: cover;
}
	form {background-color: rgb(255 255 255 / 50%);} 
  .container {
            max-width: 800px;
            margin: 0 auto;
            background: linear-gradient(135deg, #8B0000 0%, #2F4F2F 100%); /* #FFFDD0;*/
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            overflow: hidden;
        }
		.footer {
    background: #228B22;
    color: white;
    text-align: center;
    padding: 20px;
    font-style: italic;
    border-radius: 15px; /* Add this line for rounded corners */
    margin: 20px auto;   /* Optional: centers the footer if it's inside a container or has a max-width */
    max-width: 600px;    /* Optional: matches your container width for consistency */
}
	/* Add a black background color to the top navigation */
.topnav {
  background-color: #ef0303;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
		.logo-image{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -6px;
}
/* Custom styles for Bootstrap 5 multi-level dropdown */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.1rem;
  margin-left: 0.1rem;
  display: none;
  position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
  display: block;
}
	</style>
	<style>
	.mobile-list-wrapper {
  max-width: 600px; /* optional desktop limit */
  margin: auto; /* center horizontally */
}

@media (max-width: 600px) {
  .mobile-list-wrapper {
    max-width: 90%; /* shrink width on mobile */
  }

  .horizontal-links {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: center; /* keep centered */
    gap: 0.5em;
  }

  .horizontal-links a,
  .horizontal-links .dropbtn {
    white-space: normal; /* wrap text */
    width: 100%; /* fill mobile container */
    text-align: center;
  }
}