/* BLOOKET FINAL UI TWEAKS */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

* {
  font-family: 'Fredoka', sans-serif !important;
}

/* BACKGROUND */
body {
  background: linear-gradient(135deg, #3cc6d8, #4aa3ff) !important;
}

/* SIDEBAR */
.sidebar, .menu, .left-panel {
  background: linear-gradient(180deg, #8e44ad, #9b59b6) !important;
  border-radius: 0 20px 20px 0;
}

/* BUTTONS DEFAULT */
button {
  background: #4cd964 !important;
  border: none !important;
  border-radius: 14px !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 0 #2ea44f !important;
  transition: 0.1s;
}

/* GENERATE BUTTON - BLOOKET STYLE */
button.generate, .generate-btn, #generate {
  background: #ff9f43 !important;
  border-radius: 16px !important;
  padding: 14px 28px !important;
  font-size: 18px !important;
  box-shadow: 0 6px 0 #e67e22 !important;
}

button.generate:hover, .generate-btn:hover, #generate:hover {
  transform: scale(1.05);
}

button.generate:active, .generate-btn:active, #generate:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #e67e22 !important;
}

/* CARDS */
.card, .box, .item {
  background: rgba(0,0,0,0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 0 rgba(0,0,0,0.25) !important;
  transition: 0.2s;
}

/* TEXT */
h1, h2, h3 {
  color: white !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

/* INPUT FIELD (USERNAME BOX) */
input {
  border-radius: 14px !important;
  border: none !important;
  padding: 14px !important;
  background: rgba(0,0,0,0.4) !important;
  color: white !important;
  font-size: 16px !important;
  box-shadow: inset 0 3px 0 rgba(0,0,0,0.3);
}

input::placeholder {
  color: rgba(255,255,255,0.7);
}

/* PRICE */
.price, .token {
  background: #3498db;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  font-weight: bold;
}


/* HOVER ANIMATION - BLOOKET */
.card, .box, .item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover, .box:hover, .item:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 0 rgba(0,0,0,0.3) !important;
}

.card:active, .box:active, .item:active {
  transform: scale(0.98);
}