:root { --touch-h: 200px; --pad: 140px; --bigbtn: 82px; --smallbtn: 68px; }
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
#app { position: fixed; inset: 0; touch-action: none; }
#screen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: auto; }
.hidden { display: none !important; }
.pause-btn {
  position: absolute; z-index: 15; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right));
  width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid #706deb; background: rgba(46, 44, 155, 0.75);
  color: #fff; cursor: pointer;
}
.touch { position: absolute; left: 0; right: 0; bottom: 0; height: var(--touch-h); z-index: 10; pointer-events: none; }
.touch.portrait { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 25%); }
.pad {
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom));
  width: var(--pad); height: var(--pad); border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(112,109,235,0.15), rgba(112,109,235,0.3)); border: 3px solid rgba(112,109,235,0.8);
}
.pad.active { border-color: #edf171; }
.knob { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%; background: #706deb; box-shadow: inset 0 -4px 0 #2e2c9b; pointer-events: none; }
.arr { position: absolute; width: 0; height: 0; border: 8px solid transparent; opacity: 0.75; pointer-events: none; }
.a-up { left: 50%; top: 7%; margin-left: -8px; border-bottom-color: #75cec8; border-top-width: 0; }
.a-down { left: 50%; bottom: 7%; margin-left: -8px; border-top-color: #75cec8; border-bottom-width: 0; }
.a-left { top: 50%; left: 7%; margin-top: -8px; border-right-color: #75cec8; border-left-width: 0; }
.a-right { top: 50%; right: 7%; margin-top: -8px; border-left-color: #75cec8; border-right-width: 0; }
.tbtn {
  position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; color: #fff;
  font: 700 0.78rem ui-monospace, Consolas, Menlo, monospace; letter-spacing: 0.04em; border: 3px solid #fff;
}
.tbtn.jump { right: max(14px, env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); width: var(--bigbtn); height: var(--bigbtn); background: #8e5029; border-color: #c46c71; box-shadow: inset 0 -5px 0 #553800; }
.tbtn.fire { right: calc(max(14px, env(safe-area-inset-right)) + var(--bigbtn) + 10px); bottom: calc(10px + env(safe-area-inset-bottom)); width: var(--smallbtn); height: var(--smallbtn); background: #2e2c9b; border-color: #75cec8; box-shadow: inset 0 -5px 0 #000; }
.tbtn.active { transform: translateY(3px); box-shadow: none; filter: brightness(1.3); }
.noscript { position: absolute; inset: 0; display: grid; place-items: center; }