:root {
  --s: 3;
  --u: calc(var(--s) * 1px); /* one logical game pixel */
  --bg: #0b0812;
  --panel: #150e20;
  --verb: #43b45e;
  --verb-hi: #a8f5a0;
  --verb-on: #ffe06a;
  --sentence: #7fe0ff;
  --dialog: #c9a0ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: 'VT323', ui-monospace, Menlo, monospace; color: #fff; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

#game { position: relative; width: calc(var(--u) * 320); height: calc(var(--u) * 200); background: #000; box-shadow: 0 0 calc(var(--u) * 20) rgba(120, 80, 200, 0.25); }

#stage { position: relative; width: 100%; height: calc(var(--u) * 144); overflow: hidden; }
#scene { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; }
body.busy #scene { cursor: progress; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
#speech { position: absolute; inset: 0; pointer-events: none; }

.speech {
  position: absolute; max-width: calc(var(--u) * 190); text-align: center;
  font-size: calc(var(--u) * 9.5); line-height: 0.95; white-space: pre-wrap;
  background: rgba(8, 4, 16, 0.5); padding: calc(var(--u) * 1) calc(var(--u) * 3); border-radius: calc(var(--u) * 2);
  text-shadow: calc(var(--u) * -0.6) 0 #000, calc(var(--u) * 0.6) 0 #000, 0 calc(var(--u) * -0.6) #000, 0 calc(var(--u) * 0.6) #000,
               calc(var(--u) * 0.6) calc(var(--u) * 0.6) #000, calc(var(--u) * -0.6) calc(var(--u) * 0.6) #000, calc(var(--u) * 0.6) calc(var(--u) * -0.6) #000, calc(var(--u) * -0.6) calc(var(--u) * -0.6) #000;
}
.speech.muffled { font-style: italic; letter-spacing: 0.02em; }
.speech.muffled::before { content: '(muffled) '; opacity: 0.7; }
.speech.narrator { font-style: italic; background: rgba(10, 6, 20, 0.72); padding: calc(var(--u) * 1.5) calc(var(--u) * 4); border-radius: calc(var(--u) * 2); }
.speech.bark { opacity: 0.92; }

#panel { position: relative; height: calc(var(--u) * 56); background: var(--panel); border-top: calc(var(--u) * 1) solid #2a1e3a; }
#bar { position: relative; height: calc(var(--u) * 10); display: flex; align-items: center; justify-content: center; }
#sentence { font-size: calc(var(--u) * 9); color: var(--sentence); white-space: nowrap; overflow: hidden; max-width: 78%; }
#tools { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 1); display: flex; gap: calc(var(--u) * 2); }
#tools button { width: calc(var(--u) * 10); height: calc(var(--u) * 8); font-size: calc(var(--u) * 8); line-height: 1; color: #8a7aa8; background: #22183a; border-radius: calc(var(--u) * 1.5); }
#tools button:hover { color: #fff; background: #3a2c5a; }
#soundBtn.off { text-decoration: line-through; opacity: 0.6; }

body.busy #controls { opacity: 0.35; transition: opacity 0.2s; }
#controls { transition: opacity 0.2s; display: flex; height: calc(var(--u) * 46); padding: calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 3); gap: calc(var(--u) * 4); }
#verbs { width: calc(var(--u) * 140); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.verb { font-size: calc(var(--u) * 11); color: var(--verb); text-align: center; }
.verb:hover { color: var(--verb-hi); }
.verb.on { color: var(--verb-on); }

#inv { position: relative; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr) calc(var(--u) * 10); grid-template-rows: repeat(2, 1fr); gap: calc(var(--u) * 2); }
.slot { background: #22183a; border: calc(var(--u) * 1) solid #2e2248; border-radius: calc(var(--u) * 1.5); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot:hover { background: #2e2250; border-color: #5a4a8a; }
.slot.sel { border-color: var(--verb-on); background: #3a2c50; }
.slot canvas { width: calc(var(--u) * 24); height: calc(var(--u) * 16); image-rendering: pixelated; pointer-events: none; }
.arrow { grid-column: 5; font-size: calc(var(--u) * 7); color: #8a7aa8; background: #22183a; border-radius: calc(var(--u) * 1.5); }
.arrow.up { grid-row: 1; } .arrow.down { grid-row: 2; }
.arrow:hover { color: #fff; }

#dialog { position: absolute; left: 0; right: 0; bottom: 0; min-height: calc(var(--u) * 46); padding: calc(var(--u) * 3) calc(var(--u) * 8); background: rgba(14, 9, 22, 0.97); border-top: calc(var(--u) * 1) solid #3a2c50; display: none; flex-direction: column; justify-content: center; z-index: 5; }
#dialog.on { display: flex; }
#dialog button { text-align: left; font-size: calc(var(--u) * 9.5); line-height: 1.05; color: var(--dialog); padding: calc(var(--u) * 0.5) 0; }
#dialog button:hover { color: #fff; }
#dialog button::before { content: '› '; opacity: 0.5; }

.overlay { position: absolute; inset: 0; z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10, 6, 20, 0.86); padding: calc(var(--u) * 10); }
.overlay.on { display: flex; }
.logo { font-family: 'Press Start 2P', 'VT323', monospace; font-size: calc(var(--u) * 22); color: #ffd84d; text-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #c0602a, calc(var(--u) * 3) calc(var(--u) * 3) 0 #3a1a40; letter-spacing: calc(var(--u) * 1); }
.sub { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: #ff9fc0; }
.tag { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 8); color: #b8a8d8; max-width: calc(var(--u) * 220); }
.buttons { margin-top: calc(var(--u) * 10); display: flex; gap: calc(var(--u) * 8); }
.overlay button { font-size: calc(var(--u) * 10); color: var(--verb); padding: calc(var(--u) * 2) calc(var(--u) * 6); border: calc(var(--u) * 1) solid #2e5a3a; border-radius: calc(var(--u) * 2); background: #102016; }
.overlay button:hover { color: var(--verb-hi); border-color: var(--verb); }
.volume { margin-top: calc(var(--u) * 8); display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 8); color: #b8a8d8; cursor: pointer; }
.volume input { width: calc(var(--u) * 80); accent-color: var(--verb); cursor: pointer; }
.credits { margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 6); color: #5e4e7c; max-width: calc(var(--u) * 260); }
.controls-help { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 7); color: #7a6a98; max-width: calc(var(--u) * 240); }

#end .t1 { font-family: 'Press Start 2P', monospace; font-size: calc(var(--u) * 11); color: #ffd84d; }
#end .t2 { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 12); color: #ff9fc0; }
#end .body { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 10); }
#end canvas { margin-top: calc(var(--u) * 8); width: calc(var(--u) * 62); height: calc(var(--u) * 36); image-rendering: pixelated; }
#end .teaser { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 8.5); color: #ffcf9a; max-width: calc(var(--u) * 250); }
#end .stats { margin: calc(var(--u) * 6) 0; font-size: calc(var(--u) * 7); color: #7a6a98; }