* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; height: 100%; background: #07060b; overflow: hidden; }

body {
  display: grid;
  place-items: center;
  font-family: 'Nunito', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  color: #f6ecd2;
  user-select: none;
}

/* --px = size of one game pixel on screen; every UI size is expressed in game pixels */
#game {
  --px: 3px;
  position: relative;
  width: calc(384 * var(--px));
  height: calc(216 * var(--px));
  overflow: hidden;
  background: #000;
  font-size: calc(var(--px) * 7);
  line-height: 1.3;
}

canvas { image-rendering: pixelated; }
#screen { position: absolute; inset: 0; width: 100%; height: 100%; }
.hidden { display: none !important; }
#ui { position: absolute; inset: 0; pointer-events: none; }

.panel {
  background: #1e1729;
  border: var(--px) solid #f6ecd2;
  box-shadow:
    0 0 0 var(--px) #0c0912,
    0 0 0 calc(var(--px) * 2) #e8742c,
    0 calc(var(--px) * 3) 0 calc(var(--px) * 2) rgba(0, 0, 0, 0.35);
}

.key {
  display: inline-block;
  padding: 0 calc(var(--px) * 1.5);
  margin-right: calc(var(--px) * 1.5);
  background: #f6ecd2;
  color: #1e1729;
  border-radius: var(--px);
  line-height: 1.2;
}

/* ---------- title ---------- */
#title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--px) * 18);
}
.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.85; font-family: 'Pixelify Sans', 'Nunito', sans-serif; font-weight: 700; }
.logo .l1 {
  font-size: calc(var(--px) * 20);
  letter-spacing: calc(var(--px) * 3);
  color: #f6ecd2;
  text-shadow:
    calc(var(--px) * 1) calc(var(--px) * 1) 0 #2a1238,
    calc(var(--px) * 2) calc(var(--px) * 2) 0 #2a1238;
}
.logo .l2 {
  font-size: calc(var(--px) * 36);
  letter-spacing: calc(var(--px) * 2);
  color: #f39c4a;
  text-shadow:
    0 calc(var(--px) * -1) 0 #ffd27a,
    calc(var(--px) * 1) calc(var(--px) * 1) 0 #7a2a1c,
    calc(var(--px) * 2) calc(var(--px) * 2) 0 #2a1238,
    calc(var(--px) * 3) calc(var(--px) * 3) 0 #2a1238;
}
.subtitle {
  margin-top: calc(var(--px) * 4);
  font-size: calc(var(--px) * 9);
  color: #bfe3d6;
  letter-spacing: calc(var(--px) * 1);
  text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 #1a1030;
}
.press {
  position: absolute;
  bottom: calc(var(--px) * 22);
  font-size: calc(var(--px) * 8);
  color: #fff6dc;
  text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 #000;
  animation: blink 1.2s steps(2) infinite;
}
.credit {
  position: absolute;
  bottom: calc(var(--px) * 4);
  font-size: calc(var(--px) * 6);
  color: rgba(246, 236, 210, 0.6);
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: calc(var(--px) * 6);
  left: calc(var(--px) * 6);
  right: calc(var(--px) * 6);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.chip {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  padding: calc(var(--px) * 2) calc(var(--px) * 4);
  font-size: calc(var(--px) * 7);
  line-height: 1;
}
.hud-left, .hud-right { display: flex; gap: calc(var(--px) * 6); }
#hud-money { color: #9be89b; }
#hud-icon { width: calc(var(--px) * 9); height: calc(var(--px) * 9); }
#hud-hand { width: calc(var(--px) * 10); height: calc(var(--px) * 10); }

#toast {
  position: absolute;
  top: calc(var(--px) * 26);
  left: 50%;
  transform: translateX(-50%);
  padding: calc(var(--px) * 3) calc(var(--px) * 6);
  font-size: calc(var(--px) * 7.5);
  white-space: nowrap;
  color: #ffd27a;
  animation: toast-in 0.3s steps(4);
}
@keyframes toast-in { from { transform: translate(-50%, calc(var(--px) * -10)); opacity: 0; } }

#hint {
  position: absolute;
  bottom: calc(var(--px) * 7);
  left: 50%;
  transform: translateX(-50%);
  padding: calc(var(--px) * 2) calc(var(--px) * 5);
  font-size: calc(var(--px) * 6.5);
  white-space: nowrap;
  transition: opacity 1.5s;
}
#hint.fade { opacity: 0; }

#action {
  position: absolute;
  right: calc(var(--px) * 8);
  bottom: calc(var(--px) * 8);
  padding: calc(var(--px) * 2) calc(var(--px) * 5);
  font-size: calc(var(--px) * 7);
  white-space: nowrap;
  color: #bfefff;
}

/* ---------- dialog ---------- */
#dialog {
  position: absolute;
  left: calc(var(--px) * 10);
  right: calc(var(--px) * 10);
  bottom: calc(var(--px) * 9);
  min-height: calc(var(--px) * 62);
  display: flex;
  gap: calc(var(--px) * 7);
  padding: calc(var(--px) * 6);
}
#dialog-portrait-box {
  flex: none;
  width: calc(var(--px) * 50);
  height: calc(var(--px) * 50);
  display: grid;
  place-items: center;
  background: linear-gradient(#3d7f78, #234d4a);
  border: var(--px) solid #f6ecd2;
  box-shadow: 0 0 0 var(--px) #0c0912;
}
#dialog-portrait { width: calc(var(--px) * 48); height: calc(var(--px) * 48); }
#dialog.no-portrait #dialog-portrait-box { display: none; }
.dialog-main { flex: 1; min-width: 0; }
#dialog-name {
  margin-bottom: calc(var(--px) * 2);
  font-size: calc(var(--px) * 8.5);
  font-weight: 800;
  color: #f39c4a;
}
#dialog-text { font-size: calc(var(--px) * 8.5); line-height: 1.35; letter-spacing: 0.01em; min-height: calc(var(--px) * 18); word-wrap: break-word; }
#dialog-choices { list-style: none; margin-top: calc(var(--px) * 3); font-size: calc(var(--px) * 8); }
#dialog-choices li { position: relative; padding: calc(var(--px) * 0.5) 0 calc(var(--px) * 0.5) calc(var(--px) * 10); color: #b8ad96; }
#dialog-choices li.sel { color: #fff; }
#dialog-choices li.sel::before { content: '▶'; position: absolute; left: 0; color: #f39c4a; }
#dialog-arrow {
  position: absolute;
  right: calc(var(--px) * 6);
  bottom: calc(var(--px) * 3);
  font-size: calc(var(--px) * 6);
  color: #f39c4a;
  animation: bob 0.6s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(calc(var(--px) * 1.5)); } }

/* ---------- journal #3 ---------- */
#journal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 14, 0.6);
}
.book {
  display: flex;
  gap: calc(var(--px) * 2);
  width: calc(var(--px) * 330);
  height: calc(var(--px) * 190);
  padding: calc(var(--px) * 6);
  background: #6b2f22;
  border-radius: calc(var(--px) * 4);
  box-shadow:
    inset 0 0 0 var(--px) #8e4330,
    inset 0 0 0 calc(var(--px) * 3) #4a1f16,
    0 calc(var(--px) * 4) 0 rgba(0, 0, 0, 0.4);
}
.page {
  position: relative;
  flex: 1;
  padding: calc(var(--px) * 8);
  overflow: hidden;
  background: #ecdcb2;
  color: #3a2616;
  font-size: calc(var(--px) * 7);
  box-shadow: inset 0 0 calc(var(--px) * 12) rgba(120, 80, 30, 0.4);
}
.page.left { border-radius: calc(var(--px) * 2) 0 0 calc(var(--px) * 2); }
.page.right { border-radius: 0 calc(var(--px) * 2) calc(var(--px) * 2) 0; }
.journal-head {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  margin-bottom: calc(var(--px) * 4);
  padding-bottom: calc(var(--px) * 3);
  border-bottom: var(--px) dashed #b49a6a;
  font-size: calc(var(--px) * 9);
  font-weight: 700;
  color: #6b2f22;
}
#journal-hand { width: calc(var(--px) * 16); height: calc(var(--px) * 16); }
#journal-list { list-style: none; }
#journal-list li { padding: calc(var(--px) * 1) calc(var(--px) * 3); }
#journal-list li.sel { background: rgba(107, 47, 34, 0.15); color: #8a1c1c; }
#journal-list li.sel::before { content: '▶ '; }
#journal-list li.locked { color: #a8936a; }
.journal-hint {
  position: absolute;
  bottom: calc(var(--px) * 6);
  left: calc(var(--px) * 8);
  font-size: calc(var(--px) * 5.5);
  color: #8a7550;
}
#journal-title { margin-bottom: calc(var(--px) * 3); font-size: calc(var(--px) * 9); font-weight: 800; color: #6b2f22; }
#journal-art { display: block; height: calc(var(--px) * 52); margin: 0 auto calc(var(--px) * 4); }
#journal-text { line-height: 1.35; }
#journal-cipher {
  position: absolute;
  left: calc(var(--px) * 8);
  right: calc(var(--px) * 8);
  bottom: calc(var(--px) * 6);
  font-size: calc(var(--px) * 6);
  color: #8a1c1c;
}

/* ---------- map (K) ---------- */
#map {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 14, 0.6);
}
.parchment {
  padding: calc(var(--px) * 4) calc(var(--px) * 6) calc(var(--px) * 3);
  background: #e8d6a8;
  border-radius: calc(var(--px) * 3);
  color: #6b2f22;
  box-shadow:
    inset 0 0 calc(var(--px) * 14) rgba(120, 80, 30, 0.45),
    0 0 0 var(--px) #8a6a42,
    0 calc(var(--px) * 4) 0 rgba(0, 0, 0, 0.4);
}
.map-head { text-align: center; font-size: calc(var(--px) * 9); font-weight: 800; margin-bottom: calc(var(--px) * 2); }
#map-canvas {
  display: block;
  width: calc(var(--px) * 224);
  height: calc(var(--px) * 168);
  border: var(--px) solid #8a6a42;
  image-rendering: auto;
}
.map-foot {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--px) * 2);
  font-size: calc(var(--px) * 5.5);
  color: #8a6a42;
}

/* ---------- phones & tablets ---------- */
html, body, body * { touch-action: none; }
html, body { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#title, #dialog, #journal, #map, .tap { pointer-events: auto; }
.tap { cursor: pointer; }
body.touch .kb { display: none !important; }
body:not(.touch) .tc { display: none !important; }

body.touch .chip.tap { padding: calc(var(--px) * 3) calc(var(--px) * 5); }
#hud-sound-icon { font-size: calc(var(--px) * 8); line-height: 1; }
#hud-sound.off #hud-sound-icon { opacity: 0.35; text-decoration: line-through; }
body.touch #action { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--px) * 7); }
.book { position: relative; }
.book-close {
  position: absolute;
  top: calc(var(--px) * -5);
  right: calc(var(--px) * -5);
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(var(--px) * 18);
  height: calc(var(--px) * 18);
  border-radius: 50%;
  background: #6b2f22;
  border: var(--px) solid #ecdcb2;
  font-size: calc(var(--px) * 9);
  color: #ecdcb2;
  cursor: pointer;
}
body.touch #journal-list li { padding: calc(var(--px) * 1.6) calc(var(--px) * 3); }
body.touch #dialog-choices li { padding-top: calc(var(--px) * 1.5); padding-bottom: calc(var(--px) * 1.5); }

#touch {
  --stick: clamp(110px, 30vmin, 170px);
  --btn: clamp(72px, 20vmin, 120px);
  --edge: 22px;
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
#stick-zone { position: absolute; left: 0; top: 0; width: 50%; height: 100%; pointer-events: auto; }
#stick {
  position: absolute;
  left: calc(max(var(--edge), env(safe-area-inset-left)) + var(--stick) / 2);
  top: calc(100% - max(var(--edge), env(safe-area-inset-bottom)) - var(--stick) / 2);
  width: var(--stick);
  height: var(--stick);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(30, 23, 41, 0.35);
  border: 3px solid rgba(246, 236, 210, 0.45);
  box-shadow: 0 0 0 3px rgba(12, 9, 18, 0.35);
  opacity: 0.55;
  transition: opacity 0.15s;
}
#stick.active { opacity: 1; transition: none; }
#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  margin: -22% 0 0 -22%;
  border-radius: 50%;
  background: #f6ecd2;
  border: 3px solid #e8742c;
  box-shadow: 0 0 0 3px #0c0912;
}
#stick.run #stick-knob { background: #f39c4a; border-color: #fff6dc; }

.tbtn {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: auto;
  font: 800 clamp(13px, 4vmin, 19px) 'Nunito', sans-serif;
  color: #f6ecd2;
  background: #1e1729;
  border: 3px solid #f6ecd2;
  box-shadow: 0 0 0 3px #0c0912, 0 0 0 6px #e8742c, 0 6px 0 4px rgba(0, 0, 0, 0.35);
  opacity: 0.8;
  touch-action: none;
}
.tbtn.down { transform: translateY(3px); background: #3a2b4d; opacity: 1; }
#btn-act {
  right: max(var(--edge), env(safe-area-inset-right));
  bottom: max(var(--edge), env(safe-area-inset-bottom));
  width: var(--btn);
  height: var(--btn);
  border-radius: 50%;
}
#btn-act.ready { opacity: 1; animation: ready 0.9s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 3px #0c0912, 0 0 0 9px #f39c4a, 0 6px 0 4px rgba(0, 0, 0, 0.35); } }
#btn-act-icon { width: 52%; height: 52%; }
#btn-alt {
  right: calc(max(var(--edge), env(safe-area-inset-right)) + var(--btn) * 0.55);
  bottom: calc(max(var(--edge), env(safe-area-inset-bottom)) + var(--btn) + 18px);
  padding: 0.45em 1em;
  border-radius: 999px;
  white-space: nowrap;
  color: #bfefff;
}

#rotate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  background: #07060b;
  text-align: center;
  font-size: 20px;
  color: #f6ecd2;
}
#rotate .phone {
  width: 54px;
  height: 92px;
  border: 5px solid #f6ecd2;
  border-radius: 10px;
  box-shadow: 0 0 0 4px #e8742c;
  animation: turn 2s ease-in-out infinite;
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 760px) {
  body.touch #rotate { display: flex; }
}
/* tablet held upright: the picture goes up top, the controls get the free space below it */
@media (orientation: portrait) {
  body.touch { place-items: start center; padding-top: env(safe-area-inset-top); }
}

/* ciphers look like they were typed on Ford's typewriter */
.cipher {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  letter-spacing: calc(var(--px) * 0.4);
}
#dialog-text.cipher { color: #ffd84a; }