@import url("../configurations/config.css");
  @import url("../assets/components.css");

  /* GENERAL */

  canvas {
    touch-action: none;
    -ms-touch-action: none;
	}
  .hidden {
    display: none;
  }

  *{
    font-family: var(--font-family);
  }

  html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    height: 100%;
    color:var(--font-color);
    font-size: var(--general-font-size);
  }
  
  main{
    background-image: var(--bg-image);
    margin: 0;
    height: 100vh;
    background-position: center;   /* centra l’immagine */
    background-repeat: no-repeat;  /* evita che si ripeta */
    background-size: contain; 
    position:relative;
  }
  
  #gameGrid {
    display: grid;
    grid-template-columns: 3fr 6fr 3fr; /* col-3 col-6 col-3 */
    gap: 20px;
    height: 100%;
    width: 80%;
    margin: 0 auto;
  }

  /* 3 colonne grid: 
    - LEFT classifica
    - CENTER domande e risposte 
    - RIGHT timer 
  */

  #prizes, #quizContainer, #timer {
    padding: 50px 20px 0 20px;
  }
  
   /* LEFT */
  #prizes {
    justify-content: start;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
 
  .prize-item {
    display: flex;
    justify-content: center;
    padding: 5px;
    color: var(--ranking-font-color);
    letter-spacing: var(--ranking-letter-spacing); /* spazio tra le lettere */
    width: 60%;
    font-size: var(--ranking-font-size);
    font-weight: 400;
    background: var( --ranking-bg-color);
    border-radius: var(--ranking-border-radius);
    border: var(--ranking-border-width) var(--ranking-border-style) var(--ranking-border-color);
    margin: 2% 0;
  }

  #prizes .prize-item.active {
    background: var(--ranking-active-bg-color);
    color: var(--ranking-active-font-color);
  }

  /* CENTER */

  #fiftyButton {
    position: absolute;
    top: 5%;
    right: 15%;
    background: var(--secondary-color);
    color: var(--tertiary-color);
    border: var(--border-width) var(--border-style) var(--border-color);  
    border-radius: 50%;
    width: 180px;
    height: 180px;  
    font-weight: bold;
    font-size:1.5rem;
    z-index: 100;
  }

  #fiftyButton.used {
    background: var(--quiz-hover-color);
  }

  /* RESULT */
  #startButton{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #start{
    background: var(--secondary-color);
    color: var(--quiz-font-color);
    cursor: pointer;
    border: var(--border-width) var(--border-style) var(--border-color);  
    border-radius: 50px;
    width: 80%;
    text-align: center;
    padding: 50px 0;
    position: absolute;
    top: 40%;
  }

  #logo {
    position: absolute;
    top: 20%;
    width: 100%;
    transform: translateY(-50%);
    height: var(--logo-height);
    background-image: var(--logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  #quizContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding:20px 0;
    position:relative;
  }

  #quizBox {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    height: 15%;
    border: var(--border-width) var(--border-style) var(--border-color);  
    border-radius: 50px;
    background: var(--secondary-color);
    color: var(--quiz-font-color);
  }

  .question {
    width: 95%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size:var(--quiz-question-font-size);
    margin: 0 auto;
  }

  #answersBox {
    position: absolute;
    bottom: 4%;
    width: 100%;
    height: 35%;
  }

  .answers {
    display: flex;
    flex-wrap: wrap; /* permette di andare a capo */
    width: 100%;
    height: 100%;
    align-items: center;
  }

  .answers .button-box {
    height: 50%;
    width: 48%;
    display: flex;
    align-items: center;
    margin: auto 1%;
  }

  .button-box button{
    background: var(--secondary-color);
    color: var(--quiz-font-color);
    cursor: pointer;
    border: var(--border-width) var(--border-style) var(--border-color);  
    border-radius: 50px;
    width: 100%;
    height: 50%;
    font-weight: bold;
    font-size:var(--quiz-answer-font-size);
    font-family: var(--font-family);
  }

  .answers .button-box button:hover {
    background: var(--quiz-hover-color);
  }

  .wait {
    background: var(--quiz-hover-color) !important;
  }

  .correct {
    background: var(--quiz-correct-answer-color) !important;
  }

  .wrong {
    background: var(--quiz-wrong-answer-color) !important;
  }

  /* RESULT */
  #resultButton{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #result{
    background: var(--secondary-color);
    color: var(--quiz-font-color);
    cursor: pointer;
    border: var(--border-width) var(--border-style) var(--border-color);  
    border-radius: 50px;
    width: 80%;
    text-align: center;
    padding: 50px 0;
    position: absolute;
    top: 40%;
  }

   /* RIGHT */

  #timer {
    text-align: center;
    position: relative;
  }

  #timer-box{
    position: relative;
  }

  #timerCircle {
    background-image: var(--timer-bg-image);
    background-size: contain;
    background-repeat: no-repeat;
    width: var(--timer-svg-size);
    height: var(--timer-svg-size);
  }

  #timeText {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    font-weight: bold;
    transform: translateY(-50%);
    color: var(--timer-text-color);
    font-size:var(--timer-text-font-size);
  }

  #timeLabel {
    position: absolute;
    top: 65%;
    left: 0;
    right: 0;
    font-weight: bold;
    transform: translateY(-50%);
    color: var(--timer-text-color);
    font-size:1rem;
  }

  /* RIFERIMENTO RCP - BOTTOM RIGHT */
  #rcpRef {
    position: absolute;
    right: 2%;
    bottom: 2%;
    max-width: 100%;
    color: var(--secondary-color);
    text-align: right;
    font-size: 0.75rem;
    z-index: 10;
  }

  #rcpRef.hidden {
    display: none;
  }

  #rcpRef p {
    margin: 0;
  }

  .rcp-title {
    font-weight: bold;
    margin-bottom: 4px !important;
  }

  #rcpLink {
    color: var(--secondary-color);
    font-weight: bold;
    text-decoration: underline;
  }

  .rcp-hand {
    height: 1.6em;
    width: auto;
    vertical-align: middle;
    margin-left: 8px;
  }

  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  footer div{
    width: 50%;
    margin: 0 auto;
    color: var(--secondary-color);
    font-size:0.6rem;
    font-family: var(--font-family);
    padding:10px;
    text-align: center;
  }

  /* NOME TEAM — stesso stile del box #start / #result */
#teamForm {
  background: var(--secondary-color);
  color: var(--quiz-font-color);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: 50px;
  width: 80%;
  text-align: center;
  padding: 40px 0;
  position: absolute;
  top: 35%;
  z-index: 50;
}

#teamForm.hidden {
  display: none;
}

#teamForm form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#teamForm h2 {
  margin: 0;
}

#teamName {
  width: 70%;
  padding: 15px 25px;
  font-size: var(--quiz-answer-font-size);
  font-family: var(--font-family);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: 50px;
  text-align: center;
  outline: none;
}

.team-error {
  min-height: 1.2em;
  margin: 0;
  font-weight: bold;
  color: var(--quiz-wrong-answer-color);
}

.team-submit {
  background: var(--quiz-hover-color);
  color: var(--quiz-font-color);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: 50px;
  padding: 15px 60px;
  font-weight: bold;
  font-size: var(--quiz-answer-font-size);
  font-family: var(--font-family);
  cursor: pointer;
}

.team-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}