*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /*apparently, shouldn't use this*/
}
html {
  background-color: rgb(200, 200, 200);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 62.5%;
  /* FONTSIZE TRICK-- 1 rem = 10 px here, usually 1 rem = 16px */
  caret-color: transparent;
  user-select: none;
  overflow-x: hidden;
  max-height: 100vh;
}
body {
  font-size: 2rem;
  /* font-size: calc(1.5rem + 0.4vw); */
  /* FONTSIZE TRICK-- 1 rem = 10 px here, usually 1 rem = 16px */
  /* FONTSIZE - Adding the 0.4 is for responsivity */
}
li {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: initial;
}
/* Button base styles */
button {
  padding: 0;
  border: none;
  background-color: var(--accent);
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  border: 1px solid black;
  border-radius: 1.5rem;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.btnShadow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0rem 1rem;
  border-radius: 1.5rem;
  transition: all 0.1s ease-in-out;
  z-index: 1;
  font-size: clamp(1.4rem, 3.8vw, 2.6rem);
}

.btnShadow {
  filter: drop-shadow(1px 1px 1px black);
  transition: all 0.1s;
}
.btnShadow:hover {
  filter: drop-shadow(2px 2px 2px black);
}
.btnShadow:active {
  transform: translate3d(0.5px, 1px, 0);
}
/* ---------------------------------------------------- */
:root {
  --header: #8d6e51;
  --main: #526068;
  --accent: #daa675c4;

  --textWhite: #f5f5f5;
  --tile: rgb(73, 73, 73);
}
/* ---------------------------------------------------- */
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  max-height: 100vh;
  /*This is important for flex-based bottom footer*/
}
header {
  background-color: var(--header);
  color: var(--textWhite);
  border-bottom: 1px solid black;
  filter: drop-shadow(1px 1px 100px black);
  width: 100%;
  padding: min(1rem, 0.4vw) 0;
  text-align: center;
  letter-spacing: min(3px, 0.3vw);
  flex-grow: 0;
  flex-shrink: 0;
  margin: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
h1 {
  filter: drop-shadow(1px 1px 1px black);
  font-size: clamp(3.8rem, 5vw, 5.4rem);
}

#main {
  background-color: var(--main);
  color: var(--textWhite);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  /*may want to rejig this last one*/
}

/* Secret Goodlook styling */
.tile #goodlook{
  background-image: url(goodlook.webp);
  background-size: cover;
  background-position: center;
  display: inline;
  width: clamp(8rem, 13vw, 16rem);
  height: clamp(10rem, 16vw, 20rem);
  /* animation: colorRotate 1s linear infinite; */
}
@keyframes colorRotate {
  100% {
    -webkit-filter: hue-rotate(360deg);
  }
}

#infoDisplay #goodlook{
  background-image: url(goodlook.webp);
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: clamp(2.4rem, 6vw, 4.4rem);
  height: clamp(3.2rem, 8vw, 6rem);
  margin-bottom: -1rem;
}
/* Secret Goodlook styling */

.trippyWin {
  animation: colorRotate 1s linear infinite;
}
@keyframes colorRotate {
  100% {
    -webkit-filter: hue-rotate(360deg);
  }
}
/* trippy win animation */

.tile #ultros{
  background-image: url(ultros.webp);
  background-size: cover;
  background-position: center;
  display: inline;
  width: clamp(9rem, 13vw, 19rem);
  height: clamp(9rem, 13vw, 19rem);
  border-radius: 50%;
}
#infoDisplay #ultros{
  background-image: url(ultros.webp);
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: clamp(2.4rem, 6vw, 4.4rem);
  height: clamp(2.4rem, 6vw, 4.4rem);
  margin-bottom: -1rem;
}
/* ultros styling */



#infoDisplay {
  display: none; /*should be Flex*/
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  justify-self: start;
  flex-grow: 0;
  height: 10rem;
  gap: 1rem;
}
#infoDisplay button {
  visibility: hidden; /*should be Visible*/
}
h2 {
  text-align: center;
  filter: drop-shadow(1px 1px 1px black);
  font-size: clamp(2.8rem, 6vw, 3.8rem);
}

/*-  These two are separate due to 'dialog' method needing its own container -*/
#startScreen {
  /*- This is the div inside -*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 2rem 0;
  height: 100%;
  width: 100%;
  line-height: 1.5;
}
dialog {
  height: clamp(40rem, 75vh, 80rem);
  width: clamp(35rem, 75vw, 85rem);
  margin: auto;
  border: 2px solid black;
  background-color: var(--header);
  box-shadow: 5px 5px 20px 0px black;
  border-radius: 15px;
  color: var(--textWhite);
  /*- for some reason textcolor doesn't 'take' with dialog -*/
}
/*-  These two are separate due to 'dialog' method needing its own container -*/
form {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-around;
  height: 80%;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1.1rem, 3.3vw, 2.2rem);
}
fieldset[name="names"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
  gap: 1rem;
  border: none;
}
fieldset[name="gameType"] {
  display: flex;
  justify-content: space-around;
  border: none;
  min-width: min-content;
  gap: clamp(4rem, 4vw, 15rem);
}

fieldset[name="symbols"] {
  text-align: center;
  font-size: clamp(1.1rem, 3.3vw, 2.2rem);
  border: none;
  display: flex;
  justify-content: space-around;
  width: 80%;
}
#symbolBox1,
#symbolBox2 {
  /* display: flex;
  max-width: 30%;
  flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-template-rows: repeat(2, 1fr); /* 2 rows */
  grid-gap: 4px;
  font-size: clamp(3rem, 5vw, 6rem);
}

div:has(input) {
  position: relative;
}

/*radio button styling*/
/*top section here is a traditional radio button hide method*/
/*below it is my own implementation to retain validation msg*/
input[type="radio"] {
  /* -webkit-appearance: none;
  appearance: none; */
  /* For iOS < 15 to remove gradient background */
  /* background-color: #fff; */
  /* Not removed via appearance */
  /* margin: 0; */
  opacity: 0;
  position: absolute;
  top: 150%;
  left: 80%;
}

input[type="radio"][data-disabled="true"] + label {
  filter: grayscale(1) contrast(0.5) brightness(0.5);
}

#startButtonsDiv {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 4vw, 2rem);
}

input[name="gameType"] + label {
  display: flex;
  height: 100%;
  align-items: center;
}
/*finnicky thing that lets me center human/cpu radio labels as they get clicked and grow*/

input[name="gameType"]:checked + label {
  text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px black;
  display: inline-block;
  transform: scale(1.2);
}
/*provides button-like effect when selecting radio button for cpu or human*/

#gameBoard {
  display: none; /*should be Grid*/
  margin: 4rem;
  grid-template-columns: repeat(3, 1fr);
  width: clamp(30rem, 75vw, max-content);
  /*These should stay uniform*/
  /*See also #tile size dependency*/
  /*min-width: auto keeps the tiles centered when toying with Gap*/
  /* gap: clamp(0.8rem, 1vw, 1.1rem); */
}

#footer {
  background-color: var(--header);
  color: var(--textWhite);
  padding: 2rem 0;
  border-top: 1px solid black;
  width: 100%;
  text-align: center;
  padding: min(1rem, 0.4vw) 0;
  text-align: center;
  letter-spacing: min(3px, 0.3vw);
  flex-grow: 0;
  flex-shrink: 0;
  filter: drop-shadow(0px 0px 4px rgb(var(--highlighted)));
}

.tile {
  width: clamp(10rem, 24vw, 24rem);
  height: clamp(10rem, 24vw, 24rem);
  font-size: clamp(8rem, 14vw, 16rem);
  /*These 3 should stay uniform*/
  /*See also #gameBoard size dependency*/

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  outline: 2px solid black;
  cursor: pointer;
  transition: all 0.025s ease-in-out;
  background-color: var(--tile);
  color: var(--accent);
  margin: 0.5rem;
}

/* -- Mobile sticky touch fixes - for hover and actives -- */
@media (hover: hover) {
  .tile:hover {
    filter: brightness(150%);
  }
  .symbolBoxes:hover {
    filter: brightness(120%);
  }
}
.tile:active {
  transform: scale(0.925);
}
.symbolBoxes:active {
  transform: scale(0.95);
}
/* ---------------------------------------------------- */
.nameEntry {
  font-size: min(calc(1.4rem + 1.4vw), 2.4rem);
  max-width: 25rem;
  border: 2px solid black;
  border-radius: 0.5rem;
  text-align: center;
}
/*Individual input name box class*/