@font-face {
  font-family: "DungeonPixel";
  src: url("../assets/fonts/red-alert.ttf")
  format("truetype");
  font-weight: normal;
  font-style: normal;
}

html,
body,
button {
  font-family: "DungeonPixel", monospace;
}

#dungeon-view {
  display: block;

  width: 100%;
  height: 100%;

  image-rendering: pixelated;
}

#game {
  position: relative;

  width: 100vw;
  height: 100dvh;

  overflow: hidden;
}

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #000000;
}

#controls {
  position: absolute;

  left: 0;
  right: 0;

  bottom: max(
    clamp(8px, 3vw, 18px),
    env(safe-area-inset-bottom)
  );

  display: flex;
  justify-content: center;

  padding:
    0
    clamp(
      8px,
      3vw,
      20px
    );

  box-sizing: border-box;

  z-index: 500;
}

#center-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}


#movement-controls,
#action-controls {
  display: flex;

  gap: 12px;

  align-items: flex-end;
}


#action-controls {
  flex-direction: column;
}

.game-control {
  width: clamp(
    48px,
    10vw,
    64px
  );

  height: clamp(
    48px,
    10vw,
    64px
  );

  background: transparent;
  border: none;

  color: white;

  font-size: 64px;

  cursor: pointer;

  user-select: none;

  text-shadow:
    2px 2px 0
    #000000;
}


.potion-control {
  width: clamp(
    60px,
    12vw,
    76px
  );

  height: clamp(
    38px,
    8vw,
    44px
  );

  font-size: clamp(
    20px,
    2.5vw,
    14px
  );
}


.game-control:hover {
  background:
    rgba(
      40,
      40,
      40,
      0.8
    );
}


.game-control:active {
  background:
    rgba(
      100,
      100,
      100,
      0.7
    );

  transform:
    translateY(
      2px
    );
}


.dungeon-scene {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


.dungeon-background {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;

  image-rendering: pixelated;
}


.wizard {
  position: absolute;

  left: 50%;
  bottom: 15%;

  transform: translateX(-50%);

  image-rendering: pixelated;
}


.wizard-near {
  width: 35%;
}

/* =========================================================
   DEATH SCREEN
   ========================================================= */

#death-overlay #leaderboard-display {
  opacity: 0;
}

#death-overlay.active #leaderboard-display {
  animation:
    death-button-fade
    1s
    ease-out
    3.5s
    forwards;
}

#death-overlay {
  position: fixed;
  inset: 0;

  background-color: rgba(120, 0, 0, 0);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;

  pointer-events: none;
}


/*
 * Added when the player dies.
 */
#death-overlay.active {
  pointer-events: auto;

  animation:
    death-red-fade
    2s
    ease-in
    forwards;
}

/* =========================================================
   CONTENT
   ========================================================= */

#death-content {
  text-align: center;
}


#death-title {
  opacity: 0;

  color: #e6d5c3;

  font-size: 72px;
  font-weight: normal;

  letter-spacing: 8px;

  text-transform: uppercase;

  text-shadow:
    0 0 8px #000000,
    0 0 18px #380000;

  margin-bottom: 40px;
}


#death-overlay.active #death-title {

  animation:
    death-title-fade
    1.5s
    ease-out
    2s
    forwards;
}


/* =========================================================
   PLAY AGAIN BUTTON
   ========================================================= */

#play-again-button {
  opacity: 0;

  padding: 14px 30px;

  font-size: 18px;

  color: #e6d5c3;

  background-color: rgba(
    0,
    0,
    0,
    0.65
  );

  border: 2px solid #e6d5c3;

  cursor: pointer;
}


#play-again-button:hover {
  background-color: rgba(
    0,
    0,
    0,
    0.9
  );
}


#death-overlay.active #play-again-button {

  animation:
    death-button-fade
    1s
    ease-out
    3.5s
    forwards;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes death-red-fade {

  from {
    background-color:
      rgba(120, 0, 0, 0);
  }

  to {
    background-color:
      rgba(120, 0, 0, 1);
  }
}


@keyframes death-title-fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes death-button-fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================================================
   WIN SCREEN
   ========================================================= */

#win-overlay {
  position: fixed;
  inset:0;

  background-color: rgba(10, 30, 20, 0);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9998;

  pointer-events: none;
}


/*
 * Added when the player wins.
 */
#win-overlay.active {
  pointer-events: auto;

  animation:
    win-background-fade
    2s
    ease-in
    forwards;
}


/* =========================================================
   CONTENT
   ========================================================= */

#win-content {
  text-align: center;
}


#win-title {
  opacity: 0;

  color: #e8d7a8;

  font-size: clamp(
    42px,
    8vmin,
    72px
  );
  font-weight: normal;

  letter-spacing: 8px;

  text-transform: uppercase;

  text-shadow:
    0 0 8px #000000,
    0 0 20px #857341;

  margin-bottom: 20px;
}


#win-overlay.active #win-title {
  animation:
    win-title-fade
    1.5s
    ease-out
    2s
    forwards;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

#win-subtitle {
  opacity: 0;

  color: #d5c79f;

  font-size: 24px;

  letter-spacing: 3px;

  margin-bottom: 40px;
}


#win-overlay.active #win-subtitle {
  animation:
    win-subtitle-fade
    1.25s
    ease-out
    3s
    forwards;
}


/* =========================================================
   PLAY AGAIN BUTTON
   ========================================================= */

#win-play-again-button {
  opacity: 0;

  padding: 14px 30px;

  font-size: 18px;

  color: #e8d7a8;

  background-color: rgba(
    0,
    0,
    0,
    0.65
  );

  border: 2px solid #e8d7a8;

  cursor: pointer;
}


#win-play-again-button:hover {
  background-color: rgba(
    0,
    0,
    0,
    0.9
  );
}


#win-overlay.active #win-play-again-button {
  animation:
    win-button-fade
    0.75s
    ease-out
    2s
    forwards;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes win-background-fade {

  from {
    background-color:
      rgba(10, 30, 20, 0);
  }

  to {
    background-color:
      rgba(10, 30, 20, 0.96);
  }
}


@keyframes win-title-fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes win-subtitle-fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes win-button-fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#damage-overlay {
  position: fixed;
  inset: 0;

  background: rgba(
    255,
    0,
    0,
    0
  );

  pointer-events: none;
  z-index: 900;

  transition:
    background 0.15s ease-out;
}


#damage-overlay.active {
  background: rgba(
    255,
    0,
    0,
    0.45
  );
}

/* =========================================================
   HUD
   ========================================================= */

#hud {
  position: absolute;

  top: max(
    clamp(8px, 3vw, 20px),
    env(safe-area-inset-top)
  );

  right: clamp(
    8px,
    3vw,
    20px
  );

  z-index: 1000;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: clamp(
    4px,
    1.5vw,
    10px
  );

  pointer-events: none;
}


#health-display {
  display: flex;
  gap: 8px;
}


.heart {
  width: clamp(
    28px,
    6vw,
    40px
  );

  height: clamp(
    28px,
    6vw,
    40px
  );

  image-rendering: pixelated;
}


/* =========================================================
   POTIONS / ARTIFACTS
   ========================================================= */

#potion-display {
  font-size: clamp(
    16px,
    4vw,
    24px
  );

  color: white;

  text-shadow:
  2px 2px 0 black;
}

#artifact-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.artifact-slot {
  width: clamp(
    52px,
    8vmin,
    90px
  );

  height: clamp(
    52px,
    8vmin,
    90px
  );

  object-fit: contain;
  image-rendering: pixelated;

  filter:
    saturate(0%);

  transition:
  opacity 0.2s ease,
  filter 0.2s ease,
  transform 0.2s ease;
}

.artifact-slot.collected {
  opacity: 1;

  filter: none;

  transform: scale(1.1);
}


#potion-hud-icon {
  width: clamp(
    52px,
    8vmin,
    90px
  );

  height: clamp(
    52px,
    8vmin,
    90px
  );

  object-fit: contain;

  image-rendering: pixelated;
}

#intro-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  padding:
    0
    5%
    max(
      120px,
      env(safe-area-inset-bottom)
    );

  box-sizing: border-box;

  background:
    rgba(0, 0, 0, 0.25);

  z-index: 5000;
}

/* =========================================================
   INTRO DIALOG
   ========================================================= */

#intro-dialog {
  width: min(800px, 90vw);
  min-height: 180px;

  display: flex;
  align-items: flex-end;
  gap: 20px;

  padding: 20px;

  box-sizing: border-box;

  background:
    linear-gradient(
      #182b72,
      #071339
    );

  border: 4px solid white;
  border-radius: 10px;

  box-shadow:
    inset 0 0 0 3px #777,
    0 0 0 2px black;
}

#intro-dialog {
  width: 100%;
}

#intro-hiva {
  width: clamp(110px, 18vw, 180px);
  aspect-ratio: 1 / 1;

  flex-shrink: 0;

  background-image:
    url("../assets/images/intro.webp");

  background-size: 200% 100%;
  background-position: left center;
  background-repeat: no-repeat;

  image-rendering: pixelated;
}

#intro-hiva.talking {
  background-position: right center;
}
#intro-content {
  flex: 1;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

#intro-name {
  margin-bottom: 10px;
  font-size: clamp(20px, 4vw, 30px);
  color: #ffe66d;
}

#intro-text {
  flex: 1;

  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.35;

  color: white;

  text-shadow:
    2px 2px 0 black;
}

#intro-ok {
  display: none;

  align-self: flex-end;

  background: transparent;
  border: none;

  color: white;

  font-family: inherit;
  font-size: 22px;

  cursor: pointer;
}

#intro-ok.visible {
  display: block;
}

/* =========================================================
   GAME MENU
   ========================================================= */

#menu-button {
  position: fixed;

  top: max(
    12px,
    env(safe-area-inset-top)
  );

  left: max(
    12px,
    env(safe-area-inset-left)
  );

  z-index: 20001;

  background: transparent;
  border: none;

  color: white;

  font-family: inherit;
  font-size: 36px;

  cursor: pointer;

  text-shadow:
    2px 2px 0 black;
}


#game-menu {
  position: fixed;
  inset: 0;

  z-index: 20000;

  display: none;

  justify-content: center;
  align-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(4, 8, 20, 0.99) 0%,
      rgba(7, 15, 35, 0.95) 40%,
      rgba(5, 10, 20, 0.82) 75%,
      rgba(0, 0, 0, 0.72) 100%
    );
}


#game-menu.open {
  display: flex;
}


#game-menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 24px;
}


#game-menu-content a,
#game-menu-content button {
  background: transparent;
  border: none;

  color: white;

  font-family: inherit;
  font-size: clamp(
    28px,
    6vmin,
    52px
  );

  text-decoration: none;

  cursor: pointer;

  text-shadow:
    2px 2px 0 black;
}


#game-menu-content a:hover,
#game-menu-content button:hover {
  transform: scale(1.1);
}

/* =========================================================
   LEADERBOARD
   ========================================================= */

.hidden {
  display: none !important;
}


#final-time {
  opacity: 0;

  margin-bottom: 24px;

  color: #ffffff;

  font-size: clamp(
    24px,
    5vmin,
    40px
  );

  letter-spacing: 3px;

  text-shadow:
    2px 2px 0 #000000;
}


#win-overlay.active #final-time {
  animation:
    win-subtitle-fade
    1s
    ease-out
    3.5s
    forwards;
}


#high-score-entry {
  margin-bottom: 24px;
}


#high-score-message {
  margin-bottom: 12px;

  color: #e8d7a8;

  font-size: clamp(
    22px,
    4vmin,
    32px
  );
}


#initials-entry {
  display: flex;
  justify-content: center;

  gap: 12px;
}


#player-initials {
  width: 110px;

  padding: 8px;

  background: #000000;

  border: 2px solid #e8d7a8;

  color: #ffffff;

  font-family: inherit;
  font-size: 28px;

  text-align: center;
  text-transform: uppercase;

  outline: none;
}


#submit-score {
  padding: 8px 18px;

  background: transparent;

  border: 2px solid #e8d7a8;

  color: #e8d7a8;

  font-family: inherit;
  font-size: 20px;

  cursor: pointer;
}


#leaderboard-title {
  margin-bottom: 10px;

  color: #e8d7a8;

  font-size: clamp(
    22px,
    4vmin,
    32px
  );
}


#leaderboard-list {
  width: min(
    360px,
    80vw
  );

  margin:
    0 auto 24px;

  padding-left: 40px;

  color: white;

  font-size: clamp(
    16px,
    3vmin,
    22px
  );

  text-align: left;
}

#leaderboard-list li {
  padding: 3px 0;
}

/* =========================================================
   MOBILE PRESS / SELECTION PROTECTION
   ========================================================= */

#game,
#game button,
#menu-button,
#game-menu {
  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color: transparent;
}

@media (orientation: portrait) and (pointer: coarse) {

  .turn-control {
    display: none;
  }

  #movement-controls {
    align-items: center;
  }

  #center-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .forward-control {
    width: 90px;
    height: 90px;
    font-size: 52px;
  }

  .potion-control {
    width: 90px;
    height: 64px;
    font-size: 18px;
  }

  #intro-overlay {
    pointer-events: auto;
    padding:
      0
      4%
      max(
        130px,
        env(safe-area-inset-bottom)
      );
  }

  #intro-dialog {
    width: 100%;
    align-items: flex-end;
  }

  #intro-hiva {
    width: clamp(90px, 28vw, 140px);
    align-self: flex-end;
  }

  #intro-text {
    font-size: clamp(16px, 4.5vw, 22px);
  }
}