html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body {
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#screen { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* the site's back link (added by thegrandpricks/tools/sync-games.py) and the sound/full screen buttons, alike */
#back, .corner button {
  position: fixed; top: 6px; left: 8px; z-index: 2; padding: 3px 8px; border: 0; border-radius: 3px;
  font: 12px/1.2 Verdana, Tahoma, sans-serif; color: #fff; text-decoration: none; background: rgba(0, 0, 0, .45);
  opacity: .7; cursor: pointer;
}
.corner { position: fixed; top: 6px; right: 8px; z-index: 2; display: flex; gap: 6px; }
.corner button { position: static; }
#back:hover, #back:focus-visible, .corner button:hover, .corner button:focus-visible { opacity: 1; }
[hidden] { display: none !important; }

/* touch controls: plain white outlines like the game's lines */
#pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between;
  align-items: flex-end; pointer-events: none;
  padding: 0 max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
#pad .grp { display: flex; gap: 12px; align-items: flex-end; }
#pad button {
  pointer-events: auto; touch-action: none; width: 68px; height: 68px; padding: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; border: 2px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .05); color: #fff;
  font: 10px/1 Verdana, Tahoma, sans-serif; letter-spacing: .08em;
}
#pad button.wide { width: 92px; height: 80px; }
#pad button.small { width: 44px; height: 44px; }
#pad button.on { background: rgba(255, 255, 255, .25); border-color: #fff; }
#pad svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#pad .small svg { width: 20px; height: 20px; }