* {
  box-sizing:border-box;
}


:root {

  --purple:#6b21a8;
  --purple-dark:#3b0764;
  --purple-light:#f3e8ff;

  --orange:#f97316;

  --red:#dc2626;
  --red-light:#fee2e2;

  --gray:#f8fafc;

  --border:#ddd6fe;

  --text:#1f2937;

}





body {

  margin:0;

  min-height:100vh;

  font-family:
  "Inter",
  Arial,
  sans-serif;

  background:
  var(--purple);

  color:var(--text);

}





#app {

  max-width:1100px;

  margin:auto;

  padding:25px;

}






header {

  color:white;

  text-align:center;

}



header h1 {

  font-size:
  clamp(1.8rem,4vw,2.8rem);

}






#progress {

  height:10px;

  background:
  rgba(255,255,255,.25);

  border-radius:20px;

  overflow:hidden;

}




#progressBar {

  height:100%;

  width:0%;

  background:
  var(--orange);

  transition:.3s;

}







main {

  background:white;

  border-radius:20px;

  padding:35px;

  margin-top:30px;

  box-shadow:
  0 20px 50px rgba(0,0,0,.25);

}






.step {

  display:none;

}



.step.active {

  display:block;

}






h2 {

  text-align:center;

  color:
  var(--purple-dark);

}








/* LOADING */


#loadingScreen {

  display:none;

  text-align:center;

  padding:70px 20px;

}



#loadingScreen.active {

  display:block;

}




.spinner {

  width:60px;

  height:60px;

  border-radius:50%;

  border:

  7px solid #eee;

  border-top:

  7px solid var(--orange);

  margin:
  0 auto 20px;

  animation:
  spin 1s linear infinite;

}




@keyframes spin {

to {

transform:rotate(360deg);

}

}








/* FORMS */


label {

  display:block;

  margin:25px 0;

  font-weight:700;

}



.required {

  color:
  var(--red);

}



input {

  width:100%;

  margin-top:8px;

  padding:14px;

  border-radius:12px;

  border:

  2px solid var(--border);

  font-size:1rem;

}



input:focus {

  outline:none;

  border-color:
  var(--purple);

}



input.invalid {

  background:
  var(--red-light);

  border-color:
  var(--red);

}



.field-error {

  display:none;

  color:
  var(--red);

  font-weight:700;

  margin-top:7px;

}



.field-error.visible {

  display:block;

}









/* ERRORS */


.global-error {

  display:none;

  margin-top:20px;

  padding:12px;

  border-radius:10px;

  background:
  var(--red-light);

  color:
  var(--red);

  font-weight:700;

}



.global-error.visible {

  display:block;

}








/* BUTTONS */


.buttons {

  display:flex;

  justify-content:space-between;

  gap:15px;

  margin-top:30px;

}



button {

  padding:14px 28px;

  border:none;

  border-radius:12px;

  background:
  var(--purple);

  color:white;

  font-weight:800;

  cursor:pointer;

}



button:hover {

  background:
  var(--purple-dark);

}



button.back {

  background:#64748b;

}



#submitButton {

  background:
  var(--orange);

}








/* BRACKET */


#bracketContainer {

  overflow-x:auto;

  padding-bottom:10px;

}





.bracket {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:55px;

  min-width:900px;

}





.round {

  width:220px;

  display:flex;

  flex-direction:column;

  justify-content:center;

}



.round-title {

  text-align:center;

  font-weight:900;

  color:
  var(--purple-dark);

  margin-bottom:18px;

}







/* spacing between semifinal games */


.round:nth-child(2) .match:first-of-type {

  margin-bottom:90px;

}





.match {

  border:

  2px solid var(--border);

  border-radius:14px;

  overflow:hidden;

  margin-bottom:20px;

}





.team {

  display:flex;

  align-items:center;

  gap:10px;

  padding:14px;

  cursor:pointer;

  transition:.2s;

}



.team:hover {

  background:
  var(--purple-light);

}




.team.selected {

  background:
  var(--purple);

  color:white;

  font-weight:800;

}



.team.locked {

  cursor:not-allowed;

  opacity:.5;

  background:#f1f5f9;

}




.team + .team {

  border-top:
  1px solid var(--border);

}




.flag {

  width:28px;

  height:20px;

  object-fit:cover;

  border-radius:3px;

}








/* CHAMPION */


.champion-card {

  max-width:320px;

  margin:
  20px auto 0;

  padding:18px;

  text-align:center;

  border-radius:15px;

  color:white;

  background:
  linear-gradient(
    135deg,
    var(--purple),
    var(--orange)
  );

  font-weight:800;

}



.trophy {

  font-size:2.5rem;

}








/* REVIEW */


#review {

  background:
  var(--gray);

  padding:20px;

  border-radius:15px;

}



.review-section {

  margin-bottom:20px;

}



.review-section h3 {

  color:
  var(--purple);

}









@media(max-width:700px){


main {

padding:20px;

}



.buttons {

flex-direction:column-reverse;

}



button {

width:100%;

}



.bracket {

min-width:900px;

}


}

@media(max-width:700px){


.bracket {

  display:flex;

  flex-direction:column;

  min-width:0;

  gap:25px;

}



.round {

  width:100%;

}



.round:nth-child(2)
.match:first-of-type {

  margin-bottom:20px;

}



#bracketContainer {

  overflow:visible;

}


}