html,body{margin:0;height:100%;background:#1c1e20;color:#e8f4d8;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;overflow:hidden}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}
#screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#1c1e20;box-shadow:0 0 0 2px #103a1e,0 8px 32px rgba(0,0,0,.6)}
#bar{display:flex;gap:12px;align-items:center;height:24px;margin-top:4px;color:#828890}
#bar a{color:#85d656;text-decoration:none}
#mutebtn{font:inherit;background:#103a1e;color:#85d656;border:1px solid #1e642c;border-radius:4px;padding:1px 8px;cursor:pointer}
#touch{position:fixed;inset:0;pointer-events:none}
#touch .tb{pointer-events:auto;position:absolute;width:56px;height:56px;border-radius:50%;border:2px solid #34963c;background:rgba(16,58,30,.55);color:#85d656;font:bold 18px ui-monospace,monospace;touch-action:none}
#touch .tb.on{background:rgba(133,214,86,.5);color:#0a0a0a}
#touch .pad{position:absolute;left:12px;bottom:12px;width:168px;height:168px}
#touch .d-left{left:0;top:56px}#touch .d-right{left:112px;top:56px}#touch .d-up{left:56px;top:0}#touch .d-down{left:56px;top:112px}
#touch .ab{position:absolute;right:12px;bottom:24px;width:150px;height:120px}
#touch .ab .tb{width:64px;height:64px}
#touch .ab .tb:nth-child(1){left:0;top:44px}#touch .ab .tb:nth-child(2){right:0;top:0}#touch .ab .tb:nth-child(3){left:0;top:-30px;width:48px;height:48px;font-size:14px}
#touch .tt{position:absolute;right:12px;top:12px}
#touch .sm{position:relative;width:44px;height:44px;font-size:14px}
body.touch #bar{position:fixed;top:6px;left:8px;height:auto}