html, body {
  margin: 0; padding: 0; height: 100%;
  background: #06060a;
  overflow: hidden;
  cursor: default;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#wrap {
  position: relative;
  width: 100%; height: 100%;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  box-shadow: 0 0 60px rgba(120, 40, 20, 0.35);
  /* Own compositor layer: the canvas repaints 60 times a second, and without
     this the 60px glow around it can be re-blurred on every one of those. */
  will-change: transform;
  transform: translateZ(0);
}
#crt {
  position: absolute;
  pointer-events: none;
  /* Static decoration — promote it so the scanline gradient is rasterised once
     instead of being repainted alongside the canvas. */
  will-change: transform;
  transform: translateZ(0);
  contain: strict;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 3px);
}

#game-home {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 5;
  padding: 7px 9px;
  border: 1px solid rgba(124, 232, 255, .25);
  background: rgba(6, 8, 12, .76);
  color: #9bb0bd;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
#game-home:hover, #game-home:focus-visible { color: #7ce8ff; border-color: #7ce8ff; }

#touch-controls { display: none; }

@media (pointer: coarse), (max-width: 760px) {
  body[data-input-mode="touch"] #game-home { opacity: .55; }
  body[data-input-mode="touch"] #touch-controls {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: block;
    pointer-events: none;
  }
  #touch-controls button {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(52px, 12vw, 76px);
    height: clamp(52px, 12vw, 76px);
    margin: 0;
    padding: 0;
    border: 2px solid rgba(230, 242, 248, .42);
    border-radius: 50%;
    background: rgba(13, 19, 27, .58);
    color: rgba(235, 245, 250, .82);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .28);
    font: 900 clamp(16px, 3.6vw, 24px)/1 ui-monospace, monospace;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  #touch-controls button.is-held { color: #071014; border-color: #7ce8ff; background: rgba(124, 232, 255, .86); filter: brightness(1.25); }
  .touch-pause { top: max(12px, env(safe-area-inset-top)); left: 50%; width: 52px !important; height: 44px !important; border-radius: 9px !important; transform: translateX(-50%); }
  .touch-dpad, .touch-actions { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); width: clamp(168px, 42vw, 235px); height: clamp(168px, 42vw, 235px); }
  .touch-dpad { left: max(8px, env(safe-area-inset-left)); }
  .touch-actions { right: max(8px, env(safe-area-inset-right)); }
  .touch-up, .touch-y { top: 0; left: 50%; transform: translateX(-50%); }
  .touch-down, .touch-a { bottom: 0; left: 50%; transform: translateX(-50%); }
  .touch-left, .touch-x { left: 0; top: 50%; transform: translateY(-50%); }
  .touch-right, .touch-b { right: 0; top: 50%; transform: translateY(-50%); }
  .touch-a { border-color: rgba(124, 255, 124, .58) !important; color: #9cff9c !important; }
  .touch-b { border-color: rgba(255, 100, 95, .55) !important; color: #ff8d87 !important; }
  .touch-x { border-color: rgba(124, 232, 255, .55) !important; color: #9deeff !important; }
  .touch-y { border-color: rgba(255, 217, 122, .58) !important; color: #ffe39a !important; }
}

@media (pointer: coarse) and (orientation: portrait) {
  #wrap {
    align-items: flex-start;
    padding-top: max(76px, calc(env(safe-area-inset-top) + 62px));
  }
  .touch-dpad, .touch-actions { bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (pointer: coarse) and (orientation: landscape) {
  .touch-dpad, .touch-actions {
    width: min(34vw, 48vh, 210px);
    height: min(34vw, 48vh, 210px);
  }
  #touch-controls button {
    width: clamp(52px, 14vh, 68px);
    height: clamp(52px, 14vh, 68px);
  }
}

@media (max-width: 340px) {
  .touch-dpad, .touch-actions { width: 152px; height: 152px; }
  #touch-controls button { width: 48px; height: 48px; }
}