/* === GENERAL STYLES === */
    body {
      text-align:center;
      font-family: 'Share Tech Mono', monospace;
      background-color: #f0f8ff;
      color: #003366;
      transition: all 0.5s ease-in-out;
    }

    header {
      background-color: #002244;
      color: #ffcc00;
      padding: 1em;
      text-align: center;
      font-size: 1.8em;
      border-bottom: 4px solid #ffcc00;
      margin-bottom: .5em;
    }

    .header-hidden {
  display: none;
}

body.embedded header {
  display: none;
}

body.embedded #copyTeamLink {
  display: none !important;
}



    .container {
      max-width: 700px;
      margin: 2em auto;
      padding: 1em;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      border: 2px solid #003366;
      transition: background-color 0.5s ease, color 0.5s ease;
    }

    .section {
      margin-bottom: 0;
    }

    .section h2 {
      color: #002244;
      border-bottom: 2px dashed #ffcc00;
      padding-bottom: 0.5em;
    }

    /* === DARK MODE (Terminal Mode) === */
    body.dark-mode {
      background-color: #000000;
      color: #33ff33;
    }

    body.dark-mode header {
      background-color: #001100;
      color: #33ff33;
      border-color: #33ff33;
    }

    body.dark-mode .container {
      background-color: #000000;
      color: #33ff33;
      border-color: #33ff33;
    }

    body.dark-mode .section h2 {
      color: #33ff33;
      border-color: #33ff33;
    }

    .button-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .5em;
  padding: 0 6px;
}

#level {
  margin: 0 auto;
}

#menuToggle {
  position: absolute;
  left: 0px;
  font-size: 1.1em;
  padding: 0.1em 0.5em;

}

    .button {
      padding: 0.5em;
      font-size: 1em;
      cursor: pointer;
      background-color: #ffcc00;
      color: #002244;
      border: none;
      border-radius: 5px;
      transition: all 0.3s ease;
     
    }

@media (hover: hover) and (pointer: fine) {
    .button:hover {
      background-color: #ffaa00;
    }
  }

    body.dark-mode .button {
      background-color: #003300;
      color: #33ff33;
      border: 1px solid #33ff33;
     
    }

@media (hover: hover) and (pointer: fine) {
    body.dark-mode .button:hover {
      background-color: #004400;
    }
  }

    /* === RESPONSIVE DESIGN === */
    @media screen and (max-width: 600px) {
      .container {
        margin: .1em;
        padding: .5em 1em;
      }

      #globalBest {
        margin-left: 15px;
        margin-bottom: -7px;
       
      }
    }

    @keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,170,0,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,170,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,170,0,0); }
}

.button.pulse {
  animation: pulse 1.2s ease-out infinite;
}