@font-face {
  font-family: "Dragon Warrior GBC";
  src: url("./ASSETS/fonts/dragon-warrior-gbc.otf") format("opentype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Dragon Warrior GBC", ui-monospace, monospace;
  background: #08730b;
  color: #eff3ad;
}

* {
  box-sizing: border-box;
  font-family: inherit;
}

html,
body,
main {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #08730b;
}

#title-screen[hidden] {
  display: none;
}

#title-screen[data-transitioning="true"] #title-content {
  pointer-events: none;
}

#title-transition {
  position: fixed;
  inset: 0;
  z-index: 11;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 2s linear;
}

#title-transition[data-phase="to-black"],
#title-transition[data-phase="to-game"] {
  visibility: visible;
  pointer-events: auto;
}

#title-transition[data-phase="to-black"] {
  opacity: 1;
}

#title-transition[data-phase="to-game"] {
  opacity: 0;
}

#opening-text[hidden] {
  display: none;
}

#opening-text {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  padding: 40px;
  background: #000;
  color: #fff;
  place-items: center;
}

#opening-lines {
  position: fixed;
  top: 50%;
  left: 50%;
  display: grid;
  width: var(--opening-width, 480px);
  gap: 18px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.opening-line {
  margin: 0;
  font-size: var(--opening-font-size, 16px);
  line-height: 1.35;
  opacity: 0;
  white-space: nowrap;
}

.opening-line[data-visible="true"] {
  animation: opening-line-reveal 2.6s ease-in-out forwards;
}

#opening-text[data-phase="fade-out"] .opening-line {
  animation: none;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

@keyframes opening-line-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

#initial-start {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #000;
  color: #d0d0d0;
  cursor: pointer;
  outline: none;
  opacity: 1;
  transition: opacity 1.2s linear;
}

#initial-start[hidden] {
  display: none;
}

#initial-start[data-phase="revealing"] {
  opacity: 0;
}

#initial-start-prompt {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  transform-origin: center;
  will-change: transform;
}

#title-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #000;
  color: #002d00;
}

#title-world {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  transform: translateY(-50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 1;
}

#title-screen[data-initial-entry="waiting"] #title-world,
#title-screen[data-initial-entry="waiting"] #title-content {
  opacity: 0;
}

#title-screen[data-initial-entry="revealing"] #title-world {
  animation: title-background-reveal 17.4s linear forwards;
}

#title-screen[data-initial-entry="revealing"] #title-content {
  animation: title-background-reveal 1.2s linear both;
}

@keyframes title-background-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

#title-content {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 608px;
  transform: translateY(-50%);
  pointer-events: none;
}

#title-logo {
  position: absolute;
  top: 18px;
  left: 50%;
  display: flex;
  height: 260px;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

.title-logo-piece {
  display: block;
  width: auto;
  height: min(260px, 44vw);
  max-width: 48vw;
  object-fit: contain;
  filter: drop-shadow(7px 8px 0 rgb(0 45 0 / 72%));
  transform-origin: center;
  will-change: transform;
}

#title-menu {
  position: absolute;
  bottom: 34px;
  left: 50%;
  display: grid;
  width: 320px;
  border: 3px solid #002d00;
  border-radius: 24px;
  padding: 14px 20px 13px;
  background: #eff3ad;
  box-shadow: 5px 5px 0 #003500;
  transform: translateX(-50%);
  pointer-events: auto;
}

.title-option {
  width: 100%;
  height: 42px;
  border: 0;
  padding: 1px 8px 1px 76px;
  background: transparent;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  text-align: left;
}

.title-option:active {
  transform: none;
  box-shadow: none;
}

.title-option:disabled {
  color: #68705a;
  opacity: 0.58;
}

#title-cursor {
  position: absolute;
  top: 15px;
  left: 19px;
  z-index: 1;
  display: block;
  width: 58px;
  height: 39px;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgb(0 45 0 / 68%));
  transform-origin: center;
  pointer-events: none;
  will-change: top, transform;
}

@media (max-height: 608px) {
  #title-world,
  #title-content {
    top: 0;
    height: 100vh;
    transform: none;
  }

  #title-logo {
    top: 10px;
  }

  #title-menu {
    bottom: 18px;
  }
}

#map-status {
  position: fixed;
  top: calc(50% - 306px);
  left: 50%;
  z-index: 2;
  display: flex;
  width: 424px;
  height: 56px;
  align-items: flex-end;
  justify-content: space-between;
  transform: translateX(-50%);
}

#inventory-slots,
#health-hearts {
  display: flex;
  align-items: center;
}

#inventory-slots {
  gap: 6px;
  transform: translate(0, 0);
  transition: transform 0.75s ease;
}

.inventory-slot {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  border: 3px solid #002d00;
  border-radius: 12px;
  background: #eff3ad;
  box-shadow: 3px 3px 0 #003500;
  overflow: hidden;
  place-items: center;
}

#inventory-slots[data-slot-selecting="true"] .inventory-slot::before {
  position: absolute;
  top: 3px;
  left: 5px;
  z-index: 2;
  color: #002d00;
  content: attr(data-slot-number);
  font-size: 11px;
  line-height: 1;
  text-shadow: 1px 1px #ffffc9;
}

.inventory-slot img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
}

#inventory-menu {
  position: fixed;
  z-index: 35;
  min-width: 130px;
  border: 2px solid #002d00;
  border-radius: 12px;
  padding: 7px 9px;
  background: #eff3ad;
  color: #002d00;
  box-shadow: 3px 3px 0 #003500;
}

#inventory-menu button {
  display: block;
  width: 480px;
  height: 28px;
  border: 0;
  padding: 3px 6px 3px 23px;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  text-align: left;
  position: relative;
}

#inventory-menu button[data-selected="true"]::before {
  position: absolute;
  left: 5px;
  content: ">";
}

.inventory-slot img,
#item-examination[data-content="item"] #item-examination-image {
  filter: var(--item-color-filter, brightness(1));
}

.inventory-slot img[data-depleted="true"],
#item-examination[data-content="item"] #item-examination-image[data-depleted="true"] {
  filter: var(--item-color-filter, brightness(1)) url("#depleted-item-outline");
}

.inventory-uses {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 3;
  color: #002d00;
  font-size: 11px;
  line-height: 1;
  text-shadow: 1px 1px #ffffc9, -1px -1px #ffffc9;
  pointer-events: none;
}

.item-identity-marker {
  position: absolute;
  right: 4px;
  bottom: 2px;
  z-index: 3;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.item-identity-marker[data-identity="unknown"] {
  color: #d000ff;
  text-shadow: 1px 1px #002d00;
}

.item-identity-marker[data-identity="known"] {
  color: #777;
  text-shadow: 1px 1px #ffffc9;
}

#health-hearts {
  gap: 4px;
}

#health-hearts img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: var(--heart-status-filter, brightness(1)) drop-shadow(2px 2px 0 #003500);
  transform-origin: center;
  will-change: transform;
}

#health-hearts img[data-depleted="true"] {
  opacity: 0.34;
}

#health-hearts img[data-depleted="false"] + img[data-depleted="true"] {
  margin-left: 7px;
}

#world {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 480px;
  height: 480px;
  border-radius: 28px;
  outline: 3px solid #002d00;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #83a34f, 8px 8px 0 #003500;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#world:focus {
  outline: 3px solid #002d00;
}

#battle[hidden] {
  display: none;
}

#battle {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 480px;
  height: 480px;
  border-radius: 28px;
  overflow: visible;
  color: #002d00;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#battle-distortion,
#battle-pulse {
  position: absolute;
  inset: 0;
  width: 480px;
  height: 480px;
  border-radius: 28px;
  image-rendering: pixelated;
  opacity: 1;
  transition: opacity 1s ease;
}

#battle-pulse {
  background:
    repeating-linear-gradient(0deg, rgb(0 20 0 / 0%) 0 7px, rgb(239 243 173 / 16%) 8px 9px),
    repeating-linear-gradient(90deg, rgb(0 45 0 / 0%) 0 15px, rgb(0 45 0 / 13%) 16px 18px);
  mix-blend-mode: hard-light;
  animation: battle-pulse 1.15s steps(4, end) infinite;
}

@keyframes battle-pulse {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  45% { opacity: 0.62; transform: scale(1.012, 0.995); }
  70% { opacity: 0.42; transform: scale(0.996, 1.008); }
}

#battle-monster {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 256px;
  height: 256px;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.97);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#battle[data-stage="turn"] #battle-monster,
#battle[data-stage="resolving"] #battle-monster {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

#battle[data-stage="leaving"] #battle-monster {
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.97);
}

#battle[data-stage="leaving"] #battle-distortion,
#battle[data-stage="leaving"] #battle-pulse,
#battle[data-stage="leaving"] #battle-log,
#battle[data-stage="leaving"] #battle-pass,
#battle[data-stage="leaving"] #battle-run {
  opacity: 0;
}

#battle-monster img {
  display: block;
  width: 256px;
  height: 256px;
  object-fit: contain;
  image-rendering: auto;
}

#battle-monster img[data-hit="true"] {
  animation: battle-hit-flash 0.38s steps(2, end);
}

@keyframes battle-hit-flash {
  0%, 100% { filter: var(--monster-filter, none); }
  25%, 70% { filter: brightness(0) invert(1); }
}

#battle-log {
  position: absolute;
  top: calc(100% + 18px);
  right: 28px;
  left: 28px;
  min-height: 5em;
  max-height: 5em;
  padding: 0;
  overflow: hidden;
  color: #fff;
  font-size: 10pt;
  line-height: 1;
  white-space: pre-line;
  pointer-events: none;
}

#battle-pass,
#battle-run {
  position: absolute;
  right: 16px;
  bottom: 120px;
  z-index: 2;
  min-width: 70px;
  border: 3px solid #002d00;
  border-radius: 14px;
  padding: 7px 10px 5px;
  background: #eff3ad;
  color: #002d00;
  box-shadow: 3px 3px 0 #003500;
  font-size: 13px;
  pointer-events: auto;
}

#battle-pass {
  bottom: 162px;
}

#battle-pass[data-selected="true"],
#battle-run[data-selected="true"] {
  outline: 2px solid #ff00ff;
  outline-offset: -6px;
}

body[data-mode="battle"] #map-status {
  z-index: 7;
}

body[data-mode="battle"] #inventory-slots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  gap: 0;
  transform: translate(-28px, 426px);
}

body[data-mode="battle"] .inventory-slot {
  width: 120px;
  height: 120px;
  flex: 0 0 120px;
  border-radius: 16px;
  transition: width 0.75s ease, height 0.75s ease, border-radius 0.75s ease;
}

body[data-mode="battle"] .inventory-slot img {
  width: 108px;
  height: 108px;
}

body[data-mode="battle"] .inventory-slot[data-battle-selected="true"] {
  outline: 2px solid #ff00ff;
  outline-offset: -7px;
}

body[data-mode="battle"] #inventory-slots[data-slot-selecting="true"] .inventory-slot::before {
  top: 7px;
  left: 9px;
  font-size: 15px;
}

body[data-mode="battle"] #hover-description {
  visibility: hidden;
}

#hover-description {
  position: fixed;
  top: calc(50% + 258px);
  right: calc(50% - 212px);
  z-index: 2;
  width: 424px;
  min-height: 2em;
  margin: 0;
  color: #eff3ad;
  font-size: 10pt;
  line-height: 1;
  text-align: right;
  white-space: pre-line;
  pointer-events: none;
}

#encounter[hidden] {
  display: none;
}

#item-examination[hidden] {
  display: none;
}

#item-examination {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  background: rgb(0 45 0 / 54%);
  place-items: center;
}

#item-examination-card {
  display: grid;
  width: min(680px, calc(100vw - 40px));
  min-height: 304px;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 22px;
  border: 3px solid #002d00;
  border-radius: 28px;
  padding: 20px;
  background: #eff3ad;
  color: #002d00;
  box-shadow: 7px 7px 0 #003500;
}

#item-examination-art {
  position: relative;
  width: 256px;
  height: 256px;
}

#item-examination-image {
  display: block;
  width: 256px;
  height: 256px;
  object-fit: contain;
}

#item-examination[data-content="monster"] #item-examination-image {
  object-fit: none;
  object-position: top left;
}

#item-examination-marker {
  position: absolute;
  right: 8px;
  bottom: 5px;
  font-size: 48px;
  line-height: 1;
  transform-origin: center;
  will-change: transform;
}

#item-examination-marker[data-identity="unknown"] {
  color: #d000ff;
  text-shadow: 3px 3px #002d00;
}

#item-examination-marker[data-identity="known"] {
  color: #777;
  text-shadow: 2px 2px #ffffc9;
}

#item-examination-marker[data-identity="identified"] {
  color: #002d00;
  font-size: 32px;
  text-shadow: 2px 2px #ffffc9;
}

#item-examination-copy {
  position: relative;
  min-height: 256px;
  padding-bottom: 26px;
}

#item-examination-name {
  margin: 7px 0 18px;
  font-size: 23px;
  line-height: 1.05;
}

#item-examination-description,
#item-examination-stats {
  font-size: 15px;
  line-height: 1.35;
  white-space: pre-line;
}

#item-examination-stats {
  margin-top: 18px;
}

#item-examination-dismiss {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 10px;
  opacity: 0.7;
}

@media (max-width: 620px) {
  #item-examination-card {
    width: min(360px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    grid-template-columns: 1fr;
    overflow: auto;
  }

  #item-examination-art {
    justify-self: center;
  }
}

#controls-overlay[hidden] {
  display: none;
}

#pause-overlay[hidden] {
  display: none;
}

#pause-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 8;
  display: grid;
  width: 480px;
  height: 480px;
  border-radius: 28px;
  background: rgb(0 45 0 / 42%);
  transform: translate(-50%, -50%);
  place-items: center;
}

#pause-card {
  display: grid;
  width: 300px;
  border: 3px solid #002d00;
  border-radius: 24px;
  padding: 18px 22px 20px;
  background: #eff3ad;
  color: #002d00;
  box-shadow: 5px 5px 0 #003500;
}

#pause-title {
  margin-bottom: 12px;
  font-size: 20px;
}

.pause-option {
  height: 38px;
  border: 0;
  padding: 0 8px;
  background: transparent;
  box-shadow: none;
  color: #002d00;
  font-size: 18px;
  text-align: left;
}

.pause-option:active {
  transform: none;
  box-shadow: none;
}

#controls-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 6;
  display: grid;
  width: 480px;
  height: 480px;
  border-radius: 28px;
  background: rgb(0 45 0 / 42%);
  transform: translate(-50%, -50%);
  place-items: center;
}

#controls-card {
  width: 360px;
  border: 3px solid #002d00;
  border-radius: 24px;
  padding: 20px 22px;
  background: #eff3ad;
  color: #002d00;
  box-shadow: 5px 5px 0 #003500;
  font-size: 16px;
}

#controls-title {
  margin-bottom: 14px;
  font-size: 22px;
}

.control-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  padding: 3px 0;
  line-height: 1.3;
}

#encounter {
  --portrait-offset-x: 0px;
  --portrait-offset-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

#encounter[data-enemy-type="monster-phantom"] {
  --portrait-offset-x: -15px;
  --portrait-offset-y: 30px;
}

#encounter-portrait-sprite[hidden],
#encounter-name[hidden] {
  display: none;
}

#encounter-portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  border-radius: 28px;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

#encounter-portrait-sprite {
  position: absolute;
  bottom: calc(-24px - var(--portrait-offset-y));
  left: calc(12px + var(--portrait-offset-x));
  width: 256px;
  height: 256px;
  overflow: hidden;
  will-change: transform;
}

#encounter-portrait img {
  display: block;
  width: 256px;
  height: auto;
}

#encounter-copy {
  position: absolute;
  bottom: 30px;
  left: calc(50% + 36px);
  width: min(540px, calc(50vw - 52px));
  color: #002d00;
  pointer-events: auto;
}

#encounter-name,
#encounter-dialog {
  border: 3px solid #002d00;
  background: var(--encounter-paper, #eff3ad);
  box-shadow: 5px 5px 0 #003500;
}

#encounter-name {
  display: inline-block;
  border-radius: 22px;
  padding: 11px 18px 9px;
  font-size: 22px;
  line-height: 1;
}

#encounter-dialog {
  min-height: 112px;
  max-height: 240px;
  margin-top: 12px;
  border-radius: 24px;
  padding: 17px 20px;
  font-size: 16px;
  line-height: 1.35;
  overflow: hidden;
}

#encounter-dialog-text:empty,
#encounter-options[hidden] {
  display: none;
}

#encounter-options {
  display: grid;
  gap: 1px;
  margin-top: 8px;
}

.encounter-option {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 1px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}

.encounter-option:active {
  transform: none;
  box-shadow: none;
}

.panel,
#readout,
.hint {
  position: fixed;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  text-shadow: 1px 1px #003500;
}

.panel,
#readout,
.hint {
  display: none;
}

.panel {
  top: calc(50% - 284px);
  left: calc(50% - 240px);
  display: flex;
  align-items: center;
  gap: 10px;
}

button {
  appearance: none;
  border: 2px solid #002d00;
  border-radius: 0;
  padding: 7px 10px 6px;
  background: #eff3ad;
  color: #002d00;
  font: inherit;
  line-height: 1;
  box-shadow: inset -2px -2px #83a34f, inset 2px 2px #ffffc9, 2px 2px #003500;
  cursor: pointer;
}

button:active {
  transform: translate(1px, 1px);
  box-shadow: inset 2px 2px #83a34f;
}

#seed {
  opacity: 0.78;
}

#readout {
  top: calc(50% - 276px);
  right: calc(50% - 240px);
}

.hint {
  right: calc(50% - 240px);
  bottom: calc(50% - 274px);
  opacity: 0.7;
}

.panel,
#readout,
.hint {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}