:root{--font-family: system-ui, sans-serif;--instructions-text-color: #fff;--instructions-overlay-color: rgb(0 0 0 / 35%);--instructions-z-index: 1;--instructions-padding: 2rem;--joystick-z-index: 1;--joystick-size: 8rem;--joystick-knob-size: 3.5rem;--joystick-margin: 1.5rem;--joystick-color: rgb(255 255 255 / 20%);--joystick-border-color: rgb(255 255 255 / 60%);--joystick-border-width: 2px;--joystick-knob-color: rgb(255 255 255 / 70%);--instructions-title-margin-bottom: .5rem;--instructions-title-font-size-min: 1.5rem;--instructions-title-font-size-fluid: 4vw;--instructions-title-font-size-max: 2.5rem}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;font-family:var(--font-family)}canvas{display:block}#instructions{position:fixed;inset:0;z-index:var(--instructions-z-index);display:grid;place-items:end center;padding:var(--instructions-padding);color:var(--instructions-text-color);text-align:center;background:var(--instructions-overlay-color);cursor:pointer}#instructions.hidden{display:none}#joystick{position:fixed;left:calc(var(--joystick-margin) + env(safe-area-inset-left));bottom:calc(var(--joystick-margin) + env(safe-area-inset-bottom));z-index:var(--joystick-z-index);width:var(--joystick-size);height:var(--joystick-size);border:var(--joystick-border-width) solid var(--joystick-border-color);border-radius:50%;background:var(--joystick-color)}#joystick.hidden{display:none}#joystick-knob{position:absolute;top:50%;left:50%;width:var(--joystick-knob-size);height:var(--joystick-knob-size);border-radius:50%;background:var(--joystick-knob-color);transform:translate(-50%,-50%) translate(var(--knob-x, 0),var(--knob-y, 0))}#instructions h1{margin:0 0 var(--instructions-title-margin-bottom);font-size:clamp(var(--instructions-title-font-size-min),var(--instructions-title-font-size-fluid),var(--instructions-title-font-size-max))}#instructions p{margin:0}