/** @format */
@import url("https://use.typekit.net/xfo5grg.css");

@font-face {
  font-family: "knockouthtf48-featherweight";
  src: url("./assets/fonts/knockout-htf48-featherweight-webfont.woff")
      format("woff"),
    url("./assets/fonts/knockout-htf48-featherweight-webfont.woff2")
      format("woff2");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: new-reason, sans-serif;
  font-weight: bold;
}

body.aframe-inspector-opened .a-dom-overlay {
  display: none;
}

.overlay-footer {
  position: absolute;
}

.a-enter-vr-button {
  display: none;
}

#my-interface {
  user-select: none;
  display: none;
  background: lavenderblush;
  color: #333333;
  border-radius: 1em;
  padding: 1em;
  margin: 0;
  accent-color: hotpink;
}

#my-interface h2 {
  margin: 0;
}

#my-interface fieldset {
  padding: 0;
  margin-bottom: 0.5em;
}

#dom-overlay-message {
  padding: 1em;
  background: #33333355;
  border-top: 5px solid #ffffff55;
  color: white;
}

/* ------- main menu -------------------------------------------*/

.main-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.main-menu-container {
  position: relative;
}

#sign {
  height: 90vh;
}

.main-content {
  position: absolute;
  left: 48%;
  transform: translateX(-50%);
  bottom: 15.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  text-align: center;
}

.mainButton {
  color: #ffffd5;
  border: none;
  background-color: #f0693f;
  padding: 10px 20px 5px 20px;
  font-family: new-reason, sans-serif;
  font-weight: bold;
  position: relative;
  box-shadow: 0.33px 0.33px #de4d1f, 0.66px 0.66px #de4d1f, 1px 1px #de4d1f,
    1.33px 1.33px #de4d1f, 1.66px 1.66px #de4d1f, 2px 2px #de4d1f,
    2.33px 2.33px #de4d1f, 2.66px 2.66px #de4d1f, 3px 3px #de4d1f,
    3.33px 3.33px #de4d1f, 3.66px 3.66px #de4d1f, 4px 4px #de4d1f,
    4.33px 4.33px #de4d1f, 4.66px 4.66px #de4d1f, 5px 5px #de4d1f;
}

.mainButton:disabled {
  opacity: 0.55;
  cursor: default;
}

.mainButton:hover {
  background-color: #de4d1f;
  box-shadow: 0.33px 0.33px #b13f1c, 0.66px 0.66px #b13f1c, 1px 1px #b13f1c,
    1.33px 1.33px #b13f1c, 1.66px 1.66px #b13f1c, 2px 2px #b13f1c,
    2.33px 2.33px #b13f1c, 2.66px 2.66px #b13f1c, 3px 3px #b13f1c,
    3.33px 3.33px #b13f1c, 3.66px 3.66px #b13f1c, 4px 4px #b13f1c,
    4.33px 4.33px #b13f1c, 4.66px 4.66px #b13f1c, 5px 5px #b13f1c;
}

.textButton {
  background-color: firebrick;
  color: #0e8d49;
  background-color: Transparent;
  border: none;
  font-size: 3.8vh;
  font-family: "knockouthtf48-featherweight";
}

.textButton:hover {
  color: #13e76e;
}

.introBtn {
  font-size: 2vh;
  margin-bottom: 8%;
}

.gameplayButtons {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em;
  transform: translateX(-2.25%);
}

.gameplayButtons button {
  font-size: 1.8vh;
  padding: 10px 10px 5px 10px;
  margin: 4px;
}

/* ------- modal ------------------------------------------ */

.intro-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  filter: drop-shadow(0 0 1rem #031f1074);
}

.modal-content {
  position: relative;
}

.closeBtnConatiner {
  display: flex;
  justify-content: end;
  position: absolute;
  right: 0%;
  top: -1.5%;
}

.closeBtn {
  height: 85%;
  width: 85%;
  border: none;
  background-color: #f0693f;
  padding: 8px;
  box-shadow: 0.33px 0.33px #de4d1f, 0.66px 0.66px #de4d1f, 1px 1px #de4d1f,
    1.33px 1.33px #de4d1f, 1.66px 1.66px #de4d1f, 2px 2px #de4d1f,
    2.33px 2.33px #de4d1f, 2.66px 2.66px #de4d1f, 3px 3px #de4d1f,
    3.33px 3.33px #de4d1f, 3.66px 3.66px #de4d1f, 4px 4px #de4d1f;
}

.closeBtn:hover {
  background-color: #de4d1f;
  box-shadow: 0.33px 0.33px #b13f1c, 0.66px 0.66px #b13f1c, 1px 1px #b13f1c,
    1.33px 1.33px #b13f1c, 1.66px 1.66px #b13f1c, 2px 2px #b13f1c,
    2.33px 2.33px #b13f1c, 2.66px 2.66px #b13f1c, 3px 3px #b13f1c,
    3.33px 3.33px #b13f1c, 3.66px 3.66px #b13f1c, 4px 4px #b13f1c;
}

.modal-text {
  position: absolute;
  right: 5.2%;
  top: 17%;
  width: 31%;
  text-align: center;
}

.modal-text button {
  letter-spacing: 0.06em;
  margin-top: 10%;
}

.modalButtons {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  padding-top: 10%;
  width: 75%;
  text-align: center;
}

.modalButtons button {
  padding: 10px 20px 7px 20px;
  font-size: 2vh;
  margin: auto;
  margin-bottom: 10%;
  letter-spacing: 0.06em;
}

#modalBackground {
  width: 75vw;
  max-width: 1000px;
  min-width: 710px;
}

hr {
  height: 3px;
  width: 12px;
  background-color: #ecec43;
  border: none;
  margin-bottom: 0.8em;
  margin-top: 1em;
}

h1 {
  color: #ecec43;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bodyText {
  color: #fffed5;
  font-size: 0.6em;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.3em;
}

.bodyText a {
  color: #fffed5;
}

#firstHowTo {
  margin: 0;
}

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

.instructionIcons {
  margin: 0;
  padding: 0;
  height: 1em;
  padding: 3%;
}

@media only screen and (min-height: 506px) and (min-width: 506px) {
  .modal-text {
    right: 4%;
    width: 33%;
  }

  h1 {
    font-size: 1.4em;
  }

  .bodyText {
    font-size: 0.8em;
  }

  .instructionIcons {
    height: 1.5em;
  }
}

@media only screen and (max-width: 1100px) and (min-height: 506px) {
  .modal-text {
    right: 4%;
    width: 33%;
  }

  h1 {
    font-size: 1em;
  }

  .bodyText {
    font-size: 0.6em;
  }

  .instructionIcons {
    height: 1em;
  }

  .modalButtons button {
    font-size: 0.5em;
  }
}

/* ------- desktop (non-VR) mode HUD ---------------------------------*/

#desktop-hud {
  position: fixed;
  top: 12px;
  left: 16px;
  color: #fffed5;
  background: #03210fb0;
  border-radius: 8px;
  padding: 10px 14px 6px 14px;
  font-family: "knockouthtf48-featherweight";
  font-size: 3vh;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
}

#desktop-hint {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: #fffed5;
  background: #03210fb0;
  border-radius: 8px;
  padding: 8px 14px 5px 14px;
  font-family: "knockouthtf48-featherweight";
  font-size: 2.2vh;
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
  text-align: center;
  max-width: 80vw;
}

#mp-scoreboard {
  position: fixed;
  top: 12px;
  right: 16px;
  color: #fffed5;
  background: #03210fb0;
  border-radius: 8px;
  padding: 10px 14px 6px 14px;
  font-family: "knockouthtf48-featherweight";
  font-size: 2.4vh;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
  text-align: right;
}

.mp-row {
  margin-bottom: 2px;
}

#mp-toasts {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  text-align: center;
  pointer-events: none;
}

.mp-toast {
  background: #03210fb0;
  color: #fffed5;
  border-radius: 8px;
  padding: 8px 14px 5px 14px;
  font-family: "knockouthtf48-featherweight";
  font-size: max(2.4vh, 13px);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  user-select: none;
}

#mp-results {
  position: fixed;
  bottom: 27vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: #03210fd0;
  border-radius: 10px;
  padding: 12px 20px 8px 20px;
  color: #fffed5;
  font-family: "knockouthtf48-featherweight";
  font-size: max(2.4vh, 14px);
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.mp-results-title {
  color: #ecec43;
  margin-bottom: 4px;
}

#voice-btn {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 6;
  background: #03210fb0;
  color: #fffed5;
  border: 2px solid #fffed555;
  border-radius: 12px;
  font-family: "knockouthtf48-featherweight";
  font-size: max(2.2vh, 13px);
  letter-spacing: 0.08em;
  padding: 10px 14px 6px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

#voice-btn[data-state="on"] {
  background: #1cb134cc;
  border-color: #d5ffdd88;
}

#voice-btn[data-state="muted"] {
  background: #de4d1fcc;
  border-color: #ffe3d588;
}

#voice-btn[data-state="blocked"] {
  opacity: 0.55;
  cursor: default;
}

/* phones: the bottom-left corner belongs to GO TO BALL / SIGHT */
@media (pointer: coarse) {
  #voice-btn {
    bottom: 92px;
  }
}

/* ------- end-of-round replay button ---------------------------------*/

#play-again-btn {
  position: fixed;
  left: 50%;
  bottom: 18vh;
  transform: translateX(-50%);
  z-index: 6;
  font-size: max(2.6vh, 16px);
  letter-spacing: 0.08em;
  padding: 14px 26px 9px 26px;
  cursor: pointer;
}

/* ------- touch (phone/tablet) controls ------------------------------*/

#touch-ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  font-family: "knockouthtf48-featherweight";
}

#touch-ui .touch-btn {
  pointer-events: auto;
  position: fixed;
  display: none;
  background: #03210fb0;
  color: #fffed5;
  border: 2px solid #fffed555;
  border-radius: 12px;
  font-family: inherit;
  font-size: max(2.6vh, 14px);
  letter-spacing: 0.08em;
  padding: 12px 16px 8px 16px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

#touch-menu,
#touch-exit {
  top: 10px;
  right: 12px;
}

#touch-toball,
#touch-sight {
  bottom: 14px;
  left: 14px;
  min-height: 54px;
}

#swing-pad {
  pointer-events: auto;
  position: fixed;
  display: none;
  right: 10px;
  bottom: 10px;
  width: min(30vw, 220px);
  height: 62vh;
  border: 2px dashed #fffed566;
  border-radius: 18px;
  background: #03210f50;
  color: #fffed5aa;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: max(2.2vh, 12px);
  letter-spacing: 0.08em;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

#touch-ui[data-mode="walk"] #touch-menu,
#touch-ui[data-mode="walk"] #touch-toball {
  display: block;
}

#touch-ui[data-mode="aim"] #touch-exit,
#touch-ui[data-mode="aim"] #touch-sight {
  display: block;
}

#touch-ui[data-mode="aim"] #swing-pad {
  display: flex;
}

#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: auto;
  background: #03210ff2;
  color: #fffed5;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 5vh;
  letter-spacing: 0.08em;
}

body.touch-playing {
  touch-action: none;
  overscroll-behavior: none;
}

body.touch-playing canvas.a-canvas {
  touch-action: none;
}

@media (orientation: portrait) {
  body.touch-playing #rotate-overlay {
    display: flex;
  }
}

/* keep the HUD legible but small on phone landscape (vh gets tiny) */
@media (pointer: coarse) {
  #desktop-hud {
    font-size: max(2.4vh, 13px);
    top: 8px;
    left: 10px;
    padding: 8px 10px 4px 10px;
  }

  #desktop-hint {
    font-size: max(1.9vh, 11px);
    bottom: 8px;
    max-width: 44vw;
  }

  #mp-scoreboard {
    font-size: max(1.9vh, 11px);
    top: 62px;
    right: 12px;
  }
}

/* ------- show/hide classes ------------------------------------------*/

.hide {
  display: none !important;
}

.show {
  display: block !important;
}