/* === GLOBAL RESET === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Orbitron', 'Exo 2', 'Montserrat', sans-serif;
  background-image: url('assets/bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}




/* === CONTAINER === */
.container {
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65));
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), 0 0 10px rgba(255, 0, 255, 0.1);
  max-width: 1000px;
  margin: 3rem auto;
  text-align: center;
  border: 2px solid rgb(32 17 45 / 74%);
  background-image: 
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
  background-blend-mode: overlay;
  animation: pulseContainer 4s infinite ease-in-out;
}



/* === LABELS & INPUTS === */
label {
  font-weight: 600;
  font-size: 1.1rem;
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff;
}

input, select {
  font-size: 1.2rem;
  padding: 0.6rem;
  margin-top: 0.5rem;
  border-radius: 10px;
  border: 2px solid #00ffff;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  width: 100%;
  transition: 0.3s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: #ff00ff;
  box-shadow: 0 0 10px #ff00ff;
}






/* === EXPRESSION DISPLAY === */
#expression {
  font-size: 4rem;
  font-weight: 900;
  color: var(--expression-color, #00ffff); /* Default cyan, customizable via CSS variable */
  text-shadow: 0 0 6px var(--expression-color, #00ffff), 0 0 12px var(--expression-color, #00ffff);
  margin-bottom: 1rem;
  animation: pulseGlow 2s infinite ease-in-out;
  letter-spacing: 2px;
}

/* === GLOW ANIMATION === */
@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 0 0 6px var(--expression-color, #00ffff), 0 0 12px var(--expression-color, #00ffff);
  }
  50% {
    text-shadow: 0 0 10px var(--expression-color, #00ffff), 0 0 20px var(--expression-color, #00ffff);
  }
}








/* === ANSWER INPUT === */
#answerInput {
  font-size: 2rem;
  text-align: center;
  padding: 0.5rem;
  border-radius: 12px;
  border: 2px solid #00ffff;
  background: rgb(30 161 73 / 94%);
  color: #fff;
}

/* === RESULT DISPLAY === */
#result {
  font-size: 4rem;
  font-weight: 700;
  margin-top: 1rem;
  color: #2c493d;
  text-shadow: 0 0 10px #002bff70;
}












/* === KNIGHT IMAGE === */
#knight {
  width: 140px;
  margin-top: 1rem;
  transition: transform 0.2s ease;
}

.cheer {
  animation: cheer 0.6s ease-in-out;
  filter: drop-shadow(0 0 10px #00ffff);
}

@keyframes cheer {
  0% { transform: scale(1.2) rotate(5deg); }
  50% { transform: scale(1.4) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* === BUTTONS === */
button {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  border: none;
  margin: 0.5rem;
  cursor: pointer;
  transition: 0.3s ease;
  min-width: 180px;
}





h1.display-5 {
  background: linear-gradient(90deg, #3300ff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #375045db;
  text-shadow: 0 0 10px #00ffff;
}












/* === Base Button Style === */
button,
.btn-primary,
.btn-success,
.btn-warning,
.btn-info,
.btn-secondary {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  border: none;
  margin: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* === Glowing Pulse Overlay === */
button::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50px;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

button:hover::after {
  opacity: 1;
  animation: pulseOverlay 1.5s infinite ease-in-out;
}

@keyframes pulseOverlay {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.1); opacity: 0.4; }
}

/* === Primary Button === */
.btn-primary {
  background: linear-gradient(135deg, #00ffff, #0066ff);
  color: #fff;
  box-shadow: 0 0 12px rgba(0,255,255,0.5);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #00ccff, #0044cc);
  box-shadow: 0 0 20px rgba(0,255,255,0.8);
}

/* === Success Button === */
.btn-success {
  background: linear-gradient(135deg, #00ff99, #00cc66);
  color: #fff;
  box-shadow: 0 0 12px rgba(0,255,136,0.5);
}
.btn-success:hover {
  background: linear-gradient(135deg, #00cc88, #009966);
  box-shadow: 0 0 20px rgba(0,255,136,0.8);
}

/* === Warning Button === */
.btn-warning {
  background: linear-gradient(135deg, #ffcc00, #ff9900);
  color: #000;
  box-shadow: 0 0 12px rgba(255,204,0,0.5);
}
.btn-warning:hover {
  background: linear-gradient(135deg, #ffb700, #ff8800);
  box-shadow: 0 0 20px rgba(255,204,0,0.8);
}

/* === Info Button === */
.btn-info {
  background: linear-gradient(135deg, #ff00ff, #cc00cc);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,0,255,0.5);
}
.btn-info:hover {
  background: linear-gradient(135deg, #cc00cc, #990099);
  box-shadow: 0 0 20px rgba(255,0,255,0.8);
}

/* === Secondary Button === */
.btn-secondary {
  background: linear-gradient(135deg, #999999, #666666);
  color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.btn-secondary:hover {
  background: linear-gradient(135deg, #777777, #444444);
  box-shadow: 0 0 15px rgba(255,255,255,0.5);
}













/* === FOOTER === */
footer {
  text-align: center;
  margin-top: auto;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
  color: #00ffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  text-shadow: 0 0 10px #00ffff;
}

/* === GLOW ANIMATION === */
@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 10px #00ffff; }
  50% { text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff; }
}