/* CSS RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  cursor: none;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* --- */
:root {
  --base-color: #191724;
  --overlay-color: #26233ade;
  --text-color: #e0def4;
  --love-color: #eb6f92;
  --gold-color: #f6c177;
  --rose-color: #ebbcba;
  --pine-color: #31748f;
}

/* --- */
@font-face {
  font-family: 'Iosevka';
  src: url('../assets/fonts/iosevka-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Iosevka';
  src: url('../assets/fonts/iosevka-italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Iosevka';
  src: url('../assets/fonts/iosevka-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* --- */

body {
  font-family: 'Iosevka', sans-serif;
  width: 100vw;
  height: 100vh;
  background-color: black;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 3vw;
}

canvas {
  /* border: solid grey; */
  aspect-ratio: 16 / 9;
  position: absolute;
  width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  image-rendering: auto;
  /* cursor: none; */
}

#ui-container {
  display: flex;
  aspect-ratio: 16 / 9;
  position: absolute;
  width: 100%;
  max-width: calc(100vh * (16 / 9));
  max-height: 100vh;
  object-fit: contain;
  image-rendering: auto;
  /* background-color: #ffffff55; */
  font-size: 10%;
}

#hud-container,
#menu-container {
  width: 100%;
  height: 100%;
  position: absolute;
}

#hud-container {
  padding: 3%;
}

#hud {
  width: 35%;
  height: 15%;
  /* background-color: var(--base-color); */
  display: flex;
  gap: 5%;
}

#charge-container {
  width: 27.5%;
  height: 100%;
  background-color: var(--text-color);
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-evenly;
  align-items: center;
  box-shadow: 0 0 0.5vw black;
  border-radius: .5vw;
}

#charge-container.charge-container-flash {
  animation: chargeflash 1s ease-in-out
}

@keyframes chargeflash {
  0% {
    box-shadow: 0 0 5vw rgb(9, 21, 255);
    background-color: #31748f;
  }

  50% {}

  100% {
    background-color: var(--text-color);
    box-shadow: 0 0 0.5vw black;
  }
}

.charge {
  width: 90%;
  height: 25%;
  background-color: var(--base-color);
  border-radius: .5vw;
  transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition-duration: 0.4s;
  transition: background-color 0.4s;
}

.charge-active {
  background-color: blue;
  box-shadow: 0 0 0.5vw rgb(72, 81, 255)
}

#hud-subcontainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#health-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5%;
  width: 100%;
  height: 60%;
  background-color: rgba(127, 255, 212, 0);
}

.health {
  width: 2.5vw;
  height: 2.5vw;
  background-color: var(--base-color);
  border-radius: 50%;
  box-shadow: 0 0 0.5vw black;
  border: solid .2vw var(--text-color);
  transition: background-color 0.4s ease-in-out;

}

.health-active {
  background-color: red;
  position: relative;
  overflow: hidden;
}

.health-active::after {
  content: "";
  position: absolute;
  top: -75%;
  /* Start position above the element */
  left: -150%;
  /* Start position to the left */
  width: 200%;
  height: 200%;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  /* Angle of the shine */
  opacity: 0.5;
  /* Adjust opacity as needed */
  pointer-events: none;
  /* Allow clicks through the shine */

  /* Animation properties */
  animation: shineAnimation 2s linear infinite;
}

@keyframes shineAnimation {
  0% {
    top: -75%;
    left: -150%;
  }

  50% {
    top: 25%;
    left: 50%;
  }

  100% {
    top: -75%;
    left: 150%;
  }
}

#copper-container {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5%;
}

#copper-image-container {
  height: 100%;
  width: 12.5%;
  /* background-color: chocolate; */
  border-radius: 50%;
  box-shadow: 0 0 1vw black, 0 0 4vw black inset;
}

#copper-container p {
  font-size: 3vw;
  color: var(--text-color);
  text-shadow: 0 0 0.5vw black;
}

@keyframes flash {
  0% {
    color: white;
    font-size: 4.5vw;
    text-shadow: 0 0 0.5vw black, 0 0 1.5vw white;
  }

  50% {}

  100% {
    color: var(--text-color);
    background-color: transparent;
    font-size: 3vw;
  }
}

@keyframes fadeinout {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 100;
  }

  100% {
    opacity: 0;
  }
}

#blackscreen {
  background-color: black;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

#blackscreen.activated {
  animation: fadeinout 1s ease-in-out;
}

.vignette-damage {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 25vw rgba(255, 12, 0, 1) inset;
  pointer-events: none;
  transition: opacity 1s ease-out;
}

.vignette-dash {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5vw rgba(0, 12, 255, 0.5) inset;
  pointer-events: none;
  transition: opacity 0.7s ease-in-out;
}

@keyframes fadeout {
  0% {
    opacity: 100;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100;
  }
}

.menu.tofadein {
  animation: fadein 0.2s ease-out;
}

.menu.tofadeout {
  animation: fadeout 0.2s ease-out;
}

.tooltip.tofadein {
  animation: fadein 0.2s ease-out;
}

.tooltip.tofadeout {
  animation: fadeout 0.2s ease-out;
}

.vignette-damage.damaged,
.vignette-dash.damaged {
  animation: fadeout 0.5s ease-out;
}

#copper-container p.flash {
  animation: flash 0.5s ease-out;
}

#main-menu-container h1 {
  color: #eb961f;
  text-shadow: 0 0 1vw black, -.3vw -.3vw rgb(165, 103, 10), 0 0 .5vw, 0 0 3vw #ffa629;
  font-size: 13vw;
}

#main-menu-container h2 {
  /* position: absolute; */
  font-size: 1.9vw;
  margin-bottom: 2.5vw;
}

#main-menu-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 10%;
  /* padding: 35% 0 0 5%; */
  display: flex;
  flex-direction: column;
  font-size: 3.5vw;
  gap: 2vw;
}

button {
  text-align: left;
  background-color: #00000000;
  color: #a7a6b9;
  border: #00000000;
  text-shadow: 0 0 1vw black;
  padding: 1vw 2vw;
  border-radius: 3vw;
}

button:focus-visible,
button:hover {
  background-color: #00000050;
  color: #ffffff;
  border: #000000ff;
  outline: none;
  text-shadow: 0 0 1vw white;
  box-shadow: 0 0 1vw black, 0 0 1vw black inset;
}

button:disabled,
button[disabled] {
  color: #000000;
  box-shadow: none;
  text-shadow: none;
  pointer-events: none;
}

button:active {
  color: var(--gold-color);
  text-shadow: 0 0 1vw var(--love-color);
  box-shadow: 0 0 1vw var(--gold-color), 0 0 1vw var(--gold-color) inset;
}

#main-menu-container {
  /* background-color: #eb6f927a; */

  display: none;
}

h2 {
  text-shadow: 0 0 1vw white;
}

#pause-menu-container {
  width: 100%;
  height: 100%;
  background-color: #10000099;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  flex-direction: column;
  font-size: 5vw;
}

#win-menu-container {
  width: 100%;
  height: 100%;
  background-color: #10000099;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  flex-direction: column;
  font-size: 5vw;
}

#ship-menu-container {
  display: flex;
  background-color: var(--base-color);
  position: absolute;
  width: 50%;
  height: 80%;
  left: 25%;
  top: 5%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 2vw;
  gap: 2vw;
  border-radius: 3vw;
  box-shadow: 0 0 2vw black, 0 0 3vw var(--overlay-color) inset;
  display: none;
}

#ship-menu-container h2 {
  font-size: 4vw;
}

.ship-line-container {
  display: flex;
  align-items: center;
  gap: 1vw;
  background-color: var(--overlay-color);
  border-radius: 1vw;
  padding: 0.25vw 2vw;
}

#copper-count-container {
  display: flex;
  position: absolute;
  top: 5%;
  left: 5%;
  font-size: 3vw;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  background-color: black;
  border-radius: 1vw;
  text-shadow: 0 0 2vw white;
}

#copper-count-container img {
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  box-shadow: 0 0 1vw black, 0 0 4vw black inset;
}

.ship-line-container button {
  border: rgb(72, 81, 255) 1vw;
  padding: 1vw;
  border-radius: 0.5vw;
}

.ship-line-container img {
  width: 2.5vw;
  height: 2.5vw;
  box-shadow: 0 0 1vw black, 0 0 2vw black inset;
  border-radius: 50%;
}

.ship-upgrade-bars-container {
  display: flex;
  gap: 1vw;
}

.upgrade-bar {
  width: 1.5vw;
  height: 3vw;
  background-color: #1a172a;
  box-shadow: 0 0 0.3vw black, 0 0 0.5vw black inset;
  border-radius: 0.5vw;
  transition: background-color 0.4s ease-in-out;
}

.upgrade-bar-active {
  background-color: #439ec1;
  box-shadow: 0 0 2vw #3a8aaa, 0 0 0.8vw #95d6ef inset;
}

#game-over-container {
  display: flex;
  flex-direction: column;
  font-size: 5vw;
  width: 100%;
  height: 100%;
  background-color: #05000050;
  justify-content: center;
  align-items: center;
  display: none;
}

#help-menu-container {
  display: flex;
  flex-direction: column;
  font-size: 3.5vw;
  width: 100%;
  height: 100%;
  background-color: #05000050;
  justify-content: center;
  align-items: center;
  display: none;
}

.vignette {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5vw rgba(0, 0, 0, 1) inset;
  /* background: radial-gradient(circle, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%); */
  pointer-events: none;
}

#tooltip-container {
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.tooltip {
  display: flex;
  position: absolute;
  background-color: #19172480;
  width: auto;
  bottom: 0;
  right: 0;
  height: 8%;
  padding: 0vw 2vw;
  border-radius: 3vw;
  margin: 2%;
  font-size: 2vw;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
}

.keyboard-key,
.console-key {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2vw;
  height: 2vw;
  box-shadow: 0 0 .3vw rgba(0, 0, 0, 1) inset;
}

.keyboard-key {
  color: #1a172a;
  background-color: #e0def4;
  border-radius: 0.2vw;
}

.keyboard-key.spacebar {
  width: 9vw;
}

.keyboard-key.esc {
  width: 4vw;
}

.console-key {
  color: white;
  border-radius: 100%;
  background-color: black;
}

.console-key.x {
  background-color: blue;
}

.console-key.a {
  background-color: green;
}

.console-key.b {
  background-color: red;
}

.console-key.joystick {
  font-size: 1vw;
  background-color: grey;
  border: #a7a6b9 0.1vw double;
}

#main-menu-tooltip,
#game-over-tooltip,
#open-ship-menu-tooltip,
#ship-menu-tooltip,
#movement-tooltip,
#dash-tooltip {
  display: none;
}

#hud-container {
  display: none;
}