:root {
  --u: 2;
  --ink: #f2f0e8;
  --gold: #f2c94c;
  --bg: #07070d;
  --panel: rgba(8, 8, 16, 0.94);
  --font: 'Press Start 2P', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button, a { font-family: var(--font); }
.hidden { display: none !important; }

/* ---------- layout ---------- */
#wrap {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#stage {
  position: relative;
  width: 960px;
  height: 540px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px #1a1a24, 0 20px 80px rgba(0, 0, 0, 0.8);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: calc(var(--u) * 3px);
  left: calc(var(--u) * 3px);
  right: calc(var(--u) * 3px);
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: calc(var(--u) * 3px) calc(var(--u) * 5px);
  background: rgba(0, 0, 0, 0.88);
  border: max(2px, calc(var(--u) * 1px)) solid #d9d9d9;
  border-radius: 3px;
  font-size: max(7px, calc(var(--u) * 5.5px));
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
#hud span::before { content: '[ '; color: #8a8a8a; }
#hud span::after { content: ' ]'; color: #8a8a8a; }
#hud b { font-weight: normal; color: #fff; }
#hud b.low { color: #ff5a5a; }
body.small #hud { font-size: 7px; padding: 4px 6px; top: 3px; left: 3px; right: 3px; }
body.small #hud .town, body.small #minimap { display: none; }
body.small #hud span::before, body.small #hud span::after { content: none; }
body.small #quest { top: 24px; }

#minimap {
  position: absolute;
  top: calc(var(--u) * 20px);
  right: calc(var(--u) * 4px);
  width: max(64px, calc(var(--u) * 64px));
  height: auto;
  aspect-ratio: 128 / 100;
  image-rendering: pixelated;
  border: max(2px, calc(var(--u) * 1.5px)) solid #d9d9d9;
  border-radius: 3px;
  background: #0f1330;
  pointer-events: none;
}

#quest {
  position: absolute;
  top: calc(var(--u) * 21px);
  left: calc(var(--u) * 5px);
  font-size: max(7px, calc(var(--u) * 5px));
  color: var(--gold);
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}
#quest b { font-weight: normal; color: #fff; }

#toast {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.9);
  max-width: 90%;
  padding: calc(var(--u) * 5px) calc(var(--u) * 8px);
  background: var(--panel);
  border: max(2px, calc(var(--u) * 1px)) solid var(--gold);
  color: var(--gold);
  font-size: max(8px, calc(var(--u) * 6px));
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- dialog ---------- */
#dialog {
  position: absolute;
  left: calc(var(--u) * 6px);
  right: calc(var(--u) * 6px);
  bottom: calc(var(--u) * 6px);
  max-height: calc(100% - 12px);
  overflow-y: auto;
  display: flex;
  gap: max(8px, calc(var(--u) * 6px));
  align-items: flex-start;
  padding: max(8px, calc(var(--u) * 6px));
  background: var(--panel);
  border: max(3px, calc(var(--u) * 1.5px)) solid #efefef;
  border-radius: 6px;
  box-shadow: 0 0 0 max(2px, calc(var(--u) * 1px)) #000;
  z-index: 5;
  cursor: pointer;
}
#portrait {
  flex: none;
  width: max(40px, calc(var(--u) * 34px));
  height: max(40px, calc(var(--u) * 34px));
  image-rendering: pixelated;
  border: 2px solid #efefef;
  background: #1a1a2e;
}
.dbody { flex: 1; min-width: 0; }
#dname {
  color: var(--gold);
  font-size: max(8px, calc(var(--u) * 5.5px));
  margin-bottom: max(6px, calc(var(--u) * 3px));
}
#dtext {
  font-size: max(9px, calc(var(--u) * 6.5px));
  line-height: 1.7;
  white-space: pre-line;
  min-height: 3.4em;
}
#dchoices {
  display: flex;
  flex-wrap: wrap;
  gap: max(6px, calc(var(--u) * 3px));
  margin-top: max(6px, calc(var(--u) * 4px));
}
.choice {
  display: inline-block;
  padding: max(6px, calc(var(--u) * 3px)) max(8px, calc(var(--u) * 5px));
  background: #15151f;
  color: var(--ink);
  border: 2px solid #55556a;
  font-size: max(8px, calc(var(--u) * 5px));
  text-decoration: none;
  cursor: pointer;
}
.choice.sel, .choice:hover { border-color: var(--gold); color: var(--gold); background: #231d0c; }
.choice.sel::before { content: '▶ '; }
#dnext {
  position: absolute;
  right: max(8px, calc(var(--u) * 5px));
  bottom: max(6px, calc(var(--u) * 3px));
  font-size: max(8px, calc(var(--u) * 5px));
  animation: bob 0.6s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(3px); } }

/* ---------- controls legend ---------- */
#controls {
  position: absolute;
  left: calc(var(--u) * 4px);
  bottom: calc(var(--u) * 4px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: max(4px, calc(var(--u) * 2px)) max(10px, calc(var(--u) * 7px));
  max-width: calc(100% - var(--u) * 80px);
  padding: max(6px, calc(var(--u) * 3px)) max(8px, calc(var(--u) * 5px));
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #d9d9d9;
  border-radius: 3px;
  font-size: max(7px, calc(var(--u) * 4.5px));
  line-height: 1.6;
  color: #d8d8d8;
  pointer-events: none;
  z-index: 4;
}
#controls span { white-space: nowrap; }
#controls kbd {
  display: inline-block;
  margin-right: 3px;
  padding: 2px 4px 1px;
  background: #f2f0e8;
  color: #111;
  border-radius: 2px;
  box-shadow: 0 2px 0 #777;
  font-family: var(--font);
  font-size: 1em;
}
#controls .k-touch { display: none; }
body.touch #controls .k-desk { display: none; }
body.touch #controls .k-touch { display: inline; }
body.small #controls { font-size: 6px; gap: 3px 8px; padding: 4px 6px; }

/* ---------- corner buttons ---------- */
#corner {
  position: absolute;
  right: calc(var(--u) * 4px);
  bottom: calc(var(--u) * 4px);
  display: flex;
  gap: 6px;
  z-index: 4;
}
#corner button {
  padding: max(6px, calc(var(--u) * 3px)) max(8px, calc(var(--u) * 5px));
  background: rgba(0, 0, 0, 0.8);
  color: var(--ink);
  border: 2px solid #d9d9d9;
  border-radius: 3px;
  font-size: max(8px, calc(var(--u) * 5px));
  cursor: pointer;
}
#corner button:hover { border-color: var(--gold); color: var(--gold); }
#mute.off { opacity: 0.5; text-decoration: line-through; }

/* ---------- touch controls ---------- */
#touch { display: none; }
body.touch #touch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 24px calc(env(safe-area-inset-bottom) + 10px);
}
body.touch.portrait #touch { flex: 1; max-height: 260px; }
body.touch:not(.portrait) #touch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.6;
}
body.touch:not(.portrait) #touch > * { pointer-events: auto; }

#dpad {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, #1f1f2c 0 45%, #14141d 46%);
  border: 3px solid #3a3a4d;
  touch-action: none;
}
#dpad::before, #dpad::after {
  content: '';
  position: absolute;
  background: #2c2c3c;
  border-radius: 4px;
}
#dpad::before { left: 50%; top: 14px; bottom: 14px; width: 40px; transform: translateX(-50%); }
#dpad::after { top: 50%; left: 14px; right: 14px; height: 40px; transform: translateY(-50%); }
#dpad .knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #50506a;
  border: 3px solid #8a8aa8;
  z-index: 1;
  transition: transform 0.05s;
}
#btns { display: flex; gap: 18px; align-items: center; }
#btns button {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid #d9d9d9;
  background: #a02a2a;
  color: #fff;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  touch-action: none;
}
#btns button small { font-size: 7px; opacity: 0.85; }
#btn-b { background: #2a3f8a !important; transform: translateY(24px); }
#btns button.down { filter: brightness(1.4); transform: scale(0.94); }
#btn-b.down { transform: translateY(24px) scale(0.94); }

/* ---------- full-screen overlays ---------- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#title { background: #000; }
.title-bg {
  position: absolute;
  inset: 0;
  background: url('assets/title.jpg') center / cover no-repeat;
  filter: brightness(0.55) saturate(1.1);
  image-rendering: pixelated;
  animation: pan 30s ease-in-out infinite alternate;
}
@keyframes pan { from { transform: scale(1.08) translateX(-1.5%); } to { transform: scale(1.08) translateX(1.5%); } }
#title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}
.title-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.logo {
  font-size: clamp(40px, 13vw, 130px);
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 0.06em 0 #000, 0.06em 0.06em 0 #000, 0 0 40px rgba(255, 170, 60, 0.45);
}
.sub {
  font-size: clamp(10px, 2.2vw, 20px);
  color: var(--gold);
  letter-spacing: 0.3em;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 18px;
}
button.big {
  padding: 16px 26px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 4px;
  font-size: clamp(12px, 2vw, 18px);
  cursor: pointer;
}
button.big:hover { color: var(--gold); border-color: var(--gold); }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { color: var(--gold); border-color: var(--gold); } }
button.ghost {
  background: none;
  border: none;
  color: #cfcfcf;
  font-size: clamp(9px, 1.3vw, 12px);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
button.ghost:hover { color: var(--gold); }
.howto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  max-width: 640px;
  margin-top: 18px;
  font-size: 9px;
  line-height: 1.6;
  color: #bdbdbd;
  text-shadow: 1px 1px 0 #000;
}
body.touch .howto { display: none; }

#panel { background: rgba(3, 3, 8, 0.82); }
.panel-box {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 22px;
  background: var(--panel);
  border: 3px solid #efefef;
  border-radius: 8px;
  box-shadow: 0 0 0 3px #000, 0 30px 80px rgba(0, 0, 0, 0.7);
  text-align: center;
}
#ptitle { font-size: clamp(18px, 4vw, 28px); color: var(--gold); margin-bottom: 14px; text-shadow: 3px 3px 0 #000; }
#ptext { font-size: 10px; line-height: 1.9; color: #d8d8d8; margin-bottom: 18px; white-space: pre-line; }
#plinks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
#plinks h4 { margin: 10px 0 2px; font-size: 9px; font-weight: normal; color: #8a8a9a; letter-spacing: 0.2em; }
#plinks a {
  display: block;
  padding: 13px;
  background: #15151f;
  border: 2px solid #55556a;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}
#plinks a:hover, #plinks a:focus-visible { border-color: var(--gold); color: var(--gold); background: #231d0c; outline: none; }