html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  color: #fff; font-family: monospace;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; overscroll-behavior: none;
}
/* backdrop around the game (desktop sides): dark riveted steel plate */
body {
  background-color: #06050c;
  background-image: linear-gradient(rgba(5, 4, 12, 0.68), rgba(5, 4, 12, 0.68)), var(--tile);
  background-size: auto, 48px 48px;
  image-rendering: pixelated;
}
#touchArea { position: fixed; inset: 0; touch-action: none; }
#screen {
  position: absolute; display: block; z-index: 1;
  image-rendering: pixelated; image-rendering: crisp-edges;
  box-shadow: 0 0 0 2px #0a0612, 0 0 0 4px #3a4258, 0 0 0 6px #0a0612;
}
#scan { position: absolute; pointer-events: none; display: none; z-index: 2; }
#loading {
  position: absolute; left: 0; right: 0; top: 45%; text-align: center; z-index: 5;
  font: bold 20px monospace; letter-spacing: 4px; color: #ffd040;
  text-shadow: 3px 3px 0 #a02010;
}
#pad { display: none; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- touch control panel (pixel-art, sizes in game pixels x --k) ---------- */
body.touch #pad {
  display: flex; position: absolute; z-index: 1; box-sizing: border-box;
  align-items: center; justify-content: space-between;
  padding: calc(6px * var(--k, 2)) calc(6px * var(--k, 2)) env(safe-area-inset-bottom);
  background-color: #141a2c; background-image: var(--tile); background-size: calc(16px * var(--k, 2));
  pointer-events: none; image-rendering: pixelated;
}
body.touch #pad::before { /* hazard stripe along the top edge */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(6px * var(--k, 2));
  background-image: var(--stripe); background-size: calc(16px * var(--k, 2)) calc(6px * var(--k, 2));
  background-repeat: repeat-x; image-rendering: pixelated;
}
body.touch #pad::after { /* stepped drop shadow under the stripe */
  content: ''; position: absolute; left: 0; right: 0; top: calc(6px * var(--k, 2)); height: calc(4px * var(--k, 2));
  background: linear-gradient(rgba(0,0,0,0.5) 0 34%, rgba(0,0,0,0.3) 34% 67%, rgba(0,0,0,0.12) 67% 100%);
}
.tbtn {
  position: relative; z-index: 3; pointer-events: auto; touch-action: none;
  width: calc(40px * var(--k, 2)); height: calc(46px * var(--k, 2));
}
.tbtn canvas, .sbtn canvas, #lcd { display: block; width: 100%; height: 100%; }
.mid { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--k, 2)); }
#lcd { width: calc(96px * var(--k, 2)); height: calc(30px * var(--k, 2)); }
.mid .row { display: flex; gap: calc(8px * var(--k, 2)); }
.sbtn {
  pointer-events: auto; touch-action: none; padding: 0; margin: 0; border: 0; background: none;
  width: calc(22px * var(--k, 2)); height: calc(22px * var(--k, 2));
}
body:not(.playing) .tbtn canvas { opacity: 0.5; }
body:not(.canpause) #pauseBtn { visibility: hidden; }

/* landscape phones: the panel fills both sides of the playfield */
body.touch.land #pad { top: 0; bottom: 0; z-index: 0; padding: 0 calc(10px * var(--k, 2)); }
body.touch.land #pad::before, body.touch.land #pad::after { display: none; }
body.touch.land #lcd { display: none; }
body.touch.land .mid { position: absolute; left: calc(10px * var(--k, 2)); top: calc(10px * var(--k, 2)); }