/* =========================================
   🎮 AUTO CLICKER GAME: DESIGN & STYLE (CSS) 🎮
   ========================================= */
@font-face {
    font-family: hello!;
    src: url(gifgif.gif);
}
/* --- MAIN PAGE SETUP --- */
body {
  /* 📝 TODO: Pick your background and text colors! */
  background-color: #6767 /* Add a dark hex code here, e.g., #222 */;
  color: teal /* Add a light text color here, e.g., #fff */;
  font-family: 'Courier New', Courier, monospace /* Pick a font, e.g., "Verdana", sans-serif */;

  text-align: center;
  /* 🧠 HOW IT WORKS: The next 3 lines create a side-by-side (2-column) layout! */
  margin: 0;
  display: flex; /* "flex" puts the game zone and shop zone next to each other */
  height: 100vh; /* "100vh" means it takes up 100% of the screen height */
}

/* --- LEFT SIDE: The Game Zone --- */
.game-zone {
  /* 🧠 HOW IT WORKS: flex: 1 makes this take up exactly half (50%) of the screen.
     The other flex settings perfectly center whatever is inside this zone. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 5px solid #444;
}

/* --- RIGHT SIDE: The Shop --- */
.shop-zone {
  /* 🧠 HOW IT WORKS: flex: 1 makes the shop take up the other 50% of the screen.
     overflow-y allows you to scroll down if you add lots of items to the shop. */
  flex: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  /* 📝 TODO: Give your shop a background color and some padding (inside spacing) */
  background-color: #6767 /* e.g., #333 */;
  padding: 20px;
}

.clicker-zone {

    flex: 0.5;
    display: flex;
    flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  /* 📝 TODO: Give your shop a background color and some padding (inside spacing) */
  background-color: #6768 /* e.g., #333 */;
  padding: 20px;
}

/* --- TEXT & HEADINGS --- */
h1 {
  /* 📝 TODO: Make the main score huge and colorful! */
  margin: 2;
  font-size: 67px /* e.g., 50px */;
  color: teal /* e.g., #ffd700 or gold */;
}

h2 {
  /* 📝 TODO: Style your secondary headings (like "Upgrades") */
  color: teal/* e.g., #aaa */;
  margin-bottom: 30px;
}

/* --- THE MAIN CLICKER BUTTON --- */
#click-btn {
  /* 🧠 HOW IT WORKS: cursor: pointer changes the mouse to a pointing hand 
     so players know they can click it! */
  cursor: pointer;

  /* 📝 TODO: Add your custom image and give it a width and height! */
  background-image: url(New\ Piskel-4.gif); /* Change this to your image file! */
  background-position: center;
  background-size: cover;
  /* Experiment with different button sizes and radiuses */
  width: 300px;
  height: 300px;
  border-radius: 0%;
}

/* 🧠 HOW IT WORKS: :active tells the button what to do EXACTLY when being clicked.
   transform: scale(0.9) shrinks it to 90% size, making it look squished! */
#click-btn:active {
  transform: scale(0.9);
}

/* --- SHOP BUTTONS --- */
.buy-btn {
  /* 🧠 HOW IT WORKS: This flex layout pushes the item name to the left 
     and the price to the right, keeping things neat! */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  /* 📝 TODO: Style your shop buttons! Change colors, padding, and round the corners */
  background-color: #444;
  color: white;
  border: none;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;

  /* Smooth transition for when we hover over it */
  transition: background 0.2s;
}

/* 📝 TODO: What should the shop button look like when the mouse hovers over it? */
.buy-btn:hover {
  background-color: #555;
}

/* 📝 TODO: Style the cost text so it stands out from the rest of the button */
.cost-text {
  color: #ffd700;
  font-weight: bold;
}