html, body {
  margin: 0;
  padding: 0;
  background: #10131c;
  height: 100%;
  overflow: hidden;
  font-family: "Courier New", monospace;
}
#wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 28px);
}
#game {
  width: min(100vw, calc((100vh - 28px) * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
  background: #000;
  border: 3px solid #2a3142;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}
#controls {
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #8a93a8;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  user-select: none;
}
#controls { white-space: nowrap; overflow: hidden; }
#controls a { color: #8a93a8; text-decoration: none; border-bottom: 1px solid #2a3142; }
#controls a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 1180px) { #controls .credit { display: none; } }

/* ---- touch controls ---- */
body { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.touch #controls { display: none; }
body.touch #wrap { height: 100%; }
body.touch #game {
  width: min(100vw, calc(100dvh * 16 / 9));
  touch-action: none;
}
#touch {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  font-family: "Courier New", monospace;
}
#touch[hidden] { display: none; }
.tbtn {
  pointer-events: auto;
  position: absolute;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: bold;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.tbtn.word { font-size: 13px; letter-spacing: 1px; }
.tbtn.big { width: 74px; height: 74px; }
.tbtn.small { width: 44px; height: 44px; font-size: 14px; }
.tbtn.on {
  background: rgba(123,237,159,0.3);
  border-color: #7bed9f;
  color: #fff;
}
#t-left  { left: max(14px, env(safe-area-inset-left)); bottom: 88px; }
#t-right { left: calc(max(14px, env(safe-area-inset-left)) + 86px); bottom: 88px; }
#t-down  { left: calc(max(14px, env(safe-area-inset-left)) + 43px); bottom: 14px; }
#t-fire  { right: calc(max(14px, env(safe-area-inset-right)) + 96px); bottom: 26px; }
#t-jump  { right: max(14px, env(safe-area-inset-right)); bottom: 84px; }
#t-pause { right: max(14px, env(safe-area-inset-right)); top: 10px; }
#rotate {
  display: none;
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 60;
  padding: 8px;
  text-align: center;
  background: #1e2435; color: #ffd86b;
  font-size: 13px; font-weight: bold;
}
@media (orientation: portrait) {
  body.touch #rotate { display: block; }
}