* { box-sizing: border-box; }
:root {
  --ink: #f7f2d0;
  --panel: #101820;
  --line: #e5d79a;
}
html, body {
  margin: 0;
  min-height: 100%;
  background: #0a0f12;
  color: var(--ink);
  font-family: "Courier New", monospace;
  overscroll-behavior: none;
}
body {
  display: grid;
  place-items: center;
  padding: 10px;
}
#app { width: min(100%, 920px); }
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
h1 {
  font-size: clamp(18px, 4vw, 30px);
  margin: 0;
  letter-spacing: 2px;
}
header p { margin: 3px 0 0; font-size: 12px; opacity: .75; }
header button, dialog button {
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: bold;
  padding: 8px 12px;
}
#gameShell {
  position: relative;
  border: 4px solid var(--line);
  background: #000;
  box-shadow: 0 0 0 4px #28343a;
}
canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  touch-action: none;
}
#hud {
  position: absolute;
  inset: 8px 8px auto 8px;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 6px;
  justify-content: space-between;
}
#hud > div, #locationBar {
  background: rgba(8, 12, 14, .86);
  border: 2px solid var(--line);
  padding: 5px 8px;
  font-size: clamp(9px, 2.4vw, 13px);
}
.label { opacity: .6; margin-right: 6px; }
#locationBar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
#touchControls {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding: 12px;
  background: #101820;
  border-top: 4px solid var(--line);
  touch-action: none;
  user-select: none;
}
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 48px);
  gap: 4px;
}
.dpad button, .actions button {
  border: 2px solid #e5d79a;
  background: #263238;
  color: #fff6c9;
  font: bold 18px "Courier New", monospace;
  border-radius: 7px;
  box-shadow: inset 0 -4px rgba(0,0,0,.25);
}
.dpad button:active, .actions button:active { transform: translateY(2px); }
[data-dir="up"] { grid-column: 2; grid-row: 1; }
[data-dir="left"] { grid-column: 1; grid-row: 2; }
[data-dir="down"] { grid-column: 2; grid-row: 2; }
[data-dir="right"] { grid-column: 3; grid-row: 2; }
.actions { display: flex; gap: 10px; align-items: end; }
#actionBtn { width: 64px; height: 64px; border-radius: 50%; }
#menuBtn { height: 38px; font-size: 12px; padding: 0 12px; }
dialog {
  width: min(92vw, 470px);
  border: 4px solid var(--line);
  background: #101820;
  color: var(--ink);
  font: 16px/1.45 "Courier New", monospace;
  box-shadow: 0 0 0 5px #000;
}
dialog::backdrop { background: rgba(0,0,0,.72); }
dialog h2 { margin-top: 0; }
#messageButtons { display: grid; gap: 8px; margin-top: 10px; }
#messageButtons button { width: 100%; }
.characterGrid { display: grid; gap: 10px; }
.characterChoice {
  display: grid;
  gap: 3px;
  text-align: left;
  width: 100%;
}
.characterChoice strong { font-size: 17px; }
.characterChoice span { font-size: 13px; opacity: .8; }
@media (max-width: 520px) {
  #hud { grid-template-columns: repeat(3, auto); }
  #locationBar { font-size: 9px; }
}
@media (max-height: 700px) and (orientation: landscape) {
  body { display: block; padding: 4px; }
  #app { margin: 0 auto; }
  header { display: none; }
  #gameShell { display: grid; grid-template-columns: 1fr 190px; }
  #touchControls {
    border-top: 0;
    border-left: 4px solid var(--line);
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 42px); }
}


/* v0.0.3 visual pass */
#gameShell {
  background: #070707;
}
canvas {
  max-height: 70vh;
  background: #0b0b0b;
}
#hud > div,
#locationBar {
  backdrop-filter: blur(2px);
}


/* v0.0.5 expanded classic-RPG presentation */
#gameShell {
  border-width: 5px;
  box-shadow: 0 0 0 3px #000, 0 0 0 7px #4a4a4a;
}
canvas {
  max-height: 76vh;
}
#hud {
  left: 10px;
  right: auto;
  top: 10px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 2px 10px;
  min-width: 190px;
  background: rgba(3, 3, 3, .92);
  border: 3px double var(--line);
  padding: 7px 10px;
}
#hud > div {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: clamp(10px, 2vw, 14px);
}
#locationBar {
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 3px double var(--line);
  background: rgba(3, 3, 3, .92);
}
@media (max-width: 520px) {
  #hud {
    grid-template-columns: repeat(2, auto);
    min-width: 170px;
  }
}

#hud { grid-template-columns: repeat(3, auto); min-width: 300px; }
@media (max-width: 600px) {
  #hud { grid-template-columns: repeat(2, auto); min-width: 190px; }
}

/* v0.1.0 */
#messageText { white-space: pre-line; min-height: 3.5em; }
#messageButtons { grid-template-columns: repeat(2,minmax(0,1fr)); }
#messageButtons button:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 480px) { #messageButtons { grid-template-columns: 1fr; } }


#versionBadge{
  position:absolute;
  top:8px;
  right:8px;
  background:rgba(0,0,0,.75);
  color:#d9d9d9;
  border:2px solid #888;
  padding:2px 6px;
  font:11px "Courier New", monospace;
  pointer-events:none;
  opacity:.9;
}