html,
body {
  width: 100%;
  height: 100%;
  background-color: var(--light-colour);
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#blocker {
  width: 100vw;
  height: 85vh;
  height: 85svh;
  background-color: transparent;
  position: absolute;
  z-index: 20;
  top: 0;
  display: none;
}

/* Knockout layout */
.resource-holder {
  width: 100vw;
  height: 100vh;
  height: 100svh;
}

#the-cards {
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: 20vh 65vh 15vh;
  grid-template-rows: 20svh 65svh 15svh;
}

/* Top: criteria/title */
.knockout-criteria {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--dark-colour);
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  font-size: 4.5vmin;
  color: var(--white-colour);
  font-weight: 500;
  z-index: 9;
  text-align: center;
  padding: 1vmin 3vmin;
  text-wrap: balance;
  box-shadow: rgba(0, 0, 0, 0.2) 0 3.5vmin 0 -2vmin;
}

/* Middle: arena with two slots */
.knockout-arena {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
}

/* Card */
.knockout-card {
  min-height: 0;
  width: 45vw;
  height: auto;
  aspect-ratio: 3/2;
  max-height: 50vh;
  max-height: 50svh;
  background: var(--dark-colour);
  border-radius: 1vmin;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 0.1vmin 0.2vmin,
    rgba(0, 0, 0, 0.3) 0px 0.35vmin 0.75vmin -0.15vmin,
    rgba(0, 0, 0, 0.2) 0px -0.15vmin 0px inset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vmin;
  cursor: pointer;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform, filter, background-color, color;
  color: var(--white-colour);
}

.knockout-card .face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

/* Fix blurry text after 3D flip */
.knockout-card.flipped {
  transform-style: flat;
}

.knockout-card .card-title {
  /* “front” – item text */
  font-size: 4vmin;
  font-weight: 300;
  color: var(--dark-colour);
  padding: 2vmin 4vmin;
  text-align: center;
}

.knockout-card .card-list {
  /* “back” – question mark */
  color: var(--white-colour);
  font-weight: 900;
  font-size: 20vmin;
}

#versus {
  position: absolute;
  top: auto;
  left: auto;
  font-size: 3vmin;
  font-weight: 900;
  color: var(--grey-colour);
  margin-top: 5vh;
  margin-top: 5svh;
}

/* Hidden utility */
.hidden {
  display: none !important;
}

/* Bottom: footer confirmation */
.knockout-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--dark-colour);
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -3.5vmin 0 -2vmin;
}

.confirm-bar {
  display: flex;
  align-items: center;
  color: var(--white-colour);
  column-gap: 2vmin;
  border-radius: 1vmin;
}

.confirm-bar p {
  margin: 0;
  font-weight: 700;
  font-size: 3vmin;
  text-transform: uppercase;
}

.btn-row {
  display: flex;
  column-gap: 1vmin;
}

.knockout-card.is-selected {
  outline: 1vmin solid var(--red-colour);
  /* outline-offset: 1vmin; */
  filter: brightness(0.9) !important;
}

/* Simple remaining counter in footer (above confirm bar) */
.remaining-wrap {
  display: flex;
  align-items: center;
}
.remaining-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2vmin;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--white-colour);
  padding: 1vmin 0;
  border-radius: 1vmin;
  font-size: 1.75vmin;
  font-weight: 300;
  text-transform: uppercase;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 35vmin;
}

#remaining-num {
  font-size: 5vmin;
  font-weight: 900;
}

.redButton {
  background-color: var(--red-colour) !important;
  padding: 1vmin 3vmin !important;
  width: 15vmin !important;
}

.outlineButton {
  background-color: transparent;
  border: 0.2vmin solid var(--white-colour) !important;
  padding: 1vmin 3vmin !important;
  width: 15vmin !important;
}

.redButton p,
.outlineButton p {
  font-size: 3vmin !important;
}

#summary-button {
  background-color: transparent;
  border: 0.2vmin solid var(--white-colour) !important;
  padding: 1vmin 3vmin !important;
  width: fit-content !important;
}

#summary-button p {
  font-size: 3vmin !important;
  color: var(--white-colour);
}

/* -------------------------------------------------------------------------- */
/*                                SET THE TITLE                               */
/* -------------------------------------------------------------------------- */

.set-title-holder {
  width: 100%;
  height: 100%;
  background-color: var(--dark-colour);
  position: absolute;
  top: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 5vmin;
}

.set-title-top-section {
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2vmin 4vmin 4vmin 4vmin;
  border-radius: 1vmin;
  margin-bottom: 5vmin;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.set-title-top-section h1 {
  font-size: 10vmin !important;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0;
}

.set-title-top-section p {
  text-align: center;
  color: var(--light-colour);
  font-size: 2.5vmin;
}

.set-title-holder h1 {
  color: var(--white-colour);
  text-wrap: balance;
  text-align: center;
}

.set-title-mid-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 2vmin;
}

.set-title-mid-section h1 {
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 2vmin !important;
}

.set-title-mid-section .simpleButton {
  min-height: 7.5vmin;
  margin-top: 3vmin;
}

.set-title-mid-section .simpleButton p {
  font-size: 2vmin;
}

#ko-title-input {
  height: fit-content !important;
  min-width: 50vw;
  padding: 2vh 1vmin;
  font-weight: 300;
  font-size: 2vmin;
}

/* -------------------------------------------------------------------------- */
/*                                 LIST SELECT                                */
/* -------------------------------------------------------------------------- */

.list-controls {
  display: flex;
  gap: 1vmin;
  align-items: center;
}

/* Optional: match heights cleanly */
.list-controls select {
  min-height: 7.5vmin;
}

#list-picker-or {
  color: var(--white-colour);
  margin-bottom: 1vmin;
  font-size: 2vmin;
  font-weight: 900;
}

.list-picker-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 2vmin;
}

.list-picker-holder-labels {
  display: flex;
}

#list-picker-or {
  margin-top: 1.75vmin;
}

.list-picker-holder select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 70vw;
  padding: 1vmin 6vmin 1vmin 2vmin;
  font-size: 2vmin;
  line-height: 1.5;
  background-color: var(--white-colour);
  color: var(--dark-colour);
  border: 2px solid var(--dark-colour);
  background-image: url("data:image/svg+xml,%3Csvg fill='%23333' height='10' viewBox='0 0 10 10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2vmin center;
  background-size: 2vmin;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2vmin 0px -1vmin;
  cursor: pointer;
}

.list-picker-holder select:focus {
  outline: none;
  border-color: var(--dark-colour);
}

/* -------------------------------------------------------------------------- */
/*                                   SUMMARY                                  */
/* -------------------------------------------------------------------------- */

h1 {
  font-size: 4vmin !important;
  color: var(--black-colour);
  font-weight: 100;
  margin-top: 1vmin;
  margin-bottom: 5vmin;
}

.ko-match {
  display: grid;
  width: 80vw;
  grid-template-columns: 45% 10% 45%;
  grid-template-rows: auto;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 5vmin;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.ko-round h3 {
  text-transform: uppercase !important;
  font-weight: 900;
}

.ko-match h2,
.ko-match span {
  font-size: 3vmin !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 300;
  color: var(--black-colour);
}

.ko-round .ko-match h2:not(.eliminated) {
  background-color: var(--white-colour);
  box-shadow: rgba(0, 0, 0, 0.2) 0 2vmin 0 -1vmin;
}

.ko-round:last-of-type .ko-match h2:not(.eliminated) {
  background-color: var(--yellow-colour);
}

.ko-match span {
  font-weight: 300;
  background-color: var(--light-colour);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.eliminated {
  opacity: 0.5;
  /* text-decoration: line-through; */
  font-weight: 100 !important;
}

/* -------------------------------------------------------------------------- */
/*                                  ANIMATION                                 */
/* -------------------------------------------------------------------------- */

.vibrate {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both;
}

@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}