:root {
  color-scheme: dark;
  --ink: #fff7e6;
  --muted: #c8d6df;
  --black: #050505;
  --frame: #f4f4f4;
  --panel: #030303;
  --blue: #123d9f;
  --red: #b72f28;
  --gold: #f4d05a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    #0b1518;
  background-size: 6px 6px;
  color: var(--ink);
  font-family: "Courier New", monospace;
  image-rendering: pixelated;
}

.shell {
  width: min(1180px, 100vw);
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 768px) minmax(280px, 360px);
  gap: 16px;
  padding: 16px;
  align-items: center;
  justify-content: center;
}

.screen, .panel {
  border: 4px solid var(--frame);
  background: var(--panel);
  box-shadow: 0 0 0 4px #111, 0 0 0 8px #000, 0 24px 70px rgba(0, 0, 0, .55);
}

.screen {
  width: 100%;
  max-width: min(768px, calc(100vh - 32px));
  justify-self: end;
}

.topbar, .hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border-bottom: 4px solid var(--frame);
  font-size: 14px;
  text-shadow: 2px 2px #000;
}

.topbar {
  grid-template-columns: 1fr auto;
  color: var(--gold);
}

.playfield {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1686c6;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hud {
  border-top: 4px solid var(--frame);
  border-bottom: 0;
}

.hud div {
  min-width: 0;
  white-space: nowrap;
}

.hud span, .quest p, .log { color: var(--muted); }

.battle, .dialog {
  position: absolute;
  inset: auto 28px 24px 28px;
  border: 4px solid var(--ink);
  background: #000;
  padding: 16px;
  box-shadow: 0 0 0 4px #000;
  color: #fff;
}

.fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s steps(5, end);
  z-index: 5;
}

.fade.active {
  opacity: 1;
}

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #02040a;
}

.loading-screen.hidden {
  display: none;
}

.intro-scene {
  position: absolute;
  inset: 0;
  border: 4px solid #fff;
  background:
    linear-gradient(#02040a 0 24%, #07131f 24% 46%, #123d9f 46% 48%, #050505 48% 100%);
  box-shadow: inset 0 0 0 4px #000;
}

.intro-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 16%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 28% 9%, #fff3a6 0 1px, transparent 2px),
    radial-gradient(circle at 48% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 74% 12%, #fff3a6 0 1px, transparent 2px),
    radial-gradient(circle at 88% 22%, #fff 0 1px, transparent 2px);
  animation: star-pulse 1.2s steps(2, end) infinite;
}

.intro-map {
  position: absolute;
  inset: 29% 4% 7% 4%;
  overflow: hidden;
  border: 4px solid #d8a334;
  box-shadow: 0 0 0 4px #050505, inset 0 0 34px rgba(0,0,0,.45);
}

.intro-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
  filter: saturate(1.1) contrast(1.08);
  opacity: 1;
}

.intro-sea {
  position: absolute;
  inset: 26% 0 0 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.24) 10px 12px),
    #1686c6;
}

.intro-land {
  position: absolute;
  background: #7bdc42;
  box-shadow: inset 0 -10px #22883a, inset 0 0 0 4px rgba(0,0,0,.18);
}

.intro-land.west {
  left: 3%;
  top: 16%;
  width: 35%;
  height: 42%;
  clip-path: polygon(7% 18%, 65% 0, 100% 21%, 88% 72%, 46% 100%, 0 82%);
}

.intro-land.east {
  right: 0;
  top: 1%;
  width: 70%;
  height: 76%;
  clip-path: polygon(12% 10%, 78% 0, 100% 20%, 93% 60%, 74% 78%, 54% 100%, 22% 86%, 0 60%);
}

.intro-mountains {
  position: absolute;
  height: 42px;
  background:
    linear-gradient(135deg, transparent 0 38%, #d3d0bd 38% 55%, #6e7068 55% 72%, transparent 72%),
    linear-gradient(45deg, transparent 0 32%, #d3d0bd 32% 54%, #515049 54% 78%, transparent 78%);
  background-size: 32px 42px;
}

.intro-mountains.misty { left: 43%; top: 11%; width: 18%; }
.intro-mountains.ered { left: 73%; top: 22%; width: 16%; }

.intro-forest {
  position: absolute;
  left: 57%;
  top: 20%;
  width: 22%;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, #104d26 0 5px, #19a34b 5px 10px);
  box-shadow: 0 8px #0f5f2b, -120px 28px #0f5f2b;
}

.intro-road {
  position: absolute;
  left: 25%;
  top: 48%;
  width: 56%;
  height: 8px;
  background: #dbc284;
  transform: rotate(9deg);
  box-shadow: 0 4px #93713f;
}

.intro-mordor {
  position: absolute;
  right: 2%;
  bottom: 8%;
  width: 28%;
  height: 31%;
  background:
    radial-gradient(circle at 62% 28%, #ffb13d 0 6%, #d84b34 7% 14%, transparent 15%),
    linear-gradient(#50372f, #201816);
  clip-path: polygon(16% 17%, 70% 0, 100% 38%, 78% 100%, 0 83%);
  box-shadow: 0 0 28px rgba(216,75,52,.55);
}

.intro-ring {
  position: absolute;
  left: 45%;
  top: 18%;
  width: 54px;
  height: 54px;
  border: 8px solid #f4d05a;
  box-shadow: inset 0 0 0 6px #050505, 0 0 26px rgba(244,208,90,.75);
  animation: ring-rise 1.5s steps(10, end) both;
}

.intro-map > :not(.intro-ring):not(img) {
  display: none;
}

.accomplishment {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .72);
}

.accomplishment.hidden {
  display: none;
}

.accomplishment-window {
  width: min(100%, 330px);
  border: 4px solid #fff;
  background:
    radial-gradient(circle at 50% 36%, rgba(244,208,90,.25), transparent 31%),
    #000;
  padding: 18px;
  text-align: center;
  box-shadow: 0 0 0 4px #000, 0 0 34px rgba(244,208,90,.55);
  animation: accomplishment-pop .62s steps(7, end) both;
}

.accomplishment-icon {
  width: 104px;
  height: 104px;
  margin: 0 auto 14px;
  border: 8px solid #f4d05a;
  background:
    radial-gradient(circle at 50% 50%, #000 0 33%, transparent 34%),
    conic-gradient(#fff3a6, #d8a334, #8f2f28, #fff3a6);
  box-shadow: inset 0 0 0 8px #050505, 0 0 22px rgba(244,208,90,.8);
}

.accomplishment-window h1 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: var(--gold);
  text-align: center;
  font-size: clamp(20px, 5vw, 28px);
}

.accomplishment-window p {
  color: #fff;
  line-height: 1.35;
}

.death-window {
  box-shadow: 0 0 0 4px #000, 0 0 34px rgba(93, 125, 180, .55);
  background:
    radial-gradient(circle at 50% 36%, rgba(93,125,180,.25), transparent 31%),
    #000;
}

.death-window h1 {
  color: #9dcfe8;
}

.death-icon {
  width: 104px;
  height: 104px;
  margin: 0 auto 14px;
  background:
    linear-gradient(90deg, transparent 0 30%, #9dcfe8 30% 36%, transparent 36% 64%, #9dcfe8 64% 70%, transparent 70%),
    radial-gradient(circle at 50% 42%, #111 0 28%, #4d5f7d 29% 42%, transparent 43%),
    linear-gradient(#0000 0 18%, #1c2436 18% 84%, transparent 85%);
  border: 4px solid #9dcfe8;
  box-shadow: 0 0 0 4px #050505;
}

@keyframes accomplishment-pop {
  from { transform: scale(.72); opacity: 0; }
  55% { transform: scale(1.06); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

.intro-title {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 6%;
  text-align: center;
  text-shadow: 3px 3px #000;
}

.loading-kicker {
  display: block;
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 8px;
}

.intro-title h1 {
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff7e6;
  text-align: center;
  font-size: clamp(24px, 7vw, 40px);
}

.intro-title p {
  width: min(100%, 320px);
  margin: 8px auto 0;
  color: var(--muted);
  line-height: 1.35;
}

.loading-bar {
  height: 14px;
  width: min(100%, 260px);
  margin: 16px auto 0;
  border: 3px solid #fff;
  background: #111;
  overflow: hidden;
}

.loading-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(90deg, #f4d05a 0 10px, #c84132 10px 20px);
  animation: loading-fill 1.2s steps(12, end) both;
}

@keyframes loading-fill {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes star-pulse {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}

@keyframes ring-rise {
  from { transform: translateY(34px) scale(.65); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.quest-menu {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(244,208,90,.16), transparent 28%),
    linear-gradient(#123d9f 0 42%, #1d7cc1 42% 44%, #0f5f2b 44% 100%);
}

.quest-menu-window {
  width: min(100%, 340px);
  max-height: 100%;
  overflow: auto;
  border: 4px solid #fff;
  background: #000;
  padding: 14px;
  box-shadow: 0 0 0 4px #000;
}

.quest-menu-window h1 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: var(--gold);
  font-size: 22px;
  text-align: left;
}

.quest-menu-window p {
  margin-bottom: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.quest-list {
  display: grid;
  gap: 8px;
}

.quest-choice {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding: 10px;
  text-align: left;
  line-height: 1.25;
}

.quest-choice span {
  color: var(--gold);
  font-size: 12px;
}

.quest-choice small {
  color: var(--muted);
  font-size: 12px;
}

.quest-choice em {
  color: #fff;
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}

.battle {
  inset: 28px;
  display: grid;
  grid-template-rows: minmax(144px, 1fr) auto auto;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.18) 0 4%, transparent 5%),
    linear-gradient(#2b79dc 0 38%, #78d84a 38% 100%);
  z-index: 6;
}

.battle[data-terrain="G"], .battle[data-terrain="R"], .battle[data-terrain="T"] {
  background:
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.18) 0 4%, transparent 5%),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(13,82,34,.24) 20px 24px),
    linear-gradient(#2b79dc 0 33%, #d8f7ff 33% 35%, #7bdc42 35% 100%);
}

.battle[data-terrain="F"] {
  background:
    radial-gradient(circle at 50% 78%, rgba(255,255,255,.12) 0 4%, transparent 5%),
    repeating-linear-gradient(90deg, #104d26 0 12px, #19a34b 12px 20px, #0f5f2b 20px 26px),
    linear-gradient(#143d2b 0 42%, #22883a 42% 100%);
}

.battle[data-terrain="H"], .battle[data-terrain="P"] {
  background:
    linear-gradient(135deg, transparent 0 40%, #d3d0bd 40% 52%, #6e7068 52% 70%, transparent 70%) 12% 24% / 72px 72px repeat-x,
    linear-gradient(#4e86c7 0 34%, #a9c85b 34% 100%);
}

.battle[data-terrain="M"] {
  background:
    linear-gradient(135deg, transparent 0 35%, #f4f4f4 35% 48%, #6e7068 48% 72%, transparent 72%) 0 18% / 82px 92px repeat-x,
    linear-gradient(#17345e 0 42%, #8e9181 42% 100%);
}

.battle[data-terrain="S"] {
  background:
    radial-gradient(circle at 74% 22%, #fff3a6 0 6%, transparent 7%),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(111,87,46,.2) 14px 17px),
    linear-gradient(#2b79dc 0 36%, #d7bc69 36% 100%);
}

.battle[data-terrain="D"], .battle[data-terrain="V"] {
  background:
    radial-gradient(circle at 78% 32%, rgba(255,105,55,.75) 0 7%, transparent 8%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 18px, transparent 18px 30px),
    linear-gradient(#3b1d1b 0 40%, #50372f 40% 68%, #201816 68% 100%);
}

.battle[data-terrain="L"] {
  background:
    radial-gradient(circle at 70% 25%, #ffb13d 0 7%, #d84b34 8% 14%, transparent 15%),
    linear-gradient(135deg, transparent 0 38%, #d84b34 38% 43%, transparent 43%) 0 40% / 60px 60px repeat-x,
    linear-gradient(#160b0a 0 42%, #50372f 42% 70%, #0c0908 70% 100%);
}

.enemy-stats {
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  gap: 2px;
  min-width: 132px;
  border: 4px solid #fff;
  background: #000;
  padding: 8px;
  color: #fff;
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 0 0 3px #000;
}

.enemy-stats strong {
  color: var(--gold);
  font-size: 13px;
}

.hidden { display: none; }

.enemy-sprite {
  width: 144px;
  height: 144px;
  margin-top: 16px;
  background-image: url("enemy-spritesheet-transparent.png");
  background-size: 576px 432px;
  background-position: 0 0;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 0 rgba(0,0,0,.2)) drop-shadow(0 0 2px rgba(0,0,0,.65));
  image-rendering: pixelated;
}

.enemy-sprite[data-kind="wight"] { background-position: 0 0; }
.enemy-sprite[data-kind="orc"] { background-position: -144px 0; }
.enemy-sprite[data-kind="spider"] { background-position: -288px 0; }
.enemy-sprite[data-kind="wolf"] { background-position: -432px 0; }
.enemy-sprite[data-kind="easterling"] { background-position: 0 -144px; }
.enemy-sprite[data-kind="nazgul"] { background-position: -144px -144px; }
.enemy-sprite[data-kind="cave-troll"] { background-position: -288px -144px; }
.enemy-sprite[data-kind="stone-troll"] { background-position: -432px -144px; }
.enemy-sprite[data-kind="fell-beast"] { background-position: 0 -288px; }
.enemy-sprite[data-kind="fire-demon"] { background-position: -144px -288px; }
.enemy-sprite[data-kind="dragon"] { background-position: -288px -288px; }
.enemy-sprite[data-kind="warg-rider"] { background-position: -432px -288px; }

.enemy-hit {
  animation: enemy-hit .34s steps(4, end);
}

.enemy-burn {
  animation: enemy-burn .42s steps(5, end);
}

.enemy-dodge {
  animation: enemy-dodge .34s steps(4, end);
}

.player-hit {
  animation: player-hit .34s steps(4, end);
}

.player-heavy-hit {
  animation: player-heavy-hit .42s steps(5, end);
}

.player-dodge {
  animation: player-dodge .28s steps(3, end);
}

@keyframes enemy-hit {
  0%, 100% { transform: translate(0, 0); filter: none; }
  25% { transform: translate(-8px, 0); filter: brightness(2.2) sepia(1) hue-rotate(-40deg) saturate(4); }
  50% { transform: translate(6px, 0); filter: brightness(.6); }
}

@keyframes enemy-burn {
  0%, 100% { transform: translate(0, 0); filter: none; }
  30% { transform: scale(1.04); filter: brightness(2.8) hue-rotate(170deg) saturate(3); }
  60% { transform: scale(.98); filter: brightness(.5) contrast(1.6); }
}

@keyframes enemy-dodge {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  35% { transform: translate(26px, -5px); opacity: .5; }
  70% { transform: translate(-14px, 4px); opacity: .8; }
}

@keyframes player-hit {
  0%, 100% { transform: translate(0, 0); filter: none; }
  20% { transform: translate(-8px, 0); filter: brightness(1.6) sepia(1) hue-rotate(-35deg); }
  40% { transform: translate(8px, 0); }
  60% { transform: translate(-5px, 0); }
}

@keyframes player-heavy-hit {
  0%, 100% { transform: translate(0, 0); filter: none; }
  15% { transform: translate(-14px, 3px); filter: brightness(2) saturate(2); }
  30% { transform: translate(12px, -2px); }
  45% { transform: translate(-10px, 0); }
  60% { transform: translate(8px, 2px); filter: brightness(.55); }
}

@keyframes player-dodge {
  0%, 100% { transform: translate(0, 0); }
  45% { transform: translate(9px, 0); }
}

h1, h2, p { margin: 0; }
h1 {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 4px solid #fff;
  background: #000;
  font-size: clamp(18px, 3vw, 25px);
  color: #fff;
  text-align: left;
}
h2 { font-size: 18px; color: var(--gold); margin-bottom: 10px; }

.battle-actions, .controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

button {
  min-height: 44px;
  border: 4px solid var(--ink);
  background: #000;
  color: var(--ink);
  font: 700 14px "Courier New", monospace;
  cursor: pointer;
  box-shadow: inset -3px -3px #222;
}

button:hover, button:focus-visible {
  background: #fff;
  color: #000;
  outline: 0;
}

.panel {
  align-self: center;
  min-height: min(680px, calc(100vh - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.quest {
  border-bottom: 4px solid var(--frame);
  padding-bottom: 12px;
}

.log {
  min-height: 240px;
  overflow: auto;
  line-height: 1.45;
  font-size: 14px;
}

.log p { margin-bottom: 10px; }

.dialog {
  line-height: 1.35;
  font-size: clamp(15px, 2.5vw, 20px);
  display: grid;
  gap: 8px;
  align-content: start;
  background: #000;
  color: #fff;
  border: 4px solid #fff;
  text-shadow: none;
  z-index: 7;
}

.dialog.hidden {
  display: none;
}

.dialog strong {
  display: block;
  color: var(--gold);
  font-size: .78em;
  text-transform: uppercase;
}

.dialog span {
  display: block;
  color: #fff;
}

.shop-menu {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

.shop-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  border: 3px solid #fff;
  background: #000;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.shop-menu button::before {
  content: ">";
  color: var(--gold);
}

.shop-menu button {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.shop-menu button:disabled {
  color: #777;
  border-color: #777;
  cursor: not-allowed;
}

.shop-menu button:disabled::before {
  color: #777;
}

.shop-menu b {
  color: var(--gold);
}

#battleText {
  width: 100%;
  min-height: 72px;
  padding: 12px;
  border: 4px solid #fff;
  background: #000;
  text-align: left;
  font-size: clamp(15px, 2.5vw, 20px);
  line-height: 1.3;
}

.controls {
  display: grid;
  grid-template-columns: minmax(132px, 1fr);
  gap: 12px;
  width: 100%;
  align-self: end;
  touch-action: manipulation;
}

.dpad {
  width: min(100%, 184px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
}

.dpad button {
  min-height: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: clamp(16px, 2.5vw, 22px);
  line-height: 1;
}

.dpad button[data-move="up"] { grid-column: 2; grid-row: 1; }
.dpad button[data-move="left"] { grid-column: 1; grid-row: 2; }
.dpad button[data-move="right"] { grid-column: 3; grid-row: 2; }
.dpad button[data-move="down"] { grid-column: 2; grid-row: 3; }

.command-pad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (max-width: 820px) {
  body { place-items: start center; }
  .shell {
    grid-template-columns: 1fr;
    padding: 8px;
    gap: 8px;
    align-items: start;
  }
  .screen {
    max-width: min(100%, calc(100vh - 280px));
    min-width: 0;
    justify-self: center;
  }
  .topbar, .hud {
    grid-template-columns: repeat(2, 1fr);
    font-size: 12px;
  }
  .battle { inset: 14px; }
  .battle, .dialog { padding: 10px; }
  .intro-map { inset: 35% 5% 8% 5%; }
  .intro-title h1 { font-size: 24px; }
  .intro-title p { font-size: 13px; }
  .panel {
    width: 100%;
    min-height: 0;
    max-height: none;
    align-self: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(70px, 1fr) auto;
  }
  .log { min-height: 72px; max-height: 18vh; }
  .controls {
    grid-template-columns: minmax(132px, 180px) minmax(132px, 1fr);
    align-items: center;
  }
  .dpad {
    width: min(34vw, 172px);
    min-width: 132px;
  }
  .command-pad {
    grid-template-columns: 1fr;
  }
  .command-pad button {
    min-height: 52px;
  }
}

@media (max-width: 480px) {
  .shell { padding: 6px; }
  .screen { max-width: 100%; }
  .hud { gap: 4px; padding: 8px; }
  .panel { padding: 10px; gap: 8px; }
  .quest p, .log { font-size: 13px; }
  .controls {
    grid-template-columns: minmax(124px, 150px) 1fr;
    gap: 8px;
  }
  .dpad {
    min-width: 124px;
    width: 124px;
    gap: 5px;
  }
  button {
    min-height: 48px;
    font-size: 13px;
  }
}

@media (min-width: 1180px) and (min-height: 760px) {
  .panel {
    min-height: 720px;
  }
  .dpad {
    width: 208px;
  }
}