@font-face {
  font-display: swap;
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('/css/fonts/quicksand-v37-latin-regular.woff2') format('woff2');
}

/* ---- Fart Factory Clicker Game -----*/
.fart-button {
  background: linear-gradient(to bottom, #bada55, #a4c944);
  color: #0b5285;
  font-family: 'Original Surfer', cursive;
  font-size: 1.1rem;
  padding: 15px 25px;
  border: 2px solid #0b5285;
  border-radius: 12px;

  box-shadow:
    0 4px #0b5285,    
    inset 0 1px 0 #d7f77a, 
    inset 0 -1px 0 #7fae32; 

  transition: all 0.1s ease-in-out;
  cursor: pointer;
}

html.dark-mode .fart-button {
   color: #0b5285 !important; 
}

.fart-button:hover {
  background: linear-gradient(to bottom, #ccec5c, #a4c944);
  box-shadow:
    0 5px #0b5285,
    inset 0 1px 0 #e5ffa3,
    inset 0 -1px 0 #7fae32;
}

.fart-button:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #a4c944, #9bc133);
}

.clicker-container {
  width: 90%;
  margin: 30px auto 0;
  padding: 5px 10px 5px;
  background: #0b74bf;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2.5px solid #bada55;
  box-shadow: 8px 8px 0 #bada55;
}

html.dark-mode .clicker-container {
  background: #1f3b57;
}

.clicker-container h1,
.clicker-container h2 {
  color: #ebebed;
  text-align: center;
}

.fart-score {
  font-size: 2.2rem;
  font-family: 'Quicksand', 'Original Surfer', Arial, sans-serif;
  color: #bada55;
  margin-bottom: 6px;
}

.fart-label {
  font-size: 1.1rem;
  color: #fff9;
  margin-left: 10px;
  font-family: 'Original Surfer', cursive;
}

.fart-btn {
  background: none;
  -webkit-tap-highlight-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 25px 0 0;
  cursor: pointer;
  display: block;
  position: relative;
  transition: transform 0.08s;
  animation: shake 0.34s;
}
html.dark-mode .fart-btn {
    background-color: #1F3b57 !important;
}
html.dark-mode .fart-btn:hover {
    background-color: #1F3b57 !important;
}
.fart-btn:active {
  transform: scale(1.1) rotate(-2deg);
}
.fart-icon {
  width: auto;
  height: 110px;
  transition: filter 0.1s;
}
.fart-btn:hover,
.fart-btn:focus {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.fart-float {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%) translateY(0) scale(1);
  font-size: 1.3rem;
  font-family: 'Original Surfer', cursive;
  color: #bada55;
  text-shadow: 1px 2px 8px #222, 0 0 2px #fff9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.7s cubic-bezier(.22,1.01,.36,1);
  z-index: 2;
  will-change: transform, opacity;
}
.fart-upgrade-hints {
  margin: 13px 0 18px;
  font-size: 1.15rem;
  color: #bada55;
  font-family: 'Quicksand', Arial, sans-serif;
}

.progress-bar-container {
  width: 100%;
  min-width: unset;
  box-sizing: border-box;
  height: 32px;
  background: #034c80;
  border-radius: 12px;
  border: 1px solid #bada55;
  overflow: hidden;
  margin: 0 auto 22px;
  position: relative;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #bada55 50%, #aacc44 100%);
  transition: width 0.4s cubic-bezier(.6,1.4,.4,1);
}
.progress-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 0; left: 0;
  line-height: 32px;
  font-family: 'Quicksand', Arial, sans-serif;
  font-size: 1.01rem;
  color: #fff;
}

.upgrades {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96%;
  margin: 10px 0 15px 0;
  gap: 8px;
}
.upgrades button {
  background: #bada55;
  color: #0b5285;
  border: 2px solid #0b5285;
  border-radius: 11px;
  padding: 13px 23px;
  font-family: 'Original Surfer', cursive;
  font-size: 1.09rem;
  margin: 0 auto;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  cursor: pointer;
  width: 100%;
}
.upgrades button:active {
  transform: translateY(3px) scale(0.99);
  background: #aacc44;
  color: #202a12;
}
.upgrades button:disabled {
  opacity: 0.54;
  cursor: not-allowed;
}

html.dark-mode .upgrades button,
html.dark-mode .upgrades button:hover,
html.dark-mode .upgrades button:active,
html.dark-mode .upgrades button:focus {
  background: #0b5285 !important;
  color: #bada55 !important;
  border-color: #bada55 !important;
}


#soundBtn {
  background: #0b5285 !important;
  border: 2px solid #bada55;
  font-size: 2rem;
  cursor: pointer;
  color: #ffffff !important;
  margin: 0;
  margin-top: 10px;
  padding: 4px 9px 0 10px;
  transition: transform 0.2s;
}
#soundBtn:hover { 
    transform: scale(1.16); 
    box-shadow: none;
    }

.feedback-toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #0b5285;
  color: #bada55;
  padding: 10px 22px;
  border-radius: 7px;
  font-weight: bold;
  font-size: 1.07rem;
  display: none;
  z-index: 100;
  box-shadow: 0 2px 16px #1c2c1550;
}

/* Responsive */
@media (max-width: 800px) {
  .clicker-container {
    max-width: 99vw;
    padding-left: 10px;
    padding-right: 10px;
  }
    .clicker-main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .progress-bar-container {
    width: 100%;
    min-width: unset;
  }
}

/* Large screen: put upgrades to the right */
@media (min-width: 800px) {
  .clicker-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    max-width: 860px;
    padding: 5px 25px 5px;
    gap: 48px;
  }
  .clicker-main {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .upgrades {
    flex: 1 1 270px;
    align-items: stretch;
    margin: 0;
    width: 270px;
    min-width: 180px;
    max-width: 100%;
  }
}

/* Rocket panel */
.rocket-panel {
  width: 100%;
  max-width: 480px;
  margin-top: 14px;
  padding: 12px 12px 16px;
  border: 2px solid #bada55;
  border-radius: 14px;
  background: #0b5285;
}
html.dark-mode .rocket-panel {
  background: #1f3b57;
}
.rocket-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #ebebed;
  font-family: 'Original Surfer', cursive;
  margin-bottom: 8px;
}
.rocket-progress-container {
  position: relative;
  height: 22px;
  background: #034c80;
  border: 1px solid #bada55;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.rocket-progress {
  height: 100%;
  width: 0%;
  transition: width .35s cubic-bezier(.6,1.4,.4,1);
  background: linear-gradient(90deg, #bada55 40%, #aacc44 100%);
}
.rocket-progress-text {
  text-align: center;
  margin-top: 6px;
  font-size: .95rem;
  color: #bada55;
  font-family: 'Quicksand', Arial, sans-serif;
}
.rocket-launch-btn {
  width: 90%;
}

.rocket-fly {
  position: fixed;
  left: 0; top: 0;           
  width: 250px;             
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.content-container {
    margin-top: 20px;
}

/* Locked upgrades */
.upgrades button.upgrade-locked {
  opacity: 0.55;
  background: #6b7a4a !important;
  cursor: not-allowed;
  border-style: dashed;
}
html.dark-mode .upgrades button.upgrade-locked {
  background: #2a3a50 !important;
}
.upgrade-locked-msg {
  font-size: 0.95rem;
  color: #c8e06a;
  font-family: 'Quicksand', Arial, sans-serif;
}

/* Idle hint arrow + label */
#idle-hint {
  position: absolute;
  bottom: -52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Original Surfer', cursive;
  font-size: 1rem;
  color: #bada55;
  text-shadow: 0 1px 6px #000a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  white-space: nowrap;
}
#idle-hint::before {
  content: '⬆';
  font-size: 1.6rem;
  animation: idle-bounce 0.7s ease-in-out infinite alternate;
}
#idle-hint.idle-hint-visible {
  opacity: 1;
}
#idle-hint.idle-hint-gone {
  opacity: 0;
  transition: opacity 0.2s ease;
}
@keyframes idle-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

/* Locked upgrades */
.upgrades button.upgrade-locked {
  opacity: 0.55;
  background: #6b7a4a !important;
  cursor: not-allowed;
  border-style: dashed;
}
html.dark-mode .upgrades button.upgrade-locked {
  background: #2a3a50 !important;
}
.upgrade-locked-msg {
  font-size: 0.95rem;
  color: #c8e06a;
  font-family: 'Quicksand', Arial, sans-serif;
}

/* Stats panel */
.stats-toggle-btn {
  background: transparent;
  border: 1.5px solid #bada55;
  border-radius: 8px;
  color: #bada55;
  font-family: 'Original Surfer', cursive;
  font-size: 0.9rem;
  padding: 5px 14px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.15s;
}
.stats-toggle-btn:hover {
  background: rgba(186,218,85,0.12);
}
#stats-panel {
  display: none;
  margin-top: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
}
.stats-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Quicksand', Arial, sans-serif;
  font-size: 0.92rem;
  color: #e0e0e0;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.stats-row strong {
  color: #bada55;
}

/* Reset button */
.reset-btn {
  background: #d36969;
  border: 1.5px solid #cc4444;
  border-radius: 8px;
  color: #fff;
  font-family: 'Original Surfer', cursive;
  font-size: 0.82rem;
  padding: 4px 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}
.reset-btn:hover {
  background: rgba(204, 68, 68, 0.979);
}

/* Reset confirmation modal */
#reset-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1500;
}
#reset-modal.is-open {
  display: flex;
}
.reset-modal-content {
  background: #0b74bf;
  border: 2.5px solid #bada55;
  box-shadow: 6px 6px 0 #bada55;
  border-radius: 16px;
  padding: 28px 24px 20px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  color: #fff;
}
.reset-modal-icon svg {
  width: 48px;
  height: 48px;
  color: #bada55;
  margin-bottom: 10px;
}
.reset-modal-content h3 {
  color: #bada55 !important;
  margin: 0 0 10px;
}
.reset-modal-content p {
  color: #ffffffcc;
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.reset-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.reset-modal-confirm {
  background: #cc4444;
  color: #fff;
  border: 2px solid #ff6666;
  border-radius: 9px;
  padding: 10px 20px;
  font-family: 'Original Surfer', cursive;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px #992222;
  transition: transform 0.1s;
}
.reset-modal-confirm:active { transform: translateY(3px); box-shadow: none; }
.reset-modal-cancel {
  background: transparent;
  color: #bada55;
  border: 2px solid #bada55;
  border-radius: 9px;
  padding: 10px 20px;
  font-family: 'Original Surfer', cursive;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.reset-modal-cancel:hover { background: rgba(186,218,85,0.12); }

html.dark-mode .reset-modal-content {
  background: #17314c;
  border-color: #7a9327;
  box-shadow: 6px 6px 0 #7a9327;
}