/* Add at the start of the file */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.preloader-logo {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
  animation: bounce 2s infinite;
}

.preloader-text {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress {
  width: 0%;
  height: 100%;
  background: #4CAF50;
  transition: width 0.3s ease;
}

.loading-status {
  font-size: 14px;
  color: #666;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.beta-ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}

.beta-ribbon:before {
  content: "BETA";
  position: absolute;
  top: 30px;
  right: -35px;
  transform: rotate(45deg);
  width: 160px;
  padding: 7px 0;
  background-color: #f8a7a1;
  color: white;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.5);
}

/* All CSS from index.html */
html, body {
  user-select: none; /* Prevents text selection */
  -webkit-user-select: none; /* For Safari and Chrome */
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For Internet Explorer/Edge */
  min-height: 780px;
  overflow: hidden;
  -webkit-touch-callout: none; /* Disable iOS callout */
  -webkit-context-menu: none;  /* Disable context menu */
  -webkit-user-drag: none;     /* Disable dragging */
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
  font-family: Arial, sans-serif;
  transition: background 0.5s ease;
}
#game-container {
  position: relative;
  width: 400px;
  height: 600px;
  overflow: hidden;
  clear: both;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="600" viewBox="0 0 400 600"><rect width="400" height="600" fill="%23ADD8E6"/><path d="M0 550 Q100 500 200 550 T400 550 L400 600 L0 600 Z" fill="%2390EE90"/></svg>') no-repeat;
  transition: filter 0.3s ease, background 0.5s ease;
  opacity: 0; /* Start hidden */
  visibility: hidden;
  transition: opacity 0.5s ease;
  transition: image-rendering 0.3s ease;
  transition: shape-rendering 0.3s ease;
}

#game-container.high-quality {
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

#game-container.low-quality {
  filter: none;
}

#birb {
  position: absolute;
  width: 40px;
  height: 40px;
  transition: transform 0.1s, opacity 0.3s ease;
  transition: image-rendering 0.3s ease;
  transition: shape-rendering 0.3s ease;
  opacity: 0; /* Hide birb initially */
  pointer-events: none; /* Prevent interaction while hidden */
}

#birb svg {
  width: 100%;
  height: 100%;
}

.bluebirb {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="%2340C4FF"/><circle cx="15" cy="15" r="3" fill="%23000"/><path class="wing" d="M25 20 Q30 25 35 20" stroke="%23000" stroke-width="2" fill="none"/><path d="M10 25 L0 20 L10 15" fill="%23FFA500"/></svg>') no-repeat !important;
}
.redbirb {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="%23FF6347"/><circle cx="15" cy="15" r="3" fill="%23000"/><path class="wing" d="M25 20 Q30 25 35 20" stroke="%23000" stroke-width="2" fill="none"/><path d="M10 25 L0 20 L10 15" fill="%23FFA500"/></svg>') no-repeat !important;
}
.greenbirb {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="%2300FF00"/><circle cx="15" cy="15" r="3" fill="%23000"/><path class="wing" d="M25 20 Q30 25 35 20" stroke="%23000" stroke-width="2" fill="none"/><path d="M10 25 L0 20 L10 15" fill="%23FFA500"/></svg>') no-repeat !important;
}

.purplebirb {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="%238A2BE2"/><circle cx="15" cy="15" r="3" fill="%23000"/><path class="wing" d="M25 20 Q30 25 35 20" stroke="%23000" stroke-width="2" fill="none"/><path d="M10 25 L0 20 L10 15" fill="%23FFA500"/></svg>') no-repeat !important;
}

.orangebirb {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="%23FF8C00"/><circle cx="15" cy="15" r="3" fill="%23000"/><path class="wing" d="M25 20 Q30 25 35 20" stroke="%23000" stroke-width="2" fill="none"/><path d="M10 25 L0 20 L10 15" fill="%23FFA500"/></svg>') no-repeat !important;
}

.yellowbirb {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="%23FFD700"/><circle cx="15" cy="15" r="3" fill="%23000"/><path class="wing" d="M25 20 Q30 25 35 20" stroke="%23000" stroke-width="2" fill="none"/><path d="M10 25 L0 20 L10 15" fill="%23FFA500"/></svg>') no-repeat !important;
}

@keyframes flapWing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg); }
}

.wing {
  transform-origin: 25px 20px;
}

.flapping {
  animation: flapWing 0.2s ease-in-out;
}

.pipe {
  position: absolute;
  width: 60px;
  transition: filter 0.3s ease, background-color 0.5s ease;
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.2));
  transition: image-rendering 0.3s ease;
  transition: shape-rendering 0.3s ease;
}

.pipe.high-quality {
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.2));
}

.pipe.low-quality {
  filter: none;
}

/* Optional: Add specific styles for top and bottom pipes if desired */
.top-pipe {
  /* ...existing code... */
}

.bottom-pipe {
  /* ...existing code... */
}

#score {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 22px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tutorial-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  pointer-events: none;
}

.level-complete-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  background: rgba(0, 0, 0, 0.45);
}

.level-complete-card {
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  padding: 22px 26px;
  width: 320px;
  text-align: center;
  color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}

.level-complete-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.level-complete-text {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #ffe79a;
}

.level-complete-button {
  padding: 8px 18px;
  border: none;
  border-radius: 18px;
  background: #4CAF50;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.level-complete-button:hover {
  background: #45a049;
}

.tutorial-card {
  background: rgba(0, 0, 0, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  padding: 18px 22px;
  width: 320px;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.tutorial-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.tutorial-text {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.tutorial-progress {
  font-size: 13px;
  letter-spacing: 0.3px;
  opacity: 0.85;
}

@keyframes scoreCountdown {
  from {
    transform: scale(1.2);
    color: #FFD700;
  }
  to {
    transform: scale(1);
    color: white;
  }
}

.score-counting {
  animation: scoreCountdown 0.1s ease-out;
}

#start-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* Change from flex to none initially */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.5);
  color: white;
  z-index: 900; /* Lower than music-toggle */
  opacity: 0;
  transition: opacity 0.5s ease;
}
#main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
#start-button {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  width: 160px;
  min-width: 160px;
}
#start-button:hover {
  transform: scale(1.05);
  background-color: #45a049;
}
#tip {
  z-index: 9999;
  position:relative;
  text-align:center;
  align:center;
  margin:auto;
  background: linear-gradient(to bottom, rgba(242,245,246,0.7) 0%,rgba(227,234,237,0.7) 37%,rgba(200,215,220,0.7) 100%);
  width: 75%;
    font-size: 18px;
    color: #3a3a3a;
    margin-top: 40px;
    opacity: 0;
    animation: fadeInOut 5s infinite;
    position: relative;
    bottom: -480px;
    border: 1px dotted #ffffff;
    border-radius: 5px;
    padding:5px;
}
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
}
#footer {
  background: #FFFFFF;
  border-radius:9px;
  width:100%;
  text-align:center;
  position: absolute;
  bottom: 0px;
  font-family: sans-serif, verdana;
  font-size: 13px;
  font-weight: bold;
  color: #454545;
}

#footer a {
  color: #4CAF50;  /* Pipe green, matching the game pipes */
  text-decoration: none;
}

#footer a:visited {
  color: #87CEEB;  /* Sky blue, matching the background gradient */
}

#footer a:hover {
  text-decoration: underline;
}

#logo {
  max-width: 90%;
  height: auto;
  max-height: 80px;
}

@media screen and (min-width: 768px) {
  #logo {
    max-height: 160px;
  }
}

@media screen and (max-width: 480px) {
  #logo {
    max-height: 60px;
  }
}

/* Add these new styles before the existing #music-toggle styles */
.track-label {
  position: absolute;
  top: 20px;
  right: 60px;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 14px;
  color: #333;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.track-label.show {
  opacity: 1;
  transform: translateX(0);
}

.settings-group {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
}

.settings-group h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.music-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.volume-control label {
  min-width: 60px;
}

#music-volume {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: #ddd;
  border-radius: 3px;
  outline: none;
}

#music-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
}

#music-volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

#volume-value {
  min-width: 48px;
  text-align: right;
  color: #666;
}

/* Styles for settings tabs */
.settings-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-button {
  flex: 1;
  padding: 10px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  transition: background 0.3s;
}

.tab-button.active {
  background: #4CAF50;
  color: white;
}

.tab-button:hover {
  background: #ddd;
}

.tab-content {
  display: none;
  padding: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

.tab-content.active {
  display: block;
}

/* Styles for BGM player */
.bgm-player {
  margin-top: 20px;
}

.bgm-player label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.bgm-player select {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

.bgm-player button {
  padding: 5px 10px;
  margin-right: 10px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.3s;
}

.bgm-player button:hover {
  background: #45a049;
}

#music-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
#music-toggle svg {
  width: 24px;
  height: 24px;
}
.muted svg path {
  fill: #999;
}
#music-status {
  color: #999999;
  margin-top: 10px;
  font-size: 16px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#share-dialog {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 600px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.share-button {
  display: block;
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.share-button:hover {
  background: #45a049;
}

.share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

.share-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

#share-qr {
  display: block;
  width: 280px;
  height: 280px;
  margin: 20px auto;
}

#birb-select-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 901;
}

#seed-select-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 901;
}

.birb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 300px;
}

.birb-option {
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.birb-option:hover:not(.locked) {
  transform: scale(1.05);
  background: rgba(255,255,255,0.2);
}

.birb-option.selected {
  box-shadow: 0 0 20px #4CAF50;
  background: rgba(76,175,80,0.3);
}

.birb-option.locked {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.5;
}

.birb-option svg {
  width: 60px;
  height: 60px;
}

.birb-option .unlock-text {
  color: white;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}

#start-game-btn {
  margin-top: 20px;
  padding: 10px 30px;
  font-size: 18px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 160px;
  min-width: 160px;
}

#start-game-btn:hover {
  transform: scale(1.05);
  background: #45a049;
}

#next-to-seed-btn {
  margin-top: 20px;
  padding: 10px 30px;
  font-size: 18px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#next-to-seed-btn:hover {
  transform: scale(1.05);
  background: #45a049;
}

.seed-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.seed-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#seed-input {
  padding: 8px;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
  border: none;
  width: 200px;
}

#random-seed-btn {
  padding: 6px;
  font-size: 24px;
  background: white;
  color: #4CAF50;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 35px;
}

#random-seed-btn:hover {
  background: #f0f0f0;
  transform: scale(1.1);
}

/* Add styles for seed display in game over screen */
.game-over-seed {
  font-size: 0.4em;  /* Make seed text much smaller */
  opacity: 0.8;
  color: #DDD;
  margin: 2px 0;
}

#settings-button {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
  width: 160px;
  min-width: 160px;
}

#settings-button:hover {
  background-color: #777;
  transform: scale(1.05);
}

#settings-dialog {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

#share-button {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #4e84af;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
  width: 160px;
  min-width: 160px;
}

#share-button:hover {
  background-color: #3d6586;
  transform: scale(1.05);
}

.dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

.dialog-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.settings-button {
  display: block;
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.settings-button:hover {
  background: #d32f2f;
}

.settings-description {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

/* Add confirmation dialog styles */
.confirm-dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  text-align: center;
}

.confirm-message {
  color: #333;
  font-size: 16px;
  margin-bottom: 20px;
}

.confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.confirm-yes {
  padding: 8px 20px;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.confirm-no {
  padding: 8px 20px;
  background: #666;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.confirm-yes:hover {
  background: #d32f2f;
}

.confirm-no:hover {
  background: #777;
}

.confirm-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1999;
}

.premade-levels {
  margin-top: 5px;
  width: 90%;
  max-width: 400px;
}

.premade-levels h3 {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 20px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 2px;
  width: 100%;
  margin: 0 auto;
}

.level-option {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.level-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  border-radius: 5px;
  margin-bottom: 8px;
  object-fit: cover;
}

/* Add responsive breakpoints */
@media screen and (max-width: 480px) {
  .level-grid {
    width: 100%;  /* Changed from 90% to use full width */
    grid-template-columns: repeat(2, 1fr);  /* Keep two columns */
    gap: 5px;  /* Reduced gap for smaller screens */
    padding: 2px;
  }

  .level-option {
    padding: 2px;
  }

  .level-name {
    font-size: 12px;  /* Made font slightly smaller */
  }

  .level-preview {
    width: 90%;  /* Make preview responsive */
    height: auto;  /* Maintain aspect ratio */
  }

  #seed-select-screen {
    padding: 10px;
  }

  .premade-levels {
    width: 100%;  /* Changed from 90% to use full width */
    margin: 0px auto;
    padding: 0px;
  }

  .quality-description {
    font-size: 11px;
    padding-left: 20px;
  }
}

.level-option.selected {
  box-shadow: 0 0 15px #4CAF50;
  background: rgba(76, 175, 80, 0.3);
}

.level-preview {
  width: 120px;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 8px;
  object-fit: cover;
}

.level-name {
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

#fps-counter {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  color: white;
  background-color: rgba(0, 0, 0, 0.185);
  padding: 2px 4px;
  border-radius: 3px;
  display: none; /* Initially hidden */
  z-index: 1000;
}

/* Add styles for the countdown overlay to position it centrally and animate the numbers */
#countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  flex-direction: column;
  text-align: center;
}

#countdown-number {
  font-size: 100px;
  color: #fff;
  animation: countdownAnimation 1s ease-in-out;
}

.countdown-message {
  margin-top: 12px;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #ffe79a;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  max-width: 320px;
}

@keyframes countdownAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

.quality-description {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  padding-left: 26px;
}

.high-quality {
  image-rendering: auto;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  transition: filter 0.3s ease;
}

.low-quality {
  image-rendering: optimizeSpeed;
  shape-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
  filter: none !important;
}

/* Add these styles at the end of the file */
.toggle-label input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-label input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Update overworld styles */
#overworld {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 901;
  overflow: hidden;
}
.overworld-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
.overworld-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform-origin: 0 0;
  transition: none;
}

.overworld-viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000; /* Dark background in case image is loading */
}
.overworld-background {
  display: none; /* Or remove this class entirely */
}

.overworld-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 902; /* Above background */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
  user-select: none;
  touch-action: none;
}

.overworld-map {
  position: absolute;
  width: 2048px; /* Fixed width for consistent layout */
  height: 4096px; /* Fixed height for consistent layout */
  transform-origin: 0 0;
  will-change: transform;
  cursor: grab;
  background-size: cover;
  background-position: center;
  transition: none; /* Remove transition for smooth dragging */
}

.overworld-map.dragging {
  cursor: grabbing;
}

.act-title,
.level-info,
.back-to-acts,
.overworld-birb {
  position: absolute;
  z-index: 904; /* Above map */
}

#mode-select-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.5);
  color: white;
  z-index: 901;
}

#mode-select-screen h2 {
  font-size: 28px;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#story-mode-button, 
#practice-mode-button {
  padding: 15px 30px;
  font-size: 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px 0;
  transition: all 0.3s ease;
  width: 240px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

#story-mode-button:disabled {
  background-color: #666;
  cursor: not-allowed;
  opacity: 0.8;
  box-shadow: none;
}

#story-mode-button:hover:not(:disabled),
#practice-mode-button:hover {
  transform: scale(1.05);
  background-color: #45a049;
  box-shadow: 0 6px 8px rgba(0,0,0,0.3);
}

#back-to-main-button {
  padding: 12px 24px;
  font-size: 18px;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 30px;
  transition: all 0.3s ease;
  width: 180px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

#back-to-main-button:hover {
  transform: scale(1.05);
  background-color: #777;
  box-shadow: 0 6px 8px rgba(0,0,0,0.3);
}

.back-to-acts:hover {
  background: #45a049;
  transform: scale(1.05);
}

/* Acts selection screen */
#acts-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
  z-index: 901;
}

.act-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

.act-button {
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.act-button.locked {
  background: rgba(200, 200, 200, 0.9);
  cursor: not-allowed;
}

.act-button:not(.locked):hover {
  transform: scale(1.05);
  box-shadow: 0 6px 8px rgba(0,0,0,0.2);
}

.act-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.act-progress {
  font-size: 14px;
  color: #666;
}

/* Style for the back button in acts screen */
#back-from-acts-btn {
  padding: 12px 24px;
  font-size: 18px;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 30px;
  transition: all 0.3s ease;
  width: 180px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

#back-from-acts-btn:hover {
  transform: scale(1.05);
  background-color: #777;
  box-shadow: 0 6px 8px rgba(0,0,0,0.3);
}

.back-button {
  padding: 12px 24px;
  font-size: 18px;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 30px;
  transition: all 0.3s ease;
  width: 180px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.back-button:hover {
  transform: scale(1.05);
  background-color: #777;
  box-shadow: 0 6px 8px rgba(0,0,0,0.3);
}

.level-node:not(.locked):hover {
  box-shadow: 0 0 15px #4CAF50;
  transform: translate(-50%, -50%) scale(1.1);
}

.level-node.locked:hover {
  box-shadow: 0 0 15px #f44336;
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate(calc(-50% - 15px), -50%);
  }
  
  20%, 80% {
    transform: translate(calc(-50% + 15px), -50%);
  }
  
  30%, 50%, 70% {
    transform: translate(calc(-50% - 10px), -50%);
  }
  
  40%, 60% {
    transform: translate(calc(-50% + 10px), -50%);
  }
}

/* Add after existing overworld styles */
.zoom-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 905;
}

.zoom-button {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.zoom-button:hover {
  transform: scale(1.1);
}

.zoom-button:active {
  transform: scale(0.95);
}

.overworld-map {
  /* ...existing code... */
  transform-origin: 0 0;
  will-change: transform;
}

.level-node, .level-path, .overworld-birb {
  will-change: transform;
}

.zoom-level {
  position: absolute;
  bottom: 70px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 14px;
  color: #666;
  z-index: 905;
}
/* Console Overlay Styles */
.console-overlay {
  position: absolute;
  top: 195px; /* Offset to match logo height on desktop */
  left: 50%;
  transform: translateX(-50%);
  width: 400px; /* Match game container width */
  height: 600px; /* Match game container height */
  min-height: 600px;
  background: rgba(0, 0, 0, 0.85);
  color: #0f0;
  font-family: "Consolas", "DejaVu Sans Mono", "Fira Mono", "Ubuntu Mono", "Source Code Pro", "Monaco", "Andale Mono", monospace;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .console-overlay {
    top: 123px; 
  }
}

@media screen and (max-width: 480px) {
  .console-overlay {
    top: 103px;
  }
}

.console-header {
    padding: 8px;
    background: #333;
    border-bottom: 1px solid #555;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#console-output {
    flex: 1;
    padding: 8px;
    border: none;
    resize: none;
    background: transparent;
    color: #0f0;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.0;
    letter-spacing: 0;
    tab-size: 4;
    width: calc(100% / 10ch);
    font-kerning: none;
    -webkit-font-smoothing: none;
    font-family:  monospace, "Consolas", "DejaVu Sans Mono", "Fira Mono", "Ubuntu Mono", "Source Code Pro", "Monaco", "Andale Mono";
}

#console-input {
    padding: 8px;
    border: none;
    background: #222;
    color: #0f0;
    outline: none;
    font-family: "Consolas", "DejaVu Sans Mono", "Fira Mono", "Ubuntu Mono", "Source Code Pro", "Monaco", "Andale Mono", monospace;
    font-size: 12px;
}

#console-close-button {
    padding: 4px 12px;
    font-size: 14px;
    background: rgb(168, 10, 10);
    border-radius: 3px;
    color: #fff;
    border: none;
    cursor: pointer;
}

/* Add power down animation styles */
@keyframes powerDown {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

.console-power-down {
    animation: powerDown 3.5s ease-in forwards;
    background: #000;
}

.console-power-up {
    animation: powerDown 0.5s ease-out reverse;
}

.divider {
  height: 1px;
  background: #ccc;
  margin: 15px 0;
  width: 100%;
}

.console-button {
  background: #333 !important;
}

.console-button:hover {
  background: #444 !important;
}

/* Add testmap.html styles */
#map-container {
    display: none;
    width: 400px;
    height: 585px;
    position: relative;
    touch-action: none;
    overflow: hidden;
    cursor: grab;
    background-color: #3aaccf;
}

#map.testmap-map {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('acts/act1-bg.jpg') no-repeat center center;
    background-size: contain;
    transform-origin: 0 0;
}

.level-node {
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 78px;
    font-size: 42px;
    font-weight: bold;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
}

.level-node.unlocked {
    background-color: rgba(0, 0, 255, 0.7);
}

.level-node.locked {
    background-color: rgba(128, 128, 128, 0.7);
    cursor: not-allowed;
}

.level-path {
    position: absolute;
    height: 6px;
    background-color: #2d7cff;
    transform-origin: 0 0;
    z-index: 1;
}

.level-path.locked {
    background-color: rgba(128, 128, 128, 0.7);
}

.focus-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}

.scene-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1200;
    background: #000;
}

.scene-overlay.active {
    display: block;
}

.scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #9edcff 0%, #e5f7ff 55%, #f7e5b9 100%);
    --fall-distance: 520px;
}

.scene-bg {
    position: absolute;
    inset: 0;
    background: url('acts/act1-bg.png') no-repeat left bottom;
    background-size: 200% 200%;
    opacity: 0.85;
}

.scene-nest {
    position: absolute;
    left: 6%;
    bottom: 18%;
    width: 320px;
    height: 180px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 123, 0.95) 0%, rgba(176, 135, 78, 0.95) 70%);
    border-radius: 50%;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2);
    transform: rotate(-4deg);
}

.scene-tree {
    position: absolute;
    left: 1%;
    bottom: 0;
    width: 420px;
    height: 520px;
    z-index: 0;
}

.scene-tree-trunk {
    position: absolute;
    left: 38%;
    bottom: 0;
    width: 110px;
    height: 340px;
    background: linear-gradient(180deg, #7a4f2b 0%, #5a3a1f 100%);
    border-radius: 20px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
}

.scene-tree-canopy {
    position: absolute;
    left: 4%;
    bottom: 260px;
    width: 320px;
    height: 210px;
    background: radial-gradient(circle at 40% 40%, #6fcf74 0%, #3f8a44 70%);
    border-radius: 50%;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.15);
}

.scene-tree-canopy-2 {
    left: -6%;
    bottom: 220px;
    width: 260px;
    height: 170px;
    opacity: 0.95;
}

.scene-tree-canopy-3 {
    left: 30%;
    bottom: 290px;
    width: 240px;
    height: 150px;
    opacity: 0.9;
}

.scene-tree-trunk::before,
.scene-tree-trunk::after {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, #7a4f2b 0%, #5a3a1f 100%);
    border-radius: 18px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.scene-tree-trunk::before {
    left: -80px;
    bottom: 140px;
    width: 140px;
    height: 46px;
    transform: rotate(-18deg);
}

.scene-tree-trunk::after {
    right: -90px;
    bottom: 180px;
    width: 160px;
    height: 52px;
    transform: rotate(22deg);
}

.scene-nest::after {
    content: "";
    position: absolute;
    inset: 18%;
    border: 3px dashed rgba(120, 85, 50, 0.6);
    border-radius: 50%;
    z-index: 0;
}

.scene-birb {
    position: absolute;
    width: 52px;
    height: 52px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.scene.playing .scene-birb {
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

.scene-birb-1 { animation-name: sceneBob1; animation-duration: 1.35s; animation-delay: -0.2s; animation-timing-function: ease-in-out; }
.scene-birb-2 { animation-name: sceneBob2; animation-duration: 1.05s; animation-delay: -0.65s; animation-timing-function: cubic-bezier(0.3, 0.1, 0.6, 1); }
.scene-birb-3 { animation-name: sceneBob3; animation-duration: 1.75s; animation-delay: -0.1s; animation-timing-function: ease-in; }
.scene-birb-4 { animation-name: sceneBob4; animation-duration: 1.2s; animation-delay: -0.9s; animation-timing-function: ease-out; }
.scene-birb-5 { animation-name: sceneBob5; animation-duration: 2.1s; animation-delay: -0.35s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
.scene-birb-6 { animation-name: sceneBob6; animation-duration: 1.4s; animation-delay: -1.1s; animation-timing-function: ease-in-out; }

.scene-pipes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scene-pipe {
    position: absolute;
    bottom: -420px;
    width: 120px;
    height: 520px;
    background: linear-gradient(180deg, #4caf50 0%, #2b7a30 100%);
    border: 6px solid #1f5f26;
    border-radius: 12px;
    transform: translateY(0);
    transition: transform 0.6s ease;
}

.scene-pipe.scene-pipe-top {
    top: -1400px;
    bottom: auto;
    height: 1400px;
}

.scene-pipes-front .scene-pipe {
    bottom: -520px;
    width: 160px;
    height: 680px;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.35));
}

.scene-pipes-front .scene-pipe.scene-pipe-top {
    top: -1600px;
    height: 1600px;
}

.scene.rumble .scene-nest {
    animation: nestRumble 0.15s ease-in-out 8;
}

.scene.pipes .scene-pipes-back .scene-pipe {
    transform: translateY(-420px);
}

.scene.pipes .scene-pipes-back .scene-pipe.scene-pipe-top {
    transform: translateY(1400px);
}

.scene.impact .scene-pipes-front .scene-pipe {
    transform: translateY(-520px);
}

.scene.impact .scene-pipes-front .scene-pipe.scene-pipe-top {
    transform: translateY(1600px);
}

.scene.fall .scene-birb {
    animation: sceneFall 1.2s ease-in forwards;
}

.scene.fade {
    animation: sceneFade 0.9s ease-in forwards;
}

.scene-skip {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 8px 14px;
    border: none;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.scene-skip:hover {
    background: rgba(0, 0, 0, 0.8);
}

@keyframes sceneBob1 {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); }
    30% { transform: translate(-50%, -50%) translate(5px, -8px) rotate(-3deg); }
    60% { transform: translate(-50%, -50%) translate(-4px, -12px) rotate(2deg); }
}

@keyframes sceneBob2 {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); }
    20% { transform: translate(-50%, -50%) translate(3px, -5px) rotate(2deg); }
    50% { transform: translate(-50%, -50%) translate(-2px, -9px) rotate(-2deg); }
    80% { transform: translate(-50%, -50%) translate(2px, -4px) rotate(1deg); }
}

@keyframes sceneBob3 {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); }
    35% { transform: translate(-50%, -50%) translate(-5px, -10px) rotate(3deg); }
    70% { transform: translate(-50%, -50%) translate(3px, -6px) rotate(-1deg); }
}

@keyframes sceneBob4 {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); }
    25% { transform: translate(-50%, -50%) translate(4px, -7px) rotate(-2deg); }
    55% { transform: translate(-50%, -50%) translate(-3px, -11px) rotate(1deg); }
    85% { transform: translate(-50%, -50%) translate(1px, -5px) rotate(-1deg); }
}

@keyframes sceneBob5 {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); }
    40% { transform: translate(-50%, -50%) translate(6px, -9px) rotate(-3deg); }
    75% { transform: translate(-50%, -50%) translate(-5px, -13px) rotate(2deg); }
}

@keyframes sceneBob6 {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); }
    15% { transform: translate(-50%, -50%) translate(-3px, -6px) rotate(2deg); }
    45% { transform: translate(-50%, -50%) translate(4px, -8px) rotate(-2deg); }
    75% { transform: translate(-50%, -50%) translate(-1px, -4px) rotate(1deg); }
}

@keyframes nestRumble {
    0%, 100% { transform: rotate(-4deg) translateX(0); }
    25% { transform: rotate(-4deg) translateX(-4px); }
    50% { transform: rotate(-4deg) translateX(4px); }
    75% { transform: rotate(-4deg) translateX(-2px); }
}

@keyframes sceneFall {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) translateY(var(--fall-distance)) rotate(180deg); opacity: 0.9; }
}

@keyframes sceneFade {
    from { opacity: 1; }
    to { opacity: 0; }
}

.focus-marker.pulse {
    animation: focusPulse 1.4s ease-out 2;
}

@keyframes focusPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.6);
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
}

/* ...existing code... */

/* Update back-to-acts button style */
#back-to-acts-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 8px 16px;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 906; /* Ensure it's above the map */
    width: auto; /* Override previous fixed width */
    margin: 0; /* Reset margin */
}

#back-to-acts-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

/* ...existing code... */