h1 {
  font-family: 'Permanent Marker', cursive;
  text-align: center;
  margin-top: 60px;
  color: #E9E3DF;
}

body {
  background-color: #000000;
}

.rules { 
  font-family: 'Roboto', sans-serif;
  font-weight: bolder;
  font-size: larger;
  background-color: #FF7A30;
  color: #E9E3DF;
  border-radius: 8px;
  margin: 15px auto;  /* centers the button, 15px applies to top and bottom, auto applies to left and right, which makes the element center horizontally (if it has a fixed width or display: block) */ 
  display: block;     /* makes margin:auto work */
  height: 40px;
  width: 100px;
  text-align: center;
  cursor: pointer; /*changes cursor to hand icon when hover over this element, shows that the element is clickable*/
}

/* Container for TIMO, VS, Warrior */
.circle {
  display: flex;
  justify-content: center;   /* center items in a row horizontally (left to right) */
  align-items: center;       /* aligns items in a row vertically (top to bottom) */
  gap: 60px;                 /* spacing between items */
  margin-top: 50px;
}

.player {
  text-align: center;
}

.player img {
  border-radius: 50%;
  border: 4px solid blue;
  width: 200px;
  height: 200px;
}

.w-name, .t-name {
  font-family: 'Roboto', sans-serif;
  color: #E9E3DF;
  margin-top: 10px;
}

.vs {
  font-family: 'Permanent Marker', cursive;
  font-size: 50px;
  color: #E63946;
}

/* Choices row */
.choices {
  margin-top: 70px;
  display: flex;
  justify-content: center;
  gap: 80px; /* space between rock, paper, scissors */
}

.choices img {
  border-radius: 15%;
  width: 200px;
  height: 200px;
  cursor: pointer;
  transition: transform 0.2s;
}

.choices img:hover {
  transform: scale(1.1); /* little zoom on hover */
}

.choices img:active {
  transform: translateY(2px); /* moves it down a little */
}

.controls{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 70px;
}

/* .torn-btn{
    margin-top: 30px;
    display: flex;
    justify-content: center; /* horizontal center */
    /* align-items: center;     vertical center */
    
/* } */ 

.torn-btn-text{
    font-family: 'Roboto', sans-serif;
    color: #E9E3DF;
    top: 50%;                   /* vertical center */
    left: 50%;                  /* horizontal center */
    transform: translate(-50%, -50%); /* perfect center */
    position: absolute;
    font-size: larger;            /* adjust size */
    font-weight: bolder;
    pointer-events: none;       /* click goes through text */
}

.t-btn {
  position: relative;         /* so text can be placed over image */
  background-color: black;
  border: none;
  cursor: pointer;
  padding: 0;                 /* remove default padding */
}

.t-btn img{
    display: block;
    height: 50px;
    width: 150px;
    border-radius: 40px;
    padding: 10px 20px; /*top-bottom-> 10px, left-right-> 20px, used for defining the space inside the button between the text and the button’s border*/
    font-size: 18px;
    cursor:pointer;
    transition: transform 0.2s;
}

.t-btn img:hover {
    transform: scale(1.1);
    /* background: #000000; */
}

/*Active effect (clicked)*/
.t-btn img:active {
  /* background: #000000; */
  transform: translateY(2px); /* moves it down a little */
}

#r1{
    font-size:30px;
    height: 50px; 
    width: 150px; 
    /* background-color: #000000; */
    border: none;
    color:#E9E3DF;
    margin-top: 20px;
    margin-left: 3px;;
}

.result-container{
  font-family: 'Roboto', sans-serif;
  color: #E9E3DF;
  font-size: larger;
  text-align: center;
}

.literal-rules{
  /* text-align: center; */
  background-color: #000000;
  color: #E9E3DF;
  font-size: bolder;
  text-align: center; /* center the text itself */
  display: flex;
  justify-content: center; /* center the block */
}

.literal-rules ol{
  font-family: 'Roboto', sans-serif;
  text-align: left;  /* keep list items aligned neatly */
  display: inline-block; /* makes the list shrink to its content */
  margin-top:20px;
  
}


/* media queries */

/* Large screens (1200px and above) */
@media (min-width: 1200px) {
  h1 {
    font-size: 48px;
  }

  .player img {
    width: 250px;
    height: 250px;
  }

  .choices img {
    width: 220px;
    height: 220px;
  }
}

/* Medium desktops & laptops (992px – 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  h1 {
    font-size: 40px;
  }

  .choices {
    gap: 60px;
  }
}

/* Tablets (768px – 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  h1 {
    font-size: 32px;
  }

  .player img {
    width: 180px;
    height: 180px;
  }

  .choices img {
    width: 160px;
    height: 160px;
  }
}


/*Tablets*/
@media (max-width: 768px) {
  .circle {
    flex-direction: column; /*stacks item vertically in the coloumn instead of row*/
    gap: 20px;
  }

    .vs {
        font-size: 30px;
    }

  .choices {
    flex-direction: column;
    gap: 30px;
  }

  .t-btn img{
    font-size: 16px;
    padding:9px 18px;
  }

  #r1 {
    font-size: 24px;  /* smaller icon */
    height: 45px;
    width: 120px;
    margin-top: 12px;
    margin-left: 2px;
    }
}


/*Small tablets & big phones*/
@media (max-width: 767px) and (min-width: 451px) {
  h1 {
    font-size: 26px;
  }

  .choices {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .choices img {
    width: 140px;
    height: 140px;
  }
}


/*Normal Smartphones*/
@media (max-width: 450px) {
  h1 {
    font-size: 24px;
  }

  .vs {
    font-size: 24px;
  }

  .player img{
    width: 150px;
    height: 150px;
  }
  .choices {
    flex-direction: column;   /* stack vertically */
    gap: 20px;               /* smaller gap between choices */
    margin-top: 40px;        /* less top space */
    justify-content:center;
    align-items:center;
  }

  .choices img {
    width: 120px;   /* reduce size */
    height: 120px;
  }
  .t-btn img {
    padding: 6px 12px;
    font-size: 14px;
  }
  #r1 {
    font-size: 20px; /* even smaller */
    height: 40px;
    width: 100px;
    margin-top: 10px;
    margin-left: 2px;
    }
}

/* Extra small phones (max 350px) */
@media (max-width: 350px) {
  h1 {
    font-size: 20px;
  }

  .vs {
    font-size: 18px;
  }

  .player img {
    width: 120px;
    height: 120px;
  }

  .choices img {
    width: 100px;
    height: 100px;
  }

  .t-btn img {
    width: 120px;
    height: 40px;
  }

  #r1 {
    font-size: 18px;
    width: 80px;
  }
}