.controls[data-v-e7c6ddb2]{-moz-column-gap:12px;grid-template-columns:auto 1fr;grid-template-areas:"dpad buttons""capL capR";align-items:center;gap:4px 12px;padding:6px 4px 2px;display:grid}.dpad[data-v-e7c6ddb2]{touch-action:none;flex:none;grid-area:dpad;width:64px;height:64px;position:relative}.dpad__btn[data-v-e7c6ddb2]{background:var(--c-dark-control);cursor:pointer;-webkit-user-select:none;user-select:none;pointer-events:none;border:none;border-radius:5px;padding:0;position:absolute;box-shadow:0 2px 3px #0000004d}.dpad__btn[data-v-e7c6ddb2]:disabled{opacity:.5;cursor:default}.dpad__btn--active[data-v-e7c6ddb2]:not(:disabled){filter:brightness(1.35)}.dpad__btn--up[data-v-e7c6ddb2]{border-radius:5px 5px 0 0;width:34%;height:50%;top:0;left:33%}.dpad__btn--down[data-v-e7c6ddb2]{border-radius:0 0 5px 5px;width:34%;height:50%;bottom:0;left:33%}.dpad__btn--left[data-v-e7c6ddb2]{border-radius:5px 0 0 5px;width:50%;height:34%;top:33%;left:0}.dpad__btn--right[data-v-e7c6ddb2]{border-radius:0 5px 5px 0;width:50%;height:34%;top:33%;right:0}.dpad__hub[data-v-e7c6ddb2]{pointer-events:none;background:#ffffff29;border-radius:50%;width:16%;height:16%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.buttons[data-v-e7c6ddb2]{grid-area:buttons;justify-content:flex-end;align-items:center;gap:14px;display:flex}.btn[data-v-e7c6ddb2]{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:50%;place-items:center;width:58px;min-width:44px;height:58px;min-height:44px;font-size:1.25rem;line-height:1;transition:transform 80ms,box-shadow 80ms;display:grid;box-shadow:0 3px 5px #00000052}.btn[data-v-e7c6ddb2]:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 2px #00000052}.btn[data-v-e7c6ddb2]:disabled{opacity:.38;cursor:default}.btn--start[data-v-e7c6ddb2]{background:var(--c-dark-control);color:var(--c-bezel-start)}.btn--stop[data-v-e7c6ddb2]{background:var(--c-accent);border:2px solid var(--c-dark-control);color:var(--c-dark-control)}.glyph[data-v-e7c6ddb2]{pointer-events:none;font-weight:700}.caption[data-v-e7c6ddb2]{letter-spacing:.16em;color:var(--c-bezel-text);font-size:.58rem;font-weight:800}.caption--left[data-v-e7c6ddb2]{text-align:center;grid-area:capL}.caption--right[data-v-e7c6ddb2]{text-align:right;grid-area:capR}@media (width>=640px){.dpad[data-v-e7c6ddb2]{width:74px;height:74px}.btn[data-v-e7c6ddb2]{width:64px;height:64px;font-size:1.4rem}}