@font-face { font-family: 'QDArial'; src: local('Arial'), url('fonts/arial.ttf') format('truetype'); }
@font-face { font-family: 'QDTrebuchet'; src: local('Trebuchet MS'), url('fonts/trebuchet.ttf') format('truetype'); }
@font-face { font-family: 'QDBit3'; src: url('fonts/bit3.ttf') format('truetype'); }
:where(html, html *) { scrollbar-width:thin; scrollbar-color:#ffb020 rgba(0,0,0,.4); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(0,0,0,.4); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#ffb020; border-radius:5px; border:2px solid transparent; background-clip:padding-box; }

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 780px; height: 550px; flex: none; transform-origin: 50% 50%; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: absolute; left: 0; top: 0; width: 780px; height: 550px; display: block; }
[hidden] { display: none !important; }

#note { position: absolute; left: 190px; top: 265px; width: 400px; text-align: center; font: 14px Arial, sans-serif; color: #ddd; }

.dpad { position: fixed; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px); gap: 5px; z-index: 50; opacity: .85; }
.dpad button { border: 0; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; font-size: 22px;
  touch-action: none; -webkit-user-select: none; user-select: none; }
.dpad button[data-d=up] { grid-column: 2; grid-row: 1; }
.dpad button[data-d=left] { grid-column: 1; grid-row: 2; }
.dpad button[data-d=act] { grid-column: 2; grid-row: 2; background: rgba(255,176,32,.6); }
.dpad button[data-d=right] { grid-column: 3; grid-row: 2; }
.dpad button[data-d=down] { grid-column: 2; grid-row: 3; }