/* MONSTER OFF ROAD - layout. No web fonts, no external URLs. */
html, body { margin: 0; padding: 0; height: 100%; background: #0d0b10; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; font-family: "Courier New", Courier, monospace; color: #f4f1ec; }
.stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#screen { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #0d0b10;
  box-shadow: 0 0 0 2px #24222a, 0 0 24px rgba(246, 117, 8, 0.18); cursor: pointer; }
.noscript { position: absolute; top: 40%; width: 100%; text-align: center; color: #f67508; }
.touchpad { display: none; }
html.touch .touchpad { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
.tbtn { pointer-events: auto; position: relative; border: 3px solid #0d0b10; border-radius: 10px; background: #3a3842; color: #f4f1ec;
  font: bold 18px "Courier New", Courier, monospace; box-shadow: inset 0 3px 0 #5a5862, inset 0 -4px 0 #24222a; opacity: 0.82;
  touch-action: none; padding: 0; }
.tbtn.on { background: #a63f07; box-shadow: inset 0 3px 0 #f67508, inset 0 -2px 0 #6e2805; }
.pad { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 12px; }
.pad-l { left: max(12px, env(safe-area-inset-left)); }
.pad-r { right: max(12px, env(safe-area-inset-right)); }
.steer { width: 72px; height: 72px; font-size: 26px; }
.gas { width: 84px; height: 84px; background: #a63f07; box-shadow: inset 0 3px 0 #f67508, inset 0 -4px 0 #6e2805; }
.gas.on { background: #f67508; }
.nitro { width: 64px; height: 64px; margin-top: 20px; background: #12606e; box-shadow: inset 0 3px 0 #3fc7d9, inset 0 -4px 0 #0b3a44; font-size: 15px; }
.nitro.on { background: #3fc7d9; color: #0d0b10; }
.pausebtn { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; margin-left: -24px; width: 48px; height: 36px; font-size: 14px; }
@media (orientation: portrait) {
  html.touch body { align-items: flex-start; }
  html.touch .stage { height: auto; margin-top: 56px; }
}
@media (orientation: landscape) {
  html.touch .tbtn { opacity: 0.55; }
  html.touch .pausebtn { top: auto; left: max(12px, env(safe-area-inset-left)); margin-left: 0; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px); }
}