/******************************************************
 * STYLE.CSS
 ******************************************************/
body {
  background: #222;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size:medium;
  color:#fff;
}

h1{
  font-size:3rem;
}

#app {
  margin: 20px auto;
  padding: 20px;
  max-width: 600px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#game-info {
  margin-bottom: 20px;
}

#input-area {
  margin-top: 20px;
}

#user-input {
  width: 70%;
  padding: 10px;
  font-size: 14px;
}

#submit-btn {
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
}

#lyrics {
  margin-top: 30px;
}

#end-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

#end-modal div {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 900px;
  text-align: center;
}

#categorySelect {
    font-family: 'Freckle Face';
    font-size: 25px;
    background-color: #111;
    color: #fff;
}

input {
  font-size: large;
}

/* HTML: <div class="loader"></div> */
.theword{
  cursor:pointer;
  font-weight: 700;
  font-family: Quicksand;
}

.logocolor, #rap-lyrics{
  color:#ffb805;
}

.modal{
  color:#000;
  --bs-modal-width: 50%;
}

.handwritten{
  font-family: Gochi Hand;
  font-size:xx-large;
}

.ai-word-pulsing {
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.bonus-circle {
  position: absolute;
  background-color: #ffc107; /* Change to desired color (yellow/gold) */
  color: #fff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size:x-large;
  opacity: 1;
  animation: floatUp 3s ease-out forwards;
  pointer-events: none; /* So it doesn't interfere with user clicks */
}

.help-link{
  cursor:pointer;
  position:relative;
  bottom:10px;
}

.bold-yellow{
  color:#ffc107;
}

.modal-content{
  background-color: #555;
  color: #fff;
}

.modal-body{
  background-color: #333;
  font-size: large;
}

.modal-title{
  color:#ffb805;
}

.userWords{
    color:#ffb805;
    font-weight: 700!important;
}

@keyframes floatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

.loading-parent{
  position: absolute;
  height:0;
}

#loading-spinner{
  position: relative;
  top:22px;
  left:13px;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  margin:auto;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side,#ffb805 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

@keyframes wobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

.small-font{
  font-size: 1rem;
  color:#999;
}

a{
  font-size: 1rem;
  color:#555;
}


.display-5{
  font-size: xxx-large;
}

.small{
  font-size: .8rem;
  color:#999;
}

.bonus-text {
  position:absolute;
  /* Start fully visible */
  opacity: 1;
  /* Animate fading to invisible */
  animation: fadeOut 1s ease-out forwards;
  /* Wait 3 seconds before starting the fade */
  animation-delay: 1s;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes l34 {
  50%,100% {transform: translate(var(--d,0)) rotate(.5turn)}
}

pre {
  background: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
}