@font-face {
  font-family: 'Onaeru';
  src: url('fonts/Onaeru-2vqM3.ttf') format('truetype');
}

/* Base & Global Styles */
body {
  background: linear-gradient(135deg, #ffb347 0%, #ffccff 100%);
  min-height: 100vh;
  margin: 0;
  font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
  overflow-x: hidden;
}

/* Rainbow Heading */
.rainbow-text {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin-top: 30px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s linear infinite;
}
@keyframes rainbow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Gallery & Silly Images */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin: 40px auto;
  max-width: 1200px;
}
.silly-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border: 6px dashed #ff69b4;
  border-radius: 30px;
  box-shadow: 0 0 30px 10px #fff176, 0 0 10px 2px #ff69b4;
  background: #fffbe7;
  transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55);
  cursor: pointer;
}
.silly-img:hover {
  transform: scale(1.2) rotate(-10deg);
  box-shadow: 0 0 50px 20px #ff69b4, 0 0 20px 4px #fff176;
}

/* Fire-Border Decorations */
.fire-border {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.fire-border-bottom {
  bottom: 0; left: 0;
  width: 100vw; height: 60px;
  background: url('images/gifs/ates.gif') repeat-x bottom / auto 60px;
}
.fire-border-top {
  top: 0; left: 0;
  width: 100vw; height: 60px;
  background: url('images/gifs/ates.gif') repeat-x top / auto 60px;
  transform: scaleY(-1);
}
.fire-border-left {
  top: 0; left: 0;
  width: 60px; height: 100vh;
  background: url('images/gifs/ates.gif') repeat-y left / 60px auto;
  transform-origin: top left;
  transform: translateX(-100%) rotate(90deg);
}
.fire-border-right {
  top: 0; right: 0;
  width: 60px; height: 100vh;
  background: url('images/gifs/ates.gif') repeat-y right / 60px auto;
  transform-origin: top right;
  transform: translateX(100%) rotate(-90deg);
}

/* Monke Balls (Unused?) */
#monke-balls {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 2000;
}
.monke-ball {
  position: absolute;
  width: 80px; height: 80px;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Monkey-2 Container & Style */
#monke2-container {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 12000;
  overflow: hidden;
}
.monke2 {
  position: absolute;
  pointer-events: auto !important;
  user-select: none;
  transition: opacity 0.3s, transform 0.3s;
  will-change: transform, opacity;
  cursor: pointer;
  z-index: 12001;
  max-width: 100vw;
  max-height: 100vh;
}

/* First Pet (pet) */
#pet-container {
  position: fixed; left: 0; bottom: 0;
  width: 100vw; height: 200px; pointer-events: auto !important; z-index: 2000 !important;
  overflow: visible;
}
#pet {
  position: absolute; bottom: 0; left: 0;
  width: 120px; user-select: none; pointer-events: auto !important;
  cursor: pointer;
  z-index: 3000;
}

/* Second Pet (pet2) */
#pet2-container {
  position: fixed; left: 0; bottom: 0;
  width: 100%; pointer-events: none; z-index: 1000;
}
#pet2 {
  position: absolute; bottom: 0; left: 200px;
  width: 100px; user-select: none; pointer-events: none;
}

/* FuckingBug Pet */
#fuckingbug-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background: transparent;
}
#fuckingbug {
  position: absolute;
  width: 240px !important;
  height: 160px !important;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: auto !important;
  z-index: 10000;
  transition: transform 0.1s ease-out;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
}

/* Sonic Container & Style */
#sonic-container {
  position: fixed; left: 0; bottom: 0;
  width: 100%; pointer-events: none; z-index: 1000;
}
#sonic {
  position: absolute; bottom: 0; left: 400px;
  width: 100px; user-select: none; pointer-events: none;
}

/* Pet Animations */
@keyframes pet-jump {
  0%,100% { bottom: 0; }
  50%     { bottom: 100px; }
}
@keyframes pet-flip {
  0%   { bottom: 0; transform: rotateX(0deg); }
  50%  { bottom: 150px; transform: rotateX(180deg); }
  100% { bottom: 0; transform: rotateX(360deg); }
}
@keyframes pet-hop {
  0%,100% { bottom: 0; }
  50%     { bottom: 80px; }
}
@keyframes pet-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pet-shake {
  0%,100%   { transform: translate(0,0); }
  10%       { transform: translate(-5px, 5px); }
  20%       { transform: translate(5px, -5px); }
  30%       { transform: translate(-5px, -5px); }
  40%       { transform: translate(5px, 5px); }
  50%       { transform: translate(-5px, 0); }
}

/* FuckingBug Animations */
@keyframes bug-tremble {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, -2px) rotate(-1deg); }
  50% { transform: translate(2px, 2px) rotate(1deg); }
  75% { transform: translate(-1px, 1px) rotate(-0.5deg); }
  100% { transform: translate(1px, -1px) rotate(0.5deg); }
}

/* First Pet Classes */
#pet.jump  { animation: pet-jump 0.6s ease-out; }
#pet.flip  { animation: pet-flip 1s ease-in-out; transform-origin: center; }
#pet.hop   { animation: pet-hop 0.8s ease-out; }
#pet.spin  { animation: pet-spin 1s linear; transform-origin: center; }

/* Second Pet Classes */
#pet2.jump  { animation: pet-jump 0.6s ease-out; }
#pet2.flip  { animation: pet-flip 1s ease-in-out; transform-origin: center; }
#pet2.hop   { animation: pet-hop 0.8s ease-out; }
#pet2.spin  { animation: pet-spin 1s linear; transform-origin: center; }
#pet2.shake { animation: pet-shake 0.5s ease-in-out infinite; }

/* Heart Effect */
.heart {
  position: absolute;
  font-size: 2em;
  color: #FF69B4;
  pointer-events: none;
  animation: heart-float 1s ease-out forwards;
}
@keyframes heart-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(1.3); }
}
/* Pet 1 için şiddetli titreşim animasyonu */
@keyframes pet-shake-strong {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 10px); }
  20% { transform: translate(10px, -10px); }
  30% { transform: translate(-10px, -10px); }
  40% { transform: translate(10px, 10px); }
  50% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, -10px); }
  80% { transform: translate(10px, 10px); }
  90% { transform: translate(-10px, 10px); }
}

/* Tavşan gibi zıplama animasyonu */
@keyframes pet-bunny-hop {
  0%, 100% { bottom: 0; }
  50% { bottom: 90px; }
}

#pet.shake-strong {
  animation: pet-shake-strong 0.5s ease-in-out infinite;
}

#pet.bunny-hop {
  animation: pet-bunny-hop 0.6s ease-in-out infinite;
}

#step2-next-btn {
  width: 100%;
  padding: 18px 0;
  font-size: 2.2em;
  font-family: 'Revitale', cursive, sans-serif;
  background: #800000;
  color: #fff;
  border: none;
  border-radius: 16px;
  margin-top: 18px;
  cursor: pointer;
  transition: background 0.2s;
}
#step2-next-btn:hover {
  background: #b30000;
}
/* 2. adımda gorsel-btn ve gorsel-grid, 1. adım ile aynı olacak */
#wizard-step-2 .gorsel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: 32px;
  margin-bottom: 18px;
  width: 100%;
  max-width: 860px;
  justify-items: center;
}
#wizard-step-2 .gorsel-btn {
  width: 100%;
  max-width: 260px;
  min-width: 120px;
  height: 180px;
  font-size: 5em;
  background: #fff;
  border: 6px solid #800000;
  border-radius: 36px;
  font-family: 'Revitale', cursive, sans-serif;
  color: #b30000;
  cursor: pointer;
  transition: background 0.2s, border 0.2s, color 0.2s, transform 0.2s;
  outline: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#wizard-step-2 .gorsel-btn.selected, #wizard-step-2 .gorsel-btn:active {
  background: #b30000;
  color: #fff;
  border-color: #fff;
}
/* secenek-btn fazladan stilini kaldır */
.secenek-btn {
  /* override: fazladan stil yok */
}

/* Navbar için maymun animasyonu stilleri */
.navbar {
  position: relative !important;
  overflow: hidden;
  min-height: 60px;
}

#monkey-chess-navbar {
  position: absolute;
  width: 35px;
  height: 35px;
  z-index: 1000;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease-out;
}

/* Navbar içerisindeki diğer elementlerin z-index'ini ayarla */
.navbar > * {
  position: relative;
  z-index: 100;
}

/* Maymun için ekstra animasyon efektleri */
@keyframes monkeyBounce {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

#monkey-chess-navbar.bouncing {
  animation: monkeyBounce 0.5s ease-out;
}

/* --- Sidebar ile ilgili tüm CSS kaldırıldı --- */

.main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: none;
}
#main-flip-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 11000;
  pointer-events: none;
}
#flip-img {
  max-width: 80vw;
  max-height: 80vh;
  width: 600px;
  height: auto;
  pointer-events: auto;
  cursor: pointer;
  z-index: 11001;
  background: transparent;
}