:root {
  --u: 4;
  --ink: #2a1f2d;
  --paper: #f4ead5;
  --accent: #e8b84a;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #120e18;
  overflow: hidden;
  font-family: 'VT323', monospace;
  color: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}
body { display: flex; align-items: center; justify-content: center; }

#wrap { position: relative; }
canvas {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hidden { display: none !important; }

/* HUD */
#hud {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(6px, calc(var(--u) * 2px), 14px);
  gap: 10px;
}
#inventory { display: flex; gap: clamp(3px, calc(var(--u) * 1px), 6px); flex-wrap: wrap; max-width: 50%; }
.item {
  width: clamp(26px, calc(var(--u) * 8px), 48px); height: clamp(26px, calc(var(--u) * 8px), 48px);
  background: rgba(42, 31, 45, .82);
  border: 2px solid #5b4a5e; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.item img { width: 70%; height: 70%; object-fit: contain; image-rendering: pixelated; }
.item.new { animation: pop .5s ease-out; border-color: var(--accent); }
@keyframes pop { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }

#objective {
  background: rgba(42, 31, 45, .82);
  border: 2px solid #5b4a5e; border-radius: 3px;
  padding: 2px 10px 4px;
  font-size: clamp(15px, calc(var(--u) * 4.2px), 26px);
  max-width: 50%; text-align: right; line-height: 1.05;
}
#objective .tag { display: block; color: var(--accent); font-size: .7em; letter-spacing: 1px; text-transform: uppercase; }

#levelName {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, calc(var(--u) * 3px), 18px);
  color: #fff; text-shadow: 2px 2px 0 var(--ink);
  opacity: 0; transition: opacity .5s; pointer-events: none; white-space: nowrap;
}
#levelName.show { opacity: 1; }

#hint {
  position: absolute; left: 50%; bottom: clamp(8px, calc(var(--u) * 3px), 20px); transform: translateX(-50%);
  background: rgba(42, 31, 45, .85); border: 2px solid #5b4a5e; border-radius: 3px;
  padding: 0 10px 2px; font-size: clamp(15px, calc(var(--u) * 4.2px), 26px);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
#hint.show { opacity: 1; }
#hint kbd, .controls kbd {
  display: inline-block; background: var(--paper); color: var(--ink);
  border-radius: 2px; padding: 0 5px; margin-right: 4px; font-family: inherit; box-shadow: 0 2px 0 #9d8f78;
}

#toast {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, 0);
  background: var(--accent); color: var(--ink);
  padding: 2px 14px 4px; border-radius: 3px; border: 2px solid var(--ink);
  font-size: clamp(16px, calc(var(--u) * 4.5px), 28px);
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translate(-50%, -6px); }

/* Diálogo */
#dialog {
  position: absolute; left: 6%; right: 6%; bottom: 3%;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 4px;
  box-shadow: 0 0 0 3px #f4ead5, 0 0 0 6px var(--ink), 0 8px 0 6px rgba(0, 0, 0, .35);
  padding: clamp(6px, calc(var(--u) * 2.4px), 16px) clamp(10px, calc(var(--u) * 4px), 24px);
  font-size: clamp(16px, calc(var(--u) * 4.4px), 28px);
  line-height: 1.05;
  min-height: 20%;
}
#speaker {
  position: absolute; top: -0.9em; left: 14px;
  background: var(--ink); color: var(--accent);
  font-family: 'Press Start 2P', monospace; font-size: .45em;
  padding: 5px 9px; border-radius: 3px;
}
#speaker:empty { display: none; }
#text { min-height: 2.1em; white-space: pre-wrap; }
#text.thought { color: #6b5a72; font-style: italic; }
#next { position: absolute; right: 12px; bottom: 4px; font-size: .7em; animation: bob .6s infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(3px); } }
#choices { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
#choices button {
  font: inherit; text-align: left; background: transparent; border: none; color: var(--ink);
  padding: 0 6px; cursor: pointer; border-radius: 2px;
}
#choices button.sel { background: var(--ink); color: var(--paper); }
#choices button.sel::before { content: '▶ '; }

/* Pantallas */
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s; }
#fade.on { opacity: 1; }
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(18, 14, 24, .55); text-align: center; cursor: pointer;
}
#end { background: #000; cursor: default; }
.screen h1 {
  font-family: 'Press Start 2P', monospace; margin: 0;
  font-size: clamp(22px, calc(var(--u) * 9px), 64px);
  color: var(--paper); text-shadow: 4px 4px 0 #7a2e3a, 8px 8px 0 var(--ink);
}
.screen .sub { font-family: 'Press Start 2P', monospace; font-size: clamp(9px, calc(var(--u) * 2.6px), 16px); color: var(--accent); margin: 14px 0 22px; }
.screen .small { font-size: clamp(18px, calc(var(--u) * 5px), 30px); margin: 0 0 20px; }
.blink { font-size: clamp(18px, calc(var(--u) * 5px), 30px); animation: blink 1.1s steps(2) infinite; margin: 0 0 18px; }
@keyframes blink { 50% { opacity: 0; } }
.controls { font-size: clamp(15px, calc(var(--u) * 4px), 24px); line-height: 1.6; opacity: .9; }
.credits { font-size: clamp(13px, calc(var(--u) * 3.5px), 20px); opacity: .5; margin-top: 26px; }
#again {
  font-family: 'Press Start 2P', monospace; font-size: clamp(10px, calc(var(--u) * 2.8px), 16px);
  background: var(--accent); color: var(--ink); border: 3px solid var(--paper);
  padding: 10px 16px; cursor: pointer; box-shadow: 0 4px 0 #8a6420;
}
#again:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6420; }

/* Controles táctiles */
#touch { display: none; position: absolute; inset: auto 0 0 0; padding: 10px; justify-content: space-between; pointer-events: none; }
#touch button {
  pointer-events: auto; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(244, 234, 213, .22); border: 2px solid rgba(244, 234, 213, .5);
  color: #fff; font-size: 22px; font-family: 'Press Start 2P', monospace; touch-action: none;
}
#touch button.act { margin-left: auto; background: rgba(232, 184, 74, .45); }
#touch button[data-key="right"] { margin-left: 8px; }
@media (pointer: coarse) { #touch { display: flex; } #hint { bottom: 80px; } }